{"slug":"cutroom","name":"Cutroom – Media Operations","version":"1.10.7","category":"dashboard","priceCents":3900,"description":"A media management dashboard template for Next.js teams that need footage, reviews, edits, release checks, and audience data in one image-led workspace. Cutroom ships ten routes for an operations overview, searchable library, upload queue, shared player, timecoded comments, reel sequence builder, neutral distribution destinations, rendition requirements, a deterministic local delivery queue, watch analytics, studio accounts, a cinematic title page, and a living component guide. Its reusable dashboard shell switches between sidebar, icon rail, and top bar layouts, and a shared overlay layer gives the modal dialog, command palette, dropdown menu, popover, tooltip, toast, tabs, date picker, sortable data table, navigation drawer, and loading skeletons one keyboard contract: Escape closes, focus is trapped and returned, and only modal layers lock scroll. Controls with no service behind them are drawn as unavailable actions that say so, never as buttons that do nothing. The Northline Pictures fixture follows five Afterlight films from source upload through the Oct 18 release. The continuous filmstrip turns one ordered row of frames into the browse rail, review timeline, sequence canvas, and version reel. Storage, transcoding, streaming, external delivery, auth, billing, analytics ingestion, and persistence remain buyer integration points. Five original cinematic stills, two self-hosted OFL variable fonts, Lucide icons, Recharts analytics, complete light and dark tokens, computed WCAG AA pairs, visible focus, and reduced motion ship in the runnable project. A framework-free HTML template edition compiles all ten routes to standalone documents with local fonts and vanilla JavaScript, so the workspace runs on a static host without a build step.","summary":"For teams reviewing and releasing video: a Next.js media dashboard template with a library, shared player, sequence builder, analytics and delivery. 10 routes.","tags":["next.js media dashboard template","video admin dashboard template","video cms ui","media library tailwind template","video review app ui","reel sequence builder"],"accent_mode":"second-hue","palette":{"bg":"#f6f6f6","surface":"#ffffff","accent":"#b8f34a","text":"#171717","line":"#d1d1d1"},"lead":{"route":"home","mode":"dark"},"darkMode":true,"pages":[{"path":"/","title":"Overview","sections":["app-shell","overview","filmstrip"]},{"path":"/library","title":"Media library","sections":["app-shell","media-library"]},{"path":"/uploads","title":"Uploads","sections":["app-shell","upload-center"]},{"path":"/player","title":"Shared player","sections":["app-shell","shared-player"]},{"path":"/editor","title":"Sequence builder","sections":["app-shell","sequence-builder"]},{"path":"/distribution","title":"Distribution","sections":["app-shell","distribution-workspace"]},{"path":"/analytics","title":"Watch analytics","sections":["app-shell","watch-analytics"]},{"path":"/people","title":"People and plan","sections":["app-shell","people-settings"]},{"path":"/title","title":"Afterlight","sections":["title-landing"]},{"path":"/components","title":"Components","sections":["app-shell","tokens","ui","ui/dialog","ui/command-palette","ui/dropdown-menu","ui/tooltip","ui/toast","ui/tabs","ui/date-picker","ui/data-table","ui/skeleton","form-showcase","chart-showcase","distribution-workspace","filmstrip","overview","media-library","upload-center","shared-player","sequence-builder","watch-analytics","people-settings","title-landing"]}],"components":[{"name":"app-shell","file":"src/components/app-shell.tsx","renders":"Responsive studio navigation adapted to persisted sidebar, icon rail, and top bar layouts with search, account context, system state, mode control, and page framing."},{"name":"overview","file":"src/components/overview.tsx","renders":"Live title hero, active audience figure, operating measures, review activity, and release checklist."},{"name":"filmstrip","file":"src/components/filmstrip.tsx","renders":"Horizontal image-led season rail, and the frame the library browse rail is built from: the theme's continuous filmstrip signature."},{"name":"media-library","file":"src/components/media-library.tsx","renders":"Searchable, status-filtered, and deterministically sorted assets on the ordered filmstrip rail, with grid and list views behind the picker, record-specific review links, source, runtime, status, and empty states."},{"name":"upload-center","file":"src/components/upload-center.tsx","renders":"Validated drag-and-drop and browse target with file type, count, and size limits; removable browser-only rows; YouTube or Vimeo URL validation; processing queue; labelled progress; and durable local states."},{"name":"shared-player","file":"src/components/shared-player.tsx","renders":"Record-specific cinematic player with a shared transport clock, working seek and copy actions, timecoded frame pins, open/closed review state, comment creation, and comment resolution."},{"name":"sequence-builder","file":"src/components/sequence-builder.tsx","renders":"Selected-clip player, inspector, draggable filmstrip, keyboard reorder controls, audio track, edit tools, and local draft state."},{"name":"distribution-workspace","file":"src/components/distribution-workspace.tsx","renders":"Four-version reel with an unavailable source, five neutral destinations, ready/review/blocked/stale and active-delivery overview, rendition matrix, central release checks, and a deterministic local queue with duplicate prevention, delivered, failure history, retry, cancel, empty, and read-only states."},{"name":"watch-analytics","file":"src/components/watch-analytics.tsx","renders":"Watch measures, semantic Recharts area chart, source cues, audience retention table, and region ranking."},{"name":"form-showcase","file":"src/components/form-showcase.tsx","renders":"Review-settings form with text, select, textarea, checkbox, switch, validation, read-only, disabled, and local saved states."},{"name":"chart-showcase","file":"src/components/chart-showcase.tsx","renders":"Five accessible Recharts patterns with semantic series tokens, redundant cues, tooltips, summaries, and loading, empty, and error states."},{"name":"people-settings","file":"src/components/people-settings.tsx","renders":"Studio roster with validated local invitations, seat capacity, clipboard receipts, confirmed removal, Prime plan, security settings, and a focusable role-permission matrix."},{"name":"title-landing","file":"src/components/title-landing.tsx","renders":"Full-bleed cinematic title page with player call to action, episode rail, story, format facts, and studio link."},{"name":"ui/button","file":"src/components/ui/button.tsx","renders":"Circular primary, secondary, ghost, media, link, and icon controls with a pending state and an unavailable action that is a labelled non-control rather than a dead button."},{"name":"ui/panel","file":"src/components/ui/panel.tsx","renders":"Card panels, paired headers, and status pills with redundant text and dot cues."},{"name":"ui/audio-waveform","file":"src/components/ui/audio-waveform.tsx","renders":"Responsive SVG audio waveform with decoded-sample input, play progress, duration labels, and semantic review markers."},{"name":"ui/mode-toggle","file":"src/components/ui/mode-toggle.tsx","renders":"Local light and dark preview control that reports its state with aria-pressed and follows the root class wherever it is changed."},{"name":"ui/dashboard-layout","file":"src/components/ui/dashboard-layout.tsx","renders":"Slot-based dashboard shell with persisted sidebar, icon rail, and top bar modes plus an accessible layout picker."},{"name":"ui/mobile-nav","file":"src/components/ui/mobile-nav.tsx","renders":"Narrow-viewport navigation drawer on the shared layer: Escape closes it, an outside press closes it, and focus returns to the button that opened it."},{"name":"ui/fields","file":"src/components/ui/fields.tsx","renders":"Semantic input, select, textarea, checkbox, and switch controls on the recessed field ground, with hover, focus-visible, valid, invalid, read-only, and disabled states."},{"name":"ui/progress","file":"src/components/ui/progress.tsx","renders":"Determinate progress bar whose role, value attributes, and fill width all read one number, in the action, accent, information, and neutral fills."},{"name":"ui/dialog","file":"src/components/ui/dialog.tsx","renders":"Modal dialog over the shared layer: veil, focus trap, focus return, and a scroll lock only a modal takes."},{"name":"ui/confirm-dialog","file":"src/components/ui/confirm-dialog.tsx","renders":"The destructive question as an alertdialog: the consequence is the accessible description and the answer that changes nothing takes focus."},{"name":"ui/popover","file":"src/components/ui/popover.tsx","renders":"Anchored non-modal panel measured from its trigger, flipped when the side has no room, and dismissed by Escape, an outside press, or Tab leaving it."},{"name":"ui/command-palette","file":"src/components/ui/command-palette.tsx","renders":"Modal ⌘K combobox over routes and media with arrow navigation, active-descendant wiring, and a no-match pane that keeps the query."},{"name":"ui/dropdown-menu","file":"src/components/ui/menu.tsx","renders":"Dropdown and labelled value menus with role=menu, roving focus, a locked row that keeps its reason out loud, both alignments, and Arrow, Home, and End keys."},{"name":"ui/tooltip","file":"src/components/ui/tooltip.tsx","renders":"Hover and keyboard-focus tooltip wired as a description, dismissed by Escape, never used as the only label."},{"name":"ui/toast","file":"src/components/ui/toast.tsx","renders":"Transient feedback queue and live region with positive, info, warning, and critical tones, each carrying a word and an icon."},{"name":"ui/tabs","file":"src/components/ui/tabs.tsx","renders":"Accessible tablist with roving tabindex, arrow, Home and End keys, a disabled tab the arrows skip, a strip that scrolls sideways, and focusable panels."},{"name":"ui/date-picker","file":"src/components/ui/date-picker.tsx","renders":"Selectable month grid in a popover with full keyboard date movement and deterministic UTC arithmetic."},{"name":"ui/data-table","file":"src/components/ui/data-table.tsx","renders":"Sortable, filterable, paginated table arranging the head, filter, and page strip parts around a scrolling table with separate no-result and empty panes."},{"name":"ui/skeleton","file":"src/components/ui/skeleton.tsx","renders":"Loading placeholders for blocks, lines, panels, and table rows, hidden from assistive technology behind one spoken pending sentence shown beside them."},{"name":"ui/search-input","file":"src/components/ui/search-input.tsx","renders":"Filter field with a leading glyph, a screen-reader label, a polite result count, and rest, filled, no-result, and disabled conditions."},{"name":"ui/sort-head","file":"src/components/ui/sort-head.tsx","renders":"Sortable column head whose aria-sort comes from state and appears only where a comparator exists, with separate cell and control offsets."},{"name":"ui/pagination","file":"src/components/ui/pagination.tsx","renders":"Page strip with an eliding target run, a live range sentence, and previous and next controls that disable at the ends."},{"name":"ui/field","file":"src/components/ui/field.tsx","renders":"Field shell carrying the label, the required marker, and one message line in error, success, then description order, with derived aria-invalid and describedby."}],"tokens":{"--background":"#f6f6f6","--foreground":"#171717","--card":"#ffffff","--card-foreground":"#171717","--primary":"#111111","--primary-foreground":"#ffffff","--primary-hover":"#303030","--primary-active":"#171717","--primary-soft":"#ececea","--primary-border":"#9a9a9a","--secondary":"#f1f1f1","--secondary-foreground":"#171717","--muted":"#ededed","--muted-foreground":"#5f5f5f","--accent":"#604b9e","--accent-foreground":"#fffaff","--accent-hover":"#4d3a84","--accent-active":"#3c2b6d","--accent-soft":"#ddd5ed","--accent-border":"#927fba","--border":"#d1d1d1","--ring":"#111111","--field":"#e2e2e2","--field-border":"#c8c8c8","--control-border":"#8f8f8f","--selection":"#dcdcdc","--selection-border":"#303030","--selection-foreground":"#171717","--scrim":"#11150d","--shadow-color":"#111111","--positive":"#1f6a44","--positive-foreground":"#f3fff7","--positive-soft":"#dff3e7","--positive-border":"#8ec9a5","--warning":"#7a4a00","--warning-foreground":"#fff9ed","--warning-soft":"#fff0cc","--warning-border":"#d5ad5d","--critical":"#a1253e","--critical-foreground":"#fff6f7","--critical-soft":"#fde3e7","--critical-border":"#df8f9d","--info":"#1f5d99","--info-foreground":"#f5faff","--info-soft":"#e1effc","--info-border":"#8eb9e1","--chart-grid":"#c8c8c8","--chart-1":"#111111","--chart-2":"#604b9e","--chart-3":"#767676","--chart-4":"#1f6a44","--media-foreground":"#f4f5ed","--media-muted":"#cbd3c4","--media-primary":"#b8f34a","--media-primary-foreground":"#11150d","--media-primary-hover":"#c8fb70","--media-primary-active":"#dcffa3","--radius":"1rem","--radius-inner":"0.75rem","--icon-stroke":"2","--display-weight":"650","--text-caption":"0.75rem","--leading-caption":"1.4","--text-small":"0.875rem","--leading-small":"1.45","--text-body":"1rem","--leading-body":"1.55","--text-lead":"1.125rem","--leading-lead":"1.55","--text-d1":"1.5rem","--leading-d1":"1.22","--text-d2":"1.6875rem","--leading-d2":"1.16","--text-d3":"clamp(1.875rem, 1.79rem + 0.38vw, 2.136rem)","--leading-d3":"1.1","--text-d4":"clamp(2.25rem, 2.1rem + 0.62vw, 2.563rem)","--leading-d4":"1.04","--text-hero":"clamp(3rem, 8vw, 7rem)","--leading-hero":"0.92","--tracking-d1":"-0.01em","--tracking-d2":"-0.015em","--tracking-d3":"-0.02em","--tracking-d4":"-0.025em","--tracking-hero":"-0.05em","--tracking-label":"0.09em","--font-display":"var(--font-cutroom-display), ui-monospace, monospace","--font-text":"var(--font-cutroom-text), ui-sans-serif, system-ui, sans-serif","--font-sans":"var(--font-text)","--font-mono":"var(--font-display)"},"tokensDark":{"--background":"#090909","--foreground":"#f5f5f5","--card":"#141414","--card-foreground":"#f5f5f5","--primary":"#b8f34a","--primary-foreground":"#203000","--primary-hover":"#c8fb70","--primary-active":"#dcffa3","--primary-soft":"#293716","--primary-border":"#607b32","--secondary":"#252525","--secondary-foreground":"#f1f1f1","--muted":"#1f1f1f","--muted-foreground":"#a3a3a3","--accent":"#b7a8ff","--accent-foreground":"#171222","--accent-hover":"#c9bdff","--accent-active":"#ddd5ff","--accent-soft":"#312b47","--accent-border":"#7267a1","--border":"#333333","--ring":"#b8f34a","--field":"#0d0d0d","--field-border":"#2a2a2a","--control-border":"#666666","--selection":"#202020","--selection-border":"#5a5a5a","--selection-foreground":"#f5f5f5","--scrim":"#050505","--shadow-color":"#000000","--positive":"#6fe0a6","--positive-foreground":"#0b1b12","--positive-soft":"#143122","--positive-border":"#2e7652","--warning":"#f2c46f","--warning-foreground":"#211704","--warning-soft":"#342712","--warning-border":"#7c6030","--critical":"#ff91a1","--critical-foreground":"#260a0f","--critical-soft":"#39171e","--critical-border":"#84404c","--info":"#8ac5ff","--info-foreground":"#071a29","--info-soft":"#14283a","--info-border":"#396789","--chart-grid":"#383838","--chart-1":"#b8f34a","--chart-2":"#b7a8ff","--chart-3":"#c4c4c4","--chart-4":"#6fe0a6","--media-foreground":"#f5f5f5","--media-muted":"#d1d1d1","--media-primary":"#b8f34a","--media-primary-foreground":"#203000","--media-primary-hover":"#c8fb70","--media-primary-active":"#dcffa3","--radius":"1rem","--radius-inner":"0.75rem","--icon-stroke":"2","--display-weight":"580","--text-caption":"0.75rem","--leading-caption":"1.4","--text-small":"0.875rem","--leading-small":"1.45","--text-body":"1rem","--leading-body":"1.55","--text-lead":"1.125rem","--leading-lead":"1.55","--text-d1":"1.5rem","--leading-d1":"1.22","--text-d2":"1.6875rem","--leading-d2":"1.16","--text-d3":"clamp(1.875rem, 1.79rem + 0.38vw, 2.136rem)","--leading-d3":"1.1","--text-d4":"clamp(2.25rem, 2.1rem + 0.62vw, 2.563rem)","--leading-d4":"1.04","--text-hero":"clamp(3rem, 8vw, 7rem)","--leading-hero":"0.92","--tracking-d1":"-0.01em","--tracking-d2":"-0.015em","--tracking-d3":"-0.02em","--tracking-d4":"-0.025em","--tracking-hero":"-0.05em","--tracking-label":"0.09em","--font-display":"var(--font-cutroom-display), ui-monospace, monospace","--font-text":"var(--font-cutroom-text), ui-sans-serif, system-ui, sans-serif","--font-sans":"var(--font-text)","--font-mono":"var(--font-display)"},"compatibility":{"next":">=15 <17","react":">=19 <20","tailwind":">=4 <5"},"dependencies":["lucide-react","recharts"],"editions":{"react":{"source":"src","runtime":"react"},"html":{"source":"html/src","output":"html/dist","engine":"nunjucks","runtime":"vanilla","buildRequired":false}},"ui_library":{"version":"1.5.2","files":["html/src/js/_tt/anchor.js","html/src/js/_tt/dialog.js","html/src/js/_tt/dropdown-menu.js","html/src/js/_tt/focusables.js","html/src/js/_tt/layer.js","html/src/js/_tt/presence.js","html/src/js/_tt/reduced-motion.js","html/src/js/_tt/roving.js","src/components/ui/_tt/active-descendant.ts","src/components/ui/_tt/anchor.ts","src/components/ui/_tt/capture.ts","src/components/ui/_tt/command-palette.axes.ts","src/components/ui/_tt/command-palette.fixtures.ts","src/components/ui/_tt/command-palette.tsx","src/components/ui/_tt/confirm-dialog.axes.ts","src/components/ui/_tt/confirm-dialog.fixtures.ts","src/components/ui/_tt/confirm-dialog.tsx","src/components/ui/_tt/dialog.axes.ts","src/components/ui/_tt/dialog.fixtures.ts","src/components/ui/_tt/dialog.tsx","src/components/ui/_tt/dropdown-menu.axes.ts","src/components/ui/_tt/dropdown-menu.fixtures.ts","src/components/ui/_tt/dropdown-menu.tsx","src/components/ui/_tt/field-ids.ts","src/components/ui/_tt/field.axes.ts","src/components/ui/_tt/field.capture.ts","src/components/ui/_tt/field.fixtures.ts","src/components/ui/_tt/field.tsx","src/components/ui/_tt/focusables.ts","src/components/ui/_tt/host.ts","src/components/ui/_tt/ids.ts","src/components/ui/_tt/layer.ts","src/components/ui/_tt/layout-effect.ts","src/components/ui/_tt/pagination.axes.ts","src/components/ui/_tt/pagination.fixtures.ts","src/components/ui/_tt/pagination.tsx","src/components/ui/_tt/popover.axes.ts","src/components/ui/_tt/popover.fixtures.ts","src/components/ui/_tt/popover.tsx","src/components/ui/_tt/presence.ts","src/components/ui/_tt/recipe.ts","src/components/ui/_tt/reduced-motion.ts","src/components/ui/_tt/roving.ts","src/components/ui/_tt/search-input.axes.ts","src/components/ui/_tt/search-input.capture.ts","src/components/ui/_tt/search-input.fixtures.ts","src/components/ui/_tt/search-input.tsx","src/components/ui/_tt/skeleton.axes.ts","src/components/ui/_tt/skeleton.fixtures.ts","src/components/ui/_tt/skeleton.tsx","src/components/ui/_tt/sort-head.axes.ts","src/components/ui/_tt/sort-head.fixtures.ts","src/components/ui/_tt/sort-head.tsx","src/components/ui/_tt/table-sort.ts","src/components/ui/_tt/tabs.axes.ts","src/components/ui/_tt/tabs.fixtures.ts","src/components/ui/_tt/tabs.tsx","src/components/ui/_tt/toast-queue.ts","src/components/ui/_tt/toast.axes.ts","src/components/ui/_tt/toast.fixtures.ts","src/components/ui/_tt/toast.tsx","src/components/ui/_tt/tooltip.axes.ts","src/components/ui/_tt/tooltip.fixtures.ts","src/components/ui/_tt/tooltip.tsx"]},"license":"standard","design":{"typefaces":{"display":"Red Hat Mono","text":"Schibsted Grotesk","mono":"Red Hat Mono"},"typeRatio":1.125,"signature":"The continuous filmstrip: one ordered row of frames becomes the library browse rail, review timeline, and sequence builder","surface_kind":"console","built_against":"2026-09-02","levers":{"theme":"near-dark","density":"compact","accent_mode":"monochrome-plus-spot","motion":"tactile","borders":"hairline","radius":"generous","texture":"none","shadow":"none"},"icons":{"set":"lucide","stroke":2,"ladder":["size-3.5","size-4","size-5"],"contexts":{"nav":"glyph","panel_header":"mark","fact_row":"none","feature_grid":"none"}},"disclosure":{"helper_line":"one-clause","sentence":"hint","paragraph":"details","parallel_views":"tabs","secondary_object":"drawer"},"colour_budget":{"brand_max_pct":10,"concentration_pct":70,"regions":[]}}}