@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/CodeEditor.js

@@ -0,0 +1,384 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { useMemo as E, useState as _, useRef as oe, useCallback as ce } from "react";
+import { cn as d } from "../lib/cn.js";
+import { copyText as le } from "../lib/clipboard.js";
+import { indentSelection as ue, autoIndentNewline as me, handlePairBackspace as pe, handleAutoPair as fe } from "./code-editor/editing.js";
+import { CodeEditorProvider as he, useCodeEditor as x } from "./code-editor/context.js";
+import { useTokens as we, CodeEditorGutterNumbers as ve, CodeEditorTokens as ge } from "./code-editor/highlight.js";
+import { code as m } from "./code-editor/recipe.js";
+import { useControllable as j } from "../lib/use-controllable.js";
+import { Icon as V } from "./Icon.js";
+import { Tooltip as F } from "./Popover.js";
+import { ToggleGroup as Ce, Toggle as te } from "./Toggle.js";
+import { useUiStrings as w } from "../lib/i18n/provider.js";
+import { useNumberFormat as be } from "../lib/i18n/number-format.js";
+import { parseMarkdown as Ee } from "../lib/syntax/markdown/parse.js";
+import { MarkdownNodes as xe } from "../lib/syntax/markdown/render.js";
+import { markdown as ee } from "../lib/syntax/markdown/grammar.js";
+const Ne = /* @__PURE__ */ new Set([ee.name, ...ee.aliases ?? []]), ke = (o) => !!o && Ne.has(o.trim().toLowerCase());
+function ye({
+  value: o,
+  defaultValue: i,
+  onValueChange: s,
+  readOnly: t = !0,
+  language: a,
+  filename: n,
+  label: l,
+  startLine: N,
+  maxLines: W,
+  previewLines: v,
+  wrap: z,
+  defaultWrap: L = !1,
+  onWrapChange: I,
+  view: u,
+  defaultView: K,
+  onViewChange: k,
+  indent: g = "  ",
+  placeholder: M,
+  toolbar: C,
+  className: p,
+  ref: B,
+  ...r
+}) {
+  const [c, re] = j(o, i ?? "", s), [P, G] = j(z, L, I), A = ke(a), H = E(
+    () => A ? t ? ["source", "rendered"] : ["source", "rendered", "split"] : ["source"],
+    [A, t]
+  ), [R, U] = j(
+    u,
+    K ?? (A && t ? "rendered" : "source"),
+    k
+  ), f = H.includes(R) ? R : "source", b = E(() => c.split(`
+`).length, [c]), [$, q] = _(!1), J = oe(void 0), Q = ce(() => {
+    le(c).then(() => {
+      q(!0), clearTimeout(J.current), J.current = setTimeout(() => q(!1), 1600);
+    }).catch(() => {
+    });
+  }, [c]), X = t && v !== void 0 && b > v, [y, ae] = _(!1), T = w().codeEditor, se = be(), S = X && !y, [Y, ie] = _(!1), ne = E(
+    () => ({
+      value: c,
+      language: a ?? null,
+      filename: n,
+      readOnly: t,
+      wrap: P,
+      setWrap: G,
+      view: f,
+      setView: U,
+      views: H,
+      copy: Q,
+      copied: $,
+      lineCount: b
+    }),
+    [
+      c,
+      a,
+      n,
+      t,
+      P,
+      G,
+      f,
+      U,
+      H,
+      Q,
+      $,
+      b
+    ]
+  ), D = m(), Z = S ? v : W, O = Z === void 0 ? void 0 : { maxHeight: `calc(${Z} * 1lh + 2 * var(--code-pad-y))` };
+  return /* @__PURE__ */ e(he, { value: ne, children: /* @__PURE__ */ h(
+    "div",
+    {
+      ref: B,
+      "data-code-root": "",
+      "data-view": f,
+      "data-read-only": t ? "" : void 0,
+      className: d(D.root(), p),
+      ...r,
+      children: [
+        C ?? /* @__PURE__ */ e(Ke, {}),
+        /* @__PURE__ */ h("div", { className: "relative min-w-0", children: [
+          /* @__PURE__ */ h("div", { className: D.body(), children: [
+            f !== "rendered" && /* @__PURE__ */ e(
+              Te,
+              {
+                text: c,
+                onText: re,
+                language: a,
+                label: l ?? n ?? (t ? T.readOnlyLabel : T.editableLabel),
+                readOnly: t,
+                startLine: N,
+                wrap: P,
+                indent: g,
+                placeholder: M,
+                style: O,
+                collapsed: S,
+                tabLeaves: Y,
+                onTabLeavesChange: ie
+              }
+            ),
+            f !== "source" && /* The divider belongs to the SECOND pane so a single-pane view
+            never carries a stray edge. Horizontal only from `md` up: two
+            panes on a phone is two unreadable columns, while stacking is
+            the same content in the order it is read. */
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: d(
+                  "flex min-w-0 flex-1",
+                  f === "split" && "border-t border-border-subtle md:border-t-0 md:border-l"
+                ),
+                children: /* @__PURE__ */ e(Se, { text: c, style: O, collapsed: S })
+              }
+            )
+          ] }),
+          S && /* @__PURE__ */ e("div", { "aria-hidden": "true", className: D.fade() })
+        ] }),
+        X && /* @__PURE__ */ h(
+          "button",
+          {
+            type: "button",
+            onClick: () => ae((de) => !de),
+            "aria-expanded": y,
+            "data-code-expand": "",
+            className: D.expand(),
+            children: [
+              /* @__PURE__ */ e(V, { name: y ? "chevron-up" : "chevron-down", size: "xs" }),
+              y ? T.collapse : T.showAllLines(b, se(b))
+            ]
+          }
+        ),
+        !t && /* @__PURE__ */ e(Me, { tabLeaves: Y })
+      ]
+    }
+  ) });
+}
+function Te({
+  text: o,
+  onText: i,
+  language: s,
+  label: t,
+  readOnly: a,
+  startLine: n,
+  wrap: l,
+  indent: N,
+  placeholder: W,
+  style: v,
+  collapsed: z,
+  tabLeaves: L,
+  onTabLeavesChange: I
+}) {
+  const u = m(), K = we(o, s), k = E(() => o.split(`
+`).length, [o]), g = n !== void 0 && !l, M = g ? String(n + k - 1).length : 0, C = oe(L), p = (r) => {
+    C.current = r, I(r);
+  }, B = (r) => {
+    const c = r.currentTarget;
+    if (!r.nativeEvent.isComposing) {
+      if (r.key === "Escape") {
+        p(!0);
+        return;
+      }
+      if (r.key === "Tab") {
+        if (C.current) {
+          p(!1);
+          return;
+        }
+        r.preventDefault(), ue(c, N, r.shiftKey);
+        return;
+      }
+      if (C.current && p(!1), !(r.ctrlKey || r.metaKey || r.altKey)) {
+        if (r.key === "Enter") {
+          r.preventDefault(), me(c, N);
+          return;
+        }
+        if (r.key === "Backspace") {
+          pe(c) && r.preventDefault();
+          return;
+        }
+        r.key.length === 1 && fe(c, r.key) && r.preventDefault();
+      }
+    }
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-code-scroller": "",
+      style: v,
+      className: d(u.scroller(), z && "overflow-hidden"),
+      ...a ? { tabIndex: 0, role: "group", "aria-label": t } : {},
+      children: /* @__PURE__ */ h(
+        "div",
+        {
+          "data-code-layers": "",
+          ...g ? { "data-gutter": "" } : {},
+          style: { "--code-digits": M },
+          className: d(u.layers(), l ? "w-full" : "w-max min-w-full"),
+          children: [
+            g && /* @__PURE__ */ e("div", { "data-code-gutter": "", "aria-hidden": "true", className: d(u.gutter(), "dx-code-nowrap"), children: /* @__PURE__ */ e(ve, { count: k, from: n }) }),
+            /* @__PURE__ */ e(
+              "pre",
+              {
+                "data-code-pre": "",
+                "aria-hidden": a ? void 0 : "true",
+                className: d(
+                  u.pre(),
+                  l ? "dx-code-wrap min-w-0 flex-1" : "dx-code-nowrap w-max shrink-0"
+                ),
+                children: /* @__PURE__ */ e(ge, { source: o, tokens: K })
+              }
+            ),
+            !a && /* @__PURE__ */ e(
+              "textarea",
+              {
+                "data-code-textarea": "",
+                value: o,
+                onChange: (r) => i(r.target.value),
+                onKeyDown: B,
+                onBlur: () => p(!1),
+                "aria-label": t,
+                placeholder: W,
+                spellCheck: !1,
+                autoCapitalize: "off",
+                autoCorrect: "off",
+                autoComplete: "off",
+                "data-gramm": "false",
+                "data-gramm_editor": "false",
+                "data-enable-grammarly": "false",
+                wrap: l ? "soft" : "off",
+                style: { left: "var(--code-gutter-w)" },
+                className: d(u.textarea(), l ? "dx-code-wrap" : "dx-code-nowrap")
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function Se({
+  text: o,
+  style: i,
+  collapsed: s
+}) {
+  const t = m(), a = E(() => Ee(o), [o]);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-code-preview": "",
+      style: i,
+      className: d(t.rendered(), s && "overflow-hidden"),
+      children: /* @__PURE__ */ e(
+        xe,
+        {
+          nodes: a,
+          renderCode: (n) => (
+            /* THE NESTING, and it is the feature rather than a convenience: a
+                         fence inside rendered markdown is rendered by the same component,
+                         in its own language, with its own toolbar and copy button. The
+                         markdown renderer takes this as a prop precisely so it never has to
+                         import this file — that direction would be a cycle.
+            
+                         `view="source"` is pinned rather than left to the default. A ```md
+                         fence would otherwise render as prose inside prose, and a reader
+                         would have no way to see where the quoted document begins. */
+            /* @__PURE__ */ e(
+              ye,
+              {
+                value: n.code,
+                language: n.language ?? void 0,
+                view: "source",
+                className: "my-3"
+              }
+            )
+          )
+        }
+      )
+    }
+  );
+}
+function De({ children: o, className: i }) {
+  const s = m();
+  return /* @__PURE__ */ e("div", { "data-code-toolbar": "", className: d(s.toolbar(), i), children: o });
+}
+function Ve({ className: o }) {
+  const { filename: i, language: s } = x("CodeEditorCaption"), t = m(), a = w().codeEditor;
+  return /* @__PURE__ */ e("span", { "data-code-caption": "", className: d(t.caption(), o), children: i ?? s ?? a.captionFallback });
+}
+function We({ className: o }) {
+  const { copy: i, copied: s } = x("CodeEditorCopyButton"), t = m(), a = w().codeEditor;
+  return /* @__PURE__ */ e(F, { content: s ? a.copied : a.copy, children: /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: i,
+      "data-code-copy": "",
+      "aria-label": s ? a.copied : a.copyCode,
+      className: d(t.control(), o),
+      children: /* @__PURE__ */ e(V, { name: s ? "check" : "copy", size: "xs" })
+    }
+  ) });
+}
+function ze({ className: o }) {
+  const { wrap: i, setWrap: s } = x("CodeEditorWrapToggle"), t = w().codeEditor;
+  return /* @__PURE__ */ e(F, { content: i ? t.stopWrapping : t.wrapLongLines, children: /* @__PURE__ */ e(
+    te,
+    {
+      size: "sm",
+      iconOnly: !0,
+      pressed: i,
+      onPressedChange: s,
+      "aria-label": t.softWrap,
+      className: d("dx-tap shrink-0", o),
+      children: /* @__PURE__ */ e(V, { name: "corner-down-left", size: "xs" })
+    }
+  ) });
+}
+const Le = { source: "code", rendered: "file-text", split: "columns-3" };
+function Ie({ className: o }) {
+  const { view: i, setView: s, views: t } = x("CodeEditorViewSwitch"), a = w().codeEditor;
+  return t.length < 2 ? null : /* @__PURE__ */ e(
+    Ce,
+    {
+      variant: "segmented",
+      multiple: !1,
+      value: [i],
+      onValueChange: (n) => {
+        const l = n[0];
+        typeof l == "string" && s(l);
+      },
+      "aria-label": a.view,
+      "data-code-views": "",
+      className: d("shrink-0 p-0.5", o),
+      children: t.map((n) => /* @__PURE__ */ e(F, { content: a.views[n], children: /* @__PURE__ */ e(
+        te,
+        {
+          size: "sm",
+          iconOnly: !0,
+          value: n,
+          "aria-label": a.views[n],
+          className: d("dx-tap shrink-0", n === "split" && "hidden md:inline-flex"),
+          children: /* @__PURE__ */ e(V, { name: Le[n], size: "xs" })
+        }
+      ) }, n))
+    }
+  );
+}
+function Ke() {
+  const { view: o } = x("CodeEditorDefaultToolbar");
+  return /* @__PURE__ */ h(De, { children: [
+    /* @__PURE__ */ e(Ve, {}),
+    /* @__PURE__ */ e(Ie, {}),
+    o !== "rendered" && /* @__PURE__ */ e(ze, {}),
+    /* @__PURE__ */ e(We, {})
+  ] });
+}
+function Me({ tabLeaves: o }) {
+  const i = m(), s = w().codeEditor;
+  return /* @__PURE__ */ e("div", { className: i.footer(), children: /* @__PURE__ */ e("span", { "data-code-hint": "", "aria-live": "polite", className: i.hint(), children: o ? s.tabLeavesHint : s.tabIndentsHint }) });
+}
+export {
+  ye as CodeEditor,
+  Ve as CodeEditorCaption,
+  We as CodeEditorCopyButton,
+  De as CodeEditorToolbar,
+  Ie as CodeEditorViewSwitch,
+  ze as CodeEditorWrapToggle
+};
+//# sourceMappingURL=CodeEditor.js.map

package/dist/components/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","sources":["../../src/components/CodeEditor.tsx"],"sourcesContent":["import {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { copyText } from \"../lib/clipboard\";\nimport { useNumberFormat, useUiStrings } from \"../lib/i18n\";\nimport { MarkdownNodes, markdown, parseMarkdown } from \"../lib/syntax/markdown\";\nimport {\n  autoIndentNewline,\n  handleAutoPair,\n  handlePairBackspace,\n  indentSelection,\n} from \"./code-editor/editing\";\nimport {\n  CodeEditorProvider,\n  useCodeEditor,\n  type CodeEditorContextValue,\n  type CodeEditorView,\n} from \"./code-editor/context\";\nimport { CodeEditorGutterNumbers, CodeEditorTokens, useTokens } from \"./code-editor/highlight\";\nimport { code } from \"./code-editor/recipe\";\nimport { useControllable } from \"../lib/use-controllable\";\nimport { Icon } from \"./Icon\";\nimport { Tooltip } from \"./Popover\";\nimport { Toggle, ToggleGroup } from \"./Toggle\";\n\n/* ============================================================================\n   CODE EDITOR\n   One component that is a viewer when `readOnly` and an editor when it is not.\n\n   IT IS AN \"EDITOR\" EVEN READ-ONLY, because read-only does not change what a\n   control IS — `<input readOnly>` is still an input, and both Monaco and\n   CodeMirror call a read-only instance an editor. \"CodeViewer\" would name the\n   quieter half and hide the harder one.\n\n   `readOnly` DEFAULTS TO TRUE. Viewing is the common case, and a `value` with\n   no change handler on an editable surface is the standard React\n   controlled-input trap — the field silently refuses every keystroke and\n   nothing reports why. Defaulting to read-only makes that state unreachable by\n   accident; turning a surface editable is an explicit act.\n\n   THE MECHANISM: a transparent `<textarea>` sitting exactly on top of a `<pre>`\n   of the same text, both inside ONE scroll container. NOT `contenteditable` —\n   the Vue original this replaces uses it and consequently needs a whole\n   cursor-restoration module, because re-highlighting destroys and rebuilds the\n   DOM under the caret. A textarea keeps selection, undo, IME composition,\n   autocorrect and mobile keyboards for free, by being a real form control\n   rather than by re-implementing one.\n\n   ALIGNMENT IS THE WHOLE GAME. If the two layers disagree about any metric by\n   any amount, the caret drifts off the character it appears to sit on. Three\n   things enforce that here and none of them is vigilance:\n\n     * ONE CSS class (`dx-code-metrics`, `src/styles/syntax.css`) carries every\n       metric, and every layer takes that same class rather than the same list\n       of utilities — so \"someone adds tracking-tight to one of them\" is not a\n       thing that can be expressed;\n     * the layers share ONE scroller, so scroll sync is structural. There is no\n       `onScroll` handler, and therefore no frame where one layer has moved and\n       the other has not;\n     * tokens are offsets into the source, so the highlighted text is provably\n       the same characters in the same order as the textarea's.\n\n   `scripts/probe-code.mjs` measures the result in a real browser rather than\n   trusting any of the above.\n\n   THERE IS NO `showToolbar` / `showLineNumbers` BOOLEAN. Following `Chat.tsx`:\n   the configuration IS the switch. `startLine` gives you a gutter,\n   `previewLines` gives you a collapsed preview, a markdown `language` gives you\n   the rendered view, and an editable instance gives you the editing chrome.\n   ========================================================================= */\n\nexport type { CodeEditorView } from \"./code-editor/context\";\n\n/** Every name the markdown grammar answers to, read off the grammar itself so\n    this cannot drift from the language it describes. */\nconst MARKDOWN_NAMES = new Set<string>([markdown.name, ...(markdown.aliases ?? [])]);\n\nconst isMarkdown = (language: string | null | undefined): boolean =>\n  !!language && MARKDOWN_NAMES.has(language.trim().toLowerCase());\n\n/* ----------------------------------------------------------------------------\n   ROOT\n   -------------------------------------------------------------------------- */\n\nexport interface CodeEditorProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"title\" | \"onChange\"> {\n  /** The text, when the consumer owns it. */\n  value?: string;\n  /** The starting text, when the component owns it. */\n  defaultValue?: string;\n  /** Called with the whole document after every edit. */\n  onValueChange?: (next: string) => void;\n  /**\n   * No textarea, no editing chrome — a viewer. Defaults to TRUE; see the banner\n   * for why that direction and not the other.\n   */\n  readOnly?: boolean;\n  /** Grammar to highlight with. Unknown or absent renders as plain text. */\n  language?: string;\n  /** Caption for the toolbar — a filename, usually. */\n  filename?: string;\n  /** Accessible name for the editable surface or the scrollable viewer. */\n  label?: string;\n  /**\n   * Number to print beside the FIRST line. Supplying one is what renders the\n   * gutter, so an excerpt lifted from the middle of a file numbers itself\n   * honestly and there is no second boolean to disagree with it.\n   */\n  startLine?: number;\n  /** Tallest the surface may grow, in lines, before it scrolls. */\n  maxLines?: number;\n  /**\n   * Start collapsed to this many lines, with a control to open it. Read-only\n   * only: collapsing a surface someone is typing into hides their own caret.\n   */\n  previewLines?: number;\n  /** Soft wrap, when the consumer owns it. */\n  wrap?: boolean;\n  /** Soft wrap at mount, when the component owns it. */\n  defaultWrap?: boolean;\n  onWrapChange?: (next: boolean) => void;\n  /** Presentation, when the consumer owns it. */\n  view?: CodeEditorView;\n  /** Presentation at mount, when the component owns it. */\n  defaultView?: CodeEditorView;\n  onViewChange?: (next: CodeEditorView) => void;\n  /** What Tab inserts and what auto-indent repeats. */\n  indent?: string;\n  /** Shown in an empty editable surface. */\n  placeholder?: string;\n  /**\n   * Replaces the default toolbar. Compose `CodeEditorCaption`,\n   * `CodeEditorViewSwitch`, `CodeEditorWrapToggle` and `CodeEditorCopyButton`\n   * inside a `CodeEditorToolbar` — they read the same context the default one\n   * does — or render anything else entirely.\n   */\n  toolbar?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function CodeEditor({\n  value,\n  defaultValue,\n  onValueChange,\n  readOnly = true,\n  language,\n  filename,\n  label,\n  startLine,\n  maxLines,\n  previewLines,\n  wrap,\n  defaultWrap = false,\n  onWrapChange,\n  view,\n  defaultView,\n  onViewChange,\n  indent = \"  \",\n  placeholder,\n  toolbar,\n  className,\n  ref,\n  ...props\n}: CodeEditorProps) {\n  const [text, setText] = useControllable(value, defaultValue ?? \"\", onValueChange);\n  const [soft, setSoft] = useControllable(wrap, defaultWrap, onWrapChange);\n\n  const renders = isMarkdown(language);\n  /* The switch offers what THIS instance can actually do. A viewer gains\n     nothing from `split` — both halves would be read-only renderings of the\n     same text — so it appears only where there is a caret worth watching the\n     preview update against. */\n  const views: CodeEditorView[] = useMemo(\n    () =>\n      !renders ? [\"source\"] : readOnly ? [\"source\", \"rendered\"] : [\"source\", \"rendered\", \"split\"],\n    [renders, readOnly],\n  );\n  const [rawView, setView] = useControllable(\n    view,\n    defaultView ?? (renders && readOnly ? \"rendered\" : \"source\"),\n    onViewChange,\n  );\n  /* A view this instance cannot offer resolves to source rather than rendering\n     nothing: `language` can change under a pinned `defaultView`, and a blank\n     panel with no control to leave it would be the only symptom. */\n  // I18N-ALLOW: view id fallback, compared against the view ids the caller enables\n  const activeView = views.includes(rawView) ? rawView : \"source\";\n\n  const lineCount = useMemo(() => text.split(\"\\n\").length, [text]);\n\n  const [copied, setCopied] = useState(false);\n  const copyTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const copy = useCallback(() => {\n    void copyText(text)\n      .then(() => {\n        setCopied(true);\n        clearTimeout(copyTimer.current);\n        copyTimer.current = setTimeout(() => setCopied(false), 1600);\n      })\n      .catch(() => {\n        /* Both the async Clipboard API and the execCommand fallback failed —\n           a genuine, unrecoverable copy failure (DX-3661). The button then\n           does not confirm; nothing else breaks. */\n      });\n  }, [text]);\n\n  const collapsible = readOnly && previewLines !== undefined && lineCount > previewLines;\n  const [expanded, setExpanded] = useState(false);\n  const strings = useUiStrings().codeEditor;\n  const fmt = useNumberFormat();\n  const collapsed = collapsible && !expanded;\n\n  /* Lives here rather than inside the surface because the FOOTER is what says\n     it out loud, and the footer is a sibling of the surface. A hint that is\n     one component away from the state it describes is a hint that goes stale. */\n  const [tabLeaves, setTabLeaves] = useState(false);\n\n  const context: CodeEditorContextValue = useMemo(\n    () => ({\n      value: text,\n      language: language ?? null,\n      filename,\n      readOnly,\n      wrap: soft,\n      setWrap: setSoft,\n      view: activeView,\n      setView,\n      views,\n      copy,\n      copied,\n      lineCount,\n    }),\n    [\n      text,\n      language,\n      filename,\n      readOnly,\n      soft,\n      setSoft,\n      activeView,\n      setView,\n      views,\n      copy,\n      copied,\n      lineCount,\n    ],\n  );\n\n  const s = code();\n  const visibleLines = collapsed ? previewLines : maxLines;\n  /* `1lh` resolves against the scroller's own line-height, which comes from the\n     same `dx-code-metrics` rule the text layers use — so a height stated in\n     LINES stays a whole number of lines when `--ui-scale` moves the type. A\n     pixel figure would cut the last row in half at every scale but one. */\n  const heightStyle: CSSProperties | undefined =\n    visibleLines === undefined\n      ? undefined\n      : { maxHeight: `calc(${visibleLines} * 1lh + 2 * var(--code-pad-y))` };\n\n  return (\n    <CodeEditorProvider value={context}>\n      <div\n        ref={ref}\n        data-code-root=\"\"\n        data-view={activeView}\n        data-read-only={readOnly ? \"\" : undefined}\n        className={cn(s.root(), className)}\n        {...props}\n      >\n        {toolbar ?? <CodeEditorDefaultToolbar />}\n\n        {/* `relative` so the collapsed fade can be positioned against the\n            VISIBLE box. Inside the scroller it would anchor to the scrolled\n            content instead and sit below the fold, which looks exactly like a\n            fade that was never rendered. */}\n        <div className=\"relative min-w-0\">\n          <div className={s.body()}>\n            {activeView !== \"rendered\" && (\n              <CodeEditorSurface\n                text={text}\n                onText={setText}\n                language={language}\n                label={label ?? filename ?? (readOnly ? strings.readOnlyLabel : strings.editableLabel)}\n                readOnly={readOnly}\n                startLine={startLine}\n                wrap={soft}\n                indent={indent}\n                placeholder={placeholder}\n                style={heightStyle}\n                collapsed={collapsed}\n                tabLeaves={tabLeaves}\n                onTabLeavesChange={setTabLeaves}\n              />\n            )}\n            {activeView !== \"source\" && (\n              /* The divider belongs to the SECOND pane so a single-pane view\n                 never carries a stray edge. Horizontal only from `md` up: two\n                 panes on a phone is two unreadable columns, while stacking is\n                 the same content in the order it is read. */\n              <div\n                className={cn(\n                  \"flex min-w-0 flex-1\",\n                  activeView === \"split\" && \"border-t border-border-subtle md:border-t-0 md:border-l\",\n                )}\n              >\n                <CodeEditorPreview text={text} style={heightStyle} collapsed={collapsed} />\n              </div>\n            )}\n          </div>\n          {collapsed && <div aria-hidden=\"true\" className={s.fade()} />}\n        </div>\n\n        {collapsible && (\n          <button\n            type=\"button\"\n            onClick={() => setExpanded((open) => !open)}\n            aria-expanded={expanded}\n            data-code-expand=\"\"\n            className={s.expand()}\n          >\n            <Icon name={expanded ? \"chevron-up\" : \"chevron-down\"} size=\"xs\" />\n            {expanded ? strings.collapse : strings.showAllLines(lineCount, fmt(lineCount))}\n          </button>\n        )}\n\n        {!readOnly && <CodeEditorHint tabLeaves={tabLeaves} />}\n      </div>\n    </CodeEditorProvider>\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   THE SURFACE — highlight layer, optional gutter, and the textarea over both\n   -------------------------------------------------------------------------- */\n\ninterface SurfaceProps {\n  text: string;\n  onText: (next: string) => void;\n  language?: string;\n  label: string;\n  readOnly: boolean;\n  startLine?: number;\n  wrap: boolean;\n  indent: string;\n  placeholder?: string;\n  style?: CSSProperties;\n  collapsed: boolean;\n  tabLeaves: boolean;\n  onTabLeavesChange: (next: boolean) => void;\n}\n\nfunction CodeEditorSurface({\n  text,\n  onText,\n  language,\n  label,\n  readOnly,\n  startLine,\n  wrap,\n  indent,\n  placeholder,\n  style,\n  collapsed,\n  tabLeaves,\n  onTabLeavesChange,\n}: SurfaceProps) {\n  const s = code();\n  const tokens = useTokens(text, language);\n  const lineCount = useMemo(() => text.split(\"\\n\").length, [text]);\n\n  /* See `CodeEditorGutterNumbers`: numbers beside wrapped lines drift a row\n     further out of true for every line that wraps, and a number printed beside\n     the wrong line is worse than no number because it is believed. */\n  const gutter = startLine !== undefined && !wrap;\n  const digits = gutter ? String(startLine + lineCount - 1).length : 0;\n\n  /* Read synchronously in the handler; the state above is what the footer\n     renders. Two keystrokes inside one frame would otherwise both see the\n     pre-Escape value, and the Tab that was supposed to leave would indent. */\n  const leaves = useRef(tabLeaves);\n  const arm = (next: boolean) => {\n    leaves.current = next;\n    onTabLeavesChange(next);\n  };\n\n  const onKeyDown = (event: ReactKeyboardEvent<HTMLTextAreaElement>) => {\n    const el = event.currentTarget;\n    /* An IME is mid-composition: every key belongs to the input method, and\n       intercepting one drops a character out of the middle of a word in every\n       language that needs composition to be typed at all. */\n    if (event.nativeEvent.isComposing) return;\n\n    if (event.key === \"Escape\") {\n      /* Deliberately NOT prevented: Escape must still close a dialog this\n         editor happens to sit inside. Arming and bubbling do not conflict. */\n      arm(true);\n      return;\n    }\n\n    if (event.key === \"Tab\") {\n      /* THE ESCAPE FROM THE KEYBOARD TRAP. A Tab that always indents makes the\n         surface enterable and not leavable, which fails WCAG 2.1.2 outright.\n         Escape-then-Tab is the Monaco/Ace convention rather than CodeMirror's\n         inverse (Tab always leaves, a chord indents) because Tab-to-indent is\n         what a person typing code reaches for first — the escape only has to\n         exist, be documented, and be the rarer of the two. The footer states\n         it in words and updates the moment it is armed, because an escape\n         hatch nobody can discover is not one. */\n      if (leaves.current) {\n        arm(false);\n        return;\n      }\n      event.preventDefault();\n      indentSelection(el, indent, event.shiftKey);\n      return;\n    }\n\n    if (leaves.current) arm(false);\n\n    /* Ctrl/Cmd/Alt belong to the browser and the host application — undo,\n       redo, select-all, save. Intercepting a printable key here is how a code\n       editor eats Ctrl+Z, which is the defect people notice first. */\n    if (event.ctrlKey || event.metaKey || event.altKey) return;\n\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      autoIndentNewline(el, indent);\n      return;\n    }\n    if (event.key === \"Backspace\") {\n      if (handlePairBackspace(el)) event.preventDefault();\n      return;\n    }\n    if (event.key.length === 1 && handleAutoPair(el, event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  return (\n    <div\n      data-code-scroller=\"\"\n      style={style}\n      className={cn(s.scroller(), collapsed && \"overflow-hidden\")}\n      /* A region that can only be panned with a pointer is unreachable by\n         keyboard, and long lines of code are the single most common place that\n         happens — the axe scan found exactly this defect in this package once.\n         In EDIT mode the textarea is already the tab stop and already scrolls\n         with the caret, so a second one here would only cost a Tab press. */\n      /* GROUP, NOT REGION: `region` is a landmark, so a page showing several\n         code blocks offered several identical navigation destinations —\n         axe's `landmark-unique`. `group` keeps the name and the\n         announcement without adding a destination. */\n      {...(readOnly ? { tabIndex: 0, role: \"group\", \"aria-label\": label } : {})}\n    >\n      <div\n        data-code-layers=\"\"\n        {...(gutter ? { \"data-gutter\": \"\" } : {})}\n        style={{ \"--code-digits\": digits } as CSSProperties}\n        className={cn(s.layers(), wrap ? \"w-full\" : \"w-max min-w-full\")}\n      >\n        {gutter && (\n          <div data-code-gutter=\"\" aria-hidden=\"true\" className={cn(s.gutter(), \"dx-code-nowrap\")}>\n            <CodeEditorGutterNumbers count={lineCount} from={startLine} />\n          </div>\n        )}\n\n        <pre\n          data-code-pre=\"\"\n          /* Hidden from assistive tech ONLY when a textarea holds the same\n             characters — otherwise this IS the content, and hiding it leaves a\n             viewer that announces nothing at all. */\n          aria-hidden={readOnly ? undefined : \"true\"}\n          className={cn(\n            s.pre(),\n            wrap ? \"dx-code-wrap min-w-0 flex-1\" : \"dx-code-nowrap w-max shrink-0\",\n          )}\n        >\n          <CodeEditorTokens source={text} tokens={tokens} />\n        </pre>\n\n        {!readOnly && (\n          <textarea\n            data-code-textarea=\"\"\n            value={text}\n            onChange={(event) => onText(event.target.value)}\n            onKeyDown={onKeyDown}\n            onBlur={() => arm(false)}\n            aria-label={label}\n            placeholder={placeholder}\n            /* Every one of these is a browser feature that is right for prose\n               and wrong for code: a red underline beneath every identifier, an\n               apostrophe silently turned into a typographic quote inside a\n               string literal, a capital added to the front of a variable. */\n            spellCheck={false}\n            autoCapitalize=\"off\"\n            autoCorrect=\"off\"\n            autoComplete=\"off\"\n            /* Grammarly and its relatives inject an overlay INTO the textarea's\n               box, which shifts the text off the highlight layer beneath it. */\n            data-gramm=\"false\"\n            data-gramm_editor=\"false\"\n            data-enable-grammarly=\"false\"\n            /* The attribute AND the CSS class. `wrap` is what the form control\n               itself honours; `white-space` is what the `<pre>` obeys. Setting\n               only one leaves the two layers wrapping at different widths,\n               which puts every line after the first long one on the wrong row. */\n            wrap={wrap ? \"soft\" : \"off\"}\n            style={{ left: \"var(--code-gutter-w)\" }}\n            className={cn(s.textarea(), wrap ? \"dx-code-wrap\" : \"dx-code-nowrap\")}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   RENDERED MARKDOWN\n   -------------------------------------------------------------------------- */\n\nfunction CodeEditorPreview({\n  text,\n  style,\n  collapsed,\n}: {\n  text: string;\n  style?: CSSProperties;\n  collapsed: boolean;\n}) {\n  const s = code();\n  const nodes = useMemo(() => parseMarkdown(text), [text]);\n\n  return (\n    <div\n      data-code-preview=\"\"\n      style={style}\n      className={cn(s.rendered(), collapsed && \"overflow-hidden\")}\n    >\n      <MarkdownNodes\n        nodes={nodes}\n        renderCode={(block) => (\n          /* THE NESTING, and it is the feature rather than a convenience: a\n             fence inside rendered markdown is rendered by the same component,\n             in its own language, with its own toolbar and copy button. The\n             markdown renderer takes this as a prop precisely so it never has to\n             import this file — that direction would be a cycle.\n\n             `view=\"source\"` is pinned rather than left to the default. A ```md\n             fence would otherwise render as prose inside prose, and a reader\n             would have no way to see where the quoted document begins. */\n          <CodeEditor\n            value={block.code}\n            language={block.language ?? undefined}\n            view=\"source\"\n            className=\"my-3\"\n          />\n        )}\n      />\n    </div>\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   TOOLBAR PARTS — flat siblings, never `CodeEditor.Toolbar`\n\n   Each reads the shared context and throws outside a `<CodeEditor>`, so a\n   replacement toolbar composes them without re-declaring the whole surface.\n   -------------------------------------------------------------------------- */\n\nexport interface CodeEditorToolbarProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/** The bar itself. WRAPS rather than scrolls — at 375px the caption drops onto\n    its own line instead of pushing the copy button off the screen. */\nexport function CodeEditorToolbar({ children, className }: CodeEditorToolbarProps) {\n  const s = code();\n  return (\n    <div data-code-toolbar=\"\" className={cn(s.toolbar(), className)}>\n      {children}\n    </div>\n  );\n}\n\n/** Filename, or the language when there is no filename — whichever names it. */\nexport function CodeEditorCaption({ className }: { className?: string }) {\n  const { filename, language } = useCodeEditor(\"CodeEditorCaption\");\n  const s = code();\n  const strings = useUiStrings().codeEditor;\n  return (\n    <span data-code-caption=\"\" className={cn(s.caption(), className)}>\n      {filename ?? language ?? strings.captionFallback}\n    </span>\n  );\n}\n\nexport function CodeEditorCopyButton({ className }: { className?: string }) {\n  const { copy, copied } = useCodeEditor(\"CodeEditorCopyButton\");\n  const s = code();\n  const strings = useUiStrings().codeEditor;\n  return (\n    <Tooltip content={copied ? strings.copied : strings.copy}>\n      <button\n        type=\"button\"\n        onClick={copy}\n        data-code-copy=\"\"\n        aria-label={copied ? strings.copied : strings.copyCode}\n        className={cn(s.control(), className)}\n      >\n        <Icon name={copied ? \"check\" : \"copy\"} size=\"xs\" />\n      </button>\n    </Tooltip>\n  );\n}\n\nexport function CodeEditorWrapToggle({ className }: { className?: string }) {\n  const { wrap, setWrap } = useCodeEditor(\"CodeEditorWrapToggle\");\n  const strings = useUiStrings().codeEditor;\n  return (\n    <Tooltip content={wrap ? strings.stopWrapping : strings.wrapLongLines}>\n      <Toggle\n        size=\"sm\"\n        iconOnly\n        pressed={wrap}\n        onPressedChange={setWrap}\n        aria-label={strings.softWrap}\n        className={cn(\"dx-tap shrink-0\", className)}\n      >\n        <Icon name=\"corner-down-left\" size=\"xs\" />\n      </Toggle>\n    </Tooltip>\n  );\n}\n\nconst VIEW_ICON = { source: \"code\", rendered: \"file-text\", split: \"columns-3\" } as const;\n\n/**\n * Source / Preview / Split.\n *\n * RENDERS NOTHING when the instance has only one view. A switch with a single\n * position is a control that teaches people it does not work — and that is the\n * configuration being the switch, not a `showViewSwitch` prop.\n */\nexport function CodeEditorViewSwitch({ className }: { className?: string }) {\n  const { view, setView, views } = useCodeEditor(\"CodeEditorViewSwitch\");\n  const strings = useUiStrings().codeEditor;\n  if (views.length < 2) return null;\n\n  return (\n    <ToggleGroup\n      variant=\"segmented\"\n      multiple={false}\n      value={[view]}\n      /* Base UI hands back the group's whole value. An empty array is the press\n         that would have turned the ACTIVE entry off; ignoring it is what makes\n         three toggles behave as one choice, instead of leaving an empty panel\n         with no control to get back from. */\n      onValueChange={(next: unknown[]) => {\n        const chosen = next[0];\n        if (typeof chosen === \"string\") setView(chosen as CodeEditorView);\n      }}\n      aria-label={strings.view}\n      data-code-views=\"\"\n      className={cn(\"shrink-0 p-0.5\", className)}\n    >\n      {views.map((entry) => (\n        <Tooltip key={entry} content={strings.views[entry]}>\n          <Toggle\n            size=\"sm\"\n            iconOnly\n            value={entry}\n            aria-label={strings.views[entry]}\n            /* Split is a two-column layout; below `md` there is no room for two\n               readable columns, so the option is not offered rather than being\n               offered and collapsing to something else. */\n            className={cn(\"dx-tap shrink-0\", entry === \"split\" && \"hidden md:inline-flex\")}\n          >\n            <Icon name={VIEW_ICON[entry]} size=\"xs\" />\n          </Toggle>\n        </Tooltip>\n      ))}\n    </ToggleGroup>\n  );\n}\n\nfunction CodeEditorDefaultToolbar() {\n  const { view } = useCodeEditor(\"CodeEditorDefaultToolbar\");\n  return (\n    <CodeEditorToolbar>\n      <CodeEditorCaption />\n      <CodeEditorViewSwitch />\n      {/* Wrapping is a property of the SOURCE layer, so its control leaves with\n          the layer rather than sitting inert above rendered prose. */}\n      {view !== \"rendered\" && <CodeEditorWrapToggle />}\n      <CodeEditorCopyButton />\n    </CodeEditorToolbar>\n  );\n}\n\n/**\n * The keyboard-escape hint.\n *\n * A VISIBLE, PERMANENT LINE rather than a tooltip on something. WCAG 2.1.2\n * asks for a documented way out of a keyboard trap, and \"documented\" cannot\n * mean a hover target — the person who needs it is not using a pointer. The\n * live region is what makes pressing Escape produce feedback at all for\n * someone who cannot see the line change.\n */\nfunction CodeEditorHint({ tabLeaves }: { tabLeaves: boolean }) {\n  const s = code();\n  const strings = useUiStrings().codeEditor;\n  return (\n    <div className={s.footer()}>\n      <span data-code-hint=\"\" aria-live=\"polite\" className={s.hint()}>\n        {tabLeaves ? strings.tabLeavesHint : strings.tabIndentsHint}\n      </span>\n    </div>\n  );\n}\n"],"names":["MARKDOWN_NAMES","markdown","isMarkdown","language","CodeEditor","value","defaultValue","onValueChange","readOnly","filename","label","startLine","maxLines","previewLines","wrap","defaultWrap","onWrapChange","view","defaultView","onViewChange","indent","placeholder","toolbar","className","ref","props","text","setText","useControllable","soft","setSoft","renders","views","useMemo","rawView","setView","activeView","lineCount","copied","setCopied","useState","copyTimer","useRef","copy","useCallback","copyText","collapsible","expanded","setExpanded","strings","useUiStrings","fmt","useNumberFormat","collapsed","tabLeaves","setTabLeaves","context","s","code","visibleLines","heightStyle","jsx","CodeEditorProvider","jsxs","cn","CodeEditorDefaultToolbar","CodeEditorSurface","CodeEditorPreview","open","Icon","CodeEditorHint","onText","style","onTabLeavesChange","tokens","useTokens","gutter","digits","leaves","arm","next","onKeyDown","event","el","indentSelection","autoIndentNewline","handlePairBackspace","handleAutoPair","CodeEditorGutterNumbers","CodeEditorTokens","nodes","parseMarkdown","MarkdownNodes","block","CodeEditorToolbar","children","CodeEditorCaption","useCodeEditor","CodeEditorCopyButton","Tooltip","CodeEditorWrapToggle","setWrap","Toggle","VIEW_ICON","CodeEditorViewSwitch","ToggleGroup","chosen","entry"],"mappings":"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"}

package/dist/components/ColorPicker.js

@@ -0,0 +1,174 @@
+import { jsx as n, jsxs as U } from "react/jsx-runtime";
+import { useState as x, useRef as M, useEffect as z } from "react";
+import { cn as h } from "../lib/cn.js";
+import { hexToHsv as y, hsvToHex as w, isHexColor as F } from "../lib/color.js";
+import { Button as R } from "./Button.js";
+import { Field as O } from "./Field.js";
+import { Input as $ } from "./Input.js";
+import { Popover as j } from "./Popover.js";
+import { useUiStrings as I } from "../lib/i18n/provider.js";
+const B = 0.01, G = 0.1, V = 1, W = 10, p = (r, g, a) => Math.min(a, Math.max(g, r)), X = "linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)";
+function _(r, g) {
+  const a = M(!1), i = (o) => {
+    const t = o.currentTarget.getBoundingClientRect();
+    t.width === 0 || t.height === 0 || r(p((o.clientX - t.left) / t.width, 0, 1), p((o.clientY - t.top) / t.height, 0, 1));
+  }, l = (o) => {
+    a.current && (a.current = !1, o.currentTarget.hasPointerCapture?.(o.pointerId) && o.currentTarget.releasePointerCapture(o.pointerId), g());
+  };
+  return {
+    onPointerDown: (o) => {
+      o.button === 0 && (a.current = !0, o.currentTarget.setPointerCapture?.(o.pointerId), o.currentTarget.focus(), i(o));
+    },
+    onPointerMove: (o) => {
+      a.current && i(o);
+    },
+    onPointerUp: l,
+    onPointerCancel: l
+  };
+}
+const Y = { sm: "size-3.5", md: "size-4.5", lg: "size-5.5" }, S = [
+  "absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-control-knob shadow-knob pointer-events-none",
+  "group-focus-visible/surface:shadow-[0_0_0_3px_var(--control-focus-halo)]"
+], T = "group/surface relative touch-none select-none outline-none rounded-md border border-border";
+function q({ hsv: r, value: g, presets: a, onPreview: i, onCommit: l, onRelease: o }) {
+  const t = I().colorPicker, d = w(r), [c, k] = x(d), [m, u] = x(!1), [D, H] = x(d);
+  d !== D && (H(d), k(d), u(!1));
+  const C = _((e, s) => i({ ...r, s: e, v: 1 - s }), o), A = _((e) => i({ ...r, h: e * 360 }), o), L = (e) => {
+    const s = e.shiftKey ? G : B, b = e.key === "ArrowLeft" ? { ...r, s: p(r.s - s, 0, 1) } : e.key === "ArrowRight" ? { ...r, s: p(r.s + s, 0, 1) } : e.key === "ArrowUp" ? { ...r, v: p(r.v + s, 0, 1) } : e.key === "ArrowDown" ? { ...r, v: p(r.v - s, 0, 1) } : null;
+    b && (e.preventDefault(), l(b));
+  }, f = (e) => {
+    const s = e.shiftKey ? W : V, b = e.key === "ArrowLeft" || e.key === "ArrowDown" ? { ...r, h: p(r.h - s, 0, 360) } : e.key === "ArrowRight" || e.key === "ArrowUp" ? { ...r, h: p(r.h + s, 0, 360) } : null;
+    b && (e.preventDefault(), l(b));
+  }, P = (e) => {
+    if (e.key === "Enter") {
+      if (e.preventDefault(), !F(c)) {
+        u(!0);
+        return;
+      }
+      u(!1), l(y(c));
+    }
+  }, N = Math.round(r.h), v = Math.round(r.s * 100), K = Math.round(r.v * 100), E = w({ h: r.h, s: 1, v: 1 });
+  return /* @__PURE__ */ U("div", { className: "flex w-64 max-w-full flex-col gap-3", children: [
+    a && a.length > 0 && /* @__PURE__ */ n("div", { role: "group", "aria-label": t.presets, className: "flex flex-wrap gap-2", children: a.map((e) => {
+      const s = e.toLowerCase() === g.toLowerCase();
+      return /* @__PURE__ */ n(
+        R,
+        {
+          variant: "outline",
+          iconOnly: !0,
+          size: "xs",
+          "aria-label": t.colour(e),
+          "aria-pressed": s,
+          onClick: () => l(y(e)),
+          className: h(s && "border-control shadow-[0_0_0_2px_var(--control-focus-halo)]"),
+          children: /* @__PURE__ */ n("span", { "aria-hidden": !0, className: "size-3 rounded-full border border-border", style: { backgroundColor: e } })
+        },
+        e
+      );
+    }) }),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": t.area,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": v,
+        "aria-valuetext": t.areaValue(v, K),
+        onKeyDown: L,
+        ...C,
+        className: h(T, "h-36 cursor-crosshair"),
+        style: {
+          backgroundColor: E,
+          backgroundImage: "linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent)"
+        },
+        children: /* @__PURE__ */ n("span", { className: h(S), style: { left: `${r.s * 100}%`, top: `${(1 - r.v) * 100}%`, backgroundColor: d } })
+      }
+    ),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": t.hue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 360,
+        "aria-valuenow": N,
+        "aria-valuetext": t.hueValue(N),
+        onKeyDown: f,
+        ...A,
+        className: h(T, "h-4 cursor-ew-resize"),
+        style: { backgroundImage: X },
+        children: /* @__PURE__ */ n("span", { className: h(S, "top-1/2"), style: { left: `${r.h / 360 * 100}%`, backgroundColor: E } })
+      }
+    ),
+    /* @__PURE__ */ n(O, { label: t.hexField, error: m ? t.invalidHex : void 0, children: /* @__PURE__ */ n(
+      $,
+      {
+        size: "sm",
+        value: c,
+        spellCheck: !1,
+        autoComplete: "off",
+        onChange: (e) => {
+          k(e.target.value), u(!1);
+        },
+        onKeyDown: P
+      }
+    ) })
+  ] });
+}
+function sr({ value: r, onChange: g, presets: a, label: i, disabled: l = !1, size: o = "md", className: t }) {
+  const d = I().colorPicker, [c, k] = x(() => y(r)), m = M(c);
+  z(() => {
+    m.current = c;
+  });
+  const u = (f) => {
+    m.current = f, k(f);
+  }, [D, H] = x(r);
+  r !== D && (H(r), w(c) !== r.toLowerCase() && u(y(r)));
+  const C = (f) => {
+    u(f);
+    const P = w(f);
+    P !== r.toLowerCase() && g(P);
+  }, A = w(c), L = d.colour(A);
+  return /* @__PURE__ */ n(
+    j,
+    {
+      align: "start",
+      "aria-label": i,
+      className: t,
+      onOpenChange: (f) => {
+        !f && w(m.current) !== r.toLowerCase() && u(y(r));
+      },
+      trigger: /* @__PURE__ */ n(
+        R,
+        {
+          variant: "outline",
+          iconOnly: !0,
+          size: o,
+          className: "self-start",
+          disabled: l,
+          "aria-label": i ?? L,
+          "aria-description": i ? L : void 0,
+          children: /* @__PURE__ */ n("span", { "aria-hidden": !0, className: h(Y[o], "rounded-sm border border-border"), style: { backgroundColor: A } })
+        }
+      ),
+      children: /* @__PURE__ */ n(
+        q,
+        {
+          hsv: c,
+          value: r,
+          presets: a,
+          onPreview: u,
+          onCommit: C,
+          onRelease: () => C(m.current)
+        }
+      )
+    }
+  );
+}
+export {
+  sr as ColorPicker
+};
+//# sourceMappingURL=ColorPicker.js.map