@viax.io/uxm 4.36.0

package/dist/previews/composite/brand-settings-preview.js

@@ -0,0 +1,852 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { hexToHsl, retintHue } from "../../lib/contrast.js";
+import { themeTokens } from "../../tokens/index.js";
+import {
+  Badge,
+  ButtonGroup,
+  ButtonPrimary,
+  ButtonSecondary,
+  ButtonTertiary,
+  Card,
+  Cluster,
+  ColorInputPopover,
+  Dialog,
+  Disclosure,
+  FormField,
+  Icon,
+  IconButton,
+  InlineAction,
+  Modal,
+  ResponsiveGrid,
+  SectionHeader,
+  Select,
+  Stack,
+  Tabs,
+  TextInput
+} from "../../ui/index.js";
+const FONT_OPTIONS = [
+  { label: "Inter (default)", value: "Inter", stack: "'Inter', var(--font-inter), system-ui, sans-serif" },
+  { label: "Geist", value: "Geist", stack: "'Geist', system-ui, sans-serif" },
+  { label: "Manrope", value: "Manrope", stack: "'Manrope', system-ui, sans-serif" },
+  { label: "Space Grotesk", value: "Space Grotesk", stack: "'Space Grotesk', system-ui, sans-serif" },
+  { label: "Plus Jakarta Sans", value: "Plus Jakarta Sans", stack: "'Plus Jakarta Sans', system-ui, sans-serif" },
+  { label: "DM Sans", value: "DM Sans", stack: "'DM Sans', system-ui, sans-serif" },
+  { label: "Figtree", value: "Figtree", stack: "'Figtree', system-ui, sans-serif" },
+  { label: "Roboto", value: "Roboto", stack: "'Roboto', system-ui, sans-serif" },
+  { label: "IBM Plex Sans", value: "IBM Plex Sans", stack: "'IBM Plex Sans', system-ui, sans-serif" },
+  { label: "JetBrains Mono", value: "JetBrains Mono", stack: "'JetBrains Mono', ui-monospace, monospace" }
+];
+const SCALE_OPTIONS = [
+  { value: "", label: "Default (100%)" },
+  { value: "0.875", label: "87.5% \u2014 compact" },
+  { value: "1.125", label: "112.5% \u2014 large" },
+  { value: "1.25", label: "125% \u2014 larger" },
+  { value: "1.5", label: "150% \u2014 largest" }
+];
+const WEIGHT_OPTIONS = [
+  { value: "", label: "Default" },
+  { value: "500", label: "500" },
+  { value: "600", label: "600" },
+  { value: "700", label: "700" }
+];
+const LINE_HEIGHT_OPTIONS = [
+  { value: "", label: "Default" },
+  { value: "1.4", label: "Tight" },
+  { value: "1.5", label: "Normal" },
+  { value: "1.7", label: "Relaxed" },
+  { value: "2", label: "Loose" }
+];
+const dirtyDot = (dirty) => dirty ? /* @__PURE__ */ jsx(Badge, { mode: "dot", type: "accent", "aria-hidden": true }) : void 0;
+const ROLES = [
+  {
+    key: "display",
+    label: "Display",
+    short: "Display",
+    sample: "$48.2K",
+    basePx: 28,
+    baseWeight: 700,
+    familyKey: "displayFontFamily",
+    weightKey: "displayFontWeight",
+    scaleKey: "displayScale"
+  },
+  {
+    key: "pageTitle",
+    label: "Page titles",
+    short: "Page title",
+    sample: "Quarterly performance review",
+    basePx: 22,
+    baseWeight: 600,
+    familyKey: "pageTitleFontFamily",
+    weightKey: "pageTitleFontWeight",
+    scaleKey: "pageTitleScale"
+  },
+  {
+    key: "sectionTitle",
+    label: "Section titles",
+    short: "Section title",
+    sample: "Revenue motions",
+    basePx: 16,
+    baseWeight: 600,
+    familyKey: "sectionTitleFontFamily",
+    weightKey: "sectionTitleFontWeight",
+    scaleKey: "sectionTitleScale"
+  }
+];
+const ACCEPT_MAP = {
+  logo: "image/svg+xml,image/png,image/webp,image/jpeg",
+  icon: "image/svg+xml,image/png,image/webp",
+  favicon: "image/png,image/x-icon,image/vnd.microsoft.icon,image/svg+xml"
+};
+const BRAND_FIELD = (k, tab) => `${k}Url${tab === "dark" ? "Dark" : ""}`;
+const REMOTE_KIND = (k, tab) => `${k}${tab === "dark" ? "Dark" : ""}`;
+const ASSETS = [
+  {
+    kind: "logo",
+    title: "Logo",
+    defaultSrc: "/viax-logo.svg",
+    box: { width: 110 },
+    imgStyle: { maxWidth: "90%", maxHeight: "70%" },
+    hint: "Shown in the expanded sidebar. Upload a file or paste a URL."
+  },
+  {
+    kind: "icon",
+    title: "Sidebar Icon",
+    defaultSrc: "/viax-icon.svg",
+    box: { width: 44 },
+    imgStyle: { maxWidth: "70%", maxHeight: "70%" },
+    hint: "Shown in the collapsed sidebar."
+  },
+  {
+    kind: "favicon",
+    title: "Favicon",
+    defaultSrc: void 0,
+    box: { width: 44 },
+    imgStyle: { maxWidth: "60%", maxHeight: "60%" },
+    hint: "Browser tab icon. Accepts .ico, .png, .svg."
+  }
+];
+function AssetRow({
+  asset,
+  tab,
+  value,
+  fallbackSrc,
+  hint,
+  uploading,
+  onUrlChange,
+  onPick
+}) {
+  const fileRef = useRef(null);
+  const fieldId = useId();
+  const src = value || fallbackSrc;
+  return /* @__PURE__ */ jsx(FormField, { label: asset.title, hint, htmlFor: fieldId, children: /* @__PURE__ */ jsxs(Cluster, { id: `${fieldId}-row`, gap: 12, align: "center", children: [
+    /* @__PURE__ */ jsx(Preview, { box: asset.box, dim: tab === "dark", children: src && /* @__PURE__ */ jsx(PreviewImg, { src, alt: `${asset.title} preview`, style: asset.imgStyle }, src) }),
+    /* @__PURE__ */ jsx(Stack, { gap: 0, style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        id: fieldId,
+        "aria-describedby": `${fieldId}-hint`,
+        value,
+        placeholder: fallbackSrc,
+        onChange: (e) => onUrlChange(e.target.value)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileRef,
+        type: "file",
+        accept: ACCEPT_MAP[asset.kind],
+        hidden: true,
+        onChange: (e) => e.target.files?.[0] && onPick(e.target.files[0])
+      }
+    ),
+    /* @__PURE__ */ jsx(ButtonSecondary, { onClick: () => fileRef.current?.click(), disabled: uploading, children: uploading ? "Uploading\u2026" : "Upload" })
+  ] }) });
+}
+const isValidHex = (v) => /^#[0-9A-Fa-f]{6}$/.test(v) || /^#[0-9A-Fa-f]{3}$/.test(v);
+function BrandColorRow({ shell }) {
+  const { brand, setBrand } = shell;
+  const token = themeTokens.find((t) => t.identity);
+  const fansOut = token?.group === "accent";
+  const fieldId = useId();
+  const [draft, setDraft] = useState(null);
+  if (!token) return null;
+  const effective = (brand.tokens?.light?.[token.cssVar] ?? token.hex).toUpperCase();
+  const shown = draft ?? effective;
+  const validHex = isValidHex(shown);
+  const staged = validHex && shown.toUpperCase() !== effective;
+  const overridden = ["light", "dark"].some(
+    (t) => Object.keys(brand.tokens?.[t] ?? {}).some(
+      (k) => themeTokens.find((tk) => tk.cssVar === k)?.group === token.group
+    )
+  );
+  const apply = () => {
+    if (!staged) return;
+    const hex = shown.toUpperCase();
+    setBrand({
+      tokens: fansOut ? retintAccentTokens(brand.tokens, token.cssVar, hex, "light") : { ...brand.tokens, light: { ...brand.tokens?.light, [token.cssVar]: hex } }
+    });
+    setDraft(null);
+  };
+  const reset = () => {
+    const next = { ...brand.tokens };
+    for (const t of ["light", "dark"]) {
+      const map = { ...brand.tokens?.[t] ?? {} };
+      for (const tk of themeTokens) if (tk.group === token.group) delete map[tk.cssVar];
+      next[t] = Object.keys(map).length ? map : void 0;
+    }
+    setBrand({ tokens: next });
+    setDraft(null);
+  };
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      label: "Brand color",
+      hint: fansOut ? "Apply rebuilds the whole accent palette for light and dark \u2014 including any shades fine-tuned in Color below." : `Applies to ${token.name}. Fine-tune related tokens in Color below.`,
+      htmlFor: fieldId,
+      children: /* @__PURE__ */ jsxs(Cluster, { id: `${fieldId}-row`, gap: 12, align: "center", children: [
+        /* @__PURE__ */ jsx(
+          ColorInputPopover,
+          {
+            value: validHex ? shown.toUpperCase() : effective,
+            onChange: (c) => setDraft(c.toUpperCase()),
+            outputFormat: "hex",
+            alpha: false,
+            triggerLabel: "Pick brand color",
+            title: "Pick a color",
+            style: {
+              "--uxm-color-input-trigger-size": "44px",
+              "--uxm-color-input-border-radius": "6px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Stack, { gap: 0, style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            id: fieldId,
+            "aria-describedby": `${fieldId}-hint`,
+            value: shown,
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") apply();
+            },
+            spellCheck: false,
+            clearable: false,
+            style: {
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+              textTransform: "uppercase"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ButtonSecondary, { onClick: apply, disabled: !staged, children: "Apply" }),
+        overridden && /* @__PURE__ */ jsx(InlineAction, { onClick: reset, icon: /* @__PURE__ */ jsx(Icon, { glyph: "refresh", size: 11 }), children: fansOut ? "Reset palette" : `Reset ${token.name.toLowerCase()}` })
+      ] })
+    }
+  );
+}
+function retintAccentTokens(tokens, baseVar, baseHex, editedTheme) {
+  const hsl = hexToHsl(baseHex);
+  if (!hsl) return tokens;
+  const next = { ...tokens };
+  for (const t of ["light", "dark"]) {
+    const map = { ...tokens?.[t] ?? {} };
+    for (const tk of themeTokens) {
+      if (tk.group !== "accent") continue;
+      if (t === editedTheme && tk.cssVar === baseVar) {
+        map[tk.cssVar] = baseHex.toUpperCase();
+        continue;
+      }
+      const base = t === "dark" ? tk.darkHex : tk.hex;
+      map[tk.cssVar] = retintHue(base, hsl.h).toUpperCase();
+    }
+    next[t] = Object.keys(map).length ? map : void 0;
+  }
+  return next;
+}
+function BrandSettingsPreview({ shell }) {
+  const [uploading, setUploading] = useState(null);
+  const [levelsOpen, setLevelsOpen] = useState(false);
+  const [typeTab, setTypeTab] = useState("body");
+  const [error, setError] = useState(null);
+  const [identityTab, setIdentityTab] = useState("light");
+  if (!shell) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: 16, fontSize: 13, color: "var(--color-text-muted)" }, children: "Brand Settings preview requires a host shell context (brand + setBrand)." });
+  }
+  const { brand, setBrand } = shell;
+  const upload = async (file, kind, tab) => {
+    if (!shell.uploadAsset) {
+      setError("Upload is unavailable in this host.");
+      return;
+    }
+    setUploading(kind);
+    setError(null);
+    try {
+      const data = await shell.uploadAsset(file, REMOTE_KIND(kind, tab));
+      if (!data?.url) throw new Error("Upload failed");
+      setBrand({ [BRAND_FIELD(kind, tab)]: data.url });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Upload failed");
+    } finally {
+      setUploading(null);
+    }
+  };
+  const inheritsHint = (kind, value, base) => {
+    if (identityTab === "dark" && !value) {
+      return `${base} Inherits the Light ${kind} when empty.`;
+    }
+    return base;
+  };
+  const fontFamily = brand.fontFamily ?? "";
+  const headingFontFamily = brand.headingFontFamily ?? "";
+  const headingFontWeight = brand.headingFontWeight ?? "";
+  const specimenStack = (roleFamily) => FONT_OPTIONS.find((f) => f.value === (roleFamily || headingFontFamily || fontFamily))?.stack ?? "inherit";
+  const specimenSize = (basePx, roleScale, baseScale) => Math.round(basePx * Number(roleScale || 1) * Number(baseScale || 1) * 10) / 10;
+  const bodyDirty = Boolean(brand.fontFamily || brand.typeScale || brand.bodyLineHeight);
+  const headingsDirty = Boolean(
+    brand.headingFontFamily || brand.headingFontWeight || ROLES.some((r) => brand[r.familyKey] || brand[r.weightKey] || brand[r.scaleKey])
+  );
+  return /* @__PURE__ */ jsxs(Stack, { gap: 16, style: { width: "100%", maxWidth: 640 }, children: [
+    /* @__PURE__ */ jsxs(
+      Group,
+      {
+        title: "Identity",
+        description: "Logos, marks and the brand color shown throughout Modo. Dark assets fall back to the light ones when empty.",
+        children: [
+          /* @__PURE__ */ jsxs(Cluster, { justify: "between", align: "center", gap: 8, children: [
+            /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--color-text-muted)" }, children: [
+              "Editing ",
+              /* @__PURE__ */ jsx("strong", { style: { color: "var(--color-text)" }, children: identityTab }),
+              " assets"
+            ] }),
+            /* @__PURE__ */ jsx(LightDarkTabs, { value: identityTab, onChange: setIdentityTab })
+          ] }),
+          ASSETS.map((a) => /* @__PURE__ */ jsx(
+            AssetRow,
+            {
+              asset: a,
+              tab: identityTab,
+              value: brand[BRAND_FIELD(a.kind, identityTab)] ?? "",
+              fallbackSrc: identityTab === "dark" ? brand[`${a.kind}Url`] || a.defaultSrc : a.defaultSrc,
+              hint: inheritsHint(a.kind, brand[BRAND_FIELD(a.kind, identityTab)] ?? "", a.hint),
+              uploading: uploading === a.kind,
+              onUrlChange: (v) => setBrand({ [BRAND_FIELD(a.kind, identityTab)]: v || void 0 }),
+              onPick: (file) => upload(file, a.kind, identityTab)
+            },
+            a.kind
+          )),
+          /* @__PURE__ */ jsx(BrandColorRow, { shell }),
+          error && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "var(--color-danger-text)", margin: 0 }, children: error })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Group,
+      {
+        title: "Typography",
+        description: "Typefaces applied across Modo. Headings are optional \u2014 they inherit the body face unless you set one. Changes apply live and persist on Publish.",
+        children: /* @__PURE__ */ jsxs(Stack, { gap: 12, children: [
+          /* @__PURE__ */ jsx(
+            Tabs,
+            {
+              value: typeTab,
+              onChange: (v) => setTypeTab(v),
+              options: [
+                { value: "body", label: "Body", icon: dirtyDot(bodyDirty) },
+                { value: "headings", label: "Headings", icon: dirtyDot(headingsDirty) }
+              ]
+            }
+          ),
+          typeTab === "body" ? /* @__PURE__ */ jsxs(Stack, { gap: 10, children: [
+            /* @__PURE__ */ jsx(FormField, { label: "Typeface", labelPosition: "side", children: /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: fontFamily,
+                onChange: (e) => setBrand({ fontFamily: e.target.value || void 0 }),
+                "aria-label": "Body typeface",
+                style: { width: "100%" },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Inter (default)" }),
+                  FONT_OPTIONS.slice(1).map((f) => /* @__PURE__ */ jsx("option", { value: f.value, children: f.label }, f.value))
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              FormField,
+              {
+                label: "Text size",
+                labelPosition: "side",
+                hint: "Scales every text size in the library, headings included.",
+                children: /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    value: brand.typeScale ?? "",
+                    onChange: (e) => setBrand({ typeScale: e.target.value || void 0 }),
+                    "aria-label": "Base text size",
+                    style: { width: "100%" },
+                    children: SCALE_OPTIONS.map((s) => /* @__PURE__ */ jsx("option", { value: s.value, disabled: s.value === "", children: s.label }, s.value))
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FormField,
+              {
+                label: "Line height",
+                labelPosition: "side",
+                hint: "Applies to multi-line body copy, not compact chrome.",
+                children: /* @__PURE__ */ jsx(
+                  ButtonGroup,
+                  {
+                    style: { alignSelf: "start" },
+                    value: brand.bodyLineHeight ?? "",
+                    onChange: (v) => setBrand({ bodyLineHeight: v || void 0 }),
+                    "aria-label": "Body line height",
+                    options: LINE_HEIGHT_OPTIONS
+                  }
+                )
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Stack, { gap: 10, children: [
+            /* @__PURE__ */ jsx(FormField, { label: "Typeface", labelPosition: "side", children: /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: headingFontFamily,
+                onChange: (e) => setBrand({ headingFontFamily: e.target.value || void 0 }),
+                "aria-label": "Heading typeface",
+                style: { width: "100%" },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Same as body" }),
+                  FONT_OPTIONS.map((f) => /* @__PURE__ */ jsx("option", { value: f.value, children: f.value === "Inter" ? "Inter" : f.label }, f.value))
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              FormField,
+              {
+                label: "Weight",
+                labelPosition: "side",
+                hint: "Default keeps each component's own weight.",
+                children: /* @__PURE__ */ jsx(
+                  ButtonGroup,
+                  {
+                    style: { alignSelf: "start" },
+                    value: headingFontWeight,
+                    onChange: (v) => setBrand({ headingFontWeight: v || void 0 }),
+                    "aria-label": "Heading weight",
+                    options: WEIGHT_OPTIONS
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Disclosure,
+              {
+                id: "uxm-typography-levels",
+                open: levelsOpen,
+                onOpenChange: setLevelsOpen,
+                label: "Fine-tune levels"
+              }
+            ),
+            levelsOpen && /* @__PURE__ */ jsxs(Stack, { id: "uxm-typography-levels-panel", gap: 10, children: [
+              /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "calc(12px * var(--type-scale, 1))", color: "var(--color-text-muted)", lineHeight: "var(--type-body-line-height, 1.5)" }, children: "Each level inherits the settings above until you change it here. Display covers metric values and error codes." }),
+              ROLES.map((r) => /* @__PURE__ */ jsx(FormField, { label: r.label, labelPosition: "side", children: /* @__PURE__ */ jsxs(ResponsiveGrid, { min: "112px", gap: 6, role: "group", "aria-label": r.label, children: [
+                /* @__PURE__ */ jsxs(
+                  Select,
+                  {
+                    value: brand[r.familyKey] ?? "",
+                    onChange: (e) => setBrand({ [r.familyKey]: e.target.value || void 0 }),
+                    "aria-label": `${r.short} typeface`,
+                    style: { width: "100%" },
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Inherit typeface" }),
+                      FONT_OPTIONS.map((f) => /* @__PURE__ */ jsx("option", { value: f.value, children: f.value === "Inter" ? "Inter" : f.label }, f.value))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Select,
+                  {
+                    value: brand[r.weightKey] ?? "",
+                    onChange: (e) => setBrand({ [r.weightKey]: e.target.value || void 0 }),
+                    "aria-label": `${r.short} weight`,
+                    style: { width: "100%" },
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Weight" }),
+                      /* @__PURE__ */ jsx("option", { value: "500", children: "500" }),
+                      /* @__PURE__ */ jsx("option", { value: "600", children: "600" }),
+                      /* @__PURE__ */ jsx("option", { value: "700", children: "700" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    value: brand[r.scaleKey] ?? "",
+                    onChange: (e) => setBrand({ [r.scaleKey]: e.target.value || void 0 }),
+                    "aria-label": `${r.short} size`,
+                    style: { width: "100%" },
+                    children: SCALE_OPTIONS.map((s) => /* @__PURE__ */ jsx("option", { value: s.value, disabled: s.value === "", children: s.value === "" ? "Size" : s.label.replace(/ —.*$/, "") }, s.value))
+                  }
+                )
+              ] }) }, r.key))
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Card, { padding: 16, style: { "--uxm-card-bg": "var(--color-surface)" }, children: /* @__PURE__ */ jsxs(Stack, { gap: 0, children: [
+            ROLES.map((r) => /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  margin: r.key === "display" ? 0 : "10px 0 0",
+                  fontFamily: specimenStack(brand[r.familyKey]),
+                  fontSize: specimenSize(r.basePx, brand[r.scaleKey], brand.typeScale),
+                  fontWeight: Number(
+                    brand[r.weightKey] || headingFontWeight || r.baseWeight
+                  )
+                },
+                children: r.sample
+              },
+              r.key
+            )),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  margin: "12px 0 0",
+                  fontFamily: FONT_OPTIONS.find((f) => f.value === fontFamily)?.stack ?? "inherit",
+                  fontSize: specimenSize(14, void 0, brand.typeScale),
+                  lineHeight: brand.bodyLineHeight ? Number(brand.bodyLineHeight) : 1.5
+                },
+                children: "Body copy sets the baseline everything else is measured against. The quick brown fox jumps over the lazy dog."
+              }
+            )
+          ] }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Group,
+      {
+        title: "Color",
+        description: "Palette overrides that cascade across Modo. Changes apply live and persist on Publish.",
+        children: /* @__PURE__ */ jsx(ThemeTokensEditor, { shell })
+      }
+    )
+  ] });
+}
+function Group({
+  title,
+  description,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      padding: 20,
+      style: {
+        // The panel's own card is a touch rounder than the atom's 4px default.
+        "--uxm-card-radius": "10px",
+        // SectionHeader's subtitle defaults to 10px muted — right for the terse
+        // metadata it was built for ("Active value: 600"), too small for the
+        // full sentences these groups carry. Tuned through the atom's own vars
+        // rather than by hand-rolling the header again.
+        "--uxm-section-header-subtitle-size": "13px",
+        "--uxm-section-header-subtitle-color": "var(--color-text)",
+        // These are the panel's top-level section headings, not incidental
+        // labels in a dense properties list — the atom's `--color-text-subtle`
+        // default reads as too faint at that job.
+        "--uxm-section-header-title-color": "var(--color-text-muted)"
+      },
+      children: /* @__PURE__ */ jsxs(Stack, { gap: 20, children: [
+        /* @__PURE__ */ jsx(SectionHeader, { level: 3, subtitle: description, children: title }),
+        children
+      ] })
+    }
+  );
+}
+const GROUP_LABELS = {
+  surfaces: "Surfaces",
+  text: "Text",
+  borders: "Borders",
+  accent: "Accent",
+  highlights: "Highlights",
+  categories: "Categories",
+  semantic: "Semantic"
+};
+const GROUP_ORDER = [
+  "surfaces",
+  "text",
+  "borders",
+  "accent",
+  "highlights",
+  "categories",
+  "semantic"
+];
+function groupTokens() {
+  var _a;
+  const by = {};
+  for (const t of themeTokens) (by[_a = t.group] ?? (by[_a] = [])).push(t);
+  return GROUP_ORDER.filter((g) => by[g]).map((g) => ({ group: g, label: GROUP_LABELS[g], tokens: by[g] }));
+}
+function ThemeTokensEditor({ shell }) {
+  const { theme, setTheme, brand, setBrand } = shell;
+  const grouped = groupTokens();
+  const overrides = brand.tokens?.[theme] ?? {};
+  const [pendingAccent, setPendingAccent] = useState(null);
+  const setOverride = (cssVar, hex) => {
+    const next = { ...brand.tokens?.[theme] ?? {} };
+    if (hex === void 0) delete next[cssVar];
+    else next[cssVar] = hex;
+    setBrand({
+      tokens: {
+        ...brand.tokens,
+        [theme]: Object.keys(next).length ? next : void 0
+      }
+    });
+  };
+  const recalcAccents = (baseVar, baseHex) => {
+    setPendingAccent(null);
+    setBrand({ tokens: retintAccentTokens(brand.tokens, baseVar, baseHex, theme) });
+  };
+  const resetAll = () => {
+    setBrand({
+      tokens: {
+        ...brand.tokens,
+        [theme]: void 0
+      }
+    });
+  };
+  const hasOverrides = Object.keys(overrides).length > 0;
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsxs(Cluster, { justify: "between", align: "center", gap: 8, style: { marginBottom: 14 }, children: [
+      /* @__PURE__ */ jsxs(Cluster, { gap: 10, align: "center", children: [
+        /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--color-text-muted)" }, children: [
+          "Editing ",
+          /* @__PURE__ */ jsx("strong", { style: { color: "var(--color-text)" }, children: theme }),
+          " values"
+        ] }),
+        /* @__PURE__ */ jsxs(
+          InlineAction,
+          {
+            onClick: resetAll,
+            disabled: !hasOverrides,
+            icon: /* @__PURE__ */ jsx(Icon, { glyph: "refresh", size: 11 }),
+            children: [
+              "Reset ",
+              theme,
+              " values"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(LightDarkTabs, { value: theme, onChange: setTheme })
+    ] }),
+    /* @__PURE__ */ jsx(Stack, { gap: 14, children: grouped.map((g) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 10, fontWeight: 600, letterSpacing: 0.6, textTransform: "uppercase", color: "var(--color-text-muted)", marginBottom: 6 }, children: g.label }),
+      /* @__PURE__ */ jsx(Stack, { gap: 4, children: g.tokens.map((t) => /* @__PURE__ */ jsx(
+        TokenRow,
+        {
+          token: t,
+          theme,
+          override: overrides[t.cssVar],
+          onChange: (hex) => setOverride(t.cssVar, hex),
+          onCommitColor: (
+            // Accent tokens prompt (via modal) to re-tint the ramp to the
+            // new hue — but only once the pick is COMMITTED (popover close
+            // or hex entry), never mid-drag while onChange streams.
+            t.group === "accent" ? (hex) => setPendingAccent({ cssVar: t.cssVar, hex }) : void 0
+          )
+        },
+        t.cssVar
+      )) })
+    ] }, g.group)) }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: pendingAccent !== null,
+        onOpenChange: (open) => {
+          if (!open) setPendingAccent(null);
+        },
+        children: /* @__PURE__ */ jsxs(Modal, { size: "sm", onClose: () => setPendingAccent(null), children: [
+          /* @__PURE__ */ jsx(Modal.Header, { children: "Recalculate accent palette?" }),
+          /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs("p", { style: { margin: 0, fontSize: 13, color: "var(--color-text)", lineHeight: 1.5 }, children: [
+            "You changed",
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: themeTokens.find((t) => t.cssVar === pendingAccent?.cssVar)?.name ?? "an accent color" }),
+            ". Re-tint the rest of the accent ramp \u2014 in both light and dark \u2014 to its hue? Each shade keeps its own lightness and saturation; only the hue follows the color you just set."
+          ] }) }),
+          /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+            /* @__PURE__ */ jsx(ButtonTertiary, { onClick: () => setPendingAccent(null), children: "Keep as is" }),
+            /* @__PURE__ */ jsx(ButtonPrimary, { onClick: () => {
+              if (pendingAccent) recalcAccents(pendingAccent.cssVar, pendingAccent.hex);
+            }, children: "Recalculate" })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+function TokenRow({
+  token,
+  theme,
+  override,
+  onChange,
+  onCommitColor
+}) {
+  const defaultHex = theme === "dark" ? token.darkHex : token.hex;
+  const effective = (override ?? defaultHex).toUpperCase();
+  const isOverridden = override !== void 0;
+  const [draft, setDraft] = useState(null);
+  const shown = draft ?? effective;
+  const changedWhileOpen = useRef(false);
+  const latestHex = useRef(effective);
+  const commit = (raw) => {
+    const v = raw.trim();
+    if (isValidHex(v)) {
+      const hex = v.toUpperCase();
+      onChange(hex);
+      onCommitColor?.(hex);
+    }
+    setDraft(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "20px 1fr auto auto 18px",
+        alignItems: "center",
+        gap: 8,
+        padding: "4px 6px",
+        borderRadius: 4,
+        fontSize: 12
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          ColorInputPopover,
+          {
+            value: effective,
+            onChange: (c) => {
+              const hex = c.toUpperCase();
+              changedWhileOpen.current = true;
+              latestHex.current = hex;
+              onChange(hex);
+            },
+            onOpenChange: (open) => {
+              if (open) changedWhileOpen.current = false;
+              else if (changedWhileOpen.current) {
+                changedWhileOpen.current = false;
+                onCommitColor?.(latestHex.current);
+              }
+            },
+            outputFormat: "hex",
+            alpha: false,
+            triggerLabel: `Pick colour for ${token.name}`,
+            title: "Pick a color",
+            style: {
+              "--uxm-color-input-trigger-size": "20px",
+              "--uxm-color-input-border-radius": "4px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { style: { color: "var(--color-text)", fontWeight: isOverridden ? 600 : 400, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+          token.name,
+          /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, color: "var(--color-text-muted)", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 }, children: token.cssVar })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: 10,
+              color: "var(--color-text-muted)",
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+              minWidth: 56,
+              textAlign: "right",
+              visibility: isOverridden ? "visible" : "hidden"
+            },
+            title: `Default: ${defaultHex}`,
+            children: defaultHex.toUpperCase()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: shown,
+            onChange: (e) => setDraft(e.target.value),
+            onBlur: (e) => commit(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") e.target.blur();
+            },
+            spellCheck: false,
+            clearable: false,
+            "aria-label": `${token.name} hex value`,
+            style: {
+              width: 84,
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+              textTransform: "uppercase",
+              "--uxm-input-text-font-size": "11px",
+              "--uxm-input-text-padding-x": "6px",
+              "--uxm-input-text-padding-y": "3px",
+              "--uxm-input-text-border-radius": "4px",
+              "--uxm-input-text-bg": "var(--color-surface)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: () => onChange(void 0),
+            disabled: !isOverridden,
+            title: "Reset to default",
+            "aria-label": `Reset ${token.name}`,
+            style: {
+              "--uxm-icon-button-size": "18px",
+              "--uxm-icon-button-radius": "4px",
+              opacity: isOverridden ? 1 : 0.25
+            },
+            children: /* @__PURE__ */ jsx(Icon, { glyph: "refresh", size: 12 })
+          }
+        )
+      ]
+    }
+  );
+}
+function Preview({ box, children, dim }) {
+  return /* @__PURE__ */ jsx("div", { style: {
+    // Stretch, not a fixed height: the frame matches whatever the field
+    // beside it measures, at any type scale.
+    alignSelf: "stretch",
+    ...box,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: `1px solid var(--color-preview-border-${dim ? "dark" : "light"})`,
+    borderRadius: 6,
+    backgroundColor: `var(--color-preview-bg-${dim ? "dark" : "light"})`,
+    flexShrink: 0,
+    overflow: "hidden"
+  }, children });
+}
+function PreviewImg({ src, alt, style }) {
+  const [errored, setErrored] = useState(false);
+  if (errored) return null;
+  return /* @__PURE__ */ jsx("img", { src, alt, style, onError: () => setErrored(true) });
+}
+function LightDarkTabs({ value, onChange }) {
+  return /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      value,
+      onChange: (v) => onChange(v),
+      options: [
+        { value: "light", label: "Light" },
+        { value: "dark", label: "Dark" }
+      ]
+    }
+  );
+}
+export {
+  BrandSettingsPreview,
+  FONT_OPTIONS
+};
+//# sourceMappingURL=brand-settings-preview.js.map