react-semaphor 0.1.301 → 0.1.302

package/dist/brand-studio/index.js

@@ -0,0 +1,1512 @@
+import { jsxs as d, jsx as r, Fragment as se } 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";
+/**
+ * @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", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "m4.9 4.9 14.2 14.2", key: "1m5liu" }]
+]);
+/**
+ * @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 ue = $("Clipboard", [
+  ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
+  [
+    "path",
+    {
+      d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2",
+      key: "116196"
+    }
+  ]
+]);
+/**
+ * @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 er = $("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" }],
+  ["rect", { width: "7", height: "7", x: "3", y: "14", rx: "1", key: "1bb6yr" }]
+]);
+/**
+ * @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 = $("Pipette", [
+  ["path", { d: "m2 22 1-1h3l9-9", key: "1sre89" }],
+  ["path", { d: "M3 21v-3l9-9", key: "hpe2y6" }],
+  [
+    "path",
+    {
+      d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z",
+      key: "196du1"
+    }
+  ]
+]), Se = [
+  {
+    id: "semaphor",
+    name: "Semaphor",
+    description: "Dense neutral system defaults for embedded analytics.",
+    primary: "#18181b",
+    accent: "#f4f4f5",
+    light: {
+      background: "#ffffff",
+      foreground: "#18181b",
+      muted: "#fafafa",
+      mutedForeground: "#71717a",
+      border: "#e4e4e7",
+      primary: "#18181b",
+      primaryForeground: "#ffffff",
+      accent: "#f4f4f5",
+      accentForeground: "#18181b",
+      card: "#ffffff",
+      cardForeground: "#18181b",
+      chartPalette: [
+        "#3b82f6",
+        "#10b981",
+        "#f59e0b",
+        "#ef4444",
+        "#8b5cf6",
+        "#06b6d4"
+      ]
+    },
+    dark: {
+      background: "#09090b",
+      foreground: "#fafafa",
+      muted: "#18181b",
+      mutedForeground: "#a1a1aa",
+      border: "#27272a",
+      primary: "#fafafa",
+      primaryForeground: "#09090b",
+      accent: "#27272a",
+      accentForeground: "#fafafa",
+      card: "#09090b",
+      cardForeground: "#fafafa",
+      chartPalette: [
+        "#60a5fa",
+        "#34d399",
+        "#fbbf24",
+        "#f87171",
+        "#a78bfa",
+        "#22d3ee"
+      ]
+    }
+  },
+  {
+    id: "atlas-blue",
+    name: "Atlas Blue",
+    description: "Crisp enterprise blue with restrained neutral surfaces.",
+    primary: "#2563eb",
+    accent: "#dbeafe",
+    light: {
+      background: "#f8fafc",
+      foreground: "#0f172a",
+      muted: "#f1f5f9",
+      mutedForeground: "#64748b",
+      border: "#cbd5e1",
+      primary: "#2563eb",
+      primaryForeground: "#ffffff",
+      accent: "#dbeafe",
+      accentForeground: "#1e3a8a",
+      card: "#ffffff",
+      cardForeground: "#0f172a",
+      chartPalette: [
+        "#2563eb",
+        "#0f766e",
+        "#ca8a04",
+        "#dc2626",
+        "#7c3aed",
+        "#0891b2"
+      ]
+    },
+    dark: {
+      background: "#020617",
+      foreground: "#e2e8f0",
+      muted: "#0f172a",
+      mutedForeground: "#94a3b8",
+      border: "#1e293b",
+      primary: "#60a5fa",
+      primaryForeground: "#020617",
+      accent: "#1e3a8a",
+      accentForeground: "#dbeafe",
+      card: "#0f172a",
+      cardForeground: "#e2e8f0",
+      chartPalette: [
+        "#60a5fa",
+        "#2dd4bf",
+        "#facc15",
+        "#f87171",
+        "#a78bfa",
+        "#22d3ee"
+      ]
+    }
+  },
+  {
+    id: "field-green",
+    name: "Field Green",
+    description: "Operational green accents with quiet, readable canvases.",
+    primary: "#047857",
+    accent: "#d1fae5",
+    light: {
+      background: "#fbfdfb",
+      foreground: "#10231d",
+      muted: "#f1f5f3",
+      mutedForeground: "#64746d",
+      border: "#d7ded9",
+      primary: "#047857",
+      primaryForeground: "#ffffff",
+      accent: "#d1fae5",
+      accentForeground: "#064e3b",
+      card: "#ffffff",
+      cardForeground: "#10231d",
+      chartPalette: [
+        "#047857",
+        "#2563eb",
+        "#d97706",
+        "#dc2626",
+        "#7c3aed",
+        "#0891b2"
+      ]
+    },
+    dark: {
+      background: "#071511",
+      foreground: "#e7f4ef",
+      muted: "#10231d",
+      mutedForeground: "#92aaa1",
+      border: "#244139",
+      primary: "#34d399",
+      primaryForeground: "#071511",
+      accent: "#064e3b",
+      accentForeground: "#d1fae5",
+      card: "#0b1d17",
+      cardForeground: "#e7f4ef",
+      chartPalette: [
+        "#34d399",
+        "#60a5fa",
+        "#fbbf24",
+        "#f87171",
+        "#a78bfa",
+        "#22d3ee"
+      ]
+    }
+  }
+];
+function j(e) {
+  const n = Xe({
+    organizationAppearance: e ?? void 0
+  });
+  return or(O(n));
+}
+function L(e) {
+  const n = O({
+    version: qe,
+    mode: e.mode,
+    schemes: e.schemes
+  }), t = Ye(n);
+  if (!t.success) {
+    const u = t.issues[0];
+    throw new Error(
+      `Invalid Brand Studio appearance at ${u.path}: ${u.message}`
+    );
+  }
+  return t.value;
+}
+function ar(e, n) {
+  const t = Se.find((s) => s.id === n);
+  if (!t)
+    return e;
+  const u = O(e);
+  return pe(u.schemes.light, t.light), pe(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 c(e, n) {
+  e.components[n] = O(e.components.table);
+}
+function be(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");
+      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");
+      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");
+      break;
+    case "mutedForeground":
+      e.components.table.header.foreground = t, e.components.chart.axisColor = t, c(e, "aggregateTable"), c(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");
+      break;
+    case "accent":
+      e.components.table.row.hoverBackground = t, e.components.table.row.selectedBackground = t, c(e, "aggregateTable"), c(e, "pivotTable");
+      break;
+  }
+}
+function X(e, n, t) {
+  switch (e.tokens.radius[n] = t, n) {
+    case "control":
+      e.components.interactive.borderRadius = t, e.components.pagination.borderRadius = t;
+      break;
+    case "card":
+      e.components.card.borderRadius = t;
+      break;
+    case "table":
+      e.components.table.container.borderRadius = t, c(e, "aggregateTable"), c(e, "pivotTable");
+      break;
+  }
+}
+function or(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 = {
+      fontFamily: "",
+      headingFontFamily: "",
+      monoFontFamily: "",
+      baseFontSize: 14,
+      density: "comfortable"
+    };
+    l.typography = { ...A, ...l.typography };
+    const f = {
+      control: 5,
+      card: 5,
+      table: 5,
+      badge: 999
+    };
+    l.radius = { ...f, ...l.radius };
+    const b = {
+      dashboardPadding: 16,
+      gridGap: 12,
+      cardPadding: 16,
+      controlGap: 8,
+      tableCellX: 12,
+      tableCellY: 8
+    };
+    l.spacing = { ...b, ...l.spacing };
+    const w = {
+      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 = {
+      dashboard: {
+        background: i.background,
+        foreground: i.foreground,
+        borderColor: i.border,
+        padding: l.spacing.dashboardPadding
+      },
+      card: {
+        background: i.card,
+        foreground: i.cardForeground,
+        borderColor: i.border,
+        borderRadius: l.radius.card,
+        padding: l.spacing.cardPadding,
+        shadow: l.shadow.card
+      },
+      interactive: {
+        toolbarBackground: i.background,
+        background: i.card,
+        foreground: i.foreground,
+        borderColor: i.border,
+        borderRadius: l.radius.control
+      },
+      chart: {
+        palette: [],
+        background: i.card,
+        foreground: i.foreground,
+        gridColor: i.border,
+        axisColor: i.mutedForeground
+      },
+      table: P(i, l),
+      aggregateTable: P(i, l),
+      pivotTable: P(i, l),
+      pagination: {
+        background: i.card,
+        foreground: i.foreground,
+        borderColor: i.border,
+        borderRadius: l.radius.control
+      }
+    };
+    s.components = { ...T, ...s.components };
+    const V = {
+      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),
+      ...k
+    } : O(s.components.table), s.components.pivotTable = x ? {
+      ...P(i, l),
+      ...x
+    } : O(s.components.table);
+  }
+  return e;
+}
+function P(e, n) {
+  return {
+    density: n.typography.density,
+    container: {
+      background: e.card,
+      borderColor: e.border,
+      borderRadius: n.radius.table,
+      shadow: n.shadow.card
+    },
+    header: {
+      background: e.muted,
+      foreground: e.mutedForeground,
+      dividerColor: e.border,
+      fontWeight: 600,
+      uppercase: !0,
+      sticky: !0
+    },
+    row: {
+      height: 32,
+      dividerColor: e.border,
+      zebra: !1,
+      zebraBackground: e.muted,
+      hoverBackground: e.accent,
+      selectedBackground: e.accent
+    },
+    cell: {
+      paddingX: n.spacing.tableCellX,
+      paddingY: n.spacing.tableCellY,
+      verticalAlign: "middle",
+      wrap: "nowrap"
+    },
+    subtotal: {
+      background: e.muted,
+      foreground: e.foreground,
+      fontWeight: 600
+    },
+    grandTotal: {
+      background: e.muted,
+      foreground: e.foreground,
+      fontWeight: 700,
+      borderColor: e.border
+    },
+    pagination: {
+      background: e.card,
+      foreground: e.foreground,
+      borderColor: e.border
+    }
+  };
+}
+function O(e) {
+  return JSON.parse(JSON.stringify(e));
+}
+const nr = [
+  ["background", "Canvas"],
+  ["foreground", "Text"],
+  ["card", "Card"],
+  ["cardForeground", "Card text"],
+  ["primary", "Primary"],
+  ["primaryForeground", "Primary text"],
+  ["accent", "Accent"],
+  ["accentForeground", "Accent text"],
+  ["muted", "Muted"],
+  ["mutedForeground", "Muted text"],
+  ["border", "Border"],
+  ["positive", "Positive"],
+  ["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 = [
+  "#ffffff",
+  "#f8fafc",
+  "#f4f4f5",
+  "#e4e4e7",
+  "#18181b",
+  "#09090b",
+  "#2563eb",
+  "#0f766e",
+  "#047857",
+  "#d97706",
+  "#dc2626",
+  "#7c3aed"
+];
+function xr({
+  appearance: e,
+  previewTitle: n,
+  isLoading: t = !1,
+  isSaving: u = !1,
+  error: s = null,
+  className: l,
+  onDraftChange: i,
+  onSave: k,
+  onClearConfig: x,
+  onCancel: A
+}) {
+  const [f, b] = m.useState(null), [w, T] = m.useState("light"), [V, I] = m.useState(!1), [we, B] = 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);
+  m.useEffect(() => {
+    D.current = i;
+  }, [i]), m.useEffect(() => {
+    if (e === void 0) {
+      R.current = !0, b(null);
+      return;
+    }
+    const a = j(e);
+    R.current = !0, b(a), T("light"), h(null);
+  }, [e]), m.useEffect(() => {
+    var a;
+    if (f) {
+      if (R.current) {
+        R.current = !1;
+        return;
+      }
+      try {
+        const o = L(f);
+        (a = D.current) == null || a.call(D, o), h(null);
+      } catch (o) {
+        h(
+          o instanceof Error ? o.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,
+    [p]
+  ), Pe = (a) => {
+    b((o) => {
+      if (!o) return o;
+      const y = cr(o);
+      return a(y), y;
+    });
+  }, g = (a) => {
+    Pe((o) => {
+      a(o.schemes[w]);
+    });
+  }, Oe = async () => {
+    if (!f || !k) return;
+    let a;
+    try {
+      a = L(f);
+    } catch (o) {
+      h(
+        o instanceof Error ? o.message : "Appearance is invalid"
+      );
+      return;
+    }
+    I(!0);
+    try {
+      await k(a);
+    } finally {
+      I(!1);
+    }
+  }, Ae = () => {
+    const a = j(null);
+    B("idle"), b(a);
+  }, Be = async () => {
+    if (x) {
+      I(!0), h(null), B("idle");
+      try {
+        await x(), R.current = !0, b(j(null)), T("light");
+      } catch (a) {
+        h(
+          a instanceof Error ? a.message : "Unable to clear organization appearance"
+        );
+      } finally {
+        I(!1);
+      }
+    }
+  }, de = m.useCallback(() => f ? JSON.stringify(L(f), null, 2) : "", [f]), Re = (a) => {
+    if (Te(a), a)
+      try {
+        M(de()), h(null);
+      } catch (o) {
+        h(
+          o instanceof Error ? o.message : "Appearance is invalid"
+        );
+      }
+  }, ze = async () => {
+    if (f)
+      try {
+        const a = ne && E ? E : de();
+        await navigator.clipboard.writeText(a), h(null), B("copied");
+      } catch (a) {
+        h(
+          a instanceof Error ? a.message : "Unable to copy appearance JSON"
+        );
+      }
+  }, 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 = () => {
+    try {
+      ie(E);
+    } catch (a) {
+      h(
+        a instanceof Error ? a.message : "JSON must be a valid AppearanceSpec"
+      );
+    }
+  }, Ee = async (a) => {
+    var y;
+    const o = (y = a.target.files) == null ? void 0 : y[0];
+    if (a.target.value = "", !!o)
+      try {
+        ie(await ur(o));
+      } catch (F) {
+        h(
+          F instanceof Error ? F.message : "Uploaded file must be valid AppearanceSpec JSON"
+        );
+      }
+  };
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: Q(
+        "flex min-h-0 flex-1 flex-col bg-background text-foreground",
+        l
+      ),
+      style: Fe,
+      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("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: [
+              "Previewing ",
+              n || "current dashboard"
+            ] })
+          ] }),
+          /* @__PURE__ */ d(
+            ge,
+            {
+              open: ne,
+              onOpenChange: Re,
+              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__ */ d(
+                  me,
+                  {
+                    align: "end",
+                    sideOffset: 6,
+                    className: "z-[60] w-[min(520px,calc(100vw-24px))] rounded-control p-2",
+                    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__ */ d("div", { className: "flex shrink-0 items-center gap-1", children: [
+                          /* @__PURE__ */ d(
+                            C,
+                            {
+                              type: "button",
+                              size: "xs",
+                              variant: "ghost",
+                              onClick: ze,
+                              children: [
+                                /* @__PURE__ */ r(ue, { className: "h-3.5 w-3.5" }),
+                                we === "copied" ? "Copied" : "Copy"
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ d(
+                            C,
+                            {
+                              type: "button",
+                              size: "xs",
+                              variant: "ghost",
+                              onClick: () => {
+                                var a;
+                                return (a = te.current) == null ? void 0 : a.click();
+                              },
+                              children: [
+                                /* @__PURE__ */ r(Je, { className: "h-3.5 w-3.5" }),
+                                "Upload"
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ r(C, { type: "button", size: "xs", onClick: Ie, children: "Apply" })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ r("div", { className: "h-[320px] overflow-hidden rounded-control border border-input", children: /* @__PURE__ */ r(
+                        De,
+                        {
+                          ariaLabel: "AppearanceSpec JSON",
+                          value: E,
+                          onValueChange: (a) => {
+                            M(a), B("idle");
+                          },
+                          language: "json",
+                          embedded: !0,
+                          hideLineNumbers: !0,
+                          dense: !0
+                        }
+                      ) })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: te,
+              "aria-label": "Upload AppearanceSpec JSON",
+              type: "file",
+              accept: "application/json,.json",
+              className: "sr-only",
+              onChange: Ee
+            }
+          ),
+          /* @__PURE__ */ d(
+            C,
+            {
+              type: "button",
+              size: "xs",
+              variant: "ghost",
+              onClick: Ae,
+              disabled: !f,
+              children: [
+                /* @__PURE__ */ r(Ne, { className: "h-3.5 w-3.5" }),
+                "Reset"
+              ]
+            }
+          ),
+          x && /* @__PURE__ */ d(
+            C,
+            {
+              type: "button",
+              size: "xs",
+              variant: "ghost",
+              onClick: Be,
+              disabled: _,
+              children: [
+                /* @__PURE__ */ r(Qe, { className: "h-3.5 w-3.5" }),
+                "No config"
+              ]
+            }
+          ),
+          /* @__PURE__ */ d(
+            C,
+            {
+              type: "button",
+              size: "xs",
+              onClick: Oe,
+              disabled: !f || _ || !!J || !k,
+              children: [
+                _ ? /* @__PURE__ */ r(le, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ r(Ke, { className: "h-3.5 w-3.5" }),
+                "Save"
+              ]
+            }
+          ),
+          /* @__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,
+              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" }),
+            "Preview keeps the last valid draft"
+          ] }) : /* @__PURE__ */ d(se, { children: [
+            /* @__PURE__ */ r(Le, { 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(
+            "button",
+            {
+              type: "button",
+              className: Q(
+                "h-full px-2.5 text-[12px] capitalize transition-colors",
+                w === a ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
+              ),
+              onClick: () => T(a),
+              children: a
+            },
+            a
+          )) })
+        ] }),
+        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: [
+          /* @__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__ */ r(
+                N,
+                {
+                  icon: H,
+                  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(
+                    "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);
+                      },
+                      children: [
+                        /* @__PURE__ */ d("div", { className: "flex h-7 w-10 overflow-hidden rounded-control border border-border/70", children: [
+                          /* @__PURE__ */ r(
+                            "span",
+                            {
+                              className: "h-full flex-1",
+                              style: { backgroundColor: a.primary }
+                            }
+                          ),
+                          /* @__PURE__ */ r(
+                            "span",
+                            {
+                              className: "h-full flex-1",
+                              style: { backgroundColor: a.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 })
+                        ] })
+                      ]
+                    },
+                    a.id
+                  )) })
+                }
+              ),
+              /* @__PURE__ */ r(
+                N,
+                {
+                  icon: H,
+                  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(
+                    v,
+                    {
+                      label: o,
+                      value: p.tokens.color[a],
+                      onChange: (y) => g((F) => {
+                        be(F, a, y);
+                      })
+                    },
+                    a
+                  )) })
+                }
+              ),
+              /* @__PURE__ */ d(
+                N,
+                {
+                  icon: Me,
+                  title: "Typography",
+                  description: "Fonts and density used by dashboard and workflow chrome.",
+                  children: [
+                    /* @__PURE__ */ r(
+                      ir,
+                      {
+                        value: p.tokens.typography.fontFamily,
+                        onChange: (a) => g((o) => {
+                          o.tokens.typography.fontFamily = a, o.tokens.typography.headingFontFamily = a;
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
+                      /* @__PURE__ */ r(
+                        S,
+                        {
+                          label: "Base size",
+                          value: p.tokens.typography.baseFontSize,
+                          min: 11,
+                          max: 18,
+                          onChange: (a) => g((o) => {
+                            o.tokens.typography.baseFontSize = a;
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        Z,
+                        {
+                          label: "Density",
+                          value: p.tokens.typography.density,
+                          options: [
+                            ["compact", "Compact"],
+                            ["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");
+                          })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ d(W, { value: "surfaces", className: "m-0 p-4", children: [
+              /* @__PURE__ */ d(
+                N,
+                {
+                  icon: er,
+                  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,
+                        {
+                          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;
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        S,
+                        {
+                          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;
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        S,
+                        {
+                          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;
+                          })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ d("div", { className: "grid grid-cols-3 gap-2", children: [
+                      /* @__PURE__ */ r(
+                        S,
+                        {
+                          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);
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        S,
+                        {
+                          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);
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        S,
+                        {
+                          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);
+                          })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r(
+                N,
+                {
+                  icon: ce,
+                  title: "Filters and Controls",
+                  description: "Dashboard filter/control toolbar, chip states, menus, and settings panels.",
+                  children: /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
+                    /* @__PURE__ */ r(
+                      v,
+                      {
+                        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;
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      v,
+                      {
+                        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;
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      v,
+                      {
+                        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;
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      v,
+                      {
+                        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);
+                        })
+                      }
+                    )
+                  ] })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ d(W, { value: "data", className: "m-0 p-4", children: [
+              /* @__PURE__ */ d(
+                N,
+                {
+                  icon: _e,
+                  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(
+                      v,
+                      {
+                        label: `Series ${a + 1}`,
+                        value: p.components.chart.palette[a] || "#000000",
+                        onChange: (o) => g((y) => {
+                          y.components.chart.palette[a] = o;
+                        })
+                      },
+                      a
+                    )) }),
+                    /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
+                      /* @__PURE__ */ r(
+                        v,
+                        {
+                          label: "Grid",
+                          value: p.components.chart.gridColor,
+                          onChange: (a) => g((o) => {
+                            o.components.chart.gridColor = a;
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        v,
+                        {
+                          label: "Axis",
+                          value: p.components.chart.axisColor,
+                          onChange: (a) => g((o) => {
+                            o.components.chart.axisColor = a;
+                          })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ d(
+                N,
+                {
+                  icon: Ge,
+                  title: "Tables",
+                  description: "Flat, aggregate, and pivot tables share this V1 table appearance.",
+                  children: [
+                    /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
+                      /* @__PURE__ */ r(
+                        Z,
+                        {
+                          label: "Density",
+                          value: p.components.table.density,
+                          options: [
+                            ["compact", "Compact"],
+                            ["comfortable", "Comfortable"],
+                            ["spacious", "Spacious"]
+                          ],
+                          onChange: (a) => g((o) => {
+                            o.components.table.density = a, c(o, "aggregateTable"), c(o, "pivotTable");
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        Z,
+                        {
+                          label: "Cell wrap",
+                          value: p.components.table.cell.wrap,
+                          options: [
+                            ["nowrap", "No wrap"],
+                            ["wrap", "Wrap"]
+                          ],
+                          onChange: (a) => g((o) => {
+                            o.components.table.cell.wrap = a, c(o, "aggregateTable"), c(o, "pivotTable");
+                          })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
+                      /* @__PURE__ */ r(
+                        v,
+                        {
+                          label: "Header",
+                          value: p.components.table.header.background,
+                          onChange: (a) => g((o) => {
+                            o.components.table.header.background = a, c(o, "aggregateTable"), c(o, "pivotTable");
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        v,
+                        {
+                          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");
+                          })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ r(
+                      K,
+                      {
+                        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");
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      K,
+                      {
+                        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");
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      K,
+                      {
+                        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");
+                        })
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+function N({
+  icon: e,
+  title: n,
+  description: t,
+  children: u
+}) {
+  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("div", { className: "space-y-2", children: u }),
+    /* @__PURE__ */ r(We, { className: "mt-5 bg-border/60" })
+  ] });
+}
+function ir({
+  value: e,
+  onChange: n
+}) {
+  var u;
+  const t = ((u = Y.find((s) => s.value === e)) == null ? void 0 : u.id) ?? "custom";
+  return /* @__PURE__ */ d("div", { children: [
+    /* @__PURE__ */ r(z, { 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,
+        {
+          value: t,
+          onValueChange: (s) => {
+            const l = Y.find(
+              (i) => i.id === s
+            );
+            !l || l.id === "custom" || 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(
+        "div",
+        {
+          className: "flex h-7 items-center rounded-control border border-border/60 bg-muted/30 px-2 text-[12px]",
+          style: { fontFamily: e },
+          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({
+  label: e,
+  tooltip: n,
+  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);
+  };
+  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(
+          "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" })
+          }
+        ) }),
+        /* @__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(
+          "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 },
+            children: /* @__PURE__ */ r("span", { className: "sr-only", children: e })
+          }
+        ) }),
+        /* @__PURE__ */ d(
+          me,
+          {
+            align: "start",
+            sideOffset: 6,
+            className: "z-[60] w-64 rounded-control p-2",
+            children: [
+              /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ d(
+                  "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 },
+                    children: [
+                      /* @__PURE__ */ r(
+                        "input",
+                        {
+                          "aria-label": `${e} native color picker`,
+                          type: "color",
+                          value: x,
+                          onChange: (b) => u(b.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__ */ 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(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": `Reset ${e} color to previous value`,
+                          disabled: !A,
+                          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" })
+                        }
+                      ) }),
+                      /* @__PURE__ */ r(oe, { side: "top", children: "Reset to previous value" })
+                    ] }) })
+                  ] }),
+                  /* @__PURE__ */ r(
+                    U,
+                    {
+                      size: "xs",
+                      "aria-label": `${e} popover color value`,
+                      value: t,
+                      onChange: (b) => u(b.target.value),
+                      className: "font-mono"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ r("div", { className: "mt-2 grid grid-cols-6 gap-1", children: dr.map((b) => /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Set ${e} to ${b}`,
+                  className: Q(
+                    "h-6 rounded-control border border-border/70 shadow-sm",
+                    t.toLowerCase() === b && "ring-2 ring-ring"
+                  ),
+                  style: { backgroundColor: b },
+                  onClick: () => u(b)
+                },
+                b
+              )) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r(
+        U,
+        {
+          size: "xs",
+          "aria-label": `${e} color value`,
+          value: t,
+          onChange: (b) => u(b.target.value),
+          className: "h-full border-0 px-2 font-mono shadow-none focus-visible:border-0"
+        }
+      )
+    ] })
+  ] });
+}
+function sr(e) {
+  const n = Ze(e);
+  return n ? `#${q(n.r)}${q(n.g)}${q(n.b)}` : "#000000";
+}
+function q(e) {
+  return Math.round(e).toString(16).padStart(2, "0");
+}
+function S({
+  label: e,
+  tooltip: n,
+  value: t,
+  min: u,
+  max: s,
+  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,
+        {
+          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(
+          "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" })
+          }
+        ) }),
+        /* @__PURE__ */ r(oe, { side: "top", className: "max-w-56", children: n })
+      ] }) }) : null
+    ] }),
+    /* @__PURE__ */ r(
+      U,
+      {
+        id: i,
+        size: "xs",
+        type: "number",
+        min: u,
+        max: s,
+        value: t,
+        onChange: (k) => {
+          const x = Number(k.target.value);
+          Number.isNaN(x) || l(x);
+        }
+      }
+    )
+  ] });
+}
+function Z({
+  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)) })
+    ] })
+  ] });
+}
+function K({
+  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 })
+  ] });
+}
+function lr(e) {
+  const n = `${Number((e / 16).toFixed(4))}rem`;
+  return {
+    "--semaphor-radius": n,
+    "--semaphor-control-radius": n
+  };
+}
+function cr(e) {
+  return JSON.parse(JSON.stringify(e));
+}
+function ur(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,
+  L as buildAppearanceSpecFromDraft,
+  j as createBrandStudioDraft,
+  c as mirrorTableAppearance
+};