@viax.io/uxm 4.36.0

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

@@ -0,0 +1,257 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useLayoutEffect, useState } from "react";
+import {
+  contrastRatio,
+  parseColor,
+  rgbToHex,
+  suggestAccessibleColor,
+  suggestAccessibleToken,
+  wcagLevel
+} from "../../lib/contrast.js";
+import { themeTokens } from "../../tokens/index.js";
+import { Chip, Icon, SectionHeader, Tag } from "../../ui/index.js";
+import { useUxm } from "../lib/context.js";
+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 = 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 } = useUxm();
+  const scopeRef = useRef(null);
+  const [results, setResults] = 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]])
+    )
+  });
+  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 = parseColor(variable, scope);
+      return rgb ? { variable, name, rgb } : null;
+    }).filter((t) => t !== null);
+    const computed = pairs.map((pair) => {
+      const fg = parseColor(pair.fgValue, scope);
+      const bg = parseColor(pair.bgValue, scope);
+      if (!fg || !bg) {
+        return { pair, ratio: null, level: null, suggestion: null };
+      }
+      const ratio = contrastRatio(fg, bg);
+      const level = wcagLevel(ratio);
+      let suggestion = null;
+      if (level === "fail" || level === "AA-large") {
+        const improvers = tokenCandidates.filter(
+          (t) => contrastRatio(t.rgb, bg) > ratio + 0.05
+        );
+        const token = suggestAccessibleToken(fg, bg, 4.5, improvers) ?? (level === "fail" ? suggestAccessibleToken(fg, bg, 3, improvers) : null);
+        if (token) {
+          suggestion = { value: token.variable, label: token.name };
+        } else {
+          const hex45 = suggestAccessibleColor(fg, bg, 4.5);
+          const hex = hex45 ?? (level === "fail" ? suggestAccessibleColor(fg, bg, 3) : null);
+          if (hex && 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 = 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__ */ jsx("div", { ref: scopeRef });
+  return /* @__PURE__ */ jsxs("div", { ref: scopeRef, className: "mb-6", children: [
+    /* @__PURE__ */ jsx(SectionHeader, { children: "Accessibility" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: results.map(({ pair, ratio, level, suggestion }) => {
+      const failing = level === "fail" || level === "AA-large";
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "rounded-lg border border-border bg-surface p-3",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex shrink-0", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "h-4 w-4 rounded-l-[4px] border border-border",
+                      style: { backgroundColor: pair.bgValue }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "h-4 w-4 rounded-r-[4px] border border-l-0 border-border",
+                      style: { backgroundColor: pair.fgValue }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-text-strong truncate", children: [
+                  pair.fgLabel,
+                  " / ",
+                  pair.bgLabel
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(LevelBadge, { level, ratio })
+            ] }),
+            failing && suggestion && /* @__PURE__ */ jsxs(
+              Chip,
+              {
+                mode: "suggestion",
+                onClick: () => setOverride(selectedId, pair.fgKey, suggestion.value),
+                iconLeft: /* @__PURE__ */ jsx(Icon, { glyph: "sparkle", size: 12, strokeWidth: 2 }),
+                children: [
+                  "Quick fix \u2192 ",
+                  suggestion.label
+                ]
+              }
+            ),
+            level === null && /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[10px] text-text-subtle", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsxs(Tag, { type: LEVEL_TAG_TYPE[level], style: { flexShrink: 0, fontVariantNumeric: "tabular-nums" }, children: [
+    LEVEL_LABEL[level],
+    " \xB7 ",
+    ratio.toFixed(2)
+  ] });
+}
+export {
+  WcagPanel
+};
+//# sourceMappingURL=wcag-panel.js.map

package/dist/studio/shell/wcag-panel.js.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/studio.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:var(--font-inter);--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-xs:.125rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-inter);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-surface-alt:var(--color-surface-alt);--color-card:var(--color-card);--color-text:var(--color-text);--color-text-strong:var(--color-text-strong);--color-text-muted:var(--color-text-muted);--color-text-subtle:var(--color-text-subtle);--color-text-inverse:var(--color-text-inverse);--color-border:var(--color-border);--color-accent-subtle:var(--color-accent-subtle);--color-accent-light:var(--color-accent-light);--color-accent:var(--color-accent);--color-accent-bold:var(--color-accent-bold);--color-highlight-warm:var(--color-highlight-warm);--color-highlight-cool:var(--color-highlight-cool);--color-on-highlight-warm:var(--color-on-highlight-warm);--color-on-highlight-cool:var(--color-on-highlight-cool);--color-category-composite:var(--color-category-composite);--color-category-diagram:var(--color-category-diagram);--color-danger-text:var(--color-danger-text);--color-success-bg:var(--color-success-bg);--color-success-text:var(--color-success-text);--color-success-border:var(--color-success-border);--color-info-bg:var(--color-info-bg);--color-info-text:var(--color-info-text);--color-info-border:var(--color-info-border);--color-warning-bg:var(--color-warning-bg);--color-warning-text:var(--color-warning-text);--color-warning-border:var(--color-warning-border);--color-danger-bg:var(--color-danger-bg);--color-danger-border:var(--color-danger-border)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.z-\[9999\]{z-index:9999}.col-span-2{grid-column:span 2/span 2}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-5{margin-inline:calc(var(--spacing) * -5)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-2\.5{margin-top:calc(var(--spacing) * 2.5)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.-ml-3{margin-left:calc(var(--spacing) * -3)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.list-item{display:list-item}.table{display:table}.table-column{display:table-column}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-8{height:calc(var(--spacing) * 8)}.h-full{height:100%}.max-h-\[280px\]{max-height:280px}.min-h-0{min-height:0}.min-h-\[120px\]{min-height:120px}.min-h-full{min-height:100%}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-8{width:calc(var(--spacing) * 8)}.w-44{width:calc(var(--spacing) * 44)}.w-\[58px\]{width:58px}.w-\[220px\]{width:220px}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-col-resize{cursor:col-resize}.cursor-pointer{cursor:pointer}.cursor-row-resize{cursor:row-resize}.resize{resize:both}.\[grid-template-columns\:repeat\(auto-fit\,minmax\(220px\,1fr\)\)\]{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-y-4{row-gap:calc(var(--spacing) * 4)}.self-center{align-self:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-l-\[4px\]{border-top-left-radius:4px;border-bottom-left-radius:4px}.rounded-r-\[4px\]{border-top-right-radius:4px;border-bottom-right-radius:4px}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-accent-bold\/30{border-color:var(--color-accent-bold)}@supports (color:color-mix(in lab, red, red)){.border-accent-bold\/30{border-color:color-mix(in oklab, var(--color-accent-bold) 30%, transparent)}}.border-border,.border-border\/60{border-color:var(--color-border)}@supports (color:color-mix(in lab, red, red)){.border-border\/60{border-color:color-mix(in oklab, var(--color-border) 60%, transparent)}}.border-text\/20{border-color:var(--color-text)}@supports (color:color-mix(in lab, red, red)){.border-text\/20{border-color:color-mix(in oklab, var(--color-text) 20%, transparent)}}.bg-accent-subtle,.bg-accent-subtle\/40{background-color:var(--color-accent-subtle)}@supports (color:color-mix(in lab, red, red)){.bg-accent-subtle\/40{background-color:color-mix(in oklab, var(--color-accent-subtle) 40%, transparent)}}.bg-accent-subtle\/50{background-color:var(--color-accent-subtle)}@supports (color:color-mix(in lab, red, red)){.bg-accent-subtle\/50{background-color:color-mix(in oklab, var(--color-accent-subtle) 50%, transparent)}}.bg-card{background-color:var(--color-card)}.bg-surface{background-color:var(--color-surface)}.bg-surface-alt{background-color:var(--color-surface-alt)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-contain{object-fit:contain}.p-3{padding:calc(var(--spacing) * 3)}.p-6{padding:calc(var(--spacing) * 6)}.p-12{padding:calc(var(--spacing) * 12)}.px-1{padding-inline:var(--spacing)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-8{padding-block:calc(var(--spacing) * 8)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pr-1{padding-right:var(--spacing)}.pr-5{padding-right:calc(var(--spacing) * 5)}.pb-1{padding-bottom:var(--spacing)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-\[66px\]{padding-left:66px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[38px\]{font-size:38px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.06em\]{--tw-tracking:-.06em;letter-spacing:-.06em}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-all{word-break:break-all}.whitespace-pre-wrap{white-space:pre-wrap}.text-accent{color:var(--color-accent)}.text-accent-bold{color:var(--color-accent-bold)}.text-text{color:var(--color-text)}.text-text-muted{color:var(--color-text-muted)}.text-text-strong{color:var(--color-text-strong)}.text-text-subtle{color:var(--color-text-subtle)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.\[file\:line\]{file:line}@media (hover:hover){.group-hover\:bg-accent\/30:is(:where(.group):hover *){background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.group-hover\:bg-accent\/30:is(:where(.group):hover *){background-color:color-mix(in oklab, var(--color-accent) 30%, transparent)}}}.group-active\:bg-accent\/50:is(:where(.group):active *){background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.group-active\:bg-accent\/50:is(:where(.group):active *){background-color:color-mix(in oklab, var(--color-accent) 50%, transparent)}}@media (hover:hover){.hover\:border-accent\/40:hover{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.hover\:border-accent\/40:hover{border-color:color-mix(in oklab, var(--color-accent) 40%, transparent)}}.hover\:bg-surface-alt:hover{background-color:var(--color-surface-alt)}.hover\:text-text-strong:hover{color:var(--color-text-strong)}}.focus\:border-accent:focus{border-color:var(--color-accent)}@container (min-width:480px){.\@\[480px\]\:inline{display:inline}}@container (min-width:640px){.\@\[640px\]\:block{display:block}}}:root{--color-surface:#f8f7f6;--color-surface-alt:#f2f1f0;--color-card:#fff;--color-text:#1e1e1e;--color-text-strong:#4a4a4a;--color-text-muted:#9ca3af;--color-text-subtle:#cbd5e1;--color-text-inverse:#fff;--color-border:#ebebea;--color-accent-subtle:#e6ffd1;--color-accent-light:#90e9b8;--color-accent:#3ecc87;--color-accent-bold:#1e7150;--color-drop-target:var(--color-accent);--color-highlight-warm:#fcd0a1;--color-highlight-cool:#c3bef7;--color-on-highlight-warm:#7c6b3e;--color-on-highlight-cool:#5b54a0;--color-category-composite:#f472b6;--color-category-diagram:#6366f1;--color-success-bg:#f0fdf4;--color-success-text:#166534;--color-success-border:#bbf7d0;--color-info-bg:#eff6ff;--color-info-text:#1e40af;--color-info-border:#bfdbfe;--color-warning-bg:#fffbeb;--color-warning-text:#92400e;--color-warning-border:#fde68a;--color-danger-bg:#fef2f2;--color-danger-text:#991b1b;--color-danger-border:#fecaca;--color-canvas-dot:#e0e0e0;--color-preview-bg-light:#fff;--color-preview-bg-dark:#232220;--color-preview-border-light:#ebebea;--color-preview-border-dark:#444240;--shadow-xs:0 1px 2px #0000000f;--shadow-sm:0 1px 3px #0000001a;--shadow-md:0 4px 12px #0000000f, 0 1px 3px #0000000a;--shadow-lg:0 6px 20px #0000001a;--shadow-xl:0 8px 24px #0000001f;--shadow-2xl:0 24px 48px #0000002e;--shadow-card:0 1px 2px #0000000a, 0 4px 12px #0000000a;--shadow-modal:var(--shadow-2xl);--font-inter:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}[data-theme=dark]{--color-surface:#232220;--color-surface-alt:#2a2927;--color-card:#1b1a18;--color-text:#f5f5f5;--color-text-strong:#c8c8c8;--color-text-muted:#a3a3a3;--color-text-subtle:#6e6e6e;--color-text-inverse:#1b1a18;--color-border:#444240;--color-accent-subtle:#1a4a2c;--color-accent-light:#3aa36a;--color-accent:#4fd99a;--color-accent-bold:#8ae6b4;--color-highlight-warm:#8a5a2b;--color-highlight-cool:#4d4a7f;--color-on-highlight-warm:#fcd0a1;--color-on-highlight-cool:#c3bef7;--color-category-composite:#f9a8d4;--color-category-diagram:#818cf8;--color-success-bg:#1a3924;--color-success-text:#86efac;--color-success-border:#2f6040;--color-info-bg:#1a2e4c;--color-info-text:#93c5fd;--color-info-border:#31507f;--color-warning-bg:#3a2d1b;--color-warning-text:#fcd34d;--color-warning-border:#5e4d30;--color-danger-bg:#3a2022;--color-danger-text:#fca5a5;--color-danger-border:#5e3034;--color-canvas-dot:#383634;--shadow-xs:0 1px 2px #0000004d;--shadow-sm:0 1px 3px #0006;--shadow-md:0 4px 12px #00000059, 0 1px 3px #00000040;--shadow-lg:0 6px 20px #00000073;--shadow-xl:0 8px 24px #00000080;--shadow-2xl:0 24px 48px #0000008c;--shadow-card:0 1px 2px #0000004d, 0 4px 12px #00000040}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

package/dist/studio/theme-sync.cjs

@@ -0,0 +1,37 @@
+"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 theme_sync_exports = {};
+__export(theme_sync_exports, {
+  ThemeSync: () => ThemeSync
+});
+module.exports = __toCommonJS(theme_sync_exports);
+var import_react = require("react");
+var import_context = require("./lib/context.cjs");
+function ThemeSync() {
+  const { theme } = (0, import_context.useUxm)();
+  (0, import_react.useEffect)(() => {
+    document.documentElement.dataset.theme = theme;
+  }, [theme]);
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeSync
+});
+//# sourceMappingURL=theme-sync.cjs.map

package/dist/studio/theme-sync.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/studio/theme-sync.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useUxm } from './lib/context';\n\n/**\n * Applies the workbench theme to the document so `[data-theme=\"dark\"]` token\n * overrides and `useGlobalTheme` consumers react to the in-app theme toggle.\n * Rendered by `UxmApp` only when the studio owns the theme (standalone portal,\n * i.e. not `embed`) — an embedded host (e.g. modo) drives `data-theme` itself.\n */\nexport function ThemeSync() {\n  const { theme } = useUxm();\n\n  useEffect(() => {\n    document.documentElement.dataset.theme = theme;\n  }, [theme]);\n\n  return null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAE1B,qBAAuB;AAQhB,SAAS,YAAY;AAC1B,QAAM,EAAE,MAAM,QAAI,uBAAO;AAEzB,8BAAU,MAAM;AACd,aAAS,gBAAgB,QAAQ,QAAQ;AAAA,EAC3C,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;","names":[]}

package/dist/studio/theme-sync.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Applies the workbench theme to the document so `[data-theme="dark"]` token
+ * overrides and `useGlobalTheme` consumers react to the in-app theme toggle.
+ * Rendered by `UxmApp` only when the studio owns the theme (standalone portal,
+ * i.e. not `embed`) — an embedded host (e.g. modo) drives `data-theme` itself.
+ */
+export declare function ThemeSync(): null;
+//# sourceMappingURL=theme-sync.d.ts.map

package/dist/studio/theme-sync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-sync.d.ts","sourceRoot":"","sources":["../../src/studio/theme-sync.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,wBAAgB,SAAS,SAQxB"}

package/dist/studio/theme-sync.js

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import { useUxm } from "./lib/context.js";
+function ThemeSync() {
+  const { theme } = useUxm();
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+  }, [theme]);
+  return null;
+}
+export {
+  ThemeSync
+};
+//# sourceMappingURL=theme-sync.js.map

package/dist/studio/theme-sync.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/studio/theme-sync.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useUxm } from './lib/context';\n\n/**\n * Applies the workbench theme to the document so `[data-theme=\"dark\"]` token\n * overrides and `useGlobalTheme` consumers react to the in-app theme toggle.\n * Rendered by `UxmApp` only when the studio owns the theme (standalone portal,\n * i.e. not `embed`) — an embedded host (e.g. modo) drives `data-theme` itself.\n */\nexport function ThemeSync() {\n  const { theme } = useUxm();\n\n  useEffect(() => {\n    document.documentElement.dataset.theme = theme;\n  }, [theme]);\n\n  return null;\n}\n"],"mappings":"AAAA,SAAS,iBAAiB;AAE1B,SAAS,cAAc;AAQhB,SAAS,YAAY;AAC1B,QAAM,EAAE,MAAM,IAAI,OAAO;AAEzB,YAAU,MAAM;AACd,aAAS,gBAAgB,QAAQ,QAAQ;AAAA,EAC3C,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;","names":[]}

package/dist/studio/uxm-app.cjs

@@ -0,0 +1,180 @@
+"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 uxm_app_exports = {};
+__export(uxm_app_exports, {
+  UxmApp: () => UxmApp
+});
+module.exports = __toCommonJS(uxm_app_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_brand_font_styles = require("./brand-font-styles.cjs");
+var import_brand_token_styles = require("./brand-token-styles.cjs");
+var import_favicon_sync = require("./favicon-sync.cjs");
+var import_context = require("./lib/context.cjs");
+var import_registry = require("./lib/registry/index.cjs");
+var import_mobile_gallery = require("./mobile-gallery.cjs");
+var import_canvas = require("./shell/canvas.cjs");
+var import_properties_panel = require("./shell/properties-panel.cjs");
+var import_sidebar = require("./shell/sidebar.cjs");
+var import_theme_sync = require("./theme-sync.cjs");
+const DESKTOP_QUERY = "(min-width: 1024px)";
+function UxmApp({ embed = false, persistence, syncFavicon = false, headerActions }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_context.UxmProvider, { persistence, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_brand_token_styles.BrandTokenStyles, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_brand_font_styles.BrandFontStyles, {}),
+    syncFavicon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_favicon_sync.FaviconSync, {}),
+    !embed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_theme_sync.ThemeSync, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col h-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DemoNotice, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UxmAppShell, { embed, headerActions }) })
+    ] })
+  ] });
+}
+function DemoNotice() {
+  const { capabilities } = (0, import_context.useUxm)();
+  if (capabilities.persist) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      role: "status",
+      className: "bg-accent-subtle text-accent-bold text-xs text-center px-4 py-1.5 border-b border-border",
+      children: "Demo mode \u2014 changes are preview-only and won't be saved."
+    }
+  );
+}
+function UxmAppShell({ embed, headerActions }) {
+  const [isDesktop, setIsDesktop] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(DESKTOP_QUERY);
+    const apply = (matches) => setIsDesktop(matches);
+    apply(mql.matches);
+    const onChange = (e) => apply(e.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  if (!isDesktop) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mobile_gallery.MobileGallery, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DesktopShell, { embed, headerActions });
+}
+function DesktopShell({ embed, headerActions }) {
+  const { selectedId } = (0, import_context.useUxm)();
+  const [orientation, setOrientation] = (0, import_react.useState)("horizontal");
+  const [panelWidth, setPanelWidth] = (0, import_react.useState)(320);
+  const [panelHeight, setPanelHeight] = (0, import_react.useState)(280);
+  const def = (0, import_registry.getComponentDef)(selectedId);
+  const showPropertiesPanel = !!def && (def.styleProperties.length > 0 || def.layoutVariants.length > 0);
+  const dragging = (0, import_react.useRef)(false);
+  const startPos = (0, import_react.useRef)(0);
+  const startSize = (0, import_react.useRef)(0);
+  const dragCleanup = (0, import_react.useRef)(null);
+  const onResizeStart = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+    dragging.current = true;
+    const isHorizontal = orientation === "horizontal";
+    startPos.current = isHorizontal ? e.clientX : e.clientY;
+    startSize.current = isHorizontal ? panelWidth : panelHeight;
+    const onMouseMove = (ev) => {
+      if (!dragging.current) return;
+      if (isHorizontal) {
+        const delta = startPos.current - ev.clientX;
+        setPanelWidth(Math.min(600, Math.max(240, startSize.current + delta)));
+      } else {
+        const delta = startPos.current - ev.clientY;
+        setPanelHeight(Math.min(560, Math.max(160, startSize.current + delta)));
+      }
+    };
+    const cleanup = () => {
+      dragging.current = false;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      dragCleanup.current = null;
+    };
+    const onMouseUp = () => {
+      cleanup();
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
+    document.body.style.userSelect = "none";
+    dragCleanup.current = cleanup;
+  }, [orientation, panelWidth, panelHeight]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      dragCleanup.current?.();
+    };
+  }, []);
+  const toggleOrientation = (0, import_react.useCallback)(
+    () => setOrientation((o) => o === "horizontal" ? "vertical" : "horizontal"),
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `grid h-full text-text ${embed ? "bg-card" : ""}`,
+      style: { gridTemplateColumns: "260px 1fr" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.Sidebar, { embed }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: `flex min-w-0 min-h-0 ${orientation === "horizontal" ? "flex-row" : "flex-col"}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 min-w-0 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_canvas.Canvas, { embed, headerActions }) }),
+              showPropertiesPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: "relative flex shrink-0",
+                  style: orientation === "horizontal" ? { width: panelWidth } : { height: panelHeight },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        onMouseDown: onResizeStart,
+                        className: `absolute z-20 group ${orientation === "horizontal" ? "left-0 top-0 bottom-0 w-1.5 cursor-col-resize" : "left-0 right-0 top-0 h-1.5 cursor-row-resize"}`,
+                        style: orientation === "horizontal" ? { marginLeft: -3 } : { marginTop: -3 },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-full w-full transition-colors group-hover:bg-accent/30 group-active:bg-accent/50" })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_properties_panel.PropertiesPanel,
+                      {
+                        embed,
+                        orientation,
+                        onToggleOrientation: toggleOrientation
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UxmApp
+});
+//# sourceMappingURL=uxm-app.cjs.map