@exxatdesignux/ui 0.2.16 → 0.2.17

package/template/components/settings-appearance-card.tsx

@@ -11,11 +11,27 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
 import { SelectionTileGrid } from "@/components/ui/selection-tile-grid"
 import { useAppTheme, type Brand, type TextSizePreference } from "@/hooks/use-app-theme"
 import { useDashboardView, type DashboardView } from "@/contexts/dashboard-view-context"
 import { useChartVariant, type ChartVariant } from "@/contexts/chart-variant-context"
 import { SettingsFormRow } from "@/components/settings-form-row"
+import { BrandColorPicker } from "@/components/brand-color-picker"
+import { ExxatProductLogo } from "@/components/exxat-product-logo"
+import { useProduct } from "@/contexts/product-context"
+import { DEFAULT_CUSTOM_PRODUCT_BRAND, type Product } from "@/stores/app-store"
+import { brandForProduct, getProductBrand, customProductBrandConfig } from "@/lib/product-brand"
+import { Tip } from "@/components/ui/tip"
 import { cn } from "@/lib/utils"
 
 function RadioRow({
@@ -43,13 +59,21 @@ function RadioRow({
 }
 
 /** Illustrative split sidebars when “system” shows light+dark (tokens follow active brand hue). */
-const SPLIT_SIDEBAR: Record<Brand, { light: string; dark: string }> = {
-  one: { light: "oklch(0.935 0.024 286.1)", dark: "oklch(0.38 0.09 286.1)" },
-  prism: { light: "oklch(0.96 0.04 342)", dark: "oklch(0.4 0.14 342)" },
+const SPLIT_SIDEBAR: Record<Brand, { light: string; dark: string; markLight: string; markDark: string }> = {
+  one: {
+    light: "oklch(0.935 0.024 286.1)",
+    dark: "oklch(0.32 0.085 286.1)",
+    markLight: "oklch(0.58 0.18 286.1)",
+    markDark: "oklch(0.72 0.18 286.1)",
+  },
+  prism: {
+    light: "oklch(0.96 0.04 342)",
+    dark: "oklch(0.34 0.13 342)",
+    markLight: "oklch(0.62 0.21 342)",
+    markDark: "oklch(0.78 0.18 342)",
+  },
 }
 
-const THEME_SVG_CLASS = "h-12 w-auto max-w-[9rem] shrink-0"
-
 /** Fills the square preview in Settings appearance tiles (see SelectionTileGraphic below-mode sizing). */
 const APPEARANCE_TILE_SVG = "block h-full w-auto max-h-full max-w-full shrink-0 object-contain"
 
@@ -57,55 +81,234 @@ const APPEARANCE_TILE_SVG = "block h-full w-auto max-h-full max-w-full shrink-0
 const CHROME_LIGHT = {
   shell: "oklch(1 0 0)",
   shellStroke: "oklch(0.90 0.003 270)",
-  headerBar: "oklch(0.93 0.004 270)",
-  content: "oklch(0.96 0.004 270)",
+  headerBar: "oklch(0.96 0.004 270)",
+  headerStroke: "oklch(0.92 0.003 270)",
+  content: "oklch(0.985 0.003 270)",
+  card: "oklch(1 0 0)",
+  cardStroke: "oklch(0.91 0.003 270)",
+  navRow: "oklch(0.86 0.012 270)",
+  pill: "oklch(0.94 0.003 270)",
+  windowRed: "#FF5F57",
+  windowYellow: "#FEBC2E",
+  windowGreen: "#28C840",
 } as const
 
 const CHROME_DARK = {
-  shell: "oklch(0.12 0.01 270)",
-  shellStroke: "oklch(0.38 0.02 270)",
-  headerBar: "oklch(0.22 0.02 270)",
-  content: "oklch(0.17 0.015 270)",
+  shell: "oklch(0.13 0.01 270)",
+  shellStroke: "oklch(0.32 0.015 270)",
+  headerBar: "oklch(0.19 0.013 270)",
+  headerStroke: "oklch(0.28 0.013 270)",
+  content: "oklch(0.155 0.012 270)",
+  card: "oklch(0.20 0.013 270)",
+  cardStroke: "oklch(0.32 0.013 270)",
+  navRow: "oklch(0.42 0.014 270)",
+  pill: "oklch(0.25 0.013 270)",
+  windowRed: "#FF5F57",
+  windowYellow: "#FEBC2E",
+  windowGreen: "#28C840",
 } as const
 
+type ChromeTokens = { -readonly [K in keyof typeof CHROME_LIGHT]: string }
+
+/**
+ * Reusable mini-chrome — Mac-style traffic lights, sidebar with brand-tinted
+ * mark + nav rows, header bar with search pill + avatar, three content cards
+ * (KPI tile, mini bar chart, list rows). Coordinates are scoped to a fixed
+ * 96×56 viewBox so the System mode can place two side-by-side via `<g transform>`.
+ *
+ * `strokeBoost` thickens every border for the high-contrast variants without
+ * forking the whole illustration.
+ */
+function ChromeIllustration({
+  tokens,
+  sidebar,
+  sidebarMark,
+  strokeBoost = 1,
+  contentAccent,
+}: {
+  tokens: ChromeTokens
+  sidebar: string
+  sidebarMark: string
+  strokeBoost?: number
+  contentAccent?: string
+}) {
+  const sw = (n: number) => n * strokeBoost
+  return (
+    <g>
+      <rect
+        x={0.6}
+        y={0.6}
+        width={94.8}
+        height={54.8}
+        rx={5}
+        fill={tokens.shell}
+        stroke={tokens.shellStroke}
+        strokeWidth={sw(1)}
+      />
+
+      {/* Mac-style traffic lights */}
+      <circle cx={5.5} cy={5.5} r={1.2} fill={tokens.windowRed} />
+      <circle cx={9} cy={5.5} r={1.2} fill={tokens.windowYellow} />
+      <circle cx={12.5} cy={5.5} r={1.2} fill={tokens.windowGreen} />
+      <line
+        x1={0.6}
+        y1={9.5}
+        x2={95.4}
+        y2={9.5}
+        stroke={tokens.shellStroke}
+        strokeWidth={sw(0.5)}
+      />
+
+      {/* Sidebar */}
+      <rect x={2.5} y={11.5} width={20} height={42} rx={2.5} fill={sidebar} />
+      {/* Brand-tinted product mark + faux team name */}
+      <circle cx={6.5} cy={15.5} r={2.2} fill={sidebarMark} />
+      <rect x={10} y={14.3} width={9} height={1.2} rx={0.5} fill={tokens.navRow} opacity={0.6} />
+      <rect x={10} y={16.4} width={6.5} height={1} rx={0.5} fill={tokens.navRow} opacity={0.45} />
+
+      {/* Active nav row + 4 inactive rows */}
+      <rect x={4.5} y={21.5} width={16} height={2.4} rx={0.8} fill={sidebarMark} opacity={0.85} />
+      <rect x={4.5} y={25.5} width={14} height={2.2} rx={0.8} fill={tokens.navRow} opacity={0.7} />
+      <rect x={4.5} y={29.2} width={15} height={2.2} rx={0.8} fill={tokens.navRow} opacity={0.55} />
+      <rect x={4.5} y={32.9} width={12} height={2.2} rx={0.8} fill={tokens.navRow} opacity={0.5} />
+      <rect x={4.5} y={36.6} width={13} height={2.2} rx={0.8} fill={tokens.navRow} opacity={0.45} />
+
+      {/* Header bar: search pill + avatar */}
+      <rect
+        x={25}
+        y={12}
+        width={67}
+        height={6}
+        rx={1.5}
+        fill={tokens.headerBar}
+        stroke={tokens.headerStroke}
+        strokeWidth={sw(0.5)}
+      />
+      <rect x={27} y={13.7} width={28} height={2.6} rx={1.3} fill={tokens.pill} />
+      <circle cx={89.5} cy={15} r={1.4} fill={sidebarMark} opacity={0.85} />
+
+      {/* KPI card */}
+      <rect
+        x={25}
+        y={20}
+        width={31.5}
+        height={14}
+        rx={2}
+        fill={tokens.card}
+        stroke={tokens.cardStroke}
+        strokeWidth={sw(0.5)}
+      />
+      <rect x={27.5} y={22.5} width={10} height={1.5} rx={0.6} fill={tokens.navRow} opacity={0.5} />
+      <rect x={27.5} y={26.5} width={14} height={4} rx={0.8} fill={contentAccent ?? sidebarMark} opacity={0.85} />
+
+      {/* Bar-chart card */}
+      <rect
+        x={60.5}
+        y={20}
+        width={31.5}
+        height={14}
+        rx={2}
+        fill={tokens.card}
+        stroke={tokens.cardStroke}
+        strokeWidth={sw(0.5)}
+      />
+      <rect x={63} y={22.5} width={10} height={1.5} rx={0.6} fill={tokens.navRow} opacity={0.5} />
+      <rect x={63} y={30} width={2.5} height={3} rx={0.4} fill={contentAccent ?? sidebarMark} opacity={0.85} />
+      <rect x={67} y={28} width={2.5} height={5} rx={0.4} fill={contentAccent ?? sidebarMark} opacity={0.85} />
+      <rect x={71} y={26.5} width={2.5} height={6.5} rx={0.4} fill={contentAccent ?? sidebarMark} opacity={0.85} />
+      <rect x={75} y={29} width={2.5} height={4} rx={0.4} fill={contentAccent ?? sidebarMark} opacity={0.85} />
+      <rect x={79} y={27} width={2.5} height={6} rx={0.4} fill={contentAccent ?? sidebarMark} opacity={0.85} />
+
+      {/* List card */}
+      <rect
+        x={25}
+        y={37}
+        width={67}
+        height={14}
+        rx={2}
+        fill={tokens.card}
+        stroke={tokens.cardStroke}
+        strokeWidth={sw(0.5)}
+      />
+      <rect x={27.5} y={39.5} width={12} height={1.5} rx={0.6} fill={tokens.navRow} opacity={0.5} />
+      <rect x={27.5} y={43} width={62} height={1.6} rx={0.6} fill={tokens.navRow} opacity={0.32} />
+      <rect x={27.5} y={45.8} width={62} height={1.6} rx={0.6} fill={tokens.navRow} opacity={0.32} />
+      <rect x={27.5} y={48.6} width={62} height={1.6} rx={0.6} fill={tokens.navRow} opacity={0.32} />
+    </g>
+  )
+}
+
 /** Mini browser chrome: illustrative light / dark / split (brand sidebars from SPLIT_SIDEBAR). */
+/**
+ * One window, two halves — render the full chrome twice in the same SVG, each
+ * clipped to a triangular half by a diagonal that runs from the top-right
+ * corner to the bottom-left corner. Light fills the top-left triangle, dark
+ * fills the bottom-right triangle. Because both halves use identical geometry
+ * inside one viewBox, the result reads as a single window with a diagonal
+ * theme split (macOS / iOS "Auto" pattern) rather than two adjacent windows.
+ */
+function SplitSystemSvg({
+  light,
+  dark,
+}: {
+  light: { tokens: ChromeTokens; sidebar: string; sidebarMark: string; strokeBoost?: number; contentAccent?: string }
+  dark: { tokens: ChromeTokens; sidebar: string; sidebarMark: string; strokeBoost?: number; contentAccent?: string }
+}) {
+  // useId keeps clipPath ids unique across tile instances on the same page.
+  const baseId = React.useId().replace(/:/g, "")
+  const lightId = `chrome-split-light-${baseId}`
+  const darkId = `chrome-split-dark-${baseId}`
+  return (
+    <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 96 56" fill="none" aria-hidden="true">
+      <defs>
+        <clipPath id={lightId}>
+          {/* Top-left triangle — top edge + left edge + diagonal to bottom-left. */}
+          <polygon points="0,0 96,0 0,56" />
+        </clipPath>
+        <clipPath id={darkId}>
+          {/* Bottom-right triangle — right edge + bottom edge + diagonal. */}
+          <polygon points="96,0 96,56 0,56" />
+        </clipPath>
+      </defs>
+      <g clipPath={`url(#${lightId})`}>
+        <ChromeIllustration {...light} />
+      </g>
+      <g clipPath={`url(#${darkId})`}>
+        <ChromeIllustration {...dark} />
+      </g>
+    </svg>
+  )
+}
+
 function ThemeModeSvg({ mode, brand }: { mode: "system" | "light" | "dark"; brand: Brand }) {
   const split = SPLIT_SIDEBAR[brand]
+
   if (mode === "light") {
     return (
-      <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 56 32" fill="none" aria-hidden="true">
-        <rect x="0.5" y="0.5" width="55" height="31" rx="4" fill={CHROME_LIGHT.shell} stroke={CHROME_LIGHT.shellStroke} />
-        <rect x="3" y="3" width="13" height="26" rx="2" fill={split.light} />
-        <rect x="19" y="6" width="34" height="4.5" rx="1" fill={CHROME_LIGHT.headerBar} />
-        <rect x="19" y="14" width="34" height="14" rx="2" fill={CHROME_LIGHT.content} />
+      <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 96 56" fill="none" aria-hidden="true">
+        <ChromeIllustration tokens={CHROME_LIGHT} sidebar={split.light} sidebarMark={split.markLight} />
       </svg>
     )
   }
+
   if (mode === "dark") {
     return (
-      <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 56 32" fill="none" aria-hidden="true">
-        <rect x="0.5" y="0.5" width="55" height="31" rx="4" fill={CHROME_DARK.shell} stroke={CHROME_DARK.shellStroke} />
-        <rect x="3" y="3" width="13" height="26" rx="2" fill={split.dark} />
-        <rect x="19" y="6" width="34" height="4.5" rx="1" fill={CHROME_DARK.headerBar} />
-        <rect x="19" y="14" width="34" height="14" rx="2" fill={CHROME_DARK.content} />
+      <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 96 56" fill="none" aria-hidden="true">
+        <ChromeIllustration tokens={CHROME_DARK} sidebar={split.dark} sidebarMark={split.markDark} />
       </svg>
     )
   }
+
+  // System: one window with a diagonal light↔dark split inside.
   return (
-    <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 56 32" fill="none" aria-hidden="true">
-      <rect x="0.5" y="0.5" width="26" height="31" rx="4" fill={CHROME_LIGHT.shell} stroke={CHROME_LIGHT.shellStroke} />
-      <rect x="3" y="3" width="10" height="26" rx="1.5" fill={split.light} />
-      <rect x="15" y="6" width="10" height="4" rx="0.75" fill={CHROME_LIGHT.headerBar} />
-      <rect x="15" y="13" width="10" height="14" rx="1.5" fill={CHROME_LIGHT.content} />
-      <rect x="28.5" y="0.5" width="27" height="31" rx="4" fill={CHROME_DARK.shell} stroke={CHROME_DARK.shellStroke} />
-      <rect x="31" y="3" width="10" height="26" rx="1.5" fill={split.dark} />
-      <rect x="43" y="6" width="10" height="4" rx="0.75" fill={CHROME_DARK.headerBar} />
-      <rect x="43" y="13" width="10" height="14" rx="1.5" fill={CHROME_DARK.content} />
-    </svg>
+    <SplitSystemSvg
+      light={{ tokens: CHROME_LIGHT, sidebar: split.light, sidebarMark: split.markLight }}
+      dark={{ tokens: CHROME_DARK, sidebar: split.dark, sidebarMark: split.markDark }}
+    />
   )
 }
 
-const HC_STROKE = "oklch(0.22 0.02 270)"
+const HC_STROKE = "oklch(0.18 0.02 270)"
 
 /** Illustrative light chrome; stroke weight shows contrast (not tied to active color theme). */
 function ContrastPrefSvg({
@@ -116,75 +319,73 @@ function ContrastPrefSvg({
   brand: Brand
 }) {
   const split = SPLIT_SIDEBAR[brand]
+
   if (pref === "normal") {
     return (
-      <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 56 32" fill="none" aria-hidden="true">
-        <rect
-          x="0.5"
-          y="0.5"
-          width="55"
-          height="31"
-          rx="4"
-          fill={CHROME_LIGHT.shell}
-          stroke={CHROME_LIGHT.shellStroke}
-          strokeWidth="1"
-        />
-        <rect x="3" y="3" width="13" height="26" rx="2" fill={split.light} />
-        <rect x="19" y="6" width="34" height="4.5" rx="1" fill={CHROME_LIGHT.headerBar} />
-        <rect x="19" y="14" width="34" height="14" rx="2" fill={CHROME_LIGHT.content} />
+      <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 96 56" fill="none" aria-hidden="true">
+        <ChromeIllustration tokens={CHROME_LIGHT} sidebar={split.light} sidebarMark={split.markLight} />
       </svg>
     )
   }
+
   if (pref === "high") {
+    const tokens: ChromeTokens = {
+      ...CHROME_LIGHT,
+      shellStroke: HC_STROKE,
+      headerStroke: HC_STROKE,
+      cardStroke: HC_STROKE,
+    }
     return (
-      <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 56 32" fill="none" aria-hidden="true">
-        <rect
-          x="0.5"
-          y="0.5"
-          width="55"
-          height="31"
-          rx="4"
-          fill={CHROME_LIGHT.shell}
-          stroke={HC_STROKE}
-          strokeWidth="2"
-        />
-        <rect
-          x="3"
-          y="3"
-          width="13"
-          height="26"
-          rx="2"
-          fill={split.light}
-          stroke={HC_STROKE}
-          strokeWidth="1.5"
+      <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 96 56" fill="none" aria-hidden="true">
+        <ChromeIllustration
+          tokens={tokens}
+          sidebar={split.light}
+          sidebarMark={split.markLight}
+          strokeBoost={1.8}
         />
-        <rect x="19" y="6" width="34" height="4.5" rx="1" fill="oklch(0.35 0.02 270)" opacity="0.35" />
-        <rect x="19" y="14" width="34" height="14" rx="2" fill="oklch(0.35 0.02 270)" opacity="0.22" />
       </svg>
     )
   }
+
   if (pref === "windows") {
-    /* Classic Windows HC cue: black canvas, white border, yellow + cyan accents */
+    // Classic Windows HC cue: black canvas, white border, yellow header, cyan focus.
+    const tokens: ChromeTokens = {
+      ...CHROME_DARK,
+      shell: "#000000",
+      shellStroke: "#FFFFFF",
+      headerBar: "#FFFF00",
+      headerStroke: "#FFFF00",
+      content: "#000000",
+      card: "#000000",
+      cardStroke: "#FFFFFF",
+      navRow: "#FFFFFF",
+      pill: "#000000",
+    }
     return (
-      <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 56 32" fill="none" aria-hidden="true">
-        <rect x="0.5" y="0.5" width="55" height="31" rx="4" fill="#000000" stroke="#ffffff" strokeWidth="2" />
-        <rect x="4" y="5" width="14" height="22" rx="2" fill="#000000" stroke="#ffffff" strokeWidth="1.5" />
-        <rect x="22" y="7" width="30" height="5" rx="1" fill="#ffff00" />
-        <rect x="22" y="15" width="30" height="10" rx="1.5" fill="#000000" stroke="#00ffff" strokeWidth="1.25" />
+      <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 96 56" fill="none" aria-hidden="true">
+        <ChromeIllustration
+          tokens={tokens}
+          sidebar="#000000"
+          sidebarMark="#00FFFF"
+          contentAccent="#FFFF00"
+          strokeBoost={1.8}
+        />
       </svg>
     )
   }
+
+  // System: one window with a diagonal Normal↔High split inside.
+  const highTokens: ChromeTokens = {
+    ...CHROME_LIGHT,
+    shellStroke: HC_STROKE,
+    headerStroke: HC_STROKE,
+    cardStroke: HC_STROKE,
+  }
   return (
-    <svg className={APPEARANCE_TILE_SVG} viewBox="0 0 56 32" fill="none" aria-hidden="true">
-      <rect x="0.5" y="0.5" width="26" height="31" rx="4" fill={CHROME_LIGHT.shell} stroke={CHROME_LIGHT.shellStroke} strokeWidth="1" />
-      <rect x="3" y="3" width="10" height="26" rx="1.5" fill={split.light} />
-      <rect x="15" y="6" width="10" height="4" rx="0.75" fill={CHROME_LIGHT.headerBar} />
-      <rect x="15" y="13" width="10" height="14" rx="1.5" fill={CHROME_LIGHT.content} />
-      <rect x="28.5" y="0.5" width="27" height="31" rx="4" fill={CHROME_LIGHT.shell} stroke={HC_STROKE} strokeWidth="2" />
-      <rect x="31" y="3" width="10" height="26" rx="1.5" fill={split.light} stroke={HC_STROKE} strokeWidth="1.5" />
-      <rect x="43" y="6" width="10" height="4" rx="0.75" fill="oklch(0.35 0.02 270)" opacity="0.35" />
-      <rect x="43" y="13" width="10" height="14" rx="1.5" fill="oklch(0.35 0.02 270)" opacity="0.22" />
-    </svg>
+    <SplitSystemSvg
+      light={{ tokens: CHROME_LIGHT, sidebar: split.light, sidebarMark: split.markLight }}
+      dark={{ tokens: highTokens, sidebar: split.light, sidebarMark: split.markLight, strokeBoost: 1.8 }}
+    />
   )
 }
 
@@ -202,63 +403,6 @@ const VIEW_LABELS: Record<DashboardView, string> = {
   mix: "Mix",
 }
 
-const VIEW_STROKE = "oklch(0.78 0.01 270)"
-const VIEW_FILL_STRONG = "oklch(0.82 0.02 270)"
-const VIEW_FILL_SOFT = "oklch(0.90 0.008 270)"
-
-/** Illustrative dashboard layout previews — same chrome, different content grid. */
-function DashboardViewSvg({ view }: { view: DashboardView }) {
-  if (view === "report") {
-    // Chart card + two-column data rows below.
-    return (
-      <svg className={THEME_SVG_CLASS} viewBox="0 0 56 32" fill="none" aria-hidden="true">
-        <rect x="0.5" y="0.5" width="55" height="31" rx="4" fill={CHROME_LIGHT.shell} stroke={CHROME_LIGHT.shellStroke} />
-        <rect x="3" y="3" width="50" height="12" rx="1.5" fill={VIEW_FILL_SOFT} stroke={VIEW_STROKE} strokeWidth="0.5" />
-        {/* bars inside chart */}
-        <rect x="6" y="9" width="2" height="5" fill={VIEW_FILL_STRONG} />
-        <rect x="10" y="7" width="2" height="7" fill={VIEW_FILL_STRONG} />
-        <rect x="14" y="10" width="2" height="4" fill={VIEW_FILL_STRONG} />
-        <rect x="18" y="6" width="2" height="8" fill={VIEW_FILL_STRONG} />
-        <rect x="22" y="8" width="2" height="6" fill={VIEW_FILL_STRONG} />
-        <rect x="26" y="5" width="2" height="9" fill={VIEW_FILL_STRONG} />
-        <rect x="30" y="9" width="2" height="5" fill={VIEW_FILL_STRONG} />
-        {/* rows */}
-        <rect x="3" y="18" width="24" height="4" rx="1" fill={VIEW_FILL_SOFT} />
-        <rect x="29" y="18" width="24" height="4" rx="1" fill={VIEW_FILL_SOFT} />
-        <rect x="3" y="24" width="24" height="4" rx="1" fill={VIEW_FILL_SOFT} />
-        <rect x="29" y="24" width="24" height="4" rx="1" fill={VIEW_FILL_SOFT} />
-      </svg>
-    )
-  }
-  if (view === "simple") {
-    // 2×3 KPI grid — clean tiles.
-    return (
-      <svg className={THEME_SVG_CLASS} viewBox="0 0 56 32" fill="none" aria-hidden="true">
-        <rect x="0.5" y="0.5" width="55" height="31" rx="4" fill={CHROME_LIGHT.shell} stroke={CHROME_LIGHT.shellStroke} />
-        {[0, 1, 2].map((col) => (
-          <React.Fragment key={col}>
-            <rect x={3 + col * 17} y="3" width="16" height="12" rx="1.5" fill={VIEW_FILL_SOFT} stroke={VIEW_STROKE} strokeWidth="0.5" />
-            <rect x={3 + col * 17} y="17" width="16" height="12" rx="1.5" fill={VIEW_FILL_SOFT} stroke={VIEW_STROKE} strokeWidth="0.5" />
-          </React.Fragment>
-        ))}
-      </svg>
-    )
-  }
-  // mix — one big chart + 3 KPI tiles
-  return (
-    <svg className={THEME_SVG_CLASS} viewBox="0 0 56 32" fill="none" aria-hidden="true">
-      <rect x="0.5" y="0.5" width="55" height="31" rx="4" fill={CHROME_LIGHT.shell} stroke={CHROME_LIGHT.shellStroke} />
-      <rect x="3" y="3" width="32" height="26" rx="1.5" fill={VIEW_FILL_SOFT} stroke={VIEW_STROKE} strokeWidth="0.5" />
-      {/* sparkline */}
-      <path d="M5 22 L10 16 L15 19 L20 12 L25 15 L30 9 L33 13" stroke={VIEW_FILL_STRONG} strokeWidth="1" fill="none" />
-      {/* side KPIs */}
-      <rect x="37" y="3" width="16" height="8" rx="1.5" fill={VIEW_FILL_SOFT} stroke={VIEW_STROKE} strokeWidth="0.5" />
-      <rect x="37" y="12" width="16" height="8" rx="1.5" fill={VIEW_FILL_SOFT} stroke={VIEW_STROKE} strokeWidth="0.5" />
-      <rect x="37" y="21" width="16" height="8" rx="1.5" fill={VIEW_FILL_SOFT} stroke={VIEW_STROKE} strokeWidth="0.5" />
-    </svg>
-  )
-}
-
 const THEME_CHOICE_LABEL: Record<"system" | "light" | "dark", string> = {
   system: "System default",
   light: "Light",
@@ -274,13 +418,44 @@ const TEXT_SIZE_LABEL: Record<TextSizePreference, string> = {
 export function SettingsAppearanceCard() {
   const { theme, setTheme } = useTheme()
   const { brand, contrastPref, setContrast, textSizePref, setTextSize, mounted } = useAppTheme()
+  const {
+    product: activeProduct,
+    setProduct,
+    customProductBrand,
+    setCustomProductBrand,
+    productBrandColors,
+    setProductBrandColor,
+    hiddenProductIds,
+    hideProduct,
+    showProduct,
+  } = useProduct()
   const { activeView, setActiveView } = useDashboardView()
   const { chartVariant, setChartVariant } = useChartVariant()
+  const productNameId = React.useId()
+  const productColorId = React.useId()
+  const [deleteProductOpen, setDeleteProductOpen] = React.useState(false)
+  const [deleteProductTarget, setDeleteProductTarget] = React.useState<Product | null>(null)
+  const [productEditorOpen, setProductEditorOpen] = React.useState(false)
+  const [productNameDraft, setProductNameDraft] = React.useState(
+    customProductBrand?.suffix ?? DEFAULT_CUSTOM_PRODUCT_BRAND.suffix,
+  )
+  const [productColorDraft, setProductColorDraft] = React.useState(
+    customProductBrand?.brandColor ?? DEFAULT_CUSTOM_PRODUCT_BRAND.brandColor,
+  )
 
   const safeTheme = mounted ? ((theme ?? "system") as "system" | "light" | "dark") : "system"
   const safeBrand = mounted ? brand : "one"
   const safeContrast = mounted ? contrastPref : "system"
   const safeTextSize = mounted ? textSizePref : "default"
+  const appliedCustomProduct = customProductBrand ?? DEFAULT_CUSTOM_PRODUCT_BRAND
+  const customProductDirty =
+    productNameDraft.trim() !== appliedCustomProduct.suffix ||
+    productColorDraft.trim() !== appliedCustomProduct.brandColor
+
+  React.useEffect(() => {
+    setProductNameDraft(customProductBrand?.suffix ?? DEFAULT_CUSTOM_PRODUCT_BRAND.suffix)
+    setProductColorDraft(customProductBrand?.brandColor ?? DEFAULT_CUSTOM_PRODUCT_BRAND.brandColor)
+  }, [customProductBrand])
 
   const themeTiles = React.useMemo(
     () =>
@@ -330,6 +505,17 @@ export function SettingsAppearanceCard() {
       })),
     [],
   )
+  const productOptions = React.useMemo(
+    () => [
+      { value: "exxat-one" as const, label: "Exxat One" },
+      { value: "exxat-prism" as const, label: "Exxat Prism" },
+      { value: "exxat-assessment" as const, label: "Exxat Assessment" },
+      ...(customProductBrand
+        ? [{ value: "exxat-custom" as const, label: `Exxat ${customProductBrand.suffix}` }]
+        : []),
+    ].filter(option => !hiddenProductIds.includes(option.value)),
+    [customProductBrand, hiddenProductIds],
+  )
 
   return (
     <section id="appearance" className="scroll-mt-20">
@@ -342,6 +528,229 @@ export function SettingsAppearanceCard() {
           <p className="text-sm text-muted-foreground">Loading theme…</p>
         ) : (
           <FieldGroup className="gap-8">
+            <SettingsFormRow
+              label="Products"
+              description="Recolour the brand mark + wordmark for each product. Switch the active product from the sidebar."
+            >
+              <div
+                className="overflow-hidden rounded-xl border border-border bg-card"
+                role="group"
+                aria-label="Product brand colors"
+              >
+                {productOptions.map(option => {
+                  const config = brandForProduct(option.value, customProductBrand, productBrandColors)
+                  // Registry default for this product — drives the picker's
+                  // "Reset" affordance when the live value diverges from it.
+                  const defaultConfig =
+                    option.value === "exxat-custom"
+                      ? customProductBrandConfig()
+                      : getProductBrand(option.value)
+                  const pickerId = `settings-product-color-${option.value}`
+                  const canDelete =
+                    option.value === "exxat-custom" || option.value === "exxat-assessment"
+                  const isCustom = option.value === "exxat-custom"
+                  const isActive = activeProduct === option.value
+                  // Colour-taken map for this row — keys are every OTHER
+                  // product's effective brand colour, values are the
+                  // human-readable product label (with " (active)" suffix
+                  // when applicable). The BrandColorPicker uses this to pip
+                  // already-claimed swatches so the user can see at a glance
+                  // that Pink is taken by Exxat Prism (and which one is the
+                  // currently-active product driving chrome).
+                  const usedBy: Record<string, string> = {}
+                  for (const other of productOptions) {
+                    if (other.value === option.value) continue
+                    const otherConfig = brandForProduct(
+                      other.value,
+                      customProductBrand,
+                      productBrandColors,
+                    )
+                    const label =
+                      activeProduct === other.value
+                        ? `${other.label} (active)`
+                        : other.label
+                    usedBy[otherConfig.brandColor] = label
+                  }
+                  const handleColorChange = (next: string) => {
+                    if (isCustom) {
+                      // Custom slot: persist suffix + colour together so the
+                      // sidebar label / wordmark suffix stay in sync.
+                      setCustomProductBrand({
+                        suffix: customProductBrand?.suffix?.trim() || DEFAULT_CUSTOM_PRODUCT_BRAND.suffix,
+                        brandColor: next,
+                      })
+                    } else {
+                      // Treat a "back to default" pick as clearing the
+                      // override so the built-in theme class (theme-one /
+                      // theme-prism / theme-assessment) gets re-applied for
+                      // the bespoke chrome look.
+                      if (defaultConfig && next.trim() === defaultConfig.brandColor.trim()) {
+                        setProductBrandColor(option.value, null)
+                      } else {
+                        setProductBrandColor(option.value, next)
+                      }
+                    }
+                  }
+                  return (
+                    <div
+                      key={option.value}
+                      className="flex min-w-0 items-center gap-3 border-b border-border px-3 py-2 last:border-b-0"
+                    >
+                      <div className="flex min-w-0 flex-1 items-center gap-2">
+                        <span className="min-w-0">
+                          <span className="sr-only">{option.label}</span>
+                          <ExxatProductLogo
+                            product={option.value}
+                            variant="mutedSuffix"
+                            className="w-auto max-w-[min(100%,18rem)]"
+                          />
+                        </span>
+                        {isActive ? (
+                          // Tells the user which product's chrome the picker
+                          // they're about to change actually drives — picking
+                          // a colour for a non-active product stores the
+                          // override but won't retint the surrounding UI
+                          // until they switch to that product in the sidebar.
+                          //
+                          // Uses **neutral** foreground tokens (not `text-brand`)
+                          // so the badge reads cleanly regardless of which
+                          // colour the active product is currently pinned to
+                          // — e.g. for the grey Sapphire accent the badge
+                          // would otherwise wash out.
+                          <Tip
+                            label="Currently active product — chrome reflects this color"
+                            side="top"
+                          >
+                            <span
+                              className="inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-foreground"
+                              aria-label="Active product"
+                            >
+                              <i
+                                className="fa-solid fa-circle text-[6px] text-emerald-500"
+                                aria-hidden="true"
+                              />
+                              Active
+                            </span>
+                          </Tip>
+                        ) : null}
+                      </div>
+                      <label htmlFor={pickerId} className="sr-only">
+                        Brand color for {option.label}
+                      </label>
+                      <div className="w-44 shrink-0">
+                        <BrandColorPicker
+                          id={pickerId}
+                          value={config.brandColor}
+                          defaultValue={defaultConfig?.brandColor}
+                          usedBy={usedBy}
+                          onChange={handleColorChange}
+                        />
+                      </div>
+                      {canDelete ? (
+                        <Tip label={`Delete ${option.label}`} side="top">
+                          <Button
+                            type="button"
+                            size="icon-sm"
+                            variant="ghost"
+                            aria-label={`Delete ${option.label}`}
+                            onClick={() => {
+                              setDeleteProductTarget(option.value)
+                              setDeleteProductOpen(true)
+                            }}
+                          >
+                            <i className="fa-light fa-trash-can text-xs" aria-hidden="true" />
+                          </Button>
+                        </Tip>
+                      ) : null}
+                    </div>
+                  )
+                })}
+                <div>
+                  <button
+                    type="button"
+                    className={cn(
+                      "flex w-full items-center gap-3 px-3 py-2 text-left transition",
+                      "hover:bg-interactive-hover/20",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    )}
+                    aria-expanded={productEditorOpen}
+                    onClick={() => setProductEditorOpen(open => !open)}
+                  >
+                    <span className="inline-flex size-7 shrink-0 items-center justify-center rounded-full bg-brand/10 text-brand">
+                      <i className="fa-light fa-plus text-xs" aria-hidden="true" />
+                    </span>
+                    <span className="min-w-0 flex-1">
+                      <span className="block text-sm font-medium text-foreground">Add product</span>
+                      <span className="block text-xs text-muted-foreground">Create a product name and brand color.</span>
+                    </span>
+                    <i
+                      className={cn(
+                        "fa-light fa-chevron-down text-xs text-muted-foreground transition-transform",
+                        productEditorOpen && "rotate-180",
+                      )}
+                      aria-hidden="true"
+                    />
+                  </button>
+
+                  {productEditorOpen ? (
+                    <div className="space-y-3 border-t border-border p-3">
+                    <div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+                      <div className="space-y-1.5">
+                        <label htmlFor={productNameId} className="text-xs font-medium text-muted-foreground">
+                          Product name
+                        </label>
+                        <Input
+                          id={productNameId}
+                          value={productNameDraft}
+                          onChange={event => setProductNameDraft(event.target.value)}
+                          placeholder={DEFAULT_CUSTOM_PRODUCT_BRAND.suffix}
+                          autoComplete="off"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <label htmlFor={productColorId} className="text-xs font-medium text-muted-foreground">
+                          Brand color
+                        </label>
+                        <BrandColorPicker
+                          id={productColorId}
+                          value={productColorDraft}
+                          onChange={setProductColorDraft}
+                        />
+                      </div>
+                    </div>
+                    <p className="text-xs leading-snug text-muted-foreground">
+                      Pick a swatch from the Exxat palette, or open{" "}
+                      <span className="text-foreground">Use custom CSS color</span> to paste any CSS
+                      value (hex, rgb, oklch).
+                    </p>
+                    <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-background px-3 py-2">
+                      <ExxatProductLogo product="exxat-custom" variant="mutedSuffix" className="w-auto max-w-[min(100%,18rem)]" />
+                      <Button
+                        type="button"
+                        size="sm"
+                        disabled={!productNameDraft.trim() || !productColorDraft.trim()}
+                        onClick={() => {
+                          setCustomProductBrand({
+                            suffix: productNameDraft.trim() || DEFAULT_CUSTOM_PRODUCT_BRAND.suffix,
+                            brandColor: productColorDraft.trim() || DEFAULT_CUSTOM_PRODUCT_BRAND.brandColor,
+                          })
+                          showProduct("exxat-custom")
+                          setProduct("exxat-custom")
+                          setProductEditorOpen(false)
+                        }}
+                      >
+                        Apply product
+                      </Button>
+                    </div>
+                    {customProductDirty ? (
+                      <p className="text-xs text-muted-foreground">Apply to update the sidebar and product selector.</p>
+                    ) : null}
+                  </div>
+                  ) : null}
+                </div>
+              </div>
+            </SettingsFormRow>
+
             <SettingsFormRow label="Theme" description="Light, dark, or match your OS.">
               <SelectionTileGrid<"system" | "light" | "dark">
                 className="w-full"
@@ -419,6 +828,40 @@ export function SettingsAppearanceCard() {
           </FieldGroup>
         )}
       </div>
+      <Dialog open={deleteProductOpen} onOpenChange={setDeleteProductOpen}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Delete product?</DialogTitle>
+            <DialogDescription>
+              This removes the product from the sidebar selector and switches your workspace back to Exxat One.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:gap-2">
+            <Button type="button" variant="outline" onClick={() => setDeleteProductOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => {
+                if (deleteProductTarget) {
+                  hideProduct(deleteProductTarget)
+                }
+                if (deleteProductTarget === "exxat-custom") {
+                  setCustomProductBrand(null)
+                }
+                setProduct("exxat-one")
+                setProductNameDraft(DEFAULT_CUSTOM_PRODUCT_BRAND.suffix)
+                setProductColorDraft(DEFAULT_CUSTOM_PRODUCT_BRAND.brandColor)
+                setDeleteProductTarget(null)
+                setDeleteProductOpen(false)
+              }}
+            >
+              Delete product
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </section>
   )
 }