@elabs-ai/components-ui 4.1.0 → 5.0.0

package/dist/chunk-YPLKH5H4.js

@@ -0,0 +1,226 @@
+"use client";
+import {
+  lineOfParseError,
+  locateJsonPath,
+  offsetOfLine
+} from "./chunk-QF6UWWDY.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "./chunk-TU24Y4HN.js";
+import {
+  useControllableState
+} from "./chunk-5LCN5Q2L.js";
+import {
+  Textarea
+} from "./chunk-KUAVM54Y.js";
+import {
+  Badge
+} from "./chunk-ECCNRCC4.js";
+import {
+  Button
+} from "./chunk-VA2OONPE.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/spec-playground/spec-playground.tsx
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Braces, ChevronDown, CircleAlert, CircleCheck, RotateCcw } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_SPEC_PLAYGROUND_LABELS = {
+  editor: "Spec (JSON)",
+  preview: "Rendered result",
+  errors: "Problems",
+  loadExample: "Load example",
+  reset: "Reset",
+  valid: "Valid",
+  errorCount: (count) => count === 1 ? "1 error" : `${count} errors`,
+  parseError: "Parse error",
+  showingLastValid: "Showing last valid",
+  nothingValid: "Nothing valid to render yet.",
+  line: (line) => `line ${line}`
+};
+function check(text, validate) {
+  let json;
+  try {
+    json = JSON.parse(text);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return { status: "parse-error", errors: [{ path: "", code: "parse-error", message }] };
+  }
+  const result = validate(json);
+  return result.ok ? { status: "valid", spec: result.spec, errors: [] } : { status: "invalid", errors: result.errors };
+}
+function SpecPlaygroundInner({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  validate,
+  render,
+  examples = [],
+  editor,
+  onErrorSelect,
+  debounceMs = 250,
+  labels: labelsProp,
+  className,
+  ...props
+}, ref) {
+  const labels = { ...DEFAULT_SPEC_PLAYGROUND_LABELS, ...labelsProp };
+  const initial = defaultValue ?? examples[0]?.value ?? "";
+  const [resetValue] = useState(initial);
+  const [value, setValue] = useControllableState(valueProp, initial, onChange);
+  const textareaRef = useRef(null);
+  const [settled, setSettled] = useState(value);
+  useEffect(() => {
+    if (settled === value) return;
+    const timer = setTimeout(() => setSettled(value), debounceMs);
+    return () => clearTimeout(timer);
+  }, [value, settled, debounceMs]);
+  const checked = useMemo(() => check(settled, validate), [settled, validate]);
+  const lastValidRef = useRef(null);
+  if (checked.status === "valid") lastValidRef.current = { spec: checked.spec };
+  const shown = checked.status === "valid" ? { spec: checked.spec } : lastValidRef.current;
+  const stale = checked.status !== "valid" && shown !== null;
+  const lineOf = (error) => error.code === "parse-error" ? lineOfParseError(settled, error.message) : locateJsonPath(settled, error.path);
+  const selectError = (error) => {
+    const line = lineOf(error);
+    if (onErrorSelect) return onErrorSelect(error, line);
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const offset = line === void 0 ? 0 : offsetOfLine(textarea.value, line);
+    textarea.focus();
+    textarea.setSelectionRange(offset, offset);
+  };
+  const errorListId = `${props.id ?? "spec-playground"}-errors`;
+  const hasErrors = checked.errors.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "spec-playground",
+      "data-status": checked.status,
+      className: cn("grid min-w-0 gap-4 lg:grid-cols-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-slot": "spec-playground-source", className: "flex min-w-0 flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { "data-slot": "spec-playground-toolbar", className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "me-auto", children: /* @__PURE__ */ jsxs(
+              Badge,
+              {
+                "data-slot": "spec-playground-status",
+                "data-status": checked.status,
+                variant: checked.status === "valid" ? "success" : checked.status === "invalid" ? "destructive" : "warning",
+                className: "gap-1",
+                children: [
+                  checked.status === "valid" ? /* @__PURE__ */ jsx(CircleCheck, { "aria-hidden": "true", size: 14 }) : checked.status === "invalid" ? /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true", size: 14 }) : /* @__PURE__ */ jsx(Braces, { "aria-hidden": "true", size: 14 }),
+                  checked.status === "valid" ? labels.valid : checked.status === "invalid" ? labels.errorCount(checked.errors.length) : labels.parseError
+                ]
+              }
+            ) }),
+            examples.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", "data-slot": "spec-playground-examples", children: [
+                labels.loadExample,
+                /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", size: 14 })
+              ] }) }),
+              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: examples.map((example) => /* @__PURE__ */ jsx(
+                DropdownMenuItem,
+                {
+                  "data-example-id": example.id,
+                  onSelect: () => setValue(example.value),
+                  children: example.label
+                },
+                example.id
+              )) })
+            ] }) : null,
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                "data-slot": "spec-playground-reset",
+                onClick: () => setValue(resetValue),
+                children: [
+                  /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true", size: 14 }),
+                  labels.reset
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { "data-slot": "spec-playground-editor", className: "min-h-80 min-w-0", children: editor ?? /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              ref: textareaRef,
+              "data-slot": "spec-playground-textarea",
+              "aria-label": labels.editor,
+              "aria-invalid": hasErrors || void 0,
+              "aria-describedby": hasErrors ? errorListId : void 0,
+              spellCheck: false,
+              value,
+              onChange: (event) => setValue(event.target.value),
+              className: "h-80 min-h-80 resize-y font-mono text-code"
+            }
+          ) }),
+          hasErrors ? /* @__PURE__ */ jsx(
+            "ol",
+            {
+              id: errorListId,
+              "aria-label": labels.errors,
+              "data-slot": "spec-playground-errors",
+              className: "flex flex-col gap-1",
+              children: checked.errors.map((error) => {
+                const line = lineOf(error);
+                return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "spec-playground-error",
+                    "data-path": error.path,
+                    "data-code": error.code,
+                    onClick: () => selectError(error),
+                    className: "focus-ring flex w-full min-w-0 flex-wrap items-baseline gap-x-2 rounded-md border-s-2 border-s-destructive px-2 py-1 text-start text-caption hover:bg-muted",
+                    children: [
+                      error.path ? /* @__PURE__ */ jsx("code", { className: "font-mono text-code", children: error.path }) : null,
+                      /* @__PURE__ */ jsx("span", { className: "font-mono text-code text-destructive-text", children: error.code }),
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-muted-foreground", children: error.message }),
+                      line !== void 0 ? /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: labels.line(line) }) : null
+                    ]
+                  }
+                ) }, `${error.path}|${error.code}|${error.message}`);
+              })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "section",
+          {
+            "aria-label": labels.preview,
+            "data-slot": "spec-playground-preview",
+            "data-stale": stale ? "" : void 0,
+            className: "flex min-w-0 flex-col gap-2",
+            children: [
+              stale ? /* @__PURE__ */ jsx(Badge, { variant: "outline", "data-slot": "spec-playground-stale", className: "self-start", children: labels.showingLastValid }) : null,
+              shown ? render(shown.spec) : /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: labels.nothingValid })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var SpecPlayground = forwardRef(SpecPlaygroundInner);
+SpecPlayground.displayName = "SpecPlayground";
+
+export {
+  DEFAULT_SPEC_PLAYGROUND_LABELS,
+  SpecPlayground
+};
+//# sourceMappingURL=chunk-YPLKH5H4.js.map

package/dist/chunk-YPLKH5H4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/spec-playground/spec-playground.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { Braces, ChevronDown, CircleAlert, CircleCheck, RotateCcw } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../lib/use-controllable-state\";\nimport { Badge } from \"../badge\";\nimport { Button } from \"../button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu\";\nimport { Textarea } from \"../textarea\";\nimport { lineOfParseError, locateJsonPath, offsetOfLine } from \"./locate-json-path\";\n\n/** One problem a validator reports — the shape both the A2UI and DashboardSpec validators use. */\nexport interface SpecPlaygroundError {\n  /** JSON-path-like address of the problem (`root.children[2].props.label`, `$.tiles[0]`). */\n  path: string;\n  /** The validator's machine-readable code (`missing-prop`, `overlap`, …). */\n  code: string;\n  message: string;\n}\n\n/** What `validate` returns: the typed spec, or the validator's own errors. */\nexport type SpecPlaygroundValidation<TSpec> =\n  | { ok: true; spec: TSpec }\n  | { ok: false; errors: readonly SpecPlaygroundError[] };\n\n/** An entry in the `Load example` menu. */\nexport interface SpecPlaygroundExample {\n  id: string;\n  label: string;\n  /** The JSON text loaded into the editor. */\n  value: string;\n}\n\n/** The playground's status: what the last validated text turned out to be. */\nexport type SpecPlaygroundStatus = \"valid\" | \"invalid\" | \"parse-error\";\n\n/** Every string the playground renders — pass your own to localize it. */\nexport interface SpecPlaygroundLabels {\n  /** Accessible name of the default textarea editor. */\n  editor: string;\n  /** Accessible name of the rendered-result region. */\n  preview: string;\n  /** Accessible name of the error list. */\n  errors: string;\n  /** Trigger of the examples menu. */\n  loadExample: string;\n  /** Resets the editor to its initial text. */\n  reset: string;\n  /** Status chip: the text validates. */\n  valid: string;\n  /** Status chip: the validator reported `count` errors. */\n  errorCount: (count: number) => string;\n  /** Status chip: the text is not JSON. */\n  parseError: string;\n  /** Shown over the render when it is the last valid spec, not the current text. */\n  showingLastValid: string;\n  /** Shown in the render pane before any text has validated. */\n  nothingValid: string;\n  /** Suffix naming the editor line an error points at. */\n  line: (line: number) => string;\n}\n\nexport const DEFAULT_SPEC_PLAYGROUND_LABELS: SpecPlaygroundLabels = {\n  editor: \"Spec (JSON)\",\n  preview: \"Rendered result\",\n  errors: \"Problems\",\n  loadExample: \"Load example\",\n  reset: \"Reset\",\n  valid: \"Valid\",\n  errorCount: (count) => (count === 1 ? \"1 error\" : `${count} errors`),\n  parseError: \"Parse error\",\n  showingLastValid: \"Showing last valid\",\n  nothingValid: \"Nothing valid to render yet.\",\n  line: (line) => `line ${line}`,\n};\n\nexport interface SpecPlaygroundProps<TSpec> extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\"\n> {\n  /** The JSON text (controlled). */\n  value?: string;\n  /** Initial JSON text (uncontrolled); also what `Reset` restores. Default: the first example. */\n  defaultValue?: string;\n  /** Called with the new text on every edit, example load and reset. */\n  onChange?: (value: string) => void;\n  /** Checks the parsed JSON; the errors shown are exactly the ones it returns. */\n  validate: (json: unknown) => SpecPlaygroundValidation<TSpec>;\n  /** Renders a validated spec. */\n  render: (spec: TSpec) => ReactNode;\n  /** Entries of the `Load example` menu (the menu is hidden without any). */\n  examples?: readonly SpecPlaygroundExample[];\n  /**\n   * The editor. Bind it to `value`/`onChange` yourself. Default: a `Textarea`, so the\n   * playground works without a code editor.\n   */\n  editor?: ReactNode;\n  /**\n   * Called when an error is chosen, with the editor line its path resolves to — move a custom\n   * editor's caret there. The default textarea handles this itself.\n   */\n  onErrorSelect?: (error: SpecPlaygroundError, line: number | undefined) => void;\n  /** Milliseconds between the last edit and validation. Default 250. */\n  debounceMs?: number;\n  labels?: Partial<SpecPlaygroundLabels>;\n}\n\ntype Checked<TSpec> =\n  | { status: \"valid\"; spec: TSpec; errors: readonly SpecPlaygroundError[] }\n  | { status: \"invalid\" | \"parse-error\"; errors: readonly SpecPlaygroundError[] };\n\nfunction check<TSpec>(\n  text: string,\n  validate: (json: unknown) => SpecPlaygroundValidation<TSpec>,\n): Checked<TSpec> {\n  let json: unknown;\n  try {\n    json = JSON.parse(text);\n  } catch (error) {\n    const message = error instanceof Error ? error.message : String(error);\n    return { status: \"parse-error\", errors: [{ path: \"\", code: \"parse-error\", message }] };\n  }\n  const result = validate(json);\n  return result.ok\n    ? { status: \"valid\", spec: result.spec, errors: [] }\n    : { status: \"invalid\", errors: result.errors };\n}\n\nfunction SpecPlaygroundInner<TSpec>(\n  {\n    value: valueProp,\n    defaultValue,\n    onChange,\n    validate,\n    render,\n    examples = [],\n    editor,\n    onErrorSelect,\n    debounceMs = 250,\n    labels: labelsProp,\n    className,\n    ...props\n  }: SpecPlaygroundProps<TSpec>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const labels = { ...DEFAULT_SPEC_PLAYGROUND_LABELS, ...labelsProp };\n  const initial = defaultValue ?? examples[0]?.value ?? \"\";\n  const [resetValue] = useState(initial);\n  const [value, setValue] = useControllableState(valueProp, initial, onChange);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Validation trails the text by `debounceMs`; the first render validates immediately.\n  const [settled, setSettled] = useState(value);\n  useEffect(() => {\n    if (settled === value) return;\n    const timer = setTimeout(() => setSettled(value), debounceMs);\n    return () => clearTimeout(timer);\n  }, [value, settled, debounceMs]);\n\n  const checked = useMemo(() => check(settled, validate), [settled, validate]);\n\n  // The last spec that validated — kept on screen while the current text does not.\n  const lastValidRef = useRef<{ spec: TSpec } | null>(null);\n  if (checked.status === \"valid\") lastValidRef.current = { spec: checked.spec };\n  const shown = checked.status === \"valid\" ? { spec: checked.spec } : lastValidRef.current;\n  const stale = checked.status !== \"valid\" && shown !== null;\n\n  const lineOf = (error: SpecPlaygroundError) =>\n    error.code === \"parse-error\"\n      ? lineOfParseError(settled, error.message)\n      : locateJsonPath(settled, error.path);\n\n  const selectError = (error: SpecPlaygroundError) => {\n    const line = lineOf(error);\n    if (onErrorSelect) return onErrorSelect(error, line);\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    const offset = line === undefined ? 0 : offsetOfLine(textarea.value, line);\n    textarea.focus();\n    textarea.setSelectionRange(offset, offset);\n  };\n\n  const errorListId = `${props.id ?? \"spec-playground\"}-errors`;\n  const hasErrors = checked.errors.length > 0;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"spec-playground\"\n      data-status={checked.status}\n      className={cn(\"grid min-w-0 gap-4 lg:grid-cols-2\", className)}\n      {...props}\n    >\n      <div data-slot=\"spec-playground-source\" className=\"flex min-w-0 flex-col gap-3\">\n        <div data-slot=\"spec-playground-toolbar\" className=\"flex flex-wrap items-center gap-2\">\n          <span role=\"status\" aria-live=\"polite\" className=\"me-auto\">\n            <Badge\n              data-slot=\"spec-playground-status\"\n              data-status={checked.status}\n              variant={\n                checked.status === \"valid\"\n                  ? \"success\"\n                  : checked.status === \"invalid\"\n                    ? \"destructive\"\n                    : \"warning\"\n              }\n              className=\"gap-1\"\n            >\n              {checked.status === \"valid\" ? (\n                <CircleCheck aria-hidden=\"true\" size={14} />\n              ) : checked.status === \"invalid\" ? (\n                <CircleAlert aria-hidden=\"true\" size={14} />\n              ) : (\n                <Braces aria-hidden=\"true\" size={14} />\n              )}\n              {checked.status === \"valid\"\n                ? labels.valid\n                : checked.status === \"invalid\"\n                  ? labels.errorCount(checked.errors.length)\n                  : labels.parseError}\n            </Badge>\n          </span>\n          {examples.length > 0 ? (\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"outline\" size=\"sm\" data-slot=\"spec-playground-examples\">\n                  {labels.loadExample}\n                  <ChevronDown aria-hidden=\"true\" size={14} />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\">\n                {examples.map((example) => (\n                  <DropdownMenuItem\n                    key={example.id}\n                    data-example-id={example.id}\n                    onSelect={() => setValue(example.value)}\n                  >\n                    {example.label}\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          ) : null}\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            data-slot=\"spec-playground-reset\"\n            onClick={() => setValue(resetValue)}\n          >\n            <RotateCcw aria-hidden=\"true\" size={14} />\n            {labels.reset}\n          </Button>\n        </div>\n        <div data-slot=\"spec-playground-editor\" className=\"min-h-80 min-w-0\">\n          {editor ?? (\n            <Textarea\n              ref={textareaRef}\n              data-slot=\"spec-playground-textarea\"\n              aria-label={labels.editor}\n              aria-invalid={hasErrors || undefined}\n              aria-describedby={hasErrors ? errorListId : undefined}\n              spellCheck={false}\n              value={value}\n              onChange={(event) => setValue(event.target.value)}\n              className=\"h-80 min-h-80 resize-y font-mono text-code\"\n            />\n          )}\n        </div>\n        {hasErrors ? (\n          <ol\n            id={errorListId}\n            aria-label={labels.errors}\n            data-slot=\"spec-playground-errors\"\n            className=\"flex flex-col gap-1\"\n          >\n            {checked.errors.map((error) => {\n              const line = lineOf(error);\n              return (\n                <li key={`${error.path}|${error.code}|${error.message}`}>\n                  <button\n                    type=\"button\"\n                    data-slot=\"spec-playground-error\"\n                    data-path={error.path}\n                    data-code={error.code}\n                    onClick={() => selectError(error)}\n                    className=\"focus-ring flex w-full min-w-0 flex-wrap items-baseline gap-x-2 rounded-md border-s-2 border-s-destructive px-2 py-1 text-start text-caption hover:bg-muted\"\n                  >\n                    {error.path ? <code className=\"font-mono text-code\">{error.path}</code> : null}\n                    <span className=\"font-mono text-code text-destructive-text\">{error.code}</span>\n                    <span className=\"min-w-0 break-words text-muted-foreground\">\n                      {error.message}\n                    </span>\n                    {line !== undefined ? (\n                      <span className=\"text-meta text-muted-foreground\">{labels.line(line)}</span>\n                    ) : null}\n                  </button>\n                </li>\n              );\n            })}\n          </ol>\n        ) : null}\n      </div>\n      <section\n        aria-label={labels.preview}\n        data-slot=\"spec-playground-preview\"\n        data-stale={stale ? \"\" : undefined}\n        className=\"flex min-w-0 flex-col gap-2\"\n      >\n        {stale ? (\n          <Badge variant=\"outline\" data-slot=\"spec-playground-stale\" className=\"self-start\">\n            {labels.showingLastValid}\n          </Badge>\n        ) : null}\n        {shown ? (\n          render(shown.spec)\n        ) : (\n          <p className=\"text-caption text-muted-foreground\">{labels.nothingValid}</p>\n        )}\n      </section>\n    </div>\n  );\n}\n\n/**\n * A live spec editor: JSON on the left, what it renders on the right (stacked below 1024 px).\n * Edits are validated after a short pause by the host's own `validate`; its errors are listed\n * under the editor (`path · code · message`, click to jump to the line) and the render keeps\n * the last valid spec, marked as such, until the text validates again. The editor, validator\n * and renderer all come from the host — this component owns only the loop between them.\n */\nexport const SpecPlayground = forwardRef(SpecPlaygroundInner) as <TSpec>(\n  props: SpecPlaygroundProps<TSpec> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n(SpecPlayground as { displayName?: string }).displayName = \"SpecPlayground\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAMK;AACP,SAAS,QAAQ,aAAa,aAAa,aAAa,iBAAiB;AAuM7D,SAaI,KAbJ;AAtIL,IAAM,iCAAuD;AAAA,EAClE,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY,CAAC,UAAW,UAAU,IAAI,YAAY,GAAG,KAAK;AAAA,EAC1D,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,MAAM,CAAC,SAAS,QAAQ,IAAI;AAC9B;AAqCA,SAAS,MACP,MACA,UACgB;AAChB,MAAI;AACJ,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,OAAO;AACd,UAAM,UAAU,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;AACrE,WAAO,EAAE,QAAQ,eAAe,QAAQ,CAAC,EAAE,MAAM,IAAI,MAAM,eAAe,QAAQ,CAAC,EAAE;AAAA,EACvF;AACA,QAAM,SAAS,SAAS,IAAI;AAC5B,SAAO,OAAO,KACV,EAAE,QAAQ,SAAS,MAAM,OAAO,MAAM,QAAQ,CAAC,EAAE,IACjD,EAAE,QAAQ,WAAW,QAAQ,OAAO,OAAO;AACjD;AAEA,SAAS,oBACP;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AAAA,EACZ;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,SAAS,EAAE,GAAG,gCAAgC,GAAG,WAAW;AAClE,QAAM,UAAU,gBAAgB,SAAS,CAAC,GAAG,SAAS;AACtD,QAAM,CAAC,UAAU,IAAI,SAAS,OAAO;AACrC,QAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB,WAAW,SAAS,QAAQ;AAC3E,QAAM,cAAc,OAA4B,IAAI;AAGpD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,YAAU,MAAM;AACd,QAAI,YAAY,MAAO;AACvB,UAAM,QAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,UAAU;AAC5D,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,OAAO,SAAS,UAAU,CAAC;AAE/B,QAAM,UAAU,QAAQ,MAAM,MAAM,SAAS,QAAQ,GAAG,CAAC,SAAS,QAAQ,CAAC;AAG3E,QAAM,eAAe,OAA+B,IAAI;AACxD,MAAI,QAAQ,WAAW,QAAS,cAAa,UAAU,EAAE,MAAM,QAAQ,KAAK;AAC5E,QAAM,QAAQ,QAAQ,WAAW,UAAU,EAAE,MAAM,QAAQ,KAAK,IAAI,aAAa;AACjF,QAAM,QAAQ,QAAQ,WAAW,WAAW,UAAU;AAEtD,QAAM,SAAS,CAAC,UACd,MAAM,SAAS,gBACX,iBAAiB,SAAS,MAAM,OAAO,IACvC,eAAe,SAAS,MAAM,IAAI;AAExC,QAAM,cAAc,CAAC,UAA+B;AAClD,UAAM,OAAO,OAAO,KAAK;AACzB,QAAI,cAAe,QAAO,cAAc,OAAO,IAAI;AACnD,UAAM,WAAW,YAAY;AAC7B,QAAI,CAAC,SAAU;AACf,UAAM,SAAS,SAAS,SAAY,IAAI,aAAa,SAAS,OAAO,IAAI;AACzE,aAAS,MAAM;AACf,aAAS,kBAAkB,QAAQ,MAAM;AAAA,EAC3C;AAEA,QAAM,cAAc,GAAG,MAAM,MAAM,iBAAiB;AACpD,QAAM,YAAY,QAAQ,OAAO,SAAS;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,eAAa,QAAQ;AAAA,MACrB,WAAW,GAAG,qCAAqC,SAAS;AAAA,MAC3D,GAAG;AAAA,MAEJ;AAAA,6BAAC,SAAI,aAAU,0BAAyB,WAAU,+BAChD;AAAA,+BAAC,SAAI,aAAU,2BAA0B,WAAU,qCACjD;AAAA,gCAAC,UAAK,MAAK,UAAS,aAAU,UAAS,WAAU,WAC/C;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,eAAa,QAAQ;AAAA,gBACrB,SACE,QAAQ,WAAW,UACf,YACA,QAAQ,WAAW,YACjB,gBACA;AAAA,gBAER,WAAU;AAAA,gBAET;AAAA,0BAAQ,WAAW,UAClB,oBAAC,eAAY,eAAY,QAAO,MAAM,IAAI,IACxC,QAAQ,WAAW,YACrB,oBAAC,eAAY,eAAY,QAAO,MAAM,IAAI,IAE1C,oBAAC,UAAO,eAAY,QAAO,MAAM,IAAI;AAAA,kBAEtC,QAAQ,WAAW,UAChB,OAAO,QACP,QAAQ,WAAW,YACjB,OAAO,WAAW,QAAQ,OAAO,MAAM,IACvC,OAAO;AAAA;AAAA;AAAA,YACf,GACF;AAAA,YACC,SAAS,SAAS,IACjB,qBAAC,gBACC;AAAA,kCAAC,uBAAoB,SAAO,MAC1B,+BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,aAAU,4BAC3C;AAAA,uBAAO;AAAA,gBACR,oBAAC,eAAY,eAAY,QAAO,MAAM,IAAI;AAAA,iBAC5C,GACF;AAAA,cACA,oBAAC,uBAAoB,OAAM,OACxB,mBAAS,IAAI,CAAC,YACb;AAAA,gBAAC;AAAA;AAAA,kBAEC,mBAAiB,QAAQ;AAAA,kBACzB,UAAU,MAAM,SAAS,QAAQ,KAAK;AAAA,kBAErC,kBAAQ;AAAA;AAAA,gBAJJ,QAAQ;AAAA,cAKf,CACD,GACH;AAAA,eACF,IACE;AAAA,YACJ;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,aAAU;AAAA,gBACV,SAAS,MAAM,SAAS,UAAU;AAAA,gBAElC;AAAA,sCAAC,aAAU,eAAY,QAAO,MAAM,IAAI;AAAA,kBACvC,OAAO;AAAA;AAAA;AAAA,YACV;AAAA,aACF;AAAA,UACA,oBAAC,SAAI,aAAU,0BAAyB,WAAU,oBAC/C,oBACC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,aAAU;AAAA,cACV,cAAY,OAAO;AAAA,cACnB,gBAAc,aAAa;AAAA,cAC3B,oBAAkB,YAAY,cAAc;AAAA,cAC5C,YAAY;AAAA,cACZ;AAAA,cACA,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,cAChD,WAAU;AAAA;AAAA,UACZ,GAEJ;AAAA,UACC,YACC;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,cAAY,OAAO;AAAA,cACnB,aAAU;AAAA,cACV,WAAU;AAAA,cAET,kBAAQ,OAAO,IAAI,CAAC,UAAU;AAC7B,sBAAM,OAAO,OAAO,KAAK;AACzB,uBACE,oBAAC,QACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,aAAU;AAAA,oBACV,aAAW,MAAM;AAAA,oBACjB,aAAW,MAAM;AAAA,oBACjB,SAAS,MAAM,YAAY,KAAK;AAAA,oBAChC,WAAU;AAAA,oBAET;AAAA,4BAAM,OAAO,oBAAC,UAAK,WAAU,uBAAuB,gBAAM,MAAK,IAAU;AAAA,sBAC1E,oBAAC,UAAK,WAAU,6CAA6C,gBAAM,MAAK;AAAA,sBACxE,oBAAC,UAAK,WAAU,6CACb,gBAAM,SACT;AAAA,sBACC,SAAS,SACR,oBAAC,UAAK,WAAU,mCAAmC,iBAAO,KAAK,IAAI,GAAE,IACnE;AAAA;AAAA;AAAA,gBACN,KAjBO,GAAG,MAAM,IAAI,IAAI,MAAM,IAAI,IAAI,MAAM,OAAO,EAkBrD;AAAA,cAEJ,CAAC;AAAA;AAAA,UACH,IACE;AAAA,WACN;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,cAAY,OAAO;AAAA,YACnB,aAAU;AAAA,YACV,cAAY,QAAQ,KAAK;AAAA,YACzB,WAAU;AAAA,YAET;AAAA,sBACC,oBAAC,SAAM,SAAQ,WAAU,aAAU,yBAAwB,WAAU,cAClE,iBAAO,kBACV,IACE;AAAA,cACH,QACC,OAAO,MAAM,IAAI,IAEjB,oBAAC,OAAE,WAAU,sCAAsC,iBAAO,cAAa;AAAA;AAAA;AAAA,QAE3E;AAAA;AAAA;AAAA,EACF;AAEJ;AASO,IAAM,iBAAiB,WAAW,mBAAmB;AAG3D,eAA4C,cAAc;","names":[]}

package/dist/chunk-YWB7HLL7.js

@@ -0,0 +1,126 @@
+"use client";
+import {
+  Label
+} from "./chunk-TEKBTTP2.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/form/form.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId
+} from "react";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext
+} from "react-hook-form";
+import { jsx } from "react/jsx-runtime";
+var Form = FormProvider;
+var FormFieldContext = createContext({});
+function FormField(props) {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+}
+var FormItemContext = createContext({});
+function useFormField() {
+  const fieldContext = useContext(FormFieldContext);
+  const itemContext = useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+}
+var FormItem = forwardRef(
+  function FormItem2({ className, ...props }, ref) {
+    const id = useId();
+    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
+  }
+);
+var FormLabel = forwardRef(function FormLabel2({ className, ...props }, ref) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      ref,
+      htmlFor: formItemId,
+      className: cn(
+        "transition-colors duration-fast ease-standard",
+        // #124: the label's own error-state text, not a mark — ink rung.
+        error && "text-destructive-text",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var FormControl = forwardRef(function FormControl2(props, ref) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+var FormDescription = forwardRef(function FormDescription2({ className, ...props }, ref) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-body text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+var FormMessage = forwardRef(
+  function FormMessage2({ className, children, ...props }, ref) {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message ?? "") : children;
+    if (!body) return null;
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        id: formMessageId,
+        className: cn(
+          // #124: the error message body is running text — ink rung, not the
+          // 3:1 mark rung `text-destructive` guarantees.
+          "text-body font-medium text-destructive-text animate-in fade-in slide-in-from-top-1 ease-entrance",
+          className
+        ),
+        ...props,
+        children: body
+      }
+    );
+  }
+);
+
+export {
+  Form,
+  FormField,
+  useFormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage
+};
+//# sourceMappingURL=chunk-YWB7HLL7.js.map

package/dist/chunk-YWB7HLL7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/form.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useId,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\";\nimport { cn } from \"../../lib/cn\";\nimport { Label } from \"../label\";\n\nexport const Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = { name: TName };\n\nconst FormFieldContext = createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\nexport function FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(props: ControllerProps<TFieldValues, TName>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n}\n\nconst FormItemContext = createContext<{ id: string }>({} as { id: string });\n\nexport function useFormField() {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n  const fieldState = getFieldState(fieldContext.name, formState);\n  if (!fieldContext) throw new Error(\"useFormField should be used within <FormField>\");\n  const { id } = itemContext;\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n}\n\nexport const FormItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function FormItem({ className, ...props }, ref) {\n    const id = useId();\n    return (\n      <FormItemContext.Provider value={{ id }}>\n        <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n      </FormItemContext.Provider>\n    );\n  },\n);\n\nexport const FormLabel = forwardRef<\n  ElementRef<typeof Label>,\n  ComponentPropsWithoutRef<typeof Label>\n>(function FormLabel({ className, ...props }, ref) {\n  const { error, formItemId } = useFormField();\n  return (\n    <Label\n      ref={ref}\n      htmlFor={formItemId}\n      className={cn(\n        \"transition-colors duration-fast ease-standard\",\n        // #124: the label's own error-state text, not a mark — ink rung.\n        error && \"text-destructive-text\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport const FormControl = forwardRef<\n  ElementRef<typeof Slot>,\n  ComponentPropsWithoutRef<typeof Slot>\n>(function FormControl(props, ref) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n});\n\nexport const FormDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(function FormDescription({ className, ...props }, ref) {\n  const { formDescriptionId } = useFormField();\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-body text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n});\n\nexport const FormMessage = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  function FormMessage({ className, children, ...props }, ref) {\n    const { error, formMessageId } = useFormField();\n    const body = error ? String(error?.message ?? \"\") : children;\n    if (!body) return null;\n    return (\n      <p\n        ref={ref}\n        id={formMessageId}\n        className={cn(\n          // #124: the error message body is running text — ink rung, not the\n          // 3:1 mark rung `text-destructive` guarantees.\n          \"text-body font-medium text-destructive-text animate-in fade-in slide-in-from-top-1 ease-entrance\",\n          className,\n        )}\n        {...props}\n      >\n        {body}\n      </p>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAmBD;AAfC,IAAM,OAAO;AAOpB,IAAM,mBAAmB,cAAqC,CAAC,CAA0B;AAElF,SAAS,UAGd,OAA6C;AAC7C,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,MAAM,MAAM,KAAK,GACnD,8BAAC,cAAY,GAAG,OAAO,GACzB;AAEJ;AAEA,IAAM,kBAAkB,cAA8B,CAAC,CAAmB;AAEnE,SAAS,eAAe;AAC7B,QAAM,eAAe,WAAW,gBAAgB;AAChD,QAAM,cAAc,WAAW,eAAe;AAC9C,QAAM,EAAE,eAAe,UAAU,IAAI,eAAe;AACpD,QAAM,aAAa,cAAc,aAAa,MAAM,SAAS;AAC7D,MAAI,CAAC,aAAc,OAAM,IAAI,MAAM,gDAAgD;AACnF,QAAM,EAAE,GAAG,IAAI;AACf,SAAO;AAAA,IACL;AAAA,IACA,MAAM,aAAa;AAAA,IACnB,YAAY,GAAG,EAAE;AAAA,IACjB,mBAAmB,GAAG,EAAE;AAAA,IACxB,eAAe,GAAG,EAAE;AAAA,IACpB,GAAG;AAAA,EACL;AACF;AAEO,IAAM,WAAW;AAAA,EACtB,SAASA,UAAS,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9C,UAAM,KAAK,MAAM;AACjB,WACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,GAAG,GACpC,8BAAC,SAAI,KAAU,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OAAO,GACnE;AAAA,EAEJ;AACF;AAEO,IAAM,YAAY,WAGvB,SAASC,WAAU,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACjD,QAAM,EAAE,OAAO,WAAW,IAAI,aAAa;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA;AAAA,QAEA,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,cAAc,WAGzB,SAASC,aAAY,OAAO,KAAK;AACjC,QAAM,EAAE,OAAO,YAAY,mBAAmB,cAAc,IAAI,aAAa;AAC7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,oBAAkB,QAAQ,GAAG,iBAAiB,IAAI,aAAa,KAAK;AAAA,MACpE,gBAAc,CAAC,CAAC;AAAA,MACf,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,kBAAkB,WAG7B,SAASC,iBAAgB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACvD,QAAM,EAAE,kBAAkB,IAAI,aAAa;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,WAAW,GAAG,mCAAmC,SAAS;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,cAAc;AAAA,EACzB,SAASC,aAAY,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,KAAK;AAC3D,UAAM,EAAE,OAAO,cAAc,IAAI,aAAa;AAC9C,UAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI;AACpD,QAAI,CAAC,KAAM,QAAO;AAClB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ,WAAW;AAAA;AAAA;AAAA,UAGT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;","names":["FormItem","FormLabel","FormControl","FormDescription","FormMessage"]}

package/dist/chunk-YXHHUJOZ.js

@@ -0,0 +1,235 @@
+"use client";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle
+} from "./chunk-EY2PGOG3.js";
+import {
+  mergeRefs
+} from "./chunk-L37QZALU.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/command/command.tsx
+import {
+  createContext,
+  forwardRef,
+  use,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Command as CommandPrimitive, useCommandState } from "cmdk";
+import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CMDK_ITEM_SELECTOR = '[cmdk-item=""][aria-selected="true"]';
+function scrollElementIntoCommandList(element) {
+  const list = element.closest('[data-slot="command-list"]');
+  if (!list) return;
+  const elementRect = element.getBoundingClientRect();
+  const listRect = list.getBoundingClientRect();
+  if (elementRect.top < listRect.top) {
+    list.scrollTop -= listRect.top - elementRect.top;
+  } else if (elementRect.bottom > listRect.bottom) {
+    list.scrollTop += elementRect.bottom - listRect.bottom;
+  }
+}
+function overrideItemScrollIntoView(node) {
+  if (node) node.scrollIntoView = () => scrollElementIntoCommandList(node);
+}
+function overrideGroupHeadingScrollIntoView(node) {
+  const heading = node?.querySelector("[cmdk-group-heading]");
+  if (heading) heading.scrollIntoView = () => scrollElementIntoCommandList(heading);
+}
+var NO_COMMAND_PROVIDER = /* @__PURE__ */ Symbol("no-command-provider");
+var CommandActiveItemIdContext = createContext(
+  NO_COMMAND_PROVIDER
+);
+function CommandActiveItemProvider({
+  rootRef,
+  onChange,
+  children
+}) {
+  const value = useCommandState((state) => state.value);
+  const selectedItemId = useCommandState((state) => state.selectedItemId);
+  const filteredCount = useCommandState((state) => state.filtered.count);
+  const [activeId, setActiveId] = useState(void 0);
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  const lastReportedRef = useRef(
+    NO_COMMAND_PROVIDER
+  );
+  useEffect(() => {
+    const element = rootRef.current?.querySelector(CMDK_ITEM_SELECTOR);
+    const next = element?.id ?? selectedItemId ?? void 0;
+    setActiveId(next);
+    if (lastReportedRef.current !== next) {
+      lastReportedRef.current = next;
+      onChangeRef.current?.(next);
+    }
+  }, [value, selectedItemId, filteredCount, rootRef]);
+  return /* @__PURE__ */ jsx(CommandActiveItemIdContext, { value: activeId, children });
+}
+var Command = forwardRef(
+  function Command2({ className, children, onActiveItemIdChange, ...props }, ref) {
+    const innerRef = useRef(null);
+    const mergedRef = useMemo(() => mergeRefs(ref, innerRef), [ref]);
+    return /* @__PURE__ */ jsx(
+      CommandPrimitive,
+      {
+        ref: mergedRef,
+        "data-slot": "command",
+        className: cn(
+          "flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(CommandActiveItemProvider, { rootRef: innerRef, onChange: onActiveItemIdChange, children })
+      }
+    );
+  }
+);
+function useCommandActiveItemId() {
+  const id = use(CommandActiveItemIdContext);
+  return id === NO_COMMAND_PROVIDER ? void 0 : id;
+}
+function CommandDialog({ children, filter, title, ...props }) {
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxs(DialogContent, { className: "overflow-hidden p-0", children: [
+    title === void 0 ? null : /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
+    /* @__PURE__ */ jsx(
+      Command,
+      {
+        filter,
+        className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3",
+        children
+      }
+    )
+  ] }) });
+}
+var CommandInput = forwardRef(function CommandInput2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+    /* @__PURE__ */ jsx(Search, { className: "me-2 size-4 shrink-0 opacity-50" }),
+    /* @__PURE__ */ jsx(
+      CommandPrimitive.Input,
+      {
+        ref,
+        "data-slot": "command-input",
+        className: cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-body outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+});
+var CommandList = forwardRef(function CommandList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.List,
+    {
+      ref,
+      "data-slot": "command-list",
+      className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+      ...props
+    }
+  );
+});
+var CommandEmpty = forwardRef(function CommandEmpty2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.Empty,
+    {
+      ref,
+      "data-slot": "command-empty",
+      className: cn("py-6 text-center text-body", className),
+      ...props
+    }
+  );
+});
+var CommandGroup = forwardRef(function CommandGroup2({ className, ...props }, ref) {
+  const mergedRef = useMemo(
+    () => mergeRefs(ref, overrideGroupHeadingScrollIntoView),
+    [ref]
+  );
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.Group,
+    {
+      ref: mergedRef,
+      "data-slot": "command-group",
+      className: cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var CommandSeparator = forwardRef(function CommandSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.Separator,
+    {
+      ref,
+      "data-slot": "command-separator",
+      "aria-hidden": "true",
+      className: cn("-mx-1 h-px bg-border", className),
+      ...props
+    }
+  );
+});
+var CMDK_OVERRIDDEN_ITEM_PROPS = ["id", "role", "aria-selected"];
+var warnedAboutOverriddenItemProps = /* @__PURE__ */ new Set();
+var CommandItem = forwardRef(function CommandItem2({ className, ...props }, ref) {
+  const mergedRef = useMemo(
+    () => mergeRefs(ref, overrideItemScrollIntoView),
+    [ref]
+  );
+  if (process.env.NODE_ENV !== "production") {
+    for (const key of CMDK_OVERRIDDEN_ITEM_PROPS) {
+      if (key in props && !warnedAboutOverriddenItemProps.has(key)) {
+        warnedAboutOverriddenItemProps.add(key);
+        console.warn(
+          `CommandItem: "${key}" is assigned internally by cmdk, so the value you passed is ignored. Use <Command onActiveItemIdChange> (or the "useCommandActiveItemId" hook) to read the DOM id of the highlighted item instead \u2014 see packages/ui/src/components/command/command.tsx.`
+        );
+      }
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    CommandPrimitive.Item,
+    {
+      ref: mergedRef,
+      "data-slot": "command-item",
+      className: cn(
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+});
+function CommandShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "command-shortcut",
+      className: cn("ms-auto text-meta tracking-widest text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+export {
+  Command,
+  useCommandActiveItemId,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandSeparator,
+  CommandItem,
+  CommandShortcut
+};
+//# sourceMappingURL=chunk-YXHHUJOZ.js.map