@mirror-physics/fractal-ui 0.2.0-next.3 → 0.2.0-next.30

package/dist/index.js

@@ -50,7 +50,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" }
 };
@@ -329,28 +329,32 @@ Label.displayName = "Label";
 
 // src/components/Alert/Alert.tsx
 import * as React6 from "react";
+import { CircleCheck, CircleClose, CircleInfo, Warning } from "@mirror-physics/fractal-icons";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultIcons = {
-  default: "\u2139",
-  info: "\u2139",
-  success: "\u2713",
-  warning: "\u26A0",
-  error: "\u2715"
+  default: CircleInfo,
+  info: CircleInfo,
+  success: CircleCheck,
+  warning: Warning,
+  error: CircleClose
 };
 var Alert = React6.forwardRef(
-  ({ className, variant = "default", icon, children, ...props }, ref) => /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      ref,
-      role: "alert",
-      className: cn("fractal-alert", `fractal-alert--${variant}`, className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx5("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? defaultIcons[variant] }),
-        /* @__PURE__ */ jsx5("div", { className: "fractal-alert-content", children })
-      ]
-    }
-  )
+  ({ className, variant = "default", icon, children, ...props }, ref) => {
+    const DefaultIcon = defaultIcons[variant];
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn("fractal-alert", `fractal-alert--${variant}`, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx5("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx5(DefaultIcon, { size: 18 }) }),
+          /* @__PURE__ */ jsx5("div", { className: "fractal-alert-content", children })
+        ]
+      }
+    );
+  }
 );
 Alert.displayName = "Alert";
 var AlertTitle = React6.forwardRef(
@@ -434,27 +438,72 @@ function useEscapeDismiss(priority, handler, enabled = true) {
   }, [priority, enabled]);
 }
 
-// src/components/Modal/Modal.tsx
+// src/components/UILoader/UILoader.tsx
+import { useId } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var CloseIcon = () => /* @__PURE__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx7("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 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 = 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__ */ jsx7(
+    "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__ */ jsxs6("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
+        /* @__PURE__ */ jsxs6("defs", { children: [
+          /* @__PURE__ */ jsxs6("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx7("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
+            /* @__PURE__ */ jsx7("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
+          ] }),
+          /* @__PURE__ */ jsxs6("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+            /* @__PURE__ */ jsx7("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ jsx7("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
+            /* @__PURE__ */ jsx7("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
+          ] }),
+          /* @__PURE__ */ jsxs6("clipPath", { id: clipId, children: [
+            /* @__PURE__ */ jsx7("path", { d: LEFT }),
+            /* @__PURE__ */ jsx7("path", { d: CENTER }),
+            /* @__PURE__ */ jsx7("path", { d: RIGHT })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx7("path", { d: CENTER, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ jsx7("path", { d: RIGHT, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ jsx7("path", { d: LEFT, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ jsx7("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx7("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ jsx7("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
+      ] })
+    }
+  );
+}
+
+// src/components/Modal/Modal.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var CloseIcon = () => /* @__PURE__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx8("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", className }) {
+  useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
   if (!open) return null;
   const sizeClass = `fractal-modal-panel--${size}`;
   const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
   return createPortal(
-    /* @__PURE__ */ jsx7("div", { className: "fractal-modal-overlay", onClick: noClose ? void 0 : onClose, children: /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsx8("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ jsxs7(
       "div",
       {
         className: cn("fractal-modal-panel", sizeClass, accentClass, className),
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs6("div", { className: "fractal-modal-title-row", children: [
-            /* @__PURE__ */ jsx7("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
-            !noClose && /* @__PURE__ */ jsx7("button", { type: "button", onClick: onClose, title: "Close", className: "fractal-modal-close", children: /* @__PURE__ */ jsx7(CloseIcon, {}) })
+          /* @__PURE__ */ jsxs7("div", { className: "fractal-modal-title-row", children: [
+            /* @__PURE__ */ jsx8("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
+            !noClose && /* @__PURE__ */ jsx8("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ jsx8(CloseIcon, {}) })
           ] }),
-          /* @__PURE__ */ jsx7("div", { className: cn("fractal-modal-body", size === "lg" && "fractal-modal-body--lg"), children }),
-          footer && /* @__PURE__ */ jsx7("div", { className: "fractal-modal-footer", children: footer })
+          /* @__PURE__ */ jsx8("div", { "aria-busy": loading || void 0, className: cn("fractal-modal-body", size === "lg" && "fractal-modal-body--lg", loading && "fractal-modal-body--loading"), children: loading ? /* @__PURE__ */ jsx8(UILoader, { label: loadingLabel }) : children }),
+          footer && /* @__PURE__ */ jsx8("div", { className: "fractal-modal-footer", children: footer })
         ]
       }
     ) }),
@@ -463,17 +512,17 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
 }
 
 // src/components/DataTable/DataTable.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
-  return /* @__PURE__ */ jsx8("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ jsxs7("div", { className: "fractal-datatable-surface", children: [
-    header && /* @__PURE__ */ jsx8("div", { className: "fractal-datatable-header", children: header }),
-    data.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs7("table", { className: "fractal-datatable-table", children: [
-      /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsx8("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ jsx8("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
-      /* @__PURE__ */ jsx8("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ jsxs8("div", { className: "fractal-datatable-surface", children: [
+    header && /* @__PURE__ */ jsx9("div", { className: "fractal-datatable-header", children: header }),
+    data.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs8("table", { className: "fractal-datatable-table", children: [
+      /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsx9("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ jsx9("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
+      /* @__PURE__ */ jsx9("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx9(
         "tr",
         {
           className: "fractal-datatable-row",
-          children: columns.map((col) => /* @__PURE__ */ jsx8("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
+          children: columns.map((col) => /* @__PURE__ */ jsx9("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
         },
         rowIndex
       )) })
@@ -484,7 +533,7 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
 // src/components/Dropdown/Dropdown.tsx
 import * as React7 from "react";
 import { ChevronDown, ChevronUp } from "@mirror-physics/fractal-icons";
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var MARGIN = 4;
 function Dropdown({
   items,
@@ -495,13 +544,15 @@ function Dropdown({
   align = "left",
   triggerContent,
   label,
+  iconOnly = false,
   noChevron = false,
   size = "md",
   triggerVariant = "outline",
   className,
   triggerClassName,
   panelClassName,
-  closeOnSelect = true
+  closeOnSelect = true,
+  disabled = false
 }) {
   const [open, setOpen] = React7.useState(false);
   const triggerRef = React7.useRef(null);
@@ -559,12 +610,13 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  return /* @__PURE__ */ jsxs8("div", { className: cn("fractal-dropdown", className), children: [
-    /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9("div", { className: cn("fractal-dropdown", className), children: [
+    /* @__PURE__ */ jsxs9(
       "button",
       {
         ref: triggerRef,
         type: "button",
+        disabled,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         "aria-label": triggerLabel,
@@ -573,18 +625,19 @@ function Dropdown({
           "fractal-dropdown-trigger",
           `fractal-dropdown-trigger--${size}`,
           `fractal-dropdown-trigger--${triggerVariant}`,
+          iconOnly && "fractal-dropdown-trigger--icon-only",
           triggerClassName
         ),
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs8(Fragment2, { children: [
-            selected.icon != null && /* @__PURE__ */ jsx9("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
-            selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ jsx9("span", { className: "fractal-dropdown-selected-text", children: selected.description })
+          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs9(Fragment2, { children: [
+            selected.icon != null && /* @__PURE__ */ jsx10("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
+            selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ jsx10("span", { className: "fractal-dropdown-selected-text", children: selected.description })
           ] }),
-          !noChevron && /* @__PURE__ */ jsx9("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx9(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
+          !noChevron && !iconOnly && /* @__PURE__ */ jsx10("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx10(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs8(
+    open && /* @__PURE__ */ jsxs9(
       "div",
       {
         ref: panelRef,
@@ -593,21 +646,21 @@ function Dropdown({
         className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
         style: panelStyle,
         children: [
-          label != null && /* @__PURE__ */ jsx9("div", { className: "fractal-dropdown-label", children: label }),
+          label != null && /* @__PURE__ */ jsx10("div", { className: "fractal-dropdown-label", children: label }),
           visibleItems.map((item, index) => {
-            const topDivider = item.border === "top" ? /* @__PURE__ */ jsx9("div", { className: "fractal-dropdown-separator" }) : null;
-            const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx9("div", { className: "fractal-dropdown-separator" }) : null;
+            const topDivider = item.border === "top" ? /* @__PURE__ */ jsx10("div", { className: "fractal-dropdown-separator" }) : null;
+            const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx10("div", { className: "fractal-dropdown-separator" }) : null;
             if (item.kind === "header") {
-              return /* @__PURE__ */ jsxs8(React7.Fragment, { children: [
+              return /* @__PURE__ */ jsxs9(React7.Fragment, { children: [
                 topDivider,
-                /* @__PURE__ */ jsx9("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
+                /* @__PURE__ */ jsx10("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
                 bottomDivider
               ] }, `header-${index}`);
             }
             const isSelected = item.value === selectedValue;
-            return /* @__PURE__ */ jsxs8(React7.Fragment, { children: [
+            return /* @__PURE__ */ jsxs9(React7.Fragment, { children: [
               topDivider,
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 "button",
                 {
                   type: "button",
@@ -619,9 +672,9 @@ function Dropdown({
                   },
                   className: "fractal-dropdown-option",
                   children: [
-                    item.icon != null && /* @__PURE__ */ jsx9("span", { className: "fractal-dropdown-icon", children: item.icon }),
-                    item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx9("span", { className: "fractal-dropdown-option-text", children: item.description }),
-                    item.trailing != null && /* @__PURE__ */ jsx9("span", { className: "fractal-dropdown-trailing", children: item.trailing })
+                    item.icon != null && /* @__PURE__ */ jsx10("span", { className: "fractal-dropdown-icon", children: item.icon }),
+                    item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx10("span", { className: "fractal-dropdown-option-text", children: item.description }),
+                    item.trailing != null && /* @__PURE__ */ jsx10("span", { className: "fractal-dropdown-trailing", children: item.trailing })
                   ]
                 }
               ),
@@ -636,9 +689,9 @@ function Dropdown({
 
 // src/components/Link/Link.tsx
 import * as React8 from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Link = React8.forwardRef(
-  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx10(
+  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx11(
     "a",
     {
       ref,
@@ -651,9 +704,9 @@ Link.displayName = "Link";
 
 // src/components/Chip/Chip.tsx
 import * as React9 from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Chip = React9.forwardRef(
-  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx11(
+  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx12(
     "span",
     {
       ref,
@@ -664,35 +717,69 @@ var Chip = React9.forwardRef(
 );
 Chip.displayName = "Chip";
 
+// src/components/Checkbox/Checkbox.tsx
+import { Checkbox as CheckboxIcon, CheckboxChecked } from "@mirror-physics/fractal-icons";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKeyDown, ...props }) {
+  return /* @__PURE__ */ jsx13(
+    "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__ */ jsx13(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx13(CheckboxIcon, { "aria-hidden": "true", size: 18 })
+    }
+  );
+}
+
 // src/components/SortableTable/SortableTable.tsx
 import { useMemo, useState as useState3 } from "react";
 import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function SortableTable({
   columns,
   data,
   emptyMessage,
   header,
   size = "md",
+  embedded = false,
   className,
+  defaultSort,
   defaultSortKey = void 0,
   defaultSortDirection = null,
   sortKey: controlledKey,
   sortDirection: controlledDirection,
   onSortChange,
-  highlightRow
+  highlightRow,
+  onRowClick,
+  rowAction
 }) {
   const [internalKey, setInternalKey] = useState3(defaultSortKey ?? null);
   const [internalDirection, setInternalDirection] = useState3(defaultSortDirection);
   const isControlled = controlledKey !== void 0 && controlledDirection !== void 0;
   const activeKey = isControlled ? controlledKey : internalKey;
   const activeDirection = isControlled ? controlledDirection : internalDirection;
+  const baselineKey = defaultSort?.key ?? null;
+  const baselineDirection = defaultSort?.direction ?? null;
+  const effectiveKey = activeKey && activeDirection ? activeKey : baselineKey;
+  const effectiveDirection = activeKey && activeDirection ? activeDirection : baselineDirection;
   const sorted = useMemo(() => {
-    if (!activeKey || !activeDirection) return data;
-    const col = columns.find((c) => c.key === activeKey);
+    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];
@@ -703,26 +790,28 @@ 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 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) {
@@ -733,13 +822,13 @@ function SortableTable({
       onSortChange?.(nextKey, nextDirection);
     }
   };
-  return /* @__PURE__ */ jsx12("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, className), children: /* @__PURE__ */ jsxs9("div", { className: "fractal-sortable-table-surface", children: [
-    header && /* @__PURE__ */ jsx12("div", { className: "fractal-sortable-table-header", children: header }),
-    sorted.length === 0 ? /* @__PURE__ */ jsx12("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs9("table", { className: "fractal-sortable-table-table", children: [
-      /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsx12("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
+  return /* @__PURE__ */ jsx14("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs10("div", { className: "fractal-sortable-table-surface", children: [
+    header && /* @__PURE__ */ jsx14("div", { className: "fractal-sortable-table-header", children: header }),
+    sorted.length === 0 ? /* @__PURE__ */ jsx14("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs10("table", { className: "fractal-sortable-table-table", children: [
+      /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
         const isActive = activeKey === col.key && activeDirection !== null;
         if (!col.sortable) {
-          return /* @__PURE__ */ jsx12(
+          return /* @__PURE__ */ jsx14(
             "th",
             {
               className: "fractal-sortable-table-th",
@@ -749,12 +838,12 @@ function SortableTable({
             col.key
           );
         }
-        return /* @__PURE__ */ jsx12(
+        return /* @__PURE__ */ jsx14(
           "th",
           {
             className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
             style: { width: col.width },
-            children: /* @__PURE__ */ jsxs9(
+            children: /* @__PURE__ */ jsxs10(
               "button",
               {
                 type: "button",
@@ -765,8 +854,8 @@ function SortableTable({
                 onClick: () => handleSortClick(col.key),
                 "aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
                 children: [
-                  /* @__PURE__ */ jsx12("span", { children: col.header }),
-                  /* @__PURE__ */ jsx12("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx12(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx12(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx12(ArrowsUpDown, { size: 14 }) })
+                  /* @__PURE__ */ jsx14("span", { children: col.header }),
+                  /* @__PURE__ */ jsx14("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx14(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx14(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx14(ArrowsUpDown, { size: 14 }) })
                 ]
               }
             )
@@ -774,21 +863,42 @@ function SortableTable({
           col.key
         );
       }) }) }),
-      /* @__PURE__ */ jsx12("tbody", { children: sorted.map((row, rowIndex) => {
+      /* @__PURE__ */ jsx14("tbody", { children: sorted.map((row, rowIndex) => {
         const highlighted = highlightRow?.(row, rowIndex) ?? false;
-        return /* @__PURE__ */ jsx12(
+        const action = rowAction ? {
+          label: rowAction.label(row, rowIndex),
+          icon: rowAction.icon(row, rowIndex)
+        } : null;
+        return /* @__PURE__ */ jsx14(
           "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__ */ jsx12(
+            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__ */ jsxs10(
               "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__ */ jsx14("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx14("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
+                ]
               },
               col.key
             ))
@@ -801,23 +911,39 @@ function SortableTable({
 }
 
 // src/components/Tabs/Tabs.tsx
-import { useId, useRef as useRef3, useState as useState4 } from "react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState4 } from "react";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function Tabs({
   items,
   defaultValue,
   value: controlledValue,
   onValueChange,
   className,
-  ariaLabel
+  ariaLabel,
+  divider = false
 }) {
-  const reactId = useId();
+  const reactId = useId2();
   const [internalValue, setInternalValue] = useState4(
     defaultValue ?? items.find((i) => !i.disabled)?.id ?? items[0]?.id ?? ""
   );
   const isControlled = controlledValue !== void 0;
   const activeId = isControlled ? controlledValue : internalValue;
+  const tabListRef = useRef3(null);
   const tabRefs = useRef3({});
+  const [indicator, setIndicator] = useState4(null);
+  useLayoutEffect2(() => {
+    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);
@@ -827,6 +953,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;
@@ -852,41 +982,52 @@ function Tabs({
     selectTab(nextId2);
     requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
   };
-  return /* @__PURE__ */ jsxs10("div", { className: cn("fractal-tabs", className), children: [
-    /* @__PURE__ */ jsx13("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__ */ jsx13(
-        "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__ */ jsxs11("div", { className: cn("fractal-tabs", divider && "fractal-tabs--divider", className), children: [
+    /* @__PURE__ */ jsx15(
+      "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__ */ jsx15(
+            "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__ */ jsx13(
+      return /* @__PURE__ */ jsx15(
         "div",
         {
           id: panelId,
@@ -902,10 +1043,94 @@ function Tabs({
   ] });
 }
 
+// src/components/ContentSwitcher/ContentSwitcher.tsx
+import * as React10 from "react";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
+  const switcherRef = React10.useRef(null);
+  const buttonRefs = React10.useRef([]);
+  const activeIndex = items.findIndex((item) => item.value === value);
+  React10.useLayoutEffect(() => {
+    const switcher = switcherRef.current;
+    const activeButton = buttonRefs.current[activeIndex];
+    if (!switcher || !activeButton) {
+      switcher?.removeAttribute("data-indicator-ready");
+      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");
+    };
+    updateIndicator();
+    if (typeof ResizeObserver === "undefined") return;
+    const resizeObserver = new ResizeObserver(updateIndicator);
+    resizeObserver.observe(switcher);
+    buttonRefs.current.forEach((button) => {
+      if (button) resizeObserver.observe(button);
+    });
+    return () => resizeObserver.disconnect();
+  }, [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__ */ jsxs12(
+    "div",
+    {
+      className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
+      role: "group",
+      "aria-label": ariaLabel,
+      ref: switcherRef,
+      children: [
+        /* @__PURE__ */ jsx16("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
+        items.map((item, index) => {
+          const active = item.value === value;
+          return /* @__PURE__ */ jsx16(
+            "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
-import { useId as useId2, useState as useState5 } from "react";
+import { useId as useId3, useState as useState5 } from "react";
 import { ChevronRight, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function Disclosure({
   title,
   meta,
@@ -913,16 +1138,18 @@ function Disclosure({
   defaultOpen = false,
   open: controlledOpen,
   onOpenChange,
+  disabled = false,
   className,
   variant = "card"
 }) {
-  const reactId = useId2();
+  const reactId = useId3();
   const headerId = `${reactId}-header`;
   const panelId = `${reactId}-panel`;
   const [internalOpen, setInternalOpen] = useState5(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const toggle = () => {
+    if (disabled) return;
     const next = !isOpen;
     if (isControlled) {
       onOpenChange?.(next);
@@ -931,17 +1158,18 @@ function Disclosure({
       onOpenChange?.(next);
     }
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: cn(
         "fractal-disclosure",
         variant === "card" && "fractal-disclosure--card",
         isOpen && "fractal-disclosure--open",
+        disabled && "fractal-disclosure--disabled",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsxs13(
           "button",
           {
             type: "button",
@@ -949,15 +1177,16 @@ function Disclosure({
             className: "fractal-disclosure-trigger",
             "aria-expanded": isOpen,
             "aria-controls": panelId,
+            disabled,
             onClick: toggle,
             children: [
-              /* @__PURE__ */ jsx14("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx14(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx14(ChevronRight, { size: 16 }) }),
-              /* @__PURE__ */ jsx14("span", { className: "fractal-disclosure-title", children: title }),
-              meta && /* @__PURE__ */ jsx14("span", { className: "fractal-disclosure-meta", children: meta })
+              /* @__PURE__ */ jsx17("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx17(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx17(ChevronRight, { size: 16 }) }),
+              /* @__PURE__ */ jsx17("span", { className: "fractal-disclosure-title", children: title }),
+              meta && /* @__PURE__ */ jsx17("span", { className: "fractal-disclosure-meta", children: meta })
             ]
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx17(
           "div",
           {
             id: panelId,
@@ -965,7 +1194,7 @@ function Disclosure({
             "aria-labelledby": headerId,
             className: "fractal-disclosure-panel",
             hidden: !isOpen,
-            children: /* @__PURE__ */ jsx14("div", { className: "fractal-disclosure-panel-inner", children })
+            children: /* @__PURE__ */ jsx17("div", { className: "fractal-disclosure-panel-inner", children })
           }
         )
       ]
@@ -973,11 +1202,176 @@ function Disclosure({
   );
 }
 
+// src/components/LatticeLoader/LatticeLoader.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var LATTICE_COUNT = 160;
+var WAVE_PERIOD = 80;
+function LatticeLoader({ className, label = "Loading", ...props }) {
+  return /* @__PURE__ */ jsx18(
+    "span",
+    {
+      "aria-label": label,
+      className: cn("fractal-lattice-loader", className),
+      role: "progressbar",
+      ...props,
+      children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx18(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "fractal-lattice-loader__cell",
+          style: { "--fractal-lattice-index": index % WAVE_PERIOD }
+        },
+        index
+      ))
+    }
+  );
+}
+
+// src/components/Ghost/Ghost.tsx
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
+function Ghost({ className, width, height, radius, style, ...props }) {
+  return /* @__PURE__ */ jsx19(
+    "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__ */ jsx19(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
+}
+function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
+  return /* @__PURE__ */ jsx19(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
+}
+function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
+  return /* @__PURE__ */ jsxs14("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
+    showHeader && /* @__PURE__ */ jsx19(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ jsx19("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx19(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__ */ jsx19("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs14("table", { className: "fractal-ghost-table__table", children: [
+    (showHeader || headers) && /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsx19("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx19("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx19(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
+    /* @__PURE__ */ jsx19("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx19("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx19("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx19(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
+  ] }) });
+}
+function InputGhost({ className, labelWidth = "26%", ...props }) {
+  return /* @__PURE__ */ jsx19(FormFieldGhost, { className, labelWidth, ...props });
+}
+function TextareaGhost({ className, labelWidth = "26%", ...props }) {
+  return /* @__PURE__ */ jsx19(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
+}
+function LabelGhost({ className, width = "26%", ...props }) {
+  return /* @__PURE__ */ jsx19(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
+}
+function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
+  return /* @__PURE__ */ jsxs14("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
+    /* @__PURE__ */ jsx19(LabelGhost, { width: labelWidth }),
+    /* @__PURE__ */ jsx19(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
+  ] });
+}
+function AlertGhost({ className, ...props }) {
+  return /* @__PURE__ */ jsxs14("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
+    /* @__PURE__ */ jsx19(GhostLine, { width: "30%" }),
+    /* @__PURE__ */ jsx19(GhostLine, { size: "sm", width: "78%" })
+  ] });
+}
+function CheckboxGhost({ className, ...props }) {
+  return /* @__PURE__ */ jsxs14("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
+    /* @__PURE__ */ jsx19(Ghost, { className: "fractal-ghost-choice__control" }),
+    /* @__PURE__ */ jsx19(GhostLine, { width: "42%" })
+  ] });
+}
+var ToggleGhost = CheckboxGhost;
+function ChipGhost({ className, width = 74, ...props }) {
+  return /* @__PURE__ */ jsx19(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
+}
+function LinkGhost({ className, width = 96, ...props }) {
+  return /* @__PURE__ */ jsx19(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
+}
+var TextButtonGhost = LinkGhost;
+function DropdownGhost({ className, ...props }) {
+  return /* @__PURE__ */ jsxs14("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
+    /* @__PURE__ */ jsx19(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ jsx19(Ghost, { className: "fractal-ghost-dropdown__chevron" })
+  ] });
+}
+function ContentSwitcherGhost({ className, options = 3, ...props }) {
+  return /* @__PURE__ */ jsx19("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx19(Ghost, {}, index)) });
+}
+var TabsGhost = ContentSwitcherGhost;
+function DisclosureGhost({ className, ...props }) {
+  return /* @__PURE__ */ jsxs14("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
+    /* @__PURE__ */ jsx19(Ghost, { className: "fractal-ghost-disclosure__icon" }),
+    /* @__PURE__ */ jsx19(GhostLine, { width: "42%" })
+  ] });
+}
+function PaginationGhost({ className, pages = 5, ...props }) {
+  return /* @__PURE__ */ jsx19("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx19(Ghost, {}, index)) });
+}
+function FileDropzoneGhost({ className, ...props }) {
+  return /* @__PURE__ */ jsxs14("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
+    /* @__PURE__ */ jsx19(Ghost, { className: "fractal-ghost-dropzone__icon" }),
+    /* @__PURE__ */ jsx19(GhostLine, { width: "26%" }),
+    /* @__PURE__ */ jsx19(GhostLine, { size: "sm", width: "46%" })
+  ] });
+}
+function PromptCardGhost({ className, ...props }) {
+  return /* @__PURE__ */ jsx19(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
+}
+function SortableTableGhost(props) {
+  return /* @__PURE__ */ jsx19(DataTableGhost, { ...props });
+}
+function SidebarGhost({ className, items = 6, ...props }) {
+  return /* @__PURE__ */ jsxs14("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
+    /* @__PURE__ */ jsx19(Ghost, { className: "fractal-ghost-sidebar__brand" }),
+    /* @__PURE__ */ jsx19("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs14("div", { className: "fractal-ghost-sidebar__item", children: [
+      /* @__PURE__ */ jsx19(Ghost, {}),
+      /* @__PURE__ */ jsx19(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
+    ] }, index)) })
+  ] });
+}
+function ModalGhost({ className, title, lines = 3, ...props }) {
+  return /* @__PURE__ */ jsx19(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
+}
+function SidePanelGhost({ className, title, lines = 5, ...props }) {
+  return /* @__PURE__ */ jsx19(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
+}
+function SurfaceGhost({ className, title, lines = 3, ...props }) {
+  return /* @__PURE__ */ jsxs14("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
+    /* @__PURE__ */ jsxs14("div", { className: "fractal-ghost-surface__header", children: [
+      /* @__PURE__ */ jsx19(GhostLine, { width: "42%" }),
+      /* @__PURE__ */ jsx19(Ghost, { className: "fractal-ghost-surface__close" })
+    ] }),
+    title && /* @__PURE__ */ jsx19("div", { className: "fractal-ghost-surface__title", children: title }),
+    /* @__PURE__ */ jsx19("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx19(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
+  ] });
+}
+
 // src/components/Sidebar/Sidebar.tsx
-import * as React10 from "react";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
-var Sidebar = React10.forwardRef(
-  ({ className, width, style, ...props }, ref) => /* @__PURE__ */ jsx15(
+import * as React11 from "react";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var Sidebar = React11.forwardRef(
+  ({ className, width, style, ...props }, ref) => /* @__PURE__ */ jsx20(
     "aside",
     {
       ref,
@@ -988,24 +1382,47 @@ var Sidebar = React10.forwardRef(
   )
 );
 Sidebar.displayName = "Sidebar";
-var SidebarHeader = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx15("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
+var SidebarHeader = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx20("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
 );
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarBrand = React10.forwardRef(
-  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx15("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
+var SidebarBrand = React11.forwardRef(
+  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx20("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
 );
 SidebarBrand.displayName = "SidebarBrand";
-var SidebarNav = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx15("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
+function SidebarAccountMenu({
+  name,
+  items,
+  onSelect,
+  triggerLabel = "Account menu",
+  className
+}) {
+  return /* @__PURE__ */ jsx20(
+    Dropdown,
+    {
+      align: "left",
+      className: cn("fractal-sidebar__account", className),
+      items,
+      onSelect,
+      panelClassName: "fractal-sidebar__account-panel",
+      selectedValue: "",
+      triggerClassName: "fractal-sidebar__account-trigger",
+      triggerContent: /* @__PURE__ */ jsx20("span", { className: "fractal-sidebar__account-name", children: name }),
+      triggerLabel,
+      triggerVariant: "tertiary"
+    }
+  );
+}
+var SidebarNav = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx20("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
 );
 SidebarNav.displayName = "SidebarNav";
-var SidebarSection = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx15("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
+var SidebarSection = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx20("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__ */ jsxs12(
+var SidebarNavItem = React11.forwardRef(
+  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs15(
     "button",
     {
       ref,
@@ -1015,51 +1432,313 @@ var SidebarNavItem = React10.forwardRef(
       "aria-current": active ? "page" : void 0,
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx15("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsx15("span", { className: "fractal-sidebar__nav-item-label", children }),
-        endAdornment && /* @__PURE__ */ jsx15("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
+        icon && /* @__PURE__ */ jsx20("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx20("span", { className: "fractal-sidebar__nav-item-label", children }),
+        endAdornment && /* @__PURE__ */ jsx20("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
       ]
     }
   )
 );
 SidebarNavItem.displayName = "SidebarNavItem";
-var SidebarFooter = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx15("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
+var SidebarFooter = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx20("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
 );
 SidebarFooter.displayName = "SidebarFooter";
+
+// src/components/SidePanel/SidePanel.tsx
+import { createPortal as createPortal2 } from "react-dom";
+import { Close } from "@mirror-physics/fractal-icons";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
+  useEscapeDismiss(80, onClose, open);
+  if (!open) return null;
+  return createPortal2(
+    /* @__PURE__ */ jsx21("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs16(
+      "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__ */ jsxs16("header", { className: "fractal-side-panel__header", children: [
+            /* @__PURE__ */ jsxs16("div", { className: "fractal-side-panel__heading", children: [
+              /* @__PURE__ */ jsx21("h2", { className: "fractal-side-panel__title", children: title }),
+              description && /* @__PURE__ */ jsx21("p", { className: "fractal-side-panel__description", children: description })
+            ] }),
+            /* @__PURE__ */ jsx21("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx21(Close, { size: 18 }) })
+          ] }),
+          /* @__PURE__ */ jsx21("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx21(UILoader, { label: loadingLabel }) : children }),
+          footer && /* @__PURE__ */ jsx21("footer", { className: "fractal-side-panel__footer", children: footer })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+// src/components/Textarea/Textarea.tsx
+import * as React12 from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var Textarea = React12.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx22("textarea", { ref, className: cn("fractal-textarea", className), ...props })
+);
+Textarea.displayName = "Textarea";
+
+// src/components/TextButton/TextButton.tsx
+import * as React13 from "react";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var TextButton = React13.forwardRef(
+  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs17(
+    "button",
+    {
+      ref,
+      className: cn("fractal-text-button", `fractal-text-button--${size}`, `fractal-text-button--${tone}`, className),
+      type: "button",
+      ...props,
+      children: [
+        icon && iconPosition === "start" && /* @__PURE__ */ jsx23("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx23("span", { children }),
+        icon && iconPosition === "end" && /* @__PURE__ */ jsx23("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
+      ]
+    }
+  )
+);
+TextButton.displayName = "TextButton";
+
+// src/components/FileDropzone/FileDropzone.tsx
+import * as React14 from "react";
+import { Close as Close2, FileArrowUp } from "@mirror-physics/fractal-icons";
+import { jsx as jsx24, jsxs as jsxs18 } from "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__ */ jsxs18("div", { className: cn("fractal-file-dropzone", className), children: [
+    /* @__PURE__ */ jsx24(
+      "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__ */ jsxs18(
+      "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__ */ jsx24(FileArrowUp, { "aria-hidden": "true", size: 20 }),
+          /* @__PURE__ */ jsxs18("span", { className: "fractal-file-dropzone__copy", children: [
+            /* @__PURE__ */ jsx24("span", { className: "fractal-file-dropzone__title", children: title }),
+            description && /* @__PURE__ */ jsx24("span", { className: "fractal-file-dropzone__description", children: description })
+          ] })
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ jsx24("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs18("li", { className: "fractal-file-dropzone__file", children: [
+      /* @__PURE__ */ jsx24("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ jsx24("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
+      /* @__PURE__ */ jsx24(
+        "button",
+        {
+          className: "fractal-file-dropzone__remove",
+          type: "button",
+          "aria-label": `Remove ${file.name}`,
+          disabled,
+          onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
+          children: /* @__PURE__ */ jsx24(Close2, { "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
+import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
+import { jsx as jsx25, jsxs as jsxs19 } from "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__ */ jsxs19("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx25("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
+    /* @__PURE__ */ jsxs19("div", { className: "fractal-pagination__controls", children: [
+      canChangePageSize && /* @__PURE__ */ jsx25(
+        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__ */ jsx25(
+        "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__ */ jsx25(ArrowLeft, { "aria-hidden": "true", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsxs19("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
+        currentPage,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx25(
+        "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__ */ jsx25(ArrowRight, { "aria-hidden": "true", size: 16 })
+        }
+      )
+    ] })
+  ] });
+}
 export {
   Alert,
   AlertDescription,
+  AlertGhost,
   AlertTitle,
   Button,
+  ButtonGhost,
   Card,
   CardContent,
   CardDescription,
   CardFooter,
+  CardGhost,
   CardHeader,
   CardTitle,
+  Checkbox,
+  CheckboxGhost,
   Chip,
+  ChipGhost,
+  ContentSwitcher,
+  ContentSwitcherGhost,
   DataTable,
+  DataTableGhost,
   Disclosure,
+  DisclosureGhost,
   Dropdown,
+  DropdownGhost,
   FeatureCard,
+  FileDropzone,
+  FileDropzoneGhost,
   FolderCard,
+  Ghost,
+  GhostLine,
   Input,
+  InputGhost,
   Label,
+  LabelGhost,
+  LatticeLoader,
   Link,
+  LinkGhost,
   Modal,
+  ModalGhost,
+  Pagination,
+  PaginationGhost,
   PromptCard,
+  PromptCardGhost,
   PromptGrid,
+  SidePanel,
+  SidePanelGhost,
   Sidebar,
+  SidebarAccountMenu,
   SidebarBrand,
   SidebarFooter,
+  SidebarGhost,
   SidebarHeader,
   SidebarNav,
   SidebarNavItem,
   SidebarSection,
   SortableTable,
+  SortableTableGhost,
   Tabs,
+  TabsGhost,
+  TextButton,
+  TextButtonGhost,
+  Textarea,
+  TextareaGhost,
   Toggle,
+  ToggleGhost,
+  UILoader,
   cn,
   useEscapeDismiss
 };