@exxatdesignux/ui 0.2.18 → 0.3.0

package/dist/components/ui/view-segmented-control.js

@@ -0,0 +1,167 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Tooltip as Tooltip$1 } from 'radix-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      suppressHydrationWarning: true,
+      className: cn("cursor-pointer", className),
+      ...props
+    }
+  );
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })
+      ]
+    }
+  ) });
+}
+function Tip({ label, children, side = "top" }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side, className: "flex flex-wrap items-center gap-1.5", children: label })
+  ] });
+}
+function viewSegmentedToolbarClass(className) {
+  return cn(
+    "inline-flex items-center gap-0.5 rounded-lg bg-muted/60 p-[3px]",
+    className
+  );
+}
+function viewSegmentedButtonClass(isActive, opts) {
+  return cn(
+    "inline-flex items-center rounded-md transition-all whitespace-nowrap",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+    opts?.iconOnly ? "size-8 min-h-8 min-w-8 shrink-0 justify-center p-0 text-xs" : "gap-1.5 px-2.5 py-1 text-xs min-h-8",
+    isActive ? "bg-background text-foreground font-medium shadow-sm" : "text-muted-foreground hover:text-interactive-hover-foreground"
+  );
+}
+function ViewSegmentedControl({
+  value,
+  onValueChange,
+  options,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  iconOnly = false,
+  className,
+  showTooltips,
+  tooltipSide = "top"
+}) {
+  const tips = showTooltips ?? iconOnly;
+  const itemRefs = React.useRef([]);
+  React.useLayoutEffect(() => {
+    itemRefs.current = itemRefs.current.slice(0, options.length);
+  }, [options.length]);
+  const focusIndex = React.useCallback(
+    (index) => {
+      const len = options.length;
+      if (len === 0) return;
+      const i = (index % len + len) % len;
+      onValueChange(options[i].value);
+      requestAnimationFrame(() => {
+        itemRefs.current[i]?.focus();
+      });
+    },
+    [onValueChange, options]
+  );
+  const onRadioKeyDown = React.useCallback(
+    (e, index) => {
+      const len = options.length;
+      if (len === 0) return;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        focusIndex(index + 1);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        focusIndex(index - 1);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        focusIndex(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        focusIndex(len - 1);
+      }
+    },
+    [focusIndex, options.length]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      "data-slot": "view-segmented-toolbar",
+      className: cn(viewSegmentedToolbarClass(), "w-fit min-w-0 shrink-0", className),
+      children: options.map((opt, index) => {
+        const isActive = opt.value === value;
+        const tabIndex = isActive ? 0 : -1;
+        const button = /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (el) => {
+              itemRefs.current[index] = el;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": isActive,
+            "aria-label": iconOnly ? opt.label : void 0,
+            tabIndex,
+            onKeyDown: (e) => onRadioKeyDown(e, index),
+            onClick: () => onValueChange(opt.value),
+            "data-slot": "view-segmented-item",
+            className: viewSegmentedButtonClass(isActive, { iconOnly }),
+            children: [
+              opt.icon ? /* @__PURE__ */ jsx(
+                "i",
+                {
+                  className: cn(opt.icon, iconOnly ? "text-[13px]" : "text-xs"),
+                  "aria-hidden": "true"
+                }
+              ) : null,
+              !iconOnly ? opt.label : null
+            ]
+          }
+        );
+        return tips ? /* @__PURE__ */ jsx(Tip, { label: opt.label, side: tooltipSide, children: button }, opt.value) : /* @__PURE__ */ jsx(React.Fragment, { children: button }, opt.value);
+      })
+    }
+  );
+}
+
+export { ViewSegmentedControl, viewSegmentedButtonClass, viewSegmentedToolbarClass };
+//# sourceMappingURL=view-segmented-control.js.map
+//# sourceMappingURL=view-segmented-control.js.map

package/dist/components/ui/view-segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/tooltip.tsx","../../../src/components/ui/tip.tsx","../../../src/components/ui/view-segmented-control.tsx"],"names":["TooltipPrimitive","jsxs","jsx"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACeA,SAAS,OAAA,CAAQ;AAAA,EACf,GAAG;AACL,CAAA,EAAuD;AACrD,EAAA,2BAAQA,SAAA,CAAiB,IAAA,EAAjB,EAAsB,WAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/D;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACE,GAAA;AAAA,IAACA,SAAA,CAAiB,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,wBAAA,EAAwB,IAAA;AAAA,MACxB,SAAA,EAAW,EAAA,CAAG,gBAAA,EAAkB,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,UAAA,GAAa,CAAA;AAAA,EACb,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACE,GAAA,CAACA,SAAA,CAAiB,MAAA,EAAjB,EACC,QAAA,kBAAA,IAAA;AAAA,IAACA,SAAA,CAAiB,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,UAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,4rBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA,CAACA,SAAA,CAAiB,KAAA,EAAjB,EAAuB,WAAU,oGAAA,EAAqG;AAAA;AAAA;AAAA,GACzI,EACF,CAAA;AAEJ;ACnDO,SAAS,IAAI,EAAE,KAAA,EAAO,QAAA,EAAU,IAAA,GAAO,OAAM,EAAa;AAC/D,EAAA,uBACEC,KAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,GAAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EAAE,QAAA,EAAS,CAAA;AAAA,oBAClCA,GAAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAY,SAAA,EAAU,uCACnC,QAAA,EAAA,KAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;ACPO,SAAS,0BAA0B,SAAA,EAAoB;AAC5D,EAAA,OAAO,EAAA;AAAA,IACL,iEAAA;AAAA,IACA;AAAA,GACF;AACF;AAEO,SAAS,wBAAA,CACd,UACA,IAAA,EACA;AACA,EAAA,OAAO,EAAA;AAAA,IACL,sEAAA;AAAA,IACA,qGAAA;AAAA,IACA,IAAA,EAAM,WACF,4DAAA,GACA,qCAAA;AAAA,IACJ,WACI,qDAAA,GACA;AAAA,GACN;AACF;AA0BO,SAAS,oBAAA,CAAuC;AAAA,EACrD,KAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA,EAAc,SAAA;AAAA,EACd,kBAAA,EAAoB,eAAA;AAAA,EACpB,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc;AAChB,CAAA,EAAiC;AAC/B,EAAA,MAAM,OAAO,YAAA,IAAgB,QAAA;AAC7B,EAAA,MAAM,QAAA,GAAiB,KAAA,CAAA,MAAA,CAAqC,EAAE,CAAA;AAE9D,EAAM,sBAAgB,MAAM;AAC1B,IAAA,QAAA,CAAS,UAAU,QAAA,CAAS,OAAA,CAAQ,KAAA,CAAM,CAAA,EAAG,QAAQ,MAAM,CAAA;AAAA,EAC7D,CAAA,EAAG,CAAC,OAAA,CAAQ,MAAM,CAAC,CAAA;AAEnB,EAAA,MAAM,UAAA,GAAmB,KAAA,CAAA,WAAA;AAAA,IACvB,CAAC,KAAA,KAAkB;AACjB,MAAA,MAAM,MAAM,OAAA,CAAQ,MAAA;AACpB,MAAA,IAAI,QAAQ,CAAA,EAAG;AACf,MAAA,MAAM,CAAA,GAAA,CAAM,KAAA,GAAQ,GAAA,GAAO,GAAA,IAAO,GAAA;AAClC,MAAA,aAAA,CAAc,OAAA,CAAQ,CAAC,CAAA,CAAE,KAAK,CAAA;AAC9B,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,QAAA,CAAS,OAAA,CAAQ,CAAC,CAAA,EAAG,KAAA,EAAM;AAAA,MAC7B,CAAC,CAAA;AAAA,IACH,CAAA;AAAA,IACA,CAAC,eAAe,OAAO;AAAA,GACzB;AAEA,EAAA,MAAM,cAAA,GAAuB,KAAA,CAAA,WAAA;AAAA,IAC3B,CAAC,GAA2C,KAAA,KAAkB;AAC5D,MAAA,MAAM,MAAM,OAAA,CAAQ,MAAA;AACpB,MAAA,IAAI,QAAQ,CAAA,EAAG;AACf,MAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,YAAA,IAAgB,CAAA,CAAE,QAAQ,WAAA,EAAa;AACnD,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,MACtB,WAAW,CAAA,CAAE,GAAA,KAAQ,WAAA,IAAe,CAAA,CAAE,QAAQ,SAAA,EAAW;AACvD,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,MACtB,CAAA,MAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,MAAA,EAAQ;AAC3B,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,UAAA,CAAW,CAAC,CAAA;AAAA,MACd,CAAA,MAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,KAAA,EAAO;AAC1B,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,UAAA,CAAW,MAAM,CAAC,CAAA;AAAA,MACpB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,UAAA,EAAY,OAAA,CAAQ,MAAM;AAAA,GAC7B;AAEA,EAAA,uBACEA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,YAAA;AAAA,MACL,YAAA,EAAY,SAAA;AAAA,MACZ,kBAAA,EAAkB,eAAA;AAAA,MAClB,WAAA,EAAU,wBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,yBAAA,EAA0B,EAAG,0BAA0B,SAAS,CAAA;AAAA,MAE7E,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,GAAA,EAAK,KAAA,KAAU;AAC3B,QAAA,MAAM,QAAA,GAAW,IAAI,KAAA,KAAU,KAAA;AAC/B,QAAA,MAAM,QAAA,GAAW,WAAW,CAAA,GAAI,EAAA;AAEhC,QAAA,MAAM,yBACJD,IAAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAK,CAAA,EAAA,KAAM;AACT,cAAA,QAAA,CAAS,OAAA,CAAQ,KAAK,CAAA,GAAI,EAAA;AAAA,YAC5B,CAAA;AAAA,YACA,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,cAAA,EAAc,QAAA;AAAA,YACd,YAAA,EAAY,QAAA,GAAW,GAAA,CAAI,KAAA,GAAQ,MAAA;AAAA,YACnC,QAAA;AAAA,YACA,SAAA,EAAW,CAAA,CAAA,KAAK,cAAA,CAAe,CAAA,EAAG,KAAK,CAAA;AAAA,YACvC,OAAA,EAAS,MAAM,aAAA,CAAc,GAAA,CAAI,KAAK,CAAA;AAAA,YACtC,WAAA,EAAU,qBAAA;AAAA,YACV,SAAA,EAAW,wBAAA,CAAyB,QAAA,EAAU,EAAE,UAAU,CAAA;AAAA,YAEzD,QAAA,EAAA;AAAA,cAAA,GAAA,CAAI,uBACHC,GAAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,WAAW,EAAA,CAAG,GAAA,CAAI,IAAA,EAAM,QAAA,GAAW,gBAAgB,SAAS,CAAA;AAAA,kBAC5D,aAAA,EAAY;AAAA;AAAA,eACd,GACE,IAAA;AAAA,cACH,CAAC,QAAA,GAAW,GAAA,CAAI,KAAA,GAAQ;AAAA;AAAA;AAAA,SAC3B;AAGF,QAAA,OAAO,uBACLA,GAAAA,CAAC,OAAoB,KAAA,EAAO,GAAA,CAAI,OAAO,IAAA,EAAM,WAAA,EAC1C,oBADO,GAAA,CAAI,KAEd,oBAEAA,GAAAA,CAAO,gBAAN,EAAgC,QAAA,EAAA,MAAA,EAAA,EAAZ,IAAI,KAAe,CAAA;AAAA,MAE5C,CAAC;AAAA;AAAA,GACH;AAEJ","file":"view-segmented-control.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return (\n    <TooltipPrimitive.Trigger\n      data-slot=\"tooltip-trigger\"\n      suppressHydrationWarning\n      className={cn(\"cursor-pointer\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n","\"use client\"\nimport * as React from \"react\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"./tooltip\"\n\ninterface TipProps {\n  /** Plain string or text + `<Kbd />` — see `.cursor/rules/exxat-kbd-shortcuts.mdc` */\n  label: React.ReactNode\n  children: React.ReactNode\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\"\n}\n\nexport function Tip({ label, children, side = \"top\" }: TipProps) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{children}</TooltipTrigger>\n      <TooltipContent side={side} className=\"flex flex-wrap items-center gap-1.5\">\n        {label}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n","\"use client\"\n\n/**\n * Segmented “view tabs” control — same visual language as `ListPageTemplate` views toolbar\n * (`bg-muted/60` pill). Uses `role=\"radiogroup\"` + `role=\"radio\"` for exclusive choice (1.3.1).\n *\n * Keyboard: Arrow Left/Right (or Up/Down), Home, End — see onRadioKeyDown.\n */\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\nimport { Tip } from \"./tip\"\n\nexport function viewSegmentedToolbarClass(className?: string) {\n  return cn(\n    \"inline-flex items-center gap-0.5 rounded-lg bg-muted/60 p-[3px]\",\n    className,\n  )\n}\n\nexport function viewSegmentedButtonClass(\n  isActive: boolean,\n  opts?: { iconOnly?: boolean },\n) {\n  return cn(\n    \"inline-flex items-center rounded-md transition-all whitespace-nowrap\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n    opts?.iconOnly\n      ? \"size-8 min-h-8 min-w-8 shrink-0 justify-center p-0 text-xs\"\n      : \"gap-1.5 px-2.5 py-1 text-xs min-h-8\",\n    isActive\n      ? \"bg-background text-foreground font-medium shadow-sm\"\n      : \"text-muted-foreground hover:text-interactive-hover-foreground\",\n  )\n}\n\nexport interface ViewSegmentOption<T extends string = string> {\n  value: T\n  label: string\n  /** Full `className` for Font Awesome icon (e.g. `fa-light fa-chart-bar`) */\n  icon?: string\n}\n\nexport interface ViewSegmentedControlProps<T extends string = string> {\n  value: T\n  onValueChange: (value: T) => void\n  options: readonly ViewSegmentOption<T>[]\n  /** Accessible name for the group (required — names the radiogroup) */\n  \"aria-label\": string\n  /** Optional description id for `aria-describedby` (e.g. helper text) */\n  \"aria-describedby\"?: string\n  /** Icon-only triggers (labels in `sr-only` or visible text) */\n  iconOnly?: boolean\n  className?: string\n  /** Tooltip on each segment (defaults to `iconOnly` — recommended for icon-only) */\n  showTooltips?: boolean\n  /** Tooltip position */\n  tooltipSide?: \"top\" | \"bottom\" | \"left\" | \"right\"\n}\n\nexport function ViewSegmentedControl<T extends string>({\n  value,\n  onValueChange,\n  options,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedBy,\n  iconOnly = false,\n  className,\n  showTooltips,\n  tooltipSide = \"top\",\n}: ViewSegmentedControlProps<T>) {\n  const tips = showTooltips ?? iconOnly\n  const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  React.useLayoutEffect(() => {\n    itemRefs.current = itemRefs.current.slice(0, options.length)\n  }, [options.length])\n\n  const focusIndex = React.useCallback(\n    (index: number) => {\n      const len = options.length\n      if (len === 0) return\n      const i = ((index % len) + len) % len\n      onValueChange(options[i].value)\n      requestAnimationFrame(() => {\n        itemRefs.current[i]?.focus()\n      })\n    },\n    [onValueChange, options],\n  )\n\n  const onRadioKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n      const len = options.length\n      if (len === 0) return\n      if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n        e.preventDefault()\n        focusIndex(index + 1)\n      } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n        e.preventDefault()\n        focusIndex(index - 1)\n      } else if (e.key === \"Home\") {\n        e.preventDefault()\n        focusIndex(0)\n      } else if (e.key === \"End\") {\n        e.preventDefault()\n        focusIndex(len - 1)\n      }\n    },\n    [focusIndex, options.length],\n  )\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-describedby={ariaDescribedBy}\n      data-slot=\"view-segmented-toolbar\"\n      className={cn(viewSegmentedToolbarClass(), \"w-fit min-w-0 shrink-0\", className)}\n    >\n      {options.map((opt, index) => {\n        const isActive = opt.value === value\n        const tabIndex = isActive ? 0 : -1\n\n        const button = (\n          <button\n            ref={el => {\n              itemRefs.current[index] = el\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            aria-label={iconOnly ? opt.label : undefined}\n            tabIndex={tabIndex}\n            onKeyDown={e => onRadioKeyDown(e, index)}\n            onClick={() => onValueChange(opt.value)}\n            data-slot=\"view-segmented-item\"\n            className={viewSegmentedButtonClass(isActive, { iconOnly })}\n          >\n            {opt.icon ? (\n              <i\n                className={cn(opt.icon, iconOnly ? \"text-[13px]\" : \"text-xs\")}\n                aria-hidden=\"true\"\n              />\n            ) : null}\n            {!iconOnly ? opt.label : null}\n          </button>\n        )\n\n        return tips ? (\n          <Tip key={opt.value} label={opt.label} side={tooltipSide}>\n            {button}\n          </Tip>\n        ) : (\n          <React.Fragment key={opt.value}>{button}</React.Fragment>\n        )\n      })}\n    </div>\n  )\n}\n"]}

package/dist/data-list-view-registry-CyBoBML4.d.ts

@@ -0,0 +1,73 @@
+import { DataListViewType } from './lib/data-list-view.js';
+
+/**
+ * Maps `DataListViewType` to the UI surface pattern for list pages.
+ *
+ * **Data:** One `useTableState(fullRows, columns, …)` per tab; **filtered/sorted rows**
+ * (`tableState.rows`) are the single source of truth for List, Board, and Dashboard.
+ * Table view renders the same state via `DataTable`.
+ *
+ * | View        | Surface |
+ * |------------|---------|
+ * | `table`    | `DataTable` |
+ * | `list`     | `DataTableToolbar` + list layout |
+ * | `board`    | `DataTableToolbar` + board / kanban |
+ * | `dashboard`| `DataTableToolbar` + KPI (`KeyMetrics`) + optional charts (`ChartCard`, Recharts, etc.) |
+ * | `calendar` | `DataTableToolbar` + `ListPageCalendarView` (month grid + day detail) |
+ * | `folder`   | `DataTableToolbar` + icon grid (macOS-Finder-style) |
+ * | `panel`    | `DataTableToolbar` + resizable split (list / tree column + detail inspector) |
+ */
+
+/** What to render for the active view tab (routing / branching). */
+type DataListViewRenderKind = "data-table" | "list-with-toolbar" | "board-with-toolbar" | "dashboard-with-toolbar" | "calendar-with-toolbar" | "folder-with-toolbar" | "panel-with-toolbar" | "tree-panel-with-toolbar";
+/**
+ * Stable classification for switch/if chains. **Every** `DataListViewType` maps to exactly one kind.
+ * Use this so `dashboard` is never mistaken for `board` (a common bug when only `list` is special-cased).
+ */
+declare function getDataListViewRenderKind(view: DataListViewType): DataListViewRenderKind;
+declare function usesDataTableComponent(view: DataListViewType): boolean;
+/** KPI band + optional charts — not the kanban board. */
+declare function usesDashboardSurface(view: DataListViewType): boolean;
+/** Shared toolbar (search, filters, properties); body differs by view. */
+declare function usesToolbarWithFilteredRows(view: DataListViewType): boolean;
+
+/**
+ * Central registry for list-page view types — labels, render kinds, and hub chrome rules.
+ *
+ * **Add a new view once here** (plus a body in `components/data-views/`). Hubs declare
+ * `supportedViewTypes` on `ListPageTemplate`; table components branch with
+ * `getDataListViewRenderKind` + `ListPageConnectedViewBody` (never a dashboard fallback).
+ *
+ * @see `docs/data-views-pattern.md` — "View registry and connected bodies"
+ */
+
+interface DataListViewDefinition {
+    value: DataListViewType;
+    label: string;
+    icon: string;
+    renderKind: DataListViewRenderKind;
+    /** `ListPageTemplate` metrics slot above the views toolbar. */
+    hubMetricsStrip: boolean;
+}
+declare const DATA_LIST_VIEW_REGISTRY: readonly DataListViewDefinition[];
+declare function dataListViewDefinition(view: DataListViewType): DataListViewDefinition;
+/** `ListPageTemplate` hub KPI strip — false for calendar and dashboard (inline KPIs). */
+declare function showsListPageHubMetricsStrip(view: DataListViewType): boolean;
+/** Tiles for Add view + Properties when a hub only supports a subset of views. */
+declare function dataListViewTilesForHub(supported: readonly DataListViewType[]): {
+    type: DataListViewType;
+    label: string;
+    icon: string;
+}[];
+/** `SelectionTileGrid` options for Properties when a hub supports a subset of views. */
+declare function dataListViewSelectionTilesForHub(supported: readonly DataListViewType[]): {
+    value: DataListViewType;
+    label: string;
+    icon: string;
+}[];
+/** View types that expose Table Properties (all registered `DataListViewType` values). */
+declare const DATA_LIST_SURFACE_VIEW_TYPES: ReadonlySet<DataListViewType>;
+declare function isDataListSurfaceViewType(viewType: string): viewType is DataListViewType;
+declare function isDataListViewTypeSupported(view: DataListViewType, supported: readonly DataListViewType[]): boolean;
+
+export { DATA_LIST_SURFACE_VIEW_TYPES as D, DATA_LIST_VIEW_REGISTRY as a, type DataListViewDefinition as b, type DataListViewRenderKind as c, dataListViewDefinition as d, dataListViewSelectionTilesForHub as e, dataListViewTilesForHub as f, getDataListViewRenderKind as g, isDataListViewTypeSupported as h, isDataListSurfaceViewType as i, usesDataTableComponent as j, usesToolbarWithFilteredRows as k, showsListPageHubMetricsStrip as s, usesDashboardSurface as u };

package/dist/hooks/use-app-theme.d.ts

@@ -0,0 +1,24 @@
+type Brand = "one" | "prism";
+declare const CONTRAST_PREFS: readonly ["system", "normal", "high", "windows"];
+/** What the user explicitly picks (or "system" to follow OS). */
+type ContrastPreference = (typeof CONTRAST_PREFS)[number];
+/** The resolved mode actually applied to the DOM. */
+type ContrastMode = "normal" | "high" | "windows";
+/** UI text scale at the document root (rem-based UI tracks together). */
+type TextSizePreference = "compact" | "default" | "large";
+declare function useAppTheme(): {
+    brand: Brand;
+    setBrand: (b: Brand) => void;
+    /** The user's preference: "system" | "normal" | "high" | "windows" */
+    contrastPref: "normal" | "high" | "system" | "windows";
+    /** The resolved contrast mode actually applied to the DOM. */
+    contrast: ContrastMode;
+    /** Set the contrast preference. */
+    setContrast: (pref: ContrastPreference) => void;
+    /** Text scale: "compact" | "default" | "large" */
+    textSizePref: TextSizePreference;
+    setTextSize: (pref: TextSizePreference) => void;
+    mounted: boolean;
+};
+
+export { type Brand, type ContrastMode, type ContrastPreference, type TextSizePreference, useAppTheme };

package/dist/hooks/use-app-theme.js

@@ -0,0 +1,286 @@
+"use client";
+import { useState, useEffect, useCallback } from 'react';
+
+// src/theme/windows-contrast-theme.json
+var windows_contrast_theme_default = {
+  light: {
+    "--hc-highlight": "#0000ff",
+    "--hc-highlight-text": "#ffffff",
+    "--background": "#ffffff",
+    "--foreground": "#000000",
+    "--card": "#ffffff",
+    "--card-foreground": "#000000",
+    "--popover": "#ffffff",
+    "--popover-foreground": "#000000",
+    "--primary": "#0000ff",
+    "--primary-foreground": "#ffffff",
+    "--secondary": "#ffffff",
+    "--secondary-foreground": "#000000",
+    "--muted": "#e8e8e8",
+    "--muted-foreground": "#3b3b3b",
+    "--accent": "#0000ff",
+    "--accent-foreground": "#ffffff",
+    "--destructive": "#b5200d",
+    "--destructive-foreground": "#ffffff",
+    "--border": "#000000",
+    "--border-control": "#000000",
+    "--border-control-3": "#000000",
+    "--border-control-35": "#000000",
+    "--control-border": "#000000",
+    "--input": "#000000",
+    "--input-background": "#ffffff",
+    "--ring": "#0000ff",
+    "--sidebar": "#ffffff",
+    "--sidebar-foreground": "#000000",
+    "--sidebar-primary": "#000000",
+    "--sidebar-primary-foreground": "#ffffff",
+    "--sidebar-accent": "#d9d9d9",
+    "--sidebar-accent-foreground": "#000000",
+    "--sidebar-border": "#000000",
+    "--sidebar-ring": "#0000ff",
+    "--sidebar-section-label-foreground": "#515151",
+    "--brand-tint": "#f0f0f0",
+    "--brand-tint-light": "#f7f7f7",
+    "--brand-tint-subtle": "#fafafa",
+    "--chart-1": "#000000",
+    "--chart-2": "#3b3b3b",
+    "--chart-3": "#6e6e6e",
+    "--chart-4": "#a0a0a0",
+    "--chart-5": "#d1d1d1",
+    "--chip-1": "#000000",
+    "--chip-2": "#000000",
+    "--chip-3": "#000000",
+    "--chip-4": "#000000",
+    "--chip-5": "#000000",
+    "--chip-destructive": "#b5200d",
+    "--interactive-hover": "#e0e0e0",
+    "--interactive-hover-foreground": "#000000",
+    "--interactive-hover-subtle": "#ebebeb",
+    "--interactive-hover-soft": "#ebebeb",
+    "--interactive-hover-medium": "#d5d5d5",
+    "--interactive-hover-strong": "#cccccc",
+    "--interactive-hover-row": "#e0e0e0",
+    "--overlay": "color-mix(in srgb, #000000 18%, transparent)",
+    "--dt-row-bg": "#ffffff",
+    "--dt-row-hover": "#ebebeb",
+    "--dt-row-selected": "#0000ff",
+    "--dt-row-selected-fg": "#ffffff",
+    "--dt-header-bg": "#ffffff",
+    "--dt-group-bg": "#ebebeb",
+    "--dt-new-row-bg": "#ffffff",
+    "--dt-new-row-border": "#000000",
+    "--theme-color-chrome": "#ffffff"
+  },
+  dark: {
+    "--hc-highlight": "#ffff00",
+    "--hc-highlight-text": "#000000",
+    "--background": "#000000",
+    "--foreground": "#ffffff",
+    "--card": "#000000",
+    "--card-foreground": "#ffffff",
+    "--popover": "#0a0a0a",
+    "--popover-foreground": "#ffffff",
+    "--primary": "#00ffff",
+    "--primary-foreground": "#000000",
+    "--secondary": "#000000",
+    "--secondary-foreground": "#ffffff",
+    "--muted": "#1a1a1a",
+    "--muted-foreground": "#ffffff",
+    "--accent": "#ffff00",
+    "--accent-foreground": "#000000",
+    "--destructive": "#ff8080",
+    "--destructive-foreground": "#000000",
+    "--border": "#ffffff",
+    "--border-control": "#ffffff",
+    "--border-control-3": "#ffffff",
+    "--border-control-35": "#ffffff",
+    "--control-border": "#ffffff",
+    "--input": "#ffffff",
+    "--input-background": "#000000",
+    "--ring": "#ffff00",
+    "--sidebar": "#000000",
+    "--sidebar-foreground": "#ffffff",
+    "--sidebar-primary": "#ffffff",
+    "--sidebar-primary-foreground": "#000000",
+    "--sidebar-accent": "#1a1a1a",
+    "--sidebar-accent-foreground": "#ffffff",
+    "--sidebar-border": "#ffffff",
+    "--sidebar-ring": "#ffff00",
+    "--sidebar-section-label-foreground": "#c8c8c8",
+    "--brand-tint": "#1a1a1a",
+    "--brand-tint-light": "#141414",
+    "--brand-tint-subtle": "#101010",
+    "--chart-1": "#ffffff",
+    "--chart-2": "#c8c8c8",
+    "--chart-3": "#8e8e8e",
+    "--chart-4": "#5a5a5a",
+    "--chart-5": "#2e2e2e",
+    "--chip-1": "#ffffff",
+    "--chip-2": "#ffffff",
+    "--chip-3": "#ffffff",
+    "--chip-4": "#ffffff",
+    "--chip-5": "#ffffff",
+    "--chip-destructive": "#ff8080",
+    "--interactive-hover": "#262626",
+    "--interactive-hover-foreground": "#ffffff",
+    "--interactive-hover-subtle": "#1f1f1f",
+    "--interactive-hover-soft": "#1f1f1f",
+    "--interactive-hover-medium": "#2e2e2e",
+    "--interactive-hover-strong": "#383838",
+    "--interactive-hover-row": "#262626",
+    "--overlay": "color-mix(in srgb, #ffffff 22%, transparent)",
+    "--dt-row-bg": "#000000",
+    "--dt-row-hover": "#1a1a1a",
+    "--dt-row-selected": "#ffff00",
+    "--dt-row-selected-fg": "#000000",
+    "--dt-header-bg": "#000000",
+    "--dt-group-bg": "#1a1a1a",
+    "--dt-new-row-bg": "#000000",
+    "--dt-new-row-border": "#ffffff",
+    "--theme-color-chrome": "#000000"
+  }
+};
+
+// src/theme/apply-windows-contrast-theme.ts
+var file = windows_contrast_theme_default;
+var WINDOWS_VAR_KEYS = /* @__PURE__ */ new Set([
+  ...Object.keys(file.light),
+  ...Object.keys(file.dark)
+]);
+function applyWindowsContrastTheme() {
+  const el = document.documentElement;
+  const isDark = el.classList.contains("dark");
+  const map = isDark ? file.dark : file.light;
+  for (const [prop, val] of Object.entries(map)) {
+    el.style.setProperty(prop, val);
+  }
+}
+function clearWindowsContrastTheme() {
+  const el = document.documentElement;
+  for (const key of WINDOWS_VAR_KEYS) {
+    el.style.removeProperty(key);
+  }
+}
+
+// src/hooks/use-app-theme.ts
+var CONTRAST_PREFS = ["system", "normal", "high", "windows"];
+var BRAND_KEY = "exxat-brand";
+var CONTRAST_KEY = "exxat-contrast";
+var TEXT_SIZE_KEY = "exxat-text-size";
+var MQ = "(prefers-contrast: more)";
+function getOsContrast() {
+  if (typeof window === "undefined") return "normal";
+  return window.matchMedia(MQ).matches ? "high" : "normal";
+}
+function resolveContrast(pref) {
+  if (pref === "system") return getOsContrast();
+  return pref;
+}
+function normalizeContrastPref(raw) {
+  if (raw && CONTRAST_PREFS.includes(raw)) {
+    return raw;
+  }
+  return "system";
+}
+function applyBrand(brand) {
+  const html = document.documentElement;
+  html.classList.remove("theme-one", "theme-prism");
+  html.classList.add(`theme-${brand}`);
+}
+function applyContrast(mode) {
+  if (mode === "windows") {
+    document.documentElement.setAttribute("data-contrast", "windows");
+    applyWindowsContrastTheme();
+    return;
+  }
+  clearWindowsContrastTheme();
+  document.documentElement.setAttribute(
+    "data-contrast",
+    mode === "high" ? "high" : "off"
+  );
+}
+function applyTextSize(pref) {
+  const html = document.documentElement;
+  if (pref === "default") {
+    html.removeAttribute("data-text-size");
+  } else {
+    html.setAttribute("data-text-size", pref);
+  }
+}
+function useAppTheme() {
+  const [brand, setBrandState] = useState("one");
+  const [contrastPref, setContrastPrefState] = useState("system");
+  const [resolvedContrast, setResolvedContrast] = useState("normal");
+  const [textSizePref, setTextSizePrefState] = useState("default");
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+    const storedBrand = localStorage.getItem(BRAND_KEY) ?? "one";
+    const storedPref = normalizeContrastPref(localStorage.getItem(CONTRAST_KEY));
+    const storedText = localStorage.getItem(TEXT_SIZE_KEY) ?? "default";
+    setBrandState(storedBrand);
+    setContrastPrefState(storedPref);
+    setTextSizePrefState(storedText);
+    applyBrand(storedBrand);
+    const resolved = resolveContrast(storedPref);
+    setResolvedContrast(resolved);
+    applyContrast(resolved);
+    applyTextSize(storedText);
+  }, []);
+  useEffect(() => {
+    if (contrastPref !== "system") return;
+    const mql = window.matchMedia(MQ);
+    function onChange() {
+      const resolved = getOsContrast();
+      setResolvedContrast(resolved);
+      applyContrast(resolved);
+    }
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [contrastPref]);
+  useEffect(() => {
+    if (resolvedContrast !== "windows") return;
+    applyWindowsContrastTheme();
+    const html = document.documentElement;
+    const obs = new MutationObserver(() => {
+      applyWindowsContrastTheme();
+    });
+    obs.observe(html, { attributes: true, attributeFilter: ["class"] });
+    return () => obs.disconnect();
+  }, [resolvedContrast]);
+  const setBrand = useCallback((b) => {
+    setBrandState(b);
+    localStorage.setItem(BRAND_KEY, b);
+    applyBrand(b);
+  }, []);
+  const setContrast = useCallback((pref) => {
+    setContrastPrefState(pref);
+    localStorage.setItem(CONTRAST_KEY, pref);
+    const resolved = resolveContrast(pref);
+    setResolvedContrast(resolved);
+    applyContrast(resolved);
+  }, []);
+  const setTextSize = useCallback((pref) => {
+    setTextSizePrefState(pref);
+    localStorage.setItem(TEXT_SIZE_KEY, pref);
+    applyTextSize(pref);
+  }, []);
+  return {
+    brand,
+    setBrand,
+    /** The user's preference: "system" | "normal" | "high" | "windows" */
+    contrastPref,
+    /** The resolved contrast mode actually applied to the DOM. */
+    contrast: resolvedContrast,
+    /** Set the contrast preference. */
+    setContrast,
+    /** Text scale: "compact" | "default" | "large" */
+    textSizePref,
+    setTextSize,
+    mounted
+  };
+}
+
+export { useAppTheme };
+//# sourceMappingURL=use-app-theme.js.map
+//# sourceMappingURL=use-app-theme.js.map

package/dist/hooks/use-app-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/windows-contrast-theme.json","../../src/theme/apply-windows-contrast-theme.ts","../../src/hooks/use-app-theme.ts"],"names":[],"mappings":"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","file":"use-app-theme.js","sourcesContent":["{\n  \"$comment\": \"In-app “Windows (JSON)” contrast mode. Edit hex or oklch() strings to match a Windows Contrast theme (Settings → Accessibility → Contrast themes) or an exported .theme file. Keys are Exxat semantic CSS variables on <html>. Light/dark follow the app’s light/dark mode (next-themes).\",\n  \"windowsSettingsLabels\": {\n    \"Background\": \"Canvas — maps to --background, surfaces, sidebar base\",\n    \"Text\": \"Text — maps to --foreground and readable copy tokens\",\n    \"Hyperlink\": \"Hyperlinks — mapped to --primary / focus via --ring where useful\",\n    \"Selected text\": \"Selected text — maps to --accent and --accent-foreground\",\n    \"Button text\": \"Button text — maps to --primary / --primary-foreground pair\",\n    \"Disabled text\": \"Disabled text — maps to --muted / --muted-foreground\"\n  },\n  \"light\": {\n    \"--hc-highlight\": \"#0000ff\",\n    \"--hc-highlight-text\": \"#ffffff\",\n    \"--background\": \"#ffffff\",\n    \"--foreground\": \"#000000\",\n    \"--card\": \"#ffffff\",\n    \"--card-foreground\": \"#000000\",\n    \"--popover\": \"#ffffff\",\n    \"--popover-foreground\": \"#000000\",\n    \"--primary\": \"#0000ff\",\n    \"--primary-foreground\": \"#ffffff\",\n    \"--secondary\": \"#ffffff\",\n    \"--secondary-foreground\": \"#000000\",\n    \"--muted\": \"#e8e8e8\",\n    \"--muted-foreground\": \"#3b3b3b\",\n    \"--accent\": \"#0000ff\",\n    \"--accent-foreground\": \"#ffffff\",\n    \"--destructive\": \"#b5200d\",\n    \"--destructive-foreground\": \"#ffffff\",\n    \"--border\": \"#000000\",\n    \"--border-control\": \"#000000\",\n    \"--border-control-3\": \"#000000\",\n    \"--border-control-35\": \"#000000\",\n    \"--control-border\": \"#000000\",\n    \"--input\": \"#000000\",\n    \"--input-background\": \"#ffffff\",\n    \"--ring\": \"#0000ff\",\n    \"--sidebar\": \"#ffffff\",\n    \"--sidebar-foreground\": \"#000000\",\n    \"--sidebar-primary\": \"#000000\",\n    \"--sidebar-primary-foreground\": \"#ffffff\",\n    \"--sidebar-accent\": \"#d9d9d9\",\n    \"--sidebar-accent-foreground\": \"#000000\",\n    \"--sidebar-border\": \"#000000\",\n    \"--sidebar-ring\": \"#0000ff\",\n    \"--sidebar-section-label-foreground\": \"#515151\",\n    \"--brand-tint\": \"#f0f0f0\",\n    \"--brand-tint-light\": \"#f7f7f7\",\n    \"--brand-tint-subtle\": \"#fafafa\",\n    \"--chart-1\": \"#000000\",\n    \"--chart-2\": \"#3b3b3b\",\n    \"--chart-3\": \"#6e6e6e\",\n    \"--chart-4\": \"#a0a0a0\",\n    \"--chart-5\": \"#d1d1d1\",\n    \"--chip-1\": \"#000000\",\n    \"--chip-2\": \"#000000\",\n    \"--chip-3\": \"#000000\",\n    \"--chip-4\": \"#000000\",\n    \"--chip-5\": \"#000000\",\n    \"--chip-destructive\": \"#b5200d\",\n    \"--interactive-hover\": \"#e0e0e0\",\n    \"--interactive-hover-foreground\": \"#000000\",\n    \"--interactive-hover-subtle\": \"#ebebeb\",\n    \"--interactive-hover-soft\": \"#ebebeb\",\n    \"--interactive-hover-medium\": \"#d5d5d5\",\n    \"--interactive-hover-strong\": \"#cccccc\",\n    \"--interactive-hover-row\": \"#e0e0e0\",\n    \"--overlay\": \"color-mix(in srgb, #000000 18%, transparent)\",\n    \"--dt-row-bg\": \"#ffffff\",\n    \"--dt-row-hover\": \"#ebebeb\",\n    \"--dt-row-selected\": \"#0000ff\",\n    \"--dt-row-selected-fg\": \"#ffffff\",\n    \"--dt-header-bg\": \"#ffffff\",\n    \"--dt-group-bg\": \"#ebebeb\",\n    \"--dt-new-row-bg\": \"#ffffff\",\n    \"--dt-new-row-border\": \"#000000\",\n    \"--theme-color-chrome\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"--hc-highlight\": \"#ffff00\",\n    \"--hc-highlight-text\": \"#000000\",\n    \"--background\": \"#000000\",\n    \"--foreground\": \"#ffffff\",\n    \"--card\": \"#000000\",\n    \"--card-foreground\": \"#ffffff\",\n    \"--popover\": \"#0a0a0a\",\n    \"--popover-foreground\": \"#ffffff\",\n    \"--primary\": \"#00ffff\",\n    \"--primary-foreground\": \"#000000\",\n    \"--secondary\": \"#000000\",\n    \"--secondary-foreground\": \"#ffffff\",\n    \"--muted\": \"#1a1a1a\",\n    \"--muted-foreground\": \"#ffffff\",\n    \"--accent\": \"#ffff00\",\n    \"--accent-foreground\": \"#000000\",\n    \"--destructive\": \"#ff8080\",\n    \"--destructive-foreground\": \"#000000\",\n    \"--border\": \"#ffffff\",\n    \"--border-control\": \"#ffffff\",\n    \"--border-control-3\": \"#ffffff\",\n    \"--border-control-35\": \"#ffffff\",\n    \"--control-border\": \"#ffffff\",\n    \"--input\": \"#ffffff\",\n    \"--input-background\": \"#000000\",\n    \"--ring\": \"#ffff00\",\n    \"--sidebar\": \"#000000\",\n    \"--sidebar-foreground\": \"#ffffff\",\n    \"--sidebar-primary\": \"#ffffff\",\n    \"--sidebar-primary-foreground\": \"#000000\",\n    \"--sidebar-accent\": \"#1a1a1a\",\n    \"--sidebar-accent-foreground\": \"#ffffff\",\n    \"--sidebar-border\": \"#ffffff\",\n    \"--sidebar-ring\": \"#ffff00\",\n    \"--sidebar-section-label-foreground\": \"#c8c8c8\",\n    \"--brand-tint\": \"#1a1a1a\",\n    \"--brand-tint-light\": \"#141414\",\n    \"--brand-tint-subtle\": \"#101010\",\n    \"--chart-1\": \"#ffffff\",\n    \"--chart-2\": \"#c8c8c8\",\n    \"--chart-3\": \"#8e8e8e\",\n    \"--chart-4\": \"#5a5a5a\",\n    \"--chart-5\": \"#2e2e2e\",\n    \"--chip-1\": \"#ffffff\",\n    \"--chip-2\": \"#ffffff\",\n    \"--chip-3\": \"#ffffff\",\n    \"--chip-4\": \"#ffffff\",\n    \"--chip-5\": \"#ffffff\",\n    \"--chip-destructive\": \"#ff8080\",\n    \"--interactive-hover\": \"#262626\",\n    \"--interactive-hover-foreground\": \"#ffffff\",\n    \"--interactive-hover-subtle\": \"#1f1f1f\",\n    \"--interactive-hover-soft\": \"#1f1f1f\",\n    \"--interactive-hover-medium\": \"#2e2e2e\",\n    \"--interactive-hover-strong\": \"#383838\",\n    \"--interactive-hover-row\": \"#262626\",\n    \"--overlay\": \"color-mix(in srgb, #ffffff 22%, transparent)\",\n    \"--dt-row-bg\": \"#000000\",\n    \"--dt-row-hover\": \"#1a1a1a\",\n    \"--dt-row-selected\": \"#ffff00\",\n    \"--dt-row-selected-fg\": \"#000000\",\n    \"--dt-header-bg\": \"#000000\",\n    \"--dt-group-bg\": \"#1a1a1a\",\n    \"--dt-new-row-bg\": \"#000000\",\n    \"--dt-new-row-border\": \"#ffffff\",\n    \"--theme-color-chrome\": \"#000000\"\n  }\n}\n","import windowsContrastTheme from \"./windows-contrast-theme.json\"\n\ntype WindowsContrastFile = {\n  light: Record<string, string>\n  dark: Record<string, string>\n}\n\nconst file = windowsContrastTheme as WindowsContrastFile\n\nconst WINDOWS_VAR_KEYS = new Set([\n  ...Object.keys(file.light),\n  ...Object.keys(file.dark),\n])\n\nexport function applyWindowsContrastTheme() {\n  const el = document.documentElement\n  const isDark = el.classList.contains(\"dark\")\n  const map = isDark ? file.dark : file.light\n  for (const [prop, val] of Object.entries(map)) {\n    el.style.setProperty(prop, val)\n  }\n}\n\nexport function clearWindowsContrastTheme() {\n  const el = document.documentElement\n  for (const key of WINDOWS_VAR_KEYS) {\n    el.style.removeProperty(key)\n  }\n}\n","\"use client\"\n\n/**\n * useAppTheme — Manages theme dimensions beyond light/dark:\n *   • Brand      : \"one\" (Lavender) | \"prism\" (Rose)\n *   • Contrast   : \"system\" | \"normal\" | \"high\" | \"windows\" (JSON-driven palette)\n *   • Text size  : \"compact\" | \"default\" | \"large\" — root rem scale (industry pattern:\n *                  iOS “Larger Text”, Android font scale, Gmail/Slack density). Default keeps\n *                  16px root; compact/large adjust modestly with xs clamped to 11px in CSS.\n *\n * Persists to localStorage; applies class / data-* on <html>.\n * Use alongside `useTheme()` from next-themes for light / dark / system.\n */\n\nimport { useCallback, useEffect, useState } from \"react\"\n\nimport {\n  applyWindowsContrastTheme,\n  clearWindowsContrastTheme,\n} from \"../theme/apply-windows-contrast-theme\"\n\nexport type Brand = \"one\" | \"prism\"\n\nconst CONTRAST_PREFS = [\"system\", \"normal\", \"high\", \"windows\"] as const\n\n/** What the user explicitly picks (or \"system\" to follow OS). */\nexport type ContrastPreference = (typeof CONTRAST_PREFS)[number]\n\n/** The resolved mode actually applied to the DOM. */\nexport type ContrastMode = \"normal\" | \"high\" | \"windows\"\n\n/** UI text scale at the document root (rem-based UI tracks together). */\nexport type TextSizePreference = \"compact\" | \"default\" | \"large\"\n\nconst BRAND_KEY      = \"exxat-brand\"\nconst CONTRAST_KEY   = \"exxat-contrast\"\nconst TEXT_SIZE_KEY  = \"exxat-text-size\"\n\nconst MQ = \"(prefers-contrast: more)\"\n\nfunction getOsContrast(): ContrastMode {\n  if (typeof window === \"undefined\") return \"normal\"\n  return window.matchMedia(MQ).matches ? \"high\" : \"normal\"\n}\n\nfunction resolveContrast(pref: ContrastPreference): ContrastMode {\n  if (pref === \"system\") return getOsContrast()\n  return pref\n}\n\nfunction normalizeContrastPref(raw: string | null): ContrastPreference {\n  if (raw && (CONTRAST_PREFS as readonly string[]).includes(raw)) {\n    return raw as ContrastPreference\n  }\n  return \"system\"\n}\n\nfunction applyBrand(brand: Brand) {\n  const html = document.documentElement\n  html.classList.remove(\"theme-one\", \"theme-prism\")\n  html.classList.add(`theme-${brand}`)\n}\n\nfunction applyContrast(mode: ContrastMode) {\n  if (mode === \"windows\") {\n    document.documentElement.setAttribute(\"data-contrast\", \"windows\")\n    applyWindowsContrastTheme()\n    return\n  }\n  clearWindowsContrastTheme()\n  document.documentElement.setAttribute(\n    \"data-contrast\",\n    mode === \"high\" ? \"high\" : \"off\",\n  )\n}\n\nfunction applyTextSize(pref: TextSizePreference) {\n  const html = document.documentElement\n  if (pref === \"default\") {\n    html.removeAttribute(\"data-text-size\")\n  } else {\n    html.setAttribute(\"data-text-size\", pref)\n  }\n}\n\nexport function useAppTheme() {\n  const [brand, setBrandState] = useState<Brand>(\"one\")\n  const [contrastPref, setContrastPrefState] = useState<ContrastPreference>(\"system\")\n  const [resolvedContrast, setResolvedContrast] = useState<ContrastMode>(\"normal\")\n  const [textSizePref, setTextSizePrefState] = useState<TextSizePreference>(\"default\")\n  const [mounted, setMounted] = useState(false)\n\n  /* Hydrate from localStorage on first client render */\n  useEffect(() => {\n    setMounted(true)\n    const storedBrand = (localStorage.getItem(BRAND_KEY) as Brand) ?? \"one\"\n    const storedPref = normalizeContrastPref(localStorage.getItem(CONTRAST_KEY))\n    const storedText =\n      (localStorage.getItem(TEXT_SIZE_KEY) as TextSizePreference | null) ?? \"default\"\n\n    setBrandState(storedBrand)\n    setContrastPrefState(storedPref)\n    setTextSizePrefState(storedText)\n    applyBrand(storedBrand)\n\n    const resolved = resolveContrast(storedPref)\n    setResolvedContrast(resolved)\n    applyContrast(resolved)\n    applyTextSize(storedText)\n  }, [])\n\n  /* Listen for OS contrast changes when preference is \"system\" */\n  useEffect(() => {\n    if (contrastPref !== \"system\") return\n\n    const mql = window.matchMedia(MQ)\n    function onChange() {\n      const resolved = getOsContrast()\n      setResolvedContrast(resolved)\n      applyContrast(resolved)\n    }\n    mql.addEventListener(\"change\", onChange)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [contrastPref])\n\n  /* Re-apply Windows JSON palette when light/dark class toggles (next-themes). */\n  useEffect(() => {\n    if (resolvedContrast !== \"windows\") return\n    applyWindowsContrastTheme()\n    const html = document.documentElement\n    const obs = new MutationObserver(() => {\n      applyWindowsContrastTheme()\n    })\n    obs.observe(html, { attributes: true, attributeFilter: [\"class\"] })\n    return () => obs.disconnect()\n  }, [resolvedContrast])\n\n  const setBrand = useCallback((b: Brand) => {\n    setBrandState(b)\n    localStorage.setItem(BRAND_KEY, b)\n    applyBrand(b)\n  }, [])\n\n  const setContrast = useCallback((pref: ContrastPreference) => {\n    setContrastPrefState(pref)\n    localStorage.setItem(CONTRAST_KEY, pref)\n    const resolved = resolveContrast(pref)\n    setResolvedContrast(resolved)\n    applyContrast(resolved)\n  }, [])\n\n  const setTextSize = useCallback((pref: TextSizePreference) => {\n    setTextSizePrefState(pref)\n    localStorage.setItem(TEXT_SIZE_KEY, pref)\n    applyTextSize(pref)\n  }, [])\n\n  return {\n    brand,\n    setBrand,\n    /** The user's preference: \"system\" | \"normal\" | \"high\" | \"windows\" */\n    contrastPref,\n    /** The resolved contrast mode actually applied to the DOM. */\n    contrast: resolvedContrast,\n    /** Set the contrast preference. */\n    setContrast,\n    /** Text scale: \"compact\" | \"default\" | \"large\" */\n    textSizePref,\n    setTextSize,\n    mounted,\n  }\n}\n"]}