@exxatdesignux/ui 0.2.19 → 0.4.0

package/src/tokens/layers.css

@@ -1,224 +0,0 @@
-/* ==========================================================================
-   Base layer — global element defaults with AA focus management
-   ========================================================================== */
-@layer base {
-  /* Reset + border-color default */
-  *, *::before, *::after {
-    @apply border-border;
-    box-sizing: border-box;
-  }
-
-  /* Body — outer canvas matches sidebar; main column uses bg-background (white in light) */
-  body {
-    @apply bg-sidebar text-foreground antialiased;
-    font-family: var(--font-sans);
-    /* 14px baseline on body. 1rem stays = 16px so all shadcn rem-based
-       layout (spacing, heights, radii) is unaffected at any zoom level. */
-    font-size: 0.875rem;
-    line-height: 1.5;
-    /* Font smoothing (Tailwind `antialiased` = -webkit-font-smoothing + -moz-osx):
-       Industry practice per Josh Comeau’s CSS reset and 2024 cross-browser testing
-       (e.g. David Bushell): the -webkit property affects macOS WebKit browsers only —
-       it tones down browser-only subpixel AA (Mojave+ system UI already moved away).
-       Windows/Linux/iOS/Android: no practical effect; OS font rasterizer (ClearType, etc.)
-       owns rendering. Safe to apply on body for Mac parity without changing Windows output. */
-  }
-
-  html {
-    @apply font-sans;
-    color-scheme: light;
-    /* Match sidebar canvas (body) on overscroll */
-    background-color: var(--sidebar);
-  }
-
-  html.dark {
-    color-scheme: dark;
-  }
-
-  /* ── Focus management (WCAG 2.4.11 / 2.4.7) ──────────────────── */
-  /* Visible on keyboard navigation only; hidden for mouse users    */
-  :focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm, 4px);
-  }
-
-  /* Suppress outline for mouse/touch (Safari workaround) */
-  :focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  /* ── Reduced motion (WCAG 2.3.3) ────────────────────────────── */
-  @media (prefers-reduced-motion: reduce) {
-    *, *::before, *::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-
-  /* ── Touch targets (WCAG 2.5.5) ─────────────────────────────── */
-  /* Applied via utility: min-h-[var(--control-height-touch)]      */
-  /* Coarse pointer only: browser zoom (200–400%) shrinks the *layout* viewport
-     in CSS px, so max-width: 767px becomes true on desktop — without pointer: coarse,
-     44px min-height hits every button and [role=checkbox], stretching 16px-wide
-     checkboxes into tall pills and blowing up table/toolbar controls. Real phones
-     and tablets report pointer: coarse. */
-  @media (max-width: 767px) and (pointer: coarse) {
-    button,
-    [role="button"],
-    [role="radio"],
-    [role="switch"],
-    [role="menuitem"],
-    [role="tab"],
-    a {
-      min-height: var(--control-height-touch, 44px);
-    }
-  }
-  /* Checkboxes use compact box + pseudo-element hit slop (see ui/checkbox). */
-
-  /* ── Heading hierarchy ───────────────────────────────────────── */
-  /* Ivy Presto (font-heading) applied ONLY via explicit class/inline style
-     on PageHeader <h1>. All other headings use Inter (font-sans). */
-  h1, h2, h3, h4, h5, h6 {
-    font-family: var(--font-sans);
-    font-weight: 600;
-    line-height: 1.25;
-    color: var(--foreground);
-  }
-
-  /* ── Skip to main content (WCAG 2.4.1) ─────────────────────── */
-  .skip-to-content {
-    position: absolute;
-    left: -9999px;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    z-index: 9999;
-  }
-
-  .skip-to-content:focus {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: auto;
-    height: auto;
-    padding: 0.75rem 1.25rem;
-    background: var(--background);
-    color: var(--foreground);
-    border: 2px solid var(--ring);
-    border-radius: var(--radius-md);
-    font-weight: 600;
-    font-size: 1rem;
-    z-index: 9999;
-  }
-}
-
-/* ==========================================================================
-   Utility layer — design-system helpers
-   ========================================================================== */
-@layer utilities {
-  /* Visually hidden but accessible to screen readers (WCAG 1.3.1) */
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  /* AA-safe muted text — use instead of text-muted-foreground on light bg */
-  .text-aa-muted {
-    color: oklch(0.50 0.012 270); /* 5.5:1 on white ✓ */
-  }
-
-  /* Touch-target wrapper for icon buttons (mobile only) */
-  .touch-target {
-    min-height: var(--control-height-touch, 44px);
-    min-width:  var(--control-height-touch, 44px);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  @media (min-width: 768px) {
-    .touch-target {
-      min-height: unset;
-      min-width:  unset;
-    }
-  }
-
-  /* Form field border — use --control-border (3:1 minimum) */
-  .field-border {
-    border-color: var(--control-border);
-  }
-
-  /* Exxat Prism highlight banner */
-  .banner-prism {
-    background-color: var(--banner-prism-bg);
-  }
-
-  /* Sidebar nav — little pop when an item becomes active. Key swap on the
-     wrapper remounts the span, so the animation replays on selection. */
-  @keyframes sidebar-icon-pop {
-    0%   { opacity: 0.4; transform: scale(0.7)  rotate(-6deg); }
-    60%  { opacity: 1;   transform: scale(1.15) rotate(2deg); }
-    100% { opacity: 1;   transform: scale(1)    rotate(0); }
-  }
-
-  /* Radix Collapsible / Accordion — slide the children open/closed using the
-     `--radix-collapsible-content-height` CSS var that Radix sets on the
-     content element. Mirrors the shadcn accordion pattern (Tailwind v3
-     "accordion-down" / "accordion-up"); we keep our own name so it can be
-     reused by both Collapsible and Accordion primitives. */
-  @keyframes collapsible-down {
-    from { height: 0; }
-    to   { height: var(--radix-collapsible-content-height); }
-  }
-  @keyframes collapsible-up {
-    from { height: var(--radix-collapsible-content-height); }
-    to   { height: 0; }
-  }
-
-  /* Ask Leo suggestion chips — staggered fade-in + lift on first render. */
-  @keyframes leo-chip-in {
-    0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
-    100% { opacity: 1; transform: translateY(0)   scale(1); }
-  }
-
-  /* Leo typing indicator — 3 dots bouncing opacity/scale, staggered via delay. */
-  @keyframes leo-typing-dot {
-    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
-    40%           { opacity: 1;   transform: scale(1); }
-  }
-
-  /* Whole-panel brand radial glow pulse — runs on the BG layer while Leo thinks. */
-  @keyframes leo-panel-pulse {
-    0%, 100% { opacity: 0.5;  transform: scale(1); }
-    50%      { opacity: 0.75; transform: scale(1.01); }
-  }
-
-  /* Chart “Leo insight” marker — soft breathing halo behind the chip. */
-  @keyframes leo-chart-insight-halo {
-    0%, 100% { opacity: 0.45; transform: scale(1); }
-    50%      { opacity: 0.72; transform: scale(1.12); }
-  }
-
-  /* Accent dot on the insight marker — gentle pulse (respect motion-reduce in markup). */
-  @keyframes leo-chart-insight-dot {
-    0%, 100% { opacity: 0.9; transform: scale(1); }
-    50%      { opacity: 1; transform: scale(1.35); }
-  }
-}
-
-/* After all @layer rules: win over Tailwind preflight / layer merge so real controls show a pointer. */
-button:not(:disabled):not([disabled]),
-[role="button"]:not([aria-disabled="true"]):not([data-disabled]) {
-  cursor: pointer;
-}

package/src/tokens/tailwind-bridge.css

@@ -1,118 +0,0 @@
-/* --------------------------------------------------------------------------
-   Tailwind v4 theme bridge — maps CSS custom-props → utility classes
-   -------------------------------------------------------------------------- */
-@theme inline {
-  /* Typography */
-  --font-heading: "ivypresto-text";
-  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
-  /* Minimum product text: 11px — use `text-xs` or larger; avoid arbitrary classes below 11px */
-  --text-xs: 0.6875rem; /* 11px at 16px root */
-
-  /* Semantic color map */
-  --color-background:              var(--background);
-  --color-foreground:              var(--foreground);
-  --color-card:                    var(--card);
-  --color-card-foreground:         var(--card-foreground);
-  --color-popover:                 var(--popover);
-  --color-popover-foreground:      var(--popover-foreground);
-  --color-primary:                 var(--primary);
-  --color-primary-foreground:      var(--primary-foreground);
-  --color-secondary:               var(--secondary);
-  --color-secondary-foreground:    var(--secondary-foreground);
-  --color-muted:                   var(--muted);
-  --color-muted-foreground:        var(--muted-foreground);
-  --color-accent:                  var(--accent);
-  --color-accent-foreground:       var(--accent-foreground);
-  --color-destructive:             var(--destructive);
-  --color-destructive-foreground:  var(--destructive-foreground);
-  --color-border:                  var(--border);
-  --color-border-control:          var(--border-control);
-  --color-input:                   var(--input);
-  --color-input-background:        var(--input-background);
-  --color-ring:                    var(--ring);
-  /* Modal / sheet / drawer scrim */
-  --color-overlay:                 var(--overlay);
-
-  /* Chart tokens */
-  --color-chart-1:  var(--chart-1);
-  --color-chart-2:  var(--chart-2);
-  --color-chart-3:  var(--chart-3);
-  --color-chart-4:  var(--chart-4);
-  --color-chart-5:  var(--chart-5);
-
-  /* Chip / badge tokens (AA-compliant on light bg: ≥ 4.5:1) */
-  --color-chip-1:            var(--chip-1);
-  --color-chip-2:            var(--chip-2);
-  --color-chip-3:            var(--chip-3);
-  --color-chip-4:            var(--chip-4);
-  --color-chip-5:            var(--chip-5);
-  --color-chip-destructive:  var(--chip-destructive);
-
-  /* Brand accent + Exxat One tint scale (see :root --brand-*) */
-  --color-brand:              var(--brand-color);
-  --color-brand-dark:         var(--brand-color-dark);
-  --color-brand-foreground:   var(--brand-foreground);
-  --color-brand-tint:         var(--brand-tint);
-  --color-brand-tint-light:   var(--brand-tint-light);
-  --color-brand-tint-subtle:  var(--brand-tint-subtle);
-  --color-brand-color-light:  var(--brand-color-light);
-  --color-brand-deep:         var(--brand-color-deep);
-
-  /* Prism banner highlight */
-  --color-banner-prism:  var(--banner-prism-bg);
-
-  /* Sidebar */
-  --color-sidebar:                    var(--sidebar);
-  --color-sidebar-foreground:         var(--sidebar-foreground);
-  --color-sidebar-primary:            var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent:             var(--sidebar-accent);
-  --color-sidebar-accent-foreground:  var(--sidebar-accent-foreground);
-  --color-sidebar-border:             var(--sidebar-border);
-  --color-sidebar-ring:               var(--sidebar-ring);
-  /* WCAG 1.4.3 — always mixed against real --sidebar (lavender / rose / dark) */
-  --color-sidebar-section-label:      var(--sidebar-section-label-foreground);
-  --color-secondary-panel-bg:         var(--secondary-panel-bg);
-
-  /* Interactive hover — single source for ghost controls, lists, table chrome */
-  --color-interactive-hover:                    var(--interactive-hover);
-  --color-interactive-hover-foreground:         var(--interactive-hover-foreground);
-  --color-interactive-hover-subtle:             var(--interactive-hover-subtle);
-  --color-interactive-hover-soft:               var(--interactive-hover-soft);
-  --color-interactive-hover-medium:             var(--interactive-hover-medium);
-  --color-interactive-hover-strong:             var(--interactive-hover-strong);
-  --color-interactive-hover-row:                var(--interactive-hover-row);
-
-  /* DataTable — opaque surfaces for pinned/sticky cells and row states */
-  --color-dt-row-bg:             var(--dt-row-bg);
-  --color-dt-row-hover:          var(--dt-row-hover);
-  --color-dt-row-selected:       var(--dt-row-selected);
-  --color-dt-row-selected-fg:    var(--dt-row-selected-fg);
-  --color-dt-header-bg:          var(--dt-header-bg);
-  --color-dt-group-bg:           var(--dt-group-bg);
-  --color-dt-new-row-bg:         var(--dt-new-row-bg);
-  --color-dt-new-row-border:     var(--dt-new-row-border);
-
-  /* Border-radius scale (4 px base → 8 px default) */
-  --radius-sm:  4px;
-  --radius-md:  8px;
-  --radius-lg:  12px;
-  --radius-xl:  16px;
-  --radius-2xl: 20px;
-  --radius-3xl: 24px;
-}
-
-/* --------------------------------------------------------------------------
-   Text size (Settings → Appearance)
-   Pattern: root `font-size` steps like iOS Larger Text / Android font scale /
-   browser zoom-at-root so rem-based components track together. We keep steps
-   modest; `compact` redefines `--text-xs` so minimum UI copy stays 11px (Exxat
-   accessibility rule) when the root is slightly below 16px.
-   -------------------------------------------------------------------------- */
-html[data-text-size="compact"] {
-  font-size: 94%;
-  --text-xs: 0.7333rem; /* ~11px when 1rem ≈ 15px */
-}
-html[data-text-size="large"] {
-  font-size: 112.5%;
-}

package/src/tokens/themes.css

@@ -1,201 +0,0 @@
-/* ==========================================================================
-   Theme: Exxat One · Lavender (explicit — also applied as :root default)
-   Usage: <html class="theme-one"> or <html class="theme-lavender">
-   ========================================================================== */
-.theme-one,
-.theme-lavender {
-  --brand-tint:         oklch(0.9676 0.016 286.1);
-  --brand-tint-light:   oklch(0.993 0.007 286.1);
-  --brand-tint-subtle:  oklch(0.935 0.024 286.1);
-  --brand-color:        oklch(0.50 0.14 286.1);
-  --brand-color-light:  oklch(0.78 0.09 286.1);
-  --brand-color-dark:   oklch(0.38 0.11 286.1);
-  --brand-color-deep:   oklch(0.28 0.085 286.1);
-  --ring:               var(--brand-color-dark);
-}
-
-/* Light surfaces only — must NOT override .dark (otherwise muted/accent stay “paper white” in dark mode) */
-.theme-one:not(.dark),
-.theme-lavender:not(.dark) {
-  --sidebar:        var(--brand-tint);
-  --sidebar-accent: oklch(0.945 0.025 286.1);
-  --sidebar-border: oklch(0.92 0.025 286.1);
-  --secondary:      oklch(0.95 0.012 286.1);
-  --accent:         oklch(0.925 0.015 286.1);
-  --muted:          oklch(0.945 0.008 286.1);
-}
-
-.theme-one.dark,
-.dark.theme-one,
-.theme-lavender.dark,
-.dark.theme-lavender {
-  --ring:             var(--brand-color);
-  --background:       oklch(0.20 0.008 286.1);
-  --sidebar:          oklch(0.245 0.015 286.1);
-  --sidebar-accent:   oklch(0.30 0.012 286.1);
-  --sidebar-border:   oklch(0.38 0.010 286.1);
-  /* Restore dark surfaces (base .dark is overridden by :not(.dark) rules above when both classes apply) */
-  --secondary:        oklch(0.31 0.04 286.1);
-  --muted:            oklch(0.31 0.04 286.1);
-  --accent:           oklch(0.33 0.06 286.1);
-  --brand-tint:       oklch(0.28 0.014 286.1);
-  --brand-tint-light: oklch(0.30 0.014 286.1);
-  --brand-tint-subtle: oklch(0.24 0.018 286.1);
-  --secondary-panel-bg: oklch(0.262 0.012 286.1);
-}
-
-/* ==========================================================================
-   Theme: Exxat Prism · Rose · hue 343
-   Usage: <html class="theme-prism"> or <html class="theme-rose">
-   ========================================================================== */
-.theme-prism,
-.theme-rose {
-  --brand-tint:         oklch(0.97 0.02 343);
-  --brand-tint-light:   oklch(0.992 0.01 343);
-  --brand-tint-subtle:  oklch(0.93 0.028 343);
-  --brand-color:        oklch(0.57 0.24 342);   /* Prism rose */
-  --brand-color-light:  oklch(0.78 0.14 342);
-  --brand-color-dark:   oklch(0.42 0.24 342);
-  --brand-color-deep:   oklch(0.32 0.20 342);
-  --ring:               var(--brand-color-dark);
-}
-
-.theme-prism:not(.dark),
-.theme-rose:not(.dark) {
-  --sidebar:          oklch(0.97 0.02 343);
-  --sidebar-accent:   oklch(0.945 0.025 343);
-  --sidebar-border:   oklch(0.92 0.025 343);
-  --secondary:        oklch(0.95 0.012 343);
-  --accent:           oklch(0.925 0.015 343);
-  --muted:            oklch(0.945 0.008 343);
-  --banner-prism-bg:  oklch(0.97 0.02 343);
-  --theme-color-chrome: #fff5f9;
-}
-
-.theme-prism.dark,
-.dark.theme-prism,
-.theme-rose.dark,
-.dark.theme-rose {
-  --ring:             var(--brand-color);
-  --background:       oklch(0.20 0.008 342);
-  --sidebar:          oklch(0.245 0.015 342);
-  --sidebar-accent:   oklch(0.30 0.012 342);
-  --sidebar-border:   oklch(0.38 0.010 342);
-  --secondary:        oklch(0.31 0.04 342);
-  --muted:              oklch(0.31 0.04 342);
-  --accent:             oklch(0.33 0.06 342);
-  --theme-color-chrome: #2a2428;
-  --brand-tint:         oklch(0.28 0.014 342);
-  --brand-tint-light:   oklch(0.30 0.014 342);
-  --brand-tint-subtle:  oklch(0.24 0.018 342);
-  --card:               oklch(0.27 0.012 342);
-  --secondary-panel-bg: oklch(0.262 0.012 342);
-}
-
-/* ==========================================================================
-   Theme: Exxat Assessment · Green · hue 159.88
-   Usage: <html class="theme-assessment">
-   ========================================================================== */
-.theme-assessment {
-  --brand-tint:         oklch(0.965 0.018 159.88);
-  --brand-tint-light:   oklch(0.992 0.008 159.88);
-  --brand-tint-subtle:  oklch(0.93 0.028 159.88);
-  --brand-color:        oklch(0.7 0.0913 159.88);
-  --brand-color-light:  oklch(0.82 0.072 159.88);
-  --brand-color-dark:   oklch(0.48 0.0913 159.88);
-  --brand-color-deep:   oklch(0.34 0.075 159.88);
-  --ring:               var(--brand-color-dark);
-}
-
-.theme-assessment:not(.dark) {
-  --sidebar:            var(--brand-tint);
-  --sidebar-accent:     oklch(0.945 0.026 159.88);
-  --sidebar-border:     oklch(0.90 0.026 159.88);
-  --secondary:          oklch(0.95 0.012 159.88);
-  --accent:             oklch(0.925 0.016 159.88);
-  --muted:              oklch(0.945 0.008 159.88);
-  --theme-color-chrome: #f1faf5;
-}
-
-.theme-assessment.dark,
-.dark.theme-assessment {
-  --ring:               var(--brand-color);
-  --background:         oklch(0.20 0.008 159.88);
-  --sidebar:            oklch(0.245 0.015 159.88);
-  --sidebar-accent:     oklch(0.30 0.012 159.88);
-  --sidebar-border:     oklch(0.38 0.010 159.88);
-  --secondary:          oklch(0.31 0.04 159.88);
-  --muted:              oklch(0.31 0.04 159.88);
-  --accent:             oklch(0.33 0.06 159.88);
-  --theme-color-chrome: #242a27;
-  --brand-tint:         oklch(0.28 0.014 159.88);
-  --brand-tint-light:   oklch(0.30 0.014 159.88);
-  --brand-tint-subtle:  oklch(0.24 0.018 159.88);
-  --card:               oklch(0.27 0.012 159.88);
-  --secondary-panel-bg: oklch(0.262 0.012 159.88);
-}
-
-/* ==========================================================================
-   Theme: Custom product · user-selected hue
-   Usage: <html class="theme-custom" style="--custom-product-brand-color: …">
-   ========================================================================== */
-/*
- * Tint chroma is **derived from the source's chroma** so neighbouring hues
- * (e.g. Blue h=252 vs Indigo h=280 vs Purple h=286) read as distinct pale
- * tints instead of collapsing to the same near-white. The earlier formula
- * pinned chroma to a fixed `0.018`, which is below the hue-discrimination
- * threshold at L≈0.96 for closely-spaced hues — that's why Blue / Indigo /
- * Purple looked identical in the sidebar.
- *
- * `max(<floor>, calc(c * <fraction>))` rules:
- *   - vibrant brand colours (c ≈ 0.10–0.23) get a meaningfully tinted
- *     sidebar / accent / muted scale → product chrome visibly changes per
- *     pick
- *   - low-chroma custom-hex picks (greys) fall back to the floor so they
- *     don't render as pure white
- *   - lightness + hue stay pinned to the original mock-up values, so the
- *     overall "very pale background" feel is unchanged
- */
-.theme-custom {
-  --brand-tint:         oklch(from var(--custom-product-brand-color) 0.965 max(0.018, calc(c * 0.20)) h);
-  --brand-tint-light:   oklch(from var(--custom-product-brand-color) 0.992 max(0.008, calc(c * 0.08)) h);
-  --brand-tint-subtle:  oklch(from var(--custom-product-brand-color) 0.93  max(0.028, calc(c * 0.30)) h);
-  --brand-color:        var(--custom-product-brand-color);
-  --brand-color-light:  oklch(from var(--custom-product-brand-color) 0.82 c h);
-  --brand-color-dark:   oklch(from var(--custom-product-brand-color) 0.48 c h);
-  --brand-color-deep:   oklch(from var(--custom-product-brand-color) 0.34 c h);
-  --ring:               var(--brand-color-dark);
-}
-
-.theme-custom:not(.dark) {
-  --sidebar:            var(--brand-tint);
-  --sidebar-accent:     oklch(from var(--custom-product-brand-color) 0.945 max(0.026, calc(c * 0.28)) h);
-  --sidebar-border:     oklch(from var(--custom-product-brand-color) 0.90  max(0.026, calc(c * 0.28)) h);
-  --secondary:          oklch(from var(--custom-product-brand-color) 0.95  max(0.012, calc(c * 0.14)) h);
-  --accent:             oklch(from var(--custom-product-brand-color) 0.925 max(0.016, calc(c * 0.18)) h);
-  --muted:              oklch(from var(--custom-product-brand-color) 0.945 max(0.008, calc(c * 0.10)) h);
-  --theme-color-chrome: color-mix(in oklch, var(--custom-product-brand-color) 10%, white);
-}
-
-.theme-custom.dark,
-.dark.theme-custom {
-  --ring:               var(--brand-color);
-  --background:         oklch(from var(--custom-product-brand-color) 0.20  max(0.008, calc(c * 0.10)) h);
-  --sidebar:            oklch(from var(--custom-product-brand-color) 0.245 max(0.015, calc(c * 0.18)) h);
-  --sidebar-accent:     oklch(from var(--custom-product-brand-color) 0.30  max(0.012, calc(c * 0.14)) h);
-  --sidebar-border:     oklch(from var(--custom-product-brand-color) 0.38  max(0.010, calc(c * 0.12)) h);
-  --secondary:          oklch(from var(--custom-product-brand-color) 0.31  max(0.04,  calc(c * 0.40)) h);
-  --muted:              oklch(from var(--custom-product-brand-color) 0.31  max(0.04,  calc(c * 0.40)) h);
-  --accent:             oklch(from var(--custom-product-brand-color) 0.33  max(0.06,  calc(c * 0.50)) h);
-  --theme-color-chrome: color-mix(in oklch, var(--custom-product-brand-color) 12%, black);
-  --brand-tint:         oklch(from var(--custom-product-brand-color) 0.28  max(0.014, calc(c * 0.20)) h);
-  --brand-tint-light:   oklch(from var(--custom-product-brand-color) 0.30  max(0.014, calc(c * 0.20)) h);
-  --brand-tint-subtle:  oklch(from var(--custom-product-brand-color) 0.24  max(0.018, calc(c * 0.28)) h);
-  --card:               oklch(from var(--custom-product-brand-color) 0.27  max(0.012, calc(c * 0.16)) h);
-  --secondary-panel-bg: oklch(from var(--custom-product-brand-color) 0.262 max(0.012, calc(c * 0.14)) h);
-}
-
-/* Nested secondary panel — always paint from token (not Tailwind arbitrary var) */
-[data-slot="secondary-panel"][data-state="open"] {
-  background-color: var(--secondary-panel-bg);
-}

package/template/app/(app)/data-list/layout.tsx

@@ -1,43 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { usePathname } from "next/navigation"
-
-import { useSecondaryPanel } from "@/components/secondary-panel"
-import { LIST_HUB_PATH } from "@/lib/list-hub-nav"
-
-/**
- * Keeps the List hub secondary panel open on `/data-list` while scope links update in place.
- */
-export default function DataListLayout({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname()
-  const { openPanel, closePanel, activePanel } = useSecondaryPanel()
-  const closePanelRef = React.useRef(closePanel)
-  const openPanelRef = React.useRef(openPanel)
-
-  React.useEffect(() => {
-    closePanelRef.current = closePanel
-    openPanelRef.current = openPanel
-  })
-
-  React.useEffect(() => {
-    return () => {
-      closePanelRef.current({ mainSidebar: "leave" })
-    }
-  }, [])
-
-  React.useEffect(() => {
-    const normalized =
-      pathname.length > 1 && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname
-    if (normalized !== LIST_HUB_PATH) {
-      closePanelRef.current({ mainSidebar: "leave" })
-      return undefined
-    }
-    if (activePanel !== "list-hub") {
-      openPanelRef.current("list-hub")
-    }
-    return undefined
-  }, [pathname, activePanel])
-
-  return children
-}

package/template/app/(app)/data-list/page.tsx

@@ -1,10 +0,0 @@
-import { ListHubClient } from "@/components/list-hub-client"
-import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
-
-export default function DataListPage() {
-  return (
-    <PrimaryPageTemplate siteHeader={{ title: "List hub" }}>
-      <ListHubClient />
-    </PrimaryPageTemplate>
-  )
-}

package/template/app/(app)/examples/focused-workflow/page.tsx

@@ -1,5 +0,0 @@
-import { FocusedWorkflowShowcase } from "@/components/examples/focused-workflow-showcase"
-
-export default function FocusedWorkflowExamplePage() {
-  return <FocusedWorkflowShowcase />
-}

package/template/app/(app)/examples/page.tsx

@@ -1,43 +0,0 @@
-import Link from "next/link"
-import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
-import { Button } from "@/components/ui/button"
-
-const LINKS = [
-  { href: "/dashboard", label: "Dashboard", description: "Metrics, charts, and layout patterns." },
-  { href: "/data-list", label: "List hub", description: "Table, list, board, and dashboard views on shared state." },
-  { href: "/question-bank", label: "Question bank", description: "Discovery hub for browsing folders, recents, and AI-assisted create/import flows." },
-  { href: "/question-bank/library", label: "Question library", description: "Folders, OS folder view, panel, and tree demos on mock items." },
-  { href: "/examples/focused-workflow", label: "Focused workflow", description: "Empty, step wizard, and sidebar section layouts for large forms." },
-  { href: "/settings", label: "Settings", description: "Appearance, tours, and shell preferences." },
-  { href: "/help", label: "Help", description: "Support and documentation entry points." },
-] as const
-
-export default function ExamplesPage() {
-  return (
-    <PrimaryPageTemplate
-      siteHeader={{ title: "Patterns" }}
-      maxWidthClassName="max-w-3xl"
-      contentClassName="px-4 lg:px-6 py-8"
-      bodyClassName="overflow-y-auto"
-    >
-      <p className="text-sm text-muted-foreground mb-6">
-        This workspace ships neutral chrome so you can reuse layouts, data views, and tokens as a design system.
-      </p>
-      <ul className="flex flex-col gap-3" role="list">
-        {LINKS.map((item) => (
-          <li key={item.href}>
-            <Button variant="outline" className="h-auto w-full justify-start gap-3 py-4 px-4" asChild>
-              <Link href={item.href}>
-                <span className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left">
-                  <span className="font-medium text-foreground">{item.label}</span>
-                  <span className="text-xs font-normal text-muted-foreground">{item.description}</span>
-                </span>
-                <i className="fa-light fa-arrow-right shrink-0 text-muted-foreground" aria-hidden="true" />
-              </Link>
-            </Button>
-          </li>
-        ))}
-      </ul>
-    </PrimaryPageTemplate>
-  )
-}

package/template/app/(app)/question-bank/find/page.tsx

@@ -1,13 +0,0 @@
-import { Suspense } from "react"
-
-import { QuestionBankClient } from "@/components/question-bank-client"
-import { DedicatedSearchLoadingFallback } from "@/components/templates/page-loading-shell"
-
-/** Discovery hub composer results — same hub chrome as the library, distinct from `/question-bank/list`. */
-export default function QuestionBankHubFindPage() {
-  return (
-    <Suspense fallback={<DedicatedSearchLoadingFallback />}>
-      <QuestionBankClient />
-    </Suspense>
-  )
-}

package/template/app/(app)/question-bank/library/page.tsx

@@ -1,12 +0,0 @@
-import { Suspense } from "react"
-
-import { QuestionBankClient } from "@/components/question-bank-client"
-import { PrimaryListHubLoadingFallback } from "@/components/templates/page-loading-shell"
-
-export default function QuestionBankLibraryPage() {
-  return (
-    <Suspense fallback={<PrimaryListHubLoadingFallback />}>
-      <QuestionBankClient />
-    </Suspense>
-  )
-}