@viax.io/uxm 4.36.0

package/dist/studio/shell/sidebar.js

@@ -0,0 +1,222 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { Badge } from "../../ui/index.js";
+import { Chip } from "../../ui/index.js";
+import { ExplorerListItem } from "../../ui/index.js";
+import { ExplorerSection } from "../../ui/index.js";
+import { Icon } from "../../ui/index.js";
+import { IconButton } from "../../ui/index.js";
+import { InlineAction } from "../../ui/index.js";
+import { InputWithIcon } from "../../ui/index.js";
+import { useUxm } from "../lib/context.js";
+import { categories, categoryColors, getComponentsByCategory, registry } from "../lib/registry/index.js";
+const COLLAPSED_STORAGE_KEY = "uxm:collapsed-categories";
+function Sidebar({ embed = false }) {
+  const { selectedId, selectComponent, brand, theme } = useUxm();
+  const brandIcon = (theme === "dark" ? brand.iconUrlDark || brand.iconUrl : brand.iconUrl) || "/viax-icon.svg";
+  const grouped = getComponentsByCategory();
+  const [query, setQuery] = useState("");
+  const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
+  const [activeCats, setActiveCats] = useState(/* @__PURE__ */ new Set());
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(COLLAPSED_STORAGE_KEY);
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        if (Array.isArray(parsed)) setCollapsed(new Set(parsed.filter((x) => typeof x === "string")));
+      }
+    } catch {
+    }
+  }, []);
+  const toggleCategory = useCallback((cat) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(cat)) next.delete(cat);
+      else next.add(cat);
+      try {
+        localStorage.setItem(COLLAPSED_STORAGE_KEY, JSON.stringify([...next]));
+      } catch {
+      }
+      return next;
+    });
+  }, []);
+  const toggleCat = useCallback((cat) => {
+    setActiveCats((prev) => {
+      const next = new Set(prev);
+      if (next.has(cat)) next.delete(cat);
+      else next.add(cat);
+      return next;
+    });
+  }, []);
+  const filtered = useMemo(() => {
+    const q = query.toLowerCase().trim();
+    const catActive = activeCats.size > 0;
+    if (!q && !catActive) return null;
+    return registry.filter((def) => {
+      if (catActive && !activeCats.has(def.category)) return false;
+      if (!q) return true;
+      return def.name.toLowerCase().includes(q) || def.category.toLowerCase().includes(q) || def.description.toLowerCase().includes(q);
+    });
+  }, [query, activeCats]);
+  const matchCount = filtered ? filtered.length : registry.length;
+  return /* @__PURE__ */ jsxs("aside", { className: `flex flex-col border-r border-border overflow-y-auto ${embed ? "bg-transparent" : "bg-surface-alt"}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `sticky top-0 z-10 ${embed ? "bg-card pt-3" : "bg-surface-alt"}`, children: [
+      !embed && /* @__PURE__ */ jsxs("div", { className: "px-5 pt-2 pb-6 flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: brandIcon,
+            alt: "",
+            "aria-hidden": true,
+            className: "w-auto object-contain shrink-0",
+            style: { height: 40, marginTop: 12 }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-[38px] tracking-[-0.06em] text-text leading-none", style: { fontFamily: "var(--font-logo)" }, children: "uxm" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-text-muted mt-1", children: "Component Explorer" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "px-5 pb-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
+            InputWithIcon,
+            {
+              type: "search",
+              placeholder: "Search\u2026",
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              onClear: () => setQuery(""),
+              icon: /* @__PURE__ */ jsx(Icon, { glyph: "search", size: 14 })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            IconButton,
+            {
+              onClick: () => setFiltersOpen((v) => !v),
+              "aria-label": filtersOpen ? "Hide category filter" : "Filter by category",
+              title: "Filter by category",
+              "aria-expanded": filtersOpen,
+              style: { position: "relative" },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { glyph: "filter", size: 14 }),
+                activeCats.size > 0 && // Badge atom (dot mode) for the "filter is active"
+                // indicator. Themable via the Badge registry's
+                // `--uxm-badge-accent-dot-color` knob, and reads as
+                // the same status-indicator vocabulary used elsewhere
+                // (notification counts, system alerts). The 6px size
+                // is set via `--uxm-badge-dot-size` so we don't
+                // override Badge's own dot dimensions globally.
+                /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    mode: "dot",
+                    type: "accent",
+                    "aria-hidden": true,
+                    style: {
+                      position: "absolute",
+                      top: 4,
+                      right: 4,
+                      ["--uxm-badge-dot-size"]: "6px"
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        filtersOpen && /* @__PURE__ */ jsxs("div", { className: "mt-2.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: categories.map((cat) => /* @__PURE__ */ jsx(
+            Chip,
+            {
+              mode: "filter",
+              selected: activeCats.has(cat),
+              onClick: () => toggleCat(cat),
+              iconLeft: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: 6,
+                    height: 6,
+                    borderRadius: "50%",
+                    backgroundColor: categoryColors[cat],
+                    display: "inline-block"
+                  }
+                }
+              ),
+              children: cat
+            },
+            cat
+          )) }),
+          activeCats.size > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(InlineAction, { onClick: () => setActiveCats(/* @__PURE__ */ new Set()), children: "Clear filter" }) })
+        ] }),
+        (query || activeCats.size > 0) && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-text-subtle mt-1.5 px-1", children: [
+          matchCount,
+          " result",
+          matchCount !== 1 ? "s" : ""
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("nav", { className: "flex-1 px-3 pb-4", children: filtered ? (
+      // Flat search results
+      filtered.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: filtered.map((def) => /* @__PURE__ */ jsx(
+        ExplorerListItem,
+        {
+          name: def.name,
+          trailing: def.category,
+          active: selectedId === def.id,
+          onClick: () => selectComponent(def.id)
+        },
+        def.id
+      )) }) : /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-text-subtle", children: [
+        'No components match "',
+        query,
+        '"'
+      ] }) })
+    ) : (
+      // Grouped by category
+      categories.map((cat) => {
+        const isCollapsed = collapsed.has(cat);
+        const count = grouped[cat].length;
+        return /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsx(
+            ExplorerSection,
+            {
+              open: !isCollapsed,
+              onClick: () => toggleCategory(cat),
+              className: "mb-1.5",
+              indicator: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    backgroundColor: categoryColors[cat],
+                    display: "inline-block"
+                  }
+                }
+              ),
+              trailing: count,
+              children: cat
+            }
+          ),
+          !isCollapsed && grouped[cat].map((def) => /* @__PURE__ */ jsx(
+            ExplorerListItem,
+            {
+              name: def.name,
+              active: selectedId === def.id,
+              onClick: () => selectComponent(def.id)
+            },
+            def.id
+          ))
+        ] }, cat);
+      })
+    ) })
+  ] });
+}
+export {
+  Sidebar
+};
+//# sourceMappingURL=sidebar.js.map

package/dist/studio/shell/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/shell/sidebar.tsx"],"sourcesContent":["import { useState, useMemo, useEffect, useCallback } from 'react';\n\nimport { Badge } from '@/ui';\nimport { Chip } from '@/ui';\nimport { ExplorerListItem } from '@/ui';\nimport { ExplorerSection } from '@/ui';\nimport { Icon } from '@/ui';\nimport { IconButton } from '@/ui';\nimport { InlineAction } from '@/ui';\nimport { InputWithIcon } from '@/ui';\n\nimport { useUxm } from '../lib/context';\nimport { categories, categoryColors, getComponentsByCategory, registry } from '../lib/registry';\n\nimport type { Category } from '../lib/types';\n\nconst COLLAPSED_STORAGE_KEY = 'uxm:collapsed-categories';\n\nexport function Sidebar({ embed = false }: { embed?: boolean }) {\n  const { selectedId, selectComponent, brand, theme } = useUxm();\n  // Brand mark shown left of the title — same asset as the Sidebar Icon\n  // brand control, defaulting to the viax mark. Theme-aware to match the\n  // rest of the brand surface.\n  const brandIcon =\n    (theme === 'dark' ? brand.iconUrlDark || brand.iconUrl : brand.iconUrl) || '/viax-icon.svg';\n  const grouped = getComponentsByCategory();\n  const [query, setQuery] = useState('');\n  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());\n  // Category filter — session only (not persisted). Empty set = no\n  // filter active = show all categories. Multi-select so designers can\n  // narrow to, e.g., Buttons + Inputs while comparing form atoms.\n  const [activeCats, setActiveCats] = useState<Set<Category>>(new Set());\n  // Whether the chip strip is expanded. Toggle button next to the\n  // search input. Auto-opens when a category becomes active (so the\n  // user can see what they've picked); doesn't auto-close.\n  const [filtersOpen, setFiltersOpen] = useState(false);\n\n  useEffect(() => {\n    try {\n      const raw = localStorage.getItem(COLLAPSED_STORAGE_KEY);\n      if (raw) {\n        const parsed = JSON.parse(raw);\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- one-shot restore of persisted collapsed state on mount\n        if (Array.isArray(parsed)) setCollapsed(new Set(parsed.filter((x) => typeof x === 'string')));\n      }\n    } catch {\n      /* ignore malformed/unavailable storage */\n    }\n  }, []);\n\n  const toggleCategory = useCallback((cat: string) => {\n    setCollapsed((prev) => {\n      const next = new Set(prev);\n      if (next.has(cat)) next.delete(cat);\n      else next.add(cat);\n      try { localStorage.setItem(COLLAPSED_STORAGE_KEY, JSON.stringify([...next])); } catch { /* ignore */ }\n      return next;\n    });\n  }, []);\n\n  const toggleCat = useCallback((cat: Category) => {\n    setActiveCats((prev) => {\n      const next = new Set(prev);\n      if (next.has(cat)) next.delete(cat);\n      else next.add(cat);\n      return next;\n    });\n  }, []);\n\n  // Combined filter: text query AND category set. Both can be active\n  // at once — typing \"save\" with the Buttons chip selected shows only\n  // Button atoms matching \"save\". When neither is active we return\n  // null and fall back to the grouped layout below.\n  const filtered = useMemo(() => {\n    const q = query.toLowerCase().trim();\n    const catActive = activeCats.size > 0;\n    if (!q && !catActive) return null;\n    return registry.filter((def) => {\n      if (catActive && !activeCats.has(def.category)) return false;\n      if (!q) return true;\n      return (\n        def.name.toLowerCase().includes(q) ||\n        def.category.toLowerCase().includes(q) ||\n        def.description.toLowerCase().includes(q)\n      );\n    });\n  }, [query, activeCats]);\n\n  const matchCount = filtered ? filtered.length : registry.length;\n\n  return (\n    <aside className={`flex flex-col border-r border-border overflow-y-auto ${embed ? 'bg-transparent' : 'bg-surface-alt'}`}>\n      <div className={`sticky top-0 z-10 ${embed ? 'bg-card pt-3' : 'bg-surface-alt'}`}>\n        {/* Header — hidden in embed mode */}\n        {!embed && (\n          <div className=\"px-5 pt-2 pb-6 flex items-start gap-3\">\n            <img\n              src={brandIcon}\n              alt=\"\"\n              aria-hidden\n              className=\"w-auto object-contain shrink-0\"\n              style={{ height: 40, marginTop: 12 }}\n            />\n            <div className=\"flex flex-col justify-center\">\n              <h1 className=\"text-[38px] tracking-[-0.06em] text-text leading-none\" style={{ fontFamily: 'var(--font-logo)' }}>uxm</h1>\n              <p className=\"text-xs text-text-muted mt-1\">Component Explorer</p>\n            </div>\n          </div>\n        )}\n\n        {/* Search + category filter. Search input fills the row; the\n            filter button toggles a chip strip of category quick-picks\n            below. The chip strip stays collapsed by default — most\n            sessions don't need category narrowing — but auto-opens\n            when any chip is active so the user can see what's picked.\n            Clear button in <InputWithIcon> handles type=\"search\". */}\n        <div className=\"px-5 pb-3\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex-1 min-w-0\">\n              <InputWithIcon\n                type=\"search\"\n                placeholder=\"Search…\"\n                value={query}\n                onChange={(e) => setQuery(e.target.value)}\n                onClear={() => setQuery('')}\n                icon={<Icon glyph=\"search\" size={14} />}\n              />\n            </div>\n            <IconButton\n              onClick={() => setFiltersOpen((v) => !v)}\n              aria-label={filtersOpen ? 'Hide category filter' : 'Filter by category'}\n              title=\"Filter by category\"\n              aria-expanded={filtersOpen}\n              // Indicator dot is rendered as a pseudo-style positioned\n              // overlay so the button keeps its uniform 32×32 footprint.\n              // We surface \"filter is active\" via the dot rather than\n              // changing the button's color, which would compete with\n              // the IconButton atom's own hover/active states.\n              style={{ position: 'relative' }}\n            >\n              <Icon glyph=\"filter\" size={14} />\n              {activeCats.size > 0 && (\n                // Badge atom (dot mode) for the \"filter is active\"\n                // indicator. Themable via the Badge registry's\n                // `--uxm-badge-accent-dot-color` knob, and reads as\n                // the same status-indicator vocabulary used elsewhere\n                // (notification counts, system alerts). The 6px size\n                // is set via `--uxm-badge-dot-size` so we don't\n                // override Badge's own dot dimensions globally.\n                <Badge\n                  mode=\"dot\"\n                  type=\"accent\"\n                  aria-hidden\n                  style={{\n                    position: 'absolute',\n                    top: 4,\n                    right: 4,\n                    ['--uxm-badge-dot-size' as string]: '6px',\n                  }}\n                />\n              )}\n            </IconButton>\n          </div>\n          {filtersOpen && (\n            <div className=\"mt-2.5\">\n              {/* Category quick-picks. `mode=\"filter\"` is Material Design's\n                  chip-as-filter pattern — selected state is a real toggle,\n                  multi-select supported. The \"Clear\" affordance appears\n                  only when at least one chip is selected. */}\n              <div className=\"flex flex-wrap gap-1.5\">\n                {categories.map((cat) => (\n                  <Chip\n                    key={cat}\n                    mode=\"filter\"\n                    selected={activeCats.has(cat)}\n                    onClick={() => toggleCat(cat)}\n                    iconLeft={\n                      <span\n                        style={{\n                          width: 6,\n                          height: 6,\n                          borderRadius: '50%',\n                          backgroundColor: categoryColors[cat],\n                          display: 'inline-block',\n                        }}\n                      />\n                    }\n                  >\n                    {cat}\n                  </Chip>\n                ))}\n              </div>\n              {activeCats.size > 0 && (\n                <div className=\"mt-2\">\n                  <InlineAction onClick={() => setActiveCats(new Set())}>\n                    Clear filter\n                  </InlineAction>\n                </div>\n              )}\n            </div>\n          )}\n          {(query || activeCats.size > 0) && (\n            <p className=\"text-[11px] text-text-subtle mt-1.5 px-1\">\n              {matchCount} result{matchCount !== 1 ? 's' : ''}\n            </p>\n          )}\n        </div>\n      </div>\n\n      {/* Component list */}\n      <nav className=\"flex-1 px-3 pb-4\">\n        {filtered ? (\n          // Flat search results\n          filtered.length > 0 ? (\n            <div className=\"space-y-0.5\">\n              {filtered.map((def) => (\n                <ExplorerListItem\n                  key={def.id}\n                  name={def.name}\n                  trailing={def.category}\n                  active={selectedId === def.id}\n                  onClick={() => selectComponent(def.id)}\n                />\n              ))}\n            </div>\n          ) : (\n            <div className=\"px-3 py-8 text-center\">\n              <p className=\"text-xs text-text-subtle\">No components match &quot;{query}&quot;</p>\n            </div>\n          )\n        ) : (\n          // Grouped by category\n          categories.map((cat) => {\n            const isCollapsed = collapsed.has(cat);\n            const count = grouped[cat].length;\n            return (\n              <div key={cat} className=\"mb-4\">\n                <ExplorerSection\n                  open={!isCollapsed}\n                  onClick={() => toggleCategory(cat)}\n                  className=\"mb-1.5\"\n                  indicator={\n                    <span\n                      style={{\n                        width: 8,\n                        height: 8,\n                        borderRadius: '50%',\n                        backgroundColor: categoryColors[cat],\n                        display: 'inline-block',\n                      }}\n                    />\n                  }\n                  trailing={count}\n                >\n                  {cat}\n                </ExplorerSection>\n                {!isCollapsed && grouped[cat].map((def) => (\n                  <ExplorerListItem\n                    key={def.id}\n                    name={def.name}\n                    active={selectedId === def.id}\n                    onClick={() => selectComponent(def.id)}\n                  />\n                ))}\n              </div>\n            );\n          })\n        )}\n      </nav>\n    </aside>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/studio/shell/wcag-panel.cjs

@@ -0,0 +1,274 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var wcag_panel_exports = {};
+__export(wcag_panel_exports, {
+  WcagPanel: () => WcagPanel
+});
+module.exports = __toCommonJS(wcag_panel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_contrast = require("../../lib/contrast.cjs");
+var import_tokens = require("../../tokens/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+var import_context = require("../lib/context.cjs");
+const colorDist = (a, b) => {
+  const dr = a.r - b.r;
+  const dg = a.g - b.g;
+  const db = a.b - b.b;
+  return dr * dr + dg * dg + db * db;
+};
+const FOREGROUND_TOKEN_GROUPS = /* @__PURE__ */ new Set(["text", "accent", "semantic", "highlights"]);
+const FOREGROUND_TOKEN_VARIABLES = import_tokens.themeTokens.filter((t) => FOREGROUND_TOKEN_GROUPS.has(t.group)).map((t) => ({ variable: t.variable, name: t.name }));
+const FOREGROUND_KEYS = /* @__PURE__ */ new Set([
+  "color",
+  "textColor",
+  "iconColor",
+  "labelColor",
+  "checkColor",
+  "titleColor",
+  "descriptionColor",
+  "hoverColor",
+  "activeColor",
+  "focusColor",
+  "disabledColor",
+  "errorColor",
+  "trendUpColor",
+  "trendDownColor",
+  "chipText",
+  "chipActiveText",
+  "activeText",
+  "inactiveText",
+  "headerText",
+  "pillTextColor",
+  // FormField's per-tint label colours (labelColor was split into these —
+  // `muted` especially needs contrast coverage).
+  "tintStrongColor",
+  "tintDefaultColor",
+  "tintMutedColor"
+]);
+const BACKGROUND_KEYS = /* @__PURE__ */ new Set([
+  "backgroundColor",
+  "bgColor",
+  "pillColor",
+  "chipBg",
+  "chipActiveBg",
+  "activeBg",
+  "inactiveBg",
+  "headerBg",
+  "rowBg",
+  "rowHoverBg"
+]);
+const FOREGROUND_SUFFIX_RE = /(?:^|[a-z0-9])(Text|TextColor)$/;
+const BACKGROUND_SUFFIX_RE = /(?:^|[a-z0-9])(Bg|Background|BackgroundColor)$/i;
+const MAIN_BG_KEYS = ["backgroundColor", "bgColor"];
+function isForeground(key) {
+  return FOREGROUND_KEYS.has(key) || FOREGROUND_SUFFIX_RE.test(key);
+}
+function isBackground(key) {
+  return BACKGROUND_KEYS.has(key) || BACKGROUND_SUFFIX_RE.test(key);
+}
+const CANVAS_BG_FALLBACK = "var(--color-card)";
+function stemOf(key, side) {
+  let s = key;
+  if (side === "fg") {
+    s = s.replace(/TextColor$/, "").replace(/Text$/, "").replace(/Color$/, "");
+  } else {
+    s = s.replace(/BackgroundColor$/i, "").replace(/Background$/i, "").replace(/Bg$/, "").replace(/Color$/, "");
+  }
+  return s.toLowerCase();
+}
+function findPairs(def, resolve) {
+  const visibleColorProps = def.styleProperties.filter((p) => {
+    if (p.control !== "color") return false;
+    if (!p.showWhen) return true;
+    for (const [vKey, vVal] of Object.entries(p.showWhen)) {
+      const fallback = def.layoutVariants.find((v) => v.key === vKey)?.defaultValue ?? "";
+      const allowed = Array.isArray(vVal) ? vVal : [vVal];
+      if (!allowed.includes(resolve(vKey, fallback))) return false;
+    }
+    return true;
+  });
+  const bgProps = visibleColorProps.filter((p) => isBackground(p.key));
+  const fgProps = visibleColorProps.filter((p) => isForeground(p.key));
+  const allBgProps = def.styleProperties.filter(
+    (p) => p.control === "color" && isBackground(p.key)
+  );
+  const mainBgProp = bgProps.find((p) => MAIN_BG_KEYS.includes(p.key)) ?? allBgProps.find((p) => MAIN_BG_KEYS.includes(p.key));
+  const pairs = [];
+  for (const fg of fgProps) {
+    const stem = stemOf(fg.key, "fg");
+    let bg = bgProps.find((b) => stemOf(b.key, "bg") === stem);
+    if (!bg) bg = mainBgProp;
+    const fgValue = String(resolve(fg.key, fg.defaultValue));
+    const bgValue = bg ? String(resolve(bg.key, bg.defaultValue)) : CANVAS_BG_FALLBACK;
+    pairs.push({
+      fgKey: fg.key,
+      fgLabel: fg.label,
+      fgValue,
+      bgKey: bg?.key ?? null,
+      bgLabel: bg?.label ?? "Canvas",
+      bgValue
+    });
+  }
+  return pairs;
+}
+function WcagPanel({ def }) {
+  const { theme, selectedId, getOverrides, setOverride, getCurrentVariants } = (0, import_context.useUxm)();
+  const scopeRef = (0, import_react.useRef)(null);
+  const [results, setResults] = (0, import_react.useState)([]);
+  const overrides = getOverrides(selectedId);
+  const currentVariants = getCurrentVariants();
+  const overridesKey = JSON.stringify({
+    colors: Object.fromEntries(
+      def.styleProperties.filter((p) => p.control === "color").map((p) => [p.key, overrides[p.key]])
+    ),
+    variants: Object.fromEntries(
+      def.layoutVariants.map((v) => [v.key, currentVariants[v.key]])
+    )
+  });
+  (0, import_react.useLayoutEffect)(() => {
+    const variantKeys = new Set(def.layoutVariants.map((v) => v.key));
+    const resolve = (key, fallback) => {
+      if (variantKeys.has(key)) return currentVariants[key] ?? fallback;
+      return overrides[key] ?? fallback;
+    };
+    const pairs = findPairs(def, resolve);
+    const scope = scopeRef.current;
+    const tokenCandidates = FOREGROUND_TOKEN_VARIABLES.map(({ variable, name }) => {
+      const rgb = (0, import_contrast.parseColor)(variable, scope);
+      return rgb ? { variable, name, rgb } : null;
+    }).filter((t) => t !== null);
+    const computed = pairs.map((pair) => {
+      const fg = (0, import_contrast.parseColor)(pair.fgValue, scope);
+      const bg = (0, import_contrast.parseColor)(pair.bgValue, scope);
+      if (!fg || !bg) {
+        return { pair, ratio: null, level: null, suggestion: null };
+      }
+      const ratio = (0, import_contrast.contrastRatio)(fg, bg);
+      const level = (0, import_contrast.wcagLevel)(ratio);
+      let suggestion = null;
+      if (level === "fail" || level === "AA-large") {
+        const improvers = tokenCandidates.filter(
+          (t) => (0, import_contrast.contrastRatio)(t.rgb, bg) > ratio + 0.05
+        );
+        const token = (0, import_contrast.suggestAccessibleToken)(fg, bg, 4.5, improvers) ?? (level === "fail" ? (0, import_contrast.suggestAccessibleToken)(fg, bg, 3, improvers) : null);
+        if (token) {
+          suggestion = { value: token.variable, label: token.name };
+        } else {
+          const hex45 = (0, import_contrast.suggestAccessibleColor)(fg, bg, 4.5);
+          const hex = hex45 ?? (level === "fail" ? (0, import_contrast.suggestAccessibleColor)(fg, bg, 3) : null);
+          if (hex && (0, import_contrast.contrastRatio)(hex, bg) > ratio + 0.05) {
+            const nearby = [...improvers].map((t) => ({ t, dist: colorDist(hex, t.rgb) })).sort((a, b) => a.dist - b.dist)[0];
+            const NEAR_THRESHOLD = 60 * 60 * 3;
+            if (nearby && nearby.dist < NEAR_THRESHOLD) {
+              suggestion = { value: nearby.t.variable, label: nearby.t.name };
+            } else {
+              const hexStr = (0, import_contrast.rgbToHex)(hex);
+              suggestion = { value: hexStr, label: hexStr.toUpperCase() };
+            }
+          }
+        }
+      }
+      return { pair, ratio, level, suggestion };
+    });
+    setResults(computed);
+  }, [def.id, overridesKey, theme]);
+  if (results.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: scopeRef });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: scopeRef, className: "mb-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.SectionHeader, { children: "Accessibility" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2", children: results.map(({ pair, ratio, level, suggestion }) => {
+      const failing = level === "fail" || level === "AA-large";
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "rounded-lg border border-border bg-surface p-3",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 mb-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex shrink-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      className: "h-4 w-4 rounded-l-[4px] border border-border",
+                      style: { backgroundColor: pair.bgValue }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      className: "h-4 w-4 rounded-r-[4px] border border-l-0 border-border",
+                      style: { backgroundColor: pair.fgValue }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-[11px] text-text-strong truncate", children: [
+                  pair.fgLabel,
+                  " / ",
+                  pair.bgLabel
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LevelBadge, { level, ratio })
+            ] }),
+            failing && suggestion && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_ui.Chip,
+              {
+                mode: "suggestion",
+                onClick: () => setOverride(selectedId, pair.fgKey, suggestion.value),
+                iconLeft: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "sparkle", size: 12, strokeWidth: 2 }),
+                children: [
+                  "Quick fix \u2192 ",
+                  suggestion.label
+                ]
+              }
+            ),
+            level === null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[10px] text-text-muted", children: "Couldn't evaluate (unresolvable colour)." })
+          ]
+        },
+        pair.fgKey
+      );
+    }) })
+  ] });
+}
+const LEVEL_TAG_TYPE = {
+  AAA: "success",
+  AA: "success",
+  "AA-large": "warning",
+  fail: "danger"
+};
+const LEVEL_LABEL = {
+  AAA: "AAA",
+  AA: "AA",
+  "AA-large": "AA-large",
+  fail: "Fail"
+};
+function LevelBadge({ level, ratio }) {
+  if (level === null || ratio === null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] text-text-subtle", children: "\u2014" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Tag, { type: LEVEL_TAG_TYPE[level], style: { flexShrink: 0, fontVariantNumeric: "tabular-nums" }, children: [
+    LEVEL_LABEL[level],
+    " \xB7 ",
+    ratio.toFixed(2)
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  WcagPanel
+});
+//# sourceMappingURL=wcag-panel.cjs.map

package/dist/studio/shell/wcag-panel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/shell/wcag-panel.tsx"],"sourcesContent":["import { useRef, useLayoutEffect, useState } from 'react';\n\nimport {\n  contrastRatio,\n  parseColor,\n  rgbToHex,\n  suggestAccessibleColor,\n  suggestAccessibleToken,\n  wcagLevel,\n  type RGB,\n  type TokenCandidate,\n} from '@/lib/contrast';\nimport { themeTokens } from '@/tokens';\nimport { Chip, Icon, SectionHeader, Tag, type TagType } from '@/ui';\n\nimport { useUxm } from '../lib/context';\n\nimport type { ComponentDef } from '../lib/types';\n\nconst colorDist = (a: RGB, b: RGB) => {\n  const dr = a.r - b.r;\n  const dg = a.g - b.g;\n  const db = a.b - b.b;\n  return dr * dr + dg * dg + db * db;\n};\n\ninterface Pair {\n  fgKey: string;\n  fgLabel: string;\n  fgValue: string;\n  bgKey: string | null;\n  bgLabel: string;\n  bgValue: string;\n}\n\ntype Level = ReturnType<typeof wcagLevel>;\n\ninterface Suggestion {\n  value: string; // string to pass to setOverride — either `var(--...)` or `#hex`\n  label: string; // display label, e.g. \"Text\" or \"#1C1C1C\"\n}\n\ninterface Result {\n  pair: Pair;\n  ratio: number | null;\n  level: Level | null;\n  suggestion: Suggestion | null;\n}\n\n// Tokens that are valid foreground candidates (exclude pure backgrounds/borders).\nconst FOREGROUND_TOKEN_GROUPS = new Set(['text', 'accent', 'semantic', 'highlights']);\nconst FOREGROUND_TOKEN_VARIABLES = themeTokens\n  .filter((t) => FOREGROUND_TOKEN_GROUPS.has(t.group))\n  .map((t) => ({ variable: t.variable, name: t.name }));\n\n// Keys we treat as text-like foregrounds (text contrast matters, WCAG 1.4.3).\n// Per-state color knobs (`hoverColor`, `activeColor`, `focusColor`,\n// `disabledColor`) are included so atoms with state coverage get WCAG\n// evaluation in every state, paired against the matching state bg or the\n// fall-through to default `backgroundColor`.\nconst FOREGROUND_KEYS = new Set([\n  'color', 'textColor', 'iconColor', 'labelColor', 'checkColor',\n  'titleColor', 'descriptionColor',\n  'hoverColor', 'activeColor', 'focusColor', 'disabledColor',\n  'errorColor', 'trendUpColor', 'trendDownColor',\n  'chipText', 'chipActiveText', 'activeText', 'inactiveText',\n  'headerText', 'pillTextColor',\n  // FormField's per-tint label colours (labelColor was split into these —\n  // `muted` especially needs contrast coverage).\n  'tintStrongColor', 'tintDefaultColor', 'tintMutedColor',\n]);\n// Keys we treat as backgrounds for pairing.\nconst BACKGROUND_KEYS = new Set([\n  'backgroundColor', 'bgColor',\n  'pillColor', 'chipBg', 'chipActiveBg', 'activeBg', 'inactiveBg',\n  'headerBg', 'rowBg', 'rowHoverBg',\n]);\nconst FOREGROUND_SUFFIX_RE = /(?:^|[a-z0-9])(Text|TextColor)$/;\nconst BACKGROUND_SUFFIX_RE = /(?:^|[a-z0-9])(Bg|Background|BackgroundColor)$/i;\nconst MAIN_BG_KEYS = ['backgroundColor', 'bgColor'];\n\nfunction isForeground(key: string): boolean {\n  return FOREGROUND_KEYS.has(key) || FOREGROUND_SUFFIX_RE.test(key);\n}\nfunction isBackground(key: string): boolean {\n  return BACKGROUND_KEYS.has(key) || BACKGROUND_SUFFIX_RE.test(key);\n}\nconst CANVAS_BG_FALLBACK = 'var(--color-card)';\n\nfunction stemOf(key: string, side: 'fg' | 'bg'): string {\n  let s = key;\n  if (side === 'fg') {\n    s = s.replace(/TextColor$/, '').replace(/Text$/, '').replace(/Color$/, '');\n  } else {\n    s = s.replace(/BackgroundColor$/i, '').replace(/Background$/i, '').replace(/Bg$/, '').replace(/Color$/, '');\n  }\n  return s.toLowerCase();\n}\n\nfunction findPairs(\n  def: ComponentDef,\n  resolve: (key: string, fallback: string | number | boolean) => string | number | boolean,\n): Pair[] {\n  const visibleColorProps = def.styleProperties.filter((p) => {\n    if (p.control !== 'color') return false;\n    if (!p.showWhen) return true;\n    for (const [vKey, vVal] of Object.entries(p.showWhen)) {\n      const fallback = def.layoutVariants.find((v) => v.key === vKey)?.defaultValue ?? '';\n      // string[] = \"match any of\", mirroring the properties panel's matcher.\n      const allowed = Array.isArray(vVal) ? vVal : [vVal];\n      if (!allowed.includes(resolve(vKey, fallback) as string)) return false;\n    }\n    return true;\n  });\n  const bgProps = visibleColorProps.filter((p) => isBackground(p.key));\n  const fgProps = visibleColorProps.filter((p) => isForeground(p.key));\n\n  // Default `backgroundColor` for fall-through pairing — search across ALL\n  // bg color knobs (not just the currently-visible set). In non-default\n  // states like Focus or Disabled the default bg knob is hidden via\n  // `showWhen`, but the actual visible background on the canvas is still\n  // the default bg (state changes only the ring / opacity / text). So we\n  // resolve against the default bg's value rather than dropping to canvas.\n  const allBgProps = def.styleProperties.filter(\n    (p) => p.control === 'color' && isBackground(p.key),\n  );\n  const mainBgProp =\n    bgProps.find((p) => MAIN_BG_KEYS.includes(p.key)) ??\n    allBgProps.find((p) => MAIN_BG_KEYS.includes(p.key));\n\n  const pairs: Pair[] = [];\n  for (const fg of fgProps) {\n    const stem = stemOf(fg.key, 'fg');\n    let bg = bgProps.find((b) => stemOf(b.key, 'bg') === stem);\n    if (!bg) bg = mainBgProp;\n    const fgValue = String(resolve(fg.key, fg.defaultValue));\n    const bgValue = bg ? String(resolve(bg.key, bg.defaultValue)) : CANVAS_BG_FALLBACK;\n    pairs.push({\n      fgKey: fg.key,\n      fgLabel: fg.label,\n      fgValue,\n      bgKey: bg?.key ?? null,\n      bgLabel: bg?.label ?? 'Canvas',\n      bgValue,\n    });\n  }\n  return pairs;\n}\n\nexport function WcagPanel({ def }: { def: ComponentDef }) {\n  const { theme, selectedId, getOverrides, setOverride, getCurrentVariants } = useUxm();\n  const scopeRef = useRef<HTMLDivElement>(null);\n  const [results, setResults] = useState<Result[]>([]);\n\n  const overrides = getOverrides(selectedId);\n  const currentVariants = getCurrentVariants();\n  const overridesKey = JSON.stringify({\n    colors: Object.fromEntries(\n      def.styleProperties\n        .filter((p) => p.control === 'color')\n        .map((p) => [p.key, overrides[p.key]]),\n    ),\n    variants: Object.fromEntries(\n      def.layoutVariants.map((v) => [v.key, currentVariants[v.key]]),\n    ),\n  });\n\n  useLayoutEffect(() => {\n    // Variant-aware resolver: variants live in ephemeral session state,\n    // styleProperty edits live in persisted overrides. `findPairs` uses\n    // this for both `showWhen` evaluation (variant keys) and color value\n    // lookup (styleProperty keys).\n    const variantKeys = new Set(def.layoutVariants.map((v) => v.key));\n    const resolve = (key: string, fallback: string | number | boolean) => {\n      if (variantKeys.has(key)) return currentVariants[key] ?? fallback;\n      return overrides[key] ?? fallback;\n    };\n    const pairs = findPairs(def, resolve);\n    const scope = scopeRef.current;\n\n    const tokenCandidates: TokenCandidate[] = FOREGROUND_TOKEN_VARIABLES\n      .map(({ variable, name }) => {\n        const rgb = parseColor(variable, scope);\n        return rgb ? { variable, name, rgb } : null;\n      })\n      .filter((t): t is TokenCandidate => t !== null);\n\n    const computed: Result[] = pairs.map((pair) => {\n      const fg = parseColor(pair.fgValue, scope);\n      const bg = parseColor(pair.bgValue, scope);\n      if (!fg || !bg) {\n        return { pair, ratio: null, level: null, suggestion: null };\n      }\n      const ratio = contrastRatio(fg, bg);\n      const level = wcagLevel(ratio);\n      let suggestion: Suggestion | null = null;\n      if (level === 'fail' || level === 'AA-large') {\n        const improvers = tokenCandidates.filter(\n          (t) => contrastRatio(t.rgb, bg) > ratio + 0.05,\n        );\n        const token =\n          suggestAccessibleToken(fg, bg, 4.5, improvers) ??\n          (level === 'fail' ? suggestAccessibleToken(fg, bg, 3, improvers) : null);\n\n        if (token) {\n          suggestion = { value: token.variable, label: token.name };\n        } else {\n          const hex45 = suggestAccessibleColor(fg, bg, 4.5);\n          const hex = hex45 ?? (level === 'fail' ? suggestAccessibleColor(fg, bg, 3) : null);\n          if (hex && contrastRatio(hex, bg) > ratio + 0.05) {\n            // If any improving semantic token is visually close to the hex fallback, prefer it.\n            const nearby = [...improvers]\n              .map((t) => ({ t, dist: colorDist(hex, t.rgb) }))\n              .sort((a, b) => a.dist - b.dist)[0];\n            const NEAR_THRESHOLD = 60 * 60 * 3; // ≈60 RGB units total deviation\n            if (nearby && nearby.dist < NEAR_THRESHOLD) {\n              suggestion = { value: nearby.t.variable, label: nearby.t.name };\n            } else {\n              const hexStr = rgbToHex(hex);\n              suggestion = { value: hexStr, label: hexStr.toUpperCase() };\n            }\n          }\n        }\n      }\n      return { pair, ratio, level, suggestion };\n    });\n    setResults(computed);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [def.id, overridesKey, theme]);\n\n  if (results.length === 0) return <div ref={scopeRef} />;\n\n  return (\n    <div ref={scopeRef} className=\"mb-6\">\n      <SectionHeader>Accessibility</SectionHeader>\n      <div className=\"space-y-2\">\n        {results.map(({ pair, ratio, level, suggestion }) => {\n          const failing = level === 'fail' || level === 'AA-large';\n          return (\n            <div\n              key={pair.fgKey}\n              className=\"rounded-lg border border-border bg-surface p-3\"\n            >\n              <div className=\"flex items-center justify-between gap-2 mb-2\">\n                <div className=\"flex items-center gap-2 min-w-0\">\n                  <div className=\"flex shrink-0\">\n                    <span\n                      className=\"h-4 w-4 rounded-l-[4px] border border-border\"\n                      style={{ backgroundColor: pair.bgValue }}\n                    />\n                    <span\n                      className=\"h-4 w-4 rounded-r-[4px] border border-l-0 border-border\"\n                      style={{ backgroundColor: pair.fgValue }}\n                    />\n                  </div>\n                  <span className=\"text-[11px] text-text-strong truncate\">\n                    {pair.fgLabel} / {pair.bgLabel}\n                  </span>\n                </div>\n                <LevelBadge level={level} ratio={ratio} />\n              </div>\n              {failing && suggestion && (\n                <Chip\n                  mode=\"suggestion\"\n                  onClick={() => setOverride(selectedId, pair.fgKey, suggestion.value)}\n                  iconLeft={<Icon glyph=\"sparkle\" size={12} strokeWidth={2} />}\n                >\n                  Quick fix → {suggestion.label}\n                </Chip>\n              )}\n              {level === null && (\n                <p className=\"text-[10px] text-text-muted\">\n                  Couldn&apos;t evaluate (unresolvable colour).\n                </p>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n// Render the WCAG level + contrast ratio as a Tag. The level→type mapping:\n//   AAA, AA       → success  (passing)\n//   AA-large      → warning  (passing only at ≥18pt — borderline)\n//   fail          → danger   (under 4.5:1)\n// Falls back to an em-dash placeholder when contrast can't be evaluated\n// (e.g. unresolvable colour token).\nconst LEVEL_TAG_TYPE: Record<Level, TagType> = {\n  AAA: 'success',\n  AA: 'success',\n  'AA-large': 'warning',\n  fail: 'danger',\n};\n\nconst LEVEL_LABEL: Record<Level, string> = {\n  AAA: 'AAA',\n  AA: 'AA',\n  'AA-large': 'AA-large',\n  fail: 'Fail',\n};\n\nfunction LevelBadge({ level, ratio }: { level: Level | null; ratio: number | null }) {\n  if (level === null || ratio === null) {\n    return <span className=\"text-[10px] text-text-subtle\">—</span>;\n  }\n  return (\n    <Tag type={LEVEL_TAG_TYPE[level]} style={{ flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}>\n      {LEVEL_LABEL[level]} · {ratio.toFixed(2)}\n    </Tag>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/studio/shell/wcag-panel.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentDef } from '../lib/types.js';
+export declare function WcagPanel({ def }: {
+    def: ComponentDef;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=wcag-panel.d.ts.map

package/dist/studio/shell/wcag-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wcag-panel.d.ts","sourceRoot":"","sources":["../../../src/studio/shell/wcag-panel.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAoIjD,wBAAgB,SAAS,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,YAAY,CAAA;CAAE,2CAoIvD"}