@elabs-ai/components-ui 4.2.0 → 5.0.0

package/dist/chunk-OPMMD25Z.js

@@ -0,0 +1,218 @@
+"use client";
+import {
+  Input
+} from "./chunk-XYACSO57.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-VA2OONPE.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/list-editor/list-editor.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ChevronDown, ChevronUp, Plus, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ListEditor = forwardRef(function ListEditor2({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  reorderable = true,
+  placeholder,
+  max,
+  disabled,
+  addLabel,
+  className,
+  ...props
+}, ref) {
+  const { t } = useLocale();
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? []);
+  const rows = useMemo(
+    () => isControlled ? valueProp ?? [] : internalValue,
+    [isControlled, valueProp, internalValue]
+  );
+  const commit = useCallback(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const idCounterRef = useRef(0);
+  const makeId = useCallback(() => `list-editor-row-${idCounterRef.current++}`, []);
+  const [rowIds, setRowIds] = useState(() => rows.map(() => makeId()));
+  const lastRowsRef = useRef(rows);
+  const upButtonRefs = useRef(/* @__PURE__ */ new Map());
+  const downButtonRefs = useRef(/* @__PURE__ */ new Map());
+  const pendingFocusRef = useRef(null);
+  useEffect(() => {
+    if (rows === lastRowsRef.current) return;
+    lastRowsRef.current = rows;
+    setRowIds((prev) => {
+      if (prev.length === rows.length) return prev;
+      if (rows.length > prev.length) {
+        return [...prev, ...Array.from({ length: rows.length - prev.length }, () => makeId())];
+      }
+      return prev.slice(0, rows.length);
+    });
+  }, [rows, makeId]);
+  useEffect(() => {
+    const pending = pendingFocusRef.current;
+    if (!pending) return;
+    pendingFocusRef.current = null;
+    const map = pending.want === "up" ? upButtonRefs.current : downButtonRefs.current;
+    map.get(pending.id)?.focus();
+  }, [rowIds]);
+  const addRow = useCallback(() => {
+    if (max !== void 0 && rows.length >= max) return;
+    commit([...rows, ""]);
+    setRowIds((ids) => [...ids, makeId()]);
+  }, [rows, max, commit, makeId]);
+  const updateRow = useCallback(
+    (index, next) => {
+      commit(rows.map((row, i) => i === index ? next : row));
+    },
+    [rows, commit]
+  );
+  const removeRow = useCallback(
+    (index) => {
+      commit(rows.filter((_, i) => i !== index));
+      setRowIds((ids) => ids.filter((_, i) => i !== index));
+    },
+    [rows, commit]
+  );
+  const moveRow = useCallback(
+    (index, direction) => {
+      const target = index + direction;
+      if (target < 0 || target >= rows.length) return;
+      const next = [...rows];
+      const [moved] = next.splice(index, 1);
+      next.splice(target, 0, moved);
+      const movedId = rowIds[index];
+      commit(next);
+      setRowIds((ids) => {
+        const nextIds = [...ids];
+        const [id] = nextIds.splice(index, 1);
+        nextIds.splice(target, 0, id);
+        return nextIds;
+      });
+      const activated = direction === -1 ? "up" : "down";
+      const willDisable = activated === "up" && target === 0 || activated === "down" && target === rows.length - 1;
+      pendingFocusRef.current = {
+        id: movedId,
+        want: willDisable ? activated === "up" ? "down" : "up" : activated
+      };
+    },
+    [rows, rowIds, commit]
+  );
+  const atMax = max !== void 0 && rows.length >= max;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "list-editor",
+      className: cn("flex flex-col gap-2", className),
+      ...props,
+      children: [
+        rows.length === 0 ? /* @__PURE__ */ jsx("p", { "data-slot": "list-editor-empty", className: "text-body text-muted-foreground", children: t("ui.listEditor.empty") }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: rows.map((row, index) => {
+          const rowId = rowIds[index] ?? String(index);
+          return /* @__PURE__ */ jsxs("div", { "data-slot": "list-editor-row", className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                "data-slot": "list-editor-item",
+                value: row,
+                placeholder,
+                disabled,
+                "aria-label": t("ui.listEditor.itemLabel", { n: index + 1 }),
+                onChange: (event) => updateRow(index, event.target.value),
+                className: "flex-1"
+              }
+            ),
+            reorderable && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ref: (el) => {
+                    if (el) upButtonRefs.current.set(rowId, el);
+                    else upButtonRefs.current.delete(rowId);
+                  },
+                  "data-slot": "list-editor-move-up",
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  disabled: disabled || index === 0,
+                  "aria-label": t("ui.listEditor.moveUp", { n: index + 1 }),
+                  onClick: () => moveRow(index, -1),
+                  children: /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ref: (el) => {
+                    if (el) downButtonRefs.current.set(rowId, el);
+                    else downButtonRefs.current.delete(rowId);
+                  },
+                  "data-slot": "list-editor-move-down",
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  disabled: disabled || index === rows.length - 1,
+                  "aria-label": t("ui.listEditor.moveDown", { n: index + 1 }),
+                  onClick: () => moveRow(index, 1),
+                  children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "data-slot": "list-editor-remove",
+                type: "button",
+                variant: "ghost",
+                size: "icon-sm",
+                disabled,
+                "aria-label": t("ui.listEditor.removeItem", { n: index + 1 }),
+                onClick: () => removeRow(index),
+                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+              }
+            )
+          ] }, rowId);
+        }) }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "data-slot": "list-editor-add",
+            type: "button",
+            variant: "outline-subtle",
+            size: "sm",
+            disabled: disabled || atMax,
+            onClick: addRow,
+            className: "self-start",
+            children: [
+              /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }),
+              addLabel ?? t("ui.listEditor.addItem")
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  ListEditor
+};
+//# sourceMappingURL=chunk-OPMMD25Z.js.map

package/dist/chunk-OPMMD25Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/list-editor/list-editor.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { ChevronDown, ChevronUp, Plus, X } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"../button\";\nimport { Input } from \"../input\";\nimport { useLocale } from \"../locale-provider\";\n\nexport interface ListEditorProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\"\n> {\n  /** Controlled list of strings. */\n  value?: string[];\n  /** Uncontrolled initial list of strings. */\n  defaultValue?: string[];\n  /** Called when the list changes (add, remove, edit, or reorder). */\n  onValueChange?: (value: string[]) => void;\n  /**\n   * Whether rows can be reordered via move-up/move-down buttons. Default\n   * true. Reordering is keyboard-operable (real buttons), never drag-only.\n   */\n  reorderable?: boolean;\n  /** Placeholder shown in each row's text field. */\n  placeholder?: string;\n  /** Maximum number of rows allowed. */\n  max?: number;\n  /** Whether the editor is disabled. */\n  disabled?: boolean;\n  /** Label for the \"add item\" control. */\n  addLabel?: ReactNode;\n}\n\n/**\n * ListEditor — one `Input` per row over a `string[]`, with add / remove /\n * keyboard-operable reorder (move-up/move-down buttons, not drag-and-drop —\n * no drag library exists in the monorepo and none should be added for this).\n *\n * Controlled via `value`/`onValueChange`; uncontrolled via `defaultValue`.\n */\nexport const ListEditor = forwardRef<HTMLDivElement, ListEditorProps>(function ListEditor(\n  {\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    reorderable = true,\n    placeholder,\n    max,\n    disabled,\n    addLabel,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const { t } = useLocale();\n  const isControlled = valueProp !== undefined;\n  const [internalValue, setInternalValue] = useState<string[]>(defaultValue ?? []);\n  const rows = useMemo(\n    () => (isControlled ? (valueProp ?? []) : internalValue),\n    [isControlled, valueProp, internalValue],\n  );\n\n  const commit = useCallback(\n    (next: string[]) => {\n      if (!isControlled) setInternalValue(next);\n      onValueChange?.(next);\n    },\n    [isControlled, onValueChange],\n  );\n\n  // `rows` is a bare `string[]` with no identity of its own — keying each\n  // row's DOM by its ARRAY INDEX means a reorder swaps which row's data a\n  // given DOM node (and its focused \"Move up\" button) renders, not which\n  // node holds the moved row's data. A stable per-row id, generated once and\n  // carried through add/remove/move in lockstep with `rows`, lets React\n  // (and thus keyboard focus) follow the actual row instead of the slot.\n  const idCounterRef = useRef(0);\n  const makeId = useCallback(() => `list-editor-row-${idCounterRef.current++}`, []);\n  const [rowIds, setRowIds] = useState<string[]>(() => rows.map(() => makeId()));\n  const lastRowsRef = useRef(rows);\n  const upButtonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n  const downButtonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n  const pendingFocusRef = useRef<{ id: string; want: \"up\" | \"down\" } | null>(null);\n\n  // Safety net for a `rows` change that did NOT come from add/remove/move\n  // below (e.g. a controlled `value` reset by the app) — keeps `rowIds` the\n  // same length as `rows` without guessing at a diff.\n  useEffect(() => {\n    if (rows === lastRowsRef.current) return;\n    lastRowsRef.current = rows;\n    setRowIds((prev) => {\n      if (prev.length === rows.length) return prev;\n      if (rows.length > prev.length) {\n        return [...prev, ...Array.from({ length: rows.length - prev.length }, () => makeId())];\n      }\n      return prev.slice(0, rows.length);\n    });\n  }, [rows, makeId]);\n\n  useEffect(() => {\n    const pending = pendingFocusRef.current;\n    if (!pending) return;\n    pendingFocusRef.current = null;\n    const map = pending.want === \"up\" ? upButtonRefs.current : downButtonRefs.current;\n    map.get(pending.id)?.focus();\n  }, [rowIds]);\n\n  const addRow = useCallback(() => {\n    if (max !== undefined && rows.length >= max) return;\n    commit([...rows, \"\"]);\n    setRowIds((ids) => [...ids, makeId()]);\n  }, [rows, max, commit, makeId]);\n\n  const updateRow = useCallback(\n    (index: number, next: string) => {\n      commit(rows.map((row, i) => (i === index ? next : row)));\n    },\n    [rows, commit],\n  );\n\n  const removeRow = useCallback(\n    (index: number) => {\n      commit(rows.filter((_, i) => i !== index));\n      setRowIds((ids) => ids.filter((_, i) => i !== index));\n    },\n    [rows, commit],\n  );\n\n  const moveRow = useCallback(\n    (index: number, direction: -1 | 1) => {\n      const target = index + direction;\n      if (target < 0 || target >= rows.length) return;\n      const next = [...rows];\n      const [moved] = next.splice(index, 1);\n      next.splice(target, 0, moved!);\n      const movedId = rowIds[index]!;\n      commit(next);\n      setRowIds((ids) => {\n        const nextIds = [...ids];\n        const [id] = nextIds.splice(index, 1);\n        nextIds.splice(target, 0, id!);\n        return nextIds;\n      });\n\n      // The button the user just pressed keeps focus by default (same id ⇒\n      // same DOM node, just repositioned). The one case that needs help: the\n      // row landed at the top/bottom, so THIS direction's button is now\n      // `disabled` — a browser blurs a focused element the instant it goes\n      // disabled, dropping focus to <body>. Redirect to the row's other\n      // reorder button instead, which stays enabled.\n      const activated: \"up\" | \"down\" = direction === -1 ? \"up\" : \"down\";\n      const willDisable =\n        (activated === \"up\" && target === 0) ||\n        (activated === \"down\" && target === rows.length - 1);\n      pendingFocusRef.current = {\n        id: movedId,\n        want: willDisable ? (activated === \"up\" ? \"down\" : \"up\") : activated,\n      };\n    },\n    [rows, rowIds, commit],\n  );\n\n  const atMax = max !== undefined && rows.length >= max;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"list-editor\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    >\n      {rows.length === 0 ? (\n        <p data-slot=\"list-editor-empty\" className=\"text-body text-muted-foreground\">\n          {t(\"ui.listEditor.empty\")}\n        </p>\n      ) : (\n        <div className=\"flex flex-col gap-2\">\n          {rows.map((row, index) => {\n            const rowId = rowIds[index] ?? String(index);\n            return (\n              <div key={rowId} data-slot=\"list-editor-row\" className=\"flex items-center gap-1\">\n                <Input\n                  data-slot=\"list-editor-item\"\n                  value={row}\n                  placeholder={placeholder}\n                  disabled={disabled}\n                  aria-label={t(\"ui.listEditor.itemLabel\", { n: index + 1 })}\n                  onChange={(event) => updateRow(index, event.target.value)}\n                  className=\"flex-1\"\n                />\n                {reorderable && (\n                  <>\n                    <Button\n                      ref={(el) => {\n                        if (el) upButtonRefs.current.set(rowId, el);\n                        else upButtonRefs.current.delete(rowId);\n                      }}\n                      data-slot=\"list-editor-move-up\"\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      disabled={disabled || index === 0}\n                      aria-label={t(\"ui.listEditor.moveUp\", { n: index + 1 })}\n                      onClick={() => moveRow(index, -1)}\n                    >\n                      <ChevronUp aria-hidden=\"true\" />\n                    </Button>\n                    <Button\n                      ref={(el) => {\n                        if (el) downButtonRefs.current.set(rowId, el);\n                        else downButtonRefs.current.delete(rowId);\n                      }}\n                      data-slot=\"list-editor-move-down\"\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      disabled={disabled || index === rows.length - 1}\n                      aria-label={t(\"ui.listEditor.moveDown\", { n: index + 1 })}\n                      onClick={() => moveRow(index, 1)}\n                    >\n                      <ChevronDown aria-hidden=\"true\" />\n                    </Button>\n                  </>\n                )}\n                <Button\n                  data-slot=\"list-editor-remove\"\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  disabled={disabled}\n                  aria-label={t(\"ui.listEditor.removeItem\", { n: index + 1 })}\n                  onClick={() => removeRow(index)}\n                >\n                  <X aria-hidden=\"true\" />\n                </Button>\n              </div>\n            );\n          })}\n        </div>\n      )}\n      <Button\n        data-slot=\"list-editor-add\"\n        type=\"button\"\n        variant=\"outline-subtle\"\n        size=\"sm\"\n        disabled={disabled || atMax}\n        onClick={addRow}\n        className=\"self-start\"\n      >\n        <Plus aria-hidden=\"true\" />\n        {addLabel ?? t(\"ui.listEditor.addItem\")}\n      </Button>\n    </div>\n  );\n});\n"],"mappings":"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","names":["ListEditor"]}

package/dist/chunk-OR4NVFPH.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-OR4NVFPH.js.map

package/dist/chunk-OR4NVFPH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-OV4GQOLC.js

@@ -0,0 +1,73 @@
+"use client";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/input-otp/input-otp.tsx
+import { forwardRef, useContext } from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Minus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputOTP = forwardRef(function InputOTP2({ className, containerClassName, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    OTPInput,
+    {
+      ref,
+      containerClassName: cn(
+        "flex items-center gap-2 has-[:disabled]:opacity-50",
+        containerClassName
+      ),
+      className: cn("disabled:cursor-not-allowed", className),
+      ...props
+    }
+  );
+});
+var InputOTPGroup = forwardRef(
+  function InputOTPGroup2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props });
+  }
+);
+var InputOTPSlot = forwardRef(function InputOTPSlot2({ index, className, ...props }, ref) {
+  const ctx = useContext(OTPInputContext);
+  const slot = ctx.slots[index];
+  const { char, hasFakeCaret, isActive } = slot ?? {
+    char: null,
+    hasFakeCaret: false,
+    isActive: false
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative flex size-9 items-center justify-center border-y border-e border-input text-body shadow-sm transition-[color,border-color,box-shadow] duration-fast ease-standard first:rounded-s-md first:border-s last:rounded-e-md",
+        // The OTP slot IS the field's focus indicator: the real focused element is
+        // InputOTP's visually-hidden <input>, and `isActive` is the caret's slot. It
+        // therefore carries the compound indicator (#67) — the state is JS-driven, so
+        // it is the `-static` flavour rather than a `:focus-visible` one, and the
+        // border-color swap is a plain class (twMerge drops `border-input` for it)
+        // rather than a `focus-visible:` variant.
+        isActive && "z-10 focus-ring-static border-input-focus",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground" }) })
+      ]
+    }
+  );
+});
+var InputOTPSeparator = forwardRef(
+  function InputOTPSeparator2(props, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, { className: "size-4 text-muted-foreground" }) });
+  }
+);
+
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator
+};
+//# sourceMappingURL=chunk-OV4GQOLC.js.map

package/dist/chunk-OV4GQOLC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/input-otp/input-otp.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useContext, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { Minus } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\n\nexport const InputOTP = forwardRef<\n  ElementRef<typeof OTPInput>,\n  ComponentPropsWithoutRef<typeof OTPInput>\n>(function InputOTP({ className, containerClassName, ...props }, ref) {\n  return (\n    <OTPInput\n      ref={ref}\n      containerClassName={cn(\n        \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n        containerClassName,\n      )}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  );\n});\n\nexport const InputOTPGroup = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function InputOTPGroup({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />;\n  },\n);\n\nexport const InputOTPSlot = forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { index: number }\n>(function InputOTPSlot({ index, className, ...props }, ref) {\n  const ctx = useContext(OTPInputContext);\n  const slot = ctx.slots[index];\n  const { char, hasFakeCaret, isActive } = slot ?? {\n    char: null,\n    hasFakeCaret: false,\n    isActive: false,\n  };\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex size-9 items-center justify-center border-y border-e border-input text-body shadow-sm transition-[color,border-color,box-shadow] duration-fast ease-standard first:rounded-s-md first:border-s last:rounded-e-md\",\n        // The OTP slot IS the field's focus indicator: the real focused element is\n        // InputOTP's visually-hidden <input>, and `isActive` is the caret's slot. It\n        // therefore carries the compound indicator (#67) — the state is JS-driven, so\n        // it is the `-static` flavour rather than a `:focus-visible` one, and the\n        // border-color swap is a plain class (twMerge drops `border-input` for it)\n        // rather than a `focus-visible:` variant.\n        isActive && \"z-10 focus-ring-static border-input-focus\",\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground\" />\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport const InputOTPSeparator = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function InputOTPSeparator(props, ref) {\n    return (\n      <div ref={ref} role=\"separator\" {...props}>\n        <Minus className=\"size-4 text-muted-foreground\" />\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;AAEA,SAAS,YAAY,kBAAkE;AACvF,SAAS,UAAU,uBAAuB;AAC1C,SAAS,aAAa;AAQlB,cA8BA,YA9BA;AALG,IAAM,WAAW,WAGtB,SAASA,UAAS,EAAE,WAAW,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAoB;AAAA,QAClB;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,MACrD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,gBAAgB;AAAA,EAC3B,SAASC,eAAc,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACnD,WAAO,oBAAC,SAAI,KAAU,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,OAAO;AAAA,EAClF;AACF;AAEO,IAAM,eAAe,WAG1B,SAASC,cAAa,EAAE,OAAO,WAAW,GAAG,MAAM,GAAG,KAAK;AAC3D,QAAM,MAAM,WAAW,eAAe;AACtC,QAAM,OAAO,IAAI,MAAM,KAAK;AAC5B,QAAM,EAAE,MAAM,cAAc,SAAS,IAAI,QAAQ;AAAA,IAC/C,MAAM;AAAA,IACN,cAAc;AAAA,IACd,UAAU;AAAA,EACZ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOA,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,gBACC,oBAAC,SAAI,WAAU,yEACb,8BAAC,SAAI,WAAU,8CAA6C,GAC9D;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAEM,IAAM,oBAAoB;AAAA,EAC/B,SAASC,mBAAkB,OAAO,KAAK;AACrC,WACE,oBAAC,SAAI,KAAU,MAAK,aAAa,GAAG,OAClC,8BAAC,SAAM,WAAU,gCAA+B,GAClD;AAAA,EAEJ;AACF;","names":["InputOTP","InputOTPGroup","InputOTPSlot","InputOTPSeparator"]}

package/dist/chunk-OYKS7YHE.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-OYKS7YHE.js.map

package/dist/chunk-OYKS7YHE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-OYM3NHSD.js

@@ -0,0 +1,74 @@
+"use client";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/split-panel/split-panel.tsx
+import "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var splitPaneVariants = cva("min-h-0 min-w-0 overflow-auto", {
+  variants: {
+    tone: {
+      plain: "",
+      muted: "bg-surface-muted",
+      card: "bg-card shadow-sm"
+    }
+  },
+  defaultVariants: { tone: "plain" }
+});
+function SplitPanel({
+  start,
+  end,
+  direction = "horizontal",
+  startSize = "1fr",
+  divider = true,
+  startTone = "plain",
+  endTone = "plain",
+  className,
+  startClassName,
+  endClassName
+}) {
+  const isHorizontal = direction === "horizontal";
+  const style = isHorizontal ? { gridTemplateColumns: `${startSize} minmax(0, 1fr)` } : { gridTemplateRows: `${startSize} minmax(0, 1fr)` };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid h-full w-full",
+        isHorizontal ? "grid-flow-col" : "grid-flow-row",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn(splitPaneVariants({ tone: startTone }), startClassName), children: start }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              splitPaneVariants({ tone: endTone }),
+              divider && (isHorizontal ? "border-s" : "border-t") + // #163 — with both panes "plain" there is no fill/elevation
+              // difference between them, so the hairline is the ONLY cue and
+              // must clear the 3:1 non-text bar (WCAG 1.4.11):
+              // `border-border-strong` (`border-strong ≥ 3:1 on --card/
+              // --background` is proven for every theme in
+              // @elabs-ai/components-tokens's themes-contrast.test.ts).
+              // With either tone "muted"/"card" the fill change already
+              // carries the boundary, so the subtle default rung stays —
+              // the redundant-cue exemption in styling-and-tokens.md.
+              (startTone === "plain" && endTone === "plain" ? " border-border-strong" : ""),
+              endClassName
+            ),
+            children: end
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  splitPaneVariants,
+  SplitPanel
+};
+//# sourceMappingURL=chunk-OYM3NHSD.js.map

package/dist/chunk-OYM3NHSD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/split-panel/split-panel.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Per-pane surface tone — the ground-offset tiering axis (research 08 §H, #193).\n * `plain` keeps the ambient ground (default; non-breaking). `card` RAISES the pane as\n * a white `bg-card` + `shadow-sm` and is robust across every theme — a card is\n * lighter than the page ground in BOTH light and dark, so it always reads as raised.\n * `muted` (`bg-surface-muted`) reads as a recessed well ONLY in light themes; in dark\n * themes `--surface-muted` is lighter than `--card`, so a `muted` pane reads as a faint\n * raised tint, not a recess (dark-mode layering only goes UP — there is no surface below\n * the page ground). For a guaranteed cross-theme raise/recess contrast, raise the focus\n * pane with `card` and leave the other `plain`.\n *\n * Exported so the same tone system reaches a `Layout/Resizable` pane — a draggable\n * `ResizablePanel` composes `splitPaneVariants({ tone })` for the identical ground-offset\n * tiering `SplitPanel` gives its `startTone`/`endTone`, instead of a hand-rolled second\n * copy of these three classes. See `Layout/Resizable`'s `Tiered` story.\n */\nexport const splitPaneVariants = cva(\"min-h-0 min-w-0 overflow-auto\", {\n  variants: {\n    tone: {\n      plain: \"\",\n      muted: \"bg-surface-muted\",\n      card: \"bg-card shadow-sm\",\n    },\n  },\n  defaultVariants: { tone: \"plain\" },\n});\n\nexport type SplitPanelTone = NonNullable<VariantProps<typeof splitPaneVariants>[\"tone\"]>;\n\nexport interface SplitPanelProps {\n  start: ReactNode;\n  end: ReactNode;\n  /** Layout axis. Defaults to \"horizontal\" (side-by-side). */\n  direction?: \"horizontal\" | \"vertical\";\n  /**\n   * Size of the START pane as a CSS grid track (e.g. \"320px\", \"40%\", \"1fr\").\n   * The END pane fills the remainder. Defaults to \"1fr\" (equal split).\n   */\n  startSize?: string;\n  /** Show a thin divider between panes. Defaults to true. */\n  divider?: boolean;\n  /** Surface tone of the START pane (ground-offset tiering). Defaults to \"plain\". */\n  startTone?: SplitPanelTone;\n  /** Surface tone of the END pane (ground-offset tiering). Defaults to \"plain\". */\n  endTone?: SplitPanelTone;\n  className?: string;\n  startClassName?: string;\n  endClassName?: string;\n}\n\n/**\n * Two-pane layout for master/detail, editor/preview and inspector workflows.\n * Static sizing by design (predictable in tests/SSR) — `startSize` is a CSS grid\n * track (`\"320px\"`, `\"40%\"`, `\"1fr\"`), not a percentage. For panes the user can\n * drag to resize, reach for `Layout/Resizable`'s `ResizablePanelGroup`/\n * `ResizablePanel`/`ResizableHandle` instead and apply `splitPaneVariants({ tone })`\n * to a panel for the same ground-offset tiering. See\n * [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs).\n *\n * For a master/detail surface where the detail should read as a raised card on a\n * recessed list, use `startTone=\"muted\" endTone=\"card\"` (ground-offset tiering).\n */\nexport function SplitPanel({\n  start,\n  end,\n  direction = \"horizontal\",\n  startSize = \"1fr\",\n  divider = true,\n  startTone = \"plain\",\n  endTone = \"plain\",\n  className,\n  startClassName,\n  endClassName,\n}: SplitPanelProps) {\n  const isHorizontal = direction === \"horizontal\";\n  const style = isHorizontal\n    ? { gridTemplateColumns: `${startSize} minmax(0, 1fr)` }\n    : { gridTemplateRows: `${startSize} minmax(0, 1fr)` };\n  return (\n    <div\n      className={cn(\n        \"grid h-full w-full\",\n        isHorizontal ? \"grid-flow-col\" : \"grid-flow-row\",\n        className,\n      )}\n      style={style}\n    >\n      <div className={cn(splitPaneVariants({ tone: startTone }), startClassName)}>{start}</div>\n      <div\n        className={cn(\n          splitPaneVariants({ tone: endTone }),\n          divider &&\n            (isHorizontal ? \"border-s\" : \"border-t\") +\n              // #163 — with both panes \"plain\" there is no fill/elevation\n              // difference between them, so the hairline is the ONLY cue and\n              // must clear the 3:1 non-text bar (WCAG 1.4.11):\n              // `border-border-strong` (`border-strong ≥ 3:1 on --card/\n              // --background` is proven for every theme in\n              // @elabs-ai/components-tokens's themes-contrast.test.ts).\n              // With either tone \"muted\"/\"card\" the fill change already\n              // carries the boundary, so the subtle default rung stays —\n              // the redundant-cue exemption in styling-and-tokens.md.\n              (startTone === \"plain\" && endTone === \"plain\" ? \" border-border-strong\" : \"\"),\n          endClassName,\n        )}\n      >\n        {end}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAAA,OAA+B;AAC/B,SAAS,WAA8B;AAkFnC,SAQE,KARF;AA/DG,IAAM,oBAAoB,IAAI,iCAAiC;AAAA,EACpE,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,QAAQ;AACnC,CAAC;AAqCM,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,eAAe,cAAc;AACnC,QAAM,QAAQ,eACV,EAAE,qBAAqB,GAAG,SAAS,kBAAkB,IACrD,EAAE,kBAAkB,GAAG,SAAS,kBAAkB;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,eAAe,kBAAkB;AAAA,QACjC;AAAA,MACF;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAW,GAAG,kBAAkB,EAAE,MAAM,UAAU,CAAC,GAAG,cAAc,GAAI,iBAAM;AAAA,QACnF;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAAA,cACnC,YACG,eAAe,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAU1B,cAAc,WAAW,YAAY,UAAU,0BAA0B;AAAA,cAC9E;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-OZTM6PYF.js

@@ -0,0 +1,30 @@
+"use client";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/section-header/section-header.tsx
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SectionHeader({
+  title,
+  description,
+  actions,
+  eyebrow,
+  as: TitleTag = "h2",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-end justify-between gap-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      eyebrow ? /* @__PURE__ */ jsx("div", { className: "text-eyebrow uppercase text-muted-foreground", children: eyebrow }) : null,
+      /* @__PURE__ */ jsx(TitleTag, { className: "text-title text-foreground", children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "text-body text-muted-foreground", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: actions }) : null
+  ] });
+}
+
+export {
+  SectionHeader
+};
+//# sourceMappingURL=chunk-OZTM6PYF.js.map

package/dist/chunk-OZTM6PYF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/section-header/section-header.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nexport interface SectionHeaderProps {\n  title: ReactNode;\n  description?: ReactNode;\n  /** Right-aligned actions (buttons, menus). */\n  actions?: ReactNode;\n  /** Optional element rendered above the title (eyebrow / breadcrumbs). */\n  eyebrow?: ReactNode;\n  /**\n   * The heading LEVEL the title contributes to the document outline. The\n   * visual (`text-title`) is identical for every value — pick the level the\n   * page's structure calls for, not the size you want (WCAG 1.3.1).\n   *\n   * Use `as=\"h1\"` when this header titles the PAGE (a screen whose route it\n   * names); leave it at the default when it titles a section INSIDE a page\n   * that already has an `<h1>` elsewhere. @default \"h2\"\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  className?: string;\n}\n\n/** A consistent page/section heading row with optional actions. */\nexport function SectionHeader({\n  title,\n  description,\n  actions,\n  eyebrow,\n  as: TitleTag = \"h2\",\n  className,\n}: SectionHeaderProps) {\n  return (\n    <div className={cn(\"flex flex-wrap items-end justify-between gap-4\", className)}>\n      <div className=\"space-y-1\">\n        {eyebrow ? (\n          <div className=\"text-eyebrow uppercase text-muted-foreground\">{eyebrow}</div>\n        ) : null}\n        <TitleTag className=\"text-title text-foreground\">{title}</TitleTag>\n        {description ? <p className=\"text-body text-muted-foreground\">{description}</p> : null}\n      </div>\n      {actions ? <div className=\"flex items-center gap-2\">{actions}</div> : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAAA,OAA+B;AAkCzB,SAEI,KAFJ;AAVC,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI,WAAW;AAAA,EACf;AACF,GAAuB;AACrB,SACE,qBAAC,SAAI,WAAW,GAAG,kDAAkD,SAAS,GAC5E;AAAA,yBAAC,SAAI,WAAU,aACZ;AAAA,gBACC,oBAAC,SAAI,WAAU,gDAAgD,mBAAQ,IACrE;AAAA,MACJ,oBAAC,YAAS,WAAU,8BAA8B,iBAAM;AAAA,MACvD,cAAc,oBAAC,OAAE,WAAU,mCAAmC,uBAAY,IAAO;AAAA,OACpF;AAAA,IACC,UAAU,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ,IAAS;AAAA,KACxE;AAEJ;","names":[]}

package/dist/chunk-PHAENHGL.js

@@ -0,0 +1,19 @@
+"use client";
+
+// src/lib/slash-command.ts
+function defaultSlashCommandFilter(command, query) {
+  const q = query.toLowerCase();
+  if (q.length === 0) return true;
+  if (command.name.toLowerCase().startsWith(q)) return true;
+  return (command.keywords ?? []).some((keyword) => keyword.toLowerCase().startsWith(q));
+}
+function stepIndex(count, from, direction) {
+  if (count === 0) return -1;
+  return ((from + direction) % count + count) % count;
+}
+
+export {
+  defaultSlashCommandFilter,
+  stepIndex
+};
+//# sourceMappingURL=chunk-PHAENHGL.js.map

package/dist/chunk-PHAENHGL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/slash-command.ts"],"sourcesContent":["/**\n * The command model behind a `/`-triggered slash-command palette\n * (`PromptInputSlash` in `@elabs-ai/components-ai`, and the terminal CLI\n * look-alike family's own palette — issue #117).\n *\n * Promoted here (not duplicated) because `@elabs-ai/components-ai` and\n * `@elabs-ai/components-terminal` are layer-2 DAG SIBLINGS and may not import\n * each other — `ui` is upstream of both, so this is the one legal shared home\n * (docs/decisions/2026-09-01-brainless-adoption-architecture.md § 4, the\n * promotion rule: \"a helper shared by two layer-2 siblings moves UP to `ui`,\n * it is never duplicated sideways\"). No DOM, no keyboard wiring, no rendering\n * — the popover, the caret tracking and the row markup stay in each\n * package's own presentational component.\n */\nimport type { ReactNode } from \"react\";\n\n/** One entry a slash palette offers. Ships no vocabulary — entirely prop-driven. */\nexport interface SlashCommand {\n  /** Stable name, WITHOUT the leading \"/\" (e.g. `\"help\"`, not `\"/help\"`). */\n  name: string;\n  /** One line shown next to the name. */\n  description?: string;\n  /** Extra prefix-match aids beyond `name` (matched case-insensitively). */\n  keywords?: string[];\n  /** Leading glyph. Decorative — the row is identified by `name`. */\n  icon?: ReactNode;\n}\n\n/**\n * Case-insensitive PREFIX match on `name`, falling back to a prefix match on\n * any `keyword`. Prefix (not substring) is deliberate: `/hel` should surface\n * `/help`, not e.g. a hypothetical `/channel`.\n */\nexport function defaultSlashCommandFilter(command: SlashCommand, query: string): boolean {\n  const q = query.toLowerCase();\n  if (q.length === 0) return true;\n  if (command.name.toLowerCase().startsWith(q)) return true;\n  return (command.keywords ?? []).some((keyword) => keyword.toLowerCase().startsWith(q));\n}\n\n/** Next index in `[0, count)`, wrapping at both ends. `-1` when `count` is 0. */\nexport function stepIndex(count: number, from: number, direction: 1 | -1): number {\n  if (count === 0) return -1;\n  return (((from + direction) % count) + count) % count;\n}\n"],"mappings":";;;AAiCO,SAAS,0BAA0B,SAAuB,OAAwB;AACvF,QAAM,IAAI,MAAM,YAAY;AAC5B,MAAI,EAAE,WAAW,EAAG,QAAO;AAC3B,MAAI,QAAQ,KAAK,YAAY,EAAE,WAAW,CAAC,EAAG,QAAO;AACrD,UAAQ,QAAQ,YAAY,CAAC,GAAG,KAAK,CAAC,YAAY,QAAQ,YAAY,EAAE,WAAW,CAAC,CAAC;AACvF;AAGO,SAAS,UAAU,OAAe,MAAc,WAA2B;AAChF,MAAI,UAAU,EAAG,QAAO;AACxB,WAAU,OAAO,aAAa,QAAS,SAAS;AAClD;","names":[]}

package/dist/chunk-PLCQZBZS.js

@@ -0,0 +1,63 @@
+"use client";
+
+// src/lib/download.ts
+function clickAnchor(url, filename) {
+  const a = document.createElement("a");
+  a.href = url;
+  if (filename) a.download = filename;
+  a.rel = "noopener";
+  a.style.display = "none";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
+function filenameFromUrl(url) {
+  try {
+    const base = "http://localhost";
+    const ref = typeof window === "undefined" ? base : window.location.href;
+    const { pathname } = new URL(url, ref);
+    const last = pathname.split("/").filter(Boolean).pop();
+    return last && last.length > 0 ? decodeURIComponent(last) : "download";
+  } catch {
+    return "download";
+  }
+}
+function isDirectlyDownloadable(url) {
+  if (url.startsWith("data:") || url.startsWith("blob:")) return true;
+  if (typeof window === "undefined") return true;
+  try {
+    return new URL(url, window.location.href).origin === window.location.origin;
+  } catch {
+    return true;
+  }
+}
+function downloadBlob(blob, filename) {
+  if (typeof document === "undefined") return;
+  const url = URL.createObjectURL(blob);
+  try {
+    clickAnchor(url, filename);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+async function downloadUrl(url, filename) {
+  if (typeof document === "undefined") return;
+  if (isDirectlyDownloadable(url)) {
+    clickAnchor(url, filename);
+    return;
+  }
+  try {
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(`Download failed: ${res.status}`);
+    const blob = await res.blob();
+    downloadBlob(blob, filename ?? filenameFromUrl(url));
+  } catch {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+}
+
+export {
+  downloadBlob,
+  downloadUrl
+};
+//# sourceMappingURL=chunk-PLCQZBZS.js.map

package/dist/chunk-PLCQZBZS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/download.ts"],"sourcesContent":["/**\n * Browser file-download helpers — the single home for the\n * `Blob`/URL → hidden `<a download>` → click → revoke dance that was previously\n * copy-pasted across `@elabs-ai/components-ai` (ConversationDownload), `@elabs-ai/components-data`\n * (downloadCsv) and now `@elabs-ai/components-ai` Gallery.\n *\n * Pure DOM mechanics, no React, no other deps — and SSR-guarded\n * (`typeof document === \"undefined\"` → no-op) so it's safe to import from\n * dependency-light modules. The CONTENT (CSV serialization, markdown export,\n * image source) stays with each caller; this only triggers the save.\n */\n\n/** Internal: click a hidden anchor for `url`, optionally suggesting `filename`. */\nfunction clickAnchor(url: string, filename?: string): void {\n  const a = document.createElement(\"a\");\n  a.href = url;\n  // `download` is only honored for same-origin / blob: / data: URLs; harmless otherwise.\n  if (filename) a.download = filename;\n  a.rel = \"noopener\";\n  a.style.display = \"none\";\n  document.body.appendChild(a);\n  a.click();\n  a.remove();\n}\n\n/** Best-effort filename from a URL path; falls back to \"download\". */\nfunction filenameFromUrl(url: string): string {\n  try {\n    const base = \"http://localhost\";\n    const ref = typeof window === \"undefined\" ? base : window.location.href;\n    const { pathname } = new URL(url, ref);\n    const last = pathname.split(\"/\").filter(Boolean).pop();\n    return last && last.length > 0 ? decodeURIComponent(last) : \"download\";\n  } catch {\n    return \"download\";\n  }\n}\n\n/** True for sources `<a download>` can save directly (same-origin, blob:, data:). */\nfunction isDirectlyDownloadable(url: string): boolean {\n  if (url.startsWith(\"data:\") || url.startsWith(\"blob:\")) return true;\n  if (typeof window === \"undefined\") return true;\n  try {\n    return new URL(url, window.location.href).origin === window.location.origin;\n  } catch {\n    // Relative or unparseable → treat as same-origin (the anchor resolves it).\n    return true;\n  }\n}\n\n/**\n * Trigger a download for an in-memory `Blob`. No-op in non-DOM environments.\n * Revokes the object URL immediately after the click (the browser captures the\n * download synchronously, mirroring the prior call sites).\n */\nexport function downloadBlob(blob: Blob, filename: string): void {\n  if (typeof document === \"undefined\") return;\n  const url = URL.createObjectURL(blob);\n  try {\n    clickAnchor(url, filename);\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n}\n\n/**\n * Trigger a download for an existing `url` (an http(s)/relative URL, or a\n * `data:`/`blob:` URI). No-op in non-DOM environments.\n *\n * Same-origin / `blob:` / `data:` → a direct `<a download>` (honors `filename`).\n * Cross-origin → the browser ignores the `download` filename, so we `fetch` the\n * bytes and save via {@link downloadBlob}. This requires the server to allow CORS;\n * on failure (CORS/opaque/offline) we fall back to opening the source in a new\n * tab so the user still gets the asset. Fire-and-forget: `void downloadUrl(...)`.\n */\nexport async function downloadUrl(url: string, filename?: string): Promise<void> {\n  if (typeof document === \"undefined\") return;\n\n  if (isDirectlyDownloadable(url)) {\n    clickAnchor(url, filename);\n    return;\n  }\n\n  try {\n    const res = await fetch(url);\n    if (!res.ok) throw new Error(`Download failed: ${res.status}`);\n    const blob = await res.blob();\n    downloadBlob(blob, filename ?? filenameFromUrl(url));\n  } catch {\n    // CORS / opaque / offline: best effort so the user still reaches the asset.\n    window.open(url, \"_blank\", \"noopener,noreferrer\");\n  }\n}\n"],"mappings":";;;AAaA,SAAS,YAAY,KAAa,UAAyB;AACzD,QAAM,IAAI,SAAS,cAAc,GAAG;AACpC,IAAE,OAAO;AAET,MAAI,SAAU,GAAE,WAAW;AAC3B,IAAE,MAAM;AACR,IAAE,MAAM,UAAU;AAClB,WAAS,KAAK,YAAY,CAAC;AAC3B,IAAE,MAAM;AACR,IAAE,OAAO;AACX;AAGA,SAAS,gBAAgB,KAAqB;AAC5C,MAAI;AACF,UAAM,OAAO;AACb,UAAM,MAAM,OAAO,WAAW,cAAc,OAAO,OAAO,SAAS;AACnE,UAAM,EAAE,SAAS,IAAI,IAAI,IAAI,KAAK,GAAG;AACrC,UAAM,OAAO,SAAS,MAAM,GAAG,EAAE,OAAO,OAAO,EAAE,IAAI;AACrD,WAAO,QAAQ,KAAK,SAAS,IAAI,mBAAmB,IAAI,IAAI;AAAA,EAC9D,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAGA,SAAS,uBAAuB,KAAsB;AACpD,MAAI,IAAI,WAAW,OAAO,KAAK,IAAI,WAAW,OAAO,EAAG,QAAO;AAC/D,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,MAAI;AACF,WAAO,IAAI,IAAI,KAAK,OAAO,SAAS,IAAI,EAAE,WAAW,OAAO,SAAS;AAAA,EACvE,QAAQ;AAEN,WAAO;AAAA,EACT;AACF;AAOO,SAAS,aAAa,MAAY,UAAwB;AAC/D,MAAI,OAAO,aAAa,YAAa;AACrC,QAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,MAAI;AACF,gBAAY,KAAK,QAAQ;AAAA,EAC3B,UAAE;AACA,QAAI,gBAAgB,GAAG;AAAA,EACzB;AACF;AAYA,eAAsB,YAAY,KAAa,UAAkC;AAC/E,MAAI,OAAO,aAAa,YAAa;AAErC,MAAI,uBAAuB,GAAG,GAAG;AAC/B,gBAAY,KAAK,QAAQ;AACzB;AAAA,EACF;AAEA,MAAI;AACF,UAAM,MAAM,MAAM,MAAM,GAAG;AAC3B,QAAI,CAAC,IAAI,GAAI,OAAM,IAAI,MAAM,oBAAoB,IAAI,MAAM,EAAE;AAC7D,UAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,iBAAa,MAAM,YAAY,gBAAgB,GAAG,CAAC;AAAA,EACrD,QAAQ;AAEN,WAAO,KAAK,KAAK,UAAU,qBAAqB;AAAA,EAClD;AACF;","names":[]}