@rebasepro/app 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/debug.js

@@ -77,23 +77,23 @@ var UIStyleGuide = () => {
       /* @__PURE__ */ jsx(Typography, { variant: "h4", gutterBottom: true, className: "border-b pb-2 mb-6", children: "Icon Buttons" }),
       /* @__PURE__ */ jsx(Paper, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-8 items-center", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(IconExample, {}) }),
+          /* @__PURE__ */ jsx(IconButton, { "aria-label": "Example", children: /* @__PURE__ */ jsx(IconExample, {}) }),
           /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "primary" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(IconExample, {}) }),
+          /* @__PURE__ */ jsx(IconButton, { "aria-label": "Example", children: /* @__PURE__ */ jsx(IconExample, {}) }),
           /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "secondary" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ jsx(IconButton, { size: "small", children: /* @__PURE__ */ jsx(IconExample, {}) }),
+          /* @__PURE__ */ jsx(IconButton, { "aria-label": "Example", size: "small", children: /* @__PURE__ */ jsx(IconExample, {}) }),
           /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "small" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ jsx(IconButton, { disabled: true, children: /* @__PURE__ */ jsx(IconExample, {}) }),
+          /* @__PURE__ */ jsx(IconButton, { "aria-label": "Example", disabled: true, children: /* @__PURE__ */ jsx(IconExample, {}) }),
           /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "disabled" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ jsx(IconButton, { size: "small", children: /* @__PURE__ */ jsx(Trash2Icon, {}) }),
+          /* @__PURE__ */ jsx(IconButton, { "aria-label": "Delete", size: "small", children: /* @__PURE__ */ jsx(Trash2Icon, {}) }),
           /* @__PURE__ */ jsx("span", { className: "text-[10px] text-text-disabled font-mono", children: "delete" })
         ] })
       ] }) })
@@ -109,14 +109,14 @@ var UIStyleGuide = () => {
 };
 
 // src/debug/UIReferenceView.tsx
-import React10, { useState as useState8 } from "react";
+import React11, { useState as useState9 } from "react";
 import {
   Alert as Alert3,
   AlertCircleIcon,
   Avatar as Avatar2,
   AppWindow,
   BooleanSwitch,
-  Button as Button9,
+  Button as Button10,
   Checkbox as Checkbox3,
   ChevronDownIcon,
   ChevronsLeftIcon,
@@ -135,6 +135,7 @@ import {
   IconButton as IconButton5,
   iconSize as iconSize3,
   KanbanIcon,
+  Label as Label2,
   LayoutGridIcon as LayoutGridIcon2,
   ListIcon as ListIcon2,
   LoadingButton,
@@ -148,8 +149,8 @@ import {
   PencilIcon as PencilIcon3,
   PlusIcon,
   SearchBar as SearchBar4,
-  Select as Select6,
-  SelectItem as SelectItem6,
+  Select as Select7,
+  SelectItem as SelectItem7,
   Separator as Separator5,
   SettingsIcon as SettingsIcon3,
   Skeleton as Skeleton6,
@@ -163,11 +164,12 @@ import {
   TableRow as TableRow2,
   Tabs,
   TagIcon,
-  TextField as TextField3,
+  TextField as TextField4,
+  ToggleButtonGroup as ToggleButtonGroup3,
   Tooltip as Tooltip3,
   Trash2Icon as Trash2Icon3,
   TypeIcon,
-  Typography as Typography14,
+  Typography as Typography15,
   UserIcon
 } from "@rebasepro/ui";
 
@@ -3143,7 +3145,7 @@ function ShapeSpaceSection() {
       }, className: "w-40" }),
       /* @__PURE__ */ jsx15(Select5, { size, value: "a", onValueChange: () => {
       }, className: "w-40", children: /* @__PURE__ */ jsx15(SelectItem5, { value: "a", children: "Select" }) }),
-      /* @__PURE__ */ jsx15(IconButton4, { size, children: /* @__PURE__ */ jsx15(PencilIcon2, { size: size === "smallest" ? 14 : size === "small" ? 16 : size === "medium" ? 20 : 24 }) }),
+      /* @__PURE__ */ jsx15(IconButton4, { "aria-label": "Edit", size, children: /* @__PURE__ */ jsx15(PencilIcon2, { size: size === "smallest" ? 14 : size === "small" ? 16 : size === "medium" ? 20 : 24 }) }),
       /* @__PURE__ */ jsx15(Typography13, { variant: "caption", color: "secondary", className: "basis-full md:basis-auto", children: use })
     ] }, size)) }),
     /* @__PURE__ */ jsxs15("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
@@ -3320,8 +3322,357 @@ function CardsDataSection() {
   ] });
 }
 
-// src/debug/UIReferenceView.tsx
+// src/debug/ui-reference/ComponentSections.tsx
+import { useState as useState8 } from "react";
+import {
+  Autocomplete,
+  AutocompleteItem,
+  Badge,
+  MailIcon as MailIcon3,
+  BooleanSwitchWithLabel,
+  Button as Button9,
+  CenteredView,
+  CircularProgressCenter,
+  Collapse,
+  ColorPicker,
+  DateTimeField,
+  DebouncedTextField,
+  Dialog as Dialog2,
+  DialogActions as DialogActions2,
+  DialogContent as DialogContent2,
+  DialogTitle as DialogTitle2,
+  ExpandablePanel,
+  FileUpload,
+  InfoLabel,
+  InputLabel,
+  Label,
+  Markdown,
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+  Popover,
+  RadioGroup,
+  RadioGroupItem,
+  ResizablePanels,
+  Select as Select6,
+  SelectGroup,
+  SelectItem as SelectItem6,
+  Sheet,
+  Slider,
+  TextareaAutosize,
+  TextField as TextField3,
+  ToggleButtonGroup as ToggleButtonGroup2,
+  Typography as Typography14,
+  VirtualTable
+} from "@rebasepro/ui";
 import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+function OverlaysSection() {
+  const [dialogOpen, setDialogOpen] = useState8(false);
+  const [sheetOpen, setSheetOpen] = useState8(false);
+  const [showHidden, setShowHidden] = useState8(true);
+  const [density, setDensity] = useState8("comfortable");
+  return /* @__PURE__ */ jsxs16(SectionBlock, { id: "overlays", title: "Overlays \u2014 Dialog, Sheet, Popover, Menubar", children: [
+    /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4 max-w-[68ch]", children: [
+      "Every overlay is a Radix layer: it traps focus, focuses its own container when it opens (pass ",
+      /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "initialFocus" }),
+      " to focus a field), closes on Escape and returns focus to its opener. A dialog holds work, so a backdrop click does not close it unless it is a picker (",
+      /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "dismissOnBackdrop" }),
+      "). Open each with the keyboard to see the focus ring land."
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "grid grid-cols-12 gap-6", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6", children: [
+        /* @__PURE__ */ jsx16(SpecimenLabel, { children: "Dialog \xB7 DialogTitle + DialogContent + DialogActions" }),
+        /* @__PURE__ */ jsx16(Button9, { variant: "outlined", onClick: () => setDialogOpen(true), children: "Rename collection" }),
+        /* @__PURE__ */ jsxs16(Dialog2, { open: dialogOpen, onOpenChange: setDialogOpen, maxWidth: "md", children: [
+          /* @__PURE__ */ jsx16(DialogTitle2, { children: "Rename collection" }),
+          /* @__PURE__ */ jsx16(DialogContent2, { children: /* @__PURE__ */ jsx16(TextField3, { size: "medium", label: "Name", value: "Products", onChange: () => {
+          } }) }),
+          /* @__PURE__ */ jsxs16(DialogActions2, { children: [
+            /* @__PURE__ */ jsx16(Button9, { variant: "text", onClick: () => setDialogOpen(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx16(Button9, { color: "primary", onClick: () => setDialogOpen(false), children: "Rename" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6", children: [
+        /* @__PURE__ */ jsx16(SpecimenLabel, { children: 'Sheet \xB7 side="right"' }),
+        /* @__PURE__ */ jsx16(Button9, { variant: "outlined", onClick: () => setSheetOpen(true), children: "Open side panel" }),
+        /* @__PURE__ */ jsx16(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, side: "right", title: "Filters", children: /* @__PURE__ */ jsxs16("div", { className: "w-[320px] h-full p-6 flex flex-col gap-4 bg-surface-card", children: [
+          /* @__PURE__ */ jsx16(Typography14, { variant: "subtitle2", children: "Filters" }),
+          /* @__PURE__ */ jsx16(TextField3, { size: "small", label: "Search", placeholder: "Name contains\u2026" }),
+          /* @__PURE__ */ jsx16(Button9, { variant: "outlined", onClick: () => setSheetOpen(false), children: "Close" })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6", children: [
+        /* @__PURE__ */ jsx16(SpecimenLabel, { children: "Popover" }),
+        /* @__PURE__ */ jsx16(Popover, { trigger: /* @__PURE__ */ jsx16(Button9, { variant: "outlined", children: "Show details" }), children: /* @__PURE__ */ jsxs16("div", { className: "p-4 flex flex-col gap-2 max-w-[260px]", children: [
+          /* @__PURE__ */ jsx16(Typography14, { variant: "subtitle2", children: "Last published" }),
+          /* @__PURE__ */ jsx16(Typography14, { variant: "body2", color: "secondary", children: "Yesterday at 18:04 by Alice Johnson." })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6", children: [
+        /* @__PURE__ */ jsx16(SpecimenLabel, { children: "Menubar \xB7 items, submenu, checkbox, radio, shortcut" }),
+        /* @__PURE__ */ jsxs16(Menubar, { children: [
+          /* @__PURE__ */ jsxs16(MenubarMenu, { children: [
+            /* @__PURE__ */ jsx16(MenubarTrigger, { children: "File" }),
+            /* @__PURE__ */ jsxs16(MenubarContent, { children: [
+              /* @__PURE__ */ jsxs16(MenubarItem, { children: [
+                "New record ",
+                /* @__PURE__ */ jsx16(MenubarShortcut, { children: "\u2318N" })
+              ] }),
+              /* @__PURE__ */ jsx16(MenubarItem, { disabled: true, children: "Duplicate" }),
+              /* @__PURE__ */ jsx16(MenubarSeparator, {}),
+              /* @__PURE__ */ jsxs16(MenubarSub, { children: [
+                /* @__PURE__ */ jsx16(MenubarSubTrigger, { children: "Export" }),
+                /* @__PURE__ */ jsxs16(MenubarSubContent, { children: [
+                  /* @__PURE__ */ jsx16(MenubarItem, { children: "CSV" }),
+                  /* @__PURE__ */ jsx16(MenubarItem, { children: "JSON" })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs16(MenubarMenu, { children: [
+            /* @__PURE__ */ jsx16(MenubarTrigger, { children: "View" }),
+            /* @__PURE__ */ jsxs16(MenubarContent, { children: [
+              /* @__PURE__ */ jsx16(MenubarCheckboxItem, { checked: showHidden, onCheckedChange: () => setShowHidden(!showHidden), children: "Show hidden fields" }),
+              /* @__PURE__ */ jsx16(MenubarSeparator, {}),
+              /* @__PURE__ */ jsxs16(MenubarRadioGroup, { value: density, onValueChange: setDensity, children: [
+                /* @__PURE__ */ jsx16(MenubarRadioItem, { value: "comfortable", children: "Comfortable" }),
+                /* @__PURE__ */ jsx16(MenubarRadioItem, { value: "compact", children: "Compact" })
+              ] })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function DisclosureLayoutSection() {
+  const [collapseOpen, setCollapseOpen] = useState8(false);
+  const [split, setSplit] = useState8(40);
+  return /* @__PURE__ */ jsx16(SectionBlock, { id: "disclosure", title: "Disclosure and layout", children: /* @__PURE__ */ jsxs16("div", { className: "grid grid-cols-12 gap-6", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "ExpandablePanel \xB7 expanded, collapsed" }),
+      /* @__PURE__ */ jsx16(ExpandablePanel, { title: /* @__PURE__ */ jsx16(Typography14, { variant: "subtitle2", children: "SEO" }), children: /* @__PURE__ */ jsx16("div", { className: "p-4 flex flex-col gap-3", children: /* @__PURE__ */ jsx16(TextField3, { size: "small", label: "Meta title", value: "Italian coffee maker", onChange: () => {
+      } }) }) }),
+      /* @__PURE__ */ jsx16(ExpandablePanel, { initiallyExpanded: false, title: /* @__PURE__ */ jsx16(Typography14, { variant: "subtitle2", children: "Advanced" }), children: /* @__PURE__ */ jsx16("div", { className: "p-4", children: /* @__PURE__ */ jsx16(Typography14, { variant: "body2", color: "secondary", children: "Hidden until expanded." }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "Collapse" }),
+      /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(Button9, { variant: "text", size: "small", "aria-expanded": collapseOpen, onClick: () => setCollapseOpen(!collapseOpen), children: collapseOpen ? "Hide details" : "Show details" }) }),
+      /* @__PURE__ */ jsx16(Collapse, { in: collapseOpen, children: /* @__PURE__ */ jsx16(Typography14, { variant: "body2", color: "secondary", children: "Collapse animates height only; it has no trigger of its own." }) })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "ResizablePanels \xB7 drag the divider, or focus it and use \u2190/\u2192 (Shift for 10%)" }),
+      /* @__PURE__ */ jsx16("div", { className: "h-40 border border-hairline rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx16(
+        ResizablePanels,
+        {
+          dividerAriaLabel: "Resize the list",
+          orientation: "horizontal",
+          panelSizePercent: split,
+          onPanelSizeChange: setSplit,
+          minPanelSizePx: 120,
+          firstPanel: /* @__PURE__ */ jsx16("div", { className: "h-full p-3 bg-surface-card", children: /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", children: [
+            "List \u2014 ",
+            Math.round(split),
+            "%"
+          ] }) }),
+          secondPanel: /* @__PURE__ */ jsx16("div", { className: "h-full p-3", children: /* @__PURE__ */ jsx16(Typography14, { variant: "body2", color: "secondary", children: "Detail" }) })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: 'CenteredView \xB7 maxWidth="md"' }),
+      /* @__PURE__ */ jsx16("div", { className: "border border-hairline rounded-lg", children: /* @__PURE__ */ jsx16(CenteredView, { maxWidth: "md", className: "py-6", children: /* @__PURE__ */ jsx16(Typography14, { variant: "body2", color: "secondary", align: "center", children: "A centred, measured column." }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "CircularProgressCenter \xB7 a loading pane" }),
+      /* @__PURE__ */ jsx16("div", { className: "h-32 border border-hairline rounded-lg flex", children: /* @__PURE__ */ jsx16(CircularProgressCenter, { size: "small", text: "Loading records\u2026" }) })
+    ] })
+  ] }) });
+}
+function MoreControlsSection() {
+  const [published, setPublished] = useState8(true);
+  const [date, setDate] = useState8(new Date(2026, 9, 11, 9, 30));
+  const [debounced, setDebounced] = useState8("Debounced value");
+  const [notes, setNotes] = useState8("A textarea that grows\nwith its content.");
+  const [visibility, setVisibility] = useState8("public");
+  const [volume, setVolume] = useState8([40]);
+  const [colour, setColour] = useState8("blueLight");
+  const [viewMode, setViewMode] = useState8("table");
+  const [query, setQuery] = useState8("");
+  const [autocompleteOpen, setAutocompleteOpen] = useState8(false);
+  const suggestions = ["Alessi", "Bialetti", "Bodum", "Hario"].filter((s) => s.toLowerCase().includes(query.toLowerCase()));
+  return /* @__PURE__ */ jsx16(SectionBlock, { id: "more-controls", title: "More form controls", children: /* @__PURE__ */ jsxs16("div", { className: "grid grid-cols-12 gap-6", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "BooleanSwitchWithLabel \xB7 every boolean field" }),
+      /* @__PURE__ */ jsx16(BooleanSwitchWithLabel, { label: "Published", value: published, onValueChange: setPublished, size: "small" }),
+      /* @__PURE__ */ jsx16(BooleanSwitchWithLabel, { label: "Disabled", value: true, disabled: true, size: "small" }),
+      /* @__PURE__ */ jsx16(BooleanSwitchWithLabel, { label: "With an error", value: false, error: true, size: "small" })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "DateTimeField \xB7 date, date_time, time, disabled, error" }),
+      /* @__PURE__ */ jsx16(DateTimeField, { size: "small", mode: "date", label: "Publish date", value: date, onChange: setDate, clearable: true }),
+      /* @__PURE__ */ jsx16(DateTimeField, { size: "small", mode: "date_time", label: "Publish at", value: date, onChange: setDate }),
+      /* @__PURE__ */ jsx16(DateTimeField, { size: "small", mode: "time", timezone: "UTC", label: "Opens at", value: date, onChange: setDate }),
+      /* @__PURE__ */ jsx16(DateTimeField, { size: "small", mode: "date", label: "Disabled", value: date, onChange: () => {
+      }, disabled: true }),
+      /* @__PURE__ */ jsx16(DateTimeField, { size: "small", mode: "date", label: "Error", value: null, onChange: () => {
+      }, error: true })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "DebouncedTextField \xB7 reports after typing pauses" }),
+      /* @__PURE__ */ jsx16(DebouncedTextField, { size: "small", label: "Title", value: debounced, onChange: (e) => setDebounced(e.target.value) }),
+      /* @__PURE__ */ jsx16(SpecimenLabel, { className: "mt-2", children: "TextareaAutosize" }),
+      /* @__PURE__ */ jsx16(
+        TextareaAutosize,
+        {
+          "aria-label": "Notes",
+          minRows: 2,
+          maxRows: 6,
+          value: notes,
+          onChange: (e) => setNotes(e.target.value),
+          className: "w-full rounded-lg border border-hairline bg-surface-field px-3 py-2 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "Label \xB7 InputLabel" }),
+      /* @__PURE__ */ jsx16(Label, { htmlFor: "ref-label-field", children: "Label, tied to its field" }),
+      /* @__PURE__ */ jsx16(TextField3, { id: "ref-label-field", size: "small", placeholder: "Focus me through the label" }),
+      /* @__PURE__ */ jsx16(Label, { border: true, children: "Label with a border" }),
+      /* @__PURE__ */ jsx16("div", { className: "relative h-10 border border-hairline rounded-lg", children: /* @__PURE__ */ jsx16(InputLabel, { shrink: true, children: "InputLabel (shrunk)" }) })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "RadioGroup \xB7 RadioGroupItem, one disabled" }),
+      /* @__PURE__ */ jsx16(RadioGroup, { value: visibility, onValueChange: setVisibility, className: "flex flex-col gap-2", children: [["public", "Public", false], ["private", "Private", false], ["archived", "Archived", true]].map(([value, label, disabled]) => /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx16(RadioGroupItem, { id: `ref-radio-${value}`, value: String(value), disabled: Boolean(disabled) }),
+        /* @__PURE__ */ jsx16(Label, { htmlFor: `ref-radio-${value}`, children: String(label) })
+      ] }, String(value))) })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "Slider \xB7 regular, small, disabled" }),
+      /* @__PURE__ */ jsx16(Slider, { value: volume, onValueChange: setVolume, min: 0, max: 100 }),
+      /* @__PURE__ */ jsx16(Slider, { size: "small", value: volume, onValueChange: setVolume, min: 0, max: 100 }),
+      /* @__PURE__ */ jsx16(Slider, { disabled: true, defaultValue: [70], min: 0, max: 100 })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "ColorPicker \xB7 with Auto, disabled" }),
+      /* @__PURE__ */ jsx16(ColorPicker, { value: colour, onChange: setColour, allowClear: true }),
+      /* @__PURE__ */ jsx16(ColorPicker, { value: "greenLight", onChange: () => {
+      }, size: "small", disabled: true })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "Select \xB7 SelectGroup" }),
+      /* @__PURE__ */ jsxs16(Select6, { size: "small", label: "Field type", value: "string", onValueChange: () => {
+      }, children: [
+        /* @__PURE__ */ jsxs16(SelectGroup, { label: "Text", children: [
+          /* @__PURE__ */ jsx16(SelectItem6, { value: "string", children: "Text" }),
+          /* @__PURE__ */ jsx16(SelectItem6, { value: "markdown", children: "Markdown" })
+        ] }),
+        /* @__PURE__ */ jsx16(SelectGroup, { label: "Numbers", children: /* @__PURE__ */ jsx16(SelectItem6, { value: "number", children: "Number" }) })
+      ] }),
+      /* @__PURE__ */ jsx16(SpecimenLabel, { className: "mt-2", children: "ToggleButtonGroup \xB7 named, one option disabled" }),
+      /* @__PURE__ */ jsx16(
+        ToggleButtonGroup2,
+        {
+          "aria-label": "View mode",
+          value: viewMode,
+          onValueChange: setViewMode,
+          options: [
+            { value: "table", label: "Table" },
+            { value: "cards", label: "Cards" },
+            { value: "kanban", label: "Board", disabled: true }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "FileUpload" }),
+      /* @__PURE__ */ jsx16(FileUpload, { size: "small", onFilesAdded: () => {
+      }, uploadDescription: "Drop images here or click to choose" }),
+      /* @__PURE__ */ jsx16(FileUpload, { size: "small", disabled: true, onFilesAdded: () => {
+      }, uploadDescription: "Disabled" })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "Autocomplete \xB7 AutocompleteItem" }),
+      /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", children: "Pointer only: its items have no role and no keyboard path, and it is not portalled, so an overflow ancestor clips it. Prefer Select or MultiSelect until the kit has a combobox." }),
+      /* @__PURE__ */ jsxs16("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx16(
+          TextField3,
+          {
+            size: "small",
+            label: "Brand",
+            value: query,
+            onFocus: () => setAutocompleteOpen(true),
+            onChange: (e) => {
+              setQuery(e.target.value);
+              setAutocompleteOpen(true);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx16(Autocomplete, { open: autocompleteOpen && suggestions.length > 0, setOpen: setAutocompleteOpen, children: suggestions.map((suggestion) => /* @__PURE__ */ jsx16(AutocompleteItem, { onClick: () => {
+          setQuery(suggestion);
+          setAutocompleteOpen(false);
+        }, children: /* @__PURE__ */ jsx16(Typography14, { variant: "body2", children: suggestion }) }, suggestion)) })
+      ] })
+    ] })
+  ] }) });
+}
+var VIRTUAL_ROWS = Array.from({ length: 200 }, (_, i) => ({
+  name: `Record ${i + 1}`,
+  status: i % 3 === 0 ? "Draft" : "Published",
+  updated: `2026-10-${String(i % 28 + 1).padStart(2, "0")}`
+}));
+var VIRTUAL_COLUMNS = [
+  { key: "name", title: "Name", width: 220 },
+  { key: "status", title: "Status", width: 140 },
+  { key: "updated", title: "Updated", width: 160 }
+];
+function DataDisplaySection() {
+  return /* @__PURE__ */ jsx16(SectionBlock, { id: "data-display", title: "Data display \u2014 Badge, InfoLabel, Markdown, VirtualTable", children: /* @__PURE__ */ jsxs16("div", { className: "grid grid-cols-12 gap-6", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "Badge \xB7 primary, secondary, warning, error, invisible" }),
+      /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-6", children: [
+        ["primary", "secondary", "warning", "error"].map((color) => /* @__PURE__ */ jsx16(Badge, { color, children: /* @__PURE__ */ jsx16(MailIcon3, { size: 20, "aria-label": `Messages (${color})` }) }, color)),
+        /* @__PURE__ */ jsx16(Badge, { invisible: true, children: /* @__PURE__ */ jsx16(MailIcon3, { size: 20, "aria-label": "No new messages" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "InfoLabel \xB7 info, warn" }),
+      /* @__PURE__ */ jsx16(InfoLabel, { children: "The slug is generated from the title." }),
+      /* @__PURE__ */ jsx16(InfoLabel, { mode: "warn", children: "Changing the slug breaks existing links." })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: 'Markdown \xB7 size="small"' }),
+      /* @__PURE__ */ jsx16(Markdown, { size: "small", source: "### Release notes\n\nA **bold** claim, a [link](https://rebase.pro) and a list:\n\n- one\n- two\n\n`inline code`" })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "col-span-12", children: [
+      /* @__PURE__ */ jsx16(SpecimenLabel, { children: "VirtualTable \xB7 200 rows, only the visible ones rendered" }),
+      /* @__PURE__ */ jsx16("div", { className: "h-64 border border-hairline rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx16(
+        VirtualTable,
+        {
+          data: VIRTUAL_ROWS,
+          columns: VIRTUAL_COLUMNS,
+          rowHeight: 40,
+          cellRenderer: ({ rowData, column }) => /* @__PURE__ */ jsx16("div", { className: "px-3 flex items-center h-full", children: /* @__PURE__ */ jsx16(Typography14, { variant: "body2", noWrap: true, children: rowData ? rowData[column.key] : "" }) })
+        }
+      ) })
+    ] })
+  ] }) });
+}
+
+// src/debug/UIReferenceView.tsx
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
 var SECTIONS = [
   { id: "principles", label: "Principles", icon: SunMoonIcon, group: "System" },
   { id: "surfaces", label: "Surfaces", icon: LayoutGridIcon2, group: "System" },
@@ -3335,8 +3686,12 @@ var SECTIONS = [
   { id: "editor-sidebar", label: "Editor sidebar", icon: ColumnsIcon, group: "Shell" },
   { id: "buttons", label: "Buttons", icon: PlusIcon, group: "Controls" },
   { id: "inputs", label: "Form inputs", icon: FileTextIcon3, group: "Controls" },
+  { id: "more-controls", label: "More form controls", icon: FileTextIcon3, group: "Controls" },
+  { id: "overlays", label: "Overlays", icon: AppWindow, group: "Controls" },
+  { id: "disclosure", label: "Disclosure and layout", icon: ColumnsIcon, group: "Controls" },
   { id: "chips-alerts", label: "Chips and alerts", icon: TagIcon, group: "Controls" },
   { id: "data", label: "Cards and data", icon: LayoutGridIcon2, group: "Controls" },
+  { id: "data-display", label: "Data display", icon: ListIcon2, group: "Controls" },
   { id: "empty-states", label: "Empty states", icon: FileIcon, group: "Screens" },
   { id: "users", label: "Management", icon: UserIcon, group: "Screens" },
   { id: "user-dialog", label: "Form dialog", icon: CircleUserIcon, group: "Screens" },
@@ -3347,8 +3702,9 @@ var SECTIONS = [
 ];
 var SECTION_GROUPS = ["System", "Shell", "Controls", "Screens"];
 function UIReferenceView() {
-  const [activeSection, setActiveSection] = useState8("principles");
-  const scrollContainerRef = React10.useRef(null);
+  const [activeSection, setActiveSection] = useState9("principles");
+  const [panelMode, setPanelMode] = useState9("cms");
+  const scrollContainerRef = React11.useRef(null);
   const scrollTo = (id) => {
     const el = document.getElementById(id);
     const container = scrollContainerRef.current;
@@ -3358,21 +3714,21 @@ function UIReferenceView() {
     }
     setActiveSection(id);
   };
-  return /* @__PURE__ */ jsxs16("div", { className: "flex w-full", children: [
-    /* @__PURE__ */ jsxs16("div", { className: cls12("flex flex-col sticky top-0 h-screen grow-0 shrink-0 w-[232px] border-r", defaultBorderMixin6), children: [
-      /* @__PURE__ */ jsxs16("div", { className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2", children: [
-        /* @__PURE__ */ jsx16("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px]", children: /* @__PURE__ */ jsx16(RebaseLogo, { width: "28px", height: "28px" }) }),
-        /* @__PURE__ */ jsx16(Typography14, { variant: "subtitle1", noWrap: true, className: "truncate", children: "UI Ref" })
+  return /* @__PURE__ */ jsxs17("div", { className: "flex w-full", children: [
+    /* @__PURE__ */ jsxs17("div", { className: cls12("flex flex-col sticky top-0 h-screen grow-0 shrink-0 w-[232px] border-r", defaultBorderMixin6), children: [
+      /* @__PURE__ */ jsxs17("div", { className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2", children: [
+        /* @__PURE__ */ jsx17("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px]", children: /* @__PURE__ */ jsx17(RebaseLogo, { width: "28px", height: "28px" }) }),
+        /* @__PURE__ */ jsx17(Typography15, { variant: "subtitle1", noWrap: true, className: "truncate", children: "UI Ref" })
       ] }),
-      /* @__PURE__ */ jsx16("div", { className: "mt-3 flex-grow overflow-scroll no-scrollbar", children: SECTION_GROUPS.map((group) => /* @__PURE__ */ jsxs16("div", { className: "my-2 mx-2 flex flex-col", children: [
-        /* @__PURE__ */ jsxs16("div", { className: "pl-3 pr-2 py-0.5 flex flex-row items-center transition-colors cursor-pointer hover:bg-surface-hover rounded-lg", children: [
-          /* @__PURE__ */ jsx16(ChevronDownIcon, { size: iconSize3.small, className: "text-surface-400 dark:text-surface-400 transition-transform duration-200 mr-1" }),
-          /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "font-semibold text-[11px] uppercase tracking-wider flex-grow line-clamp-1 text-surface-400 dark:text-surface-400", children: group })
+      /* @__PURE__ */ jsx17("div", { className: "mt-3 flex-grow overflow-scroll no-scrollbar", children: SECTION_GROUPS.map((group) => /* @__PURE__ */ jsxs17("div", { className: "my-2 mx-2 flex flex-col", children: [
+        /* @__PURE__ */ jsxs17("div", { className: "pl-3 pr-2 py-0.5 flex flex-row items-center transition-colors cursor-pointer hover:bg-surface-hover rounded-lg", children: [
+          /* @__PURE__ */ jsx17(ChevronDownIcon, { size: iconSize3.small, className: "text-surface-400 dark:text-surface-400 transition-transform duration-200 mr-1" }),
+          /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "font-semibold text-[11px] uppercase tracking-wider flex-grow line-clamp-1 text-surface-400 dark:text-surface-400", children: group })
         ] }),
-        /* @__PURE__ */ jsx16("div", { className: "flex flex-col", children: SECTIONS.filter((s) => s.group === group).map((s) => {
+        /* @__PURE__ */ jsx17("div", { className: "flex flex-col", children: SECTIONS.filter((s) => s.group === group).map((s) => {
           const IconComponent = s.icon;
           const active = activeSection === s.id;
-          return /* @__PURE__ */ jsxs16(
+          return /* @__PURE__ */ jsxs17(
             "div",
             {
               onClick: () => scrollTo(s.id),
@@ -3384,60 +3740,60 @@ function UIReferenceView() {
                 active ? "bg-primary/8 dark:bg-primary/10 text-primary dark:text-primary [&_div]:text-primary" : ""
               ),
               children: [
-                /* @__PURE__ */ jsx16("div", { className: "shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-text-secondary-dark [&>svg]:size-4 group-hover/nav:text-primary transition-colors duration-150", children: /* @__PURE__ */ jsx16(IconComponent, { size: iconSize3.smallest }) }),
-                /* @__PURE__ */ jsx16("div", { className: "text-text-primary dark:text-surface-200 font-inherit truncate", children: s.label })
+                /* @__PURE__ */ jsx17("div", { className: "shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-text-secondary-dark [&>svg]:size-4 group-hover/nav:text-primary transition-colors duration-150", children: /* @__PURE__ */ jsx17(IconComponent, { size: iconSize3.smallest }) }),
+                /* @__PURE__ */ jsx17("div", { className: "text-text-primary dark:text-surface-200 font-inherit truncate", children: s.label })
               ]
             },
             s.id
           );
         }) })
       ] }, group)) }),
-      /* @__PURE__ */ jsx16("div", { className: cls12("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin6), children: /* @__PURE__ */ jsxs16("div", { className: cls12(
+      /* @__PURE__ */ jsx17("div", { className: cls12("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin6), children: /* @__PURE__ */ jsxs17("div", { className: cls12(
         "flex flex-row items-center rounded-lg cursor-pointer",
         "hover:bg-surface-hover",
         "transition-colors duration-150",
         "py-2"
       ), children: [
-        /* @__PURE__ */ jsx16("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400", children: /* @__PURE__ */ jsx16(ChevronsLeftIcon, { size: iconSize3.small }) }),
-        /* @__PURE__ */ jsx16(Typography14, { variant: "body2", className: "text-surface-500 dark:text-surface-400 select-none whitespace-nowrap", children: "Collapse" })
+        /* @__PURE__ */ jsx17("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400", children: /* @__PURE__ */ jsx17(ChevronsLeftIcon, { size: iconSize3.small }) }),
+        /* @__PURE__ */ jsx17(Typography15, { variant: "body2", className: "text-surface-500 dark:text-surface-400 select-none whitespace-nowrap", children: "Collapse" })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsxs16("div", { ref: scrollContainerRef, className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsx16(PrinciplesSection, {}),
-      /* @__PURE__ */ jsxs16(SectionBlock, { id: "surfaces", title: "Surfaces \u2014 theme.css, styles.ts", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
+    /* @__PURE__ */ jsxs17("div", { ref: scrollContainerRef, className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx17(PrinciplesSection, {}),
+      /* @__PURE__ */ jsxs17(SectionBlock, { id: "surfaces", title: "Surfaces \u2014 theme.css, styles.ts", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "A surface is named by role and the theme decides the value. Frame, sheet and card each sit one step lighter than the one below; above the card, raised and field are grey on both themes. A hairline marks an object (a card, a field, a floating panel), never a region (a tile, a row, a track), with one exception: the sheet edge against the frame, where the step alone is too small to read. See ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "packages/ui/DESIGN.md" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "packages/ui/DESIGN.md" }),
           "."
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: "bg-surface-frame rounded-xl p-4", children: [
-          /* @__PURE__ */ jsx16(Typography14, { variant: "caption", className: "typography-micro block mb-2 text-text-secondary dark:text-text-secondary-dark", children: "frame \xB7 bg-surface-frame" }),
-          /* @__PURE__ */ jsxs16("div", { className: "bg-surface-sheet border border-hairline rounded-xl p-4", children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", className: "typography-micro block mb-3 text-text-secondary dark:text-text-secondary-dark", children: "sheet \xB7 bg-surface-sheet" }),
-            /* @__PURE__ */ jsxs16("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-              /* @__PURE__ */ jsxs16("div", { className: "bg-surface-card border border-hairline rounded-xl p-4", children: [
-                /* @__PURE__ */ jsx16(Typography14, { variant: "caption", className: "typography-micro block mb-3 text-text-secondary dark:text-text-secondary-dark", children: "card \xB7 bg-surface-card + border-hairline" }),
-                /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap items-center gap-2 mb-3", children: [
-                  /* @__PURE__ */ jsx16("div", { className: "bg-surface-raised hover:bg-surface-raised-hover transition-colors rounded-lg px-3 py-1.5 text-sm", children: "raised" }),
-                  /* @__PURE__ */ jsx16("div", { className: "bg-surface-field hover:bg-surface-field-hover transition-colors rounded-lg px-3 py-1.5 text-sm text-text-secondary dark:text-text-secondary-dark", children: "field" }),
-                  /* @__PURE__ */ jsxs16("div", { className: "bg-surface-field rounded-lg p-1 inline-flex gap-1 text-sm", children: [
-                    /* @__PURE__ */ jsx16("span", { className: "bg-surface-lifted rounded-md px-3 py-0.5 shadow-sm", children: "lifted" }),
-                    /* @__PURE__ */ jsx16("span", { className: "px-3 py-0.5 text-text-secondary dark:text-text-secondary-dark", children: "track" })
+        /* @__PURE__ */ jsxs17("div", { className: "bg-surface-frame rounded-xl p-4", children: [
+          /* @__PURE__ */ jsx17(Typography15, { variant: "caption", className: "typography-micro block mb-2 text-text-secondary dark:text-text-secondary-dark", children: "frame \xB7 bg-surface-frame" }),
+          /* @__PURE__ */ jsxs17("div", { className: "bg-surface-sheet border border-hairline rounded-xl p-4", children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", className: "typography-micro block mb-3 text-text-secondary dark:text-text-secondary-dark", children: "sheet \xB7 bg-surface-sheet" }),
+            /* @__PURE__ */ jsxs17("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+              /* @__PURE__ */ jsxs17("div", { className: "bg-surface-card border border-hairline rounded-xl p-4", children: [
+                /* @__PURE__ */ jsx17(Typography15, { variant: "caption", className: "typography-micro block mb-3 text-text-secondary dark:text-text-secondary-dark", children: "card \xB7 bg-surface-card + border-hairline" }),
+                /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap items-center gap-2 mb-3", children: [
+                  /* @__PURE__ */ jsx17("div", { className: "bg-surface-raised hover:bg-surface-raised-hover transition-colors rounded-lg px-3 py-1.5 text-sm", children: "raised" }),
+                  /* @__PURE__ */ jsx17("div", { className: "bg-surface-field hover:bg-surface-field-hover transition-colors rounded-lg px-3 py-1.5 text-sm text-text-secondary dark:text-text-secondary-dark", children: "field" }),
+                  /* @__PURE__ */ jsxs17("div", { className: "bg-surface-field rounded-lg p-1 inline-flex gap-1 text-sm", children: [
+                    /* @__PURE__ */ jsx17("span", { className: "bg-surface-lifted rounded-md px-3 py-0.5 shadow-sm", children: "lifted" }),
+                    /* @__PURE__ */ jsx17("span", { className: "px-3 py-0.5 text-text-secondary dark:text-text-secondary-dark", children: "track" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-0.5", children: [
-                  /* @__PURE__ */ jsx16("div", { className: "px-3 py-1.5 text-sm rounded-md hover:bg-surface-hover transition-colors cursor-default", children: "row \xB7 hover:bg-surface-hover" }),
-                  /* @__PURE__ */ jsx16("div", { className: "px-3 py-1.5 text-sm rounded-md bg-surface-active", children: "row \xB7 bg-surface-active" })
+                /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsx17("div", { className: "px-3 py-1.5 text-sm rounded-md hover:bg-surface-hover transition-colors cursor-default", children: "row \xB7 hover:bg-surface-hover" }),
+                  /* @__PURE__ */ jsx17("div", { className: "px-3 py-1.5 text-sm rounded-md bg-surface-active", children: "row \xB7 bg-surface-active" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs16("div", { className: "bg-surface-card border border-hairline-strong rounded-lg p-4 shadow-lg self-start", children: [
-                /* @__PURE__ */ jsx16(Typography14, { variant: "caption", className: "typography-micro block mb-3 text-text-secondary dark:text-text-secondary-dark", children: "floating \xB7 paperMixin, border-hairline-strong" }),
-                /* @__PURE__ */ jsx16(Typography14, { variant: "body2", children: "A menu, a popover, a dialog. The stronger line is what lets it read against anything underneath." })
+              /* @__PURE__ */ jsxs17("div", { className: "bg-surface-card border border-hairline-strong rounded-lg p-4 shadow-lg self-start", children: [
+                /* @__PURE__ */ jsx17(Typography15, { variant: "caption", className: "typography-micro block mb-3 text-text-secondary dark:text-text-secondary-dark", children: "floating \xB7 paperMixin, border-hairline-strong" }),
+                /* @__PURE__ */ jsx17(Typography15, { variant: "body2", children: "A menu, a popover, a dialog. The stronger line is what lets it read against anything underneath." })
               ] })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx16("div", { className: "mt-4 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-2", children: [
+        /* @__PURE__ */ jsx17("div", { className: "mt-4 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-2", children: [
           ["frame", "bg-surface-frame"],
           ["sheet", "bg-surface-sheet"],
           ["card", "bg-surface-card"],
@@ -3446,278 +3802,287 @@ function UIReferenceView() {
           ["well", "bg-surface-well"],
           ["hairline", "border-hairline"],
           ["hairline strong", "border-hairline-strong"]
-        ].map(([label, cn]) => /* @__PURE__ */ jsx16("div", { className: cls12("rounded-lg h-14 flex items-end p-2 border", cn.startsWith("bg-") ? cn + " border-hairline" : "bg-surface-card " + cn), children: /* @__PURE__ */ jsx16(Typography14, { variant: "caption", className: "font-mono text-text-secondary dark:text-text-secondary-dark", children: label }) }, cn)) })
+        ].map(([label, cn]) => /* @__PURE__ */ jsx17("div", { className: cls12("rounded-lg h-14 flex items-end p-2 border", cn.startsWith("bg-") ? cn + " border-hairline" : "bg-surface-card " + cn), children: /* @__PURE__ */ jsx17(Typography15, { variant: "caption", className: "font-mono text-text-secondary dark:text-text-secondary-dark", children: label }) }, cn)) })
       ] }),
-      /* @__PURE__ */ jsx16(ColourSection, {}),
-      /* @__PURE__ */ jsxs16(SectionBlock, { id: "typography", title: "Typography", children: [
-        /* @__PURE__ */ jsx16(Typography14, { variant: "body2", color: "secondary", className: "mb-4 max-w-[68ch]", children: "Instrument Sans for headings, Inter for everything read, JetBrains Mono for everything measured. The ladder is monotonic: 600 for h1\u2013h4, 500 for h5, h6 and labels, 400 for copy, and 700 never. The display end separates itself by size and tracking, not by weight. Each row names its variant and the rendered size, weight and tracking tier it resolves to." }),
-        /* @__PURE__ */ jsx16("div", { className: "flex flex-col gap-3", children: TYPE_LADDER.map(([v, spec]) => /* @__PURE__ */ jsxs16("div", { className: cls12("flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-4 border-b pb-3 last:border-0", defaultBorderMixin6), children: [
-          /* @__PURE__ */ jsxs16("span", { className: "w-56 shrink-0 text-[11px] text-text-secondary dark:text-text-secondary-dark font-mono", children: [
+      /* @__PURE__ */ jsx17(ColourSection, {}),
+      /* @__PURE__ */ jsxs17(SectionBlock, { id: "typography", title: "Typography", children: [
+        /* @__PURE__ */ jsx17(Typography15, { variant: "body2", color: "secondary", className: "mb-4 max-w-[68ch]", children: "Instrument Sans for headings, Inter for everything read, JetBrains Mono for everything measured. The ladder is monotonic: 600 for h1\u2013h4, 500 for h5, h6 and labels, 400 for copy, and 700 never. The display end separates itself by size and tracking, not by weight. Each row names its variant and the rendered size, weight and tracking tier it resolves to." }),
+        /* @__PURE__ */ jsx17("div", { className: "flex flex-col gap-3", children: TYPE_LADDER.map(([v, spec]) => /* @__PURE__ */ jsxs17("div", { className: cls12("flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-4 border-b pb-3 last:border-0", defaultBorderMixin6), children: [
+          /* @__PURE__ */ jsxs17("span", { className: "w-56 shrink-0 text-[11px] text-text-secondary dark:text-text-secondary-dark font-mono", children: [
             v,
             " ",
-            /* @__PURE__ */ jsxs16("span", { className: "text-text-disabled dark:text-text-disabled-dark", children: [
+            /* @__PURE__ */ jsxs17("span", { className: "text-text-disabled dark:text-text-disabled-dark", children: [
               "\xB7 ",
               spec
             ] })
           ] }),
-          /* @__PURE__ */ jsx16(Typography14, { variant: v, component: "p", children: "The quick brown fox jumps over the lazy dog" })
+          /* @__PURE__ */ jsx17(Typography15, { variant: v, component: "p", children: "The quick brown fox jumps over the lazy dog" })
         ] }, v)) }),
-        /* @__PURE__ */ jsx16("div", { className: "flex gap-4 flex-wrap mt-4", children: ["primary", "secondary", "disabled", "error"].map((c) => /* @__PURE__ */ jsxs16(Typography14, { color: c, children: [
+        /* @__PURE__ */ jsx17("div", { className: "flex gap-4 flex-wrap mt-4", children: ["primary", "secondary", "disabled", "error"].map((c) => /* @__PURE__ */ jsxs17(Typography15, { color: c, children: [
           'color="',
           c,
           '"'
         ] }, c)) }),
-        /* @__PURE__ */ jsxs16("div", { className: cls12("mt-8 pt-6 border-t", defaultBorderMixin6), children: [
-          /* @__PURE__ */ jsx16(Typography14, { variant: "subtitle2", className: "block mb-1", children: "Data tiers" }),
-          /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "block mb-5 max-w-[65ch]", children: [
+        /* @__PURE__ */ jsxs17("div", { className: cls12("mt-8 pt-6 border-t", defaultBorderMixin6), children: [
+          /* @__PURE__ */ jsx17(Typography15, { variant: "subtitle2", className: "block mb-1", children: "Data tiers" }),
+          /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "block mb-5 max-w-[65ch]", children: [
             "For values that are looked up rather than read: a field name, a measurement, a headline figure. ",
-            /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "mono" }),
+            /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "mono" }),
             " and",
             " ",
-            /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "stat" }),
+            /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "stat" }),
             " both carry",
             " ",
-            /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "tabular-nums" }),
+            /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "tabular-nums" }),
             ", so a column of them keeps its decimal points aligned and a live counter does not jitter as its digits change width. The mono tier carries counts, sizes, times, ids and paths; it never carries a sentence."
           ] }),
-          /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap items-start gap-x-12 gap-y-5", children: [
+          /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap items-start gap-x-12 gap-y-5", children: [
             ["Region", "europe-west1"],
             ["Took", "32.2s"],
             ["Last run", "16/08/2026, 05:30:32"]
-          ].map(([label, value]) => /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "micro", component: "div", color: "secondary", className: "block", children: label }),
-            /* @__PURE__ */ jsx16(Typography14, { variant: "mono", component: "div", className: "block mt-1 text-sm", children: value })
+          ].map(([label, value]) => /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "micro", component: "div", color: "secondary", className: "block", children: label }),
+            /* @__PURE__ */ jsx17(Typography15, { variant: "mono", component: "div", className: "block mt-1 text-sm", children: value })
           ] }, label)) }),
-          /* @__PURE__ */ jsxs16("div", { className: "mt-6 flex flex-wrap items-end gap-10", children: [
-            /* @__PURE__ */ jsxs16("div", { children: [
-              /* @__PURE__ */ jsx16("span", { className: "text-[11px] text-text-secondary dark:text-text-secondary-dark font-mono", children: "stat \xB7 30 \xB7 600 \xB7 tabular" }),
-              /* @__PURE__ */ jsx16(Typography14, { variant: "stat", component: "div", className: "block mt-1", children: "1,284" })
+          /* @__PURE__ */ jsxs17("div", { className: "mt-6 flex flex-wrap items-end gap-10", children: [
+            /* @__PURE__ */ jsxs17("div", { children: [
+              /* @__PURE__ */ jsx17("span", { className: "text-[11px] text-text-secondary dark:text-text-secondary-dark font-mono", children: "stat \xB7 30 \xB7 600 \xB7 tabular" }),
+              /* @__PURE__ */ jsx17(Typography15, { variant: "stat", component: "div", className: "block mt-1", children: "1,284" })
             ] }),
-            /* @__PURE__ */ jsxs16("div", { children: [
-              /* @__PURE__ */ jsx16("span", { className: "text-[11px] text-text-secondary dark:text-text-secondary-dark font-mono", children: "display-2 \xB7 36\u219264 fluid \xB7 600 \xB7 the one greeting a page has" }),
-              /* @__PURE__ */ jsx16("div", { className: "text-display-2 font-headers font-semibold mt-1", children: "Good afternoon, Zulu." })
+            /* @__PURE__ */ jsxs17("div", { children: [
+              /* @__PURE__ */ jsx17("span", { className: "text-[11px] text-text-secondary dark:text-text-secondary-dark font-mono", children: "display-2 \xB7 36\u219264 fluid \xB7 600 \xB7 the one greeting a page has" }),
+              /* @__PURE__ */ jsx17("div", { className: "text-display-2 font-headers font-semibold mt-1", children: "Good afternoon, Zulu." })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsx16(ShapeSpaceSection, {}),
-      /* @__PURE__ */ jsx16(DepthIconsSection, {}),
-      /* @__PURE__ */ jsxs16(SectionBlock, { id: "drawer", title: "Drawer \u2014 DefaultDrawer.tsx", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsx17(ShapeSpaceSection, {}),
+      /* @__PURE__ */ jsx17(DepthIconsSection, {}),
+      /* @__PURE__ */ jsxs17(SectionBlock, { id: "drawer", title: "Drawer \u2014 DefaultDrawer.tsx", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "The drawer wraps ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "DrawerLogo" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "DrawerLogo" }),
           ", scrollable ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "DrawerNavigationGroup" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "DrawerNavigationGroup" }),
           "s, and ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "DrawerToggle" }),
-          ". Two visual states: collapsed (icon only, 72px) and expanded (280px)."
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "DrawerToggle" }),
+          "; with Studio enabled, the CMS / Studio switch sits under the logo. Two visual states: collapsed (icon only, 72px) and expanded (280px)."
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: "flex gap-6 flex-wrap", children: [
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-1", children: "Collapsed (72px)" }),
-            /* @__PURE__ */ jsxs16("div", { className: cls12("flex flex-col h-72 relative w-[72px] border rounded-lg overflow-hidden bg-surface-card", defaultBorderMixin6), children: [
-              /* @__PURE__ */ jsx16("div", { className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2", children: /* @__PURE__ */ jsx16("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px]", children: /* @__PURE__ */ jsx16(RebaseLogo, { width: "28px", height: "28px" }) }) }),
-              /* @__PURE__ */ jsx16("div", { className: "mt-3 flex-grow overflow-hidden", children: /* @__PURE__ */ jsx16("div", { className: "my-2 mx-2 flex flex-col", children: /* @__PURE__ */ jsx16("div", { className: "flex flex-col", children: [/* @__PURE__ */ jsx16(FolderIcon, { size: iconSize3.smallest }, "folder"), /* @__PURE__ */ jsx16(UserIcon, { size: iconSize3.smallest }, "user"), /* @__PURE__ */ jsx16(TagIcon, { size: iconSize3.smallest }, "tag")].map((icon, i) => /* @__PURE__ */ jsx16("div", { className: cls12("rounded-lg truncate hover:bg-surface-hover flex flex-row items-center h-[30px]", i === 0 && "bg-primary/8 dark:bg-primary/10"), children: /* @__PURE__ */ jsx16("div", { className: cls12("shrink-0 flex items-center justify-center w-[44px] h-[30px] [&>svg]:size-4", i === 0 ? "text-primary dark:text-primary" : "text-surface-500 dark:text-text-secondary-dark"), children: icon }) }, i)) }) }) }),
-              /* @__PURE__ */ jsx16("div", { className: cls12("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin6), children: /* @__PURE__ */ jsx16("div", { className: "flex flex-row items-center rounded-lg cursor-pointer hover:bg-surface-hover transition-colors duration-150 py-2", children: /* @__PURE__ */ jsx16("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400", children: /* @__PURE__ */ jsx16(ChevronsRightIcon, { size: iconSize3.small }) }) }) })
+        /* @__PURE__ */ jsxs17("div", { className: "flex gap-6 flex-wrap", children: [
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-1", children: "Collapsed (72px)" }),
+            /* @__PURE__ */ jsxs17("div", { className: cls12("flex flex-col h-72 relative w-[72px] border rounded-lg overflow-hidden bg-surface-card", defaultBorderMixin6), children: [
+              /* @__PURE__ */ jsx17("div", { className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2", children: /* @__PURE__ */ jsx17("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px]", children: /* @__PURE__ */ jsx17(RebaseLogo, { width: "28px", height: "28px" }) }) }),
+              /* @__PURE__ */ jsx17("div", { className: "mt-3 flex-grow overflow-hidden", children: /* @__PURE__ */ jsx17("div", { className: "my-2 mx-2 flex flex-col", children: /* @__PURE__ */ jsx17("div", { className: "flex flex-col", children: [/* @__PURE__ */ jsx17(FolderIcon, { size: iconSize3.smallest }, "folder"), /* @__PURE__ */ jsx17(UserIcon, { size: iconSize3.smallest }, "user"), /* @__PURE__ */ jsx17(TagIcon, { size: iconSize3.smallest }, "tag")].map((icon, i) => /* @__PURE__ */ jsx17("div", { className: cls12("rounded-lg truncate hover:bg-surface-hover flex flex-row items-center h-[30px]", i === 0 && "bg-primary/8 dark:bg-primary/10"), children: /* @__PURE__ */ jsx17("div", { className: cls12("shrink-0 flex items-center justify-center w-[44px] h-[30px] [&>svg]:size-4", i === 0 ? "text-primary dark:text-primary" : "text-surface-500 dark:text-text-secondary-dark"), children: icon }) }, i)) }) }) }),
+              /* @__PURE__ */ jsx17("div", { className: cls12("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin6), children: /* @__PURE__ */ jsx17("div", { className: "flex flex-row items-center rounded-lg cursor-pointer hover:bg-surface-hover transition-colors duration-150 py-2", children: /* @__PURE__ */ jsx17("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400", children: /* @__PURE__ */ jsx17(ChevronsRightIcon, { size: iconSize3.small }) }) }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-1", children: "Expanded (280px)" }),
-            /* @__PURE__ */ jsxs16("div", { className: cls12("flex flex-col h-72 relative w-[280px] border rounded-lg overflow-hidden bg-surface-card", defaultBorderMixin6), children: [
-              /* @__PURE__ */ jsxs16("div", { className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2", children: [
-                /* @__PURE__ */ jsx16("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px]", children: /* @__PURE__ */ jsx16(RebaseLogo, { width: "28px", height: "28px" }) }),
-                /* @__PURE__ */ jsx16("div", { className: "flex flex-row items-center overflow-hidden transition-all duration-200 ease-in-out opacity-100 w-full ml-1", children: /* @__PURE__ */ jsx16(Typography14, { variant: "subtitle1", noWrap: true, className: "truncate", children: "Rebase" }) })
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-1", children: "Expanded (280px)" }),
+            /* @__PURE__ */ jsxs17("div", { className: cls12("flex flex-col h-72 relative w-[280px] border rounded-lg overflow-hidden bg-surface-card", defaultBorderMixin6), children: [
+              /* @__PURE__ */ jsxs17("div", { className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2", children: [
+                /* @__PURE__ */ jsx17("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px]", children: /* @__PURE__ */ jsx17(RebaseLogo, { width: "28px", height: "28px" }) }),
+                /* @__PURE__ */ jsx17("div", { className: "flex flex-row items-center overflow-hidden transition-all duration-200 ease-in-out opacity-100 w-full ml-1", children: /* @__PURE__ */ jsx17(Typography15, { variant: "subtitle1", noWrap: true, className: "truncate", children: "Rebase" }) })
               ] }),
-              /* @__PURE__ */ jsx16("div", { className: "mt-3 flex-grow overflow-hidden", children: /* @__PURE__ */ jsxs16("div", { className: "my-2 mx-2 flex flex-col", children: [
-                /* @__PURE__ */ jsxs16("div", { className: "pl-3 pr-2 py-0.5 flex flex-row items-center transition-colors cursor-pointer hover:bg-surface-hover rounded-lg", children: [
-                  /* @__PURE__ */ jsx16(ChevronDownIcon, { size: iconSize3.small, className: "text-surface-400 dark:text-surface-400 mr-1" }),
-                  /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "font-semibold text-[11px] uppercase tracking-wider flex-grow line-clamp-1 text-surface-400 dark:text-surface-400", children: "Content" })
+              /* @__PURE__ */ jsx17("div", { className: "shrink-0 px-3 h-8 mt-2", children: /* @__PURE__ */ jsx17(
+                ToggleButtonGroup3,
+                {
+                  fullWidth: true,
+                  "aria-label": "Panel mode",
+                  value: panelMode,
+                  onValueChange: setPanelMode,
+                  options: [
+                    { value: "cms", label: "CMS" },
+                    { value: "studio", label: "Studio" }
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx17("div", { className: "mt-3 flex-grow overflow-hidden", children: /* @__PURE__ */ jsxs17("div", { className: "my-2 mx-2 flex flex-col", children: [
+                /* @__PURE__ */ jsxs17("div", { className: "pl-3 pr-2 py-0.5 flex flex-row items-center transition-colors cursor-pointer hover:bg-surface-hover rounded-lg", children: [
+                  /* @__PURE__ */ jsx17(ChevronDownIcon, { size: iconSize3.small, className: "text-surface-400 dark:text-surface-400 mr-1" }),
+                  /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "font-semibold text-[11px] uppercase tracking-wider flex-grow line-clamp-1 text-surface-400 dark:text-surface-400", children: "Content" })
                 ] }),
-                /* @__PURE__ */ jsx16("div", { className: "flex flex-col", children: [
-                  { label: "Posts", icon: /* @__PURE__ */ jsx16(FolderIcon, { size: iconSize3.smallest }), active: true },
-                  { label: "Authors", icon: /* @__PURE__ */ jsx16(UserIcon, { size: iconSize3.smallest }), active: false },
-                  { label: "Tags", icon: /* @__PURE__ */ jsx16(TagIcon, { size: iconSize3.smallest }), active: false }
-                ].map(({ label, icon, active }) => /* @__PURE__ */ jsxs16("div", { className: cls12(
+                /* @__PURE__ */ jsx17("div", { className: "flex flex-col", children: [
+                  { label: "Posts", icon: /* @__PURE__ */ jsx17(FolderIcon, { size: iconSize3.smallest }), active: true },
+                  { label: "Authors", icon: /* @__PURE__ */ jsx17(UserIcon, { size: iconSize3.smallest }), active: false },
+                  { label: "Tags", icon: /* @__PURE__ */ jsx17(TagIcon, { size: iconSize3.smallest }), active: false }
+                ].map(({ label, icon, active }) => /* @__PURE__ */ jsxs17("div", { className: cls12(
                   "rounded-lg truncate hover:bg-surface-hover text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white flex flex-row items-center pr-4 h-[30px] font-medium text-[13px] cursor-pointer",
                   active ? "bg-primary/8 dark:bg-primary/10 text-primary dark:text-primary [&_div]:text-primary" : ""
                 ), children: [
-                  /* @__PURE__ */ jsx16("div", { className: cls12("shrink-0 flex items-center justify-center w-[44px] h-[30px] [&>svg]:size-4 transition-colors duration-150", active ? "text-primary dark:text-primary" : "text-surface-500 dark:text-text-secondary-dark"), children: icon }),
-                  /* @__PURE__ */ jsx16("div", { className: "text-text-primary dark:text-surface-200 font-inherit truncate", children: label })
+                  /* @__PURE__ */ jsx17("div", { className: cls12("shrink-0 flex items-center justify-center w-[44px] h-[30px] [&>svg]:size-4 transition-colors duration-150", active ? "text-primary dark:text-primary" : "text-surface-500 dark:text-text-secondary-dark"), children: icon }),
+                  /* @__PURE__ */ jsx17("div", { className: "text-text-primary dark:text-surface-200 font-inherit truncate", children: label })
                 ] }, label)) })
               ] }) }),
-              /* @__PURE__ */ jsx16("div", { className: cls12("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin6), children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-row items-center rounded-lg cursor-pointer hover:bg-surface-hover transition-colors duration-150 py-2", children: [
-                /* @__PURE__ */ jsx16("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400", children: /* @__PURE__ */ jsx16(ChevronsLeftIcon, { size: iconSize3.small }) }),
-                /* @__PURE__ */ jsx16("div", { className: "overflow-hidden transition-all duration-200 ease-in-out opacity-100 w-auto", children: /* @__PURE__ */ jsx16(Typography14, { variant: "body2", className: "text-surface-500 dark:text-surface-400 select-none whitespace-nowrap", children: "Collapse" }) })
+              /* @__PURE__ */ jsx17("div", { className: cls12("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin6), children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-row items-center rounded-lg cursor-pointer hover:bg-surface-hover transition-colors duration-150 py-2", children: [
+                /* @__PURE__ */ jsx17("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400", children: /* @__PURE__ */ jsx17(ChevronsLeftIcon, { size: iconSize3.small }) }),
+                /* @__PURE__ */ jsx17("div", { className: "overflow-hidden transition-all duration-200 ease-in-out opacity-100 w-auto", children: /* @__PURE__ */ jsx17(Typography15, { variant: "body2", className: "text-surface-500 dark:text-surface-400 select-none whitespace-nowrap", children: "Collapse" }) })
               ] }) })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs16(SectionBlock, { id: "appbar", title: "App Bar \u2014 DefaultAppBar.tsx", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs17(SectionBlock, { id: "appbar", title: "App Bar \u2014 DefaultAppBar.tsx", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "Fixed at top (",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "h-16 absolute top-0" }),
-          "). Contains breadcrumbs (caption + body2), Content/Studio pill toggle, theme menu, and user avatar menu via ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Menu" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "h-16 absolute top-0" }),
+          "). Contains breadcrumbs (caption + body2), the theme menu, and user avatar menu via ",
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "Menu" }),
           "."
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: cls12("w-full h-16 flex flex-row gap-2 px-4 items-center border rounded-lg relative", defaultBorderMixin6), children: [
-          /* @__PURE__ */ jsx16("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-row gap-2 items-center", children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", children: "/" }),
-            /* @__PURE__ */ jsxs16("div", { className: "flex flex-row items-center gap-2 whitespace-nowrap", children: [
-              /* @__PURE__ */ jsx16(Typography14, { variant: "body2", children: "Posts" }),
-              /* @__PURE__ */ jsx16("span", { className: "text-xs text-surface-accent-500 dark:text-surface-accent-400 bg-surface-raised px-1 py-0 rounded", children: "42" })
+        /* @__PURE__ */ jsxs17("div", { className: cls12("w-full h-16 flex flex-row gap-2 px-4 items-center border rounded-lg relative", defaultBorderMixin6), children: [
+          /* @__PURE__ */ jsx17("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-row gap-2 items-center", children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", children: "/" }),
+            /* @__PURE__ */ jsxs17("div", { className: "flex flex-row items-center gap-2 whitespace-nowrap", children: [
+              /* @__PURE__ */ jsx17(Typography15, { variant: "body2", children: "Posts" }),
+              /* @__PURE__ */ jsx17("span", { className: "text-xs text-surface-accent-500 dark:text-surface-accent-400 bg-surface-raised px-1 py-0 rounded", children: "42" })
             ] }),
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", children: "/" }),
-            /* @__PURE__ */ jsx16("div", { className: "flex flex-row items-center gap-2 whitespace-nowrap", children: /* @__PURE__ */ jsx16(Typography14, { variant: "body2", children: "My Post" }) })
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", children: "/" }),
+            /* @__PURE__ */ jsx17("div", { className: "flex flex-row items-center gap-2 whitespace-nowrap", children: /* @__PURE__ */ jsx17(Typography15, { variant: "body2", children: "My Post" }) })
           ] }) }),
-          /* @__PURE__ */ jsx16("div", { className: "grow" }),
-          /* @__PURE__ */ jsxs16("div", { className: cls12("mr-2 hidden sm:flex bg-surface-field rounded-lg p-0.5"), children: [
-            /* @__PURE__ */ jsx16("button", { className: cls12("px-3 py-1 text-xs font-medium rounded-md transition-all", "bg-surface-lifted shadow-sm text-text-primary dark:text-text-primary-dark"), children: "Content" }),
-            /* @__PURE__ */ jsx16("button", { className: cls12("px-3 py-1 text-xs font-medium rounded-md transition-all", "text-surface-500 hover:text-surface-900 dark:hover:text-white"), children: "Studio" })
-          ] }),
-          /* @__PURE__ */ jsxs16(Menu, { trigger: /* @__PURE__ */ jsx16(IconButton5, { children: /* @__PURE__ */ jsx16(MoonIcon, {}) }), children: [
-            /* @__PURE__ */ jsxs16(MenuItem, { children: [
-              /* @__PURE__ */ jsx16(MoonIcon, { size: iconSize3.smallest }),
+          /* @__PURE__ */ jsx17("div", { className: "grow" }),
+          /* @__PURE__ */ jsxs17(Menu, { trigger: /* @__PURE__ */ jsx17(IconButton5, { "aria-label": "Theme", children: /* @__PURE__ */ jsx17(MoonIcon, {}) }), children: [
+            /* @__PURE__ */ jsxs17(MenuItem, { children: [
+              /* @__PURE__ */ jsx17(MoonIcon, { size: iconSize3.smallest }),
               " Dark"
             ] }),
-            /* @__PURE__ */ jsxs16(MenuItem, { children: [
-              /* @__PURE__ */ jsx16(SunIcon, { size: iconSize3.smallest }),
+            /* @__PURE__ */ jsxs17(MenuItem, { children: [
+              /* @__PURE__ */ jsx17(SunIcon, { size: iconSize3.smallest }),
               " Light"
             ] }),
-            /* @__PURE__ */ jsxs16(MenuItem, { children: [
-              /* @__PURE__ */ jsx16(SunMoonIcon, { size: iconSize3.smallest }),
+            /* @__PURE__ */ jsxs17(MenuItem, { children: [
+              /* @__PURE__ */ jsx17(SunMoonIcon, { size: iconSize3.smallest }),
               " System"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs16(Menu, { trigger: /* @__PURE__ */ jsx16(Avatar2, { children: "A" }), children: [
-            /* @__PURE__ */ jsxs16("div", { className: "px-4 py-2 mb-2", children: [
-              /* @__PURE__ */ jsx16(Typography14, { variant: "body1", color: "secondary", children: "Alice Johnson" }),
-              /* @__PURE__ */ jsx16(Typography14, { variant: "body2", color: "secondary", children: "alice@example.com" })
+          /* @__PURE__ */ jsxs17(Menu, { trigger: /* @__PURE__ */ jsx17(Avatar2, { children: "A" }), children: [
+            /* @__PURE__ */ jsxs17("div", { className: "px-4 py-2 mb-2", children: [
+              /* @__PURE__ */ jsx17(Typography15, { variant: "body1", color: "secondary", children: "Alice Johnson" }),
+              /* @__PURE__ */ jsx17(Typography15, { variant: "body2", color: "secondary", children: "alice@example.com" })
             ] }),
-            /* @__PURE__ */ jsxs16(MenuItem, { children: [
-              /* @__PURE__ */ jsx16(SettingsIcon3, {}),
+            /* @__PURE__ */ jsxs17(MenuItem, { children: [
+              /* @__PURE__ */ jsx17(SettingsIcon3, {}),
               " Account Settings"
             ] }),
-            /* @__PURE__ */ jsxs16(MenuItem, { children: [
-              /* @__PURE__ */ jsx16(LogOutIcon, {}),
+            /* @__PURE__ */ jsxs17(MenuItem, { children: [
+              /* @__PURE__ */ jsx17(LogOutIcon, {}),
               " Log Out"
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs16(SectionBlock, { id: "tabs", title: "Tabs \u2014 Tabs.tsx", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs17(SectionBlock, { id: "tabs", title: "Tabs \u2014 Tabs.tsx", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "All editor components use ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: 'variant="boxy"' }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: 'variant="boxy"' }),
           " tabs for sidebar navigation. The boxy variant provides a segmented, flat tab bar that integrates tightly with editor chrome."
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: 'variant="default"' }),
-            /* @__PURE__ */ jsxs16(Tabs, { value: "tab1", onValueChange: () => {
+        /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-6", children: [
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: 'variant="default"' }),
+            /* @__PURE__ */ jsxs17(Tabs, { value: "tab1", onValueChange: () => {
             }, children: [
-              /* @__PURE__ */ jsx16(Tab, { value: "tab1", children: "Schema" }),
-              /* @__PURE__ */ jsx16(Tab, { value: "tab2", children: "Snippets" }),
-              /* @__PURE__ */ jsx16(Tab, { value: "tab3", children: "History" })
+              /* @__PURE__ */ jsx17(Tab, { value: "tab1", children: "Schema" }),
+              /* @__PURE__ */ jsx17(Tab, { value: "tab2", children: "Snippets" }),
+              /* @__PURE__ */ jsx17(Tab, { value: "tab3", children: "History" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: 'variant="boxy" (Editor Standard)' }),
-            /* @__PURE__ */ jsxs16("div", { className: cls12("border rounded-lg overflow-hidden w-[320px]", defaultBorderMixin6), children: [
-              /* @__PURE__ */ jsxs16(Tabs, { value: "schema", onValueChange: () => {
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: 'variant="boxy" (Editor Standard)' }),
+            /* @__PURE__ */ jsxs17("div", { className: cls12("border rounded-lg overflow-hidden w-[320px]", defaultBorderMixin6), children: [
+              /* @__PURE__ */ jsxs17(Tabs, { value: "schema", onValueChange: () => {
               }, variant: "boxy", className: "border-b border-hairline", children: [
-                /* @__PURE__ */ jsx16(Tab, { value: "schema", children: "Schema" }),
-                /* @__PURE__ */ jsx16(Tab, { value: "snippets", children: "Snippets" }),
-                /* @__PURE__ */ jsx16(Tab, { value: "history", children: "History" })
+                /* @__PURE__ */ jsx17(Tab, { value: "schema", children: "Schema" }),
+                /* @__PURE__ */ jsx17(Tab, { value: "snippets", children: "Snippets" }),
+                /* @__PURE__ */ jsx17(Tab, { value: "history", children: "History" })
               ] }),
-              /* @__PURE__ */ jsxs16("div", { className: cls12("p-3 border-b flex justify-between items-center", defaultBorderMixin6), children: [
-                /* @__PURE__ */ jsx16(Typography14, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "TABLES" }),
-                /* @__PURE__ */ jsx16(IconButton5, { size: "small", children: /* @__PURE__ */ jsx16(SettingsIcon3, { size: iconSize3.smallest }) })
+              /* @__PURE__ */ jsxs17("div", { className: cls12("p-3 border-b flex justify-between items-center", defaultBorderMixin6), children: [
+                /* @__PURE__ */ jsx17(Typography15, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "TABLES" }),
+                /* @__PURE__ */ jsx17(IconButton5, { "aria-label": "Settings", size: "small", children: /* @__PURE__ */ jsx17(SettingsIcon3, { size: iconSize3.smallest }) })
               ] }),
-              /* @__PURE__ */ jsx16("div", { className: "p-2 h-24", children: /* @__PURE__ */ jsx16(Typography14, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark italic p-2", children: "Tab content area\u2026" }) })
+              /* @__PURE__ */ jsx17("div", { className: "p-2 h-24", children: /* @__PURE__ */ jsx17(Typography15, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark italic p-2", children: "Tab content area\u2026" }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Toolbar Tabs (boxy, inline with controls)" }),
-            /* @__PURE__ */ jsxs16("div", { className: cls12("border rounded-lg overflow-hidden flex items-center justify-between pr-2 bg-surface-card", defaultBorderMixin6), children: [
-              /* @__PURE__ */ jsxs16("div", { className: "flex items-center", children: [
-                /* @__PURE__ */ jsxs16(Tabs, { value: "query1", onValueChange: () => {
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Toolbar Tabs (boxy, inline with controls)" }),
+            /* @__PURE__ */ jsxs17("div", { className: cls12("border rounded-lg overflow-hidden flex items-center justify-between pr-2 bg-surface-card", defaultBorderMixin6), children: [
+              /* @__PURE__ */ jsxs17("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxs17(Tabs, { value: "query1", onValueChange: () => {
                 }, variant: "boxy", className: "w-[unset] flex-shrink-0", children: [
-                  /* @__PURE__ */ jsxs16(Tab, { value: "query1", className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx16("svg", { className: "w-3.5 h-3.5 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" }) }),
+                  /* @__PURE__ */ jsxs17(Tab, { value: "query1", className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx17("svg", { className: "w-3.5 h-3.5 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" }) }),
                     "Query 1"
                   ] }),
-                  /* @__PURE__ */ jsxs16(Tab, { value: "query2", className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx16("svg", { className: "w-3.5 h-3.5 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" }) }),
+                  /* @__PURE__ */ jsxs17(Tab, { value: "query2", className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx17("svg", { className: "w-3.5 h-3.5 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" }) }),
                     "Query 2"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx16(IconButton5, { size: "small", className: "ml-2 flex-shrink-0", children: /* @__PURE__ */ jsx16(PlusIcon, {}) })
+                /* @__PURE__ */ jsx17(IconButton5, { "aria-label": "New tab", size: "small", className: "ml-2 flex-shrink-0", children: /* @__PURE__ */ jsx17(PlusIcon, {}) })
               ] }),
-              /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx16(Button9, { variant: "text", size: "small", children: "Explain" }),
-                /* @__PURE__ */ jsx16("div", { className: "h-4 w-px bg-hairline" }),
-                /* @__PURE__ */ jsx16(Button9, { size: "small", color: "primary", children: "Run" })
+              /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx17(Button10, { variant: "text", size: "small", children: "Explain" }),
+                /* @__PURE__ */ jsx17("div", { className: "h-4 w-px bg-hairline" }),
+                /* @__PURE__ */ jsx17(Button10, { size: "small", color: "primary", children: "Run" })
               ] })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs16(SectionBlock, { id: "editor-sidebar", title: "Editor Sidebar \u2014 Harmonized Pattern", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs17(SectionBlock, { id: "editor-sidebar", title: "Editor Sidebar \u2014 Harmonized Pattern", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "All studio editor components (SQL, JS, RLS, Collection) share the same underlying sidebar foundation:",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: 'Tabs variant="boxy"' }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: 'Tabs variant="boxy"' }),
           " at top (optional) \u2192 section header with uppercase label \u2192 scrollable list. While SQL/JS/RLS use dense tree entries, the Collection Schema Editor uses larger items (",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "px-3 py-2" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "px-3 py-2" }),
           ", ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "text-sm" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "text-sm" }),
           ") suitable for primary navigation."
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: "flex gap-6 flex-wrap", children: [
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-1", children: "SQL Editor Sidebar" }),
-            /* @__PURE__ */ jsxs16("div", { className: cls12("flex flex-col h-72 w-[240px] border rounded-lg overflow-hidden", defaultBorderMixin6), children: [
-              /* @__PURE__ */ jsxs16(Tabs, { value: "schema", onValueChange: () => {
+        /* @__PURE__ */ jsxs17("div", { className: "flex gap-6 flex-wrap", children: [
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-1", children: "SQL Editor Sidebar" }),
+            /* @__PURE__ */ jsxs17("div", { className: cls12("flex flex-col h-72 w-[240px] border rounded-lg overflow-hidden", defaultBorderMixin6), children: [
+              /* @__PURE__ */ jsxs17(Tabs, { value: "schema", onValueChange: () => {
               }, variant: "boxy", className: "border-b border-hairline", children: [
-                /* @__PURE__ */ jsx16(Tab, { value: "schema", children: "Schema" }),
-                /* @__PURE__ */ jsx16(Tab, { value: "snippets", children: "Snippets" }),
-                /* @__PURE__ */ jsx16(Tab, { value: "history", children: "History" })
+                /* @__PURE__ */ jsx17(Tab, { value: "schema", children: "Schema" }),
+                /* @__PURE__ */ jsx17(Tab, { value: "snippets", children: "Snippets" }),
+                /* @__PURE__ */ jsx17(Tab, { value: "history", children: "History" })
               ] }),
-              /* @__PURE__ */ jsxs16("div", { className: cls12("p-3 border-b flex justify-between items-center", defaultBorderMixin6), children: [
-                /* @__PURE__ */ jsx16(Typography14, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-secondary dark:text-text-secondary-dark", children: "TABLES" }),
-                /* @__PURE__ */ jsx16(IconButton5, { size: "small", children: /* @__PURE__ */ jsx16(SettingsIcon3, { size: iconSize3.smallest }) })
+              /* @__PURE__ */ jsxs17("div", { className: cls12("p-3 border-b flex justify-between items-center", defaultBorderMixin6), children: [
+                /* @__PURE__ */ jsx17(Typography15, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-secondary dark:text-text-secondary-dark", children: "TABLES" }),
+                /* @__PURE__ */ jsx17(IconButton5, { "aria-label": "Settings", size: "small", children: /* @__PURE__ */ jsx17(SettingsIcon3, { size: iconSize3.smallest }) })
               ] }),
-              /* @__PURE__ */ jsx16("div", { className: "flex-grow overflow-y-auto no-scrollbar p-1", children: /* @__PURE__ */ jsxs16("div", { className: "mb-2", children: [
-                /* @__PURE__ */ jsxs16("div", { className: "flex items-center p-1 cursor-pointer hover:bg-surface-hover rounded transition-colors", children: [
-                  /* @__PURE__ */ jsx16("svg", { className: "w-3 h-3 mr-1 rotate-90", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx16("path", { d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" }) }),
-                  /* @__PURE__ */ jsx16(Typography14, { variant: "body2", className: "text-text-primary dark:text-text-primary-dark font-medium text-xs", children: "public" })
+              /* @__PURE__ */ jsx17("div", { className: "flex-grow overflow-y-auto no-scrollbar p-1", children: /* @__PURE__ */ jsxs17("div", { className: "mb-2", children: [
+                /* @__PURE__ */ jsxs17("div", { className: "flex items-center p-1 cursor-pointer hover:bg-surface-hover rounded transition-colors", children: [
+                  /* @__PURE__ */ jsx17("svg", { className: "w-3 h-3 mr-1 rotate-90", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx17("path", { d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" }) }),
+                  /* @__PURE__ */ jsx17(Typography15, { variant: "body2", className: "text-text-primary dark:text-text-primary-dark font-medium text-xs", children: "public" })
                 ] }),
-                /* @__PURE__ */ jsx16("div", { className: "ml-3 mt-1 space-y-1", children: ["users", "posts", "comments"].map((t) => /* @__PURE__ */ jsxs16("div", { className: "flex items-center p-1 cursor-pointer hover:bg-surface-hover rounded transition-colors group", children: [
-                  /* @__PURE__ */ jsx16("svg", { className: "w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled dark:text-text-disabled-dark", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }),
-                  /* @__PURE__ */ jsx16(Typography14, { variant: "body2", className: "text-text-secondary dark:text-text-secondary-dark text-xs truncate", children: t })
+                /* @__PURE__ */ jsx17("div", { className: "ml-3 mt-1 space-y-1", children: ["users", "posts", "comments"].map((t) => /* @__PURE__ */ jsxs17("div", { className: "flex items-center p-1 cursor-pointer hover:bg-surface-hover rounded transition-colors group", children: [
+                  /* @__PURE__ */ jsx17("svg", { className: "w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled dark:text-text-disabled-dark", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }),
+                  /* @__PURE__ */ jsx17(Typography15, { variant: "body2", className: "text-text-secondary dark:text-text-secondary-dark text-xs truncate", children: t })
                 ] }, t)) })
               ] }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-1", children: "RLS Editor Sidebar" }),
-            /* @__PURE__ */ jsxs16("div", { className: cls12("flex flex-col h-72 w-[240px] border rounded-lg overflow-hidden", defaultBorderMixin6), children: [
-              /* @__PURE__ */ jsxs16(Tabs, { value: "tables", onValueChange: () => {
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-1", children: "RLS Editor Sidebar" }),
+            /* @__PURE__ */ jsxs17("div", { className: cls12("flex flex-col h-72 w-[240px] border rounded-lg overflow-hidden", defaultBorderMixin6), children: [
+              /* @__PURE__ */ jsxs17(Tabs, { value: "tables", onValueChange: () => {
               }, variant: "boxy", className: "border-b border-hairline", children: [
-                /* @__PURE__ */ jsx16(Tab, { value: "tables", children: "Tables" }),
-                /* @__PURE__ */ jsx16(Tab, { value: "info", children: "Info" })
+                /* @__PURE__ */ jsx17(Tab, { value: "tables", children: "Tables" }),
+                /* @__PURE__ */ jsx17(Tab, { value: "info", children: "Info" })
               ] }),
-              /* @__PURE__ */ jsxs16("div", { className: cls12("p-3 border-b flex justify-between items-center", defaultBorderMixin6), children: [
-                /* @__PURE__ */ jsx16(Typography14, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "RLS" }),
-                /* @__PURE__ */ jsx16(IconButton5, { size: "small", children: /* @__PURE__ */ jsx16(SettingsIcon3, { size: iconSize3.smallest }) })
+              /* @__PURE__ */ jsxs17("div", { className: cls12("p-3 border-b flex justify-between items-center", defaultBorderMixin6), children: [
+                /* @__PURE__ */ jsx17(Typography15, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "RLS" }),
+                /* @__PURE__ */ jsx17(IconButton5, { "aria-label": "Settings", size: "small", children: /* @__PURE__ */ jsx17(SettingsIcon3, { size: iconSize3.smallest }) })
               ] }),
-              /* @__PURE__ */ jsx16("div", { className: "flex-grow overflow-y-auto no-scrollbar p-1", children: /* @__PURE__ */ jsxs16("div", { className: "mb-2", children: [
-                /* @__PURE__ */ jsxs16("div", { className: "flex items-center p-1 cursor-pointer hover:bg-surface-hover rounded transition-colors", children: [
-                  /* @__PURE__ */ jsx16("svg", { className: "w-3 h-3 mr-1 rotate-90", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx16("path", { d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" }) }),
-                  /* @__PURE__ */ jsx16(Typography14, { variant: "body2", className: "text-text-primary dark:text-text-primary-dark font-medium text-xs", children: "public" })
+              /* @__PURE__ */ jsx17("div", { className: "flex-grow overflow-y-auto no-scrollbar p-1", children: /* @__PURE__ */ jsxs17("div", { className: "mb-2", children: [
+                /* @__PURE__ */ jsxs17("div", { className: "flex items-center p-1 cursor-pointer hover:bg-surface-hover rounded transition-colors", children: [
+                  /* @__PURE__ */ jsx17("svg", { className: "w-3 h-3 mr-1 rotate-90", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx17("path", { d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" }) }),
+                  /* @__PURE__ */ jsx17(Typography15, { variant: "body2", className: "text-text-primary dark:text-text-primary-dark font-medium text-xs", children: "public" })
                 ] }),
-                /* @__PURE__ */ jsx16("div", { className: "ml-3 mt-1 space-y-0.5", children: [{
+                /* @__PURE__ */ jsx17("div", { className: "ml-3 mt-1 space-y-0.5", children: [{
                   name: "users",
                   enabled: true
                 }, {
@@ -3726,352 +4091,356 @@ function UIReferenceView() {
                 }, {
                   name: "sessions",
                   enabled: false
-                }].map((t) => /* @__PURE__ */ jsxs16("div", { className: cls12("flex items-center p-1 cursor-pointer rounded transition-colors", t.name === "users" ? "bg-primary/10 text-primary dark:bg-primary/20" : "hover:bg-surface-hover text-text-secondary"), children: [
-                  /* @__PURE__ */ jsx16("svg", { className: "w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }),
-                  /* @__PURE__ */ jsx16(Typography14, { variant: "body2", className: "text-xs truncate flex-1", children: t.name }),
-                  /* @__PURE__ */ jsx16("div", { className: cls12("w-1.5 h-1.5 rounded-full shrink-0", t.enabled ? "bg-green-500" : "bg-orange-400 opacity-50") })
+                }].map((t) => /* @__PURE__ */ jsxs17("div", { className: cls12("flex items-center p-1 cursor-pointer rounded transition-colors", t.name === "users" ? "bg-primary/10 text-primary dark:bg-primary/20" : "hover:bg-surface-hover text-text-secondary"), children: [
+                  /* @__PURE__ */ jsx17("svg", { className: "w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }),
+                  /* @__PURE__ */ jsx17(Typography15, { variant: "body2", className: "text-xs truncate flex-1", children: t.name }),
+                  /* @__PURE__ */ jsx17("div", { className: cls12("w-1.5 h-1.5 rounded-full shrink-0", t.enabled ? "bg-green-500" : "bg-orange-400 opacity-50") })
                 ] }, t.name)) })
               ] }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-1", children: "Collection Editor Sidebar" }),
-            /* @__PURE__ */ jsxs16("div", { className: cls12("flex flex-col h-72 w-[240px] border rounded-lg overflow-hidden bg-surface-card", defaultBorderMixin6), children: [
-              /* @__PURE__ */ jsxs16("div", { className: cls12("p-3 border-b flex justify-between items-center", defaultBorderMixin6), children: [
-                /* @__PURE__ */ jsx16(Typography14, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "COLLECTIONS" }),
-                /* @__PURE__ */ jsx16(IconButton5, { size: "small", children: /* @__PURE__ */ jsx16(PlusIcon, { size: iconSize3.smallest }) })
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-1", children: "Collection Editor Sidebar" }),
+            /* @__PURE__ */ jsxs17("div", { className: cls12("flex flex-col h-72 w-[240px] border rounded-lg overflow-hidden bg-surface-card", defaultBorderMixin6), children: [
+              /* @__PURE__ */ jsxs17("div", { className: cls12("p-3 border-b flex justify-between items-center", defaultBorderMixin6), children: [
+                /* @__PURE__ */ jsx17(Typography15, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "COLLECTIONS" }),
+                /* @__PURE__ */ jsx17(IconButton5, { "aria-label": "Add collection", size: "small", children: /* @__PURE__ */ jsx17(PlusIcon, { size: iconSize3.smallest }) })
               ] }),
-              /* @__PURE__ */ jsx16("div", { className: "flex-grow overflow-y-auto no-scrollbar p-2 space-y-0.5", children: [{ name: "Authors" }, {
+              /* @__PURE__ */ jsx17("div", { className: "flex-grow overflow-y-auto no-scrollbar p-2 space-y-0.5", children: [{ name: "Authors" }, {
                 name: "Posts",
                 selected: true
-              }, { name: "Tags" }].map((c) => /* @__PURE__ */ jsxs16("div", { className: cls12("flex items-center gap-3 px-3 py-2 cursor-pointer rounded-md text-sm transition-colors", c.selected ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light" : "hover:bg-surface-hover text-text-secondary dark:text-text-secondary-dark"), children: [
-                /* @__PURE__ */ jsx16(FolderIcon, { size: iconSize3.small, className: cls12(c.selected ? "text-primary dark:text-primary-light" : "text-text-secondary dark:text-text-secondary-dark") }),
-                /* @__PURE__ */ jsx16("span", { className: "truncate flex-1", children: c.name })
+              }, { name: "Tags" }].map((c) => /* @__PURE__ */ jsxs17("div", { className: cls12("flex items-center gap-3 px-3 py-2 cursor-pointer rounded-md text-sm transition-colors", c.selected ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light" : "hover:bg-surface-hover text-text-secondary dark:text-text-secondary-dark"), children: [
+                /* @__PURE__ */ jsx17(FolderIcon, { size: iconSize3.small, className: cls12(c.selected ? "text-primary dark:text-primary-light" : "text-text-secondary dark:text-text-secondary-dark") }),
+                /* @__PURE__ */ jsx17("span", { className: "truncate flex-1", children: c.name })
               ] }, c.name)) })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs16(SectionBlock, { id: "empty-states", title: "Empty States \u2014 Canonical Pattern", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs17(SectionBlock, { id: "empty-states", title: "Empty States \u2014 Canonical Pattern", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "All empty / placeholder states share the same layout: a centered ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "flex-col" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "flex-col" }),
           " container with ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: 'Typography variant="label"' }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: 'Typography variant="label"' }),
           " for the message and a ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Button" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "Button" }),
           " with ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "AddIcon" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "AddIcon" }),
           " for the primary action. Sources: ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "CollectionPropertiesEditorForm" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "CollectionPropertiesEditorForm" }),
           ", ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "CollectionsStudioView" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "CollectionsStudioView" }),
           ", ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "CollectionStudioView" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "CollectionStudioView" }),
           "."
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: "flex gap-6 flex-wrap", children: [
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-1", children: "Property Editor (no selection)" }),
-            /* @__PURE__ */ jsx16("div", { className: cls12("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin6), children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
-              /* @__PURE__ */ jsx16(Typography14, { variant: "label", className: "text-center px-4", children: "Select a property to edit it" }),
-              /* @__PURE__ */ jsxs16(Button9, { children: [
-                /* @__PURE__ */ jsx16(PlusIcon, {}),
+        /* @__PURE__ */ jsxs17("div", { className: "flex gap-6 flex-wrap", children: [
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-1", children: "Property Editor (no selection)" }),
+            /* @__PURE__ */ jsx17("div", { className: cls12("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin6), children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
+              /* @__PURE__ */ jsx17(Typography15, { variant: "label", className: "text-center px-4", children: "Select a property to edit it" }),
+              /* @__PURE__ */ jsxs17(Button10, { children: [
+                /* @__PURE__ */ jsx17(PlusIcon, {}),
                 "Add new property"
               ] })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-1", children: "Property Editor (empty collection)" }),
-            /* @__PURE__ */ jsx16("div", { className: cls12("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin6), children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
-              /* @__PURE__ */ jsx16(Typography14, { variant: "label", className: "text-center px-4", children: "Now you can add your first property" }),
-              /* @__PURE__ */ jsxs16(Button9, { children: [
-                /* @__PURE__ */ jsx16(PlusIcon, {}),
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-1", children: "Property Editor (empty collection)" }),
+            /* @__PURE__ */ jsx17("div", { className: cls12("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin6), children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
+              /* @__PURE__ */ jsx17(Typography15, { variant: "label", className: "text-center px-4", children: "Now you can add your first property" }),
+              /* @__PURE__ */ jsxs17(Button10, { children: [
+                /* @__PURE__ */ jsx17(PlusIcon, {}),
                 "Add new property"
               ] })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-1", children: "Collection ListIcon (no selection)" }),
-            /* @__PURE__ */ jsx16("div", { className: cls12("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin6), children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
-              /* @__PURE__ */ jsx16(Typography14, { variant: "label", className: "text-center px-4", children: "Select a collection or create a new one to start editing" }),
-              /* @__PURE__ */ jsxs16(Button9, { children: [
-                /* @__PURE__ */ jsx16(PlusIcon, {}),
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-1", children: "Collection ListIcon (no selection)" }),
+            /* @__PURE__ */ jsx17("div", { className: cls12("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin6), children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
+              /* @__PURE__ */ jsx17(Typography15, { variant: "label", className: "text-center px-4", children: "Select a collection or create a new one to start editing" }),
+              /* @__PURE__ */ jsxs17(Button10, { children: [
+                /* @__PURE__ */ jsx17(PlusIcon, {}),
                 "Add new collection"
               ] })
             ] }) })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs16(SectionBlock, { id: "buttons", title: "Buttons", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4 max-w-[68ch]", children: [
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "neutral" }),
+      /* @__PURE__ */ jsxs17(SectionBlock, { id: "buttons", title: "Buttons", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4 max-w-[68ch]", children: [
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "neutral" }),
           " is the default and paints ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "surface-raised" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "surface-raised" }),
           "; it is what almost every button is. ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "primary" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "primary" }),
           " filled is the one main action a screen has. The label is 14px at weight 500, sentence case, no tracking: emphasis is the fill, never the letterforms. ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "secondary" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "secondary" }),
           " and ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "error" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "error" }),
           " exist for destructive confirmations and the marketing site, not for the panel's chrome."
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-6", children: [
-          ["filled", "text"].map((variant) => /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsxs16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: [
+        /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-6", children: [
+          ["filled", "text"].map((variant) => /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsxs17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: [
               'variant="',
               variant,
               '"'
             ] }),
-            /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap gap-3 items-center", children: [
-              ["neutral", "primary", "text", "secondary", "error"].map((color) => /* @__PURE__ */ jsx16(Button9, { variant, color, children: color.charAt(0).toUpperCase() + color.slice(1) }, color)),
-              /* @__PURE__ */ jsx16(Button9, { variant, disabled: true, children: "Disabled" })
+            /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap gap-3 items-center", children: [
+              ["neutral", "primary", "text", "secondary", "error"].map((color) => /* @__PURE__ */ jsx17(Button10, { variant, color, children: color.charAt(0).toUpperCase() + color.slice(1) }, color)),
+              /* @__PURE__ */ jsx17(Button10, { variant, disabled: true, children: "Disabled" })
             ] })
           ] }, variant)),
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "sizes" }),
-            /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap items-end gap-3", children: ["small", "medium", "large", "xl", "2xl"].map((s) => /* @__PURE__ */ jsx16(Button9, { size: s, children: s.charAt(0).toUpperCase() + s.slice(1) }, s)) })
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "sizes" }),
+            /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap items-end gap-3", children: ["small", "medium", "large", "xl", "2xl"].map((s) => /* @__PURE__ */ jsx17(Button10, { size: s, children: s.charAt(0).toUpperCase() + s.slice(1) }, s)) })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "IconButton \u2014 sizes" }),
-            /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap gap-3 items-end", children: [
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "IconButton \u2014 sizes" }),
+            /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap gap-3 items-end", children: [
               [
-                { s: "smallest", icon: /* @__PURE__ */ jsx16(PencilIcon3, { size: 14 }) },
-                { s: "small", icon: /* @__PURE__ */ jsx16(PencilIcon3, { size: 16 }) },
-                { s: "medium", icon: /* @__PURE__ */ jsx16(PencilIcon3, { size: 20 }) },
-                { s: "large", icon: /* @__PURE__ */ jsx16(PencilIcon3, { size: 24 }) }
-              ].map(({ s, icon }) => /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center gap-1", children: [
-                /* @__PURE__ */ jsx16(IconButton5, { size: s, children: icon }),
-                /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", children: s.charAt(0).toUpperCase() + s.slice(1) })
+                { s: "smallest", icon: /* @__PURE__ */ jsx17(PencilIcon3, { size: 14 }) },
+                { s: "small", icon: /* @__PURE__ */ jsx17(PencilIcon3, { size: 16 }) },
+                { s: "medium", icon: /* @__PURE__ */ jsx17(PencilIcon3, { size: 20 }) },
+                { s: "large", icon: /* @__PURE__ */ jsx17(PencilIcon3, { size: 24 }) }
+              ].map(({ s, icon }) => /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center gap-1", children: [
+                /* @__PURE__ */ jsx17(IconButton5, { "aria-label": "Edit", size: s, children: icon }),
+                /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", children: s.charAt(0).toUpperCase() + s.slice(1) })
               ] }, s)),
-              /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center gap-1", children: [
-                /* @__PURE__ */ jsx16(IconButton5, { disabled: true, children: /* @__PURE__ */ jsx16(Trash2Icon3, { size: 20 }) }),
-                /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", children: "Disabled" })
+              /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center gap-1", children: [
+                /* @__PURE__ */ jsx17(IconButton5, { "aria-label": "Delete", disabled: true, children: /* @__PURE__ */ jsx17(Trash2Icon3, { size: 20 }) }),
+                /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", children: "Disabled" })
               ] }),
-              /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center gap-1", children: [
-                /* @__PURE__ */ jsx16(IconButton5, { variant: "filled", children: /* @__PURE__ */ jsx16(PlusIcon, { size: 20 }) }),
-                /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", children: "Filled" })
+              /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center gap-1", children: [
+                /* @__PURE__ */ jsx17(IconButton5, { "aria-label": "Add", variant: "filled", children: /* @__PURE__ */ jsx17(PlusIcon, { size: 20 }) }),
+                /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", children: "Filled" })
               ] }),
-              /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center gap-1", children: [
-                /* @__PURE__ */ jsx16(IconButton5, { shape: "square", children: /* @__PURE__ */ jsx16(SettingsIcon3, { size: 20 }) }),
-                /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", children: "Square" })
+              /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center gap-1", children: [
+                /* @__PURE__ */ jsx17(IconButton5, { "aria-label": "Settings", shape: "square", children: /* @__PURE__ */ jsx17(SettingsIcon3, { size: 20 }) }),
+                /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", children: "Square" })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "LoadingButton" }),
-            /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap gap-3", children: [
-              /* @__PURE__ */ jsx16(LoadingButton, { loading: true, children: "Saving\u2026" }),
-              /* @__PURE__ */ jsx16(LoadingButton, { loading: false, children: "Idle" })
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "LoadingButton" }),
+            /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap gap-3", children: [
+              /* @__PURE__ */ jsx17(LoadingButton, { loading: true, children: "Saving\u2026" }),
+              /* @__PURE__ */ jsx17(LoadingButton, { loading: false, children: "Idle" })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs16(SectionBlock, { id: "inputs", title: "Form Inputs", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4 max-w-[68ch]", children: [
+      /* @__PURE__ */ jsxs17(SectionBlock, { id: "inputs", title: "Form Inputs", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4 max-w-[68ch]", children: [
           "Two ways to label a field. A record form puts the label ",
-          /* @__PURE__ */ jsx16("em", { children: "above" }),
+          /* @__PURE__ */ jsx17("em", { children: "above" }),
           " the control (",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "FieldBlock" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "FieldBlock" }),
           ": 13px, primary ink, muted type icon) and the control is",
           " ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "large" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "large" }),
           ", 48px. A dialog or a standalone control carries its label",
           " ",
-          /* @__PURE__ */ jsx16("em", { children: "inside" }),
+          /* @__PURE__ */ jsx17("em", { children: "inside" }),
           " as the floating ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "label" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "label" }),
           " prop and is",
           " ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "medium" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "medium" }),
           ", 40px. Every field has its hairline."
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: "grid grid-cols-12 gap-4", children: [
-          /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6", children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: 'record form \xB7 size="large", label above' }),
-            /* @__PURE__ */ jsx16("div", { className: "flex flex-col gap-5 mb-6", children: [
+        /* @__PURE__ */ jsxs17("div", { className: "grid grid-cols-12 gap-4", children: [
+          /* @__PURE__ */ jsxs17("div", { className: "col-span-12 sm:col-span-6", children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: 'record form \xB7 size="large", label above' }),
+            /* @__PURE__ */ jsx17("div", { className: "flex flex-col gap-5 mb-6", children: [
               ["Product name", "Italian coffee maker", "Shown on the storefront and in receipts.", false, false],
               ["SKU", "SKU-57032", "Stock keeping unit \u2014 unique product identifier", true, false],
               ["Brand", "Alessi", void 0, false, true]
-            ].map(([label, value, help, required, disabled]) => /* @__PURE__ */ jsxs16("div", { className: "flex flex-col min-w-0", children: [
-              /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1.5 font-medium leading-tight mb-1.5 text-[13px]", children: [
-                /* @__PURE__ */ jsx16("span", { className: "shrink-0 text-text-disabled dark:text-text-disabled-dark", children: /* @__PURE__ */ jsx16(FileTextIcon3, { size: 14 }) }),
-                /* @__PURE__ */ jsx16("span", { className: "truncate", children: label }),
-                required && /* @__PURE__ */ jsx16("span", { className: "text-red-500 dark:text-red-500 -ml-1", children: "*" })
+            ].map(([label, value, help, required, disabled]) => /* @__PURE__ */ jsxs17("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1.5 font-medium leading-tight mb-1.5 text-[13px]", children: [
+                /* @__PURE__ */ jsx17("span", { className: "shrink-0 text-text-disabled dark:text-text-disabled-dark", children: /* @__PURE__ */ jsx17(FileTextIcon3, { size: 14 }) }),
+                /* @__PURE__ */ jsx17("span", { className: "truncate", children: label }),
+                required && /* @__PURE__ */ jsx17("span", { className: "text-red-500 dark:text-red-500 -ml-1", children: "*" })
               ] }),
-              /* @__PURE__ */ jsx16(TextField3, { size: "large", value, disabled, onChange: () => {
+              /* @__PURE__ */ jsx17(TextField4, { size: "large", value, disabled, onChange: () => {
               } }),
-              help && /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "disabled", className: "mt-1.5 ml-0.5 leading-snug", children: help })
+              help && /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "disabled", className: "mt-1.5 ml-0.5 leading-snug", children: help })
             ] }, label)) }),
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: 'TextField \xB7 floating label, size="medium" (dialogs)' }),
-            /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ jsx16(TextField3, { size: "medium", label: "Default", placeholder: "Type something\u2026" }),
-              /* @__PURE__ */ jsx16(TextField3, { size: "medium", label: "With value", value: "Filled value", onChange: () => {
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: 'TextField \xB7 floating label, size="medium" (dialogs)' }),
+            /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsx17(TextField4, { size: "medium", label: "Default", placeholder: "Type something\u2026" }),
+              /* @__PURE__ */ jsx17(TextField4, { size: "medium", label: "With value", value: "Filled value", onChange: () => {
               } }),
-              /* @__PURE__ */ jsx16(TextField3, { size: "medium", label: "Error state", error: true, value: "Bad value", onChange: () => {
+              /* @__PURE__ */ jsx17(TextField4, { size: "medium", label: "Error state", error: true, value: "Bad value", onChange: () => {
               } }),
-              /* @__PURE__ */ jsx16(TextField3, { size: "medium", label: "Disabled", disabled: true, value: "Read only", onChange: () => {
+              /* @__PURE__ */ jsx17(TextField4, { size: "medium", label: "Disabled", disabled: true, value: "Read only", onChange: () => {
               } }),
-              /* @__PURE__ */ jsx16(TextField3, { size: "small", label: "Small", placeholder: "Placeholder under the label" }),
-              /* @__PURE__ */ jsx16(TextField3, { size: "smallest", label: "Smallest", value: "Filled value", onChange: () => {
+              /* @__PURE__ */ jsx17(TextField4, { size: "small", label: "Small", placeholder: "Placeholder under the label" }),
+              /* @__PURE__ */ jsx17(TextField4, { size: "smallest", label: "Smallest", value: "Filled value", onChange: () => {
               } }),
-              /* @__PURE__ */ jsx16(TextField3, { size: "large", label: "Large", placeholder: "The login screen" })
+              /* @__PURE__ */ jsx17(TextField4, { size: "large", label: "Large", placeholder: "The login screen" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-4", children: [
-            /* @__PURE__ */ jsxs16("div", { children: [
-              /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Select" }),
-              /* @__PURE__ */ jsxs16(Select6, { label: "Status", value: "published", onValueChange: () => {
+          /* @__PURE__ */ jsxs17("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsxs17("div", { children: [
+              /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Select" }),
+              /* @__PURE__ */ jsxs17(Select7, { label: "Status", value: "published", onValueChange: () => {
               }, children: [
-                /* @__PURE__ */ jsx16(SelectItem6, { value: "draft", children: "Draft" }),
-                /* @__PURE__ */ jsx16(SelectItem6, { value: "published", children: "Published" }),
-                /* @__PURE__ */ jsx16(SelectItem6, { value: "archived", children: "Archived" })
+                /* @__PURE__ */ jsx17(SelectItem7, { value: "draft", children: "Draft" }),
+                /* @__PURE__ */ jsx17(SelectItem7, { value: "published", children: "Published" }),
+                /* @__PURE__ */ jsx17(SelectItem7, { value: "archived", children: "Archived" })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs16("div", { children: [
-              /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "MultiSelect" }),
-              /* @__PURE__ */ jsxs16(MultiSelect, { label: "Roles", value: ["admin", "editor"], onValueChange: () => {
+            /* @__PURE__ */ jsxs17("div", { children: [
+              /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "MultiSelect" }),
+              /* @__PURE__ */ jsxs17(MultiSelect, { label: "Roles", value: ["admin", "editor"], onValueChange: () => {
               }, children: [
-                /* @__PURE__ */ jsx16(MultiSelectItem, { value: "admin", children: "Admin" }),
-                /* @__PURE__ */ jsx16(MultiSelectItem, { value: "editor", children: "Editor" }),
-                /* @__PURE__ */ jsx16(MultiSelectItem, { value: "viewer", children: "Viewer" })
+                /* @__PURE__ */ jsx17(MultiSelectItem, { value: "admin", children: "Admin" }),
+                /* @__PURE__ */ jsx17(MultiSelectItem, { value: "editor", children: "Editor" }),
+                /* @__PURE__ */ jsx17(MultiSelectItem, { value: "viewer", children: "Viewer" })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block font-mono", children: "Checkbox" }),
-            /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-              /* @__PURE__ */ jsx16(Checkbox3, { checked: true, onCheckedChange: () => {
+          /* @__PURE__ */ jsxs17("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block font-mono", children: "Checkbox" }),
+            /* @__PURE__ */ jsxs17(Label2, { className: "flex items-center gap-2 cursor-pointer", children: [
+              /* @__PURE__ */ jsx17(Checkbox3, { checked: true, onCheckedChange: () => {
               } }),
-              /* @__PURE__ */ jsx16("span", { children: "Checked" })
+              "Checked"
             ] }),
-            /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-              /* @__PURE__ */ jsx16(Checkbox3, { checked: false, onCheckedChange: () => {
+            /* @__PURE__ */ jsxs17(Label2, { className: "flex items-center gap-2 cursor-pointer", children: [
+              /* @__PURE__ */ jsx17(Checkbox3, { checked: false, onCheckedChange: () => {
               } }),
-              /* @__PURE__ */ jsx16("span", { children: "Unchecked" })
+              "Unchecked"
             ] }),
-            /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx16(Checkbox3, { checked: true, disabled: true }),
-              /* @__PURE__ */ jsx16("span", { children: "Disabled" })
+            /* @__PURE__ */ jsxs17(Label2, { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx17(Checkbox3, { checked: true, disabled: true }),
+              "Disabled"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block font-mono", children: "BooleanSwitch" }),
-            /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx16(BooleanSwitch, { value: true, onValueChange: () => {
+          /* @__PURE__ */ jsxs17("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block font-mono", children: "BooleanSwitch" }),
+            /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx17(BooleanSwitch, { value: true, onValueChange: () => {
               } }),
-              /* @__PURE__ */ jsx16("span", { children: "On" })
+              /* @__PURE__ */ jsx17("span", { children: "On" })
             ] }),
-            /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx16(BooleanSwitch, { value: false, onValueChange: () => {
+            /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx17(BooleanSwitch, { value: false, onValueChange: () => {
               } }),
-              /* @__PURE__ */ jsx16("span", { children: "Off" })
+              /* @__PURE__ */ jsx17("span", { children: "Off" })
             ] }),
-            /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx16(BooleanSwitch, { value: true, disabled: true }),
-              /* @__PURE__ */ jsx16("span", { children: "Disabled on" })
+            /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx17(BooleanSwitch, { value: true, disabled: true }),
+              /* @__PURE__ */ jsx17("span", { children: "Disabled on" })
             ] }),
-            /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx16(BooleanSwitch, { value: false, disabled: true }),
-              /* @__PURE__ */ jsx16("span", { children: "Disabled off" })
+            /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx17(BooleanSwitch, { value: false, disabled: true }),
+              /* @__PURE__ */ jsx17("span", { children: "Disabled off" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { className: "col-span-12", children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "SearchBar" }),
-            /* @__PURE__ */ jsx16(SearchBar4, { placeholder: "Search entities\u2026" })
+          /* @__PURE__ */ jsxs17("div", { className: "col-span-12", children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "SearchBar" }),
+            /* @__PURE__ */ jsx17(SearchBar4, { placeholder: "Search entities\u2026" })
           ] }),
-          /* @__PURE__ */ jsxs16("div", { className: "col-span-12", children: [
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Skeleton" }),
-            /* @__PURE__ */ jsxs16("div", { className: "flex gap-4 items-center flex-wrap", children: [
-              /* @__PURE__ */ jsx16(Skeleton6, { className: "w-10 h-10 rounded-full" }),
-              /* @__PURE__ */ jsx16(Skeleton6, { className: "w-48 h-4 rounded" }),
-              /* @__PURE__ */ jsx16(Skeleton6, { className: "w-32 h-8 rounded-md" })
+          /* @__PURE__ */ jsxs17("div", { className: "col-span-12", children: [
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Skeleton" }),
+            /* @__PURE__ */ jsxs17("div", { className: "flex gap-4 items-center flex-wrap", children: [
+              /* @__PURE__ */ jsx17(Skeleton6, { className: "w-10 h-10 rounded-full" }),
+              /* @__PURE__ */ jsx17(Skeleton6, { className: "w-48 h-4 rounded" }),
+              /* @__PURE__ */ jsx17(Skeleton6, { className: "w-32 h-8 rounded-md" })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs16(SectionBlock, { id: "chips-alerts", title: "Chips & Alerts", children: [
-        /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Chip \u2014 colorScheme" }),
-        /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-2 mb-4", children: ["blue", "teal", "red", "green", "yellow", "orange", "purple", "pink", "cyan", "indigo", "violet", "fuchsia", "rose", "emerald", "gray"].map((s) => /* @__PURE__ */ jsx16(Chip8, { colorScheme: s, children: s }, s)) }),
-        /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Chip \u2014 sizes" }),
-        /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-2 items-center mb-4", children: ["smallest", "small", "medium", "large"].map((sz) => /* @__PURE__ */ jsx16(Chip8, { colorScheme: "blue", size: sz, children: sz }, sz)) }),
-        /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Chip \u2014 outlined, error, clickable, icon" }),
-        /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap gap-2 items-center mb-4", children: [
-          /* @__PURE__ */ jsx16(Chip8, { colorScheme: "red", outlined: true, children: "Outlined Red" }),
-          /* @__PURE__ */ jsx16(Chip8, { colorScheme: "blue", outlined: true, children: "Outlined Blue" }),
-          /* @__PURE__ */ jsx16(Chip8, { error: true, children: "Error" }),
-          /* @__PURE__ */ jsx16(Chip8, { error: true, outlined: true, children: "Error Outlined" }),
-          /* @__PURE__ */ jsx16(Chip8, { onClick: () => {
+      /* @__PURE__ */ jsx17(MoreControlsSection, {}),
+      /* @__PURE__ */ jsx17(OverlaysSection, {}),
+      /* @__PURE__ */ jsx17(DisclosureLayoutSection, {}),
+      /* @__PURE__ */ jsxs17(SectionBlock, { id: "chips-alerts", title: "Chips & Alerts", children: [
+        /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Chip \u2014 colorScheme" }),
+        /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap gap-2 mb-4", children: ["blue", "teal", "red", "green", "yellow", "orange", "purple", "pink", "cyan", "indigo", "violet", "fuchsia", "rose", "emerald", "gray"].map((s) => /* @__PURE__ */ jsx17(Chip8, { colorScheme: s, children: s }, s)) }),
+        /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Chip \u2014 sizes" }),
+        /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap gap-2 items-center mb-4", children: ["smallest", "small", "medium", "large"].map((sz) => /* @__PURE__ */ jsx17(Chip8, { colorScheme: "blue", size: sz, children: sz }, sz)) }),
+        /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Chip \u2014 outlined, error, clickable, icon" }),
+        /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap gap-2 items-center mb-4", children: [
+          /* @__PURE__ */ jsx17(Chip8, { colorScheme: "red", outlined: true, children: "Outlined Red" }),
+          /* @__PURE__ */ jsx17(Chip8, { colorScheme: "blue", outlined: true, children: "Outlined Blue" }),
+          /* @__PURE__ */ jsx17(Chip8, { error: true, children: "Error" }),
+          /* @__PURE__ */ jsx17(Chip8, { error: true, outlined: true, children: "Error Outlined" }),
+          /* @__PURE__ */ jsx17(Chip8, { onClick: () => {
           }, children: "Clickable" }),
-          /* @__PURE__ */ jsx16(Chip8, { icon: /* @__PURE__ */ jsx16(TagIcon, { size: 12 }), colorScheme: "teal", children: "With Icon" }),
-          /* @__PURE__ */ jsx16(Chip8, { children: "Default (no scheme)" }),
-          /* @__PURE__ */ jsx16(Chip8, { outlined: true, children: "Default Outlined" }),
-          /* @__PURE__ */ jsx16(Chip8, { colorScheme: "green", variant: "filled", children: "Filled Green" }),
-          /* @__PURE__ */ jsx16(Chip8, { colorScheme: "greenDarker", children: "Tinted Darker" })
+          /* @__PURE__ */ jsx17(Chip8, { icon: /* @__PURE__ */ jsx17(TagIcon, { size: 12 }), colorScheme: "teal", children: "With Icon" }),
+          /* @__PURE__ */ jsx17(Chip8, { children: "Default (no scheme)" }),
+          /* @__PURE__ */ jsx17(Chip8, { outlined: true, children: "Default Outlined" }),
+          /* @__PURE__ */ jsx17(Chip8, { colorScheme: "green", variant: "filled", children: "Filled Green" }),
+          /* @__PURE__ */ jsx17(Chip8, { colorScheme: "greenDarker", children: "Tinted Darker" })
         ] }),
-        /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "FilterChip" }),
-        /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap gap-2 items-center mb-6", children: [
-          /* @__PURE__ */ jsx16(FilterChip2, { active: true, children: "Active" }),
-          /* @__PURE__ */ jsx16(FilterChip2, { children: "Inactive" }),
-          /* @__PURE__ */ jsx16(FilterChip2, { icon: /* @__PURE__ */ jsx16(FilterIcon, { size: 12 }), active: true, children: "With Icon" }),
-          /* @__PURE__ */ jsx16(FilterChip2, { size: "small", children: "Small" }),
-          /* @__PURE__ */ jsx16(FilterChip2, { disabled: true, children: "Disabled" })
+        /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "FilterChip" }),
+        /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap gap-2 items-center mb-6", children: [
+          /* @__PURE__ */ jsx17(FilterChip2, { active: true, children: "Active" }),
+          /* @__PURE__ */ jsx17(FilterChip2, { children: "Inactive" }),
+          /* @__PURE__ */ jsx17(FilterChip2, { icon: /* @__PURE__ */ jsx17(FilterIcon, { size: 12 }), active: true, children: "With Icon" }),
+          /* @__PURE__ */ jsx17(FilterChip2, { size: "small", children: "Small" }),
+          /* @__PURE__ */ jsx17(FilterChip2, { disabled: true, children: "Disabled" })
         ] }),
-        /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Alert \u2014 color variants" }),
-        /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx16(Alert3, { color: "info", children: "Info \u2014 informational message" }),
-          /* @__PURE__ */ jsx16(Alert3, { color: "success", children: "Success \u2014 operation completed" }),
-          /* @__PURE__ */ jsx16(Alert3, { color: "warning", children: "Warning \u2014 attention required" }),
-          /* @__PURE__ */ jsx16(Alert3, { color: "error", children: "Error \u2014 something went wrong" })
+        /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Alert \u2014 color variants" }),
+        /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx17(Alert3, { color: "info", children: "Info \u2014 informational message" }),
+          /* @__PURE__ */ jsx17(Alert3, { color: "success", children: "Success \u2014 operation completed" }),
+          /* @__PURE__ */ jsx17(Alert3, { color: "warning", children: "Warning \u2014 attention required" }),
+          /* @__PURE__ */ jsx17(Alert3, { color: "error", children: "Error \u2014 something went wrong" })
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: "mt-4", children: [
-          /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Separator" }),
-          /* @__PURE__ */ jsx16("div", { children: "Above" }),
-          /* @__PURE__ */ jsx16(Separator5, { orientation: "horizontal" }),
-          /* @__PURE__ */ jsx16("div", { children: "Below" })
+        /* @__PURE__ */ jsxs17("div", { className: "mt-4", children: [
+          /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Separator" }),
+          /* @__PURE__ */ jsx17("div", { children: "Above" }),
+          /* @__PURE__ */ jsx17(Separator5, { orientation: "horizontal" }),
+          /* @__PURE__ */ jsx17("div", { children: "Below" })
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: "mt-4", children: [
-          /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "CircularProgress" }),
-          /* @__PURE__ */ jsx16("div", { className: "flex gap-6 items-center", children: ["small", "medium", "large"].map((s) => /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center gap-1", children: [
-            /* @__PURE__ */ jsx16(CircularProgress, { size: s }),
-            /* @__PURE__ */ jsx16(Typography14, { variant: "caption", color: "secondary", children: s })
+        /* @__PURE__ */ jsxs17("div", { className: "mt-4", children: [
+          /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "CircularProgress" }),
+          /* @__PURE__ */ jsx17("div", { className: "flex gap-6 items-center", children: ["small", "medium", "large"].map((s) => /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center gap-1", children: [
+            /* @__PURE__ */ jsx17(CircularProgress, { size: s }),
+            /* @__PURE__ */ jsx17(Typography15, { variant: "caption", color: "secondary", children: s })
           ] }, s)) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx16(CardsDataSection, {}),
-      /* @__PURE__ */ jsxs16(SectionBlock, { id: "users", title: "Management Screen \u2014 Alert + Table + Chip", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsx17(CardsDataSection, {}),
+      /* @__PURE__ */ jsx17(DataDisplaySection, {}),
+      /* @__PURE__ */ jsxs17(SectionBlock, { id: "users", title: "Management Screen \u2014 Alert + Table + Chip", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "Canonical layout for an admin management screen: an ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Alert" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "Alert" }),
           " with an ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "action" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "action" }),
           ", a header row, and a plain ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Table" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "Table" }),
           " with ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Chip" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "Chip" }),
           "s. Illustrative mock \u2014 not tied to a specific screen."
         ] }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           Alert3,
           {
             color: "warning",
             outerClassName: "mb-4",
-            action: /* @__PURE__ */ jsx16(Button9, { children: "Make me admin" }),
+            action: /* @__PURE__ */ jsx17(Button10, { children: "Make me admin" }),
             children: "No admin users exist. You can make yourself an admin."
           }
         ),
-        /* @__PURE__ */ jsxs16("div", { className: "flex items-center mt-12", children: [
-          /* @__PURE__ */ jsx16(Typography14, { gutterBottom: true, variant: "h4", className: "grow", component: "h4", children: "Users" }),
-          /* @__PURE__ */ jsx16(Button9, { startIcon: /* @__PURE__ */ jsx16(PlusIcon, {}), children: "Add user" })
+        /* @__PURE__ */ jsxs17("div", { className: "flex items-center mt-12", children: [
+          /* @__PURE__ */ jsx17(Typography15, { gutterBottom: true, variant: "h4", className: "grow", component: "h4", children: "Users" }),
+          /* @__PURE__ */ jsx17(Button10, { startIcon: /* @__PURE__ */ jsx17(PlusIcon, {}), children: "Add user" })
         ] }),
-        /* @__PURE__ */ jsx16("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs16(Table2, { className: "w-full", children: [
-          /* @__PURE__ */ jsxs16(TableHeader2, { children: [
-            /* @__PURE__ */ jsx16(TableCell2, { header: true, className: "truncate w-16" }),
-            /* @__PURE__ */ jsx16(TableCell2, { header: true, children: "Email" }),
-            /* @__PURE__ */ jsx16(TableCell2, { header: true, children: "Name" }),
-            /* @__PURE__ */ jsx16(TableCell2, { header: true, children: "Roles" })
+        /* @__PURE__ */ jsx17("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs17(Table2, { className: "w-full", children: [
+          /* @__PURE__ */ jsxs17(TableHeader2, { children: [
+            /* @__PURE__ */ jsx17(TableCell2, { header: true, className: "truncate w-16" }),
+            /* @__PURE__ */ jsx17(TableCell2, { header: true, children: "Email" }),
+            /* @__PURE__ */ jsx17(TableCell2, { header: true, children: "Name" }),
+            /* @__PURE__ */ jsx17(TableCell2, { header: true, children: "Roles" })
           ] }),
-          /* @__PURE__ */ jsx16(TableBody2, { children: [
+          /* @__PURE__ */ jsx17(TableBody2, { children: [
             {
               uid: "1",
               email: "alice@example.com",
@@ -4098,93 +4467,107 @@ function UIReferenceView() {
               displayName: "Carol White",
               roles: []
             }
-          ].map((user) => /* @__PURE__ */ jsxs16(TableRow2, { children: [
-            /* @__PURE__ */ jsx16(TableCell2, { style: { width: "64px" }, children: /* @__PURE__ */ jsx16(Tooltip3, { asChild: true, title: "Delete this user", children: /* @__PURE__ */ jsx16(IconButton5, { "aria-label": "Delete this user", size: "small", children: /* @__PURE__ */ jsx16(Trash2Icon3, {}) }) }) }),
-            /* @__PURE__ */ jsx16(TableCell2, { children: user.email }),
-            /* @__PURE__ */ jsx16(TableCell2, { className: "font-medium", children: user.displayName }),
-            /* @__PURE__ */ jsx16(TableCell2, { children: /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-2", children: user.roles.map((role) => /* @__PURE__ */ jsx16(Chip8, { colorScheme: role.isAdmin ? "purple" : "blue", size: "small", children: role.name }, role.id)) }) })
+          ].map((user) => /* @__PURE__ */ jsxs17(TableRow2, { children: [
+            /* @__PURE__ */ jsx17(TableCell2, { style: { width: "64px" }, children: /* @__PURE__ */ jsx17(Tooltip3, { asChild: true, title: "Delete this user", children: /* @__PURE__ */ jsx17(IconButton5, { "aria-label": "Delete this user", size: "small", children: /* @__PURE__ */ jsx17(Trash2Icon3, {}) }) }) }),
+            /* @__PURE__ */ jsx17(TableCell2, { children: user.email }),
+            /* @__PURE__ */ jsx17(TableCell2, { className: "font-medium", children: user.displayName }),
+            /* @__PURE__ */ jsx17(TableCell2, { children: /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap gap-2", children: user.roles.map((role) => /* @__PURE__ */ jsx17(Chip8, { colorScheme: role.isAdmin ? "purple" : "blue", size: "small", children: role.name }, role.id)) }) })
           ] }, user.uid)) })
+        ] }) }),
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "caption", color: "secondary", className: "block mt-8 mb-2", children: [
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: 'TableBody variant="list"' }),
+          " \u2014 a list on the sheet (Studio's storage list)"
+        ] }),
+        /* @__PURE__ */ jsx17("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs17(Table2, { className: "w-full", children: [
+          /* @__PURE__ */ jsxs17(TableHeader2, { children: [
+            /* @__PURE__ */ jsx17(TableCell2, { header: true, children: "Name" }),
+            /* @__PURE__ */ jsx17(TableCell2, { header: true, align: "right", children: "Size" })
+          ] }),
+          /* @__PURE__ */ jsx17(TableBody2, { variant: "list", children: [{ name: "report.pdf", size: "1.2 MB" }, { name: "cover.png", size: "320 KB" }].map((file) => /* @__PURE__ */ jsxs17(TableRow2, { onClick: () => void 0, children: [
+            /* @__PURE__ */ jsx17(TableCell2, { children: file.name }),
+            /* @__PURE__ */ jsx17(TableCell2, { align: "right", children: file.size })
+          ] }, file.name)) })
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxs16(SectionBlock, { id: "user-dialog", title: "Form Dialog \u2014 grid + MultiSelect + LoadingButton", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs17(SectionBlock, { id: "user-dialog", title: "Form Dialog \u2014 grid + MultiSelect + LoadingButton", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "Canonical form-in-a-card layout: ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "grid grid-cols-12 gap-4" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "grid grid-cols-12 gap-4" }),
           " for the fields, a ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "MultiSelect" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "MultiSelect" }),
           ", and a ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "LoadingButton" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "LoadingButton" }),
           " to submit. Illustrative mock \u2014 not tied to a specific screen."
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: `rounded-lg border w-full max-w-xl ${defaultBorderMixin6}`, children: [
-          /* @__PURE__ */ jsx16("div", { className: "px-6 pt-6 pb-2", children: /* @__PURE__ */ jsx16(Typography14, { variant: "h4", children: "User" }) }),
-          /* @__PURE__ */ jsx16("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs16("div", { className: "grid grid-cols-12 gap-4", children: [
-            /* @__PURE__ */ jsx16("div", { className: "col-span-12", children: /* @__PURE__ */ jsx16(TextField3, { name: "displayName", required: true, value: "Alice Johnson", onChange: () => {
+        /* @__PURE__ */ jsxs17("div", { className: `rounded-lg border w-full max-w-xl ${defaultBorderMixin6}`, children: [
+          /* @__PURE__ */ jsx17("div", { className: "px-6 pt-6 pb-2", children: /* @__PURE__ */ jsx17(Typography15, { variant: "h4", children: "User" }) }),
+          /* @__PURE__ */ jsx17("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs17("div", { className: "grid grid-cols-12 gap-4", children: [
+            /* @__PURE__ */ jsx17("div", { className: "col-span-12", children: /* @__PURE__ */ jsx17(TextField4, { name: "displayName", required: true, value: "Alice Johnson", onChange: () => {
             }, label: "Name" }) }),
-            /* @__PURE__ */ jsx16("div", { className: "col-span-12", children: /* @__PURE__ */ jsx16(TextField3, { required: true, name: "email", value: "alice@example.com", onChange: () => {
+            /* @__PURE__ */ jsx17("div", { className: "col-span-12", children: /* @__PURE__ */ jsx17(TextField4, { required: true, name: "email", value: "alice@example.com", onChange: () => {
             }, label: "Email", disabled: true }) }),
-            /* @__PURE__ */ jsx16("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs16(MultiSelect, { className: "w-full", label: "Roles", value: ["admin"], onValueChange: () => {
+            /* @__PURE__ */ jsx17("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs17(MultiSelect, { className: "w-full", label: "Roles", value: ["admin"], onValueChange: () => {
             }, children: [
-              /* @__PURE__ */ jsx16(MultiSelectItem, { value: "admin", children: "Admin" }),
-              /* @__PURE__ */ jsx16(MultiSelectItem, { value: "editor", children: "Editor" }),
-              /* @__PURE__ */ jsx16(MultiSelectItem, { value: "viewer", children: "Viewer" })
+              /* @__PURE__ */ jsx17(MultiSelectItem, { value: "admin", children: "Admin" }),
+              /* @__PURE__ */ jsx17(MultiSelectItem, { value: "editor", children: "Editor" }),
+              /* @__PURE__ */ jsx17(MultiSelectItem, { value: "viewer", children: "Viewer" })
             ] }) })
           ] }) }),
-          /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-end gap-2 px-6 pb-6", children: [
-            /* @__PURE__ */ jsx16(Button9, { variant: "text", children: "Cancel" }),
-            /* @__PURE__ */ jsx16(LoadingButton, { variant: "filled", loading: false, children: "Update" })
+          /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-end gap-2 px-6 pb-6", children: [
+            /* @__PURE__ */ jsx17(Button10, { variant: "text", children: "Cancel" }),
+            /* @__PURE__ */ jsx17(LoadingButton, { variant: "filled", loading: false, children: "Update" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs16(SectionBlock, { wide: true, id: "crm-dashboard", title: "CRM Dashboard \u2014 CrmDashboardDemo", children: [
-        /* @__PURE__ */ jsx16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: "A real-world showcase of a complex dashboard home page incorporating Rebase design language." }),
-        /* @__PURE__ */ jsx16("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx16(CrmDashboardDemo, {}) })
+      /* @__PURE__ */ jsxs17(SectionBlock, { wide: true, id: "crm-dashboard", title: "CRM Dashboard \u2014 CrmDashboardDemo", children: [
+        /* @__PURE__ */ jsx17(Typography15, { variant: "body2", color: "secondary", className: "mb-4", children: "A real-world showcase of a complex dashboard home page incorporating Rebase design language." }),
+        /* @__PURE__ */ jsx17("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx17(CrmDashboardDemo, {}) })
       ] }),
-      /* @__PURE__ */ jsxs16(SectionBlock, { wide: true, id: "collection-table", title: "Collection Table", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs17(SectionBlock, { wide: true, id: "collection-table", title: "Collection Table", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "Sample data collection rendered as a sortable, searchable, filterable table with row selection. Uses ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Table" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "Table" }),
           ", ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Chip" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "Chip" }),
           ",",
           " ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "SearchBar" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "SearchBar" }),
           ", ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Select" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "Select" }),
           ",",
           " ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Checkbox" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "Checkbox" }),
           "."
         ] }),
-        /* @__PURE__ */ jsx16("div", { className: "w-full", children: /* @__PURE__ */ jsx16(CollectionTableDemo, {}) })
+        /* @__PURE__ */ jsx17("div", { className: "w-full", children: /* @__PURE__ */ jsx17(CollectionTableDemo, {}) })
       ] }),
-      /* @__PURE__ */ jsxs16(SectionBlock, { wide: true, id: "card-view", title: "Card View", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs17(SectionBlock, { wide: true, id: "card-view", title: "Card View", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "Grid of entity cards with thumbnail area, progress bar, status/priority chips, and assignee. Uses ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Card" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "Card" }),
           ", ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Chip" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "Chip" }),
           ",",
           " ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "ToggleButtonGroup" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "ToggleButtonGroup" }),
           ", ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "SearchBar" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "SearchBar" }),
           "."
         ] }),
-        /* @__PURE__ */ jsx16("div", { className: "w-full", children: /* @__PURE__ */ jsx16(CardViewDemo, {}) })
+        /* @__PURE__ */ jsx17("div", { className: "w-full", children: /* @__PURE__ */ jsx17(CardViewDemo, {}) })
       ] }),
-      /* @__PURE__ */ jsxs16(SectionBlock, { wide: true, id: "kanban-board", title: "Kanban Board", children: [
-        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs17(SectionBlock, { wide: true, id: "kanban-board", title: "Kanban Board", children: [
+        /* @__PURE__ */ jsxs17(Typography15, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "Drag-and-drop kanban board with four status columns. Uses ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "KanbanView" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "KanbanView" }),
           ", ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "BoardItem" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "BoardItem" }),
           ",",
           " ",
-          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "BoardItemViewProps" }),
+          /* @__PURE__ */ jsx17("code", { className: "font-mono text-xs", children: "BoardItemViewProps" }),
           "."
         ] }),
-        /* @__PURE__ */ jsx16("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx16(KanbanBoardDemo, {}) })
+        /* @__PURE__ */ jsx17("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx17(KanbanBoardDemo, {}) })
       ] })
     ] })
   ] });