import { jsxs as d, jsx as r, Fragment as ce } from "react/jsx-runtime";
import m from "react";
import { c as $, a as K, P as ge, b as be, B as C, d as fe, U as De, C as Ie, R as me, f as le, S as Je, X as je, J as se, e as Le, T as $e, K as _e, M, N as Ve, O as G, Q as Ue, V as Me, W as Ge, Y as We, L as E, Z as Q, _ as ee, $ as re, a0 as he, a1 as oe, a2 as ae, a3 as xe, a4 as ye, a5 as ke, a6 as ve, a7 as Ce, a8 as He } from "../chunks/switch-xcWLtWs0.js";
import { r as Ye, v as Xe, A as Ze, a as qe, p as Ke } from "../chunks/index-CJdxSyQq.js";
import "../chunks/index-CuHybtft.js";
import { P as W } from "../chunks/palette-DPuAc82h.js";
import { B as Qe } from "../chunks/braces-CXvY9MwQ.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 er = $("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 rr = $("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 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" }],
  ["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 ar = $("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"
    }
  ]
]), Ne = [
  {
    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 = Ye({
    organizationAppearance: e ?? void 0
  });
  return tr(O(n));
}
function L(e) {
  const n = O({
    version: Ze,
    mode: e.mode,
    schemes: e.schemes
  }), t = Xe(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 nr(e, n) {
  const t = Ne.find((c) => c.id === n);
  if (!t)
    return e;
  const u = O(e);
  return ue(u.schemes.light, t.light), ue(u.schemes.dark, t.dark), u;
}
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 s(e, n) {
  e.components[n] = O(e.components.table);
}
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, 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, 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, s(e, "aggregateTable"), s(e, "pivotTable");
      break;
    case "mutedForeground":
      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, s(e, "aggregateTable"), s(e, "pivotTable");
      break;
    case "accent":
      e.components.table.row.hoverBackground = t, e.components.table.row.selectedBackground = t, s(e, "aggregateTable"), s(e, "pivotTable");
      break;
  }
}
function H(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, s(e, "aggregateTable"), s(e, "pivotTable");
      break;
  }
}
function tr(e) {
  var n, t;
  for (const u of ["light", "dark"]) {
    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 = { ...S, ...l.typography };
    const f = {
      control: 5,
      card: 5,
      table: 5,
      badge: 999
    };
    l.radius = { ...f, ...l.radius };
    const g = {
      dashboardPadding: 16,
      gridGap: 12,
      cardPadding: 16,
      controlGap: 8,
      tableCellX: 12,
      tableCellY: 8
    };
    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 = { ...T, ...l.shadow };
    const F = {
      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: B(i, l),
      aggregateTable: B(i, l),
      pivotTable: B(i, l),
      pagination: {
        background: i.card,
        foreground: i.foreground,
        borderColor: i.border,
        borderRadius: l.radius.control
      }
    };
    c.components = { ...F, ...c.components };
    const _ = {
      palette: [],
      background: i.card,
      foreground: i.foreground,
      gridColor: i.border,
      axisColor: i.mutedForeground
    };
    c.components.chart = { ..._, ...c.components.chart }, c.components.table = {
      ...B(i, l),
      ...c.components.table
    }, c.components.aggregateTable = k ? {
      ...B(i, l),
      ...k
    } : O(c.components.table), c.components.pivotTable = y ? {
      ...B(i, l),
      ...y
    } : O(c.components.table);
  }
  return e;
}
function B(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 dr = [
  ["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"]
], ir = [0, 1, 2, 3, 4, 5], Y = qe, cr = [
  "#ffffff",
  "#f8fafc",
  "#f4f4f5",
  "#e4e4e7",
  "#18181b",
  "#09090b",
  "#2563eb",
  "#0f766e",
  "#047857",
  "#d97706",
  "#dc2626",
  "#7c3aed"
];
function vr({
  appearance: e,
  previewTitle: n,
  isLoading: t = !1,
  isSaving: u = !1,
  error: c = null,
  className: l,
  onDraftChange: i,
  onSave: k,
  onClearConfig: y,
  onCancel: S
}) {
  const [f, g] = m.useState(null), [T, F] = m.useState("light"), [_, z] = m.useState(!1), [we, R] = m.useState(
    "idle"
  ), [ne, Se] = m.useState(!1), [D, V] = m.useState(""), [I, h] = m.useState(null), te = m.useRef(null), J = m.useRef(i), A = m.useRef(!1);
  m.useEffect(() => {
    J.current = i;
  }, [i]), m.useEffect(() => {
    if (e === void 0) {
      A.current = !0, g(null);
      return;
    }
    const o = j(e);
    A.current = !0, g(o), F("light"), h(null);
  }, [e]), m.useEffect(() => {
    var o;
    if (f) {
      if (A.current) {
        A.current = !1;
        return;
      }
      try {
        const a = L(f);
        (o = J.current) == null || o.call(J, a), h(null);
      } catch (a) {
        h(
          a instanceof Error ? a.message : "Appearance is invalid"
        );
      }
    }
  }, [f]);
  const p = f == null ? void 0 : f.schemes[T], U = u || _, Te = m.useMemo(
    () => p ? ur(p.tokens.radius.control) : void 0,
    [p]
  ), Fe = (o) => {
    g((a) => {
      if (!a) return a;
      const x = pr(a);
      return o(x), x;
    });
  }, b = (o) => {
    Fe((a) => {
      o(a.schemes[T]);
    });
  }, Pe = async () => {
    if (!f || !k) return;
    let o;
    try {
      o = L(f);
    } catch (a) {
      h(
        a instanceof Error ? a.message : "Appearance is invalid"
      );
      return;
    }
    z(!0);
    try {
      await k(o);
    } finally {
      z(!1);
    }
  }, Be = () => {
    const o = j(null);
    R("idle"), g(o);
  }, Oe = async () => {
    if (y) {
      z(!0), h(null), R("idle");
      try {
        await y(), A.current = !0, g(j(null)), F("light");
      } catch (o) {
        h(
          o instanceof Error ? o.message : "Unable to clear organization appearance"
        );
      } finally {
        z(!1);
      }
    }
  }, de = m.useCallback(() => f ? JSON.stringify(L(f), null, 2) : "", [f]), Re = (o) => {
    if (Se(o), o)
      try {
        V(de()), h(null);
      } catch (a) {
        h(
          a instanceof Error ? a.message : "Appearance is invalid"
        );
      }
  }, Ae = async () => {
    if (f)
      try {
        const o = ne && D ? D : de();
        await navigator.clipboard.writeText(o), h(null), R("copied");
      } catch (o) {
        h(
          o instanceof Error ? o.message : "Unable to copy brand spec"
        );
      }
  }, ie = (o) => {
    const a = JSON.parse(o), x = j(a), P = L(x);
    R("idle"), F("light"), g(x), V(JSON.stringify(P, null, 2));
  }, Ee = () => {
    try {
      ie(D);
    } catch (o) {
      h(
        o instanceof Error ? o.message : "Brand spec must be valid JSON"
      );
    }
  }, ze = async (o) => {
    var x;
    const a = (x = o.target.files) == null ? void 0 : x[0];
    if (o.target.value = "", !!a)
      try {
        ie(await gr(a));
      } catch (P) {
        h(
          P instanceof Error ? P.message : "Uploaded file must be a valid brand spec"
        );
      }
  };
  return /* @__PURE__ */ d(
    "div",
    {
      className: K(
        "flex min-h-0 flex-1 flex-col bg-background text-foreground",
        l
      ),
      style: Te,
      children: [
        /* @__PURE__ */ d("header", { className: "flex h-11 shrink-0 items-start gap-3 border-b border-border/60 px-4 pt-2", children: [
          /* @__PURE__ */ r("div", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-control border border-border/70", children: /* @__PURE__ */ r(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 leading-tight", children: "Brand Studio" }),
            /* @__PURE__ */ d("p", { className: "truncate text-[11px] leading-tight text-muted-foreground", children: [
              "Previewing ",
              n || "current dashboard"
            ] })
          ] }),
          /* @__PURE__ */ d(
            ge,
            {
              open: ne,
              onOpenChange: Re,
              children: [
                /* @__PURE__ */ r(be, { asChild: !0, children: /* @__PURE__ */ d(C, { type: "button", size: "xs", variant: "ghost", disabled: !f, children: [
                  /* @__PURE__ */ r(Qe, { className: "h-3.5 w-3.5" }),
                  "Brand Spec"
                ] }) }),
                /* @__PURE__ */ d(
                  fe,
                  {
                    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: "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(
                            C,
                            {
                              type: "button",
                              size: "xs",
                              variant: "ghost",
                              onClick: Ae,
                              children: [
                                /* @__PURE__ */ r(rr, { className: "h-3.5 w-3.5" }),
                                we === "copied" ? "Copied" : "Copy"
                              ]
                            }
                          ),
                          /* @__PURE__ */ d(
                            C,
                            {
                              type: "button",
                              size: "xs",
                              variant: "ghost",
                              onClick: () => {
                                var o;
                                return (o = te.current) == null ? void 0 : o.click();
                              },
                              children: [
                                /* @__PURE__ */ r(De, { className: "h-3.5 w-3.5" }),
                                "Upload"
                              ]
                            }
                          ),
                          /* @__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(
                        Ie,
                        {
                          ariaLabel: "Brand spec",
                          value: D,
                          onValueChange: (o) => {
                            V(o), R("idle");
                          },
                          language: "json",
                          embedded: !0,
                          hideLineNumbers: !0,
                          dense: !0
                        }
                      ) })
                    ]
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ r(
            "input",
            {
              ref: te,
              "aria-label": "Upload brand spec",
              type: "file",
              accept: "application/json,.json",
              className: "sr-only",
              onChange: ze
            }
          ),
          /* @__PURE__ */ d(
            C,
            {
              type: "button",
              size: "xs",
              variant: "ghost",
              onClick: Be,
              disabled: !f,
              children: [
                /* @__PURE__ */ r(me, { className: "h-3.5 w-3.5" }),
                "Reset"
              ]
            }
          ),
          y && /* @__PURE__ */ d(
            C,
            {
              type: "button",
              size: "xs",
              variant: "ghost",
              onClick: Oe,
              disabled: U,
              children: [
                /* @__PURE__ */ r(er, { className: "h-3.5 w-3.5" }),
                "No config"
              ]
            }
          ),
          /* @__PURE__ */ d(
            C,
            {
              type: "button",
              size: "xs",
              onClick: Pe,
              disabled: !f || U || !!I || !k,
              children: [
                U ? /* @__PURE__ */ r(le, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ r(Je, { className: "h-3.5 w-3.5" }),
                "Save"
              ]
            }
          ),
          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: 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: 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(ce, { 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((o) => /* @__PURE__ */ r(
            "button",
            {
              type: "button",
              className: K(
                "h-full px-2.5 text-[12px] capitalize transition-colors",
                T === o ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
              ),
              onClick: () => F(o),
              children: o
            },
            o
          )) })
        ] }),
        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($e, { 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(M, { value: "style", children: "Style" }),
            /* @__PURE__ */ r(M, { value: "surfaces", children: "Surfaces" }),
            /* @__PURE__ */ r(M, { value: "data", children: "Data" })
          ] }) }),
          /* @__PURE__ */ d(Ve, { className: "min-h-0 flex-1", children: [
            /* @__PURE__ */ d(G, { value: "style", className: "m-0 p-4", children: [
              /* @__PURE__ */ r(
                N,
                {
                  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: 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 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: [
                          /* @__PURE__ */ r(
                            "span",
                            {
                              className: "h-full flex-1",
                              style: { backgroundColor: o.primary }
                            }
                          ),
                          /* @__PURE__ */ r(
                            "span",
                            {
                              className: "h-full flex-1",
                              style: { backgroundColor: o.accent }
                            }
                          )
                        ] }),
                        /* @__PURE__ */ d("span", { className: "min-w-0 flex-1", children: [
                          /* @__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 })
                        ] })
                      ]
                    },
                    o.id
                  )) })
                }
              ),
              /* @__PURE__ */ r(
                N,
                {
                  icon: W,
                  title: "Color",
                  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: a,
                      value: p.tokens.color[o],
                      onChange: (x) => b((P) => {
                        pe(P, o, x);
                      })
                    },
                    o
                  )) })
                }
              ),
              /* @__PURE__ */ d(
                N,
                {
                  icon: Ue,
                  title: "Typography",
                  description: "Fonts and density used by dashboard and workflow chrome.",
                  children: [
                    /* @__PURE__ */ r(
                      lr,
                      {
                        value: p.tokens.typography.fontFamily,
                        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(
                        w,
                        {
                          label: "Base size",
                          value: p.tokens.typography.baseFontSize,
                          min: 11,
                          max: 18,
                          onChange: (o) => b((a) => {
                            a.tokens.typography.baseFontSize = o;
                          })
                        }
                      ),
                      /* @__PURE__ */ r(
                        Z,
                        {
                          label: "Density",
                          value: p.tokens.typography.density,
                          options: [
                            ["compact", "Compact"],
                            ["comfortable", "Comfortable"],
                            ["spacious", "Spacious"]
                          ],
                          onChange: (o) => b((a) => {
                            a.tokens.typography.density = o, a.components.table.density = a.tokens.typography.density, s(a, "aggregateTable"), s(a, "pivotTable");
                          })
                        }
                      )
                    ] })
                  ]
                }
              )
            ] }),
            /* @__PURE__ */ d(G, { value: "surfaces", className: "m-0 p-4", children: [
              /* @__PURE__ */ d(
                N,
                {
                  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(
                        w,
                        {
                          label: "Canvas pad",
                          tooltip: "Outer padding around the dashboard canvas before cards begin.",
                          value: p.tokens.spacing.dashboardPadding,
                          min: 0,
                          max: 48,
                          onChange: (o) => b((a) => {
                            a.tokens.spacing.dashboardPadding = o, a.components.dashboard.padding = o;
                          })
                        }
                      ),
                      /* @__PURE__ */ r(
                        w,
                        {
                          label: "Grid gap",
                          tooltip: "Spacing between dashboard cards in the grid.",
                          value: p.tokens.spacing.gridGap,
                          min: 0,
                          max: 32,
                          onChange: (o) => b((a) => {
                            a.tokens.spacing.gridGap = o;
                          })
                        }
                      ),
                      /* @__PURE__ */ r(
                        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: (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(
                        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: (o) => b((a) => {
                            H(a, "control", o);
                          })
                        }
                      ),
                      /* @__PURE__ */ r(
                        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: (o) => b((a) => {
                            H(a, "card", o);
                          })
                        }
                      ),
                      /* @__PURE__ */ r(
                        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: (o) => b((a) => {
                            H(a, "table", o);
                          })
                        }
                      )
                    ] })
                  ]
                }
              ),
              /* @__PURE__ */ r(
                N,
                {
                  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: [
                    /* @__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: (o) => b((a) => {
                          a.components.interactive.toolbarBackground = o;
                        })
                      }
                    ),
                    /* @__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: (o) => b((a) => {
                          a.components.interactive.background = o, a.components.pagination.background = o;
                        })
                      }
                    ),
                    /* @__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: (o) => b((a) => {
                          a.components.interactive.borderColor = o, a.components.pagination.borderColor = o;
                        })
                      }
                    ),
                    /* @__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: (o) => b((a) => {
                          pe(a, "accent", o);
                        })
                      }
                    )
                  ] })
                }
              )
            ] }),
            /* @__PURE__ */ d(G, { value: "data", className: "m-0 p-4", children: [
              /* @__PURE__ */ d(
                N,
                {
                  icon: Me,
                  title: "Charts",
                  description: "Palette and semantic chart text/grid colors.",
                  children: [
                    /* @__PURE__ */ r("div", { className: "grid grid-cols-3 gap-2", children: ir.map((o) => /* @__PURE__ */ r(
                      v,
                      {
                        label: `Series ${o + 1}`,
                        value: p.components.chart.palette[o] || "#000000",
                        onChange: (a) => b((x) => {
                          x.components.chart.palette[o] = a;
                        })
                      },
                      o
                    )) }),
                    /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                      /* @__PURE__ */ r(
                        v,
                        {
                          label: "Grid",
                          value: p.components.chart.gridColor,
                          onChange: (o) => b((a) => {
                            a.components.chart.gridColor = o;
                          })
                        }
                      ),
                      /* @__PURE__ */ r(
                        v,
                        {
                          label: "Axis",
                          value: p.components.chart.axisColor,
                          onChange: (o) => b((a) => {
                            a.components.chart.axisColor = o;
                          })
                        }
                      )
                    ] })
                  ]
                }
              ),
              /* @__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: (o) => b((a) => {
                            a.components.table.density = o, s(a, "aggregateTable"), s(a, "pivotTable");
                          })
                        }
                      ),
                      /* @__PURE__ */ r(
                        Z,
                        {
                          label: "Cell wrap",
                          value: p.components.table.cell.wrap,
                          options: [
                            ["nowrap", "No wrap"],
                            ["wrap", "Wrap"]
                          ],
                          onChange: (o) => b((a) => {
                            a.components.table.cell.wrap = o, s(a, "aggregateTable"), s(a, "pivotTable");
                          })
                        }
                      )
                    ] }),
                    /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2", children: [
                      /* @__PURE__ */ r(
                        v,
                        {
                          label: "Header",
                          value: p.components.table.header.background,
                          onChange: (o) => b((a) => {
                            a.components.table.header.background = o, s(a, "aggregateTable"), s(a, "pivotTable");
                          })
                        }
                      ),
                      /* @__PURE__ */ r(
                        v,
                        {
                          label: "Divider",
                          value: p.components.table.row.dividerColor,
                          onChange: (o) => b((a) => {
                            a.components.table.row.dividerColor = o, a.components.table.header.dividerColor = o, s(a, "aggregateTable"), s(a, "pivotTable");
                          })
                        }
                      )
                    ] }),
                    /* @__PURE__ */ r(
                      q,
                      {
                        label: "Zebra rows",
                        checked: p.components.table.row.zebra,
                        onCheckedChange: (o) => b((a) => {
                          a.components.table.row.zebra = o, s(a, "aggregateTable"), s(a, "pivotTable");
                        })
                      }
                    ),
                    /* @__PURE__ */ r(
                      q,
                      {
                        label: "Sticky headers",
                        checked: p.components.table.header.sticky,
                        onCheckedChange: (o) => b((a) => {
                          a.components.table.header.sticky = o, s(a, "aggregateTable"), s(a, "pivotTable");
                        })
                      }
                    ),
                    /* @__PURE__ */ r(
                      q,
                      {
                        label: "Uppercase headers",
                        checked: p.components.table.header.uppercase,
                        onCheckedChange: (o) => b((a) => {
                          a.components.table.header.uppercase = o, s(a, "aggregateTable"), s(a, "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 lr({
  value: e,
  onChange: n
}) {
  var u;
  const t = (u = Y.find((c) => c.value === e)) == null ? void 0 : u.id;
  return /* @__PURE__ */ d("div", { children: [
    /* @__PURE__ */ r(E, { className: "mb-1 block text-[11px] font-normal text-muted-foreground", children: "Font family" }),
    /* @__PURE__ */ d("div", { className: "grid grid-cols-[minmax(0,1fr)_150px] gap-2", children: [
      /* @__PURE__ */ d(
        xe,
        {
          value: t,
          onValueChange: (c) => {
            const l = Y.find(
              (i) => i.id === c
            );
            l && n(l.value);
          },
          children: [
            /* @__PURE__ */ r(ye, { size: "xs", "aria-label": "Font family preset", children: /* @__PURE__ */ r(ke, { placeholder: "Select font" }) }),
            /* @__PURE__ */ r(ve, { children: Y.map((c) => /* @__PURE__ */ r(Ce, { value: c.id, children: c.label }, c.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"
        }
      )
    ] })
  ] });
}
function v({
  label: e,
  tooltip: n,
  value: t,
  onChange: u
}) {
  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(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" })
          }
        ) }),
        /* @__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: c, onOpenChange: f, children: [
        /* @__PURE__ */ r(be, { 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(
          fe,
          {
            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: 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(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(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: !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(me, { className: "h-3 w-3" })
                        }
                      ) }),
                      /* @__PURE__ */ r(oe, { side: "top", children: "Reset to previous value" })
                    ] }) })
                  ] }),
                  /* @__PURE__ */ r(
                    ae,
                    {
                      size: "xs",
                      "aria-label": `${e} popover color value`,
                      value: t,
                      onChange: (g) => u(g.target.value),
                      className: "font-mono"
                    }
                  )
                ] })
              ] }),
              /* @__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 ${g}`,
                  className: K(
                    "h-6 rounded-control border border-border/70 shadow-sm",
                    t.toLowerCase() === g && "ring-2 ring-ring"
                  ),
                  style: { backgroundColor: g },
                  onClick: () => u(g)
                },
                g
              )) })
            ]
          }
        )
      ] }),
      /* @__PURE__ */ r(
        ae,
        {
          size: "xs",
          "aria-label": `${e} color value`,
          value: t,
          onChange: (g) => u(g.target.value),
          className: "h-full border-0 px-2 font-mono shadow-none focus-visible:border-0"
        }
      )
    ] })
  ] });
}
function sr(e) {
  const n = Ke(e);
  return n ? `#${X(n.r)}${X(n.g)}${X(n.b)}` : "#000000";
}
function X(e) {
  return Math.round(e).toString(16).padStart(2, "0");
}
function w({
  label: e,
  tooltip: n,
  value: t,
  min: u,
  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(
        E,
        {
          htmlFor: i,
          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" })
          }
        ) }),
        /* @__PURE__ */ r(oe, { side: "top", className: "max-w-56", children: n })
      ] }) }) : null
    ] }),
    /* @__PURE__ */ r(
      ae,
      {
        id: i,
        size: "xs",
        type: "number",
        min: u,
        max: c,
        value: t,
        onChange: (k) => {
          const y = Number(k.target.value);
          Number.isNaN(y) || l(y);
        }
      }
    )
  ] });
}
function Z({
  label: e,
  value: n,
  options: t,
  onChange: u
}) {
  return /* @__PURE__ */ d("div", { children: [
    /* @__PURE__ */ r(E, { className: "mb-1 block text-[11px] font-normal text-muted-foreground", children: e }),
    /* @__PURE__ */ d(xe, { value: n, onValueChange: u, children: [
      /* @__PURE__ */ r(ye, { size: "xs", children: /* @__PURE__ */ r(ke, {}) }),
      /* @__PURE__ */ r(ve, { children: t.map(([c, l]) => /* @__PURE__ */ r(Ce, { value: c, children: l }, c)) })
    ] })
  ] });
}
function q({
  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 ur(e) {
  const n = `${Number((e / 16).toFixed(4))}rem`;
  return {
    "--semaphor-radius": n,
    "--semaphor-control-radius": n
  };
}
function pr(e) {
  return JSON.parse(JSON.stringify(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 {
  Ne as BRAND_STUDIO_PRESETS,
  vr as BrandStudioEditor,
  nr as applyBrandStudioPreset,
  L as buildAppearanceSpecFromDraft,
  j as createBrandStudioDraft,
  s as mirrorTableAppearance
};
