@viax.io/uxm 4.36.0

package/dist/studio/editors/color-picker.cjs

@@ -0,0 +1,300 @@
+"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 color_picker_exports = {};
+__export(color_picker_exports, {
+  ColorPicker: () => ColorPicker
+});
+module.exports = __toCommonJS(color_picker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_tokens = require("../../tokens/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+const groupLabels = {
+  surfaces: "Surfaces",
+  text: "Text",
+  borders: "Borders",
+  accent: "Accent",
+  highlights: "Highlights",
+  semantic: "Semantic"
+};
+const groupOrder = ["surfaces", "text", "borders", "accent", "highlights", "semantic"];
+const GROUP_HEADER_STYLE = {
+  ["--uxm-section-header-title-size"]: "10px",
+  ["--uxm-section-header-margin-bottom"]: "0"
+};
+function groupTokens(tokens) {
+  var _a;
+  const groups = {};
+  for (const t of tokens) {
+    (groups[_a = t.group] ?? (groups[_a] = [])).push(t);
+  }
+  return groupOrder.filter((g) => groups[g]).map((g) => ({ key: g, label: groupLabels[g], tokens: groups[g] }));
+}
+function liveHex(value) {
+  if (typeof document !== "undefined") {
+    const token = (0, import_tokens.findToken)(value);
+    if (token) {
+      const computed = getComputedStyle(document.documentElement).getPropertyValue(token.cssVar).trim();
+      if (/^#[0-9A-Fa-f]{6}$/.test(computed)) return computed;
+    }
+  }
+  return (0, import_tokens.resolveHex)(value);
+}
+function ColorPicker({ label, value, onChange }) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [customMode, setCustomMode] = (0, import_react.useState)(false);
+  const [customHex, setCustomHex] = (0, import_react.useState)("");
+  const [dropdownPos, setDropdownPos] = (0, import_react.useState)({ top: 0, left: 0 });
+  const triggerRef = (0, import_react.useRef)(null);
+  const dropdownRef = (0, import_react.useRef)(null);
+  const nativePickerRef = (0, import_react.useRef)(null);
+  const isNone = value === "none";
+  const token = !isNone && (0, import_tokens.isTokenValue)(value) ? (0, import_tokens.findToken)(value) : void 0;
+  const displayHex = isNone ? "transparent" : liveHex(value);
+  const swatchColor = isNone ? "transparent" : value;
+  const displayLabel = isNone ? "None" : token ? token.name : value;
+  (0, import_react.useEffect)(() => {
+    if (!(0, import_tokens.isTokenValue)(value)) {
+      setCustomHex(value);
+    }
+  }, [value]);
+  const updatePosition = (0, import_react.useCallback)(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setDropdownPos({
+      top: rect.bottom + 4,
+      left: rect.right - 220
+    });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    updatePosition();
+  }, [open, updatePosition]);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    function handleClick(e) {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
+      setOpen(false);
+      setCustomMode(false);
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    function handleKeyDown(e) {
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      setCustomMode(false);
+      triggerRef.current?.focus();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
+  function selectToken(t) {
+    onChange(t.variable);
+    setOpen(false);
+    setCustomMode(false);
+  }
+  function applyCustomHex(hex) {
+    const cleaned = hex.trim();
+    if (/^#[0-9A-Fa-f]{3,8}$/.test(cleaned)) {
+      onChange(cleaned);
+    }
+  }
+  const grouped = groupTokens(import_tokens.themeTokens);
+  const dropdown = open ? (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: dropdownRef,
+        className: "fixed z-[9999] w-[220px] rounded-xl border border-border bg-card shadow-lg overflow-hidden",
+        style: { top: dropdownPos.top, left: dropdownPos.left },
+        children: [
+          !customMode && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-h-[280px] overflow-y-auto py-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                onClick: () => {
+                  onChange("none");
+                  setOpen(false);
+                },
+                className: `flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[12px] transition-colors ${isNone ? "bg-accent-subtle/50 text-text font-medium" : "text-text-strong hover:bg-surface-alt"}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      className: "h-4 w-4 flex-shrink-0 rounded border border-border/60 relative overflow-hidden",
+                      style: { backgroundColor: "transparent" },
+                      "aria-hidden": true,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "span",
+                        {
+                          className: "absolute inset-0",
+                          style: {
+                            background: "linear-gradient(to top right, transparent calc(50% - 1px), var(--color-danger-text) calc(50% - 1px), var(--color-danger-text) calc(50% + 1px), transparent calc(50% + 1px))"
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex-1 truncate", children: "None" }),
+                  isNone && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "check", size: 14, strokeWidth: 2.5, className: "flex-shrink-0 text-accent" })
+                ]
+              }
+            ),
+            grouped.map((group) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 pt-2 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.SectionHeader, { style: GROUP_HEADER_STYLE, children: group.label }) }),
+              group.tokens.map((t) => {
+                const isActive = value === t.variable;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "button",
+                  {
+                    onClick: () => selectToken(t),
+                    className: `flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[12px] transition-colors ${isActive ? "bg-accent-subtle/50 text-text font-medium" : "text-text-strong hover:bg-surface-alt"}`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "span",
+                        {
+                          className: "h-4 w-4 flex-shrink-0 rounded border border-border/60",
+                          style: { backgroundColor: t.variable }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex-1 truncate", children: t.name }),
+                      isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "check", size: 14, strokeWidth: 2.5, className: "flex-shrink-0 text-accent" })
+                    ]
+                  },
+                  t.variable
+                );
+              })
+            ] }, group.key))
+          ] }),
+          customMode && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3 space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  onClick: () => nativePickerRef.current?.click(),
+                  className: "h-8 w-8 flex-shrink-0 rounded-lg border border-border shadow-sm cursor-pointer",
+                  style: { backgroundColor: customHex || displayHex }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  ref: nativePickerRef,
+                  type: "color",
+                  value: customHex || displayHex,
+                  onChange: (e) => {
+                    setCustomHex(e.target.value);
+                    onChange(e.target.value);
+                  },
+                  className: "sr-only"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  type: "text",
+                  value: customHex,
+                  onChange: (e) => {
+                    setCustomHex(e.target.value);
+                    applyCustomHex(e.target.value);
+                  },
+                  onBlur: () => applyCustomHex(customHex),
+                  placeholder: "#000000",
+                  className: "flex-1 rounded-md border border-border bg-surface px-2 py-1.5 text-[12px] font-mono text-text-strong outline-none focus:border-accent"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                onClick: () => setCustomMode(false),
+                className: "w-full text-[11px] text-text-muted hover:text-text-strong transition-colors py-1",
+                children: "\u2190 Back to theme colors"
+              }
+            )
+          ] }),
+          !customMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-t border-border px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              onClick: () => {
+                setCustomMode(true);
+                setCustomHex((0, import_tokens.isTokenValue)(value) ? (0, import_tokens.resolveHex)(value) : value);
+              },
+              className: "flex w-full items-center gap-2 text-[12px] text-text-muted hover:text-text-strong transition-colors",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex h-4 w-4 items-center justify-center rounded border border-dashed border-text/20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "paint-brush", size: 10, strokeWidth: 2 }) }),
+                "Custom color\u2026"
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[13px] text-text-strong flex-1 min-w-0 truncate", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        ref: triggerRef,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        onClick: () => {
+          setOpen(!open);
+          setCustomMode(false);
+        },
+        className: "w-44 shrink-0 flex items-center gap-2 rounded-lg border border-border bg-surface px-2 py-1.5 text-[12px] text-text-strong hover:border-accent/40 transition-colors cursor-pointer",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: "h-4 w-4 flex-shrink-0 rounded border border-border/60 relative overflow-hidden",
+              style: { backgroundColor: swatchColor },
+              children: isNone && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    background: "linear-gradient(to top right, transparent calc(50% - 1px), var(--color-danger-text) calc(50% - 1px), var(--color-danger-text) calc(50% + 1px), transparent calc(50% + 1px))"
+                  },
+                  "aria-hidden": true
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate flex-1 text-left min-w-0", children: displayLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "chevron-down", size: 12, strokeWidth: 2, className: "flex-shrink-0 text-text-subtle" })
+        ]
+      }
+    ),
+    dropdown
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorPicker
+});
+//# sourceMappingURL=color-picker.cjs.map

package/dist/studio/editors/color-picker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/editors/color-picker.tsx"],"sourcesContent":["import { useRef, useState, useEffect, useCallback, type CSSProperties } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { themeTokens, findToken, isTokenValue, resolveHex, type ThemeToken } from '@/tokens';\nimport { Icon } from '@/ui';\nimport { SectionHeader } from '@/ui';\n\ninterface ColorPickerProps {\n  label: string;\n  value: string;\n  onChange: (value: string | number | boolean) => void;\n}\n\nconst groupLabels: Record<string, string> = {\n  surfaces: 'Surfaces',\n  text: 'Text',\n  borders: 'Borders',\n  accent: 'Accent',\n  highlights: 'Highlights',\n  semantic: 'Semantic',\n};\n\nconst groupOrder = ['surfaces', 'text', 'borders', 'accent', 'highlights', 'semantic'];\n\n// SectionHeader override for the dropdown group labels — 10px font\n// (vs. 11px default) and zero margin-bottom because the parent's\n// `pb-1` already owns the spacing.\nconst GROUP_HEADER_STYLE: CSSProperties = {\n  ['--uxm-section-header-title-size' as string]: '10px',\n  ['--uxm-section-header-margin-bottom' as string]: '0',\n};\n\nfunction groupTokens(tokens: ThemeToken[]) {\n  const groups: Record<string, ThemeToken[]> = {};\n  for (const t of tokens) {\n    (groups[t.group] ??= []).push(t);\n  }\n  return groupOrder.filter((g) => groups[g]).map((g) => ({ key: g, label: groupLabels[g], tokens: groups[g] }));\n}\n\n/**\n * Resolve a token reference to its CURRENT computed hex — brand- and\n * theme-aware — so the custom picker / native input start from the applied\n * value, not the library's static default. Falls back to the static token hex,\n * then the raw value (SSR / unresolved). Swatch markers paint the `var(...)`\n * directly so CSS resolves them live; this is only for the hex-typed surfaces.\n */\nfunction liveHex(value: string): string {\n  if (typeof document !== 'undefined') {\n    const token = findToken(value);\n    if (token) {\n      const computed = getComputedStyle(document.documentElement)\n        .getPropertyValue(token.cssVar)\n        .trim();\n      if (/^#[0-9A-Fa-f]{6}$/.test(computed)) return computed;\n    }\n  }\n  return resolveHex(value);\n}\n\nexport function ColorPicker({ label, value, onChange }: ColorPickerProps) {\n  const [open, setOpen] = useState(false);\n  const [customMode, setCustomMode] = useState(false);\n  const [customHex, setCustomHex] = useState('');\n  const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0 });\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const nativePickerRef = useRef<HTMLInputElement>(null);\n\n  const isNone = value === 'none';\n  const token = !isNone && isTokenValue(value) ? findToken(value) : undefined;\n  // Hex for the custom picker / native input (must be a literal hex), resolved\n  // live so it reflects the applied brand.\n  const displayHex = isNone ? 'transparent' : liveHex(value);\n  // Colour for the visible swatch marker: paint the token's `var(...)` directly\n  // so CSS resolves the applied brand value (and current theme); a raw hex\n  // value passes through unchanged.\n  const swatchColor = isNone ? 'transparent' : value;\n  const displayLabel = isNone ? 'None' : token ? token.name : value;\n\n  // Sync custom hex field when value changes externally\n  useEffect(() => {\n    if (!isTokenValue(value)) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional external-value → custom-hex sync\n      setCustomHex(value);\n    }\n  }, [value]);\n\n  // Position dropdown relative to trigger\n  const updatePosition = useCallback(() => {\n    if (!triggerRef.current) return;\n    const rect = triggerRef.current.getBoundingClientRect();\n    setDropdownPos({\n      top: rect.bottom + 4,\n      left: rect.right - 220,\n    });\n  }, []);\n\n  useEffect(() => {\n    if (!open) return;\n    updatePosition();\n  }, [open, updatePosition]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!open) return;\n    function handleClick(e: MouseEvent) {\n      const target = e.target as Node;\n      if (\n        triggerRef.current?.contains(target) ||\n        dropdownRef.current?.contains(target)\n      ) return;\n      setOpen(false);\n      setCustomMode(false);\n    }\n    document.addEventListener('mousedown', handleClick);\n    return () => document.removeEventListener('mousedown', handleClick);\n  }, [open]);\n\n  // Close on Escape, restoring focus to the trigger\n  useEffect(() => {\n    if (!open) return;\n    function handleKeyDown(e: KeyboardEvent) {\n      if (e.key !== 'Escape') return;\n      setOpen(false);\n      setCustomMode(false);\n      triggerRef.current?.focus();\n    }\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open]);\n\n  function selectToken(t: ThemeToken) {\n    onChange(t.variable);\n    setOpen(false);\n    setCustomMode(false);\n  }\n\n  function applyCustomHex(hex: string) {\n    const cleaned = hex.trim();\n    if (/^#[0-9A-Fa-f]{3,8}$/.test(cleaned)) {\n      onChange(cleaned);\n    }\n  }\n\n  const grouped = groupTokens(themeTokens);\n\n  const dropdown = open\n    ? createPortal(\n        <div\n          ref={dropdownRef}\n          className=\"fixed z-[9999] w-[220px] rounded-xl border border-border bg-card shadow-lg overflow-hidden\"\n          style={{ top: dropdownPos.top, left: dropdownPos.left }}\n        >\n          {/* Theme tokens list */}\n          {!customMode && (\n            <div className=\"max-h-[280px] overflow-y-auto py-1\">\n              {/* \"None\" — explicit no-color sentinel; renderers treat as transparent. */}\n              <button\n                onClick={() => { onChange('none'); setOpen(false); }}\n                className={`flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[12px] transition-colors ${\n                  isNone\n                    ? 'bg-accent-subtle/50 text-text font-medium'\n                    : 'text-text-strong hover:bg-surface-alt'\n                }`}\n              >\n                <span\n                  className=\"h-4 w-4 flex-shrink-0 rounded border border-border/60 relative overflow-hidden\"\n                  style={{ backgroundColor: 'transparent' }}\n                  aria-hidden\n                >\n                  <span\n                    className=\"absolute inset-0\"\n                    style={{\n                      background: 'linear-gradient(to top right, transparent calc(50% - 1px), var(--color-danger-text) calc(50% - 1px), var(--color-danger-text) calc(50% + 1px), transparent calc(50% + 1px))',\n                    }}\n                  />\n                </span>\n                <span className=\"flex-1 truncate\">None</span>\n                {isNone && (\n                  <Icon glyph=\"check\" size={14} strokeWidth={2.5} className=\"flex-shrink-0 text-accent\" />\n                )}\n              </button>\n              {grouped.map((group) => (\n                <div key={group.key}>\n                  <div className=\"px-3 pt-2 pb-1\">\n                    {/* Group label uses the SectionHeader atom with two\n                        size overrides: 10px font (vs. 11px default) for\n                        the dense dropdown context, and 0 margin-bottom\n                        because the surrounding `pb-1` owns the spacing. */}\n                    <SectionHeader style={GROUP_HEADER_STYLE}>\n                      {group.label}\n                    </SectionHeader>\n                  </div>\n                  {group.tokens.map((t) => {\n                    const isActive = value === t.variable;\n                    return (\n                      <button\n                        key={t.variable}\n                        onClick={() => selectToken(t)}\n                        className={`flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[12px] transition-colors ${\n                          isActive\n                            ? 'bg-accent-subtle/50 text-text font-medium'\n                            : 'text-text-strong hover:bg-surface-alt'\n                        }`}\n                      >\n                        <span\n                          className=\"h-4 w-4 flex-shrink-0 rounded border border-border/60\"\n                          style={{ backgroundColor: t.variable }}\n                        />\n                        <span className=\"flex-1 truncate\">{t.name}</span>\n                        {isActive && (\n                          <Icon glyph=\"check\" size={14} strokeWidth={2.5} className=\"flex-shrink-0 text-accent\" />\n                        )}\n                      </button>\n                    );\n                  })}\n                </div>\n              ))}\n            </div>\n          )}\n\n          {/* Custom color section */}\n          {customMode && (\n            <div className=\"p-3 space-y-2\">\n              <div className=\"flex items-center gap-2\">\n                <button\n                  onClick={() => nativePickerRef.current?.click()}\n                  className=\"h-8 w-8 flex-shrink-0 rounded-lg border border-border shadow-sm cursor-pointer\"\n                  style={{ backgroundColor: customHex || displayHex }}\n                />\n                <input\n                  ref={nativePickerRef}\n                  type=\"color\"\n                  value={customHex || displayHex}\n                  onChange={(e) => {\n                    setCustomHex(e.target.value);\n                    onChange(e.target.value);\n                  }}\n                  className=\"sr-only\"\n                />\n                <input\n                  type=\"text\"\n                  value={customHex}\n                  onChange={(e) => {\n                    setCustomHex(e.target.value);\n                    applyCustomHex(e.target.value);\n                  }}\n                  onBlur={() => applyCustomHex(customHex)}\n                  placeholder=\"#000000\"\n                  className=\"flex-1 rounded-md border border-border bg-surface px-2 py-1.5 text-[12px] font-mono text-text-strong outline-none focus:border-accent\"\n                />\n              </div>\n              <button\n                onClick={() => setCustomMode(false)}\n                className=\"w-full text-[11px] text-text-muted hover:text-text-strong transition-colors py-1\"\n              >\n                ← Back to theme colors\n              </button>\n            </div>\n          )}\n\n          {/* Footer: switch to custom */}\n          {!customMode && (\n            <div className=\"border-t border-border px-3 py-2\">\n              <button\n                onClick={() => {\n                  setCustomMode(true);\n                  setCustomHex(isTokenValue(value) ? resolveHex(value) : value);\n                }}\n                className=\"flex w-full items-center gap-2 text-[12px] text-text-muted hover:text-text-strong transition-colors\"\n              >\n                <span className=\"flex h-4 w-4 items-center justify-center rounded border border-dashed border-text/20\">\n                  <Icon glyph=\"paint-brush\" size={10} strokeWidth={2} />\n                </span>\n                Custom color…\n              </button>\n            </div>\n          )}\n        </div>,\n        document.body,\n      )\n    : null;\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      <span className=\"text-[13px] text-text-strong flex-1 min-w-0 truncate\">{label}</span>\n\n      {/* Trigger button */}\n      <button\n        ref={triggerRef}\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        onClick={() => { setOpen(!open); setCustomMode(false); }}\n        className=\"w-44 shrink-0 flex items-center gap-2 rounded-lg border border-border bg-surface px-2 py-1.5 text-[12px] text-text-strong hover:border-accent/40 transition-colors cursor-pointer\"\n      >\n        <span\n          className=\"h-4 w-4 flex-shrink-0 rounded border border-border/60 relative overflow-hidden\"\n          style={{ backgroundColor: swatchColor }}\n        >\n          {isNone && (\n            <span\n              className=\"absolute inset-0\"\n              style={{\n                background: 'linear-gradient(to top right, transparent calc(50% - 1px), var(--color-danger-text) calc(50% - 1px), var(--color-danger-text) calc(50% + 1px), transparent calc(50% + 1px))',\n              }}\n              aria-hidden\n            />\n          )}\n        </span>\n        <span className=\"truncate flex-1 text-left min-w-0\">{displayLabel}</span>\n        <Icon glyph=\"chevron-down\" size={12} strokeWidth={2} className=\"flex-shrink-0 text-text-subtle\" />\n      </button>\n\n      {dropdown}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8Jc;AA9Jd,mBAA6E;AAC7E,uBAA6B;AAE7B,oBAAkF;AAClF,gBAAqB;AACrB,IAAAA,aAA8B;AAQ9B,MAAM,cAAsC;AAAA,EAC1C,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AACZ;AAEA,MAAM,aAAa,CAAC,YAAY,QAAQ,WAAW,UAAU,cAAc,UAAU;AAKrF,MAAM,qBAAoC;AAAA,EACxC,CAAC,iCAA2C,GAAG;AAAA,EAC/C,CAAC,oCAA8C,GAAG;AACpD;AAEA,SAAS,YAAY,QAAsB;AAhC3C;AAiCE,QAAM,SAAuC,CAAC;AAC9C,aAAW,KAAK,QAAQ;AACtB,KAAC,YAAO,EAAE,WAAT,aAAoB,CAAC,IAAG,KAAK,CAAC;AAAA,EACjC;AACA,SAAO,WAAW,OAAO,CAAC,MAAM,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,GAAG,OAAO,YAAY,CAAC,GAAG,QAAQ,OAAO,CAAC,EAAE,EAAE;AAC9G;AASA,SAAS,QAAQ,OAAuB;AACtC,MAAI,OAAO,aAAa,aAAa;AACnC,UAAM,YAAQ,yBAAU,KAAK;AAC7B,QAAI,OAAO;AACT,YAAM,WAAW,iBAAiB,SAAS,eAAe,EACvD,iBAAiB,MAAM,MAAM,EAC7B,KAAK;AACR,UAAI,oBAAoB,KAAK,QAAQ,EAAG,QAAO;AAAA,IACjD;AAAA,EACF;AACA,aAAO,0BAAW,KAAK;AACzB;AAEO,SAAS,YAAY,EAAE,OAAO,OAAO,SAAS,GAAqB;AACxE,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,EAAE;AAC7C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE,KAAK,GAAG,MAAM,EAAE,CAAC;AAClE,QAAM,iBAAa,qBAA0B,IAAI;AACjD,QAAM,kBAAc,qBAAuB,IAAI;AAC/C,QAAM,sBAAkB,qBAAyB,IAAI;AAErD,QAAM,SAAS,UAAU;AACzB,QAAM,QAAQ,CAAC,cAAU,4BAAa,KAAK,QAAI,yBAAU,KAAK,IAAI;AAGlE,QAAM,aAAa,SAAS,gBAAgB,QAAQ,KAAK;AAIzD,QAAM,cAAc,SAAS,gBAAgB;AAC7C,QAAM,eAAe,SAAS,SAAS,QAAQ,MAAM,OAAO;AAG5D,8BAAU,MAAM;AACd,QAAI,KAAC,4BAAa,KAAK,GAAG;AAExB,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAGV,QAAM,qBAAiB,0BAAY,MAAM;AACvC,QAAI,CAAC,WAAW,QAAS;AACzB,UAAM,OAAO,WAAW,QAAQ,sBAAsB;AACtD,mBAAe;AAAA,MACb,KAAK,KAAK,SAAS;AAAA,MACnB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,mBAAe;AAAA,EACjB,GAAG,CAAC,MAAM,cAAc,CAAC;AAGzB,8BAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,aAAS,YAAY,GAAe;AAClC,YAAM,SAAS,EAAE;AACjB,UACE,WAAW,SAAS,SAAS,MAAM,KACnC,YAAY,SAAS,SAAS,MAAM,EACpC;AACF,cAAQ,KAAK;AACb,oBAAc,KAAK;AAAA,IACrB;AACA,aAAS,iBAAiB,aAAa,WAAW;AAClD,WAAO,MAAM,SAAS,oBAAoB,aAAa,WAAW;AAAA,EACpE,GAAG,CAAC,IAAI,CAAC;AAGT,8BAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,aAAS,cAAc,GAAkB;AACvC,UAAI,EAAE,QAAQ,SAAU;AACxB,cAAQ,KAAK;AACb,oBAAc,KAAK;AACnB,iBAAW,SAAS,MAAM;AAAA,IAC5B;AACA,aAAS,iBAAiB,WAAW,aAAa;AAClD,WAAO,MAAM,SAAS,oBAAoB,WAAW,aAAa;AAAA,EACpE,GAAG,CAAC,IAAI,CAAC;AAET,WAAS,YAAY,GAAe;AAClC,aAAS,EAAE,QAAQ;AACnB,YAAQ,KAAK;AACb,kBAAc,KAAK;AAAA,EACrB;AAEA,WAAS,eAAe,KAAa;AACnC,UAAM,UAAU,IAAI,KAAK;AACzB,QAAI,sBAAsB,KAAK,OAAO,GAAG;AACvC,eAAS,OAAO;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,UAAU,YAAY,yBAAW;AAEvC,QAAM,WAAW,WACb;AAAA,IACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,EAAE,KAAK,YAAY,KAAK,MAAM,YAAY,KAAK;AAAA,QAGrD;AAAA,WAAC,cACA,6CAAC,SAAI,WAAU,sCAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,MAAM;AAAE,2BAAS,MAAM;AAAG,0BAAQ,KAAK;AAAA,gBAAG;AAAA,gBACnD,WAAW,wFACT,SACI,8CACA,uCACN;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO,EAAE,iBAAiB,cAAc;AAAA,sBACxC,eAAW;AAAA,sBAEX;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAU;AAAA,0BACV,OAAO;AAAA,4BACL,YAAY;AAAA,0BACd;AAAA;AAAA,sBACF;AAAA;AAAA,kBACF;AAAA,kBACA,4CAAC,UAAK,WAAU,mBAAkB,kBAAI;AAAA,kBACrC,UACC,4CAAC,kBAAK,OAAM,SAAQ,MAAM,IAAI,aAAa,KAAK,WAAU,6BAA4B;AAAA;AAAA;AAAA,YAE1F;AAAA,YACC,QAAQ,IAAI,CAAC,UACZ,6CAAC,SACC;AAAA,0DAAC,SAAI,WAAU,kBAKb,sDAAC,4BAAc,OAAO,oBACnB,gBAAM,OACT,GACF;AAAA,cACC,MAAM,OAAO,IAAI,CAAC,MAAM;AACvB,sBAAM,WAAW,UAAU,EAAE;AAC7B,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC,SAAS,MAAM,YAAY,CAAC;AAAA,oBAC5B,WAAW,wFACT,WACI,8CACA,uCACN;AAAA,oBAEA;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAU;AAAA,0BACV,OAAO,EAAE,iBAAiB,EAAE,SAAS;AAAA;AAAA,sBACvC;AAAA,sBACA,4CAAC,UAAK,WAAU,mBAAmB,YAAE,MAAK;AAAA,sBACzC,YACC,4CAAC,kBAAK,OAAM,SAAQ,MAAM,IAAI,aAAa,KAAK,WAAU,6BAA4B;AAAA;AAAA;AAAA,kBAdnF,EAAE;AAAA,gBAgBT;AAAA,cAEJ,CAAC;AAAA,iBAhCO,MAAM,GAiChB,CACD;AAAA,aACH;AAAA,UAID,cACC,6CAAC,SAAI,WAAU,iBACb;AAAA,yDAAC,SAAI,WAAU,2BACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS,MAAM,gBAAgB,SAAS,MAAM;AAAA,kBAC9C,WAAU;AAAA,kBACV,OAAO,EAAE,iBAAiB,aAAa,WAAW;AAAA;AAAA,cACpD;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,MAAK;AAAA,kBACL,OAAO,aAAa;AAAA,kBACpB,UAAU,CAAC,MAAM;AACf,iCAAa,EAAE,OAAO,KAAK;AAC3B,6BAAS,EAAE,OAAO,KAAK;AAAA,kBACzB;AAAA,kBACA,WAAU;AAAA;AAAA,cACZ;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,OAAO;AAAA,kBACP,UAAU,CAAC,MAAM;AACf,iCAAa,EAAE,OAAO,KAAK;AAC3B,mCAAe,EAAE,OAAO,KAAK;AAAA,kBAC/B;AAAA,kBACA,QAAQ,MAAM,eAAe,SAAS;AAAA,kBACtC,aAAY;AAAA,kBACZ,WAAU;AAAA;AAAA,cACZ;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,MAAM,cAAc,KAAK;AAAA,gBAClC,WAAU;AAAA,gBACX;AAAA;AAAA,YAED;AAAA,aACF;AAAA,UAID,CAAC,cACA,4CAAC,SAAI,WAAU,oCACb;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM;AACb,8BAAc,IAAI;AAClB,iCAAa,4BAAa,KAAK,QAAI,0BAAW,KAAK,IAAI,KAAK;AAAA,cAC9D;AAAA,cACA,WAAU;AAAA,cAEV;AAAA,4DAAC,UAAK,WAAU,wFACd,sDAAC,kBAAK,OAAM,eAAc,MAAM,IAAI,aAAa,GAAG,GACtD;AAAA,gBAAO;AAAA;AAAA;AAAA,UAET,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,IACA,SAAS;AAAA,EACX,IACA;AAEJ,SACE,6CAAC,SAAI,WAAU,2BACb;AAAA,gDAAC,UAAK,WAAU,wDAAwD,iBAAM;AAAA,IAG9E;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,SAAS,MAAM;AAAE,kBAAQ,CAAC,IAAI;AAAG,wBAAc,KAAK;AAAA,QAAG;AAAA,QACvD,WAAU;AAAA,QAEV;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,iBAAiB,YAAY;AAAA,cAErC,oBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,YAAY;AAAA,kBACd;AAAA,kBACA,eAAW;AAAA;AAAA,cACb;AAAA;AAAA,UAEJ;AAAA,UACA,4CAAC,UAAK,WAAU,qCAAqC,wBAAa;AAAA,UAClE,4CAAC,kBAAK,OAAM,gBAAe,MAAM,IAAI,aAAa,GAAG,WAAU,kCAAiC;AAAA;AAAA;AAAA,IAClG;AAAA,IAEC;AAAA,KACH;AAEJ;","names":["import_ui"]}

package/dist/studio/editors/color-picker.d.ts

@@ -0,0 +1,8 @@
+interface ColorPickerProps {
+    label: string;
+    value: string;
+    onChange: (value: string | number | boolean) => void;
+}
+export declare function ColorPicker({ label, value, onChange }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/studio/editors/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/studio/editors/color-picker.tsx"],"names":[],"mappings":"AAOA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CACtD;AAiDD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAiQvE"}

package/dist/studio/editors/color-picker.js

@@ -0,0 +1,276 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { themeTokens, findToken, isTokenValue, resolveHex } from "../../tokens/index.js";
+import { Icon } from "../../ui/index.js";
+import { SectionHeader } from "../../ui/index.js";
+const groupLabels = {
+  surfaces: "Surfaces",
+  text: "Text",
+  borders: "Borders",
+  accent: "Accent",
+  highlights: "Highlights",
+  semantic: "Semantic"
+};
+const groupOrder = ["surfaces", "text", "borders", "accent", "highlights", "semantic"];
+const GROUP_HEADER_STYLE = {
+  ["--uxm-section-header-title-size"]: "10px",
+  ["--uxm-section-header-margin-bottom"]: "0"
+};
+function groupTokens(tokens) {
+  var _a;
+  const groups = {};
+  for (const t of tokens) {
+    (groups[_a = t.group] ?? (groups[_a] = [])).push(t);
+  }
+  return groupOrder.filter((g) => groups[g]).map((g) => ({ key: g, label: groupLabels[g], tokens: groups[g] }));
+}
+function liveHex(value) {
+  if (typeof document !== "undefined") {
+    const token = findToken(value);
+    if (token) {
+      const computed = getComputedStyle(document.documentElement).getPropertyValue(token.cssVar).trim();
+      if (/^#[0-9A-Fa-f]{6}$/.test(computed)) return computed;
+    }
+  }
+  return resolveHex(value);
+}
+function ColorPicker({ label, value, onChange }) {
+  const [open, setOpen] = useState(false);
+  const [customMode, setCustomMode] = useState(false);
+  const [customHex, setCustomHex] = useState("");
+  const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const nativePickerRef = useRef(null);
+  const isNone = value === "none";
+  const token = !isNone && isTokenValue(value) ? findToken(value) : void 0;
+  const displayHex = isNone ? "transparent" : liveHex(value);
+  const swatchColor = isNone ? "transparent" : value;
+  const displayLabel = isNone ? "None" : token ? token.name : value;
+  useEffect(() => {
+    if (!isTokenValue(value)) {
+      setCustomHex(value);
+    }
+  }, [value]);
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setDropdownPos({
+      top: rect.bottom + 4,
+      left: rect.right - 220
+    });
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    updatePosition();
+  }, [open, updatePosition]);
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e) {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
+      setOpen(false);
+      setCustomMode(false);
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    function handleKeyDown(e) {
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      setCustomMode(false);
+      triggerRef.current?.focus();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
+  function selectToken(t) {
+    onChange(t.variable);
+    setOpen(false);
+    setCustomMode(false);
+  }
+  function applyCustomHex(hex) {
+    const cleaned = hex.trim();
+    if (/^#[0-9A-Fa-f]{3,8}$/.test(cleaned)) {
+      onChange(cleaned);
+    }
+  }
+  const grouped = groupTokens(themeTokens);
+  const dropdown = open ? createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dropdownRef,
+        className: "fixed z-[9999] w-[220px] rounded-xl border border-border bg-card shadow-lg overflow-hidden",
+        style: { top: dropdownPos.top, left: dropdownPos.left },
+        children: [
+          !customMode && /* @__PURE__ */ jsxs("div", { className: "max-h-[280px] overflow-y-auto py-1", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => {
+                  onChange("none");
+                  setOpen(false);
+                },
+                className: `flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[12px] transition-colors ${isNone ? "bg-accent-subtle/50 text-text font-medium" : "text-text-strong hover:bg-surface-alt"}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "h-4 w-4 flex-shrink-0 rounded border border-border/60 relative overflow-hidden",
+                      style: { backgroundColor: "transparent" },
+                      "aria-hidden": true,
+                      children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "absolute inset-0",
+                          style: {
+                            background: "linear-gradient(to top right, transparent calc(50% - 1px), var(--color-danger-text) calc(50% - 1px), var(--color-danger-text) calc(50% + 1px), transparent calc(50% + 1px))"
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: "None" }),
+                  isNone && /* @__PURE__ */ jsx(Icon, { glyph: "check", size: 14, strokeWidth: 2.5, className: "flex-shrink-0 text-accent" })
+                ]
+              }
+            ),
+            grouped.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 pb-1", children: /* @__PURE__ */ jsx(SectionHeader, { style: GROUP_HEADER_STYLE, children: group.label }) }),
+              group.tokens.map((t) => {
+                const isActive = value === t.variable;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => selectToken(t),
+                    className: `flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[12px] transition-colors ${isActive ? "bg-accent-subtle/50 text-text font-medium" : "text-text-strong hover:bg-surface-alt"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "h-4 w-4 flex-shrink-0 rounded border border-border/60",
+                          style: { backgroundColor: t.variable }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: t.name }),
+                      isActive && /* @__PURE__ */ jsx(Icon, { glyph: "check", size: 14, strokeWidth: 2.5, className: "flex-shrink-0 text-accent" })
+                    ]
+                  },
+                  t.variable
+                );
+              })
+            ] }, group.key))
+          ] }),
+          customMode && /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => nativePickerRef.current?.click(),
+                  className: "h-8 w-8 flex-shrink-0 rounded-lg border border-border shadow-sm cursor-pointer",
+                  style: { backgroundColor: customHex || displayHex }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: nativePickerRef,
+                  type: "color",
+                  value: customHex || displayHex,
+                  onChange: (e) => {
+                    setCustomHex(e.target.value);
+                    onChange(e.target.value);
+                  },
+                  className: "sr-only"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: customHex,
+                  onChange: (e) => {
+                    setCustomHex(e.target.value);
+                    applyCustomHex(e.target.value);
+                  },
+                  onBlur: () => applyCustomHex(customHex),
+                  placeholder: "#000000",
+                  className: "flex-1 rounded-md border border-border bg-surface px-2 py-1.5 text-[12px] font-mono text-text-strong outline-none focus:border-accent"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setCustomMode(false),
+                className: "w-full text-[11px] text-text-muted hover:text-text-strong transition-colors py-1",
+                children: "\u2190 Back to theme colors"
+              }
+            )
+          ] }),
+          !customMode && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3 py-2", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                setCustomMode(true);
+                setCustomHex(isTokenValue(value) ? resolveHex(value) : value);
+              },
+              className: "flex w-full items-center gap-2 text-[12px] text-text-muted hover:text-text-strong transition-colors",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded border border-dashed border-text/20", children: /* @__PURE__ */ jsx(Icon, { glyph: "paint-brush", size: 10, strokeWidth: 2 }) }),
+                "Custom color\u2026"
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[13px] text-text-strong flex-1 min-w-0 truncate", children: label }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        onClick: () => {
+          setOpen(!open);
+          setCustomMode(false);
+        },
+        className: "w-44 shrink-0 flex items-center gap-2 rounded-lg border border-border bg-surface px-2 py-1.5 text-[12px] text-text-strong hover:border-accent/40 transition-colors cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-4 w-4 flex-shrink-0 rounded border border-border/60 relative overflow-hidden",
+              style: { backgroundColor: swatchColor },
+              children: isNone && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    background: "linear-gradient(to top right, transparent calc(50% - 1px), var(--color-danger-text) calc(50% - 1px), var(--color-danger-text) calc(50% + 1px), transparent calc(50% + 1px))"
+                  },
+                  "aria-hidden": true
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "truncate flex-1 text-left min-w-0", children: displayLabel }),
+          /* @__PURE__ */ jsx(Icon, { glyph: "chevron-down", size: 12, strokeWidth: 2, className: "flex-shrink-0 text-text-subtle" })
+        ]
+      }
+    ),
+    dropdown
+  ] });
+}
+export {
+  ColorPicker
+};
+//# sourceMappingURL=color-picker.js.map