react-semaphor 0.1.302 → 0.1.304

package/dist/brand-studio/index.js

@@ -1,17 +1,17 @@
-import { jsxs as d, jsx as r, Fragment as se } from "react/jsx-runtime";
+import { jsxs as d, jsx as r, Fragment as ce } from "react/jsx-runtime";
 import m from "react";
-import { c as $, a as Q, P as ge, b as fe, B as C, d as me, U as Je, C as De, f as le, X as je, p as ce, e as Le, T as Ue, q as $e, r as G, s as Ve, t as W, v as Me, w as _e, x as Ge, y as We, L as z, z as ee, A as re, D as ae, E as he, F as oe, I as U, g as ye, h as xe, i as ke, j as ve, k as Ce, S as He } from "../chunks/switch-CZtMtqEj.js";
-import { r as Xe, v as Ye, A as qe, p as Ze } from "../chunks/index-uRJmUpof.js";
-import { P as H } from "../chunks/palette-jd7xiGTg.js";
-import { R as Ne } from "../chunks/rotate-ccw-yFwqBFJZ.js";
-import { S as Ke } from "../chunks/save-DU0FXUlM.js";
+import { c as $, a as K, P as ge, b as be, B as C, d as fe, U as De, C as Ie, f as le, X as je, p as se, e as Je, T as Le, q as $e, r as G, s as _e, t as M, v as Ue, w as Ve, x as Ge, y as Me, L as E, z as Q, A as ee, D as re, E as me, F as oe, I as ae, g as he, h as xe, i as ye, j as ke, k as ve, S as We } from "../chunks/switch-BFhVVwh9.js";
+import { r as He, v as Xe, A as Ye, a as qe, p as Ze } from "../chunks/index-CJdxSyQq.js";
+import { P as W, B as Ke } from "../chunks/palette-DD-i7bNS.js";
+import { R as Ce } from "../chunks/rotate-ccw-X8MbX_hF.js";
+import { S as Qe } from "../chunks/save-j-clxFtx.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 Qe = $("Ban", [
+const er = $("Ban", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m4.9 4.9 14.2 14.2", key: "1m5liu" }]
 ]);
@@ -21,7 +21,7 @@ const Qe = $("Ban", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ue = $("Clipboard", [
+const rr = $("Clipboard", [
   ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
   [
     "path",
@@ -37,7 +37,7 @@ const ue = $("Clipboard", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const er = $("LayoutGrid", [
+const or = $("LayoutGrid", [
   ["rect", { width: "7", height: "7", x: "3", y: "3", rx: "1", key: "1g98yp" }],
   ["rect", { width: "7", height: "7", x: "14", y: "3", rx: "1", key: "6d4xhi" }],
   ["rect", { width: "7", height: "7", x: "14", y: "14", rx: "1", key: "nxv5o0" }],
@@ -49,7 +49,7 @@ const er = $("LayoutGrid", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const rr = $("Pipette", [
+const ar = $("Pipette", [
   ["path", { d: "m2 22 1-1h3l9-9", key: "1sre89" }],
   ["path", { d: "M3 21v-3l9-9", key: "hpe2y6" }],
   [
@@ -59,7 +59,7 @@ const rr = $("Pipette", [
       key: "196du1"
     }
   ]
-]), Se = [
+]), Ne = [
   {
     id: "semaphor",
     name: "Semaphor",
@@ -208,18 +208,18 @@ const rr = $("Pipette", [
     }
   }
 ];
-function j(e) {
-  const n = Xe({
+function J(e) {
+  const n = He({
     organizationAppearance: e ?? void 0
   });
-  return or(O(n));
+  return tr(R(n));
 }
 function L(e) {
-  const n = O({
-    version: qe,
+  const n = R({
+    version: Ye,
     mode: e.mode,
     schemes: e.schemes
-  }), t = Ye(n);
+  }), t = Xe(n);
   if (!t.success) {
     const u = t.issues[0];
     throw new Error(
@@ -228,48 +228,48 @@ function L(e) {
   }
   return t.value;
 }
-function ar(e, n) {
-  const t = Se.find((s) => s.id === n);
+function nr(e, n) {
+  const t = Ne.find((c) => c.id === n);
   if (!t)
     return e;
-  const u = O(e);
-  return pe(u.schemes.light, t.light), pe(u.schemes.dark, t.dark), u;
+  const u = R(e);
+  return ue(u.schemes.light, t.light), ue(u.schemes.dark, t.dark), u;
 }
-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.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, c(e, "aggregateTable"), c(e, "pivotTable");
+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.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, s(e, "aggregateTable"), s(e, "pivotTable");
 }
-function c(e, n) {
-  e.components[n] = O(e.components.table);
+function s(e, n) {
+  e.components[n] = R(e.components.table);
 }
-function be(e, n, t) {
+function pe(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, c(e, "aggregateTable"), c(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, s(e, "aggregateTable"), s(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, c(e, "aggregateTable"), c(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, s(e, "aggregateTable"), s(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, c(e, "aggregateTable"), c(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, s(e, "aggregateTable"), s(e, "pivotTable");
       break;
     case "mutedForeground":
-      e.components.table.header.foreground = t, e.components.chart.axisColor = t, c(e, "aggregateTable"), c(e, "pivotTable");
+      e.components.table.header.foreground = t, e.components.chart.axisColor = t, s(e, "aggregateTable"), s(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, c(e, "aggregateTable"), c(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, s(e, "aggregateTable"), s(e, "pivotTable");
       break;
     case "accent":
-      e.components.table.row.hoverBackground = t, e.components.table.row.selectedBackground = t, c(e, "aggregateTable"), c(e, "pivotTable");
+      e.components.table.row.hoverBackground = t, e.components.table.row.selectedBackground = t, s(e, "aggregateTable"), s(e, "pivotTable");
       break;
   }
 }
-function X(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;
@@ -278,21 +278,21 @@ function X(e, n, t) {
       e.components.card.borderRadius = t;
       break;
     case "table":
-      e.components.table.container.borderRadius = t, c(e, "aggregateTable"), c(e, "pivotTable");
+      e.components.table.container.borderRadius = t, s(e, "aggregateTable"), s(e, "pivotTable");
       break;
   }
 }
-function or(e) {
+function tr(e) {
   var n, t;
   for (const u of ["light", "dark"]) {
-    const s = e.schemes[u], l = s.tokens, i = l.color, k = (n = s.components) == null ? void 0 : n.aggregateTable, x = (t = s.components) == null ? void 0 : t.pivotTable, A = {
+    const c = e.schemes[u], l = c.tokens, i = l.color, k = (n = c.components) == null ? void 0 : n.aggregateTable, y = (t = c.components) == null ? void 0 : t.pivotTable, S = {
       fontFamily: "",
       headingFontFamily: "",
       monoFontFamily: "",
       baseFontSize: 14,
       density: "comfortable"
     };
-    l.typography = { ...A, ...l.typography };
+    l.typography = { ...S, ...l.typography };
     const f = {
       control: 5,
       card: 5,
@@ -300,7 +300,7 @@ function or(e) {
       badge: 999
     };
     l.radius = { ...f, ...l.radius };
-    const b = {
+    const g = {
       dashboardPadding: 16,
       gridGap: 12,
       cardPadding: 16,
@@ -308,14 +308,14 @@ function or(e) {
       tableCellX: 12,
       tableCellY: 8
     };
-    l.spacing = { ...b, ...l.spacing };
-    const w = {
+    l.spacing = { ...g, ...l.spacing };
+    const T = {
       card: "none",
       popover: "0 12px 32px rgba(15, 23, 42, 0.14)",
       focusRing: "0 0 0 2px rgba(37, 99, 235, 0.35)"
     };
-    l.shadow = { ...w, ...l.shadow };
-    const T = {
+    l.shadow = { ...T, ...l.shadow };
+    const F = {
       dashboard: {
         background: i.background,
         foreground: i.foreground,
@@ -344,9 +344,9 @@ function or(e) {
         gridColor: i.border,
         axisColor: i.mutedForeground
       },
-      table: P(i, l),
-      aggregateTable: P(i, l),
-      pivotTable: P(i, l),
+      table: B(i, l),
+      aggregateTable: B(i, l),
+      pivotTable: B(i, l),
       pagination: {
         background: i.card,
         foreground: i.foreground,
@@ -354,28 +354,28 @@ function or(e) {
         borderRadius: l.radius.control
       }
     };
-    s.components = { ...T, ...s.components };
-    const V = {
+    c.components = { ...F, ...c.components };
+    const _ = {
       palette: [],
       background: i.card,
       foreground: i.foreground,
       gridColor: i.border,
       axisColor: i.mutedForeground
     };
-    s.components.chart = { ...V, ...s.components.chart }, s.components.table = {
-      ...P(i, l),
-      ...s.components.table
-    }, s.components.aggregateTable = k ? {
-      ...P(i, l),
+    c.components.chart = { ..._, ...c.components.chart }, c.components.table = {
+      ...B(i, l),
+      ...c.components.table
+    }, c.components.aggregateTable = k ? {
+      ...B(i, l),
       ...k
-    } : O(s.components.table), s.components.pivotTable = x ? {
-      ...P(i, l),
-      ...x
-    } : O(s.components.table);
+    } : R(c.components.table), c.components.pivotTable = y ? {
+      ...B(i, l),
+      ...y
+    } : R(c.components.table);
   }
   return e;
 }
-function P(e, n) {
+function B(e, n) {
   return {
     density: n.typography.density,
     container: {
@@ -424,10 +424,10 @@ function P(e, n) {
     }
   };
 }
-function O(e) {
+function R(e) {
   return JSON.parse(JSON.stringify(e));
 }
-const nr = [
+const dr = [
   ["background", "Canvas"],
   ["foreground", "Text"],
   ["card", "Card"],
@@ -443,48 +443,7 @@ const nr = [
   ["negative", "Negative"],
   ["warning", "Warning"],
   ["info", "Info"]
-], tr = [0, 1, 2, 3, 4, 5], Y = [
-  {
-    id: "semaphor",
-    label: "Semaphor / Inter",
-    value: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
-  },
-  {
-    id: "system",
-    label: "System UI",
-    value: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
-  },
-  {
-    id: "aptos",
-    label: "Aptos",
-    value: 'Aptos, "Segoe UI", ui-sans-serif, system-ui, sans-serif'
-  },
-  {
-    id: "ibm-plex-sans",
-    label: "IBM Plex Sans",
-    value: '"IBM Plex Sans", Inter, ui-sans-serif, system-ui, sans-serif'
-  },
-  {
-    id: "roboto",
-    label: "Roboto",
-    value: "Roboto, Arial, ui-sans-serif, system-ui, sans-serif"
-  },
-  {
-    id: "open-sans",
-    label: "Open Sans",
-    value: '"Open Sans", Arial, ui-sans-serif, system-ui, sans-serif'
-  },
-  {
-    id: "source-sans",
-    label: "Source Sans 3",
-    value: '"Source Sans 3", Arial, ui-sans-serif, system-ui, sans-serif'
-  },
-  {
-    id: "custom",
-    label: "Custom stack",
-    value: ""
-  }
-], dr = [
+], ir = [0, 1, 2, 3, 4, 5], X = qe, cr = [
   "#ffffff",
   "#f8fafc",
   "#f4f4f5",
@@ -498,149 +457,149 @@ const nr = [
   "#dc2626",
   "#7c3aed"
 ];
-function xr({
+function vr({
   appearance: e,
   previewTitle: n,
   isLoading: t = !1,
   isSaving: u = !1,
-  error: s = null,
+  error: c = null,
   className: l,
   onDraftChange: i,
   onSave: k,
-  onClearConfig: x,
-  onCancel: A
+  onClearConfig: y,
+  onCancel: S
 }) {
-  const [f, b] = m.useState(null), [w, T] = m.useState("light"), [V, I] = m.useState(!1), [we, B] = m.useState(
+  const [f, g] = m.useState(null), [T, F] = m.useState("light"), [_, z] = m.useState(!1), [we, O] = m.useState(
     "idle"
-  ), [ne, Te] = m.useState(!1), [E, M] = m.useState(""), [J, h] = m.useState(null), te = m.useRef(null), D = m.useRef(i), R = m.useRef(!1);
+  ), [ne, Se] = m.useState(!1), [D, U] = m.useState(""), [I, h] = m.useState(null), te = m.useRef(null), j = m.useRef(i), A = m.useRef(!1);
   m.useEffect(() => {
-    D.current = i;
+    j.current = i;
   }, [i]), m.useEffect(() => {
     if (e === void 0) {
-      R.current = !0, b(null);
+      A.current = !0, g(null);
       return;
     }
-    const a = j(e);
-    R.current = !0, b(a), T("light"), h(null);
+    const o = J(e);
+    A.current = !0, g(o), F("light"), h(null);
   }, [e]), m.useEffect(() => {
-    var a;
+    var o;
     if (f) {
-      if (R.current) {
-        R.current = !1;
+      if (A.current) {
+        A.current = !1;
         return;
       }
       try {
-        const o = L(f);
-        (a = D.current) == null || a.call(D, o), h(null);
-      } catch (o) {
+        const a = L(f);
+        (o = j.current) == null || o.call(j, a), h(null);
+      } catch (a) {
         h(
-          o instanceof Error ? o.message : "Appearance is invalid"
+          a instanceof Error ? a.message : "Appearance is invalid"
         );
       }
     }
   }, [f]);
-  const p = f == null ? void 0 : f.schemes[w], _ = u || V, Fe = m.useMemo(
-    () => p ? lr(p.tokens.radius.control) : void 0,
+  const p = f == null ? void 0 : f.schemes[T], V = u || _, Te = m.useMemo(
+    () => p ? ur(p.tokens.radius.control) : void 0,
     [p]
-  ), Pe = (a) => {
-    b((o) => {
-      if (!o) return o;
-      const y = cr(o);
-      return a(y), y;
+  ), Fe = (o) => {
+    g((a) => {
+      if (!a) return a;
+      const x = pr(a);
+      return o(x), x;
     });
-  }, g = (a) => {
-    Pe((o) => {
-      a(o.schemes[w]);
+  }, b = (o) => {
+    Fe((a) => {
+      o(a.schemes[T]);
     });
-  }, Oe = async () => {
+  }, Pe = async () => {
     if (!f || !k) return;
-    let a;
+    let o;
     try {
-      a = L(f);
-    } catch (o) {
+      o = L(f);
+    } catch (a) {
       h(
-        o instanceof Error ? o.message : "Appearance is invalid"
+        a instanceof Error ? a.message : "Appearance is invalid"
       );
       return;
     }
-    I(!0);
+    z(!0);
     try {
-      await k(a);
+      await k(o);
     } finally {
-      I(!1);
+      z(!1);
     }
-  }, Ae = () => {
-    const a = j(null);
-    B("idle"), b(a);
-  }, Be = async () => {
-    if (x) {
-      I(!0), h(null), B("idle");
+  }, Be = () => {
+    const o = J(null);
+    O("idle"), g(o);
+  }, Re = async () => {
+    if (y) {
+      z(!0), h(null), O("idle");
       try {
-        await x(), R.current = !0, b(j(null)), T("light");
-      } catch (a) {
+        await y(), A.current = !0, g(J(null)), F("light");
+      } catch (o) {
         h(
-          a instanceof Error ? a.message : "Unable to clear organization appearance"
+          o instanceof Error ? o.message : "Unable to clear organization appearance"
         );
       } finally {
-        I(!1);
+        z(!1);
       }
     }
-  }, de = m.useCallback(() => f ? JSON.stringify(L(f), null, 2) : "", [f]), Re = (a) => {
-    if (Te(a), a)
+  }, de = m.useCallback(() => f ? JSON.stringify(L(f), null, 2) : "", [f]), Oe = (o) => {
+    if (Se(o), o)
       try {
-        M(de()), h(null);
-      } catch (o) {
+        U(de()), h(null);
+      } catch (a) {
         h(
-          o instanceof Error ? o.message : "Appearance is invalid"
+          a instanceof Error ? a.message : "Appearance is invalid"
         );
       }
-  }, ze = async () => {
+  }, Ae = async () => {
     if (f)
       try {
-        const a = ne && E ? E : de();
-        await navigator.clipboard.writeText(a), h(null), B("copied");
-      } catch (a) {
+        const o = ne && D ? D : de();
+        await navigator.clipboard.writeText(o), h(null), O("copied");
+      } catch (o) {
         h(
-          a instanceof Error ? a.message : "Unable to copy appearance JSON"
+          o instanceof Error ? o.message : "Unable to copy brand spec"
         );
       }
-  }, ie = (a) => {
-    const o = JSON.parse(a), y = j(o), F = L(y);
-    B("idle"), T("light"), b(y), M(JSON.stringify(F, null, 2));
-  }, Ie = () => {
+  }, ie = (o) => {
+    const a = JSON.parse(o), x = J(a), P = L(x);
+    O("idle"), F("light"), g(x), U(JSON.stringify(P, null, 2));
+  }, Ee = () => {
     try {
-      ie(E);
-    } catch (a) {
+      ie(D);
+    } catch (o) {
       h(
-        a instanceof Error ? a.message : "JSON must be a valid AppearanceSpec"
+        o instanceof Error ? o.message : "Brand spec must be valid JSON"
       );
     }
-  }, Ee = async (a) => {
-    var y;
-    const o = (y = a.target.files) == null ? void 0 : y[0];
-    if (a.target.value = "", !!o)
+  }, ze = async (o) => {
+    var x;
+    const a = (x = o.target.files) == null ? void 0 : x[0];
+    if (o.target.value = "", !!a)
       try {
-        ie(await ur(o));
-      } catch (F) {
+        ie(await gr(a));
+      } catch (P) {
         h(
-          F instanceof Error ? F.message : "Uploaded file must be valid AppearanceSpec JSON"
+          P instanceof Error ? P.message : "Uploaded file must be a valid brand spec"
         );
       }
   };
   return /* @__PURE__ */ d(
     "div",
     {
-      className: Q(
+      className: K(
         "flex min-h-0 flex-1 flex-col bg-background text-foreground",
         l
       ),
-      style: Fe,
+      style: Te,
       children: [
-        /* @__PURE__ */ d("header", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border/60 px-4", children: [
-          /* @__PURE__ */ r("div", { className: "flex h-6 w-6 items-center justify-center rounded-control border border-border/70", children: /* @__PURE__ */ r(H, { className: "h-3.5 w-3.5" }) }),
+        /* @__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(W, { 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", children: "Brand Studio" }),
-            /* @__PURE__ */ d("p", { className: "truncate text-[11px] text-muted-foreground", 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"
             ] })
@@ -649,14 +608,14 @@ function xr({
             ge,
             {
               open: ne,
-              onOpenChange: Re,
+              onOpenChange: Oe,
               children: [
-                /* @__PURE__ */ r(fe, { asChild: !0, children: /* @__PURE__ */ d(C, { type: "button", size: "xs", variant: "ghost", disabled: !f, children: [
-                  /* @__PURE__ */ r(ue, { className: "h-3.5 w-3.5" }),
-                  "JSON"
+                /* @__PURE__ */ r(be, { asChild: !0, children: /* @__PURE__ */ d(C, { type: "button", size: "xs", variant: "ghost", disabled: !f, children: [
+                  /* @__PURE__ */ r(Ke, { className: "h-3.5 w-3.5" }),
+                  "Brand Spec"
                 ] }) }),
                 /* @__PURE__ */ d(
-                  me,
+                  fe,
                   {
                     align: "end",
                     sideOffset: 6,
@@ -664,8 +623,8 @@ function xr({
                     children: [
                       /* @__PURE__ */ d("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
                         /* @__PURE__ */ d("div", { className: "min-w-0", children: [
-                          /* @__PURE__ */ r("div", { className: "text-[12px] font-medium", children: "AppearanceSpec JSON" }),
-                          /* @__PURE__ */ r("div", { className: "text-[11px] text-muted-foreground", children: "Edit, apply, copy, or upload the active spec." })
+                          /* @__PURE__ */ r("div", { className: "text-[12px] font-medium", children: "Brand spec" }),
+                          /* @__PURE__ */ r("div", { className: "text-[11px] text-muted-foreground", children: "Edit, apply, copy, or upload your brand spec." })
                         ] }),
                         /* @__PURE__ */ d("div", { className: "flex shrink-0 items-center gap-1", children: [
                           /* @__PURE__ */ d(
@@ -674,9 +633,9 @@ function xr({
                               type: "button",
                               size: "xs",
                               variant: "ghost",
-                              onClick: ze,
+                              onClick: Ae,
                               children: [
-                                /* @__PURE__ */ r(ue, { className: "h-3.5 w-3.5" }),
+                                /* @__PURE__ */ r(rr, { className: "h-3.5 w-3.5" }),
                                 we === "copied" ? "Copied" : "Copy"
                               ]
                             }
@@ -688,25 +647,25 @@ function xr({
                               size: "xs",
                               variant: "ghost",
                               onClick: () => {
-                                var a;
-                                return (a = te.current) == null ? void 0 : a.click();
+                                var o;
+                                return (o = te.current) == null ? void 0 : o.click();
                               },
                               children: [
-                                /* @__PURE__ */ r(Je, { className: "h-3.5 w-3.5" }),
+                                /* @__PURE__ */ r(De, { className: "h-3.5 w-3.5" }),
                                 "Upload"
                               ]
                             }
                           ),
-                          /* @__PURE__ */ r(C, { type: "button", size: "xs", onClick: Ie, children: "Apply" })
+                          /* @__PURE__ */ r(C, { type: "button", size: "xs", onClick: Ee, children: "Apply" })
                         ] })
                       ] }),
                       /* @__PURE__ */ r("div", { className: "h-[320px] overflow-hidden rounded-control border border-input", children: /* @__PURE__ */ r(
-                        De,
+                        Ie,
                         {
-                          ariaLabel: "AppearanceSpec JSON",
-                          value: E,
-                          onValueChange: (a) => {
-                            M(a), B("idle");
+                          ariaLabel: "Brand spec",
+                          value: D,
+                          onValueChange: (o) => {
+                            U(o), O("idle");
                           },
                           language: "json",
                           embedded: !0,
@@ -724,11 +683,11 @@ function xr({
             "input",
             {
               ref: te,
-              "aria-label": "Upload AppearanceSpec JSON",
+              "aria-label": "Upload brand spec",
               type: "file",
               accept: "application/json,.json",
               className: "sr-only",
-              onChange: Ee
+              onChange: ze
             }
           ),
           /* @__PURE__ */ d(
@@ -737,24 +696,24 @@ function xr({
               type: "button",
               size: "xs",
               variant: "ghost",
-              onClick: Ae,
+              onClick: Be,
               disabled: !f,
               children: [
-                /* @__PURE__ */ r(Ne, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ r(Ce, { className: "h-3.5 w-3.5" }),
                 "Reset"
               ]
             }
           ),
-          x && /* @__PURE__ */ d(
+          y && /* @__PURE__ */ d(
             C,
             {
               type: "button",
               size: "xs",
               variant: "ghost",
-              onClick: Be,
-              disabled: _,
+              onClick: Re,
+              disabled: V,
               children: [
-                /* @__PURE__ */ r(Qe, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ r(er, { className: "h-3.5 w-3.5" }),
                 "No config"
               ]
             }
@@ -764,70 +723,70 @@ function xr({
             {
               type: "button",
               size: "xs",
-              onClick: Oe,
-              disabled: !f || _ || !!J || !k,
+              onClick: Pe,
+              disabled: !f || V || !!I || !k,
               children: [
-                _ ? /* @__PURE__ */ r(le, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ r(Ke, { className: "h-3.5 w-3.5" }),
+                V ? /* @__PURE__ */ r(le, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ r(Qe, { className: "h-3.5 w-3.5" }),
                 "Save"
               ]
             }
           ),
-          /* @__PURE__ */ r(
+          S && /* @__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: A,
+              onClick: S,
               children: /* @__PURE__ */ r(je, { 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(se, { children: [
-            /* @__PURE__ */ r(ce, { 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(ce, { children: [
+            /* @__PURE__ */ r(se, { className: "h-3.5 w-3.5 text-destructive" }),
             "Preview keeps the last valid draft"
-          ] }) : /* @__PURE__ */ d(se, { children: [
-            /* @__PURE__ */ r(Le, { className: "h-3.5 w-3.5 text-emerald-500" }),
+          ] }) : /* @__PURE__ */ d(ce, { children: [
+            /* @__PURE__ */ r(Je, { className: "h-3.5 w-3.5 text-emerald-500" }),
             "Draft is applied to the live dashboard preview"
           ] }) }),
-          /* @__PURE__ */ r("div", { className: "inline-flex h-7 items-center overflow-hidden rounded-control border border-border/70", children: ["light", "dark"].map((a) => /* @__PURE__ */ r(
+          /* @__PURE__ */ r("div", { className: "inline-flex h-7 items-center overflow-hidden rounded-control border border-border/70", children: ["light", "dark"].map((o) => /* @__PURE__ */ r(
             "button",
             {
               type: "button",
-              className: Q(
+              className: K(
                 "h-full px-2.5 text-[12px] capitalize transition-colors",
-                w === a ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
+                T === o ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
               ),
-              onClick: () => T(a),
-              children: a
+              onClick: () => F(o),
+              children: o
             },
-            a
+            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(le, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : s ? /* @__PURE__ */ r("div", { className: "p-4 text-[13px] text-muted-foreground", children: s }) : f && p ? /* @__PURE__ */ d(Ue, { defaultValue: "style", className: "flex min-h-0 flex-1 flex-col", children: [
+        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" }) }) : c ? /* @__PURE__ */ r("div", { className: "p-4 text-[13px] text-muted-foreground", children: c }) : f && p ? /* @__PURE__ */ d(Le, { 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($e, { variant: "underline", className: "w-full gap-5", children: [
             /* @__PURE__ */ r(G, { value: "style", children: "Style" }),
             /* @__PURE__ */ r(G, { value: "surfaces", children: "Surfaces" }),
             /* @__PURE__ */ r(G, { value: "data", children: "Data" })
           ] }) }),
-          /* @__PURE__ */ d(Ve, { className: "min-h-0 flex-1", children: [
-            /* @__PURE__ */ d(W, { value: "style", className: "m-0 p-4", children: [
+          /* @__PURE__ */ d(_e, { className: "min-h-0 flex-1", children: [
+            /* @__PURE__ */ d(M, { value: "style", className: "m-0 p-4", children: [
               /* @__PURE__ */ r(
                 N,
                 {
-                  icon: H,
+                  icon: W,
                   title: "Presets",
                   description: "Start from a full light and dark appearance.",
-                  children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 gap-2", children: Se.map((a) => /* @__PURE__ */ d(
+                  children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 gap-2", children: Ne.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 o = ar(f, a.id);
-                        b(o);
+                        const a = nr(f, o.id);
+                        g(a);
                       },
                       children: [
                         /* @__PURE__ */ d("div", { className: "flex h-7 w-10 overflow-hidden rounded-control border border-border/70", children: [
@@ -835,77 +794,77 @@ function xr({
                             "span",
                             {
                               className: "h-full flex-1",
-                              style: { backgroundColor: a.primary }
+                              style: { backgroundColor: o.primary }
                             }
                           ),
                           /* @__PURE__ */ r(
                             "span",
                             {
                               className: "h-full flex-1",
-                              style: { backgroundColor: a.accent }
+                              style: { backgroundColor: o.accent }
                             }
                           )
                         ] }),
                         /* @__PURE__ */ d("span", { className: "min-w-0 flex-1", children: [
-                          /* @__PURE__ */ r("span", { className: "block text-[13px] font-medium", children: a.name }),
-                          /* @__PURE__ */ r("span", { className: "block truncate text-[12px] text-muted-foreground", children: a.description })
+                          /* @__PURE__ */ r("span", { className: "block text-[13px] font-medium", children: o.name }),
+                          /* @__PURE__ */ r("span", { className: "block truncate text-[12px] text-muted-foreground", children: o.description })
                         ] })
                       ]
                     },
-                    a.id
+                    o.id
                   )) })
                 }
               ),
               /* @__PURE__ */ r(
                 N,
                 {
-                  icon: H,
+                  icon: W,
                   title: "Color",
-                  description: `Editing the ${w} scheme.`,
-                  children: /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-2", children: nr.map(([a, o]) => /* @__PURE__ */ r(
+                  description: `Editing the ${T} scheme.`,
+                  children: /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-2", children: dr.map(([o, a]) => /* @__PURE__ */ r(
                     v,
                     {
-                      label: o,
-                      value: p.tokens.color[a],
-                      onChange: (y) => g((F) => {
-                        be(F, a, y);
+                      label: a,
+                      value: p.tokens.color[o],
+                      onChange: (x) => b((P) => {
+                        pe(P, o, x);
                       })
                     },
-                    a
+                    o
                   )) })
                 }
               ),
               /* @__PURE__ */ d(
                 N,
                 {
-                  icon: Me,
+                  icon: Ue,
                   title: "Typography",
                   description: "Fonts and density used by dashboard and workflow chrome.",
                   children: [
                     /* @__PURE__ */ r(
-                      ir,
+                      lr,
                       {
                         value: p.tokens.typography.fontFamily,
-                        onChange: (a) => g((o) => {
-                          o.tokens.typography.fontFamily = a, o.tokens.typography.headingFontFamily = a;
+                        onChange: (o) => b((a) => {
+                          a.tokens.typography.fontFamily = o, a.tokens.typography.headingFontFamily = o;
                         })
                       }
                     ),
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                       /* @__PURE__ */ r(
-                        S,
+                        w,
                         {
                           label: "Base size",
                           value: p.tokens.typography.baseFontSize,
                           min: 11,
                           max: 18,
-                          onChange: (a) => g((o) => {
-                            o.tokens.typography.baseFontSize = a;
+                          onChange: (o) => b((a) => {
+                            a.tokens.typography.baseFontSize = o;
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        Z,
+                        q,
                         {
                           label: "Density",
                           value: p.tokens.typography.density,
@@ -914,8 +873,8 @@ function xr({
                             ["comfortable", "Comfortable"],
                             ["spacious", "Spacious"]
                           ],
-                          onChange: (a) => g((o) => {
-                            o.tokens.typography.density = a, o.components.table.density = o.tokens.typography.density, c(o, "aggregateTable"), c(o, "pivotTable");
+                          onChange: (o) => b((a) => {
+                            a.tokens.typography.density = o, a.components.table.density = a.tokens.typography.density, s(a, "aggregateTable"), s(a, "pivotTable");
                           })
                         }
                       )
@@ -924,92 +883,92 @@ function xr({
                 }
               )
             ] }),
-            /* @__PURE__ */ d(W, { value: "surfaces", className: "m-0 p-4", children: [
+            /* @__PURE__ */ d(M, { value: "surfaces", className: "m-0 p-4", children: [
               /* @__PURE__ */ d(
                 N,
                 {
-                  icon: er,
+                  icon: or,
                   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(
-                        S,
+                        w,
                         {
                           label: "Canvas pad",
                           tooltip: "Outer padding around the dashboard canvas before cards begin.",
                           value: p.tokens.spacing.dashboardPadding,
                           min: 0,
                           max: 48,
-                          onChange: (a) => g((o) => {
-                            o.tokens.spacing.dashboardPadding = a, o.components.dashboard.padding = a;
+                          onChange: (o) => b((a) => {
+                            a.tokens.spacing.dashboardPadding = o, a.components.dashboard.padding = o;
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        S,
+                        w,
                         {
                           label: "Grid gap",
                           tooltip: "Spacing between dashboard cards in the grid.",
                           value: p.tokens.spacing.gridGap,
                           min: 0,
                           max: 32,
-                          onChange: (a) => g((o) => {
-                            o.tokens.spacing.gridGap = a;
+                          onChange: (o) => b((a) => {
+                            a.tokens.spacing.gridGap = o;
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        S,
+                        w,
                         {
                           label: "Card pad",
                           tooltip: "Inner padding inside card/widget frames around titles, controls, and visual content.",
                           value: p.tokens.spacing.cardPadding,
                           min: 0,
                           max: 32,
-                          onChange: (a) => g((o) => {
-                            o.tokens.spacing.cardPadding = a, o.components.card.padding = a;
+                          onChange: (o) => b((a) => {
+                            a.tokens.spacing.cardPadding = o, a.components.card.padding = o;
                           })
                         }
                       )
                     ] }),
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-3 gap-2", children: [
                       /* @__PURE__ */ r(
-                        S,
+                        w,
                         {
                           label: "Control radius",
                           tooltip: "Corner radius for buttons, inputs, selects, checkboxes, segmented controls, and similar interactive controls.",
                           value: p.tokens.radius.control,
                           min: 0,
                           max: 12,
-                          onChange: (a) => g((o) => {
-                            X(o, "control", a);
+                          onChange: (o) => b((a) => {
+                            H(a, "control", o);
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        S,
+                        w,
                         {
                           label: "Card/widget radius",
                           tooltip: "Corner radius for dashboard card frames and widget containers.",
                           value: p.tokens.radius.card,
                           min: 0,
                           max: 12,
-                          onChange: (a) => g((o) => {
-                            X(o, "card", a);
+                          onChange: (o) => b((a) => {
+                            H(a, "card", o);
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        S,
+                        w,
                         {
                           label: "Table radius",
                           tooltip: "Corner radius for table containers, table chrome, and table pagination surfaces.",
                           value: p.tokens.radius.table,
                           min: 0,
                           max: 12,
-                          onChange: (a) => g((o) => {
-                            X(o, "table", a);
+                          onChange: (o) => b((a) => {
+                            H(a, "table", o);
                           })
                         }
                       )
@@ -1020,7 +979,7 @@ function xr({
               /* @__PURE__ */ r(
                 N,
                 {
-                  icon: ce,
+                  icon: se,
                   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: [
@@ -1030,8 +989,8 @@ function xr({
                         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: (a) => g((o) => {
-                          o.components.interactive.toolbarBackground = a;
+                        onChange: (o) => b((a) => {
+                          a.components.interactive.toolbarBackground = o;
                         })
                       }
                     ),
@@ -1041,8 +1000,8 @@ function xr({
                         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: (a) => g((o) => {
-                          o.components.interactive.background = a, o.components.pagination.background = a;
+                        onChange: (o) => b((a) => {
+                          a.components.interactive.background = o, a.components.pagination.background = o;
                         })
                       }
                     ),
@@ -1052,8 +1011,8 @@ function xr({
                         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: (a) => g((o) => {
-                          o.components.interactive.borderColor = a, o.components.pagination.borderColor = a;
+                        onChange: (o) => b((a) => {
+                          a.components.interactive.borderColor = o, a.components.pagination.borderColor = o;
                         })
                       }
                     ),
@@ -1063,8 +1022,8 @@ function xr({
                         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: (a) => g((o) => {
-                          be(o, "accent", a);
+                        onChange: (o) => b((a) => {
+                          pe(a, "accent", o);
                         })
                       }
                     )
@@ -1072,24 +1031,24 @@ function xr({
                 }
               )
             ] }),
-            /* @__PURE__ */ d(W, { value: "data", className: "m-0 p-4", children: [
+            /* @__PURE__ */ d(M, { value: "data", className: "m-0 p-4", children: [
               /* @__PURE__ */ d(
                 N,
                 {
-                  icon: _e,
+                  icon: Ve,
                   title: "Charts",
                   description: "Palette and semantic chart text/grid colors.",
                   children: [
-                    /* @__PURE__ */ r("div", { className: "grid grid-cols-3 gap-2", children: tr.map((a) => /* @__PURE__ */ r(
+                    /* @__PURE__ */ r("div", { className: "grid grid-cols-3 gap-2", children: ir.map((o) => /* @__PURE__ */ r(
                       v,
                       {
-                        label: `Series ${a + 1}`,
-                        value: p.components.chart.palette[a] || "#000000",
-                        onChange: (o) => g((y) => {
-                          y.components.chart.palette[a] = o;
+                        label: `Series ${o + 1}`,
+                        value: p.components.chart.palette[o] || "#000000",
+                        onChange: (a) => b((x) => {
+                          x.components.chart.palette[o] = a;
                         })
                       },
-                      a
+                      o
                     )) }),
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                       /* @__PURE__ */ r(
@@ -1097,8 +1056,8 @@ function xr({
                         {
                           label: "Grid",
                           value: p.components.chart.gridColor,
-                          onChange: (a) => g((o) => {
-                            o.components.chart.gridColor = a;
+                          onChange: (o) => b((a) => {
+                            a.components.chart.gridColor = o;
                           })
                         }
                       ),
@@ -1107,8 +1066,8 @@ function xr({
                         {
                           label: "Axis",
                           value: p.components.chart.axisColor,
-                          onChange: (a) => g((o) => {
-                            o.components.chart.axisColor = a;
+                          onChange: (o) => b((a) => {
+                            a.components.chart.axisColor = o;
                           })
                         }
                       )
@@ -1125,7 +1084,7 @@ function xr({
                   children: [
                     /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                       /* @__PURE__ */ r(
-                        Z,
+                        q,
                         {
                           label: "Density",
                           value: p.components.table.density,
@@ -1134,13 +1093,13 @@ function xr({
                             ["comfortable", "Comfortable"],
                             ["spacious", "Spacious"]
                           ],
-                          onChange: (a) => g((o) => {
-                            o.components.table.density = a, c(o, "aggregateTable"), c(o, "pivotTable");
+                          onChange: (o) => b((a) => {
+                            a.components.table.density = o, s(a, "aggregateTable"), s(a, "pivotTable");
                           })
                         }
                       ),
                       /* @__PURE__ */ r(
-                        Z,
+                        q,
                         {
                           label: "Cell wrap",
                           value: p.components.table.cell.wrap,
@@ -1148,8 +1107,8 @@ function xr({
                             ["nowrap", "No wrap"],
                             ["wrap", "Wrap"]
                           ],
-                          onChange: (a) => g((o) => {
-                            o.components.table.cell.wrap = a, c(o, "aggregateTable"), c(o, "pivotTable");
+                          onChange: (o) => b((a) => {
+                            a.components.table.cell.wrap = o, s(a, "aggregateTable"), s(a, "pivotTable");
                           })
                         }
                       )
@@ -1160,8 +1119,8 @@ function xr({
                         {
                           label: "Header",
                           value: p.components.table.header.background,
-                          onChange: (a) => g((o) => {
-                            o.components.table.header.background = a, c(o, "aggregateTable"), c(o, "pivotTable");
+                          onChange: (o) => b((a) => {
+                            a.components.table.header.background = o, s(a, "aggregateTable"), s(a, "pivotTable");
                           })
                         }
                       ),
@@ -1170,39 +1129,39 @@ function xr({
                         {
                           label: "Divider",
                           value: p.components.table.row.dividerColor,
-                          onChange: (a) => g((o) => {
-                            o.components.table.row.dividerColor = a, o.components.table.header.dividerColor = a, c(o, "aggregateTable"), c(o, "pivotTable");
+                          onChange: (o) => b((a) => {
+                            a.components.table.row.dividerColor = o, a.components.table.header.dividerColor = o, s(a, "aggregateTable"), s(a, "pivotTable");
                           })
                         }
                       )
                     ] }),
                     /* @__PURE__ */ r(
-                      K,
+                      Z,
                       {
                         label: "Zebra rows",
                         checked: p.components.table.row.zebra,
-                        onCheckedChange: (a) => g((o) => {
-                          o.components.table.row.zebra = a, c(o, "aggregateTable"), c(o, "pivotTable");
+                        onCheckedChange: (o) => b((a) => {
+                          a.components.table.row.zebra = o, s(a, "aggregateTable"), s(a, "pivotTable");
                         })
                       }
                     ),
                     /* @__PURE__ */ r(
-                      K,
+                      Z,
                       {
                         label: "Sticky headers",
                         checked: p.components.table.header.sticky,
-                        onCheckedChange: (a) => g((o) => {
-                          o.components.table.header.sticky = a, c(o, "aggregateTable"), c(o, "pivotTable");
+                        onCheckedChange: (o) => b((a) => {
+                          a.components.table.header.sticky = o, s(a, "aggregateTable"), s(a, "pivotTable");
                         })
                       }
                     ),
                     /* @__PURE__ */ r(
-                      K,
+                      Z,
                       {
                         label: "Uppercase headers",
                         checked: p.components.table.header.uppercase,
-                        onCheckedChange: (a) => g((o) => {
-                          o.components.table.header.uppercase = a, c(o, "aggregateTable"), c(o, "pivotTable");
+                        onCheckedChange: (o) => b((a) => {
+                          a.components.table.header.uppercase = o, s(a, "aggregateTable"), s(a, "pivotTable");
                         })
                       }
                     )
@@ -1231,31 +1190,31 @@ function N({
       ] })
     ] }),
     /* @__PURE__ */ r("div", { className: "space-y-2", children: u }),
-    /* @__PURE__ */ r(We, { className: "mt-5 bg-border/60" })
+    /* @__PURE__ */ r(Me, { className: "mt-5 bg-border/60" })
   ] });
 }
-function ir({
+function lr({
   value: e,
   onChange: n
 }) {
   var u;
-  const t = ((u = Y.find((s) => s.value === e)) == null ? void 0 : u.id) ?? "custom";
+  const t = (u = X.find((c) => c.value === e)) == null ? void 0 : u.id;
   return /* @__PURE__ */ d("div", { children: [
-    /* @__PURE__ */ r(z, { className: "mb-1 block text-[11px] font-normal text-muted-foreground", children: "Font family" }),
+    /* @__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: [
       /* @__PURE__ */ d(
-        ye,
+        he,
         {
           value: t,
-          onValueChange: (s) => {
-            const l = Y.find(
-              (i) => i.id === s
+          onValueChange: (c) => {
+            const l = X.find(
+              (i) => i.id === c
             );
-            !l || l.id === "custom" || n(l.value);
+            l && n(l.value);
           },
           children: [
-            /* @__PURE__ */ r(xe, { size: "xs", "aria-label": "Font family preset", children: /* @__PURE__ */ r(ke, {}) }),
-            /* @__PURE__ */ r(ve, { children: Y.map((s) => /* @__PURE__ */ r(Ce, { value: s.id, children: s.label }, s.id)) })
+            /* @__PURE__ */ r(xe, { size: "xs", "aria-label": "Font family preset", children: /* @__PURE__ */ r(ye, { placeholder: "Select font" }) }),
+            /* @__PURE__ */ r(ke, { children: X.map((c) => /* @__PURE__ */ r(ve, { value: c.id, children: c.label }, c.id)) })
           ]
         }
       ),
@@ -1267,17 +1226,7 @@ function ir({
           children: "Aa 123"
         }
       )
-    ] }),
-    /* @__PURE__ */ r(
-      U,
-      {
-        size: "xs",
-        "aria-label": "Custom font family",
-        value: e,
-        onChange: (s) => n(s.target.value),
-        className: "mt-2 font-mono"
-      }
-    )
+    ] })
   ] });
 }
 function v({
@@ -1286,28 +1235,28 @@ function v({
   value: t,
   onChange: u
 }) {
-  const [s, l] = m.useState(!1), [i, k] = m.useState(t), x = sr(t), A = t !== i, f = (b) => {
-    l(b), b && k(t);
+  const [c, l] = m.useState(!1), [i, k] = m.useState(t), y = sr(t), S = t !== i, f = (g) => {
+    l(g), g && k(t);
   };
   return /* @__PURE__ */ d("div", { className: "block", children: [
     /* @__PURE__ */ d("div", { className: "mb-1 flex items-center gap-1", children: [
-      /* @__PURE__ */ r(z, { className: "text-[11px] font-normal text-muted-foreground", children: e }),
-      n ? /* @__PURE__ */ r(ee, { children: /* @__PURE__ */ d(re, { children: [
-        /* @__PURE__ */ r(ae, { asChild: !0, children: /* @__PURE__ */ r(
+      /* @__PURE__ */ r(E, { className: "text-[11px] font-normal text-muted-foreground", children: e }),
+      n ? /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ d(ee, { children: [
+        /* @__PURE__ */ r(re, { 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(me, { className: "h-3 w-3" })
           }
         ) }),
         /* @__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: [
-      /* @__PURE__ */ d(ge, { open: s, onOpenChange: f, children: [
-        /* @__PURE__ */ r(fe, { asChild: !0, children: /* @__PURE__ */ r(
+      /* @__PURE__ */ d(ge, { open: c, onOpenChange: f, children: [
+        /* @__PURE__ */ r(be, { asChild: !0, children: /* @__PURE__ */ r(
           "button",
           {
             type: "button",
@@ -1318,7 +1267,7 @@ function v({
           }
         ) }),
         /* @__PURE__ */ d(
-          me,
+          fe,
           {
             align: "start",
             sideOffset: 6,
@@ -1336,70 +1285,70 @@ function v({
                         {
                           "aria-label": `${e} native color picker`,
                           type: "color",
-                          value: x,
-                          onChange: (b) => u(b.target.value),
+                          value: y,
+                          onChange: (g) => u(g.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(rr, { 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(ar, { 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(z, { className: "block text-[11px] font-normal text-muted-foreground", children: "Color value" }),
-                    /* @__PURE__ */ r(ee, { children: /* @__PURE__ */ d(re, { children: [
-                      /* @__PURE__ */ r(ae, { asChild: !0, children: /* @__PURE__ */ r(
+                    /* @__PURE__ */ r(E, { className: "block text-[11px] font-normal text-muted-foreground", children: "Color value" }),
+                    /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ d(ee, { children: [
+                      /* @__PURE__ */ r(re, { asChild: !0, children: /* @__PURE__ */ r(
                         "button",
                         {
                           type: "button",
                           "aria-label": `Reset ${e} color to previous value`,
-                          disabled: !A,
+                          disabled: !S,
                           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: () => u(i),
-                          children: /* @__PURE__ */ r(Ne, { className: "h-3 w-3" })
+                          children: /* @__PURE__ */ r(Ce, { className: "h-3 w-3" })
                         }
                       ) }),
                       /* @__PURE__ */ r(oe, { side: "top", children: "Reset to previous value" })
                     ] }) })
                   ] }),
                   /* @__PURE__ */ r(
-                    U,
+                    ae,
                     {
                       size: "xs",
                       "aria-label": `${e} popover color value`,
                       value: t,
-                      onChange: (b) => u(b.target.value),
+                      onChange: (g) => u(g.target.value),
                       className: "font-mono"
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ r("div", { className: "mt-2 grid grid-cols-6 gap-1", children: dr.map((b) => /* @__PURE__ */ r(
+              /* @__PURE__ */ r("div", { className: "mt-2 grid grid-cols-6 gap-1", children: cr.map((g) => /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
-                  "aria-label": `Set ${e} to ${b}`,
-                  className: Q(
+                  "aria-label": `Set ${e} to ${g}`,
+                  className: K(
                     "h-6 rounded-control border border-border/70 shadow-sm",
-                    t.toLowerCase() === b && "ring-2 ring-ring"
+                    t.toLowerCase() === g && "ring-2 ring-ring"
                   ),
-                  style: { backgroundColor: b },
-                  onClick: () => u(b)
+                  style: { backgroundColor: g },
+                  onClick: () => u(g)
                 },
-                b
+                g
               )) })
             ]
           }
         )
       ] }),
       /* @__PURE__ */ r(
-        U,
+        ae,
         {
           size: "xs",
           "aria-label": `${e} color value`,
           value: t,
-          onChange: (b) => u(b.target.value),
+          onChange: (g) => u(g.target.value),
           className: "h-full border-0 px-2 font-mono shadow-none focus-visible:border-0"
         }
       )
@@ -1408,105 +1357,105 @@ function v({
 }
 function sr(e) {
   const n = Ze(e);
-  return n ? `#${q(n.r)}${q(n.g)}${q(n.b)}` : "#000000";
+  return n ? `#${Y(n.r)}${Y(n.g)}${Y(n.b)}` : "#000000";
 }
-function q(e) {
+function Y(e) {
   return Math.round(e).toString(16).padStart(2, "0");
 }
-function S({
+function w({
   label: e,
   tooltip: n,
   value: t,
   min: u,
-  max: s,
+  max: c,
   onChange: l
 }) {
   const i = m.useId();
   return /* @__PURE__ */ d("div", { className: "block", children: [
     /* @__PURE__ */ d("div", { className: "mb-1 flex items-center gap-1", children: [
       /* @__PURE__ */ r(
-        z,
+        E,
         {
           htmlFor: i,
           className: "text-[11px] font-normal text-muted-foreground",
           children: e
         }
       ),
-      n ? /* @__PURE__ */ r(ee, { children: /* @__PURE__ */ d(re, { children: [
-        /* @__PURE__ */ r(ae, { 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",
             "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(me, { className: "h-3 w-3" })
           }
         ) }),
         /* @__PURE__ */ r(oe, { side: "top", className: "max-w-56", children: n })
       ] }) }) : null
     ] }),
     /* @__PURE__ */ r(
-      U,
+      ae,
       {
         id: i,
         size: "xs",
         type: "number",
         min: u,
-        max: s,
+        max: c,
         value: t,
         onChange: (k) => {
-          const x = Number(k.target.value);
-          Number.isNaN(x) || l(x);
+          const y = Number(k.target.value);
+          Number.isNaN(y) || l(y);
         }
       }
     )
   ] });
 }
-function Z({
+function q({
   label: e,
   value: n,
   options: t,
   onChange: u
 }) {
   return /* @__PURE__ */ d("div", { children: [
-    /* @__PURE__ */ r(z, { className: "mb-1 block text-[11px] font-normal text-muted-foreground", children: e }),
-    /* @__PURE__ */ d(ye, { value: n, onValueChange: u, children: [
-      /* @__PURE__ */ r(xe, { size: "xs", children: /* @__PURE__ */ r(ke, {}) }),
-      /* @__PURE__ */ r(ve, { children: t.map(([s, l]) => /* @__PURE__ */ r(Ce, { value: s, children: l }, s)) })
+    /* @__PURE__ */ r(E, { className: "mb-1 block text-[11px] font-normal text-muted-foreground", children: e }),
+    /* @__PURE__ */ d(he, { value: n, onValueChange: u, children: [
+      /* @__PURE__ */ r(xe, { size: "xs", children: /* @__PURE__ */ r(ye, {}) }),
+      /* @__PURE__ */ r(ke, { children: t.map(([c, l]) => /* @__PURE__ */ r(ve, { value: c, children: l }, c)) })
     ] })
   ] });
 }
-function K({
+function Z({
   label: e,
   checked: n,
   onCheckedChange: t
 }) {
   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(He, { size: "xs", checked: n, onCheckedChange: t })
+    /* @__PURE__ */ r(We, { size: "xs", checked: n, onCheckedChange: t })
   ] });
 }
-function lr(e) {
+function ur(e) {
   const n = `${Number((e / 16).toFixed(4))}rem`;
   return {
     "--semaphor-radius": n,
     "--semaphor-control-radius": n
   };
 }
-function cr(e) {
+function pr(e) {
   return JSON.parse(JSON.stringify(e));
 }
-function ur(e) {
+function gr(e) {
   return typeof e.text == "function" ? e.text() : new Promise((n, t) => {
     const u = new FileReader();
     u.onload = () => n(String(u.result ?? "")), u.onerror = () => t(u.error ?? new Error("Unable to read file")), u.readAsText(e);
   });
 }
 export {
-  Se as BRAND_STUDIO_PRESETS,
-  xr as BrandStudioEditor,
-  ar as applyBrandStudioPreset,
+  Ne as BRAND_STUDIO_PRESETS,
+  vr as BrandStudioEditor,
+  nr as applyBrandStudioPreset,
   L as buildAppearanceSpecFromDraft,
-  j as createBrandStudioDraft,
-  c as mirrorTableAppearance
+  J as createBrandStudioDraft,
+  s as mirrorTableAppearance
 };