@mirror-physics/fractal-ui 0.2.0-next.2 → 0.2.0-next.20

package/dist/index.cjs

@@ -40,18 +40,24 @@ __export(index_exports, {
   CardFooter: () => CardFooter,
   CardHeader: () => CardHeader,
   CardTitle: () => CardTitle,
+  Checkbox: () => Checkbox,
   Chip: () => Chip,
+  ContentSwitcher: () => ContentSwitcher,
   DataTable: () => DataTable,
   Disclosure: () => Disclosure,
   Dropdown: () => Dropdown,
   FeatureCard: () => FeatureCard,
+  FileDropzone: () => FileDropzone,
   FolderCard: () => FolderCard,
   Input: () => Input,
   Label: () => Label,
+  LatticeLoader: () => LatticeLoader,
   Link: () => Link,
   Modal: () => Modal,
+  Pagination: () => Pagination,
   PromptCard: () => PromptCard,
   PromptGrid: () => PromptGrid,
+  SidePanel: () => SidePanel,
   Sidebar: () => Sidebar,
   SidebarBrand: () => SidebarBrand,
   SidebarFooter: () => SidebarFooter,
@@ -61,6 +67,8 @@ __export(index_exports, {
   SidebarSection: () => SidebarSection,
   SortableTable: () => SortableTable,
   Tabs: () => Tabs,
+  TextButton: () => TextButton,
+  Textarea: () => Textarea,
   Toggle: () => Toggle,
   cn: () => cn,
   useEscapeDismiss: () => useEscapeDismiss
@@ -119,7 +127,7 @@ var colorPalette = {
 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: "38px", padding: "8px 16px", iconOnly: "38px", fontSize: "0.875rem" },
+  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" }
 };
@@ -733,23 +741,52 @@ var Chip = React9.forwardRef(
 );
 Chip.displayName = "Chip";
 
-// src/components/SortableTable/SortableTable.tsx
-var import_react2 = require("react");
+// src/components/Checkbox/Checkbox.tsx
 var import_fractal_icons3 = require("@mirror-physics/fractal-icons");
 var import_jsx_runtime13 = require("react/jsx-runtime");
+function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKeyDown, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "button",
+    {
+      ...props,
+      className: cn("fractal-checkbox", checked && "fractal-checkbox--checked", className),
+      type: "button",
+      role: "checkbox",
+      "aria-checked": checked,
+      disabled,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) onCheckedChange(!checked);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.key === " " || event.key === "Enter") event.stopPropagation();
+      },
+      children: checked ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fractal_icons3.CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fractal_icons3.Checkbox, { "aria-hidden": "true", size: 18 })
+    }
+  );
+}
+
+// src/components/SortableTable/SortableTable.tsx
+var import_react2 = require("react");
+var import_fractal_icons4 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function SortableTable({
   columns,
   data,
   emptyMessage,
   header,
   size = "md",
+  embedded = false,
   className,
   defaultSortKey = void 0,
   defaultSortDirection = null,
   sortKey: controlledKey,
   sortDirection: controlledDirection,
   onSortChange,
-  highlightRow
+  highlightRow,
+  onRowClick,
+  rowAction
 }) {
   const [internalKey, setInternalKey] = (0, import_react2.useState)(defaultSortKey ?? null);
   const [internalDirection, setInternalDirection] = (0, import_react2.useState)(defaultSortDirection);
@@ -802,13 +839,13 @@ 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) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
+    sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "fractal-sortable-table-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.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)(
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "th",
             {
               className: "fractal-sortable-table-th",
@@ -818,12 +855,12 @@ function SortableTable({
             col.key
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "th",
           {
             className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
             style: { width: col.width },
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
               "button",
               {
                 type: "button",
@@ -834,8 +871,8 @@ function SortableTable({
                 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 }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: col.header }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fractal_icons4.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fractal_icons4.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fractal_icons4.ArrowsUpDown, { size: 14 }) })
                 ]
               }
             )
@@ -843,21 +880,42 @@ function SortableTable({
           col.key
         );
       }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: sorted.map((row, rowIndex) => {
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: sorted.map((row, rowIndex) => {
         const highlighted = highlightRow?.(row, rowIndex) ?? false;
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        const action = rowAction ? {
+          label: rowAction.label(row, rowIndex),
+          icon: rowAction.icon(row, rowIndex)
+        } : null;
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "tr",
           {
             className: cn(
               "fractal-sortable-table-row",
-              highlighted && "fractal-sortable-table-row--highlighted"
+              highlighted && "fractal-sortable-table-row--highlighted",
+              onRowClick && "fractal-sortable-table-row--interactive"
             ),
-            children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
+            onKeyDown: onRowClick ? (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onRowClick(row, rowIndex);
+              }
+            } : void 0,
+            "aria-label": action?.label,
+            role: onRowClick ? "button" : void 0,
+            tabIndex: onRowClick ? 0 : void 0,
+            children: columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
               "td",
               {
-                className: "fractal-sortable-table-td",
+                className: cn(
+                  "fractal-sortable-table-td",
+                  action && columnIndex === columns.length - 1 && "fractal-sortable-table-td--row-action"
+                ),
                 style: { width: col.width, textAlign: col.align ?? "left" },
-                children: col.render(row, rowIndex)
+                children: [
+                  col.render(row, rowIndex),
+                  action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
+                ]
               },
               col.key
             ))
@@ -871,7 +929,7 @@ function SortableTable({
 
 // src/components/Tabs/Tabs.tsx
 var import_react3 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Tabs({
   items,
   defaultValue,
@@ -886,7 +944,22 @@ function Tabs({
   );
   const isControlled = controlledValue !== void 0;
   const activeId = isControlled ? controlledValue : internalValue;
+  const tabListRef = (0, import_react3.useRef)(null);
   const tabRefs = (0, import_react3.useRef)({});
+  const [indicator, setIndicator] = (0, import_react3.useState)(null);
+  (0, import_react3.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);
@@ -896,6 +969,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;
@@ -921,41 +998,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_runtime15.jsxs)("div", { className: cn("fractal-tabs", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.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_runtime15.jsx)(
         "div",
         {
           id: panelId,
@@ -971,10 +1059,55 @@ function Tabs({
   ] });
 }
 
+// src/components/ContentSwitcher/ContentSwitcher.tsx
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
+  const buttonRefs = React10.useRef([]);
+  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_runtime16.jsx)("div", { className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className), role: "group", "aria-label": ariaLabel, children: items.map((item, index) => {
+    const active = item.value === value;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.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_fractal_icons5 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function Disclosure({
   title,
   meta,
@@ -982,6 +1115,7 @@ function Disclosure({
   defaultOpen = false,
   open: controlledOpen,
   onOpenChange,
+  disabled = false,
   className,
   variant = "card"
 }) {
@@ -992,6 +1126,7 @@ function Disclosure({
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const toggle = () => {
+    if (disabled) return;
     const next = !isOpen;
     if (isControlled) {
       onOpenChange?.(next);
@@ -1000,17 +1135,18 @@ function Disclosure({
       onOpenChange?.(next);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsxs)(
           "button",
           {
             type: "button",
@@ -1018,15 +1154,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_runtime17.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons5.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons5.ChevronRight, { size: 16 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fractal-disclosure-title", children: title }),
+              meta && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           {
             id: panelId,
@@ -1034,7 +1171,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_runtime17.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
           }
         )
       ]
@@ -1042,11 +1179,36 @@ function Disclosure({
   );
 }
 
+// src/components/LatticeLoader/LatticeLoader.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var LATTICE_COUNT = 160;
+var WAVE_PERIOD = 80;
+function LatticeLoader({ className, label = "Loading", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsx)(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "fractal-lattice-loader__cell",
+          style: { "--fractal-lattice-index": index % WAVE_PERIOD }
+        },
+        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 React11 = __toESM(require("react"), 1);
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Sidebar = React11.forwardRef(
+  ({ className, width, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "aside",
     {
       ref,
@@ -1057,24 +1219,24 @@ var Sidebar = React10.forwardRef(
   )
 );
 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 = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.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 = React11.forwardRef(
+  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.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 })
+var SidebarNav = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.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 = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.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 = React11.forwardRef(
+  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "button",
     {
       ref,
@@ -1084,18 +1246,245 @@ 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_runtime19.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
+        endAdornment && /* @__PURE__ */ (0, import_jsx_runtime19.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 = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.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_icons6 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function SidePanel({ open, onClose, title, description, children, footer, size = "md", className }) {
+  useEscapeDismiss(80, onClose, open);
+  if (!open) return null;
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "aside",
+      {
+        className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
+        "aria-modal": "true",
+        "aria-label": typeof title === "string" ? title : "Side panel",
+        role: "dialog",
+        onMouseDown: (event) => event.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("header", { className: "fractal-side-panel__header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fractal-side-panel__heading", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "fractal-side-panel__title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "fractal-side-panel__description", children: description })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons6.Close, { size: 18 }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-side-panel__body", children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("footer", { className: "fractal-side-panel__footer", children: footer })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+// src/components/Textarea/Textarea.tsx
+var React12 = __toESM(require("react"), 1);
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Textarea = React12.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("textarea", { ref, className: cn("fractal-textarea", className), ...props })
+);
+Textarea.displayName = "Textarea";
+
+// src/components/TextButton/TextButton.tsx
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var TextButton = React13.forwardRef(
+  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children }),
+        icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
+      ]
+    }
+  )
+);
+TextButton.displayName = "TextButton";
+
+// src/components/FileDropzone/FileDropzone.tsx
+var React14 = __toESM(require("react"), 1);
+var import_fractal_icons7 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime23 = 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 = React14.useId();
+  const inputRef = React14.useRef(null);
+  const [isDragging, setIsDragging] = React14.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_runtime23.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.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_runtime23.jsx)(import_fractal_icons7.FileArrowUp, { "aria-hidden": "true", size: 20 }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
+          ] })
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(import_fractal_icons7.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_icons8 = require("@mirror-physics/fractal-icons");
+var import_jsx_runtime24 = 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_runtime24.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "fractal-pagination__controls", children: [
+      canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.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_runtime24.jsx)(import_fractal_icons8.ArrowLeft, { "aria-hidden": "true", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
+        currentPage,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(import_fractal_icons8.ArrowRight, { "aria-hidden": "true", size: 16 })
+        }
+      )
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -1108,18 +1497,24 @@ SidebarFooter.displayName = "SidebarFooter";
   CardFooter,
   CardHeader,
   CardTitle,
+  Checkbox,
   Chip,
+  ContentSwitcher,
   DataTable,
   Disclosure,
   Dropdown,
   FeatureCard,
+  FileDropzone,
   FolderCard,
   Input,
   Label,
+  LatticeLoader,
   Link,
   Modal,
+  Pagination,
   PromptCard,
   PromptGrid,
+  SidePanel,
   Sidebar,
   SidebarBrand,
   SidebarFooter,
@@ -1129,6 +1524,8 @@ SidebarFooter.displayName = "SidebarFooter";
   SidebarSection,
   SortableTable,
   Tabs,
+  TextButton,
+  Textarea,
   Toggle,
   cn,
   useEscapeDismiss