@mirror-physics/fractal-ui 0.2.0-next.47 → 0.2.0-next.48

package/dist/index.cjs

@@ -48,6 +48,7 @@ __export(index_exports, {
   CheckboxGhost: () => CheckboxGhost,
   Chip: () => Chip,
   ChipGhost: () => ChipGhost,
+  CodeBlock: () => CodeBlock,
   ContentSwitcher: () => ContentSwitcher,
   ContentSwitcherGhost: () => ContentSwitcherGhost,
   ConversationGhost: () => ConversationGhost,
@@ -273,22 +274,218 @@ var Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/components/Breadcrumbs/Breadcrumbs.tsx
+// src/components/CodeBlock/CodeBlock.tsx
+var import_react = require("react");
+var import_react_codemirror = __toESM(require("@uiw/react-codemirror"), 1);
+var import_language = require("@codemirror/language");
+var import_language_data = require("@codemirror/language-data");
+var import_view = require("@codemirror/view");
+var import_highlight = require("@lezer/highlight");
 var import_fractal_icons = require("@mirror-physics/fractal-icons");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var codeTheme = import_view.EditorView.theme({
+  "&": {
+    backgroundColor: "transparent",
+    color: "var(--fg-primary)",
+    fontSize: "0.75rem"
+  },
+  "&.cm-focused": { outline: "none" },
+  ".cm-scroller": {
+    fontFamily: "var(--font-mono)",
+    lineHeight: "1.55",
+    overscrollBehavior: "contain"
+  },
+  ".cm-content": { padding: "10px 0" },
+  ".cm-line": { padding: "0 12px" },
+  ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--fg-primary)" },
+  ".cm-gutters": {
+    backgroundColor: "var(--bg-surface-1)",
+    borderRight: "1px solid var(--border-subtle)",
+    color: "var(--fg-tertiary)"
+  },
+  ".cm-lineNumbers .cm-gutterElement": { padding: "0 10px 0 12px" },
+  ".cm-foldGutter .cm-gutterElement": { padding: "0 8px 0 2px" },
+  ".cm-activeLine, .cm-activeLineGutter": { backgroundColor: "var(--bg-surface-1)" },
+  ".cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection": {
+    backgroundColor: "var(--accent-surface-stroke) !important"
+  },
+  ".cm-searchMatch": {
+    backgroundColor: "var(--warning-surface)",
+    outline: "1px solid var(--warning-surface-stroke)"
+  },
+  ".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "var(--warning-subtle)" },
+  ".cm-panels": { backgroundColor: "var(--bg-surface-1)", color: "var(--fg-primary)" },
+  ".cm-tooltip": {
+    borderColor: "var(--border-subtle)",
+    backgroundColor: "var(--bg-canvas)",
+    color: "var(--fg-primary)"
+  }
+});
+var fractalHighlightStyle = import_language.HighlightStyle.define([
+  { tag: import_highlight.tags.comment, color: "var(--fg-tertiary)", fontStyle: "italic" },
+  { tag: [import_highlight.tags.keyword, import_highlight.tags.controlKeyword, import_highlight.tags.operatorKeyword], color: "var(--purple-default)" },
+  { tag: [import_highlight.tags.string, import_highlight.tags.special(import_highlight.tags.string)], color: "var(--success-default)" },
+  { tag: [import_highlight.tags.number, import_highlight.tags.bool, import_highlight.tags.null], color: "var(--orange-default)" },
+  { tag: [import_highlight.tags.function(import_highlight.tags.variableName), import_highlight.tags.labelName], color: "var(--accent-default)" },
+  { tag: [import_highlight.tags.typeName, import_highlight.tags.className, import_highlight.tags.namespace], color: "var(--pink-default)" },
+  { tag: [import_highlight.tags.propertyName, import_highlight.tags.attributeName], color: "var(--fg-primary)" },
+  { tag: [import_highlight.tags.operator, import_highlight.tags.punctuation, import_highlight.tags.bracket], color: "var(--fg-secondary)" },
+  { tag: [import_highlight.tags.heading, import_highlight.tags.strong], color: "var(--fg-primary)", fontWeight: "600" },
+  { tag: import_highlight.tags.emphasis, fontStyle: "italic" },
+  { tag: import_highlight.tags.link, color: "var(--accent-default)", textDecoration: "underline" },
+  { tag: import_highlight.tags.invalid, color: "var(--error-default)", textDecoration: "underline wavy" }
+]);
+function findLanguage(language, fileName) {
+  const normalized = language?.trim();
+  if (normalized && !["text", "txt", "plaintext", "plain"].includes(normalized.toLowerCase())) {
+    return import_language.LanguageDescription.matchLanguageName(import_language_data.languages, normalized, true);
+  }
+  return fileName ? import_language.LanguageDescription.matchFilename(import_language_data.languages, fileName) : null;
+}
+function useLanguageSupport(language, fileName) {
+  const description = (0, import_react.useMemo)(() => findLanguage(language, fileName), [fileName, language]);
+  const [support, setSupport] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    setSupport(null);
+    if (!description) return () => {
+      cancelled = true;
+    };
+    void description.load().then((loaded) => {
+      if (!cancelled) setSupport(loaded);
+    }).catch(() => {
+      if (!cancelled) setSupport(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [description]);
+  return { description, support };
+}
+function CodeBlock({
+  value,
+  language,
+  fileName,
+  label,
+  editable = false,
+  onChange,
+  lineNumbers = true,
+  wrap = true,
+  copyable = true,
+  ariaLabel,
+  height,
+  minHeight,
+  maxHeight = "28rem",
+  placeholder,
+  autoFocus,
+  className,
+  ...props
+}) {
+  const { description, support } = useLanguageSupport(language, fileName);
+  const [copyStatus, setCopyStatus] = (0, import_react.useState)("idle");
+  const copyResetTimer = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => () => {
+    if (copyResetTimer.current) clearTimeout(copyResetTimer.current);
+  }, []);
+  const extensions = (0, import_react.useMemo)(() => [
+    codeTheme,
+    (0, import_language.syntaxHighlighting)(fractalHighlightStyle),
+    ...support ? [support] : [],
+    ...wrap ? [import_view.EditorView.lineWrapping] : []
+  ], [support, wrap]);
+  const languageLabel = language?.trim() || description?.name;
+  const toolbarLabel = label ?? fileName ?? languageLabel;
+  const surfaceLabel = ariaLabel ?? (fileName ? `${fileName} ${editable ? "editor" : "viewer"}` : `Code ${editable ? "editor" : "viewer"}`);
+  const copyCode = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopyStatus("copied");
+    } catch {
+      setCopyStatus("error");
+    }
+    if (copyResetTimer.current) clearTimeout(copyResetTimer.current);
+    copyResetTimer.current = setTimeout(() => setCopyStatus("idle"), 1800);
+  };
+  const showToolbar = toolbarLabel !== void 0 || copyable || editable;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: cn(
+        "fractal-code-block",
+        editable && "fractal-code-block--editable",
+        !lineNumbers && "fractal-code-block--no-line-numbers",
+        className
+      ),
+      ...props,
+      children: [
+        showToolbar && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "fractal-code-block__toolbar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "fractal-code-block__identity", children: [
+            toolbarLabel !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fractal-code-block__label", title: typeof toolbarLabel === "string" ? toolbarLabel : void 0, children: toolbarLabel }),
+            fileName && languageLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fractal-code-block__language", children: languageLabel }),
+            editable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fractal-code-block__mode", children: "Editing" })
+          ] }),
+          copyable && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "fractal-code-block__copy",
+              "aria-label": copyStatus === "copied" ? "Code copied" : "Copy code",
+              onClick: () => void copyCode(),
+              children: [
+                copyStatus === "copied" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fractal_icons.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fractal_icons.Copy, { size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: copyStatus === "copied" ? "Copied" : copyStatus === "error" ? "Copy failed" : "Copy" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fractal-code-block__surface", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react_codemirror.default,
+          {
+            "aria-label": surfaceLabel,
+            value,
+            editable,
+            readOnly: !editable,
+            onChange,
+            extensions,
+            theme: "none",
+            basicSetup: {
+              lineNumbers,
+              foldGutter: lineNumbers,
+              highlightActiveLine: editable,
+              highlightActiveLineGutter: editable,
+              autocompletion: editable,
+              history: editable
+            },
+            indentWithTab: editable,
+            height,
+            minHeight,
+            maxHeight,
+            placeholder,
+            autoFocus
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fractal-code-block__status", "aria-live": "polite", children: copyStatus === "copied" ? "Code copied to clipboard." : copyStatus === "error" ? "Code could not be copied." : "" })
+      ]
+    }
+  );
+}
+
+// src/components/Breadcrumbs/Breadcrumbs.tsx
+var import_fractal_icons2 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Breadcrumbs({
   items,
   ariaLabel = "Breadcrumbs",
-  separator = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fractal_icons.ChevronRight, { "aria-hidden": "true", size: 14 }),
+  separator = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fractal_icons2.ChevronRight, { "aria-hidden": "true", size: 14 }),
   className,
   ...props
 }) {
   if (items.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("nav", { "aria-label": ariaLabel, className: cn("fractal-breadcrumbs", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ol", { className: "fractal-breadcrumbs__list", children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("nav", { "aria-label": ariaLabel, className: cn("fractal-breadcrumbs", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ol", { className: "fractal-breadcrumbs__list", children: items.map((item, index) => {
     const isCurrent = index === items.length - 1;
-    const content = isCurrent ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-current": "page", className: "fractal-breadcrumbs__current", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { className: "fractal-breadcrumbs__link", href: item.href ?? "#", onClick: item.onClick, children: item.label });
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: "fractal-breadcrumbs__item", children: [
-      index > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", className: "fractal-breadcrumbs__separator", children: separator }),
+    const content = isCurrent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-current": "page", className: "fractal-breadcrumbs__current", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "fractal-breadcrumbs__link", href: item.href ?? "#", onClick: item.onClick, children: item.label });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { className: "fractal-breadcrumbs__item", children: [
+      index > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", className: "fractal-breadcrumbs__separator", children: separator }),
       content
     ] }, index);
   }) }) });
@@ -296,42 +493,42 @@ function Breadcrumbs({
 
 // src/components/Card/Card.tsx
 var React2 = __toESM(require("react"), 1);
-var import_fractal_icons2 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_fractal_icons3 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Card = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: cn("fractal-card", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("fractal-card", className), ...props })
 );
 Card.displayName = "Card";
 var CardHeader = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: cn("fractal-card-header", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("fractal-card-header", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
 var CardTitle = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { ref, className: cn("fractal-card-title", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { ref, className: cn("fractal-card-title", className), ...props })
 );
 CardTitle.displayName = "CardTitle";
 var CardDescription = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { ref, className: cn("fractal-card-description", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { ref, className: cn("fractal-card-description", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
 var CardContent = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: cn("fractal-card-content", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("fractal-card-content", className), ...props })
 );
 CardContent.displayName = "CardContent";
 var CardFooter = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: cn("fractal-card-footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("fractal-card-footer", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
 var FeatureCard = React2.forwardRef(
-  ({ icon, title, description, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref, className: cn("fractal-feature-card", className), ...props, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fractal-feature-card__icon", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "fractal-feature-card__title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fractal-feature-card__description", children: description })
+  ({ icon, title, description, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, className: cn("fractal-feature-card", className), ...props, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fractal-feature-card__icon", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "fractal-feature-card__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "fractal-feature-card__description", children: description })
   ] })
 );
 FeatureCard.displayName = "FeatureCard";
 var FolderCard = React2.forwardRef(
-  ({ name, sessionCount, selected, className, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  ({ name, sessionCount, selected, className, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       ref,
@@ -347,11 +544,11 @@ var FolderCard = React2.forwardRef(
       className: cn("fractal-folder-card", selected && "fractal-folder-card--selected", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fractal-folder-card__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fractal_icons2.Folder, { size: 16, className: "fractal-folder-card__icon", "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fractal-folder-card__name", children: name })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fractal-folder-card__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_fractal_icons3.Folder, { size: 16, className: "fractal-folder-card__icon", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fractal-folder-card__name", children: name })
         ] }),
-        sessionCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fractal-folder-card__footer", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fractal-folder-card__sessions", children: [
+        sessionCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fractal-folder-card__footer", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "fractal-folder-card__sessions", children: [
           sessionCount,
           " ",
           sessionCount === 1 ? "session" : "sessions"
@@ -364,7 +561,7 @@ FolderCard.displayName = "FolderCard";
 
 // src/components/PromptCard/PromptCard.tsx
 var React3 = __toESM(require("react"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var titleToPrompt = (title) => typeof title === "string" || typeof title === "number" ? String(title) : "";
 var PromptCard = React3.forwardRef(
   ({
@@ -385,7 +582,7 @@ var PromptCard = React3.forwardRef(
         onPromptSelect?.(prompt ?? titleToPrompt(title));
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "button",
       {
         ref,
@@ -400,8 +597,8 @@ var PromptCard = React3.forwardRef(
         onClick: handleClick,
         ...props,
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fractal-prompt-card__icon", "aria-hidden": "true", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fractal-prompt-card__title", children: title })
+          icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fractal-prompt-card__icon", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fractal-prompt-card__title", children: title })
         ]
       }
     );
@@ -409,7 +606,7 @@ var PromptCard = React3.forwardRef(
 );
 PromptCard.displayName = "PromptCard";
 var PromptGrid = React3.forwardRef(
-  ({ compact, padded, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  ({ compact, padded, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       ref,
@@ -427,9 +624,9 @@ PromptGrid.displayName = "PromptGrid";
 
 // src/components/Input/Input.tsx
 var React4 = __toESM(require("react"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Input = React4.forwardRef(
-  ({ className, type, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  ({ className, type, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "input",
     {
       type,
@@ -443,8 +640,8 @@ Input.displayName = "Input";
 
 // src/components/NumberInput/NumberInput.tsx
 var React5 = __toESM(require("react"), 1);
-var import_fractal_icons3 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_fractal_icons4 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function NumberInput({
   unit,
   className,
@@ -470,8 +667,8 @@ function NumberInput({
     input.dispatchEvent(new Event("input", { bubbles: true }));
     input.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       Input,
       {
         ref: inputRef,
@@ -485,7 +682,7 @@ function NumberInput({
         ...props
       }
     ),
-    unit && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    unit && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "span",
       {
         className: "fractal-number-input-unit",
@@ -494,8 +691,8 @@ function NumberInput({
         children: unit
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "fractal-number-input-controls", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fractal-number-input-controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
@@ -503,10 +700,10 @@ function NumberInput({
           "aria-label": `Decrease ${controlLabel}`,
           disabled: decrementDisabled,
           onClick: () => changeByStep(-1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fractal_icons3.Minus, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fractal_icons4.Minus, { "aria-hidden": "true", size: 16 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
@@ -514,7 +711,7 @@ function NumberInput({
           "aria-label": `Increase ${controlLabel}`,
           disabled: incrementDisabled,
           onClick: () => changeByStep(1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fractal_icons3.Plus, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fractal_icons4.Plus, { "aria-hidden": "true", size: 16 })
         }
       )
     ] })
@@ -523,8 +720,8 @@ function NumberInput({
 
 // src/components/PasswordInput/PasswordInput.tsx
 var React6 = __toESM(require("react"), 1);
-var import_fractal_icons4 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_fractal_icons5 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var PasswordInput = React6.forwardRef(
   ({
     className,
@@ -535,13 +732,13 @@ var PasswordInput = React6.forwardRef(
   }, ref) => {
     const [passwordVisible, setPasswordVisible] = React6.useState(false);
     const toggleLabel = passwordVisible ? hidePasswordLabel : showPasswordLabel;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: cn("fractal-password-input", className),
         "data-password-visible": passwordVisible ? "" : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             Input,
             {
               ...props,
@@ -551,7 +748,7 @@ var PasswordInput = React6.forwardRef(
               type: passwordVisible ? "text" : "password"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
@@ -561,7 +758,7 @@ var PasswordInput = React6.forwardRef(
               disabled,
               title: toggleLabel,
               onClick: () => setPasswordVisible((visible) => !visible),
-              children: passwordVisible ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fractal_icons4.EyeSlash, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_fractal_icons4.Eye, { "aria-hidden": "true", size: 18 })
+              children: passwordVisible ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_fractal_icons5.EyeSlash, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_fractal_icons5.Eye, { "aria-hidden": "true", size: 18 })
             }
           )
         ]
@@ -573,9 +770,9 @@ PasswordInput.displayName = "PasswordInput";
 
 // src/components/Label/Label.tsx
 var React7 = __toESM(require("react"), 1);
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Label = React7.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "label",
     {
       ref,
@@ -588,19 +785,19 @@ Label.displayName = "Label";
 
 // src/components/Alert/Alert.tsx
 var React8 = __toESM(require("react"), 1);
-var import_fractal_icons5 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_fractal_icons6 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var defaultIcons = {
-  default: import_fractal_icons5.CircleInfo,
-  info: import_fractal_icons5.CircleInfo,
-  success: import_fractal_icons5.CircleCheck,
-  warning: import_fractal_icons5.Warning,
-  error: import_fractal_icons5.CircleClose
+  default: import_fractal_icons6.CircleInfo,
+  info: import_fractal_icons6.CircleInfo,
+  success: import_fractal_icons6.CircleCheck,
+  warning: import_fractal_icons6.Warning,
+  error: import_fractal_icons6.CircleClose
 };
 var Alert = React8.forwardRef(
   ({ className, variant = "default", icon, children, ...props }, ref) => {
     const DefaultIcon = defaultIcons[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "div",
       {
         ref,
@@ -608,8 +805,8 @@ var Alert = React8.forwardRef(
         className: cn("fractal-alert", `fractal-alert--${variant}`, className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DefaultIcon, { size: 18 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fractal-alert-content", children })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DefaultIcon, { size: 18 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fractal-alert-content", children })
         ]
       }
     );
@@ -617,18 +814,18 @@ var Alert = React8.forwardRef(
 );
 Alert.displayName = "Alert";
 var AlertTitle = React8.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h5", { ref, className: cn("fractal-alert-title", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h5", { ref, className: cn("fractal-alert-title", className), ...props })
 );
 AlertTitle.displayName = "AlertTitle";
 var AlertDescription = React8.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref, className: cn("fractal-alert-description", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cn("fractal-alert-description", className), ...props })
 );
 AlertDescription.displayName = "AlertDescription";
 
 // src/components/Toggle/Toggle.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Toggle({ checked, onChange, label, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "button",
     {
       type: "button",
@@ -637,8 +834,8 @@ function Toggle({ checked, onChange, label, className }) {
       className: cn("fractal-toggle", className),
       onClick: () => onChange(!checked),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fractal-toggle-label", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "fractal-toggle-label", children: label })
       ]
     }
   );
@@ -648,7 +845,7 @@ function Toggle({ checked, onChange, label, className }) {
 var import_react_dom = require("react-dom");
 
 // src/hooks/useEscapeDismiss.ts
-var import_react = require("react");
+var import_react2 = require("react");
 var nextId = 0;
 var stack = [];
 function insertSorted(entry) {
@@ -681,9 +878,9 @@ function ensureGlobalListener() {
   );
 }
 function useEscapeDismiss(priority, handler, enabled = true) {
-  const handlerRef = (0, import_react.useRef)(handler);
+  const handlerRef = (0, import_react2.useRef)(handler);
   handlerRef.current = handler;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!enabled) return;
     ensureGlobalListener();
     const id = nextId++;
@@ -698,17 +895,17 @@ function useEscapeDismiss(priority, handler, enabled = true) {
 }
 
 // src/components/UILoader/UILoader.tsx
-var import_react2 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var LEFT = "M0 53C0 51 1.6 49.5 3.6 49.5h16.5c1 0 1.9.4 2.5 1L42.1 69.6c.7.7 1.1 1.6 1.1 2.5v16.2c0 2-1.6 3.5-3.6 3.5H23.1c-1 0-1.9-.4-2.5-1L1.1 71.7C.4 71 0 70.1 0 69.2V53Z";
 var CENTER = "M0 3.5C0 1.6 1.6 0 3.6 0h16.5c1 0 1.9.4 2.5 1L92.5 69.6c.7.7 1 1.6 1 2.5v16.2c0 2-1.6 3.5-3.6 3.5H73.4c-1 0-1.9-.4-2.5-1L1.1 22.2C.4 21.6 0 20.7 0 19.7V3.5Z";
 var RIGHT = "M50.4 3.5C50.4 1.6 52 0 54 0h16.5c1 0 1.9.4 2.5 1l69.8 68.6c.7.7 1.1 1.6 1.1 2.5v16.2c0 2-1.6 3.5-3.6 3.5h-16.5c-1 0-1.9-.4-2.5-1L51.4 22.2c-.7-.6-1-1.5-1-2.5V3.5Z";
 function UILoader({ size = 48, tone = "neutral", className, style, label = "Loading", ariaHidden = false }) {
-  const rawId = (0, import_react2.useId)().replace(/[^a-zA-Z0-9_-]/g, "");
+  const rawId = (0, import_react3.useId)().replace(/[^a-zA-Z0-9_-]/g, "");
   const clipId = `fractal-ui-loader-clip-${rawId}`;
   const gradientId = `fractal-ui-loader-gradient-${rawId}`;
   const height = typeof size === "number" ? `${size}px` : size;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "span",
     {
       "aria-hidden": ariaHidden || void 0,
@@ -716,52 +913,52 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
       className: cn("fractal-ui-loader", `fractal-ui-loader--${tone}`, className),
       role: ariaHidden ? void 0 : "status",
       style,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("defs", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("clipPath", { id: clipId, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: LEFT }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: CENTER }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: RIGHT })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("clipPath", { id: clipId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: LEFT }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: CENTER }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: RIGHT })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: CENTER, fill: `url(#${gradientId})` }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: RIGHT, fill: `url(#${gradientId})` }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: LEFT, fill: `url(#${gradientId})` }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: CENTER, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: RIGHT, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: LEFT, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
       ] })
     }
   );
 }
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
   useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
   if (!open) return null;
   const sizeClass = `fractal-modal-panel--${size}`;
   const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "fractal-modal-title-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
-            !noClose && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "fractal-modal-title-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
+            !noClose && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon, {}) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               "aria-busy": loading || void 0,
@@ -771,10 +968,10 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
                 loading && "fractal-modal-body--loading",
                 scrollable && "fractal-modal-body--scrollable"
               ),
-              children: loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UILoader, { label: loadingLabel }) : children
+              children: loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(UILoader, { label: loadingLabel }) : children
             }
           ),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
+          footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
         ]
       }
     ) }),
@@ -783,17 +980,17 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
 }
 
 // src/components/DataTable/DataTable.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "fractal-datatable-surface", children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-datatable-header", children: header }),
-    data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "fractal-datatable-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "fractal-datatable-surface", children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-datatable-header", children: header }),
+    data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "fractal-datatable-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "tr",
         {
           className: "fractal-datatable-row",
-          children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
+          children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
         },
         rowIndex
       )) })
@@ -803,8 +1000,8 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
 
 // src/components/Dropdown/Dropdown.tsx
 var React9 = __toESM(require("react"), 1);
-var import_fractal_icons6 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_fractal_icons7 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var MARGIN = 4;
 function Dropdown({
   items,
@@ -836,7 +1033,7 @@ function Dropdown({
   const selectableItems = visibleItems.filter((i) => i.kind !== "header");
   const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? selectableItems[0] ?? visibleItems[0];
   const isUp = direction === "up";
-  const ChevronIcon = isUp ? import_fractal_icons6.ChevronUp : import_fractal_icons6.ChevronDown;
+  const ChevronIcon = isUp ? import_fractal_icons7.ChevronUp : import_fractal_icons7.ChevronDown;
   React9.useLayoutEffect(() => {
     if (!open || !triggerRef.current || !panelRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
@@ -881,8 +1078,8 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("fractal-dropdown", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("fractal-dropdown", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -900,15 +1097,15 @@ function Dropdown({
           triggerClassName
         ),
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-            selected.icon != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
-            selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected.description })
+          triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+            selected.icon != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
+            selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected.description })
           ] }),
-          !noChevron && !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
+          !noChevron && !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         ref: panelRef,
@@ -917,21 +1114,21 @@ function Dropdown({
         className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
         style: panelStyle,
         children: [
-          label != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-dropdown-label", children: label }),
+          label != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "fractal-dropdown-label", children: label }),
           visibleItems.map((item, index) => {
-            const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
-            const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
+            const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
+            const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
             if (item.kind === "header") {
-              return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(React9.Fragment, { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(React9.Fragment, { children: [
                 topDivider,
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
                 bottomDivider
               ] }, `header-${index}`);
             }
             const isSelected = item.value === selectedValue;
-            return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(React9.Fragment, { children: [
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(React9.Fragment, { children: [
               topDivider,
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -943,9 +1140,9 @@ function Dropdown({
                   },
                   className: "fractal-dropdown-option",
                   children: [
-                    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
-                    item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
-                    item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
+                    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
+                    item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
+                    item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
                   ]
                 }
               ),
@@ -960,9 +1157,9 @@ function Dropdown({
 
 // src/components/Link/Link.tsx
 var React10 = __toESM(require("react"), 1);
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Link = React10.forwardRef(
-  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "a",
     {
       ref,
@@ -975,9 +1172,9 @@ Link.displayName = "Link";
 
 // src/components/Chip/Chip.tsx
 var React11 = __toESM(require("react"), 1);
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var Chip = React11.forwardRef(
-  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "span",
     {
       ref,
@@ -989,8 +1186,8 @@ var Chip = React11.forwardRef(
 Chip.displayName = "Chip";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_fractal_icons7 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_fractal_icons8 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Checkbox({
   checked,
   indeterminate = false,
@@ -1001,7 +1198,7 @@ function Checkbox({
   onKeyDown,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "button",
     {
       ...props,
@@ -1023,18 +1220,18 @@ function Checkbox({
         onKeyDown?.(event);
         if (event.key === " " || event.key === "Enter") event.stopPropagation();
       },
-      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons7.Checkbox, { size: 18 }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons7.Minus, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
-      ] }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons7.CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons7.Checkbox, { "aria-hidden": "true", size: 18 })
+      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fractal_icons8.Checkbox, { size: 18 }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fractal_icons8.Minus, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
+      ] }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fractal_icons8.CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fractal_icons8.Checkbox, { "aria-hidden": "true", size: 18 })
     }
   );
 }
 
 // src/components/SortableTable/SortableTable.tsx
-var import_react3 = require("react");
-var import_fractal_icons8 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_fractal_icons9 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function SortableTable({
   columns,
   data,
@@ -1053,8 +1250,8 @@ function SortableTable({
   onRowClick,
   rowAction
 }) {
-  const [internalKey, setInternalKey] = (0, import_react3.useState)(defaultSortKey ?? null);
-  const [internalDirection, setInternalDirection] = (0, import_react3.useState)(defaultSortDirection);
+  const [internalKey, setInternalKey] = (0, import_react4.useState)(defaultSortKey ?? null);
+  const [internalDirection, setInternalDirection] = (0, import_react4.useState)(defaultSortDirection);
   const isControlled = controlledKey !== void 0 && controlledDirection !== void 0;
   const activeKey = isControlled ? controlledKey : internalKey;
   const activeDirection = isControlled ? controlledDirection : internalDirection;
@@ -1062,7 +1259,7 @@ function SortableTable({
   const baselineDirection = defaultSort?.direction ?? null;
   const effectiveKey = activeKey && activeDirection ? activeKey : baselineKey;
   const effectiveDirection = activeKey && activeDirection ? activeDirection : baselineDirection;
-  const sorted = (0, import_react3.useMemo)(() => {
+  const sorted = (0, import_react4.useMemo)(() => {
     if (!effectiveKey || !effectiveDirection) return data;
     const col = columns.find((c) => c.key === effectiveKey);
     if (!col) return data;
@@ -1110,13 +1307,13 @@ function SortableTable({
       onSortChange?.(nextKey, nextDirection);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
-    sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("table", { className: "fractal-sortable-table-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
+    sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("table", { className: "fractal-sortable-table-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
         const isActive = activeKey === col.key && activeDirection !== null;
         if (!col.sortable) {
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "th",
             {
               className: "fractal-sortable-table-th",
@@ -1126,12 +1323,12 @@ function SortableTable({
             col.key
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "th",
           {
             className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
             style: { width: col.width },
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               "button",
               {
                 type: "button",
@@ -1142,8 +1339,8 @@ function SortableTable({
                 onClick: () => handleSortClick(col.key),
                 "aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: col.header }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fractal_icons8.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fractal_icons8.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fractal_icons8.ArrowsUpDown, { size: 14 }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: col.header }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fractal_icons9.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fractal_icons9.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fractal_icons9.ArrowsUpDown, { size: 14 }) })
                 ]
               }
             )
@@ -1151,13 +1348,13 @@ function SortableTable({
           col.key
         );
       }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tbody", { children: sorted.map((row, rowIndex) => {
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { children: sorted.map((row, rowIndex) => {
         const highlighted = highlightRow?.(row, rowIndex) ?? false;
         const action = rowAction ? {
           label: rowAction.label(row, rowIndex),
           icon: rowAction.icon(row, rowIndex)
         } : null;
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "tr",
           {
             className: cn(
@@ -1175,7 +1372,7 @@ function SortableTable({
             "aria-label": action?.label,
             role: onRowClick ? "button" : void 0,
             tabIndex: onRowClick ? 0 : void 0,
-            children: columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            children: columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               "td",
               {
                 className: cn(
@@ -1185,7 +1382,7 @@ function SortableTable({
                 style: { width: col.width, textAlign: col.align ?? "left" },
                 children: [
                   col.render(row, rowIndex),
-                  action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
+                  action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
                 ]
               },
               col.key
@@ -1199,8 +1396,8 @@ function SortableTable({
 }
 
 // src/components/Tabs/Tabs.tsx
-var import_react4 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Tabs({
   items,
   defaultValue,
@@ -1211,16 +1408,16 @@ function Tabs({
   divider = false,
   variant = "line"
 }) {
-  const reactId = (0, import_react4.useId)();
-  const [internalValue, setInternalValue] = (0, import_react4.useState)(
+  const reactId = (0, import_react5.useId)();
+  const [internalValue, setInternalValue] = (0, import_react5.useState)(
     defaultValue ?? items.find((i) => !i.disabled)?.id ?? items[0]?.id ?? ""
   );
   const isControlled = controlledValue !== void 0;
   const activeId = isControlled ? controlledValue : internalValue;
-  const tabListRef = (0, import_react4.useRef)(null);
-  const tabRefs = (0, import_react4.useRef)({});
-  const [indicator, setIndicator] = (0, import_react4.useState)(null);
-  (0, import_react4.useLayoutEffect)(() => {
+  const tabListRef = (0, import_react5.useRef)(null);
+  const tabRefs = (0, import_react5.useRef)({});
+  const [indicator, setIndicator] = (0, import_react5.useState)(null);
+  (0, import_react5.useLayoutEffect)(() => {
     const updateIndicator = () => {
       const activeTab = tabRefs.current[activeId];
       if (!activeTab) return;
@@ -1271,8 +1468,8 @@ function Tabs({
     selectTab(nextId2);
     requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         ref: tabListRef,
@@ -1285,7 +1482,7 @@ function Tabs({
           const isActive = item.id === activeId;
           const tabId = `${reactId}-tab-${item.id}`;
           const panelId = `${reactId}-panel-${item.id}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "button",
             {
               ref: (el) => {
@@ -1316,7 +1513,7 @@ function Tabs({
       const tabId = `${reactId}-tab-${item.id}`;
       const panelId = `${reactId}-panel-${item.id}`;
       const isActive = item.id === activeId;
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "div",
         {
           id: panelId,
@@ -1334,7 +1531,7 @@ function Tabs({
 
 // src/components/ContentSwitcher/ContentSwitcher.tsx
 var React12 = __toESM(require("react"), 1);
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
   const switcherRef = React12.useRef(null);
   const buttonRefs = React12.useRef([]);
@@ -1392,7 +1589,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       onValueChange(items[nextIndex].value);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
@@ -1400,10 +1597,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       "aria-label": ariaLabel,
       ref: switcherRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
         items.map((item, index) => {
           const active = item.value === value;
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
@@ -1435,9 +1632,9 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
 }
 
 // src/components/Disclosure/Disclosure.tsx
-var import_react5 = require("react");
-var import_fractal_icons9 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_fractal_icons10 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Disclosure({
   title,
   meta,
@@ -1449,10 +1646,10 @@ function Disclosure({
   className,
   variant = "card"
 }) {
-  const reactId = (0, import_react5.useId)();
+  const reactId = (0, import_react6.useId)();
   const headerId = `${reactId}-header`;
   const panelId = `${reactId}-panel`;
-  const [internalOpen, setInternalOpen] = (0, import_react5.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react6.useState)(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const toggle = () => {
@@ -1465,7 +1662,7 @@ function Disclosure({
       onOpenChange?.(next);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       className: cn(
@@ -1476,7 +1673,7 @@ function Disclosure({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "button",
           {
             type: "button",
@@ -1487,13 +1684,13 @@ function Disclosure({
             disabled,
             onClick: toggle,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons9.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons9.ChevronRight, { size: 16 }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-disclosure-title", children: title }),
-              meta && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fractal_icons10.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fractal_icons10.ChevronRight, { size: 16 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-disclosure-title", children: title }),
+              meta && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             id: panelId,
@@ -1501,7 +1698,7 @@ function Disclosure({
             "aria-labelledby": headerId,
             className: "fractal-disclosure-panel",
             hidden: !isOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
           }
         )
       ]
@@ -1510,18 +1707,18 @@ function Disclosure({
 }
 
 // src/components/LatticeLoader/LatticeLoader.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var LATTICE_COUNT = 160;
 var WAVE_PERIOD = 80;
 function LatticeLoader({ className, label = "Loading", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "span",
     {
       "aria-label": label,
       className: cn("fractal-lattice-loader", className),
       role: "progressbar",
       ...props,
-      children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "span",
         {
           "aria-hidden": "true",
@@ -1535,10 +1732,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
 }
 
 // src/components/Ghost/Ghost.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 function Ghost({ className, width, height, radius, style, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       "aria-hidden": "true",
@@ -1554,15 +1751,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
   );
 }
 function GhostLine({ className, size = "md", width = "100%", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
 }
 function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
 }
 function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
-    showHeader && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "38%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
+    showHeader && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
   ] });
 }
 function DataTableGhost({
@@ -1576,81 +1773,81 @@ function DataTableGhost({
   ...props
 }) {
   const cells = Array.from({ length: columns }, (_, index) => index);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("table", { className: "fractal-ghost-table__table", children: [
-    (showHeader || headers) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "fractal-ghost-table__table", children: [
+    (showHeader || headers) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
   ] }) });
 }
 function InputGhost({ className, labelWidth = "26%", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FormFieldGhost, { className, labelWidth, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormFieldGhost, { className, labelWidth, ...props });
 }
 function TextareaGhost({ className, labelWidth = "26%", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
 }
 function LabelGhost({ className, width = "26%", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
 }
 function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LabelGhost, { width: labelWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LabelGhost, { width: labelWidth }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
   ] });
 }
 function AlertGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "30%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { size: "sm", width: "78%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "30%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { size: "sm", width: "78%" })
   ] });
 }
 function CheckboxGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: "fractal-ghost-choice__control" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "42%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, { className: "fractal-ghost-choice__control" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "42%" })
   ] });
 }
 var ToggleGhost = CheckboxGhost;
 function ChipGhost({ className, width = 74, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
 }
 function LinkGhost({ className, width = 96, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
 }
 var TextButtonGhost = LinkGhost;
 function DropdownGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "38%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
   ] });
 }
 function ContentSwitcherGhost({ className, options = 3, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, {}, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, {}, index)) });
 }
 var TabsGhost = ContentSwitcherGhost;
 function DisclosureGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: "fractal-ghost-disclosure__icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "42%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, { className: "fractal-ghost-disclosure__icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "42%" })
   ] });
 }
 function PaginationGhost({ className, pages = 5, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, {}, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, {}, index)) });
 }
 function FileDropzoneGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: "fractal-ghost-dropzone__icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "26%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { size: "sm", width: "46%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, { className: "fractal-ghost-dropzone__icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "26%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { size: "sm", width: "46%" })
   ] });
 }
 function PromptCardGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
 }
 function ConversationGhost({
   className,
   "aria-label": ariaLabel = "Loading conversation",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       "aria-busy": "true",
@@ -1659,54 +1856,54 @@ function ConversationGhost({
       role: "status",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fractal-ghost-conversation__bubble", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "100%" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "86%" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "64%" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "fractal-ghost-conversation__bubble", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "100%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "86%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "64%" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "92%" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "78%" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "58%" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "92%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "78%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "58%" })
         ] })
       ]
     }
   );
 }
 function SortableTableGhost(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DataTableGhost, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DataTableGhost, { ...props });
 }
 function SidebarGhost({ className, items = 6, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: "fractal-ghost-sidebar__brand" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fractal-ghost-sidebar__item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, { className: "fractal-ghost-sidebar__brand" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "fractal-ghost-sidebar__item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
     ] }, index)) })
   ] });
 }
 function ModalGhost({ className, title, lines = 3, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
 }
 function SidePanelGhost({ className, title, lines = 5, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
 }
 function SurfaceGhost({ className, title, lines = 3, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fractal-ghost-surface__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: "42%" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Ghost, { className: "fractal-ghost-surface__close" })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "fractal-ghost-surface__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: "42%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Ghost, { className: "fractal-ghost-surface__close" })
     ] }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-ghost-surface__title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
+    title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fractal-ghost-surface__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
   ] });
 }
 
 // src/components/Sidebar/Sidebar.tsx
 var React13 = __toESM(require("react"), 1);
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Sidebar = React13.forwardRef(
-  ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "aside",
     {
       ref,
@@ -1719,11 +1916,11 @@ var Sidebar = React13.forwardRef(
 );
 Sidebar.displayName = "Sidebar";
 var SidebarHeader = React13.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
 );
 SidebarHeader.displayName = "SidebarHeader";
 var SidebarBrand = React13.forwardRef(
-  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
+  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
 );
 SidebarBrand.displayName = "SidebarBrand";
 function SidebarAccountMenu({
@@ -1734,7 +1931,7 @@ function SidebarAccountMenu({
   icon,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     Dropdown,
     {
       align: "left",
@@ -1744,9 +1941,9 @@ function SidebarAccountMenu({
       panelClassName: "fractal-sidebar__account-panel",
       selectedValue: "",
       triggerClassName: "fractal-sidebar__account-trigger",
-      triggerContent: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-sidebar__account-name", children: name })
+      triggerContent: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sidebar__account-name", children: name })
       ] }),
       triggerLabel,
       triggerVariant: "tertiary"
@@ -1754,15 +1951,15 @@ function SidebarAccountMenu({
   );
 }
 var SidebarNav = React13.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
 );
 SidebarNav.displayName = "SidebarNav";
 var SidebarSection = React13.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
 );
 SidebarSection.displayName = "SidebarSection";
 var SidebarNavItem = React13.forwardRef(
-  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "button",
     {
       ref,
@@ -1772,28 +1969,28 @@ var SidebarNavItem = React13.forwardRef(
       "aria-current": active ? "page" : void 0,
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
-        endAdornment && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
+        endAdornment && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
       ]
     }
   )
 );
 SidebarNavItem.displayName = "SidebarNavItem";
 var SidebarFooter = React13.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
 );
 SidebarFooter.displayName = "SidebarFooter";
 
 // src/components/SidePanel/SidePanel.tsx
 var import_react_dom2 = require("react-dom");
-var import_fractal_icons10 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_fractal_icons11 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
   useEscapeDismiss(80, onClose, open);
   if (!open) return null;
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "aside",
       {
         className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
@@ -1802,15 +1999,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
         role: "dialog",
         onMouseDown: (event) => event.stopPropagation(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: "fractal-side-panel__header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fractal-side-panel__heading", children: [
-              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fractal-side-panel__title", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "fractal-side-panel__description", children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("header", { className: "fractal-side-panel__header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "fractal-side-panel__heading", children: [
+              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fractal-side-panel__title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "fractal-side-panel__description", children: description })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fractal_icons10.Close, { size: 18 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fractal_icons11.Close, { size: 18 }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UILoader, { label: loadingLabel }) : children }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UILoader, { label: loadingLabel }) : children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
         ]
       }
     ) }),
@@ -1820,17 +2017,17 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 
 // src/components/Textarea/Textarea.tsx
 var React14 = __toESM(require("react"), 1);
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Textarea = React14.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
 var React15 = __toESM(require("react"), 1);
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var TextButton = React15.forwardRef(
-  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "button",
     {
       ref,
@@ -1838,9 +2035,9 @@ var TextButton = React15.forwardRef(
       type: "button",
       ...props,
       children: [
-        icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children }),
-        icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
+        icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children }),
+        icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
       ]
     }
   )
@@ -1849,8 +2046,8 @@ TextButton.displayName = "TextButton";
 
 // src/components/FileDropzone/FileDropzone.tsx
 var React16 = __toESM(require("react"), 1);
-var import_fractal_icons11 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_fractal_icons12 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function FileDropzone({
   files,
   onFilesChange,
@@ -1870,8 +2067,8 @@ function FileDropzone({
     if (additions.length === 0) return;
     onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "input",
       {
         ref: inputRef,
@@ -1887,7 +2084,7 @@ function FileDropzone({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "button",
       {
         className: "fractal-file-dropzone__target",
@@ -1910,18 +2107,18 @@ function FileDropzone({
           addFiles(event.dataTransfer.files);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fractal_icons11.FileArrowUp, { "aria-hidden": "true", size: 20 }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fractal_icons12.FileArrowUp, { "aria-hidden": "true", size: 20 }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
           ] })
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         "button",
         {
           className: "fractal-file-dropzone__remove",
@@ -1929,7 +2126,7 @@ function FileDropzone({
           "aria-label": `Remove ${file.name}`,
           disabled,
           onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fractal_icons11.Close, { "aria-hidden": "true", size: 14 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fractal_icons12.Close, { "aria-hidden": "true", size: 14 })
         }
       )
     ] }, `${file.name}-${file.size}-${index}`)) })
@@ -1942,8 +2139,8 @@ function formatFileSize(bytes) {
 }
 
 // src/components/Pagination/Pagination.tsx
-var import_fractal_icons12 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_fractal_icons13 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Pagination({
   page,
   pageSize,
@@ -1959,10 +2156,10 @@ function Pagination({
   const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
   const end = Math.min(currentPage * pageSize, totalItems);
   const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "fractal-pagination__controls", children: [
-      canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-pagination__controls", children: [
+      canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         Dropdown,
         {
           align: "right",
@@ -1979,7 +2176,7 @@ function Pagination({
           triggerVariant: "tertiary"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "button",
         {
           className: "fractal-pagination__button",
@@ -1988,15 +2185,15 @@ function Pagination({
           title: "Previous page",
           disabled: currentPage === 1 || totalItems === 0,
           onClick: () => onPageChange(currentPage - 1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fractal_icons12.ArrowLeft, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_fractal_icons13.ArrowLeft, { "aria-hidden": "true", size: 16 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
         currentPage,
         " of ",
         totalPages
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "button",
         {
           className: "fractal-pagination__button",
@@ -2005,7 +2202,7 @@ function Pagination({
           title: "Next page",
           disabled: currentPage === totalPages || totalItems === 0,
           onClick: () => onPageChange(currentPage + 1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fractal_icons12.ArrowRight, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_fractal_icons13.ArrowRight, { "aria-hidden": "true", size: 16 })
         }
       )
     ] })
@@ -2031,6 +2228,7 @@ function Pagination({
   CheckboxGhost,
   Chip,
   ChipGhost,
+  CodeBlock,
   ContentSwitcher,
   ContentSwitcherGhost,
   ConversationGhost,