react-semaphor 0.1.555 → 0.1.557

package/dist/brand-studio/index.js

@@ -1,28 +1,27 @@
-import { jsxs as d, jsx as r, Fragment as le } from "react/jsx-runtime";
-import m from "react";
-import { P as ge, a as be, B as C, b as fe, C as De, R as me, L as se, S as ue, c as je, T as Ie, d as Je, e as V, f as Le, g as M, h as $e, i as _e, j as Ue, k as Ve, l as E, m as K, n as Q, o as ee, I as he, p as re, q as oe, r as ke, s as xe, t as ye, u as ve, v as Ce, w as Me } from "../chunks/switch-B-UTI6v-.js";
+import { jsxs as d, jsx as r, Fragment as de } from "react/jsx-runtime";
+import b from "react";
+import { c as ee, P as ue, a as pe, B as C, b as be, C as ze, R as ge, L as ce, X as De, S as ie, d as je, T as Ie, e as Je, f as L, g as Le, h as $, i as $e, j as _e, k as Ue, l as Ve, m as T, n as X, o as Y, p as q, I as fe, q as Z, r as K, s as me, t as he, u as ke, v as xe, w as ye, x as Me } from "../chunks/switch-9CJt5EF_.js";
 import { A as Ge, p as We } from "../chunks/color-CJvdlFM_.js";
 import "../chunks/index-CuHybtft.js";
-import "../chunks/validators-ClKLGDGZ.js";
-import "../chunks/matrix-operation-contract--lMaLlpV.js";
-import "../chunks/analytics-base-schemas-BKs3flFS.js";
+import "../chunks/validators-hmfNNQz8.js";
+import "../chunks/matrix-operation-contract-CpgLZ7E5.js";
+import "../chunks/analytics-base-schemas-BUFUoO6G.js";
 import "zod";
 import "../value-format-preferences/index.js";
-import { c as ae } from "../chunks/_commonjsHelpers-DimLPMtv.js";
+import { c as Q } from "../chunks/_commonjsHelpers-DimLPMtv.js";
 import { r as He, v as Xe, A as Ye } from "../chunks/index-CLIro-EG.js";
-import { P as G } from "../chunks/palette-D10o_yYX.js";
-import { B as qe } from "../chunks/braces-o9UiRQes.js";
-import { c as ne, X as Ze } from "../chunks/x-4f5U2XwU.js";
-import { U as Ke } from "../chunks/upload-BFX7apKV.js";
-import { S as Qe } from "../chunks/save-CfJpQQ68.js";
-import { L as er } from "../chunks/layout-grid-Bgzth8vd.js";
+import { P as _ } from "../chunks/palette-DMkIhagj.js";
+import { B as qe } from "../chunks/braces-BOErQVyi.js";
+import { U as Ze } from "../chunks/upload-LSNKpt0w.js";
+import { S as Ke } from "../chunks/save-D1EpMcwT.js";
+import { L as Qe } from "../chunks/layout-grid-CcNklCwL.js";
 /**
  * @license lucide-react v0.453.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const rr = ne("Ban", [
+const er = ee("Ban", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m4.9 4.9 14.2 14.2", key: "1m5liu" }]
 ]);
@@ -32,7 +31,7 @@ const rr = ne("Ban", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const or = ne("Clipboard", [
+const rr = ee("Clipboard", [
   ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
   [
     "path",
@@ -48,7 +47,7 @@ const or = ne("Clipboard", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ar = ne("Pipette", [
+const or = ee("Pipette", [
   ["path", { d: "m2 22 1-1h3l9-9", key: "1sre89" }],
   ["path", { d: "M3 21v-3l9-9", key: "hpe2y6" }],
   [
@@ -58,7 +57,7 @@ const ar = ne("Pipette", [
       key: "196du1"
     }
   ]
-]), Ne = [
+]), Ce = [
   {
     id: "semaphor",
     name: "Semaphor",
@@ -213,113 +212,105 @@ const ar = ne("Pipette", [
     }
   }
 ];
-function J(e) {
-  const n = He({
+function D(e) {
+  const a = He({
     organizationAppearance: e ?? void 0
   });
-  return nr(
-    dr(O(n))
+  return ar(
+    tr(re(a))
   );
 }
-function nr(e) {
-  for (const n of Object.values(e.schemes))
-    for (const t of [
-      n.components.table,
-      n.components.aggregateTable,
-      n.components.pivotTable
-    ]) {
-      const c = t == null ? void 0 : t.row;
-      c != null && c.selectedBackground && c.selectedBackground === c.hoverBackground && delete c.selectedBackground;
-    }
+function ar(e) {
+  var a;
+  for (const n of Object.values(e.schemes)) {
+    const c = (a = n.components.table) == null ? void 0 : a.row;
+    c != null && c.selectedBackground && c.selectedBackground === c.hoverBackground && delete c.selectedBackground;
+  }
   return e;
 }
-function L(e) {
-  const n = O({
+function j(e) {
+  const a = re({
     version: Ye,
     mode: e.mode,
     schemes: e.schemes
-  }), t = Xe(n);
-  if (!t.success) {
-    const c = t.issues[0];
+  }), n = Xe(a);
+  if (!n.success) {
+    const c = n.issues[0];
     throw new Error(
       `Invalid Brand Studio appearance at ${c.path}: ${c.message}`
     );
   }
-  return t.value;
+  return n.value;
 }
-function tr(e, n) {
-  const t = Ne.find((l) => l.id === n);
-  if (!t)
+function nr(e, a) {
+  const n = Ce.find((i) => i.id === a);
+  if (!n)
     return e;
-  const c = O(e);
-  return pe(c.schemes.light, t.light), pe(c.schemes.dark, t.dark), c;
+  const c = re(e);
+  return se(c.schemes.light, n.light), se(c.schemes.dark, n.dark), c;
 }
-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 se(e, a) {
+  e.tokens.color.background = a.background, e.tokens.color.foreground = a.foreground, e.tokens.color.muted = a.muted, e.tokens.color.mutedForeground = a.mutedForeground, e.tokens.color.border = a.border, e.tokens.color.input = a.border, e.tokens.color.primary = a.primary, e.tokens.color.primaryForeground = a.primaryForeground, e.tokens.color.accent = a.accent, e.tokens.color.accentForeground = a.accentForeground, e.tokens.color.selection = a.selection, e.tokens.color.card = a.card, e.tokens.color.cardForeground = a.cardForeground, e.components.dashboard.background = a.background, e.components.dashboard.foreground = a.foreground, e.components.dashboard.borderColor = a.border, e.components.card.background = a.card, e.components.card.foreground = a.cardForeground, e.components.card.borderColor = a.border, e.components.interactive.toolbarBackground = a.background, e.components.interactive.background = a.card, e.components.interactive.foreground = a.foreground, e.components.interactive.borderColor = a.border, e.components.chart.palette = [...a.chartPalette], e.components.chart.background = a.card, e.components.chart.foreground = a.foreground, e.components.chart.gridColor = a.border, e.components.chart.axisColor = a.mutedForeground, e.components.table.container.background = a.card, e.components.table.container.borderColor = a.border, e.components.table.header.background = a.muted, e.components.table.header.foreground = a.mutedForeground, e.components.table.header.dividerColor = a.border, e.components.table.row.dividerColor = a.border, e.components.table.row.zebraBackground = a.muted, e.components.table.pagination.background = a.card, e.components.table.pagination.foreground = a.foreground, e.components.table.pagination.borderColor = a.border;
 }
-function p(e, n) {
-  e.components[n] = O(e.components.table);
-}
-function W(e, n, t) {
-  switch (e.tokens.color[n] = t, n) {
+function U(e, a, n) {
+  switch (e.tokens.color[a] = n, a) {
     case "background":
-      e.components.dashboard.background = t, e.components.interactive.toolbarBackground = t;
+      e.components.dashboard.background = n, e.components.interactive.toolbarBackground = n;
       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, p(e, "aggregateTable"), p(e, "pivotTable");
+      e.components.dashboard.foreground = n, e.components.interactive.foreground = n, e.components.pagination.foreground = n, e.components.chart.foreground = n, e.components.table.pagination.foreground = n, e.components.table.subtotal.foreground = n, e.components.table.grandTotal.foreground = n;
       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, p(e, "aggregateTable"), p(e, "pivotTable");
+      e.components.card.background = n, e.components.interactive.background = n, e.components.pagination.background = n, e.components.chart.background = n, e.components.table.container.background = n, e.components.table.pagination.background = n;
       break;
     case "cardForeground":
-      e.components.card.foreground = t;
+      e.components.card.foreground = n;
       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, p(e, "aggregateTable"), p(e, "pivotTable");
+      e.components.table.header.background = n, e.components.table.row.zebraBackground = n, e.components.table.subtotal.background = n, e.components.table.grandTotal.background = n;
       break;
     case "mutedForeground":
-      e.components.table.header.foreground = t, e.components.chart.axisColor = t, p(e, "aggregateTable"), p(e, "pivotTable");
+      e.components.table.header.foreground = n, e.components.chart.axisColor = n;
       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, p(e, "aggregateTable"), p(e, "pivotTable");
+      e.tokens.color.input = n, e.components.dashboard.borderColor = n, e.components.card.borderColor = n, e.components.interactive.borderColor = n, e.components.pagination.borderColor = n, e.components.chart.gridColor = n, e.components.table.container.borderColor = n, e.components.table.header.dividerColor = n, e.components.table.row.dividerColor = n, e.components.table.grandTotal.borderColor = n, e.components.table.pagination.borderColor = n;
       break;
     case "accent":
-      e.components.table.row.hoverBackground = t, p(e, "aggregateTable"), p(e, "pivotTable");
+      e.components.table.row.hoverBackground = n;
       break;
   }
 }
-function H(e, n, t) {
-  switch (e.tokens.radius[n] = t, n) {
+function V(e, a, n) {
+  switch (e.tokens.radius[a] = n, a) {
     case "control":
-      e.components.interactive.borderRadius = t, e.components.pagination.borderRadius = t;
+      e.components.interactive.borderRadius = n, e.components.pagination.borderRadius = n;
       break;
     case "card":
-      e.components.card.borderRadius = t;
+      e.components.card.borderRadius = n;
       break;
     case "table":
-      e.components.table.container.borderRadius = t, p(e, "aggregateTable"), p(e, "pivotTable");
+      e.components.table.container.borderRadius = n;
       break;
   }
 }
-function dr(e) {
-  var n, t;
-  for (const c of ["light", "dark"]) {
-    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 = {
+function tr(e) {
+  for (const a of ["light", "dark"]) {
+    const n = e.schemes[a], c = n.tokens, i = c.color, f = {
       fontFamily: "",
       headingFontFamily: "",
       monoFontFamily: "",
       baseFontSize: 14,
       density: "comfortable"
     };
-    s.typography = { ...S, ...s.typography };
-    const f = {
+    c.typography = { ...f, ...c.typography };
+    const g = {
       control: 5,
       card: 5,
       table: 5,
       badge: 999
     };
-    s.radius = { ...f, ...s.radius };
-    const b = {
+    c.radius = { ...g, ...c.radius };
+    const y = {
       dashboardPadding: 16,
       gridGap: 12,
       cardPadding: 16,
@@ -327,34 +318,34 @@ function dr(e) {
       tableCellX: 12,
       tableCellY: 8
     };
-    s.spacing = { ...b, ...s.spacing };
-    const T = {
+    c.spacing = { ...y, ...c.spacing };
+    const x = {
       card: "none",
       popover: "0 12px 32px rgba(15, 23, 42, 0.14)",
       focusRing: "0 0 0 2px rgba(37, 99, 235, 0.35)"
     };
-    s.shadow = { ...T, ...s.shadow };
-    const F = {
+    c.shadow = { ...x, ...c.shadow };
+    const w = {
       dashboard: {
         background: i.background,
         foreground: i.foreground,
         borderColor: i.border,
-        padding: s.spacing.dashboardPadding
+        padding: c.spacing.dashboardPadding
       },
       card: {
         background: i.card,
         foreground: i.cardForeground,
         borderColor: i.border,
-        borderRadius: s.radius.card,
-        padding: s.spacing.cardPadding,
-        shadow: s.shadow.card
+        borderRadius: c.radius.card,
+        padding: c.spacing.cardPadding,
+        shadow: c.shadow.card
       },
       interactive: {
         toolbarBackground: i.background,
         background: i.card,
         foreground: i.foreground,
         borderColor: i.border,
-        borderRadius: s.radius.control
+        borderRadius: c.radius.control
       },
       chart: {
         palette: [],
@@ -363,45 +354,37 @@ function dr(e) {
         gridColor: i.border,
         axisColor: i.mutedForeground
       },
-      table: B(i, s),
-      aggregateTable: B(i, s),
-      pivotTable: B(i, s),
+      table: le(i, c),
       pagination: {
         background: i.card,
         foreground: i.foreground,
         borderColor: i.border,
-        borderRadius: s.radius.control
+        borderRadius: c.radius.control
       }
     };
-    l.components = { ...F, ...l.components };
-    const $ = {
+    n.components = { ...w, ...n.components };
+    const p = {
       palette: [],
       background: i.card,
       foreground: i.foreground,
       gridColor: i.border,
       axisColor: i.mutedForeground
     };
-    l.components.chart = { ...$, ...l.components.chart }, l.components.table = {
-      ...B(i, s),
-      ...l.components.table
-    }, l.components.aggregateTable = v ? {
-      ...B(i, s),
-      ...v
-    } : O(l.components.table), l.components.pivotTable = x ? {
-      ...B(i, s),
-      ...x
-    } : O(l.components.table);
+    n.components.chart = { ...p, ...n.components.chart }, n.components.table = {
+      ...le(i, c),
+      ...n.components.table
+    };
   }
   return e;
 }
-function B(e, n) {
+function le(e, a) {
   return {
-    density: n.typography.density,
+    density: a.typography.density,
     container: {
       background: e.card,
       borderColor: e.border,
-      borderRadius: n.radius.table,
-      shadow: n.shadow.card
+      borderRadius: a.radius.table,
+      shadow: a.shadow.card
     },
     header: {
       background: e.muted,
@@ -419,8 +402,8 @@ function B(e, n) {
       hoverBackground: e.accent
     },
     cell: {
-      paddingX: n.spacing.tableCellX,
-      paddingY: n.spacing.tableCellY,
+      paddingX: a.spacing.tableCellX,
+      paddingY: a.spacing.tableCellY,
       verticalAlign: "middle",
       wrap: "nowrap"
     },
@@ -442,10 +425,10 @@ function B(e, n) {
     }
   };
 }
-function O(e) {
+function re(e) {
   return JSON.parse(JSON.stringify(e));
 }
-const ir = [
+const dr = [
   ["background", "Canvas"],
   ["foreground", "Text"],
   ["card", "Card"],
@@ -461,7 +444,7 @@ const ir = [
   ["negative", "Negative"],
   ["warning", "Warning"],
   ["info", "Info"]
-], cr = [0, 1, 2, 3, 4, 5], X = Ge, lr = [
+], cr = [0, 1, 2, 3, 4, 5], M = Ge, ir = [
   "#ffffff",
   "#f8fafc",
   "#f4f4f5",
@@ -475,165 +458,165 @@ const ir = [
   "#dc2626",
   "#7c3aed"
 ];
-function Er({
+function Rr({
   appearance: e,
-  previewTitle: n,
-  isLoading: t = !1,
+  previewTitle: a,
+  isLoading: n = !1,
   isSaving: c = !1,
-  error: l = null,
-  className: s,
-  onDraftChange: i,
-  onSave: v,
+  error: i = null,
+  className: f,
+  onDraftChange: g,
+  onSave: y,
   onClearConfig: x,
-  onCancel: S
+  onCancel: w
 }) {
-  const [f, b] = m.useState(null), [T, F] = m.useState("light"), [$, z] = m.useState(!1), [we, R] = m.useState(
+  const [p, u] = b.useState(null), [B, O] = b.useState("light"), [ve, R] = b.useState(!1), [Ne, F] = b.useState(
     "idle"
-  ), [te, Se] = m.useState(!1), [D, _] = m.useState(""), [j, h] = m.useState(null), de = m.useRef(null), I = m.useRef(i), A = m.useRef(!1);
-  m.useEffect(() => {
-    I.current = i;
-  }, [i]), m.useEffect(() => {
+  ), [oe, we] = b.useState(!1), [A, I] = b.useState(""), [E, m] = b.useState(null), ae = b.useRef(null), z = b.useRef(g), P = b.useRef(!1);
+  b.useEffect(() => {
+    z.current = g;
+  }, [g]), b.useEffect(() => {
     if (e === void 0) {
-      A.current = !0, b(null);
+      P.current = !0, u(null);
       return;
     }
-    const o = J(e);
-    A.current = !0, b(o), F("light"), h(null);
-  }, [e]), m.useEffect(() => {
+    const o = D(e);
+    P.current = !0, u(o), O("light"), m(null);
+  }, [e]), b.useEffect(() => {
     var o;
-    if (f) {
-      if (A.current) {
-        A.current = !1;
+    if (p) {
+      if (P.current) {
+        P.current = !1;
         return;
       }
       try {
-        const a = L(f);
-        (o = I.current) == null || o.call(I, a), h(null);
-      } catch (a) {
-        h(
-          a instanceof Error ? a.message : "Appearance is invalid"
+        const t = j(p);
+        (o = z.current) == null || o.call(z, t), m(null);
+      } catch (t) {
+        m(
+          t instanceof Error ? t.message : "Appearance is invalid"
         );
       }
     }
-  }, [f]);
-  const u = f == null ? void 0 : f.schemes[T], U = c || $, Te = m.useMemo(
-    () => u ? pr(u.tokens.radius.control) : void 0,
-    [u]
+  }, [p]);
+  const s = p == null ? void 0 : p.schemes[B], J = c || ve, Se = b.useMemo(
+    () => s ? ur(s.tokens.radius.control) : void 0,
+    [s]
   ), Fe = (o) => {
-    b((a) => {
-      if (!a) return a;
-      const k = gr(a);
-      return o(k), k;
+    u((t) => {
+      if (!t) return t;
+      const h = pr(t);
+      return o(h), h;
     });
-  }, g = (o) => {
-    Fe((a) => {
-      o(a.schemes[T]);
+  }, l = (o) => {
+    Fe((t) => {
+      o(t.schemes[B]);
     });
   }, Pe = async () => {
-    if (!f || !v) return;
+    if (!p || !y) return;
     let o;
     try {
-      o = L(f);
-    } catch (a) {
-      h(
-        a instanceof Error ? a.message : "Appearance is invalid"
+      o = j(p);
+    } catch (t) {
+      m(
+        t instanceof Error ? t.message : "Appearance is invalid"
       );
       return;
     }
-    z(!0);
+    R(!0);
     try {
-      await v(o);
+      await y(o);
     } finally {
-      z(!1);
+      R(!1);
     }
-  }, Be = () => {
-    const o = J(null);
-    R("idle"), b(o);
-  }, Oe = async () => {
+  }, Te = () => {
+    const o = D(null);
+    F("idle"), u(o);
+  }, Be = async () => {
     if (x) {
-      z(!0), h(null), R("idle");
+      R(!0), m(null), F("idle");
       try {
-        await x(), A.current = !0, b(J(null)), F("light");
+        await x(), P.current = !0, u(D(null)), O("light");
       } catch (o) {
-        h(
+        m(
           o instanceof Error ? o.message : "Unable to clear organization appearance"
         );
       } finally {
-        z(!1);
+        R(!1);
       }
     }
-  }, ie = m.useCallback(() => f ? JSON.stringify(L(f), null, 2) : "", [f]), Re = (o) => {
-    if (Se(o), o)
+  }, ne = b.useCallback(() => p ? JSON.stringify(j(p), null, 2) : "", [p]), Oe = (o) => {
+    if (we(o), o)
       try {
-        _(ie()), h(null);
-      } catch (a) {
-        h(
-          a instanceof Error ? a.message : "Appearance is invalid"
+        I(ne()), m(null);
+      } catch (t) {
+        m(
+          t instanceof Error ? t.message : "Appearance is invalid"
         );
       }
-  }, Ae = async () => {
-    if (f)
+  }, Re = async () => {
+    if (p)
       try {
-        const o = te && D ? D : ie();
-        await navigator.clipboard.writeText(o), h(null), R("copied");
+        const o = oe && A ? A : ne();
+        await navigator.clipboard.writeText(o), m(null), F("copied");
       } catch (o) {
-        h(
+        m(
           o instanceof Error ? o.message : "Unable to copy brand spec"
         );
       }
-  }, ce = (o) => {
-    const a = JSON.parse(o), k = J(a), P = L(k);
-    R("idle"), F("light"), b(k), _(JSON.stringify(P, null, 2));
-  }, Ee = () => {
+  }, te = (o) => {
+    const t = JSON.parse(o), h = D(t), S = j(h);
+    F("idle"), O("light"), u(h), I(JSON.stringify(S, null, 2));
+  }, Ae = () => {
     try {
-      ce(D);
+      te(A);
     } catch (o) {
-      h(
+      m(
         o instanceof Error ? o.message : "Brand spec must be valid JSON"
       );
     }
-  }, ze = async (o) => {
-    var k;
-    const a = (k = o.target.files) == null ? void 0 : k[0];
-    if (o.target.value = "", !!a)
+  }, Ee = async (o) => {
+    var h;
+    const t = (h = o.target.files) == null ? void 0 : h[0];
+    if (o.target.value = "", !!t)
       try {
-        ce(await br(a));
-      } catch (P) {
-        h(
-          P instanceof Error ? P.message : "Uploaded file must be a valid brand spec"
+        te(await br(t));
+      } catch (S) {
+        m(
+          S instanceof Error ? S.message : "Uploaded file must be a valid brand spec"
         );
       }
   };
   return /* @__PURE__ */ d(
     "div",
     {
-      className: ae(
+      className: Q(
         "flex min-h-0 flex-1 flex-col bg-background text-foreground",
-        s
+        f
       ),
-      style: Te,
+      style: Se,
       children: [
         /* @__PURE__ */ d("header", { className: "flex h-11 shrink-0 items-start gap-3 border-b border-border/60 px-4 pt-2", children: [
-          /* @__PURE__ */ r("div", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-control border border-border/70", children: /* @__PURE__ */ r(G, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ r("div", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-control border border-border/70", children: /* @__PURE__ */ r(_, { className: "h-3.5 w-3.5" }) }),
           /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ r("h2", { className: "truncate text-[13px] font-semibold leading-tight", children: "Brand Studio" }),
             /* @__PURE__ */ d("p", { className: "truncate text-[11px] leading-tight text-muted-foreground", children: [
               "Previewing ",
-              n || "current dashboard"
+              a || "current dashboard"
             ] })
           ] }),
           /* @__PURE__ */ d(
-            ge,
+            ue,
             {
-              open: te,
-              onOpenChange: Re,
+              open: oe,
+              onOpenChange: Oe,
               children: [
-                /* @__PURE__ */ r(be, { asChild: !0, children: /* @__PURE__ */ d(C, { type: "button", size: "xs", variant: "ghost", disabled: !f, children: [
+                /* @__PURE__ */ r(pe, { asChild: !0, children: /* @__PURE__ */ d(C, { type: "button", size: "xs", variant: "ghost", disabled: !p, children: [
                   /* @__PURE__ */ r(qe, { className: "h-3.5 w-3.5" }),
                   "Brand Spec"
                 ] }) }),
                 /* @__PURE__ */ d(
-                  fe,
+                  be,
                   {
                     align: "end",
                     sideOffset: 6,
@@ -651,10 +634,10 @@ function Er({
                               type: "button",
                               size: "xs",
                               variant: "ghost",
-                              onClick: Ae,
+                              onClick: Re,
                               children: [
-                                /* @__PURE__ */ r(or, { className: "h-3.5 w-3.5" }),
-                                we === "copied" ? "Copied" : "Copy"
+                                /* @__PURE__ */ r(rr, { className: "h-3.5 w-3.5" }),
+                                Ne === "copied" ? "Copied" : "Copy"
                               ]
                             }
                           ),
@@ -666,24 +649,24 @@ function Er({
                               variant: "ghost",
                               onClick: () => {
                                 var o;
-                                return (o = de.current) == null ? void 0 : o.click();
+                                return (o = ae.current) == null ? void 0 : o.click();
                               },
                               children: [
-                                /* @__PURE__ */ r(Ke, { className: "h-3.5 w-3.5" }),
+                                /* @__PURE__ */ r(Ze, { className: "h-3.5 w-3.5" }),
                                 "Upload"
                               ]
                             }
                           ),
-                          /* @__PURE__ */ r(C, { type: "button", size: "xs", onClick: Ee, children: "Apply" })
+                          /* @__PURE__ */ r(C, { type: "button", size: "xs", onClick: Ae, children: "Apply" })
                         ] })
                       ] }),
                       /* @__PURE__ */ r("div", { className: "h-[320px] overflow-hidden rounded-control border border-input", children: /* @__PURE__ */ r(
-                        De,
+                        ze,
                         {
                           ariaLabel: "Brand spec",
-                          value: D,
+                          value: A,
                           onValueChange: (o) => {
-                            _(o), R("idle");
+                            I(o), F("idle");
                           },
                           language: "json",
                           embedded: !0,
@@ -700,12 +683,12 @@ function Er({
           /* @__PURE__ */ r(
             "input",
             {
-              ref: de,
+              ref: ae,
               "aria-label": "Upload brand spec",
               type: "file",
               accept: "application/json,.json",
               className: "sr-only",
-              onChange: ze
+              onChange: Ee
             }
           ),
           /* @__PURE__ */ d(
@@ -714,10 +697,10 @@ function Er({
               type: "button",
               size: "xs",
               variant: "ghost",
-              onClick: Be,
-              disabled: !f,
+              onClick: Te,
+              disabled: !p,
               children: [
-                /* @__PURE__ */ r(me, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ r(ge, { className: "h-3.5 w-3.5" }),
                 "Reset"
               ]
             }
@@ -728,10 +711,10 @@ function Er({
               type: "button",
               size: "xs",
               variant: "ghost",
-              onClick: Oe,
-              disabled: U,
+              onClick: Be,
+              disabled: J,
               children: [
-                /* @__PURE__ */ r(rr, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ r(er, { className: "h-3.5 w-3.5" }),
                 "No config"
               ]
             }
@@ -742,29 +725,29 @@ function Er({
               type: "button",
               size: "xs",
               onClick: Pe,
-              disabled: !f || U || !!j || !v,
+              disabled: !p || J || !!E || !y,
               children: [
-                U ? /* @__PURE__ */ r(se, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ r(Qe, { className: "h-3.5 w-3.5" }),
+                J ? /* @__PURE__ */ r(ce, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ r(Ke, { className: "h-3.5 w-3.5" }),
                 "Save"
               ]
             }
           ),
-          S && /* @__PURE__ */ r(
+          w && /* @__PURE__ */ r(
             "button",
             {
               type: "button",
               "aria-label": "Close Brand Studio",
               className: "flex h-7 w-7 items-center justify-center rounded-control text-muted-foreground hover:bg-muted hover:text-foreground",
-              onClick: S,
-              children: /* @__PURE__ */ r(Ze, { className: "h-3.5 w-3.5" })
+              onClick: w,
+              children: /* @__PURE__ */ r(De, { className: "h-3.5 w-3.5" })
             }
           )
         ] }),
         /* @__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: j ? /* @__PURE__ */ d(le, { children: [
-            /* @__PURE__ */ r(ue, { className: "h-3.5 w-3.5 text-destructive" }),
+          /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-[12px] text-muted-foreground", children: E ? /* @__PURE__ */ d(de, { children: [
+            /* @__PURE__ */ r(ie, { className: "h-3.5 w-3.5 text-destructive" }),
             "Preview keeps the last valid draft"
-          ] }) : /* @__PURE__ */ d(le, { children: [
+          ] }) : /* @__PURE__ */ d(de, { children: [
             /* @__PURE__ */ r(je, { className: "h-3.5 w-3.5 text-emerald-500" }),
             "Draft is applied to the live dashboard preview"
           ] }) }),
@@ -772,39 +755,39 @@ function Er({
             "button",
             {
               type: "button",
-              className: ae(
+              className: Q(
                 "h-full px-2.5 text-[12px] capitalize transition-colors",
-                T === o ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
+                B === o ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
               ),
-              onClick: () => F(o),
+              onClick: () => O(o),
               children: o
             },
             o
           )) })
         ] }),
-        j && /* @__PURE__ */ r("div", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-2 text-[12px] text-destructive", children: j }),
-        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(Ie, { defaultValue: "style", className: "flex min-h-0 flex-1 flex-col", children: [
+        E && /* @__PURE__ */ r("div", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-2 text-[12px] text-destructive", children: E }),
+        n ? /* @__PURE__ */ r("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ r(ce, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : i ? /* @__PURE__ */ r("div", { className: "p-4 text-[13px] text-muted-foreground", children: i }) : p && s ? /* @__PURE__ */ d(Ie, { 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(Je, { variant: "underline", className: "w-full gap-5", children: [
-            /* @__PURE__ */ r(V, { value: "style", children: "Style" }),
-            /* @__PURE__ */ r(V, { value: "surfaces", children: "Surfaces" }),
-            /* @__PURE__ */ r(V, { value: "data", children: "Data" })
+            /* @__PURE__ */ r(L, { value: "style", children: "Style" }),
+            /* @__PURE__ */ r(L, { value: "surfaces", children: "Surfaces" }),
+            /* @__PURE__ */ r(L, { value: "data", children: "Data" })
           ] }) }),
           /* @__PURE__ */ d(Le, { className: "min-h-0 flex-1", children: [
-            /* @__PURE__ */ d(M, { value: "style", className: "m-0 p-4", children: [
+            /* @__PURE__ */ d($, { value: "style", className: "m-0 p-4", children: [
               /* @__PURE__ */ r(
-                N,
+                v,
                 {
-                  icon: G,
+                  icon: _,
                   title: "Presets",
                   description: "Start from a full light and dark appearance.",
-                  children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 gap-2", children: Ne.map((o) => /* @__PURE__ */ d(
+                  children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 gap-2", children: Ce.map((o) => /* @__PURE__ */ d(
                     "button",
                     {
                       type: "button",
                       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);
-                        b(a);
+                        const t = nr(p, o.id);
+                        u(t);
                       },
                       children: [
                         /* @__PURE__ */ d("div", { className: "flex h-7 w-10 overflow-hidden rounded-control border border-border/70", children: [
@@ -834,18 +817,18 @@ function Er({
                 }
               ),
               /* @__PURE__ */ r(
-                N,
+                v,
                 {
-                  icon: G,
+                  icon: _,
                   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(
-                    y,
+                  description: `Editing the ${B} scheme.`,
+                  children: /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-2", children: dr.map(([o, t]) => /* @__PURE__ */ r(
+                    k,
                     {
-                      label: a,
-                      value: u.tokens.color[o],
-                      onChange: (k) => g((P) => {
-                        W(P, o, k);
+                      label: t,
+                      value: s.tokens.color[o],
+                      onChange: (h) => l((S) => {
+                        U(S, o, h);
                       })
                     },
                     o
@@ -853,7 +836,7 @@ function Er({
                 }
               ),
               /* @__PURE__ */ d(
-                N,
+                v,
                 {
                   icon: $e,
                   title: "Typography",
@@ -862,37 +845,37 @@ function Er({
                     /* @__PURE__ */ r(
                       sr,
                       {
-                        value: u.tokens.typography.fontFamily,
-                        onChange: (o) => g((a) => {
-                          a.tokens.typography.fontFamily = o, a.tokens.typography.headingFontFamily = o;
+                        value: s.tokens.typography.fontFamily,
+                        onChange: (o) => l((t) => {
+                          t.tokens.typography.fontFamily = o, t.tokens.typography.headingFontFamily = o;
                         })
                       }
                     ),
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                       /* @__PURE__ */ r(
-                        w,
+                        N,
                         {
                           label: "Base size",
-                          value: u.tokens.typography.baseFontSize,
+                          value: s.tokens.typography.baseFontSize,
                           min: 11,
                           max: 18,
-                          onChange: (o) => g((a) => {
-                            a.tokens.typography.baseFontSize = o;
+                          onChange: (o) => l((t) => {
+                            t.tokens.typography.baseFontSize = o;
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        q,
+                        W,
                         {
                           label: "Density",
-                          value: u.tokens.typography.density,
+                          value: s.tokens.typography.density,
                           options: [
                             ["compact", "Compact"],
                             ["comfortable", "Comfortable"],
                             ["spacious", "Spacious"]
                           ],
-                          onChange: (o) => g((a) => {
-                            a.tokens.typography.density = o, a.components.table.density = a.tokens.typography.density, p(a, "aggregateTable"), p(a, "pivotTable");
+                          onChange: (o) => l((t) => {
+                            t.tokens.typography.density = o, t.components.table.density = t.tokens.typography.density;
                           })
                         }
                       )
@@ -901,92 +884,92 @@ function Er({
                 }
               )
             ] }),
-            /* @__PURE__ */ d(M, { value: "surfaces", className: "m-0 p-4", children: [
+            /* @__PURE__ */ d($, { value: "surfaces", className: "m-0 p-4", children: [
               /* @__PURE__ */ d(
-                N,
+                v,
                 {
-                  icon: er,
+                  icon: Qe,
                   title: "Layout",
                   description: "Canvas, grid, and card rhythm for embedded dashboards.",
                   children: [
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-3 gap-2", children: [
                       /* @__PURE__ */ r(
-                        w,
+                        N,
                         {
                           label: "Canvas pad",
                           tooltip: "Outer padding around the dashboard canvas before cards begin.",
-                          value: u.tokens.spacing.dashboardPadding,
+                          value: s.tokens.spacing.dashboardPadding,
                           min: 0,
                           max: 48,
-                          onChange: (o) => g((a) => {
-                            a.tokens.spacing.dashboardPadding = o, a.components.dashboard.padding = o;
+                          onChange: (o) => l((t) => {
+                            t.tokens.spacing.dashboardPadding = o, t.components.dashboard.padding = o;
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        w,
+                        N,
                         {
                           label: "Grid gap",
                           tooltip: "Spacing between dashboard cards in the grid.",
-                          value: u.tokens.spacing.gridGap,
+                          value: s.tokens.spacing.gridGap,
                           min: 0,
                           max: 32,
-                          onChange: (o) => g((a) => {
-                            a.tokens.spacing.gridGap = o;
+                          onChange: (o) => l((t) => {
+                            t.tokens.spacing.gridGap = o;
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        w,
+                        N,
                         {
                           label: "Card pad",
                           tooltip: "Inner padding inside card/widget frames around titles, controls, and visual content.",
-                          value: u.tokens.spacing.cardPadding,
+                          value: s.tokens.spacing.cardPadding,
                           min: 0,
                           max: 32,
-                          onChange: (o) => g((a) => {
-                            a.tokens.spacing.cardPadding = o, a.components.card.padding = o;
+                          onChange: (o) => l((t) => {
+                            t.tokens.spacing.cardPadding = o, t.components.card.padding = o;
                           })
                         }
                       )
                     ] }),
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-3 gap-2", children: [
                       /* @__PURE__ */ r(
-                        w,
+                        N,
                         {
                           label: "Control radius",
                           tooltip: "Corner radius for buttons, inputs, selects, checkboxes, segmented controls, and similar interactive controls.",
-                          value: u.tokens.radius.control,
+                          value: s.tokens.radius.control,
                           min: 0,
                           max: 12,
-                          onChange: (o) => g((a) => {
-                            H(a, "control", o);
+                          onChange: (o) => l((t) => {
+                            V(t, "control", o);
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        w,
+                        N,
                         {
                           label: "Card/widget radius",
                           tooltip: "Corner radius for dashboard card frames and widget containers.",
-                          value: u.tokens.radius.card,
+                          value: s.tokens.radius.card,
                           min: 0,
                           max: 12,
-                          onChange: (o) => g((a) => {
-                            H(a, "card", o);
+                          onChange: (o) => l((t) => {
+                            V(t, "card", o);
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        w,
+                        N,
                         {
                           label: "Table radius",
                           tooltip: "Corner radius for table containers, table chrome, and table pagination surfaces.",
-                          value: u.tokens.radius.table,
+                          value: s.tokens.radius.table,
                           min: 0,
                           max: 12,
-                          onChange: (o) => g((a) => {
-                            H(a, "table", o);
+                          onChange: (o) => l((t) => {
+                            V(t, "table", o);
                           })
                         }
                       )
@@ -995,53 +978,53 @@ function Er({
                 }
               ),
               /* @__PURE__ */ r(
-                N,
+                v,
                 {
-                  icon: ue,
+                  icon: ie,
                   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(
-                      y,
+                      k,
                       {
                         label: "Toolbar background",
                         tooltip: "Background color for the dashboard filter/control toolbar strip. This is separate from chip state colors.",
-                        value: u.components.interactive.toolbarBackground || u.tokens.color.background,
-                        onChange: (o) => g((a) => {
-                          a.components.interactive.toolbarBackground = o;
+                        value: s.components.interactive.toolbarBackground || s.tokens.color.background,
+                        onChange: (o) => l((t) => {
+                          t.components.interactive.toolbarBackground = o;
                         })
                       }
                     ),
                     /* @__PURE__ */ r(
-                      y,
+                      k,
                       {
                         label: "Default state",
                         tooltip: "Unselected filter/control chips plus the base surface for their menus, dialogs, and pagination fallback.",
-                        value: u.components.interactive.background || u.tokens.color.card,
-                        onChange: (o) => g((a) => {
-                          a.components.interactive.background = o, a.components.pagination.background = o;
+                        value: s.components.interactive.background || s.tokens.color.card,
+                        onChange: (o) => l((t) => {
+                          t.components.interactive.background = o, t.components.pagination.background = o;
                         })
                       }
                     ),
                     /* @__PURE__ */ r(
-                      y,
+                      k,
                       {
                         label: "Border",
                         tooltip: "Border color for filter/control chips, runtime inputs, settings panels, and related popover chrome.",
-                        value: u.components.interactive.borderColor || u.tokens.color.border,
-                        onChange: (o) => g((a) => {
-                          a.components.interactive.borderColor = o, a.components.pagination.borderColor = o;
+                        value: s.components.interactive.borderColor || s.tokens.color.border,
+                        onChange: (o) => l((t) => {
+                          t.components.interactive.borderColor = o, t.components.pagination.borderColor = o;
                         })
                       }
                     ),
                     /* @__PURE__ */ r(
-                      y,
+                      k,
                       {
                         label: "Selected state",
                         tooltip: "Selected filter/control chips and hover feedback. This keeps a lighter default state and a stronger selected state.",
-                        value: u.tokens.color.accent,
-                        onChange: (o) => g((a) => {
-                          W(a, "accent", o);
+                        value: s.tokens.color.accent,
+                        onChange: (o) => l((t) => {
+                          U(t, "accent", o);
                         })
                       }
                     )
@@ -1049,43 +1032,43 @@ function Er({
                 }
               )
             ] }),
-            /* @__PURE__ */ d(M, { value: "data", className: "m-0 p-4", children: [
+            /* @__PURE__ */ d($, { value: "data", className: "m-0 p-4", children: [
               /* @__PURE__ */ d(
-                N,
+                v,
                 {
                   icon: _e,
                   title: "Charts",
                   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(
-                      y,
+                      k,
                       {
                         label: `Series ${o + 1}`,
-                        value: u.components.chart.palette[o] || "#000000",
-                        onChange: (a) => g((k) => {
-                          k.components.chart.palette[o] = a;
+                        value: s.components.chart.palette[o] || "#000000",
+                        onChange: (t) => l((h) => {
+                          h.components.chart.palette[o] = t;
                         })
                       },
                       o
                     )) }),
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                       /* @__PURE__ */ r(
-                        y,
+                        k,
                         {
                           label: "Grid",
-                          value: u.components.chart.gridColor,
-                          onChange: (o) => g((a) => {
-                            a.components.chart.gridColor = o;
+                          value: s.components.chart.gridColor,
+                          onChange: (o) => l((t) => {
+                            t.components.chart.gridColor = o;
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        y,
+                        k,
                         {
                           label: "Axis",
-                          value: u.components.chart.axisColor,
-                          onChange: (o) => g((a) => {
-                            a.components.chart.axisColor = o;
+                          value: s.components.chart.axisColor,
+                          onChange: (o) => l((t) => {
+                            t.components.chart.axisColor = o;
                           })
                         }
                       )
@@ -1094,102 +1077,102 @@ function Er({
                 }
               ),
               /* @__PURE__ */ d(
-                N,
+                v,
                 {
                   icon: Ue,
                   title: "Tables",
-                  description: "Flat, aggregate, and pivot tables share this V1 table appearance.",
+                  description: "All tables share this appearance.",
                   children: [
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                       /* @__PURE__ */ r(
-                        q,
+                        W,
                         {
                           label: "Density",
-                          value: u.components.table.density,
+                          value: s.components.table.density,
                           options: [
                             ["compact", "Compact"],
                             ["comfortable", "Comfortable"],
                             ["spacious", "Spacious"]
                           ],
-                          onChange: (o) => g((a) => {
-                            a.components.table.density = o, p(a, "aggregateTable"), p(a, "pivotTable");
+                          onChange: (o) => l((t) => {
+                            t.components.table.density = o;
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        q,
+                        W,
                         {
                           label: "Cell wrap",
-                          value: u.components.table.cell.wrap,
+                          value: s.components.table.cell.wrap,
                           options: [
                             ["nowrap", "No wrap"],
                             ["wrap", "Wrap"]
                           ],
-                          onChange: (o) => g((a) => {
-                            a.components.table.cell.wrap = o, p(a, "aggregateTable"), p(a, "pivotTable");
+                          onChange: (o) => l((t) => {
+                            t.components.table.cell.wrap = o;
                           })
                         }
                       )
                     ] }),
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                       /* @__PURE__ */ r(
-                        y,
+                        k,
                         {
                           label: "Header",
-                          value: u.components.table.header.background,
-                          onChange: (o) => g((a) => {
-                            a.components.table.header.background = o, p(a, "aggregateTable"), p(a, "pivotTable");
+                          value: s.components.table.header.background,
+                          onChange: (o) => l((t) => {
+                            t.components.table.header.background = o;
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        y,
+                        k,
                         {
                           label: "Divider",
-                          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");
+                          value: s.components.table.row.dividerColor,
+                          onChange: (o) => l((t) => {
+                            t.components.table.row.dividerColor = o, t.components.table.header.dividerColor = o;
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        y,
+                        k,
                         {
                           label: "Selection",
-                          value: u.tokens.color.selection,
-                          onChange: (o) => g((a) => {
-                            W(a, "selection", o);
+                          value: s.tokens.color.selection,
+                          onChange: (o) => l((t) => {
+                            U(t, "selection", o);
                           })
                         }
                       )
                     ] }),
                     /* @__PURE__ */ r(
-                      Z,
+                      H,
                       {
                         label: "Zebra rows",
-                        checked: u.components.table.row.zebra,
-                        onCheckedChange: (o) => g((a) => {
-                          a.components.table.row.zebra = o, p(a, "aggregateTable"), p(a, "pivotTable");
+                        checked: s.components.table.row.zebra,
+                        onCheckedChange: (o) => l((t) => {
+                          t.components.table.row.zebra = o;
                         })
                       }
                     ),
                     /* @__PURE__ */ r(
-                      Z,
+                      H,
                       {
                         label: "Sticky headers",
-                        checked: u.components.table.header.sticky,
-                        onCheckedChange: (o) => g((a) => {
-                          a.components.table.header.sticky = o, p(a, "aggregateTable"), p(a, "pivotTable");
+                        checked: s.components.table.header.sticky,
+                        onCheckedChange: (o) => l((t) => {
+                          t.components.table.header.sticky = o;
                         })
                       }
                     ),
                     /* @__PURE__ */ r(
-                      Z,
+                      H,
                       {
                         label: "Uppercase headers",
-                        checked: u.components.table.header.uppercase,
-                        onCheckedChange: (o) => g((a) => {
-                          a.components.table.header.uppercase = o, p(a, "aggregateTable"), p(a, "pivotTable");
+                        checked: s.components.table.header.uppercase,
+                        onCheckedChange: (o) => l((t) => {
+                          t.components.table.header.uppercase = o;
                         })
                       }
                     )
@@ -1203,18 +1186,18 @@ function Er({
     }
   );
 }
-function N({
+function v({
   icon: e,
-  title: n,
-  description: t,
+  title: a,
+  description: n,
   children: c
 }) {
   return /* @__PURE__ */ d("section", { className: "mb-6 last:mb-0", children: [
     /* @__PURE__ */ d("div", { className: "mb-3 flex items-start gap-2", children: [
       /* @__PURE__ */ r("div", { className: "mt-0.5 flex h-5 w-5 items-center justify-center rounded-control border border-border/70", children: /* @__PURE__ */ r(e, { className: "h-3 w-3 text-muted-foreground" }) }),
       /* @__PURE__ */ d("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ r("h3", { className: "text-[13px] font-semibold", children: n }),
-        /* @__PURE__ */ r("p", { className: "mt-0.5 text-[12px] leading-4 text-muted-foreground", children: t })
+        /* @__PURE__ */ r("h3", { className: "text-[13px] font-semibold", children: a }),
+        /* @__PURE__ */ r("p", { className: "mt-0.5 text-[12px] leading-4 text-muted-foreground", children: n })
       ] })
     ] }),
     /* @__PURE__ */ r("div", { className: "space-y-2", children: c }),
@@ -1223,26 +1206,26 @@ function N({
 }
 function sr({
   value: e,
-  onChange: n
+  onChange: a
 }) {
   var c;
-  const t = (c = X.find((l) => l.value === e)) == null ? void 0 : c.id;
+  const n = (c = M.find((i) => i.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__ */ r(T, { 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: [
       /* @__PURE__ */ d(
-        ke,
+        me,
         {
-          value: t,
-          onValueChange: (l) => {
-            const s = X.find(
-              (i) => i.id === l
+          value: n,
+          onValueChange: (i) => {
+            const f = M.find(
+              (g) => g.id === i
             );
-            s && n(s.value);
+            f && a(f.value);
           },
           children: [
-            /* @__PURE__ */ r(xe, { size: "xs", "aria-label": "Font family preset", children: /* @__PURE__ */ r(ye, { placeholder: "Select font" }) }),
-            /* @__PURE__ */ r(ve, { children: X.map((l) => /* @__PURE__ */ r(Ce, { value: l.id, children: l.label }, l.id)) })
+            /* @__PURE__ */ r(he, { size: "xs", "aria-label": "Font family preset", children: /* @__PURE__ */ r(ke, { placeholder: "Select font" }) }),
+            /* @__PURE__ */ r(xe, { children: M.map((i) => /* @__PURE__ */ r(ye, { value: i.id, children: i.label }, i.id)) })
           ]
         }
       ),
@@ -1257,45 +1240,45 @@ function sr({
     ] })
   ] });
 }
-function y({
+function k({
   label: e,
-  tooltip: n,
-  value: t,
+  tooltip: a,
+  value: n,
   onChange: c
 }) {
-  const [l, s] = m.useState(!1), [i, v] = m.useState(t), x = ur(t), S = t !== i, f = (b) => {
-    s(b), b && v(t);
+  const [i, f] = b.useState(!1), [g, y] = b.useState(n), x = lr(n), w = n !== g, p = (u) => {
+    f(u), u && y(n);
   };
   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(
+      /* @__PURE__ */ r(T, { className: "text-[11px] font-normal text-muted-foreground", children: e }),
+      a ? /* @__PURE__ */ r(X, { children: /* @__PURE__ */ d(Y, { children: [
+        /* @__PURE__ */ r(q, { asChild: !0, children: /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             "aria-label": `${e} details`,
             className: "inline-flex h-3.5 w-3.5 items-center justify-center rounded-control text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground",
-            children: /* @__PURE__ */ r(he, { className: "h-3 w-3" })
+            children: /* @__PURE__ */ r(fe, { className: "h-3 w-3" })
           }
         ) }),
-        /* @__PURE__ */ r(re, { side: "top", className: "max-w-64", children: n })
+        /* @__PURE__ */ r(Z, { side: "top", className: "max-w-64", children: a })
       ] }) }) : null
     ] }),
     /* @__PURE__ */ d("div", { className: "flex h-7 items-center overflow-hidden rounded-control border border-input bg-background", children: [
-      /* @__PURE__ */ d(ge, { open: l, onOpenChange: f, children: [
-        /* @__PURE__ */ r(be, { asChild: !0, children: /* @__PURE__ */ r(
+      /* @__PURE__ */ d(ue, { open: i, onOpenChange: p, children: [
+        /* @__PURE__ */ r(pe, { asChild: !0, children: /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             "aria-label": `Open ${e} color picker`,
             className: "ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-control border border-border/70",
-            style: { backgroundColor: t },
+            style: { backgroundColor: n },
             children: /* @__PURE__ */ r("span", { className: "sr-only", children: e })
           }
         ) }),
         /* @__PURE__ */ d(
-          fe,
+          be,
           {
             align: "start",
             sideOffset: 6,
@@ -1306,7 +1289,7 @@ function y({
                   "label",
                   {
                     className: "relative flex h-16 w-16 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-control border border-border/70",
-                    style: { backgroundColor: t },
+                    style: { backgroundColor: n },
                     children: [
                       /* @__PURE__ */ r(
                         "input",
@@ -1314,176 +1297,175 @@ function y({
                           "aria-label": `${e} native color picker`,
                           type: "color",
                           value: x,
-                          onChange: (b) => c(b.target.value),
+                          onChange: (u) => c(u.target.value),
                           className: "absolute inset-0 h-full w-full cursor-pointer opacity-0"
                         }
                       ),
-                      /* @__PURE__ */ r("span", { className: "rounded-control bg-black/45 p-1 text-white shadow-sm", children: /* @__PURE__ */ r(ar, { className: "h-3.5 w-3.5" }) })
+                      /* @__PURE__ */ r("span", { className: "rounded-control bg-black/45 p-1 text-white shadow-sm", children: /* @__PURE__ */ r(or, { className: "h-3.5 w-3.5" }) })
                     ]
                   }
                 ),
                 /* @__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(T, { className: "block text-[11px] font-normal text-muted-foreground", children: "Color value" }),
+                    /* @__PURE__ */ r(X, { children: /* @__PURE__ */ d(Y, { children: [
+                      /* @__PURE__ */ r(q, { asChild: !0, children: /* @__PURE__ */ r(
                         "button",
                         {
                           type: "button",
                           "aria-label": `Reset ${e} color to previous value`,
-                          disabled: !S,
+                          disabled: !w,
                           className: "inline-flex h-5 w-5 items-center justify-center rounded-control text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-35",
-                          onClick: () => c(i),
-                          children: /* @__PURE__ */ r(me, { className: "h-3 w-3" })
+                          onClick: () => c(g),
+                          children: /* @__PURE__ */ r(ge, { className: "h-3 w-3" })
                         }
                       ) }),
-                      /* @__PURE__ */ r(re, { side: "top", children: "Reset to previous value" })
+                      /* @__PURE__ */ r(Z, { side: "top", children: "Reset to previous value" })
                     ] }) })
                   ] }),
                   /* @__PURE__ */ r(
-                    oe,
+                    K,
                     {
                       size: "xs",
                       "aria-label": `${e} popover color value`,
-                      value: t,
-                      onChange: (b) => c(b.target.value),
+                      value: n,
+                      onChange: (u) => c(u.target.value),
                       className: "font-mono"
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ r("div", { className: "mt-2 grid grid-cols-6 gap-1", children: lr.map((b) => /* @__PURE__ */ r(
+              /* @__PURE__ */ r("div", { className: "mt-2 grid grid-cols-6 gap-1", children: ir.map((u) => /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
-                  "aria-label": `Set ${e} to ${b}`,
-                  className: ae(
+                  "aria-label": `Set ${e} to ${u}`,
+                  className: Q(
                     "h-6 rounded-control border border-border/70 shadow-sm",
-                    t.toLowerCase() === b && "ring-2 ring-ring"
+                    n.toLowerCase() === u && "ring-2 ring-ring"
                   ),
-                  style: { backgroundColor: b },
-                  onClick: () => c(b)
+                  style: { backgroundColor: u },
+                  onClick: () => c(u)
                 },
-                b
+                u
               )) })
             ]
           }
         )
       ] }),
       /* @__PURE__ */ r(
-        oe,
+        K,
         {
           size: "xs",
           "aria-label": `${e} color value`,
-          value: t,
-          onChange: (b) => c(b.target.value),
+          value: n,
+          onChange: (u) => c(u.target.value),
           className: "h-full border-0 px-2 font-mono shadow-none focus-visible:border-0"
         }
       )
     ] })
   ] });
 }
-function ur(e) {
-  const n = We(e);
-  return n ? `#${Y(n.r)}${Y(n.g)}${Y(n.b)}` : "#000000";
+function lr(e) {
+  const a = We(e);
+  return a ? `#${G(a.r)}${G(a.g)}${G(a.b)}` : "#000000";
 }
-function Y(e) {
+function G(e) {
   return Math.round(e).toString(16).padStart(2, "0");
 }
-function w({
+function N({
   label: e,
-  tooltip: n,
-  value: t,
+  tooltip: a,
+  value: n,
   min: c,
-  max: l,
-  onChange: s
+  max: i,
+  onChange: f
 }) {
-  const i = m.useId();
+  const g = b.useId();
   return /* @__PURE__ */ d("div", { className: "block", children: [
     /* @__PURE__ */ d("div", { className: "mb-1 flex items-center gap-1", children: [
       /* @__PURE__ */ r(
-        E,
+        T,
         {
-          htmlFor: i,
+          htmlFor: g,
           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(
+      a ? /* @__PURE__ */ r(X, { children: /* @__PURE__ */ d(Y, { children: [
+        /* @__PURE__ */ r(q, { asChild: !0, children: /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             "aria-label": `${e} details`,
             className: "inline-flex h-3.5 w-3.5 items-center justify-center rounded-control text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground",
-            children: /* @__PURE__ */ r(he, { className: "h-3 w-3" })
+            children: /* @__PURE__ */ r(fe, { className: "h-3 w-3" })
           }
         ) }),
-        /* @__PURE__ */ r(re, { side: "top", className: "max-w-56", children: n })
+        /* @__PURE__ */ r(Z, { side: "top", className: "max-w-56", children: a })
       ] }) }) : null
     ] }),
     /* @__PURE__ */ r(
-      oe,
+      K,
       {
-        id: i,
+        id: g,
         size: "xs",
         type: "number",
         min: c,
-        max: l,
-        value: t,
-        onChange: (v) => {
-          const x = Number(v.target.value);
-          Number.isNaN(x) || s(x);
+        max: i,
+        value: n,
+        onChange: (y) => {
+          const x = Number(y.target.value);
+          Number.isNaN(x) || f(x);
         }
       }
     )
   ] });
 }
-function q({
+function W({
   label: e,
-  value: n,
-  options: t,
+  value: a,
+  options: n,
   onChange: c
 }) {
   return /* @__PURE__ */ d("div", { children: [
-    /* @__PURE__ */ r(E, { className: "mb-1 block text-[11px] font-normal text-muted-foreground", children: e }),
-    /* @__PURE__ */ d(ke, { value: n, onValueChange: c, children: [
-      /* @__PURE__ */ r(xe, { size: "xs", children: /* @__PURE__ */ r(ye, {}) }),
-      /* @__PURE__ */ r(ve, { children: t.map(([l, s]) => /* @__PURE__ */ r(Ce, { value: l, children: s }, l)) })
+    /* @__PURE__ */ r(T, { className: "mb-1 block text-[11px] font-normal text-muted-foreground", children: e }),
+    /* @__PURE__ */ d(me, { value: a, onValueChange: c, children: [
+      /* @__PURE__ */ r(he, { size: "xs", children: /* @__PURE__ */ r(ke, {}) }),
+      /* @__PURE__ */ r(xe, { children: n.map(([i, f]) => /* @__PURE__ */ r(ye, { value: i, children: f }, i)) })
     ] })
   ] });
 }
-function Z({
+function H({
   label: e,
-  checked: n,
-  onCheckedChange: t
+  checked: a,
+  onCheckedChange: n
 }) {
   return /* @__PURE__ */ d("div", { className: "flex h-8 items-center justify-between rounded-control border border-border/60 px-2", children: [
     /* @__PURE__ */ r("span", { className: "text-[12px]", children: e }),
-    /* @__PURE__ */ r(Me, { size: "xs", checked: n, onCheckedChange: t })
+    /* @__PURE__ */ r(Me, { size: "xs", checked: a, onCheckedChange: n })
   ] });
 }
-function pr(e) {
-  const n = `${Number((e / 16).toFixed(4))}rem`;
+function ur(e) {
+  const a = `${Number((e / 16).toFixed(4))}rem`;
   return {
-    "--semaphor-radius": n,
-    "--semaphor-control-radius": n
+    "--semaphor-radius": a,
+    "--semaphor-control-radius": a
   };
 }
-function gr(e) {
+function pr(e) {
   return JSON.parse(JSON.stringify(e));
 }
 function br(e) {
-  return typeof e.text == "function" ? e.text() : new Promise((n, t) => {
+  return typeof e.text == "function" ? e.text() : new Promise((a, n) => {
     const c = new FileReader();
-    c.onload = () => n(String(c.result ?? "")), c.onerror = () => t(c.error ?? new Error("Unable to read file")), c.readAsText(e);
+    c.onload = () => a(String(c.result ?? "")), c.onerror = () => n(c.error ?? new Error("Unable to read file")), c.readAsText(e);
   });
 }
 export {
-  Ne as BRAND_STUDIO_PRESETS,
-  Er as BrandStudioEditor,
-  tr as applyBrandStudioPreset,
-  L as buildAppearanceSpecFromDraft,
-  J as createBrandStudioDraft,
-  p as mirrorTableAppearance
+  Ce as BRAND_STUDIO_PRESETS,
+  Rr as BrandStudioEditor,
+  nr as applyBrandStudioPreset,
+  j as buildAppearanceSpecFromDraft,
+  D as createBrandStudioDraft
 };