@mirror-physics/fractal-ui 0.2.0-next.8 → 0.2.0-next.82

package/dist/index.cjs

@@ -28,46 +28,91 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   Alert: () => Alert,
   AlertDescription: () => AlertDescription,
+  AlertGhost: () => AlertGhost,
   AlertTitle: () => AlertTitle,
+  Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
+  ButtonGhost: () => ButtonGhost,
   Card: () => Card,
   CardContent: () => CardContent,
   CardDescription: () => CardDescription,
   CardFooter: () => CardFooter,
+  CardGhost: () => CardGhost,
   CardHeader: () => CardHeader,
   CardTitle: () => CardTitle,
+  Checkbox: () => Checkbox,
+  CheckboxGhost: () => CheckboxGhost,
   Chip: () => Chip,
+  ChipGhost: () => ChipGhost,
+  CodeBlock: () => CodeBlock,
+  ColumnEditor: () => ColumnEditor,
+  ContentSwitcher: () => ContentSwitcher,
+  ContentSwitcherGhost: () => ContentSwitcherGhost,
+  ConversationGhost: () => ConversationGhost,
   DataTable: () => DataTable,
+  DataTableGhost: () => DataTableGhost,
   Disclosure: () => Disclosure,
+  DisclosureGhost: () => DisclosureGhost,
   Dropdown: () => Dropdown,
+  DropdownGhost: () => DropdownGhost,
   FeatureCard: () => FeatureCard,
+  FileDropzone: () => FileDropzone,
+  FileDropzoneGhost: () => FileDropzoneGhost,
   FolderCard: () => FolderCard,
+  Ghost: () => Ghost,
+  GhostLine: () => GhostLine,
   Input: () => Input,
+  InputGhost: () => InputGhost,
   Label: () => Label,
+  LabelGhost: () => LabelGhost,
+  LatticeLoader: () => LatticeLoader,
   Link: () => Link,
+  LinkGhost: () => LinkGhost,
   Modal: () => Modal,
+  ModalGhost: () => ModalGhost,
+  NumberInput: () => NumberInput,
+  Pagination: () => Pagination,
+  PaginationGhost: () => PaginationGhost,
+  PasswordInput: () => PasswordInput,
   PromptCard: () => PromptCard,
+  PromptCardGhost: () => PromptCardGhost,
   PromptGrid: () => PromptGrid,
+  Radio: () => Radio,
   SidePanel: () => SidePanel,
+  SidePanelGhost: () => SidePanelGhost,
   Sidebar: () => Sidebar,
+  SidebarAccountMenu: () => SidebarAccountMenu,
   SidebarBrand: () => SidebarBrand,
   SidebarFooter: () => SidebarFooter,
+  SidebarGhost: () => SidebarGhost,
   SidebarHeader: () => SidebarHeader,
   SidebarNav: () => SidebarNav,
   SidebarNavItem: () => SidebarNavItem,
   SidebarSection: () => SidebarSection,
+  Slider: () => Slider,
   SortableTable: () => SortableTable,
+  SortableTableGhost: () => SortableTableGhost,
+  TableSearch: () => TableSearch,
   Tabs: () => Tabs,
+  TabsGhost: () => TabsGhost,
+  TextButton: () => TextButton,
+  TextButtonGhost: () => TextButtonGhost,
   Textarea: () => Textarea,
+  TextareaGhost: () => TextareaGhost,
+  Toast: () => Toast,
+  ToastViewport: () => ToastViewport,
   Toggle: () => Toggle,
+  ToggleGhost: () => ToggleGhost,
+  Tooltip: () => Tooltip,
+  UILoader: () => UILoader,
   cn: () => cn,
   useEscapeDismiss: () => useEscapeDismiss
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/components/Button/Button.tsx
 var React = __toESM(require("react"), 1);
@@ -118,51 +163,34 @@ var colorPalette = {
     700: "var(--green-700)"
   }
 };
-var sizeConfig = {
-  xs: { height: "28px", padding: "4px 8px", iconOnly: "28px", fontSize: "0.75rem" },
-  sm: { height: "32px", padding: "6px 12px", iconOnly: "32px", fontSize: "0.75rem" },
-  md: { height: "40px", padding: "8px 16px", iconOnly: "40px", fontSize: "0.875rem" },
-  lg: { height: "44px", padding: "10px 20px", iconOnly: "44px", fontSize: "1rem" },
-  xl: { height: "56px", padding: "14px 28px", iconOnly: "56px", fontSize: "1rem" }
-};
-function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled, color, hasIconOnly) {
-  const palette = colorPalette[color];
-  const size = sizeConfig[buttonSize];
+function getButtonStyles(buttonType, isHovered, isActive, disabled, color, hasIconOnly) {
+  const palette = color ? colorPalette[color] : void 0;
   const base = {
-    height: size.height,
-    padding: hasIconOnly ? "0" : size.padding,
-    borderRadius: hasIconOnly ? "var(--radius-lg, 8px)" : "var(--radius-full, 9999px)",
+    borderRadius: "var(--radius-sm, 4px)",
     cursor: disabled ? "not-allowed" : "pointer",
-    fontSize: size.fontSize,
     transition: "background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease"
   };
   if (hasIconOnly) {
-    base.width = size.iconOnly;
     base.justifyContent = "center";
   }
   if (disabled) {
     if (buttonType === "ghost") {
-      return { ...base, backgroundColor: "transparent", border: "none", color: "var(--fg-disabled)" };
+      return { ...base, backgroundColor: "transparent", border: "1px solid transparent", color: "var(--fg-disabled)" };
     }
     return { ...base, backgroundColor: "transparent", border: "1px solid var(--fg-disabled)", color: "var(--fg-disabled)" };
   }
   switch (buttonType) {
-    // Primary with text: dark pill. Icon-only: color palette (Synapse style).
+    // Text and icon-only primary actions inherit the same scoped theme.
     case "primary":
-      if (hasIconOnly) {
-        return {
-          ...base,
-          backgroundColor: isActive ? palette[700] : isHovered ? palette[500] : palette[600],
-          border: "none",
-          color: "var(--fg-inverse)"
-        };
-      }
       return {
         ...base,
-        backgroundColor: "var(--fg-primary)",
-        border: "1px solid var(--fg-primary)",
-        color: "var(--fg-inverse)",
-        ...isHovered || isActive ? { opacity: 0.85 } : {}
+        border: "1px solid transparent",
+        ...palette ? {
+          "--button-primary-bg": palette[600],
+          "--button-primary-hover": palette[500],
+          "--button-primary-active": palette[700],
+          "--button-primary-fg": "var(--grey-0)"
+        } : {}
       };
     // Secondary: neutral. Rest=canvas, hover=surface-1 (darken), pressed=surface-2. Subtle border, dark text.
     case "secondary":
@@ -177,7 +205,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
       return {
         ...base,
         backgroundColor: isHovered || isActive ? "var(--bg-surface-1)" : "transparent",
-        border: "none",
+        border: "1px solid transparent",
         color: "var(--fg-primary)"
       };
     // Danger: low-intensity destructive action. Text stays steady; hover deepens the light red surface.
@@ -185,7 +213,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
       return {
         ...base,
         backgroundColor: isHovered || isActive ? "var(--danger-button-surface-hover)" : "var(--danger-button-surface)",
-        border: "none",
+        border: "1px solid transparent",
         color: "var(--danger-button-fg)"
       };
     default:
@@ -193,10 +221,10 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
   }
 }
 var Button = React.forwardRef(
-  ({ className, buttonType = "primary", buttonSize = "md", color = "blue", icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
+  ({ className, buttonType = "primary", buttonSize = "lg", controlSize, color, icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
     const [isHovered, setIsHovered] = React.useState(false);
     const [isActive, setIsActive] = React.useState(false);
-    const typeStyles = getButtonStyles(buttonType, isHovered, isActive, buttonSize, !!disabled, color, hasIconOnly);
+    const typeStyles = getButtonStyles(buttonType, isHovered, isActive, !!disabled, color, hasIconOnly);
     const hasIconAndText = icon && children && !hasIconOnly;
     const finalStyles = hasIconAndText ? { ...typeStyles, gap: "var(--space-2, 8px)", ...style } : { ...typeStyles, ...style };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -204,7 +232,9 @@ var Button = React.forwardRef(
       {
         ref,
         type: "button",
-        className: cn("fractal-button", `fractal-button--${buttonType}`, className),
+        "data-control-size": controlSize ?? buttonSize,
+        "data-icon-only": hasIconOnly || void 0,
+        className: cn("fractal-control", "fractal-button", `fractal-button--${buttonType}`, className),
         style: finalStyles,
         disabled,
         onMouseEnter: (e) => {
@@ -236,44 +266,409 @@ var Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/components/Card/Card.tsx
-var React2 = __toESM(require("react"), 1);
+// 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_lang_json = require("@codemirror/lang-json");
+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: "none"
+  },
+  ".cm-content": { padding: "10px 0" },
+  ".cm-line": {
+    padding: "0 12px 0 calc(12px + var(--fractal-code-wrap-indent, 0ch))",
+    textIndent: "calc(0px - var(--fractal-code-wrap-indent, 0ch))"
+  },
+  ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--fg-primary)" },
+  ".cm-gutters": {
+    backgroundColor: "var(--bg-canvas)",
+    borderRight: "1px solid var(--border-subtle)",
+    color: "var(--fg-tertiary)"
+  },
+  ".cm-lineNumbers .cm-gutterElement": { padding: "0 10px 0 4px" },
+  ".cm-foldGutter": { width: "14px" },
+  ".cm-foldGutter .cm-gutterElement": {
+    position: "relative",
+    display: "block",
+    width: "14px",
+    padding: "0"
+  },
+  ".cm-foldGutter .cm-gutterElement > span": {
+    position: "absolute",
+    top: "2px",
+    left: "0",
+    display: "inline-flex",
+    width: "14px",
+    height: "14px",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0",
+    color: "var(--fg-tertiary)",
+    lineHeight: "14px",
+    transition: "color 120ms ease"
+  },
+  '.cm-foldGutter .cm-gutterElement > span[title="Fold line"]': { transform: "translateY(-3px)" },
+  ".cm-foldGutter .cm-gutterElement > span:hover": { color: "var(--fg-secondary)" },
+  ".fractal-code-block__escape": { color: "var(--fg-secondary)" },
+  ".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(--purple-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(--success-default)" },
+  { tag: [import_highlight.tags.operator, import_highlight.tags.punctuation], color: "var(--fg-secondary)" },
+  { tag: import_highlight.tags.bracket, color: "var(--accent-default)" },
+  { 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" }
+]);
+var jsonSupport = (0, import_lang_json.json)();
+var JSON_LANGUAGE_NAMES = /* @__PURE__ */ new Set(["json", "jsonl", "ndjson", "geojson"]);
+var JSON_LINES_LANGUAGE_NAMES = /* @__PURE__ */ new Set(["jsonl", "ndjson"]);
+var JSON_LINES_PRETTY_PRINT_THRESHOLD = 160;
+var JSON_PROPERTY_PREFIX = /^(\s*"(?:\\.|[^"\\])*"\s*:\s*)/;
+function countVisualColumns(value) {
+  let columns = 0;
+  for (const character of value) columns += character === "	" ? 2 : 1;
+  return columns;
+}
+function getWrappedLineIndent(line) {
+  const leadingWhitespace = line.match(/^\s*/)?.[0] ?? "";
+  if (JSON_PROPERTY_PREFIX.test(line)) return Math.min(countVisualColumns(leadingWhitespace), 24);
+  return Math.min(countVisualColumns(leadingWhitespace) + 2, 12);
+}
+function buildWrappedLineIndentation(view) {
+  const decorations = [];
+  const decoratedLines = /* @__PURE__ */ new Set();
+  for (const visibleRange of view.visibleRanges) {
+    let position = visibleRange.from;
+    while (position <= visibleRange.to) {
+      const line = view.state.doc.lineAt(position);
+      if (!decoratedLines.has(line.from)) {
+        const indent = getWrappedLineIndent(line.text);
+        decorations.push(import_view.Decoration.line({
+          attributes: { style: `--fractal-code-wrap-indent: ${indent}ch` }
+        }).range(line.from));
+        decoratedLines.add(line.from);
+      }
+      if (line.to >= visibleRange.to) break;
+      position = line.to + 1;
+    }
+  }
+  return import_view.Decoration.set(decorations, true);
+}
+var wrappedLineIndentation = import_view.ViewPlugin.fromClass(class {
+  constructor(view) {
+    this.decorations = buildWrappedLineIndentation(view);
+  }
+  update(update) {
+    this.decorations = buildWrappedLineIndentation(update.view);
+  }
+}, {
+  decorations: (plugin) => plugin.decorations
+});
+var jsonEscapeMatcher = new import_view.MatchDecorator({
+  regexp: /\\(?:["\\/bfnrt]|u[0-9a-fA-F]{4})/g,
+  decoration: import_view.Decoration.mark({ class: "fractal-code-block__escape" })
+});
+var jsonEscapeHighlighting = import_view.ViewPlugin.fromClass(class {
+  constructor(view) {
+    this.decorations = jsonEscapeMatcher.createDeco(view);
+  }
+  update(update) {
+    this.decorations = jsonEscapeMatcher.updateDeco(update, this.decorations);
+  }
+}, {
+  decorations: (plugin) => plugin.decorations
+});
+function formatJsonLinesForDisplay(value) {
+  return value.split(/\r?\n/).map((line) => {
+    const firstContentIndex = line.search(/\S/);
+    if (firstContentIndex < 0 || line.length - firstContentIndex <= JSON_LINES_PRETTY_PRINT_THRESHOLD) return line;
+    const indentation = line.slice(0, firstContentIndex);
+    try {
+      const parsed = JSON.parse(line.slice(firstContentIndex));
+      if (parsed === null || typeof parsed !== "object") return line;
+      return JSON.stringify(parsed, null, 2).split("\n").map((formattedLine) => `${indentation}${formattedLine}`).join("\n");
+    } catch {
+      return line;
+    }
+  }).join("\n");
+}
+function findJsonContainerEnd(document2, start) {
+  const openingCharacter = document2[start];
+  if (openingCharacter !== "{" && openingCharacter !== "[") return null;
+  const closingCharacters = [];
+  let isInsideString = false;
+  let isEscaped = false;
+  for (let index = start; index < document2.length; index += 1) {
+    const character = document2[index];
+    if (isInsideString) {
+      if (isEscaped) {
+        isEscaped = false;
+      } else if (character === "\\") {
+        isEscaped = true;
+      } else if (character === '"') {
+        isInsideString = false;
+      }
+      continue;
+    }
+    if (character === '"') {
+      isInsideString = true;
+    } else if (character === "{") {
+      closingCharacters.push("}");
+    } else if (character === "[") {
+      closingCharacters.push("]");
+    } else if (character === "}" || character === "]") {
+      if (closingCharacters.pop() !== character) return null;
+      if (closingCharacters.length === 0) return index;
+    }
+  }
+  return null;
+}
+var jsonLinesFoldSupport = import_language.foldService.of((state, lineStart, lineEnd) => {
+  const line = state.doc.sliceString(lineStart, lineEnd);
+  const firstContentIndex = line.search(/\S/);
+  if (firstContentIndex < 0) return null;
+  const containerStart = lineStart + firstContentIndex;
+  const openingCharacter = line[firstContentIndex];
+  if (openingCharacter !== "{" && openingCharacter !== "[") return null;
+  const document2 = state.doc.toString();
+  const containerEnd = findJsonContainerEnd(document2, containerStart);
+  if (containerEnd === null || containerEnd - containerStart < 2) return null;
+  try {
+    const parsed = JSON.parse(document2.slice(containerStart, containerEnd + 1));
+    if (parsed === null || typeof parsed !== "object") return null;
+  } catch {
+    return null;
+  }
+  return {
+    from: containerStart + 1,
+    to: containerEnd
+  };
+});
+function resolveLanguage(language, fileName) {
+  const normalized = language?.trim().toLowerCase();
+  const extension = fileName?.split(/[?#]/, 1)[0].split(".").pop()?.toLowerCase();
+  if (normalized && JSON_LANGUAGE_NAMES.has(normalized) || extension && JSON_LANGUAGE_NAMES.has(extension)) {
+    const isJsonLines = Boolean(
+      normalized && JSON_LINES_LANGUAGE_NAMES.has(normalized) || extension && JSON_LINES_LANGUAGE_NAMES.has(extension)
+    );
+    return { label: isJsonLines ? "JSONL" : "JSON", support: jsonSupport, isJsonLines };
+  }
+  if (normalized && !["text", "txt", "plaintext", "plain"].includes(normalized)) {
+    return { label: language?.trim(), support: null, isJsonLines: false };
+  }
+  return { support: null, isJsonLines: false };
+}
+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 resolvedLanguage = (0, import_react.useMemo)(() => resolveLanguage(language, fileName), [fileName, language]);
+  const displayValue = (0, import_react.useMemo)(
+    () => !editable && resolvedLanguage.isJsonLines ? formatJsonLinesForDisplay(value) : value,
+    [editable, resolvedLanguage.isJsonLines, value]
+  );
+  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),
+    ...resolvedLanguage.support ? [resolvedLanguage.support] : [],
+    ...resolvedLanguage.support ? [jsonEscapeHighlighting] : [],
+    ...resolvedLanguage.isJsonLines ? [jsonLinesFoldSupport] : [],
+    ...lineNumbers ? [(0, import_language.foldGutter)(), (0, import_view.lineNumbers)()] : [],
+    ...wrap ? [import_view.EditorView.lineWrapping, wrappedLineIndentation] : []
+  ], [lineNumbers, resolvedLanguage.isJsonLines, resolvedLanguage.support, wrap]);
+  const languageLabel = resolvedLanguage.label;
+  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: displayValue,
+            editable,
+            readOnly: !editable,
+            onChange,
+            extensions,
+            theme: "none",
+            basicSetup: {
+              lineNumbers: false,
+              foldGutter: false,
+              drawSelection: editable,
+              highlightActiveLine: editable,
+              highlightActiveLineGutter: editable,
+              highlightSelectionMatches: 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_runtime3.jsx)(import_fractal_icons2.ChevronRight, { "aria-hidden": "true", size: 14 }),
+  className,
+  ...props
+}) {
+  if (items.length === 0) return null;
+  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_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);
+  }) }) });
+}
+
+// src/components/Card/Card.tsx
+var React2 = __toESM(require("react"), 1);
+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_runtime2.jsx)("div", { ref, className: cn("fractal-card", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, "data-fractal-border-surface": "surface-1", className: cn("fractal-card", className), ...props })
 );
 Card.displayName = "Card";
 var CardHeader = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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_runtime2.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_runtime2.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_runtime2.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_runtime2.jsxs)("div", { ref, className: cn("fractal-feature-card", className), ...props, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fractal-feature-card__icon", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "fractal-feature-card__title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsxs)(
+  ({ name, sessionCount, selected, className, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       ref,
@@ -289,11 +684,11 @@ var FolderCard = React2.forwardRef(
       className: cn("fractal-folder-card", selected && "fractal-folder-card--selected", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "fractal-folder-card__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fractal_icons.Folder, { size: 16, className: "fractal-folder-card__icon", "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("div", { className: "fractal-folder-card__footer", children: /* @__PURE__ */ (0, import_jsx_runtime2.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"
@@ -306,7 +701,7 @@ FolderCard.displayName = "FolderCard";
 
 // src/components/PromptCard/PromptCard.tsx
 var React3 = __toESM(require("react"), 1);
-var import_jsx_runtime3 = 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(
   ({
@@ -327,7 +722,7 @@ var PromptCard = React3.forwardRef(
         onPromptSelect?.(prompt ?? titleToPrompt(title));
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "button",
       {
         ref,
@@ -342,8 +737,8 @@ var PromptCard = React3.forwardRef(
         onClick: handleClick,
         ...props,
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fractal-prompt-card__icon", "aria-hidden": "true", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.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 })
         ]
       }
     );
@@ -351,7 +746,7 @@ var PromptCard = React3.forwardRef(
 );
 PromptCard.displayName = "PromptCard";
 var PromptGrid = React3.forwardRef(
-  ({ compact, padded, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  ({ compact, padded, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       ref,
@@ -369,28 +764,355 @@ PromptGrid.displayName = "PromptGrid";
 
 // src/components/Input/Input.tsx
 var React4 = __toESM(require("react"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Input = React4.forwardRef(
-  ({ className, type, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "input",
+  ({ className, type, controlSize = "lg", fieldLabel, id, placeholder, ...props }, ref) => {
+    const generatedId = React4.useId();
+    const fieldId = id ?? generatedId;
+    const floatingLabel = type === "search" ? void 0 : fieldLabel;
+    const input = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "input",
+      {
+        type,
+        ref,
+        id: floatingLabel ? fieldId : id,
+        placeholder: floatingLabel ? placeholder || " " : placeholder,
+        "data-control-size": controlSize,
+        className: cn("fractal-control", "fractal-input", className),
+        ...props,
+        "aria-label": props["aria-label"] ?? (type === "search" && !props["aria-labelledby"] ? fieldLabel ?? "Search" : void 0)
+      }
+    );
+    if (!floatingLabel) return input;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        className: "fractal-floating-field",
+        "data-control-size": controlSize,
+        "data-always-float": ["date", "datetime-local", "time", "month", "week", "color", "file", "range"].includes(type ?? "") || void 0,
+        children: [
+          input,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/TableSearch/TableSearch.tsx
+var React5 = __toESM(require("react"), 1);
+var import_fractal_icons4 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var TableSearch = React5.forwardRef(
+  ({
+    searchType = "text",
+    controlSize = "lg",
+    className,
+    inputClassName,
+    placeholder,
+    title,
+    ...props
+  }, ref) => {
+    const isGlob = searchType === "glob";
+    const SearchIcon = isGlob ? import_fractal_icons4.MagnifyingGlassLines : import_fractal_icons4.MagnifyingGlass;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: cn("fractal-table-search", className),
+        "data-search-type": searchType,
+        "data-control-size": controlSize,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIcon, { className: "fractal-table-search__icon", size: 17, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            Input,
+            {
+              ...props,
+              controlSize,
+              ref,
+              type: "search",
+              className: cn("fractal-table-search__input", inputClassName),
+              placeholder: placeholder ?? (isGlob ? "Glob search \u2014 use *, ?, or [a-z]" : "Search"),
+              title: title ?? (isGlob ? "Glob pattern: *, **, ?, [abc], [a-z], and [!abc]" : void 0)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TableSearch.displayName = "TableSearch";
+
+// src/components/NumberInput/NumberInput.tsx
+var React6 = __toESM(require("react"), 1);
+var import_fractal_icons5 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function NumberInput({
+  unit,
+  controlSize = "lg",
+  className,
+  value,
+  defaultValue,
+  disabled,
+  readOnly,
+  min,
+  max,
+  ...props
+}) {
+  const inputRef = React6.useRef(null);
+  const numericValue = Number(value ?? defaultValue);
+  const characterCount = Math.max(String(value ?? defaultValue ?? "").length, 1);
+  const controlLabel = typeof props["aria-label"] === "string" ? props["aria-label"] : props.fieldLabel ?? "value";
+  const decrementDisabled = disabled || readOnly || Number.isFinite(numericValue) && min !== void 0 && numericValue <= Number(min);
+  const incrementDisabled = disabled || readOnly || Number.isFinite(numericValue) && max !== void 0 && numericValue >= Number(max);
+  const changeByStep = (direction) => {
+    const input = inputRef.current;
+    if (!input) return;
+    if (direction === -1) input.stepDown();
+    else input.stepUp();
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-control-size": controlSize, className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Input,
+      {
+        ref: inputRef,
+        controlSize,
+        type: "number",
+        value,
+        defaultValue,
+        disabled,
+        readOnly,
+        min,
+        max,
+        ...props
+      }
+    ),
+    unit && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "span",
+      {
+        className: "fractal-number-input-unit",
+        style: { left: `calc(var(--control-padding-inline) + ${characterCount}ch)` },
+        "aria-hidden": "true",
+        children: unit
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "fractal-number-input-controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "fractal-number-input-step",
+          "aria-label": `Decrease ${controlLabel}`,
+          disabled: decrementDisabled,
+          onClick: () => changeByStep(-1),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_fractal_icons5.Minus, { "aria-hidden": "true", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "fractal-number-input-step",
+          "aria-label": `Increase ${controlLabel}`,
+          disabled: incrementDisabled,
+          onClick: () => changeByStep(1),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_fractal_icons5.Plus, { "aria-hidden": "true", size: 16 })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/Slider/Slider.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Slider(props) {
+  const {
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    className,
+    showValues = true,
+    formatValue = (value) => value,
+    knobs = 1
+  } = props;
+  const span = Math.max(max - min, 1);
+  const rawValues = knobs === 2 ? props.value : [props.value];
+  const firstValue = clamp(rawValues[0], min, max);
+  const secondValue = knobs === 2 ? clamp(rawValues[1], firstValue, max) : firstValue;
+  const selectionStart = knobs === 2 ? firstValue : min;
+  const selectionEnd = secondValue;
+  const selectionStartPercent = (selectionStart - min) / span * 100;
+  const selectionEndPercent = (selectionEnd - min) / span * 100;
+  const changeSingleValue = (value) => {
+    ;
+    props.onValueChange(clamp(value, min, max));
+  };
+  const changeRangeValue = (nextLower, nextUpper) => {
+    ;
+    props.onValueChange([
+      clamp(nextLower, min, nextUpper),
+      clamp(nextUpper, nextLower, max)
+    ]);
+  };
+  const getKeyboardValue = (event, value) => {
+    const pageStep = step * 10;
+    const adjustments = {
+      ArrowDown: -step,
+      ArrowLeft: -step,
+      ArrowRight: step,
+      ArrowUp: step,
+      PageDown: -pageStep,
+      PageUp: pageStep
+    };
+    if (event.key === "Home") return min;
+    if (event.key === "End") return max;
+    if (!(event.key in adjustments)) return null;
+    return value + adjustments[event.key];
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
     {
-      type,
-      ref,
-      className: cn("fractal-input", className),
-      ...props
+      className: cn("fractal-slider", disabled && "fractal-slider--disabled", className),
+      "data-disabled": disabled || void 0,
+      "data-knobs": knobs,
+      children: [
+        showValues && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fractal-slider-values", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("output", { children: formatValue(firstValue) }),
+          knobs === 2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("output", { children: formatValue(secondValue) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            className: "fractal-slider-control",
+            style: {
+              "--fractal-slider-selection-start": `${selectionStartPercent}%`,
+              "--fractal-slider-selection-end": `${selectionEndPercent}%`
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fractal-slider-track", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fractal-slider-selection", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "input",
+                {
+                  "aria-label": knobs === 2 ? props.lowerAriaLabel ?? "Lower value" : props.ariaLabel ?? "Slider value",
+                  disabled,
+                  max,
+                  min,
+                  onChange: (event) => {
+                    const nextValue = event.currentTarget.valueAsNumber;
+                    if (knobs === 2) changeRangeValue(Math.min(nextValue, secondValue), secondValue);
+                    else changeSingleValue(nextValue);
+                  },
+                  onKeyDown: (event) => {
+                    const nextValue = getKeyboardValue(event, firstValue);
+                    if (nextValue === null) return;
+                    event.preventDefault();
+                    if (knobs === 2) changeRangeValue(Math.min(nextValue, secondValue), secondValue);
+                    else changeSingleValue(nextValue);
+                  },
+                  step,
+                  type: "range",
+                  value: firstValue
+                }
+              ),
+              knobs === 2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "input",
+                {
+                  "aria-label": props.upperAriaLabel ?? "Upper value",
+                  disabled,
+                  max,
+                  min,
+                  onChange: (event) => {
+                    const nextValue = event.currentTarget.valueAsNumber;
+                    changeRangeValue(firstValue, Math.max(nextValue, firstValue));
+                  },
+                  onKeyDown: (event) => {
+                    const nextValue = getKeyboardValue(event, secondValue);
+                    if (nextValue === null) return;
+                    event.preventDefault();
+                    changeRangeValue(firstValue, Math.max(nextValue, firstValue));
+                  },
+                  step,
+                  type: "range",
+                  value: secondValue
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
-  )
+  );
+}
+function clamp(value, minimum, maximum) {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+
+// src/components/PasswordInput/PasswordInput.tsx
+var React7 = __toESM(require("react"), 1);
+var import_fractal_icons6 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PasswordInput = React7.forwardRef(
+  ({
+    className,
+    controlSize = "lg",
+    disabled,
+    showPasswordLabel = "Show password",
+    hidePasswordLabel = "Hide password",
+    ...props
+  }, ref) => {
+    const [passwordVisible, setPasswordVisible] = React7.useState(false);
+    const toggleLabel = passwordVisible ? hidePasswordLabel : showPasswordLabel;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        className: cn("fractal-password-input", className),
+        "data-control-size": controlSize,
+        "data-password-visible": passwordVisible ? "" : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            Input,
+            {
+              ...props,
+              controlSize,
+              ref,
+              className: "fractal-password-input-field",
+              disabled,
+              type: passwordVisible ? "text" : "password"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "fractal-password-input-toggle",
+              "aria-label": toggleLabel,
+              "aria-pressed": passwordVisible,
+              disabled,
+              title: toggleLabel,
+              onClick: () => setPasswordVisible((visible) => !visible),
+              children: passwordVisible ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_fractal_icons6.EyeSlash, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_fractal_icons6.Eye, { "aria-hidden": "true", size: 18 })
+            }
+          )
+        ]
+      }
+    );
+  }
 );
-Input.displayName = "Input";
+PasswordInput.displayName = "PasswordInput";
 
 // src/components/Label/Label.tsx
-var React5 = __toESM(require("react"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Label = React5.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var React8 = __toESM(require("react"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Label = React8.forwardRef(
+  ({ className, controlSize = "lg", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "label",
     {
       ref,
+      "data-control-size": controlSize,
       className: cn("fractal-label", className),
       ...props
     }
@@ -399,44 +1121,147 @@ var Label = React5.forwardRef(
 Label.displayName = "Label";
 
 // src/components/Alert/Alert.tsx
-var React6 = __toESM(require("react"), 1);
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var React9 = __toESM(require("react"), 1);
+var import_fractal_icons7 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var defaultIcons = {
-  default: "\u2139",
-  info: "\u2139",
-  success: "\u2713",
-  warning: "\u26A0",
-  error: "\u2715"
+  default: import_fractal_icons7.CircleInfo,
+  info: import_fractal_icons7.CircleInfo,
+  success: import_fractal_icons7.CircleCheck,
+  warning: import_fractal_icons7.Warning,
+  error: import_fractal_icons7.CircleClose
+};
+var Alert = React9.forwardRef(
+  ({ className, variant = "default", icon, children, ...props }, ref) => {
+    const DefaultIcon = defaultIcons[variant];
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn("fractal-alert", `fractal-alert--${variant}`, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DefaultIcon, { size: 18 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fractal-alert-content", children })
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+var AlertTitle = React9.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h5", { ref, className: cn("fractal-alert-title", className), ...props })
+);
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React9.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref, className: cn("fractal-alert-description", className), ...props })
+);
+AlertDescription.displayName = "AlertDescription";
+
+// src/components/Toast/Toast.tsx
+var React10 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+var import_fractal_icons8 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var defaultIcons2 = {
+  default: import_fractal_icons8.CircleInfo,
+  info: import_fractal_icons8.CircleInfo,
+  success: import_fractal_icons8.CircleCheck,
+  warning: import_fractal_icons8.Warning,
+  error: import_fractal_icons8.CircleClose
 };
-var Alert = React6.forwardRef(
-  ({ className, variant = "default", icon, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+var Toast = React10.forwardRef(function Toast2({
+  action,
+  children,
+  className,
+  dismissLabel = "Dismiss notification",
+  duration,
+  icon,
+  onBlurCapture,
+  onDismiss,
+  onFocusCapture,
+  onPointerEnter,
+  onPointerLeave,
+  role,
+  variant = "default",
+  ...props
+}, ref) {
+  const [paused, setPaused] = React10.useState(false);
+  const dismissRef = React10.useRef(onDismiss);
+  const DefaultIcon = defaultIcons2[variant];
+  const resolvedDuration = duration === void 0 ? variant === "error" ? null : 5e3 : duration;
+  React10.useEffect(() => {
+    dismissRef.current = onDismiss;
+  }, [onDismiss]);
+  React10.useEffect(() => {
+    if (!dismissRef.current || paused || resolvedDuration === null || resolvedDuration <= 0) return;
+    const timeout = window.setTimeout(() => dismissRef.current?.(), resolvedDuration);
+    return () => window.clearTimeout(timeout);
+  }, [paused, resolvedDuration]);
+  const announcementRole = role ?? (variant === "error" ? "alert" : "status");
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       ref,
-      role: "alert",
-      className: cn("fractal-alert", `fractal-alert--${variant}`, className),
+      "aria-atomic": "true",
+      "aria-live": announcementRole === "alert" ? "assertive" : "polite",
+      className: cn("fractal-toast", `fractal-toast--${variant}`, className),
+      role: announcementRole,
+      onBlurCapture: (event) => {
+        onBlurCapture?.(event);
+        if (!event.currentTarget.contains(event.relatedTarget)) setPaused(false);
+      },
+      onFocusCapture: (event) => {
+        onFocusCapture?.(event);
+        setPaused(true);
+      },
+      onPointerEnter: (event) => {
+        onPointerEnter?.(event);
+        setPaused(true);
+      },
+      onPointerLeave: (event) => {
+        onPointerLeave?.(event);
+        setPaused(false);
+      },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? defaultIcons[variant] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fractal-alert-content", children })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": "true", className: "fractal-toast__icon", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DefaultIcon, { size: 18 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-toast__content", children }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-toast__action", children: action }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            "aria-label": dismissLabel,
+            className: "fractal-toast__dismiss",
+            onClick: onDismiss,
+            type: "button",
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fractal_icons8.Close, { "aria-hidden": "true", size: 14 })
+          }
+        )
       ]
     }
-  )
-);
-Alert.displayName = "Alert";
-var AlertTitle = React6.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h5", { ref, className: cn("fractal-alert-title", className), ...props })
-);
-AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React6.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: cn("fractal-alert-description", className), ...props })
-);
-AlertDescription.displayName = "AlertDescription";
+  );
+});
+var ToastViewport = React10.forwardRef(function ToastViewport2({ children, className, portal = true, position = "top-center", ...props }, ref) {
+  const viewport = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("fractal-toast-viewport", `fractal-toast-viewport--${position}`, className),
+      "data-position": position,
+      ...props,
+      children
+    }
+  );
+  if (!portal || typeof document === "undefined") return viewport;
+  return (0, import_react_dom.createPortal)(viewport, document.body);
+});
 
 // src/components/Toggle/Toggle.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Toggle({ checked, onChange, label, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "button",
     {
       type: "button",
@@ -445,18 +1270,19 @@ function Toggle({ checked, onChange, label, className }) {
       className: cn("fractal-toggle", className),
       onClick: () => onChange(!checked),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fractal-toggle-label", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-toggle-label", children: label })
       ]
     }
   );
 }
 
 // src/components/Modal/Modal.tsx
-var import_react_dom = require("react-dom");
-
+var React11 = __toESM(require("react"), 1);
+var import_react_dom2 = 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) {
@@ -489,9 +1315,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++;
@@ -505,27 +1331,99 @@ function useEscapeDismiss(priority, handler, enabled = true) {
   }, [priority, enabled]);
 }
 
+// src/components/UILoader/UILoader.tsx
+var import_react3 = require("react");
+var import_jsx_runtime15 = 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_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_runtime15.jsx)(
+    "span",
+    {
+      "aria-hidden": ariaHidden || void 0,
+      "aria-label": ariaHidden ? void 0 : label,
+      className: cn("fractal-ui-loader", `fractal-ui-loader--${tone}`, className),
+      role: ariaHidden ? void 0 : "status",
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("clipPath", { id: clipId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: LEFT }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: CENTER }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: RIGHT })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: CENTER, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: RIGHT, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: LEFT, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime8 = require("react/jsx-runtime");
-var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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, size = "sm", className }) {
-  useEscapeDismiss(80, onClose, open && !noClose);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.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 }) {
+  const [bodyScrolled, setBodyScrolled] = React11.useState(false);
+  useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
+  React11.useEffect(() => {
+    if (open) setBodyScrolled(false);
+  }, [open]);
   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_runtime8.jsx)("div", { className: "fractal-modal-overlay", onClick: noClose ? void 0 : onClose, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
-        className: cn("fractal-modal-panel", sizeClass, accentClass, className),
+        className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "fractal-modal-title-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
-            !noClose && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: onClose, title: "Close", className: "fractal-modal-close", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {}) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("fractal-modal-body", size === "lg" && "fractal-modal-body--lg"), children }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fractal-modal-footer", children: footer })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            "div",
+            {
+              className: cn(
+                "fractal-modal-title-row",
+                scrollable && "fractal-modal-title-row--scrollable",
+                scrollable && bodyScrolled && "fractal-modal-title-row--scrolled"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
+                !noClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CloseIcon, {}) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "div",
+            {
+              "aria-busy": loading || void 0,
+              className: cn(
+                "fractal-modal-body",
+                size === "lg" && "fractal-modal-body--lg",
+                loading && "fractal-modal-body--loading",
+                scrollable && "fractal-modal-body--scrollable"
+              ),
+              onScroll: scrollable ? (event) => setBodyScrolled(event.currentTarget.scrollTop > 0) : void 0,
+              children: loading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UILoader, { label: loadingLabel }) : children
+            }
+          ),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
         ]
       }
     ) }),
@@ -533,94 +1431,441 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
   );
 }
 
+// src/components/TableLayout/TableOverflowMenu.tsx
+var import_react4 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_fractal_icons9 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function TableOverflowMenu({ items, label, disabled, onSelect }) {
+  const id = (0, import_react4.useId)();
+  const trigger = (0, import_react4.useRef)(null);
+  const panel = (0, import_react4.useRef)(null);
+  const initialLast = (0, import_react4.useRef)(false);
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [position, setPosition] = (0, import_react4.useState)({ top: 0, left: 0 });
+  const buttons = () => [...panel.current?.querySelectorAll("button:not(:disabled)") ?? []];
+  const close = (restore = true) => {
+    setOpen(false);
+    if (restore) trigger.current?.focus({ preventScroll: true });
+  };
+  useEscapeDismiss(100, () => close(), open);
+  (0, import_react4.useLayoutEffect)(() => {
+    if (!open || !trigger.current || !panel.current) return;
+    const place = () => {
+      const anchor = trigger.current.getBoundingClientRect();
+      const menu = panel.current.getBoundingClientRect();
+      const above = window.innerHeight - anchor.bottom < menu.height + 8 && anchor.top > window.innerHeight - anchor.bottom;
+      setPosition({
+        top: Math.max(8, Math.min(above ? anchor.top - menu.height - 4 : anchor.bottom + 4, window.innerHeight - menu.height - 8)),
+        left: Math.max(8, Math.min(anchor.right - menu.width, window.innerWidth - menu.width - 8))
+      });
+    };
+    place();
+    const enabled = buttons();
+    (initialLast.current ? enabled[enabled.length - 1] : enabled[0])?.focus({ preventScroll: true });
+    if (enabled.length === 0) panel.current.focus({ preventScroll: true });
+    const outside = (event) => {
+      if (!panel.current?.contains(event.target) && !trigger.current?.contains(event.target)) setOpen(false);
+    };
+    const scroll = (event) => {
+      if (!panel.current?.contains(event.target)) setOpen(false);
+    };
+    const observer = new ResizeObserver(place);
+    observer.observe(panel.current);
+    document.addEventListener("pointerdown", outside);
+    window.addEventListener("scroll", scroll, true);
+    window.addEventListener("resize", place);
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("pointerdown", outside);
+      window.removeEventListener("scroll", scroll, true);
+      window.removeEventListener("resize", place);
+    };
+  }, [open]);
+  (0, import_react4.useLayoutEffect)(() => {
+    if (disabled || items.length === 0) setOpen(false);
+  }, [disabled, items.length]);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fractal-table-overflow-trigger", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Button,
+      {
+        ref: trigger,
+        buttonType: "ghost",
+        controlSize: "sm",
+        hasIconOnly: true,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons9.Ellipsis, { "aria-hidden": true }),
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? id : void 0,
+        disabled,
+        onClick: () => {
+          initialLast.current = false;
+          setOpen(!open);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            initialLast.current = event.key === "ArrowUp";
+            setOpen(true);
+          }
+        }
+      }
+    ),
+    open && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        ref: panel,
+        id,
+        role: "menu",
+        tabIndex: -1,
+        "aria-label": label,
+        className: "fractal-table-overflow-menu",
+        style: position,
+        onClick: (event) => event.stopPropagation(),
+        onKeyDown: (event) => {
+          event.stopPropagation();
+          const enabled = buttons(), index = enabled.indexOf(document.activeElement);
+          if (event.key === "Escape") {
+            event.preventDefault();
+            close();
+          } else if (event.key === "Tab") {
+            close();
+          } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+            event.preventDefault();
+            const next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + enabled.length) % enabled.length;
+            enabled[next]?.focus();
+          } else if (event.key.length === 1 && /\S/.test(event.key)) {
+            const ordered = [...enabled.slice(index + 1), ...enabled.slice(0, index + 1)];
+            ordered.find((button) => button.textContent?.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()))?.focus();
+          }
+        },
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            tabIndex: -1,
+            disabled: item.disabled,
+            onClick: () => {
+              onSelect(item.value);
+              close();
+            },
+            children: [
+              item.icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": "true", children: item.icon }),
+              item.label
+            ]
+          },
+          item.value
+        ))
+      }
+    ), document.body)
+  ] });
+}
+
+// src/components/TableLayout/TableLayout.tsx
+var import_react5 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var length = (value) => typeof value === "number" ? `${value}px` : value;
+function columnStyle(column) {
+  return {
+    width: column.width,
+    "--table-column-width": !column.width || column.width.includes("%") ? void 0 : `calc(${column.width} - 1px)`,
+    "--table-column-min": length(column.minWidth),
+    "--table-column-max": length(column.maxWidth)
+  };
+}
+function useOverflow() {
+  const ref = (0, import_react5.useRef)(null);
+  const [overflow, setOverflow] = (0, import_react5.useState)(false);
+  (0, import_react5.useLayoutEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => setOverflow(el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1);
+    const resize = new ResizeObserver(measure);
+    const observe = () => {
+      resize.disconnect();
+      resize.observe(el);
+      for (const child of el.children) resize.observe(child);
+      measure();
+    };
+    const mutation = new MutationObserver(observe);
+    mutation.observe(el, { childList: true, subtree: true, characterData: true });
+    observe();
+    return () => {
+      resize.disconnect();
+      mutation.disconnect();
+    };
+  }, []);
+  return { ref, overflow };
+}
+function TableViewport({ children, maxHeight, label }) {
+  const { ref, overflow } = useOverflow();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: "fractal-table-viewport", style: { maxHeight }, tabIndex: overflow ? 0 : void 0, role: overflow ? "region" : void 0, "aria-label": overflow ? `${label}, scrollable table` : void 0, children });
+}
+function TableCellContent({ children, label }) {
+  const { ref, overflow } = useOverflow();
+  (0, import_react5.useLayoutEffect)(() => {
+    const cell = ref.current;
+    if (!cell) return;
+    const wheel = (event) => {
+      if (event.defaultPrevented || event.ctrlKey || !event.cancelable || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return;
+      const range = cell.scrollWidth - cell.clientWidth;
+      if (range <= 1) return;
+      const rtl = getComputedStyle(cell).direction === "rtl";
+      const left = rtl ? -range : 0, right = rtl ? 0 : range;
+      if (event.deltaX > 0 ? cell.scrollLeft < right - 1 : cell.scrollLeft > left + 1) return;
+      const table = cell.closest(".fractal-table-viewport");
+      if (!table) return;
+      const tableRange = table.scrollWidth - table.clientWidth;
+      const tableRtl = getComputedStyle(table).direction === "rtl";
+      const tableLeft = tableRtl ? -tableRange : 0, tableRight = tableRtl ? 0 : tableRange;
+      if (event.deltaX > 0 ? table.scrollLeft >= tableRight - 1 : table.scrollLeft <= tableLeft + 1) return;
+      const unit = event.deltaMode === 1 ? parseFloat(getComputedStyle(cell).lineHeight) || 16 : event.deltaMode === 2 ? table.clientWidth : 1;
+      event.preventDefault();
+      table.scrollLeft += event.deltaX * unit;
+    };
+    cell.addEventListener("wheel", wheel, { passive: false });
+    return () => cell.removeEventListener("wheel", wheel);
+  }, [ref]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      ref,
+      className: "fractal-table-cell-scroll",
+      "data-overflow": overflow || void 0,
+      tabIndex: overflow ? 0 : void 0,
+      role: overflow ? "region" : void 0,
+      "aria-label": overflow ? `${label}, scroll horizontally for full content` : void 0,
+      onKeyDown: (event) => {
+        if (!overflow || event.target !== event.currentTarget) return;
+        if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
+          event.preventDefault();
+          event.stopPropagation();
+          const el = event.currentTarget;
+          if (event.key === "ArrowLeft" || event.key === "ArrowRight") el.scrollBy({ left: event.key === "ArrowLeft" ? -40 : 40 });
+          else el.scrollLeft = event.key === "Home" ? 0 : el.scrollWidth * (getComputedStyle(el).direction === "rtl" ? -1 : 1);
+        } else if (event.key === " " || event.key === "Enter") event.stopPropagation();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fractal-table-cell-content", children })
+    }
+  );
+}
+
 // src/components/DataTable/DataTable.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fractal-datatable-surface", children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fractal-datatable-header", children: header }),
-    data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("table", { className: "fractal-datatable-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function DataTable({ columns, data, emptyMessage, header, size = "md", className, overflowMenu, layout = "fill", stickyHeader = false, stickyFirstColumn = false, maxHeight, "aria-label": ariaLabel = "Data table" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("fractal-table-layout", "fractal-datatable", `fractal-datatable--${size}`, className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fractal-datatable-surface", children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fractal-datatable-header", children: header }),
+    data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableViewport, { maxHeight, label: ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-datatable-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("tr", { className: "fractal-datatable-thead-row", children: [
+        columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("th", { scope: "col", className: "fractal-datatable-th", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableCellContent, { label: `${col.header} column`, children: col.header }) }, col.key)),
+        overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("th", { scope: "col", "aria-label": "Row actions", className: "fractal-datatable-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         "tr",
         {
           className: "fractal-datatable-row",
-          children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
+          children: [
+            columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { className: "fractal-datatable-td", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }) }, col.key)),
+            overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { className: "fractal-datatable-td fractal-table-overflow-cell", "data-pinned-column": "overflow", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableOverflowMenu, { items: overflowMenu.items(row, rowIndex), label: overflowMenu.getLabel?.(row, rowIndex) ?? `Actions for row ${rowIndex + 1}`, disabled: overflowMenu.isDisabled?.(row, rowIndex), onSelect: (value) => overflowMenu.onSelect(value, row, rowIndex) }) })
+          ]
         },
         rowIndex
       )) })
-    ] })
+    ] }) })
   ] }) });
 }
 
 // src/components/Dropdown/Dropdown.tsx
-var React7 = __toESM(require("react"), 1);
-var import_fractal_icons2 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var MARGIN = 4;
+var React12 = __toESM(require("react"), 1);
+var import_fractal_icons10 = require("@mirror-physics/fractal-icons");
+
+// src/components/Dropdown/position.ts
+function positionDropdown(trigger, panel, bounds, direction, align) {
+  const gap = 4;
+  const width = Math.min(panel.width, Math.max(0, bounds.right - bounds.left));
+  let maxHeight = Math.max(0, bounds.bottom - bounds.top);
+  let left;
+  let top;
+  if (direction === "left" || direction === "right") {
+    const after = bounds.right - trigger.right - gap;
+    const before = trigger.left - bounds.left - gap;
+    let placeRight = direction === "right";
+    if (width > (placeRight ? after : before) && (placeRight ? before > after : after > before)) {
+      placeRight = !placeRight;
+    }
+    left = placeRight ? trigger.right + gap : trigger.left - width - gap;
+    top = trigger.top;
+  } else {
+    const below = Math.max(0, bounds.bottom - trigger.bottom - gap);
+    const above = Math.max(0, trigger.top - bounds.top - gap);
+    let placeAbove = direction === "up";
+    if (panel.height > (placeAbove ? above : below) && (placeAbove ? below > above : above > below)) {
+      placeAbove = !placeAbove;
+    }
+    maxHeight = Math.min(maxHeight, placeAbove ? above : below);
+    top = placeAbove ? trigger.top - Math.min(panel.height, maxHeight) - gap : trigger.bottom + gap;
+    left = align === "right" ? trigger.right - width : trigger.left;
+  }
+  const height = Math.min(panel.height, maxHeight);
+  return {
+    left: Math.max(bounds.left, Math.min(left, bounds.right - width)),
+    top: Math.max(bounds.top, Math.min(top, bounds.bottom - height)),
+    maxHeight
+  };
+}
+
+// src/components/Dropdown/Dropdown.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Dropdown({
   items,
-  selectedValue,
+  selectedValue = "",
   onSelect,
-  triggerLabel = "Options",
+  multiple = false,
+  selectedValues = [],
+  onSelectionChange,
+  searchable = false,
+  searchPlaceholder = "Find an option",
+  emptyMessage = "No matching options.",
+  triggerLabel,
+  fieldLabel,
   direction = "down",
   align = "left",
+  maxHeight = 320,
+  collisionPadding = 8,
+  triggerOrientation = "horizontal",
   triggerContent,
   label,
+  iconOnly = false,
   noChevron = false,
-  size = "md",
+  size: sizeAlias = "lg",
+  controlSize,
+  triggerId,
   triggerVariant = "outline",
   className,
   triggerClassName,
   panelClassName,
-  closeOnSelect = true
+  closeOnSelect = true,
+  disabled = false
 }) {
-  const [open, setOpen] = React7.useState(false);
-  const triggerRef = React7.useRef(null);
-  const panelRef = React7.useRef(null);
-  const [panelStyle, setPanelStyle] = React7.useState({});
-  const visibleItems = items.filter(
+  const [query, setQuery] = React12.useState("");
+  const searchRef = React12.useRef(null);
+  const accessibleLabel = triggerLabel ?? fieldLabel ?? "Options";
+  const size = controlSize ?? sizeAlias;
+  const [open, setOpen] = React12.useState(false);
+  React12.useEffect(() => {
+    if (!open) setQuery("");
+  }, [open]);
+  const rootRef = React12.useRef(null);
+  const menuId = React12.useId();
+  const focusOnOpen = React12.useRef(false);
+  const triggerRef = React12.useRef(null);
+  const panelRef = React12.useRef(null);
+  const [panelStyle, setPanelStyle] = React12.useState({});
+  const renderableItems = items.filter(
     (item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
   );
-  if (visibleItems.length === 0) return null;
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  let groupTitle = "";
+  const matching = new Set(renderableItems.filter((item) => {
+    if (item.kind === "header") {
+      groupTitle = String(item.description ?? "");
+      return false;
+    }
+    return `${groupTitle} ${typeof item.description === "string" ? item.description : item.value}`.toLocaleLowerCase().includes(normalizedQuery);
+  }).map((item) => item.value));
+  const visibleItems = renderableItems.filter((item, index) => {
+    if (item.kind !== "header") return matching.has(item.value);
+    const nextHeader = renderableItems.findIndex((next, i) => i > index && next.kind === "header");
+    return renderableItems.slice(index + 1, nextHeader < 0 ? void 0 : nextHeader).some((next) => matching.has(next.value));
+  });
   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_icons2.ChevronUp : import_fractal_icons2.ChevronDown;
-  React7.useLayoutEffect(() => {
-    if (!open || !triggerRef.current || !panelRef.current) return;
-    const triggerRect = triggerRef.current.getBoundingClientRect();
-    const panelRect = panelRef.current.getBoundingClientRect();
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const spaceBelow = vh - triggerRect.bottom - MARGIN;
-    const spaceAbove = triggerRect.top - MARGIN;
-    let placeAbove = isUp;
-    if (placeAbove && panelRect.height > spaceAbove && spaceBelow > spaceAbove) {
-      placeAbove = false;
-    } else if (!placeAbove && panelRect.height > spaceBelow && spaceAbove > spaceBelow) {
-      placeAbove = true;
-    }
-    const top = placeAbove ? -(panelRect.height + MARGIN) : triggerRect.height + MARGIN;
-    let left;
-    let right;
-    if (align === "right") {
-      right = 0;
-      const panelLeft = triggerRect.right - panelRect.width;
-      if (panelLeft < 0) {
-        right = void 0;
-        left = 0;
+  const ChevronIcon = direction === "up" ? import_fractal_icons10.ChevronUp : direction === "left" ? import_fractal_icons10.ChevronLeft : direction === "right" ? import_fractal_icons10.ChevronRight : import_fractal_icons10.ChevronDown;
+  useEscapeDismiss(100, () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }, open);
+  React12.useLayoutEffect(() => {
+    const root = rootRef.current;
+    const trigger = triggerRef.current;
+    const panel = panelRef.current;
+    if (!open || !root || !trigger || !panel) return;
+    const updatePosition = () => {
+      const viewport = window.visualViewport;
+      const bounds = {
+        left: viewport?.offsetLeft ?? 0,
+        top: viewport?.offsetTop ?? 0,
+        right: (viewport?.offsetLeft ?? 0) + (viewport?.width ?? document.documentElement.clientWidth),
+        bottom: (viewport?.offsetTop ?? 0) + (viewport?.height ?? document.documentElement.clientHeight)
+      };
+      for (let ancestor = root.parentElement; ancestor; ancestor = ancestor.parentElement) {
+        const style = getComputedStyle(ancestor);
+        const rect = ancestor.getBoundingClientRect();
+        if (/(auto|scroll|hidden|clip)/.test(style.overflowX)) {
+          bounds.left = Math.max(bounds.left, rect.left + ancestor.clientLeft);
+          bounds.right = Math.min(bounds.right, rect.left + ancestor.clientLeft + ancestor.clientWidth);
+        }
+        if (/(auto|scroll|hidden|clip)/.test(style.overflowY)) {
+          bounds.top = Math.max(bounds.top, rect.top + ancestor.clientTop);
+          bounds.bottom = Math.min(bounds.bottom, rect.top + ancestor.clientTop + ancestor.clientHeight);
+        }
       }
-    } else {
-      left = 0;
-      const panelRight = triggerRect.left + panelRect.width;
-      if (panelRight > vw) {
-        left = void 0;
-        right = 0;
+      const padding = Math.max(0, collisionPadding);
+      bounds.left += padding;
+      bounds.right = Math.max(bounds.left, bounds.right - padding);
+      bounds.top += padding;
+      bounds.bottom = Math.max(bounds.top, bounds.bottom - padding);
+      const triggerRect = trigger.getBoundingClientRect();
+      const rootRect = root.getBoundingClientRect();
+      const availableWidth = bounds.right - bounds.left;
+      const heightLimit = Math.max(0, maxHeight);
+      panel.style.maxWidth = `${availableWidth}px`;
+      panel.style.minWidth = `${Math.min(triggerRect.width, availableWidth)}px`;
+      const panelRect = panel.getBoundingClientRect();
+      const desiredHeight = Math.min(heightLimit, panel.scrollHeight + panel.offsetHeight - panel.clientHeight);
+      const position = positionDropdown(triggerRect, { width: panelRect.width, height: desiredHeight }, bounds, direction, align);
+      const nextStyle = {
+        left: position.left - rootRect.left - root.clientLeft + root.scrollLeft,
+        top: position.top - rootRect.top - root.clientTop + root.scrollTop,
+        minWidth: Math.min(triggerRect.width, availableWidth),
+        maxWidth: availableWidth,
+        maxHeight: Math.min(heightLimit, position.maxHeight)
+      };
+      for (const key of Object.keys(nextStyle)) {
+        panel.style[key] = `${nextStyle[key]}px`;
       }
+      setPanelStyle((previous) => Object.entries(nextStyle).every(([key, value]) => previous[key] === value) ? previous : nextStyle);
+    };
+    updatePosition();
+    if (searchable && !panel.contains(document.activeElement)) searchRef.current?.focus({ preventScroll: true });
+    if (focusOnOpen.current) {
+      focusOnOpen.current = false;
+      const option = panel.querySelector('[aria-selected="true"]') ?? panel.querySelector('[role="option"]');
+      option?.focus({ preventScroll: true });
+      option?.scrollIntoView({ block: "nearest" });
+    }
+    const resize = new ResizeObserver(updatePosition);
+    resize.observe(root);
+    resize.observe(panel);
+    for (let ancestor = root.parentElement; ancestor; ancestor = ancestor.parentElement) {
+      resize.observe(ancestor);
     }
-    setPanelStyle({ top, left, right });
-  }, [open, isUp, align]);
-  React7.useEffect(() => {
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    window.visualViewport?.addEventListener("resize", updatePosition);
+    window.visualViewport?.addEventListener("scroll", updatePosition);
+    return () => {
+      resize.disconnect();
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.visualViewport?.removeEventListener("resize", updatePosition);
+      window.visualViewport?.removeEventListener("scroll", updatePosition);
+    };
+  }, [open, direction, align, maxHeight, collisionPadding, items, label, query, searchable]);
+  React12.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
       const target = e.target;
@@ -630,75 +1875,120 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("fractal-dropdown", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  if (renderableItems.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: rootRef, "data-control-size": size, "data-filled": multiple ? selectedValues.length > 0 : Boolean(selectedValue), "data-open": open, className: cn("fractal-dropdown", fieldLabel && "fractal-floating-field fractal-floating-field--dropdown", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "button",
       {
         ref: triggerRef,
+        id: triggerId ?? `${menuId}-trigger`,
+        "data-control-size": size,
         type: "button",
-        "aria-haspopup": "listbox",
+        disabled,
+        "aria-haspopup": searchable ? "dialog" : "listbox",
         "aria-expanded": open,
-        "aria-label": triggerLabel,
+        "aria-controls": open ? searchable ? menuId : `${menuId}-options` : void 0,
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            if (open) {
+              const option = panelRef.current?.querySelector('[aria-selected="true"]') ?? panelRef.current?.querySelector('[role="option"]');
+              option?.focus({ preventScroll: true });
+              option?.scrollIntoView({ block: "nearest" });
+            } else {
+              focusOnOpen.current = true;
+              setOpen(true);
+            }
+          }
+        },
+        "aria-label": accessibleLabel,
         onClick: () => setOpen((o) => !o),
         className: cn(
+          "fractal-control",
           "fractal-dropdown-trigger",
           `fractal-dropdown-trigger--${size}`,
           `fractal-dropdown-trigger--${triggerVariant}`,
+          `fractal-dropdown-trigger--${triggerOrientation}`,
+          iconOnly && "fractal-dropdown-trigger--icon-only",
           triggerClassName
         ),
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-            selected.icon != null && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected.description })
-          ] }),
-          !noChevron && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: fieldLabel ? "fractal-dropdown-field-value" : void 0, style: fieldLabel ? void 0 : { display: "contents" }, children: triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+            selected?.icon != null && /* @__PURE__ */ (0, import_jsx_runtime20.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_runtime20.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected?.description })
+          ] }) }),
+          !noChevron && !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "fractal-floating-field__label", htmlFor: triggerId ?? `${menuId}-trigger`, children: fieldLabel }) : null,
+    open && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         ref: panelRef,
-        role: "listbox",
-        "aria-label": triggerLabel,
+        id: menuId,
+        onKeyDown: (event) => {
+          if (event.target === searchRef.current && event.key !== "ArrowDown") return;
+          if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+          event.preventDefault();
+          const options = Array.from(panelRef.current?.querySelectorAll('[role="option"]') ?? []);
+          const current = options.indexOf(document.activeElement);
+          const index = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : (current + (event.key === "ArrowDown" ? 1 : -1) + options.length) % options.length;
+          options[index]?.focus({ preventScroll: true });
+          options[index]?.scrollIntoView({ block: "nearest" });
+        },
+        role: searchable ? "dialog" : void 0,
+        "aria-label": accessibleLabel,
         className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
         style: panelStyle,
         children: [
-          label != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fractal-dropdown-label", children: label }),
-          visibleItems.map((item, index) => {
-            const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
-            const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
-            if (item.kind === "header") {
-              return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(React7.Fragment, { children: [
+          searchable && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fractal-dropdown-search", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.MagnifyingGlass, { "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { ref: searchRef, type: "search", "aria-label": searchPlaceholder, placeholder: searchPlaceholder, value: query, onChange: (event) => setQuery(event.target.value) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
+            label != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-label", children: label }),
+            visibleItems.map((item, index) => {
+              const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
+              const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
+              if (item.kind === "header") {
+                return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(React12.Fragment, { children: [
+                  topDivider,
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
+                  bottomDivider
+                ] }, `header-${index}`);
+              }
+              const isSelected = multiple ? selectedValues.includes(item.value) : item.value === selectedValue;
+              return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(React12.Fragment, { children: [
                 topDivider,
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": isSelected,
+                    onClick: () => {
+                      if (multiple) onSelectionChange?.(isSelected ? selectedValues.filter((value) => value !== item.value) : [...selectedValues, item.value]);
+                      else onSelect?.(item.value);
+                      if (!multiple && closeOnSelect) {
+                        setOpen(false);
+                        triggerRef.current?.focus();
+                      }
+                    },
+                    className: "fractal-dropdown-option",
+                    children: [
+                      multiple && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-checkbox", "data-checked": isSelected, "aria-hidden": "true", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.Check, {}) }),
+                      item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
+                      item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
+                      item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
+                    ]
+                  }
+                ),
                 bottomDivider
-              ] }, `header-${index}`);
-            }
-            const isSelected = item.value === selectedValue;
-            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(React7.Fragment, { children: [
-              topDivider,
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                "button",
-                {
-                  type: "button",
-                  role: "option",
-                  "aria-selected": isSelected,
-                  onClick: () => {
-                    onSelect(item.value);
-                    if (closeOnSelect) setOpen(false);
-                  },
-                  className: "fractal-dropdown-option",
-                  children: [
-                    item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
-                    item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
-                    item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
-                  ]
-                }
-              ),
-              bottomDivider
-            ] }, item.value);
-          })
+              ] }, item.value);
+            })
+          ] }),
+          !selectableItems.length && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
         ]
       }
     )
@@ -706,10 +1996,10 @@ function Dropdown({
 }
 
 // src/components/Link/Link.tsx
-var React8 = __toESM(require("react"), 1);
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Link = React8.forwardRef(
-  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Link = React13.forwardRef(
+  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "a",
     {
       ref,
@@ -721,10 +2011,10 @@ var Link = React8.forwardRef(
 Link.displayName = "Link";
 
 // src/components/Chip/Chip.tsx
-var React9 = __toESM(require("react"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Chip = React9.forwardRef(
-  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var React14 = __toESM(require("react"), 1);
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Chip = React14.forwardRef(
+  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "span",
     {
       ref,
@@ -735,36 +2025,128 @@ var Chip = React9.forwardRef(
 );
 Chip.displayName = "Chip";
 
+// src/components/Checkbox/Checkbox.tsx
+var import_fractal_icons11 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function Checkbox({
+  checked,
+  indeterminate = false,
+  onCheckedChange,
+  className,
+  disabled,
+  onClick,
+  onKeyDown,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "button",
+    {
+      ...props,
+      className: cn(
+        "fractal-checkbox",
+        (checked || indeterminate) && "fractal-checkbox--checked",
+        indeterminate && "fractal-checkbox--indeterminate",
+        className
+      ),
+      type: "button",
+      role: "checkbox",
+      "aria-checked": indeterminate ? "mixed" : checked,
+      disabled,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) onCheckedChange(indeterminate || !checked);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.key === " " || event.key === "Enter") event.stopPropagation();
+      },
+      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.Checkbox, { size: 18 }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.Minus, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
+      ] }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.Checkbox, { "aria-hidden": "true", size: 18 })
+    }
+  );
+}
+
+// src/components/Radio/Radio.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function Radio({
+  checked,
+  className,
+  description,
+  disabled,
+  label,
+  onCheckedChange,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "input",
+      {
+        ...props,
+        checked,
+        className: "fractal-radio__input",
+        disabled,
+        onChange: (event) => onCheckedChange?.(event.currentTarget.checked),
+        type: "radio"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-radio__dot" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "fractal-radio__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-radio__label", children: label }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-radio__description", children: description })
+    ] })
+  ] });
+}
+
 // src/components/SortableTable/SortableTable.tsx
-var import_react2 = require("react");
-var import_fractal_icons3 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_fractal_icons12 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function SortableTable({
   columns,
   data,
+  "aria-label": ariaLabel,
   emptyMessage,
   header,
   size = "md",
+  embedded = false,
+  layout = "fill",
+  stickyHeader = false,
+  stickyFirstColumn = false,
+  maxHeight,
+  overflowMenu,
   className,
+  defaultSort,
   defaultSortKey = void 0,
   defaultSortDirection = null,
   sortKey: controlledKey,
   sortDirection: controlledDirection,
   onSortChange,
+  pagination,
   highlightRow,
-  onRowClick
+  selection,
+  isRowDisabled,
+  isRowSelectionDisabled,
+  onRowClick,
+  onRowDoubleClick,
+  rowAction
 }) {
-  const [internalKey, setInternalKey] = (0, import_react2.useState)(defaultSortKey ?? null);
-  const [internalDirection, setInternalDirection] = (0, import_react2.useState)(defaultSortDirection);
+  const [internalKey, setInternalKey] = (0, import_react6.useState)(defaultSortKey ?? null);
+  const [internalDirection, setInternalDirection] = (0, import_react6.useState)(defaultSortDirection);
   const isControlled = controlledKey !== void 0 && controlledDirection !== void 0;
   const activeKey = isControlled ? controlledKey : internalKey;
   const activeDirection = isControlled ? controlledDirection : internalDirection;
-  const sorted = (0, import_react2.useMemo)(() => {
-    if (!activeKey || !activeDirection) return data;
-    const col = columns.find((c) => c.key === activeKey);
+  const baselineKey = defaultSort?.key ?? null;
+  const baselineDirection = defaultSort?.direction ?? null;
+  const effectiveKey = activeKey && activeDirection ? activeKey : baselineKey;
+  const effectiveDirection = activeKey && activeDirection ? activeDirection : baselineDirection;
+  const sorted = (0, import_react6.useMemo)(() => {
+    if (!effectiveKey || !effectiveDirection) return data;
+    const col = columns.find((c) => c.key === effectiveKey);
     if (!col) return data;
     const accessor = col.sortAccessor ?? ((row) => {
-      const value = row[activeKey];
+      const value = row[effectiveKey];
       return typeof value === "string" || typeof value === "number" ? value : null;
     });
     const copy = [...data];
@@ -775,26 +2157,41 @@ function SortableTable({
       if (av == null) return 1;
       if (bv == null) return -1;
       if (typeof av === "number" && typeof bv === "number") {
-        return activeDirection === "asc" ? av - bv : bv - av;
+        return effectiveDirection === "asc" ? av - bv : bv - av;
       }
       const as = String(av).toLowerCase();
       const bs = String(bv).toLowerCase();
-      if (as < bs) return activeDirection === "asc" ? -1 : 1;
-      if (as > bs) return activeDirection === "asc" ? 1 : -1;
+      if (as < bs) return effectiveDirection === "asc" ? -1 : 1;
+      if (as > bs) return effectiveDirection === "asc" ? 1 : -1;
       return 0;
     });
     return copy;
-  }, [data, columns, activeKey, activeDirection]);
+  }, [data, columns, effectiveKey, effectiveDirection]);
+  const visibleRows = (0, import_react6.useMemo)(() => {
+    if (!pagination) return sorted;
+    const pageSize = Math.max(1, pagination.pageSize);
+    const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
+    const page = Math.min(Math.max(1, pagination.page), totalPages);
+    const startIndex = (page - 1) * pageSize;
+    return sorted.slice(startIndex, startIndex + pageSize);
+  }, [pagination, sorted]);
+  const selectedRows = selection ? sorted.filter(selection.isSelected) : [];
+  const selectableRows = selection ? sorted.filter((row) => !isRowDisabled?.(row) && !isRowSelectionDisabled?.(row)) : [];
+  const selectedRowCount = selection ? selectableRows.filter(selection.isSelected).length : 0;
+  const allRowsSelected = selectableRows.length > 0 && selectedRowCount === selectableRows.length;
+  const someRowsSelected = selectedRows.length > 0 && !allRowsSelected;
   const handleSortClick = (key) => {
     let nextDirection;
-    if (activeKey !== key) {
+    if (!activeKey || !activeDirection) {
+      nextDirection = baselineKey === key && baselineDirection ? baselineDirection : "asc";
+    } else if (activeKey !== key) {
       nextDirection = "asc";
+    } else if (baselineKey === key && baselineDirection) {
+      nextDirection = activeDirection === baselineDirection ? baselineDirection === "asc" ? "desc" : "asc" : null;
     } else if (activeDirection === "asc") {
       nextDirection = "desc";
-    } else if (activeDirection === "desc") {
-      nextDirection = null;
     } else {
-      nextDirection = "asc";
+      nextDirection = null;
     }
     const nextKey = nextDirection === null ? null : key;
     if (isControlled) {
@@ -805,101 +2202,200 @@ function SortableTable({
       onSortChange?.(nextKey, nextDirection);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, className), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
-    sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "fractal-sortable-table-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)(
-            "th",
-            {
-              className: "fractal-sortable-table-th",
-              style: { width: col.width },
-              children: col.header
-            },
-            col.key
-          );
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("fractal-table-layout", "fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, "data-table-selection": Boolean(selection), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
+    visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableViewport, { maxHeight, label: ariaLabel || "Data table", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "fractal-sortable-table-thead-row", children: [
+        selection && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "th",
           {
-            className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
-            style: { width: col.width },
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-              "button",
+            className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
+            "data-pinned-column": "selection",
+            scope: "col",
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              Checkbox,
               {
-                type: "button",
-                className: cn(
-                  "fractal-sortable-table-sort-button",
-                  isActive && "fractal-sortable-table-sort-button--active"
-                ),
-                onClick: () => handleSortClick(col.key),
-                "aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: col.header }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fractal_icons3.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fractal_icons3.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fractal_icons3.ArrowsUpDown, { size: 14 }) })
-                ]
+                "aria-label": selection.selectAllLabel ?? "Select all rows",
+                checked: allRowsSelected,
+                disabled: selectableRows.length === 0 && selectedRows.length === 0,
+                indeterminate: someRowsSelected,
+                onCheckedChange: (checked) => {
+                  const rows = checked ? selectableRows : selectedRows;
+                  if (selection.onSelectAllChange) {
+                    selection.onSelectAllChange(rows, checked);
+                    return;
+                  }
+                  rows.forEach((row) => {
+                    if (selection.isSelected(row) !== checked) {
+                      selection.onSelectedChange(row, checked);
+                    }
+                  });
+                }
               }
             )
-          },
-          col.key
-        );
-      }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: sorted.map((row, rowIndex) => {
+          }
+        ),
+        columns.map((col, columnIndex) => {
+          const isActive = activeKey === col.key && activeDirection !== null;
+          if (!col.sortable) {
+            return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              "th",
+              {
+                className: "fractal-sortable-table-th",
+                scope: "col",
+                style: columnStyle(col),
+                "data-pinned-column": columnIndex === 0 ? "data" : void 0,
+                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableCellContent, { label: `${col.header} column`, children: col.header })
+              },
+              col.key
+            );
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "th",
+            {
+              className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
+              scope: "col",
+              style: columnStyle(col),
+              "data-pinned-column": columnIndex === 0 ? "data" : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableCellContent, { label: `${col.header} column`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "fractal-sortable-table-sort-button",
+                    isActive && "fractal-sortable-table-sort-button--active"
+                  ),
+                  onClick: () => handleSortClick(col.key),
+                  "aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: col.header }),
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fractal_icons12.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fractal_icons12.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fractal_icons12.ArrowsUpDown, { size: 14 }) })
+                  ]
+                }
+              ) })
+            },
+            col.key
+          );
+        }),
+        overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("th", { scope: "col", "aria-label": "Row actions", className: "fractal-sortable-table-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tbody", { children: visibleRows.map((row, rowIndex) => {
         const highlighted = highlightRow?.(row, rowIndex) ?? false;
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        const disabled = isRowDisabled?.(row) ?? false;
+        const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
+        const interactive = !disabled && Boolean(onRowClick || onRowDoubleClick);
+        const action = !disabled && rowAction ? {
+          label: rowAction.label(row, rowIndex),
+          icon: rowAction.icon(row, rowIndex)
+        } : null;
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           "tr",
           {
             className: cn(
               "fractal-sortable-table-row",
               highlighted && "fractal-sortable-table-row--highlighted",
-              onRowClick && "fractal-sortable-table-row--interactive"
+              interactive && "fractal-sortable-table-row--interactive",
+              disabled && "fractal-sortable-table-row--disabled"
             ),
-            onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
-            onKeyDown: onRowClick ? (event) => {
+            "data-disabled": disabled || void 0,
+            onClick: !disabled && onRowClick ? () => onRowClick(row, rowIndex) : void 0,
+            onDoubleClick: !disabled && onRowDoubleClick ? () => onRowDoubleClick(row, rowIndex) : void 0,
+            onKeyDown: interactive ? (event) => {
               if (event.key === "Enter" || event.key === " ") {
                 event.preventDefault();
-                onRowClick(row, rowIndex);
+                const activateRow = onRowClick ?? onRowDoubleClick;
+                activateRow?.(row, rowIndex);
               }
             } : void 0,
-            role: onRowClick ? "button" : void 0,
-            tabIndex: onRowClick ? 0 : void 0,
-            children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              "td",
-              {
-                className: "fractal-sortable-table-td",
-                style: { width: col.width, textAlign: col.align ?? "left" },
-                children: col.render(row, rowIndex)
-              },
-              col.key
-            ))
+            "aria-label": action?.label,
+            "aria-disabled": disabled || void 0,
+            role: interactive ? "button" : void 0,
+            tabIndex: interactive ? 0 : void 0,
+            children: [
+              selection && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", "data-pinned-column": "selection", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                Checkbox,
+                {
+                  "aria-label": selection.getRowLabel(row),
+                  checked: !selectionDisabled && selection.isSelected(row),
+                  disabled: selectionDisabled,
+                  onClick: (event) => event.stopPropagation(),
+                  onCheckedChange: (checked) => {
+                    if (!selectionDisabled) selection.onSelectedChange(row, checked);
+                  }
+                }
+              ) }),
+              columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                "td",
+                {
+                  className: cn(
+                    "fractal-sortable-table-td",
+                    action && columnIndex === columns.length - 1 && "fractal-sortable-table-td--row-action"
+                  ),
+                  style: { ...columnStyle(col), textAlign: col.align ?? "left" },
+                  "data-column-align": col.align,
+                  "data-pinned-column": columnIndex === 0 ? "data" : void 0,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }),
+                    action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
+                  ]
+                },
+                col.key
+              )),
+              overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                "td",
+                {
+                  className: "fractal-sortable-table-td fractal-table-overflow-cell",
+                  "data-pinned-column": "overflow",
+                  onClick: (event) => event.stopPropagation(),
+                  onDoubleClick: (event) => event.stopPropagation(),
+                  onKeyDown: (event) => event.stopPropagation(),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableOverflowMenu, { items: overflowMenu.items(row, rowIndex), label: overflowMenu.getLabel?.(row, rowIndex) ?? `Actions for row ${rowIndex + 1}`, disabled: disabled || overflowMenu.isDisabled?.(row, rowIndex), onSelect: (value) => overflowMenu.onSelect(value, row, rowIndex) })
+                }
+              )
+            ]
           },
           rowIndex
         );
       }) })
-    ] })
+    ] }) })
   ] }) });
 }
 
 // src/components/Tabs/Tabs.tsx
-var import_react3 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Tabs({
   items,
   defaultValue,
   value: controlledValue,
   onValueChange,
   className,
-  ariaLabel
+  ariaLabel,
+  divider = false,
+  variant = "line"
 }) {
-  const reactId = (0, import_react3.useId)();
-  const [internalValue, setInternalValue] = (0, import_react3.useState)(
+  const reactId = (0, import_react7.useId)();
+  const [internalValue, setInternalValue] = (0, import_react7.useState)(
     defaultValue ?? items.find((i) => !i.disabled)?.id ?? items[0]?.id ?? ""
   );
   const isControlled = controlledValue !== void 0;
   const activeId = isControlled ? controlledValue : internalValue;
-  const tabRefs = (0, import_react3.useRef)({});
+  const tabListRef = (0, import_react7.useRef)(null);
+  const tabRefs = (0, import_react7.useRef)({});
+  const [indicator, setIndicator] = (0, import_react7.useState)(null);
+  (0, import_react7.useLayoutEffect)(() => {
+    const updateIndicator = () => {
+      const activeTab = tabRefs.current[activeId];
+      if (!activeTab) return;
+      setIndicator({ offset: activeTab.offsetLeft, width: activeTab.offsetWidth });
+    };
+    updateIndicator();
+    const list = tabListRef.current;
+    if (!list || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateIndicator);
+    observer.observe(list);
+    return () => observer.disconnect();
+  }, [activeId, items.length]);
   const selectTab = (id) => {
     if (isControlled) {
       onValueChange?.(id);
@@ -909,6 +2405,10 @@ function Tabs({
     }
   };
   const focusable = items.filter((i) => !i.disabled);
+  const indicatorStyle = indicator ? {
+    "--fractal-tabs-indicator-offset": `${indicator.offset}px`,
+    "--fractal-tabs-indicator-width": `${indicator.width}px`
+  } : void 0;
   const onKeyDown = (event) => {
     const currentIndex = focusable.findIndex((i) => i.id === activeId);
     if (currentIndex === -1) return;
@@ -934,41 +2434,52 @@ function Tabs({
     selectTab(nextId2);
     requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("fractal-tabs", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "tablist", "aria-label": ariaLabel, className: "fractal-tabs-list", children: items.map((item) => {
-      const isActive = item.id === activeId;
-      const tabId = `${reactId}-tab-${item.id}`;
-      const panelId = `${reactId}-panel-${item.id}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        "button",
-        {
-          ref: (el) => {
-            tabRefs.current[item.id] = el;
-          },
-          id: tabId,
-          role: "tab",
-          type: "button",
-          "aria-selected": isActive,
-          "aria-controls": panelId,
-          tabIndex: isActive ? 0 : -1,
-          disabled: item.disabled,
-          className: cn(
-            "fractal-tabs-trigger",
-            isActive && "fractal-tabs-trigger--active",
-            item.disabled && "fractal-tabs-trigger--disabled"
-          ),
-          onClick: () => !item.disabled && selectTab(item.id),
-          onKeyDown,
-          children: item.label
-        },
-        item.id
-      );
-    }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "div",
+      {
+        ref: tabListRef,
+        role: "tablist",
+        "aria-label": ariaLabel,
+        className: "fractal-tabs-list",
+        "data-indicator-ready": indicator ? "true" : void 0,
+        style: indicatorStyle,
+        children: items.map((item) => {
+          const isActive = item.id === activeId;
+          const tabId = `${reactId}-tab-${item.id}`;
+          const panelId = `${reactId}-panel-${item.id}`;
+          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "button",
+            {
+              ref: (el) => {
+                tabRefs.current[item.id] = el;
+              },
+              id: tabId,
+              role: "tab",
+              type: "button",
+              "aria-selected": isActive,
+              "aria-controls": panelId,
+              tabIndex: isActive ? 0 : -1,
+              disabled: item.disabled,
+              className: cn(
+                "fractal-tabs-trigger",
+                isActive && "fractal-tabs-trigger--active",
+                item.disabled && "fractal-tabs-trigger--disabled"
+              ),
+              onClick: () => !item.disabled && selectTab(item.id),
+              onKeyDown,
+              children: item.label
+            },
+            item.id
+          );
+        })
+      }
+    ),
     items.map((item) => {
       const tabId = `${reactId}-tab-${item.id}`;
       const panelId = `${reactId}-panel-${item.id}`;
       const isActive = item.id === activeId;
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "div",
         {
           id: panelId,
@@ -984,10 +2495,112 @@ function Tabs({
   ] });
 }
 
+// src/components/ContentSwitcher/ContentSwitcher.tsx
+var React15 = __toESM(require("react"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
+  const switcherRef = React15.useRef(null);
+  const buttonRefs = React15.useRef([]);
+  const indicatorMotionReadyRef = React15.useRef(false);
+  const activeIndex = items.findIndex((item) => item.value === value);
+  React15.useLayoutEffect(() => {
+    const switcher = switcherRef.current;
+    const activeButton = buttonRefs.current[activeIndex];
+    let motionFrame = 0;
+    if (!switcher || !activeButton) {
+      switcher?.removeAttribute("data-indicator-ready");
+      switcher?.removeAttribute("data-indicator-animate");
+      indicatorMotionReadyRef.current = false;
+      return;
+    }
+    const updateIndicator = () => {
+      const switcherRect = switcher.getBoundingClientRect();
+      const activeButtonRect = activeButton.getBoundingClientRect();
+      switcher.style.setProperty("--fractal-content-switcher-indicator-x", `${activeButtonRect.left - switcherRect.left - switcher.clientLeft}px`);
+      switcher.style.setProperty("--fractal-content-switcher-indicator-y", `${activeButtonRect.top - switcherRect.top - switcher.clientTop}px`);
+      switcher.style.setProperty("--fractal-content-switcher-indicator-width", `${activeButtonRect.width}px`);
+      switcher.style.setProperty("--fractal-content-switcher-indicator-height", `${activeButtonRect.height}px`);
+      switcher.setAttribute("data-indicator-ready", "true");
+      if (!indicatorMotionReadyRef.current && motionFrame === 0) {
+        motionFrame = window.requestAnimationFrame(() => {
+          indicatorMotionReadyRef.current = true;
+          switcher.setAttribute("data-indicator-animate", "true");
+          motionFrame = 0;
+        });
+      }
+    };
+    updateIndicator();
+    if (typeof ResizeObserver === "undefined") {
+      return () => {
+        if (motionFrame !== 0) window.cancelAnimationFrame(motionFrame);
+      };
+    }
+    const resizeObserver = new ResizeObserver(updateIndicator);
+    resizeObserver.observe(switcher);
+    buttonRefs.current.forEach((button) => {
+      if (button) resizeObserver.observe(button);
+    });
+    return () => {
+      resizeObserver.disconnect();
+      if (motionFrame !== 0) window.cancelAnimationFrame(motionFrame);
+    };
+  }, [activeIndex, items.length]);
+  const moveFocus = (index, direction) => {
+    let nextIndex = index;
+    do {
+      nextIndex = (nextIndex + direction + items.length) % items.length;
+    } while (items[nextIndex]?.disabled && nextIndex !== index);
+    if (!items[nextIndex]?.disabled) {
+      buttonRefs.current[nextIndex]?.focus();
+      onValueChange(items[nextIndex].value);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    "div",
+    {
+      className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
+      role: "group",
+      "aria-label": ariaLabel,
+      ref: switcherRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
+        items.map((item, index) => {
+          const active = item.value === value;
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            "button",
+            {
+              className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
+              type: "button",
+              "aria-pressed": active,
+              disabled: item.disabled,
+              onClick: () => onValueChange(item.value),
+              onKeyDown: (event) => {
+                if (event.key === "ArrowRight") {
+                  event.preventDefault();
+                  moveFocus(index, 1);
+                }
+                if (event.key === "ArrowLeft") {
+                  event.preventDefault();
+                  moveFocus(index, -1);
+                }
+              },
+              ref: (element) => {
+                buttonRefs.current[index] = element;
+              },
+              children: item.label
+            },
+            item.value
+          );
+        })
+      ]
+    }
+  );
+}
+
 // src/components/Disclosure/Disclosure.tsx
-var import_react4 = require("react");
-var import_fractal_icons4 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_fractal_icons13 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Disclosure({
   title,
   meta,
@@ -995,16 +2608,18 @@ function Disclosure({
   defaultOpen = false,
   open: controlledOpen,
   onOpenChange,
+  disabled = false,
   className,
   variant = "card"
 }) {
-  const reactId = (0, import_react4.useId)();
+  const reactId = (0, import_react8.useId)();
   const headerId = `${reactId}-header`;
   const panelId = `${reactId}-panel`;
-  const [internalOpen, setInternalOpen] = (0, import_react4.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react8.useState)(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const toggle = () => {
+    if (disabled) return;
     const next = !isOpen;
     if (isControlled) {
       onOpenChange?.(next);
@@ -1013,17 +2628,18 @@ function Disclosure({
       onOpenChange?.(next);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "div",
     {
       className: cn(
         "fractal-disclosure",
         variant === "card" && "fractal-disclosure--card",
         isOpen && "fractal-disclosure--open",
+        disabled && "fractal-disclosure--disabled",
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "button",
           {
             type: "button",
@@ -1031,15 +2647,16 @@ function Disclosure({
             className: "fractal-disclosure-trigger",
             "aria-expanded": isOpen,
             "aria-controls": panelId,
+            disabled,
             onClick: toggle,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fractal_icons4.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fractal_icons4.ChevronRight, { size: 16 }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fractal-disclosure-title", children: title }),
-              meta && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fractal_icons13.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fractal_icons13.ChevronRight, { size: 16 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-disclosure-title", children: title }),
+              meta && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "div",
           {
             id: panelId,
@@ -1047,7 +2664,7 @@ function Disclosure({
             "aria-labelledby": headerId,
             className: "fractal-disclosure-panel",
             hidden: !isOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
           }
         )
       ]
@@ -1055,39 +2672,260 @@ function Disclosure({
   );
 }
 
+// src/components/LatticeLoader/LatticeLoader.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var LATTICE_COUNT = 160;
+var WAVE_PERIOD = 80;
+function LatticeLoader({ className, label = "Loading", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "fractal-lattice-loader__cell",
+          style: { "--fractal-lattice-index": index % WAVE_PERIOD }
+        },
+        index
+      ))
+    }
+  );
+}
+
+// src/components/Ghost/Ghost.tsx
+var import_jsx_runtime30 = 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_runtime30.jsx)(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("fractal-ghost", className),
+      style: {
+        width: toCssLength(width),
+        height: toCssLength(height),
+        borderRadius: toCssLength(radius),
+        ...style
+      },
+      ...props
+    }
+  );
+}
+function GhostLine({ className, size = "md", width = "100%", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
+}
+function ButtonGhost({ className, size = "lg", controlSize, iconOnly = false, width, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { "data-control-size": controlSize ?? size, 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_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
+    showHeader && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
+  ] });
+}
+function DataTableGhost({
+  className,
+  showHeader = true,
+  headers,
+  columns = 4,
+  rows = 5,
+  columnWidths,
+  size = "md",
+  ...props
+}) {
+  const cells = Array.from({ length: columns }, (_, index) => index);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsxs)("table", { className: "fractal-ghost-table__table", children: [
+    (showHeader || headers) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
+  ] }) });
+}
+function InputGhost({ className, labelWidth = "26%", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FormFieldGhost, { className, labelWidth, ...props });
+}
+function TextareaGhost({ className, labelWidth = "26%", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
+}
+function LabelGhost({ className, width = "26%", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
+}
+function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "lg", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LabelGhost, { width: labelWidth }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
+  ] });
+}
+function AlertGhost({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "30%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { size: "sm", width: "78%" })
+  ] });
+}
+function CheckboxGhost({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-choice__control" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "42%" })
+  ] });
+}
+var ToggleGhost = CheckboxGhost;
+function ChipGhost({ className, width = 74, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
+}
+function LinkGhost({ className, width = 96, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
+}
+var TextButtonGhost = LinkGhost;
+function DropdownGhost({ className, controlSize = "lg", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
+  ] });
+}
+function ContentSwitcherGhost({ className, options = 3, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, {}, index)) });
+}
+var TabsGhost = ContentSwitcherGhost;
+function DisclosureGhost({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-disclosure__icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "42%" })
+  ] });
+}
+function PaginationGhost({ className, pages = 5, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, {}, index)) });
+}
+function FileDropzoneGhost({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-dropzone__icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "26%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { size: "sm", width: "46%" })
+  ] });
+}
+function PromptCardGhost({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsxs)(
+    "div",
+    {
+      "aria-busy": "true",
+      "aria-label": ariaLabel,
+      className: cn("fractal-ghost-conversation", className),
+      role: "status",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-ghost-conversation__bubble", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "100%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "86%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "64%" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "92%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "78%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "58%" })
+        ] })
+      ]
+    }
+  );
+}
+function SortableTableGhost(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DataTableGhost, { ...props });
+}
+function SidebarGhost({ className, items = 6, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-sidebar__brand" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-ghost-sidebar__item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
+    ] }, index)) })
+  ] });
+}
+function ModalGhost({ className, title, lines = 3, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
+}
+function SidePanelGhost({ className, title, lines = 5, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
+}
+function SurfaceGhost({ className, title, lines = 3, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-ghost-surface__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "42%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-surface__close" })
+    ] }),
+    title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-ghost-surface__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
+  ] });
+}
+
 // src/components/Sidebar/Sidebar.tsx
-var React10 = __toESM(require("react"), 1);
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Sidebar = React10.forwardRef(
-  ({ className, width, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var React16 = __toESM(require("react"), 1);
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Sidebar = React16.forwardRef(
+  ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "aside",
     {
       ref,
       className: cn("fractal-sidebar", className),
+      "data-compact": compact || void 0,
       style: { ...style, ...width ? { "--fractal-sidebar-width": width } : {} },
       ...props
     }
   )
 );
 Sidebar.displayName = "Sidebar";
-var SidebarHeader = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
+var SidebarHeader = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
 );
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarBrand = React10.forwardRef(
-  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
+var SidebarBrand = React16.forwardRef(
+  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
 );
 SidebarBrand.displayName = "SidebarBrand";
-var SidebarNav = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
+function SidebarAccountMenu({
+  name,
+  items,
+  onSelect,
+  triggerLabel = "Account menu",
+  icon,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    Dropdown,
+    {
+      align: "left",
+      className: cn("fractal-sidebar__account", className),
+      items,
+      onSelect,
+      panelClassName: "fractal-sidebar__account-panel",
+      selectedValue: "",
+      triggerClassName: "fractal-sidebar__account-trigger",
+      triggerContent: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__account-name", children: name })
+      ] }),
+      triggerLabel,
+      triggerVariant: "tertiary"
+    }
+  );
+}
+var SidebarNav = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
 );
 SidebarNav.displayName = "SidebarNav";
-var SidebarSection = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
+var SidebarSection = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
 );
 SidebarSection.displayName = "SidebarSection";
-var SidebarNavItem = React10.forwardRef(
-  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+var SidebarNavItem = React16.forwardRef(
+  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "button",
     {
       ref,
@@ -1097,28 +2935,60 @@ var SidebarNavItem = React10.forwardRef(
       "aria-current": active ? "page" : void 0,
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
-        endAdornment && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
+        endAdornment && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
       ]
     }
   )
 );
 SidebarNavItem.displayName = "SidebarNavItem";
-var SidebarFooter = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
+var SidebarFooter = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.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_icons5 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-function SidePanel({ open, onClose, title, description, children, footer, size = "md", className }) {
+var React17 = __toESM(require("react"), 1);
+var import_react_dom4 = require("react-dom");
+var import_fractal_icons14 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
   useEscapeDismiss(80, onClose, open);
+  const bodyRef = React17.useRef(null);
+  const [scrollEdges, setScrollEdges] = React17.useState({ above: false, below: false });
+  React17.useLayoutEffect(() => {
+    const body = bodyRef.current;
+    if (!open || !body) return;
+    const measure = () => {
+      const maxScroll = Math.max(0, body.scrollHeight - body.clientHeight);
+      const top = Math.max(0, Math.min(body.scrollTop, maxScroll));
+      const above = maxScroll > 1 && top > 0;
+      const below = maxScroll - top > 1;
+      setScrollEdges((previous) => previous.above === above && previous.below === below ? previous : { above, below });
+    };
+    const resize = new ResizeObserver(measure);
+    const observeContent = () => {
+      resize.disconnect();
+      resize.observe(body);
+      for (const child of body.children) resize.observe(child);
+      measure();
+    };
+    const mutations = new MutationObserver(observeContent);
+    mutations.observe(body, { childList: true, subtree: true, characterData: true, attributes: true });
+    body.addEventListener("scroll", measure, { passive: true });
+    body.addEventListener("load", measure, true);
+    observeContent();
+    return () => {
+      resize.disconnect();
+      mutations.disconnect();
+      body.removeEventListener("scroll", measure);
+      body.removeEventListener("load", measure, true);
+    };
+  }, [open, loading]);
   if (!open) return null;
-  return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return (0, import_react_dom4.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "aside",
       {
         className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
@@ -1127,15 +2997,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
         role: "dialog",
         onMouseDown: (event) => event.stopPropagation(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("header", { className: "fractal-side-panel__header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fractal-side-panel__heading", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "fractal-side-panel__title", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "fractal-side-panel__description", children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("header", { className: "fractal-side-panel__header", "data-scroll-divider": scrollEdges.above, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "fractal-side-panel__heading", children: [
+              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "fractal-side-panel__title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "fractal-side-panel__description", children: description })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons5.Close, { size: 18 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fractal_icons14.Close, { size: 18 }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fractal-side-panel__body", children }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: bodyRef, "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UILoader, { label: loadingLabel }) : children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("footer", { className: "fractal-side-panel__footer", "data-scroll-divider": scrollEdges.below, children: footer })
         ]
       }
     ) }),
@@ -1144,48 +3014,509 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 }
 
 // src/components/Textarea/Textarea.tsx
-var React11 = __toESM(require("react"), 1);
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Textarea = React11.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
+var React18 = __toESM(require("react"), 1);
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Textarea = React18.forwardRef(
+  ({ className, fieldLabel, textStyle = "source", id, placeholder, ...props }, ref) => {
+    const generatedId = React18.useId();
+    const fieldId = id ?? generatedId;
+    const input = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      "textarea",
+      {
+        ref,
+        id: fieldLabel ? fieldId : id,
+        placeholder: fieldLabel ? placeholder || " " : placeholder,
+        className: cn("fractal-textarea", className),
+        "data-text-style": textStyle,
+        ...props
+      }
+    );
+    return fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "fractal-floating-field fractal-floating-field--textarea", "data-control-size": "md", children: [
+      input,
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
+    ] }) : input;
+  }
 );
 Textarea.displayName = "Textarea";
+
+// src/components/TextButton/TextButton.tsx
+var React19 = __toESM(require("react"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var TextButton = React19.forwardRef(
+  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "button",
+    {
+      ref,
+      className: cn("fractal-text-button", `fractal-text-button--${size}`, `fractal-text-button--${tone}`, className),
+      type: "button",
+      ...props,
+      children: [
+        icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children }),
+        icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
+      ]
+    }
+  )
+);
+TextButton.displayName = "TextButton";
+
+// src/components/FileDropzone/FileDropzone.tsx
+var React20 = __toESM(require("react"), 1);
+var import_fractal_icons15 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function FileDropzone({
+  files,
+  onFilesChange,
+  accept,
+  multiple = true,
+  disabled = false,
+  title = "Drop files here or click to browse",
+  description = "Files stay attached to this record.",
+  className
+}) {
+  const inputId = React20.useId();
+  const inputRef = React20.useRef(null);
+  const [isDragging, setIsDragging] = React20.useState(false);
+  const addFiles = (nextFiles) => {
+    if (disabled) return;
+    const additions = Array.from(nextFiles);
+    if (additions.length === 0) return;
+    onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        id: inputId,
+        className: "fractal-file-dropzone__input",
+        type: "file",
+        accept,
+        multiple,
+        disabled,
+        onChange: (event) => {
+          if (event.target.files) addFiles(event.target.files);
+          event.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      "button",
+      {
+        className: "fractal-file-dropzone__target",
+        "data-dragging": isDragging || void 0,
+        type: "button",
+        disabled,
+        onClick: () => inputRef.current?.click(),
+        onDragEnter: (event) => {
+          event.preventDefault();
+          if (!disabled) setIsDragging(true);
+        },
+        onDragOver: (event) => event.preventDefault(),
+        onDragLeave: (event) => {
+          event.preventDefault();
+          setIsDragging(false);
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          setIsDragging(false);
+          addFiles(event.dataTransfer.files);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fractal_icons15.FileArrowUp, { "aria-hidden": "true", size: 20 }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
+          ] })
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        "button",
+        {
+          className: "fractal-file-dropzone__remove",
+          type: "button",
+          "aria-label": `Remove ${file.name}`,
+          disabled,
+          onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
+          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fractal_icons15.Close, { "aria-hidden": "true", size: 14 })
+        }
+      )
+    ] }, `${file.name}-${file.size}-${index}`)) })
+  ] });
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// src/components/Pagination/Pagination.tsx
+var import_fractal_icons16 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function Pagination({
+  page,
+  pageSize,
+  totalItems,
+  onPageChange,
+  pageSizeOptions,
+  onPageSizeChange,
+  ariaLabel = "Pagination",
+  className
+}) {
+  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+  const currentPage = Math.min(Math.max(page, 1), totalPages);
+  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_runtime36.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "fractal-pagination__controls", children: [
+      canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        Dropdown,
+        {
+          align: "right",
+          className: "fractal-pagination__page-size",
+          direction: "up",
+          items: pageSizeOptions.map((option) => ({
+            value: String(option),
+            description: `${option} per page`
+          })),
+          onSelect: (value) => onPageSizeChange(Number(value)),
+          selectedValue: String(pageSize),
+          size: "sm",
+          triggerLabel: "Results per page",
+          triggerVariant: "tertiary"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "button",
+        {
+          className: "fractal-pagination__button",
+          type: "button",
+          "aria-label": "Previous page",
+          title: "Previous page",
+          disabled: currentPage === 1 || totalItems === 0,
+          onClick: () => onPageChange(currentPage - 1),
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_fractal_icons16.ArrowLeft, { "aria-hidden": "true", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
+        currentPage,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "button",
+        {
+          className: "fractal-pagination__button",
+          type: "button",
+          "aria-label": "Next page",
+          title: "Next page",
+          disabled: currentPage === totalPages || totalItems === 0,
+          onClick: () => onPageChange(currentPage + 1),
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_fractal_icons16.ArrowRight, { "aria-hidden": "true", size: 16 })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/ColumnEditor/ColumnEditor.tsx
+var React21 = __toESM(require("react"), 1);
+var import_fractal_icons17 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var equal = (a, b) => a.length === b.length && a.every((id, index) => id === b[index]);
+function ColumnEditor({ items, value, onChange, label = "Edit columns", hiddenLabel = "Hidden columns", className }) {
+  const [open, setOpen] = React21.useState(false);
+  const [preview, setPreview] = React21.useState(null);
+  const [announcement, setAnnouncement] = React21.useState("");
+  const root = React21.useRef(null);
+  const trigger = React21.useRef(null);
+  const panel = React21.useRef(null);
+  const drag = React21.useRef(null);
+  const positions = React21.useRef(null);
+  const id = React21.useId();
+  function capturePositions() {
+    positions.current = new Map(Array.from(panel.current?.querySelectorAll("[data-column-editor-item]") ?? []).map((row2) => [row2.dataset.columnEditorItem, row2.getBoundingClientRect()]));
+  }
+  React21.useLayoutEffect(() => {
+    const before = positions.current;
+    positions.current = null;
+    if (!before || !panel.current || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const styles = getComputedStyle(panel.current);
+    const token = styles.getPropertyValue("--duration-normal").trim();
+    const duration = parseFloat(token) * (token.endsWith("ms") ? 1 : 1e3);
+    const easing = styles.getPropertyValue("--ease-out").trim();
+    for (const row2 of panel.current.querySelectorAll("[data-column-editor-item]")) {
+      const previous = before.get(row2.dataset.columnEditorItem);
+      row2.getAnimations().filter((animation) => animation.id === "fractal-column-position").forEach((animation) => animation.cancel());
+      if (!previous) continue;
+      const next = row2.getBoundingClientRect();
+      const x = previous.left - next.left, y = previous.top - next.top;
+      if (Math.abs(x) < 1 && Math.abs(y) < 1) continue;
+      row2.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: "translate(0, 0)" }], { duration, easing, id: "fractal-column-position" });
+    }
+  });
+  const valid = [...new Set(value)].filter((key) => items.some((item) => item.id === key));
+  const committed = [...valid, ...items.filter((item) => item.required && !valid.includes(item.id)).map((item) => item.id)];
+  const visible = preview?.visible ?? committed;
+  const hidden = preview?.hidden ?? items.filter((item) => !committed.includes(item.id)).map((item) => item.id);
+  function cancel() {
+    capturePositions();
+    drag.current = null;
+    setPreview(null);
+  }
+  React21.useEffect(() => {
+    if (!open) return;
+    panel.current?.focus();
+    function outside(event) {
+      if (!drag.current && !root.current?.contains(event.target)) setOpen(false);
+    }
+    function escape(event) {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      if (drag.current) {
+        capturePositions();
+        drag.current = null;
+        setPreview(null);
+        setAnnouncement("Reordering cancelled");
+      } else {
+        setOpen(false);
+        trigger.current?.focus();
+      }
+    }
+    function blur(event) {
+      if (event.relatedTarget instanceof Node && !root.current?.contains(event.relatedTarget)) setOpen(false);
+    }
+    const element = root.current;
+    document.addEventListener("pointerdown", outside);
+    document.addEventListener("keydown", escape);
+    element?.addEventListener("focusout", blur);
+    return () => {
+      document.removeEventListener("pointerdown", outside);
+      document.removeEventListener("keydown", escape);
+      element?.removeEventListener("focusout", blur);
+    };
+  }, [open]);
+  function commit(next, message) {
+    capturePositions();
+    onChange(next);
+    setAnnouncement(message);
+  }
+  function move(key, offset) {
+    const index = committed.indexOf(key);
+    const next = committed.filter((item) => item !== key);
+    if (offset > 0 && index === committed.length - 1 && !items.find((item) => item.id === key)?.required) {
+      commit(next, `${items.find((item) => item.id === key)?.label} hidden`);
+      return;
+    }
+    next.splice(Math.max(0, Math.min(next.length, index + offset)), 0, key);
+    commit(next, `${items.find((item) => item.id === key)?.label} moved ${offset < 0 ? "up" : "down"}`);
+  }
+  function start(event, key) {
+    if (event.button !== 0 || event.target.closest("button")) return;
+    drag.current = { id: key, pointerId: event.pointerId, x: event.clientX, y: event.clientY, active: false, visible: [...committed], hidden: [...hidden] };
+    panel.current?.setPointerCapture(event.pointerId);
+    event.preventDefault();
+  }
+  function update(event) {
+    const current = drag.current;
+    if (!current || event.pointerId !== current.pointerId) return;
+    if (!current.active && Math.hypot(event.clientX - current.x, event.clientY - current.y) < 4) return;
+    current.active = true;
+    const container = panel.current;
+    if (!container) return;
+    const bounds = container.getBoundingClientRect();
+    const hiddenGroup = container.querySelector('[data-column-editor-group="hidden"]');
+    const inside = event.clientX >= bounds.left && event.clientX <= bounds.right && event.clientY >= bounds.top && event.clientY <= bounds.bottom;
+    if (!inside) return;
+    const destination = event.clientY >= hiddenGroup.getBoundingClientRect().top ? "hidden" : "visible";
+    if (destination === "hidden" && items.find((item) => item.id === current.id)?.required) return;
+    const slots = Array.from(container.querySelectorAll(`[data-column-editor-group="${destination}"] [data-column-editor-item]`));
+    const localY = event.clientY - bounds.top + container.scrollTop - container.clientTop;
+    const ownSlot = slots.find((row2) => row2.dataset.columnEditorItem === current.id);
+    if (ownSlot && localY >= ownSlot.offsetTop && localY <= ownSlot.offsetTop + ownSlot.offsetHeight) return;
+    const nextVisible = current.visible.filter((key) => key !== current.id);
+    let nextHidden = current.hidden.filter((key) => key !== current.id);
+    if (destination === "visible") {
+      const index = slots.filter((row2) => row2.dataset.columnEditorItem !== current.id && localY > row2.offsetTop + row2.offsetHeight / 2).length;
+      nextVisible.splice(index, 0, current.id);
+    } else {
+      nextHidden.push(current.id);
+      nextHidden = items.filter((item) => nextHidden.includes(item.id)).map((item) => item.id);
+    }
+    if (!equal(nextVisible, current.visible) || !equal(nextHidden, current.hidden)) {
+      capturePositions();
+      current.visible = nextVisible;
+      current.hidden = nextHidden;
+    }
+    setPreview({ visible: current.visible, hidden: current.hidden, active: current.id });
+    if (event.clientY < bounds.top + 32) container.scrollTop -= 12;
+    else if (event.clientY > bounds.bottom - 32) container.scrollTop += 12;
+  }
+  function finish(event) {
+    const current = drag.current;
+    if (!current || current.pointerId !== event.pointerId) return;
+    const hit = document.elementFromPoint(event.clientX, event.clientY);
+    if (current.active && hit && panel.current?.contains(hit)) commit(current.visible, "Column order updated");
+    cancel();
+    if (panel.current?.hasPointerCapture(event.pointerId)) panel.current.releasePointerCapture(event.pointerId);
+  }
+  function row(key, isHidden, index) {
+    const item = items.find((item2) => item2.id === key);
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      "li",
+      {
+        className: "fractal-column-editor__row",
+        "data-column-editor-item": key,
+        "data-hidden": isHidden || void 0,
+        "data-dragging": preview?.active === key || void 0,
+        onPointerDown: (event) => start(event, key),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.DotsSixVertical, { className: "fractal-column-editor__grip", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "fractal-column-editor__name", children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "fractal-column-editor__actions", onPointerDown: (event) => event.stopPropagation(), children: isHidden ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.Eye, { "aria-hidden": "true" }), "aria-label": `Show ${item.label} column`, onClick: () => commit([...committed, key], `${item.label} shown`) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.ArrowUp, { "aria-hidden": "true" }), "aria-label": `Move ${item.label} up`, disabled: index === 0, onClick: () => move(key, -1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: index === visible.length - 1 && !item.required ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.EyeSlash, { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.ArrowDown, { "aria-hidden": "true" }), "aria-label": index === visible.length - 1 && !item.required ? `Hide ${item.label} column` : `Move ${item.label} down`, disabled: index === visible.length - 1 && item.required, onClick: () => move(key, 1) })
+          ] }) })
+        ]
+      },
+      key
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("fractal-column-editor", className), ref: root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { ref: trigger, controlSize: "lg", buttonType: "secondary", icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.Gear, { "aria-hidden": "true" }), iconPosition: "right", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": id, onClick: () => {
+      cancel();
+      setOpen((current) => !current);
+    }, children: label }),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { id, className: "fractal-column-editor__panel", ref: panel, role: "dialog", "data-dragging": Boolean(preview) || void 0, "aria-label": label, tabIndex: -1, onPointerMove: update, onPointerUp: finish, onPointerCancel: cancel, onLostPointerCapture: cancel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ol", { className: "fractal-column-editor__list", "data-column-editor-group": "visible", "aria-label": "Visible columns", children: visible.map((key, index) => row(key, false, index)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("section", { "data-column-editor-group": "hidden", className: "fractal-column-editor__hidden", "aria-label": hiddenLabel, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "fractal-column-editor__divider", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
+          hiddenLabel,
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.EyeSlash, { "aria-hidden": "true" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ol", { className: "fractal-column-editor__list", children: hidden.map((key, index) => row(key, true, index)) }),
+        !hidden.length ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "fractal-column-editor__empty", children: "Drag columns here to hide them." }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "fractal-column-editor__announcement", role: "status", "aria-live": "polite", children: announcement })
+    ] }) : null
+  ] });
+}
+
+// src/components/Tooltip/Tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function Tooltip({
+  content,
+  children,
+  placement = "bottom",
+  maxWidth = 320,
+  delay = 0,
+  disabled = false,
+  className
+}) {
+  if (disabled || content == null || content === "") return children;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(TooltipPrimitive.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      TooltipPrimitive.Content,
+      {
+        side: placement,
+        sideOffset: 8,
+        collisionPadding: 8,
+        className: cn("fractal-tooltip", className),
+        style: { "--tooltip-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth },
+        children: content
+      }
+    ) })
+  ] }) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
   AlertDescription,
+  AlertGhost,
   AlertTitle,
+  Breadcrumbs,
   Button,
+  ButtonGhost,
   Card,
   CardContent,
   CardDescription,
   CardFooter,
+  CardGhost,
   CardHeader,
   CardTitle,
+  Checkbox,
+  CheckboxGhost,
   Chip,
+  ChipGhost,
+  CodeBlock,
+  ColumnEditor,
+  ContentSwitcher,
+  ContentSwitcherGhost,
+  ConversationGhost,
   DataTable,
+  DataTableGhost,
   Disclosure,
+  DisclosureGhost,
   Dropdown,
+  DropdownGhost,
   FeatureCard,
+  FileDropzone,
+  FileDropzoneGhost,
   FolderCard,
+  Ghost,
+  GhostLine,
   Input,
+  InputGhost,
   Label,
+  LabelGhost,
+  LatticeLoader,
   Link,
+  LinkGhost,
   Modal,
+  ModalGhost,
+  NumberInput,
+  Pagination,
+  PaginationGhost,
+  PasswordInput,
   PromptCard,
+  PromptCardGhost,
   PromptGrid,
+  Radio,
   SidePanel,
+  SidePanelGhost,
   Sidebar,
+  SidebarAccountMenu,
   SidebarBrand,
   SidebarFooter,
+  SidebarGhost,
   SidebarHeader,
   SidebarNav,
   SidebarNavItem,
   SidebarSection,
+  Slider,
   SortableTable,
+  SortableTableGhost,
+  TableSearch,
   Tabs,
+  TabsGhost,
+  TextButton,
+  TextButtonGhost,
   Textarea,
+  TextareaGhost,
+  Toast,
+  ToastViewport,
   Toggle,
+  ToggleGhost,
+  Tooltip,
+  UILoader,
   cn,
   useEscapeDismiss
 });