@viax.io/uxm 4.36.0

package/dist/studio/editors/color-picker.js.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":"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","names":[]}

package/dist/studio/editors/number-input.cjs

@@ -0,0 +1,47 @@
+"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 number_input_exports = {};
+__export(number_input_exports, {
+  NumberInput: () => NumberInput
+});
+module.exports = __toCommonJS(number_input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+function NumberInput({ label, value, onChange, min, max, step = 1, unit }) {
+  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.jsx)("div", { className: "w-44 shrink-0 flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.NumberStepper,
+      {
+        value,
+        onChange,
+        min,
+        max,
+        step,
+        unit,
+        "aria-label": label
+      }
+    ) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NumberInput
+});
+//# sourceMappingURL=number-input.cjs.map

package/dist/studio/editors/number-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/editors/number-input.tsx"],"sourcesContent":["import { NumberStepper } from '@/ui';\n\nexport interface NumberInputProps {\n  label: string;\n  value: number;\n  onChange: (value: string | number | boolean) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  unit?: string;\n}\n\n/**\n * Editor knob — wraps the `<NumberStepper>` atom with the panel's label-\n * left, control-right layout. NumberStepper provides the input + step\n * buttons + unit suffix and handles min/max clamping; this wrapper\n * adds the truncating label and the fixed-width slot the properties\n * pane uses for visual alignment of editor knobs.\n */\nexport function NumberInput({ label, value, onChange, min, max, step = 1, unit }: NumberInputProps) {\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      <div className=\"w-44 shrink-0 flex items-center justify-end\">\n        <NumberStepper\n          value={value}\n          onChange={onChange}\n          min={min}\n          max={max}\n          step={step}\n          unit={unit}\n          aria-label={label}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBI;AArBJ,gBAA8B;AAmBvB,SAAS,YAAY,EAAE,OAAO,OAAO,UAAU,KAAK,KAAK,OAAO,GAAG,KAAK,GAAqB;AAClG,SACE,6CAAC,SAAI,WAAU,2BACb;AAAA,gDAAC,UAAK,WAAU,wDAAwD,iBAAM;AAAA,IAC9E,4CAAC,SAAI,WAAU,+CACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA;AAAA,IACd,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/studio/editors/number-input.d.ts

@@ -0,0 +1,18 @@
+export interface NumberInputProps {
+    label: string;
+    value: number;
+    onChange: (value: string | number | boolean) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+}
+/**
+ * Editor knob — wraps the `<NumberStepper>` atom with the panel's label-
+ * left, control-right layout. NumberStepper provides the input + step
+ * buttons + unit suffix and handles min/max clamping; this wrapper
+ * adds the truncating label and the fixed-width slot the properties
+ * pane uses for visual alignment of editor knobs.
+ */
+export declare function NumberInput({ label, value, onChange, min, max, step, unit }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=number-input.d.ts.map

package/dist/studio/editors/number-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/studio/editors/number-input.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACrD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,IAAQ,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAiBjG"}

package/dist/studio/editors/number-input.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberStepper } from "../../ui/index.js";
+function NumberInput({ label, value, onChange, min, max, step = 1, unit }) {
+  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__ */ jsx("div", { className: "w-44 shrink-0 flex items-center justify-end", children: /* @__PURE__ */ jsx(
+      NumberStepper,
+      {
+        value,
+        onChange,
+        min,
+        max,
+        step,
+        unit,
+        "aria-label": label
+      }
+    ) })
+  ] });
+}
+export {
+  NumberInput
+};
+//# sourceMappingURL=number-input.js.map

package/dist/studio/editors/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/editors/number-input.tsx"],"sourcesContent":["import { NumberStepper } from '@/ui';\n\nexport interface NumberInputProps {\n  label: string;\n  value: number;\n  onChange: (value: string | number | boolean) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  unit?: string;\n}\n\n/**\n * Editor knob — wraps the `<NumberStepper>` atom with the panel's label-\n * left, control-right layout. NumberStepper provides the input + step\n * buttons + unit suffix and handles min/max clamping; this wrapper\n * adds the truncating label and the fixed-width slot the properties\n * pane uses for visual alignment of editor knobs.\n */\nexport function NumberInput({ label, value, onChange, min, max, step = 1, unit }: NumberInputProps) {\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      <div className=\"w-44 shrink-0 flex items-center justify-end\">\n        <NumberStepper\n          value={value}\n          onChange={onChange}\n          min={min}\n          max={max}\n          step={step}\n          unit={unit}\n          aria-label={label}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAqBI,SACE,KADF;AArBJ,SAAS,qBAAqB;AAmBvB,SAAS,YAAY,EAAE,OAAO,OAAO,UAAU,KAAK,KAAK,OAAO,GAAG,KAAK,GAAqB;AAClG,SACE,qBAAC,SAAI,WAAU,2BACb;AAAA,wBAAC,UAAK,WAAU,wDAAwD,iBAAM;AAAA,IAC9E,oBAAC,SAAI,WAAU,+CACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA;AAAA,IACd,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/studio/editors/select-input.cjs

@@ -0,0 +1,49 @@
+"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 select_input_exports = {};
+__export(select_input_exports, {
+  SelectInput: () => SelectInput
+});
+module.exports = __toCommonJS(select_input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+const SEARCH_THRESHOLD = 12;
+function SelectInput({ label, value, onChange, options }) {
+  const useSearch = options.length > SEARCH_THRESHOLD;
+  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.jsx)("div", { className: "w-44 shrink-0", children: useSearch ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui2.SearchDropdown,
+      {
+        value,
+        onChange,
+        options,
+        "aria-label": label,
+        placeholder: label,
+        searchPlaceholder: `Search ${label.toLowerCase()}\u2026`
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Select, { value, onChange: (e) => onChange(e.target.value), "aria-label": label, children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: opt.value, children: opt.label }, opt.value)) }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SelectInput
+});
+//# sourceMappingURL=select-input.cjs.map

package/dist/studio/editors/select-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/editors/select-input.tsx"],"sourcesContent":["import { Select } from '@/ui';\nimport { SearchDropdown } from '@/ui';\n\nexport interface SelectInputProps {\n  label: string;\n  value: string;\n  onChange: (value: string | number | boolean) => void;\n  options: { value: string; label: string }[];\n}\n\n// When the option count exceeds this, the editor switches from the\n// native <Select> to the <SearchDropdown> atom so users don't have to\n// scroll a long native dropdown. The Icon component's `glyph` variant\n// has ~46 options and is the obvious case; tag/chip/tabs variants stay\n// on native Select.\nconst SEARCH_THRESHOLD = 12;\n\nexport function SelectInput({ label, value, onChange, options }: SelectInputProps) {\n  const useSearch = options.length > SEARCH_THRESHOLD;\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      <div className=\"w-44 shrink-0\">\n        {useSearch ? (\n          <SearchDropdown\n            value={value}\n            onChange={onChange}\n            options={options}\n            aria-label={label}\n            placeholder={label}\n            searchPlaceholder={`Search ${label.toLowerCase()}…`}\n          />\n        ) : (\n          <Select value={value} onChange={(e) => onChange(e.target.value)} aria-label={label}>\n            {options.map((opt) => (\n              <option key={opt.value} value={opt.value}>\n                {opt.label}\n              </option>\n            ))}\n          </Select>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBI;AApBJ,gBAAuB;AACvB,IAAAA,aAA+B;AAc/B,MAAM,mBAAmB;AAElB,SAAS,YAAY,EAAE,OAAO,OAAO,UAAU,QAAQ,GAAqB;AACjF,QAAM,YAAY,QAAQ,SAAS;AACnC,SACE,6CAAC,SAAI,WAAU,2BACb;AAAA,gDAAC,UAAK,WAAU,wDAAwD,iBAAM;AAAA,IAC9E,4CAAC,SAAI,WAAU,iBACZ,sBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,aAAa;AAAA,QACb,mBAAmB,UAAU,MAAM,YAAY,CAAC;AAAA;AAAA,IAClD,IAEA,4CAAC,oBAAO,OAAc,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG,cAAY,OAC1E,kBAAQ,IAAI,CAAC,QACZ,4CAAC,YAAuB,OAAO,IAAI,OAChC,cAAI,SADM,IAAI,KAEjB,CACD,GACH,GAEJ;AAAA,KACF;AAEJ;","names":["import_ui"]}

package/dist/studio/editors/select-input.d.ts

@@ -0,0 +1,11 @@
+export interface SelectInputProps {
+    label: string;
+    value: string;
+    onChange: (value: string | number | boolean) => void;
+    options: {
+        value: string;
+        label: string;
+    }[];
+}
+export declare function SelectInput({ label, value, onChange, options }: SelectInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=select-input.d.ts.map

package/dist/studio/editors/select-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-input.d.ts","sourceRoot":"","sources":["../../../src/studio/editors/select-input.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACrD,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC7C;AASD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,gBAAgB,2CA2BhF"}

package/dist/studio/editors/select-input.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "../../ui/index.js";
+import { SearchDropdown } from "../../ui/index.js";
+const SEARCH_THRESHOLD = 12;
+function SelectInput({ label, value, onChange, options }) {
+  const useSearch = options.length > SEARCH_THRESHOLD;
+  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__ */ jsx("div", { className: "w-44 shrink-0", children: useSearch ? /* @__PURE__ */ jsx(
+      SearchDropdown,
+      {
+        value,
+        onChange,
+        options,
+        "aria-label": label,
+        placeholder: label,
+        searchPlaceholder: `Search ${label.toLowerCase()}\u2026`
+      }
+    ) : /* @__PURE__ */ jsx(Select, { value, onChange: (e) => onChange(e.target.value), "aria-label": label, children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value)) }) })
+  ] });
+}
+export {
+  SelectInput
+};
+//# sourceMappingURL=select-input.js.map

package/dist/studio/editors/select-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/editors/select-input.tsx"],"sourcesContent":["import { Select } from '@/ui';\nimport { SearchDropdown } from '@/ui';\n\nexport interface SelectInputProps {\n  label: string;\n  value: string;\n  onChange: (value: string | number | boolean) => void;\n  options: { value: string; label: string }[];\n}\n\n// When the option count exceeds this, the editor switches from the\n// native <Select> to the <SearchDropdown> atom so users don't have to\n// scroll a long native dropdown. The Icon component's `glyph` variant\n// has ~46 options and is the obvious case; tag/chip/tabs variants stay\n// on native Select.\nconst SEARCH_THRESHOLD = 12;\n\nexport function SelectInput({ label, value, onChange, options }: SelectInputProps) {\n  const useSearch = options.length > SEARCH_THRESHOLD;\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      <div className=\"w-44 shrink-0\">\n        {useSearch ? (\n          <SearchDropdown\n            value={value}\n            onChange={onChange}\n            options={options}\n            aria-label={label}\n            placeholder={label}\n            searchPlaceholder={`Search ${label.toLowerCase()}…`}\n          />\n        ) : (\n          <Select value={value} onChange={(e) => onChange(e.target.value)} aria-label={label}>\n            {options.map((opt) => (\n              <option key={opt.value} value={opt.value}>\n                {opt.label}\n              </option>\n            ))}\n          </Select>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAoBI,SACE,KADF;AApBJ,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAc/B,MAAM,mBAAmB;AAElB,SAAS,YAAY,EAAE,OAAO,OAAO,UAAU,QAAQ,GAAqB;AACjF,QAAM,YAAY,QAAQ,SAAS;AACnC,SACE,qBAAC,SAAI,WAAU,2BACb;AAAA,wBAAC,UAAK,WAAU,wDAAwD,iBAAM;AAAA,IAC9E,oBAAC,SAAI,WAAU,iBACZ,sBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,aAAa;AAAA,QACb,mBAAmB,UAAU,MAAM,YAAY,CAAC;AAAA;AAAA,IAClD,IAEA,oBAAC,UAAO,OAAc,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG,cAAY,OAC1E,kBAAQ,IAAI,CAAC,QACZ,oBAAC,YAAuB,OAAO,IAAI,OAChC,cAAI,SADM,IAAI,KAEjB,CACD,GACH,GAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/studio/editors/slider-input.cjs

@@ -0,0 +1,52 @@
+"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 slider_input_exports = {};
+__export(slider_input_exports, {
+  SliderInput: () => SliderInput
+});
+module.exports = __toCommonJS(slider_input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+function SliderInput({ label, value, onChange, min, max, step, unit }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between mb-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[13px] text-text-strong", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-[12px] font-mono text-text-muted", children: [
+        value,
+        unit
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.Slider,
+      {
+        value,
+        onChange,
+        min,
+        max,
+        step,
+        "aria-label": label
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SliderInput
+});
+//# sourceMappingURL=slider-input.cjs.map

package/dist/studio/editors/slider-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/editors/slider-input.tsx"],"sourcesContent":["import { Slider } from '@/ui';\n\nexport interface SliderInputProps {\n  label: string;\n  value: number;\n  onChange: (value: string | number | boolean) => void;\n  min: number;\n  max: number;\n  step: number;\n  unit?: string;\n}\n\n/**\n * Editor knob — wraps the `<Slider>` atom with the panel's label-with-\n * current-value layout. The slider itself is themable through the\n * Slider atom's registry; the surrounding label/value-display chrome\n * is properties-panel-specific UX (showing the current numeric value\n * inline next to the label is a knob-editor convention).\n */\nexport function SliderInput({ label, value, onChange, min, max, step, unit }: SliderInputProps) {\n  return (\n    <div>\n      <div className=\"flex items-center justify-between mb-1.5\">\n        <span className=\"text-[13px] text-text-strong\">{label}</span>\n        <span className=\"text-[12px] font-mono text-text-muted\">\n          {value}{unit}\n        </span>\n      </div>\n      <Slider\n        value={value}\n        onChange={onChange}\n        min={min}\n        max={max}\n        step={step}\n        aria-label={label}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBQ;AAvBR,gBAAuB;AAmBhB,SAAS,YAAY,EAAE,OAAO,OAAO,UAAU,KAAK,KAAK,MAAM,KAAK,GAAqB;AAC9F,SACE,6CAAC,SACC;AAAA,iDAAC,SAAI,WAAU,4CACb;AAAA,kDAAC,UAAK,WAAU,gCAAgC,iBAAM;AAAA,MACtD,6CAAC,UAAK,WAAU,yCACb;AAAA;AAAA,QAAO;AAAA,SACV;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA;AAAA,IACd;AAAA,KACF;AAEJ;","names":[]}

package/dist/studio/editors/slider-input.d.ts

@@ -0,0 +1,18 @@
+export interface SliderInputProps {
+    label: string;
+    value: number;
+    onChange: (value: string | number | boolean) => void;
+    min: number;
+    max: number;
+    step: number;
+    unit?: string;
+}
+/**
+ * Editor knob — wraps the `<Slider>` atom with the panel's label-with-
+ * current-value layout. The slider itself is themable through the
+ * Slider atom's registry; the surrounding label/value-display chrome
+ * is properties-panel-specific UX (showing the current numeric value
+ * inline next to the label is a knob-editor convention).
+ */
+export declare function SliderInput({ label, value, onChange, min, max, step, unit }: SliderInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=slider-input.d.ts.map

package/dist/studio/editors/slider-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-input.d.ts","sourceRoot":"","sources":["../../../src/studio/editors/slider-input.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACrD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAmB7F"}

package/dist/studio/editors/slider-input.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider } from "../../ui/index.js";
+function SliderInput({ label, value, onChange, min, max, step, unit }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[13px] text-text-strong", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "text-[12px] font-mono text-text-muted", children: [
+        value,
+        unit
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        value,
+        onChange,
+        min,
+        max,
+        step,
+        "aria-label": label
+      }
+    )
+  ] });
+}
+export {
+  SliderInput
+};
+//# sourceMappingURL=slider-input.js.map

package/dist/studio/editors/slider-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/editors/slider-input.tsx"],"sourcesContent":["import { Slider } from '@/ui';\n\nexport interface SliderInputProps {\n  label: string;\n  value: number;\n  onChange: (value: string | number | boolean) => void;\n  min: number;\n  max: number;\n  step: number;\n  unit?: string;\n}\n\n/**\n * Editor knob — wraps the `<Slider>` atom with the panel's label-with-\n * current-value layout. The slider itself is themable through the\n * Slider atom's registry; the surrounding label/value-display chrome\n * is properties-panel-specific UX (showing the current numeric value\n * inline next to the label is a knob-editor convention).\n */\nexport function SliderInput({ label, value, onChange, min, max, step, unit }: SliderInputProps) {\n  return (\n    <div>\n      <div className=\"flex items-center justify-between mb-1.5\">\n        <span className=\"text-[13px] text-text-strong\">{label}</span>\n        <span className=\"text-[12px] font-mono text-text-muted\">\n          {value}{unit}\n        </span>\n      </div>\n      <Slider\n        value={value}\n        onChange={onChange}\n        min={min}\n        max={max}\n        step={step}\n        aria-label={label}\n      />\n    </div>\n  );\n}\n"],"mappings":"AAuBQ,cACA,YADA;AAvBR,SAAS,cAAc;AAmBhB,SAAS,YAAY,EAAE,OAAO,OAAO,UAAU,KAAK,KAAK,MAAM,KAAK,GAAqB;AAC9F,SACE,qBAAC,SACC;AAAA,yBAAC,SAAI,WAAU,4CACb;AAAA,0BAAC,UAAK,WAAU,gCAAgC,iBAAM;AAAA,MACtD,qBAAC,UAAK,WAAU,yCACb;AAAA;AAAA,QAAO;AAAA,SACV;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA;AAAA,IACd;AAAA,KACF;AAEJ;","names":[]}

package/dist/studio/editors/text-input.cjs

@@ -0,0 +1,36 @@
+"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 text_input_exports = {};
+__export(text_input_exports, {
+  TextInput: () => TextInput
+});
+module.exports = __toCommonJS(text_input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+function TextInput({ label, value, onChange }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[13px] text-text-strong", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.TextInput, { value, onChange: (e) => onChange(e.target.value), "aria-label": label })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextInput
+});
+//# sourceMappingURL=text-input.cjs.map

package/dist/studio/editors/text-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/editors/text-input.tsx"],"sourcesContent":["import { TextInput as UxmTextInput } from '@/ui';\n\nexport interface TextInputProps {\n  label: string;\n  value: string;\n  onChange: (value: string | number | boolean) => void;\n}\n\nexport function TextInput({ label, value, onChange }: TextInputProps) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <span className=\"text-[13px] text-text-strong\">{label}</span>\n      <UxmTextInput value={value} onChange={(e) => onChange(e.target.value)} aria-label={label} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUI;AAVJ,gBAA0C;AAQnC,SAAS,UAAU,EAAE,OAAO,OAAO,SAAS,GAAmB;AACpE,SACE,6CAAC,SAAI,WAAU,yBACb;AAAA,gDAAC,UAAK,WAAU,gCAAgC,iBAAM;AAAA,IACtD,4CAAC,UAAAA,WAAA,EAAa,OAAc,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG,cAAY,OAAO;AAAA,KAC5F;AAEJ;","names":["UxmTextInput"]}

package/dist/studio/editors/text-input.d.ts

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

package/dist/studio/editors/text-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../../src/studio/editors/text-input.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAOnE"}

package/dist/studio/editors/text-input.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TextInput as UxmTextInput } from "../../ui/index.js";
+function TextInput({ label, value, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[13px] text-text-strong", children: label }),
+    /* @__PURE__ */ jsx(UxmTextInput, { value, onChange: (e) => onChange(e.target.value), "aria-label": label })
+  ] });
+}
+export {
+  TextInput
+};
+//# sourceMappingURL=text-input.js.map

package/dist/studio/editors/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/editors/text-input.tsx"],"sourcesContent":["import { TextInput as UxmTextInput } from '@/ui';\n\nexport interface TextInputProps {\n  label: string;\n  value: string;\n  onChange: (value: string | number | boolean) => void;\n}\n\nexport function TextInput({ label, value, onChange }: TextInputProps) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <span className=\"text-[13px] text-text-strong\">{label}</span>\n      <UxmTextInput value={value} onChange={(e) => onChange(e.target.value)} aria-label={label} />\n    </div>\n  );\n}\n"],"mappings":"AAUI,SACE,KADF;AAVJ,SAAS,aAAa,oBAAoB;AAQnC,SAAS,UAAU,EAAE,OAAO,OAAO,SAAS,GAAmB;AACpE,SACE,qBAAC,SAAI,WAAU,yBACb;AAAA,wBAAC,UAAK,WAAU,gCAAgC,iBAAM;AAAA,IACtD,oBAAC,gBAAa,OAAc,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG,cAAY,OAAO;AAAA,KAC5F;AAEJ;","names":[]}

package/dist/studio/editors/toggle-input.cjs

@@ -0,0 +1,36 @@
+"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 toggle_input_exports = {};
+__export(toggle_input_exports, {
+  ToggleInput: () => ToggleInput
+});
+module.exports = __toCommonJS(toggle_input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+function ToggleInput({ label, value, onChange }) {
+  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.jsx)("div", { className: "w-44 shrink-0 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ToggleSwitch, { "aria-label": label, checked: value, onChange: (checked) => onChange(checked) }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToggleInput
+});
+//# sourceMappingURL=toggle-input.cjs.map

package/dist/studio/editors/toggle-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/editors/toggle-input.tsx"],"sourcesContent":["import { ToggleSwitch } from '@/ui';\n\nexport interface ToggleInputProps {\n  label: string;\n  value: boolean;\n  onChange: (value: string | number | boolean) => void;\n}\n\nexport function ToggleInput({ label, value, onChange }: ToggleInputProps) {\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      <div className=\"w-44 shrink-0 flex justify-end\">\n        <ToggleSwitch aria-label={label} checked={value} onChange={(checked) => onChange(checked)} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUI;AAVJ,gBAA6B;AAQtB,SAAS,YAAY,EAAE,OAAO,OAAO,SAAS,GAAqB;AACxE,SACE,6CAAC,SAAI,WAAU,2BACb;AAAA,gDAAC,UAAK,WAAU,wDAAwD,iBAAM;AAAA,IAC9E,4CAAC,SAAI,WAAU,kCACb,sDAAC,0BAAa,cAAY,OAAO,SAAS,OAAO,UAAU,CAAC,YAAY,SAAS,OAAO,GAAG,GAC7F;AAAA,KACF;AAEJ;","names":[]}

package/dist/studio/editors/toggle-input.d.ts

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

package/dist/studio/editors/toggle-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-input.d.ts","sourceRoot":"","sources":["../../../src/studio/editors/toggle-input.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CASvE"}

package/dist/studio/editors/toggle-input.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ToggleSwitch } from "../../ui/index.js";
+function ToggleInput({ label, value, onChange }) {
+  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__ */ jsx("div", { className: "w-44 shrink-0 flex justify-end", children: /* @__PURE__ */ jsx(ToggleSwitch, { "aria-label": label, checked: value, onChange: (checked) => onChange(checked) }) })
+  ] });
+}
+export {
+  ToggleInput
+};
+//# sourceMappingURL=toggle-input.js.map

package/dist/studio/editors/toggle-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/editors/toggle-input.tsx"],"sourcesContent":["import { ToggleSwitch } from '@/ui';\n\nexport interface ToggleInputProps {\n  label: string;\n  value: boolean;\n  onChange: (value: string | number | boolean) => void;\n}\n\nexport function ToggleInput({ label, value, onChange }: ToggleInputProps) {\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      <div className=\"w-44 shrink-0 flex justify-end\">\n        <ToggleSwitch aria-label={label} checked={value} onChange={(checked) => onChange(checked)} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAUI,SACE,KADF;AAVJ,SAAS,oBAAoB;AAQtB,SAAS,YAAY,EAAE,OAAO,OAAO,SAAS,GAAqB;AACxE,SACE,qBAAC,SAAI,WAAU,2BACb;AAAA,wBAAC,UAAK,WAAU,wDAAwD,iBAAM;AAAA,IAC9E,oBAAC,SAAI,WAAU,kCACb,8BAAC,gBAAa,cAAY,OAAO,SAAS,OAAO,UAAU,CAAC,YAAY,SAAS,OAAO,GAAG,GAC7F;AAAA,KACF;AAEJ;","names":[]}

package/dist/studio/favicon-sync.cjs

@@ -0,0 +1,48 @@
+"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 favicon_sync_exports = {};
+__export(favicon_sync_exports, {
+  FaviconSync: () => FaviconSync
+});
+module.exports = __toCommonJS(favicon_sync_exports);
+var import_react = require("react");
+var import_context = require("./lib/context.cjs");
+const LINK_ID = "uxm-brand-favicon";
+function FaviconSync() {
+  const { brand, theme } = (0, import_context.useUxm)();
+  const favicon = theme === "dark" ? brand.faviconUrlDark || brand.faviconUrl : brand.faviconUrl;
+  (0, import_react.useEffect)(() => {
+    if (!favicon) return;
+    document.querySelectorAll(`link#${LINK_ID}`).forEach((el) => el.remove());
+    document.querySelectorAll("link[rel='icon'], link[rel='shortcut icon']").forEach((el) => {
+      if (el.id !== LINK_ID) el.setAttribute("disabled", "true");
+    });
+    const link = document.createElement("link");
+    link.id = LINK_ID;
+    link.rel = "icon";
+    link.href = favicon + (favicon.includes("?") ? "&" : "?") + "v=" + Date.now();
+    document.head.appendChild(link);
+  }, [favicon]);
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FaviconSync
+});
+//# sourceMappingURL=favicon-sync.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/studio/favicon-sync.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useUxm } from './lib/context';\n\nconst LINK_ID = 'uxm-brand-favicon';\n\n/**\n * Syncs the document favicon to the workbench brand. Host-opt-in via\n * `UxmApp`'s `syncFavicon` prop (off by default) so a host that manages its\n * own favicon (e.g. a Next app) isn't double-driven. Resolves the dark\n * favicon when the workbench theme is dark, falling back to the light one.\n */\nexport function FaviconSync() {\n  const { brand, theme } = useUxm();\n  const favicon =\n    theme === 'dark' ? brand.faviconUrlDark || brand.faviconUrl : brand.faviconUrl;\n\n  useEffect(() => {\n    if (!favicon) return;\n\n    document.querySelectorAll(`link#${LINK_ID}`).forEach((el) => el.remove());\n    document\n      .querySelectorAll(\"link[rel='icon'], link[rel='shortcut icon']\")\n      .forEach((el) => {\n        if (el.id !== LINK_ID) el.setAttribute('disabled', 'true');\n      });\n\n    const link = document.createElement('link');\n    link.id = LINK_ID;\n    link.rel = 'icon';\n    // Cache-bust so the browser swaps the tab icon immediately on change.\n    link.href = favicon + (favicon.includes('?') ? '&' : '?') + 'v=' + Date.now();\n    document.head.appendChild(link);\n  }, [favicon]);\n\n  return null;\n}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0B;AAE1B,qBAAuB;AAEvB,MAAM,UAAU;AAQT,SAAS,cAAc;AAC5B,QAAM,EAAE,OAAO,MAAM,QAAI,uBAAO;AAChC,QAAM,UACJ,UAAU,SAAS,MAAM,kBAAkB,MAAM,aAAa,MAAM;AAEtE,8BAAU,MAAM;AACd,QAAI,CAAC,QAAS;AAEd,aAAS,iBAAiB,QAAQ,OAAO,EAAE,EAAE,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC;AACxE,aACG,iBAAiB,6CAA6C,EAC9D,QAAQ,CAAC,OAAO;AACf,UAAI,GAAG,OAAO,QAAS,IAAG,aAAa,YAAY,MAAM;AAAA,IAC3D,CAAC;AAEH,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,KAAK;AACV,SAAK,MAAM;AAEX,SAAK,OAAO,WAAW,QAAQ,SAAS,GAAG,IAAI,MAAM,OAAO,OAAO,KAAK,IAAI;AAC5E,aAAS,KAAK,YAAY,IAAI;AAAA,EAChC,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO;AACT;","names":[]}

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

@@ -0,0 +1,8 @@
+/**
+ * Syncs the document favicon to the workbench brand. Host-opt-in via
+ * `UxmApp`'s `syncFavicon` prop (off by default) so a host that manages its
+ * own favicon (e.g. a Next app) isn't double-driven. Resolves the dark
+ * favicon when the workbench theme is dark, falling back to the light one.
+ */
+export declare function FaviconSync(): null;
+//# sourceMappingURL=favicon-sync.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"favicon-sync.d.ts","sourceRoot":"","sources":["../../src/studio/favicon-sync.tsx"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,wBAAgB,WAAW,SAwB1B"}