@mirror-physics/fractal-ui 0.2.0-next.74 → 0.2.0-next.76

package/dist/index.js

@@ -47,31 +47,19 @@ var colorPalette = {
     700: "var(--green-700)"
   }
 };
-var sizeConfig = {
-  xs: { height: "28px", padding: "4px 8px", iconOnly: "28px", fontSize: "0.75rem" },
-  sm: { height: "32px", padding: "6px 12px", iconOnly: "32px", fontSize: "0.75rem" },
-  md: { height: "40px", padding: "8px 16px", iconOnly: "40px", fontSize: "0.875rem" },
-  lg: { height: "44px", padding: "10px 20px", iconOnly: "44px", fontSize: "1rem" },
-  xl: { height: "56px", padding: "14px 28px", iconOnly: "56px", fontSize: "1rem" }
-};
-function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled, color, hasIconOnly) {
+function getButtonStyles(buttonType, isHovered, isActive, disabled, color, hasIconOnly) {
   const palette = colorPalette[color];
-  const size = sizeConfig[buttonSize];
   const base = {
-    height: size.height,
-    padding: hasIconOnly ? "0" : size.padding,
     borderRadius: hasIconOnly ? "var(--radius-lg, 8px)" : "var(--radius-full, 9999px)",
     cursor: disabled ? "not-allowed" : "pointer",
-    fontSize: size.fontSize,
     transition: "background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease"
   };
   if (hasIconOnly) {
-    base.width = size.iconOnly;
     base.justifyContent = "center";
   }
   if (disabled) {
     if (buttonType === "ghost") {
-      return { ...base, backgroundColor: "transparent", border: "none", color: "var(--fg-disabled)" };
+      return { ...base, backgroundColor: "transparent", border: "1px solid transparent", color: "var(--fg-disabled)" };
     }
     return { ...base, backgroundColor: "transparent", border: "1px solid var(--fg-disabled)", color: "var(--fg-disabled)" };
   }
@@ -82,7 +70,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
         return {
           ...base,
           backgroundColor: isActive ? palette[700] : isHovered ? palette[500] : palette[600],
-          border: "none",
+          border: "1px solid transparent",
           color: "var(--fg-inverse)"
         };
       }
@@ -106,7 +94,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
       return {
         ...base,
         backgroundColor: isHovered || isActive ? "var(--bg-surface-1)" : "transparent",
-        border: "none",
+        border: "1px solid transparent",
         color: "var(--fg-primary)"
       };
     // Danger: low-intensity destructive action. Text stays steady; hover deepens the light red surface.
@@ -114,7 +102,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
       return {
         ...base,
         backgroundColor: isHovered || isActive ? "var(--danger-button-surface-hover)" : "var(--danger-button-surface)",
-        border: "none",
+        border: "1px solid transparent",
         color: "var(--danger-button-fg)"
       };
     default:
@@ -122,10 +110,10 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
   }
 }
 var Button = React.forwardRef(
-  ({ className, buttonType = "primary", buttonSize = "md", color = "blue", icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
+  ({ className, buttonType = "primary", buttonSize = "md", controlSize, color = "blue", icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
     const [isHovered, setIsHovered] = React.useState(false);
     const [isActive, setIsActive] = React.useState(false);
-    const typeStyles = getButtonStyles(buttonType, isHovered, isActive, buttonSize, !!disabled, color, hasIconOnly);
+    const typeStyles = getButtonStyles(buttonType, isHovered, isActive, !!disabled, color, hasIconOnly);
     const hasIconAndText = icon && children && !hasIconOnly;
     const finalStyles = hasIconAndText ? { ...typeStyles, gap: "var(--space-2, 8px)", ...style } : { ...typeStyles, ...style };
     return /* @__PURE__ */ jsxs(
@@ -133,7 +121,9 @@ var Button = React.forwardRef(
       {
         ref,
         type: "button",
-        className: cn("fractal-button", `fractal-button--${buttonType}`, className),
+        "data-control-size": controlSize ?? buttonSize,
+        "data-icon-only": hasIconOnly || void 0,
+        className: cn("fractal-control", "fractal-button", `fractal-button--${buttonType}`, className),
         style: finalStyles,
         disabled,
         onMouseEnter: (e) => {
@@ -541,7 +531,7 @@ import * as React2 from "react";
 import { Folder as FolderIcon } from "@mirror-physics/fractal-icons";
 import { jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
 var Card = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", { ref, className: cn("fractal-card", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", { ref, "data-fractal-border-surface": "surface-1", className: cn("fractal-card", className), ...props })
 );
 Card.displayName = "Card";
 var CardHeader = React2.forwardRef(
@@ -671,12 +661,13 @@ PromptGrid.displayName = "PromptGrid";
 import * as React4 from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var Input = React4.forwardRef(
-  ({ className, type, ...props }, ref) => /* @__PURE__ */ jsx5(
+  ({ className, type, controlSize = "md", ...props }, ref) => /* @__PURE__ */ jsx5(
     "input",
     {
       type,
       ref,
-      className: cn("fractal-input", className),
+      "data-control-size": controlSize,
+      className: cn("fractal-control", "fractal-input", className),
       ...props
     }
   )
@@ -690,6 +681,7 @@ import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var TableSearch = React5.forwardRef(
   ({
     searchType = "text",
+    controlSize = "md",
     className,
     inputClassName,
     placeholder,
@@ -703,12 +695,14 @@ var TableSearch = React5.forwardRef(
       {
         className: cn("fractal-table-search", className),
         "data-search-type": searchType,
+        "data-control-size": controlSize,
         children: [
           /* @__PURE__ */ jsx6(SearchIcon, { className: "fractal-table-search__icon", size: 17, "aria-hidden": "true" }),
           /* @__PURE__ */ jsx6(
             Input,
             {
               ...props,
+              controlSize,
               ref,
               type: "search",
               className: cn("fractal-table-search__input", inputClassName),
@@ -729,6 +723,7 @@ import { Minus, Plus } from "@mirror-physics/fractal-icons";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function NumberInput({
   unit,
+  controlSize = "md",
   className,
   value,
   defaultValue,
@@ -752,11 +747,12 @@ function NumberInput({
     input.dispatchEvent(new Event("input", { bubbles: true }));
     input.focus();
   };
-  return /* @__PURE__ */ jsxs7("div", { className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
+  return /* @__PURE__ */ jsxs7("div", { "data-control-size": controlSize, className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
     /* @__PURE__ */ jsx7(
       Input,
       {
         ref: inputRef,
+        controlSize,
         type: "number",
         value,
         defaultValue,
@@ -771,7 +767,7 @@ function NumberInput({
       "span",
       {
         className: "fractal-number-input-unit",
-        style: { left: `calc(var(--space-3, 12px) + ${characterCount}ch)` },
+        style: { left: `calc(var(--control-padding-inline) + ${characterCount}ch)` },
         "aria-hidden": "true",
         children: unit
       }
@@ -936,6 +932,7 @@ import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var PasswordInput = React7.forwardRef(
   ({
     className,
+    controlSize = "md",
     disabled,
     showPasswordLabel = "Show password",
     hidePasswordLabel = "Hide password",
@@ -947,12 +944,14 @@ var PasswordInput = React7.forwardRef(
       "div",
       {
         className: cn("fractal-password-input", className),
+        "data-control-size": controlSize,
         "data-password-visible": passwordVisible ? "" : void 0,
         children: [
           /* @__PURE__ */ jsx9(
             Input,
             {
               ...props,
+              controlSize,
               ref,
               className: "fractal-password-input-field",
               disabled,
@@ -983,10 +982,11 @@ PasswordInput.displayName = "PasswordInput";
 import * as React8 from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var Label = React8.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  ({ className, controlSize = "md", ...props }, ref) => /* @__PURE__ */ jsx10(
     "label",
     {
       ref,
+      "data-control-size": controlSize,
       className: cn("fractal-label", className),
       ...props
     }
@@ -1341,7 +1341,9 @@ function Dropdown({
   label,
   iconOnly = false,
   noChevron = false,
-  size = "md",
+  size: sizeAlias = "md",
+  controlSize,
+  triggerId,
   triggerVariant = "outline",
   className,
   triggerClassName,
@@ -1349,6 +1351,7 @@ function Dropdown({
   closeOnSelect = true,
   disabled = false
 }) {
+  const size = controlSize ?? sizeAlias;
   const [open, setOpen] = React12.useState(false);
   const triggerRef = React12.useRef(null);
   const panelRef = React12.useRef(null);
@@ -1423,11 +1426,13 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  return /* @__PURE__ */ jsxs16("div", { className: cn("fractal-dropdown", className), children: [
+  return /* @__PURE__ */ jsxs16("div", { "data-control-size": size, className: cn("fractal-dropdown", className), children: [
     /* @__PURE__ */ jsxs16(
       "button",
       {
         ref: triggerRef,
+        id: triggerId,
+        "data-control-size": size,
         type: "button",
         disabled,
         "aria-haspopup": "listbox",
@@ -1435,6 +1440,7 @@ function Dropdown({
         "aria-label": triggerLabel,
         onClick: () => setOpen((o) => !o),
         className: cn(
+          "fractal-control",
           "fractal-dropdown-trigger",
           `fractal-dropdown-trigger--${size}`,
           `fractal-dropdown-trigger--${triggerVariant}`,
@@ -1524,6 +1530,7 @@ var Chip = React14.forwardRef(
     "span",
     {
       ref,
+      "data-fractal-border-surface": tone === "neutral" ? "surface-2" : void 0,
       className: cn("fractal-chip", `fractal-chip--${tone}`, className),
       ...props
     }
@@ -1574,10 +1581,41 @@ function Checkbox({
   );
 }
 
+// src/components/Radio/Radio.tsx
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+function Radio({
+  checked,
+  className,
+  description,
+  disabled,
+  label,
+  onCheckedChange,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs18("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
+    /* @__PURE__ */ jsx21(
+      "input",
+      {
+        ...props,
+        checked,
+        className: "fractal-radio__input",
+        disabled,
+        onChange: (event) => onCheckedChange?.(event.currentTarget.checked),
+        type: "radio"
+      }
+    ),
+    /* @__PURE__ */ jsx21("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ jsx21("span", { className: "fractal-radio__dot" }) }),
+    /* @__PURE__ */ jsxs18("span", { className: "fractal-radio__content", children: [
+      /* @__PURE__ */ jsx21("span", { className: "fractal-radio__label", children: label }),
+      description && /* @__PURE__ */ jsx21("span", { className: "fractal-radio__description", children: description })
+    ] })
+  ] });
+}
+
 // src/components/SortableTable/SortableTable.tsx
 import { useMemo as useMemo2, useState as useState7 } from "react";
 import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function SortableTable({
   columns,
   data,
@@ -1672,16 +1710,16 @@ function SortableTable({
       onSortChange?.(nextKey, nextDirection);
     }
   };
-  return /* @__PURE__ */ jsx21("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs18("div", { className: "fractal-sortable-table-surface", children: [
-    header && /* @__PURE__ */ jsx21("div", { className: "fractal-sortable-table-header", children: header }),
-    visibleRows.length === 0 ? /* @__PURE__ */ jsx21("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs18("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
-      /* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsxs18("tr", { className: "fractal-sortable-table-thead-row", children: [
-        selection && /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs19("div", { className: "fractal-sortable-table-surface", children: [
+    header && /* @__PURE__ */ jsx22("div", { className: "fractal-sortable-table-header", children: header }),
+    visibleRows.length === 0 ? /* @__PURE__ */ jsx22("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs19("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
+      /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsxs19("tr", { className: "fractal-sortable-table-thead-row", children: [
+        selection && /* @__PURE__ */ jsx22(
           "th",
           {
             className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
             scope: "col",
-            children: /* @__PURE__ */ jsx21(
+            children: /* @__PURE__ */ jsx22(
               Checkbox,
               {
                 "aria-label": selection.selectAllLabel ?? "Select all rows",
@@ -1707,7 +1745,7 @@ function SortableTable({
         columns.map((col) => {
           const isActive = activeKey === col.key && activeDirection !== null;
           if (!col.sortable) {
-            return /* @__PURE__ */ jsx21(
+            return /* @__PURE__ */ jsx22(
               "th",
               {
                 className: "fractal-sortable-table-th",
@@ -1718,13 +1756,13 @@ function SortableTable({
               col.key
             );
           }
-          return /* @__PURE__ */ jsx21(
+          return /* @__PURE__ */ jsx22(
             "th",
             {
               className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
               scope: "col",
               style: { width: col.width },
-              children: /* @__PURE__ */ jsxs18(
+              children: /* @__PURE__ */ jsxs19(
                 "button",
                 {
                   type: "button",
@@ -1735,8 +1773,8 @@ function SortableTable({
                   onClick: () => handleSortClick(col.key),
                   "aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
                   children: [
-                    /* @__PURE__ */ jsx21("span", { children: col.header }),
-                    /* @__PURE__ */ jsx21("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx21(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx21(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx21(ArrowsUpDown, { size: 14 }) })
+                    /* @__PURE__ */ jsx22("span", { children: col.header }),
+                    /* @__PURE__ */ jsx22("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx22(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx22(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx22(ArrowsUpDown, { size: 14 }) })
                   ]
                 }
               )
@@ -1745,7 +1783,7 @@ function SortableTable({
           );
         })
       ] }) }),
-      /* @__PURE__ */ jsx21("tbody", { children: visibleRows.map((row, rowIndex) => {
+      /* @__PURE__ */ jsx22("tbody", { children: visibleRows.map((row, rowIndex) => {
         const highlighted = highlightRow?.(row, rowIndex) ?? false;
         const disabled = isRowDisabled?.(row) ?? false;
         const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
@@ -1754,7 +1792,7 @@ function SortableTable({
           label: rowAction.label(row, rowIndex),
           icon: rowAction.icon(row, rowIndex)
         } : null;
-        return /* @__PURE__ */ jsxs18(
+        return /* @__PURE__ */ jsxs19(
           "tr",
           {
             className: cn(
@@ -1778,7 +1816,7 @@ function SortableTable({
             role: interactive ? "button" : void 0,
             tabIndex: interactive ? 0 : void 0,
             children: [
-              selection && /* @__PURE__ */ jsx21("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", children: /* @__PURE__ */ jsx21(
+              selection && /* @__PURE__ */ jsx22("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", children: /* @__PURE__ */ jsx22(
                 Checkbox,
                 {
                   "aria-label": selection.getRowLabel(row),
@@ -1790,7 +1828,7 @@ function SortableTable({
                   }
                 }
               ) }),
-              columns.map((col, columnIndex) => /* @__PURE__ */ jsxs18(
+              columns.map((col, columnIndex) => /* @__PURE__ */ jsxs19(
                 "td",
                 {
                   className: cn(
@@ -1800,7 +1838,7 @@ function SortableTable({
                   style: { width: col.width, textAlign: col.align ?? "left" },
                   children: [
                     col.render(row, rowIndex),
-                    action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx21("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
+                    action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx22("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx22("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
                   ]
                 },
                 col.key
@@ -1816,7 +1854,7 @@ function SortableTable({
 
 // src/components/Tabs/Tabs.tsx
 import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState8 } from "react";
-import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 function Tabs({
   items,
   defaultValue,
@@ -1887,8 +1925,8 @@ function Tabs({
     selectTab(nextId2);
     requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
   };
-  return /* @__PURE__ */ jsxs19("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs20("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
+    /* @__PURE__ */ jsx23(
       "div",
       {
         ref: tabListRef,
@@ -1901,7 +1939,7 @@ function Tabs({
           const isActive = item.id === activeId;
           const tabId = `${reactId}-tab-${item.id}`;
           const panelId = `${reactId}-panel-${item.id}`;
-          return /* @__PURE__ */ jsx22(
+          return /* @__PURE__ */ jsx23(
             "button",
             {
               ref: (el) => {
@@ -1932,7 +1970,7 @@ function Tabs({
       const tabId = `${reactId}-tab-${item.id}`;
       const panelId = `${reactId}-panel-${item.id}`;
       const isActive = item.id === activeId;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         "div",
         {
           id: panelId,
@@ -1950,7 +1988,7 @@ function Tabs({
 
 // src/components/ContentSwitcher/ContentSwitcher.tsx
 import * as React15 from "react";
-import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
   const switcherRef = React15.useRef(null);
   const buttonRefs = React15.useRef([]);
@@ -2008,7 +2046,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       onValueChange(items[nextIndex].value);
     }
   };
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
@@ -2016,10 +2054,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       "aria-label": ariaLabel,
       ref: switcherRef,
       children: [
-        /* @__PURE__ */ jsx23("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
+        /* @__PURE__ */ jsx24("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
         items.map((item, index) => {
           const active = item.value === value;
-          return /* @__PURE__ */ jsx23(
+          return /* @__PURE__ */ jsx24(
             "button",
             {
               className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
@@ -2053,7 +2091,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
 // src/components/Disclosure/Disclosure.tsx
 import { useId as useId3, useState as useState9 } from "react";
 import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
-import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 function Disclosure({
   title,
   meta,
@@ -2081,7 +2119,7 @@ function Disclosure({
       onOpenChange?.(next);
     }
   };
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: cn(
@@ -2092,7 +2130,7 @@ function Disclosure({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsxs22(
           "button",
           {
             type: "button",
@@ -2103,13 +2141,13 @@ function Disclosure({
             disabled,
             onClick: toggle,
             children: [
-              /* @__PURE__ */ jsx24("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx24(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx24(ChevronRight3, { size: 16 }) }),
-              /* @__PURE__ */ jsx24("span", { className: "fractal-disclosure-title", children: title }),
-              meta && /* @__PURE__ */ jsx24("span", { className: "fractal-disclosure-meta", children: meta })
+              /* @__PURE__ */ jsx25("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx25(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx25(ChevronRight3, { size: 16 }) }),
+              /* @__PURE__ */ jsx25("span", { className: "fractal-disclosure-title", children: title }),
+              meta && /* @__PURE__ */ jsx25("span", { className: "fractal-disclosure-meta", children: meta })
             ]
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "div",
           {
             id: panelId,
@@ -2117,7 +2155,7 @@ function Disclosure({
             "aria-labelledby": headerId,
             className: "fractal-disclosure-panel",
             hidden: !isOpen,
-            children: /* @__PURE__ */ jsx24("div", { className: "fractal-disclosure-panel-inner", children })
+            children: /* @__PURE__ */ jsx25("div", { className: "fractal-disclosure-panel-inner", children })
           }
         )
       ]
@@ -2126,18 +2164,18 @@ function Disclosure({
 }
 
 // src/components/LatticeLoader/LatticeLoader.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var LATTICE_COUNT = 160;
 var WAVE_PERIOD = 80;
 function LatticeLoader({ className, label = "Loading", ...props }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "span",
     {
       "aria-label": label,
       className: cn("fractal-lattice-loader", className),
       role: "progressbar",
       ...props,
-      children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx25(
+      children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx26(
         "span",
         {
           "aria-hidden": "true",
@@ -2151,10 +2189,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
 }
 
 // src/components/Ghost/Ghost.tsx
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 function Ghost({ className, width, height, radius, style, ...props }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       "aria-hidden": "true",
@@ -2170,15 +2208,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
   );
 }
 function GhostLine({ className, size = "md", width = "100%", ...props }) {
-  return /* @__PURE__ */ jsx26(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
+  return /* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
 }
-function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
-  return /* @__PURE__ */ jsx26(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
+function ButtonGhost({ className, size = "md", controlSize, iconOnly = false, width, ...props }) {
+  return /* @__PURE__ */ jsx27(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
 }
 function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
-  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
-    showHeader && /* @__PURE__ */ jsx26(GhostLine, { width: "38%" }),
-    /* @__PURE__ */ jsx26("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx26(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
+  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
+    showHeader && /* @__PURE__ */ jsx27(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ jsx27("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx27(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
   ] });
 }
 function DataTableGhost({
@@ -2192,81 +2230,81 @@ function DataTableGhost({
   ...props
 }) {
   const cells = Array.from({ length: columns }, (_, index) => index);
-  return /* @__PURE__ */ jsx26("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs22("table", { className: "fractal-ghost-table__table", children: [
-    (showHeader || headers) && /* @__PURE__ */ jsx26("thead", { children: /* @__PURE__ */ jsx26("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx26("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx26(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
-    /* @__PURE__ */ jsx26("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx26("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx26("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx26(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
+  return /* @__PURE__ */ jsx27("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs23("table", { className: "fractal-ghost-table__table", children: [
+    (showHeader || headers) && /* @__PURE__ */ jsx27("thead", { children: /* @__PURE__ */ jsx27("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx27("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx27(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
+    /* @__PURE__ */ jsx27("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx27("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx27("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx27(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
   ] }) });
 }
 function InputGhost({ className, labelWidth = "26%", ...props }) {
-  return /* @__PURE__ */ jsx26(FormFieldGhost, { className, labelWidth, ...props });
+  return /* @__PURE__ */ jsx27(FormFieldGhost, { className, labelWidth, ...props });
 }
 function TextareaGhost({ className, labelWidth = "26%", ...props }) {
-  return /* @__PURE__ */ jsx26(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
+  return /* @__PURE__ */ jsx27(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
 }
 function LabelGhost({ className, width = "26%", ...props }) {
-  return /* @__PURE__ */ jsx26(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
+  return /* @__PURE__ */ jsx27(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
 }
-function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
-  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
-    /* @__PURE__ */ jsx26(LabelGhost, { width: labelWidth }),
-    /* @__PURE__ */ jsx26(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
+function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "md", ...props }) {
+  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
+    /* @__PURE__ */ jsx27(LabelGhost, { width: labelWidth }),
+    /* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
   ] });
 }
 function AlertGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
-    /* @__PURE__ */ jsx26(GhostLine, { width: "30%" }),
-    /* @__PURE__ */ jsx26(GhostLine, { size: "sm", width: "78%" })
+  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
+    /* @__PURE__ */ jsx27(GhostLine, { width: "30%" }),
+    /* @__PURE__ */ jsx27(GhostLine, { size: "sm", width: "78%" })
   ] });
 }
 function CheckboxGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
-    /* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-choice__control" }),
-    /* @__PURE__ */ jsx26(GhostLine, { width: "42%" })
+  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
+    /* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-choice__control" }),
+    /* @__PURE__ */ jsx27(GhostLine, { width: "42%" })
   ] });
 }
 var ToggleGhost = CheckboxGhost;
 function ChipGhost({ className, width = 74, ...props }) {
-  return /* @__PURE__ */ jsx26(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
+  return /* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
 }
 function LinkGhost({ className, width = 96, ...props }) {
-  return /* @__PURE__ */ jsx26(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
+  return /* @__PURE__ */ jsx27(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
 }
 var TextButtonGhost = LinkGhost;
-function DropdownGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
-    /* @__PURE__ */ jsx26(GhostLine, { width: "38%" }),
-    /* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-dropdown__chevron" })
+function DropdownGhost({ className, controlSize = "md", ...props }) {
+  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
+    /* @__PURE__ */ jsx27(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-dropdown__chevron" })
   ] });
 }
 function ContentSwitcherGhost({ className, options = 3, ...props }) {
-  return /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx26(Ghost, {}, index)) });
+  return /* @__PURE__ */ jsx27("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx27(Ghost, {}, index)) });
 }
 var TabsGhost = ContentSwitcherGhost;
 function DisclosureGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
-    /* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-disclosure__icon" }),
-    /* @__PURE__ */ jsx26(GhostLine, { width: "42%" })
+  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
+    /* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-disclosure__icon" }),
+    /* @__PURE__ */ jsx27(GhostLine, { width: "42%" })
   ] });
 }
 function PaginationGhost({ className, pages = 5, ...props }) {
-  return /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx26(Ghost, {}, index)) });
+  return /* @__PURE__ */ jsx27("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx27(Ghost, {}, index)) });
 }
 function FileDropzoneGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
-    /* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-dropzone__icon" }),
-    /* @__PURE__ */ jsx26(GhostLine, { width: "26%" }),
-    /* @__PURE__ */ jsx26(GhostLine, { size: "sm", width: "46%" })
+  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
+    /* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-dropzone__icon" }),
+    /* @__PURE__ */ jsx27(GhostLine, { width: "26%" }),
+    /* @__PURE__ */ jsx27(GhostLine, { size: "sm", width: "46%" })
   ] });
 }
 function PromptCardGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsx26(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
+  return /* @__PURE__ */ jsx27(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
 }
 function ConversationGhost({
   className,
   "aria-label": ariaLabel = "Loading conversation",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       "aria-busy": "true",
@@ -2275,54 +2313,54 @@ function ConversationGhost({
       role: "status",
       ...props,
       children: [
-        /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs22("div", { className: "fractal-ghost-conversation__bubble", children: [
-          /* @__PURE__ */ jsx26(GhostLine, { width: "100%" }),
-          /* @__PURE__ */ jsx26(GhostLine, { width: "86%" }),
-          /* @__PURE__ */ jsx26(GhostLine, { width: "64%" })
+        /* @__PURE__ */ jsx27("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs23("div", { className: "fractal-ghost-conversation__bubble", children: [
+          /* @__PURE__ */ jsx27(GhostLine, { width: "100%" }),
+          /* @__PURE__ */ jsx27(GhostLine, { width: "86%" }),
+          /* @__PURE__ */ jsx27(GhostLine, { width: "64%" })
         ] }) }),
-        /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
-          /* @__PURE__ */ jsx26(GhostLine, { width: "92%" }),
-          /* @__PURE__ */ jsx26(GhostLine, { width: "78%" }),
-          /* @__PURE__ */ jsx26(GhostLine, { width: "58%" })
+        /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
+          /* @__PURE__ */ jsx27(GhostLine, { width: "92%" }),
+          /* @__PURE__ */ jsx27(GhostLine, { width: "78%" }),
+          /* @__PURE__ */ jsx27(GhostLine, { width: "58%" })
         ] })
       ]
     }
   );
 }
 function SortableTableGhost(props) {
-  return /* @__PURE__ */ jsx26(DataTableGhost, { ...props });
+  return /* @__PURE__ */ jsx27(DataTableGhost, { ...props });
 }
 function SidebarGhost({ className, items = 6, ...props }) {
-  return /* @__PURE__ */ jsxs22("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
-    /* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-sidebar__brand" }),
-    /* @__PURE__ */ jsx26("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs22("div", { className: "fractal-ghost-sidebar__item", children: [
-      /* @__PURE__ */ jsx26(Ghost, {}),
-      /* @__PURE__ */ jsx26(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
+  return /* @__PURE__ */ jsxs23("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
+    /* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-sidebar__brand" }),
+    /* @__PURE__ */ jsx27("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs23("div", { className: "fractal-ghost-sidebar__item", children: [
+      /* @__PURE__ */ jsx27(Ghost, {}),
+      /* @__PURE__ */ jsx27(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
     ] }, index)) })
   ] });
 }
 function ModalGhost({ className, title, lines = 3, ...props }) {
-  return /* @__PURE__ */ jsx26(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
+  return /* @__PURE__ */ jsx27(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
 }
 function SidePanelGhost({ className, title, lines = 5, ...props }) {
-  return /* @__PURE__ */ jsx26(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
+  return /* @__PURE__ */ jsx27(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
 }
 function SurfaceGhost({ className, title, lines = 3, ...props }) {
-  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
-    /* @__PURE__ */ jsxs22("div", { className: "fractal-ghost-surface__header", children: [
-      /* @__PURE__ */ jsx26(GhostLine, { width: "42%" }),
-      /* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-surface__close" })
+  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
+    /* @__PURE__ */ jsxs23("div", { className: "fractal-ghost-surface__header", children: [
+      /* @__PURE__ */ jsx27(GhostLine, { width: "42%" }),
+      /* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-surface__close" })
     ] }),
-    title && /* @__PURE__ */ jsx26("div", { className: "fractal-ghost-surface__title", children: title }),
-    /* @__PURE__ */ jsx26("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx26(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
+    title && /* @__PURE__ */ jsx27("div", { className: "fractal-ghost-surface__title", children: title }),
+    /* @__PURE__ */ jsx27("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx27(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
   ] });
 }
 
 // src/components/Sidebar/Sidebar.tsx
 import * as React16 from "react";
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 var Sidebar = React16.forwardRef(
-  ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx27(
+  ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx28(
     "aside",
     {
       ref,
@@ -2335,11 +2373,11 @@ var Sidebar = React16.forwardRef(
 );
 Sidebar.displayName = "Sidebar";
 var SidebarHeader = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx27("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx28("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
 );
 SidebarHeader.displayName = "SidebarHeader";
 var SidebarBrand = React16.forwardRef(
-  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx27("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
+  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx28("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
 );
 SidebarBrand.displayName = "SidebarBrand";
 function SidebarAccountMenu({
@@ -2350,7 +2388,7 @@ function SidebarAccountMenu({
   icon,
   className
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     Dropdown,
     {
       align: "left",
@@ -2360,9 +2398,9 @@ function SidebarAccountMenu({
       panelClassName: "fractal-sidebar__account-panel",
       selectedValue: "",
       triggerClassName: "fractal-sidebar__account-trigger",
-      triggerContent: /* @__PURE__ */ jsxs23(Fragment3, { children: [
-        icon && /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__account-name", children: name })
+      triggerContent: /* @__PURE__ */ jsxs24(Fragment3, { children: [
+        icon && /* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__account-name", children: name })
       ] }),
       triggerLabel,
       triggerVariant: "tertiary"
@@ -2370,15 +2408,15 @@ function SidebarAccountMenu({
   );
 }
 var SidebarNav = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx27("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx28("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
 );
 SidebarNav.displayName = "SidebarNav";
 var SidebarSection = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx27("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx28("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
 );
 SidebarSection.displayName = "SidebarSection";
 var SidebarNavItem = React16.forwardRef(
-  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs23(
+  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs24(
     "button",
     {
       ref,
@@ -2388,28 +2426,28 @@ var SidebarNavItem = React16.forwardRef(
       "aria-current": active ? "page" : void 0,
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__nav-item-label", children }),
-        endAdornment && /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
+        icon && /* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__nav-item-label", children }),
+        endAdornment && /* @__PURE__ */ jsx28("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
       ]
     }
   )
 );
 SidebarNavItem.displayName = "SidebarNavItem";
 var SidebarFooter = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx27("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx28("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
 );
 SidebarFooter.displayName = "SidebarFooter";
 
 // src/components/SidePanel/SidePanel.tsx
 import { createPortal as createPortal3 } from "react-dom";
 import { Close as Close2 } from "@mirror-physics/fractal-icons";
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs25 } 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 createPortal3(
-    /* @__PURE__ */ jsx28("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs24(
+    /* @__PURE__ */ jsx29("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs25(
       "aside",
       {
         className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
@@ -2418,15 +2456,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
         role: "dialog",
         onMouseDown: (event) => event.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs24("header", { className: "fractal-side-panel__header", children: [
-            /* @__PURE__ */ jsxs24("div", { className: "fractal-side-panel__heading", children: [
-              typeof title === "string" ? /* @__PURE__ */ jsx28("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx28("div", { className: "fractal-side-panel__title", children: title }),
-              description && /* @__PURE__ */ jsx28("p", { className: "fractal-side-panel__description", children: description })
+          /* @__PURE__ */ jsxs25("header", { className: "fractal-side-panel__header", children: [
+            /* @__PURE__ */ jsxs25("div", { className: "fractal-side-panel__heading", children: [
+              typeof title === "string" ? /* @__PURE__ */ jsx29("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx29("div", { className: "fractal-side-panel__title", children: title }),
+              description && /* @__PURE__ */ jsx29("p", { className: "fractal-side-panel__description", children: description })
             ] }),
-            /* @__PURE__ */ jsx28("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx28(Close2, { size: 18 }) })
+            /* @__PURE__ */ jsx29("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx29(Close2, { size: 18 }) })
           ] }),
-          /* @__PURE__ */ jsx28("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx28(UILoader, { label: loadingLabel }) : children }),
-          footer && /* @__PURE__ */ jsx28("footer", { className: "fractal-side-panel__footer", children: footer })
+          /* @__PURE__ */ jsx29("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx29(UILoader, { label: loadingLabel }) : children }),
+          footer && /* @__PURE__ */ jsx29("footer", { className: "fractal-side-panel__footer", children: footer })
         ]
       }
     ) }),
@@ -2436,17 +2474,17 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 
 // src/components/Textarea/Textarea.tsx
 import * as React17 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Textarea = React17.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx29("textarea", { ref, className: cn("fractal-textarea", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("textarea", { ref, className: cn("fractal-textarea", className), ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
 import * as React18 from "react";
-import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var TextButton = React18.forwardRef(
-  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs25(
+  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs26(
     "button",
     {
       ref,
@@ -2454,9 +2492,9 @@ var TextButton = React18.forwardRef(
       type: "button",
       ...props,
       children: [
-        icon && iconPosition === "start" && /* @__PURE__ */ jsx30("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsx30("span", { children }),
-        icon && iconPosition === "end" && /* @__PURE__ */ jsx30("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
+        icon && iconPosition === "start" && /* @__PURE__ */ jsx31("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx31("span", { children }),
+        icon && iconPosition === "end" && /* @__PURE__ */ jsx31("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
       ]
     }
   )
@@ -2466,7 +2504,7 @@ TextButton.displayName = "TextButton";
 // src/components/FileDropzone/FileDropzone.tsx
 import * as React19 from "react";
 import { Close as Close3, FileArrowUp } from "@mirror-physics/fractal-icons";
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 function FileDropzone({
   files,
   onFilesChange,
@@ -2486,8 +2524,8 @@ function FileDropzone({
     if (additions.length === 0) return;
     onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
   };
-  return /* @__PURE__ */ jsxs26("div", { className: cn("fractal-file-dropzone", className), children: [
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs27("div", { className: cn("fractal-file-dropzone", className), children: [
+    /* @__PURE__ */ jsx32(
       "input",
       {
         ref: inputRef,
@@ -2503,7 +2541,7 @@ function FileDropzone({
         }
       }
     ),
-    /* @__PURE__ */ jsxs26(
+    /* @__PURE__ */ jsxs27(
       "button",
       {
         className: "fractal-file-dropzone__target",
@@ -2526,18 +2564,18 @@ function FileDropzone({
           addFiles(event.dataTransfer.files);
         },
         children: [
-          /* @__PURE__ */ jsx31(FileArrowUp, { "aria-hidden": "true", size: 20 }),
-          /* @__PURE__ */ jsxs26("span", { className: "fractal-file-dropzone__copy", children: [
-            /* @__PURE__ */ jsx31("span", { className: "fractal-file-dropzone__title", children: title }),
-            description && /* @__PURE__ */ jsx31("span", { className: "fractal-file-dropzone__description", children: description })
+          /* @__PURE__ */ jsx32(FileArrowUp, { "aria-hidden": "true", size: 20 }),
+          /* @__PURE__ */ jsxs27("span", { className: "fractal-file-dropzone__copy", children: [
+            /* @__PURE__ */ jsx32("span", { className: "fractal-file-dropzone__title", children: title }),
+            description && /* @__PURE__ */ jsx32("span", { className: "fractal-file-dropzone__description", children: description })
           ] })
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ jsx31("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs26("li", { className: "fractal-file-dropzone__file", children: [
-      /* @__PURE__ */ jsx31("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
-      /* @__PURE__ */ jsx31("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
-      /* @__PURE__ */ jsx31(
+    files.length > 0 && /* @__PURE__ */ jsx32("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs27("li", { className: "fractal-file-dropzone__file", children: [
+      /* @__PURE__ */ jsx32("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ jsx32("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
+      /* @__PURE__ */ jsx32(
         "button",
         {
           className: "fractal-file-dropzone__remove",
@@ -2545,7 +2583,7 @@ function FileDropzone({
           "aria-label": `Remove ${file.name}`,
           disabled,
           onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
-          children: /* @__PURE__ */ jsx31(Close3, { "aria-hidden": "true", size: 14 })
+          children: /* @__PURE__ */ jsx32(Close3, { "aria-hidden": "true", size: 14 })
         }
       )
     ] }, `${file.name}-${file.size}-${index}`)) })
@@ -2559,7 +2597,7 @@ function formatFileSize(bytes) {
 
 // src/components/Pagination/Pagination.tsx
 import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 function Pagination({
   page,
   pageSize,
@@ -2575,10 +2613,10 @@ function Pagination({
   const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
   const end = Math.min(currentPage * pageSize, totalItems);
   const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
-  return /* @__PURE__ */ jsxs27("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsx32("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
-    /* @__PURE__ */ jsxs27("div", { className: "fractal-pagination__controls", children: [
-      canChangePageSize && /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs28("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx33("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
+    /* @__PURE__ */ jsxs28("div", { className: "fractal-pagination__controls", children: [
+      canChangePageSize && /* @__PURE__ */ jsx33(
         Dropdown,
         {
           align: "right",
@@ -2595,7 +2633,7 @@ function Pagination({
           triggerVariant: "tertiary"
         }
       ),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         "button",
         {
           className: "fractal-pagination__button",
@@ -2604,15 +2642,15 @@ function Pagination({
           title: "Previous page",
           disabled: currentPage === 1 || totalItems === 0,
           onClick: () => onPageChange(currentPage - 1),
-          children: /* @__PURE__ */ jsx32(ArrowLeft, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ jsx33(ArrowLeft, { "aria-hidden": "true", size: 16 })
         }
       ),
-      /* @__PURE__ */ jsxs27("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
+      /* @__PURE__ */ jsxs28("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
         currentPage,
         " of ",
         totalPages
       ] }),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         "button",
         {
           className: "fractal-pagination__button",
@@ -2621,7 +2659,7 @@ function Pagination({
           title: "Next page",
           disabled: currentPage === totalPages || totalItems === 0,
           onClick: () => onPageChange(currentPage + 1),
-          children: /* @__PURE__ */ jsx32(ArrowRight, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ jsx33(ArrowRight, { "aria-hidden": "true", size: 16 })
         }
       )
     ] })
@@ -2678,6 +2716,7 @@ export {
   PromptCard,
   PromptCardGhost,
   PromptGrid,
+  Radio,
   SidePanel,
   SidePanelGhost,
   Sidebar,