diff --git a/.gitea/workflows/docker-build.yml b/.gitea/workflows/docker-build.yml
index 55157fe10..8ca3a240e 100644
--- a/.gitea/workflows/docker-build.yml
+++ b/.gitea/workflows/docker-build.yml
@@ -50,6 +50,33 @@ jobs:
       - name: Restore
         run: dotnet restore
 
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+          cache: npm
+          cache-dependency-path: web/package-lock.json
+
+      - name: Install SPA dependencies
+        working-directory: web
+        run: npm ci
+
+      - name: Lint SPA
+        working-directory: web
+        run: npm run lint
+
+      - name: Typecheck SPA
+        working-directory: web
+        run: npm run typecheck
+
+      - name: Test SPA
+        working-directory: web
+        run: npm test -- --run
+
+      - name: Build SPA
+        working-directory: web
+        run: npm run build
+
       - name: Strip Scanner project ref (matches Docker build)
         run: sed -i '/Scanner/d' ErsatzTV/ErsatzTV.csproj
 
diff --git a/.gitignore b/.gitignore
index f276affa0..2a77b0fcc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,3 +51,6 @@ scripts/download-test-content.sh
 docker-compose.override.yml
 
 ErsatzTV/wwwroot/v2/
+ErsatzTV/wwwroot/app/
+web/dist/
+web/node_modules/
diff --git a/ErsatzTV.Tests/StartupSpaHostingTests.cs b/ErsatzTV.Tests/StartupSpaHostingTests.cs
new file mode 100644
index 000000000..715f861d1
--- /dev/null
+++ b/ErsatzTV.Tests/StartupSpaHostingTests.cs
@@ -0,0 +1,45 @@
+using NUnit.Framework;
+using Shouldly;
+
+namespace ErsatzTV.Tests;
+
+[TestFixture]
+public class StartupSpaHostingTests
+{
+    private static readonly string StartupSource = File.ReadAllText(FindStartupPath());
+
+    [Test]
+    public void Startup_Should_Mount_ChicoryTv_Spa_At_App_Path()
+    {
+        StartupSource.ShouldContain("ctx.Request.Path.StartsWithSegments(\"/app\")");
+        StartupSource.ShouldContain("MapWhen(");
+        StartupSource.ShouldContain("SpaStaticFileRoot");
+        StartupSource.ShouldContain("RequestPath = \"/app\"");
+        StartupSource.ShouldContain("appIndexFile");
+    }
+
+    [Test]
+    public void Startup_Should_Not_Send_App_Routes_To_Blazor_Fallback()
+    {
+        StartupSource.ShouldContain("!IsSpaPath(ctx.Request.Path)");
+        StartupSource.ShouldContain("bool IsSpaPath(PathString path)");
+    }
+
+    private static string FindStartupPath()
+    {
+        DirectoryInfo? directory = new(TestContext.CurrentContext.TestDirectory);
+
+        while (directory is not null)
+        {
+            string candidate = Path.Combine(directory.FullName, "ErsatzTV", "Startup.cs");
+            if (File.Exists(candidate))
+            {
+                return candidate;
+            }
+
+            directory = directory.Parent;
+        }
+
+        throw new FileNotFoundException("Could not find ErsatzTV/Startup.cs");
+    }
+}
diff --git a/ErsatzTV/Startup.cs b/ErsatzTV/Startup.cs
index 0e333f292..71f265cca 100644
--- a/ErsatzTV/Startup.cs
+++ b/ErsatzTV/Startup.cs
@@ -681,7 +681,42 @@ public class Startup
         });
 
         app.MapWhen(
-            ctx => !IsIptvPath(ctx.Request.Path),
+            ctx => ctx.Request.Path.StartsWithSegments("/app"),
+            spa =>
+            {
+                string spaStaticFileRoot = SpaStaticFileRoot();
+                IFileProvider spaFileProvider = Directory.Exists(spaStaticFileRoot)
+                    ? new PhysicalFileProvider(spaStaticFileRoot)
+                    : new NullFileProvider();
+
+                spa.UseStaticFiles(
+                    new StaticFileOptions
+                    {
+                        FileProvider = spaFileProvider,
+                        RequestPath = "/app"
+                    });
+
+                spa.Run(
+                    async context =>
+                    {
+                        Microsoft.Extensions.FileProviders.IFileInfo appIndexFile =
+                            spaFileProvider.GetFileInfo("index.html");
+                        if (!appIndexFile.Exists)
+                        {
+                            context.Response.StatusCode = StatusCodes.Status404NotFound;
+                            return;
+                        }
+
+                        context.Response.ContentType = "text/html; charset=utf-8";
+                        context.Response.ContentLength = appIndexFile.Length;
+
+                        await using Stream stream = appIndexFile.CreateReadStream();
+                        await stream.CopyToAsync(context.Response.Body);
+                    });
+            });
+
+        app.MapWhen(
+            ctx => !IsIptvPath(ctx.Request.Path) && !IsSpaPath(ctx.Request.Path),
             blazor =>
             {
                 blazor.UseRouting();
@@ -736,6 +771,16 @@ public class Startup
                    path.StartsWithSegments("/lineup.json") ||
                    path.StartsWithSegments("/lineup_status.json");
         }
+
+        bool IsSpaPath(PathString path) => path.StartsWithSegments("/app");
+
+        string SpaStaticFileRoot()
+        {
+            string webRootPath = CurrentEnvironment.WebRootPath ??
+                                 Path.Combine(CurrentEnvironment.ContentRootPath, "wwwroot");
+
+            return Path.Combine(webRootPath, "app");
+        }
     }
 
     private static void CustomServices(IServiceCollection services)
diff --git a/design-system/Canvas.dc.html b/design-system/Canvas.dc.html
new file mode 100644
index 000000000..c795a2fcd
--- /dev/null
+++ b/design-system/Canvas.dc.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+
+</x-dc>
+</body>
+</html>
diff --git a/design-system/SKILL.md b/design-system/SKILL.md
new file mode 100644
index 000000000..35b7a0d21
--- /dev/null
+++ b/design-system/SKILL.md
@@ -0,0 +1,17 @@
+---
+name: chicorytv-design
+description: Use this skill to generate well-branded interfaces and assets for ChicoryTV, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
+user-invocable: true
+---
+
+Read the README.md file within this skill, and explore the other available files.
+If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.
+If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.
+
+Quick map:
+- `readme.md` — brand context, content & visual foundations, iconography, file index.
+- `styles.css` — the single entry point; link it and use the CSS custom properties.
+- `tokens/` — color, type, spacing, radius/elevation/motion tokens + font loading.
+- `components/` — React primitives (forms, data-display, feedback, navigation).
+- `templates/chicorytv-admin/` — full admin shell to start from / copy screens out of (incl. the library-to-lineup Channel Builder).
+- `assets/` — chicory-flower mark, wordmark, app icon.
diff --git a/design-system/_adherence.oxlintrc.json b/design-system/_adherence.oxlintrc.json
new file mode 100644
index 000000000..9339acdb7
--- /dev/null
+++ b/design-system/_adherence.oxlintrc.json
@@ -0,0 +1,470 @@
+{
+  "plugins": [
+    "react",
+    "import"
+  ],
+  "rules": {
+    "react/forbid-elements": [
+      "warn",
+      {
+        "forbid": []
+      }
+    ],
+    "no-restricted-imports": [
+      "warn",
+      {
+        "patterns": [
+          {
+            "group": [
+              "components/data-display/**",
+              "components/feedback/**",
+              "components/forms/**",
+              "components/navigation/**",
+              "design_handoff_channel_builder/**"
+            ],
+            "message": "Import design-system components from 'index.js', not component internals."
+          }
+        ]
+      }
+    ],
+    "no-restricted-syntax": [
+      "warn",
+      {
+        "selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
+        "message": "Raw hex color — use a design-system color token via var()."
+      },
+      {
+        "selector": "Literal[value=/\\b\\d+px\\b/]",
+        "message": "Raw px value — use a design-system spacing token via var()."
+      },
+      {
+        "selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:Geist|Geist Mono))/i]",
+        "message": "Font not provided by the design system. Available: Geist, Geist Mono."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|tone|solid|dot|style|key|ref|className|style|children)$/]",
+        "message": "<Badge> doesn't accept that prop. Declared props: children, tone, solid, dot, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:neutral|accent|ok|warn|error)$/]",
+        "message": "<Badge> tone must be one of 'neutral' | 'accent' | 'ok' | 'warn' | 'error'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|size|startIcon|endIcon|disabled|loading|fullWidth|type|onClick|style|key|ref|className|style|children)$/]",
+        "message": "<Button> doesn't accept that prop. Declared props: children, variant, size, startIcon, endIcon, disabled, loading, fullWidth, type, onClick, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:primary|secondary|ghost|danger)$/]",
+        "message": "<Button> variant must be one of 'primary' | 'secondary' | 'ghost' | 'danger'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md)$/]",
+        "message": "<Button> size must be one of 'sm' | 'md'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:button|submit|reset)$/]",
+        "message": "<Button> type must be one of 'button' | 'submit' | 'reset'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Card'] > JSXAttribute > JSXIdentifier[name!=/^(?:title|subtitle|actions|children|padded|inset|style|key|ref|className|style|children)$/]",
+        "message": "<Card> doesn't accept that prop. Declared props: title, subtitle, actions, children, padded, inset, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ChannelLogo'] > JSXAttribute > JSXIdentifier[name!=/^(?:name|src|size|radius|style|key|ref|className|style|children)$/]",
+        "message": "<ChannelLogo> doesn't accept that prop. Declared props: name, src, size, radius, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Checkbox'] > JSXAttribute > JSXIdentifier[name!=/^(?:checked|onChange|label|indeterminate|disabled|style|key|ref|className|style|children)$/]",
+        "message": "<Checkbox> doesn't accept that prop. Declared props: checked, onChange, label, indeterminate, disabled, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|size|variant|active|disabled|title|onClick|style|key|ref|className|style|children)$/]",
+        "message": "<IconButton> doesn't accept that prop. Declared props: children, size, variant, active, disabled, title, onClick, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md)$/]",
+        "message": "<IconButton> size must be one of 'sm' | 'md'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:ghost|solid)$/]",
+        "message": "<IconButton> variant must be one of 'ghost' | 'solid'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|value|onChange|placeholder|leadingIcon|trailing|error|disabled|size|type|fullWidth|style|key|ref|className|style|children)$/]",
+        "message": "<Input> doesn't accept that prop. Declared props: label, value, onChange, placeholder, leadingIcon, trailing, error, disabled, size, type, fullWidth, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md)$/]",
+        "message": "<Input> size must be one of 'sm' | 'md'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='NavItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:icon|label|active|badge|badgeTone|href|onClick|style|key|ref|className|style|children)$/]",
+        "message": "<NavItem> doesn't accept that prop. Declared props: icon, label, active, badge, badgeTone, href, onClick, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='NavItem'] > JSXAttribute[name.name='badgeTone'] > Literal[value!=/^(?:warn|error|accent)$/]",
+        "message": "<NavItem> badgeTone must be one of 'warn' | 'error' | 'accent'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ProgressBar'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|tone|height|showLabel|style|key|ref|className|style|children)$/]",
+        "message": "<ProgressBar> doesn't accept that prop. Declared props: value, tone, height, showLabel, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ProgressBar'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:accent|ok|warn|error)$/]",
+        "message": "<ProgressBar> tone must be one of 'accent' | 'ok' | 'warn' | 'error'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='SelectOption'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|label|key|ref|className|style|children)$/]",
+        "message": "<SelectOption> doesn't accept that prop. Declared props: value, label."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Spinner'] > JSXAttribute > JSXIdentifier[name!=/^(?:size|tone|stroke|style|key|ref|className|style|children)$/]",
+        "message": "<Spinner> doesn't accept that prop. Declared props: size, tone, stroke, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Spinner'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:accent|muted|ok)$/]",
+        "message": "<Spinner> tone must be one of 'accent' | 'muted' | 'ok'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Stat'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|value|unit|delta|deltaTone|icon|style|key|ref|className|style|children)$/]",
+        "message": "<Stat> doesn't accept that prop. Declared props: label, value, unit, delta, deltaTone, icon, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Stat'] > JSXAttribute[name.name='deltaTone'] > Literal[value!=/^(?:up|down|neutral)$/]",
+        "message": "<Stat> deltaTone must be one of 'up' | 'down' | 'neutral'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='StatusDot'] > JSXAttribute > JSXIdentifier[name!=/^(?:status|pulse|size|label|style|key|ref|className|style|children)$/]",
+        "message": "<StatusDot> doesn't accept that prop. Declared props: status, pulse, size, label, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='StatusDot'] > JSXAttribute[name.name='status'] > Literal[value!=/^(?:live|ok|warn|error|idle)$/]",
+        "message": "<StatusDot> status must be one of 'live' | 'ok' | 'warn' | 'error' | 'idle'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Switch'] > JSXAttribute > JSXIdentifier[name!=/^(?:checked|onChange|label|disabled|size|style|key|ref|className|style|children)$/]",
+        "message": "<Switch> doesn't accept that prop. Declared props: checked, onChange, label, disabled, size, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Switch'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md)$/]",
+        "message": "<Switch> size must be one of 'sm' | 'md'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='TabItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|label|icon|count|key|ref|className|style|children)$/]",
+        "message": "<TabItem> doesn't accept that prop. Declared props: value, label, icon, count."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|onRemove|icon|tone|style|key|ref|className|style|children)$/]",
+        "message": "<Tag> doesn't accept that prop. Declared props: children, onRemove, icon, tone, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:neutral|accent)$/]",
+        "message": "<Tag> tone must be one of 'neutral' | 'accent'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Toast'] > JSXAttribute > JSXIdentifier[name!=/^(?:tone|title|message|onClose|style|key|ref|className|style|children)$/]",
+        "message": "<Toast> doesn't accept that prop. Declared props: tone, title, message, onClose, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Toast'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:info|ok|warn|error)$/]",
+        "message": "<Toast> tone must be one of 'info' | 'ok' | 'warn' | 'error'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Tooltip'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|placement|children|style|key|ref|className|style|children)$/]",
+        "message": "<Tooltip> doesn't accept that prop. Declared props: label, placement, children, style."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Tooltip'] > JSXAttribute[name.name='placement'] > Literal[value!=/^(?:top|bottom|left|right)$/]",
+        "message": "<Tooltip> placement must be one of 'top' | 'bottom' | 'left' | 'right'."
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/index.js"
+      ],
+      "rules": {
+        "no-restricted-imports": "off"
+      }
+    }
+  ],
+  "x-omelette": {
+    "components": {
+      "Badge": {
+        "replaces": []
+      },
+      "Button": {
+        "replaces": []
+      },
+      "Card": {
+        "replaces": []
+      },
+      "ChannelLogo": {
+        "replaces": []
+      },
+      "Checkbox": {
+        "replaces": []
+      },
+      "IconButton": {
+        "replaces": []
+      },
+      "Input": {
+        "replaces": []
+      },
+      "NavItem": {
+        "replaces": []
+      },
+      "ProgressBar": {
+        "replaces": []
+      },
+      "SelectOption": {
+        "replaces": []
+      },
+      "Spinner": {
+        "replaces": []
+      },
+      "Stat": {
+        "replaces": []
+      },
+      "StatusDot": {
+        "replaces": []
+      },
+      "Switch": {
+        "replaces": []
+      },
+      "TabItem": {
+        "replaces": []
+      },
+      "Tag": {
+        "replaces": []
+      },
+      "Toast": {
+        "replaces": []
+      },
+      "Tooltip": {
+        "replaces": []
+      }
+    },
+    "tokens": [
+      "--action-primary",
+      "--action-primary-hover",
+      "--action-primary-press",
+      "--border-control",
+      "--border-hairline",
+      "--control-h",
+      "--control-h-sm",
+      "--ctv-accent",
+      "--ctv-accent-hover",
+      "--ctv-accent-press",
+      "--ctv-accent-ring",
+      "--ctv-accent-soft",
+      "--ctv-bg",
+      "--ctv-bg-sunken",
+      "--ctv-border",
+      "--ctv-border-strong",
+      "--ctv-error",
+      "--ctv-error-soft",
+      "--ctv-live",
+      "--ctv-live-soft",
+      "--ctv-ok",
+      "--ctv-ok-soft",
+      "--ctv-secondary",
+      "--ctv-secondary-soft",
+      "--ctv-surface",
+      "--ctv-surface-2",
+      "--ctv-surface-3",
+      "--ctv-text",
+      "--ctv-text-faint",
+      "--ctv-text-muted",
+      "--ctv-warn",
+      "--ctv-warn-soft",
+      "--dur-base",
+      "--dur-fast",
+      "--dur-slow",
+      "--ease-out",
+      "--ease-standard",
+      "--focus-ring",
+      "--font-mono",
+      "--font-sans",
+      "--gap-inline",
+      "--leading-normal",
+      "--leading-snug",
+      "--leading-tight",
+      "--numeric-feature",
+      "--pad-card",
+      "--pad-cell-x",
+      "--pad-cell-y",
+      "--pad-control-x",
+      "--pad-control-y",
+      "--pad-page",
+      "--radius-lg",
+      "--radius-md",
+      "--radius-pill",
+      "--radius-sm",
+      "--radius-xs",
+      "--ring-focus",
+      "--row-h",
+      "--shadow-lg",
+      "--shadow-md",
+      "--shadow-none",
+      "--shadow-pop",
+      "--shadow-sm",
+      "--sidebar-w",
+      "--space-0",
+      "--space-1",
+      "--space-10",
+      "--space-11",
+      "--space-12",
+      "--space-2",
+      "--space-3",
+      "--space-4",
+      "--space-5",
+      "--space-6",
+      "--space-7",
+      "--space-8",
+      "--space-9",
+      "--status-error",
+      "--status-live",
+      "--status-ok",
+      "--status-warn",
+      "--surface-app",
+      "--surface-card",
+      "--surface-raised",
+      "--surface-selected",
+      "--text-2xl",
+      "--text-2xs",
+      "--text-3xl",
+      "--text-disabled",
+      "--text-lg",
+      "--text-md",
+      "--text-on-accent",
+      "--text-primary",
+      "--text-secondary",
+      "--text-sm",
+      "--text-xl",
+      "--text-xs",
+      "--topbar-h",
+      "--tracking-caps",
+      "--tracking-normal",
+      "--tracking-tight",
+      "--tracking-wide",
+      "--weight-bold",
+      "--weight-medium",
+      "--weight-normal",
+      "--weight-semibold"
+    ],
+    "tokenKinds": {
+      "--ctv-bg": "color",
+      "--ctv-bg-sunken": "color",
+      "--ctv-surface": "color",
+      "--ctv-surface-2": "color",
+      "--ctv-surface-3": "color",
+      "--ctv-border": "color",
+      "--ctv-border-strong": "color",
+      "--ctv-text": "font",
+      "--ctv-text-muted": "font",
+      "--ctv-text-faint": "font",
+      "--ctv-accent": "color",
+      "--ctv-accent-hover": "color",
+      "--ctv-accent-press": "color",
+      "--ctv-accent-soft": "color",
+      "--ctv-accent-ring": "color",
+      "--ctv-secondary": "color",
+      "--ctv-secondary-soft": "color",
+      "--ctv-ok": "color",
+      "--ctv-ok-soft": "color",
+      "--ctv-warn": "color",
+      "--ctv-warn-soft": "color",
+      "--ctv-error": "color",
+      "--ctv-error-soft": "color",
+      "--ctv-live": "color",
+      "--ctv-live-soft": "color",
+      "--surface-app": "color",
+      "--surface-card": "color",
+      "--surface-raised": "color",
+      "--surface-selected": "color",
+      "--border-hairline": "color",
+      "--border-control": "color",
+      "--text-primary": "font",
+      "--text-secondary": "font",
+      "--text-disabled": "font",
+      "--text-on-accent": "font",
+      "--action-primary": "color",
+      "--action-primary-hover": "color",
+      "--action-primary-press": "color",
+      "--focus-ring": "color",
+      "--status-ok": "color",
+      "--status-warn": "color",
+      "--status-error": "color",
+      "--status-live": "color",
+      "--font-sans": "font",
+      "--font-mono": "font",
+      "--text-2xs": "font",
+      "--text-xs": "font",
+      "--text-sm": "font",
+      "--text-md": "font",
+      "--text-lg": "font",
+      "--text-xl": "font",
+      "--text-2xl": "font",
+      "--text-3xl": "font",
+      "--weight-normal": "font",
+      "--weight-medium": "font",
+      "--weight-semibold": "font",
+      "--weight-bold": "font",
+      "--leading-tight": "font",
+      "--leading-snug": "font",
+      "--leading-normal": "font",
+      "--tracking-tight": "font",
+      "--tracking-normal": "font",
+      "--tracking-wide": "font",
+      "--tracking-caps": "font",
+      "--numeric-feature": "other",
+      "--space-0": "spacing",
+      "--space-1": "spacing",
+      "--space-2": "spacing",
+      "--space-3": "spacing",
+      "--space-4": "spacing",
+      "--space-5": "spacing",
+      "--space-6": "spacing",
+      "--space-7": "spacing",
+      "--space-8": "spacing",
+      "--space-9": "spacing",
+      "--space-10": "spacing",
+      "--space-11": "spacing",
+      "--space-12": "spacing",
+      "--gap-inline": "spacing",
+      "--pad-control-x": "spacing",
+      "--pad-control-y": "spacing",
+      "--pad-card": "spacing",
+      "--pad-cell-x": "spacing",
+      "--pad-cell-y": "spacing",
+      "--pad-page": "spacing",
+      "--sidebar-w": "spacing",
+      "--topbar-h": "spacing",
+      "--row-h": "spacing",
+      "--control-h": "spacing",
+      "--control-h-sm": "spacing",
+      "--radius-xs": "radius",
+      "--radius-sm": "radius",
+      "--radius-md": "radius",
+      "--radius-lg": "radius",
+      "--radius-pill": "radius",
+      "--shadow-none": "shadow",
+      "--shadow-sm": "shadow",
+      "--shadow-md": "shadow",
+      "--shadow-lg": "shadow",
+      "--shadow-pop": "shadow",
+      "--ring-focus": "color",
+      "--ease-standard": "other",
+      "--ease-out": "other",
+      "--dur-fast": "other",
+      "--dur-base": "other",
+      "--dur-slow": "other"
+    },
+    "fontFamilies": [
+      "Geist",
+      "Geist Mono"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/design-system/_ds_bundle.js b/design-system/_ds_bundle.js
new file mode 100644
index 000000000..93646a7cf
--- /dev/null
+++ b/design-system/_ds_bundle.js
@@ -0,0 +1,3260 @@
+/* @ds-bundle: {"format":3,"namespace":"ChicoryTVDesignSystem_eb3b61","components":[{"name":"Badge","sourcePath":"components/data-display/Badge.jsx"},{"name":"Card","sourcePath":"components/data-display/Card.jsx"},{"name":"ChannelLogo","sourcePath":"components/data-display/ChannelLogo.jsx"},{"name":"ProgressBar","sourcePath":"components/data-display/ProgressBar.jsx"},{"name":"Stat","sourcePath":"components/data-display/Stat.jsx"},{"name":"StatusDot","sourcePath":"components/data-display/StatusDot.jsx"},{"name":"Tag","sourcePath":"components/data-display/Tag.jsx"},{"name":"Spinner","sourcePath":"components/feedback/Spinner.jsx"},{"name":"Toast","sourcePath":"components/feedback/Toast.jsx"},{"name":"Tooltip","sourcePath":"components/feedback/Tooltip.jsx"},{"name":"Button","sourcePath":"components/forms/Button.jsx"},{"name":"Checkbox","sourcePath":"components/forms/Checkbox.jsx"},{"name":"IconButton","sourcePath":"components/forms/IconButton.jsx"},{"name":"Input","sourcePath":"components/forms/Input.jsx"},{"name":"Select","sourcePath":"components/forms/Select.jsx"},{"name":"Switch","sourcePath":"components/forms/Switch.jsx"},{"name":"NavItem","sourcePath":"components/navigation/NavItem.jsx"},{"name":"NavSection","sourcePath":"components/navigation/NavItem.jsx"},{"name":"Tabs","sourcePath":"components/navigation/Tabs.jsx"}],"sourceHashes":{"components/data-display/Badge.jsx":"a2d5da49e43f","components/data-display/Card.jsx":"b6e830c9f9f0","components/data-display/ChannelLogo.jsx":"af406aecdc6a","components/data-display/ProgressBar.jsx":"54ab9452240b","components/data-display/Stat.jsx":"695d12eae330","components/data-display/StatusDot.jsx":"a924e27b2a1c","components/data-display/Tag.jsx":"bdf96d4cdf7f","components/feedback/Spinner.jsx":"13341131fe7d","components/feedback/Toast.jsx":"f18ffea8c6ce","components/feedback/Tooltip.jsx":"f17876ac005e","components/forms/Button.jsx":"fa14c86210e0","components/forms/Checkbox.jsx":"81750526a791","components/forms/IconButton.jsx":"1ea757879b1c","components/forms/Input.jsx":"8759cd8e610f","components/forms/Select.jsx":"2a3af2c7bce8","components/forms/Switch.jsx":"1fce47dca064","components/navigation/NavItem.jsx":"8b46c82d5c25","components/navigation/Tabs.jsx":"95d81be93d0f","design_handoff_channel_builder/ChannelBuilder.jsx":"904a465a69fd"},"inlinedExternals":[],"unexposedExports":[]} */
+
+(() => {
+
+const __ds_ns = (window.ChicoryTVDesignSystem_eb3b61 = window.ChicoryTVDesignSystem_eb3b61 || {});
+
+const __ds_scope = {};
+
+(__ds_ns.__errors = __ds_ns.__errors || []);
+
+// components/data-display/Badge.jsx
+try { (() => {
+const tones = {
+  neutral: {
+    fg: "var(--text-secondary)",
+    bg: "var(--ctv-surface-3)",
+    bd: "var(--border-hairline)"
+  },
+  accent: {
+    fg: "var(--ctv-accent)",
+    bg: "var(--ctv-accent-soft)",
+    bd: "rgba(91,124,250,0.35)"
+  },
+  ok: {
+    fg: "var(--status-ok)",
+    bg: "var(--ctv-ok-soft)",
+    bd: "rgba(63,185,132,0.35)"
+  },
+  warn: {
+    fg: "var(--status-warn)",
+    bg: "var(--ctv-warn-soft)",
+    bd: "rgba(224,168,61,0.35)"
+  },
+  error: {
+    fg: "var(--status-error)",
+    bg: "var(--ctv-error-soft)",
+    bd: "rgba(229,72,77,0.35)"
+  }
+};
+
+/**
+ * Small status/label badge. Soft (tinted) or solid.
+ */
+function Badge({
+  children,
+  tone = "neutral",
+  solid = false,
+  dot = false,
+  style = {}
+}) {
+  const t = tones[tone] || tones.neutral;
+  const solidBg = {
+    neutral: "var(--ctv-surface-3)",
+    accent: "var(--ctv-accent)",
+    ok: "var(--status-ok)",
+    warn: "var(--status-warn)",
+    error: "var(--status-error)"
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "5px",
+      height: "20px",
+      padding: dot ? "0 8px 0 6px" : "0 8px",
+      borderRadius: "var(--radius-xs)",
+      font: `var(--weight-medium) var(--text-2xs)/1 var(--font-sans)`,
+      letterSpacing: "0.02em",
+      color: solid ? tone === "warn" ? "#1A1206" : "#fff" : t.fg,
+      background: solid ? solidBg[tone] : t.bg,
+      border: solid ? "1px solid transparent" : `1px solid ${t.bd}`,
+      whiteSpace: "nowrap",
+      ...style
+    }
+  }, dot && /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 6,
+      height: 6,
+      borderRadius: "50%",
+      background: solid ? "rgba(255,255,255,0.9)" : t.fg
+    }
+  }), children);
+}
+Object.assign(__ds_scope, { Badge });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data-display/Badge.jsx", error: String((e && e.message) || e) }); }
+
+// components/data-display/Card.jsx
+try { (() => {
+/**
+ * Surface container. Optional header (title + actions) and body padding.
+ */
+function Card({
+  title,
+  subtitle,
+  actions = null,
+  children,
+  padded = true,
+  inset = false,
+  style = {}
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: inset ? "var(--ctv-bg-sunken)" : "var(--surface-card)",
+      border: "1px solid var(--border-hairline)",
+      borderRadius: "var(--radius-md)",
+      overflow: "hidden",
+      ...style
+    }
+  }, (title || actions) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "12px",
+      padding: "13px 16px",
+      borderBottom: "1px solid var(--border-hairline)"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      minWidth: 0
+    }
+  }, title && /*#__PURE__*/React.createElement("div", {
+    style: {
+      font: "var(--weight-semibold) var(--text-md)/1.2 var(--font-sans)",
+      color: "var(--text-primary)"
+    }
+  }, title), subtitle && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 3,
+      font: "var(--text-xs)/1.3 var(--font-sans)",
+      color: "var(--text-secondary)"
+    }
+  }, subtitle)), actions && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      flex: "0 0 auto"
+    }
+  }, actions)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: padded ? "16px" : 0
+    }
+  }, children));
+}
+Object.assign(__ds_scope, { Card });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data-display/Card.jsx", error: String((e && e.message) || e) }); }
+
+// components/data-display/ChannelLogo.jsx
+try { (() => {
+const palette = [["#5B7CFA", "#2E3A66"], ["#3FB984", "#1E4536"], ["#E0A83D", "#4A3818"], ["#E5484D", "#4A1F21"], ["#B06CF0", "#38235A"], ["#48B0C8", "#193E47"]];
+function hashIndex(str) {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) h = h * 31 + str.charCodeAt(i) >>> 0;
+  return h % palette.length;
+}
+
+/**
+ * Channel logo tile. Renders an image when given, else a generated
+ * initials chip keyed to the channel name — mirrors ErsatzTV's logo/gen.
+ */
+function ChannelLogo({
+  name = "",
+  src = null,
+  size = 40,
+  radius = "var(--radius-sm)",
+  style = {}
+}) {
+  const [fg, bg] = palette[hashIndex(name)];
+  const initials = name.split(/[\s\-|:]+/).filter(Boolean).slice(0, 2).map(w => w[0]).join("").toUpperCase() || "?";
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: size,
+      height: size,
+      flex: "0 0 auto",
+      overflow: "hidden",
+      borderRadius: radius,
+      background: src ? "var(--ctv-bg-sunken)" : bg,
+      border: "1px solid var(--border-hairline)",
+      ...style
+    }
+  }, src ? /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: name,
+    style: {
+      maxWidth: "100%",
+      maxHeight: "100%",
+      objectFit: "contain"
+    }
+  }) : /*#__PURE__*/React.createElement("span", {
+    style: {
+      font: `var(--weight-semibold) ${Math.round(size * 0.34)}px/1 var(--font-mono)`,
+      color: fg,
+      letterSpacing: "0.02em"
+    }
+  }, initials));
+}
+Object.assign(__ds_scope, { ChannelLogo });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data-display/ChannelLogo.jsx", error: String((e && e.message) || e) }); }
+
+// components/data-display/ProgressBar.jsx
+try { (() => {
+const toneColor = {
+  accent: "var(--action-primary)",
+  ok: "var(--status-ok)",
+  warn: "var(--status-warn)",
+  error: "var(--status-error)"
+};
+
+/**
+ * Thin determinate/indeterminate progress bar — library scans, transcodes.
+ */
+function ProgressBar({
+  value = null,
+  tone = "accent",
+  height = 6,
+  showLabel = false,
+  style = {}
+}) {
+  const c = toneColor[tone] || toneColor.accent;
+  const indeterminate = value == null;
+  const pct = Math.max(0, Math.min(100, value ?? 0));
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+      ...style
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      flex: 1,
+      height,
+      borderRadius: "var(--radius-pill)",
+      background: "var(--ctv-surface-3)",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("style", null, `@keyframes ctv-indet{0%{left:-40%}100%{left:100%}}`), indeterminate ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      width: "40%",
+      borderRadius: "inherit",
+      background: c,
+      animation: "ctv-indet 1.1s var(--ease-standard) infinite"
+    }
+  }) : /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      bottom: 0,
+      width: `${pct}%`,
+      borderRadius: "inherit",
+      background: c,
+      transition: "width var(--dur-slow) var(--ease-out)"
+    }
+  })), showLabel && !indeterminate && /*#__PURE__*/React.createElement("span", {
+    style: {
+      font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)",
+      color: "var(--text-secondary)",
+      minWidth: 34,
+      textAlign: "right",
+      fontVariantNumeric: "tabular-nums"
+    }
+  }, Math.round(pct), "%"));
+}
+Object.assign(__ds_scope, { ProgressBar });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data-display/ProgressBar.jsx", error: String((e && e.message) || e) }); }
+
+// components/data-display/Stat.jsx
+try { (() => {
+/**
+ * Dashboard metric. Big mono value, label, optional delta + icon.
+ */
+function Stat({
+  label,
+  value,
+  unit,
+  delta = null,
+  deltaTone = "neutral",
+  icon = null,
+  style = {}
+}) {
+  const dc = {
+    up: "var(--status-ok)",
+    down: "var(--status-error)",
+    neutral: "var(--text-secondary)"
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      ...style
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "7px"
+    }
+  }, icon && /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      color: "var(--text-disabled)"
+    }
+  }, icon), /*#__PURE__*/React.createElement("span", {
+    style: {
+      font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+      letterSpacing: "0.03em",
+      color: "var(--text-secondary)"
+    }
+  }, label)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "baseline",
+      gap: "6px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      font: "var(--weight-semibold) var(--text-2xl)/1 var(--font-mono)",
+      color: "var(--text-primary)",
+      letterSpacing: "-0.01em",
+      fontVariantNumeric: "tabular-nums"
+    }
+  }, value), unit && /*#__PURE__*/React.createElement("span", {
+    style: {
+      font: "var(--text-sm)/1 var(--font-sans)",
+      color: "var(--text-disabled)"
+    }
+  }, unit), delta != null && /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 2,
+      font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)",
+      color: dc[deltaTone]
+    }
+  }, delta)));
+}
+Object.assign(__ds_scope, { Stat });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data-display/Stat.jsx", error: String((e && e.message) || e) }); }
+
+// components/data-display/StatusDot.jsx
+try { (() => {
+const colors = {
+  live: "var(--status-live)",
+  ok: "var(--status-ok)",
+  warn: "var(--status-warn)",
+  error: "var(--status-error)",
+  idle: "var(--text-disabled)"
+};
+
+/**
+ * Status dot with optional pulsing ring — on-air / live indicators.
+ */
+function StatusDot({
+  status = "idle",
+  pulse = false,
+  size = 8,
+  label,
+  style = {}
+}) {
+  const c = colors[status] || colors.idle;
+  const doPulse = pulse || status === "live";
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "7px",
+      ...style
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "relative",
+      width: size,
+      height: size,
+      flex: "0 0 auto"
+    }
+  }, doPulse && /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      borderRadius: "50%",
+      background: c,
+      animation: "ctv-ping 1.6s cubic-bezier(0,0,0.2,1) infinite"
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      borderRadius: "50%",
+      background: c,
+      boxShadow: doPulse ? `0 0 6px ${c}` : "none"
+    }
+  }), /*#__PURE__*/React.createElement("style", null, `@keyframes ctv-ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.4);opacity:0}}`)), label && /*#__PURE__*/React.createElement("span", {
+    style: {
+      font: "var(--text-xs)/1 var(--font-sans)",
+      color: "var(--text-secondary)"
+    }
+  }, label));
+}
+Object.assign(__ds_scope, { StatusDot });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data-display/StatusDot.jsx", error: String((e && e.message) || e) }); }
+
+// components/data-display/Tag.jsx
+try { (() => {
+/**
+ * Removable chip/tag — smart-collection filters, tags on media.
+ */
+function Tag({
+  children,
+  onRemove,
+  icon = null,
+  tone = "neutral",
+  style = {}
+}) {
+  const [hover, setHover] = React.useState(false);
+  const tint = tone === "accent";
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "6px",
+      height: "22px",
+      padding: onRemove ? "0 5px 0 8px" : "0 9px",
+      borderRadius: "var(--radius-xs)",
+      font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+      color: tint ? "var(--ctv-accent)" : "var(--text-primary)",
+      background: tint ? "var(--ctv-accent-soft)" : "var(--ctv-surface-3)",
+      border: `1px solid ${tint ? "rgba(91,124,250,0.35)" : "var(--border-hairline)"}`,
+      whiteSpace: "nowrap",
+      ...style
+    }
+  }, icon && /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      color: "var(--text-disabled)"
+    }
+  }, icon), children, onRemove && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onRemove,
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    "aria-label": "Remove",
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: 15,
+      height: 15,
+      padding: 0,
+      border: "none",
+      borderRadius: "3px",
+      cursor: "pointer",
+      color: hover ? "var(--text-primary)" : "var(--text-disabled)",
+      background: hover ? "rgba(255,255,255,0.08)" : "transparent"
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "10",
+    height: "10",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 6l12 12M18 6L6 18",
+    stroke: "currentColor",
+    strokeWidth: "2.4",
+    strokeLinecap: "round"
+  }))));
+}
+Object.assign(__ds_scope, { Tag });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/data-display/Tag.jsx", error: String((e && e.message) || e) }); }
+
+// components/feedback/Spinner.jsx
+try { (() => {
+/**
+ * Indeterminate ring spinner.
+ */
+function Spinner({
+  size = 18,
+  tone = "accent",
+  stroke = 2.4,
+  style = {}
+}) {
+  const c = {
+    accent: "var(--action-primary)",
+    muted: "var(--text-disabled)",
+    ok: "var(--status-ok)"
+  }[tone] || "var(--action-primary)";
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      ...style
+    }
+  }, /*#__PURE__*/React.createElement("style", null, `@keyframes ctv-spin{to{transform:rotate(360deg)}}`), /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    style: {
+      animation: "ctv-spin 0.7s linear infinite"
+    }
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9",
+    stroke: c,
+    strokeOpacity: "0.2",
+    strokeWidth: stroke
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M21 12a9 9 0 0 0-9-9",
+    stroke: c,
+    strokeWidth: stroke,
+    strokeLinecap: "round"
+  })));
+}
+Object.assign(__ds_scope, { Spinner });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/feedback/Spinner.jsx", error: String((e && e.message) || e) }); }
+
+// components/feedback/Toast.jsx
+try { (() => {
+const map = {
+  ok: {
+    c: "var(--status-ok)",
+    bg: "var(--ctv-ok-soft)",
+    icon: "M5 12.5l4.5 4.5L19 7"
+  },
+  warn: {
+    c: "var(--status-warn)",
+    bg: "var(--ctv-warn-soft)",
+    icon: "M12 8v5M12 17h.01"
+  },
+  error: {
+    c: "var(--status-error)",
+    bg: "var(--ctv-error-soft)",
+    icon: "M12 8v5M12 17h.01"
+  },
+  info: {
+    c: "var(--ctv-accent)",
+    bg: "var(--ctv-accent-soft)",
+    icon: "M12 11v5M12 8h.01"
+  }
+};
+
+/**
+ * Toast / inline alert. Icon, message, optional close.
+ */
+function Toast({
+  tone = "info",
+  title,
+  message,
+  onClose,
+  style = {}
+}) {
+  const t = map[tone] || map.info;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "status",
+    style: {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "11px",
+      width: "min(380px, 100%)",
+      padding: "12px 13px",
+      background: "var(--surface-raised)",
+      border: "1px solid var(--border-hairline)",
+      borderLeft: `2px solid ${t.c}`,
+      borderRadius: "var(--radius-md)",
+      boxShadow: "var(--shadow-md)",
+      ...style
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: 22,
+      height: 22,
+      borderRadius: "var(--radius-xs)",
+      background: t.bg,
+      flex: "0 0 auto",
+      marginTop: 1
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9",
+    stroke: t.c,
+    strokeWidth: "0",
+    fill: "none"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: t.icon,
+    stroke: t.c,
+    strokeWidth: "2.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, title && /*#__PURE__*/React.createElement("div", {
+    style: {
+      font: "var(--weight-semibold) var(--text-sm)/1.3 var(--font-sans)",
+      color: "var(--text-primary)"
+    }
+  }, title), message && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: title ? 2 : 0,
+      font: "var(--text-xs)/1.45 var(--font-sans)",
+      color: "var(--text-secondary)"
+    }
+  }, message)), onClose && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onClose,
+    "aria-label": "Dismiss",
+    style: {
+      display: "inline-flex",
+      padding: 3,
+      border: "none",
+      background: "transparent",
+      color: "var(--text-disabled)",
+      cursor: "pointer",
+      flex: "0 0 auto"
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 6l12 12M18 6L6 18",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }))));
+}
+Object.assign(__ds_scope, { Toast });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/feedback/Toast.jsx", error: String((e && e.message) || e) }); }
+
+// components/feedback/Tooltip.jsx
+try { (() => {
+/**
+ * Hover tooltip. Wraps a trigger; shows a small dark label.
+ */
+function Tooltip({
+  label,
+  placement = "top",
+  children,
+  style = {}
+}) {
+  const [show, setShow] = React.useState(false);
+  const pos = {
+    top: {
+      bottom: "calc(100% + 7px)",
+      left: "50%",
+      transform: "translateX(-50%)"
+    },
+    bottom: {
+      top: "calc(100% + 7px)",
+      left: "50%",
+      transform: "translateX(-50%)"
+    },
+    left: {
+      right: "calc(100% + 7px)",
+      top: "50%",
+      transform: "translateY(-50%)"
+    },
+    right: {
+      left: "calc(100% + 7px)",
+      top: "50%",
+      transform: "translateY(-50%)"
+    }
+  }[placement];
+  return /*#__PURE__*/React.createElement("span", {
+    onMouseEnter: () => setShow(true),
+    onMouseLeave: () => setShow(false),
+    style: {
+      position: "relative",
+      display: "inline-flex",
+      ...style
+    }
+  }, children, show && label && /*#__PURE__*/React.createElement("span", {
+    role: "tooltip",
+    style: {
+      position: "absolute",
+      zIndex: 50,
+      ...pos,
+      padding: "5px 9px",
+      borderRadius: "var(--radius-sm)",
+      background: "var(--ctv-surface-3)",
+      border: "1px solid var(--border-control)",
+      boxShadow: "var(--shadow-pop)",
+      color: "var(--text-primary)",
+      font: "var(--weight-medium) var(--text-xs)/1.2 var(--font-sans)",
+      whiteSpace: "nowrap",
+      pointerEvents: "none"
+    }
+  }, label));
+}
+Object.assign(__ds_scope, { Tooltip });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/feedback/Tooltip.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/Button.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const sizeMap = {
+  sm: {
+    height: "var(--control-h-sm)",
+    padding: "0 12px",
+    font: "var(--text-xs)"
+  },
+  md: {
+    height: "var(--control-h)",
+    padding: "0 14px",
+    font: "var(--text-sm)"
+  }
+};
+const variantStyle = {
+  primary: {
+    background: "var(--action-primary)",
+    color: "var(--text-on-accent)",
+    border: "1px solid transparent"
+  },
+  secondary: {
+    background: "var(--ctv-surface-2)",
+    color: "var(--text-primary)",
+    border: "1px solid var(--border-control)"
+  },
+  ghost: {
+    background: "transparent",
+    color: "var(--text-secondary)",
+    border: "1px solid transparent"
+  },
+  danger: {
+    background: "var(--ctv-error-soft)",
+    color: "var(--status-error)",
+    border: "1px solid rgba(229,72,77,0.35)"
+  }
+};
+const hoverBg = {
+  primary: "var(--action-primary-hover)",
+  secondary: "var(--ctv-surface-3)",
+  ghost: "var(--ctv-surface-2)",
+  danger: "rgba(229,72,77,0.22)"
+};
+
+/**
+ * ChicoryTV primary action button.
+ */
+function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  startIcon = null,
+  endIcon = null,
+  disabled = false,
+  loading = false,
+  fullWidth = false,
+  onClick,
+  type = "button",
+  style = {},
+  ...rest
+}) {
+  const [hover, setHover] = React.useState(false);
+  const [active, setActive] = React.useState(false);
+  const s = sizeMap[size] || sizeMap.md;
+  const v = variantStyle[variant] || variantStyle.primary;
+  const isDisabled = disabled || loading;
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: type,
+    disabled: isDisabled,
+    onClick: onClick,
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => {
+      setHover(false);
+      setActive(false);
+    },
+    onMouseDown: () => setActive(true),
+    onMouseUp: () => setActive(false),
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "7px",
+      height: s.height,
+      padding: s.padding,
+      width: fullWidth ? "100%" : "auto",
+      font: `var(--weight-medium) ${s.font}/1 var(--font-sans)`,
+      letterSpacing: "0.01em",
+      borderRadius: "var(--radius-sm)",
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      opacity: isDisabled ? 0.45 : 1,
+      whiteSpace: "nowrap",
+      transition: "background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard)",
+      transform: active && !isDisabled ? "translateY(0.5px)" : "none",
+      ...v,
+      background: !isDisabled && hover ? hoverBg[variant] : v.background,
+      ...style
+    }
+  }, rest), loading ? /*#__PURE__*/React.createElement(Spinner16, null) : startIcon, children, !loading && endIcon);
+}
+function Spinner16() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    style: {
+      animation: "ctv-spin 0.7s linear infinite"
+    }
+  }, /*#__PURE__*/React.createElement("style", null, `@keyframes ctv-spin{to{transform:rotate(360deg)}}`), /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "9",
+    stroke: "currentColor",
+    strokeOpacity: "0.25",
+    strokeWidth: "3"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M21 12a9 9 0 0 0-9-9",
+    stroke: "currentColor",
+    strokeWidth: "3",
+    strokeLinecap: "round"
+  }));
+}
+Object.assign(__ds_scope, { Button });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Button.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/Checkbox.jsx
+try { (() => {
+/**
+ * Checkbox with label. Controlled via checked/onChange.
+ */
+function Checkbox({
+  checked = false,
+  onChange,
+  disabled = false,
+  label,
+  indeterminate = false,
+  style = {}
+}) {
+  const toggle = () => {
+    if (!disabled && onChange) onChange(!checked);
+  };
+  const on = checked || indeterminate;
+  return /*#__PURE__*/React.createElement("label", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "8px",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.5 : 1,
+      ...style
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "checkbox",
+    "aria-checked": indeterminate ? "mixed" : checked,
+    onClick: toggle,
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: 17,
+      height: 17,
+      flex: "0 0 auto",
+      borderRadius: "var(--radius-xs)",
+      background: on ? "var(--action-primary)" : "var(--ctv-bg-sunken)",
+      border: `1px solid ${on ? "transparent" : "var(--border-control)"}`,
+      transition: "background var(--dur-fast), border-color var(--dur-fast)"
+    }
+  }, indeterminate ? /*#__PURE__*/React.createElement("svg", {
+    width: "11",
+    height: "11",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 12h12",
+    stroke: "#fff",
+    strokeWidth: "3",
+    strokeLinecap: "round"
+  })) : checked ? /*#__PURE__*/React.createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5 12.5l4.5 4.5L19 7",
+    stroke: "#fff",
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })) : null), label && /*#__PURE__*/React.createElement("span", {
+    style: {
+      font: "var(--text-sm)/1 var(--font-sans)",
+      color: "var(--text-primary)"
+    }
+  }, label));
+}
+Object.assign(__ds_scope, { Checkbox });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Checkbox.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/IconButton.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Compact square icon button — table row actions, toolbars.
+ */
+function IconButton({
+  children,
+  size = "md",
+  variant = "ghost",
+  disabled = false,
+  active = false,
+  title,
+  onClick,
+  style = {},
+  ...rest
+}) {
+  const [hover, setHover] = React.useState(false);
+  const dim = size === "sm" ? 28 : 32;
+  const base = variant === "solid" ? {
+    background: "var(--action-primary)",
+    color: "var(--text-on-accent)"
+  } : {
+    background: active ? "var(--ctv-surface-3)" : "transparent",
+    color: active ? "var(--text-primary)" : "var(--text-secondary)"
+  };
+  const hoverBg = variant === "solid" ? "var(--action-primary-hover)" : "var(--ctv-surface-2)";
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    title: title,
+    "aria-label": title,
+    disabled: disabled,
+    onClick: onClick,
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: dim,
+      height: dim,
+      flex: "0 0 auto",
+      borderRadius: "var(--radius-sm)",
+      border: "1px solid transparent",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.4 : 1,
+      color: base.color,
+      background: !disabled && hover ? hoverBg : base.background,
+      transition: "background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)",
+      ...(!disabled && hover && variant !== "solid" ? {
+        color: "var(--text-primary)"
+      } : {}),
+      ...style
+    }
+  }, rest), children);
+}
+Object.assign(__ds_scope, { IconButton });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/IconButton.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/Input.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Text input with optional label, leading icon and error state.
+ */
+function Input({
+  label,
+  value,
+  onChange,
+  placeholder,
+  leadingIcon = null,
+  trailing = null,
+  error = null,
+  disabled = false,
+  size = "md",
+  type = "text",
+  fullWidth = true,
+  style = {},
+  ...rest
+}) {
+  const [focus, setFocus] = React.useState(false);
+  const height = size === "sm" ? "var(--control-h-sm)" : "var(--control-h)";
+  const borderColor = error ? "var(--status-error)" : focus ? "var(--action-primary)" : "var(--border-control)";
+  return /*#__PURE__*/React.createElement("label", {
+    style: {
+      display: "block",
+      width: fullWidth ? "100%" : "auto"
+    }
+  }, label && /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "block",
+      marginBottom: "6px",
+      font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+      color: "var(--text-secondary)"
+    }
+  }, label), /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      height,
+      padding: "0 10px",
+      background: "var(--ctv-bg-sunken)",
+      border: `1px solid ${borderColor}`,
+      borderRadius: "var(--radius-sm)",
+      boxShadow: focus && !error ? "0 0 0 3px var(--focus-ring)" : "none",
+      transition: "border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard)",
+      opacity: disabled ? 0.5 : 1,
+      ...style
+    }
+  }, leadingIcon && /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "flex",
+      color: "var(--text-disabled)",
+      flex: "0 0 auto"
+    }
+  }, leadingIcon), /*#__PURE__*/React.createElement("input", _extends({
+    type: type,
+    value: value,
+    onChange: onChange,
+    placeholder: placeholder,
+    disabled: disabled,
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
+    style: {
+      flex: 1,
+      minWidth: 0,
+      background: "transparent",
+      border: "none",
+      outline: "none",
+      color: "var(--text-primary)",
+      font: "var(--weight-normal) var(--text-sm)/1 var(--font-sans)"
+    }
+  }, rest)), trailing && /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "flex",
+      flex: "0 0 auto"
+    }
+  }, trailing)), error && /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "block",
+      marginTop: "5px",
+      font: "var(--text-xs)/1.3 var(--font-sans)",
+      color: "var(--status-error)"
+    }
+  }, error));
+}
+Object.assign(__ds_scope, { Input });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Input.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/Select.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Styled select built on a native <select> for accessibility.
+ */
+function Select({
+  label,
+  value,
+  onChange,
+  options = [],
+  disabled = false,
+  size = "md",
+  fullWidth = true,
+  style = {},
+  ...rest
+}) {
+  const [focus, setFocus] = React.useState(false);
+  const height = size === "sm" ? "var(--control-h-sm)" : "var(--control-h)";
+  const opts = options.map(o => typeof o === "string" ? {
+    value: o,
+    label: o
+  } : o);
+  return /*#__PURE__*/React.createElement("label", {
+    style: {
+      display: "block",
+      width: fullWidth ? "100%" : "auto"
+    }
+  }, label && /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "block",
+      marginBottom: "6px",
+      font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+      color: "var(--text-secondary)"
+    }
+  }, label), /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      height,
+      background: "var(--ctv-bg-sunken)",
+      border: `1px solid ${focus ? "var(--action-primary)" : "var(--border-control)"}`,
+      borderRadius: "var(--radius-sm)",
+      boxShadow: focus ? "0 0 0 3px var(--focus-ring)" : "none",
+      transition: "border-color var(--dur-fast), box-shadow var(--dur-fast)",
+      opacity: disabled ? 0.5 : 1,
+      ...style
+    }
+  }, /*#__PURE__*/React.createElement("select", _extends({
+    value: value,
+    onChange: onChange,
+    disabled: disabled,
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
+    style: {
+      appearance: "none",
+      WebkitAppearance: "none",
+      flex: 1,
+      height: "100%",
+      padding: "0 30px 0 10px",
+      background: "transparent",
+      border: "none",
+      outline: "none",
+      color: "var(--text-primary)",
+      font: "var(--weight-normal) var(--text-sm)/1 var(--font-sans)",
+      cursor: disabled ? "not-allowed" : "pointer"
+    }
+  }, rest), opts.map(o => /*#__PURE__*/React.createElement("option", {
+    key: o.value,
+    value: o.value,
+    style: {
+      background: "var(--ctv-surface-2)",
+      color: "var(--text-primary)"
+    }
+  }, o.label))), /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    style: {
+      position: "absolute",
+      right: 9,
+      pointerEvents: "none",
+      color: "var(--text-disabled)"
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 9l6 6 6-6",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }))));
+}
+Object.assign(__ds_scope, { Select });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Select.jsx", error: String((e && e.message) || e) }); }
+
+// components/forms/Switch.jsx
+try { (() => {
+/**
+ * On/off toggle switch.
+ */
+function Switch({
+  checked = false,
+  onChange,
+  disabled = false,
+  label,
+  size = "md",
+  style = {}
+}) {
+  const w = size === "sm" ? 30 : 36;
+  const h = size === "sm" ? 17 : 20;
+  const knob = h - 5;
+  const toggle = () => {
+    if (!disabled && onChange) onChange(!checked);
+  };
+  return /*#__PURE__*/React.createElement("label", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "9px",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.5 : 1,
+      ...style
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "switch",
+    "aria-checked": checked,
+    onClick: toggle,
+    style: {
+      position: "relative",
+      width: w,
+      height: h,
+      flex: "0 0 auto",
+      borderRadius: "var(--radius-pill)",
+      background: checked ? "var(--action-primary)" : "var(--ctv-surface-3)",
+      border: `1px solid ${checked ? "transparent" : "var(--border-control)"}`,
+      transition: "background var(--dur-base) var(--ease-standard)"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      top: "50%",
+      left: checked ? `calc(100% - ${knob + 2}px)` : "2px",
+      transform: "translateY(-50%)",
+      width: knob,
+      height: knob,
+      borderRadius: "50%",
+      background: "#fff",
+      boxShadow: "0 1px 2px rgba(0,0,0,0.5)",
+      transition: "left var(--dur-base) var(--ease-out)"
+    }
+  })), label && /*#__PURE__*/React.createElement("span", {
+    style: {
+      font: "var(--text-sm)/1 var(--font-sans)",
+      color: "var(--text-primary)"
+    }
+  }, label));
+}
+Object.assign(__ds_scope, { Switch });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Switch.jsx", error: String((e && e.message) || e) }); }
+
+// components/navigation/NavItem.jsx
+try { (() => {
+/**
+ * Single left-sidebar navigation item. Compose a list of these.
+ */
+function NavItem({
+  icon = null,
+  label,
+  active = false,
+  badge = null,
+  badgeTone = "warn",
+  onClick,
+  href,
+  style = {}
+}) {
+  const [hover, setHover] = React.useState(false);
+  const Comp = href ? "a" : "button";
+  const bt = {
+    warn: "var(--status-warn)",
+    error: "var(--status-error)",
+    accent: "var(--action-primary)"
+  }[badgeTone];
+  return /*#__PURE__*/React.createElement(Comp, {
+    href: href,
+    onClick: onClick,
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    style: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+      width: "100%",
+      height: "34px",
+      padding: "0 10px",
+      border: "none",
+      borderRadius: "var(--radius-sm)",
+      textDecoration: "none",
+      cursor: "pointer",
+      textAlign: "left",
+      font: `${active ? "var(--weight-medium)" : "var(--weight-normal)"} var(--text-sm)/1 var(--font-sans)`,
+      color: active ? "var(--text-primary)" : hover ? "var(--text-primary)" : "var(--text-secondary)",
+      background: active ? "var(--ctv-accent-soft)" : hover ? "var(--ctv-surface-2)" : "transparent",
+      transition: "background var(--dur-fast) var(--ease-standard), color var(--dur-fast)",
+      ...style
+    }
+  }, active && /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      left: 0,
+      top: 7,
+      bottom: 7,
+      width: 2.5,
+      borderRadius: 2,
+      background: "var(--action-primary)"
+    }
+  }), icon && /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      color: active ? "var(--action-primary)" : "currentColor",
+      flex: "0 0 auto"
+    }
+  }, icon), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      minWidth: 0,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    }
+  }, label), badge != null && /*#__PURE__*/React.createElement("span", {
+    style: {
+      minWidth: 17,
+      height: 17,
+      padding: "0 5px",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "var(--radius-pill)",
+      background: bt,
+      color: badgeTone === "warn" ? "#1A1206" : "#fff",
+      font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-mono)"
+    }
+  }, badge));
+}
+
+/**
+ * Sidebar section label (eyebrow) that groups NavItems.
+ */
+function NavSection({
+  children,
+  style = {}
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "14px 10px 6px",
+      font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-sans)",
+      letterSpacing: "var(--tracking-caps)",
+      textTransform: "uppercase",
+      color: "var(--text-disabled)",
+      ...style
+    }
+  }, children);
+}
+Object.assign(__ds_scope, { NavItem, NavSection });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/navigation/NavItem.jsx", error: String((e && e.message) || e) }); }
+
+// components/navigation/Tabs.jsx
+try { (() => {
+/**
+ * Underlined tab bar. Controlled via value/onChange.
+ */
+function Tabs({
+  tabs = [],
+  value,
+  onChange,
+  style = {}
+}) {
+  const items = tabs.map(t => typeof t === "string" ? {
+    value: t,
+    label: t
+  } : t);
+  const active = value ?? items[0]?.value;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: "2px",
+      borderBottom: "1px solid var(--border-hairline)",
+      ...style
+    }
+  }, items.map(t => {
+    const on = t.value === active;
+    return /*#__PURE__*/React.createElement(Tab, {
+      key: t.value,
+      tab: t,
+      on: on,
+      onChange: onChange
+    });
+  }));
+}
+function Tab({
+  tab,
+  on,
+  onChange
+}) {
+  const [hover, setHover] = React.useState(false);
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => onChange && onChange(tab.value),
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    style: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "7px",
+      height: "34px",
+      padding: "0 12px",
+      border: "none",
+      background: "transparent",
+      cursor: "pointer",
+      font: `${on ? "var(--weight-medium)" : "var(--weight-normal)"} var(--text-sm)/1 var(--font-sans)`,
+      color: on ? "var(--text-primary)" : hover ? "var(--text-primary)" : "var(--text-secondary)",
+      transition: "color var(--dur-fast)"
+    }
+  }, tab.icon && /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      color: on ? "var(--action-primary)" : "currentColor"
+    }
+  }, tab.icon), tab.label, tab.count != null && /*#__PURE__*/React.createElement("span", {
+    style: {
+      font: "var(--text-2xs)/1 var(--font-mono)",
+      color: "var(--text-disabled)",
+      background: "var(--ctv-surface-3)",
+      padding: "2px 5px",
+      borderRadius: "var(--radius-xs)"
+    }
+  }, tab.count), /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      left: 6,
+      right: 6,
+      bottom: -1,
+      height: 2,
+      borderRadius: 2,
+      background: on ? "var(--action-primary)" : "transparent",
+      transition: "background var(--dur-fast)"
+    }
+  }));
+}
+Object.assign(__ds_scope, { Tabs });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/navigation/Tabs.jsx", error: String((e && e.message) || e) }); }
+
+// design_handoff_channel_builder/ChannelBuilder.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+// Channel Builder — GROUND-UP replacement for the four-editor create chain
+// (Channel -> Schedule -> Schedule Items -> Playout). One library-to-lineup screen.
+// Left: searchable library browser. Center: the channel lineup (add by double-click
+// or drag; drag to reorder). Right: friendly options + Channel Template + Advanced.
+// Behind the scenes "Create" builds Channel + Collection + Schedule + Items + Playout.
+(function () {
+  const NS = window.ChicoryTVDesignSystem_eb3b61;
+  const {
+    Button,
+    IconButton,
+    Input,
+    Select,
+    Switch,
+    Badge,
+    ChannelLogo,
+    Tooltip
+  } = NS;
+  const Ico = window.Ico;
+  const mono = {
+    fontFamily: "var(--font-mono)",
+    fontVariantNumeric: "tabular-nums"
+  };
+  const eyebrow = {
+    font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-sans)",
+    letterSpacing: "0.06em",
+    textTransform: "uppercase",
+    color: "var(--text-disabled)"
+  };
+
+  // ---- Mock library (shows / movies / music / docs across libraries) --------
+  const LIB = [{
+    id: "s1",
+    title: "Looney Tunes",
+    type: "Show",
+    library: "Cartoons",
+    sub: "247 shorts",
+    min: 96
+  }, {
+    id: "s2",
+    title: "Tom & Jerry",
+    type: "Show",
+    library: "Cartoons",
+    sub: "164 shorts",
+    min: 72
+  }, {
+    id: "s3",
+    title: "Popeye",
+    type: "Show",
+    library: "Cartoons",
+    sub: "108 shorts",
+    min: 54
+  }, {
+    id: "s4",
+    title: "The Flintstones",
+    type: "Show",
+    library: "Cartoons",
+    sub: "166 episodes",
+    min: 84
+  }, {
+    id: "s5",
+    title: "Scooby-Doo",
+    type: "Show",
+    library: "Cartoons",
+    sub: "97 episodes",
+    min: 60
+  }, {
+    id: "s6",
+    title: "Pink Panther",
+    type: "Show",
+    library: "Cartoons",
+    sub: "124 shorts",
+    min: 48
+  }, {
+    id: "m1",
+    title: "Blade Runner",
+    type: "Movie",
+    library: "Movies",
+    sub: "1982 · Sci-Fi",
+    min: 117
+  }, {
+    id: "m2",
+    title: "Alien",
+    type: "Movie",
+    library: "Movies",
+    sub: "1979 · Horror",
+    min: 117
+  }, {
+    id: "m3",
+    title: "The Thing",
+    type: "Movie",
+    library: "Movies",
+    sub: "1982 · Horror",
+    min: 109
+  }, {
+    id: "m4",
+    title: "Metropolis",
+    type: "Movie",
+    library: "Movies",
+    sub: "1927 · Sci-Fi",
+    min: 153
+  }, {
+    id: "m5",
+    title: "Nosferatu",
+    type: "Movie",
+    library: "Movies",
+    sub: "1922 · Horror",
+    min: 94
+  }, {
+    id: "t1",
+    title: "The Twilight Zone",
+    type: "Show",
+    library: "TV Shows",
+    sub: "156 episodes",
+    min: 51
+  }, {
+    id: "t2",
+    title: "Star Trek",
+    type: "Show",
+    library: "TV Shows",
+    sub: "79 episodes",
+    min: 50
+  }, {
+    id: "t3",
+    title: "Columbo",
+    type: "Show",
+    library: "TV Shows",
+    sub: "69 episodes",
+    min: 94
+  }, {
+    id: "t4",
+    title: "Cheers",
+    type: "Show",
+    library: "TV Shows",
+    sub: "275 episodes",
+    min: 24
+  }, {
+    id: "u1",
+    title: "80s Synthpop",
+    type: "Music",
+    library: "Music Videos",
+    sub: "212 videos",
+    min: 45
+  }, {
+    id: "u2",
+    title: "90s Alt Rock",
+    type: "Music",
+    library: "Music Videos",
+    sub: "188 videos",
+    min: 45
+  }, {
+    id: "u3",
+    title: "Chart Countdown",
+    type: "Music",
+    library: "Music Videos",
+    sub: "Top 40",
+    min: 60
+  }, {
+    id: "d1",
+    title: "Blue Planet",
+    type: "Doc",
+    library: "Documentaries",
+    sub: "8 episodes",
+    min: 50
+  }, {
+    id: "d2",
+    title: "Planet Earth",
+    type: "Doc",
+    library: "Documentaries",
+    sub: "11 episodes",
+    min: 50
+  }, {
+    id: "d3",
+    title: "Cosmos",
+    type: "Doc",
+    library: "Documentaries",
+    sub: "13 episodes",
+    min: 60
+  }];
+  const LIBRARIES = ["All", "Cartoons", "Movies", "TV Shows", "Music Videos", "Documentaries"];
+  const TYPE_ICON = {
+    Show: "Tv",
+    Movie: "Film",
+    Music: "Music",
+    Doc: "Radio",
+    Multi: "Layers",
+    Smart: "Sparkles",
+    Manual: "FolderTree",
+    Rerun: "Repeat"
+  };
+
+  // Collections — curated groups (Manual / Smart / Multi / Rerun) addable as a
+  // single lineup entry, so the builder isn't limited to raw library items.
+  const COLLECTIONS = [{
+    id: "c1",
+    title: "Prime Time Cartoons",
+    type: "Multi",
+    library: "Collection",
+    sub: "Multi · 62 items",
+    min: 180,
+    coll: true
+  }, {
+    id: "c2",
+    title: "Classic Sci-Fi",
+    type: "Smart",
+    library: "Collection",
+    sub: "Smart · rating \u2265 8",
+    min: 240,
+    coll: true
+  }, {
+    id: "c3",
+    title: "Retro Station IDs",
+    type: "Manual",
+    library: "Collection",
+    sub: "Manual · 24 items",
+    min: 12,
+    coll: true
+  }, {
+    id: "c4",
+    title: "Saturday Morning",
+    type: "Rerun",
+    library: "Collection",
+    sub: "Rerun block · weekly",
+    min: 120,
+    coll: true
+  }, {
+    id: "c5",
+    title: "Halloween Marathon",
+    type: "Manual",
+    library: "Collection",
+    sub: "Manual · 9 films",
+    min: 900,
+    coll: true
+  }];
+
+  // Channel Templates — bundle the clunky technical config; one is pre-selected.
+  const TEMPLATES = [{
+    id: "std",
+    name: "Standard",
+    builtin: true,
+    desc: "General-purpose 1080p H.264, retro bumpers.",
+    shuffle: false,
+    always: true,
+    sets: ["1080p H.264", "HLS Segmenter", "Sequential", "Always on", "Pre + post filler"]
+  }, {
+    id: "music",
+    name: "Music videos",
+    builtin: true,
+    desc: "Continuous rotation, no fillers, direct stream.",
+    shuffle: true,
+    always: true,
+    sets: ["720p H.264", "HLS Direct", "Shuffle", "Always on", "No filler"]
+  }, {
+    id: "film",
+    name: "Movie night",
+    builtin: true,
+    desc: "Film-grain HEVC, mid-roll ad breaks.",
+    shuffle: false,
+    always: false,
+    sets: ["1080p HEVC", "MPEG-TS", "Sequential", "On-demand", "Mid-roll ads"]
+  }, {
+    id: "retro",
+    name: "Retro Saturday AM",
+    builtin: false,
+    desc: "Your saved cartoon-block template.",
+    shuffle: true,
+    always: true,
+    sets: ["1080p H.264", "HLS Segmenter", "Shuffle", "Always on", "Bumpers + ads"]
+  }];
+
+  // Advanced (~30-field) override set, grouped. Values shown as template-inherited.
+  const ADV = [{
+    group: "Streaming",
+    fields: [["Streaming mode", "HLS Segmenter"], ["FFmpeg profile", "1080p H.264"], ["Resolution", "1920×1080"], ["Video bitrate", "8000 kbps"], ["Audio bitrate", "192 kbps"], ["Buffer size", "16000 kb"]]
+  }, {
+    group: "Filler",
+    fields: [["Pre-roll", "Retro Bumpers"], ["Mid-roll", "Ad Break"], ["Post-roll", "Outro"], ["Tail filler", "None"], ["Fallback", "Test Pattern"], ["Filler kind", "Pad to :00"]]
+  }, {
+    group: "Playback",
+    fields: [["Interleave", "On"], ["Keep multi-part together", "On"], ["Watermark", "Channel logo"], ["Subtitle mode", "Any"], ["Preferred audio", "English"], ["Preferred subtitle", "None"]]
+  }, {
+    group: "Behavior",
+    fields: [["Guide mode default", "Normal"], ["Song video mode", "Off"], ["On-demand", "Off"], ["Idle behavior", "Offline image"], ["Transcode audio", "Normalize"], ["Number scheme", "Auto"]]
+  }];
+
+  // deterministic low-chroma poster hue from a title
+  function hueOf(s) {
+    let h = 0;
+    for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 360;
+    return h;
+  }
+  function fmtDur(totalMin) {
+    const h = Math.floor(totalMin / 60),
+      m = totalMin % 60;
+    if (h && m) return h + "h " + String(m).padStart(2, "0") + "m";
+    if (h) return h + "h";
+    return m + "m";
+  }
+
+  // ---- Overlay scroll region — hides native bar (no reflow when it appears),
+  //      shows a subtle thumb only while scrolling, fading out when idle. ------
+  function ScrollArea({
+    children,
+    innerStyle,
+    scrollerRef
+  }) {
+    const local = React.useRef(null);
+    const timer = React.useRef(null);
+    const [thumb, setThumb] = React.useState(null);
+    const setRef = n => {
+      local.current = n;
+      if (scrollerRef) scrollerRef.current = n;
+    };
+    const update = () => {
+      const el = local.current;
+      if (!el) return;
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      } = el;
+      if (scrollHeight <= clientHeight + 2) {
+        setThumb(null);
+        return;
+      }
+      const track = clientHeight - 8;
+      const h = Math.max(28, track * clientHeight / scrollHeight);
+      const top = 4 + (track - h) * (scrollTop / (scrollHeight - clientHeight));
+      setThumb({
+        top,
+        h
+      });
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setThumb(t => t ? {
+        ...t,
+        hidden: true
+      } : null), 850);
+    };
+    React.useEffect(() => {
+      const id = setTimeout(update, 60);
+      return () => {
+        clearTimeout(id);
+        clearTimeout(timer.current);
+      };
+    }, []);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative",
+        flex: 1,
+        minHeight: 0,
+        minWidth: 0
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: setRef,
+      onScroll: update,
+      className: "ctv-hide-sb",
+      style: {
+        height: "100%",
+        overflowY: "auto",
+        overflowX: "hidden",
+        scrollbarWidth: "none",
+        scrollBehavior: "smooth",
+        ...innerStyle
+      }
+    }, children), thumb && /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: thumb.top,
+        right: 2,
+        width: 4,
+        height: thumb.h,
+        borderRadius: 3,
+        background: "var(--text-secondary)",
+        opacity: thumb.hidden ? 0 : 0.5,
+        transition: "opacity 260ms var(--ease-standard, ease)",
+        pointerEvents: "none"
+      }
+    }));
+  }
+
+  // ---- Segmented control — iOS-style sliding active highlight ---------------
+  function Segmented({
+    value,
+    options,
+    onChange,
+    style
+  }) {
+    const idx = Math.max(0, options.findIndex(o => o.value === value));
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative",
+        display: "grid",
+        gridAutoFlow: "column",
+        gridAutoColumns: "1fr",
+        padding: 2,
+        borderRadius: "var(--radius-sm)",
+        background: "var(--ctv-bg-sunken)",
+        border: "1px solid var(--border-hairline)",
+        ...style
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: 2,
+        bottom: 2,
+        left: 2,
+        width: `calc((100% - 4px) / ${options.length})`,
+        transform: `translateX(${idx * 100}%)`,
+        background: "var(--ctv-surface-3)",
+        borderRadius: "var(--radius-xs)",
+        boxShadow: "var(--shadow-sm)",
+        transition: "transform 300ms cubic-bezier(0.16,1,0.3,1)",
+        pointerEvents: "none"
+      }
+    }), options.map(o => {
+      const on = o.value === value;
+      return /*#__PURE__*/React.createElement("button", {
+        key: o.value,
+        type: "button",
+        title: o.title || o.label,
+        onClick: () => onChange(o.value),
+        style: {
+          position: "relative",
+          zIndex: 1,
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6,
+          padding: "5px 10px",
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          color: on ? "var(--text-primary)" : "var(--text-secondary)",
+          transition: "color 220ms cubic-bezier(0.16,1,0.3,1)",
+          font: "var(--weight-medium) var(--text-2xs)/1 var(--font-sans)"
+        }
+      }, o.icon && /*#__PURE__*/React.createElement(Ico, {
+        n: o.icon,
+        s: 13
+      }), o.label);
+    }));
+  }
+
+  // ---- Poster placeholder (striped, tinted, mono meta) ----------------------
+  function Poster({
+    item,
+    w,
+    h,
+    mini
+  }) {
+    const hue = hueOf(item.title);
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative",
+        width: w,
+        height: h,
+        flex: "0 0 auto",
+        overflow: "hidden",
+        borderRadius: "var(--radius-sm)",
+        border: "1px solid var(--border-hairline)",
+        background: `linear-gradient(160deg, hsl(${hue} 24% 17%), hsl(${hue} 26% 12%))`
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        inset: 0,
+        backgroundImage: `repeating-linear-gradient(135deg, hsl(${hue} 22% 10% / .55) 0 1px, transparent 1px 9px)`
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: mini ? 4 : 7,
+        left: mini ? 4 : 7,
+        display: "inline-flex",
+        color: `hsl(${hue} 30% 68%)`
+      }
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: TYPE_ICON[item.type] || "Film",
+      s: mini ? 12 : 15
+    })), !mini && /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: "18px 8px 8px",
+        background: "linear-gradient(to top, rgba(11,13,17,.92), transparent)"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: "var(--weight-semibold) var(--text-xs)/1.15 var(--font-sans)",
+        color: "var(--text-primary)",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    }, item.title), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 3,
+        ...mono,
+        font: "var(--text-2xs)/1 var(--font-mono)",
+        color: "var(--text-secondary)"
+      }
+    }, item.sub)));
+  }
+
+  // ---- Library card ----------------------------------------------------------
+  function LibCard({
+    item,
+    added,
+    compact,
+    onAdd,
+    onDragStart,
+    onDragEnd
+  }) {
+    if (compact) {
+      return /*#__PURE__*/React.createElement("div", {
+        draggable: true,
+        onDragStart: onDragStart,
+        onDragEnd: onDragEnd,
+        onDoubleClick: onAdd,
+        title: "Double-click or drag to add",
+        className: "ctv-press",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          padding: "6px 8px",
+          borderRadius: "var(--radius-sm)",
+          cursor: "grab",
+          background: added ? "color-mix(in srgb, var(--action-primary) 14%, transparent)" : "var(--surface-card)",
+          border: `1px solid ${added ? "color-mix(in srgb, var(--action-primary) 35%, transparent)" : "var(--border-hairline)"}`
+        }
+      }, /*#__PURE__*/React.createElement(Poster, {
+        item: item,
+        w: 30,
+        h: 40,
+        mini: true
+      }), /*#__PURE__*/React.createElement("div", {
+        style: {
+          flex: 1,
+          minWidth: 0
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          font: "var(--weight-medium) var(--text-xs)/1.15 var(--font-sans)",
+          color: "var(--text-primary)",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }
+      }, item.title), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginTop: 2,
+          font: "var(--text-2xs)/1 var(--font-sans)",
+          color: "var(--text-secondary)"
+        }
+      }, item.type, " \xB7 ", /*#__PURE__*/React.createElement("span", {
+        style: mono
+      }, item.sub))), /*#__PURE__*/React.createElement(IconButton, {
+        size: "sm",
+        title: added ? "Added" : "Add to lineup",
+        onClick: onAdd
+      }, /*#__PURE__*/React.createElement(Ico, {
+        n: added ? "Check" : "Plus",
+        s: 15,
+        color: added ? "var(--action-primary)" : undefined
+      })));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      draggable: true,
+      onDragStart: onDragStart,
+      onDragEnd: onDragEnd,
+      onDoubleClick: onAdd,
+      title: "Double-click or drag to add",
+      className: "ctv-lift",
+      style: {
+        position: "relative",
+        cursor: "grab"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative",
+        borderRadius: "var(--radius-sm)",
+        boxShadow: added ? "0 0 0 2px var(--action-primary)" : "none"
+      }
+    }, /*#__PURE__*/React.createElement(Poster, {
+      item: item,
+      w: "100%",
+      h: 150
+    }), added && /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        top: 6,
+        right: 6,
+        width: 22,
+        height: 22,
+        borderRadius: "50%",
+        background: "var(--action-primary)",
+        color: "var(--text-on-accent)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "var(--shadow-sm)",
+        animation: "ctv-pop 260ms cubic-bezier(0.16,1,0.3,1)"
+      }
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "Check",
+      s: 14
+    }))));
+  }
+
+  // ---- Lineup row ------------------------------------------------------------
+  function LineupRow({
+    item,
+    index,
+    shuffle,
+    dragging,
+    isOver,
+    onRemove,
+    dragProps
+  }) {
+    return /*#__PURE__*/React.createElement("div", _extends({}, dragProps, {
+      className: "ctv-lift",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 11,
+        padding: "9px 10px",
+        borderRadius: "var(--radius-md)",
+        background: "var(--surface-card)",
+        border: "1px solid var(--border-hairline)",
+        boxShadow: isOver ? "0 -2px 0 var(--action-primary)" : "none",
+        opacity: dragging ? 0.35 : 1,
+        transition: "opacity var(--dur-fast)"
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: "inline-flex",
+        cursor: "grab",
+        color: "var(--text-faint)",
+        flex: "0 0 auto"
+      },
+      title: "Drag to reorder"
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "GripVertical",
+      s: 16
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: 22,
+        flex: "0 0 auto",
+        textAlign: "center"
+      }
+    }, shuffle ? /*#__PURE__*/React.createElement(Ico, {
+      n: "Shuffle",
+      s: 13,
+      color: "var(--text-disabled)"
+    }) : /*#__PURE__*/React.createElement("span", {
+      style: {
+        ...mono,
+        font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)",
+        color: "var(--text-secondary)"
+      }
+    }, index + 1)), /*#__PURE__*/React.createElement(Poster, {
+      item: item,
+      w: 34,
+      h: 46,
+      mini: true
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        minWidth: 0
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: "var(--weight-semibold) var(--text-sm)/1.2 var(--font-sans)",
+        color: "var(--text-primary)",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    }, item.title), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 2,
+        font: "var(--text-2xs)/1 var(--font-sans)",
+        color: "var(--text-secondary)"
+      }
+    }, item.type, " \xB7 ", item.library)), /*#__PURE__*/React.createElement("span", {
+      style: {
+        ...mono,
+        font: "var(--text-2xs)/1 var(--font-mono)",
+        color: "var(--text-disabled)",
+        flex: "0 0 auto"
+      }
+    }, fmtDur(item.min)), /*#__PURE__*/React.createElement(IconButton, {
+      size: "sm",
+      title: "Remove",
+      onClick: onRemove
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "X",
+      s: 15
+    })));
+  }
+
+  // ---- Channel image dropzone + live logo/bug preview -----------------------
+  function ImagePanel({
+    logoSrc,
+    setLogoSrc,
+    name
+  }) {
+    const [sep, setSep] = React.useState(false);
+    const [over, setOver] = React.useState(false);
+    const fileRef = React.useRef(null);
+    const read = file => {
+      if (!file) return;
+      const r = new FileReader();
+      r.onload = () => setLogoSrc(r.result);
+      r.readAsDataURL(file);
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 10
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      onDragOver: e => {
+        e.preventDefault();
+        setOver(true);
+      },
+      onDragLeave: () => setOver(false),
+      onDrop: e => {
+        e.preventDefault();
+        setOver(false);
+        read(e.dataTransfer.files && e.dataTransfer.files[0]);
+      },
+      onClick: () => fileRef.current && fileRef.current.click(),
+      style: {
+        display: "flex",
+        gap: 12,
+        padding: 12,
+        borderRadius: "var(--radius-sm)",
+        cursor: "pointer",
+        background: "var(--ctv-bg-sunken)",
+        border: `1px dashed ${over ? "var(--ctv-accent)" : "var(--border-control)"}`
+      }
+    }, /*#__PURE__*/React.createElement(ChannelLogo, {
+      name: name || "New Channel",
+      src: logoSrc,
+      size: 52,
+      radius: "var(--radius-sm)"
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        gap: 3
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+        color: "var(--text-primary)"
+      }
+    }, logoSrc ? "Channel image set" : "Drop channel image"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: "var(--text-2xs)/1.35 var(--font-sans)",
+        color: "var(--text-secondary)"
+      }
+    }, "Used as both the guide logo and the on-screen bug.")), /*#__PURE__*/React.createElement("input", {
+      ref: fileRef,
+      type: "file",
+      accept: "image/*",
+      style: {
+        display: "none"
+      },
+      onChange: e => read(e.target.files && e.target.files[0])
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: 10
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 10,
+        borderRadius: "var(--radius-sm)",
+        background: "var(--surface-card)",
+        border: "1px solid var(--border-hairline)"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...eyebrow,
+        marginBottom: 8
+      }
+    }, "Guide logo"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 9
+      }
+    }, /*#__PURE__*/React.createElement(ChannelLogo, {
+      name: name || "New Channel",
+      src: logoSrc,
+      size: 30,
+      radius: "var(--radius-xs)"
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        minWidth: 0
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: "var(--weight-medium) var(--text-2xs)/1.1 var(--font-sans)",
+        color: "var(--text-primary)",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    }, name || "New Channel"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...mono,
+        font: "9px/1 var(--font-mono)",
+        color: "var(--text-disabled)"
+      }
+    }, "listing")))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 10,
+        borderRadius: "var(--radius-sm)",
+        background: "var(--surface-card)",
+        border: "1px solid var(--border-hairline)"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...eyebrow,
+        marginBottom: 8
+      }
+    }, "On-screen bug"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative",
+        height: 42,
+        borderRadius: "var(--radius-xs)",
+        overflow: "hidden",
+        background: "linear-gradient(160deg,#1a1d24,#0e1014)",
+        backgroundImage: "repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px)"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "absolute",
+        bottom: 5,
+        right: 5,
+        opacity: 0.9
+      }
+    }, /*#__PURE__*/React.createElement(ChannelLogo, {
+      name: name || "New Channel",
+      src: logoSrc,
+      size: 22,
+      radius: "3px"
+    }))))), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: () => setSep(s => !s),
+      style: {
+        alignSelf: "flex-start",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 5,
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: "2px 0",
+        font: "var(--text-2xs)/1 var(--font-sans)",
+        color: "var(--text-secondary)"
+      }
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: sep ? "ChevronDown" : "ChevronRight",
+      s: 13
+    }), "Set logo & bug separately"), sep && /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: 10,
+        padding: 10,
+        borderRadius: "var(--radius-sm)",
+        background: "var(--ctv-bg-sunken)",
+        border: "1px solid var(--border-hairline)"
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      size: "sm",
+      variant: "secondary",
+      startIcon: /*#__PURE__*/React.createElement(Ico, {
+        n: "Image",
+        s: 14
+      }),
+      onClick: () => fileRef.current && fileRef.current.click()
+    }, "Logo image"), /*#__PURE__*/React.createElement(Button, {
+      size: "sm",
+      variant: "secondary",
+      startIcon: /*#__PURE__*/React.createElement(Ico, {
+        n: "Image",
+        s: 14
+      }),
+      onClick: () => fileRef.current && fileRef.current.click()
+    }, "Bug image")));
+  }
+
+  // ---- Advanced disclosure — one-click Override (edit) or View defaults ------
+  function Advanced({
+    templateName,
+    scrollerRef
+  }) {
+    const [mode, setMode] = React.useState("closed"); // closed | view | override
+    const [vals, setVals] = React.useState(() => {
+      const o = {};
+      ADV.forEach(g => g.fields.forEach(([k, v]) => {
+        o[k] = v;
+      }));
+      return o;
+    });
+    const override = mode === "override";
+    const count = ADV.reduce((n, g) => n + g.fields.length, 0);
+    const fieldsRef = React.useRef(null);
+    const rootRef = React.useRef(null);
+    const [maxH, setMaxH] = React.useState(0);
+    React.useLayoutEffect(() => {
+      if (mode === "closed") setMaxH(0);else if (fieldsRef.current) setMaxH(fieldsRef.current.scrollHeight);
+    }, [mode]);
+    const toggle = m => {
+      const next = mode === m ? "closed" : m;
+      setMode(next);
+      if (next !== "closed" && scrollerRef && scrollerRef.current && rootRef.current) {
+        const sc = scrollerRef.current;
+        requestAnimationFrame(() => {
+          const target = sc.scrollTop + rootRef.current.getBoundingClientRect().top - sc.getBoundingClientRect().top - 20;
+          sc.scrollTo({
+            top: Math.max(0, target),
+            behavior: "smooth"
+          });
+        });
+      }
+    };
+    const tabBtn = active => ({
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 6,
+      padding: "8px 10px",
+      borderRadius: "var(--radius-sm)",
+      cursor: "pointer",
+      font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+      background: active ? "color-mix(in srgb, var(--action-primary) 14%, transparent)" : "var(--ctv-surface-2)",
+      color: active ? "var(--action-primary)" : "var(--text-secondary)",
+      border: `1px solid ${active ? "color-mix(in srgb, var(--action-primary) 38%, transparent)" : "var(--border-hairline)"}`,
+      transition: "background 200ms cubic-bezier(0.16,1,0.3,1), color 200ms cubic-bezier(0.16,1,0.3,1), border-color 200ms cubic-bezier(0.16,1,0.3,1)"
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      ref: rootRef,
+      style: {
+        borderTop: "1px solid var(--border-hairline)",
+        paddingTop: 14
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 9,
+        marginBottom: 10
+      }
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "SlidersHorizontal",
+      s: 16,
+      color: "var(--text-secondary)"
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        font: "var(--weight-medium) var(--text-sm)/1 var(--font-sans)",
+        color: "var(--text-primary)"
+      }
+    }, "Advanced"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        flex: 1
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        ...mono,
+        font: "var(--text-2xs)/1 var(--font-mono)",
+        color: "var(--text-disabled)"
+      }
+    }, count, " fields \xB7 ", templateName)), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: 8
+      }
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: () => toggle("override"),
+      style: tabBtn(override)
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "SquarePen",
+      s: 14
+    }), override ? "Overriding" : "Override settings"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: () => toggle("view"),
+      style: tabBtn(mode === "view")
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "Eye",
+      s: 14
+    }), "View defaults")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        overflow: "hidden",
+        maxHeight: maxH,
+        transition: "max-height 340ms cubic-bezier(0.16,1,0.3,1)"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: fieldsRef,
+      style: {
+        marginTop: 12,
+        display: "flex",
+        flexDirection: "column",
+        gap: 14
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        font: "var(--text-2xs)/1.35 var(--font-sans)",
+        color: "var(--text-secondary)"
+      }
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "Info",
+      s: 13,
+      color: override ? "var(--action-primary)" : "var(--text-disabled)"
+    }), override ? "Editing these overrides the template for this channel only." : `Read-only — inherited from the ${templateName} template. Turn on Override to edit.`), ADV.map(g => /*#__PURE__*/React.createElement("div", {
+      key: g.group
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...eyebrow,
+        marginBottom: 8
+      }
+    }, g.group), override ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: 8
+      }
+    }, g.fields.map(([k]) => /*#__PURE__*/React.createElement(Input, {
+      key: k,
+      size: "sm",
+      label: k,
+      value: vals[k],
+      onChange: e => setVals(s => ({
+        ...s,
+        [k]: e.target.value
+      }))
+    }))) : /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: 8
+      }
+    }, g.fields.map(([k, v]) => /*#__PURE__*/React.createElement("div", {
+      key: k,
+      style: {
+        padding: "7px 9px",
+        borderRadius: "var(--radius-xs)",
+        background: "var(--ctv-bg-sunken)",
+        border: "1px solid var(--border-hairline)",
+        opacity: 0.72
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: "var(--text-2xs)/1 var(--font-sans)",
+        color: "var(--text-disabled)"
+      }
+    }, k), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 3,
+        font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+        color: "var(--text-primary)",
+        ...(/\d/.test(v) ? mono : {})
+      }
+    }, v)))))))));
+  }
+
+  // ---- Main ------------------------------------------------------------------
+  function ChannelBuilder() {
+    const [q, setQ] = React.useState("");
+    const [libFilter, setLibFilter] = React.useState("All");
+    const [compact, setCompact] = React.useState(false);
+    const [lineup, setLineup] = React.useState(() => ["s1", "s2", "s3", "s4"].map(id => LIB.find(x => x.id === id)));
+    const [name, setName] = React.useState("Retro Cartoons");
+    const [number, setNumber] = React.useState("13.1");
+    const [shuffle, setShuffle] = React.useState(false);
+    const [always, setAlways] = React.useState(true);
+    const [logoSrc, setLogoSrc] = React.useState(null);
+    const [tpl, setTpl] = React.useState("std");
+    const [tplOpen, setTplOpen] = React.useState(false);
+    const [source, setSource] = React.useState("library"); // library | collections
+
+    // drag state
+    const [dragLib, setDragLib] = React.useState(null); // library item id being dragged
+    const [dragRow, setDragRow] = React.useState(null); // lineup index being dragged
+    const [overRow, setOverRow] = React.useState(null);
+    const railScrollerRef = React.useRef(null);
+    const addedIds = new Set(lineup.map(i => i.id));
+    const pool = source === "collections" ? COLLECTIONS : LIB;
+    const filtered = pool.filter(i => (source === "collections" || libFilter === "All" || i.library === libFilter) && (!q || i.title.toLowerCase().includes(q.toLowerCase())));
+    const add = item => setLineup(l => l.some(x => x.id === item.id) ? l : [...l, item]);
+    const removeAt = idx => setLineup(l => l.filter((_, i) => i !== idx));
+    const totalMin = lineup.reduce((n, i) => n + i.min, 0);
+    const template = TEMPLATES.find(t => t.id === tpl);
+    const canCreate = name.trim() && lineup.length > 0;
+
+    // reorder / insert on drop at target index
+    const dropAt = targetIdx => {
+      if (dragRow != null) {
+        setLineup(l => {
+          const n = l.slice();
+          const [m] = n.splice(dragRow, 1);
+          n.splice(targetIdx, 0, m);
+          return n;
+        });
+      } else if (dragLib != null) {
+        const item = [...LIB, ...COLLECTIONS].find(x => x.id === dragLib);
+        if (item && !addedIds.has(item.id)) setLineup(l => {
+          const n = l.slice();
+          n.splice(targetIdx, 0, item);
+          return n;
+        });
+      }
+      setDragLib(null);
+      setDragRow(null);
+      setOverRow(null);
+    };
+    const dropEnd = () => {
+      if (dragLib != null) {
+        const item = [...LIB, ...COLLECTIONS].find(x => x.id === dragLib);
+        if (item) add(item);
+      }
+      setDragLib(null);
+      setDragRow(null);
+      setOverRow(null);
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: "12px 20px",
+        borderBottom: "1px solid var(--border-hairline)",
+        flex: "0 0 auto"
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 34,
+        height: 34,
+        borderRadius: "var(--radius-sm)",
+        background: "var(--ctv-accent-soft)",
+        color: "var(--ctv-accent)",
+        flex: "0 0 auto"
+      }
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "Plus",
+      s: 19
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        minWidth: 0
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: "var(--weight-semibold) var(--text-md)/1 var(--font-sans)",
+        color: "var(--text-primary)"
+      }
+    }, "New Channel"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 3,
+        font: "var(--text-xs)/1 var(--font-sans)",
+        color: "var(--text-secondary)"
+      }
+    }, "Build from your library \u2014 ", /*#__PURE__*/React.createElement("span", {
+      style: mono
+    }, lineup.length), " in lineup \xB7 ", /*#__PURE__*/React.createElement("span", {
+      style: mono
+    }, fmtDur(totalMin)))), /*#__PURE__*/React.createElement(Button, {
+      variant: "ghost"
+    }, "Cancel"), /*#__PURE__*/React.createElement(Tooltip, {
+      placement: "bottom",
+      label: canCreate ? "Creates the channel, schedule & playout" : "Name the channel and add at least one item"
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "primary",
+      disabled: !canCreate,
+      startIcon: /*#__PURE__*/React.createElement(Ico, {
+        n: "Check",
+        s: 15
+      })
+    }, "Create Channel"))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        display: "grid",
+        gridTemplateColumns: "minmax(0,1.2fr) minmax(0,1fr) 304px",
+        gap: 0
+      }
+    }, /*#__PURE__*/React.createElement("section", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        minWidth: 0,
+        overflow: "hidden",
+        borderRight: "1px solid var(--border-hairline)"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: "14px 16px 10px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 10
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        flexWrap: "wrap",
+        rowGap: 8
+      }
+    }, /*#__PURE__*/React.createElement(Segmented, {
+      value: source,
+      onChange: setSource,
+      options: [{
+        value: "library",
+        label: "Library",
+        icon: "Library"
+      }, {
+        value: "collections",
+        label: "Collections",
+        icon: "FolderTree"
+      }]
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        flex: 1
+      }
+    }), /*#__PURE__*/React.createElement(Segmented, {
+      value: compact ? "list" : "grid",
+      onChange: v => setCompact(v === "list"),
+      options: [{
+        value: "grid",
+        icon: "LayoutGrid",
+        title: "Poster grid"
+      }, {
+        value: "list",
+        icon: "Rows3",
+        title: "Compact list"
+      }]
+    })), /*#__PURE__*/React.createElement(Input, {
+      size: "sm",
+      value: q,
+      onChange: e => setQ(e.target.value),
+      leadingIcon: /*#__PURE__*/React.createElement(Ico, {
+        n: "Search",
+        s: 15
+      }),
+      placeholder: source === "collections" ? "Search collections\u2026" : "Search shows & movies\u2026"
+    }), source === "library" && /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        gap: 6,
+        flexWrap: "wrap"
+      }
+    }, LIBRARIES.map(l => {
+      const on = libFilter === l;
+      return /*#__PURE__*/React.createElement("button", {
+        key: l,
+        type: "button",
+        onClick: () => setLibFilter(l),
+        className: "ctv-press",
+        style: {
+          padding: "4px 10px",
+          borderRadius: "var(--radius-pill)",
+          cursor: "pointer",
+          font: "var(--weight-medium) var(--text-2xs)/1.4 var(--font-sans)",
+          background: on ? "var(--ctv-accent-soft)" : "var(--ctv-surface-2)",
+          color: on ? "var(--ctv-accent)" : "var(--text-secondary)",
+          border: `1px solid ${on ? "rgba(224,138,60,.35)" : "var(--border-hairline)"}`
+        }
+      }, l);
+    }))), /*#__PURE__*/React.createElement(ScrollArea, {
+      innerStyle: {
+        padding: "4px 16px 16px"
+      }
+    }, filtered.length === 0 ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: "40px 0",
+        textAlign: "center",
+        font: "var(--text-xs)/1.5 var(--font-sans)",
+        color: "var(--text-disabled)"
+      }
+    }, "No titles match.") : compact ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6
+      }
+    }, filtered.map(item => /*#__PURE__*/React.createElement(LibCard, {
+      key: item.id,
+      item: item,
+      compact: true,
+      added: addedIds.has(item.id),
+      onAdd: () => add(item),
+      onDragStart: () => setDragLib(item.id),
+      onDragEnd: dropEnd
+    }))) : /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(104px,1fr))",
+        gap: 10
+      }
+    }, filtered.map(item => /*#__PURE__*/React.createElement(LibCard, {
+      key: item.id,
+      item: item,
+      added: addedIds.has(item.id),
+      onAdd: () => add(item),
+      onDragStart: () => setDragLib(item.id),
+      onDragEnd: dropEnd
+    }))))), /*#__PURE__*/React.createElement("section", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        minWidth: 0,
+        overflow: "hidden",
+        borderRight: "1px solid var(--border-hairline)"
+      },
+      onDragOver: e => {
+        if (dragLib != null) e.preventDefault();
+      },
+      onDrop: () => {
+        if (dragLib != null) dropEnd();
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: "14px 16px 10px",
+        display: "flex",
+        alignItems: "center",
+        gap: 10
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: eyebrow
+    }, "Lineup"), /*#__PURE__*/React.createElement(Badge, {
+      tone: shuffle ? "accent" : "neutral"
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4
+      }
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: shuffle ? "Shuffle" : "ListOrdered",
+      s: 11
+    }), shuffle ? "Shuffled" : "Sequential")), /*#__PURE__*/React.createElement("span", {
+      style: {
+        flex: 1
+      }
+    }), lineup.length > 0 && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: () => setLineup([]),
+      style: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        font: "var(--text-2xs)/1 var(--font-sans)",
+        color: "var(--text-secondary)"
+      }
+    }, "Clear")), /*#__PURE__*/React.createElement(ScrollArea, {
+      innerStyle: {
+        padding: "4px 16px 16px"
+      }
+    }, lineup.length === 0 ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: "100%",
+        minHeight: 220,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 12,
+        textAlign: "center",
+        border: `1px dashed ${dragLib != null ? "var(--ctv-accent)" : "var(--border-control)"}`,
+        borderRadius: "var(--radius-md)",
+        background: dragLib != null ? "var(--ctv-accent-soft)" : "transparent",
+        color: "var(--text-disabled)",
+        padding: 24
+      }
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "ListVideo",
+      s: 26
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        font: "var(--text-sm)/1.5 var(--font-sans)",
+        maxWidth: 240
+      }
+    }, "This channel has no content yet. Double-click or drag titles from the library to build the lineup.")) : /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 7
+      }
+    }, lineup.map((item, idx) => /*#__PURE__*/React.createElement(LineupRow, {
+      key: item.id + "-" + idx,
+      item: item,
+      index: idx,
+      shuffle: shuffle,
+      dragging: dragRow === idx,
+      isOver: overRow === idx && dragRow !== idx,
+      onRemove: () => removeAt(idx),
+      dragProps: {
+        draggable: true,
+        onDragStart: () => setDragRow(idx),
+        onDragEnd: () => {
+          setDragRow(null);
+          setOverRow(null);
+        },
+        onDragOver: e => {
+          e.preventDefault();
+          setOverRow(idx);
+        },
+        onDrop: e => {
+          e.stopPropagation();
+          dropAt(idx);
+        }
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 4,
+        padding: "10px 12px",
+        borderRadius: "var(--radius-md)",
+        border: "1px dashed var(--border-hairline)",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        color: "var(--text-disabled)",
+        font: "var(--text-2xs)/1 var(--font-sans)"
+      }
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "Plus",
+      s: 14
+    }), "Double-click or drag more titles to add")))), /*#__PURE__*/React.createElement("aside", {
+      style: {
+        position: "relative",
+        minWidth: 0,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        background: "var(--surface-card)"
+      }
+    }, /*#__PURE__*/React.createElement(ScrollArea, {
+      scrollerRef: railScrollerRef,
+      innerStyle: {
+        padding: "14px 16px 24px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 16
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 10
+      }
+    }, /*#__PURE__*/React.createElement(Input, {
+      label: "Channel name",
+      value: name,
+      onChange: e => setName(e.target.value),
+      placeholder: "e.g. Retro Cartoons"
+    }), /*#__PURE__*/React.createElement(Input, {
+      label: "Number",
+      value: number,
+      onChange: e => setNumber(e.target.value),
+      trailing: /*#__PURE__*/React.createElement("span", {
+        style: {
+          ...mono,
+          font: "9px/1 var(--font-mono)",
+          padding: "2px 5px",
+          borderRadius: "3px",
+          background: "var(--ctv-accent-soft)",
+          color: "var(--ctv-accent)"
+        }
+      }, "AUTO")
+    })), /*#__PURE__*/React.createElement(ImagePanel, {
+      logoSrc: logoSrc,
+      setLogoSrc: setLogoSrc,
+      name: name
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 4
+      }
+    }, /*#__PURE__*/React.createElement("label", {
+      onClick: () => setShuffle(s => !s),
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 11,
+        padding: "10px 0",
+        cursor: "pointer"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 7
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        font: "var(--weight-medium) var(--text-sm)/1.2 var(--font-sans)",
+        color: "var(--text-primary)"
+      }
+    }, "Shuffle"), shuffle !== template.shuffle && /*#__PURE__*/React.createElement("span", {
+      style: {
+        font: "var(--text-2xs)/1 var(--font-sans)",
+        color: "var(--text-disabled)",
+        padding: "2px 6px",
+        borderRadius: "var(--radius-xs)",
+        background: "var(--ctv-surface-2)",
+        border: "1px solid var(--border-hairline)"
+      }
+    }, "overrides template")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 2,
+        font: "var(--text-2xs)/1.35 var(--font-sans)",
+        color: "var(--text-secondary)"
+      }
+    }, shuffle ? "Plays in a random order." : "Plays in sequence (chronological).")), /*#__PURE__*/React.createElement(Switch, {
+      checked: shuffle,
+      onChange: setShuffle
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: 1,
+        background: "var(--border-hairline)"
+      }
+    }), /*#__PURE__*/React.createElement("label", {
+      onClick: () => setAlways(s => !s),
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 10,
+        padding: "10px 11px",
+        borderRadius: "var(--radius-sm)",
+        cursor: "pointer",
+        background: always ? "var(--ctv-live-soft)" : "transparent",
+        border: `1px solid ${always ? "var(--ctv-live)" : "transparent"}`,
+        transition: "background 240ms cubic-bezier(0.16,1,0.3,1), border-color 240ms cubic-bezier(0.16,1,0.3,1)"
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: "inline-flex",
+        marginTop: 1,
+        color: "var(--ctv-live)",
+        flex: "0 0 auto"
+      }
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "Radio",
+      s: 16
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 7
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        font: "var(--weight-medium) var(--text-sm)/1.2 var(--font-sans)",
+        color: "var(--text-primary)"
+      }
+    }, "Always playing"), always !== template.always && /*#__PURE__*/React.createElement("span", {
+      style: {
+        font: "var(--text-2xs)/1 var(--font-sans)",
+        color: "var(--text-disabled)",
+        padding: "2px 6px",
+        borderRadius: "var(--radius-xs)",
+        background: "var(--ctv-surface-2)",
+        border: "1px solid var(--border-hairline)"
+      }
+    }, "overrides template"), always && /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "2px 7px",
+        borderRadius: "var(--radius-pill)",
+        background: "var(--ctv-live-soft)",
+        color: "var(--ctv-live)",
+        font: "var(--weight-semibold) 9px/1.4 var(--font-sans)",
+        letterSpacing: ".06em"
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: 5,
+        height: 5,
+        borderRadius: "50%",
+        background: "var(--ctv-live)"
+      }
+    }), "LIVE")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 3,
+        font: "var(--text-2xs)/1.35 var(--font-sans)",
+        color: "var(--text-secondary)"
+      }
+    }, "Like live TV \u2014 advances on schedule even when nobody is watching.")), /*#__PURE__*/React.createElement(Switch, {
+      checked: always,
+      onChange: setAlways
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        ...eyebrow,
+        marginBottom: 8
+      }
+    }, "Channel Template"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: () => setTplOpen(o => !o),
+      className: "ctv-press",
+      style: {
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: "10px 11px",
+        borderRadius: "var(--radius-sm)",
+        cursor: "pointer",
+        textAlign: "left",
+        background: "var(--ctv-bg-sunken)",
+        border: "1px solid var(--border-control)"
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 30,
+        height: 30,
+        borderRadius: "var(--radius-xs)",
+        background: "var(--ctv-surface-3)",
+        color: "var(--ctv-accent)",
+        flex: "0 0 auto"
+      }
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "SlidersHorizontal",
+      s: 15
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        minWidth: 0
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        font: "var(--weight-medium) var(--text-sm)/1 var(--font-sans)",
+        color: "var(--text-primary)"
+      }
+    }, template.name), !template.builtin && /*#__PURE__*/React.createElement(Badge, {
+      tone: "neutral"
+    }, "Custom")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 3,
+        font: "var(--text-2xs)/1.3 var(--font-sans)",
+        color: "var(--text-secondary)",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    }, template.desc)), /*#__PURE__*/React.createElement(Ico, {
+      n: tplOpen ? "ChevronUp" : "ChevronDown",
+      s: 15,
+      color: "var(--text-disabled)"
+    })), tplOpen && /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 6,
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        padding: 4,
+        borderRadius: "var(--radius-sm)",
+        background: "var(--ctv-bg-sunken)",
+        border: "1px solid var(--border-hairline)"
+      }
+    }, TEMPLATES.map(t => {
+      const on = t.id === tpl;
+      return /*#__PURE__*/React.createElement("button", {
+        key: t.id,
+        type: "button",
+        className: "ctv-press",
+        onClick: () => {
+          setTpl(t.id);
+          setTplOpen(false);
+          setShuffle(t.shuffle);
+          setAlways(t.always);
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 9,
+          padding: "8px 9px",
+          borderRadius: "var(--radius-xs)",
+          cursor: "pointer",
+          textAlign: "left",
+          background: on ? "color-mix(in srgb, var(--action-primary) 14%, transparent)" : "transparent",
+          border: "none"
+        }
+      }, /*#__PURE__*/React.createElement(Ico, {
+        n: on ? "CircleCheck" : "Circle",
+        s: 15,
+        color: on ? "var(--action-primary)" : "var(--text-disabled)"
+      }), /*#__PURE__*/React.createElement("div", {
+        style: {
+          flex: 1,
+          minWidth: 0
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 6
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        style: {
+          font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+          color: "var(--text-primary)"
+        }
+      }, t.name), !t.builtin && /*#__PURE__*/React.createElement(Badge, {
+        tone: "neutral"
+      }, "Custom")), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginTop: 2,
+          font: "var(--text-2xs)/1.3 var(--font-sans)",
+          color: "var(--text-secondary)"
+        }
+      }, t.desc)));
+    }), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 7,
+        padding: "8px 9px",
+        borderRadius: "var(--radius-xs)",
+        cursor: "pointer",
+        background: "none",
+        border: "none",
+        color: "var(--text-secondary)",
+        font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)"
+      }
+    }, /*#__PURE__*/React.createElement(Ico, {
+      n: "Save",
+      s: 14
+    }), "Save current settings as template\u2026")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 8,
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 5
+      }
+    }, template.sets.map(s => /*#__PURE__*/React.createElement("span", {
+      key: s,
+      style: {
+        padding: "3px 8px",
+        borderRadius: "var(--radius-xs)",
+        background: "var(--ctv-surface-2)",
+        border: "1px solid var(--border-hairline)",
+        font: "var(--text-2xs)/1.4 var(--font-sans)",
+        color: "var(--text-secondary)",
+        ...(/\d/.test(s) ? mono : {})
+      }
+    }, s)))), /*#__PURE__*/React.createElement(Advanced, {
+      templateName: template.name,
+      scrollerRef: railScrollerRef
+    })))));
+  }
+  window.CTVChannelBuilder = ChannelBuilder;
+})();
+})(); } catch (e) { __ds_ns.__errors.push({ path: "design_handoff_channel_builder/ChannelBuilder.jsx", error: String((e && e.message) || e) }); }
+
+__ds_ns.Badge = __ds_scope.Badge;
+
+__ds_ns.Card = __ds_scope.Card;
+
+__ds_ns.ChannelLogo = __ds_scope.ChannelLogo;
+
+__ds_ns.ProgressBar = __ds_scope.ProgressBar;
+
+__ds_ns.Stat = __ds_scope.Stat;
+
+__ds_ns.StatusDot = __ds_scope.StatusDot;
+
+__ds_ns.Tag = __ds_scope.Tag;
+
+__ds_ns.Spinner = __ds_scope.Spinner;
+
+__ds_ns.Toast = __ds_scope.Toast;
+
+__ds_ns.Tooltip = __ds_scope.Tooltip;
+
+__ds_ns.Button = __ds_scope.Button;
+
+__ds_ns.Checkbox = __ds_scope.Checkbox;
+
+__ds_ns.IconButton = __ds_scope.IconButton;
+
+__ds_ns.Input = __ds_scope.Input;
+
+__ds_ns.Select = __ds_scope.Select;
+
+__ds_ns.Switch = __ds_scope.Switch;
+
+__ds_ns.NavItem = __ds_scope.NavItem;
+
+__ds_ns.NavSection = __ds_scope.NavSection;
+
+__ds_ns.Tabs = __ds_scope.Tabs;
+
+})();
diff --git a/design-system/_ds_manifest.json b/design-system/_ds_manifest.json
new file mode 100644
index 000000000..160ff2967
--- /dev/null
+++ b/design-system/_ds_manifest.json
@@ -0,0 +1 @@
+{"namespace":"ChicoryTVDesignSystem_eb3b61","components":[{"name":"Badge","sourcePath":"components/data-display/Badge.jsx"},{"name":"Card","sourcePath":"components/data-display/Card.jsx"},{"name":"ChannelLogo","sourcePath":"components/data-display/ChannelLogo.jsx"},{"name":"ProgressBar","sourcePath":"components/data-display/ProgressBar.jsx"},{"name":"Stat","sourcePath":"components/data-display/Stat.jsx"},{"name":"StatusDot","sourcePath":"components/data-display/StatusDot.jsx"},{"name":"Tag","sourcePath":"components/data-display/Tag.jsx"},{"name":"Spinner","sourcePath":"components/feedback/Spinner.jsx"},{"name":"Toast","sourcePath":"components/feedback/Toast.jsx"},{"name":"Tooltip","sourcePath":"components/feedback/Tooltip.jsx"},{"name":"Button","sourcePath":"components/forms/Button.jsx"},{"name":"Checkbox","sourcePath":"components/forms/Checkbox.jsx"},{"name":"IconButton","sourcePath":"components/forms/IconButton.jsx"},{"name":"Input","sourcePath":"components/forms/Input.jsx"},{"name":"Select","sourcePath":"components/forms/Select.jsx"},{"name":"Switch","sourcePath":"components/forms/Switch.jsx"},{"name":"NavItem","sourcePath":"components/navigation/NavItem.jsx"},{"name":"NavSection","sourcePath":"components/navigation/NavItem.jsx"},{"name":"Tabs","sourcePath":"components/navigation/Tabs.jsx"}],"startingPoints":[{"name":"Button","path":"components/forms/Button.jsx","previewPath":"components/forms/forms.card.html","kind":"component","section":"Forms","subtitle":"Buttons in every variant & size","viewport":"700x330"},{"name":"Card","path":"components/data-display/Card.jsx","previewPath":"components/data-display/data-display.card.html","kind":"component","section":"Layout","subtitle":"Card surface with header + actions","viewport":"700x260"}],"cards":[{"path":"guidelines/brand-logo.card.html","group":"Brand","viewport":"700x180","subtitle":"Chicory-flower mark + wordmark; accent TV","name":"ChicoryTV wordmark"},{"path":"guidelines/color-accent.card.html","group":"Colors","viewport":"700x140","subtitle":"The single accent: primary actions, active nav, focus, live","name":"Accent — chicory periwinkle"},{"path":"guidelines/color-status.card.html","group":"Colors","viewport":"700x150","subtitle":"ok / warn / error — solid and soft tints","name":"Status colors"},{"path":"guidelines/color-surfaces.card.html","group":"Colors","viewport":"700x150","subtitle":"Layered dark surfaces from app background up to selected","name":"Surfaces & borders"},{"path":"guidelines/color-text.card.html","group":"Colors","viewport":"700x140","subtitle":"Primary / muted / faint — the three text weights","name":"Text on dark"},{"path":"guidelines/color-themes.card.html","group":"Colors","viewport":"700x180","subtitle":"Three shipped themes — set data-theme on <html>","name":"Color schemes"},{"path":"components/data-display/data-display.card.html","group":"Components","viewport":"700x330","subtitle":"Badge, StatusDot, Tag, ChannelLogo, Stat, ProgressBar, Card","name":"Data display"},{"path":"components/feedback/feedback.card.html","group":"Components","viewport":"700x260","subtitle":"Toast, Tooltip, Spinner","name":"Feedback"},{"path":"components/forms/forms.card.html","group":"Components","viewport":"700x330","subtitle":"Button, IconButton, Input, Select, Switch, Checkbox","name":"Forms"},{"path":"components/navigation/navigation.card.html","group":"Components","viewport":"700x260","subtitle":"NavItem sidebar, Tabs","name":"Navigation"},{"path":"guidelines/radius-elevation.card.html","group":"Spacing","viewport":"700x150","subtitle":"Tight corners; border-led elevation on dark","name":"Radii & elevation"},{"path":"guidelines/spacing-scale.card.html","group":"Spacing","viewport":"700x150","subtitle":"From 2px to 56px on a 4px base grid","name":"4px spacing scale"},{"path":"guidelines/type-mono.card.html","group":"Type","viewport":"700x200","subtitle":"Tabular figures for everything numeric","name":"Geist Mono — numbers, times, durations"},{"path":"guidelines/type-sans.card.html","group":"Type","viewport":"700x210","subtitle":"Page titles, card titles, body, labels","name":"Geist — UI sans scale"}],"templates":[{"name":"ChicoryTV Admin","description":"Dark IPTV channel-server admin shell — sidebar nav, Dashboard, Channels, Guide (EPG), Schedule editor, Playouts, Libraries, a Connect menu, and a 3-theme switcher (warm chicory primary). Built on the ","folder":"templates/chicorytv-admin","entryPath":"templates/chicorytv-admin/ChicoryTvAdmin.dc.html","thumbnail":{"path":"templates/chicorytv-admin/.thumbnail","kind":"captured"}}],"hasThumbnailHtml":false,"globalCssPaths":["tokens/fonts.css","tokens/colors.css","tokens/typography.css","tokens/spacing.css","tokens/radius-elevation-motion.css","tokens/themes.css","styles.css"],"tokens":[{"name":"--ctv-bg","value":"#12100E","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-bg-sunken","value":"#0C0B09","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-surface","value":"#1C1917","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-surface-2","value":"#241F1A","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-surface-3","value":"#2C2620","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-border","value":"#2E2823","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-border-strong","value":"#3C352D","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-text","value":"#F0EBE4","kind":"font","definedIn":"tokens/colors.css"},{"name":"--ctv-text-muted","value":"#A89E92","kind":"font","definedIn":"tokens/colors.css"},{"name":"--ctv-text-faint","value":"#726860","kind":"font","definedIn":"tokens/colors.css"},{"name":"--ctv-accent","value":"#E08A3C","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-accent-hover","value":"#EC9A52","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-accent-press","value":"#C9762E","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-accent-soft","value":"rgba(224, 138, 60, 0.15)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-accent-ring","value":"rgba(224, 138, 60, 0.45)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-secondary","value":"#6B8F71","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-secondary-soft","value":"rgba(107, 143, 113, 0.16)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-ok","value":"#3FB984","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-ok-soft","value":"rgba(63, 185, 132, 0.14)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-warn","value":"#E0A83D","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-warn-soft","value":"rgba(224, 168, 61, 0.14)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-error","value":"#E5484D","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-error-soft","value":"rgba(229, 72, 77, 0.14)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-live","value":"#E08A3C","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ctv-live-soft","value":"rgba(224, 138, 60, 0.16)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-app","value":"var(--ctv-bg)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-card","value":"var(--ctv-surface)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-raised","value":"var(--ctv-surface-2)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-selected","value":"var(--ctv-surface-3)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--border-hairline","value":"var(--ctv-border)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--border-control","value":"var(--ctv-border-strong)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--text-primary","value":"var(--ctv-text)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-secondary","value":"var(--ctv-text-muted)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-disabled","value":"var(--ctv-text-faint)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-on-accent","value":"#1F1204","kind":"font","definedIn":"tokens/colors.css"},{"name":"--action-primary","value":"var(--ctv-accent)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--action-primary-hover","value":"var(--ctv-accent-hover)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--action-primary-press","value":"var(--ctv-accent-press)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--focus-ring","value":"var(--ctv-accent-ring)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--status-ok","value":"var(--ctv-ok)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--status-warn","value":"var(--ctv-warn)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--status-error","value":"var(--ctv-error)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--status-live","value":"var(--ctv-live)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--font-sans","value":"\"Geist\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif","kind":"font","definedIn":"tokens/typography.css"},{"name":"--font-mono","value":"\"Geist Mono\", ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, monospace","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-2xs","value":"11px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-xs","value":"12px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-sm","value":"13px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-md","value":"14px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-lg","value":"16px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-xl","value":"20px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-2xl","value":"26px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-3xl","value":"34px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-normal","value":"400","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-medium","value":"500","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-semibold","value":"600","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-bold","value":"700","kind":"font","definedIn":"tokens/typography.css"},{"name":"--leading-tight","value":"1.2","kind":"font","definedIn":"tokens/typography.css"},{"name":"--leading-snug","value":"1.35","kind":"font","definedIn":"tokens/typography.css"},{"name":"--leading-normal","value":"1.5","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-tight","value":"-0.01em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-normal","value":"0","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-wide","value":"0.02em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-caps","value":"0.06em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--numeric-feature","value":"\"tnum\" 1, \"zero\" 1","kind":"other","definedIn":"tokens/typography.css","annotation":"other"},{"name":"--space-0","value":"0px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-1","value":"2px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-2","value":"4px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-3","value":"6px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-4","value":"8px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-5","value":"10px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-6","value":"12px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-7","value":"16px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-8","value":"20px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-9","value":"24px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-10","value":"32px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-11","value":"40px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-12","value":"56px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--gap-inline","value":"var(--space-4)","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--pad-control-x","value":"var(--space-7)","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--pad-control-y","value":"var(--space-4)","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--pad-card","value":"var(--space-9)","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--pad-cell-x","value":"var(--space-7)","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--pad-cell-y","value":"var(--space-5)","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--pad-page","value":"var(--space-10)","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--sidebar-w","value":"232px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--topbar-h","value":"52px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--row-h","value":"44px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--control-h","value":"34px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--control-h-sm","value":"28px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--radius-xs","value":"3px","kind":"radius","definedIn":"tokens/radius-elevation-motion.css"},{"name":"--radius-sm","value":"5px","kind":"radius","definedIn":"tokens/radius-elevation-motion.css"},{"name":"--radius-md","value":"7px","kind":"radius","definedIn":"tokens/radius-elevation-motion.css"},{"name":"--radius-lg","value":"10px","kind":"radius","definedIn":"tokens/radius-elevation-motion.css"},{"name":"--radius-pill","value":"999px","kind":"radius","definedIn":"tokens/radius-elevation-motion.css"},{"name":"--shadow-none","value":"none","kind":"shadow","definedIn":"tokens/radius-elevation-motion.css"},{"name":"--shadow-sm","value":"0 1px 2px rgba(0,0,0,0.40)","kind":"shadow","definedIn":"tokens/radius-elevation-motion.css"},{"name":"--shadow-md","value":"0 4px 12px rgba(0,0,0,0.45)","kind":"shadow","definedIn":"tokens/radius-elevation-motion.css"},{"name":"--shadow-lg","value":"0 16px 40px rgba(0,0,0,0.55)","kind":"shadow","definedIn":"tokens/radius-elevation-motion.css"},{"name":"--shadow-pop","value":"0 8px 28px rgba(0,0,0,0.55)","kind":"shadow","definedIn":"tokens/radius-elevation-motion.css"},{"name":"--ring-focus","value":"0 0 0 3px var(--focus-ring)","kind":"color","definedIn":"tokens/radius-elevation-motion.css"},{"name":"--ease-standard","value":"cubic-bezier(0.2, 0, 0, 1)","kind":"other","definedIn":"tokens/radius-elevation-motion.css","annotation":"other"},{"name":"--ease-out","value":"cubic-bezier(0.16, 1, 0.3, 1)","kind":"other","definedIn":"tokens/radius-elevation-motion.css","annotation":"other"},{"name":"--dur-fast","value":"90ms","kind":"other","definedIn":"tokens/radius-elevation-motion.css","annotation":"other"},{"name":"--dur-base","value":"140ms","kind":"other","definedIn":"tokens/radius-elevation-motion.css","annotation":"other"},{"name":"--dur-slow","value":"220ms","kind":"other","definedIn":"tokens/radius-elevation-motion.css","annotation":"other"},{"name":"--ctv-bg","value":"#0F1115","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-bg-sunken","value":"#0B0D11","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-surface","value":"#171A21","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-surface-2","value":"#1C2029","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-surface-3","value":"#222732","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-border","value":"#262B36","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-border-strong","value":"#333A48","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-text","value":"#E6E9EF","kind":"font","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-text-muted","value":"#9AA4B2","kind":"font","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-text-faint","value":"#626B7A","kind":"font","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-accent","value":"#5B7CFA","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-accent-hover","value":"#6E8BFB","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-accent-press","value":"#4C6BE8","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-accent-soft","value":"rgba(91, 124, 250, 0.14)","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-accent-ring","value":"rgba(91, 124, 250, 0.45)","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-secondary","value":"#5B7CFA","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-secondary-soft","value":"rgba(91, 124, 250, 0.14)","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-live","value":"#5B7CFA","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-live-soft","value":"rgba(91, 124, 250, 0.16)","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--text-on-accent","value":"#FFFFFF","kind":"font","definedIn":"tokens/themes.css","scope":"[data-theme=\"cool\"]"},{"name":"--ctv-bg","value":"#0F1115","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-bg-sunken","value":"#0B0D11","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-surface","value":"#171A21","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-surface-2","value":"#1C2029","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-surface-3","value":"#222732","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-border","value":"#262B36","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-border-strong","value":"#333A48","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-text","value":"#E6E9EF","kind":"font","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-text-muted","value":"#9AA4B2","kind":"font","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-text-faint","value":"#626B7A","kind":"font","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-accent","value":"#5B7CFA","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-accent-hover","value":"#6E8BFB","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-accent-press","value":"#4C6BE8","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-accent-soft","value":"rgba(91, 124, 250, 0.14)","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-accent-ring","value":"rgba(91, 124, 250, 0.45)","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-secondary","value":"#5B7CFA","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-secondary-soft","value":"rgba(91, 124, 250, 0.14)","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-live","value":"#F0663F","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--ctv-live-soft","value":"rgba(240, 102, 63, 0.16)","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--action-primary","value":"var(--ctv-live)","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--action-primary-hover","value":"#F47A57","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--action-primary-press","value":"#E0562F","kind":"color","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"},{"name":"--text-on-accent","value":"#FFFFFF","kind":"font","definedIn":"tokens/themes.css","scope":"[data-theme=\"dual\"]"}],"themes":[{"selector":"[data-theme=\"cool\"]","label":"Cool"},{"selector":"[data-theme=\"dual\"]","label":"Dual"}],"fonts":[],"brandFonts":[{"family":"Geist","status":"ok","tokens":["--font-sans"],"path":"tokens/typography.css"},{"family":"Geist Mono","status":"ok","tokens":["--font-mono"],"path":"tokens/typography.css"}],"source":"spa"}
\ No newline at end of file
diff --git a/design-system/assets/chicory-mark.svg b/design-system/assets/chicory-mark.svg
new file mode 100644
index 000000000..93be57a0e
--- /dev/null
+++ b/design-system/assets/chicory-mark.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" fill="none">
+  <g transform="translate(32 32)">
+    <rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(0)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(22.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(45)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(67.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(90)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(112.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(135)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(157.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(180)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(202.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(225)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(247.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(270)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(292.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(315)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(337.5)"></rect>
+    <circle r="8.5" fill="#0F1115"></circle>
+    <circle r="5" fill="#5B7CFA"></circle>
+    <circle r="2" fill="#0F1115"></circle>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/design-system/assets/chicorytv-icon.svg b/design-system/assets/chicorytv-icon.svg
new file mode 100644
index 000000000..e39ee9a03
--- /dev/null
+++ b/design-system/assets/chicorytv-icon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" fill="none">
+  <rect width="64" height="64" rx="14" fill="#171A21"></rect>
+  <g transform="translate(32 32) scale(0.82)">
+    <rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(0)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(22.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(45)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(67.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(90)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(112.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(135)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(157.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(180)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(202.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(225)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(247.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(270)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(292.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(315)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(337.5)"></rect>
+    <circle r="8.5" fill="#171A21"></circle>
+    <circle r="5" fill="#5B7CFA"></circle>
+    <circle r="2" fill="#171A21"></circle>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/design-system/assets/chicorytv-wordmark.svg b/design-system/assets/chicorytv-wordmark.svg
new file mode 100644
index 000000000..060143aa9
--- /dev/null
+++ b/design-system/assets/chicorytv-wordmark.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 48" width="250" height="48" fill="none">
+  <g transform="translate(24 24) scale(0.62)">
+    <rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(0)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(22.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(45)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(67.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(90)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(112.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(135)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(157.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(180)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(202.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(225)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(247.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(270)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(292.5)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#5B7CFA" transform="rotate(315)"></rect><rect x="-3.1" y="-30" width="6.2" height="20" rx="3.1" fill="#8AA1FC" transform="rotate(337.5)"></rect>
+    <circle r="8.5" fill="#0F1115"></circle>
+    <circle r="5" fill="#5B7CFA"></circle>
+    <circle r="2" fill="#0F1115"></circle>
+  </g>
+  <text x="52" y="32" font-family="Geist, system-ui, sans-serif" font-size="24" font-weight="600" letter-spacing="-0.5" fill="#E6E9EF">Chicory<tspan fill="#5B7CFA">TV</tspan></text>
+</svg>
\ No newline at end of file
diff --git a/design-system/components/data-display/Badge.d.ts b/design-system/components/data-display/Badge.d.ts
new file mode 100644
index 000000000..59745a52c
--- /dev/null
+++ b/design-system/components/data-display/Badge.d.ts
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export interface BadgeProps {
+  children?: React.ReactNode;
+  /** Semantic color. `accent` doubles as the live/on-air tone. */
+  tone?: "neutral" | "accent" | "ok" | "warn" | "error";
+  /** Filled instead of tinted-soft. */
+  solid?: boolean;
+  /** Leading status dot. */
+  dot?: boolean;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Compact status/label badge — streaming mode, HLS/MPEG-TS, health status.
+ */
+export function Badge(props: BadgeProps): JSX.Element;
diff --git a/design-system/components/data-display/Badge.jsx b/design-system/components/data-display/Badge.jsx
new file mode 100644
index 000000000..40583f341
--- /dev/null
+++ b/design-system/components/data-display/Badge.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+const tones = {
+  neutral: { fg: "var(--text-secondary)", bg: "var(--ctv-surface-3)", bd: "var(--border-hairline)" },
+  accent:  { fg: "var(--ctv-accent)", bg: "var(--ctv-accent-soft)", bd: "rgba(91,124,250,0.35)" },
+  ok:      { fg: "var(--status-ok)", bg: "var(--ctv-ok-soft)", bd: "rgba(63,185,132,0.35)" },
+  warn:    { fg: "var(--status-warn)", bg: "var(--ctv-warn-soft)", bd: "rgba(224,168,61,0.35)" },
+  error:   { fg: "var(--status-error)", bg: "var(--ctv-error-soft)", bd: "rgba(229,72,77,0.35)" },
+};
+
+/**
+ * Small status/label badge. Soft (tinted) or solid.
+ */
+export function Badge({ children, tone = "neutral", solid = false, dot = false, style = {} }) {
+  const t = tones[tone] || tones.neutral;
+  const solidBg = { neutral: "var(--ctv-surface-3)", accent: "var(--ctv-accent)", ok: "var(--status-ok)", warn: "var(--status-warn)", error: "var(--status-error)" };
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "5px",
+        height: "20px",
+        padding: dot ? "0 8px 0 6px" : "0 8px",
+        borderRadius: "var(--radius-xs)",
+        font: `var(--weight-medium) var(--text-2xs)/1 var(--font-sans)`,
+        letterSpacing: "0.02em",
+        color: solid ? (tone === "warn" ? "#1A1206" : "#fff") : t.fg,
+        background: solid ? solidBg[tone] : t.bg,
+        border: solid ? "1px solid transparent" : `1px solid ${t.bd}`,
+        whiteSpace: "nowrap",
+        ...style,
+      }}
+    >
+      {dot && <span style={{ width: 6, height: 6, borderRadius: "50%", background: solid ? "rgba(255,255,255,0.9)" : t.fg }} />}
+      {children}
+    </span>
+  );
+}
diff --git a/design-system/components/data-display/Badge.prompt.md b/design-system/components/data-display/Badge.prompt.md
new file mode 100644
index 000000000..23c9d8dc4
--- /dev/null
+++ b/design-system/components/data-display/Badge.prompt.md
@@ -0,0 +1,11 @@
+**Badge** — small status/label pill. Soft (tinted) by default; `solid` for stronger emphasis. Tones map to the status system; `accent` is also the live/on-air tone.
+
+```jsx
+<Badge tone="accent" dot>Live</Badge>
+<Badge tone="ok">Healthy</Badge>
+<Badge tone="warn">Not normalizing</Badge>
+<Badge tone="neutral">HLS Segmenter</Badge>
+<Badge tone="error" solid>Error</Badge>
+```
+
+Props: `tone` (neutral·accent·ok·warn·error), `solid`, `dot`.
diff --git a/design-system/components/data-display/Card.d.ts b/design-system/components/data-display/Card.d.ts
new file mode 100644
index 000000000..6f4ec916c
--- /dev/null
+++ b/design-system/components/data-display/Card.d.ts
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+/**
+ * @startingPoint section="Layout" subtitle="Card surface with header + actions" viewport="700x260"
+ */
+export interface CardProps {
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  /** Right-aligned header actions (buttons, menu). */
+  actions?: React.ReactNode;
+  children?: React.ReactNode;
+  /** Body padding — turn off for flush tables/lists. */
+  padded?: boolean;
+  /** Sunken well background instead of card surface. */
+  inset?: boolean;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Panel surface with optional header row; the base container for dashboard
+ * widgets, forms and detail panes.
+ */
+export function Card(props: CardProps): JSX.Element;
diff --git a/design-system/components/data-display/Card.jsx b/design-system/components/data-display/Card.jsx
new file mode 100644
index 000000000..4dd1fc165
--- /dev/null
+++ b/design-system/components/data-display/Card.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+/**
+ * Surface container. Optional header (title + actions) and body padding.
+ */
+export function Card({ title, subtitle, actions = null, children, padded = true, inset = false, style = {} }) {
+  return (
+    <div
+      style={{
+        background: inset ? "var(--ctv-bg-sunken)" : "var(--surface-card)",
+        border: "1px solid var(--border-hairline)",
+        borderRadius: "var(--radius-md)",
+        overflow: "hidden",
+        ...style,
+      }}
+    >
+      {(title || actions) && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "12px",
+            padding: "13px 16px",
+            borderBottom: "1px solid var(--border-hairline)",
+          }}
+        >
+          <div style={{ minWidth: 0 }}>
+            {title && <div style={{ font: "var(--weight-semibold) var(--text-md)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>{title}</div>}
+            {subtitle && <div style={{ marginTop: 3, font: "var(--text-xs)/1.3 var(--font-sans)", color: "var(--text-secondary)" }}>{subtitle}</div>}
+          </div>
+          {actions && <div style={{ display: "flex", alignItems: "center", gap: "8px", flex: "0 0 auto" }}>{actions}</div>}
+        </div>
+      )}
+      <div style={{ padding: padded ? "16px" : 0 }}>{children}</div>
+    </div>
+  );
+}
diff --git a/design-system/components/data-display/Card.prompt.md b/design-system/components/data-display/Card.prompt.md
new file mode 100644
index 000000000..919cf71db
--- /dev/null
+++ b/design-system/components/data-display/Card.prompt.md
@@ -0,0 +1,10 @@
+**Card** — the panel surface behind dashboard widgets, forms and detail panes. Header row is optional; set `padded={false}` when the body is a flush table or list.
+
+```jsx
+<Card title="Recent activity" actions={<Button size="sm" variant="ghost">View all</Button>}>
+  …
+</Card>
+<Card padded={false}><ChannelTable/></Card>
+```
+
+Props: `title`, `subtitle`, `actions`, `padded`, `inset`.
diff --git a/design-system/components/data-display/ChannelLogo.d.ts b/design-system/components/data-display/ChannelLogo.d.ts
new file mode 100644
index 000000000..754bbdd8c
--- /dev/null
+++ b/design-system/components/data-display/ChannelLogo.d.ts
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export interface ChannelLogoProps {
+  /** Channel name — seeds the generated initials + color when no image. */
+  name?: string;
+  /** Logo image URL; falls back to a generated chip when absent. */
+  src?: string | null;
+  size?: number;
+  radius?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Square channel logo; shows the uploaded image or a deterministic
+ * initials chip keyed to the channel name (like ErsatzTV's generated logos).
+ */
+export function ChannelLogo(props: ChannelLogoProps): JSX.Element;
diff --git a/design-system/components/data-display/ChannelLogo.jsx b/design-system/components/data-display/ChannelLogo.jsx
new file mode 100644
index 000000000..497a448c8
--- /dev/null
+++ b/design-system/components/data-display/ChannelLogo.jsx
@@ -0,0 +1,51 @@
+import React from "react";
+
+const palette = [
+  ["#5B7CFA", "#2E3A66"], ["#3FB984", "#1E4536"], ["#E0A83D", "#4A3818"],
+  ["#E5484D", "#4A1F21"], ["#B06CF0", "#38235A"], ["#48B0C8", "#193E47"],
+];
+
+function hashIndex(str) {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) >>> 0;
+  return h % palette.length;
+}
+
+/**
+ * Channel logo tile. Renders an image when given, else a generated
+ * initials chip keyed to the channel name — mirrors ErsatzTV's logo/gen.
+ */
+export function ChannelLogo({ name = "", src = null, size = 40, radius = "var(--radius-sm)", style = {} }) {
+  const [fg, bg] = palette[hashIndex(name)];
+  const initials = name
+    .split(/[\s\-|:]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0])
+    .join("")
+    .toUpperCase() || "?";
+
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: size,
+        height: size,
+        flex: "0 0 auto",
+        overflow: "hidden",
+        borderRadius: radius,
+        background: src ? "var(--ctv-bg-sunken)" : bg,
+        border: "1px solid var(--border-hairline)",
+        ...style,
+      }}
+    >
+      {src ? (
+        <img src={src} alt={name} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
+      ) : (
+        <span style={{ font: `var(--weight-semibold) ${Math.round(size * 0.34)}px/1 var(--font-mono)`, color: fg, letterSpacing: "0.02em" }}>{initials}</span>
+      )}
+    </span>
+  );
+}
diff --git a/design-system/components/data-display/ChannelLogo.prompt.md b/design-system/components/data-display/ChannelLogo.prompt.md
new file mode 100644
index 000000000..ae775b814
--- /dev/null
+++ b/design-system/components/data-display/ChannelLogo.prompt.md
@@ -0,0 +1,8 @@
+**ChannelLogo** — square channel avatar. Given `src`, shows the logo; otherwise generates a stable initials chip + color from `name` (mirrors ErsatzTV's `iptv/logos/gen`).
+
+```jsx
+<ChannelLogo name="Retro Cartoons" size={40} />
+<ChannelLogo name="News 24" src="/logos/news24.png" />
+```
+
+Props: `name`, `src`, `size`, `radius`.
diff --git a/design-system/components/data-display/ProgressBar.d.ts b/design-system/components/data-display/ProgressBar.d.ts
new file mode 100644
index 000000000..f94ad6bcb
--- /dev/null
+++ b/design-system/components/data-display/ProgressBar.d.ts
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export interface ProgressBarProps {
+  /** 0–100. Pass null/undefined for an indeterminate sweep. */
+  value?: number | null;
+  tone?: "accent" | "ok" | "warn" | "error";
+  height?: number;
+  /** Append a mono percentage on the right. */
+  showLabel?: boolean;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Slim progress bar for library scans, playout builds and transcodes.
+ */
+export function ProgressBar(props: ProgressBarProps): JSX.Element;
diff --git a/design-system/components/data-display/ProgressBar.jsx b/design-system/components/data-display/ProgressBar.jsx
new file mode 100644
index 000000000..ecabe10c4
--- /dev/null
+++ b/design-system/components/data-display/ProgressBar.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+const toneColor = {
+  accent: "var(--action-primary)",
+  ok: "var(--status-ok)",
+  warn: "var(--status-warn)",
+  error: "var(--status-error)",
+};
+
+/**
+ * Thin determinate/indeterminate progress bar — library scans, transcodes.
+ */
+export function ProgressBar({ value = null, tone = "accent", height = 6, showLabel = false, style = {} }) {
+  const c = toneColor[tone] || toneColor.accent;
+  const indeterminate = value == null;
+  const pct = Math.max(0, Math.min(100, value ?? 0));
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "10px", ...style }}>
+      <div style={{ position: "relative", flex: 1, height, borderRadius: "var(--radius-pill)", background: "var(--ctv-surface-3)", overflow: "hidden" }}>
+        <style>{`@keyframes ctv-indet{0%{left:-40%}100%{left:100%}}`}</style>
+        {indeterminate ? (
+          <span style={{ position: "absolute", top: 0, bottom: 0, width: "40%", borderRadius: "inherit", background: c, animation: "ctv-indet 1.1s var(--ease-standard) infinite" }} />
+        ) : (
+          <span style={{ position: "absolute", top: 0, left: 0, bottom: 0, width: `${pct}%`, borderRadius: "inherit", background: c, transition: "width var(--dur-slow) var(--ease-out)" }} />
+        )}
+      </div>
+      {showLabel && !indeterminate && (
+        <span style={{ font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)", color: "var(--text-secondary)", minWidth: 34, textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{Math.round(pct)}%</span>
+      )}
+    </div>
+  );
+}
diff --git a/design-system/components/data-display/ProgressBar.prompt.md b/design-system/components/data-display/ProgressBar.prompt.md
new file mode 100644
index 000000000..92056d9d0
--- /dev/null
+++ b/design-system/components/data-display/ProgressBar.prompt.md
@@ -0,0 +1,8 @@
+**ProgressBar** — slim bar for library scans, playout builds and transcodes. Omit `value` for an indeterminate sweep (queued/starting work).
+
+```jsx
+<ProgressBar value={62} showLabel />
+<ProgressBar value={null} tone="accent" /> {/* scanning… */}
+```
+
+Props: `value` (0–100 or null), `tone` (accent·ok·warn·error), `height`, `showLabel`.
diff --git a/design-system/components/data-display/Stat.d.ts b/design-system/components/data-display/Stat.d.ts
new file mode 100644
index 000000000..ef73282c6
--- /dev/null
+++ b/design-system/components/data-display/Stat.d.ts
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+export interface StatProps {
+  label: string;
+  /** The metric value — rendered in tabular mono. */
+  value: React.ReactNode;
+  unit?: string;
+  /** Small change indicator, e.g. "+3" or "2 warnings". */
+  delta?: React.ReactNode;
+  deltaTone?: "up" | "down" | "neutral";
+  icon?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Dashboard KPI — mono tabular value with label, optional delta and icon.
+ */
+export function Stat(props: StatProps): JSX.Element;
diff --git a/design-system/components/data-display/Stat.jsx b/design-system/components/data-display/Stat.jsx
new file mode 100644
index 000000000..5353ba72a
--- /dev/null
+++ b/design-system/components/data-display/Stat.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+/**
+ * Dashboard metric. Big mono value, label, optional delta + icon.
+ */
+export function Stat({ label, value, unit, delta = null, deltaTone = "neutral", icon = null, style = {} }) {
+  const dc = { up: "var(--status-ok)", down: "var(--status-error)", neutral: "var(--text-secondary)" };
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "8px", ...style }}>
+      <div style={{ display: "flex", alignItems: "center", gap: "7px" }}>
+        {icon && <span style={{ display: "inline-flex", color: "var(--text-disabled)" }}>{icon}</span>}
+        <span style={{ font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", letterSpacing: "0.03em", color: "var(--text-secondary)" }}>{label}</span>
+      </div>
+      <div style={{ display: "flex", alignItems: "baseline", gap: "6px" }}>
+        <span style={{ font: "var(--weight-semibold) var(--text-2xl)/1 var(--font-mono)", color: "var(--text-primary)", letterSpacing: "-0.01em", fontVariantNumeric: "tabular-nums" }}>{value}</span>
+        {unit && <span style={{ font: "var(--text-sm)/1 var(--font-sans)", color: "var(--text-disabled)" }}>{unit}</span>}
+        {delta != null && (
+          <span style={{ marginLeft: 2, font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)", color: dc[deltaTone] }}>{delta}</span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/design-system/components/data-display/Stat.prompt.md b/design-system/components/data-display/Stat.prompt.md
new file mode 100644
index 000000000..3a76ce13c
--- /dev/null
+++ b/design-system/components/data-display/Stat.prompt.md
@@ -0,0 +1,9 @@
+**Stat** — a dashboard KPI. Value is set in tabular mono so columns of numbers align. Use for channel counts, active streams, uptime.
+
+```jsx
+<Stat label="Active streams" value="7" icon={<Ico n="Radio"/>} delta="+2" deltaTone="up" />
+<Stat label="Channels" value="128" />
+<Stat label="Uptime" value="14d 06h" />
+```
+
+Props: `label`, `value`, `unit`, `delta`, `deltaTone` (up·down·neutral), `icon`.
diff --git a/design-system/components/data-display/StatusDot.d.ts b/design-system/components/data-display/StatusDot.d.ts
new file mode 100644
index 000000000..6a732721f
--- /dev/null
+++ b/design-system/components/data-display/StatusDot.d.ts
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export interface StatusDotProps {
+  /** `live` auto-pulses in accent; others are static. */
+  status?: "live" | "ok" | "warn" | "error" | "idle";
+  /** Force the pulsing ring on any status. */
+  pulse?: boolean;
+  size?: number;
+  label?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Small colored status dot; pulses for live/on-air channels.
+ */
+export function StatusDot(props: StatusDotProps): JSX.Element;
diff --git a/design-system/components/data-display/StatusDot.jsx b/design-system/components/data-display/StatusDot.jsx
new file mode 100644
index 000000000..9f97061bc
--- /dev/null
+++ b/design-system/components/data-display/StatusDot.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+const colors = {
+  live: "var(--status-live)",
+  ok: "var(--status-ok)",
+  warn: "var(--status-warn)",
+  error: "var(--status-error)",
+  idle: "var(--text-disabled)",
+};
+
+/**
+ * Status dot with optional pulsing ring — on-air / live indicators.
+ */
+export function StatusDot({ status = "idle", pulse = false, size = 8, label, style = {} }) {
+  const c = colors[status] || colors.idle;
+  const doPulse = pulse || status === "live";
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", gap: "7px", ...style }}>
+      <span style={{ position: "relative", width: size, height: size, flex: "0 0 auto" }}>
+        {doPulse && (
+          <span
+            style={{
+              position: "absolute",
+              inset: 0,
+              borderRadius: "50%",
+              background: c,
+              animation: "ctv-ping 1.6s cubic-bezier(0,0,0.2,1) infinite",
+            }}
+          />
+        )}
+        <span style={{ position: "absolute", inset: 0, borderRadius: "50%", background: c, boxShadow: doPulse ? `0 0 6px ${c}` : "none" }} />
+        <style>{`@keyframes ctv-ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.4);opacity:0}}`}</style>
+      </span>
+      {label && <span style={{ font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>{label}</span>}
+    </span>
+  );
+}
diff --git a/design-system/components/data-display/StatusDot.prompt.md b/design-system/components/data-display/StatusDot.prompt.md
new file mode 100644
index 000000000..1076f0896
--- /dev/null
+++ b/design-system/components/data-display/StatusDot.prompt.md
@@ -0,0 +1,9 @@
+**StatusDot** — tiny colored dot for channel/transcode state. `live` pulses in accent (on-air), the rest are static status colors.
+
+```jsx
+<StatusDot status="live" label="On air" />
+<StatusDot status="ok" label="Idle" />
+<StatusDot status="error" label="Failed" />
+```
+
+Props: `status` (live·ok·warn·error·idle), `pulse`, `size`, `label`.
diff --git a/design-system/components/data-display/Tag.d.ts b/design-system/components/data-display/Tag.d.ts
new file mode 100644
index 000000000..04cd425d7
--- /dev/null
+++ b/design-system/components/data-display/Tag.d.ts
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export interface TagProps {
+  children?: React.ReactNode;
+  /** Show a remove (×) button and handle its click. */
+  onRemove?: () => void;
+  /** Optional leading icon. */
+  icon?: React.ReactNode;
+  tone?: "neutral" | "accent";
+  style?: React.CSSProperties;
+}
+
+/**
+ * Chip for filters, smart-collection criteria and media tags; optionally removable.
+ */
+export function Tag(props: TagProps): JSX.Element;
diff --git a/design-system/components/data-display/Tag.jsx b/design-system/components/data-display/Tag.jsx
new file mode 100644
index 000000000..08fa5eb8a
--- /dev/null
+++ b/design-system/components/data-display/Tag.jsx
@@ -0,0 +1,54 @@
+import React from "react";
+
+/**
+ * Removable chip/tag — smart-collection filters, tags on media.
+ */
+export function Tag({ children, onRemove, icon = null, tone = "neutral", style = {} }) {
+  const [hover, setHover] = React.useState(false);
+  const tint = tone === "accent";
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "6px",
+        height: "22px",
+        padding: onRemove ? "0 5px 0 8px" : "0 9px",
+        borderRadius: "var(--radius-xs)",
+        font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+        color: tint ? "var(--ctv-accent)" : "var(--text-primary)",
+        background: tint ? "var(--ctv-accent-soft)" : "var(--ctv-surface-3)",
+        border: `1px solid ${tint ? "rgba(91,124,250,0.35)" : "var(--border-hairline)"}`,
+        whiteSpace: "nowrap",
+        ...style,
+      }}
+    >
+      {icon && <span style={{ display: "inline-flex", color: "var(--text-disabled)" }}>{icon}</span>}
+      {children}
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          onMouseEnter={() => setHover(true)}
+          onMouseLeave={() => setHover(false)}
+          aria-label="Remove"
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 15,
+            height: 15,
+            padding: 0,
+            border: "none",
+            borderRadius: "3px",
+            cursor: "pointer",
+            color: hover ? "var(--text-primary)" : "var(--text-disabled)",
+            background: hover ? "rgba(255,255,255,0.08)" : "transparent",
+          }}
+        >
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" /></svg>
+        </button>
+      )}
+    </span>
+  );
+}
diff --git a/design-system/components/data-display/Tag.prompt.md b/design-system/components/data-display/Tag.prompt.md
new file mode 100644
index 000000000..36fb99b88
--- /dev/null
+++ b/design-system/components/data-display/Tag.prompt.md
@@ -0,0 +1,8 @@
+**Tag** — chip for filters, smart-collection criteria, and media tags. Pass `onRemove` to show a × button.
+
+```jsx
+<Tag>genre: comedy</Tag>
+<Tag tone="accent" onRemove={() => drop(i)}>released ≥ 1990</Tag>
+```
+
+Props: `onRemove`, `icon`, `tone` (neutral·accent).
diff --git a/design-system/components/data-display/data-display.card.html b/design-system/components/data-display/data-display.card.html
new file mode 100644
index 000000000..ac5327973
--- /dev/null
+++ b/design-system/components/data-display/data-display.card.html
@@ -0,0 +1,71 @@
+<!-- @dsCard group="Components" viewport="700x330" name="Data display" subtitle="Badge, StatusDot, Tag, ChannelLogo, Stat, ProgressBar, Card" -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>
+  body { margin: 0; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-sans); }
+  #root { padding: 22px 24px; }
+  .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+const NS = window.ChicoryTVDesignSystem_eb3b61;
+const { Badge, StatusDot, Tag, ChannelLogo, Stat, ProgressBar, Card } = NS;
+const Ico = ({ n, s = 15 }) => { const r = React.useRef(null); React.useEffect(() => { if (r.current) { r.current.innerHTML=""; const el = window.lucide.createElement(window.lucide.icons[n]); el.setAttribute("width", s); el.setAttribute("height", s); r.current.appendChild(el);} }); return <span ref={r} style={{ display: "inline-flex" }} />; };
+
+function Demo() {
+  return (
+    <div>
+      <div className="row">
+        <Badge tone="accent" dot>Live</Badge>
+        <Badge tone="ok">Healthy</Badge>
+        <Badge tone="warn">Not normalizing</Badge>
+        <Badge tone="error" solid>Error</Badge>
+        <Badge tone="neutral">HLS Segmenter</Badge>
+        <span style={{ width: 8 }} />
+        <StatusDot status="live" label="On air" />
+        <StatusDot status="ok" label="Idle" />
+        <StatusDot status="error" label="Failed" />
+      </div>
+      <div className="row">
+        <Tag icon={<Ico n="Tag" s={12} />}>genre: comedy</Tag>
+        <Tag tone="accent" onRemove={() => {}}>released ≥ 1990</Tag>
+        <Tag onRemove={() => {}}>rating: PG</Tag>
+        <span style={{ width: 8 }} />
+        <ChannelLogo name="Retro Cartoons" size={38} />
+        <ChannelLogo name="News 24" size={38} />
+        <ChannelLogo name="Late Night" size={38} />
+      </div>
+      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 16, alignItems: "start" }}>
+        <Card padded={true} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
+          <Stat label="Active streams" value="7" icon={<Ico n="Radio" />} delta="+2" deltaTone="up" />
+          <Stat label="Channels" value="128" icon={<Ico n="Tv" />} />
+          <Stat label="Scheduled" value="1,204" icon={<Ico n="CalendarClock" />} />
+          <Stat label="Uptime" value="14d 06h" icon={<Ico n="Activity" />} />
+        </Card>
+        <Card title="Library scan" subtitle="Movies · local">
+          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+            <ProgressBar value={62} showLabel />
+            <ProgressBar value={null} tone="accent" />
+            <ProgressBar value={100} tone="ok" showLabel />
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>
diff --git a/design-system/components/feedback/Spinner.d.ts b/design-system/components/feedback/Spinner.d.ts
new file mode 100644
index 000000000..b84547095
--- /dev/null
+++ b/design-system/components/feedback/Spinner.d.ts
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+export interface SpinnerProps {
+  size?: number;
+  tone?: "accent" | "muted" | "ok";
+  stroke?: number;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Indeterminate ring spinner — inline busy state for locked playouts/rows.
+ */
+export function Spinner(props: SpinnerProps): JSX.Element;
diff --git a/design-system/components/feedback/Spinner.jsx b/design-system/components/feedback/Spinner.jsx
new file mode 100644
index 000000000..d172cbdd1
--- /dev/null
+++ b/design-system/components/feedback/Spinner.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+/**
+ * Indeterminate ring spinner.
+ */
+export function Spinner({ size = 18, tone = "accent", stroke = 2.4, style = {} }) {
+  const c = { accent: "var(--action-primary)", muted: "var(--text-disabled)", ok: "var(--status-ok)" }[tone] || "var(--action-primary)";
+  return (
+    <span style={{ display: "inline-flex", ...style }}>
+      <style>{`@keyframes ctv-spin{to{transform:rotate(360deg)}}`}</style>
+      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ animation: "ctv-spin 0.7s linear infinite" }}>
+        <circle cx="12" cy="12" r="9" stroke={c} strokeOpacity="0.2" strokeWidth={stroke} />
+        <path d="M21 12a9 9 0 0 0-9-9" stroke={c} strokeWidth={stroke} strokeLinecap="round" />
+      </svg>
+    </span>
+  );
+}
diff --git a/design-system/components/feedback/Spinner.prompt.md b/design-system/components/feedback/Spinner.prompt.md
new file mode 100644
index 000000000..8e872d7b8
--- /dev/null
+++ b/design-system/components/feedback/Spinner.prompt.md
@@ -0,0 +1,7 @@
+**Spinner** — inline busy indicator for locked playouts, in-flight row actions, and loading panes.
+
+```jsx
+<Spinner size={16} tone="accent" />
+```
+
+Props: `size`, `tone` (accent·muted·ok), `stroke`.
diff --git a/design-system/components/feedback/Toast.d.ts b/design-system/components/feedback/Toast.d.ts
new file mode 100644
index 000000000..e79f76fd9
--- /dev/null
+++ b/design-system/components/feedback/Toast.d.ts
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export interface ToastProps {
+  tone?: "info" | "ok" | "warn" | "error";
+  title?: React.ReactNode;
+  message?: React.ReactNode;
+  /** Show a dismiss button. */
+  onClose?: () => void;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Toast / inline alert with a tone-colored accent edge — save confirmations,
+ * scan results, playout-build failures.
+ */
+export function Toast(props: ToastProps): JSX.Element;
diff --git a/design-system/components/feedback/Toast.jsx b/design-system/components/feedback/Toast.jsx
new file mode 100644
index 000000000..5001357f7
--- /dev/null
+++ b/design-system/components/feedback/Toast.jsx
@@ -0,0 +1,46 @@
+import React from "react";
+
+const map = {
+  ok:    { c: "var(--status-ok)", bg: "var(--ctv-ok-soft)", icon: "M5 12.5l4.5 4.5L19 7" },
+  warn:  { c: "var(--status-warn)", bg: "var(--ctv-warn-soft)", icon: "M12 8v5M12 17h.01" },
+  error: { c: "var(--status-error)", bg: "var(--ctv-error-soft)", icon: "M12 8v5M12 17h.01" },
+  info:  { c: "var(--ctv-accent)", bg: "var(--ctv-accent-soft)", icon: "M12 11v5M12 8h.01" },
+};
+
+/**
+ * Toast / inline alert. Icon, message, optional close.
+ */
+export function Toast({ tone = "info", title, message, onClose, style = {} }) {
+  const t = map[tone] || map.info;
+  return (
+    <div
+      role="status"
+      style={{
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "11px",
+        width: "min(380px, 100%)",
+        padding: "12px 13px",
+        background: "var(--surface-raised)",
+        border: "1px solid var(--border-hairline)",
+        borderLeft: `2px solid ${t.c}`,
+        borderRadius: "var(--radius-md)",
+        boxShadow: "var(--shadow-md)",
+        ...style,
+      }}
+    >
+      <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 22, height: 22, borderRadius: "var(--radius-xs)", background: t.bg, flex: "0 0 auto", marginTop: 1 }}>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke={t.c} strokeWidth="0" fill="none" /><path d={t.icon} stroke={t.c} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
+      </span>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        {title && <div style={{ font: "var(--weight-semibold) var(--text-sm)/1.3 var(--font-sans)", color: "var(--text-primary)" }}>{title}</div>}
+        {message && <div style={{ marginTop: title ? 2 : 0, font: "var(--text-xs)/1.45 var(--font-sans)", color: "var(--text-secondary)" }}>{message}</div>}
+      </div>
+      {onClose && (
+        <button type="button" onClick={onClose} aria-label="Dismiss" style={{ display: "inline-flex", padding: 3, border: "none", background: "transparent", color: "var(--text-disabled)", cursor: "pointer", flex: "0 0 auto" }}>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg>
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/design-system/components/feedback/Toast.prompt.md b/design-system/components/feedback/Toast.prompt.md
new file mode 100644
index 000000000..fae15e9a7
--- /dev/null
+++ b/design-system/components/feedback/Toast.prompt.md
@@ -0,0 +1,8 @@
+**Toast** — transient notification or inline alert with a tone-colored left edge. Use for save confirmations, scan results, and playout-build failures.
+
+```jsx
+<Toast tone="ok" title="Channel saved" message="Retro Cartoons is now on air." onClose={dismiss} />
+<Toast tone="error" title="Playout build failed" message="No items match the schedule." />
+```
+
+Props: `tone` (info·ok·warn·error), `title`, `message`, `onClose`.
diff --git a/design-system/components/feedback/Tooltip.d.ts b/design-system/components/feedback/Tooltip.d.ts
new file mode 100644
index 000000000..89522e762
--- /dev/null
+++ b/design-system/components/feedback/Tooltip.d.ts
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+export interface TooltipProps {
+  label: React.ReactNode;
+  placement?: "top" | "bottom" | "left" | "right";
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Hover tooltip wrapping any trigger — icon-button labels, truncated text.
+ */
+export function Tooltip(props: TooltipProps): JSX.Element;
diff --git a/design-system/components/feedback/Tooltip.jsx b/design-system/components/feedback/Tooltip.jsx
new file mode 100644
index 000000000..0b6c107eb
--- /dev/null
+++ b/design-system/components/feedback/Tooltip.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+/**
+ * Hover tooltip. Wraps a trigger; shows a small dark label.
+ */
+export function Tooltip({ label, placement = "top", children, style = {} }) {
+  const [show, setShow] = React.useState(false);
+  const pos = {
+    top: { bottom: "calc(100% + 7px)", left: "50%", transform: "translateX(-50%)" },
+    bottom: { top: "calc(100% + 7px)", left: "50%", transform: "translateX(-50%)" },
+    left: { right: "calc(100% + 7px)", top: "50%", transform: "translateY(-50%)" },
+    right: { left: "calc(100% + 7px)", top: "50%", transform: "translateY(-50%)" },
+  }[placement];
+
+  return (
+    <span
+      onMouseEnter={() => setShow(true)}
+      onMouseLeave={() => setShow(false)}
+      style={{ position: "relative", display: "inline-flex", ...style }}
+    >
+      {children}
+      {show && label && (
+        <span
+          role="tooltip"
+          style={{
+            position: "absolute",
+            zIndex: 50,
+            ...pos,
+            padding: "5px 9px",
+            borderRadius: "var(--radius-sm)",
+            background: "var(--ctv-surface-3)",
+            border: "1px solid var(--border-control)",
+            boxShadow: "var(--shadow-pop)",
+            color: "var(--text-primary)",
+            font: "var(--weight-medium) var(--text-xs)/1.2 var(--font-sans)",
+            whiteSpace: "nowrap",
+            pointerEvents: "none",
+          }}
+        >
+          {label}
+        </span>
+      )}
+    </span>
+  );
+}
diff --git a/design-system/components/feedback/Tooltip.prompt.md b/design-system/components/feedback/Tooltip.prompt.md
new file mode 100644
index 000000000..af13dec4e
--- /dev/null
+++ b/design-system/components/feedback/Tooltip.prompt.md
@@ -0,0 +1,7 @@
+**Tooltip** — hover label for icon buttons and truncated text. Wrap the trigger element.
+
+```jsx
+<Tooltip label="Reset playout"><IconButton title="Reset"><Ico n="RefreshCw"/></IconButton></Tooltip>
+```
+
+Props: `label`, `placement` (top·bottom·left·right).
diff --git a/design-system/components/feedback/feedback.card.html b/design-system/components/feedback/feedback.card.html
new file mode 100644
index 000000000..e8188a7fe
--- /dev/null
+++ b/design-system/components/feedback/feedback.card.html
@@ -0,0 +1,50 @@
+<!-- @dsCard group="Components" viewport="700x260" name="Feedback" subtitle="Toast, Tooltip, Spinner" -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>
+  body { margin: 0; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-sans); }
+  #root { padding: 22px 24px; display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
+  .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-disabled); margin-bottom: 12px; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+const NS = window.ChicoryTVDesignSystem_eb3b61;
+const { Toast, Tooltip, Spinner, IconButton } = NS;
+const Ico = ({ n, s = 16 }) => { const r = React.useRef(null); React.useEffect(() => { if (r.current){ r.current.innerHTML=""; const el = window.lucide.createElement(window.lucide.icons[n]); el.setAttribute("width", s); el.setAttribute("height", s); r.current.appendChild(el);} }); return <span ref={r} style={{ display: "inline-flex" }} />; };
+
+function Demo() {
+  return (
+    <React.Fragment>
+      <div style={{ display: "flex", flexDirection: "column", gap: 12, width: 380 }}>
+        <Toast tone="ok" title="Channel saved" message="Retro Cartoons is now on air." onClose={() => {}} />
+        <Toast tone="warn" title="FFmpeg profile is not normalizing" message="Playback may stutter in some browsers." onClose={() => {}} />
+        <Toast tone="error" title="Playout build failed" message="No items match the schedule window." onClose={() => {}} />
+      </div>
+      <div>
+        <div className="lbl">Tooltip · Spinner</div>
+        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+          <Tooltip label="Reset playout"><IconButton title="Reset"><Ico n="RefreshCw" /></IconButton></Tooltip>
+          <Tooltip label="Troubleshoot" placement="bottom"><IconButton title="Info"><Ico n="Info" /></IconButton></Tooltip>
+          <Spinner size={18} tone="accent" />
+          <Spinner size={18} tone="muted" />
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>
diff --git a/design-system/components/forms/Button.d.ts b/design-system/components/forms/Button.d.ts
new file mode 100644
index 000000000..2da598b5a
--- /dev/null
+++ b/design-system/components/forms/Button.d.ts
@@ -0,0 +1,27 @@
+import * as React from "react";
+
+/**
+ * @startingPoint section="Forms" subtitle="Buttons in every variant & size" viewport="700x330"
+ */
+export interface ButtonProps {
+  children?: React.ReactNode;
+  /** Visual role. `primary` is the single accent action; use one per view. */
+  variant?: "primary" | "secondary" | "ghost" | "danger";
+  size?: "sm" | "md";
+  /** Icon element rendered before the label (16px stroke icon). */
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  disabled?: boolean;
+  /** Shows an inline spinner and disables the button. */
+  loading?: boolean;
+  fullWidth?: boolean;
+  type?: "button" | "submit" | "reset";
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Primary action button for ChicoryTV. One `primary` per view; everything else
+ * is `secondary`/`ghost`. `danger` for destructive confirmations.
+ */
+export function Button(props: ButtonProps): JSX.Element;
diff --git a/design-system/components/forms/Button.jsx b/design-system/components/forms/Button.jsx
new file mode 100644
index 000000000..53f52b990
--- /dev/null
+++ b/design-system/components/forms/Button.jsx
@@ -0,0 +1,107 @@
+import React from "react";
+
+const sizeMap = {
+  sm: { height: "var(--control-h-sm)", padding: "0 12px", font: "var(--text-xs)" },
+  md: { height: "var(--control-h)", padding: "0 14px", font: "var(--text-sm)" },
+};
+
+const variantStyle = {
+  primary: {
+    background: "var(--action-primary)",
+    color: "var(--text-on-accent)",
+    border: "1px solid transparent",
+  },
+  secondary: {
+    background: "var(--ctv-surface-2)",
+    color: "var(--text-primary)",
+    border: "1px solid var(--border-control)",
+  },
+  ghost: {
+    background: "transparent",
+    color: "var(--text-secondary)",
+    border: "1px solid transparent",
+  },
+  danger: {
+    background: "var(--ctv-error-soft)",
+    color: "var(--status-error)",
+    border: "1px solid rgba(229,72,77,0.35)",
+  },
+};
+
+const hoverBg = {
+  primary: "var(--action-primary-hover)",
+  secondary: "var(--ctv-surface-3)",
+  ghost: "var(--ctv-surface-2)",
+  danger: "rgba(229,72,77,0.22)",
+};
+
+/**
+ * ChicoryTV primary action button.
+ */
+export function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  startIcon = null,
+  endIcon = null,
+  disabled = false,
+  loading = false,
+  fullWidth = false,
+  onClick,
+  type = "button",
+  style = {},
+  ...rest
+}) {
+  const [hover, setHover] = React.useState(false);
+  const [active, setActive] = React.useState(false);
+  const s = sizeMap[size] || sizeMap.md;
+  const v = variantStyle[variant] || variantStyle.primary;
+  const isDisabled = disabled || loading;
+
+  return (
+    <button
+      type={type}
+      disabled={isDisabled}
+      onClick={onClick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => { setHover(false); setActive(false); }}
+      onMouseDown={() => setActive(true)}
+      onMouseUp={() => setActive(false)}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "7px",
+        height: s.height,
+        padding: s.padding,
+        width: fullWidth ? "100%" : "auto",
+        font: `var(--weight-medium) ${s.font}/1 var(--font-sans)`,
+        letterSpacing: "0.01em",
+        borderRadius: "var(--radius-sm)",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? 0.45 : 1,
+        whiteSpace: "nowrap",
+        transition: "background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard)",
+        transform: active && !isDisabled ? "translateY(0.5px)" : "none",
+        ...v,
+        background: !isDisabled && hover ? hoverBg[variant] : v.background,
+        ...style,
+      }}
+      {...rest}
+    >
+      {loading ? <Spinner16 /> : startIcon}
+      {children}
+      {!loading && endIcon}
+    </button>
+  );
+}
+
+function Spinner16() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ animation: "ctv-spin 0.7s linear infinite" }}>
+      <style>{`@keyframes ctv-spin{to{transform:rotate(360deg)}}`}</style>
+      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
+      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+    </svg>
+  );
+}
diff --git a/design-system/components/forms/Button.prompt.md b/design-system/components/forms/Button.prompt.md
new file mode 100644
index 000000000..e817e3f12
--- /dev/null
+++ b/design-system/components/forms/Button.prompt.md
@@ -0,0 +1,11 @@
+**Button** — the primary action control. Use exactly one `primary` button per view (add channel, save); everything else is `secondary` or `ghost`. `danger` is reserved for destructive confirmations.
+
+```jsx
+<Button variant="primary" startIcon={<PlusIcon/>}>Add Channel</Button>
+<Button variant="secondary">Edit Numbers</Button>
+<Button variant="ghost" size="sm">Cancel</Button>
+<Button variant="danger">Delete</Button>
+<Button variant="primary" loading>Saving…</Button>
+```
+
+Props: `variant` (primary·secondary·ghost·danger), `size` (sm·md), `startIcon`/`endIcon`, `loading`, `disabled`, `fullWidth`.
diff --git a/design-system/components/forms/Checkbox.d.ts b/design-system/components/forms/Checkbox.d.ts
new file mode 100644
index 000000000..a1d2d6dae
--- /dev/null
+++ b/design-system/components/forms/Checkbox.d.ts
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export interface CheckboxProps {
+  checked?: boolean;
+  onChange?: (next: boolean) => void;
+  label?: string;
+  /** Mixed state for "select all" headers. */
+  indeterminate?: boolean;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Checkbox for multi-select rows and option lists; supports indeterminate.
+ */
+export function Checkbox(props: CheckboxProps): JSX.Element;
diff --git a/design-system/components/forms/Checkbox.jsx b/design-system/components/forms/Checkbox.jsx
new file mode 100644
index 000000000..aeb27b812
--- /dev/null
+++ b/design-system/components/forms/Checkbox.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+/**
+ * Checkbox with label. Controlled via checked/onChange.
+ */
+export function Checkbox({ checked = false, onChange, disabled = false, label, indeterminate = false, style = {} }) {
+  const toggle = () => { if (!disabled && onChange) onChange(!checked); };
+  const on = checked || indeterminate;
+  return (
+    <label style={{ display: "inline-flex", alignItems: "center", gap: "8px", cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1, ...style }}>
+      <span
+        role="checkbox"
+        aria-checked={indeterminate ? "mixed" : checked}
+        onClick={toggle}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 17,
+          height: 17,
+          flex: "0 0 auto",
+          borderRadius: "var(--radius-xs)",
+          background: on ? "var(--action-primary)" : "var(--ctv-bg-sunken)",
+          border: `1px solid ${on ? "transparent" : "var(--border-control)"}`,
+          transition: "background var(--dur-fast), border-color var(--dur-fast)",
+        }}
+      >
+        {indeterminate ? (
+          <svg width="11" height="11" viewBox="0 0 24 24"><path d="M6 12h12" stroke="#fff" strokeWidth="3" strokeLinecap="round" /></svg>
+        ) : checked ? (
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M5 12.5l4.5 4.5L19 7" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /></svg>
+        ) : null}
+      </span>
+      {label && <span style={{ font: "var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}>{label}</span>}
+    </label>
+  );
+}
diff --git a/design-system/components/forms/Checkbox.prompt.md b/design-system/components/forms/Checkbox.prompt.md
new file mode 100644
index 000000000..93322d6b1
--- /dev/null
+++ b/design-system/components/forms/Checkbox.prompt.md
@@ -0,0 +1,8 @@
+**Checkbox** — multi-select in tables (collection items, bulk actions) and option lists. Use `indeterminate` on a header "select all".
+
+```jsx
+<Checkbox checked={sel} onChange={setSel} label="Include in EPG" />
+<Checkbox indeterminate onChange={selectAll} />
+```
+
+Props: `checked`, `onChange(next)`, `label`, `indeterminate`, `disabled`.
diff --git a/design-system/components/forms/IconButton.d.ts b/design-system/components/forms/IconButton.d.ts
new file mode 100644
index 000000000..889307e5a
--- /dev/null
+++ b/design-system/components/forms/IconButton.d.ts
@@ -0,0 +1,20 @@
+import * as React from "react";
+
+export interface IconButtonProps {
+  /** A 16–18px stroke icon element. */
+  children?: React.ReactNode;
+  size?: "sm" | "md";
+  variant?: "ghost" | "solid";
+  /** Persistent pressed/selected state (e.g. active view toggle). */
+  active?: boolean;
+  disabled?: boolean;
+  /** Tooltip + aria-label — always provide one. */
+  title?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Square icon-only button for dense row actions and toolbars.
+ */
+export function IconButton(props: IconButtonProps): JSX.Element;
diff --git a/design-system/components/forms/IconButton.jsx b/design-system/components/forms/IconButton.jsx
new file mode 100644
index 000000000..d0bbcb297
--- /dev/null
+++ b/design-system/components/forms/IconButton.jsx
@@ -0,0 +1,59 @@
+import React from "react";
+
+/**
+ * Compact square icon button — table row actions, toolbars.
+ */
+export function IconButton({
+  children,
+  size = "md",
+  variant = "ghost",
+  disabled = false,
+  active = false,
+  title,
+  onClick,
+  style = {},
+  ...rest
+}) {
+  const [hover, setHover] = React.useState(false);
+  const dim = size === "sm" ? 28 : 32;
+
+  const base =
+    variant === "solid"
+      ? { background: "var(--action-primary)", color: "var(--text-on-accent)" }
+      : { background: active ? "var(--ctv-surface-3)" : "transparent", color: active ? "var(--text-primary)" : "var(--text-secondary)" };
+
+  const hoverBg =
+    variant === "solid" ? "var(--action-primary-hover)" : "var(--ctv-surface-2)";
+
+  return (
+    <button
+      type="button"
+      title={title}
+      aria-label={title}
+      disabled={disabled}
+      onClick={onClick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: dim,
+        height: dim,
+        flex: "0 0 auto",
+        borderRadius: "var(--radius-sm)",
+        border: "1px solid transparent",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.4 : 1,
+        color: base.color,
+        background: !disabled && hover ? hoverBg : base.background,
+        transition: "background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)",
+        ...(!disabled && hover && variant !== "solid" ? { color: "var(--text-primary)" } : {}),
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/design-system/components/forms/IconButton.prompt.md b/design-system/components/forms/IconButton.prompt.md
new file mode 100644
index 000000000..3cd4e96c6
--- /dev/null
+++ b/design-system/components/forms/IconButton.prompt.md
@@ -0,0 +1,9 @@
+**IconButton** — icon-only square button for table row actions (edit, preview, delete) and toolbars. Always pass `title` for the tooltip/aria-label.
+
+```jsx
+<IconButton title="Edit channel"><EditIcon/></IconButton>
+<IconButton title="Preview" variant="solid"><PlayIcon/></IconButton>
+<IconButton title="Delete" disabled><TrashIcon/></IconButton>
+```
+
+Props: `size` (sm·md), `variant` (ghost·solid), `active`, `disabled`, `title`.
diff --git a/design-system/components/forms/Input.d.ts b/design-system/components/forms/Input.d.ts
new file mode 100644
index 000000000..fb81937f1
--- /dev/null
+++ b/design-system/components/forms/Input.d.ts
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+export interface InputProps {
+  label?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  /** 16px stroke icon shown inside, left of the field (e.g. search). */
+  leadingIcon?: React.ReactNode;
+  /** Element pinned to the right inside the field (clear button, unit). */
+  trailing?: React.ReactNode;
+  /** Error message — turns the border red and shows text below. */
+  error?: string | null;
+  disabled?: boolean;
+  size?: "sm" | "md";
+  type?: string;
+  fullWidth?: boolean;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Text field on a sunken well with focus ring and optional icon/error.
+ */
+export function Input(props: InputProps): JSX.Element;
diff --git a/design-system/components/forms/Input.jsx b/design-system/components/forms/Input.jsx
new file mode 100644
index 000000000..99d4d5822
--- /dev/null
+++ b/design-system/components/forms/Input.jsx
@@ -0,0 +1,90 @@
+import React from "react";
+
+/**
+ * Text input with optional label, leading icon and error state.
+ */
+export function Input({
+  label,
+  value,
+  onChange,
+  placeholder,
+  leadingIcon = null,
+  trailing = null,
+  error = null,
+  disabled = false,
+  size = "md",
+  type = "text",
+  fullWidth = true,
+  style = {},
+  ...rest
+}) {
+  const [focus, setFocus] = React.useState(false);
+  const height = size === "sm" ? "var(--control-h-sm)" : "var(--control-h)";
+  const borderColor = error
+    ? "var(--status-error)"
+    : focus
+    ? "var(--action-primary)"
+    : "var(--border-control)";
+
+  return (
+    <label style={{ display: "block", width: fullWidth ? "100%" : "auto" }}>
+      {label && (
+        <span
+          style={{
+            display: "block",
+            marginBottom: "6px",
+            font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+            color: "var(--text-secondary)",
+          }}
+        >
+          {label}
+        </span>
+      )}
+      <span
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          height,
+          padding: "0 10px",
+          background: "var(--ctv-bg-sunken)",
+          border: `1px solid ${borderColor}`,
+          borderRadius: "var(--radius-sm)",
+          boxShadow: focus && !error ? "0 0 0 3px var(--focus-ring)" : "none",
+          transition: "border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard)",
+          opacity: disabled ? 0.5 : 1,
+          ...style,
+        }}
+      >
+        {leadingIcon && (
+          <span style={{ display: "flex", color: "var(--text-disabled)", flex: "0 0 auto" }}>{leadingIcon}</span>
+        )}
+        <input
+          type={type}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          onFocus={() => setFocus(true)}
+          onBlur={() => setFocus(false)}
+          style={{
+            flex: 1,
+            minWidth: 0,
+            background: "transparent",
+            border: "none",
+            outline: "none",
+            color: "var(--text-primary)",
+            font: "var(--weight-normal) var(--text-sm)/1 var(--font-sans)",
+          }}
+          {...rest}
+        />
+        {trailing && <span style={{ display: "flex", flex: "0 0 auto" }}>{trailing}</span>}
+      </span>
+      {error && (
+        <span style={{ display: "block", marginTop: "5px", font: "var(--text-xs)/1.3 var(--font-sans)", color: "var(--status-error)" }}>
+          {error}
+        </span>
+      )}
+    </label>
+  );
+}
diff --git a/design-system/components/forms/Input.prompt.md b/design-system/components/forms/Input.prompt.md
new file mode 100644
index 000000000..5bbc7950e
--- /dev/null
+++ b/design-system/components/forms/Input.prompt.md
@@ -0,0 +1,9 @@
+**Input** — text field on a sunken well. Supports label, leading icon (search), trailing element, and error state.
+
+```jsx
+<Input label="Channel name" value={v} onChange={e=>set(e.target.value)} />
+<Input leadingIcon={<SearchIcon/>} placeholder="Search channels…" />
+<Input label="Number" error="Already in use" value="5.1" />
+```
+
+Props: `label`, `leadingIcon`, `trailing`, `error`, `size` (sm·md), `disabled`, `type`.
diff --git a/design-system/components/forms/Select.d.ts b/design-system/components/forms/Select.d.ts
new file mode 100644
index 000000000..8ef95ed8d
--- /dev/null
+++ b/design-system/components/forms/Select.d.ts
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectProps {
+  label?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  /** Options as strings or {value,label} objects. */
+  options?: (string | SelectOption)[];
+  disabled?: boolean;
+  size?: "sm" | "md";
+  fullWidth?: boolean;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Native-backed select with ChicoryTV chrome and a custom chevron.
+ */
+export function Select(props: SelectProps): JSX.Element;
diff --git a/design-system/components/forms/Select.jsx b/design-system/components/forms/Select.jsx
new file mode 100644
index 000000000..8df3372db
--- /dev/null
+++ b/design-system/components/forms/Select.jsx
@@ -0,0 +1,76 @@
+import React from "react";
+
+/**
+ * Styled select built on a native <select> for accessibility.
+ */
+export function Select({
+  label,
+  value,
+  onChange,
+  options = [],
+  disabled = false,
+  size = "md",
+  fullWidth = true,
+  style = {},
+  ...rest
+}) {
+  const [focus, setFocus] = React.useState(false);
+  const height = size === "sm" ? "var(--control-h-sm)" : "var(--control-h)";
+  const opts = options.map((o) => (typeof o === "string" ? { value: o, label: o } : o));
+
+  return (
+    <label style={{ display: "block", width: fullWidth ? "100%" : "auto" }}>
+      {label && (
+        <span style={{ display: "block", marginBottom: "6px", font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>
+          {label}
+        </span>
+      )}
+      <span
+        style={{
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          height,
+          background: "var(--ctv-bg-sunken)",
+          border: `1px solid ${focus ? "var(--action-primary)" : "var(--border-control)"}`,
+          borderRadius: "var(--radius-sm)",
+          boxShadow: focus ? "0 0 0 3px var(--focus-ring)" : "none",
+          transition: "border-color var(--dur-fast), box-shadow var(--dur-fast)",
+          opacity: disabled ? 0.5 : 1,
+          ...style,
+        }}
+      >
+        <select
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          onFocus={() => setFocus(true)}
+          onBlur={() => setFocus(false)}
+          style={{
+            appearance: "none",
+            WebkitAppearance: "none",
+            flex: 1,
+            height: "100%",
+            padding: "0 30px 0 10px",
+            background: "transparent",
+            border: "none",
+            outline: "none",
+            color: "var(--text-primary)",
+            font: "var(--weight-normal) var(--text-sm)/1 var(--font-sans)",
+            cursor: disabled ? "not-allowed" : "pointer",
+          }}
+          {...rest}
+        >
+          {opts.map((o) => (
+            <option key={o.value} value={o.value} style={{ background: "var(--ctv-surface-2)", color: "var(--text-primary)" }}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ position: "absolute", right: 9, pointerEvents: "none", color: "var(--text-disabled)" }}>
+          <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </span>
+    </label>
+  );
+}
diff --git a/design-system/components/forms/Select.prompt.md b/design-system/components/forms/Select.prompt.md
new file mode 100644
index 000000000..0a4d0d447
--- /dev/null
+++ b/design-system/components/forms/Select.prompt.md
@@ -0,0 +1,9 @@
+**Select** — dropdown built on a native `<select>` for keyboard/a11y, dressed in ChicoryTV chrome.
+
+```jsx
+<Select label="Streaming mode"
+  value={mode} onChange={e=>setMode(e.target.value)}
+  options={["HLS Segmenter","HLS Direct","MPEG-TS"]} />
+```
+
+Options accept plain strings or `{value,label}`. Props: `label`, `size` (sm·md), `disabled`.
diff --git a/design-system/components/forms/Switch.d.ts b/design-system/components/forms/Switch.d.ts
new file mode 100644
index 000000000..b8dba3da6
--- /dev/null
+++ b/design-system/components/forms/Switch.d.ts
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export interface SwitchProps {
+  checked?: boolean;
+  onChange?: (next: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+  size?: "sm" | "md";
+  style?: React.CSSProperties;
+}
+
+/**
+ * Boolean toggle — "Show disabled", "Enabled in EPG", filler visibility.
+ */
+export function Switch(props: SwitchProps): JSX.Element;
diff --git a/design-system/components/forms/Switch.jsx b/design-system/components/forms/Switch.jsx
new file mode 100644
index 000000000..98277c498
--- /dev/null
+++ b/design-system/components/forms/Switch.jsx
@@ -0,0 +1,48 @@
+import React from "react";
+
+/**
+ * On/off toggle switch.
+ */
+export function Switch({ checked = false, onChange, disabled = false, label, size = "md", style = {} }) {
+  const w = size === "sm" ? 30 : 36;
+  const h = size === "sm" ? 17 : 20;
+  const knob = h - 5;
+
+  const toggle = () => { if (!disabled && onChange) onChange(!checked); };
+
+  return (
+    <label style={{ display: "inline-flex", alignItems: "center", gap: "9px", cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1, ...style }}>
+      <span
+        role="switch"
+        aria-checked={checked}
+        onClick={toggle}
+        style={{
+          position: "relative",
+          width: w,
+          height: h,
+          flex: "0 0 auto",
+          borderRadius: "var(--radius-pill)",
+          background: checked ? "var(--action-primary)" : "var(--ctv-surface-3)",
+          border: `1px solid ${checked ? "transparent" : "var(--border-control)"}`,
+          transition: "background var(--dur-base) var(--ease-standard)",
+        }}
+      >
+        <span
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: checked ? `calc(100% - ${knob + 2}px)` : "2px",
+            transform: "translateY(-50%)",
+            width: knob,
+            height: knob,
+            borderRadius: "50%",
+            background: "#fff",
+            boxShadow: "0 1px 2px rgba(0,0,0,0.5)",
+            transition: "left var(--dur-base) var(--ease-out)",
+          }}
+        />
+      </span>
+      {label && <span style={{ font: "var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}>{label}</span>}
+    </label>
+  );
+}
diff --git a/design-system/components/forms/Switch.prompt.md b/design-system/components/forms/Switch.prompt.md
new file mode 100644
index 000000000..fc201d270
--- /dev/null
+++ b/design-system/components/forms/Switch.prompt.md
@@ -0,0 +1,7 @@
+**Switch** — instant on/off toggle for settings and table filters ("Show disabled", "Show filler"). Track turns accent when on.
+
+```jsx
+<Switch checked={showDisabled} onChange={setShowDisabled} label="Show disabled" />
+```
+
+Props: `checked`, `onChange(next)`, `label`, `size` (sm·md), `disabled`.
diff --git a/design-system/components/forms/forms.card.html b/design-system/components/forms/forms.card.html
new file mode 100644
index 000000000..cbcc5c132
--- /dev/null
+++ b/design-system/components/forms/forms.card.html
@@ -0,0 +1,64 @@
+<!-- @dsCard group="Components" viewport="700x330" name="Forms" subtitle="Button, IconButton, Input, Select, Switch, Checkbox" -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>
+  body { margin: 0; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-sans); }
+  #root { padding: 22px 24px; }
+  .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
+  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; max-width: 620px; }
+  .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-disabled); margin-bottom: 10px; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+const { Button, IconButton, Input, Select, Switch, Checkbox } = window.ChicoryTVDesignSystem_eb3b61;
+const Ico = ({ n, s = 16 }) => { const r = React.useRef(null); React.useEffect(() => { if (r.current) r.current.innerHTML = ""; const el = window.lucide.createElement(window.lucide.icons[n]); el.setAttribute("width", s); el.setAttribute("height", s); r.current.appendChild(el); }); return <span ref={r} style={{ display: "inline-flex" }} />; };
+
+function Demo() {
+  const [sw, setSw] = React.useState(true);
+  const [cb, setCb] = React.useState(true);
+  return (
+    <div>
+      <div className="row">
+        <Button variant="primary" startIcon={<Ico n="Plus" />}>Add Channel</Button>
+        <Button variant="secondary" startIcon={<Ico n="Pencil" />}>Edit Numbers</Button>
+        <Button variant="ghost">Cancel</Button>
+        <Button variant="danger" startIcon={<Ico n="Trash2" />}>Delete</Button>
+        <Button variant="primary" loading>Saving</Button>
+        <Button variant="primary" disabled>Disabled</Button>
+      </div>
+      <div className="row">
+        <IconButton title="Preview" variant="solid"><Ico n="Play" /></IconButton>
+        <IconButton title="Edit"><Ico n="Pencil" /></IconButton>
+        <IconButton title="Refresh"><Ico n="RefreshCw" /></IconButton>
+        <IconButton title="Info"><Ico n="Info" /></IconButton>
+        <IconButton title="Delete"><Ico n="Trash2" /></IconButton>
+        <IconButton title="Disabled" disabled><Ico n="Play" /></IconButton>
+        <span style={{ width: 16 }} />
+        <Switch checked={sw} onChange={setSw} label="Show disabled" />
+        <Checkbox checked={cb} onChange={setCb} label="In EPG" />
+      </div>
+      <div className="grid">
+        <Input label="Channel name" value="Retro Cartoons" onChange={() => {}} />
+        <Select label="Streaming mode" value="HLS Segmenter" onChange={() => {}} options={["HLS Segmenter", "HLS Direct", "MPEG-TS"]} />
+        <Input leadingIcon={<Ico n="Search" />} placeholder="Search channels…" />
+        <Input label="Channel number" value="5.1" error="Already in use" onChange={() => {}} />
+      </div>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>
diff --git a/design-system/components/navigation/NavItem.d.ts b/design-system/components/navigation/NavItem.d.ts
new file mode 100644
index 000000000..75df2e81e
--- /dev/null
+++ b/design-system/components/navigation/NavItem.d.ts
@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export interface NavItemProps {
+  /** 16–18px stroke icon. */
+  icon?: React.ReactNode;
+  label: string;
+  active?: boolean;
+  /** Count badge (playout warnings, health errors). */
+  badge?: React.ReactNode;
+  badgeTone?: "warn" | "error" | "accent";
+  href?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  style?: React.CSSProperties;
+}
+
+/**
+ * One left-sidebar nav row; active state shows an accent rail + tint.
+ */
+export function NavItem(props: NavItemProps): JSX.Element;
+
+export interface NavSectionProps {
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+/** Uppercase eyebrow grouping a set of NavItems. */
+export function NavSection(props: NavSectionProps): JSX.Element;
diff --git a/design-system/components/navigation/NavItem.jsx b/design-system/components/navigation/NavItem.jsx
new file mode 100644
index 000000000..8f855418c
--- /dev/null
+++ b/design-system/components/navigation/NavItem.jsx
@@ -0,0 +1,55 @@
+import React from "react";
+
+/**
+ * Single left-sidebar navigation item. Compose a list of these.
+ */
+export function NavItem({ icon = null, label, active = false, badge = null, badgeTone = "warn", onClick, href, style = {} }) {
+  const [hover, setHover] = React.useState(false);
+  const Comp = href ? "a" : "button";
+  const bt = { warn: "var(--status-warn)", error: "var(--status-error)", accent: "var(--action-primary)" }[badgeTone];
+  return (
+    <Comp
+      href={href}
+      onClick={onClick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        width: "100%",
+        height: "34px",
+        padding: "0 10px",
+        border: "none",
+        borderRadius: "var(--radius-sm)",
+        textDecoration: "none",
+        cursor: "pointer",
+        textAlign: "left",
+        font: `${active ? "var(--weight-medium)" : "var(--weight-normal)"} var(--text-sm)/1 var(--font-sans)`,
+        color: active ? "var(--text-primary)" : hover ? "var(--text-primary)" : "var(--text-secondary)",
+        background: active ? "var(--ctv-accent-soft)" : hover ? "var(--ctv-surface-2)" : "transparent",
+        transition: "background var(--dur-fast) var(--ease-standard), color var(--dur-fast)",
+        ...style,
+      }}
+    >
+      {active && <span style={{ position: "absolute", left: 0, top: 7, bottom: 7, width: 2.5, borderRadius: 2, background: "var(--action-primary)" }} />}
+      {icon && <span style={{ display: "inline-flex", color: active ? "var(--action-primary)" : "currentColor", flex: "0 0 auto" }}>{icon}</span>}
+      <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{label}</span>
+      {badge != null && (
+        <span style={{ minWidth: 17, height: 17, padding: "0 5px", display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--radius-pill)", background: bt, color: badgeTone === "warn" ? "#1A1206" : "#fff", font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-mono)" }}>{badge}</span>
+      )}
+    </Comp>
+  );
+}
+
+/**
+ * Sidebar section label (eyebrow) that groups NavItems.
+ */
+export function NavSection({ children, style = {} }) {
+  return (
+    <div style={{ padding: "14px 10px 6px", font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-sans)", letterSpacing: "var(--tracking-caps)", textTransform: "uppercase", color: "var(--text-disabled)", ...style }}>
+      {children}
+    </div>
+  );
+}
diff --git a/design-system/components/navigation/NavItem.prompt.md b/design-system/components/navigation/NavItem.prompt.md
new file mode 100644
index 000000000..c295a792f
--- /dev/null
+++ b/design-system/components/navigation/NavItem.prompt.md
@@ -0,0 +1,9 @@
+**NavItem / NavSection** — building blocks of the left sidebar. Active item gets an accent rail, tint, and accent icon. `NavSection` is the uppercase group eyebrow. Count badges surface playout warnings / health errors.
+
+```jsx
+<NavSection>Scheduling</NavSection>
+<NavItem icon={<Ico n="Tv"/>} label="Channels" active />
+<NavItem icon={<Ico n="CalendarClock"/>} label="Playouts" badge={3} badgeTone="warn" />
+```
+
+Props (NavItem): `icon`, `label`, `active`, `badge`, `badgeTone` (warn·error·accent), `href`/`onClick`.
diff --git a/design-system/components/navigation/Tabs.d.ts b/design-system/components/navigation/Tabs.d.ts
new file mode 100644
index 000000000..56775df5a
--- /dev/null
+++ b/design-system/components/navigation/Tabs.d.ts
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+export interface TabItem {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  count?: number;
+}
+
+export interface TabsProps {
+  /** Strings or {value,label,icon,count}. */
+  tabs: (string | TabItem)[];
+  value?: string;
+  onChange?: (value: string) => void;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Underlined tab bar for editor sub-views (Channel: General / Streaming / Watermark).
+ */
+export function Tabs(props: TabsProps): JSX.Element;
diff --git a/design-system/components/navigation/Tabs.jsx b/design-system/components/navigation/Tabs.jsx
new file mode 100644
index 000000000..3c29fed2d
--- /dev/null
+++ b/design-system/components/navigation/Tabs.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+
+/**
+ * Underlined tab bar. Controlled via value/onChange.
+ */
+export function Tabs({ tabs = [], value, onChange, style = {} }) {
+  const items = tabs.map((t) => (typeof t === "string" ? { value: t, label: t } : t));
+  const active = value ?? items[0]?.value;
+  return (
+    <div style={{ display: "flex", gap: "2px", borderBottom: "1px solid var(--border-hairline)", ...style }}>
+      {items.map((t) => {
+        const on = t.value === active;
+        return <Tab key={t.value} tab={t} on={on} onChange={onChange} />;
+      })}
+    </div>
+  );
+}
+
+function Tab({ tab, on, onChange }) {
+  const [hover, setHover] = React.useState(false);
+  return (
+    <button
+      type="button"
+      onClick={() => onChange && onChange(tab.value)}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "7px",
+        height: "34px",
+        padding: "0 12px",
+        border: "none",
+        background: "transparent",
+        cursor: "pointer",
+        font: `${on ? "var(--weight-medium)" : "var(--weight-normal)"} var(--text-sm)/1 var(--font-sans)`,
+        color: on ? "var(--text-primary)" : hover ? "var(--text-primary)" : "var(--text-secondary)",
+        transition: "color var(--dur-fast)",
+      }}
+    >
+      {tab.icon && <span style={{ display: "inline-flex", color: on ? "var(--action-primary)" : "currentColor" }}>{tab.icon}</span>}
+      {tab.label}
+      {tab.count != null && (
+        <span style={{ font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-disabled)", background: "var(--ctv-surface-3)", padding: "2px 5px", borderRadius: "var(--radius-xs)" }}>{tab.count}</span>
+      )}
+      <span style={{ position: "absolute", left: 6, right: 6, bottom: -1, height: 2, borderRadius: 2, background: on ? "var(--action-primary)" : "transparent", transition: "background var(--dur-fast)" }} />
+    </button>
+  );
+}
diff --git a/design-system/components/navigation/Tabs.prompt.md b/design-system/components/navigation/Tabs.prompt.md
new file mode 100644
index 000000000..f7298dbab
--- /dev/null
+++ b/design-system/components/navigation/Tabs.prompt.md
@@ -0,0 +1,8 @@
+**Tabs** — underlined tab bar for editor sub-views and detail panes (Channel → General / Streaming / Watermark; Playout → Detail / Log). Active tab shows an accent underline.
+
+```jsx
+<Tabs value={tab} onChange={setTab}
+  tabs={[{value:"general",label:"General"},{value:"streaming",label:"Streaming"},{value:"items",label:"Items",count:12}]} />
+```
+
+Props: `tabs` (string | {value,label,icon,count}), `value`, `onChange`.
diff --git a/design-system/components/navigation/navigation.card.html b/design-system/components/navigation/navigation.card.html
new file mode 100644
index 000000000..dbf54771c
--- /dev/null
+++ b/design-system/components/navigation/navigation.card.html
@@ -0,0 +1,53 @@
+<!-- @dsCard group="Components" viewport="700x260" name="Navigation" subtitle="NavItem sidebar, Tabs" -->
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>
+  body { margin: 0; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-sans); }
+  #root { padding: 20px 24px; display: flex; gap: 28px; align-items: flex-start; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel">
+const NS = window.ChicoryTVDesignSystem_eb3b61;
+const { NavItem, NavSection, Tabs } = NS;
+const Ico = ({ n, s = 16 }) => { const r = React.useRef(null); React.useEffect(() => { if (r.current){ r.current.innerHTML=""; const el = window.lucide.createElement(window.lucide.icons[n]); el.setAttribute("width", s); el.setAttribute("height", s); r.current.appendChild(el);} }); return <span ref={r} style={{ display: "inline-flex" }} />; };
+
+function Demo() {
+  const [tab, setTab] = React.useState("streaming");
+  return (
+    <React.Fragment>
+      <div style={{ width: 216, background: "var(--surface-card)", border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-md)", padding: 8 }}>
+        <NavItem icon={<Ico n="LayoutDashboard" />} label="Dashboard" />
+        <NavItem icon={<Ico n="Tv" />} label="Channels" active />
+        <NavItem icon={<Ico n="CalendarClock" />} label="Schedules" />
+        <NavItem icon={<Ico n="ListVideo" />} label="Playouts" badge={3} badgeTone="warn" />
+        <NavSection>Media</NavSection>
+        <NavItem icon={<Ico n="Library" />} label="Libraries" />
+        <NavItem icon={<Ico n="FolderTree" />} label="Collections" />
+        <NavItem icon={<Ico n="Settings" />} label="Settings" />
+      </div>
+      <div style={{ flex: 1, maxWidth: 380 }}>
+        <Tabs value={tab} onChange={setTab} tabs={[
+          { value: "general", label: "General" },
+          { value: "streaming", label: "Streaming" },
+          { value: "items", label: "Schedule items", count: 12 },
+        ]} />
+      </div>
+    </React.Fragment>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
+</script>
+</body>
+</html>
diff --git a/design-system/design_handoff_channel_builder/ChannelBuilder.jsx b/design-system/design_handoff_channel_builder/ChannelBuilder.jsx
new file mode 100644
index 000000000..452c63399
--- /dev/null
+++ b/design-system/design_handoff_channel_builder/ChannelBuilder.jsx
@@ -0,0 +1,619 @@
+// Channel Builder — GROUND-UP replacement for the four-editor create chain
+// (Channel -> Schedule -> Schedule Items -> Playout). One library-to-lineup screen.
+// Left: searchable library browser. Center: the channel lineup (add by double-click
+// or drag; drag to reorder). Right: friendly options + Channel Template + Advanced.
+// Behind the scenes "Create" builds Channel + Collection + Schedule + Items + Playout.
+(function () {
+  const NS = window.ChicoryTVDesignSystem_eb3b61;
+  const { Button, IconButton, Input, Select, Switch, Badge, ChannelLogo, Tooltip } = NS;
+  const Ico = window.Ico;
+  const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };
+  const eyebrow = { font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-sans)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-disabled)" };
+
+  // ---- Mock library (shows / movies / music / docs across libraries) --------
+  const LIB = [
+    { id: "s1", title: "Looney Tunes", type: "Show",  library: "Cartoons",       sub: "247 shorts",     min: 96 },
+    { id: "s2", title: "Tom & Jerry", type: "Show",   library: "Cartoons",       sub: "164 shorts",     min: 72 },
+    { id: "s3", title: "Popeye",       type: "Show",  library: "Cartoons",       sub: "108 shorts",     min: 54 },
+    { id: "s4", title: "The Flintstones", type: "Show", library: "Cartoons",     sub: "166 episodes",   min: 84 },
+    { id: "s5", title: "Scooby-Doo",   type: "Show",  library: "Cartoons",       sub: "97 episodes",    min: 60 },
+    { id: "s6", title: "Pink Panther", type: "Show",  library: "Cartoons",       sub: "124 shorts",     min: 48 },
+    { id: "m1", title: "Blade Runner", type: "Movie", library: "Movies",         sub: "1982 · Sci-Fi",  min: 117 },
+    { id: "m2", title: "Alien",        type: "Movie", library: "Movies",         sub: "1979 · Horror",  min: 117 },
+    { id: "m3", title: "The Thing",    type: "Movie", library: "Movies",         sub: "1982 · Horror",  min: 109 },
+    { id: "m4", title: "Metropolis",   type: "Movie", library: "Movies",         sub: "1927 · Sci-Fi",  min: 153 },
+    { id: "m5", title: "Nosferatu",    type: "Movie", library: "Movies",         sub: "1922 · Horror",  min: 94 },
+    { id: "t1", title: "The Twilight Zone", type: "Show", library: "TV Shows",   sub: "156 episodes",   min: 51 },
+    { id: "t2", title: "Star Trek",    type: "Show",  library: "TV Shows",       sub: "79 episodes",    min: 50 },
+    { id: "t3", title: "Columbo",      type: "Show",  library: "TV Shows",       sub: "69 episodes",    min: 94 },
+    { id: "t4", title: "Cheers",       type: "Show",  library: "TV Shows",       sub: "275 episodes",   min: 24 },
+    { id: "u1", title: "80s Synthpop", type: "Music", library: "Music Videos",   sub: "212 videos",     min: 45 },
+    { id: "u2", title: "90s Alt Rock", type: "Music", library: "Music Videos",   sub: "188 videos",     min: 45 },
+    { id: "u3", title: "Chart Countdown", type: "Music", library: "Music Videos", sub: "Top 40",        min: 60 },
+    { id: "d1", title: "Blue Planet",  type: "Doc",   library: "Documentaries",  sub: "8 episodes",     min: 50 },
+    { id: "d2", title: "Planet Earth", type: "Doc",   library: "Documentaries",  sub: "11 episodes",    min: 50 },
+    { id: "d3", title: "Cosmos",       type: "Doc",   library: "Documentaries",  sub: "13 episodes",    min: 60 },
+  ];
+  const LIBRARIES = ["All", "Cartoons", "Movies", "TV Shows", "Music Videos", "Documentaries"];
+  const TYPE_ICON = { Show: "Tv", Movie: "Film", Music: "Music", Doc: "Radio", Multi: "Layers", Smart: "Sparkles", Manual: "FolderTree", Rerun: "Repeat" };
+
+  // Collections — curated groups (Manual / Smart / Multi / Rerun) addable as a
+  // single lineup entry, so the builder isn't limited to raw library items.
+  const COLLECTIONS = [
+    { id: "c1", title: "Prime Time Cartoons", type: "Multi",  library: "Collection", sub: "Multi · 62 items",    min: 180, coll: true },
+    { id: "c2", title: "Classic Sci-Fi",      type: "Smart",  library: "Collection", sub: "Smart · rating \u2265 8", min: 240, coll: true },
+    { id: "c3", title: "Retro Station IDs",   type: "Manual", library: "Collection", sub: "Manual · 24 items",   min: 12,  coll: true },
+    { id: "c4", title: "Saturday Morning",    type: "Rerun",  library: "Collection", sub: "Rerun block · weekly",min: 120, coll: true },
+    { id: "c5", title: "Halloween Marathon",  type: "Manual", library: "Collection", sub: "Manual · 9 films",    min: 900, coll: true },
+  ];
+
+  // Channel Templates — bundle the clunky technical config; one is pre-selected.
+  const TEMPLATES = [
+    { id: "std",   name: "Standard",     builtin: true,  desc: "General-purpose 1080p H.264, retro bumpers.", shuffle: false, always: true,
+      sets: ["1080p H.264", "HLS Segmenter", "Sequential", "Always on", "Pre + post filler"] },
+    { id: "music", name: "Music videos", builtin: true,  desc: "Continuous rotation, no fillers, direct stream.", shuffle: true, always: true,
+      sets: ["720p H.264", "HLS Direct", "Shuffle", "Always on", "No filler"] },
+    { id: "film",  name: "Movie night",  builtin: true,  desc: "Film-grain HEVC, mid-roll ad breaks.", shuffle: false, always: false,
+      sets: ["1080p HEVC", "MPEG-TS", "Sequential", "On-demand", "Mid-roll ads"] },
+    { id: "retro", name: "Retro Saturday AM", builtin: false, desc: "Your saved cartoon-block template.", shuffle: true, always: true,
+      sets: ["1080p H.264", "HLS Segmenter", "Shuffle", "Always on", "Bumpers + ads"] },
+  ];
+
+  // Advanced (~30-field) override set, grouped. Values shown as template-inherited.
+  const ADV = [
+    { group: "Streaming", fields: [
+      ["Streaming mode", "HLS Segmenter"], ["FFmpeg profile", "1080p H.264"], ["Resolution", "1920×1080"],
+      ["Video bitrate", "8000 kbps"], ["Audio bitrate", "192 kbps"], ["Buffer size", "16000 kb"],
+    ]},
+    { group: "Filler", fields: [
+      ["Pre-roll", "Retro Bumpers"], ["Mid-roll", "Ad Break"], ["Post-roll", "Outro"],
+      ["Tail filler", "None"], ["Fallback", "Test Pattern"], ["Filler kind", "Pad to :00"],
+    ]},
+    { group: "Playback", fields: [
+      ["Interleave", "On"], ["Keep multi-part together", "On"], ["Watermark", "Channel logo"],
+      ["Subtitle mode", "Any"], ["Preferred audio", "English"], ["Preferred subtitle", "None"],
+    ]},
+    { group: "Behavior", fields: [
+      ["Guide mode default", "Normal"], ["Song video mode", "Off"], ["On-demand", "Off"],
+      ["Idle behavior", "Offline image"], ["Transcode audio", "Normalize"], ["Number scheme", "Auto"],
+    ]},
+  ];
+
+  // deterministic low-chroma poster hue from a title
+  function hueOf(s) { let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 360; return h; }
+
+  function fmtDur(totalMin) {
+    const h = Math.floor(totalMin / 60), m = totalMin % 60;
+    if (h && m) return h + "h " + String(m).padStart(2, "0") + "m";
+    if (h) return h + "h";
+    return m + "m";
+  }
+
+  // ---- Overlay scroll region — hides native bar (no reflow when it appears),
+  //      shows a subtle thumb only while scrolling, fading out when idle. ------
+  function ScrollArea({ children, innerStyle, scrollerRef }) {
+    const local = React.useRef(null);
+    const timer = React.useRef(null);
+    const [thumb, setThumb] = React.useState(null);
+    const setRef = (n) => { local.current = n; if (scrollerRef) scrollerRef.current = n; };
+    const update = () => {
+      const el = local.current; if (!el) return;
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      if (scrollHeight <= clientHeight + 2) { setThumb(null); return; }
+      const track = clientHeight - 8;
+      const h = Math.max(28, track * clientHeight / scrollHeight);
+      const top = 4 + (track - h) * (scrollTop / (scrollHeight - clientHeight));
+      setThumb({ top, h });
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setThumb((t) => (t ? { ...t, hidden: true } : null)), 850);
+    };
+    React.useEffect(() => { const id = setTimeout(update, 60); return () => { clearTimeout(id); clearTimeout(timer.current); }; }, []);
+    return (
+      <div style={{ position: "relative", flex: 1, minHeight: 0, minWidth: 0 }}>
+        <div ref={setRef} onScroll={update} className="ctv-hide-sb"
+          style={{ height: "100%", overflowY: "auto", overflowX: "hidden", scrollbarWidth: "none", scrollBehavior: "smooth", ...innerStyle }}>
+          {children}
+        </div>
+        {thumb && (
+          <div style={{ position: "absolute", top: thumb.top, right: 2, width: 4, height: thumb.h, borderRadius: 3,
+            background: "var(--text-secondary)", opacity: thumb.hidden ? 0 : 0.5,
+            transition: "opacity 260ms var(--ease-standard, ease)", pointerEvents: "none" }} />
+        )}
+      </div>
+    );
+  }
+
+  // ---- Segmented control — iOS-style sliding active highlight ---------------
+  function Segmented({ value, options, onChange, style }) {
+    const idx = Math.max(0, options.findIndex((o) => o.value === value));
+    return (
+      <div style={{ position: "relative", display: "grid", gridAutoFlow: "column", gridAutoColumns: "1fr", padding: 2, borderRadius: "var(--radius-sm)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)", ...style }}>
+        <div style={{ position: "absolute", top: 2, bottom: 2, left: 2, width: `calc((100% - 4px) / ${options.length})`, transform: `translateX(${idx * 100}%)`, background: "var(--ctv-surface-3)", borderRadius: "var(--radius-xs)", boxShadow: "var(--shadow-sm)", transition: "transform 300ms cubic-bezier(0.16,1,0.3,1)", pointerEvents: "none" }} />
+        {options.map((o) => {
+          const on = o.value === value;
+          return (
+            <button key={o.value} type="button" title={o.title || o.label} onClick={() => onChange(o.value)}
+              style={{ position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, padding: "5px 10px", border: "none", background: "transparent", cursor: "pointer",
+                color: on ? "var(--text-primary)" : "var(--text-secondary)", transition: "color 220ms cubic-bezier(0.16,1,0.3,1)", font: "var(--weight-medium) var(--text-2xs)/1 var(--font-sans)" }}>
+              {o.icon && <Ico n={o.icon} s={13} />}{o.label}
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // ---- Poster placeholder (striped, tinted, mono meta) ----------------------
+  function Poster({ item, w, h, mini }) {
+    const hue = hueOf(item.title);
+    return (
+      <div style={{
+        position: "relative", width: w, height: h, flex: "0 0 auto", overflow: "hidden",
+        borderRadius: "var(--radius-sm)", border: "1px solid var(--border-hairline)",
+        background: `linear-gradient(160deg, hsl(${hue} 24% 17%), hsl(${hue} 26% 12%))`,
+      }}>
+        <div style={{ position: "absolute", inset: 0, backgroundImage: `repeating-linear-gradient(135deg, hsl(${hue} 22% 10% / .55) 0 1px, transparent 1px 9px)` }} />
+        <div style={{ position: "absolute", top: mini ? 4 : 7, left: mini ? 4 : 7, display: "inline-flex", color: `hsl(${hue} 30% 68%)` }}>
+          <Ico n={TYPE_ICON[item.type] || "Film"} s={mini ? 12 : 15} />
+        </div>
+        {!mini && (
+          <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "18px 8px 8px", background: "linear-gradient(to top, rgba(11,13,17,.92), transparent)" }}>
+            <div style={{ font: "var(--weight-semibold) var(--text-xs)/1.15 var(--font-sans)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.title}</div>
+            <div style={{ marginTop: 3, ...mono, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-secondary)" }}>{item.sub}</div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // ---- Library card ----------------------------------------------------------
+  function LibCard({ item, added, compact, onAdd, onDragStart, onDragEnd }) {
+    if (compact) {
+      return (
+        <div draggable onDragStart={onDragStart} onDragEnd={onDragEnd} onDoubleClick={onAdd} title="Double-click or drag to add" className="ctv-press"
+          style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 8px", borderRadius: "var(--radius-sm)", cursor: "grab",
+            background: added ? "color-mix(in srgb, var(--action-primary) 14%, transparent)" : "var(--surface-card)", border: `1px solid ${added ? "color-mix(in srgb, var(--action-primary) 35%, transparent)" : "var(--border-hairline)"}` }}>
+          <Poster item={item} w={30} h={40} mini />
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ font: "var(--weight-medium) var(--text-xs)/1.15 var(--font-sans)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.title}</div>
+            <div style={{ marginTop: 2, font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>{item.type} · <span style={mono}>{item.sub}</span></div>
+          </div>
+          <IconButton size="sm" title={added ? "Added" : "Add to lineup"} onClick={onAdd}>
+            <Ico n={added ? "Check" : "Plus"} s={15} color={added ? "var(--action-primary)" : undefined} />
+          </IconButton>
+        </div>
+      );
+    }
+    return (
+      <div draggable onDragStart={onDragStart} onDragEnd={onDragEnd} onDoubleClick={onAdd} title="Double-click or drag to add" className="ctv-lift"
+        style={{ position: "relative", cursor: "grab" }}>
+        <div style={{ position: "relative", borderRadius: "var(--radius-sm)", boxShadow: added ? "0 0 0 2px var(--action-primary)" : "none" }}>
+          <Poster item={item} w="100%" h={150} />
+          {added && (
+            <div style={{ position: "absolute", top: 6, right: 6, width: 22, height: 22, borderRadius: "50%", background: "var(--action-primary)", color: "var(--text-on-accent)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--shadow-sm)", animation: "ctv-pop 260ms cubic-bezier(0.16,1,0.3,1)" }}>
+              <Ico n="Check" s={14} />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // ---- Lineup row ------------------------------------------------------------
+  function LineupRow({ item, index, shuffle, dragging, isOver, onRemove, dragProps }) {
+    return (
+      <div {...dragProps} className="ctv-lift"
+        style={{ display: "flex", alignItems: "center", gap: 11, padding: "9px 10px", borderRadius: "var(--radius-md)",
+          background: "var(--surface-card)", border: "1px solid var(--border-hairline)",
+          boxShadow: isOver ? "0 -2px 0 var(--action-primary)" : "none", opacity: dragging ? 0.35 : 1,
+          transition: "opacity var(--dur-fast)" }}>
+        <span style={{ display: "inline-flex", cursor: "grab", color: "var(--text-faint)", flex: "0 0 auto" }} title="Drag to reorder"><Ico n="GripVertical" s={16} /></span>
+        <span style={{ width: 22, flex: "0 0 auto", textAlign: "center" }}>
+          {shuffle
+            ? <Ico n="Shuffle" s={13} color="var(--text-disabled)" />
+            : <span style={{ ...mono, font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)", color: "var(--text-secondary)" }}>{index + 1}</span>}
+        </span>
+        <Poster item={item} w={34} h={46} mini />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ font: "var(--weight-semibold) var(--text-sm)/1.2 var(--font-sans)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.title}</div>
+          <div style={{ marginTop: 2, font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>{item.type} · {item.library}</div>
+        </div>
+        <span style={{ ...mono, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-disabled)", flex: "0 0 auto" }}>{fmtDur(item.min)}</span>
+        <IconButton size="sm" title="Remove" onClick={onRemove}><Ico n="X" s={15} /></IconButton>
+      </div>
+    );
+  }
+
+  // ---- Channel image dropzone + live logo/bug preview -----------------------
+  function ImagePanel({ logoSrc, setLogoSrc, name }) {
+    const [sep, setSep] = React.useState(false);
+    const [over, setOver] = React.useState(false);
+    const fileRef = React.useRef(null);
+    const read = (file) => { if (!file) return; const r = new FileReader(); r.onload = () => setLogoSrc(r.result); r.readAsDataURL(file); };
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+        <div
+          onDragOver={(e) => { e.preventDefault(); setOver(true); }}
+          onDragLeave={() => setOver(false)}
+          onDrop={(e) => { e.preventDefault(); setOver(false); read(e.dataTransfer.files && e.dataTransfer.files[0]); }}
+          onClick={() => fileRef.current && fileRef.current.click()}
+          style={{ display: "flex", gap: 12, padding: 12, borderRadius: "var(--radius-sm)", cursor: "pointer",
+            background: "var(--ctv-bg-sunken)", border: `1px dashed ${over ? "var(--ctv-accent)" : "var(--border-control)"}` }}>
+          <ChannelLogo name={name || "New Channel"} src={logoSrc} size={52} radius="var(--radius-sm)" />
+          <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", justifyContent: "center", gap: 3 }}>
+            <div style={{ font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", color: "var(--text-primary)" }}>{logoSrc ? "Channel image set" : "Drop channel image"}</div>
+            <div style={{ font: "var(--text-2xs)/1.35 var(--font-sans)", color: "var(--text-secondary)" }}>Used as both the guide logo and the on-screen bug.</div>
+          </div>
+          <input ref={fileRef} type="file" accept="image/*" style={{ display: "none" }} onChange={(e) => read(e.target.files && e.target.files[0])} />
+        </div>
+
+        {/* live preview: listing logo + on-screen bug */}
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
+          <div style={{ padding: 10, borderRadius: "var(--radius-sm)", background: "var(--surface-card)", border: "1px solid var(--border-hairline)" }}>
+            <div style={{ ...eyebrow, marginBottom: 8 }}>Guide logo</div>
+            <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
+              <ChannelLogo name={name || "New Channel"} src={logoSrc} size={30} radius="var(--radius-xs)" />
+              <div style={{ minWidth: 0 }}>
+                <div style={{ font: "var(--weight-medium) var(--text-2xs)/1.1 var(--font-sans)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{name || "New Channel"}</div>
+                <div style={{ ...mono, font: "9px/1 var(--font-mono)", color: "var(--text-disabled)" }}>listing</div>
+              </div>
+            </div>
+          </div>
+          <div style={{ padding: 10, borderRadius: "var(--radius-sm)", background: "var(--surface-card)", border: "1px solid var(--border-hairline)" }}>
+            <div style={{ ...eyebrow, marginBottom: 8 }}>On-screen bug</div>
+            <div style={{ position: "relative", height: 42, borderRadius: "var(--radius-xs)", overflow: "hidden", background: "linear-gradient(160deg,#1a1d24,#0e1014)", backgroundImage: "repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px)" }}>
+              <div style={{ position: "absolute", bottom: 5, right: 5, opacity: 0.9 }}>
+                <ChannelLogo name={name || "New Channel"} src={logoSrc} size={22} radius="3px" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button type="button" onClick={() => setSep((s) => !s)}
+          style={{ alignSelf: "flex-start", display: "inline-flex", alignItems: "center", gap: 5, background: "none", border: "none", cursor: "pointer", padding: "2px 0", font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>
+          <Ico n={sep ? "ChevronDown" : "ChevronRight"} s={13} />Set logo & bug separately
+        </button>
+        {sep && (
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, padding: 10, borderRadius: "var(--radius-sm)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)" }}>
+            <Button size="sm" variant="secondary" startIcon={<Ico n="Image" s={14} />} onClick={() => fileRef.current && fileRef.current.click()}>Logo image</Button>
+            <Button size="sm" variant="secondary" startIcon={<Ico n="Image" s={14} />} onClick={() => fileRef.current && fileRef.current.click()}>Bug image</Button>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // ---- Advanced disclosure — one-click Override (edit) or View defaults ------
+  function Advanced({ templateName, scrollerRef }) {
+    const [mode, setMode] = React.useState("closed"); // closed | view | override
+    const [vals, setVals] = React.useState(() => { const o = {}; ADV.forEach((g) => g.fields.forEach(([k, v]) => { o[k] = v; })); return o; });
+    const override = mode === "override";
+    const count = ADV.reduce((n, g) => n + g.fields.length, 0);
+    const fieldsRef = React.useRef(null);
+    const rootRef = React.useRef(null);
+    const [maxH, setMaxH] = React.useState(0);
+    React.useLayoutEffect(() => {
+      if (mode === "closed") setMaxH(0);
+      else if (fieldsRef.current) setMaxH(fieldsRef.current.scrollHeight);
+    }, [mode]);
+    const toggle = (m) => {
+      const next = mode === m ? "closed" : m;
+      setMode(next);
+      if (next !== "closed" && scrollerRef && scrollerRef.current && rootRef.current) {
+        const sc = scrollerRef.current;
+        requestAnimationFrame(() => {
+          const target = sc.scrollTop + rootRef.current.getBoundingClientRect().top - sc.getBoundingClientRect().top - 20;
+          sc.scrollTo({ top: Math.max(0, target), behavior: "smooth" });
+        });
+      }
+    };
+    const tabBtn = (active) => ({
+      display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, padding: "8px 10px",
+      borderRadius: "var(--radius-sm)", cursor: "pointer", font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+      background: active ? "color-mix(in srgb, var(--action-primary) 14%, transparent)" : "var(--ctv-surface-2)",
+      color: active ? "var(--action-primary)" : "var(--text-secondary)",
+      border: `1px solid ${active ? "color-mix(in srgb, var(--action-primary) 38%, transparent)" : "var(--border-hairline)"}`,
+      transition: "background 200ms cubic-bezier(0.16,1,0.3,1), color 200ms cubic-bezier(0.16,1,0.3,1), border-color 200ms cubic-bezier(0.16,1,0.3,1)",
+    });
+    return (
+      <div ref={rootRef} style={{ borderTop: "1px solid var(--border-hairline)", paddingTop: 14 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 10 }}>
+          <Ico n="SlidersHorizontal" s={16} color="var(--text-secondary)" />
+          <span style={{ font: "var(--weight-medium) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}>Advanced</span>
+          <span style={{ flex: 1 }} />
+          <span style={{ ...mono, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-disabled)" }}>{count} fields · {templateName}</span>
+        </div>
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
+          <button type="button" onClick={() => toggle("override")} style={tabBtn(override)}>
+            <Ico n="SquarePen" s={14} />{override ? "Overriding" : "Override settings"}
+          </button>
+          <button type="button" onClick={() => toggle("view")} style={tabBtn(mode === "view")}>
+            <Ico n="Eye" s={14} />View defaults
+          </button>
+        </div>
+        <div style={{ overflow: "hidden", maxHeight: maxH, transition: "max-height 340ms cubic-bezier(0.16,1,0.3,1)" }}>
+          <div ref={fieldsRef} style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 14 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 8, font: "var(--text-2xs)/1.35 var(--font-sans)", color: "var(--text-secondary)" }}>
+              <Ico n="Info" s={13} color={override ? "var(--action-primary)" : "var(--text-disabled)"} />
+              {override ? "Editing these overrides the template for this channel only." : `Read-only — inherited from the ${templateName} template. Turn on Override to edit.`}
+            </div>
+            {ADV.map((g) => (
+              <div key={g.group}>
+                <div style={{ ...eyebrow, marginBottom: 8 }}>{g.group}</div>
+                {override ? (
+                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
+                    {g.fields.map(([k]) => (
+                      <Input key={k} size="sm" label={k} value={vals[k]} onChange={(e) => setVals((s) => ({ ...s, [k]: e.target.value }))} />
+                    ))}
+                  </div>
+                ) : (
+                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
+                    {g.fields.map(([k, v]) => (
+                      <div key={k} style={{ padding: "7px 9px", borderRadius: "var(--radius-xs)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)", opacity: 0.72 }}>
+                        <div style={{ font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)" }}>{k}</div>
+                        <div style={{ marginTop: 3, font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", color: "var(--text-primary)", ...(/\d/.test(v) ? mono : {}) }}>{v}</div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // ---- Main ------------------------------------------------------------------
+  function ChannelBuilder() {
+    const [q, setQ] = React.useState("");
+    const [libFilter, setLibFilter] = React.useState("All");
+    const [compact, setCompact] = React.useState(false);
+    const [lineup, setLineup] = React.useState(() => ["s1", "s2", "s3", "s4"].map((id) => LIB.find((x) => x.id === id)));
+    const [name, setName] = React.useState("Retro Cartoons");
+    const [number, setNumber] = React.useState("13.1");
+    const [shuffle, setShuffle] = React.useState(false);
+    const [always, setAlways] = React.useState(true);
+    const [logoSrc, setLogoSrc] = React.useState(null);
+    const [tpl, setTpl] = React.useState("std");
+    const [tplOpen, setTplOpen] = React.useState(false);
+    const [source, setSource] = React.useState("library"); // library | collections
+
+    // drag state
+    const [dragLib, setDragLib] = React.useState(null);   // library item id being dragged
+    const [dragRow, setDragRow] = React.useState(null);   // lineup index being dragged
+    const [overRow, setOverRow] = React.useState(null);
+    const railScrollerRef = React.useRef(null);
+
+    const addedIds = new Set(lineup.map((i) => i.id));
+    const pool = source === "collections" ? COLLECTIONS : LIB;
+    const filtered = pool.filter((i) =>
+      (source === "collections" || libFilter === "All" || i.library === libFilter) &&
+      (!q || i.title.toLowerCase().includes(q.toLowerCase())));
+
+    const add = (item) => setLineup((l) => (l.some((x) => x.id === item.id) ? l : [...l, item]));
+    const removeAt = (idx) => setLineup((l) => l.filter((_, i) => i !== idx));
+    const totalMin = lineup.reduce((n, i) => n + i.min, 0);
+    const template = TEMPLATES.find((t) => t.id === tpl);
+    const canCreate = name.trim() && lineup.length > 0;
+
+    // reorder / insert on drop at target index
+    const dropAt = (targetIdx) => {
+      if (dragRow != null) {
+        setLineup((l) => { const n = l.slice(); const [m] = n.splice(dragRow, 1); n.splice(targetIdx, 0, m); return n; });
+      } else if (dragLib != null) {
+        const item = [...LIB, ...COLLECTIONS].find((x) => x.id === dragLib);
+        if (item && !addedIds.has(item.id)) setLineup((l) => { const n = l.slice(); n.splice(targetIdx, 0, item); return n; });
+      }
+      setDragLib(null); setDragRow(null); setOverRow(null);
+    };
+    const dropEnd = () => {
+      if (dragLib != null) { const item = [...LIB, ...COLLECTIONS].find((x) => x.id === dragLib); if (item) add(item); }
+      setDragLib(null); setDragRow(null); setOverRow(null);
+    };
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        {/* builder toolbar */}
+        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderBottom: "1px solid var(--border-hairline)", flex: "0 0 auto" }}>
+          <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 34, height: 34, borderRadius: "var(--radius-sm)", background: "var(--ctv-accent-soft)", color: "var(--ctv-accent)", flex: "0 0 auto" }}><Ico n="Plus" s={19} /></span>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ font: "var(--weight-semibold) var(--text-md)/1 var(--font-sans)", color: "var(--text-primary)" }}>New Channel</div>
+            <div style={{ marginTop: 3, font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>Build from your library — <span style={mono}>{lineup.length}</span> in lineup · <span style={mono}>{fmtDur(totalMin)}</span></div>
+          </div>
+          <Button variant="ghost">Cancel</Button>
+          <Tooltip placement="bottom" label={canCreate ? "Creates the channel, schedule & playout" : "Name the channel and add at least one item"}>
+            <Button variant="primary" disabled={!canCreate} startIcon={<Ico n="Check" s={15} />}>Create Channel</Button>
+          </Tooltip>
+        </div>
+
+        {/* body — library | lineup | settings */}
+        <div style={{ flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: "minmax(0,1.2fr) minmax(0,1fr) 304px", gap: 0 }}>
+          {/* LEFT — library browser */}
+          <section style={{ display: "flex", flexDirection: "column", minHeight: 0, minWidth: 0, overflow: "hidden", borderRight: "1px solid var(--border-hairline)" }}>
+            <div style={{ padding: "14px 16px 10px", display: "flex", flexDirection: "column", gap: 10 }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", rowGap: 8 }}>
+                <Segmented value={source} onChange={setSource} options={[{ value: "library", label: "Library", icon: "Library" }, { value: "collections", label: "Collections", icon: "FolderTree" }]} />
+                <span style={{ flex: 1 }} />
+                <Segmented value={compact ? "list" : "grid"} onChange={(v) => setCompact(v === "list")} options={[{ value: "grid", icon: "LayoutGrid", title: "Poster grid" }, { value: "list", icon: "Rows3", title: "Compact list" }]} />
+              </div>
+              <Input size="sm" value={q} onChange={(e) => setQ(e.target.value)} leadingIcon={<Ico n="Search" s={15} />} placeholder={source === "collections" ? "Search collections\u2026" : "Search shows & movies\u2026"} />
+              {source === "library" && (
+                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+                  {LIBRARIES.map((l) => {
+                    const on = libFilter === l;
+                    return (
+                      <button key={l} type="button" onClick={() => setLibFilter(l)} className="ctv-press"
+                        style={{ padding: "4px 10px", borderRadius: "var(--radius-pill)", cursor: "pointer",
+                          font: "var(--weight-medium) var(--text-2xs)/1.4 var(--font-sans)",
+                          background: on ? "var(--ctv-accent-soft)" : "var(--ctv-surface-2)",
+                          color: on ? "var(--ctv-accent)" : "var(--text-secondary)",
+                          border: `1px solid ${on ? "rgba(224,138,60,.35)" : "var(--border-hairline)"}` }}>{l}</button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+            <ScrollArea innerStyle={{ padding: "4px 16px 16px" }}>
+              {filtered.length === 0 ? (
+                <div style={{ padding: "40px 0", textAlign: "center", font: "var(--text-xs)/1.5 var(--font-sans)", color: "var(--text-disabled)" }}>No titles match.</div>
+              ) : compact ? (
+                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                  {filtered.map((item) => (
+                    <LibCard key={item.id} item={item} compact added={addedIds.has(item.id)} onAdd={() => add(item)}
+                      onDragStart={() => setDragLib(item.id)} onDragEnd={dropEnd} />
+                  ))}
+                </div>
+              ) : (
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(104px,1fr))", gap: 10 }}>
+                  {filtered.map((item) => (
+                    <LibCard key={item.id} item={item} added={addedIds.has(item.id)} onAdd={() => add(item)}
+                      onDragStart={() => setDragLib(item.id)} onDragEnd={dropEnd} />
+                  ))}
+                </div>
+              )}
+            </ScrollArea>
+          </section>
+
+          {/* CENTER — lineup */}
+          <section style={{ display: "flex", flexDirection: "column", minHeight: 0, minWidth: 0, overflow: "hidden", borderRight: "1px solid var(--border-hairline)" }}
+            onDragOver={(e) => { if (dragLib != null) e.preventDefault(); }}
+            onDrop={() => { if (dragLib != null) dropEnd(); }}>
+            <div style={{ padding: "14px 16px 10px", display: "flex", alignItems: "center", gap: 10 }}>
+              <span style={eyebrow}>Lineup</span>
+              <Badge tone={shuffle ? "accent" : "neutral"}><span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><Ico n={shuffle ? "Shuffle" : "ListOrdered"} s={11} />{shuffle ? "Shuffled" : "Sequential"}</span></Badge>
+              <span style={{ flex: 1 }} />
+              {lineup.length > 0 && <button type="button" onClick={() => setLineup([])} style={{ background: "none", border: "none", cursor: "pointer", font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>Clear</button>}
+            </div>
+            <ScrollArea innerStyle={{ padding: "4px 16px 16px" }}>
+              {lineup.length === 0 ? (
+                <div style={{ height: "100%", minHeight: 220, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, textAlign: "center",
+                  border: `1px dashed ${dragLib != null ? "var(--ctv-accent)" : "var(--border-control)"}`, borderRadius: "var(--radius-md)",
+                  background: dragLib != null ? "var(--ctv-accent-soft)" : "transparent", color: "var(--text-disabled)", padding: 24 }}>
+                  <Ico n="ListVideo" s={26} />
+                  <div style={{ font: "var(--text-sm)/1.5 var(--font-sans)", maxWidth: 240 }}>This channel has no content yet. Double-click or drag titles from the library to build the lineup.</div>
+                </div>
+              ) : (
+                <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
+                  {lineup.map((item, idx) => (
+                    <LineupRow key={item.id + "-" + idx} item={item} index={idx} shuffle={shuffle}
+                      dragging={dragRow === idx} isOver={overRow === idx && (dragRow !== idx)}
+                      onRemove={() => removeAt(idx)}
+                      dragProps={{
+                        draggable: true,
+                        onDragStart: () => setDragRow(idx),
+                        onDragEnd: () => { setDragRow(null); setOverRow(null); },
+                        onDragOver: (e) => { e.preventDefault(); setOverRow(idx); },
+                        onDrop: (e) => { e.stopPropagation(); dropAt(idx); },
+                      }} />
+                  ))}
+                  <div style={{ marginTop: 4, padding: "10px 12px", borderRadius: "var(--radius-md)", border: "1px dashed var(--border-hairline)", display: "flex", alignItems: "center", gap: 8, color: "var(--text-disabled)", font: "var(--text-2xs)/1 var(--font-sans)" }}>
+                    <Ico n="Plus" s={14} />Double-click or drag more titles to add
+                  </div>
+                </div>
+              )}
+            </ScrollArea>
+          </section>
+
+          {/* RIGHT — friendly options + template + advanced */}
+          <aside style={{ position: "relative", minWidth: 0, overflow: "hidden", display: "flex", flexDirection: "column", background: "var(--surface-card)" }}>
+            <ScrollArea scrollerRef={railScrollerRef} innerStyle={{ padding: "14px 16px 24px", display: "flex", flexDirection: "column", gap: 16 }}>
+            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+              <Input label="Channel name" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Retro Cartoons" />
+              <Input label="Number" value={number} onChange={(e) => setNumber(e.target.value)}
+                trailing={<span style={{ ...mono, font: "9px/1 var(--font-mono)", padding: "2px 5px", borderRadius: "3px", background: "var(--ctv-accent-soft)", color: "var(--ctv-accent)" }}>AUTO</span>} />
+            </div>
+
+            <ImagePanel logoSrc={logoSrc} setLogoSrc={setLogoSrc} name={name} />
+
+            {/* friendly toggles */}
+            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+              <label onClick={() => setShuffle((s) => !s)} style={{ display: "flex", alignItems: "flex-start", gap: 11, padding: "10px 0", cursor: "pointer" }}>
+                <div style={{ flex: 1 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
+                    <span style={{ font: "var(--weight-medium) var(--text-sm)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>Shuffle</span>
+                    {shuffle !== template.shuffle && <span style={{ font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)", padding: "2px 6px", borderRadius: "var(--radius-xs)", background: "var(--ctv-surface-2)", border: "1px solid var(--border-hairline)" }}>overrides template</span>}
+                  </div>
+                  <div style={{ marginTop: 2, font: "var(--text-2xs)/1.35 var(--font-sans)", color: "var(--text-secondary)" }}>{shuffle ? "Plays in a random order." : "Plays in sequence (chronological)."}</div>
+                </div>
+                <Switch checked={shuffle} onChange={setShuffle} />
+              </label>
+              <div style={{ height: 1, background: "var(--border-hairline)" }} />
+              <label onClick={() => setAlways((s) => !s)} style={{ display: "flex", alignItems: "flex-start", gap: 10, padding: "10px 11px", borderRadius: "var(--radius-sm)", cursor: "pointer",
+                background: always ? "var(--ctv-live-soft)" : "transparent", border: `1px solid ${always ? "var(--ctv-live)" : "transparent"}`, transition: "background 240ms cubic-bezier(0.16,1,0.3,1), border-color 240ms cubic-bezier(0.16,1,0.3,1)" }}>
+                <span style={{ display: "inline-flex", marginTop: 1, color: "var(--ctv-live)", flex: "0 0 auto" }}><Ico n="Radio" s={16} /></span>
+                <div style={{ flex: 1 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
+                    <span style={{ font: "var(--weight-medium) var(--text-sm)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>Always playing</span>
+                    {always !== template.always && <span style={{ font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)", padding: "2px 6px", borderRadius: "var(--radius-xs)", background: "var(--ctv-surface-2)", border: "1px solid var(--border-hairline)" }}>overrides template</span>}
+                    {always && (
+                      <span style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "2px 7px", borderRadius: "var(--radius-pill)", background: "var(--ctv-live-soft)", color: "var(--ctv-live)", font: "var(--weight-semibold) 9px/1.4 var(--font-sans)", letterSpacing: ".06em" }}>
+                        <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--ctv-live)" }} />LIVE
+                      </span>
+                    )}
+                  </div>
+                  <div style={{ marginTop: 3, font: "var(--text-2xs)/1.35 var(--font-sans)", color: "var(--text-secondary)" }}>Like live TV — advances on schedule even when nobody is watching.</div>
+                </div>
+                <Switch checked={always} onChange={setAlways} />
+              </label>
+            </div>
+
+            {/* Channel Template */}
+            <div>
+              <div style={{ ...eyebrow, marginBottom: 8 }}>Channel Template</div>
+              <button type="button" onClick={() => setTplOpen((o) => !o)} className="ctv-press"
+                style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "10px 11px", borderRadius: "var(--radius-sm)", cursor: "pointer", textAlign: "left",
+                  background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-control)" }}>
+                <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 30, height: 30, borderRadius: "var(--radius-xs)", background: "var(--ctv-surface-3)", color: "var(--ctv-accent)", flex: "0 0 auto" }}><Ico n="SlidersHorizontal" s={15} /></span>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                    <span style={{ font: "var(--weight-medium) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}>{template.name}</span>
+                    {!template.builtin && <Badge tone="neutral">Custom</Badge>}
+                  </div>
+                  <div style={{ marginTop: 3, font: "var(--text-2xs)/1.3 var(--font-sans)", color: "var(--text-secondary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{template.desc}</div>
+                </div>
+                <Ico n={tplOpen ? "ChevronUp" : "ChevronDown"} s={15} color="var(--text-disabled)" />
+              </button>
+
+              {tplOpen && (
+                <div style={{ marginTop: 6, display: "flex", flexDirection: "column", gap: 4, padding: 4, borderRadius: "var(--radius-sm)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)" }}>
+                  {TEMPLATES.map((t) => {
+                    const on = t.id === tpl;
+                    return (
+                      <button key={t.id} type="button" className="ctv-press" onClick={() => { setTpl(t.id); setTplOpen(false); setShuffle(t.shuffle); setAlways(t.always); }}
+                        style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 9px", borderRadius: "var(--radius-xs)", cursor: "pointer", textAlign: "left",
+                          background: on ? "color-mix(in srgb, var(--action-primary) 14%, transparent)" : "transparent", border: "none" }}>
+                        <Ico n={on ? "CircleCheck" : "Circle"} s={15} color={on ? "var(--action-primary)" : "var(--text-disabled)"} />
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                            <span style={{ font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", color: "var(--text-primary)" }}>{t.name}</span>
+                            {!t.builtin && <Badge tone="neutral">Custom</Badge>}
+                          </div>
+                          <div style={{ marginTop: 2, font: "var(--text-2xs)/1.3 var(--font-sans)", color: "var(--text-secondary)" }}>{t.desc}</div>
+                        </div>
+                      </button>
+                    );
+                  })}
+                  <button type="button" style={{ display: "flex", alignItems: "center", gap: 7, padding: "8px 9px", borderRadius: "var(--radius-xs)", cursor: "pointer", background: "none", border: "none", color: "var(--text-secondary)", font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)" }}>
+                    <Ico n="Save" s={14} />Save current settings as template…
+                  </button>
+                </div>
+              )}
+
+              <div style={{ marginTop: 8, display: "flex", flexWrap: "wrap", gap: 5 }}>
+                {template.sets.map((s) => (
+                  <span key={s} style={{ padding: "3px 8px", borderRadius: "var(--radius-xs)", background: "var(--ctv-surface-2)", border: "1px solid var(--border-hairline)", font: "var(--text-2xs)/1.4 var(--font-sans)", color: "var(--text-secondary)", ...(/\d/.test(s) ? mono : {}) }}>{s}</span>
+                ))}
+              </div>
+            </div>
+
+            <Advanced templateName={template.name} scrollerRef={railScrollerRef} />
+            </ScrollArea>
+          </aside>
+        </div>
+      </div>
+    );
+  }
+
+  window.CTVChannelBuilder = ChannelBuilder;
+})();
diff --git a/design-system/design_handoff_channel_builder/README.md b/design-system/design_handoff_channel_builder/README.md
new file mode 100644
index 000000000..bf3988888
--- /dev/null
+++ b/design-system/design_handoff_channel_builder/README.md
@@ -0,0 +1,163 @@
+# Handoff: ChicoryTV — Channel Builder (+ admin design system)
+
+## Overview
+The **Channel Builder** ("New Channel") is a ground-up replacement for ErsatzTV's four-editor
+channel-creation chain (Channel → Schedule → Schedule Items → Playout). It is **one screen**: browse
+your media library on the left, build the channel's lineup in the center, set friendly options +
+a Channel Template on the right, and hit **Create Channel** — which (in the real app) builds all the
+underlying entities atomically. It ships inside the **ChicoryTV admin**, a dark, dense, app-like
+console and its React component library.
+
+## About the design files
+The files in this bundle are **design references created in HTML/React** — prototypes showing the
+intended look and behavior, **not production code to ship directly**. The task is to **recreate these
+designs in the target codebase's environment** using its established patterns. Per the redesign brief,
+the intended target is a **React SPA over the ErsatzTV REST API** (replacing Blazor/MudBlazor); if that
+app doesn't exist yet, scaffold it (Vite + React + TypeScript is a reasonable default) and implement
+there. Nothing here depends on Blazor.
+
+The prototypes are built on a real design system (React primitives + CSS-custom-property tokens +
+three themes) that lives in the parent project — treat that as the component/token source of truth.
+
+## Fidelity
+**High-fidelity.** Final colors, typography, spacing, radii, motion, and interactions are all resolved.
+Recreate pixel-for-pixel using the codebase's real component library (promoting these primitives into
+it, or mapping to existing equivalents). All values below are exact.
+
+---
+
+## Screens / Views
+
+### New Channel — Channel Builder (primary deliverable)
+**Purpose:** create a working channel by adding library items to a lineup and setting a few friendly
+options; technical config comes from a selectable Channel Template.
+
+**Layout:** full-height column. A **builder toolbar** (fixed, 12px×20px padding, hairline bottom
+border): accent icon tile + "New Channel" title + live summary (`N in lineup · total duration`) on the
+left; **Cancel** (ghost) and **Create Channel** (primary, right) — Create is disabled until there's a
+name + ≥1 lineup item, tooltip below. Below the toolbar, a 3-column grid, full height:
+`grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 304px` (columns shrink, never overflow; the
+304px rail is fixed). Each column scrolls independently.
+
+**Column 1 — Library browser** (`overflow:hidden` section):
+- Header: a **Segmented** source toggle **Library / Collections** (sliding highlight), a spacer, and a
+  grid/compact **density** Segmented. Then a search input (`Search shows & movies…` /
+  `Search collections…`). Then, in Library mode only, pill **filter chips** (All, Cartoons, Movies,
+  TV Shows, Music Videos, Documentaries) — active chip uses accent-soft bg + accent text.
+- Body (scrolls): **poster grid** `repeat(auto-fill, minmax(104px,1fr))`, gap 10 — each poster is a
+  2:3 tinted, diagonally-striped placeholder (deterministic hue from title) with a bottom gradient
+  scrim, title (12px semibold) + mono meta, and a type icon top-left (Tv/Film/Music/Radio, or
+  Layers/Sparkles/FolderTree/Repeat for collection kinds). Compact mode is a 30×40 thumb + title +
+  `type · meta` row. **Double-click or drag** to add; added cards show an accent ring + a **pop-in**
+  check badge (top-right).
+
+**Column 2 — Lineup** (the channel's content, `overflow:hidden` section, accepts drops):
+- Header: "LINEUP" eyebrow, a **Sequential / Shuffled** status badge (icon, informational — the real
+  control is the Shuffle toggle in the rail), a spacer, a **Clear** ghost button.
+- Body (scrolls): ordered rows, gap 7. Each row: grip handle, order number (mono) when Sequential or a
+  shuffle glyph when Shuffled, a 34×46 poster thumb, title (14px semibold) + `type · library`, mono
+  duration, and a remove (×) button. **Drag-to-reorder** (HTML5 DnD; a `0 -2px 0 accent` top-border
+  marks the drop target; dragged row drops to 0.35 opacity). Empty state = dashed dropzone. A trailing
+  dashed "double-click or drag more titles to add" hint.
+
+**Column 3 — Settings rail** (fixed 304px, `background: surface-card`, scrolls via an overlay
+scrollbar — hidden native bar so no reflow, subtle fading thumb):
+- **Channel name** input; **Number** input with an `AUTO` mono chip trailing.
+- **Channel image**: a dashed dropzone (drop or click → file input; live `FileReader` preview). Below,
+  two preview tiles — **Guide logo** (logo + name + "listing") and **On-screen bug** (logo bottom-right
+  over a striped "video frame"). A "Set logo & bug separately" disclosure reveals two image buttons.
+  Default: the one image drives both.
+- **Shuffle** toggle (label + "Plays in a random order." / "Plays in sequence (chronological)."). Shows
+  an "overrides template" tag when it differs from the selected template's default.
+- **Always playing** toggle — the live-TV concept. Rendered in the **live color** (`--ctv-live`) with a
+  tinted row + a "● LIVE" pill when on. Helper: "Like live TV — advances on schedule even when nobody is
+  watching." Also shows the "overrides template" tag when diverging. *(Backend gap #68 — still needs
+  confirmation.)*
+- **Channel Template** picker: a button showing the current template (name + one-line desc + Custom
+  badge). Opens a list of built-ins + custom, each with a radio, name, desc; a "Save current settings as
+  template…" action. Selecting a template **applies its Shuffle + Always-playing defaults** and shows
+  its config as chips (e.g. `1080p H.264`, `HLS Segmenter`, `Sequential`, `Always on`, `Pre + post filler`).
+- **Advanced** disclosure: a **SlidersHorizontal** header + `N fields · <template>`. Two buttons —
+  **Override settings** (one click → editable fields, active-orange in dual theme) and **View defaults**
+  (read-only chips). Clicking the active one collapses. The field region animates via `max-height`.
+  ~24 fields grouped Streaming / Filler / Playback / Behavior.
+
+### Other admin screens (context; already in the design system)
+- **Dashboard** — on-air cards, stat tiles, condensed health panel, activity feed, release notes.
+- **Channels** — dense table, bulk-select, `(D)`/`(H)` markers, streaming-mode badges, inline actions.
+- **Guide / EPG** — dark channels×time grid, "now" marker, live focal color, jump-to-now.
+- **Schedule editor** — two-pane, drag-to-reorder items + tabbed inspector.
+- **Playouts** — now/next monitor (live preview, up-next, timeline strip, upcoming list).
+- **Libraries** — Local/Plex/Jellyfin/Emby source cards with scan status.
+- App shell: 232px left sidebar (nav + health), 52px top bar (search, Connect menu). Primary "big"
+  button is **top-right** on every screen.
+
+---
+
+## Interactions & behavior
+- **Add to lineup:** double-click a library card OR drag it onto the lineup. Dedupes by id; added cards
+  show a check.
+- **Reorder lineup:** native drag-and-drop; drop-target top-border indicator; source dims to 0.35.
+- **Shuffle vs Sequential:** rail toggle; lineup order display switches (numbers vs shuffle glyph).
+- **Channel image:** drop/select → `FileReader.readAsDataURL` → live logo + bug preview; falls back to a
+  generated initials chip (deterministic color from the name) when empty.
+- **Template selection:** applies the template's shuffle + always-playing defaults; toggles then show
+  "overrides template" if the user changes them.
+- **Advanced:** one-click Override (editable) / View defaults (read-only); `max-height` collapse
+  animation; on expand, the panel smooth-scrolls just enough to bring the Advanced header to the top.
+- **Create Channel:** enabled only with a name + ≥1 item.
+- **Themes:** `data-theme` on `<html>` = ``""`` (warm, default) / `cool` / `dual`. In **dual**, the focal
+  warm hue drives primary actions, active nav, and selection via `--action-primary`.
+
+### Motion (iOS/macOS-subtle; respect `prefers-reduced-motion`)
+- Durations 90 / 140 / 220–340ms. Standard ease `cubic-bezier(0.2,0,0,1)`; entrance/settle
+  `cubic-bezier(0.16,1,0.3,1)`.
+- Segmented control: highlight **slides** (transform, ~300ms). Cards: **hover-lift** (`translateY(-2px)`
+  + shadow). Buttons/rows: **press-scale** (`scale(0.96)`, ~150ms). Selection check: **pop-in**
+  (`scale` + fade). Advanced: **max-height** accordion. Switches slide. Live status dot pings.
+
+## State management
+Per Channel Builder instance: `search`, `libraryFilter`, `source` (library|collections), `compact`,
+`lineup[]` (ordered items), drag ids (`dragLib`, `dragRow`, `overRow`), `name`, `number`, `shuffle`,
+`always`, `logoSrc` (dataURL|null), selected `template` id, `tplOpen`, and Advanced `mode`
+(closed|view|override) + edited field values. Derived: `addedIds`, filtered pool, total duration,
+`canCreate`. Real app: replace mock arrays with the **library browse/search API (#65)**, **Channel
+Templates entity (#64)**, and the **composite create endpoint (#63)**.
+
+## Design tokens (exact)
+**Surfaces:** app `#0F1115` · sunken `#0B0D11` · card `#171A21` · raised `#1C2029` · selected `#222732`.
+**Borders:** hairline `#262B36` · control `#333A48`.
+**Text:** primary `#E6E9EF` · muted `#9AA4B2` · faint `#626B7A`.
+**Accent:** warm chicory `#E08A3C` (default) · cool periwinkle `#5B7CFA` · soft = accent @14%.
+**Semantic alias:** `--action-primary` = accent (warm/cool) or **`--ctv-live`** in dual.
+**Status:** ok `#3FB984` · warn `#E0A83D` · error `#E5484D` · **live** `#E08A3C` (warm) / `#F0663F` (dual),
+each with a ~14–16% soft tint.
+**Radii:** chips 3px · buttons/inputs 5px · cards/rows/menus 7px · dialogs 10px · pills full.
+**Type:** Geist (UI) + Geist Mono (numerics, tabular figures). Base 13px; scale 11·12·13·14·16·20·26·34;
+weights 400/500/600. Eyebrows 11px/600 uppercase, 0.06em tracking.
+**Spacing:** 4px grid. Fixed chrome: sidebar 232 · top bar 52 · rows 44 · controls 34 (sm 28).
+**Elevation:** border + subtle shadow (sm `0 1px 2px/.40`, md `0 4px 12px/.45`, pop `0 8px 28px/.55`,
+dialog `0 16px 40px/.55`); live elements get a small accent glow.
+
+## Assets
+- **Icons:** [Lucide](https://lucide.dev) (2px stroke), via CDN in the prototypes; use your icon lib's
+  Lucide set. Glyphs used: Plus, Check, X, Search, Library, FolderTree, LayoutGrid, Rows3, GripVertical,
+  Shuffle, ListOrdered, Radio, Film, Tv, Music, Layers, Sparkles, Repeat, Image, SlidersHorizontal,
+  SquarePen, Eye, CircleCheck, Circle, Save, ChevronDown/Up/Right.
+- **Brand mark:** `assets/chicory-mark.svg` (periwinkle chicory flower) — do not redraw; reference it.
+- **Posters/artwork:** placeholders only (striped, tinted). Real artwork comes from the library API (#65).
+- No other raster assets.
+
+## Files
+In the parent project (download it alongside this folder):
+- `templates/chicorytv-admin/ChannelBuilder.jsx` — **the Channel Builder** (also copied into this folder).
+- `templates/chicorytv-admin/{Shell,Dashboard,Channels,Epg,ScheduleEditor,Playouts,ScheduleLibrary}.jsx`,
+  `data.js`, `icons.jsx`, `app.html`, `ds-base.js` — the admin shell + other screens.
+- `components/` — the React component library (`.jsx` + `.d.ts` per component; namespace
+  `window.ChicoryTVDesignSystem_eb3b61`).
+- `tokens/` + `styles.css` — design tokens and the three themes (`tokens/themes.css`).
+- `readme.md` — full design-system documentation.
+- `docs/superpowers/specs/2026-07-01-chicorytv-ui-redesign-design.md` — the redesign brief; **§6** is the
+  Channel Builder spec, **§8** records exactly what was built + backend gaps (#62/#63–#68).
+
+To view the whole admin: open `templates/chicorytv-admin/app.html` and click **New Channel**.
diff --git a/design-system/docs/superpowers/specs/2026-07-01-chicorytv-ui-redesign-design.md b/design-system/docs/superpowers/specs/2026-07-01-chicorytv-ui-redesign-design.md
new file mode 100644
index 000000000..fc49d6e4d
--- /dev/null
+++ b/design-system/docs/superpowers/specs/2026-07-01-chicorytv-ui-redesign-design.md
@@ -0,0 +1,229 @@
+# ChicoryTV UI Redesign — Visual Direction Brief (Pass 1)
+
+**Date:** 2026-07-01
+**Issue:** [ersatztv#59 — full UI redesign and ChicoryTV rebrand](http://192.168.1.95:3000/timothy/ersatztv/issues/59)
+**Status:** Design direction locked. **Pass 1 built (2026-07-02):** the ChicoryTV **design system** (React component library + tokens + three themes) and the full admin (Dashboard, Channels, Guide/EPG, Schedule editor, Playouts, Libraries) now exist as a reusable template, and the §6 Create Channel flow is built as the **Channel Builder** screen. See **§8** for exactly what shipped, the decisions made during build, and handoff notes.
+
+> Scope of *this* document: the **visual-direction brief** for Pass 1 — the decisions plus the exact prompts to paste into Claude Design (claude.ai/design) to generate 4 hero screens. It is **not** the full #59 implementation spec. That comes after a look is locked.
+
+---
+
+## 1. Context & goals
+
+ErsatzTV is a custom IPTV channel server (C#/.NET 10, currently a Blazor Server + MudBlazor UI, ~60 Razor pages). The current UI is utilitarian ("Sonarr-like") and was never designed. Issue #59 calls for a complete redesign built **around the REST API** rather than legacy page patterns, plus a rename to **ChicoryTV**, with drag-and-drop workflows, better creation defaults/templates, and discoverable-but-not-heavy advanced config.
+
+**Goals (from #59):**
+- Slick, modern, app-like UI built around the API.
+- Drag-and-drop for channel lineup, scheduling, ordering, editing.
+- Better defaults/templates for channel creation (subtitles, shuffle, schedule/playout defaults).
+- Advanced config discoverable without making common workflows heavy.
+- Rebrand user-facing surfaces to ChicoryTV.
+
+**Success for Pass 1:** the user (not design-oriented) can look at 4 rendered hero screens and say "yes, that direction" — locking a look + brand cheaply before any spec/prototype/build work.
+
+---
+
+## 2. Strategic decisions (locked 2026-07-01)
+
+| Decision | Choice | Why |
+|---|---|---|
+| **Frontend stack** | **React SPA on the REST API** (not Blazor/MudBlazor reskin) | All design is AI-driven; LLMs generate React far more reliably than Blazor. Claude Design outputs React, so its output is *shippable* and the `design-sync` pipeline becomes usable (on-brand AI designs → 1:1 shipped code). Satisfies #59's "around the API" goal natively. |
+| **API sequencing** | **Design pulls the API** | If a design goal needs a new API feature, build the API feature first. #59 is *not* hard-blocked on API completeness. |
+| **Look & feel** | **Komodo-slick** | Dynamic, app-like, no full-page reloads, dense/technical. Explicitly **not** Sonarr-style. |
+| **Brand** | **ChicoryTV — dark + chicory blue** | See §3. |
+
+**Accepted costs of React:** full UI rewrite, dual-language (C# backend + TS frontend), new build/deploy step, transition period running both UIs.
+
+**Pipeline note:** `/design-sync` was gated on a React component library existing (MudBlazor isn't one). **That library now exists** — the ChicoryTV design system in this project ships React primitives (`Button`, `Card`, `Input`, `Select`, `Switch`, `Badge`, `StatusDot`, `ChannelLogo`, `NavItem`, `Tabs`, …) with tokens and three themes, compiled to `_ds_bundle.js` (+ `_ds_manifest.json`). The design-sync prerequisite — on-brand components that can round-trip design ↔ code — is therefore met **on the design side**; remaining work is pointing `/design-sync` at this design system and/or wiring these components into the real React SPA in the codebase (see §8.6).
+
+---
+
+## 3. Brand: ChicoryTV
+
+"Chicory" is a real plant with a distinctive cornflower/periwinkle-blue flower (and a coffee/roasted association) — giving an ownable accent color and a name with a story. Direction: **dark, technical, focused**, one confident accent.
+
+### Color tokens (draft — refine in Claude Design)
+
+```
+bg        #0F1115   (near-black charcoal — app background)
+surface   #171A21   (cards / panels)
+border    #262B36   (hairline dividers)
+text      #E6E9EF   (primary)   muted #9AA4B2 (secondary)
+accent    #5B7CFA   (chicory periwinkle-blue — primary actions, active nav)
+ok        #3FB984   warn #E0A83D   err #E5484D
+```
+
+### Usage rules
+- Accent used **sparingly** — primary buttons, active nav item, focus/selection, "live/on-air" emphasis. Not decorative.
+- Dense rows with subtle hairline borders; generous but not wasteful spacing. TV/EPG grids read well on dark.
+- **Typography:** clean sans (Inter-like) for UI; consider a tabular/mono for channel numbers, times, and durations so grids align.
+- **Density:** app-like, information-dense (Komodo), not marketing-spacious. Prefer inline actions and hover affordances over full-page navigation.
+- **Logo/wordmark:** "ChicoryTV" wordmark with a chicory-flower/periwinkle mark; let Claude Design propose 2-3 options.
+
+---
+
+## 4. The 4 hero screens (Pass 1)
+
+Real domain vocabulary is included so renders show true ChicoryTV content, not placeholders. **Use the app's own terms:** Channels, Schedules / Schedule Items, Playouts (Classic/Block/Sequential/Scripted/External JSON), Blocks, Playout Templates, Deco / Deco Group, Filler (Pre/Mid/Post-Roll, Tail, Fallback), Collection Type, Playback Order, Playout Mode, Guide Mode, and the XMLTV "programme" for EPG.
+
+### 4.1 Dashboard (reimagined as a real overview)
+Today `Index.razor` is only health-checks + release notes. **Redesign it into a proper landing overview:**
+- **On-air now** — per-channel "now playing" strip/cards: channel number + logo + name, current program title, progress bar to next, live/on-air accent state.
+- **At-a-glance counts** — channels, active playouts, transcodes running, libraries.
+- **Health panel** — the existing `HealthCheckResult` list (status: Pass/Info/Warning/Fail with green/blue/amber/red), condensed; click-through to detail.
+- **Recent activity / errors** — recent scans, playout resets, transcode failures.
+- **Release notes** — collapsible card, secondary.
+
+### 4.2 Channels list
+Entity: `Channel`. Dense table, the template for all list pages.
+- **Columns:** Number (with `(D)` disabled / `(H)` hidden-from-EPG markers) · Logo · Name · Language (preferred audio) · Streaming Mode (`HLS Direct` / `HLS Segmenter` / `MPEG-TS` / `MPEG-TS (Legacy)`) · FFmpeg Profile.
+- **Row actions (inline icons):** Preview · Stop transcode (only when active) · Edit · Troubleshoot playback · Delete.
+- **Top bar:** "Add Channel", "Edit Channel Numbers", "Show Disabled" toggle, search/filter.
+- **States:** disabled/hidden rows visually de-emphasized; active-transcode indicator.
+- **Redesign opportunity:** bulk-select + bulk actions; group-by channel Group; drag-to-reorder channel numbers (replaces the separate "Edit Channel Numbers" page).
+- **Borrowed-concept enrichments:**
+  - **Lineup health at a glance** (#72) — per-row status: user-made vs auto-generated origin, and a prominent **"failed / no content"** state (empty collection, no playout, broken source).
+  - **Resume badge** (#68) — sequential/resume channels show a "Continue watching — resumes at S1E4 12:30" indicator.
+
+### 4.3 Schedule / playout editor (introduce drag-and-drop)
+**Net-new capability:** today, schedule-item ordering is up/down arrow buttons. The redesign introduces **drag-to-reorder**.
+- **Left:** ordered list of **Schedule Items** (drag handles) — each row shows Start Time · Collection · Playout Mode.
+- **Right:** selected-item detail form. Real fields:
+  - **Start Type** (Dynamic/Fixed) + Start Time + Fixed Start Time Behavior (Inherit/Strict/Flexible)
+  - **Collection Type** — Collection, Television Show/Season, Artist, Multi Collection, Smart Collection, Search Query, Playlist, Rerun (First Run / Rerun) — each swaps its picker.
+  - **Playback Order** — Chronological, Random, Shuffle, Shuffle In Order, Marathon, Season/Episode, Multi-Episode Shuffle (+ Marathon sub-fields: Group By, Shuffle Groups/Items, Batch Size).
+  - **Playout Mode** — Flood / One / Multiple / Duration (+ Multiple Mode & Count, Playout Duration).
+  - **Fill With Group Mode, Tail Mode, Custom Title, Guide Mode (Normal/Filler)**.
+  - **Filler** — Pre-Roll, Mid-Roll, Post-Roll, Tail, Fallback presets.
+  - **Overrides** — Watermarks, Graphics, Preferred Audio/Subtitle Language, Subtitle Mode.
+- **Discoverability:** show the common fields (Collection, Playback Order, Playout Mode) up front; tuck Filler/Overrides into progressive-disclosure sections.
+- **Borrowed-concept enrichments:**
+  - **Weighted / fair-share distribution** (#70) — per-show weight inputs (sliders or %) when a schedule item mixes multiple shows ("Show A 70% / Show B 30%"), plus a fair-share toggle.
+  - **Persistent shuffle + Reroll** (#71) — a "Reroll" button and a visible shuffle-state indicator, so shuffle is deliberate and predictable rather than opaque.
+  - **Pad to clock boundary** (#77) — an option to snap programs to :00/:15/:30 with filler, for tidy broadcast-style guides.
+  - **Seasonal / date condition** (#73) — an optional date-range predicate on a schedule item ("active only between dates").
+
+### 4.4 Guide / EPG grid
+Today the guide is XMLTV output only (no rendered grid). Design a **dark time-grid** program guide.
+- **Layout:** channels down the left (number + logo + name), time across the top, program blocks in the grid.
+- **Program block** (`programme`): title, sub-title, start–stop times, category chip, artwork/icon, description on hover/expand.
+- **States:** "now" vertical time-marker; current/on-air program gets the accent; filler (Guide Mode = Filler) visually distinct from real programs.
+- **Controls:** time-range scrubber, jump-to-now, channel filter.
+
+---
+
+## 5. How to use this in Claude Design
+
+Open claude.ai/design and create a project (e.g. "ChicoryTV"). Paste the **master brief** first, then generate one screen at a time with the per-screen prompts. Iterate on the look on the Dashboard first (it sets the shell), then apply the locked style to the rest.
+
+### Master brief (paste first)
+> Design **ChicoryTV**, a dark, slick, app-like admin UI for a self-hosted IPTV/custom-TV channel server (think a modern take on a media-server admin, in the spirit of Komodo — dense, technical, no full-page reloads). Dark theme: background `#0F1115`, surfaces `#171A21`, hairline borders `#262B36`, primary text `#E6E9EF`, muted `#9AA4B2`. One accent — chicory periwinkle-blue `#5B7CFA` — used only for primary actions, active nav, focus, and live/on-air states. Status colors: ok `#3FB984`, warn `#E0A83D`, error `#E5484D`. Clean sans UI type; tabular/mono for numbers, times, durations. Left sidebar nav (Dashboard, Channels, Schedules, Playouts, Collections, Libraries, Settings), compact top bar. Information-dense, inline actions, hover affordances. Include a "ChicoryTV" wordmark with a small periwinkle chicory-flower mark.
+
+### Per-screen prompts
+1. **Dashboard:** "A landing overview: an 'On air now' section of per-channel cards (channel number, logo, name, current program title, progress bar to next, live accent), a row of stat tiles (Channels, Active Playouts, Transcodes, Libraries), a condensed Health panel (rows with Pass/Info/Warning/Fail status icons in green/blue/amber/red), a Recent activity list, and a collapsible Release notes card."
+2. **Channels list:** "A dense channels table. Columns: Number, Logo, Name, Language, Streaming Mode (values like 'HLS Segmenter', 'MPEG-TS'), FFmpeg Profile. Inline row actions: preview, edit, delete. Top bar: 'Add Channel', 'Show Disabled' toggle, search. Disabled rows de-emphasized. Bulk-select checkboxes. Each row has a small status dot — green for healthy, red for 'no content / won't play', and a subtle 'auto' tag for auto-generated channels; a couple of rows show a 'Continue watching — resumes at S1E4' badge."
+3. **Schedule editor:** "Two-pane schedule editor. Left: a drag-to-reorder list of schedule items (drag handles), each showing start time, collection name, and playout mode. Right: a detail form for the selected item with Collection Type, Playback Order, and Playout Mode as the primary fields, and collapsible 'Filler' and 'Overrides' sections. Show a 'Reroll' button next to a shuffle indicator; when the item mixes multiple shows, show per-show weight sliders; include a 'Pad to :00/:30' toggle and an optional date-range 'active between' condition. Dark, dense."
+4. **EPG grid:** "A dark TV program guide grid: channels down the left (number, logo, name), time across the top, program blocks in the grid with title/sub-title and a category chip. A vertical 'now' time marker; the current program on each channel uses the accent color; filler programs look muted. A jump-to-now button and time scrubber."
+5. **Auto-tuning wizard** *(borrowed from PseudoTV, #69)*: "A 'Generate channels' screen. Step 1: choose what to generate channels from — a set of toggle cards labelled 'By TV Network', 'By TV Genre', 'By Movie Genre', 'By Studio', 'One per Show (24/7)', 'By Smart Collection'. Step 2: a preview grid of the channels that would be created — each a card with an auto-picked logo, a channel name (e.g. 'Comedy', 'Warner Bros.', 'Breaking Bad 24/7'), an item count, and an include checkbox. A 'Template' dropdown applies default settings to all. A prominent 'Create 12 channels' button. Dense, app-like."
+
+Refine tokens/typography live, then regenerate the other screens once the Dashboard look is locked.
+
+> **Enrichments cross-reference:** the annotations above map to filed issues — Channels-list status/resume (#72, #68); Schedule-editor weights/reroll/pad/seasonal (#70, #71, #77, #73); Auto-tuning (#69). These enrich the hero screens; they're not separate deliverables except the Auto-tuning wizard (screen 5).
+
+---
+
+## 6. Create Channel — workflow redesign (pulled forward)
+
+The inherited channel-creation flow is the biggest UX pain and is being fully rethought. Today, making a working channel is a chain of four disconnected editors across four entities — **Channel → Schedule → Schedule Items → Playout** — and the channel form alone dumps ~30 advanced fields with no sane defaults. There is no way to browse your library while building, and no templates/presets.
+
+### Target experience: one library-to-lineup builder
+
+**One screen** replaces the four-editor chain. Behind the scenes it still creates Channel + Collection + Schedule + Schedule Items + Playout — the user never sees those concepts.
+
+- **Left — Library browser:** artwork grid of shows/movies, searchable, filterable by library. (Wholly missing today.)
+- **Right — Channel lineup:** items added from the library, drag-to-reorder. This *is* the channel's content.
+- **Add by** double-click **or** drag.
+
+**Friendly options, always visible (the 90% case):**
+- **Name** + auto-suggested channel **Number**.
+- **Shuffle** toggle (on = Shuffle playback order; off = Sequential/Chronological).
+- **"Always playing (like live TV)"** toggle — plays continuously and advances on schedule even when unwatched. *(Needs backend confirmation — see gap 6.)*
+- **Channel image:** drop one image, used by default as **both** the listing **logo** and the on-screen **bug** (watermark), with live preview of both; expandable to set them separately (as possible today).
+
+**Technical settings = a Channel Template (with override):**
+- A **Channel Template** picker bundles the clunky technical/behavioral config — FFmpeg/transcode profile, fillers (pre/mid/post-roll), interleaving, subtitle behavior, playout defaults. A sensible default template is pre-selected, so most channels need **zero** technical config.
+- **Both built-in and custom templates:** ship a few sensible built-ins (e.g. "Standard", "Music videos"); users can save their own. Where a template can supply a default, it does — templates are the assumed path.
+- **"Advanced"** disclosure reveals the full ~30-field set for power-user overrides.
+
+**One "Create" button** builds all underlying entities atomically.
+
+### Backend gaps this requires (design pulls the API)
+
+Tracked under epic **#62**; sub-issues #63–#68:
+
+1. **Composite "create channel from lineup" endpoint** (#63) — creates channel + collection + schedule + schedule items + playout atomically (today they are separate operations).
+2. **Channel Templates entity** (#64) — bundles transcode profile, fillers, interleave, subtitle/shuffle/playout defaults; built-in + user-saved. (#59 explicitly asks for templates.)
+3. **Library browse + search API with artwork** (#65) — powers the left pane.
+4. **Full image-type support for logo/watermark** (#66) — WebP appears unsupported today. Support can mean *either* adding decode support *or* **transparently re-encoding uploaded images to a supported format on upload** if FFmpeg/SkiaSharp is the blocker — the user should never hit an "unsupported image" wall.
+5. **Unified logo/bug image handling** (#67) — one uploaded image drives both, separable.
+6. **"Always-on vs on-demand" playout** (#68) — needs investigation; ErsatzTV playouts are continuous by design, so an on-demand mode may not exist yet.
+
+### Claude Design prompt — Create Channel
+
+> A "Create Channel" screen for a dark IPTV admin (ChicoryTV palette). Two main panes: LEFT is a searchable library browser — a grid of show/movie poster artwork with a search bar and a library filter dropdown. RIGHT is the "channel lineup" — a vertical list of the shows added from the library, each with a drag handle to reorder and a remove button. Above the panes: a channel Name field, an auto-filled channel Number, a Shuffle toggle, an "Always playing (like live TV)" toggle, and a single image drop-zone labelled "Channel image" showing a live preview used as both the listing logo and the on-screen bug, with an "advanced: set separately" link. A "Template" dropdown (default: "Standard") sets technical settings, with an "Advanced settings" collapsible section below it. A prominent "Create channel" button. Dense, app-like, chicory periwinkle-blue accent on the primary button and active elements.
+
+---
+
+## 7. Out of scope & next steps
+
+**Out of scope now:** the full #59 implementation spec, React app architecture (routing/state/auth/build/deploy), the media-libraries/collections browser (Pass 2), browser-based channel playback (tracked separately in #60), the actual rebuild. (Channel creation was originally deferred to Pass 2 but is now specified in §6.)
+
+**Next steps (after a look is locked):**
+1. Design the §6 Create Channel screen in Claude Design; file the §6 backend-gap issues.
+2. Pass 2 screens: libraries/collections browser.
+3. Prototype the hard workflows (drag-drop lineup/scheduling, create-channel builder) as clickable React.
+4. Full #59 spec: IA, React app architecture, API gaps to backfill, migration/cutover (dual-stack), rebrand checklist.
+5. Build.
+
+**Related:** #2 (REST API — the foundation this UI sits on), #58 (MCP server), #60 (browser channel playback, post-redesign).
+
+---
+
+## 8. What was built (2026-07-02) — Pass 1 → design system + Channel Builder
+
+Pass 1 rendered as a working, reusable **design-system project**, not just static hero mocks.
+
+### 8.1 Design system (the React component library #59 wanted)
+- **Tokens** (`tokens/`): layered surfaces, three-weight text, one accent + status colors, 4px spacing grid, radii, elevation, motion, typography (Geist / Geist Mono). Consumed as CSS custom properties (`--ctv-*` plus semantic aliases like `--action-primary`, `--status-live`).
+- **Three themes** (`tokens/themes.css`, via `data-theme` on `<html>`): **warm chicory** (roasted-amber accent, default `:root`), **cool periwinkle** (`#5B7CFA`), **dual accent** (periwinkle app + warm `#F0663F` focal for live/attention). One attribute switches everything because components read the aliases.
+- **Components** (`components/`, namespace `window.ChicoryTVDesignSystem_eb3b61`): Button, IconButton, Input, Select, Switch, Checkbox, Badge, StatusDot, Tag, ChannelLogo, Card, Stat, ProgressBar, Spinner, Toast, Tooltip, NavItem/NavSection, Tabs — each with a `.d.ts` and a specimen card. Compiled to `_ds_bundle.js`.
+- Icons: **Lucide** (deliberate substitution for MudBlazor's Material Symbols).
+
+### 8.2 Admin template (`templates/chicorytv-admin/`)
+The full interactive admin — sidebar + top bar + all screens — as a single reusable template loaded via `ds-base.js` (which pulls the compiled bundle + stylesheets). Screens: Dashboard, Channels, **New Channel (Channel Builder)**, Guide/EPG, Schedule editor, Playouts, Libraries, plus a live 3-theme switcher. Screens are mock-data prototypes (`data.js`).
+
+### 8.3 Channel Builder (implements §6)
+One screen replacing the Channel→Schedule→Items→Playout chain:
+- **Left — library browser:** poster-artwork grid, search, per-library filter chips, a **Library / Collections** source toggle (Smart/Manual/Multi/Rerun collections are addable as a single lineup entry), and a grid/compact density switch.
+- **Center — the lineup:** add by **double-click or drag**, **drag-to-reorder**, remove, running count + total duration, empty-state dropzone.
+- **Right — friendly options:** Name + auto-suggested Number; a **single channel-image dropzone** with live **guide-logo** and **on-screen-bug** previews (expandable to set separately); **Shuffle** and **Always playing (like live TV)** toggles; a **Channel Template** picker (built-in + custom, “save as template”); and an **Advanced** disclosure over the ~30-field override set (one-click **Override** to edit / **View defaults** read-only).
+- One atomic **Create Channel** button.
+
+### 8.4 Decisions & refinements made during build (beyond the §6 brief)
+- **Templates define playback, not just transcode.** A Channel Template now also carries **Shuffle** and **Always-playing** defaults; selecting a template applies them, and each toggle shows an “overrides template” tag when the user diverges. (Extends §6 and the #64 template entity.)
+- **Dual-accent theme** routes **primary actions, active nav, and selection** through the focal warm hue (`--action-primary`) — Create button, selected library posters, active Advanced tab — so the two accents read distinctly while warm/cool stay coherent.
+- **“Always playing” renders in the live/on-air color** (`--ctv-live`) with a LIVE pill — it *is* the live-TV concept and is the element that most visibly distinguishes the dual theme.
+- **Motion system** (iOS/macOS feel): sliding-highlight segmented controls, hover-lift cards, press-scale controls, pop-in selection checks, animated max-height disclosure, gentle `cubic-bezier(0.16,1,0.3,1)` easing, `prefers-reduced-motion` fallback.
+- **Primary (“big”) button standardized to top-right** on every screen (was mixed).
+- **Overlay scrollbars** on tall panels (hidden native bar → no reflow when it appears; subtle fading thumb).
+
+### 8.5 Backend gaps — status unchanged
+The §6 gaps (#62 / #63–#68) still stand. **#68 “always-on vs on-demand”** is shown in the UI as a normal enabled toggle but **still needs backend confirmation.** Templates-carry-shuffle/always (8.4) maps onto the **Channel Templates entity #64**.
+
+### 8.6 Handoff notes (for `/design-sync` and the React rebuild)
+- Components are **design-grade React** (inline-style / CSS-var primitives), not yet wired to a production build (no bundler / routing / tests). For `/design-sync` to round-trip 1:1, either point it at this design-system project as the source of truth, or promote these into the codebase's real component library (same names/props).
+- Admin screens are **mock-data prototypes** to be re-implemented against the REST API.
+- Nothing depends on Blazor/MudBlazor — this is the React foundation the redesign assumed.
+
+### 8.7 Still open (recommended next, larger)
+- **Schedules → Channel Templates manager**: repurpose the standalone Schedules editor as the place to view/create the templates the builder consumes; relabel **Playouts** as a read-only now/next monitor; fold standalone **Collections** into the builder's source toggle. (Deferred as a fresh, larger task.)
diff --git a/design-system/guidelines/brand-logo.card.html b/design-system/guidelines/brand-logo.card.html
new file mode 100644
index 000000000..ad437a5d5
--- /dev/null
+++ b/design-system/guidelines/brand-logo.card.html
@@ -0,0 +1,30 @@
+<!-- @dsCard group="Brand" viewport="700x180" name="ChicoryTV wordmark" subtitle="Chicory-flower mark + wordmark; accent TV" -->
+<!doctype html><html><head><meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400..700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body{margin:0;background:var(--surface-app);font-family:var(--font-sans);color:var(--text-primary)}
+  .wrap{padding:26px 28px;display:flex;align-items:center;gap:40px}
+  .lockup{display:flex;align-items:center;gap:13px}
+  .mark{width:40px;height:40px}
+  .wm{font:var(--weight-semibold) 27px/1 var(--font-sans);letter-spacing:-0.5px}
+  .tv{color:var(--ctv-accent)}
+  .chip{width:56px;height:56px;border-radius:var(--radius-md);background:var(--ctv-surface);border:1px solid var(--border-hairline);display:flex;align-items:center;justify-content:center}
+  .lbl{font:var(--weight-medium) var(--text-2xs)/1 var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--text-disabled);margin-top:12px}
+</style></head>
+<body>
+<div class="wrap">
+  <div>
+    <div class="lockup"><img class="mark" src="../assets/chicory-mark.svg" alt=""><span class="wm">Chicory<span class="tv">TV</span></span></div>
+    <div class="lbl">Primary lockup</div>
+  </div>
+  <div>
+    <div style="display:flex;gap:14px;align-items:center">
+      <img src="../assets/chicory-mark.svg" width="44" height="44" alt="">
+      <div class="chip"><img src="../assets/chicorytv-icon.svg" width="40" height="40" alt=""></div>
+    </div>
+    <div class="lbl">Mark · app icon</div>
+  </div>
+</div>
+</body></html>
diff --git a/design-system/guidelines/color-accent.card.html b/design-system/guidelines/color-accent.card.html
new file mode 100644
index 000000000..1c15c993d
--- /dev/null
+++ b/design-system/guidelines/color-accent.card.html
@@ -0,0 +1,20 @@
+<!-- @dsCard group="Colors" viewport="700x140" name="Accent — chicory periwinkle" subtitle="The single accent: primary actions, active nav, focus, live" -->
+<!doctype html><html><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body{margin:0;background:var(--surface-app);font-family:var(--font-sans);color:var(--text-primary)}
+  .wrap{display:flex;gap:0;padding:20px 22px}
+  .sw{flex:1;height:88px;border-radius:0;display:flex;flex-direction:column;justify-content:flex-end;padding:9px 11px}
+  .sw:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}
+  .sw:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0}
+  .n{font:var(--weight-semibold) var(--text-xs)/1.3 var(--font-sans)}
+  .h{font:var(--text-2xs)/1.3 var(--font-mono);opacity:.8;margin-top:2px}
+</style></head>
+<body>
+<div class="wrap">
+  <div class="sw" style="background:var(--ctv-accent-press)"><span class="n" style="color:#fff">Press</span><span class="h" style="color:#fff">#4C6BE8</span></div>
+  <div class="sw" style="background:var(--ctv-accent)"><span class="n" style="color:#fff">Accent</span><span class="h" style="color:#fff">#5B7CFA</span></div>
+  <div class="sw" style="background:var(--ctv-accent-hover)"><span class="n" style="color:#fff">Hover</span><span class="h" style="color:#fff">#6E8BFB</span></div>
+  <div class="sw" style="background:var(--ctv-accent-soft);border:1px solid rgba(91,124,250,.35)"><span class="n" style="color:var(--ctv-accent)">Soft</span><span class="h" style="color:var(--ctv-accent)">14%</span></div>
+</div>
+</body></html>
diff --git a/design-system/guidelines/color-status.card.html b/design-system/guidelines/color-status.card.html
new file mode 100644
index 000000000..0d864f2b9
--- /dev/null
+++ b/design-system/guidelines/color-status.card.html
@@ -0,0 +1,21 @@
+<!-- @dsCard group="Colors" viewport="700x150" name="Status colors" subtitle="ok / warn / error — solid and soft tints" -->
+<!doctype html><html><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body{margin:0;background:var(--surface-app);font-family:var(--font-sans);color:var(--text-primary)}
+  .wrap{display:flex;gap:14px;padding:20px 22px}
+  .col{flex:1}
+  .bar{height:52px;border-radius:var(--radius-sm)}
+  .soft{height:30px;border-radius:var(--radius-sm);margin-top:8px;display:flex;align-items:center;padding:0 10px}
+  .n{font:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);margin-top:10px}
+  .h{font:var(--text-2xs)/1 var(--font-mono);color:var(--text-disabled);margin-top:4px}
+  .st{font:var(--weight-medium) var(--text-xs)/1 var(--font-sans)}
+</style></head>
+<body>
+<div class="wrap">
+  <div class="col"><div class="bar" style="background:var(--status-ok)"></div><div class="soft" style="background:var(--ctv-ok-soft)"><span class="st" style="color:var(--status-ok)">Healthy</span></div><div class="n">OK</div><div class="h">#3FB984</div></div>
+  <div class="col"><div class="bar" style="background:var(--status-warn)"></div><div class="soft" style="background:var(--ctv-warn-soft)"><span class="st" style="color:var(--status-warn)">Warning</span></div><div class="n">Warn</div><div class="h">#E0A83D</div></div>
+  <div class="col"><div class="bar" style="background:var(--status-error)"></div><div class="soft" style="background:var(--ctv-error-soft)"><span class="st" style="color:var(--status-error)">Error</span></div><div class="n">Error</div><div class="h">#E5484D</div></div>
+  <div class="col"><div class="bar" style="background:var(--status-live)"></div><div class="soft" style="background:var(--ctv-live-soft)"><span class="st" style="color:var(--status-live)">On air</span></div><div class="n">Live</div><div class="h">#5B7CFA</div></div>
+</div>
+</body></html>
diff --git a/design-system/guidelines/color-surfaces.card.html b/design-system/guidelines/color-surfaces.card.html
new file mode 100644
index 000000000..02182d805
--- /dev/null
+++ b/design-system/guidelines/color-surfaces.card.html
@@ -0,0 +1,20 @@
+<!-- @dsCard group="Colors" viewport="700x150" name="Surfaces & borders" subtitle="Layered dark surfaces from app background up to selected" -->
+<!doctype html><html><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body{margin:0;background:var(--surface-app);font-family:var(--font-sans);color:var(--text-primary)}
+  .wrap{display:flex;gap:12px;padding:20px 22px;flex-wrap:wrap}
+  .sw{width:150px;height:96px;border-radius:var(--radius-md);border:1px solid var(--border-hairline);display:flex;flex-direction:column;justify-content:flex-end;padding:10px 12px}
+  .n{font:var(--weight-medium) var(--text-xs)/1.3 var(--font-sans);color:var(--text-primary)}
+  .h{font:var(--text-2xs)/1.3 var(--font-mono);color:var(--text-disabled);margin-top:2px}
+</style></head>
+<body>
+<div class="wrap">
+  <div class="sw" style="background:var(--ctv-bg-sunken)"><span class="n">Sunken</span><span class="h">#0B0D11</span></div>
+  <div class="sw" style="background:var(--ctv-bg)"><span class="n">App bg</span><span class="h">#0F1115</span></div>
+  <div class="sw" style="background:var(--ctv-surface)"><span class="n">Surface</span><span class="h">#171A21</span></div>
+  <div class="sw" style="background:var(--ctv-surface-2)"><span class="n">Raised</span><span class="h">#1C2029</span></div>
+  <div class="sw" style="background:var(--ctv-surface-3)"><span class="n">Selected</span><span class="h">#222732</span></div>
+  <div class="sw" style="background:var(--ctv-surface);border:1px solid var(--ctv-border-strong)"><span class="n">Border strong</span><span class="h">#333A48</span></div>
+</div>
+</body></html>
diff --git a/design-system/guidelines/color-text.card.html b/design-system/guidelines/color-text.card.html
new file mode 100644
index 000000000..5902e8842
--- /dev/null
+++ b/design-system/guidelines/color-text.card.html
@@ -0,0 +1,17 @@
+<!-- @dsCard group="Colors" viewport="700x140" name="Text on dark" subtitle="Primary / muted / faint — the three text weights" -->
+<!doctype html><html><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body{margin:0;background:var(--surface-app);font-family:var(--font-sans)}
+  .wrap{padding:22px 24px;display:flex;flex-direction:column;gap:14px}
+  .row{display:flex;align-items:baseline;gap:16px}
+  .lg{font:var(--weight-semibold) var(--text-xl)/1 var(--font-sans)}
+  .meta{font:var(--text-2xs)/1 var(--font-mono);color:var(--text-disabled);margin-left:auto}
+</style></head>
+<body>
+<div class="wrap">
+  <div class="row"><span class="lg" style="color:var(--text-primary)">Primary — channel names, values</span><span class="meta">#E6E9EF</span></div>
+  <div class="row"><span class="lg" style="color:var(--text-secondary)">Muted — labels, secondary meta</span><span class="meta">#9AA4B2</span></div>
+  <div class="row"><span class="lg" style="color:var(--text-disabled)">Faint — disabled, placeholder</span><span class="meta">#626B7A</span></div>
+</div>
+</body></html>
diff --git a/design-system/guidelines/color-themes.card.html b/design-system/guidelines/color-themes.card.html
new file mode 100644
index 000000000..d30b6f293
--- /dev/null
+++ b/design-system/guidelines/color-themes.card.html
@@ -0,0 +1,35 @@
+<!-- @dsCard group="Colors" viewport="700x180" name="Color schemes" subtitle="Three shipped themes — set data-theme on <html>" -->
+<!doctype html><html><head><meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400..600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body{margin:0;background:var(--surface-app);font-family:var(--font-sans);color:var(--text-primary)}
+  .wrap{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
+  .row{display:flex;align-items:center;gap:12px}
+  .scope{display:flex;align-items:center;gap:0;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--ctv-border)}
+  .sw{width:46px;height:34px}
+  .name{width:150px}
+  .t{font:var(--weight-medium) var(--text-sm)/1.1 var(--font-sans);color:var(--ctv-text)}
+  .d{font:var(--text-2xs)/1.2 var(--font-sans);color:var(--ctv-text-muted);margin-top:2px}
+  .code{font:var(--text-2xs)/1 var(--font-mono);color:var(--ctv-text-faint);margin-left:auto}
+</style></head>
+<body>
+<div class="wrap">
+  <div class="row" data-theme="">
+    <div class="name"><div class="t">Warm chicory</div><div class="d">Primary · amber + leaf-green</div></div>
+    <div class="scope"><span class="sw" style="background:var(--ctv-bg)"></span><span class="sw" style="background:var(--ctv-surface)"></span><span class="sw" style="background:var(--ctv-accent)"></span><span class="sw" style="background:var(--ctv-secondary)"></span></div>
+    <span class="code">:root</span>
+  </div>
+  <div class="row" data-theme="cool">
+    <div class="name"><div class="t">Cool periwinkle</div><div class="d">Alternate · cool, focused</div></div>
+    <div class="scope"><span class="sw" style="background:var(--ctv-bg)"></span><span class="sw" style="background:var(--ctv-surface)"></span><span class="sw" style="background:var(--ctv-accent)"></span><span class="sw" style="background:var(--ctv-live)"></span></div>
+    <span class="code">[data-theme="cool"]</span>
+  </div>
+  <div class="row" data-theme="dual">
+    <div class="name"><div class="t">Dual accent</div><div class="d">Blue app · warm live/on-air</div></div>
+    <div class="scope"><span class="sw" style="background:var(--ctv-bg)"></span><span class="sw" style="background:var(--ctv-surface)"></span><span class="sw" style="background:var(--ctv-accent)"></span><span class="sw" style="background:var(--ctv-live)"></span></div>
+    <span class="code">[data-theme="dual"]</span>
+  </div>
+</div>
+</body></html>
diff --git a/design-system/guidelines/radius-elevation.card.html b/design-system/guidelines/radius-elevation.card.html
new file mode 100644
index 000000000..499f24d8a
--- /dev/null
+++ b/design-system/guidelines/radius-elevation.card.html
@@ -0,0 +1,29 @@
+<!-- @dsCard group="Spacing" viewport="700x150" name="Radii & elevation" subtitle="Tight corners; border-led elevation on dark" -->
+<!doctype html><html><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body{margin:0;background:var(--surface-app);font-family:var(--font-sans);color:var(--text-primary)}
+  .wrap{padding:22px 24px;display:flex;gap:30px}
+  .grp{display:flex;gap:14px;align-items:flex-end}
+  .box{width:60px;height:60px;background:var(--ctv-surface-2);border:1px solid var(--border-hairline);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}
+  .v{font:var(--weight-medium) var(--text-2xs)/1 var(--font-mono);color:var(--text-disabled)}
+  .sep{width:1px;background:var(--border-hairline);align-self:stretch}
+</style></head>
+<body>
+<div class="wrap">
+  <div class="grp">
+    <div class="box" style="border-radius:var(--radius-xs)"><span class="v">3</span></div>
+    <div class="box" style="border-radius:var(--radius-sm)"><span class="v">5</span></div>
+    <div class="box" style="border-radius:var(--radius-md)"><span class="v">7</span></div>
+    <div class="box" style="border-radius:var(--radius-lg)"><span class="v">10</span></div>
+    <div class="box" style="border-radius:var(--radius-pill);width:80px"><span class="v">pill</span></div>
+  </div>
+  <div class="sep"></div>
+  <div class="grp">
+    <div class="box" style="border-radius:var(--radius-md);box-shadow:var(--shadow-sm)"><span class="v">sm</span></div>
+    <div class="box" style="border-radius:var(--radius-md);box-shadow:var(--shadow-md)"><span class="v">md</span></div>
+    <div class="box" style="border-radius:var(--radius-md);box-shadow:var(--shadow-pop)"><span class="v">pop</span></div>
+    <div class="box" style="border-radius:var(--radius-md);box-shadow:var(--shadow-lg)"><span class="v">lg</span></div>
+  </div>
+</div>
+</body></html>
diff --git a/design-system/guidelines/spacing-scale.card.html b/design-system/guidelines/spacing-scale.card.html
new file mode 100644
index 000000000..449f84c6c
--- /dev/null
+++ b/design-system/guidelines/spacing-scale.card.html
@@ -0,0 +1,25 @@
+<!-- @dsCard group="Spacing" viewport="700x150" name="4px spacing scale" subtitle="From 2px to 56px on a 4px base grid" -->
+<!doctype html><html><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body{margin:0;background:var(--surface-app);font-family:var(--font-sans);color:var(--text-primary)}
+  .wrap{padding:24px;display:flex;align-items:flex-end;gap:14px}
+  .col{display:flex;flex-direction:column;align-items:center;gap:8px}
+  .bar{background:var(--ctv-accent);border-radius:2px;width:20px}
+  .v{font:var(--weight-medium) var(--text-2xs)/1 var(--font-mono);color:var(--text-secondary)}
+</style></head>
+<body>
+<div class="wrap">
+  <div class="col"><div class="bar" style="height:4px"></div><span class="v">2</span></div>
+  <div class="col"><div class="bar" style="height:8px"></div><span class="v">4</span></div>
+  <div class="col"><div class="bar" style="height:12px"></div><span class="v">6</span></div>
+  <div class="col"><div class="bar" style="height:16px"></div><span class="v">8</span></div>
+  <div class="col"><div class="bar" style="height:24px"></div><span class="v">12</span></div>
+  <div class="col"><div class="bar" style="height:32px"></div><span class="v">16</span></div>
+  <div class="col"><div class="bar" style="height:40px"></div><span class="v">20</span></div>
+  <div class="col"><div class="bar" style="height:48px"></div><span class="v">24</span></div>
+  <div class="col"><div class="bar" style="height:64px"></div><span class="v">32</span></div>
+  <div class="col"><div class="bar" style="height:80px"></div><span class="v">40</span></div>
+  <div class="col"><div class="bar" style="height:104px"></div><span class="v">56</span></div>
+</div>
+</body></html>
diff --git a/design-system/guidelines/type-mono.card.html b/design-system/guidelines/type-mono.card.html
new file mode 100644
index 000000000..b98acce2a
--- /dev/null
+++ b/design-system/guidelines/type-mono.card.html
@@ -0,0 +1,29 @@
+<!-- @dsCard group="Type" viewport="700x200" name="Geist Mono — numbers, times, durations" subtitle="Tabular figures for everything numeric" -->
+<!doctype html><html><head><meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400..600&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body{margin:0;background:var(--surface-app);font-family:var(--font-sans);color:var(--text-primary)}
+  .wrap{padding:22px 24px;display:flex;flex-direction:column;gap:16px}
+  .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
+  .big{font:var(--weight-semibold) var(--text-2xl)/1 var(--font-mono);letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
+  .lbl{font:var(--weight-medium) var(--text-2xs)/1 var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--text-disabled);margin-bottom:6px}
+  table{border-collapse:collapse;font-size:var(--text-sm)}
+  td{padding:3px 18px 3px 0;color:var(--text-secondary)}
+  td.v{color:var(--text-primary)}
+</style></head>
+<body>
+<div class="wrap">
+  <div style="display:flex;gap:44px;align-items:flex-end">
+    <div><div class="lbl">Channel</div><div class="big" style="color:var(--ctv-accent)">128.4</div></div>
+    <div><div class="lbl">Duration</div><div class="big">01:24:36</div></div>
+    <div><div class="lbl">Start</div><div class="big">20:00:00</div></div>
+    <div><div class="lbl">Bitrate</div><div class="big">8.2<span style="font-size:14px;color:var(--text-disabled)"> Mbps</span></div></div>
+  </div>
+  <table>
+    <tr><td>Aligned figures</td><td class="v mono">1,204</td><td class="v mono">00:03:12</td><td class="v mono">96.0%</td></tr>
+    <tr><td>Zero-locked</td><td class="v mono">0,007</td><td class="v mono">14:59:08</td><td class="v mono">-3.5</td></tr>
+  </table>
+</div>
+</body></html>
diff --git a/design-system/guidelines/type-sans.card.html b/design-system/guidelines/type-sans.card.html
new file mode 100644
index 000000000..f4d00df3d
--- /dev/null
+++ b/design-system/guidelines/type-sans.card.html
@@ -0,0 +1,21 @@
+<!-- @dsCard group="Type" viewport="700x210" name="Geist — UI sans scale" subtitle="Page titles, card titles, body, labels" -->
+<!doctype html><html><head><meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body{margin:0;background:var(--surface-app);font-family:var(--font-sans);color:var(--text-primary)}
+  .wrap{padding:22px 24px;display:flex;flex-direction:column;gap:15px}
+  .row{display:flex;align-items:baseline;gap:16px}
+  .meta{font:var(--text-2xs)/1 var(--font-mono);color:var(--text-disabled);margin-left:auto;white-space:nowrap}
+</style></head>
+<body>
+<div class="wrap">
+  <div class="row"><span style="font:var(--weight-semibold) var(--text-xl)/1 var(--font-sans);letter-spacing:-0.01em">Channels &amp; Playouts</span><span class="meta">20 · 600 · Page title</span></div>
+  <div class="row"><span style="font:var(--weight-semibold) var(--text-lg)/1 var(--font-sans)">Recent activity</span><span class="meta">16 · 600 · Card title</span></div>
+  <div class="row"><span style="font:var(--weight-normal) var(--text-md)/1 var(--font-sans)">Emphasized body &amp; input text</span><span class="meta">14 · 400 · Body md</span></div>
+  <div class="row"><span style="font:var(--weight-normal) var(--text-sm)/1 var(--font-sans)">Table cells and default body — the workhorse size</span><span class="meta">13 · 400 · Body sm</span></div>
+  <div class="row"><span style="font:var(--weight-medium) var(--text-xs)/1 var(--font-sans);color:var(--text-secondary)">Field labels, chips, secondary meta</span><span class="meta">12 · 500 · Label</span></div>
+  <div class="row"><span style="font:var(--weight-semibold) var(--text-2xs)/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text-disabled)">Section eyebrow</span><span class="meta">11 · 600 · Caps</span></div>
+</div>
+</body></html>
diff --git a/design-system/readme.md b/design-system/readme.md
new file mode 100644
index 000000000..21426d4cd
--- /dev/null
+++ b/design-system/readme.md
@@ -0,0 +1,190 @@
+# ChicoryTV Design System
+
+A dark, slick, app-like admin design system for **ChicoryTV** — a self-hosted IPTV /
+custom-TV channel server. ChicoryTV is a modern reimagining of the **ErsatzTV** admin
+UI (a .NET / Blazor Server + MudBlazor application): same product, same information
+architecture, redrawn as a dense, technical, no-full-reload media-server console in the
+spirit of tools like Komodo.
+
+The product lets you turn a media library into personalized live TV channels — with an
+EPG, channel scheduling, and streaming (IPTV/HLS/MPEG-TS) to any device.
+
+## Sources
+- **Codebase (ground truth):** `ersatztv/` — ErsatzTV fork, C#/.NET 10, Blazor Server, MudBlazor.
+  Key screens read for this system:
+  - `ErsatzTV/Shared/MainLayout.razor` — app bar, drawer nav, theme palette.
+  - `ErsatzTV/Pages/Channels.razor` — channel table + inline actions (the core view).
+  - `ErsatzTV/Pages/Playouts.razor` — playout list + playout-detail timeline items.
+  - `ErsatzTV/Pages/Schedules.razor`, `Libraries.razor`, `Index.razor` (health dashboard).
+- **Upstream project:** ErsatzTV — https://ersatztv.org , https://github.com/ErsatzTV/ErsatzTV
+- ChicoryTV is a **rebrand + redesign**, not a fork of the visual layer. The MudBlazor
+  green/Roboto theme is intentionally replaced; product vocabulary and IA are preserved.
+
+> **Font substitution — please confirm.** ErsatzTV ships no brand font (MudBlazor defaults to
+> Roboto). ChicoryTV adopts **Geist** (UI) + **Geist Mono** (numerics), loaded from Google
+> Fonts. If you have a preferred/licensed brand typeface, share the files and it will be swapped in.
+
+---
+
+## Content fundamentals — how ChicoryTV writes
+
+Voice is that of a **precise, technical operator tool** — terse, functional, confident. It
+labels and instructs; it does not market or chit-chat.
+
+- **Casing:** Title Case for primary actions and nav ("Add Channel", "Reset All Playouts",
+  "Edit Channel Numbers"); sentence case for helper text and descriptions.
+- **Person:** mostly **impersonal / imperative** — verbs, not "you". Buttons are bare verbs
+  ("Add Schedule", "Scan", "Delete", "Troubleshoot"). Occasional second person in help text.
+- **Nouns are the product's domain language — use them exactly:** Channel, Schedule, Block,
+  Template, Deco, Playout (Classic / Block / Sequential / Scripted / JSON), Collection (Manual /
+  Smart / Multi / Rerun), Playlist, Library, Media Source (Local / Plex / Jellyfin / Emby),
+  FFmpeg Profile, Watermark, Filler, Streaming Mode (HLS Segmenter / HLS Direct / MPEG-TS),
+  EPG / XMLTV / M3U.
+- **Numbers & time are first-class** and always concrete: channel numbers (`1.1`, `4.2`),
+  durations (`00:24:00`), clock times (`20:00:00`), counts (`1,204 items`). Rendered in mono.
+- **Status is plain and specific:** "On air", "Healthy", "Not normalizing", "Playout build
+  failed — no items match the schedule window." State the thing and the consequence.
+- **No emoji. No exclamation marks.** Tone stays flat and reliable. Icons carry affect, not punctuation.
+- **Empty/blank:** say what is missing and the next action ("No playouts yet — Add Playout").
+
+Examples pulled from the product surface: *"Show disabled"*, *"Show filler"*, *"Reset All
+Playouts"*, *"Edit Channel Numbers"*, *"HLS Segmenter"*, *"Schedule Playout Reset"*,
+*"This FFmpeg profile is not normalizing audio."*
+
+---
+
+## Visual foundations
+
+**Overall vibe.** Dark, dense, engineered. Flat surfaces separated by hairline borders, one
+cool accent, monospaced numerics. No decoration for its own sake — every pixel is data,
+control, or the whitespace that organizes them.
+
+**Color.** Near-black layered surfaces: app background `#0F1115`, sunken wells `#0B0D11`,
+cards/rows `#171A21`, raised menus/hover `#1C2029`, selected `#222732`. Hairline borders
+`#262B36` (dividers) and `#333A48` (controls). Text in three weights only: primary `#E6E9EF`,
+muted `#9AA4B2`, faint `#626B7A`. **Exactly one accent** — in the primary *warm chicory* scheme this is roasted-amber `#E08A3C` (the cool *periwinkle* alternate uses `#5B7CFA`)
+— reserved for primary actions, active nav, focus rings, and live/on-air state. Status colors
+are used sparingly and only semantically: ok `#3FB984`, warn `#E0A83D`, error `#E5484D`. Each
+status also has a ~14% soft tint for badges/backgrounds. Never introduce a second decorative hue.
+
+**Type.** Geist for UI, base size **13px** (dense admin). Scale: 11 · 12 · 13 · 14 · 16 · 20 ·
+26 · 34. Weights 400/500/600 (700 rare). Section eyebrows are 11px 600 uppercase, `0.06em`
+tracking, faint. **Geist Mono with tabular figures** for everything numeric — channel numbers,
+clock times, durations, counts, bitrates, percentages — so columns align. Headings use slight
+negative tracking (`-0.01em`); everything else is normal.
+
+**Spacing & layout.** 4px base grid (2 → 56). Fixed chrome: sidebar `232px`, top bar `52px`,
+table/list rows `44px`, controls `34px` (sm `28px`). Layout is a fixed left sidebar + a
+compact top bar + a scrolling content region. Page gutter `32px`; card interior `16–24px`;
+table cell padding `16px × 10px`. Dense but never cramped — rows breathe at 44px.
+
+**Corners.** Tight and consistent: chips/badges `3px`, buttons/inputs `5px`, cards/rows/menus
+`7px`, dialogs `10px`, pills fully round. Nothing is softer than 10px.
+
+**Elevation.** Dark surfaces lean on **border + a subtle drop shadow**, never glow. `sm`
+`0 1px 2px/.40`, `md` `0 4px 12px/.45`, popovers `0 8px 28px/.55`, dialogs `0 16px 40px/.55`.
+Depth reads mostly through the surface-lightness ladder (bg → surface → raised → selected),
+with shadow as a secondary cue. The one exception: live/on-air elements get a small accent
+glow (playhead, pulsing status dot).
+
+**Backgrounds.** No images, gradients, textures, or patterns — flat fills only. The single
+"illustration" is the chicory-flower mark. Imagery, when present, is user content (channel
+logos), shown on a sunken well and contained, never full-bleed.
+
+**Borders & dividers.** 1px hairlines do the structural work: card edges, table row
+separators, section splits, input outlines. Selected rows shift background rather than adding a
+border; the active nav item adds a 2.5px accent rail on its left edge plus a soft accent tint.
+
+**Motion.** Quick and functional. Durations 90 / 140 / 220ms; standard easing
+`cubic-bezier(0.2,0,0,1)`, entrances `cubic-bezier(0.16,1,0.3,1)`. Hover = background/opacity
+shift (`~90ms`); press = 0.5px nudge down, no scale bounce. Switches slide (`140ms`). The only
+looping animations are meaningful: the live status-dot ping and indeterminate progress/scan
+sweeps. Respect `prefers-reduced-motion`.
+
+**States.**
+- *Hover:* raise the surface one step (row → `#1C2029`) or lighten ghost controls; text goes
+  from muted to primary.
+- *Active/selected:* accent-soft tint + (nav) accent rail; never a heavy fill.
+- *Focus:* 3px accent ring (`--focus-ring`) + accent border on inputs.
+- *Disabled:* 40–50% opacity, no pointer.
+- *Live/on-air:* accent color + pulsing dot + faint glow.
+
+**Cards.** Flat `#171A21` surface, 1px hairline border, `7px` radius, no outer shadow by
+default (shadow only when floating, e.g. menus/dialogs). Optional header row (title + subtitle
+left, actions right) separated by a hairline; body padding `16px`, or `0` for flush tables.
+
+**Transparency / blur.** Used sparingly: soft status/accent tints are alpha over the dark
+surface; overlay scrims behind dialogs. No frosted-glass blur in the core admin.
+
+### Color schemes (themes)
+The system ships **three** interchangeable schemes as CSS theme scopes (`tokens/themes.css`).
+Set `data-theme` on `<html>` to switch; each scope overrides only the base `--ctv-*` values, so
+every component and semantic alias follows automatically.
+- **Warm chicory** (primary, default `:root`) — roasted-amber accent `#E08A3C` + chicory-leaf
+  green secondary `#6B8F71`; live rides the amber. The signature ChicoryTV look.
+- **Cool periwinkle** (`[data-theme="cool"]`) — the cooler, focused alternate; accent `#5B7CFA`.
+- **Dual accent** (`[data-theme="dual"]`) — cool periwinkle app, with a warm focal hue `#F0663F`
+  driving the attention layer: live/on-air state **plus** primary actions, the active nav item, and
+  selection (wired through the `--action-primary` / `--ctv-live` aliases), so the two accents read
+  distinctly while warm and cool stay coherent.
+
+The UI kit has a live swatch switcher (bottom-left) to preview all three; the choice persists.
+
+---
+
+## Iconography
+
+- **System:** [**Lucide**](https://lucide.dev) — thin, consistent stroke icons — is the
+  ChicoryTV icon set. This is a deliberate substitution for MudBlazor's Material Symbols in the
+  source; Lucide's lighter 2px stroke suits the dark, technical aesthetic far better. Loaded
+  from CDN (`unpkg.com/lucide`) in cards and the UI kit.
+- **Sizes:** 15–16px inside rows/buttons, 13–14px in dense tables/badges, 17–18px in the top
+  bar. Stroke width stays at Lucide's default (~2). Icons inherit `currentColor` and sit at
+  `--text-secondary` until hover/active (then `--text-primary` or accent).
+- **Common glyphs** (mapped from ErsatzTV actions): `Tv`, `CalendarClock`, `ListVideo`,
+  `Library`, `FolderTree`, `Settings`, `LayoutDashboard`, `Play`, `Pencil`, `Trash2`,
+  `RefreshCw`, `Stethoscope`/`Info` (troubleshoot), `Plus`, `Hash`, `Search`, `Radio` (on air),
+  `Film`, `Sparkles` (filler), `HardDrive`/`Server` (media source).
+- **No emoji, no unicode-glyph icons** in the UI. The only unicode marks used are small
+  affordance triangles on the timeline playhead label.
+- **Brand mark:** the chicory flower is an SVG (`assets/chicory-mark.svg`) — 16 radiating
+  periwinkle petals around a dark center. Do not redraw it; reference the file.
+
+---
+
+## File index
+
+**Foundations**
+- `styles.css` — root entry point (only `@import`s). Consumers link this.
+- `tokens/fonts.css` — Geist + Geist Mono (Google Fonts).
+- `tokens/colors.css` — surfaces, accent, status, text (base + semantic aliases).
+- `tokens/typography.css` — families, scale, weights, tracking, tabular-num helper.
+- `tokens/spacing.css` — 4px scale + fixed chrome sizes.
+- `tokens/radius-elevation-motion.css` — radii, shadows, easings, durations.
+- `guidelines/*.card.html` — foundation specimen cards (Colors, Type, Spacing, Brand).
+
+**Assets** (`assets/`)
+- `chicory-mark.svg` — flower mark. `chicorytv-wordmark.svg` — mark + wordmark. `chicorytv-icon.svg` — app icon.
+
+**Components** (`components/`) — React primitives, `window.ChicoryTVDesignSystem_eb3b61`
+- `forms/` — Button, IconButton, Input, Select, Switch, Checkbox.
+- `data-display/` — Badge, StatusDot, Tag, ChannelLogo, Card, Stat, ProgressBar.
+- `feedback/` — Toast, Tooltip, Spinner.
+- `navigation/` — NavItem + NavSection, Tabs.
+- Each folder has a `*.card.html` specimen and each component a `.d.ts` + `.prompt.md`.
+
+**Admin template** (`templates/chicorytv-admin/`) — the reusable admin shell; the single
+source of truth for the full app (consuming projects start from it, and it doubles as the
+interactive specimen). Open `ChicoryTvAdmin.dc.html` (or `app.html` directly).
+- Screens: **Dashboard** (on-air cards, stat tiles, health panel, activity, release notes),
+  **Channels** (bulk-select, `(D)`/`(H)` markers, inline actions), **New Channel** — the
+  ground-up *library-to-lineup* Channel Builder (searchable library browser + drag/double-click
+  to a reorderable lineup + friendly options, Channel Template picker, and an Advanced override
+  disclosure — replacing the old Channel→Schedule→Items→Playout editor chain), **Schedule
+  editor** (two-pane, drag-to-reorder), **Guide / EPG grid** (channels × time, now-marker),
+  plus **Playouts** and **Libraries**, and a live 3-theme switcher.
+- `Shell.jsx` (nav + top bar), `*.jsx` screens, `data.js` (mock data), `ds-base.js` (loads the
+  compiled bundle + stylesheets). See its `README.md` for structure.
+
+**Skill**
+- `SKILL.md` — Agent-Skills-compatible entry point for reuse in Claude Code.
diff --git a/design-system/styles.css b/design-system/styles.css
new file mode 100644
index 000000000..a0d58a31c
--- /dev/null
+++ b/design-system/styles.css
@@ -0,0 +1,11 @@
+/* ============================================================
+   ChicoryTV Design System — global entry point.
+   Consumers link ONLY this file. Import order matters:
+   fonts first, then tokens.
+   ============================================================ */
+@import url("tokens/fonts.css");
+@import url("tokens/colors.css");
+@import url("tokens/typography.css");
+@import url("tokens/spacing.css");
+@import url("tokens/radius-elevation-motion.css");
+@import url("tokens/themes.css");
diff --git a/design-system/support.js b/design-system/support.js
new file mode 100644
index 000000000..d2f00df00
--- /dev/null
+++ b/design-system/support.js
@@ -0,0 +1,1658 @@
+// GENERATED from dc-runtime/src/*.ts — do not edit. Rebuild with `cd dc-runtime && bun run build`.
+"use strict";
+(() => {
+  var __defProp = Object.defineProperty;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  // src/react.ts
+  function getReact() {
+    const R = window.React;
+    if (!R) throw new Error("dc-runtime: window.React is not available yet");
+    return R;
+  }
+  function getReactDOM() {
+    const RD = window.ReactDOM;
+    if (!RD) throw new Error("dc-runtime: window.ReactDOM is not available yet");
+    return RD;
+  }
+  var h = ((...args) => getReact().createElement(
+    ...args
+  ));
+
+  // src/parse.ts
+  function parseDcDocument(doc) {
+    const dc = doc.querySelector("x-dc");
+    if (!dc) return null;
+    const scriptEl = doc.querySelector("script[data-dc-script]");
+    const { props, preview } = parseDataProps(
+      scriptEl?.getAttribute("data-props") ?? null
+    );
+    return {
+      template: dc.innerHTML,
+      js: scriptEl ? scriptEl.textContent || "" : "",
+      props,
+      preview
+    };
+  }
+  function parseDcText(src) {
+    const openMatch = /<x-dc(?:\s[^>]*)?>/.exec(src);
+    if (!openMatch) return null;
+    const close = src.lastIndexOf("</x-dc>");
+    if (close === -1 || close < openMatch.index) return null;
+    const template = src.slice(openMatch.index + openMatch[0].length, close);
+    const doc = new DOMParser().parseFromString(src, "text/html");
+    const scriptEl = doc.querySelector("script[data-dc-script]");
+    const { props, preview } = parseDataProps(
+      scriptEl?.getAttribute("data-props") ?? null
+    );
+    return {
+      template,
+      js: scriptEl ? scriptEl.textContent || "" : "",
+      props,
+      preview
+    };
+  }
+  function parseDataProps(raw) {
+    if (!raw) return { props: null, preview: null };
+    let parsed;
+    try {
+      parsed = JSON.parse(raw);
+    } catch {
+      return { props: null, preview: null };
+    }
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return { props: null, preview: null };
+    }
+    const obj = parsed;
+    const preview = obj.$preview && typeof obj.$preview === "object" ? obj.$preview : null;
+    const rest = {};
+    for (const k of Object.keys(obj)) {
+      if (k[0] !== "$") rest[k] = obj[k];
+    }
+    return { props: Object.keys(rest).length ? rest : null, preview };
+  }
+  function dcNameFromPath(pathname) {
+    let p = pathname || "";
+    try {
+      p = decodeURIComponent(p);
+    } catch {
+    }
+    const base = p.split("/").pop() || "Root";
+    return base.replace(/\.dc\.html$/, "").replace(/\.html?$/, "") || "Root";
+  }
+
+  // src/boot.ts
+  var BASE_CSS = `
+    .sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
+      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
+      border-radius:2px;box-sizing:border-box;overflow:hidden}
+    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
+    html.sc-dc-streaming .sc-placeholder,
+    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
+      background:color-mix(in srgb,currentColor 5%,transparent);
+      border-color:transparent}
+    html.sc-dc-streaming .sc-placeholder::before,
+    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
+      position:absolute;inset:0;pointer-events:none;
+      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
+      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
+    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
+    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
+      background:color-mix(in srgb,currentColor 8%,transparent)}
+    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
+      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
+    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
+      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
+      border-radius:2px;box-sizing:border-box;color:transparent;
+      user-select:none}
+    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
+      color:color-mix(in srgb,currentColor 50%,transparent);
+      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
+      padding:0 3px}
+    .sc-host.sc-has-error{position:relative}
+    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
+      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
+      border-radius:4px;white-space:pre-wrap;pointer-events:none}
+    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts \u2014 keep both
+       in sync until dc-runtime regains a build step. */
+    @media print {
+      @page { margin: 0.5cm; }
+      figure, table { break-inside: avoid; }
+      #dc-root, #dc-root > .sc-host { height: auto; }
+      *, *::before, *::after {
+        print-color-adjust: exact; -webkit-print-color-adjust: exact;
+        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
+        animation-delay: -99s !important; animation-duration: .001s !important;
+        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
+        animation-play-state: running !important; transition-duration: 0s !important;
+      }
+    }
+  `;
+  var FULL_PAGE_CSS = "html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}";
+  function rootNameForDocument(doc, loc) {
+    let bootPath = loc.pathname || "";
+    if (!/\.dc\.html?$/i.test(safeDecode(bootPath))) {
+      try {
+        bootPath = new URL(doc.baseURI || "/").pathname;
+      } catch {
+      }
+    }
+    return dcNameFromPath(bootPath);
+  }
+  function safeDecode(s) {
+    try {
+      return decodeURIComponent(s);
+    } catch {
+      return s;
+    }
+  }
+  function boot(runtime, doc = document) {
+    const parsed = parseDcDocument(doc);
+    if (!parsed) return null;
+    const React = getReact();
+    const rootName = rootNameForDocument(doc, location);
+    runtime.markFetched(rootName);
+    runtime.setRootName(rootName);
+    runtime.adoptParsed(rootName, parsed);
+    fetch(location.href).then((res) => res.ok ? res.text() : "").then((t) => {
+      const raw = t ? parseDcText(t) : null;
+      if (raw?.template) runtime.updateHtml(rootName, raw.template);
+    }).catch(() => {
+    });
+    const dc = doc.querySelector("x-dc");
+    const hostEl = doc.createElement("div");
+    hostEl.id = "dc-root";
+    dc.replaceWith(hostEl);
+    if (!parsed.preview) {
+      const s = doc.createElement("style");
+      s.textContent = FULL_PAGE_CSS;
+      doc.head.appendChild(s);
+    }
+    const Root = runtime.getDC(rootName);
+    const entry = runtime.registry.get(rootName);
+    function StandaloneRoot() {
+      const [, setTick] = React.useState(0);
+      React.useEffect(() => {
+        const sub = () => setTick((n) => n + 1);
+        entry.subs.add(sub);
+        return () => {
+          entry.subs.delete(sub);
+        };
+      }, []);
+      const defaults = React.useMemo(() => {
+        const d = {};
+        for (const k in entry.propsMeta || {}) {
+          const v = entry.propsMeta?.[k]?.default;
+          if (v !== void 0) d[k] = v;
+        }
+        return d;
+      }, [entry.propsMeta]);
+      return h(Root, { ...defaults, ...entry.propOverrides || {} });
+    }
+    const ReactDOM = getReactDOM();
+    if (ReactDOM.createRoot)
+      ReactDOM.createRoot(hostEl).render(h(StandaloneRoot));
+    else ReactDOM.render(h(StandaloneRoot), hostEl);
+    return rootName;
+  }
+
+  // src/expr.ts
+  var IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*/;
+  var NUMBER_RE = /^-?\d+(\.\d+)?$/;
+  function resolve(vals, src) {
+    const expr = String(src).trim();
+    if (!expr) return void 0;
+    if (expr[0] === "(" && expr[expr.length - 1] === ")" && parensWrapWhole(expr)) {
+      return resolve(vals, expr.slice(1, -1));
+    }
+    const eq = findTopLevelEquality(expr);
+    if (eq) {
+      const lv = resolve(vals, expr.slice(0, eq.index));
+      const rv = resolve(vals, expr.slice(eq.index + eq.op.length));
+      switch (eq.op) {
+        case "===":
+          return lv === rv;
+        case "!==":
+          return lv !== rv;
+        case "==":
+          return lv == rv;
+        default:
+          return lv != rv;
+      }
+    }
+    if (expr[0] === "!") return !resolve(vals, expr.slice(1));
+    if (expr === "true") return true;
+    if (expr === "false") return false;
+    if (expr === "null") return null;
+    if (expr === "undefined") return void 0;
+    if (NUMBER_RE.test(expr)) return Number(expr);
+    if (expr.length >= 2 && (expr[0] === '"' || expr[0] === "'") && expr[expr.length - 1] === expr[0]) {
+      return expr.slice(1, -1);
+    }
+    return resolvePath(vals, expr);
+  }
+  function parensWrapWhole(expr) {
+    let depth = 0;
+    for (let i = 0; i < expr.length - 1; i++) {
+      if (expr[i] === "(") depth++;
+      else if (expr[i] === ")") {
+        depth--;
+        if (depth === 0) return false;
+      }
+    }
+    return true;
+  }
+  function findTopLevelEquality(expr) {
+    let depth = 0;
+    for (let i = 0; i < expr.length; i++) {
+      const c = expr[i];
+      if (c === "[" || c === "(") depth++;
+      else if (c === "]" || c === ")") depth--;
+      else if (depth === 0 && (c === "=" || c === "!") && expr[i + 1] === "=") {
+        if (i > 0 && (expr[i - 1] === "=" || expr[i - 1] === "!")) continue;
+        if (!expr.slice(0, i).trim()) continue;
+        const op = expr[i + 2] === "=" ? c + "==" : c + "=";
+        return { index: i, op };
+      }
+    }
+    return null;
+  }
+  function resolvePath(vals, expr) {
+    const head = expr.match(IDENT_RE);
+    if (!head) return void 0;
+    let cur = vals == null ? void 0 : vals[head[0]];
+    let i = head[0].length;
+    while (i < expr.length) {
+      if (expr[i] === ".") {
+        const m = expr.slice(i + 1).match(IDENT_RE) || expr.slice(i + 1).match(/^\d+/);
+        if (!m) return void 0;
+        cur = cur == null ? void 0 : cur[m[0]];
+        i += 1 + m[0].length;
+      } else if (expr[i] === "[") {
+        let depth = 1;
+        let j = i + 1;
+        while (j < expr.length && depth > 0) {
+          if (expr[j] === "[") depth++;
+          else if (expr[j] === "]") {
+            depth--;
+            if (depth === 0) break;
+          }
+          j++;
+        }
+        if (depth !== 0) return void 0;
+        const key = resolve(vals, expr.slice(i + 1, j));
+        cur = cur == null ? void 0 : cur[key];
+        i = j + 1;
+      } else {
+        return void 0;
+      }
+    }
+    return cur;
+  }
+
+  // src/encode.ts
+  var CAMEL_ATTR = "sc-camel-";
+  var INLINE_TEXT_TAGS = new Set(
+    "a abbr b bdi bdo br cite code del dfn em i ins kbd mark q s samp small span strike strong sub sup u var wbr".split(
+      " "
+    )
+  );
+  var RAW_WRAP = {
+    select: "sc-raw-select",
+    table: "sc-raw-table",
+    tbody: "sc-raw-tbody",
+    thead: "sc-raw-thead",
+    tfoot: "sc-raw-tfoot",
+    tr: "sc-raw-tr",
+    td: "sc-raw-td",
+    th: "sc-raw-th",
+    caption: "sc-raw-caption"
+  };
+  var RAW_UNWRAP = Object.fromEntries(
+    Object.entries(RAW_WRAP).map(([k, v]) => [v, k])
+  );
+  var EVENT_MAP = {
+    onclick: "onClick",
+    onchange: "onChange",
+    oninput: "onInput",
+    onsubmit: "onSubmit",
+    onkeydown: "onKeyDown",
+    onkeyup: "onKeyUp",
+    onkeypress: "onKeyPress",
+    onmousedown: "onMouseDown",
+    onmouseup: "onMouseUp",
+    onmouseenter: "onMouseEnter",
+    onmouseleave: "onMouseLeave",
+    onfocus: "onFocus",
+    onblur: "onBlur",
+    ondoubleclick: "onDoubleClick",
+    oncontextmenu: "onContextMenu"
+  };
+  var ATTRS = `(?:[^>"']|"[^"]*"|'[^']*')*`;
+  var IMPORT_SELF_CLOSE_RE = new RegExp(
+    "<(x-import|dc-import)(" + ATTRS + ")/>",
+    "gi"
+  );
+  var CAMEL_ATTR_RE = /(\s)([a-z]+[A-Z][A-Za-z0-9]*)(\s*=)/g;
+  function encodeCase(html) {
+    html = html.replace(
+      IMPORT_SELF_CLOSE_RE,
+      (_, t, a) => "<" + t + a + "></" + t + ">"
+    );
+    html = html.replace(/<helmet(\s|>)/gi, "<sc-helmet$1");
+    html = html.replace(/<\/helmet\s*>/gi, "</sc-helmet>");
+    html = html.replace(
+      CAMEL_ATTR_RE,
+      (_, sp, name, eq) => sp + CAMEL_ATTR + name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()) + eq
+    );
+    for (const [real, alias] of Object.entries(RAW_WRAP)) {
+      html = html.replace(
+        new RegExp("(</?)" + real + "(?=[\\s>])", "gi"),
+        "$1" + alias
+      );
+    }
+    return html;
+  }
+  function kebabToCamel(s) {
+    return s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+  }
+  function cssToObj(css) {
+    const o = {};
+    for (const decl of css.split(";")) {
+      const i = decl.indexOf(":");
+      if (i < 0) continue;
+      const prop = decl.slice(0, i).trim();
+      o[prop.startsWith("--") ? prop : kebabToCamel(prop)] = decl.slice(i + 1).trim();
+    }
+    return o;
+  }
+  function compileAttr(raw) {
+    const whole = raw.match(/^\s*\{\{([\s\S]+?)\}\}\s*$/);
+    if (whole) {
+      const path = whole[1];
+      return (vals) => resolve(vals, path);
+    }
+    if (raw.includes("{{")) {
+      const parts = raw.split(/\{\{([\s\S]+?)\}\}/g);
+      return (vals) => parts.map((s, i) => i & 1 ? resolve(vals, s) ?? "" : s).join("");
+    }
+    return () => raw;
+  }
+
+  // src/compile.ts
+  function collectProps(node, kind, host) {
+    const propGetters = [];
+    const pseudoClasses = [];
+    let hintSize = null;
+    for (const { name, value } of [...node.attributes]) {
+      if (name === "sc-name" || name === "data-dc-tpl") continue;
+      let key = name;
+      if (key.startsWith(CAMEL_ATTR))
+        key = kebabToCamel(key.slice(CAMEL_ATTR.length));
+      if (key === "hint-size") {
+        hintSize = value;
+        continue;
+      }
+      if (key.startsWith("style-")) {
+        pseudoClasses.push(host.pseudoClass(key.slice(6), value));
+        continue;
+      }
+      if (kind !== "dom") {
+        if (key.includes("-") && !(kind === "x-import" && (key.startsWith("aria-") || key.startsWith("data-"))))
+          key = kebabToCamel(key);
+      } else {
+        if (key === "class") key = "className";
+        else if (key === "for") key = "htmlFor";
+        else if (key.startsWith("on"))
+          key = EVENT_MAP[key] || "on" + key[2].toUpperCase() + key.slice(3);
+      }
+      propGetters.push([key, compileAttr(value)]);
+    }
+    return { propGetters, pseudoClasses, hintSize };
+  }
+  var HOST_STYLE_PROPS = /* @__PURE__ */ new Set([
+    "position",
+    "left",
+    "right",
+    "top",
+    "bottom",
+    "inset",
+    "width",
+    "height",
+    "z-index",
+    "transform"
+  ]);
+  function hostPositionStyle(style) {
+    const all = typeof style === "string" ? cssToObj(style) : style != null && typeof style === "object" ? style : null;
+    if (!all) return void 0;
+    const out = {};
+    for (const [k, v] of Object.entries(all)) {
+      const kebab = k.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
+      if (HOST_STYLE_PROPS.has(kebab)) out[k] = v;
+    }
+    return Object.keys(out).length ? out : void 0;
+  }
+  function compileTemplate(html, host) {
+    const tpl = document.createElement("template");
+    //! nosemgrep: direct-inner-html-assignment
+    tpl.innerHTML = encodeCase(html);
+    let tplN = 0;
+    (function stamp(node) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        node.setAttribute("data-dc-tpl", String(tplN++));
+      }
+      for (const c of node.childNodes) stamp(c);
+    })(tpl.content);
+    const builders = walkChildren(tpl.content, host);
+    const render = ((vals, ctx) => builders.map((b, i) => b(vals || {}, ctx, i)));
+    render.__annotated = tpl.innerHTML;
+    return render;
+  }
+  function walkChildren(node, host) {
+    return [...node.childNodes].map((c) => walk(c, host)).filter((b) => b != null);
+  }
+  function walk(node, host) {
+    if (node.nodeType === Node.TEXT_NODE) return walkText(node);
+    if (node.nodeType !== Node.ELEMENT_NODE) return null;
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    if (tag === "sc-for") return walkFor(el, host);
+    if (tag === "sc-if") return walkIf(el, host);
+    if (tag === "x-import") return walkXImport(el, host);
+    if (tag === "sc-helmet") return host.helmet(el);
+    if (tag === "dc-import") return walkComponent(el, host);
+    return walkElement(el, host);
+  }
+  var warnedHoles = /* @__PURE__ */ new Set();
+  function warnUnresolved(ctx, what) {
+    const key = (ctx?.__name || "?") + "\0" + what;
+    if (warnedHoles.has(key)) return;
+    warnedHoles.add(key);
+    console.warn("[dc-runtime] " + (ctx?.__name || "template") + ": " + what);
+  }
+  function walkText(node) {
+    const txt = node.nodeValue ?? "";
+    if (!txt.includes("{{")) {
+      if (!txt.trim() && !txt.includes(" ")) return null;
+      return () => txt;
+    }
+    const parts = txt.split(/\{\{([\s\S]+?)\}\}/g);
+    return (vals, ctx, key) => h(
+      getReact().Fragment,
+      { key },
+      ...parts.map((p, i) => {
+        if (!(i & 1)) return p;
+        const v = resolve(vals, p);
+        if (v === void 0) {
+          if (!ctx?.__streamingNow) {
+            if (document.body?.hasAttribute("data-dc-editor-on")) {
+              return h(
+                "span",
+                { key: i, className: "sc-interp sc-unresolved" },
+                "{{ " + p.trim() + " }}"
+              );
+            }
+            warnUnresolved(
+              ctx,
+              "{{ " + p.trim() + " }} never resolved \u2014 rendered as empty"
+            );
+            return null;
+          }
+          return h(
+            "span",
+            { key: i, className: "sc-interp sc-missing" },
+            p.trim()
+          );
+        }
+        if (getReact().isValidElement(v) || Array.isArray(v)) {
+          return h(getReact().Fragment, { key: i }, v);
+        }
+        if (v === null || typeof v === "boolean") return null;
+        return h("span", { key: i, className: "sc-interp" }, String(v));
+      })
+    );
+  }
+  function walkFor(el, host) {
+    const listGet = compileAttr(el.getAttribute("list") || "");
+    const asName = el.getAttribute("as") || "item";
+    const hintN = parseInt(el.getAttribute("hint-placeholder-count") || "0", 10);
+    const kids = walkChildren(el, host);
+    const listSrc = el.getAttribute("list") || "";
+    return (vals, ctx, key) => {
+      let list = listGet(vals);
+      if (!Array.isArray(list)) {
+        if (!ctx?.__streamingNow) {
+          if (list !== void 0 && list !== null) {
+            warnUnresolved(
+              ctx,
+              'sc-for list="' + listSrc + '" is not an array (' + typeof list + ")"
+            );
+          }
+          list = [];
+        } else {
+          list = hintN > 0 ? Array(hintN).fill(void 0) : [];
+        }
+      }
+      return h(
+        getReact().Fragment,
+        { key },
+        list.map((item, i) => {
+          const sub = { ...vals, [asName]: item, $index: i };
+          return h(
+            getReact().Fragment,
+            { key: i },
+            kids.map((b, j) => b(sub, ctx, j))
+          );
+        })
+      );
+    };
+  }
+  function walkIf(el, host) {
+    const valGet = compileAttr(el.getAttribute("value") || "");
+    const hintRaw = el.getAttribute("hint-placeholder-val");
+    const hintGet = hintRaw != null ? compileAttr(hintRaw) : null;
+    const kids = walkChildren(el, host);
+    return (vals, ctx, key) => {
+      let v = valGet(vals);
+      if (v === void 0 && hintGet && ctx?.__streamingNow) v = hintGet(vals);
+      return v ? h(
+        getReact().Fragment,
+        { key },
+        kids.map((b, j) => b(vals, ctx, j))
+      ) : null;
+    };
+  }
+  function walkComponent(el, host) {
+    const name = el.getAttribute("name") || el.getAttribute("component") || "";
+    el.removeAttribute("name");
+    el.removeAttribute("component");
+    const tplId = el.getAttribute("data-dc-tpl");
+    const styleRaw = el.getAttribute("style");
+    el.removeAttribute("style");
+    const styleGet = styleRaw != null ? compileAttr(styleRaw) : null;
+    const { propGetters, hintSize } = collectProps(el, "dc-import", host);
+    const kids = walkChildren(el, host);
+    return (vals, ctx, key) => {
+      const props = {
+        key,
+        __hintSize: hintSize,
+        __tplId: tplId,
+        __hostStyle: styleGet ? hostPositionStyle(styleGet(vals)) : void 0
+      };
+      for (const [k, g] of propGetters) {
+        const v = g(vals);
+        if (k === "dcProps") {
+          if (v && typeof v === "object") Object.assign(props, v);
+          continue;
+        }
+        props[k] = v;
+      }
+      if (kids.length) props.children = kids.map((b, j) => b(vals, ctx, j));
+      return h(host.component(name), props);
+    };
+  }
+  function walkXImport(el, host) {
+    const globalNameGet = compileAttr(
+      el.getAttribute("component-from-global-scope") || ""
+    );
+    const exportNameGet = compileAttr(
+      el.getAttribute("component") || el.getAttribute("name") || ""
+    );
+    const fromRaw = el.getAttribute("from") || el.getAttribute("src") || el.getAttribute("import") || "";
+    const urls = fromRaw.trim() ? fromRaw.trim().split(/\s+/) : [];
+    const url = urls.length ? urls[urls.length - 1] : "";
+    const kindOf = (u) => /\.(jsx|tsx)(\?|#|$)/i.test(u) ? "jsx" : "js";
+    const tplId = el.getAttribute("data-dc-tpl");
+    const styleRaw = el.getAttribute("style");
+    el.removeAttribute("style");
+    const styleGet = styleRaw != null ? compileAttr(styleRaw) : null;
+    const wrap = tplId != null || styleGet != null;
+    const { propGetters, hintSize } = collectProps(el, "x-import", host);
+    const hasContent = el.children.length > 0 || !!(el.textContent || "").trim();
+    const kids = hasContent ? walkChildren(el, host) : [];
+    const urlBindable = fromRaw.includes("{{");
+    if (urls.length && !urlBindable) {
+      let prev;
+      for (const u of urls) prev = host.loadExternal(kindOf(u), u, prev);
+    }
+    const evalName = (g, vals) => {
+      const v = g(vals);
+      const s = v == null ? "" : String(v);
+      return s.includes("{{") ? "" : s;
+    };
+    return (vals, ctx, key) => {
+      const globalName = evalName(globalNameGet, vals);
+      const name = globalName || evalName(exportNameGet, vals);
+      const C = !name || urlBindable ? null : globalName ? host.resolveExternalGlobal(url, globalName) : host.resolveExternal(url, name);
+      const hostStyle = styleGet ? hostPositionStyle(styleGet(vals)) : void 0;
+      const wrapper = wrap ? {
+        key,
+        className: "sc-host-x",
+        "data-dc-tpl": tplId,
+        style: hostStyle || { display: "contents" }
+      } : null;
+      if (!C) {
+        const error = urlBindable ? "x-import `from` cannot contain {{ \u2026 }} \u2014 module URLs are resolved at parse time; use a literal URL" : host.resolveExternalError(url, name);
+        const ph = host.placeholder({
+          key: wrapper ? void 0 : key,
+          name,
+          hintSize,
+          error
+        });
+        return wrapper ? h("div", wrapper, ph) : ph;
+      }
+      const props = wrapper ? {} : { key };
+      let unresolvedHole = false;
+      for (const [k, g] of propGetters) {
+        if (k === "component" || k === "componentFromGlobalScope" || k === "from") {
+          continue;
+        }
+        const v = g(vals);
+        if (v === void 0) unresolvedHole = true;
+        if (k === "dcProps") {
+          if (v && typeof v === "object") Object.assign(props, v);
+          continue;
+        }
+        props[k] = v;
+      }
+      if (unresolvedHole && ctx?.__htmlStreamingNow) {
+        const ph = host.placeholder({
+          key: wrapper ? void 0 : key,
+          name,
+          hintSize,
+          error: null
+        });
+        return wrapper ? h("div", wrapper, ph) : ph;
+      }
+      if (kids.length) props.children = kids.map((b, j) => b(vals, ctx, j));
+      return wrapper ? h("div", wrapper, h(C, props)) : h(C, props);
+    };
+  }
+  function contentKey(el) {
+    const clone = el.cloneNode(true);
+    for (const d of clone.querySelectorAll("*")) {
+      while (d.attributes.length) d.removeAttribute(d.attributes[0].name);
+    }
+    const s = clone.innerHTML;
+    let h2 = 5381;
+    for (let i = 0; i < s.length; i++) h2 = (h2 << 5) + h2 + s.charCodeAt(i) | 0;
+    return s.length + "." + (h2 >>> 0).toString(36);
+  }
+  var NEVER_CONTENT_KEYED = new Set(
+    "script style textarea option title select canvas iframe video audio".split(
+      " "
+    )
+  );
+  var NOT_INLINE_SELECTOR = ":not(" + [...INLINE_TEXT_TAGS].join(",") + ")";
+  function walkElement(el, host) {
+    const realTag = RAW_UNWRAP[el.localName] || el.localName;
+    const tplId = el.getAttribute("data-dc-tpl");
+    const inlineOnly = el.childNodes.length > 0 && !NEVER_CONTENT_KEYED.has(realTag) && el.querySelector(NOT_INLINE_SELECTOR) === null;
+    const keySuffix = inlineOnly ? "|" + contentKey(el) : "";
+    const { propGetters, pseudoClasses } = collectProps(el, "dom", host);
+    const kids = walkChildren(el, host);
+    return (vals, ctx, key) => {
+      const props = {
+        key: key + keySuffix,
+        "data-dc-tpl": tplId
+      };
+      for (const [k, g] of propGetters) {
+        let v = g(vals);
+        if (k === "style" && typeof v === "string") v = cssToObj(v);
+        if ((k === "value" || k === "checked") && v === void 0) {
+          v = k === "checked" ? false : "";
+        }
+        props[k] = v;
+      }
+      if (pseudoClasses.length) {
+        props.className = [props.className, ...pseudoClasses].filter(Boolean).join(" ");
+      }
+      return h(realTag, props, ...kids.map((b, j) => b(vals, ctx, j)));
+    };
+  }
+
+  // src/logic.ts
+  var StreamableLogic = class {
+    constructor(props) {
+      __publicField(this, "props");
+      __publicField(this, "state", {});
+      /** Back-pointer to the wrapper component, installed after construction. */
+      __publicField(this, "__host");
+      this.props = props || {};
+    }
+    setState(update, cb) {
+      this.__host && this.__host.__setLogicState(update, cb);
+    }
+    forceUpdate() {
+      this.__host && this.__host.forceUpdate();
+    }
+    componentDidMount() {
+    }
+    componentDidUpdate(_prevProps) {
+    }
+    componentWillUnmount() {
+    }
+    /** The flat object the template renders against (merged over props). */
+    renderVals() {
+      return {};
+    }
+  };
+  function evalDcLogic(src) {
+    //! nosemgrep: eval-and-function-constructor
+    const fn = new Function(
+      "DCLogic",
+      "StreamableLogic",
+      "React",
+      src + '\n;return (typeof Component!=="undefined"&&Component)||undefined;'
+    );
+    return fn(StreamableLogic, StreamableLogic, getReact());
+  }
+
+  // src/component.ts
+  function shallowEqual(a, b) {
+    if (!b) return false;
+    const ak = Object.keys(a).filter((k) => k !== "children");
+    const bk = Object.keys(b).filter((k) => k !== "children");
+    if (ak.length !== bk.length) return false;
+    for (const k of ak) if (a[k] !== b[k]) return false;
+    return true;
+  }
+  function Placeholder({
+    name,
+    hintSize,
+    streaming,
+    error
+  }) {
+    const [w, hgt] = (hintSize || "100%,60px").split(",");
+    return h(
+      "div",
+      {
+        className: "sc-placeholder" + (streaming ? " sc-streaming" : ""),
+        style: { width: w.trim(), height: hgt && hgt.trim() },
+        title: name
+      },
+      error ? h(
+        "div",
+        { className: "sc-placeholder-error" },
+        (name ? name + ": " : "") + error
+      ) : null
+    );
+  }
+  function hintToMin(hint) {
+    if (!hint) return void 0;
+    const [w, hgt] = hint.split(",");
+    return { minWidth: w.trim(), minHeight: hgt && hgt.trim() };
+  }
+  function createComponentFactory(registry, ensureFetched) {
+    const React = getReact();
+    const AncestorContext = React.createContext([]);
+    class StreamableComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        __publicField(this, "__name");
+        __publicField(this, "__sub");
+        __publicField(this, "__needsDidMount", false);
+        /** Snapshot of the registry's streaming flags taken at render time —
+         *  builders read it off the RenderCtx (this) to pick placeholder vs
+         *  render-nothing for unresolved values. */
+        __publicField(this, "__streamingNow", false);
+        __publicField(this, "__htmlStreamingNow", false);
+        /** When a construct throws, remember the (class, registry.ver, props)
+         *  triple so render-time reconcile doesn't re-attempt it on every parent
+         *  re-render. A registry bump (new class, template, external module
+         *  resolving via bumpAll) changes `ver` and breaks the memo so an
+         *  env-dependent constructor can self-heal. */
+        __publicField(this, "__failedLogic", null);
+        __publicField(this, "__failedUserProps", null);
+        __publicField(this, "__failedVer", -1);
+        /** Per-instance constructor error — kept here (not on the registry entry)
+         *  so one instance's successful construct can't hide a sibling's failure,
+         *  and a construct can never wipe an eval error `updateJs` recorded on
+         *  `r.logicError`. */
+        __publicField(this, "__ctorError", null);
+        __publicField(this, "logic");
+        this.__name = props.__name;
+        this.state = { __v: 0, __err: null };
+        this.__sub = () => {
+          if (this.state.__err) this.setState({ __err: null });
+          this.forceUpdate();
+        };
+        this.__makeLogic(registry.get(this.__name).Logic, null);
+        ensureFetched(this.__name);
+      }
+      /** Error-boundary hook: a render crash anywhere in this DC's subtree
+       *  (its own template, an x-import'd component, a child DC without its
+       *  own deeper boundary) lands here instead of unmounting the page. */
+      static getDerivedStateFromError(e) {
+        return { __err: e instanceof Error && e.message ? e.message : String(e) };
+      }
+      componentDidCatch(e, info) {
+        console.error(
+          "[dc-runtime] render error in <" + this.__name + ">:",
+          e,
+          info?.componentStack || ""
+        );
+      }
+      /** Instantiate the logic class (or the no-op base) and adopt `prevState`
+       *  over its initial state — used both at mount and on hot-swap. */
+      __makeLogic(Logic, prevState) {
+        const L = Logic || StreamableLogic;
+        try {
+          this.logic = new L(this.__userProps());
+          this.__failedLogic = null;
+          this.__failedUserProps = null;
+          this.__ctorError = null;
+        } catch (e) {
+          console.error(e);
+          this.__failedLogic = Logic;
+          this.__failedUserProps = this.__userProps();
+          this.__failedVer = registry.get(this.__name).ver;
+          this.__ctorError = this.__name + ": " + (e instanceof Error && e.message ? e.message : String(e));
+          this.logic = new StreamableLogic(
+            this.__userProps()
+          );
+        }
+        this.logic.__host = this;
+        if (prevState)
+          this.logic.state = { ...this.logic.state || {}, ...prevState };
+      }
+      /** The props the author's logic + template see — internal __-prefixed
+       *  wiring stripped. */
+      __userProps() {
+        const { __name, __hintSize, __tplId, __hostStyle, ...rest } = this.props;
+        return rest;
+      }
+      __setLogicState(update, cb) {
+        const prev = this.logic.state;
+        const patch = typeof update === "function" ? update(prev) : update;
+        this.logic.state = { ...prev, ...patch };
+        this.setState((s) => ({ __v: s.__v + 1 }), cb);
+      }
+      /** Swap the logic instance when the registry's Logic class changed
+       *  (streaming completion, hot reload). State carries over; didMount
+       *  re-fires after the swap commits so refs exist. */
+      __reconcileLogic() {
+        const r = registry.get(this.__name);
+        const Next = r.Logic;
+        const Cur = this.logic.constructor;
+        if (Next === Cur || !Next && Cur === StreamableLogic || Next === this.__failedLogic && r.ver === this.__failedVer && shallowEqual(this.__userProps(), this.__failedUserProps)) {
+          return;
+        }
+        if (!this.__needsDidMount) {
+          try {
+            this.logic.componentWillUnmount();
+          } catch (e) {
+            console.error(e);
+          }
+        }
+        this.__makeLogic(Next, this.logic.state);
+        this.__needsDidMount = true;
+      }
+      componentDidMount() {
+        registry.get(this.__name).subs.add(this.__sub);
+        try {
+          this.logic.componentDidMount();
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      componentDidUpdate(prevProps) {
+        this.logic.props = this.__userProps();
+        if (this.__needsDidMount) {
+          if (this.state.__err || !registry.get(this.__name).tpl) return;
+          this.__needsDidMount = false;
+          try {
+            this.logic.componentDidMount();
+          } catch (e) {
+            console.error(e);
+          }
+        } else {
+          try {
+            this.logic.componentDidUpdate(prevProps);
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+      componentWillUnmount() {
+        registry.get(this.__name).subs.delete(this.__sub);
+        if (!this.__needsDidMount) {
+          try {
+            this.logic.componentWillUnmount();
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+      render() {
+        const r = registry.get(this.__name);
+        const cls = "sc-host" + (r.htmlStreaming ? " sc-streaming-html" : "") + (r.jsStreaming ? " sc-streaming-js" : "");
+        const hintStyle = r.htmlStreaming ? hintToMin(this.props.__hintSize) : void 0;
+        const hostStyle = this.props.__hostStyle || hintStyle ? { ...hintStyle || {}, ...this.props.__hostStyle || {} } : void 0;
+        const hostBase = {
+          className: cls,
+          style: hostStyle,
+          "data-sc-name": this.__name,
+          "data-dc-tpl": this.props.__tplId
+        };
+        const chain = Array.isArray(this.context) ? this.context : [];
+        if (chain.includes(this.__name)) {
+          const cycle = [
+            ...chain.slice(chain.indexOf(this.__name)),
+            this.__name
+          ].join(" \u2192 ");
+          return h(
+            "div",
+            { ...hostBase, className: cls + " sc-has-error" },
+            h(Placeholder, {
+              name: this.__name,
+              hintSize: this.props.__hintSize,
+              error: "circular import: " + cycle
+            })
+          );
+        }
+        if (this.state.__err) {
+          return h(
+            "div",
+            { ...hostBase, className: cls + " sc-has-error" },
+            h(
+              "div",
+              { className: "sc-logic-error", "data-omelette-chrome": "" },
+              this.__name + ": " + this.state.__err
+            ),
+            h(Placeholder, {
+              name: this.__name,
+              hintSize: this.props.__hintSize,
+              error: this.state.__err
+            })
+          );
+        }
+        this.__reconcileLogic();
+        if (!r.tpl) {
+          return h(
+            "div",
+            hostBase,
+            h(Placeholder, { name: this.__name, hintSize: this.props.__hintSize })
+          );
+        }
+        const userProps = this.__userProps();
+        this.logic.props = userProps;
+        let vals = userProps;
+        let renderErr = r.logicError || this.__ctorError;
+        try {
+          vals = { ...userProps, ...this.logic.renderVals() || {} };
+        } catch (e) {
+          console.error(e);
+          renderErr = this.__name + ".renderVals(): " + (e instanceof Error && e.message ? e.message : String(e));
+        }
+        this.__streamingNow = !!(r.htmlStreaming || r.jsStreaming);
+        this.__htmlStreamingNow = !!r.htmlStreaming;
+        return h(
+          "div",
+          { ...hostBase, className: cls + (renderErr ? " sc-has-error" : "") },
+          renderErr && h(
+            "div",
+            { className: "sc-logic-error", "data-omelette-chrome": "" },
+            renderErr
+          ),
+          h(
+            AncestorContext.Provider,
+            { value: [...chain, this.__name] },
+            r.tpl(vals, this)
+          )
+        );
+      }
+    }
+    __publicField(StreamableComponent, "contextType", AncestorContext);
+    const named = /* @__PURE__ */ new Map();
+    function getDC(name) {
+      const hit = named.get(name);
+      if (hit) return hit;
+      function Dispatcher(p) {
+        const [, setTick] = React.useState(0);
+        React.useEffect(() => {
+          const sub = () => setTick((n) => n + 1);
+          registry.get(name).subs.add(sub);
+          return () => {
+            registry.get(name).subs.delete(sub);
+          };
+        }, []);
+        ensureFetched(name);
+        return h(StreamableComponent, { ...p, __name: name });
+      }
+      Dispatcher.displayName = name;
+      named.set(name, Dispatcher);
+      return Dispatcher;
+    }
+    return {
+      getDC,
+      StreamableComponent
+    };
+  }
+
+  // src/external.ts
+  var isCustomElementName = (n) => !n.includes(".") && n.includes("-");
+  function isRenderableType(g) {
+    if (typeof g === "function") return !isElementClass(g);
+    return typeof g === "object" && g !== null && typeof g.$$typeof === "symbol";
+  }
+  function resolveDottedPath(root, name) {
+    let cur = root;
+    for (const seg of name.split(".")) {
+      if (cur == null) return void 0;
+      cur = cur[seg];
+    }
+    return cur;
+  }
+  var BABEL_URL = "https://unpkg.com/@babel/standalone@7.29.0/babel.min.js";
+  var BABEL_SRI = "sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y";
+  var GLOBAL_POLL_INTERVAL_MS = 50;
+  var GLOBAL_POLL_TIMEOUT_MS = 3e4;
+  function createExternalModules(onResolved) {
+    const cache = /* @__PURE__ */ new Map();
+    let babelLoading = null;
+    const reportedMissing = /* @__PURE__ */ new Map();
+    const polling = /* @__PURE__ */ new Set();
+    function ensureBabel() {
+      if (window.Babel) return Promise.resolve();
+      if (babelLoading) return babelLoading;
+      babelLoading = new Promise((res, rej) => {
+        const s = document.createElement("script");
+        s.src = BABEL_URL;
+        s.integrity = BABEL_SRI;
+        s.crossOrigin = "anonymous";
+        s.onload = () => res();
+        s.onerror = rej;
+        document.head.appendChild(s);
+      });
+      return babelLoading;
+    }
+    const pending = /* @__PURE__ */ new Map();
+    function load(kind, url, after) {
+      const existing = pending.get(url);
+      if (existing) return existing;
+      cache.set(url, null);
+      console.info("[dc-runtime] x-import: loading", url, "(" + kind + ")");
+      const ready = Promise.all([
+        kind === "jsx" ? ensureBabel() : Promise.resolve(),
+        after ?? Promise.resolve()
+      ]);
+      const p = ready.then(() => fetch(url)).then((r) => {
+        if (!r.ok) throw new Error("HTTP " + r.status);
+        return r.text();
+      }).then((src) => {
+        const code = kind === "jsx" ? window.Babel.transform(src, {
+          filename: url,
+          presets: ["react", "typescript"]
+        }).code : src;
+        const module = { exports: {} };
+        const before = new Set(Object.keys(window));
+        //! nosemgrep: eval-and-function-constructor
+        new Function("React", "module", "exports", "require", code)(
+          getReact(),
+          module,
+          module.exports,
+          () => ({})
+        );
+        const globals = {};
+        for (const k of Object.keys(window)) {
+          if (!before.has(k) && typeof window[k] === "function") {
+            globals[k] = window[k];
+          }
+        }
+        cache.set(url, { mod: module.exports, globals });
+        console.info(
+          "[dc-runtime] x-import: loaded",
+          url,
+          "\u2014 exports:",
+          Object.keys(module.exports),
+          "window globals:",
+          Object.keys(globals)
+        );
+        onResolved();
+      }).catch((e) => {
+        cache.set(url, {
+          mod: {},
+          globals: {},
+          error: "failed to load: " + (e instanceof Error && e.message ? e.message : String(e))
+        });
+        console.error(
+          "[dc-runtime] x-import: FAILED to load",
+          url,
+          "(" + kind + ")",
+          e
+        );
+        onResolved();
+      });
+      pending.set(url, p);
+      return p;
+    }
+    function resolve2(url, name) {
+      const entry = cache.get(url);
+      if (!entry) return null;
+      const { mod, globals } = entry;
+      const C = mod && mod[name] || globals && globals[name] || typeof window !== "undefined" && window[name] || mod && mod.default;
+      if (typeof C === "function") return C;
+      const key = url + "\0" + name;
+      if (!reportedMissing.has(key)) {
+        reportedMissing.set(
+          key,
+          entry.error || 'no export named "' + name + '" (has: ' + Object.keys(mod).join(", ") + ")"
+        );
+        console.error(
+          "[dc-runtime] x-import: module",
+          url,
+          "loaded but has no component named",
+          JSON.stringify(name),
+          "\u2014 available exports:",
+          Object.keys(mod),
+          "window globals:",
+          Object.keys(globals),
+          ". The module must `module.exports = {" + name + "}` or set `window." + name + "`."
+        );
+      }
+      return null;
+    }
+    function waitForGlobal(name) {
+      if (polling.has(name)) return;
+      polling.add(name);
+      const started = Date.now();
+      const isCE = isCustomElementName(name);
+      const tick = () => {
+        const found = isCE ? customElements.get(name) : isRenderableType(resolveDottedPath(window, name));
+        if (found) {
+          polling.delete(name);
+          onResolved();
+          return;
+        }
+        if (Date.now() - started >= GLOBAL_POLL_TIMEOUT_MS) {
+          console.warn(
+            "[dc-runtime] x-import: global",
+            JSON.stringify(name),
+            "never appeared on window after " + GLOBAL_POLL_TIMEOUT_MS + "ms"
+          );
+          return;
+        }
+        setTimeout(tick, GLOBAL_POLL_INTERVAL_MS);
+      };
+      setTimeout(tick, GLOBAL_POLL_INTERVAL_MS);
+    }
+    function resolveGlobal(url, name) {
+      const isCE = isCustomElementName(name);
+      if (!url) {
+        if (isCE) {
+          if (customElements.get(name)) return name;
+          waitForGlobal(name);
+          return null;
+        }
+        const g2 = resolveDottedPath(window, name);
+        if (isRenderableType(g2)) return g2;
+        waitForGlobal(name);
+        return null;
+      }
+      const entry = cache.get(url);
+      if (!entry) return null;
+      if (isCE && customElements.get(name)) return name;
+      const g = entry.globals[name] ?? resolveDottedPath(window, name);
+      if (isRenderableType(g)) return g;
+      if (name.includes(".")) return null;
+      const key = url + "\0global\0" + name;
+      if (!reportedMissing.has(key)) {
+        reportedMissing.set(key, null);
+        if (isCE && !customElements.get(name)) {
+          console.warn(
+            "[dc-runtime] x-import:",
+            url,
+            "loaded but no custom element",
+            JSON.stringify(name),
+            "is registered and window." + name + " is not a function \u2014 rendering <" + name + "> as an unknown element."
+          );
+        }
+      }
+      return name;
+    }
+    function getError(url, name) {
+      const entry = cache.get(url);
+      if (entry?.error) return entry.error;
+      return reportedMissing.get(url + "\0" + name) || null;
+    }
+    return { load, resolve: resolve2, resolveGlobal, getError };
+  }
+  function isElementClass(g) {
+    try {
+      return typeof g === "function" && typeof HTMLElement !== "undefined" && g.prototype instanceof HTMLElement;
+    } catch {
+      return false;
+    }
+  }
+
+  // src/atomics.ts
+  var ATOMIC_CSS = (
+    // layout
+    ".fx{display:flex}.col{display:flex;flex-direction:column}.grid{display:grid}.ac{align-items:center}.jc{justify-content:center}.jb{justify-content:space-between}.f1{flex:1}.noshrink{flex-shrink:0}.wrap{flex-wrap:wrap}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs20{font-size:20px}.fs22{font-size:22px}.upper{text-transform:uppercase}.tc{text-align:center}.nowrap{white-space:nowrap}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}.m0{margin:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.posrel{position:relative}.posabs{position:absolute}.round{border-radius:50%}.ohide{overflow:hidden}.bbox{box-sizing:border-box}.pointer{cursor:pointer}.w100{width:100%}.b0{border:none}"
+  );
+
+  // src/helmet.ts
+  var DESIGN_DOC_MODE_RE = /<meta\b[^>]*\bname\s*=\s*["']design_doc_mode["'][^>]*\b(?:content|value)\s*=\s*["'](\w+)["']/i;
+  var CANVAS_BG_LIGHT = "#f0eee6";
+  var CANVAS_BG_DARK = "#2e2c26";
+  function createHelmetManager(doc, isStreaming) {
+    const mounted = /* @__PURE__ */ new Set();
+    const live = /* @__PURE__ */ new Map();
+    let designDocMode = null;
+    let canvasStyleEl = null;
+    let appTheme = "light";
+    try {
+      const ds = doc.documentElement.dataset.theme;
+      appTheme = ds === "dark" || ds === "light" ? ds : new URLSearchParams(doc.defaultView?.location.search ?? "").get(
+        "theme"
+      ) === "dark" ? "dark" : "light";
+    } catch {
+    }
+    function applyCanvasBg() {
+      if (!canvasStyleEl) return;
+      const bg = appTheme === "dark" ? CANVAS_BG_DARK : CANVAS_BG_LIGHT;
+      canvasStyleEl.textContent = `html,body{background:${bg}}#dc-root>.sc-host{position:relative}`;
+    }
+    function postDesignMode(mode) {
+      if (window.parent === window) return;
+      try {
+        window.parent.postMessage({ type: "__dc_design_mode", mode }, "*");
+      } catch {
+      }
+    }
+    function setDesignDocMode(mode) {
+      if (mode === designDocMode) return;
+      designDocMode = mode;
+      postDesignMode(mode);
+      if (mode === "canvas") {
+        doc.documentElement.setAttribute("data-dc-canvas", "");
+        canvasStyleEl = doc.createElement("style");
+        canvasStyleEl.setAttribute("data-dc-canvas", "");
+        applyCanvasBg();
+        doc.head.appendChild(canvasStyleEl);
+      } else {
+        doc.documentElement.removeAttribute("data-dc-canvas");
+        canvasStyleEl?.remove();
+        canvasStyleEl = null;
+      }
+    }
+    window.addEventListener("message", (e) => {
+      const type = e.data && e.data.type;
+      if (type === "__dc_theme") {
+        const t = e.data.theme;
+        if (t === "light" || t === "dark") {
+          appTheme = t;
+          doc.documentElement.dataset.theme = t;
+          applyCanvasBg();
+        }
+        return;
+      }
+      if (!designDocMode || type !== "__dc_probe") return;
+      postDesignMode(designDocMode);
+    });
+    function compile(node) {
+      const raw = [...node.children];
+      const helmetClosed = node.nextSibling != null || node.parentNode?.nextSibling != null;
+      if (node.hasAttribute("data-dc-atomics") && !mounted.has("__dc-atomics")) {
+        mounted.add("__dc-atomics");
+        const el = doc.createElement("style");
+        el.id = "__dc-atomics";
+        el.textContent = ATOMIC_CSS;
+        doc.head.appendChild(el);
+      }
+      return (_vals, ctx) => {
+        const name = ctx && ctx.__name || "";
+        const streaming = !!(name && isStreaming(name));
+        for (let i = 0; i < raw.length; i++) {
+          const child = raw[i];
+          const tag = child.tagName;
+          const mayBePartial = streaming && !helmetClosed && i === raw.length - 1;
+          if (tag === "SCRIPT") {
+            if (mayBePartial) continue;
+            const key = "SCRIPT|" + (child.getAttribute("src") || child.textContent || "");
+            if (mounted.has(key)) continue;
+            mounted.add(key);
+            const el = doc.createElement("script");
+            for (const { name: an, value } of [...child.attributes])
+              el.setAttribute(an, value);
+            if (child.textContent) el.textContent = child.textContent;
+            doc.head.appendChild(el);
+          } else if (tag === "LINK" || tag === "META") {
+            if (mayBePartial) continue;
+            const key = tag + "|" + (child.getAttribute("href") || child.getAttribute("src") || child.outerHTML);
+            if (mounted.has(key)) continue;
+            mounted.add(key);
+            doc.head.appendChild(child.cloneNode(true));
+          } else {
+            const key = name + "|" + i;
+            let el = live.get(key);
+            if (!el || el.tagName !== tag) {
+              if (el) el.remove();
+              el = doc.createElement(tag.toLowerCase());
+              live.set(key, el);
+              doc.head.appendChild(el);
+            }
+            for (const { name: an, value } of [...child.attributes]) {
+              if (el.getAttribute(an) !== value) el.setAttribute(an, value);
+            }
+            if (el.textContent !== child.textContent)
+              el.textContent = child.textContent;
+          }
+        }
+        return null;
+      };
+    }
+    return { compile, setDesignDocMode };
+  }
+
+  // src/pseudo.ts
+  function createPseudoSheet(doc) {
+    let el = null;
+    const cache = /* @__PURE__ */ new Map();
+    let n = 0;
+    return (pseudo, css) => {
+      const k = pseudo + "|" + css;
+      const hit = cache.get(k);
+      if (hit) return hit;
+      if (!el) {
+        el = doc.createElement("style");
+        doc.head.appendChild(el);
+      }
+      const cls = "scp" + (n++).toString(36);
+      const sel = pseudo === "before" || pseudo === "after" ? "." + cls + "::" + pseudo : "." + cls + ":" + pseudo;
+      el.sheet.insertRule(sel + "{" + css + "}", el.sheet.cssRules.length);
+      cache.set(k, cls);
+      return cls;
+    };
+  }
+
+  // src/registry.ts
+  function createRegistry() {
+    const entries = /* @__PURE__ */ Object.create(null);
+    function get(name) {
+      return entries[name] || (entries[name] = {
+        html: "",
+        tpl: null,
+        Logic: null,
+        jsStreaming: false,
+        htmlStreaming: false,
+        ver: 0,
+        subs: /* @__PURE__ */ new Set(),
+        fetched: false
+      });
+    }
+    function bump(name) {
+      const r = get(name);
+      r.ver++;
+      for (const fn of r.subs) fn();
+    }
+    return {
+      entries,
+      get,
+      bump,
+      bumpAll() {
+        for (const n in entries) bump(n);
+      }
+    };
+  }
+
+  // src/runtime.ts
+  var COMPONENT_DIR = ".";
+  function createRuntime(doc = document) {
+    const registry = createRegistry();
+    const pseudoClass = createPseudoSheet(doc);
+    const helmet = createHelmetManager(
+      doc,
+      (name) => registry.get(name).htmlStreaming
+    );
+    const external = createExternalModules(() => registry.bumpAll());
+    const factory = createComponentFactory(registry, ensureFetched);
+    const host = {
+      component: (name) => factory.getDC(name),
+      placeholder: (props) => h(Placeholder, props),
+      helmet: (node) => helmet.compile(node),
+      loadExternal: (kind, url, after) => external.load(kind, url, after),
+      resolveExternal: (url, name) => external.resolve(url, name),
+      resolveExternalGlobal: (url, name) => external.resolveGlobal(url, name),
+      resolveExternalError: (url, name) => external.getError(url, name),
+      pseudoClass
+    };
+    function ensureFetched(name) {
+      const r = registry.get(name);
+      if (r.fetched) return;
+      r.fetched = true;
+      const url = COMPONENT_DIR + "/" + encodeURIComponent(name) + ".dc.html";
+      fetch(url).then((res) => {
+        if (!res.ok) {
+          console.error(
+            "[dc-runtime] sibling fetch for <" + name + "/> failed:",
+            url,
+            "returned",
+            res.status,
+            "\u2014 the reference renders as an empty placeholder."
+          );
+          return "";
+        }
+        return res.text();
+      }).then((t) => {
+        if (!t) return;
+        const parsed = parseDcText(t);
+        if (!parsed) {
+          console.error(
+            "[dc-runtime] sibling fetch for <" + name + "/>:",
+            url,
+            "has no <x-dc> block \u2014 not a Design Component."
+          );
+          return;
+        }
+        if (parsed.props) r.propsMeta = parsed.props;
+        if (parsed.preview) r.preview = parsed.preview;
+        if (parsed.template && !r.html) updateHtml(name, parsed.template);
+        if (parsed.js && !r.Logic) updateJs(name, parsed.js);
+      }).catch(
+        (e) => console.error(
+          "[dc-runtime] sibling fetch for <" + name + "/> threw:",
+          url,
+          e
+        )
+      );
+    }
+    let rootName = null;
+    function updateHtml(name, html) {
+      const r = registry.get(name);
+      r.html = html;
+      if (name === rootName) {
+        const mode = DESIGN_DOC_MODE_RE.exec(html)?.[1] ?? null;
+        if (mode || !r.htmlStreaming) helmet.setDesignDocMode(mode);
+      }
+      try {
+        r.tpl = compileTemplate(html, host);
+      } catch (e) {
+        console.error("[dc-runtime] template compile FAILED for", name, e);
+      }
+      registry.bump(name);
+    }
+    function updateJs(name, src) {
+      const r = registry.get(name);
+      const seq = r.jsSeq = (r.jsSeq || 0) + 1;
+      try {
+        const Cls = evalDcLogic(src);
+        if (r.jsSeq !== seq) return;
+        if (typeof Cls !== "function") {
+          r.logicError = name + ".dc.html: <script data-dc-script> must define `class Component extends DCLogic`";
+        } else {
+          r.logicError = null;
+          r.Logic = Cls;
+        }
+      } catch (e) {
+        if (r.jsSeq !== seq) return;
+        console.error(
+          "[dc-runtime] logic class eval FAILED for",
+          name,
+          "\u2014 the template renders with props only.",
+          e
+        );
+        r.logicError = name + ": " + (e instanceof Error && e.message ? e.message : String(e));
+      }
+      registry.bump(name);
+    }
+    function setStreaming(name, kind, on) {
+      const r = registry.get(name);
+      if (kind === "html") r.htmlStreaming = !!on;
+      else r.jsStreaming = !!on;
+      let any = false;
+      for (const n in registry.entries) {
+        const e = registry.entries[n];
+        if (e && (e.htmlStreaming || e.jsStreaming)) {
+          any = true;
+          break;
+        }
+      }
+      doc.documentElement.classList.toggle("sc-dc-streaming", any);
+      registry.bump(name);
+    }
+    function dcUpdate(name, kind, content, streaming) {
+      if (streaming) registry.get(name).fetched = true;
+      if (kind === "html") {
+        setStreaming(name, "html", !!streaming);
+        updateHtml(name, content);
+      } else if (kind === "js") {
+        setStreaming(name, "js", !!streaming);
+        if (!streaming) updateJs(name, content);
+      } else if (kind === "props") {
+        const { props, preview } = parseDataProps(content);
+        const r = registry.get(name);
+        r.propsMeta = props ?? void 0;
+        r.preview = preview;
+        registry.bump(name);
+      }
+    }
+    function setProps(name, overrides) {
+      registry.get(name).propOverrides = overrides && typeof overrides === "object" ? { ...overrides } : null;
+      registry.bump(name);
+    }
+    function adoptParsed(name, parsed) {
+      if (!parsed) return;
+      const r = registry.get(name);
+      if (parsed.props) r.propsMeta = parsed.props;
+      if (parsed.preview) r.preview = parsed.preview;
+      if (parsed.template) updateHtml(name, parsed.template);
+      if (parsed.js) updateJs(name, parsed.js);
+    }
+    return {
+      registry,
+      getDC: factory.getDC,
+      updateHtml,
+      updateJs,
+      dcUpdate,
+      setProps,
+      adoptParsed,
+      setRootName: (name) => {
+        rootName = name;
+      },
+      markFetched: (name) => {
+        registry.get(name).fetched = true;
+      },
+      annotatedTemplate: (name) => {
+        const r = registry.get(name);
+        return r.tpl && r.tpl.__annotated || null;
+      },
+      templateSource: (name) => registry.get(name).html || null,
+      StreamableLogic
+    };
+  }
+
+  // src/index.ts
+  var REACT_URL = "https://unpkg.com/react@18.3.1/umd/react.production.min.js";
+  var REACT_SRI = "sha384-DGyLxAyjq0f9SPpVevD6IgztCFlnMF6oW/XQGmfe+IsZ8TqEiDrcHkMLKI6fiB/Z";
+  var REACT_DOM_URL = "https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js";
+  var REACT_DOM_SRI = "sha384-gTGxhz21lVGYNMcdJOyq01Edg0jhn/c22nsx0kyqP0TxaV5WVdsSH1fSDUf5YJj1";
+  function hideRawTemplate() {
+    const s = document.createElement("style");
+    s.textContent = "x-dc{display:none!important}";
+    document.head.appendChild(s);
+  }
+  function loadScript(src, integrity) {
+    return new Promise((resolve2, reject) => {
+      //! nosemgrep: create-script-element
+      const s = document.createElement("script");
+      s.src = src;
+      s.integrity = integrity;
+      s.crossOrigin = "anonymous";
+      s.async = false;
+      s.onload = () => resolve2();
+      s.onerror = () => reject(new Error(`failed to load ${src}`));
+      document.head.appendChild(s);
+    });
+  }
+  function loadReactUmd() {
+    const w = window;
+    if (w.React && w.ReactDOM) return Promise.resolve();
+    return Promise.all([
+      loadScript(REACT_URL, REACT_SRI),
+      loadScript(REACT_DOM_URL, REACT_DOM_SRI)
+    ]).then(() => void 0);
+  }
+  function init() {
+    const runtime = createRuntime(document);
+    let rootName = "Root";
+    const baseCss = document.createElement("style");
+    baseCss.textContent = BASE_CSS;
+    document.head.prepend(baseCss);
+    const notifyHost = () => {
+      if (window.parent === window) return;
+      const r = runtime.registry.entries[rootName];
+      try {
+        window.parent.postMessage(
+          {
+            type: "__dc_booted",
+            rootName,
+            propsMeta: r && r.propsMeta || null,
+            preview: r && r.preview || null
+          },
+          "*"
+        );
+      } catch {
+      }
+    };
+    const api = {
+      __dcUpdate: (name, kind, content, streaming) => {
+        runtime.dcUpdate(name, kind, content, streaming);
+        if (name === rootName && !streaming && kind === "props") notifyHost();
+      },
+      __dcSetProps: (name, overrides) => runtime.setProps(name, overrides),
+      /** Name of the component currently mounted as the page root — DC tools
+       *  push their template-stream here when targeting "the open page". */
+      __dcRootName: () => rootName,
+      /** Editor bridge — the encoded, `data-dc-tpl`-annotated template source.
+       *  The host editor parses this into its own template DOM so it can map a
+       *  rendered node (carrying the same `data-dc-tpl`) back to the source
+       *  node that emitted it. Returns the encoded form (`<sc-comp>`,
+       *  `sc-camel-*` attrs); the editor decodes on serialize. */
+      __dcAnnotatedTemplate: (name) => runtime.annotatedTemplate(name),
+      /** Editor bridge — the *original* (decoded) template source. */
+      __dcTemplateSource: (name) => runtime.templateSource(name),
+      __dcBoot: () => {
+        rootName = boot(runtime, document) ?? rootName;
+        notifyHost();
+      },
+      __dcRegistry: runtime.registry.entries,
+      getDC: (name) => runtime.getDC(name),
+      // `DCLogic` is the documented base class name; `StreamableLogic` is the
+      // implementation alias kept for any project that already references it.
+      DCLogic: runtime.StreamableLogic,
+      StreamableLogic: runtime.StreamableLogic
+    };
+    Object.assign(window, api);
+    window.__dcContentKeyed = true;
+    if (document.readyState !== "loading") api.__dcBoot();
+    else document.addEventListener("DOMContentLoaded", () => api.__dcBoot());
+  }
+  hideRawTemplate();
+  loadReactUmd().then(init).catch((err) => {
+    console.error("[dc] failed to load React or boot:", err);
+    throw err;
+  });
+})();
diff --git a/design-system/templates/chicorytv-admin/.thumbnail b/design-system/templates/chicorytv-admin/.thumbnail
new file mode 100644
index 000000000..25e82a807
Binary files /dev/null and b/design-system/templates/chicorytv-admin/.thumbnail differ
diff --git a/design-system/templates/chicorytv-admin/ChannelBuilder.jsx b/design-system/templates/chicorytv-admin/ChannelBuilder.jsx
new file mode 100644
index 000000000..452c63399
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/ChannelBuilder.jsx
@@ -0,0 +1,619 @@
+// Channel Builder — GROUND-UP replacement for the four-editor create chain
+// (Channel -> Schedule -> Schedule Items -> Playout). One library-to-lineup screen.
+// Left: searchable library browser. Center: the channel lineup (add by double-click
+// or drag; drag to reorder). Right: friendly options + Channel Template + Advanced.
+// Behind the scenes "Create" builds Channel + Collection + Schedule + Items + Playout.
+(function () {
+  const NS = window.ChicoryTVDesignSystem_eb3b61;
+  const { Button, IconButton, Input, Select, Switch, Badge, ChannelLogo, Tooltip } = NS;
+  const Ico = window.Ico;
+  const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };
+  const eyebrow = { font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-sans)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-disabled)" };
+
+  // ---- Mock library (shows / movies / music / docs across libraries) --------
+  const LIB = [
+    { id: "s1", title: "Looney Tunes", type: "Show",  library: "Cartoons",       sub: "247 shorts",     min: 96 },
+    { id: "s2", title: "Tom & Jerry", type: "Show",   library: "Cartoons",       sub: "164 shorts",     min: 72 },
+    { id: "s3", title: "Popeye",       type: "Show",  library: "Cartoons",       sub: "108 shorts",     min: 54 },
+    { id: "s4", title: "The Flintstones", type: "Show", library: "Cartoons",     sub: "166 episodes",   min: 84 },
+    { id: "s5", title: "Scooby-Doo",   type: "Show",  library: "Cartoons",       sub: "97 episodes",    min: 60 },
+    { id: "s6", title: "Pink Panther", type: "Show",  library: "Cartoons",       sub: "124 shorts",     min: 48 },
+    { id: "m1", title: "Blade Runner", type: "Movie", library: "Movies",         sub: "1982 · Sci-Fi",  min: 117 },
+    { id: "m2", title: "Alien",        type: "Movie", library: "Movies",         sub: "1979 · Horror",  min: 117 },
+    { id: "m3", title: "The Thing",    type: "Movie", library: "Movies",         sub: "1982 · Horror",  min: 109 },
+    { id: "m4", title: "Metropolis",   type: "Movie", library: "Movies",         sub: "1927 · Sci-Fi",  min: 153 },
+    { id: "m5", title: "Nosferatu",    type: "Movie", library: "Movies",         sub: "1922 · Horror",  min: 94 },
+    { id: "t1", title: "The Twilight Zone", type: "Show", library: "TV Shows",   sub: "156 episodes",   min: 51 },
+    { id: "t2", title: "Star Trek",    type: "Show",  library: "TV Shows",       sub: "79 episodes",    min: 50 },
+    { id: "t3", title: "Columbo",      type: "Show",  library: "TV Shows",       sub: "69 episodes",    min: 94 },
+    { id: "t4", title: "Cheers",       type: "Show",  library: "TV Shows",       sub: "275 episodes",   min: 24 },
+    { id: "u1", title: "80s Synthpop", type: "Music", library: "Music Videos",   sub: "212 videos",     min: 45 },
+    { id: "u2", title: "90s Alt Rock", type: "Music", library: "Music Videos",   sub: "188 videos",     min: 45 },
+    { id: "u3", title: "Chart Countdown", type: "Music", library: "Music Videos", sub: "Top 40",        min: 60 },
+    { id: "d1", title: "Blue Planet",  type: "Doc",   library: "Documentaries",  sub: "8 episodes",     min: 50 },
+    { id: "d2", title: "Planet Earth", type: "Doc",   library: "Documentaries",  sub: "11 episodes",    min: 50 },
+    { id: "d3", title: "Cosmos",       type: "Doc",   library: "Documentaries",  sub: "13 episodes",    min: 60 },
+  ];
+  const LIBRARIES = ["All", "Cartoons", "Movies", "TV Shows", "Music Videos", "Documentaries"];
+  const TYPE_ICON = { Show: "Tv", Movie: "Film", Music: "Music", Doc: "Radio", Multi: "Layers", Smart: "Sparkles", Manual: "FolderTree", Rerun: "Repeat" };
+
+  // Collections — curated groups (Manual / Smart / Multi / Rerun) addable as a
+  // single lineup entry, so the builder isn't limited to raw library items.
+  const COLLECTIONS = [
+    { id: "c1", title: "Prime Time Cartoons", type: "Multi",  library: "Collection", sub: "Multi · 62 items",    min: 180, coll: true },
+    { id: "c2", title: "Classic Sci-Fi",      type: "Smart",  library: "Collection", sub: "Smart · rating \u2265 8", min: 240, coll: true },
+    { id: "c3", title: "Retro Station IDs",   type: "Manual", library: "Collection", sub: "Manual · 24 items",   min: 12,  coll: true },
+    { id: "c4", title: "Saturday Morning",    type: "Rerun",  library: "Collection", sub: "Rerun block · weekly",min: 120, coll: true },
+    { id: "c5", title: "Halloween Marathon",  type: "Manual", library: "Collection", sub: "Manual · 9 films",    min: 900, coll: true },
+  ];
+
+  // Channel Templates — bundle the clunky technical config; one is pre-selected.
+  const TEMPLATES = [
+    { id: "std",   name: "Standard",     builtin: true,  desc: "General-purpose 1080p H.264, retro bumpers.", shuffle: false, always: true,
+      sets: ["1080p H.264", "HLS Segmenter", "Sequential", "Always on", "Pre + post filler"] },
+    { id: "music", name: "Music videos", builtin: true,  desc: "Continuous rotation, no fillers, direct stream.", shuffle: true, always: true,
+      sets: ["720p H.264", "HLS Direct", "Shuffle", "Always on", "No filler"] },
+    { id: "film",  name: "Movie night",  builtin: true,  desc: "Film-grain HEVC, mid-roll ad breaks.", shuffle: false, always: false,
+      sets: ["1080p HEVC", "MPEG-TS", "Sequential", "On-demand", "Mid-roll ads"] },
+    { id: "retro", name: "Retro Saturday AM", builtin: false, desc: "Your saved cartoon-block template.", shuffle: true, always: true,
+      sets: ["1080p H.264", "HLS Segmenter", "Shuffle", "Always on", "Bumpers + ads"] },
+  ];
+
+  // Advanced (~30-field) override set, grouped. Values shown as template-inherited.
+  const ADV = [
+    { group: "Streaming", fields: [
+      ["Streaming mode", "HLS Segmenter"], ["FFmpeg profile", "1080p H.264"], ["Resolution", "1920×1080"],
+      ["Video bitrate", "8000 kbps"], ["Audio bitrate", "192 kbps"], ["Buffer size", "16000 kb"],
+    ]},
+    { group: "Filler", fields: [
+      ["Pre-roll", "Retro Bumpers"], ["Mid-roll", "Ad Break"], ["Post-roll", "Outro"],
+      ["Tail filler", "None"], ["Fallback", "Test Pattern"], ["Filler kind", "Pad to :00"],
+    ]},
+    { group: "Playback", fields: [
+      ["Interleave", "On"], ["Keep multi-part together", "On"], ["Watermark", "Channel logo"],
+      ["Subtitle mode", "Any"], ["Preferred audio", "English"], ["Preferred subtitle", "None"],
+    ]},
+    { group: "Behavior", fields: [
+      ["Guide mode default", "Normal"], ["Song video mode", "Off"], ["On-demand", "Off"],
+      ["Idle behavior", "Offline image"], ["Transcode audio", "Normalize"], ["Number scheme", "Auto"],
+    ]},
+  ];
+
+  // deterministic low-chroma poster hue from a title
+  function hueOf(s) { let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 360; return h; }
+
+  function fmtDur(totalMin) {
+    const h = Math.floor(totalMin / 60), m = totalMin % 60;
+    if (h && m) return h + "h " + String(m).padStart(2, "0") + "m";
+    if (h) return h + "h";
+    return m + "m";
+  }
+
+  // ---- Overlay scroll region — hides native bar (no reflow when it appears),
+  //      shows a subtle thumb only while scrolling, fading out when idle. ------
+  function ScrollArea({ children, innerStyle, scrollerRef }) {
+    const local = React.useRef(null);
+    const timer = React.useRef(null);
+    const [thumb, setThumb] = React.useState(null);
+    const setRef = (n) => { local.current = n; if (scrollerRef) scrollerRef.current = n; };
+    const update = () => {
+      const el = local.current; if (!el) return;
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      if (scrollHeight <= clientHeight + 2) { setThumb(null); return; }
+      const track = clientHeight - 8;
+      const h = Math.max(28, track * clientHeight / scrollHeight);
+      const top = 4 + (track - h) * (scrollTop / (scrollHeight - clientHeight));
+      setThumb({ top, h });
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setThumb((t) => (t ? { ...t, hidden: true } : null)), 850);
+    };
+    React.useEffect(() => { const id = setTimeout(update, 60); return () => { clearTimeout(id); clearTimeout(timer.current); }; }, []);
+    return (
+      <div style={{ position: "relative", flex: 1, minHeight: 0, minWidth: 0 }}>
+        <div ref={setRef} onScroll={update} className="ctv-hide-sb"
+          style={{ height: "100%", overflowY: "auto", overflowX: "hidden", scrollbarWidth: "none", scrollBehavior: "smooth", ...innerStyle }}>
+          {children}
+        </div>
+        {thumb && (
+          <div style={{ position: "absolute", top: thumb.top, right: 2, width: 4, height: thumb.h, borderRadius: 3,
+            background: "var(--text-secondary)", opacity: thumb.hidden ? 0 : 0.5,
+            transition: "opacity 260ms var(--ease-standard, ease)", pointerEvents: "none" }} />
+        )}
+      </div>
+    );
+  }
+
+  // ---- Segmented control — iOS-style sliding active highlight ---------------
+  function Segmented({ value, options, onChange, style }) {
+    const idx = Math.max(0, options.findIndex((o) => o.value === value));
+    return (
+      <div style={{ position: "relative", display: "grid", gridAutoFlow: "column", gridAutoColumns: "1fr", padding: 2, borderRadius: "var(--radius-sm)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)", ...style }}>
+        <div style={{ position: "absolute", top: 2, bottom: 2, left: 2, width: `calc((100% - 4px) / ${options.length})`, transform: `translateX(${idx * 100}%)`, background: "var(--ctv-surface-3)", borderRadius: "var(--radius-xs)", boxShadow: "var(--shadow-sm)", transition: "transform 300ms cubic-bezier(0.16,1,0.3,1)", pointerEvents: "none" }} />
+        {options.map((o) => {
+          const on = o.value === value;
+          return (
+            <button key={o.value} type="button" title={o.title || o.label} onClick={() => onChange(o.value)}
+              style={{ position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, padding: "5px 10px", border: "none", background: "transparent", cursor: "pointer",
+                color: on ? "var(--text-primary)" : "var(--text-secondary)", transition: "color 220ms cubic-bezier(0.16,1,0.3,1)", font: "var(--weight-medium) var(--text-2xs)/1 var(--font-sans)" }}>
+              {o.icon && <Ico n={o.icon} s={13} />}{o.label}
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // ---- Poster placeholder (striped, tinted, mono meta) ----------------------
+  function Poster({ item, w, h, mini }) {
+    const hue = hueOf(item.title);
+    return (
+      <div style={{
+        position: "relative", width: w, height: h, flex: "0 0 auto", overflow: "hidden",
+        borderRadius: "var(--radius-sm)", border: "1px solid var(--border-hairline)",
+        background: `linear-gradient(160deg, hsl(${hue} 24% 17%), hsl(${hue} 26% 12%))`,
+      }}>
+        <div style={{ position: "absolute", inset: 0, backgroundImage: `repeating-linear-gradient(135deg, hsl(${hue} 22% 10% / .55) 0 1px, transparent 1px 9px)` }} />
+        <div style={{ position: "absolute", top: mini ? 4 : 7, left: mini ? 4 : 7, display: "inline-flex", color: `hsl(${hue} 30% 68%)` }}>
+          <Ico n={TYPE_ICON[item.type] || "Film"} s={mini ? 12 : 15} />
+        </div>
+        {!mini && (
+          <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "18px 8px 8px", background: "linear-gradient(to top, rgba(11,13,17,.92), transparent)" }}>
+            <div style={{ font: "var(--weight-semibold) var(--text-xs)/1.15 var(--font-sans)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.title}</div>
+            <div style={{ marginTop: 3, ...mono, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-secondary)" }}>{item.sub}</div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // ---- Library card ----------------------------------------------------------
+  function LibCard({ item, added, compact, onAdd, onDragStart, onDragEnd }) {
+    if (compact) {
+      return (
+        <div draggable onDragStart={onDragStart} onDragEnd={onDragEnd} onDoubleClick={onAdd} title="Double-click or drag to add" className="ctv-press"
+          style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 8px", borderRadius: "var(--radius-sm)", cursor: "grab",
+            background: added ? "color-mix(in srgb, var(--action-primary) 14%, transparent)" : "var(--surface-card)", border: `1px solid ${added ? "color-mix(in srgb, var(--action-primary) 35%, transparent)" : "var(--border-hairline)"}` }}>
+          <Poster item={item} w={30} h={40} mini />
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ font: "var(--weight-medium) var(--text-xs)/1.15 var(--font-sans)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.title}</div>
+            <div style={{ marginTop: 2, font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>{item.type} · <span style={mono}>{item.sub}</span></div>
+          </div>
+          <IconButton size="sm" title={added ? "Added" : "Add to lineup"} onClick={onAdd}>
+            <Ico n={added ? "Check" : "Plus"} s={15} color={added ? "var(--action-primary)" : undefined} />
+          </IconButton>
+        </div>
+      );
+    }
+    return (
+      <div draggable onDragStart={onDragStart} onDragEnd={onDragEnd} onDoubleClick={onAdd} title="Double-click or drag to add" className="ctv-lift"
+        style={{ position: "relative", cursor: "grab" }}>
+        <div style={{ position: "relative", borderRadius: "var(--radius-sm)", boxShadow: added ? "0 0 0 2px var(--action-primary)" : "none" }}>
+          <Poster item={item} w="100%" h={150} />
+          {added && (
+            <div style={{ position: "absolute", top: 6, right: 6, width: 22, height: 22, borderRadius: "50%", background: "var(--action-primary)", color: "var(--text-on-accent)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--shadow-sm)", animation: "ctv-pop 260ms cubic-bezier(0.16,1,0.3,1)" }}>
+              <Ico n="Check" s={14} />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // ---- Lineup row ------------------------------------------------------------
+  function LineupRow({ item, index, shuffle, dragging, isOver, onRemove, dragProps }) {
+    return (
+      <div {...dragProps} className="ctv-lift"
+        style={{ display: "flex", alignItems: "center", gap: 11, padding: "9px 10px", borderRadius: "var(--radius-md)",
+          background: "var(--surface-card)", border: "1px solid var(--border-hairline)",
+          boxShadow: isOver ? "0 -2px 0 var(--action-primary)" : "none", opacity: dragging ? 0.35 : 1,
+          transition: "opacity var(--dur-fast)" }}>
+        <span style={{ display: "inline-flex", cursor: "grab", color: "var(--text-faint)", flex: "0 0 auto" }} title="Drag to reorder"><Ico n="GripVertical" s={16} /></span>
+        <span style={{ width: 22, flex: "0 0 auto", textAlign: "center" }}>
+          {shuffle
+            ? <Ico n="Shuffle" s={13} color="var(--text-disabled)" />
+            : <span style={{ ...mono, font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)", color: "var(--text-secondary)" }}>{index + 1}</span>}
+        </span>
+        <Poster item={item} w={34} h={46} mini />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ font: "var(--weight-semibold) var(--text-sm)/1.2 var(--font-sans)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.title}</div>
+          <div style={{ marginTop: 2, font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>{item.type} · {item.library}</div>
+        </div>
+        <span style={{ ...mono, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-disabled)", flex: "0 0 auto" }}>{fmtDur(item.min)}</span>
+        <IconButton size="sm" title="Remove" onClick={onRemove}><Ico n="X" s={15} /></IconButton>
+      </div>
+    );
+  }
+
+  // ---- Channel image dropzone + live logo/bug preview -----------------------
+  function ImagePanel({ logoSrc, setLogoSrc, name }) {
+    const [sep, setSep] = React.useState(false);
+    const [over, setOver] = React.useState(false);
+    const fileRef = React.useRef(null);
+    const read = (file) => { if (!file) return; const r = new FileReader(); r.onload = () => setLogoSrc(r.result); r.readAsDataURL(file); };
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+        <div
+          onDragOver={(e) => { e.preventDefault(); setOver(true); }}
+          onDragLeave={() => setOver(false)}
+          onDrop={(e) => { e.preventDefault(); setOver(false); read(e.dataTransfer.files && e.dataTransfer.files[0]); }}
+          onClick={() => fileRef.current && fileRef.current.click()}
+          style={{ display: "flex", gap: 12, padding: 12, borderRadius: "var(--radius-sm)", cursor: "pointer",
+            background: "var(--ctv-bg-sunken)", border: `1px dashed ${over ? "var(--ctv-accent)" : "var(--border-control)"}` }}>
+          <ChannelLogo name={name || "New Channel"} src={logoSrc} size={52} radius="var(--radius-sm)" />
+          <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", justifyContent: "center", gap: 3 }}>
+            <div style={{ font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", color: "var(--text-primary)" }}>{logoSrc ? "Channel image set" : "Drop channel image"}</div>
+            <div style={{ font: "var(--text-2xs)/1.35 var(--font-sans)", color: "var(--text-secondary)" }}>Used as both the guide logo and the on-screen bug.</div>
+          </div>
+          <input ref={fileRef} type="file" accept="image/*" style={{ display: "none" }} onChange={(e) => read(e.target.files && e.target.files[0])} />
+        </div>
+
+        {/* live preview: listing logo + on-screen bug */}
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
+          <div style={{ padding: 10, borderRadius: "var(--radius-sm)", background: "var(--surface-card)", border: "1px solid var(--border-hairline)" }}>
+            <div style={{ ...eyebrow, marginBottom: 8 }}>Guide logo</div>
+            <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
+              <ChannelLogo name={name || "New Channel"} src={logoSrc} size={30} radius="var(--radius-xs)" />
+              <div style={{ minWidth: 0 }}>
+                <div style={{ font: "var(--weight-medium) var(--text-2xs)/1.1 var(--font-sans)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{name || "New Channel"}</div>
+                <div style={{ ...mono, font: "9px/1 var(--font-mono)", color: "var(--text-disabled)" }}>listing</div>
+              </div>
+            </div>
+          </div>
+          <div style={{ padding: 10, borderRadius: "var(--radius-sm)", background: "var(--surface-card)", border: "1px solid var(--border-hairline)" }}>
+            <div style={{ ...eyebrow, marginBottom: 8 }}>On-screen bug</div>
+            <div style={{ position: "relative", height: 42, borderRadius: "var(--radius-xs)", overflow: "hidden", background: "linear-gradient(160deg,#1a1d24,#0e1014)", backgroundImage: "repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px)" }}>
+              <div style={{ position: "absolute", bottom: 5, right: 5, opacity: 0.9 }}>
+                <ChannelLogo name={name || "New Channel"} src={logoSrc} size={22} radius="3px" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button type="button" onClick={() => setSep((s) => !s)}
+          style={{ alignSelf: "flex-start", display: "inline-flex", alignItems: "center", gap: 5, background: "none", border: "none", cursor: "pointer", padding: "2px 0", font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>
+          <Ico n={sep ? "ChevronDown" : "ChevronRight"} s={13} />Set logo & bug separately
+        </button>
+        {sep && (
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, padding: 10, borderRadius: "var(--radius-sm)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)" }}>
+            <Button size="sm" variant="secondary" startIcon={<Ico n="Image" s={14} />} onClick={() => fileRef.current && fileRef.current.click()}>Logo image</Button>
+            <Button size="sm" variant="secondary" startIcon={<Ico n="Image" s={14} />} onClick={() => fileRef.current && fileRef.current.click()}>Bug image</Button>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // ---- Advanced disclosure — one-click Override (edit) or View defaults ------
+  function Advanced({ templateName, scrollerRef }) {
+    const [mode, setMode] = React.useState("closed"); // closed | view | override
+    const [vals, setVals] = React.useState(() => { const o = {}; ADV.forEach((g) => g.fields.forEach(([k, v]) => { o[k] = v; })); return o; });
+    const override = mode === "override";
+    const count = ADV.reduce((n, g) => n + g.fields.length, 0);
+    const fieldsRef = React.useRef(null);
+    const rootRef = React.useRef(null);
+    const [maxH, setMaxH] = React.useState(0);
+    React.useLayoutEffect(() => {
+      if (mode === "closed") setMaxH(0);
+      else if (fieldsRef.current) setMaxH(fieldsRef.current.scrollHeight);
+    }, [mode]);
+    const toggle = (m) => {
+      const next = mode === m ? "closed" : m;
+      setMode(next);
+      if (next !== "closed" && scrollerRef && scrollerRef.current && rootRef.current) {
+        const sc = scrollerRef.current;
+        requestAnimationFrame(() => {
+          const target = sc.scrollTop + rootRef.current.getBoundingClientRect().top - sc.getBoundingClientRect().top - 20;
+          sc.scrollTo({ top: Math.max(0, target), behavior: "smooth" });
+        });
+      }
+    };
+    const tabBtn = (active) => ({
+      display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6, padding: "8px 10px",
+      borderRadius: "var(--radius-sm)", cursor: "pointer", font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)",
+      background: active ? "color-mix(in srgb, var(--action-primary) 14%, transparent)" : "var(--ctv-surface-2)",
+      color: active ? "var(--action-primary)" : "var(--text-secondary)",
+      border: `1px solid ${active ? "color-mix(in srgb, var(--action-primary) 38%, transparent)" : "var(--border-hairline)"}`,
+      transition: "background 200ms cubic-bezier(0.16,1,0.3,1), color 200ms cubic-bezier(0.16,1,0.3,1), border-color 200ms cubic-bezier(0.16,1,0.3,1)",
+    });
+    return (
+      <div ref={rootRef} style={{ borderTop: "1px solid var(--border-hairline)", paddingTop: 14 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 10 }}>
+          <Ico n="SlidersHorizontal" s={16} color="var(--text-secondary)" />
+          <span style={{ font: "var(--weight-medium) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}>Advanced</span>
+          <span style={{ flex: 1 }} />
+          <span style={{ ...mono, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-disabled)" }}>{count} fields · {templateName}</span>
+        </div>
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
+          <button type="button" onClick={() => toggle("override")} style={tabBtn(override)}>
+            <Ico n="SquarePen" s={14} />{override ? "Overriding" : "Override settings"}
+          </button>
+          <button type="button" onClick={() => toggle("view")} style={tabBtn(mode === "view")}>
+            <Ico n="Eye" s={14} />View defaults
+          </button>
+        </div>
+        <div style={{ overflow: "hidden", maxHeight: maxH, transition: "max-height 340ms cubic-bezier(0.16,1,0.3,1)" }}>
+          <div ref={fieldsRef} style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 14 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 8, font: "var(--text-2xs)/1.35 var(--font-sans)", color: "var(--text-secondary)" }}>
+              <Ico n="Info" s={13} color={override ? "var(--action-primary)" : "var(--text-disabled)"} />
+              {override ? "Editing these overrides the template for this channel only." : `Read-only — inherited from the ${templateName} template. Turn on Override to edit.`}
+            </div>
+            {ADV.map((g) => (
+              <div key={g.group}>
+                <div style={{ ...eyebrow, marginBottom: 8 }}>{g.group}</div>
+                {override ? (
+                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
+                    {g.fields.map(([k]) => (
+                      <Input key={k} size="sm" label={k} value={vals[k]} onChange={(e) => setVals((s) => ({ ...s, [k]: e.target.value }))} />
+                    ))}
+                  </div>
+                ) : (
+                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
+                    {g.fields.map(([k, v]) => (
+                      <div key={k} style={{ padding: "7px 9px", borderRadius: "var(--radius-xs)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)", opacity: 0.72 }}>
+                        <div style={{ font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)" }}>{k}</div>
+                        <div style={{ marginTop: 3, font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", color: "var(--text-primary)", ...(/\d/.test(v) ? mono : {}) }}>{v}</div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // ---- Main ------------------------------------------------------------------
+  function ChannelBuilder() {
+    const [q, setQ] = React.useState("");
+    const [libFilter, setLibFilter] = React.useState("All");
+    const [compact, setCompact] = React.useState(false);
+    const [lineup, setLineup] = React.useState(() => ["s1", "s2", "s3", "s4"].map((id) => LIB.find((x) => x.id === id)));
+    const [name, setName] = React.useState("Retro Cartoons");
+    const [number, setNumber] = React.useState("13.1");
+    const [shuffle, setShuffle] = React.useState(false);
+    const [always, setAlways] = React.useState(true);
+    const [logoSrc, setLogoSrc] = React.useState(null);
+    const [tpl, setTpl] = React.useState("std");
+    const [tplOpen, setTplOpen] = React.useState(false);
+    const [source, setSource] = React.useState("library"); // library | collections
+
+    // drag state
+    const [dragLib, setDragLib] = React.useState(null);   // library item id being dragged
+    const [dragRow, setDragRow] = React.useState(null);   // lineup index being dragged
+    const [overRow, setOverRow] = React.useState(null);
+    const railScrollerRef = React.useRef(null);
+
+    const addedIds = new Set(lineup.map((i) => i.id));
+    const pool = source === "collections" ? COLLECTIONS : LIB;
+    const filtered = pool.filter((i) =>
+      (source === "collections" || libFilter === "All" || i.library === libFilter) &&
+      (!q || i.title.toLowerCase().includes(q.toLowerCase())));
+
+    const add = (item) => setLineup((l) => (l.some((x) => x.id === item.id) ? l : [...l, item]));
+    const removeAt = (idx) => setLineup((l) => l.filter((_, i) => i !== idx));
+    const totalMin = lineup.reduce((n, i) => n + i.min, 0);
+    const template = TEMPLATES.find((t) => t.id === tpl);
+    const canCreate = name.trim() && lineup.length > 0;
+
+    // reorder / insert on drop at target index
+    const dropAt = (targetIdx) => {
+      if (dragRow != null) {
+        setLineup((l) => { const n = l.slice(); const [m] = n.splice(dragRow, 1); n.splice(targetIdx, 0, m); return n; });
+      } else if (dragLib != null) {
+        const item = [...LIB, ...COLLECTIONS].find((x) => x.id === dragLib);
+        if (item && !addedIds.has(item.id)) setLineup((l) => { const n = l.slice(); n.splice(targetIdx, 0, item); return n; });
+      }
+      setDragLib(null); setDragRow(null); setOverRow(null);
+    };
+    const dropEnd = () => {
+      if (dragLib != null) { const item = [...LIB, ...COLLECTIONS].find((x) => x.id === dragLib); if (item) add(item); }
+      setDragLib(null); setDragRow(null); setOverRow(null);
+    };
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        {/* builder toolbar */}
+        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderBottom: "1px solid var(--border-hairline)", flex: "0 0 auto" }}>
+          <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 34, height: 34, borderRadius: "var(--radius-sm)", background: "var(--ctv-accent-soft)", color: "var(--ctv-accent)", flex: "0 0 auto" }}><Ico n="Plus" s={19} /></span>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ font: "var(--weight-semibold) var(--text-md)/1 var(--font-sans)", color: "var(--text-primary)" }}>New Channel</div>
+            <div style={{ marginTop: 3, font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>Build from your library — <span style={mono}>{lineup.length}</span> in lineup · <span style={mono}>{fmtDur(totalMin)}</span></div>
+          </div>
+          <Button variant="ghost">Cancel</Button>
+          <Tooltip placement="bottom" label={canCreate ? "Creates the channel, schedule & playout" : "Name the channel and add at least one item"}>
+            <Button variant="primary" disabled={!canCreate} startIcon={<Ico n="Check" s={15} />}>Create Channel</Button>
+          </Tooltip>
+        </div>
+
+        {/* body — library | lineup | settings */}
+        <div style={{ flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: "minmax(0,1.2fr) minmax(0,1fr) 304px", gap: 0 }}>
+          {/* LEFT — library browser */}
+          <section style={{ display: "flex", flexDirection: "column", minHeight: 0, minWidth: 0, overflow: "hidden", borderRight: "1px solid var(--border-hairline)" }}>
+            <div style={{ padding: "14px 16px 10px", display: "flex", flexDirection: "column", gap: 10 }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", rowGap: 8 }}>
+                <Segmented value={source} onChange={setSource} options={[{ value: "library", label: "Library", icon: "Library" }, { value: "collections", label: "Collections", icon: "FolderTree" }]} />
+                <span style={{ flex: 1 }} />
+                <Segmented value={compact ? "list" : "grid"} onChange={(v) => setCompact(v === "list")} options={[{ value: "grid", icon: "LayoutGrid", title: "Poster grid" }, { value: "list", icon: "Rows3", title: "Compact list" }]} />
+              </div>
+              <Input size="sm" value={q} onChange={(e) => setQ(e.target.value)} leadingIcon={<Ico n="Search" s={15} />} placeholder={source === "collections" ? "Search collections\u2026" : "Search shows & movies\u2026"} />
+              {source === "library" && (
+                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+                  {LIBRARIES.map((l) => {
+                    const on = libFilter === l;
+                    return (
+                      <button key={l} type="button" onClick={() => setLibFilter(l)} className="ctv-press"
+                        style={{ padding: "4px 10px", borderRadius: "var(--radius-pill)", cursor: "pointer",
+                          font: "var(--weight-medium) var(--text-2xs)/1.4 var(--font-sans)",
+                          background: on ? "var(--ctv-accent-soft)" : "var(--ctv-surface-2)",
+                          color: on ? "var(--ctv-accent)" : "var(--text-secondary)",
+                          border: `1px solid ${on ? "rgba(224,138,60,.35)" : "var(--border-hairline)"}` }}>{l}</button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+            <ScrollArea innerStyle={{ padding: "4px 16px 16px" }}>
+              {filtered.length === 0 ? (
+                <div style={{ padding: "40px 0", textAlign: "center", font: "var(--text-xs)/1.5 var(--font-sans)", color: "var(--text-disabled)" }}>No titles match.</div>
+              ) : compact ? (
+                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                  {filtered.map((item) => (
+                    <LibCard key={item.id} item={item} compact added={addedIds.has(item.id)} onAdd={() => add(item)}
+                      onDragStart={() => setDragLib(item.id)} onDragEnd={dropEnd} />
+                  ))}
+                </div>
+              ) : (
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(104px,1fr))", gap: 10 }}>
+                  {filtered.map((item) => (
+                    <LibCard key={item.id} item={item} added={addedIds.has(item.id)} onAdd={() => add(item)}
+                      onDragStart={() => setDragLib(item.id)} onDragEnd={dropEnd} />
+                  ))}
+                </div>
+              )}
+            </ScrollArea>
+          </section>
+
+          {/* CENTER — lineup */}
+          <section style={{ display: "flex", flexDirection: "column", minHeight: 0, minWidth: 0, overflow: "hidden", borderRight: "1px solid var(--border-hairline)" }}
+            onDragOver={(e) => { if (dragLib != null) e.preventDefault(); }}
+            onDrop={() => { if (dragLib != null) dropEnd(); }}>
+            <div style={{ padding: "14px 16px 10px", display: "flex", alignItems: "center", gap: 10 }}>
+              <span style={eyebrow}>Lineup</span>
+              <Badge tone={shuffle ? "accent" : "neutral"}><span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><Ico n={shuffle ? "Shuffle" : "ListOrdered"} s={11} />{shuffle ? "Shuffled" : "Sequential"}</span></Badge>
+              <span style={{ flex: 1 }} />
+              {lineup.length > 0 && <button type="button" onClick={() => setLineup([])} style={{ background: "none", border: "none", cursor: "pointer", font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>Clear</button>}
+            </div>
+            <ScrollArea innerStyle={{ padding: "4px 16px 16px" }}>
+              {lineup.length === 0 ? (
+                <div style={{ height: "100%", minHeight: 220, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, textAlign: "center",
+                  border: `1px dashed ${dragLib != null ? "var(--ctv-accent)" : "var(--border-control)"}`, borderRadius: "var(--radius-md)",
+                  background: dragLib != null ? "var(--ctv-accent-soft)" : "transparent", color: "var(--text-disabled)", padding: 24 }}>
+                  <Ico n="ListVideo" s={26} />
+                  <div style={{ font: "var(--text-sm)/1.5 var(--font-sans)", maxWidth: 240 }}>This channel has no content yet. Double-click or drag titles from the library to build the lineup.</div>
+                </div>
+              ) : (
+                <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
+                  {lineup.map((item, idx) => (
+                    <LineupRow key={item.id + "-" + idx} item={item} index={idx} shuffle={shuffle}
+                      dragging={dragRow === idx} isOver={overRow === idx && (dragRow !== idx)}
+                      onRemove={() => removeAt(idx)}
+                      dragProps={{
+                        draggable: true,
+                        onDragStart: () => setDragRow(idx),
+                        onDragEnd: () => { setDragRow(null); setOverRow(null); },
+                        onDragOver: (e) => { e.preventDefault(); setOverRow(idx); },
+                        onDrop: (e) => { e.stopPropagation(); dropAt(idx); },
+                      }} />
+                  ))}
+                  <div style={{ marginTop: 4, padding: "10px 12px", borderRadius: "var(--radius-md)", border: "1px dashed var(--border-hairline)", display: "flex", alignItems: "center", gap: 8, color: "var(--text-disabled)", font: "var(--text-2xs)/1 var(--font-sans)" }}>
+                    <Ico n="Plus" s={14} />Double-click or drag more titles to add
+                  </div>
+                </div>
+              )}
+            </ScrollArea>
+          </section>
+
+          {/* RIGHT — friendly options + template + advanced */}
+          <aside style={{ position: "relative", minWidth: 0, overflow: "hidden", display: "flex", flexDirection: "column", background: "var(--surface-card)" }}>
+            <ScrollArea scrollerRef={railScrollerRef} innerStyle={{ padding: "14px 16px 24px", display: "flex", flexDirection: "column", gap: 16 }}>
+            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+              <Input label="Channel name" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Retro Cartoons" />
+              <Input label="Number" value={number} onChange={(e) => setNumber(e.target.value)}
+                trailing={<span style={{ ...mono, font: "9px/1 var(--font-mono)", padding: "2px 5px", borderRadius: "3px", background: "var(--ctv-accent-soft)", color: "var(--ctv-accent)" }}>AUTO</span>} />
+            </div>
+
+            <ImagePanel logoSrc={logoSrc} setLogoSrc={setLogoSrc} name={name} />
+
+            {/* friendly toggles */}
+            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+              <label onClick={() => setShuffle((s) => !s)} style={{ display: "flex", alignItems: "flex-start", gap: 11, padding: "10px 0", cursor: "pointer" }}>
+                <div style={{ flex: 1 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
+                    <span style={{ font: "var(--weight-medium) var(--text-sm)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>Shuffle</span>
+                    {shuffle !== template.shuffle && <span style={{ font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)", padding: "2px 6px", borderRadius: "var(--radius-xs)", background: "var(--ctv-surface-2)", border: "1px solid var(--border-hairline)" }}>overrides template</span>}
+                  </div>
+                  <div style={{ marginTop: 2, font: "var(--text-2xs)/1.35 var(--font-sans)", color: "var(--text-secondary)" }}>{shuffle ? "Plays in a random order." : "Plays in sequence (chronological)."}</div>
+                </div>
+                <Switch checked={shuffle} onChange={setShuffle} />
+              </label>
+              <div style={{ height: 1, background: "var(--border-hairline)" }} />
+              <label onClick={() => setAlways((s) => !s)} style={{ display: "flex", alignItems: "flex-start", gap: 10, padding: "10px 11px", borderRadius: "var(--radius-sm)", cursor: "pointer",
+                background: always ? "var(--ctv-live-soft)" : "transparent", border: `1px solid ${always ? "var(--ctv-live)" : "transparent"}`, transition: "background 240ms cubic-bezier(0.16,1,0.3,1), border-color 240ms cubic-bezier(0.16,1,0.3,1)" }}>
+                <span style={{ display: "inline-flex", marginTop: 1, color: "var(--ctv-live)", flex: "0 0 auto" }}><Ico n="Radio" s={16} /></span>
+                <div style={{ flex: 1 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
+                    <span style={{ font: "var(--weight-medium) var(--text-sm)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>Always playing</span>
+                    {always !== template.always && <span style={{ font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)", padding: "2px 6px", borderRadius: "var(--radius-xs)", background: "var(--ctv-surface-2)", border: "1px solid var(--border-hairline)" }}>overrides template</span>}
+                    {always && (
+                      <span style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "2px 7px", borderRadius: "var(--radius-pill)", background: "var(--ctv-live-soft)", color: "var(--ctv-live)", font: "var(--weight-semibold) 9px/1.4 var(--font-sans)", letterSpacing: ".06em" }}>
+                        <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--ctv-live)" }} />LIVE
+                      </span>
+                    )}
+                  </div>
+                  <div style={{ marginTop: 3, font: "var(--text-2xs)/1.35 var(--font-sans)", color: "var(--text-secondary)" }}>Like live TV — advances on schedule even when nobody is watching.</div>
+                </div>
+                <Switch checked={always} onChange={setAlways} />
+              </label>
+            </div>
+
+            {/* Channel Template */}
+            <div>
+              <div style={{ ...eyebrow, marginBottom: 8 }}>Channel Template</div>
+              <button type="button" onClick={() => setTplOpen((o) => !o)} className="ctv-press"
+                style={{ width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "10px 11px", borderRadius: "var(--radius-sm)", cursor: "pointer", textAlign: "left",
+                  background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-control)" }}>
+                <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 30, height: 30, borderRadius: "var(--radius-xs)", background: "var(--ctv-surface-3)", color: "var(--ctv-accent)", flex: "0 0 auto" }}><Ico n="SlidersHorizontal" s={15} /></span>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                    <span style={{ font: "var(--weight-medium) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}>{template.name}</span>
+                    {!template.builtin && <Badge tone="neutral">Custom</Badge>}
+                  </div>
+                  <div style={{ marginTop: 3, font: "var(--text-2xs)/1.3 var(--font-sans)", color: "var(--text-secondary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{template.desc}</div>
+                </div>
+                <Ico n={tplOpen ? "ChevronUp" : "ChevronDown"} s={15} color="var(--text-disabled)" />
+              </button>
+
+              {tplOpen && (
+                <div style={{ marginTop: 6, display: "flex", flexDirection: "column", gap: 4, padding: 4, borderRadius: "var(--radius-sm)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)" }}>
+                  {TEMPLATES.map((t) => {
+                    const on = t.id === tpl;
+                    return (
+                      <button key={t.id} type="button" className="ctv-press" onClick={() => { setTpl(t.id); setTplOpen(false); setShuffle(t.shuffle); setAlways(t.always); }}
+                        style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 9px", borderRadius: "var(--radius-xs)", cursor: "pointer", textAlign: "left",
+                          background: on ? "color-mix(in srgb, var(--action-primary) 14%, transparent)" : "transparent", border: "none" }}>
+                        <Ico n={on ? "CircleCheck" : "Circle"} s={15} color={on ? "var(--action-primary)" : "var(--text-disabled)"} />
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                            <span style={{ font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", color: "var(--text-primary)" }}>{t.name}</span>
+                            {!t.builtin && <Badge tone="neutral">Custom</Badge>}
+                          </div>
+                          <div style={{ marginTop: 2, font: "var(--text-2xs)/1.3 var(--font-sans)", color: "var(--text-secondary)" }}>{t.desc}</div>
+                        </div>
+                      </button>
+                    );
+                  })}
+                  <button type="button" style={{ display: "flex", alignItems: "center", gap: 7, padding: "8px 9px", borderRadius: "var(--radius-xs)", cursor: "pointer", background: "none", border: "none", color: "var(--text-secondary)", font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)" }}>
+                    <Ico n="Save" s={14} />Save current settings as template…
+                  </button>
+                </div>
+              )}
+
+              <div style={{ marginTop: 8, display: "flex", flexWrap: "wrap", gap: 5 }}>
+                {template.sets.map((s) => (
+                  <span key={s} style={{ padding: "3px 8px", borderRadius: "var(--radius-xs)", background: "var(--ctv-surface-2)", border: "1px solid var(--border-hairline)", font: "var(--text-2xs)/1.4 var(--font-sans)", color: "var(--text-secondary)", ...(/\d/.test(s) ? mono : {}) }}>{s}</span>
+                ))}
+              </div>
+            </div>
+
+            <Advanced templateName={template.name} scrollerRef={railScrollerRef} />
+            </ScrollArea>
+          </aside>
+        </div>
+      </div>
+    );
+  }
+
+  window.CTVChannelBuilder = ChannelBuilder;
+})();
diff --git a/design-system/templates/chicorytv-admin/Channels.jsx b/design-system/templates/chicorytv-admin/Channels.jsx
new file mode 100644
index 000000000..0a0193e9e
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/Channels.jsx
@@ -0,0 +1,188 @@
+// Channels screen — a channel-group'd management table with an at-a-glance
+// on-air treatment (accent rail + live now-playing lane) and a strong channel
+// identity cell. Dense and scannable — the right tool for managing 128 channels.
+(function () {
+  const NS = window.ChicoryTVDesignSystem_eb3b61;
+  const { Button, IconButton, Badge, StatusDot, ChannelLogo, Checkbox, Tooltip } = NS;
+  const Ico = window.Ico;
+  const D = window.CTV_DATA;
+  const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };
+
+  const NOW = {
+    "1.1": { t: "Tom & Jerry — The Cat Concerto", pct: 48 },
+    "2.1": { t: "World Tonight — Evening bulletin", pct: 34 },
+    "4.2": { t: "80s Block — Synthpop hour", pct: 51 },
+    "9.1": { t: "Sesame Street — Episode 4102", pct: 82 },
+  };
+
+  const th = { textAlign: "left", padding: "0 var(--pad-cell-x)", height: 34, font: "var(--weight-medium) var(--text-2xs)/1 var(--font-sans)", letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--text-disabled)", whiteSpace: "nowrap", position: "sticky", top: 0, background: "var(--surface-card)", borderBottom: "1px solid var(--border-hairline)", zIndex: 2 };
+  const td = { padding: "0 var(--pad-cell-x)", height: 56, font: "var(--text-sm)/1.3 var(--font-sans)", color: "var(--text-primary)", verticalAlign: "middle" };
+  const cellCheck = { padding: "0 0 0 14px", width: 30 };
+
+  function Marker({ children, title }) {
+    return <span title={title} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 15, height: 15, padding: "0 3px", borderRadius: "var(--radius-xs)", border: "1px solid var(--border-control)", font: "var(--weight-semibold) 9px/1 var(--font-mono)", color: "var(--text-disabled)", background: "var(--ctv-surface-3)" }}>{children}</span>;
+  }
+
+  function Channels() {
+    const [view, setView] = React.useState("all");
+    const [hover, setHover] = React.useState(null);
+    const [sel, setSel] = React.useState({});
+
+    let rows = D.channels;
+    if (view === "onair") rows = rows.filter((c) => c.live);
+    else if (view === "disabled") rows = rows.filter((c) => !c.enabled);
+
+    // group, preserving first-seen order
+    const groups = [];
+    const gmap = {};
+    rows.forEach((c) => { if (!gmap[c.group]) { gmap[c.group] = []; groups.push(c.group); } gmap[c.group].push(c); });
+
+    const selCount = Object.values(sel).filter(Boolean).length;
+    const allOn = rows.length > 0 && rows.every((c) => sel[c.num]);
+    const someOn = selCount > 0 && !allOn;
+    const toggleAll = () => { if (allOn) setSel({}); else { const n = {}; rows.forEach((c) => (n[c.num] = true)); setSel(n); } };
+    const toggleOne = (num) => setSel((s) => ({ ...s, [num]: !s[num] }));
+
+    const counts = { all: D.channels.length, onair: D.channels.filter((c) => c.live).length, disabled: D.channels.filter((c) => !c.enabled).length };
+
+    const Segmented = () => (
+      <div style={{ display: "inline-flex", gap: 2, padding: 2, borderRadius: "var(--radius-sm)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)" }}>
+        {[{ v: "all", l: "All", c: counts.all }, { v: "onair", l: "On air", c: counts.onair }, { v: "disabled", l: "Disabled", c: counts.disabled }].map((o) => {
+          const on = o.v === view;
+          return (
+            <button key={o.v} type="button" onClick={() => setView(o.v)}
+              style={{ display: "inline-flex", alignItems: "center", gap: 6, height: 26, padding: "0 11px", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", background: on ? "var(--ctv-surface-3)" : "transparent", color: on ? "var(--text-primary)" : "var(--text-secondary)", font: `${on ? "var(--weight-medium)" : "var(--weight-normal)"} var(--text-xs)/1 var(--font-sans)` }}>
+              {o.l}<span style={{ ...mono, fontSize: "var(--text-2xs)", color: on && o.v === "onair" ? "var(--status-live)" : "var(--text-disabled)" }}>{o.c}</span>
+            </button>
+          );
+        })}
+      </div>
+    );
+
+    const renderRow = (c, first) => {
+      const dim = !c.enabled;
+      const isSel = sel[c.num];
+      const isHover = hover === c.num;
+      const now = NOW[c.num];
+      const rowBg = isSel ? "var(--ctv-accent-soft)" : isHover ? "var(--ctv-surface-2)" : c.live ? "var(--ctv-live-soft)" : "transparent";
+      return (
+        <tr key={c.num} onMouseEnter={() => setHover(c.num)} onMouseLeave={() => setHover(null)}
+          style={{ borderTop: first ? "none" : "1px solid var(--border-hairline)", background: rowBg, boxShadow: c.live ? "inset 2px 0 0 var(--status-live)" : "none", transition: "background var(--dur-fast)" }}>
+          <td style={{ ...td, ...cellCheck }}><Checkbox checked={!!isSel} onChange={() => toggleOne(c.num)} /></td>
+          <td style={{ ...td, ...mono, width: 62 }}>
+            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, opacity: dim ? 0.55 : 1 }}>
+              {c.live ? <StatusDot status="live" size={7} /> : <span style={{ width: 7 }} />}
+              <span style={{ color: "var(--status-live)" }}>{c.num}</span>
+            </span>
+          </td>
+          <td style={{ ...td, opacity: dim ? 0.55 : 1 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
+              <ChannelLogo name={c.name} size={34} />
+              <div style={{ minWidth: 0 }}>
+                <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
+                  <span style={{ font: "var(--weight-medium) var(--text-sm)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>{c.name}</span>
+                  {!c.enabled && <Marker title="Disabled">D</Marker>}
+                  {!c.epg && <Marker title="Hidden from EPG">H</Marker>}
+                </div>
+                <div style={{ marginTop: 3, font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)" }}>{c.lang}</div>
+              </div>
+            </div>
+          </td>
+          <td style={{ ...td, opacity: dim ? 0.55 : 1, width: 250 }}>
+            {now ? (
+              <div style={{ minWidth: 0 }}>
+                <div style={{ font: "var(--text-xs)/1.2 var(--font-sans)", color: "var(--text-secondary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 220 }}>{now.t}</div>
+                <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 8 }}>
+                  <div style={{ height: 3, width: 150, borderRadius: 999, background: "var(--ctv-surface-3)", overflow: "hidden" }}>
+                    <div style={{ width: now.pct + "%", height: "100%", background: "var(--status-live)" }} />
+                  </div>
+                  <span style={{ ...mono, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-disabled)" }}>{now.pct}%</span>
+                </div>
+              </div>
+            ) : <span style={{ font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-faint)" }}>{c.enabled ? "Idle" : "Off air"}</span>}
+          </td>
+          <td style={{ ...td, opacity: dim ? 0.55 : 1, width: 130 }}><Badge tone={c.mode === "HLS Direct" ? "neutral" : "accent"}>{c.mode}</Badge></td>
+          <td style={{ ...td, ...mono, color: c.profile === "—" ? "var(--text-disabled)" : "var(--text-secondary)", opacity: dim ? 0.55 : 1, width: 130 }}>{c.profile}</td>
+          <td style={{ ...td, width: 150 }}>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 2, opacity: isHover ? 1 : 0.5, transition: "opacity var(--dur-fast)" }}>
+              <Tooltip label="Preview"><IconButton size="sm" title="Preview" variant={c.live ? "solid" : "ghost"} disabled={!c.live}><Ico n="Play" s={15} /></IconButton></Tooltip>
+              <Tooltip label="Edit"><IconButton size="sm" title="Edit"><Ico n="Pencil" s={15} /></IconButton></Tooltip>
+              <Tooltip label="Troubleshoot"><IconButton size="sm" title="Troubleshoot"><Ico n="Stethoscope" s={15} /></IconButton></Tooltip>
+              <Tooltip label="Delete"><IconButton size="sm" title="Delete"><Ico n="Trash2" s={15} /></IconButton></Tooltip>
+            </div>
+          </td>
+        </tr>
+      );
+    };
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        {/* action bar */}
+        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderBottom: "1px solid var(--border-hairline)", flex: "0 0 auto", minHeight: 58 }}>
+          {selCount > 0 ? (
+            <React.Fragment>
+              <span style={{ font: "var(--weight-medium) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}><span style={mono}>{selCount}</span> selected</span>
+              <span style={{ width: 1, height: 18, background: "var(--border-hairline)" }} />
+              <Button size="sm" variant="secondary" startIcon={<Ico n="Hash" s={14} />}>Renumber</Button>
+              <Button size="sm" variant="secondary" startIcon={<Ico n="FolderInput" s={14} />}>Move to group</Button>
+              <Button size="sm" variant="danger" startIcon={<Ico n="Trash2" s={14} />}>Delete</Button>
+              <span style={{ flex: 1 }} />
+              <Button size="sm" variant="ghost" onClick={() => setSel({})}>Clear</Button>
+            </React.Fragment>
+          ) : (
+            <React.Fragment>
+              <Segmented />
+              <span style={{ flex: 1 }} />
+              <span style={{ display: "inline-flex", alignItems: "center", gap: 7, font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>
+                <StatusDot status="live" size={7} /><span style={mono}>{counts.onair}</span> on air
+              </span>
+              <Button variant="primary" startIcon={<Ico n="Plus" s={15} />}>Add Channel</Button>
+            </React.Fragment>
+          )}
+        </div>
+
+        <div style={{ flex: 1, overflow: "auto", padding: "16px 20px" }}>
+          <div style={{ border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-md)", overflow: "hidden", background: "var(--surface-card)" }}>
+            <table style={{ width: "100%", borderCollapse: "collapse" }}>
+              <thead><tr>
+                <th style={{ ...th, ...cellCheck }}><Checkbox checked={allOn} indeterminate={someOn} onChange={toggleAll} /></th>
+                <th style={th}>No.</th>
+                <th style={th}>Channel</th>
+                <th style={th}>Now playing</th>
+                <th style={th}>Streaming</th>
+                <th style={th}>FFmpeg</th>
+                <th style={{ ...th, textAlign: "right" }}></th>
+              </tr></thead>
+              <tbody>
+                {groups.map((g) => (
+                  <React.Fragment key={g}>
+                    <tr>
+                      <td colSpan={7} style={{ padding: "0 var(--pad-cell-x)", height: 32, background: "var(--ctv-bg-sunken)", borderTop: "1px solid var(--border-hairline)", borderBottom: "1px solid var(--border-hairline)" }}>
+                        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
+                          <Ico n="Folder" s={13} color="var(--text-disabled)" />
+                          <span style={{ font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-sans)", letterSpacing: "0.05em", textTransform: "uppercase", color: "var(--text-secondary)" }}>{g}</span>
+                          <span style={{ ...mono, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-disabled)" }}>{gmap[g].length}</span>
+                        </span>
+                      </td>
+                    </tr>
+                    {gmap[g].map((c, i) => renderRow(c, i === 0))}
+                  </React.Fragment>
+                ))}
+              </tbody>
+            </table>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 16px", borderTop: "1px solid var(--border-hairline)", font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>
+              <span><span style={mono}>{rows.length}</span> of <span style={mono}>128</span> channels · <span style={mono}>{groups.length}</span> groups</span>
+              <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
+                <IconButton size="sm" title="Prev"><Ico n="ChevronLeft" s={16} /></IconButton>
+                <span style={{ ...mono, fontSize: "var(--text-xs)", padding: "0 6px", color: "var(--text-secondary)" }}>1 / 12</span>
+                <IconButton size="sm" title="Next"><Ico n="ChevronRight" s={16} /></IconButton>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  window.CTVChannels = Channels;
+})();
diff --git a/design-system/templates/chicorytv-admin/ChicoryTvAdmin.dc.html b/design-system/templates/chicorytv-admin/ChicoryTvAdmin.dc.html
new file mode 100644
index 000000000..5de74229f
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/ChicoryTvAdmin.dc.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<!-- @template name="ChicoryTV Admin" description="Dark IPTV channel-server admin shell — sidebar nav, Dashboard, Channels, Guide (EPG), Schedule editor, Playouts, Libraries, a Connect menu, and a 3-theme switcher (warm chicory primary). Built on the ChicoryTV component library." -->
+<helmet>
+<style>
+  html, body { margin: 0; height: 100%; background: #12100E; }
+</style>
+</helmet>
+<iframe src="./app.html" title="ChicoryTV Admin" style="width:100vw;height:100vh;border:0;display:block;background:#12100E"></iframe>
+</x-dc>
+</body>
+</html>
diff --git a/design-system/templates/chicorytv-admin/Dashboard.jsx b/design-system/templates/chicorytv-admin/Dashboard.jsx
new file mode 100644
index 000000000..aeb96a21d
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/Dashboard.jsx
@@ -0,0 +1,145 @@
+// Dashboard — spec 4.1: On-air-now cards, stat tiles, Health panel,
+// Recent activity, collapsible Release notes.
+(function () {
+  const NS = window.ChicoryTVDesignSystem_eb3b61;
+  const { Card, Stat, Badge, StatusDot, ChannelLogo, ProgressBar, IconButton } = NS;
+  const Ico = window.Ico;
+  const D = window.CTV_DATA;
+
+  const toneColor = { accent: "var(--ctv-accent)", ok: "var(--status-ok)", warn: "var(--status-warn)", error: "var(--status-error)" };
+  const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };
+
+  // health status -> icon + color
+  const HEALTH = {
+    pass:    { icon: "Check",         color: "var(--status-ok)",    label: "Pass" },
+    info:    { icon: "Info",          color: "var(--ctv-accent)",   label: "Info" },
+    warning: { icon: "TriangleAlert", color: "var(--status-warn)",  label: "Warning" },
+    fail:    { icon: "CircleX",       color: "var(--status-error)", label: "Fail" },
+  };
+
+  function OnAirCard({ ch, program, pct, remain }) {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 10, padding: 12, border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-md)", background: "var(--ctv-bg-sunken)" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <ChannelLogo name={ch.name} size={34} />
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
+              <span style={{ ...mono, font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)", color: "var(--status-live)" }}>{ch.num}</span>
+              <span style={{ font: "var(--weight-medium) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{ch.name}</span>
+            </div>
+          </div>
+          <StatusDot status="live" />
+        </div>
+        <div style={{ font: "var(--text-xs)/1.3 var(--font-sans)", color: "var(--text-secondary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{program}</div>
+        <div>
+          <ProgressBar value={pct} tone="accent" height={4} />
+          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, ...mono, fontSize: "var(--text-2xs)", color: "var(--text-disabled)" }}>
+            <span>{pct}%</span>
+            <span>{remain} to next</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  function ReleaseNotes() {
+    const [open, setOpen] = React.useState(false);
+    const rn = D.releaseNotes;
+    return (
+      <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-md)", overflow: "hidden" }}>
+        <button type="button" onClick={() => setOpen((o) => !o)}
+          style={{ display: "flex", alignItems: "center", gap: 10, width: "100%", padding: "13px 16px", border: "none", background: "transparent", cursor: "pointer", textAlign: "left" }}>
+          <Ico n="Sparkles" s={15} color="var(--text-secondary)" />
+          <span style={{ font: "var(--weight-semibold) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}>What's new</span>
+          <span style={{ ...mono, fontSize: "var(--text-2xs)", color: "var(--text-disabled)" }}>{rn.version} · {rn.date}</span>
+          <span style={{ flex: 1 }} />
+          <Ico n={open ? "ChevronUp" : "ChevronDown"} s={16} color="var(--text-disabled)" />
+        </button>
+        {open && (
+          <ul style={{ margin: 0, padding: "4px 18px 16px 34px", display: "flex", flexDirection: "column", gap: 7 }}>
+            {rn.items.map((it, i) => (
+              <li key={i} style={{ font: "var(--text-xs)/1.45 var(--font-sans)", color: "var(--text-secondary)" }}>{it}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+    );
+  }
+
+  function Dashboard() {
+    const onAir = D.channels.filter((c) => c.live).slice(0, 4);
+    const progs = [
+      { program: "Now: Looney Tunes — Rabbit Fire", pct: 68, remain: "07:41" },
+      { program: "Now: World Tonight — Evening bulletin", pct: 34, remain: "19:22" },
+      { program: "Now: 80s Block — Synthpop hour", pct: 51, remain: "14:08" },
+      { program: "Now: Sesame Street — Episode 4102", pct: 82, remain: "05:12" },
+    ];
+    const failCount = D.health.filter((h) => h.status === "fail").length;
+    const warnCount = D.health.filter((h) => h.status === "warning").length;
+
+    return (
+      <div style={{ padding: 20, display: "flex", flexDirection: "column", gap: 16 }}>
+        {/* stat tiles */}
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 14 }}>
+          <Card><Stat label="Channels" value="128" icon={<Ico n="Tv" s={15} />} /></Card>
+          <Card><Stat label="Active playouts" value="112" icon={<Ico n="ListVideo" s={15} />} /></Card>
+          <Card><Stat label="Transcodes" value="4" icon={<Ico n="Radio" s={15} />} delta="live" deltaTone="neutral" /></Card>
+          <Card><Stat label="Libraries" value="5" icon={<Ico n="Library" s={15} />} /></Card>
+        </div>
+
+        <div style={{ display: "grid", gridTemplateColumns: "1.55fr 1fr", gap: 16, alignItems: "start" }}>
+          {/* On air now */}
+          <Card title="On air now" subtitle={`${onAir.length} channels streaming`} actions={<Badge tone="accent" dot>Live</Badge>}>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+              {onAir.map((c, i) => <OnAirCard key={c.num} ch={c} {...progs[i]} />)}
+            </div>
+          </Card>
+
+          {/* Health panel */}
+          <Card title="System health" padded={false}
+            actions={<span style={{ display: "inline-flex", gap: 6 }}>
+              {failCount > 0 && <Badge tone="error" dot>{failCount} fail</Badge>}
+              {warnCount > 0 && <Badge tone="warn" dot>{warnCount} warn</Badge>}
+            </span>}>
+            <div>
+              {D.health.map((h, i) => {
+                const s = HEALTH[h.status];
+                return (
+                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 16px", borderTop: i ? "1px solid var(--border-hairline)" : "none", cursor: "pointer" }}>
+                    <Ico n={s.icon} s={15} color={s.color} />
+                    <span style={{ font: "var(--weight-medium) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)", flex: "0 0 auto" }}>{h.title}</span>
+                    <span style={{ font: "var(--text-xs)/1.3 var(--font-sans)", color: "var(--text-disabled)", flex: 1, textAlign: "right", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{h.detail}</span>
+                    <Ico n="ChevronRight" s={14} color="var(--text-faint)" />
+                  </div>
+                );
+              })}
+            </div>
+          </Card>
+        </div>
+
+        <div style={{ display: "grid", gridTemplateColumns: "1.55fr 1fr", gap: 16, alignItems: "start" }}>
+          {/* Recent activity */}
+          <Card title="Recent activity" padded={false}>
+            <div>
+              {D.activity.map((a, i) => (
+                <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, padding: "10px 16px", borderTop: i ? "1px solid var(--border-hairline)" : "none" }}>
+                  <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 24, height: 24, flex: "0 0 auto", borderRadius: "var(--radius-xs)", background: "var(--ctv-surface-3)", color: toneColor[a.tone] }}>
+                    <Ico n={a.icon} s={13} />
+                  </span>
+                  <span style={{ flex: 1, font: "var(--text-xs)/1.4 var(--font-sans)", color: "var(--text-secondary)" }}>{a.text}</span>
+                  <span style={{ ...mono, fontSize: "var(--text-2xs)", color: "var(--text-disabled)", whiteSpace: "nowrap", marginTop: 2 }}>{a.time}</span>
+                </div>
+              ))}
+            </div>
+          </Card>
+
+          {/* Release notes (collapsible, secondary) */}
+          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+            <ReleaseNotes />
+          </div>
+        </div>
+      </div>
+    );
+  }
+  window.CTVDashboard = Dashboard;
+})();
diff --git a/design-system/templates/chicorytv-admin/Epg.jsx b/design-system/templates/chicorytv-admin/Epg.jsx
new file mode 100644
index 000000000..8feb581b9
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/Epg.jsx
@@ -0,0 +1,108 @@
+// EPG / Guide grid — spec 4.4: channels down the left, time across the top,
+// programme blocks, a vertical "now" marker, current programme uses the focal
+// (live) color, filler muted, jump-to-now + time scrubber.
+(function () {
+  const NS = window.ChicoryTVDesignSystem_eb3b61;
+  const { Button, IconButton, Badge, Select, ChannelLogo } = NS;
+  const Ico = window.Ico;
+  const D = window.CTV_DATA;
+  const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };
+
+  const SLOT_W = 156;   // px per 30-min slot
+  const RAIL_W = 196;   // channel rail
+  const ROW_H = 82;
+  const HEAD_H = 34;
+  const NOW_SLOTS = 31 / 30; // 20:31 → just past the first slot
+
+  const catTone = { Filler: "var(--text-disabled)" };
+
+  function Programme({ p }) {
+    const filler = p.filler;
+    const live = p.live;
+    return (
+      <div title={`${p.title}${p.sub ? " — " + p.sub : ""}`}
+        style={{
+          position: "absolute",
+          left: p.offset * SLOT_W + 3,
+          width: p.span * SLOT_W - 6,
+          top: 5, bottom: 5,
+          borderRadius: "var(--radius-sm)",
+          padding: "8px 10px",
+          overflow: "hidden",
+          background: live ? "var(--ctv-live-soft)" : filler ? "var(--ctv-bg-sunken)" : "var(--ctv-surface-2)",
+          border: `1px solid ${live ? "var(--status-live)" : "var(--border-hairline)"}`,
+          display: "flex", flexDirection: "column", gap: 3,
+        }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
+          {live && <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--status-live)", flex: "0 0 auto" }} />}
+          <span style={{ font: "var(--weight-medium) var(--text-xs)/1.2 var(--font-sans)", color: filler ? "var(--text-disabled)" : "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.title}</span>
+        </div>
+        {p.sub && p.span > 1 && (
+          <span style={{ font: "var(--text-2xs)/1.2 var(--font-sans)", color: "var(--text-secondary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.sub}</span>
+        )}
+        {p.span > 1 && (
+          <span style={{ marginTop: "auto", font: "var(--weight-medium) 9px/1 var(--font-sans)", letterSpacing: "0.04em", textTransform: "uppercase", color: live ? "var(--status-live)" : "var(--text-disabled)" }}>{p.cat}</span>
+        )}
+      </div>
+    );
+  }
+
+  function Epg() {
+    const [filter, setFilter] = React.useState("All channels");
+    const totalW = RAIL_W + D.epgSlots.length * SLOT_W;
+    const nowX = RAIL_W + NOW_SLOTS * SLOT_W;
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        {/* toolbar */}
+        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderBottom: "1px solid var(--border-hairline)", flex: "0 0 auto" }}>
+          <div style={{ width: 190 }}>
+            <Select size="sm" value={filter} onChange={(e) => setFilter(e.target.value)} options={["All channels", "Favorites", "News", "Kids", "Movies"]} />
+          </div>
+          <div style={{ flex: 1, display: "flex", alignItems: "center", gap: 10 }}>
+            <span style={{ ...mono, fontSize: "var(--text-2xs)", color: "var(--text-disabled)" }}>20:00</span>
+            <input type="range" min="0" max="100" defaultValue="12" style={{ flex: 1, accentColor: "var(--ctv-accent)", maxWidth: 320 }} />
+            <span style={{ ...mono, fontSize: "var(--text-2xs)", color: "var(--text-disabled)" }}>02:00</span>
+          </div>
+          <Badge tone="accent" dot>Now 20:31</Badge>
+          <Button variant="primary" startIcon={<Ico n="Crosshair" s={15} />}>Jump to now</Button>
+        </div>
+
+        {/* grid */}
+        <div style={{ flex: 1, minHeight: 0, overflow: "auto", background: "var(--surface-app)" }}>
+          <div style={{ position: "relative", width: totalW, minWidth: "100%" }}>
+            {/* time header */}
+            <div style={{ display: "flex", position: "sticky", top: 0, zIndex: 3, height: HEAD_H, background: "var(--surface-app)", borderBottom: "1px solid var(--border-hairline)" }}>
+              <div style={{ width: RAIL_W, flex: "0 0 auto", position: "sticky", left: 0, zIndex: 4, background: "var(--surface-app)", borderRight: "1px solid var(--border-hairline)" }} />
+              {D.epgSlots.map((t, i) => (
+                <div key={i} style={{ width: SLOT_W, flex: "0 0 auto", display: "flex", alignItems: "center", padding: "0 10px", borderRight: "1px solid var(--border-hairline)", ...mono, fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{t}</div>
+              ))}
+            </div>
+
+            {/* now marker */}
+            <div style={{ position: "absolute", top: HEAD_H, bottom: 0, left: nowX, width: 2, background: "var(--status-live)", zIndex: 2, pointerEvents: "none" }}>
+              <span style={{ position: "absolute", top: -6, left: -4, width: 10, height: 10, borderRadius: "50%", background: "var(--status-live)", boxShadow: "0 0 8px var(--status-live)" }} />
+            </div>
+
+            {/* channel rows */}
+            {D.epg.map((ch, i) => (
+              <div key={ch.num} style={{ display: "flex", height: ROW_H, borderBottom: "1px solid var(--border-hairline)" }}>
+                {/* rail */}
+                <div style={{ width: RAIL_W, flex: "0 0 auto", position: "sticky", left: 0, zIndex: 1, display: "flex", alignItems: "center", gap: 10, padding: "0 12px", background: "var(--surface-card)", borderRight: "1px solid var(--border-hairline)" }}>
+                  <span style={{ ...mono, font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)", color: "var(--status-live)", width: 26, flex: "0 0 auto" }}>{ch.num}</span>
+                  <ChannelLogo name={ch.name} size={30} />
+                  <span style={{ font: "var(--weight-medium) var(--text-sm)/1.2 var(--font-sans)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{ch.name}</span>
+                </div>
+                {/* programme track */}
+                <div style={{ position: "relative", flex: 1, background: i % 2 ? "rgba(255,255,255,0.008)" : "transparent" }}>
+                  {ch.programmes.map((p, j) => <Programme key={j} p={p} />)}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+  window.CTVEpg = Epg;
+})();
diff --git a/design-system/templates/chicorytv-admin/Playouts.jsx b/design-system/templates/chicorytv-admin/Playouts.jsx
new file mode 100644
index 000000000..fd6af59cd
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/Playouts.jsx
@@ -0,0 +1,204 @@
+// Playouts screen — GROUND-UP: a broadcast "now / next" monitor. Channel picker
+// strip, live preview + progress, up-next, the playout timeline, and upcoming items.
+(function () {
+  const NS = window.ChicoryTVDesignSystem_eb3b61;
+  const { Card, Button, IconButton, Badge, StatusDot, ChannelLogo, Switch, Tooltip, Input } = NS;
+  const Ico = window.Ico;
+  const D = window.CTV_DATA;
+  const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };
+  const toMin = (t) => { const [h, m] = t.split(":").map(Number); return h * 60 + m; };
+
+  function Timeline() {
+    const items = D.playoutItems;
+    const start = toMin(items[0].start), end = toMin(items[items.length - 1].finish);
+    const span = end - start, nowPct = 34;
+    return (
+      <div>
+        <div style={{ position: "relative", display: "flex", height: 34, borderRadius: "var(--radius-sm)", overflow: "hidden", border: "1px solid var(--border-hairline)" }}>
+          {items.map((it, i) => {
+            const w = ((toMin(it.finish) - toMin(it.start)) / span) * 100;
+            const filler = it.kind === "filler";
+            return (
+              <div key={i} title={it.title} style={{ width: `${w}%`, minWidth: 2, borderRight: i < items.length - 1 ? "1px solid var(--ctv-bg)" : "none", background: filler ? "var(--ctv-surface-3)" : "var(--ctv-accent-soft)", display: "flex", alignItems: "center", padding: "0 8px", overflow: "hidden" }}>
+                {!filler && w > 8 && <span style={{ font: "var(--weight-medium) var(--text-2xs)/1 var(--font-sans)", color: "var(--ctv-accent)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{it.title.split(" — ")[0]}</span>}
+              </div>
+            );
+          })}
+          <div style={{ position: "absolute", top: -3, bottom: -3, left: `${nowPct}%`, width: 2, background: "var(--status-live)", boxShadow: "0 0 8px var(--status-live)" }}>
+            <span style={{ position: "absolute", top: -4, left: -3, width: 8, height: 8, borderRadius: "50%", background: "var(--status-live)" }} />
+          </div>
+        </div>
+        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, ...mono, fontSize: "var(--text-2xs)", color: "var(--text-disabled)" }}>
+          <span>{D.playoutItems[0].start.slice(0, 5)}</span>
+          <span style={{ color: "var(--status-live)" }}>▲ now 20:31</span>
+          <span>{D.playoutItems[D.playoutItems.length - 1].finish.slice(0, 5)}</span>
+        </div>
+      </div>
+    );
+  }
+
+  function Playouts() {
+    const all = D.channels;
+    const [selNum, setSelNum] = React.useState("1.1");
+    const [q, setQ] = React.useState("");
+    const sel = D.channels.find((c) => c.num === selNum) || all[0];
+    const now = D.playoutItems[2];   // Tom & Jerry
+    const next = D.playoutItems[3];
+    const NOW = {
+      "1.1": "Tom & Jerry — The Cat Concerto", "2.1": "World Tonight", "4.2": "80s Block — Synthpop hour", "9.1": "Sesame Street",
+    };
+    const ql = q.trim().toLowerCase();
+    const rail = all.filter((c) => c.enabled && (!ql || c.name.toLowerCase().includes(ql) || c.num.includes(ql)));
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        {/* header */}
+        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 20px", borderBottom: "1px solid var(--border-hairline)", flex: "0 0 auto" }}>
+          <Button variant="secondary" startIcon={<Ico n="RefreshCw" s={15} />}>Reset All</Button>
+          <span style={{ flex: 1 }} />
+          <Badge tone="warn" dot>3 warnings</Badge>
+          <Button variant="primary" startIcon={<Ico n="Plus" s={15} />} endIcon={<Ico n="ChevronDown" s={14} />}>Add Playout</Button>
+        </div>
+
+        <div style={{ flex: 1, minHeight: 0, display: "flex" }}>
+          {/* LEFT — searchable channel rail (scales to 128, no horizontal scroll) */}
+          <div style={{ width: 248, flex: "0 0 auto", display: "flex", flexDirection: "column", borderRight: "1px solid var(--border-hairline)", minHeight: 0 }}>
+            <div style={{ padding: "12px 12px 10px", borderBottom: "1px solid var(--border-hairline)" }}>
+              <Input size="sm" leadingIcon={<Ico n="Search" s={15} />} placeholder="Filter playouts…" value={q} onChange={(e) => setQ(e.target.value)} />
+            </div>
+            <div style={{ flex: 1, overflow: "auto", padding: 8 }}>
+              {rail.map((c) => {
+                const active = c.num === selNum;
+                const nowT = NOW[c.num];
+                return (
+                  <button key={c.num} type="button" onClick={() => setSelNum(c.num)}
+                    style={{ display: "flex", alignItems: "center", gap: 10, width: "100%", padding: "8px 9px", marginBottom: 2, border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", textAlign: "left",
+                      background: active ? "var(--ctv-accent-soft)" : "transparent" }}
+                    onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "var(--ctv-surface-2)"; }}
+                    onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}>
+                    <ChannelLogo name={c.name} size={30} />
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                        <span style={{ ...mono, font: "var(--weight-medium) var(--text-2xs)/1 var(--font-mono)", color: "var(--status-live)" }}>{c.num}</span>
+                        <span style={{ font: "var(--weight-medium) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.name}</span>
+                      </div>
+                      <div style={{ marginTop: 3, font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                        {c.live ? nowT || "On air" : "Idle"}
+                      </div>
+                    </div>
+                    {c.live && <StatusDot status="live" size={6} />}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* RIGHT — monitor for the selected playout */}
+          <div style={{ flex: 1, minWidth: 0, minHeight: 0, overflow: "auto" }}>
+            <div style={{ padding: 20, display: "flex", flexDirection: "column", gap: 16 }}>
+            {/* selected channel header */}
+            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+              <ChannelLogo name={sel.name} size={38} />
+              <div style={{ flex: 1 }}>
+                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <span style={{ ...mono, font: "var(--weight-medium) var(--text-sm)/1 var(--font-mono)", color: "var(--status-live)" }}>{sel.num}</span>
+                  <span style={{ font: "var(--weight-semibold) var(--text-md)/1 var(--font-sans)", color: "var(--text-primary)" }}>{sel.name}</span>
+                  {sel.live && <Badge tone="accent" dot>On air</Badge>}
+                </div>
+              </div>
+            </div>
+
+            {/* now / next hero */}
+            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+            {/* NOW */}
+            <div style={{ display: "flex", alignItems: "stretch", background: "var(--surface-card)", border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-md)", overflow: "hidden" }}>
+              {/* preview frame */}
+              <div style={{ position: "relative", width: 208, flex: "0 0 auto", background: "linear-gradient(135deg, #12151C, #0B0D11)", display: "flex", alignItems: "center", justifyContent: "center", borderRight: "1px solid var(--border-hairline)" }}>
+                <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 46, height: 46, borderRadius: "50%", background: "rgba(91,124,250,0.15)", border: "1px solid rgba(91,124,250,0.4)", color: "var(--ctv-accent)" }}><Ico n="Play" s={20} /></span>
+                <span style={{ position: "absolute", top: 12, left: 12, display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 9px", borderRadius: "var(--radius-xs)", background: "rgba(15,17,21,0.6)", border: "1px solid var(--border-hairline)" }}>
+                  <StatusDot status="live" size={7} /><span style={{ font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-sans)", letterSpacing: "0.06em", color: "var(--text-primary)" }}>LIVE</span>
+                </span>
+                <span style={{ position: "absolute", bottom: 12, right: 12, ...mono, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-secondary)", background: "rgba(15,17,21,0.6)", padding: "3px 7px", borderRadius: "var(--radius-xs)" }}>20:31:24</span>
+              </div>
+              <div style={{ flex: 1, minWidth: 0, padding: 18, display: "flex", flexDirection: "column", justifyContent: "center" }}>
+                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <span style={{ font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-sans)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--status-live)" }}>On air now</span>
+                  <span style={{ ...mono, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-disabled)" }}>{sel.num} · {sel.name} · {sel.profile}</span>
+                </div>
+                <div style={{ marginTop: 8, font: "var(--weight-semibold) var(--text-lg)/1.25 var(--font-sans)", color: "var(--text-primary)" }}>{now.title}</div>
+                <div style={{ marginTop: 14, height: 5, borderRadius: 999, background: "var(--ctv-surface-3)", overflow: "hidden" }}>
+                  <div style={{ width: "48%", height: "100%", background: "var(--status-live)" }} />
+                </div>
+                <div style={{ display: "flex", justifyContent: "space-between", marginTop: 7, ...mono, fontSize: "var(--text-2xs)", color: "var(--text-disabled)" }}>
+                  <span>{now.start} · started 11m ago</span>
+                  <span>13m to next</span>
+                </div>
+              </div>
+            </div>
+            {/* NEXT + PLAYOUT */}
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+              <Card title="Up next">
+                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                  <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 42, height: 42, borderRadius: "var(--radius-sm)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)", color: "var(--text-secondary)", flex: "0 0 auto" }}><Ico n="Film" s={18} /></span>
+                  <div style={{ minWidth: 0 }}>
+                    <div style={{ font: "var(--weight-medium) var(--text-sm)/1.3 var(--font-sans)", color: "var(--text-primary)" }}>{next.title}</div>
+                    <div style={{ marginTop: 4, ...mono, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-disabled)" }}>starts {next.start} · {next.dur}</div>
+                  </div>
+                </div>
+              </Card>
+              <Card title="Playout">
+                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+                  <Row label="Source" value="Block Schedule" />
+                  <Row label="Schedule" value="Prime Time Cartoons" />
+                  <Row label="Rebuilds" value="daily · 04:00" />
+                  <div style={{ display: "flex", gap: 8, marginTop: 2 }}>
+                    <Button size="sm" variant="secondary" startIcon={<Ico n="RefreshCw" s={13} />}>Reset</Button>
+                    <Button size="sm" variant="ghost" startIcon={<Ico n="Clock" s={13} />}>Schedule reset</Button>
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+
+          {/* timeline */}
+          <Card title="Timeline" subtitle="Tonight's playout">
+            <Timeline />
+          </Card>
+
+          {/* upcoming */}
+          <Card title="Upcoming" subtitle="Next items" padded={false}
+            actions={<Switch checked size="sm" label="Show filler" onChange={() => {}} />}>
+            <div>
+              {D.playoutItems.slice(2, 7).map((it, i) => {
+                const filler = it.kind === "filler";
+                const isNow = i === 0;
+                return (
+                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 16px", borderTop: i ? "1px solid var(--border-hairline)" : "none", background: isNow ? "var(--ctv-live-soft)" : "transparent" }}>
+                    <span style={{ ...mono, font: "var(--text-sm)/1 var(--font-mono)", color: isNow ? "var(--status-live)" : "var(--text-secondary)", width: 66, flex: "0 0 auto" }}>{it.start}</span>
+                    {isNow ? <StatusDot status="live" size={7} /> : <Ico n={filler ? "Sparkles" : "Film"} s={13} color={filler ? "var(--text-disabled)" : "var(--ctv-accent)"} />}
+                    <span style={{ flex: 1, font: "var(--text-sm)/1.3 var(--font-sans)", color: filler ? "var(--text-secondary)" : "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{it.title}</span>
+                    {filler && <Badge tone="neutral">Filler</Badge>}
+                    <span style={{ ...mono, font: "var(--text-xs)/1 var(--font-mono)", color: "var(--text-disabled)", flex: "0 0 auto" }}>{it.dur}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </Card>
+          </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  function Row({ label, value }) {
+    return (
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
+        <span style={{ font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>{label}</span>
+        <span style={{ font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", color: "var(--text-primary)" }}>{value}</span>
+      </div>
+    );
+  }
+
+  window.CTVPlayouts = Playouts;
+})();
diff --git a/design-system/templates/chicorytv-admin/ScheduleEditor.jsx b/design-system/templates/chicorytv-admin/ScheduleEditor.jsx
new file mode 100644
index 000000000..728659b05
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/ScheduleEditor.jsx
@@ -0,0 +1,245 @@
+// Schedule editor — GROUND-UP redesign as a visual "lineup builder".
+// Real ErsatzTV fields/vocabulary, but a block-timeline composition model with a
+// tabbed inspector — replacing the inherited table + 25-field stacked form.
+(function () {
+  const NS = window.ChicoryTVDesignSystem_eb3b61;
+  const { Card, Button, IconButton, Badge, Select, Input, Switch, Checkbox, Tabs, ChannelLogo, Tooltip } = NS;
+  const Ico = window.Ico;
+  const D = window.CTV_DATA;
+  const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };
+
+  const COLL_TYPES = ["Collection", "Television Show", "Season", "Artist", "Multi Collection", "Smart Collection", "Search Query", "Playlist", "Rerun (First Run)", "Rerun (Rerun)"];
+  const ORDERS = ["Chronological", "Random", "Shuffle", "Shuffle In Order", "Marathon", "Season/Episode", "Multi-Episode Shuffle"];
+  const MODES = ["Flood", "One", "Multiple", "Duration"];
+  const ORDER_ICON = { "Chronological": "ArrowDownWideNarrow", "Random": "Dices", "Shuffle": "Shuffle", "Shuffle In Order": "ListOrdered", "Marathon": "Flame", "Season/Episode": "ListTree", "Multi-Episode Shuffle": "Shuffle" };
+
+  // Fill-mode visual descriptor
+  function fillOf(it) {
+    if (it.mode === "Flood") return { icon: "MoveVertical", label: "Fills to next", grow: true };
+    if (it.mode === "One") return { icon: "Square", label: "1 item" };
+    if (it.mode === "Multiple") return { icon: "Copy", label: "×" + it.count };
+    if (it.mode === "Duration") return { icon: "Timer", label: it.durEst.replace("~", "") };
+    return { icon: "Square", label: it.mode };
+  }
+
+  function Block({ it, active, onClick, dragging, isOver, dragProps }) {
+    const fill = fillOf(it);
+    const filler = it.guide === "Filler";
+    return (
+      <div onClick={onClick} {...dragProps}
+        style={{
+          position: "relative", display: "flex", flexDirection: "column", gap: 8,
+          padding: "12px 13px", borderRadius: "var(--radius-md)", cursor: "pointer",
+          background: active ? "var(--ctv-accent-soft)" : "var(--surface-card)",
+          border: `1px solid ${active ? "rgba(91,124,250,0.45)" : "var(--border-hairline)"}`,
+          boxShadow: isOver ? "0 -2px 0 var(--ctv-accent)" : "none",
+          opacity: dragging ? 0.4 : 1,
+          transition: "background var(--dur-fast), border-color var(--dur-fast)",
+        }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
+          <span style={{ display: "inline-flex", cursor: "grab", color: "var(--text-faint)", flex: "0 0 auto" }} title="Drag to reorder"><Ico n="GripVertical" s={16} /></span>
+          <span style={{ position: "relative", flex: "0 0 auto" }}>
+            <ChannelLogo name={it.collection} size={38} radius="var(--radius-sm)" />
+            {filler && <span style={{ position: "absolute", inset: 0, borderRadius: "var(--radius-sm)", background: "rgba(15,17,21,0.45)" }} />}
+          </span>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ font: "var(--weight-semibold) var(--text-md)/1.2 var(--font-sans)", color: "var(--text-primary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{it.collection}</div>
+            <div style={{ marginTop: 3, font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>{it.collType}</div>
+          </div>
+          {/* fill-mode visual */}
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 6, flex: "0 0 auto", padding: "5px 9px", borderRadius: "var(--radius-sm)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)" }}>
+            <Ico n={fill.icon} s={13} color="var(--text-secondary)" />
+            <span style={{ ...(fill.label.startsWith("×") || /\d/.test(fill.label) ? mono : {}), font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", color: "var(--text-primary)" }}>{fill.label}</span>
+          </span>
+        </div>
+        {/* meta chips */}
+        <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", paddingLeft: 27 }}>
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 5, font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>
+            <Ico n={ORDER_ICON[it.order] || "Shuffle"} s={13} color="var(--text-disabled)" />{it.order}
+          </span>
+          {filler ? <Badge tone="neutral">Hidden from guide</Badge> : null}
+          {(it.pre || it.mid || it.post) && (
+            <span style={{ display: "inline-flex", alignItems: "center", gap: 5, font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)" }}>
+              <Ico n="Sparkles" s={12} />
+              {[it.pre && "pre", it.mid && "mid", it.post && "post"].filter(Boolean).join(" · ")}
+            </span>
+          )}
+          <span style={{ flex: 1 }} />
+          <span style={{ ...mono, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-disabled)" }}>{it.durEst}</span>
+        </div>
+      </div>
+    );
+  }
+
+  function Inspector({ sel, idx }) {
+    const [tab, setTab] = React.useState("content");
+    const fill = fillOf(sel);
+    return (
+      <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-md)", display: "flex", flexDirection: "column", minHeight: 0, height: "100%" }}>
+        {/* summary header */}
+        <div style={{ padding: "14px 16px", borderBottom: "1px solid var(--border-hairline)" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+            <ChannelLogo name={sel.collection} size={34} radius="var(--radius-sm)" />
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ font: "var(--weight-semibold) var(--text-md)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>{sel.collection}</div>
+              <div style={{ marginTop: 3, font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>Item {idx + 1} · {sel.collType}</div>
+            </div>
+            <IconButton title="Remove item"><Ico n="Trash2" s={15} /></IconButton>
+          </div>
+          <div style={{ marginTop: 10, display: "flex", gap: 6, flexWrap: "wrap" }}>
+            <Badge tone={sel.startType === "Fixed" ? "accent" : "neutral"} dot>{sel.startType === "Fixed" ? sel.start : "Dynamic"}</Badge>
+            <Badge tone="neutral">{sel.order}</Badge>
+            <Badge tone="neutral">{fill.label === "1 item" ? "One" : sel.mode}{sel.mode === "Multiple" ? " " + fill.label : ""}</Badge>
+          </div>
+        </div>
+        <div style={{ padding: "0 16px" }}>
+          <Tabs value={tab} onChange={setTab} tabs={[
+            { value: "content", label: "Content" },
+            { value: "playback", label: "Playback" },
+            { value: "filler", label: "Filler" },
+            { value: "overrides", label: "Overrides" },
+          ]} />
+        </div>
+        <div style={{ flex: 1, overflow: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 14 }}>
+          {tab === "content" && (
+            <React.Fragment>
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+                <Select label="Start type" value={sel.startType} onChange={() => {}} options={["Dynamic", "Fixed"]} />
+                <Input label="Start time" value={sel.startType === "Fixed" ? sel.start : ""} placeholder="dynamic" onChange={() => {}} />
+              </div>
+              <Select label="Collection type" value={sel.collType} onChange={() => {}} options={COLL_TYPES} />
+              <Input label="Collection" value={sel.collection} onChange={() => {}} />
+              <Input label="Custom title" placeholder="Optional — shown in the guide" onChange={() => {}} />
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, alignItems: "center" }}>
+                <Select label="Guide mode" value={sel.guide} onChange={() => {}} options={["Normal", "Filler"]} />
+                <div style={{ paddingTop: 18 }}><Checkbox checked label="Keep multi-part together" onChange={() => {}} /></div>
+              </div>
+            </React.Fragment>
+          )}
+          {tab === "playback" && (
+            <React.Fragment>
+              <Select label="Playback order" value={sel.order} onChange={() => {}} options={ORDERS} />
+              <Select label="Playout mode" value={sel.mode} onChange={() => {}} options={MODES} />
+              {sel.mode === "Multiple" && (
+                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+                  <Select label="Multiple mode" value="Count" onChange={() => {}} options={["Count", "Collection Size", "Multi-Episode Group Size"]} />
+                  <Input label="Multiple count" value={String(sel.count)} onChange={() => {}} />
+                </div>
+              )}
+              {sel.mode === "Duration" && (
+                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+                  <Input label="Hours" value="1" onChange={() => {}} />
+                  <Input label="Minutes" value="30" onChange={() => {}} />
+                </div>
+              )}
+              <div style={{ padding: "12px 13px", borderRadius: "var(--radius-sm)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)", display: "flex", alignItems: "center", gap: 10 }}>
+                <Ico n={fill.icon} s={16} color="var(--ctv-accent)" />
+                <span style={{ font: "var(--text-xs)/1.4 var(--font-sans)", color: "var(--text-secondary)" }}>
+                  {sel.mode === "Flood" ? "Plays until the next fixed-start item." : sel.mode === "One" ? "Plays exactly one item, then advances." : sel.mode === "Multiple" ? `Plays ${sel.count} items, then advances.` : "Plays for a fixed duration."}
+                </span>
+              </div>
+            </React.Fragment>
+          )}
+          {tab === "filler" && (
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+              <Select label="Pre-roll" value={sel.pre ? "Retro Bumpers" : "None"} onChange={() => {}} options={["None", "Retro Bumpers", "Station IDs"]} />
+              <Select label="Mid-roll" value={sel.mid ? "Ad Break" : "None"} onChange={() => {}} options={["None", "Ad Break", "Promos"]} />
+              <Select label="Post-roll" value={sel.post ? "Outro" : "None"} onChange={() => {}} options={["None", "Outro"]} />
+              <Select label="Tail" value="None" onChange={() => {}} options={["None", "Test Pattern"]} />
+              <Select label="Fallback" value="Test Pattern" onChange={() => {}} options={["None", "Test Pattern", "Color Bars"]} />
+            </div>
+          )}
+          {tab === "overrides" && (
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+              <Select label="Watermark" value="Channel logo" onChange={() => {}} options={["Inherit", "Channel logo", "None"]} />
+              <Select label="Subtitle mode" value="Any" onChange={() => {}} options={["None", "Any", "Forced", "Default"]} />
+              <Select label="Preferred audio" value="English" onChange={() => {}} options={["English", "Spanish", "French"]} />
+              <Select label="Preferred subtitle" value="None" onChange={() => {}} options={["None", "English", "Spanish"]} />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  function ScheduleEditor() {
+    const [items, setItems] = React.useState(D.scheduleItems);
+    const [selId, setSelId] = React.useState(D.scheduleItems[0].id);
+    const [dragId, setDragId] = React.useState(null);
+    const [overId, setOverId] = React.useState(null);
+    const sel = items.find((i) => i.id === selId) || items[0];
+    const selIdx = items.findIndex((i) => i.id === sel.id);
+
+    const onDrop = (targetId) => {
+      if (dragId == null || dragId === targetId) { setDragId(null); setOverId(null); return; }
+      const from = items.findIndex((i) => i.id === dragId);
+      const to = items.findIndex((i) => i.id === targetId);
+      const next = items.slice();
+      const [moved] = next.splice(from, 1);
+      next.splice(to, 0, moved);
+      setItems(next); setDragId(null); setOverId(null);
+    };
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        {/* header */}
+        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderBottom: "1px solid var(--border-hairline)", flex: "0 0 auto" }}>
+          <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 34, height: 34, borderRadius: "var(--radius-sm)", background: "var(--ctv-accent-soft)", color: "var(--ctv-accent)" }}><Ico n="CalendarClock" s={18} /></span>
+          <div style={{ flex: 1 }}>
+            <div style={{ font: "var(--weight-semibold) var(--text-md)/1 var(--font-sans)", color: "var(--text-primary)" }}>Prime Time Cartoons</div>
+            <div style={{ marginTop: 3, font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>Block schedule · programs <span style={mono}>~3h 46m</span> · loops to fill the block</div>
+          </div>
+          <Button variant="secondary" startIcon={<Ico n="Play" s={15} />}>Preview playout</Button>
+          <Button variant="primary" startIcon={<Ico n="Check" s={15} />}>Save</Button>
+        </div>
+
+        {/* body */}
+        <div style={{ flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: "minmax(420px, 1fr) minmax(360px, 460px)", gap: 18, padding: 20 }}>
+          {/* LEFT lineup on a time rail */}
+          <div style={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
+              <span style={{ font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-sans)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-disabled)" }}>Lineup · drag to reorder</span>
+              <Button size="sm" variant="ghost" startIcon={<Ico n="Plus" s={14} />}>Add item</Button>
+            </div>
+            <div style={{ flex: 1, overflow: "auto", paddingRight: 4 }}>
+              {items.map((it, idx) => {
+                const isFixed = it.startType === "Fixed";
+                return (
+                  <div key={it.id} style={{ display: "flex", gap: 12 }}>
+                    {/* time rail */}
+                    <div style={{ width: 52, flex: "0 0 auto", display: "flex", flexDirection: "column", alignItems: "center", position: "relative" }}>
+                      {idx > 0 && <span style={{ position: "absolute", top: 0, height: 16, width: 2, background: "var(--border-hairline)" }} />}
+                      <div style={{ marginTop: isFixed ? 14 : 16, display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
+                        <span style={{ width: 9, height: 9, borderRadius: "50%", background: isFixed ? "var(--ctv-accent)" : "transparent", border: `2px solid ${isFixed ? "var(--ctv-accent)" : "var(--border-control)"}` }} />
+                        {isFixed
+                          ? <span style={{ ...mono, font: "var(--weight-medium) var(--text-2xs)/1 var(--font-mono)", color: "var(--ctv-accent)" }}>{it.start}</span>
+                          : <span style={{ font: "9px/1 var(--font-sans)", color: "var(--text-faint)" }}>flows</span>}
+                      </div>
+                      {idx < items.length - 1 && <span style={{ position: "absolute", bottom: -12, top: 40, width: 2, background: "var(--border-hairline)" }} />}
+                    </div>
+                    {/* block */}
+                    <div style={{ flex: 1, minWidth: 0, paddingBottom: 12 }}>
+                      <Block it={it} active={it.id === selId} onClick={() => setSelId(it.id)}
+                        dragging={it.id === dragId} isOver={it.id === overId && dragId != null && dragId !== it.id}
+                        dragProps={{
+                          draggable: true,
+                          onDragStart: () => setDragId(it.id),
+                          onDragEnd: () => { setDragId(null); setOverId(null); },
+                          onDragOver: (e) => { e.preventDefault(); setOverId(it.id); },
+                          onDrop: () => onDrop(it.id),
+                        }} />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* RIGHT inspector */}
+          <Inspector sel={sel} idx={selIdx} />
+        </div>
+      </div>
+    );
+  }
+  window.CTVScheduleEditor = ScheduleEditor;
+})();
diff --git a/design-system/templates/chicorytv-admin/ScheduleLibrary.jsx b/design-system/templates/chicorytv-admin/ScheduleLibrary.jsx
new file mode 100644
index 000000000..59cde9a2c
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/ScheduleLibrary.jsx
@@ -0,0 +1,117 @@
+// Libraries screen — GROUND-UP: media sources as connection cards (Local / Plex /
+// Jellyfin / Emby), each listing its libraries with live scan state — a modern
+// "connections" surface, not a flat table.
+(function () {
+  const NS = window.ChicoryTVDesignSystem_eb3b61;
+  const { Button, IconButton, Badge, StatusDot, ProgressBar, Tooltip } = NS;
+  const Ico = window.Ico;
+  const D = window.CTV_DATA;
+  const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };
+
+  const KIND = {
+    Local:    { icon: "HardDrive", tint: "var(--ctv-accent)" },
+    Plex:     { icon: "Server",    tint: "#E5A00D" },
+    Jellyfin: { icon: "Server",    tint: "#8A5CF6" },
+    Emby:     { icon: "Server",    tint: "#52B54B" },
+  };
+  const LIB_STATUS = {
+    ok:   { tone: "ok",   label: "Synced" },
+    warn: { tone: "warn", label: "Needs attention" },
+    scan: { tone: "accent", label: "Scanning" },
+  };
+  const MEDIA_ICON = { "Movies": "Clapperboard", "Shows": "MonitorPlay", "Other Videos": "Video", "Music Videos": "Music" };
+
+  function SourceCard({ src }) {
+    const k = KIND[src.kind] || KIND.Local;
+    const totalItems = src.libs.reduce((a, l) => a + l.items, 0);
+    const scanning = src.libs.some((l) => l.status === "scan");
+    return (
+      <div style={{ display: "flex", flexDirection: "column", background: "var(--surface-card)", border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-md)", overflow: "hidden" }}>
+        {/* source header */}
+        <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "13px 15px", borderBottom: "1px solid var(--border-hairline)" }}>
+          <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 34, height: 34, borderRadius: "var(--radius-sm)", background: "var(--ctv-surface-3)", color: k.tint, flex: "0 0 auto" }}><Ico n={k.icon} s={18} /></span>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <span style={{ font: "var(--weight-semibold) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}>{src.name}</span>
+              <StatusDot status={src.status === "warn" ? "warn" : "ok"} />
+            </div>
+            <div style={{ marginTop: 4, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-disabled)" }}>{src.detail}</div>
+          </div>
+          <Tooltip label="Scan source"><IconButton size="sm" title="Scan"><Ico n="RefreshCw" s={15} /></IconButton></Tooltip>
+          <Tooltip label="Settings"><IconButton size="sm" title="Settings"><Ico n="Settings2" s={15} /></IconButton></Tooltip>
+        </div>
+        {/* libraries */}
+        <div style={{ flex: 1 }}>
+          {src.libs.map((lib, i) => {
+            const s = LIB_STATUS[lib.status];
+            return (
+              <div key={i} style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 15px", borderTop: i ? "1px solid var(--border-hairline)" : "none" }}>
+                <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, borderRadius: "var(--radius-xs)", background: "var(--ctv-bg-sunken)", color: "var(--text-secondary)", flex: "0 0 auto" }}><Ico n={MEDIA_ICON[lib.media] || "Folder"} s={14} /></span>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ font: "var(--weight-medium) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}>{lib.name}</div>
+                  <div style={{ marginTop: 3, font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>{lib.media} · <span style={mono}>{lib.items.toLocaleString()}</span> items</div>
+                </div>
+                {lib.status === "scan"
+                  ? <div style={{ width: 118 }}><ProgressBar value={lib.pct} showLabel /></div>
+                  : <Badge tone={s.tone} dot>{s.label}</Badge>}
+              </div>
+            );
+          })}
+        </div>
+        {/* footer */}
+        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 15px", borderTop: "1px solid var(--border-hairline)", background: "var(--ctv-bg-sunken)" }}>
+          <Ico n="Clock" s={13} color="var(--text-faint)" />
+          <span style={{ font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)" }}>
+            {scanning ? "Scanning now" : `Last scan ${src.lastScan}`}
+          </span>
+          <span style={{ flex: 1 }} />
+          <span style={{ font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)" }}><span style={mono}>{totalItems.toLocaleString()}</span> items · {src.libs.length} librar{src.libs.length === 1 ? "y" : "ies"}</span>
+        </div>
+      </div>
+    );
+  }
+
+  function AddSourceCard() {
+    const opts = [["HardDrive", "Local folder"], ["Server", "Plex"], ["Server", "Jellyfin"], ["Server", "Emby"]];
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 12, padding: 16, background: "var(--surface-card)", border: "1px dashed var(--border-control)", borderRadius: "var(--radius-md)", alignItems: "flex-start", justifyContent: "center" }}>
+        <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 34, height: 34, borderRadius: "var(--radius-sm)", background: "var(--ctv-accent-soft)", color: "var(--ctv-accent)" }}><Ico n="Plus" s={18} /></span>
+        <div>
+          <div style={{ font: "var(--weight-semibold) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}>Connect a media source</div>
+          <div style={{ marginTop: 4, font: "var(--text-xs)/1.4 var(--font-sans)", color: "var(--text-secondary)" }}>Point ChicoryTV at a local folder or a Plex / Jellyfin / Emby server.</div>
+        </div>
+        <div style={{ display: "flex", gap: 7, flexWrap: "wrap" }}>
+          {opts.map(([ic, label], i) => (
+            <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 10px", borderRadius: "var(--radius-sm)", background: "var(--ctv-surface-2)", border: "1px solid var(--border-hairline)", cursor: "pointer", font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>
+              <Ico n={ic} s={13} />{label}
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  function Libraries() {
+    const totalItems = D.sources.reduce((a, s) => a + s.libs.reduce((b, l) => b + l.items, 0), 0);
+    return (
+      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderBottom: "1px solid var(--border-hairline)", flex: "0 0 auto" }}>
+          <Button variant="secondary" startIcon={<Ico n="RefreshCw" s={15} />}>Scan All</Button>
+          <span style={{ flex: 1 }} />
+          <span style={{ font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>
+            <span style={mono}>{D.sources.length}</span> sources · <span style={mono}>{totalItems.toLocaleString()}</span> items
+          </span>
+          <Button variant="primary" startIcon={<Ico n="Plus" s={15} />}>Add Source</Button>
+        </div>
+        <div style={{ flex: 1, overflow: "auto", padding: 20 }}>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(360px, 1fr))", gap: 16, alignItems: "start" }}>
+            {D.sources.map((s, i) => <SourceCard key={i} src={s} />)}
+            <AddSourceCard />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  window.CTVLibraries = Libraries;
+})();
diff --git a/design-system/templates/chicorytv-admin/Shell.jsx b/design-system/templates/chicorytv-admin/Shell.jsx
new file mode 100644
index 000000000..d50a56820
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/Shell.jsx
@@ -0,0 +1,144 @@
+// App shell: left sidebar + compact top bar. Composes DS NavItem/NavSection.
+(function () {
+  const NS = window.ChicoryTVDesignSystem_eb3b61;
+  const { NavItem, NavSection, Input, IconButton, StatusDot, Button } = NS;
+  const Ico = window.Ico;
+
+  const NAV = [
+    { id: "dashboard", label: "Dashboard", icon: "LayoutDashboard" },
+    { id: "channels",  label: "Channels",  icon: "Tv" },
+    { id: "builder",   label: "New Channel", icon: "Plus" },
+    { id: "guide",     label: "Guide",     icon: "LayoutGrid" },
+    { id: "schedules", label: "Schedules", icon: "CalendarClock" },
+    { id: "playouts",  label: "Playouts",  icon: "ListVideo", badge: 3 },
+  ];
+  const NAV_MEDIA = [
+    { id: "collections", label: "Collections", icon: "FolderTree" },
+    { id: "libraries",   label: "Libraries",   icon: "Library" },
+  ];
+  const NAV_SYS = [
+    { id: "settings", label: "Settings", icon: "Settings" },
+  ];
+
+  function Sidebar({ view, setView }) {
+    return (
+      <aside style={{
+        width: "var(--sidebar-w)", flex: "0 0 auto", height: "100%",
+        background: "var(--surface-card)", borderRight: "1px solid var(--border-hairline)",
+        display: "flex", flexDirection: "column",
+      }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 10, height: "var(--topbar-h)", padding: "0 14px", borderBottom: "1px solid var(--border-hairline)" }}>
+          <img src="../../assets/chicory-mark.svg" width="24" height="24" alt="" />
+          <span style={{ font: "var(--weight-semibold) 16px/1 var(--font-sans)", letterSpacing: "-0.3px", color: "var(--text-primary)" }}>
+            Chicory<span style={{ color: "var(--ctv-accent)" }}>TV</span>
+          </span>
+        </div>
+        <nav style={{ flex: 1, overflow: "auto", padding: "8px 8px 16px" }}>
+          {NAV.map((n) => (
+            <NavItem key={n.id} icon={<Ico n={n.icon} />} label={n.label} active={view === n.id}
+              badge={n.badge} badgeTone="warn" onClick={() => setView(n.id)} />
+          ))}
+          <NavSection>Media</NavSection>
+          {NAV_MEDIA.map((n) => (
+            <NavItem key={n.id} icon={<Ico n={n.icon} />} label={n.label} active={view === n.id} onClick={() => setView(n.id)} />
+          ))}
+          <NavSection>System</NavSection>
+          {NAV_SYS.map((n) => (
+            <NavItem key={n.id} icon={<Ico n={n.icon} />} label={n.label} active={view === n.id} onClick={() => setView(n.id)} />
+          ))}
+        </nav>
+        <div style={{ padding: "12px 14px", borderTop: "1px solid var(--border-hairline)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+            <span style={{ font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)" }}>ChicoryTV</span>
+            <span style={{ font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-secondary)" }}>v26.4.0</span>
+          </div>
+          <StatusDot status="ok" label="Healthy" />
+        </div>
+      </aside>
+    );
+  }
+
+  function TopBar({ title, actions }) {
+    return (
+      <header style={{
+        display: "flex", alignItems: "center", gap: 16, height: "var(--topbar-h)", flex: "0 0 auto",
+        padding: "0 20px", background: "var(--surface-app)", borderBottom: "1px solid var(--border-hairline)",
+      }}>
+        <h1 style={{ margin: 0, width: 150, flex: "0 0 auto", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", font: "var(--weight-semibold) var(--text-lg)/1 var(--font-sans)", letterSpacing: "-0.01em", color: "var(--text-primary)" }}>{title}</h1>
+        <div style={{ width: 300 }}>
+          <Input size="sm" leadingIcon={<Ico n="Search" s={15} />} placeholder="Search channels, schedules…" />
+        </div>
+        <div style={{ flex: 1 }} />
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          <ConnectMenu />
+          <span style={{ width: 1, height: 18, background: "var(--border-hairline)", margin: "0 4px" }} />
+          <IconButton title="Documentation"><Ico n="CircleHelp" s={17} /></IconButton>
+          <IconButton title="Notifications"><Ico n="Bell" s={17} /></IconButton>
+          <div style={{ width: 28, height: 28, marginLeft: 4, borderRadius: "50%", background: "var(--ctv-accent-soft)", border: "1px solid rgba(91,124,250,.35)", display: "flex", alignItems: "center", justifyContent: "center", font: "var(--weight-semibold) 11px/1 var(--font-mono)", color: "var(--ctv-accent)" }}>TB</div>
+        </div>
+        {actions}
+      </header>
+    );
+  }
+
+  // GROUND-UP: replaces the two raw "M3U"/"XMLTV" endpoint links with a real
+  // "connect your player" surface — copyable URLs, a scan tile, and options.
+  function EndpointRow({ icon, label, url }) {
+    const [copied, setCopied] = React.useState(false);
+    const copy = () => {
+      try { navigator.clipboard && navigator.clipboard.writeText(url); } catch (e) {}
+      setCopied(true); setTimeout(() => setCopied(false), 1400);
+    };
+    return (
+      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 11px", borderRadius: "var(--radius-sm)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)" }}>
+        <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 30, height: 30, borderRadius: "var(--radius-xs)", background: "var(--ctv-surface-3)", color: "var(--ctv-accent)", flex: "0 0 auto" }}><Ico n={icon} s={15} /></span>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", color: "var(--text-primary)" }}>{label}</div>
+          <div style={{ marginTop: 3, font: "var(--text-2xs)/1 var(--font-mono)", color: "var(--text-secondary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{url}</div>
+        </div>
+        <button type="button" onClick={copy} title="Copy" style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "5px 8px", flex: "0 0 auto", border: "1px solid var(--border-control)", borderRadius: "var(--radius-xs)", background: copied ? "var(--ctv-ok-soft)" : "var(--ctv-surface-2)", color: copied ? "var(--status-ok)" : "var(--text-secondary)", cursor: "pointer", font: "var(--weight-medium) var(--text-2xs)/1 var(--font-sans)" }}>
+          <Ico n={copied ? "Check" : "Copy"} s={12} />{copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+    );
+  }
+
+  function ConnectMenu() {
+    const [open, setOpen] = React.useState(false);
+    const [enabledOnly, setEnabledOnly] = React.useState(true);
+    const q = enabledOnly ? "?enabled=1" : "";
+    return (
+      <div style={{ position: "relative" }}>
+        <button type="button" onClick={() => setOpen((o) => !o)}
+          style={{ display: "inline-flex", alignItems: "center", gap: 7, height: 30, padding: "0 11px", borderRadius: "var(--radius-sm)", border: "1px solid var(--border-control)", background: open ? "var(--ctv-surface-3)" : "var(--ctv-surface-2)", color: "var(--text-primary)", cursor: "pointer", font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)" }}>
+          <Ico n="Cast" s={15} color="var(--ctv-accent)" />Connect
+          <Ico n="ChevronDown" s={13} color="var(--text-disabled)" />
+        </button>
+        {open && (
+          <React.Fragment>
+            <div onClick={() => setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 40 }} />
+            <div style={{ position: "absolute", top: "calc(100% + 8px)", right: 0, zIndex: 41, width: 340, padding: 14, background: "var(--surface-raised)", border: "1px solid var(--border-control)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-pop)" }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+                <span style={{ font: "var(--weight-semibold) var(--text-sm)/1 var(--font-sans)", color: "var(--text-primary)" }}>Connect a player</span>
+                <span style={{ flex: 1 }} />
+                <span style={{ font: "var(--text-2xs)/1 var(--font-sans)", color: "var(--text-disabled)" }}>128 channels</span>
+              </div>
+              <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 12 }}>
+                <EndpointRow icon="ListVideo" label="M3U playlist" url={`chicory.tv/iptv/channels.m3u${q}`} />
+                <EndpointRow icon="CalendarClock" label="XMLTV guide" url={`chicory.tv/iptv/xmltv.xml${q}`} />
+              </div>
+              <label style={{ display: "flex", alignItems: "center", gap: 9, padding: "9px 11px", borderRadius: "var(--radius-sm)", background: "var(--ctv-bg-sunken)", border: "1px solid var(--border-hairline)", cursor: "pointer" }}>
+                <input type="checkbox" checked={enabledOnly} onChange={(e) => setEnabledOnly(e.target.checked)} style={{ accentColor: "var(--ctv-accent)" }} />
+                <span style={{ flex: 1, font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-primary)" }}>Only enabled channels</span>
+              </label>
+              <div style={{ marginTop: 11, display: "flex", alignItems: "center", gap: 7, font: "var(--text-2xs)/1.4 var(--font-sans)", color: "var(--text-disabled)" }}>
+                <Ico n="Info" s={13} />Works with any IPTV player — Jellyfin, TiviMate, VLC, Plex.
+              </div>
+            </div>
+          </React.Fragment>
+        )}
+      </div>
+    );
+  }
+  window.CTVShell = { Sidebar, TopBar };
+})();
diff --git a/design-system/templates/chicorytv-admin/app.html b/design-system/templates/chicorytv-admin/app.html
new file mode 100644
index 000000000..da8d968e9
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/app.html
@@ -0,0 +1,142 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>ChicoryTV Admin</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">
+<script src="./ds-base.js"></script>
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
+<script>
+  // Apply saved preview theme before paint. Primary (warm) = no attribute.
+  try {
+    var t = localStorage.getItem("ctv-theme");
+    if (t === "chicory") t = "cool"; // migrate old default name
+    if (t === "cool" || t === "dual") document.documentElement.dataset.theme = t;
+  } catch (e) {}
+</script>
+<style>
+  html, body { margin: 0; height: 100%; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-sans); }
+  #root { height: 100vh; }
+  * { box-sizing: border-box; }
+  ::-webkit-scrollbar { width: 10px; height: 10px; }
+  ::-webkit-scrollbar-thumb { background: var(--ctv-surface-3); border-radius: 6px; border: 2px solid var(--surface-app); }
+  ::-webkit-scrollbar-track { background: transparent; }
+  /* Overlay scroll regions (custom fading indicator) hide the native bar so
+     content never reflows when a scrollbar appears/disappears. */
+  .ctv-hide-sb::-webkit-scrollbar { width: 0; height: 0; }
+  /* Motion primitives — subtle, iOS/macOS-style. Quick, ease-out, small. */
+  @keyframes ctv-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+  @keyframes ctv-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+  .ctv-lift { transition: transform 240ms cubic-bezier(0.16,1,0.3,1), box-shadow 240ms cubic-bezier(0.16,1,0.3,1); }
+  .ctv-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
+  .ctv-press { transition: transform 150ms cubic-bezier(0.16,1,0.3,1), background 220ms cubic-bezier(0.16,1,0.3,1), color 220ms cubic-bezier(0.16,1,0.3,1), border-color 220ms cubic-bezier(0.16,1,0.3,1); }
+  .ctv-press:active { transform: scale(0.96); }
+  @media (prefers-reduced-motion: reduce) {
+    .ctv-lift, .ctv-press { transition: none; }
+    .ctv-lift:hover, .ctv-press:active { transform: none; }
+    * { scroll-behavior: auto !important; }
+  }
+</style>
+</head>
+<body>
+<div id="root"></div>
+
+<!-- Theme preview switcher — a design-system demo affordance, not product chrome -->
+<div id="theme-switch" style="position:fixed;left:16px;bottom:14px;z-index:999;display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--surface-raised);border:1px solid var(--border-control);border-radius:var(--radius-pill);box-shadow:var(--shadow-pop);font-family:var(--font-sans)">
+  <span style="font:600 10px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text-disabled);padding-left:4px">Theme</span>
+  <button data-theme-btn="warm" title="Warm chicory (primary)" style="width:22px;height:22px;border-radius:50%;border:2px solid transparent;background:#E08A3C;cursor:pointer;padding:0"></button>
+  <button data-theme-btn="cool" title="Cool periwinkle" style="width:22px;height:22px;border-radius:50%;border:2px solid transparent;background:#5B7CFA;cursor:pointer;padding:0"></button>
+  <button data-theme-btn="dual" title="Dual accent" style="width:22px;height:22px;border-radius:50%;border:2px solid transparent;background:linear-gradient(135deg,#5B7CFA 0 50%,#F0663F 50% 100%);cursor:pointer;padding:0"></button>
+</div>
+<script>
+  (function () {
+    var current = document.documentElement.dataset.theme || "warm";
+    var btns = document.querySelectorAll("#theme-switch [data-theme-btn]");
+    function paint() {
+      current = document.documentElement.dataset.theme || "warm";
+      btns.forEach(function (b) {
+        b.style.borderColor = b.getAttribute("data-theme-btn") === current ? "var(--text-primary)" : "transparent";
+      });
+    }
+    btns.forEach(function (b) {
+      b.addEventListener("click", function () {
+        var t = b.getAttribute("data-theme-btn");
+        if (t === "warm") delete document.documentElement.dataset.theme;
+        else document.documentElement.dataset.theme = t;
+        try { localStorage.setItem("ctv-theme", t); } catch (e) {}
+        paint();
+      });
+    });
+    paint();
+  })();
+</script>
+<script src="data.js"></script>
+<script type="text/babel" src="icons.jsx" data-presets="react"></script>
+<script type="text/babel" src="Shell.jsx" data-presets="react"></script>
+<script type="text/babel" src="Dashboard.jsx" data-presets="react"></script>
+<script type="text/babel" src="Channels.jsx" data-presets="react"></script>
+<script type="text/babel" src="ChannelBuilder.jsx" data-presets="react"></script>
+<script type="text/babel" src="ScheduleEditor.jsx" data-presets="react"></script>
+<script type="text/babel" src="Epg.jsx" data-presets="react"></script>
+<script type="text/babel" src="Playouts.jsx" data-presets="react"></script>
+<script type="text/babel" src="ScheduleLibrary.jsx" data-presets="react"></script>
+<script type="text/babel" data-presets="react">
+const { Sidebar, TopBar } = window.CTVShell;
+
+const TITLES = {
+  dashboard: "Dashboard", channels: "Channels", builder: "New Channel", guide: "Guide", schedules: "Schedules",
+  playouts: "Playouts", collections: "Collections", libraries: "Libraries", settings: "Settings",
+};
+
+function Placeholder({ label }) {
+  const Ico = window.Ico;
+  return (
+    <div style={{ height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, color: "var(--text-disabled)" }}>
+      <Ico n="Wrench" s={26} />
+      <span style={{ font: "var(--text-sm)/1 var(--font-sans)" }}>{label} — not part of this UI kit</span>
+    </div>
+  );
+}
+
+function App() {
+  const [view, setView] = React.useState("dashboard");
+  const screens = {
+    dashboard: window.CTVDashboard,
+    channels: window.CTVChannels,
+    builder: window.CTVChannelBuilder,
+    guide: window.CTVEpg,
+    schedules: window.CTVScheduleEditor,
+    playouts: window.CTVPlayouts,
+    libraries: window.CTVLibraries,
+  };
+  const Screen = screens[view];
+  return (
+    <div style={{ display: "flex", height: "100%" }}>
+      <Sidebar view={view} setView={setView} />
+      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", height: "100%" }}>
+        <TopBar title={TITLES[view]} />
+        <main style={{ flex: 1, minHeight: 0, overflow: "auto" }}>
+          {Screen ? <Screen /> : <Placeholder label={TITLES[view]} />}
+        </main>
+      </div>
+    </div>
+  );
+}
+
+function mount() {
+  if (!window.ChicoryTVDesignSystem_eb3b61 || !window.CTVShell || !window.CTVDashboard ||
+      !window.CTVChannels || !window.CTVChannelBuilder || !window.CTVScheduleEditor || !window.CTVEpg ||
+      !window.CTVPlayouts || !window.CTVLibraries) {
+    return setTimeout(mount, 40);
+  }
+  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+}
+mount();
+</script>
+</body>
+</html>
diff --git a/design-system/templates/chicorytv-admin/data.js b/design-system/templates/chicorytv-admin/data.js
new file mode 100644
index 000000000..248a0f3bb
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/data.js
@@ -0,0 +1,130 @@
+// Mock data for the ChicoryTV admin UI kit — vocabulary mirrors ErsatzTV
+// (channels, streaming modes, FFmpeg profiles, playouts, schedules, libraries).
+
+window.CTV_DATA = {
+  channels: [
+    { num: "1.1",  name: "Retro Cartoons",   group: "Cartoons", lang: "English", mode: "HLS Segmenter", profile: "1080p H.264", live: true,  enabled: true,  epg: true },
+    { num: "1.2",  name: "Anime Block",      group: "Cartoons", lang: "Japanese",mode: "HLS Segmenter", profile: "1080p H.264", live: false, enabled: true,  epg: true },
+    { num: "2.1",  name: "News 24",          group: "News",     lang: "English", mode: "HLS Segmenter", profile: "720p H.264",  live: true,  enabled: true,  epg: true },
+    { num: "3.1",  name: "Late Night Movies",group: "Movies",   lang: "English", mode: "MPEG-TS",       profile: "1080p HEVC",  live: false, enabled: true,  epg: true },
+    { num: "7.3",  name: "Sci-Fi Marathon",  group: "Movies",   lang: "English", mode: "MPEG-TS",       profile: "1080p H.264", live: false, enabled: true,  epg: false },
+    { num: "4.2",  name: "Music Videos",     group: "Music",    lang: "English", mode: "HLS Segmenter", profile: "720p H.264",  live: true,  enabled: true,  epg: true },
+    { num: "5.1",  name: "Nature Docs",      group: "Docs",     lang: "Spanish", mode: "HLS Direct",    profile: "—",           live: false, enabled: true,  epg: true },
+    { num: "9.1",  name: "Kids Block",       group: "Kids",     lang: "French",  mode: "HLS Segmenter", profile: "720p H.264",  live: true,  enabled: true,  epg: true },
+    { num: "12.1", name: "Test Pattern",     group: "System",   lang: "English", mode: "MPEG-TS",       profile: "480p H.264",  live: false, enabled: false, epg: false },
+  ],
+  playoutItems: [
+    { start: "20:00:00", finish: "20:24:00", title: "Looney Tunes — Rabbit Fire",        dur: "00:24:00", kind: "content" },
+    { start: "20:24:00", finish: "20:24:30", title: "Station ID — Retro Bumper",         dur: "00:00:30", kind: "filler" },
+    { start: "20:24:30", finish: "20:48:30", title: "Tom & Jerry — The Cat Concerto",    dur: "00:24:00", kind: "content" },
+    { start: "20:48:30", finish: "20:52:30", title: "Retro Ad Break (4 spots)",          dur: "00:04:00", kind: "filler" },
+    { start: "20:52:30", finish: "21:16:30", title: "Popeye — Sindbad the Sailor",       dur: "00:24:00", kind: "content" },
+    { start: "21:16:30", finish: "21:17:00", title: "Station ID — Retro Bumper",         dur: "00:00:30", kind: "filler" },
+    { start: "21:17:00", finish: "21:47:00", title: "The Flintstones — The Big Bank",    dur: "00:30:00", kind: "content" },
+  ],
+  schedules: [
+    { name: "Prime Time Cartoons", items: 14, mode: "Multiple", pad: "30 min" },
+    { name: "Overnight Movies",    items: 6,  mode: "One",      pad: "None" },
+    { name: "Music Rotation",      items: 22, mode: "Shuffle",  pad: "5 min" },
+    { name: "Weekend Docs",        items: 9,  mode: "Ordered",  pad: "15 min" },
+  ],
+  // Media sources — GROUND-UP: libraries grouped under their source connection.
+  sources: [
+    { kind: "Local",    name: "Local media",        detail: "/media/library",        status: "connected", lastScan: "2h ago",
+      libs: [ { name: "Cartoons", media: "Other Videos", items: 1284, status: "ok" }, { name: "Music Videos", media: "Music Videos", items: 2960, status: "ok" } ] },
+    { kind: "Plex",     name: "Plex — Living Room",  detail: "plex.local:32400",      status: "connected", lastScan: "scanning",
+      libs: [ { name: "Movies", media: "Movies", items: 642, status: "scan", pct: 62 } ] },
+    { kind: "Jellyfin", name: "Jellyfin",            detail: "jelly.local:8096",      status: "connected", lastScan: "5h ago",
+      libs: [ { name: "TV Shows", media: "Shows", items: 318, status: "ok" } ] },
+    { kind: "Emby",     name: "Emby",                detail: "emby.local:8096",       status: "warn",      lastScan: "1d ago",
+      libs: [ { name: "Documentaries", media: "Movies", items: 210, status: "warn" } ] },
+  ],
+
+  libraries: [
+    { kind: "Local",    name: "Cartoons",     media: "Other Videos", items: 1284, status: "ok",   pct: 100 },
+    { kind: "Plex",     name: "Movies",       media: "Movies",       items: 642,  status: "scan", pct: 62 },
+    { kind: "Jellyfin", name: "TV Shows",     media: "Shows",        items: 318,  status: "ok",   pct: 100 },
+    { kind: "Local",    name: "Music Videos", media: "Music Videos", items: 2960, status: "ok",   pct: 100 },
+    { kind: "Emby",     name: "Documentaries",media: "Movies",       items: 210,  status: "warn", pct: 100 },
+  ],
+  activity: [
+    { icon: "RefreshCw", tone: "accent", text: "Playout rebuilt for 1.1 Retro Cartoons", time: "2m ago" },
+    { icon: "Radio",     tone: "ok",     text: "Channel 4.2 Music Videos went on air",   time: "9m ago" },
+    { icon: "Library",   tone: "accent", text: "Scan started · Plex Movies",             time: "14m ago" },
+    { icon: "TriangleAlert", tone: "warn", text: "FFmpeg profile 720p H.264 not normalizing audio", time: "28m ago" },
+    { icon: "Check",     tone: "ok",     text: "XMLTV guide regenerated (128 channels)", time: "41m ago" },
+  ],
+
+  // Health checks — real ErsatzTV check titles. status: pass|info|warning|fail
+  health: [
+    { title: "FFmpeg Version",        status: "pass",    detail: "6.1.1 detected" },
+    { title: "Hardware Acceleration", status: "pass",    detail: "VAAPI available" },
+    { title: "FFmpeg Capabilities",   status: "info",    detail: "QSV not configured" },
+    { title: "Movie Metadata",        status: "warning", detail: "12 movies missing metadata" },
+    { title: "Zero Duration",         status: "warning", detail: "3 items report 00:00:00" },
+    { title: "File Not Found",        status: "fail",    detail: "8 files missing on disk" },
+    { title: "Episode Metadata",      status: "pass",    detail: "All episodes tagged" },
+    { title: "VAAPI Driver",          status: "pass",    detail: "iHD driver loaded" },
+  ],
+
+  releaseNotes: {
+    version: "v26.4.0",
+    date: "Jun 28, 2026",
+    items: [
+      "New: drag-to-reorder schedule items in the redesigned editor.",
+      "New: dark EPG grid with jump-to-now.",
+      "Fixed: HLS Segmenter audio drift on some MPEG-TS sources.",
+      "Changed: channel logos now cache for 24h.",
+    ],
+  },
+
+  // Schedule editor — items (left lineup) with full detail (inspector)
+  scheduleItems: [
+    { id: 1, startType: "Fixed",   start: "20:00", collection: "Prime Time Cartoons", collType: "Multi Collection", order: "Shuffle",         mode: "Multiple", count: 3, guide: "Normal", durEst: "~1h 12m", pre: true,  mid: true,  post: false },
+    { id: 2, startType: "Dynamic", start: "—",     collection: "Retro Station IDs",   collType: "Collection",       order: "Random",          mode: "One",      count: 1, guide: "Filler", durEst: "~0m 30s", pre: false, mid: false, post: false },
+    { id: 3, startType: "Fixed",   start: "20:30", collection: "Classic Shorts",      collType: "Smart Collection", order: "Shuffle In Order", mode: "Multiple", count: 2, guide: "Normal", durEst: "~24m",    pre: false, mid: true,  post: false },
+    { id: 4, startType: "Dynamic", start: "—",     collection: "Retro Ad Break",      collType: "Playlist",         order: "Chronological",   mode: "One",      count: 1, guide: "Filler", durEst: "~4m",     pre: false, mid: false, post: false },
+    { id: 5, startType: "Fixed",   start: "21:00", collection: "Feature Presentation",collType: "Television Show",   order: "Season/Episode",  mode: "One",      count: 1, guide: "Normal", durEst: "~1h 36m", pre: true,  mid: false, post: true },
+  ],
+
+  // EPG grid — channels (subset) × programmes. offset/span in 30-min slots from grid start.
+  epgStart: "20:00",
+  epgSlots: ["20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00"],
+  epg: [
+    { num: "1.1", name: "Retro Cartoons", programmes: [
+      { title: "Looney Tunes", sub: "Rabbit Fire", cat: "Animation", offset: 0, span: 1 },
+      { title: "Tom & Jerry", sub: "The Cat Concerto", cat: "Animation", offset: 1, span: 1, live: true },
+      { title: "Popeye", sub: "Sindbad the Sailor", cat: "Animation", offset: 2, span: 1 },
+      { title: "The Flintstones", sub: "The Big Bank", cat: "Animation", offset: 3, span: 2 },
+      { title: "Bumper", sub: "Station ID", cat: "Filler", offset: 5, span: 1, filler: true },
+    ]},
+    { num: "2.1", name: "News 24", programmes: [
+      { title: "World Tonight", sub: "Evening bulletin", cat: "News", offset: 0, span: 2, live: true },
+      { title: "Market Watch", sub: "Close of day", cat: "News", offset: 2, span: 1 },
+      { title: "Weather", sub: "7-day outlook", cat: "News", offset: 3, span: 1, filler: true },
+      { title: "The Interview", sub: "Long form", cat: "Talk", offset: 4, span: 2 },
+    ]},
+    { num: "3.1", name: "Late Night Movies", programmes: [
+      { title: "Blade Runner", sub: "1982 · Sci-Fi", cat: "Movie", offset: 0, span: 4, live: true },
+      { title: "Alien", sub: "1979 · Horror", cat: "Movie", offset: 4, span: 3 },
+    ]},
+    { num: "4.2", name: "Music Videos", programmes: [
+      { title: "80s Block", sub: "Synthpop hour", cat: "Music", offset: 0, span: 2, live: true },
+      { title: "Ad Break", sub: "", cat: "Filler", offset: 2, span: 1, filler: true },
+      { title: "90s Block", sub: "Alt rotation", cat: "Music", offset: 3, span: 2 },
+      { title: "Chart Countdown", sub: "Top 20", cat: "Music", offset: 5, span: 2 },
+    ]},
+    { num: "5.1", name: "Nature Docs", programmes: [
+      { title: "Blue Planet", sub: "The Deep", cat: "Documentary", offset: 0, span: 2, live: true },
+      { title: "Planet Earth", sub: "Mountains", cat: "Documentary", offset: 2, span: 2 },
+      { title: "Bumper", sub: "Station ID", cat: "Filler", offset: 4, span: 1, filler: true },
+      { title: "Frozen Planet", sub: "To the Ends", cat: "Documentary", offset: 5, span: 2 },
+    ]},
+    { num: "9.1", name: "Kids Block", programmes: [
+      { title: "Sesame Street", sub: "Episode 4102", cat: "Kids", offset: 0, span: 2, live: true },
+      { title: "Bluey", sub: "Keepy Uppy", cat: "Kids", offset: 2, span: 1 },
+      { title: "Ad Break", sub: "", cat: "Filler", offset: 3, span: 1, filler: true },
+      { title: "Peppa Pig", sub: "Muddy Puddles", cat: "Kids", offset: 4, span: 3 },
+    ]},
+  ],
+};
diff --git a/design-system/templates/chicorytv-admin/ds-base.js b/design-system/templates/chicorytv-admin/ds-base.js
new file mode 100644
index 000000000..9c8e98fc2
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/ds-base.js
@@ -0,0 +1,29 @@
+// Loads this design system into the template. In a consuming project, point
+// base at the bound DS folder relative to this file (e.g. '_ds/<folder>' at
+// the project root, '../_ds/<folder>' one level down) — one line to edit.
+(() => {
+  const base = '../..';
+  for (const p of ["tokens/fonts.css","tokens/colors.css","tokens/typography.css","tokens/spacing.css","tokens/radius-elevation-motion.css","tokens/themes.css","styles.css"]) {
+    const l = document.createElement('link');
+    l.rel = 'stylesheet'; l.href = base + '/' + p;
+    document.head.appendChild(l);
+  }
+  // The component bundle MUST be defined before the type="text/babel" screen
+  // scripts are transpiled/executed: each screen IIFE destructures
+  // window.<Namespace> at definition time and would throw if it were absent.
+  // appendChild loads async and loses that race, so while this file is being
+  // parsed synchronously in <head> we insert a parser-blocking <script> via
+  // document.write — guaranteeing the bundle loads first. (The bundle
+  // evaluates without referencing React, so sitting ahead of the React tags
+  // is harmless.) Late/dynamic inclusion falls back to appendChild.
+  const src = base + '/_ds_bundle.js';
+  const onerror = 'ds-base.js: failed to load ' + src + ' — if this is a consuming project, point the base line in ds-base.js at the bound _ds/<folder> tree relative to this page (e.g. _ds/<folder> at the project root, ../_ds/<folder> one level down); in a fresh design system this can just mean the bundle is not compiled yet';
+  if (document.readyState === 'loading') {
+    document.write('<script src="' + src + '" onerror="console.error(&quot;' + onerror.replace(/"/g, '&quot;') + '&quot;)"><\/script>');
+  } else {
+    const s = document.createElement('script');
+    s.src = src;
+    s.onerror = () => console.error(onerror);
+    document.head.appendChild(s);
+  }
+})();
diff --git a/design-system/templates/chicorytv-admin/icons.jsx b/design-system/templates/chicorytv-admin/icons.jsx
new file mode 100644
index 000000000..12ead8d29
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/icons.jsx
@@ -0,0 +1,18 @@
+// Shared Lucide icon helper for the ChicoryTV UI kit.
+// Renders a stroke icon by name into a span. Requires window.lucide (UMD).
+function Ico({ n, s = 16, color, style }) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!ref.current || !window.lucide) return;
+    ref.current.innerHTML = "";
+    const def = window.lucide.icons[n];
+    if (!def) return;
+    const el = window.lucide.createElement(def);
+    el.setAttribute("width", s);
+    el.setAttribute("height", s);
+    ref.current.appendChild(el);
+  });
+  return <span ref={ref} style={{ display: "inline-flex", color: color || "currentColor", ...style }} />;
+}
+
+window.Ico = Ico;
diff --git a/design-system/templates/chicorytv-admin/support.js b/design-system/templates/chicorytv-admin/support.js
new file mode 100644
index 000000000..d2f00df00
--- /dev/null
+++ b/design-system/templates/chicorytv-admin/support.js
@@ -0,0 +1,1658 @@
+// GENERATED from dc-runtime/src/*.ts — do not edit. Rebuild with `cd dc-runtime && bun run build`.
+"use strict";
+(() => {
+  var __defProp = Object.defineProperty;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  // src/react.ts
+  function getReact() {
+    const R = window.React;
+    if (!R) throw new Error("dc-runtime: window.React is not available yet");
+    return R;
+  }
+  function getReactDOM() {
+    const RD = window.ReactDOM;
+    if (!RD) throw new Error("dc-runtime: window.ReactDOM is not available yet");
+    return RD;
+  }
+  var h = ((...args) => getReact().createElement(
+    ...args
+  ));
+
+  // src/parse.ts
+  function parseDcDocument(doc) {
+    const dc = doc.querySelector("x-dc");
+    if (!dc) return null;
+    const scriptEl = doc.querySelector("script[data-dc-script]");
+    const { props, preview } = parseDataProps(
+      scriptEl?.getAttribute("data-props") ?? null
+    );
+    return {
+      template: dc.innerHTML,
+      js: scriptEl ? scriptEl.textContent || "" : "",
+      props,
+      preview
+    };
+  }
+  function parseDcText(src) {
+    const openMatch = /<x-dc(?:\s[^>]*)?>/.exec(src);
+    if (!openMatch) return null;
+    const close = src.lastIndexOf("</x-dc>");
+    if (close === -1 || close < openMatch.index) return null;
+    const template = src.slice(openMatch.index + openMatch[0].length, close);
+    const doc = new DOMParser().parseFromString(src, "text/html");
+    const scriptEl = doc.querySelector("script[data-dc-script]");
+    const { props, preview } = parseDataProps(
+      scriptEl?.getAttribute("data-props") ?? null
+    );
+    return {
+      template,
+      js: scriptEl ? scriptEl.textContent || "" : "",
+      props,
+      preview
+    };
+  }
+  function parseDataProps(raw) {
+    if (!raw) return { props: null, preview: null };
+    let parsed;
+    try {
+      parsed = JSON.parse(raw);
+    } catch {
+      return { props: null, preview: null };
+    }
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return { props: null, preview: null };
+    }
+    const obj = parsed;
+    const preview = obj.$preview && typeof obj.$preview === "object" ? obj.$preview : null;
+    const rest = {};
+    for (const k of Object.keys(obj)) {
+      if (k[0] !== "$") rest[k] = obj[k];
+    }
+    return { props: Object.keys(rest).length ? rest : null, preview };
+  }
+  function dcNameFromPath(pathname) {
+    let p = pathname || "";
+    try {
+      p = decodeURIComponent(p);
+    } catch {
+    }
+    const base = p.split("/").pop() || "Root";
+    return base.replace(/\.dc\.html$/, "").replace(/\.html?$/, "") || "Root";
+  }
+
+  // src/boot.ts
+  var BASE_CSS = `
+    .sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
+      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
+      border-radius:2px;box-sizing:border-box;overflow:hidden}
+    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
+    html.sc-dc-streaming .sc-placeholder,
+    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
+      background:color-mix(in srgb,currentColor 5%,transparent);
+      border-color:transparent}
+    html.sc-dc-streaming .sc-placeholder::before,
+    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
+      position:absolute;inset:0;pointer-events:none;
+      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
+      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
+    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
+    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
+      background:color-mix(in srgb,currentColor 8%,transparent)}
+    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
+      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
+    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
+      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
+      border-radius:2px;box-sizing:border-box;color:transparent;
+      user-select:none}
+    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
+      color:color-mix(in srgb,currentColor 50%,transparent);
+      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
+      padding:0 3px}
+    .sc-host.sc-has-error{position:relative}
+    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
+      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
+      border-radius:4px;white-space:pre-wrap;pointer-events:none}
+    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts \u2014 keep both
+       in sync until dc-runtime regains a build step. */
+    @media print {
+      @page { margin: 0.5cm; }
+      figure, table { break-inside: avoid; }
+      #dc-root, #dc-root > .sc-host { height: auto; }
+      *, *::before, *::after {
+        print-color-adjust: exact; -webkit-print-color-adjust: exact;
+        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
+        animation-delay: -99s !important; animation-duration: .001s !important;
+        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
+        animation-play-state: running !important; transition-duration: 0s !important;
+      }
+    }
+  `;
+  var FULL_PAGE_CSS = "html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}";
+  function rootNameForDocument(doc, loc) {
+    let bootPath = loc.pathname || "";
+    if (!/\.dc\.html?$/i.test(safeDecode(bootPath))) {
+      try {
+        bootPath = new URL(doc.baseURI || "/").pathname;
+      } catch {
+      }
+    }
+    return dcNameFromPath(bootPath);
+  }
+  function safeDecode(s) {
+    try {
+      return decodeURIComponent(s);
+    } catch {
+      return s;
+    }
+  }
+  function boot(runtime, doc = document) {
+    const parsed = parseDcDocument(doc);
+    if (!parsed) return null;
+    const React = getReact();
+    const rootName = rootNameForDocument(doc, location);
+    runtime.markFetched(rootName);
+    runtime.setRootName(rootName);
+    runtime.adoptParsed(rootName, parsed);
+    fetch(location.href).then((res) => res.ok ? res.text() : "").then((t) => {
+      const raw = t ? parseDcText(t) : null;
+      if (raw?.template) runtime.updateHtml(rootName, raw.template);
+    }).catch(() => {
+    });
+    const dc = doc.querySelector("x-dc");
+    const hostEl = doc.createElement("div");
+    hostEl.id = "dc-root";
+    dc.replaceWith(hostEl);
+    if (!parsed.preview) {
+      const s = doc.createElement("style");
+      s.textContent = FULL_PAGE_CSS;
+      doc.head.appendChild(s);
+    }
+    const Root = runtime.getDC(rootName);
+    const entry = runtime.registry.get(rootName);
+    function StandaloneRoot() {
+      const [, setTick] = React.useState(0);
+      React.useEffect(() => {
+        const sub = () => setTick((n) => n + 1);
+        entry.subs.add(sub);
+        return () => {
+          entry.subs.delete(sub);
+        };
+      }, []);
+      const defaults = React.useMemo(() => {
+        const d = {};
+        for (const k in entry.propsMeta || {}) {
+          const v = entry.propsMeta?.[k]?.default;
+          if (v !== void 0) d[k] = v;
+        }
+        return d;
+      }, [entry.propsMeta]);
+      return h(Root, { ...defaults, ...entry.propOverrides || {} });
+    }
+    const ReactDOM = getReactDOM();
+    if (ReactDOM.createRoot)
+      ReactDOM.createRoot(hostEl).render(h(StandaloneRoot));
+    else ReactDOM.render(h(StandaloneRoot), hostEl);
+    return rootName;
+  }
+
+  // src/expr.ts
+  var IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*/;
+  var NUMBER_RE = /^-?\d+(\.\d+)?$/;
+  function resolve(vals, src) {
+    const expr = String(src).trim();
+    if (!expr) return void 0;
+    if (expr[0] === "(" && expr[expr.length - 1] === ")" && parensWrapWhole(expr)) {
+      return resolve(vals, expr.slice(1, -1));
+    }
+    const eq = findTopLevelEquality(expr);
+    if (eq) {
+      const lv = resolve(vals, expr.slice(0, eq.index));
+      const rv = resolve(vals, expr.slice(eq.index + eq.op.length));
+      switch (eq.op) {
+        case "===":
+          return lv === rv;
+        case "!==":
+          return lv !== rv;
+        case "==":
+          return lv == rv;
+        default:
+          return lv != rv;
+      }
+    }
+    if (expr[0] === "!") return !resolve(vals, expr.slice(1));
+    if (expr === "true") return true;
+    if (expr === "false") return false;
+    if (expr === "null") return null;
+    if (expr === "undefined") return void 0;
+    if (NUMBER_RE.test(expr)) return Number(expr);
+    if (expr.length >= 2 && (expr[0] === '"' || expr[0] === "'") && expr[expr.length - 1] === expr[0]) {
+      return expr.slice(1, -1);
+    }
+    return resolvePath(vals, expr);
+  }
+  function parensWrapWhole(expr) {
+    let depth = 0;
+    for (let i = 0; i < expr.length - 1; i++) {
+      if (expr[i] === "(") depth++;
+      else if (expr[i] === ")") {
+        depth--;
+        if (depth === 0) return false;
+      }
+    }
+    return true;
+  }
+  function findTopLevelEquality(expr) {
+    let depth = 0;
+    for (let i = 0; i < expr.length; i++) {
+      const c = expr[i];
+      if (c === "[" || c === "(") depth++;
+      else if (c === "]" || c === ")") depth--;
+      else if (depth === 0 && (c === "=" || c === "!") && expr[i + 1] === "=") {
+        if (i > 0 && (expr[i - 1] === "=" || expr[i - 1] === "!")) continue;
+        if (!expr.slice(0, i).trim()) continue;
+        const op = expr[i + 2] === "=" ? c + "==" : c + "=";
+        return { index: i, op };
+      }
+    }
+    return null;
+  }
+  function resolvePath(vals, expr) {
+    const head = expr.match(IDENT_RE);
+    if (!head) return void 0;
+    let cur = vals == null ? void 0 : vals[head[0]];
+    let i = head[0].length;
+    while (i < expr.length) {
+      if (expr[i] === ".") {
+        const m = expr.slice(i + 1).match(IDENT_RE) || expr.slice(i + 1).match(/^\d+/);
+        if (!m) return void 0;
+        cur = cur == null ? void 0 : cur[m[0]];
+        i += 1 + m[0].length;
+      } else if (expr[i] === "[") {
+        let depth = 1;
+        let j = i + 1;
+        while (j < expr.length && depth > 0) {
+          if (expr[j] === "[") depth++;
+          else if (expr[j] === "]") {
+            depth--;
+            if (depth === 0) break;
+          }
+          j++;
+        }
+        if (depth !== 0) return void 0;
+        const key = resolve(vals, expr.slice(i + 1, j));
+        cur = cur == null ? void 0 : cur[key];
+        i = j + 1;
+      } else {
+        return void 0;
+      }
+    }
+    return cur;
+  }
+
+  // src/encode.ts
+  var CAMEL_ATTR = "sc-camel-";
+  var INLINE_TEXT_TAGS = new Set(
+    "a abbr b bdi bdo br cite code del dfn em i ins kbd mark q s samp small span strike strong sub sup u var wbr".split(
+      " "
+    )
+  );
+  var RAW_WRAP = {
+    select: "sc-raw-select",
+    table: "sc-raw-table",
+    tbody: "sc-raw-tbody",
+    thead: "sc-raw-thead",
+    tfoot: "sc-raw-tfoot",
+    tr: "sc-raw-tr",
+    td: "sc-raw-td",
+    th: "sc-raw-th",
+    caption: "sc-raw-caption"
+  };
+  var RAW_UNWRAP = Object.fromEntries(
+    Object.entries(RAW_WRAP).map(([k, v]) => [v, k])
+  );
+  var EVENT_MAP = {
+    onclick: "onClick",
+    onchange: "onChange",
+    oninput: "onInput",
+    onsubmit: "onSubmit",
+    onkeydown: "onKeyDown",
+    onkeyup: "onKeyUp",
+    onkeypress: "onKeyPress",
+    onmousedown: "onMouseDown",
+    onmouseup: "onMouseUp",
+    onmouseenter: "onMouseEnter",
+    onmouseleave: "onMouseLeave",
+    onfocus: "onFocus",
+    onblur: "onBlur",
+    ondoubleclick: "onDoubleClick",
+    oncontextmenu: "onContextMenu"
+  };
+  var ATTRS = `(?:[^>"']|"[^"]*"|'[^']*')*`;
+  var IMPORT_SELF_CLOSE_RE = new RegExp(
+    "<(x-import|dc-import)(" + ATTRS + ")/>",
+    "gi"
+  );
+  var CAMEL_ATTR_RE = /(\s)([a-z]+[A-Z][A-Za-z0-9]*)(\s*=)/g;
+  function encodeCase(html) {
+    html = html.replace(
+      IMPORT_SELF_CLOSE_RE,
+      (_, t, a) => "<" + t + a + "></" + t + ">"
+    );
+    html = html.replace(/<helmet(\s|>)/gi, "<sc-helmet$1");
+    html = html.replace(/<\/helmet\s*>/gi, "</sc-helmet>");
+    html = html.replace(
+      CAMEL_ATTR_RE,
+      (_, sp, name, eq) => sp + CAMEL_ATTR + name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()) + eq
+    );
+    for (const [real, alias] of Object.entries(RAW_WRAP)) {
+      html = html.replace(
+        new RegExp("(</?)" + real + "(?=[\\s>])", "gi"),
+        "$1" + alias
+      );
+    }
+    return html;
+  }
+  function kebabToCamel(s) {
+    return s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+  }
+  function cssToObj(css) {
+    const o = {};
+    for (const decl of css.split(";")) {
+      const i = decl.indexOf(":");
+      if (i < 0) continue;
+      const prop = decl.slice(0, i).trim();
+      o[prop.startsWith("--") ? prop : kebabToCamel(prop)] = decl.slice(i + 1).trim();
+    }
+    return o;
+  }
+  function compileAttr(raw) {
+    const whole = raw.match(/^\s*\{\{([\s\S]+?)\}\}\s*$/);
+    if (whole) {
+      const path = whole[1];
+      return (vals) => resolve(vals, path);
+    }
+    if (raw.includes("{{")) {
+      const parts = raw.split(/\{\{([\s\S]+?)\}\}/g);
+      return (vals) => parts.map((s, i) => i & 1 ? resolve(vals, s) ?? "" : s).join("");
+    }
+    return () => raw;
+  }
+
+  // src/compile.ts
+  function collectProps(node, kind, host) {
+    const propGetters = [];
+    const pseudoClasses = [];
+    let hintSize = null;
+    for (const { name, value } of [...node.attributes]) {
+      if (name === "sc-name" || name === "data-dc-tpl") continue;
+      let key = name;
+      if (key.startsWith(CAMEL_ATTR))
+        key = kebabToCamel(key.slice(CAMEL_ATTR.length));
+      if (key === "hint-size") {
+        hintSize = value;
+        continue;
+      }
+      if (key.startsWith("style-")) {
+        pseudoClasses.push(host.pseudoClass(key.slice(6), value));
+        continue;
+      }
+      if (kind !== "dom") {
+        if (key.includes("-") && !(kind === "x-import" && (key.startsWith("aria-") || key.startsWith("data-"))))
+          key = kebabToCamel(key);
+      } else {
+        if (key === "class") key = "className";
+        else if (key === "for") key = "htmlFor";
+        else if (key.startsWith("on"))
+          key = EVENT_MAP[key] || "on" + key[2].toUpperCase() + key.slice(3);
+      }
+      propGetters.push([key, compileAttr(value)]);
+    }
+    return { propGetters, pseudoClasses, hintSize };
+  }
+  var HOST_STYLE_PROPS = /* @__PURE__ */ new Set([
+    "position",
+    "left",
+    "right",
+    "top",
+    "bottom",
+    "inset",
+    "width",
+    "height",
+    "z-index",
+    "transform"
+  ]);
+  function hostPositionStyle(style) {
+    const all = typeof style === "string" ? cssToObj(style) : style != null && typeof style === "object" ? style : null;
+    if (!all) return void 0;
+    const out = {};
+    for (const [k, v] of Object.entries(all)) {
+      const kebab = k.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
+      if (HOST_STYLE_PROPS.has(kebab)) out[k] = v;
+    }
+    return Object.keys(out).length ? out : void 0;
+  }
+  function compileTemplate(html, host) {
+    const tpl = document.createElement("template");
+    //! nosemgrep: direct-inner-html-assignment
+    tpl.innerHTML = encodeCase(html);
+    let tplN = 0;
+    (function stamp(node) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        node.setAttribute("data-dc-tpl", String(tplN++));
+      }
+      for (const c of node.childNodes) stamp(c);
+    })(tpl.content);
+    const builders = walkChildren(tpl.content, host);
+    const render = ((vals, ctx) => builders.map((b, i) => b(vals || {}, ctx, i)));
+    render.__annotated = tpl.innerHTML;
+    return render;
+  }
+  function walkChildren(node, host) {
+    return [...node.childNodes].map((c) => walk(c, host)).filter((b) => b != null);
+  }
+  function walk(node, host) {
+    if (node.nodeType === Node.TEXT_NODE) return walkText(node);
+    if (node.nodeType !== Node.ELEMENT_NODE) return null;
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    if (tag === "sc-for") return walkFor(el, host);
+    if (tag === "sc-if") return walkIf(el, host);
+    if (tag === "x-import") return walkXImport(el, host);
+    if (tag === "sc-helmet") return host.helmet(el);
+    if (tag === "dc-import") return walkComponent(el, host);
+    return walkElement(el, host);
+  }
+  var warnedHoles = /* @__PURE__ */ new Set();
+  function warnUnresolved(ctx, what) {
+    const key = (ctx?.__name || "?") + "\0" + what;
+    if (warnedHoles.has(key)) return;
+    warnedHoles.add(key);
+    console.warn("[dc-runtime] " + (ctx?.__name || "template") + ": " + what);
+  }
+  function walkText(node) {
+    const txt = node.nodeValue ?? "";
+    if (!txt.includes("{{")) {
+      if (!txt.trim() && !txt.includes(" ")) return null;
+      return () => txt;
+    }
+    const parts = txt.split(/\{\{([\s\S]+?)\}\}/g);
+    return (vals, ctx, key) => h(
+      getReact().Fragment,
+      { key },
+      ...parts.map((p, i) => {
+        if (!(i & 1)) return p;
+        const v = resolve(vals, p);
+        if (v === void 0) {
+          if (!ctx?.__streamingNow) {
+            if (document.body?.hasAttribute("data-dc-editor-on")) {
+              return h(
+                "span",
+                { key: i, className: "sc-interp sc-unresolved" },
+                "{{ " + p.trim() + " }}"
+              );
+            }
+            warnUnresolved(
+              ctx,
+              "{{ " + p.trim() + " }} never resolved \u2014 rendered as empty"
+            );
+            return null;
+          }
+          return h(
+            "span",
+            { key: i, className: "sc-interp sc-missing" },
+            p.trim()
+          );
+        }
+        if (getReact().isValidElement(v) || Array.isArray(v)) {
+          return h(getReact().Fragment, { key: i }, v);
+        }
+        if (v === null || typeof v === "boolean") return null;
+        return h("span", { key: i, className: "sc-interp" }, String(v));
+      })
+    );
+  }
+  function walkFor(el, host) {
+    const listGet = compileAttr(el.getAttribute("list") || "");
+    const asName = el.getAttribute("as") || "item";
+    const hintN = parseInt(el.getAttribute("hint-placeholder-count") || "0", 10);
+    const kids = walkChildren(el, host);
+    const listSrc = el.getAttribute("list") || "";
+    return (vals, ctx, key) => {
+      let list = listGet(vals);
+      if (!Array.isArray(list)) {
+        if (!ctx?.__streamingNow) {
+          if (list !== void 0 && list !== null) {
+            warnUnresolved(
+              ctx,
+              'sc-for list="' + listSrc + '" is not an array (' + typeof list + ")"
+            );
+          }
+          list = [];
+        } else {
+          list = hintN > 0 ? Array(hintN).fill(void 0) : [];
+        }
+      }
+      return h(
+        getReact().Fragment,
+        { key },
+        list.map((item, i) => {
+          const sub = { ...vals, [asName]: item, $index: i };
+          return h(
+            getReact().Fragment,
+            { key: i },
+            kids.map((b, j) => b(sub, ctx, j))
+          );
+        })
+      );
+    };
+  }
+  function walkIf(el, host) {
+    const valGet = compileAttr(el.getAttribute("value") || "");
+    const hintRaw = el.getAttribute("hint-placeholder-val");
+    const hintGet = hintRaw != null ? compileAttr(hintRaw) : null;
+    const kids = walkChildren(el, host);
+    return (vals, ctx, key) => {
+      let v = valGet(vals);
+      if (v === void 0 && hintGet && ctx?.__streamingNow) v = hintGet(vals);
+      return v ? h(
+        getReact().Fragment,
+        { key },
+        kids.map((b, j) => b(vals, ctx, j))
+      ) : null;
+    };
+  }
+  function walkComponent(el, host) {
+    const name = el.getAttribute("name") || el.getAttribute("component") || "";
+    el.removeAttribute("name");
+    el.removeAttribute("component");
+    const tplId = el.getAttribute("data-dc-tpl");
+    const styleRaw = el.getAttribute("style");
+    el.removeAttribute("style");
+    const styleGet = styleRaw != null ? compileAttr(styleRaw) : null;
+    const { propGetters, hintSize } = collectProps(el, "dc-import", host);
+    const kids = walkChildren(el, host);
+    return (vals, ctx, key) => {
+      const props = {
+        key,
+        __hintSize: hintSize,
+        __tplId: tplId,
+        __hostStyle: styleGet ? hostPositionStyle(styleGet(vals)) : void 0
+      };
+      for (const [k, g] of propGetters) {
+        const v = g(vals);
+        if (k === "dcProps") {
+          if (v && typeof v === "object") Object.assign(props, v);
+          continue;
+        }
+        props[k] = v;
+      }
+      if (kids.length) props.children = kids.map((b, j) => b(vals, ctx, j));
+      return h(host.component(name), props);
+    };
+  }
+  function walkXImport(el, host) {
+    const globalNameGet = compileAttr(
+      el.getAttribute("component-from-global-scope") || ""
+    );
+    const exportNameGet = compileAttr(
+      el.getAttribute("component") || el.getAttribute("name") || ""
+    );
+    const fromRaw = el.getAttribute("from") || el.getAttribute("src") || el.getAttribute("import") || "";
+    const urls = fromRaw.trim() ? fromRaw.trim().split(/\s+/) : [];
+    const url = urls.length ? urls[urls.length - 1] : "";
+    const kindOf = (u) => /\.(jsx|tsx)(\?|#|$)/i.test(u) ? "jsx" : "js";
+    const tplId = el.getAttribute("data-dc-tpl");
+    const styleRaw = el.getAttribute("style");
+    el.removeAttribute("style");
+    const styleGet = styleRaw != null ? compileAttr(styleRaw) : null;
+    const wrap = tplId != null || styleGet != null;
+    const { propGetters, hintSize } = collectProps(el, "x-import", host);
+    const hasContent = el.children.length > 0 || !!(el.textContent || "").trim();
+    const kids = hasContent ? walkChildren(el, host) : [];
+    const urlBindable = fromRaw.includes("{{");
+    if (urls.length && !urlBindable) {
+      let prev;
+      for (const u of urls) prev = host.loadExternal(kindOf(u), u, prev);
+    }
+    const evalName = (g, vals) => {
+      const v = g(vals);
+      const s = v == null ? "" : String(v);
+      return s.includes("{{") ? "" : s;
+    };
+    return (vals, ctx, key) => {
+      const globalName = evalName(globalNameGet, vals);
+      const name = globalName || evalName(exportNameGet, vals);
+      const C = !name || urlBindable ? null : globalName ? host.resolveExternalGlobal(url, globalName) : host.resolveExternal(url, name);
+      const hostStyle = styleGet ? hostPositionStyle(styleGet(vals)) : void 0;
+      const wrapper = wrap ? {
+        key,
+        className: "sc-host-x",
+        "data-dc-tpl": tplId,
+        style: hostStyle || { display: "contents" }
+      } : null;
+      if (!C) {
+        const error = urlBindable ? "x-import `from` cannot contain {{ \u2026 }} \u2014 module URLs are resolved at parse time; use a literal URL" : host.resolveExternalError(url, name);
+        const ph = host.placeholder({
+          key: wrapper ? void 0 : key,
+          name,
+          hintSize,
+          error
+        });
+        return wrapper ? h("div", wrapper, ph) : ph;
+      }
+      const props = wrapper ? {} : { key };
+      let unresolvedHole = false;
+      for (const [k, g] of propGetters) {
+        if (k === "component" || k === "componentFromGlobalScope" || k === "from") {
+          continue;
+        }
+        const v = g(vals);
+        if (v === void 0) unresolvedHole = true;
+        if (k === "dcProps") {
+          if (v && typeof v === "object") Object.assign(props, v);
+          continue;
+        }
+        props[k] = v;
+      }
+      if (unresolvedHole && ctx?.__htmlStreamingNow) {
+        const ph = host.placeholder({
+          key: wrapper ? void 0 : key,
+          name,
+          hintSize,
+          error: null
+        });
+        return wrapper ? h("div", wrapper, ph) : ph;
+      }
+      if (kids.length) props.children = kids.map((b, j) => b(vals, ctx, j));
+      return wrapper ? h("div", wrapper, h(C, props)) : h(C, props);
+    };
+  }
+  function contentKey(el) {
+    const clone = el.cloneNode(true);
+    for (const d of clone.querySelectorAll("*")) {
+      while (d.attributes.length) d.removeAttribute(d.attributes[0].name);
+    }
+    const s = clone.innerHTML;
+    let h2 = 5381;
+    for (let i = 0; i < s.length; i++) h2 = (h2 << 5) + h2 + s.charCodeAt(i) | 0;
+    return s.length + "." + (h2 >>> 0).toString(36);
+  }
+  var NEVER_CONTENT_KEYED = new Set(
+    "script style textarea option title select canvas iframe video audio".split(
+      " "
+    )
+  );
+  var NOT_INLINE_SELECTOR = ":not(" + [...INLINE_TEXT_TAGS].join(",") + ")";
+  function walkElement(el, host) {
+    const realTag = RAW_UNWRAP[el.localName] || el.localName;
+    const tplId = el.getAttribute("data-dc-tpl");
+    const inlineOnly = el.childNodes.length > 0 && !NEVER_CONTENT_KEYED.has(realTag) && el.querySelector(NOT_INLINE_SELECTOR) === null;
+    const keySuffix = inlineOnly ? "|" + contentKey(el) : "";
+    const { propGetters, pseudoClasses } = collectProps(el, "dom", host);
+    const kids = walkChildren(el, host);
+    return (vals, ctx, key) => {
+      const props = {
+        key: key + keySuffix,
+        "data-dc-tpl": tplId
+      };
+      for (const [k, g] of propGetters) {
+        let v = g(vals);
+        if (k === "style" && typeof v === "string") v = cssToObj(v);
+        if ((k === "value" || k === "checked") && v === void 0) {
+          v = k === "checked" ? false : "";
+        }
+        props[k] = v;
+      }
+      if (pseudoClasses.length) {
+        props.className = [props.className, ...pseudoClasses].filter(Boolean).join(" ");
+      }
+      return h(realTag, props, ...kids.map((b, j) => b(vals, ctx, j)));
+    };
+  }
+
+  // src/logic.ts
+  var StreamableLogic = class {
+    constructor(props) {
+      __publicField(this, "props");
+      __publicField(this, "state", {});
+      /** Back-pointer to the wrapper component, installed after construction. */
+      __publicField(this, "__host");
+      this.props = props || {};
+    }
+    setState(update, cb) {
+      this.__host && this.__host.__setLogicState(update, cb);
+    }
+    forceUpdate() {
+      this.__host && this.__host.forceUpdate();
+    }
+    componentDidMount() {
+    }
+    componentDidUpdate(_prevProps) {
+    }
+    componentWillUnmount() {
+    }
+    /** The flat object the template renders against (merged over props). */
+    renderVals() {
+      return {};
+    }
+  };
+  function evalDcLogic(src) {
+    //! nosemgrep: eval-and-function-constructor
+    const fn = new Function(
+      "DCLogic",
+      "StreamableLogic",
+      "React",
+      src + '\n;return (typeof Component!=="undefined"&&Component)||undefined;'
+    );
+    return fn(StreamableLogic, StreamableLogic, getReact());
+  }
+
+  // src/component.ts
+  function shallowEqual(a, b) {
+    if (!b) return false;
+    const ak = Object.keys(a).filter((k) => k !== "children");
+    const bk = Object.keys(b).filter((k) => k !== "children");
+    if (ak.length !== bk.length) return false;
+    for (const k of ak) if (a[k] !== b[k]) return false;
+    return true;
+  }
+  function Placeholder({
+    name,
+    hintSize,
+    streaming,
+    error
+  }) {
+    const [w, hgt] = (hintSize || "100%,60px").split(",");
+    return h(
+      "div",
+      {
+        className: "sc-placeholder" + (streaming ? " sc-streaming" : ""),
+        style: { width: w.trim(), height: hgt && hgt.trim() },
+        title: name
+      },
+      error ? h(
+        "div",
+        { className: "sc-placeholder-error" },
+        (name ? name + ": " : "") + error
+      ) : null
+    );
+  }
+  function hintToMin(hint) {
+    if (!hint) return void 0;
+    const [w, hgt] = hint.split(",");
+    return { minWidth: w.trim(), minHeight: hgt && hgt.trim() };
+  }
+  function createComponentFactory(registry, ensureFetched) {
+    const React = getReact();
+    const AncestorContext = React.createContext([]);
+    class StreamableComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        __publicField(this, "__name");
+        __publicField(this, "__sub");
+        __publicField(this, "__needsDidMount", false);
+        /** Snapshot of the registry's streaming flags taken at render time —
+         *  builders read it off the RenderCtx (this) to pick placeholder vs
+         *  render-nothing for unresolved values. */
+        __publicField(this, "__streamingNow", false);
+        __publicField(this, "__htmlStreamingNow", false);
+        /** When a construct throws, remember the (class, registry.ver, props)
+         *  triple so render-time reconcile doesn't re-attempt it on every parent
+         *  re-render. A registry bump (new class, template, external module
+         *  resolving via bumpAll) changes `ver` and breaks the memo so an
+         *  env-dependent constructor can self-heal. */
+        __publicField(this, "__failedLogic", null);
+        __publicField(this, "__failedUserProps", null);
+        __publicField(this, "__failedVer", -1);
+        /** Per-instance constructor error — kept here (not on the registry entry)
+         *  so one instance's successful construct can't hide a sibling's failure,
+         *  and a construct can never wipe an eval error `updateJs` recorded on
+         *  `r.logicError`. */
+        __publicField(this, "__ctorError", null);
+        __publicField(this, "logic");
+        this.__name = props.__name;
+        this.state = { __v: 0, __err: null };
+        this.__sub = () => {
+          if (this.state.__err) this.setState({ __err: null });
+          this.forceUpdate();
+        };
+        this.__makeLogic(registry.get(this.__name).Logic, null);
+        ensureFetched(this.__name);
+      }
+      /** Error-boundary hook: a render crash anywhere in this DC's subtree
+       *  (its own template, an x-import'd component, a child DC without its
+       *  own deeper boundary) lands here instead of unmounting the page. */
+      static getDerivedStateFromError(e) {
+        return { __err: e instanceof Error && e.message ? e.message : String(e) };
+      }
+      componentDidCatch(e, info) {
+        console.error(
+          "[dc-runtime] render error in <" + this.__name + ">:",
+          e,
+          info?.componentStack || ""
+        );
+      }
+      /** Instantiate the logic class (or the no-op base) and adopt `prevState`
+       *  over its initial state — used both at mount and on hot-swap. */
+      __makeLogic(Logic, prevState) {
+        const L = Logic || StreamableLogic;
+        try {
+          this.logic = new L(this.__userProps());
+          this.__failedLogic = null;
+          this.__failedUserProps = null;
+          this.__ctorError = null;
+        } catch (e) {
+          console.error(e);
+          this.__failedLogic = Logic;
+          this.__failedUserProps = this.__userProps();
+          this.__failedVer = registry.get(this.__name).ver;
+          this.__ctorError = this.__name + ": " + (e instanceof Error && e.message ? e.message : String(e));
+          this.logic = new StreamableLogic(
+            this.__userProps()
+          );
+        }
+        this.logic.__host = this;
+        if (prevState)
+          this.logic.state = { ...this.logic.state || {}, ...prevState };
+      }
+      /** The props the author's logic + template see — internal __-prefixed
+       *  wiring stripped. */
+      __userProps() {
+        const { __name, __hintSize, __tplId, __hostStyle, ...rest } = this.props;
+        return rest;
+      }
+      __setLogicState(update, cb) {
+        const prev = this.logic.state;
+        const patch = typeof update === "function" ? update(prev) : update;
+        this.logic.state = { ...prev, ...patch };
+        this.setState((s) => ({ __v: s.__v + 1 }), cb);
+      }
+      /** Swap the logic instance when the registry's Logic class changed
+       *  (streaming completion, hot reload). State carries over; didMount
+       *  re-fires after the swap commits so refs exist. */
+      __reconcileLogic() {
+        const r = registry.get(this.__name);
+        const Next = r.Logic;
+        const Cur = this.logic.constructor;
+        if (Next === Cur || !Next && Cur === StreamableLogic || Next === this.__failedLogic && r.ver === this.__failedVer && shallowEqual(this.__userProps(), this.__failedUserProps)) {
+          return;
+        }
+        if (!this.__needsDidMount) {
+          try {
+            this.logic.componentWillUnmount();
+          } catch (e) {
+            console.error(e);
+          }
+        }
+        this.__makeLogic(Next, this.logic.state);
+        this.__needsDidMount = true;
+      }
+      componentDidMount() {
+        registry.get(this.__name).subs.add(this.__sub);
+        try {
+          this.logic.componentDidMount();
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      componentDidUpdate(prevProps) {
+        this.logic.props = this.__userProps();
+        if (this.__needsDidMount) {
+          if (this.state.__err || !registry.get(this.__name).tpl) return;
+          this.__needsDidMount = false;
+          try {
+            this.logic.componentDidMount();
+          } catch (e) {
+            console.error(e);
+          }
+        } else {
+          try {
+            this.logic.componentDidUpdate(prevProps);
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+      componentWillUnmount() {
+        registry.get(this.__name).subs.delete(this.__sub);
+        if (!this.__needsDidMount) {
+          try {
+            this.logic.componentWillUnmount();
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+      render() {
+        const r = registry.get(this.__name);
+        const cls = "sc-host" + (r.htmlStreaming ? " sc-streaming-html" : "") + (r.jsStreaming ? " sc-streaming-js" : "");
+        const hintStyle = r.htmlStreaming ? hintToMin(this.props.__hintSize) : void 0;
+        const hostStyle = this.props.__hostStyle || hintStyle ? { ...hintStyle || {}, ...this.props.__hostStyle || {} } : void 0;
+        const hostBase = {
+          className: cls,
+          style: hostStyle,
+          "data-sc-name": this.__name,
+          "data-dc-tpl": this.props.__tplId
+        };
+        const chain = Array.isArray(this.context) ? this.context : [];
+        if (chain.includes(this.__name)) {
+          const cycle = [
+            ...chain.slice(chain.indexOf(this.__name)),
+            this.__name
+          ].join(" \u2192 ");
+          return h(
+            "div",
+            { ...hostBase, className: cls + " sc-has-error" },
+            h(Placeholder, {
+              name: this.__name,
+              hintSize: this.props.__hintSize,
+              error: "circular import: " + cycle
+            })
+          );
+        }
+        if (this.state.__err) {
+          return h(
+            "div",
+            { ...hostBase, className: cls + " sc-has-error" },
+            h(
+              "div",
+              { className: "sc-logic-error", "data-omelette-chrome": "" },
+              this.__name + ": " + this.state.__err
+            ),
+            h(Placeholder, {
+              name: this.__name,
+              hintSize: this.props.__hintSize,
+              error: this.state.__err
+            })
+          );
+        }
+        this.__reconcileLogic();
+        if (!r.tpl) {
+          return h(
+            "div",
+            hostBase,
+            h(Placeholder, { name: this.__name, hintSize: this.props.__hintSize })
+          );
+        }
+        const userProps = this.__userProps();
+        this.logic.props = userProps;
+        let vals = userProps;
+        let renderErr = r.logicError || this.__ctorError;
+        try {
+          vals = { ...userProps, ...this.logic.renderVals() || {} };
+        } catch (e) {
+          console.error(e);
+          renderErr = this.__name + ".renderVals(): " + (e instanceof Error && e.message ? e.message : String(e));
+        }
+        this.__streamingNow = !!(r.htmlStreaming || r.jsStreaming);
+        this.__htmlStreamingNow = !!r.htmlStreaming;
+        return h(
+          "div",
+          { ...hostBase, className: cls + (renderErr ? " sc-has-error" : "") },
+          renderErr && h(
+            "div",
+            { className: "sc-logic-error", "data-omelette-chrome": "" },
+            renderErr
+          ),
+          h(
+            AncestorContext.Provider,
+            { value: [...chain, this.__name] },
+            r.tpl(vals, this)
+          )
+        );
+      }
+    }
+    __publicField(StreamableComponent, "contextType", AncestorContext);
+    const named = /* @__PURE__ */ new Map();
+    function getDC(name) {
+      const hit = named.get(name);
+      if (hit) return hit;
+      function Dispatcher(p) {
+        const [, setTick] = React.useState(0);
+        React.useEffect(() => {
+          const sub = () => setTick((n) => n + 1);
+          registry.get(name).subs.add(sub);
+          return () => {
+            registry.get(name).subs.delete(sub);
+          };
+        }, []);
+        ensureFetched(name);
+        return h(StreamableComponent, { ...p, __name: name });
+      }
+      Dispatcher.displayName = name;
+      named.set(name, Dispatcher);
+      return Dispatcher;
+    }
+    return {
+      getDC,
+      StreamableComponent
+    };
+  }
+
+  // src/external.ts
+  var isCustomElementName = (n) => !n.includes(".") && n.includes("-");
+  function isRenderableType(g) {
+    if (typeof g === "function") return !isElementClass(g);
+    return typeof g === "object" && g !== null && typeof g.$$typeof === "symbol";
+  }
+  function resolveDottedPath(root, name) {
+    let cur = root;
+    for (const seg of name.split(".")) {
+      if (cur == null) return void 0;
+      cur = cur[seg];
+    }
+    return cur;
+  }
+  var BABEL_URL = "https://unpkg.com/@babel/standalone@7.29.0/babel.min.js";
+  var BABEL_SRI = "sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y";
+  var GLOBAL_POLL_INTERVAL_MS = 50;
+  var GLOBAL_POLL_TIMEOUT_MS = 3e4;
+  function createExternalModules(onResolved) {
+    const cache = /* @__PURE__ */ new Map();
+    let babelLoading = null;
+    const reportedMissing = /* @__PURE__ */ new Map();
+    const polling = /* @__PURE__ */ new Set();
+    function ensureBabel() {
+      if (window.Babel) return Promise.resolve();
+      if (babelLoading) return babelLoading;
+      babelLoading = new Promise((res, rej) => {
+        const s = document.createElement("script");
+        s.src = BABEL_URL;
+        s.integrity = BABEL_SRI;
+        s.crossOrigin = "anonymous";
+        s.onload = () => res();
+        s.onerror = rej;
+        document.head.appendChild(s);
+      });
+      return babelLoading;
+    }
+    const pending = /* @__PURE__ */ new Map();
+    function load(kind, url, after) {
+      const existing = pending.get(url);
+      if (existing) return existing;
+      cache.set(url, null);
+      console.info("[dc-runtime] x-import: loading", url, "(" + kind + ")");
+      const ready = Promise.all([
+        kind === "jsx" ? ensureBabel() : Promise.resolve(),
+        after ?? Promise.resolve()
+      ]);
+      const p = ready.then(() => fetch(url)).then((r) => {
+        if (!r.ok) throw new Error("HTTP " + r.status);
+        return r.text();
+      }).then((src) => {
+        const code = kind === "jsx" ? window.Babel.transform(src, {
+          filename: url,
+          presets: ["react", "typescript"]
+        }).code : src;
+        const module = { exports: {} };
+        const before = new Set(Object.keys(window));
+        //! nosemgrep: eval-and-function-constructor
+        new Function("React", "module", "exports", "require", code)(
+          getReact(),
+          module,
+          module.exports,
+          () => ({})
+        );
+        const globals = {};
+        for (const k of Object.keys(window)) {
+          if (!before.has(k) && typeof window[k] === "function") {
+            globals[k] = window[k];
+          }
+        }
+        cache.set(url, { mod: module.exports, globals });
+        console.info(
+          "[dc-runtime] x-import: loaded",
+          url,
+          "\u2014 exports:",
+          Object.keys(module.exports),
+          "window globals:",
+          Object.keys(globals)
+        );
+        onResolved();
+      }).catch((e) => {
+        cache.set(url, {
+          mod: {},
+          globals: {},
+          error: "failed to load: " + (e instanceof Error && e.message ? e.message : String(e))
+        });
+        console.error(
+          "[dc-runtime] x-import: FAILED to load",
+          url,
+          "(" + kind + ")",
+          e
+        );
+        onResolved();
+      });
+      pending.set(url, p);
+      return p;
+    }
+    function resolve2(url, name) {
+      const entry = cache.get(url);
+      if (!entry) return null;
+      const { mod, globals } = entry;
+      const C = mod && mod[name] || globals && globals[name] || typeof window !== "undefined" && window[name] || mod && mod.default;
+      if (typeof C === "function") return C;
+      const key = url + "\0" + name;
+      if (!reportedMissing.has(key)) {
+        reportedMissing.set(
+          key,
+          entry.error || 'no export named "' + name + '" (has: ' + Object.keys(mod).join(", ") + ")"
+        );
+        console.error(
+          "[dc-runtime] x-import: module",
+          url,
+          "loaded but has no component named",
+          JSON.stringify(name),
+          "\u2014 available exports:",
+          Object.keys(mod),
+          "window globals:",
+          Object.keys(globals),
+          ". The module must `module.exports = {" + name + "}` or set `window." + name + "`."
+        );
+      }
+      return null;
+    }
+    function waitForGlobal(name) {
+      if (polling.has(name)) return;
+      polling.add(name);
+      const started = Date.now();
+      const isCE = isCustomElementName(name);
+      const tick = () => {
+        const found = isCE ? customElements.get(name) : isRenderableType(resolveDottedPath(window, name));
+        if (found) {
+          polling.delete(name);
+          onResolved();
+          return;
+        }
+        if (Date.now() - started >= GLOBAL_POLL_TIMEOUT_MS) {
+          console.warn(
+            "[dc-runtime] x-import: global",
+            JSON.stringify(name),
+            "never appeared on window after " + GLOBAL_POLL_TIMEOUT_MS + "ms"
+          );
+          return;
+        }
+        setTimeout(tick, GLOBAL_POLL_INTERVAL_MS);
+      };
+      setTimeout(tick, GLOBAL_POLL_INTERVAL_MS);
+    }
+    function resolveGlobal(url, name) {
+      const isCE = isCustomElementName(name);
+      if (!url) {
+        if (isCE) {
+          if (customElements.get(name)) return name;
+          waitForGlobal(name);
+          return null;
+        }
+        const g2 = resolveDottedPath(window, name);
+        if (isRenderableType(g2)) return g2;
+        waitForGlobal(name);
+        return null;
+      }
+      const entry = cache.get(url);
+      if (!entry) return null;
+      if (isCE && customElements.get(name)) return name;
+      const g = entry.globals[name] ?? resolveDottedPath(window, name);
+      if (isRenderableType(g)) return g;
+      if (name.includes(".")) return null;
+      const key = url + "\0global\0" + name;
+      if (!reportedMissing.has(key)) {
+        reportedMissing.set(key, null);
+        if (isCE && !customElements.get(name)) {
+          console.warn(
+            "[dc-runtime] x-import:",
+            url,
+            "loaded but no custom element",
+            JSON.stringify(name),
+            "is registered and window." + name + " is not a function \u2014 rendering <" + name + "> as an unknown element."
+          );
+        }
+      }
+      return name;
+    }
+    function getError(url, name) {
+      const entry = cache.get(url);
+      if (entry?.error) return entry.error;
+      return reportedMissing.get(url + "\0" + name) || null;
+    }
+    return { load, resolve: resolve2, resolveGlobal, getError };
+  }
+  function isElementClass(g) {
+    try {
+      return typeof g === "function" && typeof HTMLElement !== "undefined" && g.prototype instanceof HTMLElement;
+    } catch {
+      return false;
+    }
+  }
+
+  // src/atomics.ts
+  var ATOMIC_CSS = (
+    // layout
+    ".fx{display:flex}.col{display:flex;flex-direction:column}.grid{display:grid}.ac{align-items:center}.jc{justify-content:center}.jb{justify-content:space-between}.f1{flex:1}.noshrink{flex-shrink:0}.wrap{flex-wrap:wrap}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs20{font-size:20px}.fs22{font-size:22px}.upper{text-transform:uppercase}.tc{text-align:center}.nowrap{white-space:nowrap}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}.m0{margin:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.posrel{position:relative}.posabs{position:absolute}.round{border-radius:50%}.ohide{overflow:hidden}.bbox{box-sizing:border-box}.pointer{cursor:pointer}.w100{width:100%}.b0{border:none}"
+  );
+
+  // src/helmet.ts
+  var DESIGN_DOC_MODE_RE = /<meta\b[^>]*\bname\s*=\s*["']design_doc_mode["'][^>]*\b(?:content|value)\s*=\s*["'](\w+)["']/i;
+  var CANVAS_BG_LIGHT = "#f0eee6";
+  var CANVAS_BG_DARK = "#2e2c26";
+  function createHelmetManager(doc, isStreaming) {
+    const mounted = /* @__PURE__ */ new Set();
+    const live = /* @__PURE__ */ new Map();
+    let designDocMode = null;
+    let canvasStyleEl = null;
+    let appTheme = "light";
+    try {
+      const ds = doc.documentElement.dataset.theme;
+      appTheme = ds === "dark" || ds === "light" ? ds : new URLSearchParams(doc.defaultView?.location.search ?? "").get(
+        "theme"
+      ) === "dark" ? "dark" : "light";
+    } catch {
+    }
+    function applyCanvasBg() {
+      if (!canvasStyleEl) return;
+      const bg = appTheme === "dark" ? CANVAS_BG_DARK : CANVAS_BG_LIGHT;
+      canvasStyleEl.textContent = `html,body{background:${bg}}#dc-root>.sc-host{position:relative}`;
+    }
+    function postDesignMode(mode) {
+      if (window.parent === window) return;
+      try {
+        window.parent.postMessage({ type: "__dc_design_mode", mode }, "*");
+      } catch {
+      }
+    }
+    function setDesignDocMode(mode) {
+      if (mode === designDocMode) return;
+      designDocMode = mode;
+      postDesignMode(mode);
+      if (mode === "canvas") {
+        doc.documentElement.setAttribute("data-dc-canvas", "");
+        canvasStyleEl = doc.createElement("style");
+        canvasStyleEl.setAttribute("data-dc-canvas", "");
+        applyCanvasBg();
+        doc.head.appendChild(canvasStyleEl);
+      } else {
+        doc.documentElement.removeAttribute("data-dc-canvas");
+        canvasStyleEl?.remove();
+        canvasStyleEl = null;
+      }
+    }
+    window.addEventListener("message", (e) => {
+      const type = e.data && e.data.type;
+      if (type === "__dc_theme") {
+        const t = e.data.theme;
+        if (t === "light" || t === "dark") {
+          appTheme = t;
+          doc.documentElement.dataset.theme = t;
+          applyCanvasBg();
+        }
+        return;
+      }
+      if (!designDocMode || type !== "__dc_probe") return;
+      postDesignMode(designDocMode);
+    });
+    function compile(node) {
+      const raw = [...node.children];
+      const helmetClosed = node.nextSibling != null || node.parentNode?.nextSibling != null;
+      if (node.hasAttribute("data-dc-atomics") && !mounted.has("__dc-atomics")) {
+        mounted.add("__dc-atomics");
+        const el = doc.createElement("style");
+        el.id = "__dc-atomics";
+        el.textContent = ATOMIC_CSS;
+        doc.head.appendChild(el);
+      }
+      return (_vals, ctx) => {
+        const name = ctx && ctx.__name || "";
+        const streaming = !!(name && isStreaming(name));
+        for (let i = 0; i < raw.length; i++) {
+          const child = raw[i];
+          const tag = child.tagName;
+          const mayBePartial = streaming && !helmetClosed && i === raw.length - 1;
+          if (tag === "SCRIPT") {
+            if (mayBePartial) continue;
+            const key = "SCRIPT|" + (child.getAttribute("src") || child.textContent || "");
+            if (mounted.has(key)) continue;
+            mounted.add(key);
+            const el = doc.createElement("script");
+            for (const { name: an, value } of [...child.attributes])
+              el.setAttribute(an, value);
+            if (child.textContent) el.textContent = child.textContent;
+            doc.head.appendChild(el);
+          } else if (tag === "LINK" || tag === "META") {
+            if (mayBePartial) continue;
+            const key = tag + "|" + (child.getAttribute("href") || child.getAttribute("src") || child.outerHTML);
+            if (mounted.has(key)) continue;
+            mounted.add(key);
+            doc.head.appendChild(child.cloneNode(true));
+          } else {
+            const key = name + "|" + i;
+            let el = live.get(key);
+            if (!el || el.tagName !== tag) {
+              if (el) el.remove();
+              el = doc.createElement(tag.toLowerCase());
+              live.set(key, el);
+              doc.head.appendChild(el);
+            }
+            for (const { name: an, value } of [...child.attributes]) {
+              if (el.getAttribute(an) !== value) el.setAttribute(an, value);
+            }
+            if (el.textContent !== child.textContent)
+              el.textContent = child.textContent;
+          }
+        }
+        return null;
+      };
+    }
+    return { compile, setDesignDocMode };
+  }
+
+  // src/pseudo.ts
+  function createPseudoSheet(doc) {
+    let el = null;
+    const cache = /* @__PURE__ */ new Map();
+    let n = 0;
+    return (pseudo, css) => {
+      const k = pseudo + "|" + css;
+      const hit = cache.get(k);
+      if (hit) return hit;
+      if (!el) {
+        el = doc.createElement("style");
+        doc.head.appendChild(el);
+      }
+      const cls = "scp" + (n++).toString(36);
+      const sel = pseudo === "before" || pseudo === "after" ? "." + cls + "::" + pseudo : "." + cls + ":" + pseudo;
+      el.sheet.insertRule(sel + "{" + css + "}", el.sheet.cssRules.length);
+      cache.set(k, cls);
+      return cls;
+    };
+  }
+
+  // src/registry.ts
+  function createRegistry() {
+    const entries = /* @__PURE__ */ Object.create(null);
+    function get(name) {
+      return entries[name] || (entries[name] = {
+        html: "",
+        tpl: null,
+        Logic: null,
+        jsStreaming: false,
+        htmlStreaming: false,
+        ver: 0,
+        subs: /* @__PURE__ */ new Set(),
+        fetched: false
+      });
+    }
+    function bump(name) {
+      const r = get(name);
+      r.ver++;
+      for (const fn of r.subs) fn();
+    }
+    return {
+      entries,
+      get,
+      bump,
+      bumpAll() {
+        for (const n in entries) bump(n);
+      }
+    };
+  }
+
+  // src/runtime.ts
+  var COMPONENT_DIR = ".";
+  function createRuntime(doc = document) {
+    const registry = createRegistry();
+    const pseudoClass = createPseudoSheet(doc);
+    const helmet = createHelmetManager(
+      doc,
+      (name) => registry.get(name).htmlStreaming
+    );
+    const external = createExternalModules(() => registry.bumpAll());
+    const factory = createComponentFactory(registry, ensureFetched);
+    const host = {
+      component: (name) => factory.getDC(name),
+      placeholder: (props) => h(Placeholder, props),
+      helmet: (node) => helmet.compile(node),
+      loadExternal: (kind, url, after) => external.load(kind, url, after),
+      resolveExternal: (url, name) => external.resolve(url, name),
+      resolveExternalGlobal: (url, name) => external.resolveGlobal(url, name),
+      resolveExternalError: (url, name) => external.getError(url, name),
+      pseudoClass
+    };
+    function ensureFetched(name) {
+      const r = registry.get(name);
+      if (r.fetched) return;
+      r.fetched = true;
+      const url = COMPONENT_DIR + "/" + encodeURIComponent(name) + ".dc.html";
+      fetch(url).then((res) => {
+        if (!res.ok) {
+          console.error(
+            "[dc-runtime] sibling fetch for <" + name + "/> failed:",
+            url,
+            "returned",
+            res.status,
+            "\u2014 the reference renders as an empty placeholder."
+          );
+          return "";
+        }
+        return res.text();
+      }).then((t) => {
+        if (!t) return;
+        const parsed = parseDcText(t);
+        if (!parsed) {
+          console.error(
+            "[dc-runtime] sibling fetch for <" + name + "/>:",
+            url,
+            "has no <x-dc> block \u2014 not a Design Component."
+          );
+          return;
+        }
+        if (parsed.props) r.propsMeta = parsed.props;
+        if (parsed.preview) r.preview = parsed.preview;
+        if (parsed.template && !r.html) updateHtml(name, parsed.template);
+        if (parsed.js && !r.Logic) updateJs(name, parsed.js);
+      }).catch(
+        (e) => console.error(
+          "[dc-runtime] sibling fetch for <" + name + "/> threw:",
+          url,
+          e
+        )
+      );
+    }
+    let rootName = null;
+    function updateHtml(name, html) {
+      const r = registry.get(name);
+      r.html = html;
+      if (name === rootName) {
+        const mode = DESIGN_DOC_MODE_RE.exec(html)?.[1] ?? null;
+        if (mode || !r.htmlStreaming) helmet.setDesignDocMode(mode);
+      }
+      try {
+        r.tpl = compileTemplate(html, host);
+      } catch (e) {
+        console.error("[dc-runtime] template compile FAILED for", name, e);
+      }
+      registry.bump(name);
+    }
+    function updateJs(name, src) {
+      const r = registry.get(name);
+      const seq = r.jsSeq = (r.jsSeq || 0) + 1;
+      try {
+        const Cls = evalDcLogic(src);
+        if (r.jsSeq !== seq) return;
+        if (typeof Cls !== "function") {
+          r.logicError = name + ".dc.html: <script data-dc-script> must define `class Component extends DCLogic`";
+        } else {
+          r.logicError = null;
+          r.Logic = Cls;
+        }
+      } catch (e) {
+        if (r.jsSeq !== seq) return;
+        console.error(
+          "[dc-runtime] logic class eval FAILED for",
+          name,
+          "\u2014 the template renders with props only.",
+          e
+        );
+        r.logicError = name + ": " + (e instanceof Error && e.message ? e.message : String(e));
+      }
+      registry.bump(name);
+    }
+    function setStreaming(name, kind, on) {
+      const r = registry.get(name);
+      if (kind === "html") r.htmlStreaming = !!on;
+      else r.jsStreaming = !!on;
+      let any = false;
+      for (const n in registry.entries) {
+        const e = registry.entries[n];
+        if (e && (e.htmlStreaming || e.jsStreaming)) {
+          any = true;
+          break;
+        }
+      }
+      doc.documentElement.classList.toggle("sc-dc-streaming", any);
+      registry.bump(name);
+    }
+    function dcUpdate(name, kind, content, streaming) {
+      if (streaming) registry.get(name).fetched = true;
+      if (kind === "html") {
+        setStreaming(name, "html", !!streaming);
+        updateHtml(name, content);
+      } else if (kind === "js") {
+        setStreaming(name, "js", !!streaming);
+        if (!streaming) updateJs(name, content);
+      } else if (kind === "props") {
+        const { props, preview } = parseDataProps(content);
+        const r = registry.get(name);
+        r.propsMeta = props ?? void 0;
+        r.preview = preview;
+        registry.bump(name);
+      }
+    }
+    function setProps(name, overrides) {
+      registry.get(name).propOverrides = overrides && typeof overrides === "object" ? { ...overrides } : null;
+      registry.bump(name);
+    }
+    function adoptParsed(name, parsed) {
+      if (!parsed) return;
+      const r = registry.get(name);
+      if (parsed.props) r.propsMeta = parsed.props;
+      if (parsed.preview) r.preview = parsed.preview;
+      if (parsed.template) updateHtml(name, parsed.template);
+      if (parsed.js) updateJs(name, parsed.js);
+    }
+    return {
+      registry,
+      getDC: factory.getDC,
+      updateHtml,
+      updateJs,
+      dcUpdate,
+      setProps,
+      adoptParsed,
+      setRootName: (name) => {
+        rootName = name;
+      },
+      markFetched: (name) => {
+        registry.get(name).fetched = true;
+      },
+      annotatedTemplate: (name) => {
+        const r = registry.get(name);
+        return r.tpl && r.tpl.__annotated || null;
+      },
+      templateSource: (name) => registry.get(name).html || null,
+      StreamableLogic
+    };
+  }
+
+  // src/index.ts
+  var REACT_URL = "https://unpkg.com/react@18.3.1/umd/react.production.min.js";
+  var REACT_SRI = "sha384-DGyLxAyjq0f9SPpVevD6IgztCFlnMF6oW/XQGmfe+IsZ8TqEiDrcHkMLKI6fiB/Z";
+  var REACT_DOM_URL = "https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js";
+  var REACT_DOM_SRI = "sha384-gTGxhz21lVGYNMcdJOyq01Edg0jhn/c22nsx0kyqP0TxaV5WVdsSH1fSDUf5YJj1";
+  function hideRawTemplate() {
+    const s = document.createElement("style");
+    s.textContent = "x-dc{display:none!important}";
+    document.head.appendChild(s);
+  }
+  function loadScript(src, integrity) {
+    return new Promise((resolve2, reject) => {
+      //! nosemgrep: create-script-element
+      const s = document.createElement("script");
+      s.src = src;
+      s.integrity = integrity;
+      s.crossOrigin = "anonymous";
+      s.async = false;
+      s.onload = () => resolve2();
+      s.onerror = () => reject(new Error(`failed to load ${src}`));
+      document.head.appendChild(s);
+    });
+  }
+  function loadReactUmd() {
+    const w = window;
+    if (w.React && w.ReactDOM) return Promise.resolve();
+    return Promise.all([
+      loadScript(REACT_URL, REACT_SRI),
+      loadScript(REACT_DOM_URL, REACT_DOM_SRI)
+    ]).then(() => void 0);
+  }
+  function init() {
+    const runtime = createRuntime(document);
+    let rootName = "Root";
+    const baseCss = document.createElement("style");
+    baseCss.textContent = BASE_CSS;
+    document.head.prepend(baseCss);
+    const notifyHost = () => {
+      if (window.parent === window) return;
+      const r = runtime.registry.entries[rootName];
+      try {
+        window.parent.postMessage(
+          {
+            type: "__dc_booted",
+            rootName,
+            propsMeta: r && r.propsMeta || null,
+            preview: r && r.preview || null
+          },
+          "*"
+        );
+      } catch {
+      }
+    };
+    const api = {
+      __dcUpdate: (name, kind, content, streaming) => {
+        runtime.dcUpdate(name, kind, content, streaming);
+        if (name === rootName && !streaming && kind === "props") notifyHost();
+      },
+      __dcSetProps: (name, overrides) => runtime.setProps(name, overrides),
+      /** Name of the component currently mounted as the page root — DC tools
+       *  push their template-stream here when targeting "the open page". */
+      __dcRootName: () => rootName,
+      /** Editor bridge — the encoded, `data-dc-tpl`-annotated template source.
+       *  The host editor parses this into its own template DOM so it can map a
+       *  rendered node (carrying the same `data-dc-tpl`) back to the source
+       *  node that emitted it. Returns the encoded form (`<sc-comp>`,
+       *  `sc-camel-*` attrs); the editor decodes on serialize. */
+      __dcAnnotatedTemplate: (name) => runtime.annotatedTemplate(name),
+      /** Editor bridge — the *original* (decoded) template source. */
+      __dcTemplateSource: (name) => runtime.templateSource(name),
+      __dcBoot: () => {
+        rootName = boot(runtime, document) ?? rootName;
+        notifyHost();
+      },
+      __dcRegistry: runtime.registry.entries,
+      getDC: (name) => runtime.getDC(name),
+      // `DCLogic` is the documented base class name; `StreamableLogic` is the
+      // implementation alias kept for any project that already references it.
+      DCLogic: runtime.StreamableLogic,
+      StreamableLogic: runtime.StreamableLogic
+    };
+    Object.assign(window, api);
+    window.__dcContentKeyed = true;
+    if (document.readyState !== "loading") api.__dcBoot();
+    else document.addEventListener("DOMContentLoaded", () => api.__dcBoot());
+  }
+  hideRawTemplate();
+  loadReactUmd().then(init).catch((err) => {
+    console.error("[dc] failed to load React or boot:", err);
+    throw err;
+  });
+})();
diff --git a/design-system/tokens/colors.css b/design-system/tokens/colors.css
new file mode 100644
index 000000000..1736c56fd
--- /dev/null
+++ b/design-system/tokens/colors.css
@@ -0,0 +1,65 @@
+/* ============================================================
+   ChicoryTV — Color tokens
+   Dark, technical admin surface. PRIMARY scheme = warm chicory
+   (roasted-amber accent + chicory-leaf green). Cooler periwinkle and
+   dual-accent schemes live in tokens/themes.css as opt-in [data-theme] scopes.
+   ============================================================ */
+:root {
+  /* --- Base palette (raw values) — warm chicory --- */
+  --ctv-bg:            #12100E; /* app background, deepest */
+  --ctv-bg-sunken:     #0C0B09; /* wells, code, inset areas */
+  --ctv-surface:       #1C1917; /* cards, panels, rows */
+  --ctv-surface-2:     #241F1A; /* raised: menus, popovers, hover rows */
+  --ctv-surface-3:     #2C2620; /* selected row, active chip */
+
+  --ctv-border:        #2E2823; /* hairline dividers, card edges */
+  --ctv-border-strong: #3C352D; /* input borders, stronger separation */
+
+  --ctv-text:          #F0EBE4; /* primary text */
+  --ctv-text-muted:    #A89E92; /* secondary / labels */
+  --ctv-text-faint:    #726860; /* disabled, placeholder, meta */
+
+  /* --- Accent: roasted chicory amber --- */
+  --ctv-accent:        #E08A3C;
+  --ctv-accent-hover:  #EC9A52;
+  --ctv-accent-press:  #C9762E;
+  --ctv-accent-soft:   rgba(224, 138, 60, 0.15); /* tinted fills, active nav bg */
+  --ctv-accent-ring:   rgba(224, 138, 60, 0.45); /* focus ring */
+
+  /* --- Secondary: chicory-leaf green --- */
+  --ctv-secondary:      #6B8F71;
+  --ctv-secondary-soft: rgba(107, 143, 113, 0.16);
+
+  /* --- Status --- */
+  --ctv-ok:            #3FB984;
+  --ctv-ok-soft:       rgba(63, 185, 132, 0.14);
+  --ctv-warn:          #E0A83D;
+  --ctv-warn-soft:     rgba(224, 168, 61, 0.14);
+  --ctv-error:         #E5484D;
+  --ctv-error-soft:    rgba(229, 72, 77, 0.14);
+  --ctv-live:          #E08A3C; /* on-air / live rides the amber accent */
+  --ctv-live-soft:     rgba(224, 138, 60, 0.16);
+
+  /* --- Semantic aliases --- */
+  --surface-app:       var(--ctv-bg);
+  --surface-card:      var(--ctv-surface);
+  --surface-raised:    var(--ctv-surface-2);
+  --surface-selected:  var(--ctv-surface-3);
+  --border-hairline:   var(--ctv-border);
+  --border-control:    var(--ctv-border-strong);
+
+  --text-primary:      var(--ctv-text);
+  --text-secondary:    var(--ctv-text-muted);
+  --text-disabled:     var(--ctv-text-faint);
+  --text-on-accent:    #1F1204;
+
+  --action-primary:      var(--ctv-accent);
+  --action-primary-hover:var(--ctv-accent-hover);
+  --action-primary-press:var(--ctv-accent-press);
+  --focus-ring:          var(--ctv-accent-ring);
+
+  --status-ok:    var(--ctv-ok);
+  --status-warn:  var(--ctv-warn);
+  --status-error: var(--ctv-error);
+  --status-live:  var(--ctv-live);
+}
diff --git a/design-system/tokens/fonts.css b/design-system/tokens/fonts.css
new file mode 100644
index 000000000..e3dab45e2
--- /dev/null
+++ b/design-system/tokens/fonts.css
@@ -0,0 +1,5 @@
+/* ChicoryTV webfonts.
+   No brand font ships with ErsatzTV (MudBlazor defaults to Roboto), so ChicoryTV
+   adopts Geist + Geist Mono — a modern, technical, app-like grotesque pairing.
+   Loaded from Google Fonts. Cards/kits also add a <link> for immediate paint. */
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap');
diff --git a/design-system/tokens/radius-elevation-motion.css b/design-system/tokens/radius-elevation-motion.css
new file mode 100644
index 000000000..ef2c1cfa3
--- /dev/null
+++ b/design-system/tokens/radius-elevation-motion.css
@@ -0,0 +1,27 @@
+/* ============================================================
+   ChicoryTV — Radius, elevation, motion tokens
+   Tight radii, low-contrast shadows on dark, quick easings.
+   ============================================================ */
+:root {
+  /* Corner radii — restrained, app-like */
+  --radius-xs:  3px;   /* chips, tags, badges */
+  --radius-sm:  5px;   /* buttons, inputs */
+  --radius-md:  7px;   /* cards, rows, menus */
+  --radius-lg:  10px;  /* dialogs, large panels */
+  --radius-pill: 999px;
+
+  /* Elevation — dark surfaces lean on border + subtle shadow, not glow */
+  --shadow-none: none;
+  --shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
+  --shadow-md:  0 4px 12px rgba(0,0,0,0.45);
+  --shadow-lg:  0 16px 40px rgba(0,0,0,0.55);
+  --shadow-pop: 0 8px 28px rgba(0,0,0,0.55); /* popovers, menus */
+  --ring-focus: 0 0 0 3px var(--focus-ring); /* focus outline */
+
+  /* Motion */
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
+  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
+  --dur-fast:   90ms; /* @kind other */
+  --dur-base:   140ms; /* @kind other */
+  --dur-slow:   220ms; /* @kind other */
+}
diff --git a/design-system/tokens/spacing.css b/design-system/tokens/spacing.css
new file mode 100644
index 000000000..c330379eb
--- /dev/null
+++ b/design-system/tokens/spacing.css
@@ -0,0 +1,35 @@
+/* ============================================================
+   ChicoryTV — Spacing tokens
+   4px base grid. Dense admin rhythm.
+   ============================================================ */
+:root {
+  --space-0:  0px;
+  --space-1:  2px;
+  --space-2:  4px;
+  --space-3:  6px;
+  --space-4:  8px;
+  --space-5:  10px;
+  --space-6:  12px;
+  --space-7:  16px;
+  --space-8:  20px;
+  --space-9:  24px;
+  --space-10: 32px;
+  --space-11: 40px;
+  --space-12: 56px;
+
+  /* Semantic */
+  --gap-inline:      var(--space-4);  /* between inline controls */
+  --pad-control-x:   var(--space-7);  /* button/input horizontal pad */
+  --pad-control-y:   var(--space-4);
+  --pad-card:        var(--space-9);  /* card interior */
+  --pad-cell-x:      var(--space-7);  /* table cell */
+  --pad-cell-y:      var(--space-5);
+  --pad-page:        var(--space-10); /* page gutter */
+
+  /* Fixed chrome sizes */
+  --sidebar-w:   232px;
+  --topbar-h:    52px;
+  --row-h:       44px;   /* table / list row */
+  --control-h:   34px;   /* buttons, inputs */
+  --control-h-sm:28px;
+}
diff --git a/design-system/tokens/themes.css b/design-system/tokens/themes.css
new file mode 100644
index 000000000..0cb7dbc73
--- /dev/null
+++ b/design-system/tokens/themes.css
@@ -0,0 +1,77 @@
+/* ============================================================
+   ChicoryTV — Alternate color schemes (theme scopes)
+   Applied via [data-theme="…"] on <html>. Each scope overrides the base
+   --ctv-* values; semantic aliases (--surface-app, --status-live…) follow.
+
+   Default (:root, no attribute) = PRIMARY · warm chicory (see tokens/colors.css).
+   ============================================================ */
+
+/* ---- Alternate · Cool periwinkle ------------------------------------
+   The original cool, focused scheme — one periwinkle-blue accent. */
+[data-theme="cool"] {
+  --ctv-bg:            #0F1115;
+  --ctv-bg-sunken:     #0B0D11;
+  --ctv-surface:       #171A21;
+  --ctv-surface-2:     #1C2029;
+  --ctv-surface-3:     #222732;
+
+  --ctv-border:        #262B36;
+  --ctv-border-strong: #333A48;
+
+  --ctv-text:          #E6E9EF;
+  --ctv-text-muted:    #9AA4B2;
+  --ctv-text-faint:    #626B7A;
+
+  --ctv-accent:        #5B7CFA;
+  --ctv-accent-hover:  #6E8BFB;
+  --ctv-accent-press:  #4C6BE8;
+  --ctv-accent-soft:   rgba(91, 124, 250, 0.14);
+  --ctv-accent-ring:   rgba(91, 124, 250, 0.45);
+
+  --ctv-secondary:      #5B7CFA;
+  --ctv-secondary-soft: rgba(91, 124, 250, 0.14);
+
+  --ctv-live:          #5B7CFA;
+  --ctv-live-soft:     rgba(91, 124, 250, 0.16);
+
+  --text-on-accent:    #FFFFFF;
+}
+
+/* ---- Alternate · Dual accent ----------------------------------------
+   Cool periwinkle app, but live/on-air gets its own warm focal hue so the
+   EPG and "now" states stand out. */
+[data-theme="dual"] {
+  --ctv-bg:            #0F1115;
+  --ctv-bg-sunken:     #0B0D11;
+  --ctv-surface:       #171A21;
+  --ctv-surface-2:     #1C2029;
+  --ctv-surface-3:     #222732;
+
+  --ctv-border:        #262B36;
+  --ctv-border-strong: #333A48;
+
+  --ctv-text:          #E6E9EF;
+  --ctv-text-muted:    #9AA4B2;
+  --ctv-text-faint:    #626B7A;
+
+  --ctv-accent:        #5B7CFA;
+  --ctv-accent-hover:  #6E8BFB;
+  --ctv-accent-press:  #4C6BE8;
+  --ctv-accent-soft:   rgba(91, 124, 250, 0.14);
+  --ctv-accent-ring:   rgba(91, 124, 250, 0.45);
+
+  --ctv-secondary:      #5B7CFA;
+  --ctv-secondary-soft: rgba(91, 124, 250, 0.14);
+
+  --ctv-live:      #F0663F;
+  --ctv-live-soft: rgba(240, 102, 63, 0.16);
+
+  /* Dual promotes the focal warm hue to the primary/attention color (primary
+     buttons, active nav, selection) so both accents read distinctly; cool
+     periwinkle stays the app-chrome accent (soft fills, focus ring). */
+  --action-primary:       var(--ctv-live);
+  --action-primary-hover: #F47A57;
+  --action-primary-press: #E0562F;
+
+  --text-on-accent:    #FFFFFF;
+}
diff --git a/design-system/tokens/typography.css b/design-system/tokens/typography.css
new file mode 100644
index 000000000..02a5c774e
--- /dev/null
+++ b/design-system/tokens/typography.css
@@ -0,0 +1,45 @@
+/* ============================================================
+   ChicoryTV — Typography tokens
+   UI sans: Geist. Numerics/times/durations: Geist Mono (tabular).
+   ============================================================ */
+:root {
+  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
+
+  /* Type scale (px) — dense admin, base 13 */
+  --text-2xs: 11px;   /* micro labels, table meta */
+  --text-xs:  12px;   /* secondary, chips */
+  --text-sm:  13px;   /* body / table cells — the workhorse */
+  --text-md:  14px;   /* emphasized body, inputs */
+  --text-lg:  16px;   /* card titles */
+  --text-xl:  20px;   /* page titles */
+  --text-2xl: 26px;   /* dashboard stat numbers */
+  --text-3xl: 34px;   /* hero / big metrics */
+
+  /* Weights */
+  --weight-normal:   400;
+  --weight-medium:   500;
+  --weight-semibold: 600;
+  --weight-bold:     700;
+
+  /* Line heights */
+  --leading-tight:  1.2;
+  --leading-snug:   1.35;
+  --leading-normal: 1.5;
+
+  /* Letter spacing */
+  --tracking-tight:  -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide:   0.02em;
+  --tracking-caps:   0.06em;  /* uppercase eyebrows / section labels */
+
+  /* Tabular numerals — apply to any numeric/time/duration cell */
+  --numeric-feature: "tnum" 1, "zero" 1; /* @kind other */
+}
+
+/* Utility: tabular figures for numbers, times, durations */
+.ctv-num {
+  font-family: var(--font-mono);
+  font-feature-settings: var(--numeric-feature);
+  font-variant-numeric: tabular-nums;
+}
diff --git a/design-system/uploads/2026-07-01-chicorytv-ui-redesign-design.md b/design-system/uploads/2026-07-01-chicorytv-ui-redesign-design.md
new file mode 100644
index 000000000..6658e5e2d
--- /dev/null
+++ b/design-system/uploads/2026-07-01-chicorytv-ui-redesign-design.md
@@ -0,0 +1,134 @@
+# ChicoryTV UI Redesign — Visual Direction Brief (Pass 1)
+
+**Date:** 2026-07-01
+**Issue:** [ersatztv#59 — full UI redesign and ChicoryTV rebrand](http://192.168.1.95:3000/timothy/ersatztv/issues/59)
+**Status:** Design direction locked; this brief drives the first Claude Design pass.
+
+> Scope of *this* document: the **visual-direction brief** for Pass 1 — the decisions plus the exact prompts to paste into Claude Design (claude.ai/design) to generate 4 hero screens. It is **not** the full #59 implementation spec. That comes after a look is locked.
+
+---
+
+## 1. Context & goals
+
+ErsatzTV is a custom IPTV channel server (C#/.NET 10, currently a Blazor Server + MudBlazor UI, ~60 Razor pages). The current UI is utilitarian ("Sonarr-like") and was never designed. Issue #59 calls for a complete redesign built **around the REST API** rather than legacy page patterns, plus a rename to **ChicoryTV**, with drag-and-drop workflows, better creation defaults/templates, and discoverable-but-not-heavy advanced config.
+
+**Goals (from #59):**
+- Slick, modern, app-like UI built around the API.
+- Drag-and-drop for channel lineup, scheduling, ordering, editing.
+- Better defaults/templates for channel creation (subtitles, shuffle, schedule/playout defaults).
+- Advanced config discoverable without making common workflows heavy.
+- Rebrand user-facing surfaces to ChicoryTV.
+
+**Success for Pass 1:** the user (not design-oriented) can look at 4 rendered hero screens and say "yes, that direction" — locking a look + brand cheaply before any spec/prototype/build work.
+
+---
+
+## 2. Strategic decisions (locked 2026-07-01)
+
+| Decision | Choice | Why |
+|---|---|---|
+| **Frontend stack** | **React SPA on the REST API** (not Blazor/MudBlazor reskin) | All design is AI-driven; LLMs generate React far more reliably than Blazor. Claude Design outputs React, so its output is *shippable* and the `design-sync` pipeline becomes usable (on-brand AI designs → 1:1 shipped code). Satisfies #59's "around the API" goal natively. |
+| **API sequencing** | **Design pulls the API** | If a design goal needs a new API feature, build the API feature first. #59 is *not* hard-blocked on API completeness. |
+| **Look & feel** | **Komodo-slick** | Dynamic, app-like, no full-page reloads, dense/technical. Explicitly **not** Sonarr-style. |
+| **Brand** | **ChicoryTV — dark + chicory blue** | See §3. |
+
+**Accepted costs of React:** full UI rewrite, dual-language (C# backend + TS frontend), new build/deploy step, transition period running both UIs.
+
+**Pipeline note:** `/design-sync` does **not** apply yet — MudBlazor isn't a React library. It becomes usable once a React component library exists, at which point real ChicoryTV components can be synced into Claude Design.
+
+---
+
+## 3. Brand: ChicoryTV
+
+"Chicory" is a real plant with a distinctive cornflower/periwinkle-blue flower (and a coffee/roasted association) — giving an ownable accent color and a name with a story. Direction: **dark, technical, focused**, one confident accent.
+
+### Color tokens (draft — refine in Claude Design)
+
+```
+bg        #0F1115   (near-black charcoal — app background)
+surface   #171A21   (cards / panels)
+border    #262B36   (hairline dividers)
+text      #E6E9EF   (primary)   muted #9AA4B2 (secondary)
+accent    #5B7CFA   (chicory periwinkle-blue — primary actions, active nav)
+ok        #3FB984   warn #E0A83D   err #E5484D
+```
+
+### Usage rules
+- Accent used **sparingly** — primary buttons, active nav item, focus/selection, "live/on-air" emphasis. Not decorative.
+- Dense rows with subtle hairline borders; generous but not wasteful spacing. TV/EPG grids read well on dark.
+- **Typography:** clean sans (Inter-like) for UI; consider a tabular/mono for channel numbers, times, and durations so grids align.
+- **Density:** app-like, information-dense (Komodo), not marketing-spacious. Prefer inline actions and hover affordances over full-page navigation.
+- **Logo/wordmark:** "ChicoryTV" wordmark with a chicory-flower/periwinkle mark; let Claude Design propose 2-3 options.
+
+---
+
+## 4. The 4 hero screens (Pass 1)
+
+Real domain vocabulary is included so renders show true ChicoryTV content, not placeholders. **Use the app's own terms:** Channels, Schedules / Schedule Items, Playouts (Classic/Block/Sequential/Scripted/External JSON), Blocks, Playout Templates, Deco / Deco Group, Filler (Pre/Mid/Post-Roll, Tail, Fallback), Collection Type, Playback Order, Playout Mode, Guide Mode, and the XMLTV "programme" for EPG.
+
+### 4.1 Dashboard (reimagined as a real overview)
+Today `Index.razor` is only health-checks + release notes. **Redesign it into a proper landing overview:**
+- **On-air now** — per-channel "now playing" strip/cards: channel number + logo + name, current program title, progress bar to next, live/on-air accent state.
+- **At-a-glance counts** — channels, active playouts, transcodes running, libraries.
+- **Health panel** — the existing `HealthCheckResult` list (status: Pass/Info/Warning/Fail with green/blue/amber/red), condensed; click-through to detail.
+- **Recent activity / errors** — recent scans, playout resets, transcode failures.
+- **Release notes** — collapsible card, secondary.
+
+### 4.2 Channels list
+Entity: `Channel`. Dense table, the template for all list pages.
+- **Columns:** Number (with `(D)` disabled / `(H)` hidden-from-EPG markers) · Logo · Name · Language (preferred audio) · Streaming Mode (`HLS Direct` / `HLS Segmenter` / `MPEG-TS` / `MPEG-TS (Legacy)`) · FFmpeg Profile.
+- **Row actions (inline icons):** Preview · Stop transcode (only when active) · Edit · Troubleshoot playback · Delete.
+- **Top bar:** "Add Channel", "Edit Channel Numbers", "Show Disabled" toggle, search/filter.
+- **States:** disabled/hidden rows visually de-emphasized; active-transcode indicator.
+- **Redesign opportunity:** bulk-select + bulk actions; group-by channel Group; drag-to-reorder channel numbers (replaces the separate "Edit Channel Numbers" page).
+
+### 4.3 Schedule / playout editor (introduce drag-and-drop)
+**Net-new capability:** today, schedule-item ordering is up/down arrow buttons. The redesign introduces **drag-to-reorder**.
+- **Left:** ordered list of **Schedule Items** (drag handles) — each row shows Start Time · Collection · Playout Mode.
+- **Right:** selected-item detail form. Real fields:
+  - **Start Type** (Dynamic/Fixed) + Start Time + Fixed Start Time Behavior (Inherit/Strict/Flexible)
+  - **Collection Type** — Collection, Television Show/Season, Artist, Multi Collection, Smart Collection, Search Query, Playlist, Rerun (First Run / Rerun) — each swaps its picker.
+  - **Playback Order** — Chronological, Random, Shuffle, Shuffle In Order, Marathon, Season/Episode, Multi-Episode Shuffle (+ Marathon sub-fields: Group By, Shuffle Groups/Items, Batch Size).
+  - **Playout Mode** — Flood / One / Multiple / Duration (+ Multiple Mode & Count, Playout Duration).
+  - **Fill With Group Mode, Tail Mode, Custom Title, Guide Mode (Normal/Filler)**.
+  - **Filler** — Pre-Roll, Mid-Roll, Post-Roll, Tail, Fallback presets.
+  - **Overrides** — Watermarks, Graphics, Preferred Audio/Subtitle Language, Subtitle Mode.
+- **Discoverability:** show the common fields (Collection, Playback Order, Playout Mode) up front; tuck Filler/Overrides into progressive-disclosure sections.
+
+### 4.4 Guide / EPG grid
+Today the guide is XMLTV output only (no rendered grid). Design a **dark time-grid** program guide.
+- **Layout:** channels down the left (number + logo + name), time across the top, program blocks in the grid.
+- **Program block** (`programme`): title, sub-title, start–stop times, category chip, artwork/icon, description on hover/expand.
+- **States:** "now" vertical time-marker; current/on-air program gets the accent; filler (Guide Mode = Filler) visually distinct from real programs.
+- **Controls:** time-range scrubber, jump-to-now, channel filter.
+
+---
+
+## 5. How to use this in Claude Design
+
+Open claude.ai/design and create a project (e.g. "ChicoryTV"). Paste the **master brief** first, then generate one screen at a time with the per-screen prompts. Iterate on the look on the Dashboard first (it sets the shell), then apply the locked style to the rest.
+
+### Master brief (paste first)
+> Design **ChicoryTV**, a dark, slick, app-like admin UI for a self-hosted IPTV/custom-TV channel server (think a modern take on a media-server admin, in the spirit of Komodo — dense, technical, no full-page reloads). Dark theme: background `#0F1115`, surfaces `#171A21`, hairline borders `#262B36`, primary text `#E6E9EF`, muted `#9AA4B2`. One accent — chicory periwinkle-blue `#5B7CFA` — used only for primary actions, active nav, focus, and live/on-air states. Status colors: ok `#3FB984`, warn `#E0A83D`, error `#E5484D`. Clean sans UI type; tabular/mono for numbers, times, durations. Left sidebar nav (Dashboard, Channels, Schedules, Playouts, Collections, Libraries, Settings), compact top bar. Information-dense, inline actions, hover affordances. Include a "ChicoryTV" wordmark with a small periwinkle chicory-flower mark.
+
+### Per-screen prompts
+1. **Dashboard:** "A landing overview: an 'On air now' section of per-channel cards (channel number, logo, name, current program title, progress bar to next, live accent), a row of stat tiles (Channels, Active Playouts, Transcodes, Libraries), a condensed Health panel (rows with Pass/Info/Warning/Fail status icons in green/blue/amber/red), a Recent activity list, and a collapsible Release notes card."
+2. **Channels list:** "A dense channels table. Columns: Number, Logo, Name, Language, Streaming Mode (values like 'HLS Segmenter', 'MPEG-TS'), FFmpeg Profile. Inline row actions: preview, edit, delete. Top bar: 'Add Channel', 'Show Disabled' toggle, search. Disabled rows de-emphasized. Bulk-select checkboxes."
+3. **Schedule editor:** "Two-pane schedule editor. Left: a drag-to-reorder list of schedule items (drag handles), each showing start time, collection name, and playout mode. Right: a detail form for the selected item with Collection Type, Playback Order, and Playout Mode as the primary fields, and collapsible 'Filler' and 'Overrides' sections. Dark, dense."
+4. **EPG grid:** "A dark TV program guide grid: channels down the left (number, logo, name), time across the top, program blocks in the grid with title/sub-title and a category chip. A vertical 'now' time marker; the current program on each channel uses the accent color; filler programs look muted. A jump-to-now button and time scrubber."
+
+Refine tokens/typography live, then regenerate the other screens once the Dashboard look is locked.
+
+---
+
+## 6. Out of scope (Pass 1) & next steps
+
+**Out of scope now:** the full #59 implementation spec, React app architecture (routing/state/auth/build/deploy), API gap analysis, channel-create wizard + templates screen, media-libraries/collections browser (Pass 2), browser-based channel playback (tracked separately in #60), the actual rebuild.
+
+**Next steps (after a look is locked):**
+1. Pass 2 screens: channel-create wizard + templates, libraries/collections browser.
+2. Prototype the hard workflows (drag-drop lineup/scheduling) as clickable React.
+3. Full #59 spec: IA, React app architecture, API gaps to backfill, migration/cutover (dual-stack), rebrand checklist.
+4. Build.
+
+**Related:** #2 (REST API — the foundation this UI sits on), #58 (MCP server), #60 (browser channel playback, post-redesign).
diff --git a/docker/Dockerfile b/docker/Dockerfile
index 529cbb468..b7537437b 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -1,5 +1,16 @@
 FROM mcr.microsoft.com/dotnet/aspnet:10.0-noble-amd64 AS dotnet-runtime
 
+FROM node:22-noble AS web-build
+WORKDIR /source
+COPY web/package*.json ./web/
+WORKDIR /source/web
+RUN npm ci
+WORKDIR /source
+COPY design-system/. ./design-system/
+COPY web/. ./web/
+WORKDIR /source/web
+RUN npm run lint && npm run typecheck && npm test -- --run && npm run build
+
 FROM --platform=linux/amd64 192.168.1.95:3000/timothy/ersatztv-ffmpeg:8.1.2 AS runtime-base
 COPY --from=dotnet-runtime /usr/share/dotnet /usr/share/dotnet
 RUN apt-get update && \
@@ -44,6 +55,7 @@ RUN dotnet restore -r linux-x64 ErsatzTV/ErsatzTV.csproj
 
 # copy everything else and build app
 COPY ErsatzTV/. ./ErsatzTV/
+COPY --from=web-build /source/ErsatzTV/wwwroot/app/. ./ErsatzTV/wwwroot/app/
 COPY ErsatzTV.Application/. ./ErsatzTV.Application/
 COPY ErsatzTV.Core/. ./ErsatzTV.Core/
 COPY ErsatzTV.Core.Nullable/. ./ErsatzTV.Core.Nullable/
diff --git a/docs/superpowers/plans/2026-07-02-chicorytv-spa-scaffold-build-integration.md b/docs/superpowers/plans/2026-07-02-chicorytv-spa-scaffold-build-integration.md
new file mode 100644
index 000000000..fb3c9f934
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-02-chicorytv-spa-scaffold-build-integration.md
@@ -0,0 +1,63 @@
+# ChicoryTV SPA Scaffold Build Integration Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build issue #78: a Vite React TypeScript SPA in `web/`, mounted at `/app`, included in ASP.NET publish output, Docker image builds, and Gitea CI.
+
+**Architecture:** Keep the existing Blazor UI as the root fallback and mount the new SPA under a dedicated `/app` branch. Build `web/` to `ErsatzTV/wwwroot/app` so ASP.NET static file serving and Docker publish both carry the compiled SPA without changing `/iptv/*` or existing API routes.
+
+**Tech Stack:** .NET 10 ASP.NET Core, Vite, React, TypeScript, npm, NUnit static integration tests.
+
+---
+
+### Task 1: Lock the Hosting Contract
+
+**Files:**
+- Create: `ErsatzTV.Tests/StartupSpaHostingTests.cs`
+- Modify: `ErsatzTV/Startup.cs`
+
+- [ ] Add tests that assert `Startup.cs` has a dedicated `/app` branch, serves `ErsatzTV/wwwroot/app`, falls back to `index.html`, and excludes `/app` from the Blazor branch.
+- [ ] Run `dotnet test ErsatzTV.Tests/ErsatzTV.Tests.csproj --filter FullyQualifiedName~StartupSpaHostingTests -v minimal` and confirm the tests fail because the branch is missing.
+- [ ] Add the `/app` static file branch before the non-IPTV Blazor branch.
+- [ ] Re-run the targeted test and confirm it passes.
+
+### Task 2: Scaffold the SPA
+
+**Files:**
+- Create: `web/package.json`
+- Create: `web/package-lock.json`
+- Create: `web/tsconfig.json`
+- Create: `web/tsconfig.node.json`
+- Create: `web/vite.config.ts`
+- Create: `web/index.html`
+- Create: `web/src/main.tsx`
+- Create: `web/src/App.tsx`
+- Create: `web/src/App.test.tsx`
+- Create: `web/src/setupTests.ts`
+- Create: `web/src/vite-env.d.ts`
+
+- [ ] Add a React Testing Library test that expects the ChicoryTV placeholder shell to render and the design-system stylesheet to be imported.
+- [ ] Run `npm test -- --run` in `web/` and confirm it fails before the app exists.
+- [ ] Add the Vite React TypeScript app with `base: "/app/"`, dev proxy entries for `/api`, `/iptv`, and `/artwork`, and output directory `../ErsatzTV/wwwroot/app`.
+- [ ] Import `../../design-system/styles.css` from the SPA entrypoint and render a compact placeholder shell.
+- [ ] Run `npm ci`, `npm test -- --run`, `npm run lint`, `npm run typecheck`, and `npm run build`.
+
+### Task 3: Wire Build and CI
+
+**Files:**
+- Modify: `.gitea/workflows/docker-build.yml`
+- Modify: `docker/Dockerfile`
+- Modify: `.gitignore`
+
+- [ ] Add CI Node setup and `npm ci`, `npm run lint`, `npm run typecheck`, `npm run build` before the .NET build.
+- [ ] Add Docker Node build layers that copy `web/` and `design-system/`, install npm dependencies, and build the SPA before `dotnet publish`.
+- [ ] Ignore generated `ErsatzTV/wwwroot/app/` and `web/dist/` while keeping source and lockfiles tracked.
+- [ ] Run the targeted .NET test, the web checks, and `dotnet build ErsatzTV/ErsatzTV.csproj --no-restore`.
+
+### Task 4: Finish Issue #78
+
+**Files:**
+- Modify as needed based on verification.
+
+- [ ] Run `git status --short` and review the diff.
+- [ ] Use the `done` skill for issue #78 before claiming completion.
diff --git a/web/eslint.config.js b/web/eslint.config.js
new file mode 100644
index 000000000..4ffb58a3d
--- /dev/null
+++ b/web/eslint.config.js
@@ -0,0 +1,26 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist', '../ErsatzTV/wwwroot/app'] },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2023,
+      globals: globals.browser
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }]
+    }
+  }
+);
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 000000000..17ca1e006
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" data-theme="warm">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ChicoryTV</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/web/package-lock.json b/web/package-lock.json
new file mode 100644
index 000000000..d8a0925c1
--- /dev/null
+++ b/web/package-lock.json
@@ -0,0 +1,3873 @@
+{
+  "name": "@chicorytv/web",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@chicorytv/web",
+      "version": "0.0.0",
+      "dependencies": {
+        "@vitejs/plugin-react": "6.0.3",
+        "lucide-react": "1.23.0",
+        "react": "19.2.7",
+        "react-dom": "19.2.7",
+        "typescript": "6.0.3",
+        "vite": "8.1.3"
+      },
+      "devDependencies": {
+        "@eslint/js": "10.0.1",
+        "@testing-library/jest-dom": "6.9.1",
+        "@testing-library/react": "16.3.2",
+        "@types/node": "26.1.0",
+        "@types/react": "19.2.17",
+        "@types/react-dom": "19.2.3",
+        "eslint": "10.6.0",
+        "eslint-plugin-react-hooks": "7.1.1",
+        "eslint-plugin-react-refresh": "0.5.3",
+        "globals": "17.7.0",
+        "jsdom": "29.1.1",
+        "typescript-eslint": "8.62.1",
+        "vitest": "4.1.9"
+      }
+    },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.5.0.tgz",
+      "integrity": "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.1.11",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.11.tgz",
+      "integrity": "sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@csstools/css-calc": "^3.2.0",
+        "@csstools/css-color-parser": "^4.1.0",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-7.1.1.tgz",
+      "integrity": "sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/generational-cache": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/generational-cache/-/generational-cache-1.0.1.tgz",
+      "integrity": "sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.0.tgz",
+      "integrity": "sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.1.tgz",
+      "integrity": "sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.1.9.tgz",
+      "integrity": "sha512-paQcIaOO53Rk5+YrBaBjm/SgrV4INImjo2BT1DtQRYr+XeTRbeAYlS+jxXp9drqvKmtFnWRJKIalDLhZZDu42A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.1.0",
+        "@csstools/css-calc": "^3.2.1"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.6.tgz",
+      "integrity": "sha512-TcJCWFbXLPpJYq6z7bfOyjWYJDiDg2/I4gyUC9pqPNqHFRIey0EB0q0L5cSnQDfWJg8Jd6VadakxdIez/3zkqQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
+      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.23.5",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.5.tgz",
+      "integrity": "sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^3.0.5",
+        "debug": "^4.3.1",
+        "minimatch": "^10.2.4"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.6.0.tgz",
+      "integrity": "sha512-ii6Bw9jJ2zi2cWA2Z+9/QZ/+3DX6kwaV5Q986D/CdP3Lap3w/pgQZ373FV7byY/i7L4IRH/G43I5dz1ClsCbpA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^1.2.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.2.1.tgz",
+      "integrity": "sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
+      "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "eslint": "^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.5.tgz",
+      "integrity": "sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.7.2.tgz",
+      "integrity": "sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^1.2.1",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
+      "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+      "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/types": "^0.15.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+      "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.2",
+        "@humanfs/types": "^0.15.0",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/types": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+      "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
+      "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.138.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.138.0.tgz",
+      "integrity": "sha512-1a7ZKmrRTCoN1XMZ4L0PyyqrMnrNlLyPuOkdSX2MZg7IiIGRUyurNhAm73ptDOraoBcIordsIGKNPKUzy3ZmfA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.4.tgz",
+      "integrity": "sha512-EZLpf/8y7GXkkra90ML47kzik/GMP3EMcE9bPyHmRfxLC6z9+aW5A8poCsoxjrT5GfEcNAAvWwUHjvP1pUQkfw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.1.4.tgz",
+      "integrity": "sha512-aUi+HBvmYb7j8krl1+qJgkG8C17fO79gk3c+jPw4S8glRFc1DTija9S3EyaTSQUm5GJXYKDAsugBEhFHH2vYiQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.1.4.tgz",
+      "integrity": "sha512-F7hHC3gwY11+vByKPRWqwGbeXWVgKmL+pTGCinaEhdihzBV2aQ0fvZOch9cXYUOKuKKq429HeYXOqQLc7wFCEg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.1.4.tgz",
+      "integrity": "sha512-sI5yw+7s92SK6odiEhD5lKCBlWcpjHS5qyqpVQbZAJ0fIzEUXrmbl3DH2ybR3PZogulNJF+COLtmA8hUfvkCCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.1.4.tgz",
+      "integrity": "sha512-mCi0OKgEieFircrtVYmQAFGszRtMnZ6fpZAXrxanXAu7lqZcsK1E1RAaZNG0uKAnxox3B1f4EyQNnoyMfN1vAA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.1.4.tgz",
+      "integrity": "sha512-B9Ial3Kv5sh0SHnB1g/QWcUQCEvCF6QKGAl4zXypYj65mVI+B4AhFBwPtSN7pDrJeIx8Z7zdy4ntx+wQABom7w==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.1.4.tgz",
+      "integrity": "sha512-lZVym0PuHE1KZ22gmFTC15lAkrg9iTszR617oYRB/iPY1A56ywoJzVKOJBKaot5RiikCObmur6pogpse3gRcng==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.1.4.tgz",
+      "integrity": "sha512-t2DNiLJWNTbnEHyUzTumldML6ET4/g16467LZoDDJ3tSxGvguL5/NyC2lCsNKuyRycg9XeDQF5SSv+TNOhQEXg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.1.4.tgz",
+      "integrity": "sha512-0WIRnL1Uw4BvTZRLQt+PVgo6ZKTJadlC2btP+/EOXv2f/DWbY0rEgl+y834mIVwP1FkTlWVTrGGJXf12lru7EQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.1.4.tgz",
+      "integrity": "sha512-JWtGshGfX+oENAKonoNkqEJX+7hC8yfhi9GUyPX1VX4mdh1y5r+ZiJLR5XzAB0aoP6s/PcILsGjKq8O0mm24bw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.1.4.tgz",
+      "integrity": "sha512-rT6yQcxUuXs4CnbofqwHRRV0iem349rLMYpTjkgQGLjrY4ado/eDzwPZPTCgTOlF6Nkp8NEv70yLMTn6qkWxsQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.1.4.tgz",
+      "integrity": "sha512-KXMGoboq5cyaCQjDA4GLuRiOwBQ0EyFnJoVViLeZ45/3rFItRODEr+NdsBcVpll40hhNArlm/speWGRvj08LzA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.1.4.tgz",
+      "integrity": "sha512-5K83rb36oJiY7BCyE9zLZtGcPV4g5wvq+xwdO0XPIwDVZI8cyB/AUjkNXGb92/rnmezEkjMOpgY61rtwjQtFwg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.11.1",
+        "@emnapi/runtime": "1.11.1",
+        "@napi-rs/wasm-runtime": "^1.1.6"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.4.tgz",
+      "integrity": "sha512-PnWBtw3TV5KOg69HQQDR0mnQuyCmSGR2pAB4DC1rPF808fgKeTUMj2EOEyKATpgiuxuR5APQmiDO7PDgEjTFSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.1.4.tgz",
+      "integrity": "sha512-M1lpniBePobTfsa7Ks9a199e1akxsXn+GYBUKsEzv3YFzOm1HJAMNwKI3qr0Zq+mxwx9gOZoTdP1yXRYsZUocQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
+      "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/esrecurse": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
+      "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "26.1.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-26.1.0.tgz",
+      "integrity": "sha512-O0A1G3xPGy4w7AgQdAQYUlQ+BKk2Oovw8eRpofyp5KdBZULnbe+WqaOVNrm705SHphCiG4XHsACrSmPu1f+Kgw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~8.3.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.17",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
+      "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.62.1.tgz",
+      "integrity": "sha512-4EQM77WgVNxj7OkL/5b/D/xZsw00G577+UriYTC7JF5opcF3T2AuoeY7ueLaZgSVjSgCS6yOAJB5bRGLPSJUzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.62.1",
+        "@typescript-eslint/type-utils": "8.62.1",
+        "@typescript-eslint/utils": "8.62.1",
+        "@typescript-eslint/visitor-keys": "8.62.1",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.62.1",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.62.1.tgz",
+      "integrity": "sha512-sPhE4iHuJDSvoAiec+Ro8JyXw8f0ql13HFR82P99nCm9GwTEKG0KYLvDe6REk8BCXuit6vJAv/Yxg5ABaNS2rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.62.1",
+        "@typescript-eslint/types": "8.62.1",
+        "@typescript-eslint/typescript-estree": "8.62.1",
+        "@typescript-eslint/visitor-keys": "8.62.1",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.62.1.tgz",
+      "integrity": "sha512-yQ3RgY5RkSBpsNS1Bx/JQEcA24FOSdfGktoyprAr5u18390UQdtVcfnEv4nIrIshNnavlVyZBKxQwT1fIAE6cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.62.1",
+        "@typescript-eslint/types": "^8.62.1",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.62.1.tgz",
+      "integrity": "sha512-r4d249KbQ1SFdpeStvob8Ih6aPPIzfqllPVOtvhve6ZcpuVcYo5/7zUWckKpHE7StASX4kTKZTLf0WQm/wPkcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.62.1",
+        "@typescript-eslint/visitor-keys": "8.62.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.62.1.tgz",
+      "integrity": "sha512-xadytJqX9vJVQ2fdQjkcIVigwaOJNWkpjdLt6cEQ+xPnrI1fkp+/jZE/I97k9KUjqtpd25i0HeyZf3T6dutv2g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.62.1.tgz",
+      "integrity": "sha512-aXM5xlqXiTxPibXB93cLAURfT3rlizf7uMXISCXy66Isr/9hISJx3yDsKl0L7lKa51b8JpFuNKby0/O0pEm9jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.62.1",
+        "@typescript-eslint/typescript-estree": "8.62.1",
+        "@typescript-eslint/utils": "8.62.1",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.62.1.tgz",
+      "integrity": "sha512-ooCzJFaf+Hg+uG6fA3NRFGuFjlfNlDhBthbv4ZPU/0elCAFUfnyXUvf/WOpHz/jYwSmvU2GkR2LtyUfy1AxZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.62.1.tgz",
+      "integrity": "sha512-xMcW9oP9u7fAMXYs9A65CVmtLQe2r//oXINHfi8HV+oiqhih17sbLdhXr4540YWlgpDKQdY854OL5ZrdCiQsAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.62.1",
+        "@typescript-eslint/tsconfig-utils": "8.62.1",
+        "@typescript-eslint/types": "8.62.1",
+        "@typescript-eslint/visitor-keys": "8.62.1",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.62.1.tgz",
+      "integrity": "sha512-sHtbPfuKNZCG+ih8SyjjucqRntSVmp8XgL5u6o9mAhiSn8ds5o/M/XdM0abweme2Tln3szOstOrZ9OXitvPh0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.62.1",
+        "@typescript-eslint/types": "8.62.1",
+        "@typescript-eslint/typescript-estree": "8.62.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.62.1.tgz",
+      "integrity": "sha512-4g3BLxfdTMy8iZG0MaBkadnlRrCJ74cQiFbyEVMrkwIoqdyaXXQM22cotDvrl4x28wgIZ9rEJRoM+mmhSJpJ1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.62.1",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.3.tgz",
+      "integrity": "sha512-vmFvco5/QuC2f9Oj+wTk0+9XeDFkHxSamwZKYc7MxYwKICfvUvlMhqKI0VuICPltGqh1neqBKDvO4kes1ya8vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.9.tgz",
+      "integrity": "sha512-vl/rYsUKcBr3SnQn166+XR5ZQcgMx3DQhFWdfli/cWpLnLUmbxZvyrJZotLFUryib+LtArYMSTJ5RbQ57ZqrlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.9.tgz",
+      "integrity": "sha512-EVkXzBjrPGM+cK8/ANWgBrkUCfJfb38/EfTSO8h7pWvKkyPkpWxvR7BkD2MyItMF62C97zAEoqdpUixwR/e+Rw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.9",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.9.tgz",
+      "integrity": "sha512-s0iufns3iIFitdgm+YR7g1whCAaGtXz459VS9/PqyKDEEFgYIhsHOQmXgIgDuYCt7DeQmiZT0Qe2OA2p4ZPu5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.9.tgz",
+      "integrity": "sha512-KXLMDtc7oe70+3mJfGrPUWPesswH+3sTxAMAMl8DG7I8IUQT4XW718dY5ID3vPUcmlu27CcKfY4P3h3I29SLJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.9",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.9.tgz",
+      "integrity": "sha512-Jc7RKGNBo8Z28WYIm0Niej4xdSPByRf6mU58VpHQkd6Zh05rlnA+twjbK5HyeIGHxrzsc3mJgS43uM0CZKzaIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.9.tgz",
+      "integrity": "sha512-fHpsS6mIi+PiEW+vcRVOMkX1oSaPKne3VOclSFICPcGOmfKgXPU5iAah+wcNcj2xPrCCmfq99IDGf+EojhhvhA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.9.tgz",
+      "integrity": "sha512-A51o8ymO5PpqlWNnBP9ZHPXDIpuMtTLlGSjN7la4US+LJzoUMyhwjA5QXlm39JexgwHKW4Xjs8Z2d3dLCXOeuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.9",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
+      "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.40",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.40.tgz",
+      "integrity": "sha512-BSSLZ9/Cjjv7Gtj5B68ZzXcXUg8iOf3fme+FCuh8rC/Go+Kmh8cox7M3A8dolou16s64QjLPOSdngh7GxXvkSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.7.tgz",
+      "integrity": "sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.4.tgz",
+      "integrity": "sha512-MTc8i/x9jBQd1iMw2CFGS+rwMa07eYjLR0CCTLDACl9xhxy+nIs3KeML/biicXtk9JrZ6dnnTatmc7ErPXIxqw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.38",
+        "caniuse-lite": "^1.0.30001799",
+        "electron-to-chromium": "^1.5.376",
+        "node-releases": "^2.0.48",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001800",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001800.tgz",
+      "integrity": "sha512-MMHtuAz9Ys840zAY5F4k6fV5GaivZ9sPk+nz0mY+GYVzRBnYkN0mpqkSR92oWRQ19yQWo4HvBV/FnC16AJX8MA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.384",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.384.tgz",
+      "integrity": "sha512-g6KAKY1vkYsADvSPWvdJsuYT0ixdcu6lUtD9P/wJKGBEDlZVXh2AX42j1mPqqaQPDluWjara9ziQ7xqAeXCt5A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.0.tgz",
+      "integrity": "sha512-KLdwQm2NvGLDkQDCGvmiQrhkd0JbMzXthwQAUgWjQuQdBLFa3eiBP5arXZyA+f8x+x7OXgud6bq2rxjGtHV2tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.6.0.tgz",
+      "integrity": "sha512-6lVbcqSodALYo+4ELD0heG6lFiFxnLMuLkiMi2qV8LMp54N8tE8FT1GMH+ev4Ti00nFjNze2+Su6DsV5OQW3Dg==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ],
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.2",
+        "@eslint/config-array": "^0.23.5",
+        "@eslint/config-helpers": "^0.6.0",
+        "@eslint/core": "^1.2.1",
+        "@eslint/plugin-kit": "^0.7.2",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.14.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^9.1.2",
+        "eslint-visitor-keys": "^5.0.1",
+        "espree": "^11.2.0",
+        "esquery": "^1.7.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "minimatch": "^10.2.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz",
+      "integrity": "sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.5.3.tgz",
+      "integrity": "sha512-5EMmLCV98Pi4o/f/3DP/v/tNqLHMIc9I8LKClNDWhZ9JTho89/kQcitCXQBMG7sAfVRK0Ie3T2EDOzp1YXYiVA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": "^9 || ^10"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.2.tgz",
+      "integrity": "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@types/esrecurse": "^4.3.1",
+        "@types/estree": "^1.0.8",
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-11.2.0.tgz",
+      "integrity": "sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^5.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "17.7.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.7.0.tgz",
+      "integrity": "sha512-Czmyns5dUsq4seFBR/Kdydhmo8y9kC79hiSkPn0YcGtNnYWnrgt0vjrSjx9tspoDGWm2CMarffRuLjM4xUz8xg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsdom": {
+      "version": "29.1.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.1.1.tgz",
+      "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^5.1.11",
+        "@asamuzakjp/dom-selector": "^7.1.1",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.3",
+        "@exodus/bytes": "^1.15.0",
+        "css-tree": "^3.2.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.3.5",
+        "parse5": "^8.0.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.1",
+        "undici": "^7.25.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.1",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/lru-cache": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
+      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.23.0.tgz",
+      "integrity": "sha512-38BpJcD0JhFosxHApP/BYsBetLpQFRoTRzEzstM/XCc3jsAG7wqaY1lgVwxiUe3xqYE+lNxo2PkCmYwXWrwwIw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.15",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
+      "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.50",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.50.tgz",
+      "integrity": "sha512-J6l92tKHX6w8Jy5nO1Vuc01NoIiRGi/d6qBKVxh+IQ8Cr3b6HbVNfKiF8ZpFKufTwpwxMmce2W3iQZ861ZRyTg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/obug": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.3.tgz",
+      "integrity": "sha512-9miFgM2OFba7hB+pRgvtV84pYTBaoTHohvmIgiRt6dRIzbwEOIaNaP+dIlGs2fNFoB0SeISs0Jz5WFVRid6Xyg==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.16",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz",
+      "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
+      "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.7"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.4.tgz",
+      "integrity": "sha512-IjZYiLxZwpnhwhdBH2ugdTGVSdhCQUmLxLoqyjiL0JxYjyRst+5a0P3xfrTxJ5F638j4Mvvw5FAX5XE6eHpXbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.138.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.1.4",
+        "@rolldown/binding-darwin-arm64": "1.1.4",
+        "@rolldown/binding-darwin-x64": "1.1.4",
+        "@rolldown/binding-freebsd-x64": "1.1.4",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.1.4",
+        "@rolldown/binding-linux-arm64-gnu": "1.1.4",
+        "@rolldown/binding-linux-arm64-musl": "1.1.4",
+        "@rolldown/binding-linux-ppc64-gnu": "1.1.4",
+        "@rolldown/binding-linux-s390x-gnu": "1.1.4",
+        "@rolldown/binding-linux-x64-gnu": "1.1.4",
+        "@rolldown/binding-linux-x64-musl": "1.1.4",
+        "@rolldown/binding-openharmony-arm64": "1.1.4",
+        "@rolldown/binding-wasm32-wasi": "1.1.4",
+        "@rolldown/binding-win32-arm64-msvc": "1.1.4",
+        "@rolldown/binding-win32-x64-msvc": "1.1.4"
+      }
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
+      "integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz",
+      "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.5.tgz",
+      "integrity": "sha512-RfEzKWcq5fHUOFq7J3rl3Oz6ylKGtcHqUznzj4EcXsxLSIjJcvpbXAQtWGeJQ0xKnimR5e0Cn+cn9TssfMzm+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.4.5"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.5.tgz",
+      "integrity": "sha512-pGrwzZDvPwKe+7NNUqAunb6rqTfynr0VOUhCMdqbu5xlvNiszsAJygRzwvpVycdzejlbpY+SWJOn+s75Og7FEA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
+      "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/typescript-eslint": {
+      "version": "8.62.1",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.62.1.tgz",
+      "integrity": "sha512-vymnnM5g0AKQDSAyfP12nMIBvgwgA42syg74kkuZ4x1VuTzwQKwc5h9rGxeShCjny5o+zWAb6OEoz7XLgrIkIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.62.1",
+        "@typescript-eslint/parser": "8.62.1",
+        "@typescript-eslint/typescript-estree": "8.62.1",
+        "@typescript-eslint/utils": "8.62.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/undici": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.28.0.tgz",
+      "integrity": "sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
+      "integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.3.tgz",
+      "integrity": "sha512-Ds+gBRbj0lwRO2Y5hwnUBdxSwlAve9LeRyU4sNnAr0ewW0gWF0n5bgXgUzbgZ49MV9BVUAQUFYVcDUcilUExMA==",
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.16",
+        "rolldown": "~1.1.3",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.3.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.9.tgz",
+      "integrity": "sha512-nE3/LEyc0z87uHYLZebqCUOaJr2hdtuPp7BQ4BosVFnfltxgAvMG08NyrSGlPpOUWvR27c5flSmYFTNr78L9GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.9",
+        "@vitest/mocker": "4.1.9",
+        "@vitest/pretty-format": "4.1.9",
+        "@vitest/runner": "4.1.9",
+        "@vitest/snapshot": "4.1.9",
+        "@vitest/spy": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.9",
+        "@vitest/browser-preview": "4.1.9",
+        "@vitest/browser-webdriverio": "4.1.9",
+        "@vitest/coverage-istanbul": "4.1.9",
+        "@vitest/coverage-v8": "4.1.9",
+        "@vitest/ui": "4.1.9",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
+      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    }
+  }
+}
diff --git a/web/package.json b/web/package.json
new file mode 100644
index 000000000..4c7bfbc1e
--- /dev/null
+++ b/web/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@chicorytv/web",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "test": "vitest",
+    "typecheck": "tsc -b --pretty false"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "6.0.3",
+    "vite": "8.1.3",
+    "typescript": "6.0.3",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "lucide-react": "1.23.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@types/node": "26.1.0",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "eslint": "10.6.0",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "eslint-plugin-react-refresh": "0.5.3",
+    "globals": "17.7.0",
+    "jsdom": "29.1.1",
+    "typescript-eslint": "8.62.1",
+    "vitest": "4.1.9"
+  }
+}
diff --git a/web/src/App.test.tsx b/web/src/App.test.tsx
new file mode 100644
index 000000000..bdb3ca316
--- /dev/null
+++ b/web/src/App.test.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { App } from './App';
+import { designSystemStylesheet } from './designSystem';
+
+describe('ChicoryTV SPA scaffold', () => {
+  it('renders the placeholder shell and loads the design system stylesheet', () => {
+    render(<App />);
+
+    expect(screen.getByRole('heading', { name: 'ChicoryTV' })).toBeInTheDocument();
+    expect(screen.getByRole('navigation', { name: 'Primary' })).toBeInTheDocument();
+    expect(screen.getByText('SPA foundation ready')).toBeInTheDocument();
+    expect(designSystemStylesheet).toBe('../../design-system/styles.css');
+  });
+});
diff --git a/web/src/App.tsx b/web/src/App.tsx
new file mode 100644
index 000000000..7ee565dfb
--- /dev/null
+++ b/web/src/App.tsx
@@ -0,0 +1,86 @@
+import {
+  CalendarClock,
+  LayoutDashboard,
+  Library,
+  ListVideo,
+  Play,
+  Radio,
+  Settings,
+  Tv
+} from 'lucide-react';
+import chicoryIconUrl from '../../design-system/assets/chicorytv-icon.svg';
+
+const navItems = [
+  { label: 'Dashboard', icon: LayoutDashboard, active: true },
+  { label: 'Channels', icon: Tv },
+  { label: 'Guide', icon: ListVideo },
+  { label: 'Schedules', icon: CalendarClock },
+  { label: 'Libraries', icon: Library },
+  { label: 'Settings', icon: Settings }
+];
+
+const stats = [
+  { label: 'Channels', value: '0' },
+  { label: 'Playouts', value: '0' },
+  { label: 'Libraries', value: '0' }
+];
+
+export function App() {
+  return (
+    <div className="ctv-app-shell">
+      <aside className="ctv-sidebar">
+        <div className="ctv-brand">
+          <img src={chicoryIconUrl} alt="" aria-hidden="true" />
+          <div>
+            <h1>ChicoryTV</h1>
+            <span>Media server console</span>
+          </div>
+        </div>
+
+        <nav aria-label="Primary" className="ctv-nav">
+          {navItems.map(({ label, icon: Icon, active }) => (
+            <a key={label} className={active ? 'is-active' : undefined} href="/app/">
+              <Icon aria-hidden="true" size={16} />
+              <span>{label}</span>
+            </a>
+          ))}
+        </nav>
+      </aside>
+
+      <main className="ctv-main">
+        <header className="ctv-topbar">
+          <div>
+            <p>Foundation</p>
+            <h2>SPA foundation ready</h2>
+          </div>
+          <button type="button" className="ctv-primary-action">
+            <Play aria-hidden="true" size={15} />
+            <span>Open App</span>
+          </button>
+        </header>
+
+        <section className="ctv-panel" aria-labelledby="foundation-title">
+          <div className="ctv-panel-header">
+            <div>
+              <p>Issue #78</p>
+              <h3 id="foundation-title">React shell mounted at /app</h3>
+            </div>
+            <span className="ctv-status">
+              <Radio aria-hidden="true" size={14} />
+              Ready
+            </span>
+          </div>
+
+          <div className="ctv-stats">
+            {stats.map(({ label, value }) => (
+              <div key={label}>
+                <span>{label}</span>
+                <strong>{value}</strong>
+              </div>
+            ))}
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
diff --git a/web/src/designSystem.ts b/web/src/designSystem.ts
new file mode 100644
index 000000000..7b06c9d6b
--- /dev/null
+++ b/web/src/designSystem.ts
@@ -0,0 +1,3 @@
+import '../../design-system/styles.css';
+
+export const designSystemStylesheet = '../../design-system/styles.css';
diff --git a/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 000000000..b241e5092
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,11 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './designSystem';
+import './shell.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
diff --git a/web/src/setupTests.ts b/web/src/setupTests.ts
new file mode 100644
index 000000000..bb02c60cd
--- /dev/null
+++ b/web/src/setupTests.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';
diff --git a/web/src/shell.css b/web/src/shell.css
new file mode 100644
index 000000000..4976d2b7b
--- /dev/null
+++ b/web/src/shell.css
@@ -0,0 +1,199 @@
+.ctv-app-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 232px minmax(0, 1fr);
+  background: var(--ctv-bg, #0f1115);
+  color: var(--text-primary, #e6e9ef);
+  font-family: var(--font-sans, system-ui, sans-serif);
+}
+
+.ctv-sidebar {
+  border-right: 1px solid var(--border-default, #262b36);
+  background: var(--surface-sunken, #0b0d11);
+  padding: 16px 10px;
+}
+
+.ctv-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 10px 18px;
+}
+
+.ctv-brand img {
+  width: 34px;
+  height: 34px;
+}
+
+.ctv-brand h1,
+.ctv-topbar h2,
+.ctv-panel h3 {
+  margin: 0;
+  letter-spacing: 0;
+}
+
+.ctv-brand h1 {
+  font-size: 16px;
+  line-height: 1.1;
+}
+
+.ctv-brand span,
+.ctv-topbar p,
+.ctv-panel-header p,
+.ctv-stats span {
+  color: var(--text-secondary, #9aa4b2);
+}
+
+.ctv-brand span,
+.ctv-panel-header p,
+.ctv-topbar p {
+  font-size: 12px;
+}
+
+.ctv-nav {
+  display: grid;
+  gap: 3px;
+}
+
+.ctv-nav a {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  height: 34px;
+  padding: 0 10px;
+  border-radius: 5px;
+  color: var(--text-secondary, #9aa4b2);
+  text-decoration: none;
+  font-size: 13px;
+}
+
+.ctv-nav a:hover,
+.ctv-nav a.is-active {
+  background: var(--surface-selected, #222732);
+  color: var(--text-primary, #e6e9ef);
+}
+
+.ctv-nav a.is-active::before {
+  position: absolute;
+  left: 0;
+  width: 3px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--action-primary, #e08a3c);
+  content: "";
+}
+
+.ctv-main {
+  min-width: 0;
+  padding: 24px 32px;
+}
+
+.ctv-topbar {
+  min-height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid var(--border-default, #262b36);
+  padding-bottom: 18px;
+}
+
+.ctv-topbar h2 {
+  font-size: 20px;
+}
+
+.ctv-topbar p,
+.ctv-panel-header p {
+  margin: 0 0 4px;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.ctv-primary-action {
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--action-primary, #e08a3c);
+  border-radius: 5px;
+  background: var(--action-primary, #e08a3c);
+  color: var(--action-primary-text, #111318);
+  padding: 0 12px;
+  font: inherit;
+  font-weight: 600;
+}
+
+.ctv-panel {
+  margin-top: 24px;
+  border: 1px solid var(--border-default, #262b36);
+  border-radius: 7px;
+  background: var(--surface-default, #171a21);
+}
+
+.ctv-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-default, #262b36);
+}
+
+.ctv-panel h3 {
+  font-size: 16px;
+}
+
+.ctv-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 999px;
+  background: var(--status-ok-bg, rgba(63, 185, 132, 0.14));
+  color: var(--status-ok, #3fb984);
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.ctv-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.ctv-stats div {
+  display: grid;
+  gap: 6px;
+  padding: 16px;
+  border-right: 1px solid var(--border-default, #262b36);
+}
+
+.ctv-stats div:last-child {
+  border-right: 0;
+}
+
+.ctv-stats strong {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 26px;
+  line-height: 1;
+}
+
+@media (max-width: 720px) {
+  .ctv-app-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .ctv-sidebar {
+    border-right: 0;
+    border-bottom: 1px solid var(--border-default, #262b36);
+  }
+
+  .ctv-nav,
+  .ctv-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ctv-main {
+    padding: 20px 16px;
+  }
+}
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/web/tsconfig.app.json b/web/tsconfig.app.json
new file mode 100644
index 000000000..d5e05c3ba
--- /dev/null
+++ b/web/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@design-system/*": ["../design-system/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 000000000..1ffef600d
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
new file mode 100644
index 000000000..2e5e82621
--- /dev/null
+++ b/web/tsconfig.node.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts", "eslint.config.js"]
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
new file mode 100644
index 000000000..b34686e85
--- /dev/null
+++ b/web/vite.config.ts
@@ -0,0 +1,33 @@
+import { fileURLToPath, URL } from 'node:url';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
+
+const aspNetHost = 'http://localhost:8409';
+
+export default defineConfig({
+  base: '/app/',
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@design-system': fileURLToPath(new URL('../design-system', import.meta.url))
+    }
+  },
+  build: {
+    outDir: '../ErsatzTV/wwwroot/app',
+    emptyOutDir: true
+  },
+  server: {
+    port: 5173,
+    strictPort: false,
+    proxy: {
+      '/api': aspNetHost,
+      '/iptv': aspNetHost,
+      '/artwork': aspNetHost
+    }
+  },
+  test: {
+    environment: 'jsdom',
+    setupFiles: './src/setupTests.ts'
+  }
+});