react-semaphor 0.1.508 → 0.1.509

package/dist/brand-studio/index.js

@@ -1,8 +1,8 @@
-import { jsxs as d, jsx as r, Fragment as ce } from "react/jsx-runtime";
+import { jsxs as d, jsx as r, Fragment as le } from "react/jsx-runtime";
 import m from "react";
-import { c as q, P as ge, a as be, B as C, b as fe, U as De, C as Ie, R as me, L as le, S as se, d as je, T as Je, F as Le, G as U, H as $e, I as M, J as _e, K as Ve, M as Ue, N as Me, O as E, Q as K, V as Q, W as ee, X as he, Y as re, Z as oe, _ as ke, $ as xe, a0 as ye, a1 as ve, a2 as Ce, a3 as Ge } from "../chunks/switch-CD4uGTZI.js";
+import { c as K, P as ge, a as be, B as C, b as fe, U as De, C as Ie, R as me, L as se, S as ue, d as je, T as Je, F as Le, G as U, H as $e, I as M, J as _e, K as Ve, M as Ue, N as Me, O as E, Q, V as ee, W as re, X as he, Y as oe, Z as ae, _ as ke, $ as xe, a0 as ye, a1 as ve, a2 as Ce, a3 as Ge } from "../chunks/switch-CD4uGTZI.js";
 import { A as We, p as He } from "../chunks/color-CJvdlFM_.js";
-import { c as ae, X as Xe } from "../chunks/x-CXDkqdur.js";
+import { c as ne, X as Xe } from "../chunks/x-CXDkqdur.js";
 import "../chunks/card-config-utils-Bq1enstT.js";
 import "../chunks/validators-BDYzZFgs.js";
 import "../chunks/matrix-operation-contract-xL8IhFzp.js";
@@ -18,7 +18,7 @@ import { L as er } from "../chunks/layout-grid-CiubineE.js";
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const rr = ae("Ban", [
+const rr = ne("Ban", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m4.9 4.9 14.2 14.2", key: "1m5liu" }]
 ]);
@@ -28,7 +28,7 @@ const rr = ae("Ban", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const or = ae("Clipboard", [
+const or = ne("Clipboard", [
   ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
   [
     "path",
@@ -44,7 +44,7 @@ const or = ae("Clipboard", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ar = ae("Pipette", [
+const ar = ne("Pipette", [
   ["path", { d: "m2 22 1-1h3l9-9", key: "1sre89" }],
   ["path", { d: "M3 21v-3l9-9", key: "hpe2y6" }],
   [
@@ -248,43 +248,43 @@ function tr(e, n) {
   if (!t)
     return e;
   const c = O(e);
-  return ue(c.schemes.light, t.light), ue(c.schemes.dark, t.dark), c;
+  return pe(c.schemes.light, t.light), pe(c.schemes.dark, t.dark), c;
 }
-function ue(e, n) {
-  e.tokens.color.background = n.background, e.tokens.color.foreground = n.foreground, e.tokens.color.muted = n.muted, e.tokens.color.mutedForeground = n.mutedForeground, e.tokens.color.border = n.border, e.tokens.color.input = n.border, e.tokens.color.primary = n.primary, e.tokens.color.primaryForeground = n.primaryForeground, e.tokens.color.accent = n.accent, e.tokens.color.accentForeground = n.accentForeground, e.tokens.color.selection = n.selection, e.tokens.color.card = n.card, e.tokens.color.cardForeground = n.cardForeground, e.components.dashboard.background = n.background, e.components.dashboard.foreground = n.foreground, e.components.dashboard.borderColor = n.border, e.components.card.background = n.card, e.components.card.foreground = n.cardForeground, e.components.card.borderColor = n.border, e.components.interactive.toolbarBackground = n.background, e.components.interactive.background = n.card, e.components.interactive.foreground = n.foreground, e.components.interactive.borderColor = n.border, e.components.chart.palette = [...n.chartPalette], e.components.chart.background = n.card, e.components.chart.foreground = n.foreground, e.components.chart.gridColor = n.border, e.components.chart.axisColor = n.mutedForeground, e.components.table.container.background = n.card, e.components.table.container.borderColor = n.border, e.components.table.header.background = n.muted, e.components.table.header.foreground = n.mutedForeground, e.components.table.header.dividerColor = n.border, e.components.table.row.dividerColor = n.border, e.components.table.row.zebraBackground = n.muted, e.components.table.pagination.background = n.card, e.components.table.pagination.foreground = n.foreground, e.components.table.pagination.borderColor = n.border, u(e, "aggregateTable"), u(e, "pivotTable");
+function pe(e, n) {
+  e.tokens.color.background = n.background, e.tokens.color.foreground = n.foreground, e.tokens.color.muted = n.muted, e.tokens.color.mutedForeground = n.mutedForeground, e.tokens.color.border = n.border, e.tokens.color.input = n.border, e.tokens.color.primary = n.primary, e.tokens.color.primaryForeground = n.primaryForeground, e.tokens.color.accent = n.accent, e.tokens.color.accentForeground = n.accentForeground, e.tokens.color.selection = n.selection, e.tokens.color.card = n.card, e.tokens.color.cardForeground = n.cardForeground, e.components.dashboard.background = n.background, e.components.dashboard.foreground = n.foreground, e.components.dashboard.borderColor = n.border, e.components.card.background = n.card, e.components.card.foreground = n.cardForeground, e.components.card.borderColor = n.border, e.components.interactive.toolbarBackground = n.background, e.components.interactive.background = n.card, e.components.interactive.foreground = n.foreground, e.components.interactive.borderColor = n.border, e.components.chart.palette = [...n.chartPalette], e.components.chart.background = n.card, e.components.chart.foreground = n.foreground, e.components.chart.gridColor = n.border, e.components.chart.axisColor = n.mutedForeground, e.components.table.container.background = n.card, e.components.table.container.borderColor = n.border, e.components.table.header.background = n.muted, e.components.table.header.foreground = n.mutedForeground, e.components.table.header.dividerColor = n.border, e.components.table.row.dividerColor = n.border, e.components.table.row.zebraBackground = n.muted, e.components.table.pagination.background = n.card, e.components.table.pagination.foreground = n.foreground, e.components.table.pagination.borderColor = n.border, p(e, "aggregateTable"), p(e, "pivotTable");
 }
-function u(e, n) {
+function p(e, n) {
   e.components[n] = O(e.components.table);
 }
-function pe(e, n, t) {
+function W(e, n, t) {
   switch (e.tokens.color[n] = t, n) {
     case "background":
       e.components.dashboard.background = t, e.components.interactive.toolbarBackground = t;
       break;
     case "foreground":
-      e.components.dashboard.foreground = t, e.components.interactive.foreground = t, e.components.pagination.foreground = t, e.components.chart.foreground = t, e.components.table.pagination.foreground = t, e.components.table.subtotal.foreground = t, e.components.table.grandTotal.foreground = t, u(e, "aggregateTable"), u(e, "pivotTable");
+      e.components.dashboard.foreground = t, e.components.interactive.foreground = t, e.components.pagination.foreground = t, e.components.chart.foreground = t, e.components.table.pagination.foreground = t, e.components.table.subtotal.foreground = t, e.components.table.grandTotal.foreground = t, p(e, "aggregateTable"), p(e, "pivotTable");
       break;
     case "card":
-      e.components.card.background = t, e.components.interactive.background = t, e.components.pagination.background = t, e.components.chart.background = t, e.components.table.container.background = t, e.components.table.pagination.background = t, u(e, "aggregateTable"), u(e, "pivotTable");
+      e.components.card.background = t, e.components.interactive.background = t, e.components.pagination.background = t, e.components.chart.background = t, e.components.table.container.background = t, e.components.table.pagination.background = t, p(e, "aggregateTable"), p(e, "pivotTable");
       break;
     case "cardForeground":
       e.components.card.foreground = t;
       break;
     case "muted":
-      e.components.table.header.background = t, e.components.table.row.zebraBackground = t, e.components.table.subtotal.background = t, e.components.table.grandTotal.background = t, u(e, "aggregateTable"), u(e, "pivotTable");
+      e.components.table.header.background = t, e.components.table.row.zebraBackground = t, e.components.table.subtotal.background = t, e.components.table.grandTotal.background = t, p(e, "aggregateTable"), p(e, "pivotTable");
       break;
     case "mutedForeground":
-      e.components.table.header.foreground = t, e.components.chart.axisColor = t, u(e, "aggregateTable"), u(e, "pivotTable");
+      e.components.table.header.foreground = t, e.components.chart.axisColor = t, p(e, "aggregateTable"), p(e, "pivotTable");
       break;
     case "border":
-      e.tokens.color.input = t, e.components.dashboard.borderColor = t, e.components.card.borderColor = t, e.components.interactive.borderColor = t, e.components.pagination.borderColor = t, e.components.chart.gridColor = t, e.components.table.container.borderColor = t, e.components.table.header.dividerColor = t, e.components.table.row.dividerColor = t, e.components.table.grandTotal.borderColor = t, e.components.table.pagination.borderColor = t, u(e, "aggregateTable"), u(e, "pivotTable");
+      e.tokens.color.input = t, e.components.dashboard.borderColor = t, e.components.card.borderColor = t, e.components.interactive.borderColor = t, e.components.pagination.borderColor = t, e.components.chart.gridColor = t, e.components.table.container.borderColor = t, e.components.table.header.dividerColor = t, e.components.table.row.dividerColor = t, e.components.table.grandTotal.borderColor = t, e.components.table.pagination.borderColor = t, p(e, "aggregateTable"), p(e, "pivotTable");
       break;
     case "accent":
-      e.components.table.row.hoverBackground = t, u(e, "aggregateTable"), u(e, "pivotTable");
+      e.components.table.row.hoverBackground = t, p(e, "aggregateTable"), p(e, "pivotTable");
       break;
   }
 }
-function W(e, n, t) {
+function H(e, n, t) {
   switch (e.tokens.radius[n] = t, n) {
     case "control":
       e.components.interactive.borderRadius = t, e.components.pagination.borderRadius = t;
@@ -293,14 +293,14 @@ function W(e, n, t) {
       e.components.card.borderRadius = t;
       break;
     case "table":
-      e.components.table.container.borderRadius = t, u(e, "aggregateTable"), u(e, "pivotTable");
+      e.components.table.container.borderRadius = t, p(e, "aggregateTable"), p(e, "pivotTable");
       break;
   }
 }
 function dr(e) {
   var n, t;
   for (const c of ["light", "dark"]) {
-    const l = e.schemes[c], s = l.tokens, i = s.color, y = (n = l.components) == null ? void 0 : n.aggregateTable, x = (t = l.components) == null ? void 0 : t.pivotTable, S = {
+    const l = e.schemes[c], s = l.tokens, i = s.color, v = (n = l.components) == null ? void 0 : n.aggregateTable, x = (t = l.components) == null ? void 0 : t.pivotTable, S = {
       fontFamily: "",
       headingFontFamily: "",
       monoFontFamily: "",
@@ -315,7 +315,7 @@ function dr(e) {
       badge: 999
     };
     s.radius = { ...f, ...s.radius };
-    const g = {
+    const b = {
       dashboardPadding: 16,
       gridGap: 12,
       cardPadding: 16,
@@ -323,7 +323,7 @@ function dr(e) {
       tableCellX: 12,
       tableCellY: 8
     };
-    s.spacing = { ...g, ...s.spacing };
+    s.spacing = { ...b, ...s.spacing };
     const T = {
       card: "none",
       popover: "0 12px 32px rgba(15, 23, 42, 0.14)",
@@ -380,9 +380,9 @@ function dr(e) {
     l.components.chart = { ...$, ...l.components.chart }, l.components.table = {
       ...B(i, s),
       ...l.components.table
-    }, l.components.aggregateTable = y ? {
+    }, l.components.aggregateTable = v ? {
       ...B(i, s),
-      ...y
+      ...v
     } : O(l.components.table), l.components.pivotTable = x ? {
       ...B(i, s),
       ...x
@@ -450,7 +450,6 @@ const ir = [
   ["primaryForeground", "Primary text"],
   ["accent", "Accent"],
   ["accentForeground", "Accent text"],
-  ["selection", "Selection"],
   ["muted", "Muted"],
   ["mutedForeground", "Muted text"],
   ["border", "Border"],
@@ -458,7 +457,7 @@ const ir = [
   ["negative", "Negative"],
   ["warning", "Warning"],
   ["info", "Info"]
-], cr = [0, 1, 2, 3, 4, 5], H = We, lr = [
+], cr = [0, 1, 2, 3, 4, 5], X = We, lr = [
   "#ffffff",
   "#f8fafc",
   "#f4f4f5",
@@ -480,22 +479,22 @@ function Br({
   error: l = null,
   className: s,
   onDraftChange: i,
-  onSave: y,
+  onSave: v,
   onClearConfig: x,
   onCancel: S
 }) {
-  const [f, g] = m.useState(null), [T, F] = m.useState("light"), [$, z] = m.useState(!1), [we, R] = m.useState(
+  const [f, b] = m.useState(null), [T, F] = m.useState("light"), [$, z] = m.useState(!1), [we, R] = m.useState(
     "idle"
-  ), [ne, Se] = m.useState(!1), [D, _] = m.useState(""), [I, h] = m.useState(null), te = m.useRef(null), j = m.useRef(i), A = m.useRef(!1);
+  ), [te, Se] = m.useState(!1), [D, _] = m.useState(""), [I, h] = m.useState(null), de = m.useRef(null), j = m.useRef(i), A = m.useRef(!1);
   m.useEffect(() => {
     j.current = i;
   }, [i]), m.useEffect(() => {
     if (e === void 0) {
-      A.current = !0, g(null);
+      A.current = !0, b(null);
       return;
     }
     const o = J(e);
-    A.current = !0, g(o), F("light"), h(null);
+    A.current = !0, b(o), F("light"), h(null);
   }, [e]), m.useEffect(() => {
     var o;
     if (f) {
@@ -513,21 +512,21 @@ function Br({
       }
     }
   }, [f]);
-  const p = f == null ? void 0 : f.schemes[T], V = c || $, Te = m.useMemo(
-    () => p ? pr(p.tokens.radius.control) : void 0,
-    [p]
+  const u = f == null ? void 0 : f.schemes[T], V = c || $, Te = m.useMemo(
+    () => u ? pr(u.tokens.radius.control) : void 0,
+    [u]
   ), Fe = (o) => {
-    g((a) => {
+    b((a) => {
       if (!a) return a;
       const k = gr(a);
       return o(k), k;
     });
-  }, b = (o) => {
+  }, g = (o) => {
     Fe((a) => {
       o(a.schemes[T]);
     });
   }, Pe = async () => {
-    if (!f || !y) return;
+    if (!f || !v) return;
     let o;
     try {
       o = L(f);
@@ -539,18 +538,18 @@ function Br({
     }
     z(!0);
     try {
-      await y(o);
+      await v(o);
     } finally {
       z(!1);
     }
   }, Be = () => {
     const o = J(null);
-    R("idle"), g(o);
+    R("idle"), b(o);
   }, Oe = async () => {
     if (x) {
       z(!0), h(null), R("idle");
       try {
-        await x(), A.current = !0, g(J(null)), F("light");
+        await x(), A.current = !0, b(J(null)), F("light");
       } catch (o) {
         h(
           o instanceof Error ? o.message : "Unable to clear organization appearance"
@@ -559,10 +558,10 @@ function Br({
         z(!1);
       }
     }
-  }, de = m.useCallback(() => f ? JSON.stringify(L(f), null, 2) : "", [f]), Re = (o) => {
+  }, ie = m.useCallback(() => f ? JSON.stringify(L(f), null, 2) : "", [f]), Re = (o) => {
     if (Se(o), o)
       try {
-        _(de()), h(null);
+        _(ie()), h(null);
       } catch (a) {
         h(
           a instanceof Error ? a.message : "Appearance is invalid"
@@ -571,19 +570,19 @@ function Br({
   }, Ae = async () => {
     if (f)
       try {
-        const o = ne && D ? D : de();
+        const o = te && D ? D : ie();
         await navigator.clipboard.writeText(o), h(null), R("copied");
       } catch (o) {
         h(
           o instanceof Error ? o.message : "Unable to copy brand spec"
         );
       }
-  }, ie = (o) => {
+  }, ce = (o) => {
     const a = JSON.parse(o), k = J(a), P = L(k);
-    R("idle"), F("light"), g(k), _(JSON.stringify(P, null, 2));
+    R("idle"), F("light"), b(k), _(JSON.stringify(P, null, 2));
   }, Ee = () => {
     try {
-      ie(D);
+      ce(D);
     } catch (o) {
       h(
         o instanceof Error ? o.message : "Brand spec must be valid JSON"
@@ -594,7 +593,7 @@ function Br({
     const a = (k = o.target.files) == null ? void 0 : k[0];
     if (o.target.value = "", !!a)
       try {
-        ie(await br(a));
+        ce(await br(a));
       } catch (P) {
         h(
           P instanceof Error ? P.message : "Uploaded file must be a valid brand spec"
@@ -604,7 +603,7 @@ function Br({
   return /* @__PURE__ */ d(
     "div",
     {
-      className: q(
+      className: K(
         "flex min-h-0 flex-1 flex-col bg-background text-foreground",
         s
       ),
@@ -622,7 +621,7 @@ function Br({
           /* @__PURE__ */ d(
             ge,
             {
-              open: ne,
+              open: te,
               onOpenChange: Re,
               children: [
                 /* @__PURE__ */ r(be, { asChild: !0, children: /* @__PURE__ */ d(C, { type: "button", size: "xs", variant: "ghost", disabled: !f, children: [
@@ -663,7 +662,7 @@ function Br({
                               variant: "ghost",
                               onClick: () => {
                                 var o;
-                                return (o = te.current) == null ? void 0 : o.click();
+                                return (o = de.current) == null ? void 0 : o.click();
                               },
                               children: [
                                 /* @__PURE__ */ r(De, { className: "h-3.5 w-3.5" }),
@@ -697,7 +696,7 @@ function Br({
           /* @__PURE__ */ r(
             "input",
             {
-              ref: te,
+              ref: de,
               "aria-label": "Upload brand spec",
               type: "file",
               accept: "application/json,.json",
@@ -739,9 +738,9 @@ function Br({
               type: "button",
               size: "xs",
               onClick: Pe,
-              disabled: !f || V || !!I || !y,
+              disabled: !f || V || !!I || !v,
               children: [
-                V ? /* @__PURE__ */ r(le, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ r(Qe, { className: "h-3.5 w-3.5" }),
+                V ? /* @__PURE__ */ r(se, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ r(Qe, { className: "h-3.5 w-3.5" }),
                 "Save"
               ]
             }
@@ -758,10 +757,10 @@ function Br({
           )
         ] }),
         /* @__PURE__ */ d("div", { className: "flex shrink-0 items-center justify-between border-b border-border/60 px-4 py-2", children: [
-          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-[12px] text-muted-foreground", children: I ? /* @__PURE__ */ d(ce, { children: [
-            /* @__PURE__ */ r(se, { className: "h-3.5 w-3.5 text-destructive" }),
+          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-[12px] text-muted-foreground", children: I ? /* @__PURE__ */ d(le, { children: [
+            /* @__PURE__ */ r(ue, { className: "h-3.5 w-3.5 text-destructive" }),
             "Preview keeps the last valid draft"
-          ] }) : /* @__PURE__ */ d(ce, { children: [
+          ] }) : /* @__PURE__ */ d(le, { children: [
             /* @__PURE__ */ r(je, { className: "h-3.5 w-3.5 text-emerald-500" }),
             "Draft is applied to the live dashboard preview"
           ] }) }),
@@ -769,7 +768,7 @@ function Br({
             "button",
             {
               type: "button",
-              className: q(
+              className: K(
                 "h-full px-2.5 text-[12px] capitalize transition-colors",
                 T === o ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
               ),
@@ -780,7 +779,7 @@ function Br({
           )) })
         ] }),
         I && /* @__PURE__ */ r("div", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-2 text-[12px] text-destructive", children: I }),
-        t ? /* @__PURE__ */ r("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ r(le, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : l ? /* @__PURE__ */ r("div", { className: "p-4 text-[13px] text-muted-foreground", children: l }) : f && p ? /* @__PURE__ */ d(Je, { defaultValue: "style", className: "flex min-h-0 flex-1 flex-col", children: [
+        t ? /* @__PURE__ */ r("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ r(se, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : l ? /* @__PURE__ */ r("div", { className: "p-4 text-[13px] text-muted-foreground", children: l }) : f && u ? /* @__PURE__ */ d(Je, { defaultValue: "style", className: "flex min-h-0 flex-1 flex-col", children: [
           /* @__PURE__ */ r("div", { className: "shrink-0 px-4 pt-3", children: /* @__PURE__ */ d(Le, { variant: "underline", className: "w-full gap-5", children: [
             /* @__PURE__ */ r(U, { value: "style", children: "Style" }),
             /* @__PURE__ */ r(U, { value: "surfaces", children: "Surfaces" }),
@@ -801,7 +800,7 @@ function Br({
                       className: "flex items-center gap-3 rounded-control border border-border/70 px-3 py-2 text-left hover:bg-muted/60",
                       onClick: () => {
                         const a = tr(f, o.id);
-                        g(a);
+                        b(a);
                       },
                       children: [
                         /* @__PURE__ */ d("div", { className: "flex h-7 w-10 overflow-hidden rounded-control border border-border/70", children: [
@@ -837,12 +836,12 @@ function Br({
                   title: "Color",
                   description: `Editing the ${T} scheme.`,
                   children: /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-2", children: ir.map(([o, a]) => /* @__PURE__ */ r(
-                    v,
+                    y,
                     {
                       label: a,
-                      value: p.tokens.color[o],
-                      onChange: (k) => b((P) => {
-                        pe(P, o, k);
+                      value: u.tokens.color[o],
+                      onChange: (k) => g((P) => {
+                        W(P, o, k);
                       })
                     },
                     o
@@ -859,8 +858,8 @@ function Br({
                     /* @__PURE__ */ r(
                       sr,
                       {
-                        value: p.tokens.typography.fontFamily,
-                        onChange: (o) => b((a) => {
+                        value: u.tokens.typography.fontFamily,
+                        onChange: (o) => g((a) => {
                           a.tokens.typography.fontFamily = o, a.tokens.typography.headingFontFamily = o;
                         })
                       }
@@ -870,26 +869,26 @@ function Br({
                         w,
                         {
                           label: "Base size",
-                          value: p.tokens.typography.baseFontSize,
+                          value: u.tokens.typography.baseFontSize,
                           min: 11,
                           max: 18,
-                          onChange: (o) => b((a) => {
+                          onChange: (o) => g((a) => {
                             a.tokens.typography.baseFontSize = o;
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        Y,
+                        Z,
                         {
                           label: "Density",
-                          value: p.tokens.typography.density,
+                          value: u.tokens.typography.density,
                           options: [
                             ["compact", "Compact"],
                             ["comfortable", "Comfortable"],
                             ["spacious", "Spacious"]
                           ],
-                          onChange: (o) => b((a) => {
-                            a.tokens.typography.density = o, a.components.table.density = a.tokens.typography.density, u(a, "aggregateTable"), u(a, "pivotTable");
+                          onChange: (o) => g((a) => {
+                            a.tokens.typography.density = o, a.components.table.density = a.tokens.typography.density, p(a, "aggregateTable"), p(a, "pivotTable");
                           })
                         }
                       )
@@ -912,10 +911,10 @@ function Br({
                         {
                           label: "Canvas pad",
                           tooltip: "Outer padding around the dashboard canvas before cards begin.",
-                          value: p.tokens.spacing.dashboardPadding,
+                          value: u.tokens.spacing.dashboardPadding,
                           min: 0,
                           max: 48,
-                          onChange: (o) => b((a) => {
+                          onChange: (o) => g((a) => {
                             a.tokens.spacing.dashboardPadding = o, a.components.dashboard.padding = o;
                           })
                         }
@@ -925,10 +924,10 @@ function Br({
                         {
                           label: "Grid gap",
                           tooltip: "Spacing between dashboard cards in the grid.",
-                          value: p.tokens.spacing.gridGap,
+                          value: u.tokens.spacing.gridGap,
                           min: 0,
                           max: 32,
-                          onChange: (o) => b((a) => {
+                          onChange: (o) => g((a) => {
                             a.tokens.spacing.gridGap = o;
                           })
                         }
@@ -938,10 +937,10 @@ function Br({
                         {
                           label: "Card pad",
                           tooltip: "Inner padding inside card/widget frames around titles, controls, and visual content.",
-                          value: p.tokens.spacing.cardPadding,
+                          value: u.tokens.spacing.cardPadding,
                           min: 0,
                           max: 32,
-                          onChange: (o) => b((a) => {
+                          onChange: (o) => g((a) => {
                             a.tokens.spacing.cardPadding = o, a.components.card.padding = o;
                           })
                         }
@@ -953,11 +952,11 @@ function Br({
                         {
                           label: "Control radius",
                           tooltip: "Corner radius for buttons, inputs, selects, checkboxes, segmented controls, and similar interactive controls.",
-                          value: p.tokens.radius.control,
+                          value: u.tokens.radius.control,
                           min: 0,
                           max: 12,
-                          onChange: (o) => b((a) => {
-                            W(a, "control", o);
+                          onChange: (o) => g((a) => {
+                            H(a, "control", o);
                           })
                         }
                       ),
@@ -966,11 +965,11 @@ function Br({
                         {
                           label: "Card/widget radius",
                           tooltip: "Corner radius for dashboard card frames and widget containers.",
-                          value: p.tokens.radius.card,
+                          value: u.tokens.radius.card,
                           min: 0,
                           max: 12,
-                          onChange: (o) => b((a) => {
-                            W(a, "card", o);
+                          onChange: (o) => g((a) => {
+                            H(a, "card", o);
                           })
                         }
                       ),
@@ -979,11 +978,11 @@ function Br({
                         {
                           label: "Table radius",
                           tooltip: "Corner radius for table containers, table chrome, and table pagination surfaces.",
-                          value: p.tokens.radius.table,
+                          value: u.tokens.radius.table,
                           min: 0,
                           max: 12,
-                          onChange: (o) => b((a) => {
-                            W(a, "table", o);
+                          onChange: (o) => g((a) => {
+                            H(a, "table", o);
                           })
                         }
                       )
@@ -994,51 +993,51 @@ function Br({
               /* @__PURE__ */ r(
                 N,
                 {
-                  icon: se,
+                  icon: ue,
                   title: "Filters and Controls",
                   description: "Dashboard filter/control toolbar, chip states, menus, and settings panels.",
                   children: /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                     /* @__PURE__ */ r(
-                      v,
+                      y,
                       {
                         label: "Toolbar background",
                         tooltip: "Background color for the dashboard filter/control toolbar strip. This is separate from chip state colors.",
-                        value: p.components.interactive.toolbarBackground || p.tokens.color.background,
-                        onChange: (o) => b((a) => {
+                        value: u.components.interactive.toolbarBackground || u.tokens.color.background,
+                        onChange: (o) => g((a) => {
                           a.components.interactive.toolbarBackground = o;
                         })
                       }
                     ),
                     /* @__PURE__ */ r(
-                      v,
+                      y,
                       {
                         label: "Default state",
                         tooltip: "Unselected filter/control chips plus the base surface for their menus, dialogs, and pagination fallback.",
-                        value: p.components.interactive.background || p.tokens.color.card,
-                        onChange: (o) => b((a) => {
+                        value: u.components.interactive.background || u.tokens.color.card,
+                        onChange: (o) => g((a) => {
                           a.components.interactive.background = o, a.components.pagination.background = o;
                         })
                       }
                     ),
                     /* @__PURE__ */ r(
-                      v,
+                      y,
                       {
                         label: "Border",
                         tooltip: "Border color for filter/control chips, runtime inputs, settings panels, and related popover chrome.",
-                        value: p.components.interactive.borderColor || p.tokens.color.border,
-                        onChange: (o) => b((a) => {
+                        value: u.components.interactive.borderColor || u.tokens.color.border,
+                        onChange: (o) => g((a) => {
                           a.components.interactive.borderColor = o, a.components.pagination.borderColor = o;
                         })
                       }
                     ),
                     /* @__PURE__ */ r(
-                      v,
+                      y,
                       {
                         label: "Selected state",
                         tooltip: "Selected filter/control chips and hover feedback. This keeps a lighter default state and a stronger selected state.",
-                        value: p.tokens.color.accent,
-                        onChange: (o) => b((a) => {
-                          pe(a, "accent", o);
+                        value: u.tokens.color.accent,
+                        onChange: (o) => g((a) => {
+                          W(a, "accent", o);
                         })
                       }
                     )
@@ -1055,11 +1054,11 @@ function Br({
                   description: "Palette and semantic chart text/grid colors.",
                   children: [
                     /* @__PURE__ */ r("div", { className: "grid grid-cols-3 gap-2", children: cr.map((o) => /* @__PURE__ */ r(
-                      v,
+                      y,
                       {
                         label: `Series ${o + 1}`,
-                        value: p.components.chart.palette[o] || "#000000",
-                        onChange: (a) => b((k) => {
+                        value: u.components.chart.palette[o] || "#000000",
+                        onChange: (a) => g((k) => {
                           k.components.chart.palette[o] = a;
                         })
                       },
@@ -1067,21 +1066,21 @@ function Br({
                     )) }),
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                       /* @__PURE__ */ r(
-                        v,
+                        y,
                         {
                           label: "Grid",
-                          value: p.components.chart.gridColor,
-                          onChange: (o) => b((a) => {
+                          value: u.components.chart.gridColor,
+                          onChange: (o) => g((a) => {
                             a.components.chart.gridColor = o;
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        v,
+                        y,
                         {
                           label: "Axis",
-                          value: p.components.chart.axisColor,
-                          onChange: (o) => b((a) => {
+                          value: u.components.chart.axisColor,
+                          onChange: (o) => g((a) => {
                             a.components.chart.axisColor = o;
                           })
                         }
@@ -1099,84 +1098,94 @@ function Br({
                   children: [
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                       /* @__PURE__ */ r(
-                        Y,
+                        Z,
                         {
                           label: "Density",
-                          value: p.components.table.density,
+                          value: u.components.table.density,
                           options: [
                             ["compact", "Compact"],
                             ["comfortable", "Comfortable"],
                             ["spacious", "Spacious"]
                           ],
-                          onChange: (o) => b((a) => {
-                            a.components.table.density = o, u(a, "aggregateTable"), u(a, "pivotTable");
+                          onChange: (o) => g((a) => {
+                            a.components.table.density = o, p(a, "aggregateTable"), p(a, "pivotTable");
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        Y,
+                        Z,
                         {
                           label: "Cell wrap",
-                          value: p.components.table.cell.wrap,
+                          value: u.components.table.cell.wrap,
                           options: [
                             ["nowrap", "No wrap"],
                             ["wrap", "Wrap"]
                           ],
-                          onChange: (o) => b((a) => {
-                            a.components.table.cell.wrap = o, u(a, "aggregateTable"), u(a, "pivotTable");
+                          onChange: (o) => g((a) => {
+                            a.components.table.cell.wrap = o, p(a, "aggregateTable"), p(a, "pivotTable");
                           })
                         }
                       )
                     ] }),
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                       /* @__PURE__ */ r(
-                        v,
+                        y,
                         {
                           label: "Header",
-                          value: p.components.table.header.background,
-                          onChange: (o) => b((a) => {
-                            a.components.table.header.background = o, u(a, "aggregateTable"), u(a, "pivotTable");
+                          value: u.components.table.header.background,
+                          onChange: (o) => g((a) => {
+                            a.components.table.header.background = o, p(a, "aggregateTable"), p(a, "pivotTable");
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        v,
+                        y,
                         {
                           label: "Divider",
-                          value: p.components.table.row.dividerColor,
-                          onChange: (o) => b((a) => {
-                            a.components.table.row.dividerColor = o, a.components.table.header.dividerColor = o, u(a, "aggregateTable"), u(a, "pivotTable");
+                          value: u.components.table.row.dividerColor,
+                          onChange: (o) => g((a) => {
+                            a.components.table.row.dividerColor = o, a.components.table.header.dividerColor = o, p(a, "aggregateTable"), p(a, "pivotTable");
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        y,
+                        {
+                          label: "Selection",
+                          value: u.tokens.color.selection,
+                          onChange: (o) => g((a) => {
+                            W(a, "selection", o);
                           })
                         }
                       )
                     ] }),
                     /* @__PURE__ */ r(
-                      Z,
+                      q,
                       {
                         label: "Zebra rows",
-                        checked: p.components.table.row.zebra,
-                        onCheckedChange: (o) => b((a) => {
-                          a.components.table.row.zebra = o, u(a, "aggregateTable"), u(a, "pivotTable");
+                        checked: u.components.table.row.zebra,
+                        onCheckedChange: (o) => g((a) => {
+                          a.components.table.row.zebra = o, p(a, "aggregateTable"), p(a, "pivotTable");
                         })
                       }
                     ),
                     /* @__PURE__ */ r(
-                      Z,
+                      q,
                       {
                         label: "Sticky headers",
-                        checked: p.components.table.header.sticky,
-                        onCheckedChange: (o) => b((a) => {
-                          a.components.table.header.sticky = o, u(a, "aggregateTable"), u(a, "pivotTable");
+                        checked: u.components.table.header.sticky,
+                        onCheckedChange: (o) => g((a) => {
+                          a.components.table.header.sticky = o, p(a, "aggregateTable"), p(a, "pivotTable");
                         })
                       }
                     ),
                     /* @__PURE__ */ r(
-                      Z,
+                      q,
                       {
                         label: "Uppercase headers",
-                        checked: p.components.table.header.uppercase,
-                        onCheckedChange: (o) => b((a) => {
-                          a.components.table.header.uppercase = o, u(a, "aggregateTable"), u(a, "pivotTable");
+                        checked: u.components.table.header.uppercase,
+                        onCheckedChange: (o) => g((a) => {
+                          a.components.table.header.uppercase = o, p(a, "aggregateTable"), p(a, "pivotTable");
                         })
                       }
                     )
@@ -1213,7 +1222,7 @@ function sr({
   onChange: n
 }) {
   var c;
-  const t = (c = H.find((l) => l.value === e)) == null ? void 0 : c.id;
+  const t = (c = X.find((l) => l.value === e)) == null ? void 0 : c.id;
   return /* @__PURE__ */ d("div", { children: [
     /* @__PURE__ */ r(E, { className: "mb-1 block text-[11px] font-normal text-muted-foreground", children: "Font family" }),
     /* @__PURE__ */ d("div", { className: "grid grid-cols-[minmax(0,1fr)_150px] gap-2", children: [
@@ -1222,14 +1231,14 @@ function sr({
         {
           value: t,
           onValueChange: (l) => {
-            const s = H.find(
+            const s = X.find(
               (i) => i.id === l
             );
             s && n(s.value);
           },
           children: [
             /* @__PURE__ */ r(xe, { size: "xs", "aria-label": "Font family preset", children: /* @__PURE__ */ r(ye, { placeholder: "Select font" }) }),
-            /* @__PURE__ */ r(ve, { children: H.map((l) => /* @__PURE__ */ r(Ce, { value: l.id, children: l.label }, l.id)) })
+            /* @__PURE__ */ r(ve, { children: X.map((l) => /* @__PURE__ */ r(Ce, { value: l.id, children: l.label }, l.id)) })
           ]
         }
       ),
@@ -1244,20 +1253,20 @@ function sr({
     ] })
   ] });
 }
-function v({
+function y({
   label: e,
   tooltip: n,
   value: t,
   onChange: c
 }) {
-  const [l, s] = m.useState(!1), [i, y] = m.useState(t), x = ur(t), S = t !== i, f = (g) => {
-    s(g), g && y(t);
+  const [l, s] = m.useState(!1), [i, v] = m.useState(t), x = ur(t), S = t !== i, f = (b) => {
+    s(b), b && v(t);
   };
   return /* @__PURE__ */ d("div", { className: "block", children: [
     /* @__PURE__ */ d("div", { className: "mb-1 flex items-center gap-1", children: [
       /* @__PURE__ */ r(E, { className: "text-[11px] font-normal text-muted-foreground", children: e }),
-      n ? /* @__PURE__ */ r(K, { children: /* @__PURE__ */ d(Q, { children: [
-        /* @__PURE__ */ r(ee, { asChild: !0, children: /* @__PURE__ */ r(
+      n ? /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ d(ee, { children: [
+        /* @__PURE__ */ r(re, { asChild: !0, children: /* @__PURE__ */ r(
           "button",
           {
             type: "button",
@@ -1266,7 +1275,7 @@ function v({
             children: /* @__PURE__ */ r(he, { className: "h-3 w-3" })
           }
         ) }),
-        /* @__PURE__ */ r(re, { side: "top", className: "max-w-64", children: n })
+        /* @__PURE__ */ r(oe, { side: "top", className: "max-w-64", children: n })
       ] }) }) : null
     ] }),
     /* @__PURE__ */ d("div", { className: "flex h-7 items-center overflow-hidden rounded-control border border-input bg-background", children: [
@@ -1301,7 +1310,7 @@ function v({
                           "aria-label": `${e} native color picker`,
                           type: "color",
                           value: x,
-                          onChange: (g) => c(g.target.value),
+                          onChange: (b) => c(b.target.value),
                           className: "absolute inset-0 h-full w-full cursor-pointer opacity-0"
                         }
                       ),
@@ -1312,8 +1321,8 @@ function v({
                 /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ d("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
                     /* @__PURE__ */ r(E, { className: "block text-[11px] font-normal text-muted-foreground", children: "Color value" }),
-                    /* @__PURE__ */ r(K, { children: /* @__PURE__ */ d(Q, { children: [
-                      /* @__PURE__ */ r(ee, { asChild: !0, children: /* @__PURE__ */ r(
+                    /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ d(ee, { children: [
+                      /* @__PURE__ */ r(re, { asChild: !0, children: /* @__PURE__ */ r(
                         "button",
                         {
                           type: "button",
@@ -1324,46 +1333,46 @@ function v({
                           children: /* @__PURE__ */ r(me, { className: "h-3 w-3" })
                         }
                       ) }),
-                      /* @__PURE__ */ r(re, { side: "top", children: "Reset to previous value" })
+                      /* @__PURE__ */ r(oe, { side: "top", children: "Reset to previous value" })
                     ] }) })
                   ] }),
                   /* @__PURE__ */ r(
-                    oe,
+                    ae,
                     {
                       size: "xs",
                       "aria-label": `${e} popover color value`,
                       value: t,
-                      onChange: (g) => c(g.target.value),
+                      onChange: (b) => c(b.target.value),
                       className: "font-mono"
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ r("div", { className: "mt-2 grid grid-cols-6 gap-1", children: lr.map((g) => /* @__PURE__ */ r(
+              /* @__PURE__ */ r("div", { className: "mt-2 grid grid-cols-6 gap-1", children: lr.map((b) => /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
-                  "aria-label": `Set ${e} to ${g}`,
-                  className: q(
+                  "aria-label": `Set ${e} to ${b}`,
+                  className: K(
                     "h-6 rounded-control border border-border/70 shadow-sm",
-                    t.toLowerCase() === g && "ring-2 ring-ring"
+                    t.toLowerCase() === b && "ring-2 ring-ring"
                   ),
-                  style: { backgroundColor: g },
-                  onClick: () => c(g)
+                  style: { backgroundColor: b },
+                  onClick: () => c(b)
                 },
-                g
+                b
               )) })
             ]
           }
         )
       ] }),
       /* @__PURE__ */ r(
-        oe,
+        ae,
         {
           size: "xs",
           "aria-label": `${e} color value`,
           value: t,
-          onChange: (g) => c(g.target.value),
+          onChange: (b) => c(b.target.value),
           className: "h-full border-0 px-2 font-mono shadow-none focus-visible:border-0"
         }
       )
@@ -1372,9 +1381,9 @@ function v({
 }
 function ur(e) {
   const n = He(e);
-  return n ? `#${X(n.r)}${X(n.g)}${X(n.b)}` : "#000000";
+  return n ? `#${Y(n.r)}${Y(n.g)}${Y(n.b)}` : "#000000";
 }
-function X(e) {
+function Y(e) {
   return Math.round(e).toString(16).padStart(2, "0");
 }
 function w({
@@ -1396,8 +1405,8 @@ function w({
           children: e
         }
       ),
-      n ? /* @__PURE__ */ r(K, { children: /* @__PURE__ */ d(Q, { children: [
-        /* @__PURE__ */ r(ee, { asChild: !0, children: /* @__PURE__ */ r(
+      n ? /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ d(ee, { children: [
+        /* @__PURE__ */ r(re, { asChild: !0, children: /* @__PURE__ */ r(
           "button",
           {
             type: "button",
@@ -1406,11 +1415,11 @@ function w({
             children: /* @__PURE__ */ r(he, { className: "h-3 w-3" })
           }
         ) }),
-        /* @__PURE__ */ r(re, { side: "top", className: "max-w-56", children: n })
+        /* @__PURE__ */ r(oe, { side: "top", className: "max-w-56", children: n })
       ] }) }) : null
     ] }),
     /* @__PURE__ */ r(
-      oe,
+      ae,
       {
         id: i,
         size: "xs",
@@ -1418,15 +1427,15 @@ function w({
         min: c,
         max: l,
         value: t,
-        onChange: (y) => {
-          const x = Number(y.target.value);
+        onChange: (v) => {
+          const x = Number(v.target.value);
           Number.isNaN(x) || s(x);
         }
       }
     )
   ] });
 }
-function Y({
+function Z({
   label: e,
   value: n,
   options: t,
@@ -1440,7 +1449,7 @@ function Y({
     ] })
   ] });
 }
-function Z({
+function q({
   label: e,
   checked: n,
   onCheckedChange: t
@@ -1472,5 +1481,5 @@ export {
   tr as applyBrandStudioPreset,
   L as buildAppearanceSpecFromDraft,
   J as createBrandStudioDraft,
-  u as mirrorTableAppearance
+  p as mirrorTableAppearance
 };