@rebasepro/app 0.19.1 → 0.19.2-canary.g09316f6

package/dist/debug.js

@@ -98,7 +98,7 @@ var UIStyleGuide = () => {
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx("section", { className: "mb-12", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center bg-surface-100 dark:bg-surface-950 p-8 rounded-xl border border-dashed border-surface-400", children: [
+    /* @__PURE__ */ jsx("section", { className: "mb-12", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center bg-surface-frame p-8 rounded-xl border border-dashed border-surface-400", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(Typography, { variant: "h5", children: "Dark Mode Check" }),
         /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "secondary", children: "Typography and buttons should adapt automatically." })
@@ -113,27 +113,27 @@ import React10, { useState as useState8 } from "react";
 import {
   Alert as Alert3,
   AlertCircleIcon,
-  Avatar,
+  Avatar as Avatar2,
   AppWindow,
   BooleanSwitch,
-  Button as Button8,
+  Button as Button9,
   Checkbox as Checkbox3,
   ChevronDownIcon,
   ChevronsLeftIcon,
   ChevronsRightIcon,
-  Chip as Chip7,
+  Chip as Chip8,
   CircleUserIcon,
   CircularProgress,
-  cls as cls10,
+  cls as cls12,
   ColumnsIcon,
-  defaultBorderMixin as defaultBorderMixin5,
+  defaultBorderMixin as defaultBorderMixin6,
   FileIcon,
-  FileTextIcon as FileTextIcon2,
+  FileTextIcon as FileTextIcon3,
   FilterChip as FilterChip2,
   FilterIcon,
   FolderIcon,
-  IconButton as IconButton4,
-  iconSize as iconSize2,
+  IconButton as IconButton5,
+  iconSize as iconSize3,
   KanbanIcon,
   LayoutGridIcon as LayoutGridIcon2,
   ListIcon as ListIcon2,
@@ -145,13 +145,13 @@ import {
   MultiSelect,
   MultiSelectItem,
   PanelLeftIcon,
-  PencilIcon as PencilIcon2,
+  PencilIcon as PencilIcon3,
   PlusIcon,
   SearchBar as SearchBar4,
-  Select as Select5,
-  SelectItem as SelectItem5,
+  Select as Select6,
+  SelectItem as SelectItem6,
   Separator as Separator5,
-  SettingsIcon as SettingsIcon2,
+  SettingsIcon as SettingsIcon3,
   Skeleton as Skeleton6,
   SunIcon,
   SunMoonIcon,
@@ -163,11 +163,11 @@ import {
   TableRow as TableRow2,
   Tabs,
   TagIcon,
-  TextField as TextField2,
+  TextField as TextField3,
   Tooltip as Tooltip3,
   Trash2Icon as Trash2Icon3,
   TypeIcon,
-  Typography as Typography12,
+  Typography as Typography14,
   UserIcon
 } from "@rebasepro/ui";
 
@@ -456,8 +456,7 @@ function PipelineOverview({
                 {
                   className: cls3(
                     "flex flex-col items-center justify-center rounded-lg px-3 py-3 min-w-[72px] transition-colors duration-150 cursor-pointer",
-                    "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
-                    isEmpty ? "bg-surface-50 dark:bg-surface-900/20" : "bg-surface-100/50 dark:bg-surface-900/60"
+                    isEmpty ? "bg-surface-field hover:bg-surface-field-hover" : "bg-surface-raised hover:bg-surface-raised-hover"
                   ),
                   style: { flex: `${widthPercent} 1 0%` },
                   onClick: () => onNavigate(`/c/engagements?stage=${stage.stageKey}`),
@@ -502,7 +501,7 @@ function PipelineOverview({
               ) })
             ] }, stage.stageKey);
           }),
-          activeStages.length > 0 && closedStages.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex items-center shrink-0 mx-2", children: /* @__PURE__ */ jsx4("div", { className: "w-px h-8 bg-surface-200 dark:bg-surface-700" }) }),
+          activeStages.length > 0 && closedStages.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex items-center shrink-0 mx-2", children: /* @__PURE__ */ jsx4("div", { className: "w-px h-8 bg-surface-raised" }) }),
           closedStages.map((stage, idx) => {
             const isEmpty = stage.count === 0;
             const stageColor = resolveColor2(stage.color);
@@ -514,9 +513,8 @@ function PipelineOverview({
                 {
                   className: cls3(
                     "flex flex-col items-center justify-center rounded-lg px-3 py-3 min-w-[72px] transition-colors duration-150 cursor-pointer",
-                    "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
                     "opacity-60",
-                    isEmpty ? "bg-surface-50 dark:bg-surface-900/10" : "bg-surface-100/30 dark:bg-surface-900/30"
+                    isEmpty ? "bg-surface-field hover:bg-surface-field-hover" : "bg-surface-raised hover:bg-surface-raised-hover"
                   ),
                   style: { flex: "0 0 auto" },
                   onClick: () => onNavigate(`/c/engagements?stage=${stage.stageKey}`),
@@ -985,7 +983,7 @@ function TaskTable({
       {
         className: cls4(
           "group flex items-start gap-3 py-2.5 px-3 rounded-md transition-colors duration-150 cursor-pointer",
-          "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
+          "hover:bg-surface-hover",
           isCompleted && "opacity-60",
           overdue && "border-l-2 border-l-red-500 rounded-l-none",
           soon && !overdue && "border-l-2 border-l-amber-450 rounded-l-none"
@@ -1051,7 +1049,7 @@ function TaskTable({
                     (() => {
                       const clientPic = clientInfo?.picture;
                       const clientInitial = (clientName || "?")[0].toUpperCase();
-                      return clientPic ? /* @__PURE__ */ jsx7("img", { src: clientPic, alt: "", className: "w-4 h-4 rounded-full object-cover shrink-0" }) : /* @__PURE__ */ jsx7("div", { className: "w-4 h-4 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 dark:text-surface-400 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx7("span", { className: "text-[9px] font-semibold", children: clientInitial }) });
+                      return clientPic ? /* @__PURE__ */ jsx7("img", { src: clientPic, alt: "", className: "w-4 h-4 rounded-full object-cover shrink-0" }) : /* @__PURE__ */ jsx7("div", { className: "w-4 h-4 rounded-full bg-surface-raised text-surface-500 dark:text-surface-400 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx7("span", { className: "text-[9px] font-semibold", children: clientInitial }) });
                     })(),
                     clientName
                   ]
@@ -1139,7 +1137,7 @@ function CompletedSection({
         variant: "text",
         size: "small",
         color: "neutral",
-        className: "w-full justify-between hover:bg-surface-accent-100 dark:hover:bg-surface-800 px-3 py-1.5 h-auto text-left",
+        className: "w-full justify-between hover:bg-surface-hover px-3 py-1.5 h-auto text-left",
         onClick: handleToggle,
         endIcon: /* @__PURE__ */ jsx7(
           "svg",
@@ -1304,7 +1302,7 @@ function TasksView({
     setSearchText("");
   }, []);
   const hasActiveFilter = quickFilter !== "all" || stageFilter !== null || clientFilter !== null || searchText !== "";
-  return /* @__PURE__ */ jsx8("div", { className: "flex flex-col h-full bg-white dark:bg-surface-900", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-4 overflow-y-auto flex-1", children: [
+  return /* @__PURE__ */ jsx8("div", { className: "flex flex-col h-full bg-surface-card", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-4 overflow-y-auto flex-1", children: [
     /* @__PURE__ */ jsx8(
       TaskFilters,
       {
@@ -1542,7 +1540,7 @@ function CalendarWidget({ loading, tasks, onOpenTask }) {
               "flex flex-col items-center justify-center py-1.5 rounded-md transition-colors duration-100 focus:outline-none",
               day.isCurrentMonth ? "text-text-primary dark:text-text-primary-dark" : "text-surface-300 dark:text-surface-650",
               day.isToday && !isSelected && "ring-1 ring-primary/50",
-              isSelected ? "bg-primary/10 dark:bg-primary/15 ring-1 ring-primary/60" : "hover:bg-surface-100 dark:hover:bg-surface-800",
+              isSelected ? "bg-primary/10 dark:bg-primary/15 ring-1 ring-primary/60" : "hover:bg-surface-hover",
               hasTasks && "cursor-pointer"
             ),
             children: [
@@ -1601,7 +1599,7 @@ function CalendarWidget({ loading, tasks, onOpenTask }) {
                 onClick: () => onOpenTask(task.id),
                 className: cls5(
                   "flex items-start gap-2 px-2 py-1.5 rounded-md text-left w-full",
-                  "hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors duration-100 focus:outline-none"
+                  "hover:bg-surface-hover transition-colors duration-100 focus:outline-none"
                 ),
                 children: [
                   /* @__PURE__ */ jsx9(
@@ -2128,7 +2126,7 @@ function CrmDashboardDemo() {
           /* @__PURE__ */ jsx10(Typography8, { variant: "h6", className: isCompleted ? "line-through text-text-disabled dark:text-text-disabled-dark" : "text-text-primary dark:text-text-primary-dark", children: task.values.title })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-4 py-2 border-y border-surface-200 dark:border-surface-700", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-4 py-2 border-y border-hairline-strong", children: [
         /* @__PURE__ */ jsxs10("div", { children: [
           /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider block", children: "Due Date" }),
           /* @__PURE__ */ jsxs10(Typography8, { variant: "body2", className: "font-medium mt-0.5 inline-flex items-center gap-1", children: [
@@ -2146,10 +2144,10 @@ function CrmDashboardDemo() {
         /* @__PURE__ */ jsx10(
           Card5,
           {
-            className: "p-3 hover:bg-surface-accent-100 dark:hover:bg-surface-800 cursor-pointer transition-colors duration-150",
+            className: "p-3 hover:bg-surface-hover cursor-pointer transition-colors duration-150",
             onClick: () => openClientDrawer(clientInfo.id),
             children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2.5", children: [
-              /* @__PURE__ */ jsx10("div", { className: "w-8 h-8 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 flex items-center justify-center font-semibold", children: clientInfo.name[0].toUpperCase() }),
+              /* @__PURE__ */ jsx10("div", { className: "w-8 h-8 rounded-full bg-surface-raised text-surface-500 flex items-center justify-center font-semibold", children: clientInfo.name[0].toUpperCase() }),
               /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsx10(Typography8, { variant: "body2", className: "font-medium truncate", children: clientInfo.name }),
                 /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "truncate text-[11px] block", children: clientInfo.email })
@@ -2164,7 +2162,7 @@ function CrmDashboardDemo() {
       ] }),
       task.values.description && /* @__PURE__ */ jsxs10("div", { children: [
         /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider block mb-0.5", children: "Description" }),
-        /* @__PURE__ */ jsx10("div", { className: "p-3 bg-surface-50 dark:bg-surface-900 rounded-md border border-surface-200 dark:border-surface-700", children: /* @__PURE__ */ jsx10(Typography8, { variant: "body2", className: "whitespace-pre-wrap text-text-primary dark:text-text-primary-dark", children: task.values.description }) })
+        /* @__PURE__ */ jsx10("div", { className: "p-3 bg-surface-field rounded-md border border-hairline", children: /* @__PURE__ */ jsx10(Typography8, { variant: "body2", className: "whitespace-pre-wrap text-text-primary dark:text-text-primary-dark", children: task.values.description }) })
       ] }),
       task.values.notes && /* @__PURE__ */ jsxs10("div", { children: [
         /* @__PURE__ */ jsx10(Typography8, { variant: "caption", color: "secondary", className: "uppercase text-[9px] tracking-wider block mb-0.5", children: "Notes" }),
@@ -2192,7 +2190,7 @@ function CrmDashboardDemo() {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "space-y-2.5 py-3 border-y border-surface-200 dark:border-surface-700", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "space-y-2.5 py-3 border-y border-hairline-strong", children: [
         /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-surface-600 dark:text-surface-300", children: [
           /* @__PURE__ */ jsx10(MailIcon2, { className: "h-4 w-4 text-surface-400" }),
           /* @__PURE__ */ jsx10(Typography8, { variant: "body2", children: client.email })
@@ -2207,7 +2205,7 @@ function CrmDashboardDemo() {
         clientTasks.length === 0 ? /* @__PURE__ */ jsx10(Typography8, { variant: "body2", color: "secondary", className: "italic", children: "No pending tasks for this client." }) : /* @__PURE__ */ jsx10("div", { className: "space-y-1.5", children: clientTasks.map((t) => /* @__PURE__ */ jsx10(
           Card5,
           {
-            className: "p-2.5 hover:bg-surface-accent-100 dark:hover:bg-surface-800 cursor-pointer transition-colors duration-150",
+            className: "p-2.5 hover:bg-surface-hover cursor-pointer transition-colors duration-150",
             onClick: () => openTaskDrawer(t.id),
             children: /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-2", children: [
               /* @__PURE__ */ jsx10(
@@ -2339,7 +2337,7 @@ Francesco`,
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 pt-6 border-t border-surface-200 dark:border-surface-700 mt-6", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 pt-6 border-t border-hairline-strong mt-6", children: [
         /* @__PURE__ */ jsx10(
           Button7,
           {
@@ -2364,7 +2362,7 @@ Francesco`,
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsxs10("div", { className: "relative w-full border rounded-xl bg-surface-50 dark:bg-surface-800 border-surface-200 dark:border-surface-700 shadow-sm flex flex-row", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "relative w-full border rounded-xl bg-surface-sheet border-hairline-strong shadow-sm flex flex-row", children: [
     /* @__PURE__ */ jsxs10("div", { className: "flex-1 flex flex-col p-4 md:p-6 transition-all duration-300", children: [
       /* @__PURE__ */ jsxs10("div", { className: "flex flex-col sm:flex-row sm:items-end justify-between mb-6 gap-4", children: [
         /* @__PURE__ */ jsxs10("div", { children: [
@@ -2480,16 +2478,16 @@ Francesco`,
       ] })
     ] }),
     /* @__PURE__ */ jsxs10("div", { className: cls6(
-      "fixed top-0 right-0 bottom-0 w-full sm:w-[420px] bg-white dark:bg-surface-900 border-l border-surface-200 dark:border-surface-700 shadow-2xl z-40 transition-transform duration-300 ease-in-out flex flex-col",
+      "fixed top-0 right-0 bottom-0 w-full sm:w-[420px] bg-surface-card border-l border-hairline-strong shadow-2xl z-40 transition-transform duration-300 ease-in-out flex flex-col",
       activeSideEntity ? "translate-x-0" : "translate-x-full"
     ), children: [
-      /* @__PURE__ */ jsxs10("div", { className: "p-4 flex items-center justify-between border-b border-surface-200 dark:border-surface-800", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "p-4 flex items-center justify-between border-b border-hairline", children: [
         /* @__PURE__ */ jsx10(Typography8, { variant: "subtitle1", className: "font-semibold uppercase tracking-wider text-[10px] color-secondary", children: activeSideEntity?.type === "task" ? "Task Details" : activeSideEntity?.type === "client" ? "Client profile" : "Create Lead" }),
         /* @__PURE__ */ jsx10(
           "button",
           {
             onClick: () => setActiveSideEntity(null),
-            className: "p-1 rounded-md text-surface-400 hover:text-surface-700 hover:bg-surface-100 dark:hover:bg-surface-800 focus:outline-none",
+            className: "p-1 rounded-md text-surface-400 hover:text-surface-700 hover:bg-surface-hover focus:outline-none",
             children: /* @__PURE__ */ jsx10(XIcon2, { className: "h-4 w-4" })
           }
         )
@@ -2657,7 +2655,7 @@ function CollectionTableDemo() {
           /* @__PURE__ */ jsx11(TableCell, { children: /* @__PURE__ */ jsx11(Chip4, { colorScheme: STATUS_CONFIG[project.status].color, size: "small", children: STATUS_CONFIG[project.status].label }) }),
           /* @__PURE__ */ jsx11(TableCell, { children: /* @__PURE__ */ jsx11(Chip4, { colorScheme: PRIORITY_CONFIG[project.priority].color, size: "smallest", outlined: true, children: PRIORITY_CONFIG[project.priority].label }) }),
           /* @__PURE__ */ jsx11(TableCell, { children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx11("div", { className: "w-6 h-6 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 flex items-center justify-center text-[10px] font-semibold shrink-0", children: project.assignee[0] }),
+            /* @__PURE__ */ jsx11("div", { className: "w-6 h-6 rounded-full bg-surface-raised text-surface-500 flex items-center justify-center text-[10px] font-semibold shrink-0", children: project.assignee[0] }),
             /* @__PURE__ */ jsx11(Typography9, { variant: "body2", className: "truncate", children: project.assignee })
           ] }) }),
           /* @__PURE__ */ jsx11(TableCell, { children: /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-1", children: project.tags.map((tag) => /* @__PURE__ */ jsx11(Chip4, { size: "smallest", colorScheme: "cyan", children: tag }, tag)) }) }),
@@ -2736,7 +2734,7 @@ function ProjectCard({ project, compact }) {
   const priorityCfg = PRIORITY_CONFIG[project.priority];
   const isOverdue = new Date(project.dueDate) < /* @__PURE__ */ new Date() && project.status !== "done";
   return /* @__PURE__ */ jsxs12(Card6, { className: cls8("cursor-pointer overflow-hidden group relative", "transition-all duration-200", "hover:shadow-lg hover:-translate-y-0.5"), children: [
-    /* @__PURE__ */ jsxs12("div", { className: cls8("relative overflow-hidden bg-surface-100 dark:bg-surface-900", compact ? "h-20" : "aspect-[5/2]"), children: [
+    /* @__PURE__ */ jsxs12("div", { className: cls8("relative overflow-hidden bg-surface-raised", compact ? "h-20" : "aspect-[5/2]"), children: [
       /* @__PURE__ */ jsx12("div", { className: "absolute inset-0 opacity-20 transition-all duration-300", style: { background: `linear-gradient(90deg, var(--color-primary) ${project.progress}%, transparent ${project.progress}%)` } }),
       /* @__PURE__ */ jsxs12("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-1", children: [
         /* @__PURE__ */ jsx12(FolderKanbanIcon, { size: compact ? 20 : 28, className: "text-surface-400 dark:text-surface-500" }),
@@ -2762,7 +2760,7 @@ function ProjectCard({ project, compact }) {
       ] }),
       !compact && /* @__PURE__ */ jsxs12("div", { className: cls8("flex items-center justify-between mt-2 pt-2 border-t", defaultBorderMixin3), children: [
         /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx12("div", { className: "w-5 h-5 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 flex items-center justify-center text-[9px] font-semibold", children: project.assignee[0] }),
+          /* @__PURE__ */ jsx12("div", { className: "w-5 h-5 rounded-full bg-surface-raised text-surface-500 flex items-center justify-center text-[9px] font-semibold", children: project.assignee[0] }),
           /* @__PURE__ */ jsx12(Typography10, { variant: "caption", color: "secondary", className: "truncate max-w-[100px]", children: project.assignee })
         ] }),
         /* @__PURE__ */ jsx12(Typography10, { variant: "caption", className: cls8("font-mono text-[10px]", isOverdue ? "text-red-500 font-semibold" : "text-surface-400"), children: project.dueDate })
@@ -2783,13 +2781,13 @@ function KanbanProjectCard({ item, isDragging, isGroupedOver, style }) {
   const priorityCfg = PRIORITY_CONFIG[project.priority];
   const isOverdue = new Date(project.dueDate) < /* @__PURE__ */ new Date() && project.status !== "done";
   const backgroundColor = useMemo6(() => {
-    if (isDragging) return "bg-surface-100 dark:bg-surface-800";
-    if (isGroupedOver) return "bg-surface-200 dark:bg-surface-700";
-    return "bg-white dark:bg-surface-800 hover:bg-surface-50 dark:hover:bg-surface-700";
+    if (isDragging) return "bg-surface-raised";
+    if (isGroupedOver) return "bg-surface-raised";
+    return "bg-surface-card hover:bg-surface-hover";
   }, [isDragging, isGroupedOver]);
   const borderColor = useMemo6(() => isDragging ? "ring-2 ring-primary" : "", [isDragging]);
   return /* @__PURE__ */ jsx13("div", { style, className: "py-1", "data-testid": item.id, children: /* @__PURE__ */ jsxs13("div", { className: cls9("group/card p-2 flex items-start border rounded-lg cursor-pointer transition-all duration-200", defaultBorderMixin4, borderColor, backgroundColor, "hover:shadow-sm"), children: [
-    /* @__PURE__ */ jsx13("div", { className: "w-10 h-10 rounded-md shrink-0 mr-2 bg-surface-100 dark:bg-surface-900 flex items-center justify-center", children: /* @__PURE__ */ jsx13(FolderKanbanIcon2, { size: 16, className: "text-surface-400" }) }),
+    /* @__PURE__ */ jsx13("div", { className: "w-10 h-10 rounded-md shrink-0 mr-2 bg-surface-raised flex items-center justify-center", children: /* @__PURE__ */ jsx13(FolderKanbanIcon2, { size: 16, className: "text-surface-400" }) }),
     /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
       /* @__PURE__ */ jsx13("div", { className: "line-clamp-2 text-sm font-medium", children: project.name }),
       /* @__PURE__ */ jsx13("div", { className: "text-xs text-surface-500 mt-1 line-clamp-2 opacity-80", children: project.description }),
@@ -2799,7 +2797,7 @@ function KanbanProjectCard({ item, isDragging, isGroupedOver, style }) {
       ] }),
       /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mt-1.5", children: [
         /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 rounded-full bg-surface-200 dark:bg-surface-700 text-surface-500 flex items-center justify-center text-[8px] font-semibold", children: project.assignee[0] }),
+          /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 rounded-full bg-surface-raised text-surface-500 flex items-center justify-center text-[8px] font-semibold", children: project.assignee[0] }),
           /* @__PURE__ */ jsx13(Typography11, { variant: "caption", color: "secondary", className: "truncate max-w-[80px] text-[10px]", children: project.assignee })
         ] }),
         /* @__PURE__ */ jsx13(Typography11, { variant: "caption", className: cls9("font-mono text-[10px]", isOverdue ? "text-red-500 font-semibold" : "text-surface-400"), children: project.dueDate })
@@ -2849,27 +2847,500 @@ function KanbanBoardDemo() {
   ] });
 }
 
-// src/debug/UIReferenceView.tsx
+// src/debug/ui-reference/SectionBlock.tsx
+import { cls as cls10, defaultBorderMixin as defaultBorderMixin5, Typography as Typography12 } from "@rebasepro/ui";
 import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+function SectionBlock({ id, title, wide, children }) {
+  return /* @__PURE__ */ jsx14("section", { id, className: cls10("px-6 py-8 border-b scroll-mt-0", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: wide ? void 0 : "max-w-5xl", children: [
+    /* @__PURE__ */ jsx14(Typography12, { variant: "h5", className: "mb-1", children: title }),
+    /* @__PURE__ */ jsx14("div", { className: "mt-4", children })
+  ] }) });
+}
+function SpecimenLabel({ children, className }) {
+  return /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: cls10("block mb-2 font-mono", className), children });
+}
+function Dot({ className }) {
+  return /* @__PURE__ */ jsx14("span", { "aria-hidden": true, className: cls10("inline-block w-1.5 h-1.5 rounded-full shrink-0", className) });
+}
+
+// src/debug/ui-reference/SystemSections.tsx
+import {
+  Avatar,
+  Button as Button8,
+  Card as Card7,
+  CheckIcon as CheckIcon2,
+  Chip as Chip7,
+  cls as cls11,
+  codeSurfaceMixin,
+  DatabaseIcon,
+  FileTextIcon as FileTextIcon2,
+  getColorSchemeForKey,
+  IconButton as IconButton4,
+  iconSize as iconSize2,
+  ImageIcon,
+  Paper as Paper2,
+  paperMixin,
+  PencilIcon as PencilIcon2,
+  Select as Select5,
+  SelectItem as SelectItem5,
+  SettingsIcon as SettingsIcon2,
+  ShoppingCartIcon,
+  TextField as TextField2,
+  Typography as Typography13,
+  UploadIcon,
+  UsersIcon as UsersIcon3
+} from "@rebasepro/ui";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var PRINCIPLES = [
+  {
+    title: "The chrome is monochrome. A hue is information.",
+    body: "Every control is a shade of the surface ladder. Colour appears where it means something: a dot for a state, a tint behind a value the operator chose, an outline, an icon, and the one filled button a screen has for its main action.",
+    specimen: /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsxs15("span", { className: "inline-flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx15(Dot, { className: "bg-green-500" }),
+        "Live"
+      ] }),
+      /* @__PURE__ */ jsx15(Chip7, { colorScheme: "blue", size: "small", children: "Published" }),
+      /* @__PURE__ */ jsx15(Chip7, { colorScheme: "red", size: "small", outlined: true, children: "Overdue" }),
+      /* @__PURE__ */ jsx15(Button8, { size: "small", children: "Cancel" }),
+      /* @__PURE__ */ jsx15(Button8, { size: "small", color: "primary", children: "Save" })
+    ] })
+  },
+  {
+    title: "Two voices: Inter for words, JetBrains Mono for anything measured.",
+    body: "What a person reads is set in the sans. What the system measured \u2014 a count, a size, a timestamp, an id, a path \u2014 is set in the mono tier, muted, and it lines up in columns because the digits are tabular.",
+    specimen: /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-baseline gap-x-6 gap-y-2", children: [
+      /* @__PURE__ */ jsx15(Typography13, { variant: "body1", component: "span", children: "Orders" }),
+      /* @__PURE__ */ jsx15(Typography13, { variant: "mono", component: "span", color: "secondary", className: "text-xs", children: "1,284 rows" }),
+      /* @__PURE__ */ jsx15(Typography13, { variant: "mono", component: "span", color: "secondary", className: "text-xs", children: "16/08/2026, 05:30" }),
+      /* @__PURE__ */ jsx15(Typography13, { variant: "mono", component: "span", color: "secondary", className: "text-xs", children: "europe-west1" })
+    ] })
+  },
+  {
+    title: "Depth is a lightness step plus a hairline. Nothing casts a shadow unless it floats.",
+    body: "Frame, sheet, card, raised: each one step up from the surface it sits on, separated by a 1px line at 8% where the step alone would not read. Menus, popovers and dialogs float, so they get the strong hairline and a shadow.",
+    specimen: /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-start gap-3", children: [
+      /* @__PURE__ */ jsx15("div", { className: "bg-surface-sheet border border-hairline rounded-xl p-3 w-44", children: /* @__PURE__ */ jsx15("div", { className: "bg-surface-card border border-hairline rounded-lg p-3", children: /* @__PURE__ */ jsx15(Typography13, { variant: "caption", color: "secondary", className: "font-mono", children: "card on sheet" }) }) }),
+      /* @__PURE__ */ jsx15("div", { className: cls11(paperMixin, "p-3 w-44 shadow-lg"), children: /* @__PURE__ */ jsx15(Typography13, { variant: "caption", color: "secondary", className: "font-mono", children: "floating paper" }) })
+    ] })
+  },
+  {
+    title: "Big and small, with little in between.",
+    body: "A headline figure is very big and its context is very small. The middle sizes are for prose, and a data surface has almost none \u2014 that gap is what makes a dashboard read as an instrument rather than a form.",
+    specimen: /* @__PURE__ */ jsxs15("div", { children: [
+      /* @__PURE__ */ jsx15(Typography13, { variant: "micro", component: "div", color: "secondary", children: "Storage" }),
+      /* @__PURE__ */ jsx15(Typography13, { variant: "stat", component: "div", className: "mt-1", children: "264 MB" }),
+      /* @__PURE__ */ jsx15(Typography13, { variant: "mono", component: "div", color: "secondary", className: "text-xs mt-1", children: "used \xB7 6 collections \xB7 self-hosted" })
+    ] })
+  },
+  {
+    title: "Dense controls, generous containers.",
+    body: "Fields are 32px with 14px text and a 13px label; buttons in a toolbar are 32px. The card around them keeps 16\u201320px of padding and the form grid keeps 20px between rows. Density lives inside the container; air lives between containers.",
+    specimen: /* @__PURE__ */ jsxs15(Card7, { className: "p-4 w-64", children: [
+      /* @__PURE__ */ jsx15(Typography13, { variant: "caption", className: "block text-[13px] font-medium mb-1.5", children: "Product name" }),
+      /* @__PURE__ */ jsx15(TextField2, { size: "small", value: "Italian coffee maker", onChange: () => {
+      } }),
+      /* @__PURE__ */ jsx15(Typography13, { variant: "caption", color: "disabled", className: "block mt-1.5", children: "Shown on the storefront and in receipts." })
+    ] })
+  },
+  {
+    title: "Status is a dot before the word. A count is a number in the mono voice.",
+    body: "A list shows state with a 6px dot and a plain word, and puts the measured value flush right in the mono tier. No badges, no filled pills, nothing that has to be read twice.",
+    specimen: /* @__PURE__ */ jsx15("div", { className: "w-56 flex flex-col", children: [
+      ["bg-green-500", "Site", "Live"],
+      ["bg-green-500", "Build", "3m ago"],
+      ["bg-amber-500", "Plugins", "1 update"]
+    ].map(([hue, label, value]) => /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2.5 h-8 text-sm", children: [
+      /* @__PURE__ */ jsx15(Dot, { className: hue }),
+      /* @__PURE__ */ jsx15("span", { children: label }),
+      /* @__PURE__ */ jsx15(Typography13, { variant: "mono", component: "span", color: "secondary", className: "ml-auto text-xs", children: value })
+    ] }, label)) })
+  }
+];
+function PrinciplesSection() {
+  return /* @__PURE__ */ jsxs15(SectionBlock, { id: "principles", title: "Principles", children: [
+    /* @__PURE__ */ jsxs15(Typography13, { variant: "body2", color: "secondary", className: "mb-6 max-w-[68ch]", children: [
+      "Six decisions the panel holds everywhere at once. Each one lives in",
+      " ",
+      /* @__PURE__ */ jsx15("code", { className: "font-mono text-xs", children: "theme.css" }),
+      " or ",
+      /* @__PURE__ */ jsx15("code", { className: "font-mono text-xs", children: "styles.ts" }),
+      ", so a screen that breaks one is wrong, not different. They were distilled from the reference the ladder was measured against (",
+      /* @__PURE__ */ jsx15("code", { className: "font-mono text-xs", children: "docs/design/instatic-distilled.html" }),
+      ") and adapted to the kit's own tokens."
+    ] }),
+    /* @__PURE__ */ jsx15("div", { className: "flex flex-col", children: PRINCIPLES.map((p, i) => /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        className: cls11(
+          "grid grid-cols-1 md:grid-cols-[minmax(0,1fr)_minmax(0,20rem)] gap-x-10 gap-y-4 py-6",
+          i > 0 && "border-t border-hairline"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs15("div", { children: [
+            /* @__PURE__ */ jsx15(Typography13, { variant: "h6", component: "h3", className: "mb-2", children: p.title }),
+            /* @__PURE__ */ jsx15(Typography13, { variant: "body2", color: "secondary", className: "max-w-[60ch]", children: p.body })
+          ] }),
+          /* @__PURE__ */ jsx15("div", { className: "md:pt-1", children: p.specimen })
+        ]
+      },
+      p.title
+    )) })
+  ] });
+}
+var CHIP_HUES = ["blue", "teal", "red", "green", "yellow", "orange", "purple", "pink", "cyan", "indigo", "violet", "fuchsia", "rose", "emerald", "gray"];
+function ColourSection() {
+  return /* @__PURE__ */ jsxs15(SectionBlock, { id: "colour", title: "Colour \u2014 where a hue may appear", children: [
+    /* @__PURE__ */ jsxs15(Typography13, { variant: "body2", color: "secondary", className: "mb-6 max-w-[68ch]", children: [
+      "The surfaces are grey and the primary is spent once per screen. Everything else colour does, it does in one of five forms, from quietest to loudest. The chip palette is fifteen hues, and a chip paints its hue as a tint by default; the solid stop is ",
+      /* @__PURE__ */ jsx15("code", { className: "font-mono text-xs", children: 'variant="filled"' }),
+      ", for swatches."
+    ] }),
+    /* @__PURE__ */ jsxs15("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4 mb-8", children: [
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx15(SpecimenLabel, { children: "dot" }),
+        /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-2 text-sm", children: [
+          /* @__PURE__ */ jsxs15("span", { className: "inline-flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx15(Dot, { className: "bg-green-500" }),
+            "Healthy"
+          ] }),
+          /* @__PURE__ */ jsxs15("span", { className: "inline-flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx15(Dot, { className: "bg-amber-500" }),
+            "Degraded"
+          ] }),
+          /* @__PURE__ */ jsxs15("span", { className: "inline-flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx15(Dot, { className: "bg-red-500" }),
+            "Failing"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx15(SpecimenLabel, { children: "icon" }),
+        /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-3 text-text-secondary dark:text-text-secondary-dark", children: [
+          /* @__PURE__ */ jsx15(CheckIcon2, { size: iconSize2.smallest, className: "text-green-600 dark:text-green-500" }),
+          /* @__PURE__ */ jsx15(UploadIcon, { size: iconSize2.smallest, className: "text-primary dark:text-primary-light" }),
+          /* @__PURE__ */ jsx15(SettingsIcon2, { size: iconSize2.smallest })
+        ] }),
+        /* @__PURE__ */ jsx15(Typography13, { variant: "caption", color: "secondary", className: "block mt-2", children: "Inherits the text tier unless it carries a state." })
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx15(SpecimenLabel, { children: "outline" }),
+        /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx15(Chip7, { colorScheme: "blue", size: "small", outlined: true, children: "Draft" }),
+          /* @__PURE__ */ jsx15(Chip7, { colorScheme: "red", size: "small", outlined: true, children: "Blocked" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx15(SpecimenLabel, { children: "tint" }),
+        /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx15(Chip7, { colorScheme: "green", size: "small", children: "Published" }),
+          /* @__PURE__ */ jsx15(Chip7, { colorScheme: "purple", size: "small", children: "Serveware" })
+        ] }),
+        /* @__PURE__ */ jsx15(Typography13, { variant: "caption", color: "secondary", className: "block mt-2", children: "The default for a value the operator chose." })
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx15(SpecimenLabel, { children: "fill \xB7 one per screen" }),
+        /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx15(Button8, { size: "small", color: "primary", children: "Add product" }),
+          /* @__PURE__ */ jsx15(Button8, { size: "small", children: "Import" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx15(SpecimenLabel, { children: "the hue set, as the dots it usually is" }),
+    /* @__PURE__ */ jsx15("div", { className: "flex flex-wrap gap-x-5 gap-y-2 mb-8", children: CHIP_HUES.map((hue) => {
+      const scheme = getColorSchemeForKey(hue);
+      return /* @__PURE__ */ jsxs15("span", { className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx15("span", { "aria-hidden": true, className: "inline-block w-2.5 h-2.5 rounded-full dark:hidden", style: { backgroundColor: scheme.tintText } }),
+        /* @__PURE__ */ jsx15("span", { "aria-hidden": true, className: "hidden dark:inline-block w-2.5 h-2.5 rounded-full", style: { backgroundColor: scheme.darkTintText } }),
+        /* @__PURE__ */ jsx15(Typography13, { variant: "mono", component: "span", color: "secondary", className: "text-xs", children: hue })
+      ] }, hue);
+    }) }),
+    /* @__PURE__ */ jsxs15("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx15(SpecimenLabel, { children: "primary as text \xB7 accentTextMixin" }),
+        /* @__PURE__ */ jsxs15(Typography13, { variant: "body2", children: [
+          "Read as text on a dark card, ",
+          /* @__PURE__ */ jsx15("code", { className: "font-mono text-xs", children: "#0070F4" }),
+          " lands under AA, so links use",
+          " ",
+          /* @__PURE__ */ jsx15("a", { href: "#colour", className: "text-primary dark:text-primary-light font-medium", children: "the lifted primary" }),
+          " in dark mode and the raw primary in light. Fills keep the raw value: white on it is what it was tuned for."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx15(SpecimenLabel, { children: "what never happens" }),
+        /* @__PURE__ */ jsx15(Typography13, { variant: "body2", color: "secondary", children: "A second filled hue on the same screen; a chip painted as a solid block to show a status; the rose secondary on a control; a coloured background on a region. If a screen needs any of these, the information it is trying to carry belongs in a dot, a word, or a number." })
+      ] })
+    ] })
+  ] });
+}
+var RADII = [
+  ["rounded-md", "6", "chip, code well, tile, segment"],
+  ["rounded-lg", "9", "control, row highlight, menu, folder tab, segmented track"],
+  ["rounded-xl", "13", "card, sheet, dialog"],
+  ["rounded-2xl", "16", "login card"],
+  ["rounded-full", "pill", "search, switch, avatar"]
+];
+var CONTROL_SIZES = [
+  {
+    size: "smallest",
+    px: 28,
+    use: "a control inside a table cell"
+  },
+  {
+    size: "small",
+    px: 32,
+    use: "record forms, toolbars, the reference density"
+  },
+  {
+    size: "medium",
+    px: 40,
+    use: "dialogs and standalone controls"
+  },
+  {
+    size: "large",
+    px: 48,
+    use: "the login screen and other one-field moments"
+  }
+];
+function ShapeSpaceSection() {
+  return /* @__PURE__ */ jsxs15(SectionBlock, { id: "shape", title: "Shape and space", children: [
+    /* @__PURE__ */ jsxs15(Typography13, { variant: "body2", color: "secondary", className: "mb-6 max-w-[68ch]", children: [
+      "One radius ladder, one height ladder, a 4px grid. A control and a field at the same",
+      " ",
+      /* @__PURE__ */ jsx15("code", { className: "font-mono text-xs", children: "size" }),
+      " are pixel-identical in height and share a baseline (",
+      /* @__PURE__ */ jsx15("code", { className: "font-mono text-xs", children: "CONTROL_HEIGHT" }),
+      " in ",
+      /* @__PURE__ */ jsx15("code", { className: "font-mono text-xs", children: "styles.ts" }),
+      ")."
+    ] }),
+    /* @__PURE__ */ jsx15(SpecimenLabel, { children: "radius" }),
+    /* @__PURE__ */ jsx15("div", { className: "flex flex-wrap gap-4 mb-8", children: RADII.map(([cn, px, use]) => /* @__PURE__ */ jsxs15("div", { className: cls11("bg-surface-field border border-hairline w-40 h-16 p-2.5 flex flex-col justify-end", cn), children: [
+      /* @__PURE__ */ jsxs15(Typography13, { variant: "mono", component: "span", className: "text-xs", children: [
+        px,
+        " \xB7 ",
+        cn.replace("rounded-", "")
+      ] }),
+      /* @__PURE__ */ jsx15(Typography13, { variant: "caption", color: "secondary", className: "truncate", children: use })
+    ] }, cn)) }),
+    /* @__PURE__ */ jsx15(SpecimenLabel, { children: "control heights \xB7 Button, TextField, Select, IconButton at the same size" }),
+    /* @__PURE__ */ jsx15("div", { className: "flex flex-col gap-3 mb-8", children: CONTROL_SIZES.map(({ size, px, use }) => /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsxs15(Typography13, { variant: "mono", component: "span", color: "secondary", className: "text-xs w-24 shrink-0", children: [
+        px,
+        " \xB7 ",
+        size
+      ] }),
+      /* @__PURE__ */ jsx15(Button8, { size, children: "Button" }),
+      /* @__PURE__ */ jsx15(TextField2, { size, value: "Field", onChange: () => {
+      }, 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(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: [
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx15(SpecimenLabel, { children: "spacing" }),
+        /* @__PURE__ */ jsx15("div", { className: "flex flex-col text-sm", children: [
+          ["4px", "the grid every gap lands on; most gaps are 8"],
+          ["6px", "label to field, field to helper text"],
+          ["20 \xD7 16px", "record form rows \xD7 columns (gap-y-5 gap-x-4)"],
+          ["16\u201320px", "card padding, all four sides"],
+          ["32px", "between chapters of a page (py-8)"]
+        ].map(([v, what]) => /* @__PURE__ */ jsxs15("div", { className: "flex items-baseline gap-4 py-1.5 border-b border-hairline last:border-0", children: [
+          /* @__PURE__ */ jsx15(Typography13, { variant: "mono", component: "span", className: "text-xs w-20 shrink-0", children: v }),
+          /* @__PURE__ */ jsx15(Typography13, { variant: "body2", component: "span", color: "secondary", children: what })
+        ] }, v)) })
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { children: [
+        /* @__PURE__ */ jsx15(SpecimenLabel, { children: "a record-form field, assembled" }),
+        /* @__PURE__ */ jsxs15("div", { className: "max-w-xs", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1.5 font-medium leading-tight mb-1.5 text-[13px]", children: [
+            /* @__PURE__ */ jsx15("span", { className: "shrink-0 text-text-disabled dark:text-text-disabled-dark", children: /* @__PURE__ */ jsx15(FileTextIcon2, { size: 14 }) }),
+            /* @__PURE__ */ jsx15("span", { children: "SKU" }),
+            /* @__PURE__ */ jsx15("span", { className: "text-red-500 -ml-1", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx15(TextField2, { size: "small", value: "SKU-57032", onChange: () => {
+          } }),
+          /* @__PURE__ */ jsx15(Typography13, { variant: "caption", color: "disabled", className: "block mt-1.5 ml-0.5 leading-snug", children: "Stock keeping unit \u2014 unique product identifier" })
+        ] }),
+        /* @__PURE__ */ jsxs15(Typography13, { variant: "caption", color: "secondary", className: "block mt-3", children: [
+          "13px label in the primary ink with a muted 14px type icon, a 32px field with its hairline, an 11px note. Mirrors ",
+          /* @__PURE__ */ jsx15("code", { className: "font-mono", children: "FieldBlock" }),
+          " in the panel."
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function DepthIconsSection() {
+  return /* @__PURE__ */ jsx15(SectionBlock, { id: "depth", title: "Depth and icons", children: /* @__PURE__ */ jsxs15("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
+    /* @__PURE__ */ jsxs15("div", { children: [
+      /* @__PURE__ */ jsxs15(Typography13, { variant: "body2", color: "secondary", className: "mb-4 max-w-[52ch]", children: [
+        "Two kinds of surface, and the border is what tells them apart. A card sits ",
+        /* @__PURE__ */ jsx15("em", { children: "on" }),
+        " the page: one step lighter, a plain hairline. A paper floats ",
+        /* @__PURE__ */ jsx15("em", { children: "over" }),
+        " it: the strong hairline and a shadow, because it has to read against anything underneath. The scrim is the only large translucent fill."
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { className: "bg-surface-sheet border border-hairline rounded-xl p-4 flex flex-wrap gap-4 items-start", children: [
+        /* @__PURE__ */ jsxs15(Card7, { className: "p-4 w-48", children: [
+          /* @__PURE__ */ jsx15(Typography13, { variant: "micro", component: "div", color: "secondary", children: "card" }),
+          /* @__PURE__ */ jsx15(Typography13, { variant: "body2", className: "mt-1", children: "cardMixin \xB7 hairline" })
+        ] }),
+        /* @__PURE__ */ jsxs15(Paper2, { className: "p-4 w-48 shadow-lg", children: [
+          /* @__PURE__ */ jsx15(Typography13, { variant: "micro", component: "div", color: "secondary", children: "paper" }),
+          /* @__PURE__ */ jsx15(Typography13, { variant: "body2", className: "mt-1", children: "paperMixin \xB7 hairline-strong" })
+        ] }),
+        /* @__PURE__ */ jsxs15("div", { className: cls11(codeSurfaceMixin, "p-3 w-48 font-mono text-xs text-text-secondary dark:text-text-secondary-dark"), children: [
+          /* @__PURE__ */ jsx15("div", { className: "typography-micro mb-1", children: "well" }),
+          "SELECT 1;"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs15("div", { children: [
+      /* @__PURE__ */ jsxs15(Typography13, { variant: "body2", color: "secondary", className: "mb-4 max-w-[52ch]", children: [
+        "Icons are Lucide outlines, sized from the ",
+        /* @__PURE__ */ jsx15("code", { className: "font-mono text-xs", children: "iconSize" }),
+        " map and coloured by the text tier they sit in. A leading icon in a list sits in a 28px raised tile so every row shares a left edge."
+      ] }),
+      /* @__PURE__ */ jsx15("div", { className: "flex flex-wrap items-end gap-6 mb-5", children: ["smallest", "small", "medium", "large"].map((s) => /* @__PURE__ */ jsxs15("div", { className: "flex flex-col items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx15(SettingsIcon2, { size: iconSize2[s], className: "text-text-secondary dark:text-text-secondary-dark" }),
+        /* @__PURE__ */ jsxs15(Typography13, { variant: "mono", component: "span", color: "secondary", className: "text-xs", children: [
+          iconSize2[s],
+          " \xB7 ",
+          s
+        ] })
+      ] }, s)) }),
+      /* @__PURE__ */ jsx15(SpecimenLabel, { children: "icon tile \xB7 a leading icon in a row" }),
+      /* @__PURE__ */ jsx15("div", { className: "flex flex-col gap-1 max-w-xs", children: [
+        [/* @__PURE__ */ jsx15(ImageIcon, { size: 14 }, "i"), "Media", "3 files", "2 / 3"],
+        [/* @__PURE__ */ jsx15(FileTextIcon2, { size: 14 }, "p"), "Pages", "1 page", "0 / 1"],
+        [/* @__PURE__ */ jsx15(DatabaseIcon, { size: 14 }, "d"), "Collections", "12 tables", "12 / 12"]
+      ].map(([icon, name, sub, count]) => /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-3 h-11 px-3 bg-surface-card border border-hairline rounded-lg", children: [
+        /* @__PURE__ */ jsx15("span", { className: "w-7 h-7 rounded-md bg-surface-raised flex items-center justify-center text-text-secondary dark:text-text-secondary-dark shrink-0", children: icon }),
+        /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx15(Typography13, { variant: "body2", className: "font-medium block leading-tight", children: name }),
+          /* @__PURE__ */ jsx15(Typography13, { variant: "mono", component: "span", color: "secondary", className: "text-[11px]", children: sub })
+        ] }),
+        /* @__PURE__ */ jsx15(Typography13, { variant: "mono", component: "span", color: "secondary", className: "ml-auto text-xs", children: count })
+      ] }, String(name))) })
+    ] })
+  ] }) });
+}
+function StatCard({ hue, icon, label, value, context, children }) {
+  return /* @__PURE__ */ jsxs15(Card7, { className: "p-4 flex flex-col", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 mb-3.5", children: [
+      /* @__PURE__ */ jsx15(Dot, { className: hue }),
+      /* @__PURE__ */ jsx15("span", { className: "text-text-secondary dark:text-text-secondary-dark flex items-center", children: icon }),
+      /* @__PURE__ */ jsx15(Typography13, { variant: "micro", component: "span", color: "secondary", children: label })
+    ] }),
+    /* @__PURE__ */ jsx15(Typography13, { variant: "stat", component: "div", children: value }),
+    /* @__PURE__ */ jsx15(Typography13, { variant: "mono", component: "div", color: "secondary", className: "text-[11px] mt-1.5", children: context }),
+    children && /* @__PURE__ */ jsx15("div", { className: "mt-4", children })
+  ] });
+}
+function CardsDataSection() {
+  const storage = [
+    ["bg-amber-500", "Images", "257 MB", 88],
+    ["bg-blue-500", "Documents", "1 MB", 3],
+    ["bg-green-500", "Database", "6 MB", 5]
+  ];
+  return /* @__PURE__ */ jsxs15(SectionBlock, { id: "data", title: "Cards and data", children: [
+    /* @__PURE__ */ jsx15(Typography13, { variant: "body2", color: "secondary", className: "mb-6 max-w-[68ch]", children: "The dashboard card is the most reusable idea in the system: a labelled instrument with one big value and its context underneath. The header grammar never changes \u2014 dot, icon, micro label \u2014 so a grid of them scans as one thing. Lists inside cards put the measured value flush right in the mono tier and show state as a dot before the word." }),
+    /* @__PURE__ */ jsxs15("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4", children: [
+      /* @__PURE__ */ jsx15(StatCard, { hue: "bg-blue-500", icon: /* @__PURE__ */ jsx15(ShoppingCartIcon, { size: 14 }), label: "Orders", value: "1,284", context: "+ 40 this week", children: /* @__PURE__ */ jsxs15(Typography13, { variant: "mono", component: "div", color: "secondary", className: "text-[11px] flex gap-4", children: [
+        /* @__PURE__ */ jsx15("span", { children: "12 pending" }),
+        /* @__PURE__ */ jsx15("span", { children: "3 refunded" })
+      ] }) }),
+      /* @__PURE__ */ jsx15(StatCard, { hue: "bg-amber-500", icon: /* @__PURE__ */ jsx15(FileTextIcon2, { size: 14 }), label: "Posts", value: "7", context: "total \xB7 2 categories", children: /* @__PURE__ */ jsx15("div", { className: "border-t border-dashed border-amber-500/50 mt-2" }) }),
+      /* @__PURE__ */ jsx15(StatCard, { hue: "bg-green-500", icon: /* @__PURE__ */ jsx15(ImageIcon, { size: 14 }), label: "Media", value: "74", context: "files \xB7 258 MB", children: /* @__PURE__ */ jsx15("div", { className: "flex gap-1", children: ["bg-surface-raised", "bg-surface-raised-hover", "bg-surface-raised", "bg-surface-lifted"].map((c, i) => /* @__PURE__ */ jsx15("div", { className: cls11("flex-1 h-8 rounded", c) }, i)) }) }),
+      /* @__PURE__ */ jsxs15(StatCard, { hue: "bg-purple-500", icon: /* @__PURE__ */ jsx15(DatabaseIcon, { size: 14 }), label: "Storage", value: "264 MB", context: "used \xB7 Postgres \xB7 self-hosted", children: [
+        /* @__PURE__ */ jsx15("div", { className: "h-1.5 rounded-full bg-surface-raised overflow-hidden flex", children: storage.map(([hue, name, , pct]) => /* @__PURE__ */ jsx15("div", { className: cls11("h-full", hue), style: { width: `${pct}%` } }, name)) }),
+        /* @__PURE__ */ jsx15("div", { className: "grid grid-cols-2 gap-x-3 gap-y-1 mt-2", children: storage.map(([hue, name, size]) => /* @__PURE__ */ jsxs15(Typography13, { variant: "mono", component: "span", color: "secondary", className: "text-[11px] inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx15(Dot, { className: hue }),
+          name,
+          " \xB7 ",
+          size
+        ] }, name)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs15("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs15(Card7, { className: "p-4", children: [
+        /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 mb-2", children: [
+          /* @__PURE__ */ jsx15(Dot, { className: "bg-green-500" }),
+          /* @__PURE__ */ jsx15("span", { className: "text-text-secondary dark:text-text-secondary-dark flex items-center", children: /* @__PURE__ */ jsx15(CheckIcon2, { size: 14 }) }),
+          /* @__PURE__ */ jsx15(Typography13, { variant: "micro", component: "span", color: "secondary", children: "Status" })
+        ] }),
+        [
+          ["bg-green-500", "API", "healthy"],
+          ["bg-green-500", "Realtime", "3 channels"],
+          ["bg-green-500", "Backup", "2h ago"],
+          ["bg-amber-500", "Cron", "1 late"]
+        ].map(([hue, label, value]) => /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2.5 h-8 text-sm", children: [
+          /* @__PURE__ */ jsx15(Dot, { className: hue }),
+          /* @__PURE__ */ jsx15("span", { children: label }),
+          /* @__PURE__ */ jsx15(Typography13, { variant: "mono", component: "span", color: "secondary", className: "ml-auto text-xs", children: value })
+        ] }, label))
+      ] }),
+      /* @__PURE__ */ jsxs15(Card7, { className: "p-4", children: [
+        /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 mb-2", children: [
+          /* @__PURE__ */ jsx15(Dot, { className: "bg-blue-500" }),
+          /* @__PURE__ */ jsx15("span", { className: "text-text-secondary dark:text-text-secondary-dark flex items-center", children: /* @__PURE__ */ jsx15(UsersIcon3, { size: 14 }) }),
+          /* @__PURE__ */ jsx15(Typography13, { variant: "micro", component: "span", color: "secondary", children: "Activity" })
+        ] }),
+        [
+          ["Z", "published the site", "2m"],
+          ["Z", "created /posts/untitled", "4h"],
+          ["A", "added user alice@example.com", "4h"]
+        ].map(([who, what, when], i) => {
+          const [verb, ...rest] = what.split(" ");
+          const object = rest.join(" ");
+          const isCode = object.startsWith("/") || object.includes("@");
+          return /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2.5 h-9 text-sm min-w-0", children: [
+            /* @__PURE__ */ jsx15(Avatar, { className: "w-5 h-5 text-[10px] shrink-0", children: who }),
+            /* @__PURE__ */ jsxs15("span", { className: "truncate", children: [
+              verb,
+              " ",
+              isCode ? /* @__PURE__ */ jsx15("code", { className: "font-mono text-xs bg-surface-raised px-1.5 py-0.5 rounded", children: object }) : object
+            ] }),
+            /* @__PURE__ */ jsx15(Typography13, { variant: "mono", component: "span", color: "secondary", className: "ml-auto text-[11px] shrink-0", children: when })
+          ] }, i);
+        })
+      ] })
+    ] })
+  ] });
+}
+
+// src/debug/UIReferenceView.tsx
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 var SECTIONS = [
-  { id: "drawer", label: "Drawer", icon: PanelLeftIcon },
-  { id: "appbar", label: "App Bar", icon: AppWindow },
-  { id: "tabs", label: "Tabs", icon: ListIcon2 },
-  { id: "editor-sidebar", label: "Editor Sidebar", icon: ColumnsIcon },
-  { id: "empty-states", label: "Empty States", icon: FileIcon },
-  { id: "typography", label: "Typography", icon: TypeIcon },
-  { id: "buttons", label: "Buttons", icon: PlusIcon },
-  { id: "inputs", label: "Form Inputs", icon: FileTextIcon2 },
-  { id: "chips-alerts", label: "Chips & Alerts", icon: AlertCircleIcon },
-  { id: "users", label: "Management", icon: UserIcon },
-  { id: "user-dialog", label: "Form Dialog", icon: CircleUserIcon },
-  { id: "crm-dashboard", label: "CRM Dashboard", icon: LayoutGridIcon2 },
-  { id: "collection-table", label: "Collection Table", icon: ListIcon2 },
-  { id: "card-view", label: "Card View", icon: LayoutGridIcon2 },
-  { id: "kanban-board", label: "Kanban Board", icon: KanbanIcon }
+  { id: "principles", label: "Principles", icon: SunMoonIcon, group: "System" },
+  { id: "surfaces", label: "Surfaces", icon: LayoutGridIcon2, group: "System" },
+  { id: "colour", label: "Colour", icon: AlertCircleIcon, group: "System" },
+  { id: "typography", label: "Typography", icon: TypeIcon, group: "System" },
+  { id: "shape", label: "Shape and space", icon: ColumnsIcon, group: "System" },
+  { id: "depth", label: "Depth and icons", icon: AppWindow, group: "System" },
+  { id: "drawer", label: "Drawer", icon: PanelLeftIcon, group: "Shell" },
+  { id: "appbar", label: "App bar", icon: AppWindow, group: "Shell" },
+  { id: "tabs", label: "Tabs", icon: ListIcon2, group: "Shell" },
+  { 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: "chips-alerts", label: "Chips and alerts", icon: TagIcon, group: "Controls" },
+  { id: "data", label: "Cards and data", icon: LayoutGridIcon2, 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" },
+  { id: "crm-dashboard", label: "CRM dashboard", icon: LayoutGridIcon2, group: "Screens" },
+  { id: "collection-table", label: "Collection table", icon: ListIcon2, group: "Screens" },
+  { id: "card-view", label: "Card view", icon: LayoutGridIcon2, group: "Screens" },
+  { id: "kanban-board", label: "Kanban board", icon: KanbanIcon, group: "Screens" }
 ];
+var SECTION_GROUPS = ["System", "Shell", "Controls", "Screens"];
 function UIReferenceView() {
-  const [activeSection, setActiveSection] = useState8("drawer");
+  const [activeSection, setActiveSection] = useState8("principles");
   const scrollContainerRef = React10.useRef(null);
   const scrollTo = (id) => {
     const el = document.getElementById(id);
@@ -2880,278 +3351,366 @@ function UIReferenceView() {
     }
     setActiveSection(id);
   };
-  return /* @__PURE__ */ jsxs14("div", { className: "flex w-full", children: [
-    /* @__PURE__ */ jsxs14("div", { className: cls10("flex flex-col sticky top-0 h-screen grow-0 shrink-0 w-[232px] border-r", defaultBorderMixin5), children: [
-      /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2", children: [
-        /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px]", children: /* @__PURE__ */ jsx14(RebaseLogo, { width: "28px", height: "28px" }) }),
-        /* @__PURE__ */ jsx14(Typography12, { variant: "subtitle1", noWrap: true, className: "truncate", children: "UI Ref" })
+  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" })
       ] }),
-      /* @__PURE__ */ jsx14("div", { className: "mt-3 flex-grow overflow-scroll no-scrollbar", children: /* @__PURE__ */ jsxs14("div", { className: "my-2 mx-2 flex flex-col", children: [
-        /* @__PURE__ */ jsxs14("div", { className: cls10("pl-4 pr-2 py-1 flex flex-row items-center transition-colors cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-700/50 rounded-t-lg bg-surface-50 dark:bg-surface-950/30"), children: [
-          /* @__PURE__ */ jsx14(ChevronDownIcon, { size: iconSize2.smallest, className: "text-surface-500 dark:text-surface-400 transition-transform duration-200 mr-1" }),
-          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "font-medium flex-grow line-clamp-1", children: "SECTIONS" })
+      /* @__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__ */ jsx14("div", { className: "overflow-hidden bg-surface-50 dark:bg-surface-950/30 rounded-b-lg", children: SECTIONS.map((s) => {
+        /* @__PURE__ */ jsx16("div", { className: "flex flex-col", children: SECTIONS.filter((s) => s.group === group).map((s) => {
           const IconComponent = s.icon;
-          return /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsxs14(
+          const active = activeSection === s.id;
+          return /* @__PURE__ */ jsxs16(
             "div",
             {
               onClick: () => scrollTo(s.id),
-              className: cls10(
+              className: cls12(
                 "rounded-lg truncate group/nav",
-                "hover:bg-primary/5 dark:hover:bg-primary/5 text-text-primary dark:text-surface-200 hover:text-surface-900 dark:hover:text-white",
-                "flex flex-row items-center",
-                "pr-4 h-10",
-                "font-medium text-xs cursor-pointer",
-                activeSection === s.id ? "bg-primary/8 dark:bg-primary/10 text-primary dark:text-primary" : ""
+                "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__ */ jsx14("div", { className: cls10("shrink-0 flex items-center justify-center w-[56px] h-[40px] text-surface-500 dark:text-text-secondary-dark transition-colors duration-150 group-hover/nav:text-primary", activeSection === s.id && "text-primary dark:text-primary"), children: /* @__PURE__ */ jsx14(IconComponent, { size: iconSize2.small }) }),
-                /* @__PURE__ */ jsx14("div", { className: "text-text-primary dark:text-surface-200 opacity-100 font-inherit truncate space-x-2", children: s.label.toUpperCase() })
+                /* @__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 })
               ]
-            }
-          ) }, s.id);
+            },
+            s.id
+          );
         }) })
-      ] }) }),
-      /* @__PURE__ */ jsx14("div", { className: cls10("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: cls10(
+      ] }, group)) }),
+      /* @__PURE__ */ jsx16("div", { className: cls12("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin6), children: /* @__PURE__ */ jsxs16("div", { className: cls12(
         "flex flex-row items-center rounded-lg cursor-pointer",
-        "hover:bg-surface-accent-100 dark:hover:bg-surface-800",
+        "hover:bg-surface-hover",
         "transition-colors duration-150",
         "py-2"
       ), children: [
-        /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400", children: /* @__PURE__ */ jsx14(ChevronsLeftIcon, { size: iconSize2.small }) }),
-        /* @__PURE__ */ jsx14(Typography12, { variant: "body2", className: "text-surface-500 dark:text-surface-400 select-none whitespace-nowrap", children: "Collapse" })
+        /* @__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__ */ jsxs14("div", { ref: scrollContainerRef, className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsxs14(SectionBlock, { id: "drawer", title: "Drawer \u2014 DefaultDrawer.tsx", children: [
-        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+    /* @__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: [
+          "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__ */ 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__ */ 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__ */ 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__ */ jsx16("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"],
+          ["raised", "bg-surface-raised"],
+          ["lifted", "bg-surface-lifted"],
+          ["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)) })
+      ] }),
+      /* @__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: [
+            v,
+            " ",
+            /* @__PURE__ */ jsxs16("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" })
+        ] }, 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: [
+          '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: [
+            "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" }),
+            " and",
+            " ",
+            /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "stat" }),
+            " both carry",
+            " ",
+            /* @__PURE__ */ jsx16("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: [
+            ["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 })
+          ] }, 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__ */ 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__ */ 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: [
           "The drawer wraps ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "DrawerLogo" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "DrawerLogo" }),
           ", scrollable ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "DrawerNavigationGroup" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "DrawerNavigationGroup" }),
           "s, and ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "DrawerToggle" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "DrawerToggle" }),
           ". Two visual states: collapsed (icon only, 72px) and expanded (280px)."
         ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "flex gap-6 flex-wrap", children: [
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "Collapsed (72px)" }),
-            /* @__PURE__ */ jsxs14("div", { className: cls10("flex flex-col h-72 relative w-[72px] border rounded-lg overflow-hidden bg-white dark:bg-surface-900", defaultBorderMixin5), children: [
-              /* @__PURE__ */ jsx14("div", { className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2", children: /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px]", children: /* @__PURE__ */ jsx14(RebaseLogo, { width: "28px", height: "28px" }) }) }),
-              /* @__PURE__ */ jsx14("div", { className: "mt-3 flex-grow overflow-hidden", children: /* @__PURE__ */ jsx14("div", { className: "my-2 mx-2 flex flex-col", children: /* @__PURE__ */ jsx14("div", { className: "overflow-hidden rounded-lg bg-surface-50 dark:bg-surface-950/30", children: [/* @__PURE__ */ jsx14(FolderIcon, { size: iconSize2.small }, "folder"), /* @__PURE__ */ jsx14(UserIcon, { size: iconSize2.small }, "user"), /* @__PURE__ */ jsx14(TagIcon, { size: iconSize2.small }, "tag")].map((icon, i) => /* @__PURE__ */ jsx14("div", { className: "rounded-lg truncate hover:bg-primary/5 dark:hover:bg-primary/5 flex flex-row items-center h-10", children: /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark", children: icon }) }, i)) }) }) }),
-              /* @__PURE__ */ jsx14("div", { className: cls10("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin5), children: /* @__PURE__ */ jsx14("div", { className: "flex flex-row items-center rounded-lg cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-800 transition-colors duration-150 py-2", children: /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400", children: /* @__PURE__ */ jsx14(ChevronsRightIcon, { size: iconSize2.small }) }) }) })
+        /* @__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__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "Expanded (280px)" }),
-            /* @__PURE__ */ jsxs14("div", { className: cls10("flex flex-col h-72 relative w-[280px] border rounded-lg overflow-hidden bg-white dark:bg-surface-900", defaultBorderMixin5), children: [
-              /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-center shrink-0 pt-4 pb-2 px-2", children: [
-                /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[40px]", children: /* @__PURE__ */ jsx14(RebaseLogo, { width: "28px", height: "28px" }) }),
-                /* @__PURE__ */ jsx14("div", { className: "flex flex-row items-center overflow-hidden transition-all duration-200 ease-in-out opacity-100 w-full ml-1", children: /* @__PURE__ */ jsx14(Typography12, { variant: "subtitle1", noWrap: true, className: "truncate", children: "Rebase" }) })
+          /* @__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__ */ jsx14("div", { className: "mt-3 flex-grow overflow-hidden", children: /* @__PURE__ */ jsxs14("div", { className: "my-2 mx-2 flex flex-col", children: [
-                /* @__PURE__ */ jsxs14("div", { className: "pl-4 pr-2 py-1 flex flex-row items-center transition-colors cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-700/50 rounded-t-lg bg-surface-50 dark:bg-surface-950/30", children: [
-                  /* @__PURE__ */ jsx14(ChevronDownIcon, { size: iconSize2.smallest, className: "text-surface-500 dark:text-surface-400 mr-1" }),
-                  /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "font-medium flex-grow line-clamp-1", children: "CONTENT" })
+              /* @__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__ */ jsx14("div", { className: "overflow-hidden bg-surface-50 dark:bg-surface-950/30 rounded-b-lg", children: [
-                  {
-                    label: "Posts",
-                    icon: /* @__PURE__ */ jsx14(FolderIcon, { size: iconSize2.small }),
-                    active: true
-                  },
-                  {
-                    label: "Authors",
-                    icon: /* @__PURE__ */ jsx14(UserIcon, { size: iconSize2.small }),
-                    active: false
-                  },
-                  {
-                    label: "Tags",
-                    icon: /* @__PURE__ */ jsx14(TagIcon, { size: iconSize2.small }),
-                    active: false
-                  }
-                ].map(({ label, icon, active }) => /* @__PURE__ */ jsxs14("div", { className: cls10(
-                  "rounded-lg truncate hover:bg-primary/5 dark:hover:bg-primary/5 text-text-primary dark:text-surface-200 hover:text-surface-900 dark:hover:text-white flex flex-row items-center pr-4 h-10 font-medium text-xs cursor-pointer",
-                  active ? "bg-primary/8 dark:bg-primary/10 text-primary dark:text-primary" : ""
+                /* @__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(
+                  "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__ */ jsx14("div", { className: cls10("shrink-0 flex items-center justify-center w-[56px] h-[40px] transition-colors duration-150", active ? "text-primary dark:text-primary" : "text-surface-500 dark:text-text-secondary-dark"), children: icon }),
-                  /* @__PURE__ */ jsx14("div", { className: "text-text-primary dark:text-surface-200 font-inherit truncate", children: label.toUpperCase() })
+                  /* @__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 })
                 ] }, label)) })
               ] }) }),
-              /* @__PURE__ */ jsx14("div", { className: cls10("shrink-0 mt-auto border-t px-2 py-2", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-center rounded-lg cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-800 transition-colors duration-150 py-2", children: [
-                /* @__PURE__ */ jsx14("div", { className: "shrink-0 flex items-center justify-center w-[56px] h-[24px] text-surface-500 dark:text-surface-400", children: /* @__PURE__ */ jsx14(ChevronsLeftIcon, { size: iconSize2.small }) }),
-                /* @__PURE__ */ jsx14("div", { className: "overflow-hidden transition-all duration-200 ease-in-out opacity-100 w-auto", children: /* @__PURE__ */ jsx14(Typography12, { variant: "body2", className: "text-surface-500 dark:text-surface-400 select-none whitespace-nowrap", children: "Collapse" }) })
+              /* @__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__ */ jsxs14(SectionBlock, { id: "appbar", title: "App Bar \u2014 DefaultAppBar.tsx", children: [
-        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs16(SectionBlock, { id: "appbar", title: "App Bar \u2014 DefaultAppBar.tsx", children: [
+        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "Fixed at top (",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "h-16 absolute top-0" }),
+          /* @__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__ */ jsx14("code", { className: "font-mono text-xs", children: "Menu" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Menu" }),
           "."
         ] }),
-        /* @__PURE__ */ jsxs14("div", { className: cls10("w-full h-16 flex flex-row gap-2 px-4 items-center border rounded-lg relative", defaultBorderMixin5), children: [
-          /* @__PURE__ */ jsx14("div", { className: "mr-8 hidden lg:block", children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-row gap-2 items-center", children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: "/" }),
-            /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-center gap-2 whitespace-nowrap", children: [
-              /* @__PURE__ */ jsx14(Typography12, { variant: "body2", children: "Posts" }),
-              /* @__PURE__ */ jsx14("span", { className: "text-xs text-surface-accent-500 dark:text-surface-accent-400 bg-surface-100 dark:bg-surface-700 px-1 py-0 rounded", children: "42" })
+        /* @__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__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: "/" }),
-            /* @__PURE__ */ jsx14("div", { className: "flex flex-row items-center gap-2 whitespace-nowrap", children: /* @__PURE__ */ jsx14(Typography12, { variant: "body2", children: "My Post" }) })
+            /* @__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__ */ jsx14("div", { className: "grow" }),
-          /* @__PURE__ */ jsxs14("div", { className: cls10("mr-2 hidden sm:flex bg-surface-100 dark:bg-surface-950 rounded-lg p-0.5 border", defaultBorderMixin5), children: [
-            /* @__PURE__ */ jsx14("button", { className: cls10("px-3 py-1 text-xs font-semibold rounded-md transition-all", "bg-white dark:bg-surface-900 shadow-sm text-primary dark:text-primary-400"), children: "Content" }),
-            /* @__PURE__ */ jsx14("button", { className: cls10("px-3 py-1 text-xs font-semibold rounded-md transition-all", "text-surface-500 hover:text-surface-900 dark:hover:text-white"), children: "Studio" })
+          /* @__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__ */ jsxs14(Menu, { trigger: /* @__PURE__ */ jsx14(IconButton4, { color: "inherit", children: /* @__PURE__ */ jsx14(MoonIcon, {}) }), children: [
-            /* @__PURE__ */ jsxs14(MenuItem, { children: [
-              /* @__PURE__ */ jsx14(MoonIcon, { size: iconSize2.smallest }),
+          /* @__PURE__ */ jsxs16(Menu, { trigger: /* @__PURE__ */ jsx16(IconButton5, { color: "inherit", children: /* @__PURE__ */ jsx16(MoonIcon, {}) }), children: [
+            /* @__PURE__ */ jsxs16(MenuItem, { children: [
+              /* @__PURE__ */ jsx16(MoonIcon, { size: iconSize3.smallest }),
               " Dark"
             ] }),
-            /* @__PURE__ */ jsxs14(MenuItem, { children: [
-              /* @__PURE__ */ jsx14(SunIcon, { size: iconSize2.smallest }),
+            /* @__PURE__ */ jsxs16(MenuItem, { children: [
+              /* @__PURE__ */ jsx16(SunIcon, { size: iconSize3.smallest }),
               " Light"
             ] }),
-            /* @__PURE__ */ jsxs14(MenuItem, { children: [
-              /* @__PURE__ */ jsx14(SunMoonIcon, { size: iconSize2.smallest }),
+            /* @__PURE__ */ jsxs16(MenuItem, { children: [
+              /* @__PURE__ */ jsx16(SunMoonIcon, { size: iconSize3.smallest }),
               " System"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs14(Menu, { trigger: /* @__PURE__ */ jsx14(Avatar, { children: "A" }), children: [
-            /* @__PURE__ */ jsxs14("div", { className: "px-4 py-2 mb-2", children: [
-              /* @__PURE__ */ jsx14(Typography12, { variant: "body1", color: "secondary", children: "Alice Johnson" }),
-              /* @__PURE__ */ jsx14(Typography12, { variant: "body2", color: "secondary", children: "alice@example.com" })
+          /* @__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__ */ jsxs14(MenuItem, { children: [
-              /* @__PURE__ */ jsx14(SettingsIcon2, {}),
+            /* @__PURE__ */ jsxs16(MenuItem, { children: [
+              /* @__PURE__ */ jsx16(SettingsIcon3, {}),
               " Account Settings"
             ] }),
-            /* @__PURE__ */ jsxs14(MenuItem, { children: [
-              /* @__PURE__ */ jsx14(LogOutIcon, {}),
+            /* @__PURE__ */ jsxs16(MenuItem, { children: [
+              /* @__PURE__ */ jsx16(LogOutIcon, {}),
               " Log Out"
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs14(SectionBlock, { id: "tabs", title: "Tabs \u2014 Tabs.tsx", children: [
-        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs16(SectionBlock, { id: "tabs", title: "Tabs \u2014 Tabs.tsx", children: [
+        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "All editor components use ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: 'variant="boxy"' }),
+          /* @__PURE__ */ jsx16("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__ */ jsxs14("div", { className: "flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: 'variant="default"' }),
-            /* @__PURE__ */ jsxs14(Tabs, { value: "tab1", onValueChange: () => {
+        /* @__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: () => {
             }, children: [
-              /* @__PURE__ */ jsx14(Tab, { value: "tab1", children: "Schema" }),
-              /* @__PURE__ */ jsx14(Tab, { value: "tab2", children: "Snippets" }),
-              /* @__PURE__ */ jsx14(Tab, { value: "tab3", children: "History" })
+              /* @__PURE__ */ jsx16(Tab, { value: "tab1", children: "Schema" }),
+              /* @__PURE__ */ jsx16(Tab, { value: "tab2", children: "Snippets" }),
+              /* @__PURE__ */ jsx16(Tab, { value: "tab3", children: "History" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: 'variant="boxy" (Editor Standard)' }),
-            /* @__PURE__ */ jsxs14("div", { className: cls10("border rounded-lg overflow-hidden w-[320px]", defaultBorderMixin5), children: [
-              /* @__PURE__ */ jsxs14(Tabs, { value: "schema", onValueChange: () => {
-              }, variant: "boxy", className: "border-b border-surface-200 dark:border-surface-950", children: [
-                /* @__PURE__ */ jsx14(Tab, { value: "schema", children: "Schema" }),
-                /* @__PURE__ */ jsx14(Tab, { value: "snippets", children: "Snippets" }),
-                /* @__PURE__ */ jsx14(Tab, { value: "history", 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: () => {
+              }, 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__ */ jsxs14("div", { className: cls10("p-3 border-b flex justify-between items-center bg-surface-50 dark:bg-surface-900", defaultBorderMixin5), children: [
-                /* @__PURE__ */ jsx14(Typography12, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "TABLES" }),
-                /* @__PURE__ */ jsx14(IconButton4, { size: "small", children: /* @__PURE__ */ jsx14(SettingsIcon2, { size: iconSize2.smallest }) })
+              /* @__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__ */ jsx14("div", { className: "p-2 h-24", children: /* @__PURE__ */ jsx14(Typography12, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark italic p-2", children: "Tab content area\u2026" }) })
+              /* @__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__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Toolbar Tabs (boxy, inline with controls)" }),
-            /* @__PURE__ */ jsxs14("div", { className: cls10("border rounded-lg overflow-hidden flex items-center justify-between pr-2 bg-white dark:bg-surface-950", defaultBorderMixin5), children: [
-              /* @__PURE__ */ jsxs14("div", { className: "flex items-center", children: [
-                /* @__PURE__ */ jsxs14(Tabs, { value: "query1", onValueChange: () => {
+          /* @__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: () => {
                 }, variant: "boxy", className: "w-[unset] flex-shrink-0", children: [
-                  /* @__PURE__ */ jsxs14(Tab, { value: "query1", className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx14("svg", { className: "w-3.5 h-3.5 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("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__ */ 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" }) }),
                     "Query 1"
                   ] }),
-                  /* @__PURE__ */ jsxs14(Tab, { value: "query2", className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx14("svg", { className: "w-3.5 h-3.5 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("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__ */ 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" }) }),
                     "Query 2"
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx14(IconButton4, { size: "small", className: "ml-2 flex-shrink-0", children: /* @__PURE__ */ jsx14(PlusIcon, {}) })
+                /* @__PURE__ */ jsx16(IconButton5, { size: "small", className: "ml-2 flex-shrink-0", children: /* @__PURE__ */ jsx16(PlusIcon, {}) })
               ] }),
-              /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx14(Button8, { variant: "text", size: "small", children: "Explain" }),
-                /* @__PURE__ */ jsx14("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950" }),
-                /* @__PURE__ */ jsx14(Button8, { size: "small", color: "primary", children: "Run" })
+              /* @__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__ */ jsxs14(SectionBlock, { id: "editor-sidebar", title: "Editor Sidebar \u2014 Harmonized Pattern", children: [
-        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs16(SectionBlock, { id: "editor-sidebar", title: "Editor Sidebar \u2014 Harmonized Pattern", children: [
+        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "All studio editor components (SQL, JS, RLS, Collection) share the same underlying sidebar foundation:",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: 'Tabs variant="boxy"' }),
+          /* @__PURE__ */ jsx16("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__ */ jsx14("code", { className: "font-mono text-xs", children: "px-3 py-2" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "px-3 py-2" }),
           ", ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "text-sm" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "text-sm" }),
           ") suitable for primary navigation."
         ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "flex gap-6 flex-wrap", children: [
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "SQL Editor Sidebar" }),
-            /* @__PURE__ */ jsxs14("div", { className: cls10("flex flex-col h-72 w-[240px] border rounded-lg overflow-hidden", defaultBorderMixin5), children: [
-              /* @__PURE__ */ jsxs14(Tabs, { value: "schema", onValueChange: () => {
-              }, variant: "boxy", className: "border-b border-surface-200 dark:border-surface-950", children: [
-                /* @__PURE__ */ jsx14(Tab, { value: "schema", children: "Schema" }),
-                /* @__PURE__ */ jsx14(Tab, { value: "snippets", children: "Snippets" }),
-                /* @__PURE__ */ jsx14(Tab, { value: "history", children: "History" })
+        /* @__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: () => {
+              }, 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__ */ jsxs14("div", { className: cls10("p-3 border-b flex justify-between items-center bg-surface-50 dark:bg-surface-900", defaultBorderMixin5), children: [
-                /* @__PURE__ */ jsx14(Typography12, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-secondary dark:text-text-secondary-dark", children: "TABLES" }),
-                /* @__PURE__ */ jsx14(IconButton4, { size: "small", children: /* @__PURE__ */ jsx14(SettingsIcon2, { size: iconSize2.smallest }) })
+              /* @__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__ */ jsx14("div", { className: "flex-grow overflow-y-auto no-scrollbar p-1", children: /* @__PURE__ */ jsxs14("div", { className: "mb-2", children: [
-                /* @__PURE__ */ jsxs14("div", { className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors", children: [
-                  /* @__PURE__ */ jsx14("svg", { className: "w-3 h-3 mr-1 rotate-90", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx14("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__ */ jsx14(Typography12, { variant: "body2", className: "text-text-primary dark:text-text-primary-dark font-medium text-xs", children: "public" })
+              /* @__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__ */ jsx14("div", { className: "ml-3 mt-1 space-y-1", children: ["users", "posts", "comments"].map((t) => /* @__PURE__ */ jsxs14("div", { className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors group", children: [
-                  /* @__PURE__ */ jsx14("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__ */ jsx14("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__ */ jsx14(Typography12, { variant: "body2", className: "text-text-secondary dark:text-text-secondary-dark text-xs truncate", children: t })
+                /* @__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 })
                 ] }, t)) })
               ] }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "RLS Editor Sidebar" }),
-            /* @__PURE__ */ jsxs14("div", { className: cls10("flex flex-col h-72 w-[240px] border rounded-lg overflow-hidden", defaultBorderMixin5), children: [
-              /* @__PURE__ */ jsxs14(Tabs, { value: "tables", onValueChange: () => {
-              }, variant: "boxy", className: "border-b border-surface-200 dark:border-surface-950", children: [
-                /* @__PURE__ */ jsx14(Tab, { value: "tables", children: "Tables" }),
-                /* @__PURE__ */ jsx14(Tab, { value: "info", children: "Info" })
+          /* @__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: () => {
+              }, variant: "boxy", className: "border-b border-hairline", children: [
+                /* @__PURE__ */ jsx16(Tab, { value: "tables", children: "Tables" }),
+                /* @__PURE__ */ jsx16(Tab, { value: "info", children: "Info" })
               ] }),
-              /* @__PURE__ */ jsxs14("div", { className: cls10("p-3 border-b flex justify-between items-center bg-surface-50 dark:bg-surface-900", defaultBorderMixin5), children: [
-                /* @__PURE__ */ jsx14(Typography12, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "RLS" }),
-                /* @__PURE__ */ jsx14(IconButton4, { size: "small", children: /* @__PURE__ */ jsx14(SettingsIcon2, { size: iconSize2.smallest }) })
+              /* @__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__ */ jsx14("div", { className: "flex-grow overflow-y-auto no-scrollbar p-1", children: /* @__PURE__ */ jsxs14("div", { className: "mb-2", children: [
-                /* @__PURE__ */ jsxs14("div", { className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors", children: [
-                  /* @__PURE__ */ jsx14("svg", { className: "w-3 h-3 mr-1 rotate-90", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx14("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__ */ jsx14(Typography12, { variant: "body2", className: "text-text-primary dark:text-text-primary-dark font-medium text-xs", children: "public" })
+              /* @__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__ */ jsx14("div", { className: "ml-3 mt-1 space-y-0.5", children: [{
+                /* @__PURE__ */ jsx16("div", { className: "ml-3 mt-1 space-y-0.5", children: [{
                   name: "users",
                   enabled: true
                 }, {
@@ -3160,334 +3719,352 @@ function UIReferenceView() {
                 }, {
                   name: "sessions",
                   enabled: false
-                }].map((t) => /* @__PURE__ */ jsxs14("div", { className: cls10("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-100 dark:hover:bg-surface-900 text-text-secondary"), children: [
-                  /* @__PURE__ */ jsx14("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__ */ jsx14("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__ */ jsx14(Typography12, { variant: "body2", className: "text-xs truncate flex-1", children: t.name }),
-                  /* @__PURE__ */ jsx14("div", { className: cls10("w-1.5 h-1.5 rounded-full shrink-0", t.enabled ? "bg-green-500" : "bg-orange-400 opacity-50") })
+                }].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") })
                 ] }, t.name)) })
               ] }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "Collection Editor Sidebar" }),
-            /* @__PURE__ */ jsxs14("div", { className: cls10("flex flex-col h-72 w-[240px] border rounded-lg overflow-hidden bg-white dark:bg-surface-950", defaultBorderMixin5), children: [
-              /* @__PURE__ */ jsxs14("div", { className: cls10("p-3 border-b flex justify-between items-center bg-surface-50 dark:bg-surface-900", defaultBorderMixin5), children: [
-                /* @__PURE__ */ jsx14(Typography12, { variant: "caption", className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "COLLECTIONS" }),
-                /* @__PURE__ */ jsx14(IconButton4, { size: "small", children: /* @__PURE__ */ jsx14(PlusIcon, { size: iconSize2.smallest }) })
+          /* @__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__ */ jsx14("div", { className: "flex-grow overflow-y-auto no-scrollbar p-2 space-y-0.5", children: [{ name: "Authors" }, {
+              /* @__PURE__ */ jsx16("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__ */ jsxs14("div", { className: cls10("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-100 dark:hover:bg-surface-900 text-text-secondary dark:text-text-secondary-dark"), children: [
-                /* @__PURE__ */ jsx14(FolderIcon, { size: iconSize2.small, className: cls10(c.selected ? "text-primary dark:text-primary-light" : "text-text-secondary dark:text-text-secondary-dark") }),
-                /* @__PURE__ */ jsx14("span", { className: "truncate flex-1", children: c.name })
+              }, { 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 })
               ] }, c.name)) })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs14(SectionBlock, { id: "empty-states", title: "Empty States \u2014 Canonical Pattern", children: [
-        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs16(SectionBlock, { id: "empty-states", title: "Empty States \u2014 Canonical Pattern", children: [
+        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "All empty / placeholder states share the same layout: a centered ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "flex-col" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "flex-col" }),
           " container with ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: 'Typography variant="label"' }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: 'Typography variant="label"' }),
           " for the message and a ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Button" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Button" }),
           " with ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "AddIcon" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "AddIcon" }),
           " for the primary action. Sources: ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "CollectionPropertiesEditorForm" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "CollectionPropertiesEditorForm" }),
           ", ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "CollectionsStudioView" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "CollectionsStudioView" }),
           ", ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "CollectionStudioView" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "CollectionStudioView" }),
           "."
         ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "flex gap-6 flex-wrap", children: [
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "Property Editor (no selection)" }),
-            /* @__PURE__ */ jsx14("div", { className: cls10("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
-              /* @__PURE__ */ jsx14(Typography12, { variant: "label", className: "text-center px-4", children: "Select a property to edit it" }),
-              /* @__PURE__ */ jsxs14(Button8, { children: [
-                /* @__PURE__ */ jsx14(PlusIcon, {}),
+        /* @__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, {}),
                 "Add new property"
               ] })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "Property Editor (empty collection)" }),
-            /* @__PURE__ */ jsx14("div", { className: cls10("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
-              /* @__PURE__ */ jsx14(Typography12, { variant: "label", className: "text-center px-4", children: "Now you can add your first property" }),
-              /* @__PURE__ */ jsxs14(Button8, { children: [
-                /* @__PURE__ */ jsx14(PlusIcon, {}),
+          /* @__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, {}),
                 "Add new property"
               ] })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-1", children: "Collection ListIcon (no selection)" }),
-            /* @__PURE__ */ jsx14("div", { className: cls10("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center justify-center h-full gap-4", children: [
-              /* @__PURE__ */ jsx14(Typography12, { variant: "label", className: "text-center px-4", children: "Select a collection or create a new one to start editing" }),
-              /* @__PURE__ */ jsxs14(Button8, { children: [
-                /* @__PURE__ */ jsx14(PlusIcon, {}),
+          /* @__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, {}),
                 "Add new collection"
               ] })
             ] }) })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs14(SectionBlock, { id: "typography", title: "Typography", children: [
-        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
-          "All variants from ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Typography" }),
-          ". Colors: primary (default), secondary, disabled, error."
+      /* @__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" }),
+          " is the default and paints ",
+          /* @__PURE__ */ jsx16("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" }),
+          " 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" }),
+          " and ",
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "error" }),
+          " exist for destructive confirmations and the marketing site, not for the panel's chrome."
         ] }),
-        /* @__PURE__ */ jsx14("div", { className: "flex flex-col gap-3", children: ["h1", "h2", "h3", "h4", "h5", "h6", "lead", "subtitle1", "subtitle2", "body1", "body2", "caption", "label", "button"].map((v) => /* @__PURE__ */ jsxs14("div", { className: cls10("flex items-baseline gap-4 border-b pb-3 last:border-0", defaultBorderMixin5), children: [
-          /* @__PURE__ */ jsx14("span", { className: "w-24 shrink-0 text-xs text-surface-400 font-mono", children: v }),
-          /* @__PURE__ */ jsx14(Typography12, { variant: v, component: "p", children: "The quick brown fox jumps over the lazy dog" })
-        ] }, v)) }),
-        /* @__PURE__ */ jsx14("div", { className: "flex gap-4 flex-wrap mt-4", children: ["primary", "secondary", "disabled", "error"].map((c) => /* @__PURE__ */ jsxs14(Typography12, { color: c, children: [
-          'color="',
-          c,
-          '"'
-        ] }, c)) }),
-        /* @__PURE__ */ jsxs14("div", { className: cls10("mt-8 pt-6 border-t", defaultBorderMixin5), children: [
-          /* @__PURE__ */ jsx14(Typography12, { variant: "subtitle2", className: "block mb-1", children: "Data tiers" }),
-          /* @__PURE__ */ jsxs14(Typography12, { 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__ */ jsx14("code", { className: "font-mono text-xs", children: "mono" }),
-            " and",
-            " ",
-            /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "stat" }),
-            " both carry",
-            " ",
-            /* @__PURE__ */ jsx14("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."
+        /* @__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: [
+              '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" })
+            ] })
+          ] }, 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__ */ jsx14("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__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "micro", component: "div", color: "secondary", className: "block", children: label }),
-            /* @__PURE__ */ jsx14(Typography12, { variant: "mono", component: "div", className: "block mt-1 text-sm", children: value })
-          ] }, label)) }),
-          /* @__PURE__ */ jsxs14("div", { className: "mt-6", children: [
-            /* @__PURE__ */ jsx14("span", { className: "text-xs text-surface-400 font-mono", children: "stat" }),
-            /* @__PURE__ */ jsx14(Typography12, { variant: "stat", component: "div", className: "block mt-1", children: "1,284" })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx14(SectionBlock, { id: "buttons", title: "Buttons", children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-6", children: [
-        ["filled", "text"].map((variant) => /* @__PURE__ */ jsxs14("div", { children: [
-          /* @__PURE__ */ jsxs14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: [
-            'variant="',
-            variant,
-            '"'
+          /* @__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: [
+              [
+                { 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)),
+              /* @__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__ */ 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__ */ 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__ */ jsxs14("div", { className: "flex flex-wrap gap-3 items-center", children: [
-            ["primary", "secondary", "text", "error", "neutral"].map((color) => /* @__PURE__ */ jsx14(Button8, { variant, color, children: color.charAt(0).toUpperCase() + color.slice(1) }, color)),
-            /* @__PURE__ */ jsx14(Button8, { variant, disabled: true, children: "Disabled" })
-          ] })
-        ] }, variant)),
-        /* @__PURE__ */ jsxs14("div", { children: [
-          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "sizes" }),
-          /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap items-end gap-3", children: ["small", "medium", "large", "xl", "2xl"].map((s) => /* @__PURE__ */ jsx14(Button8, { size: s, children: s.charAt(0).toUpperCase() + s.slice(1) }, s)) })
-        ] }),
-        /* @__PURE__ */ jsxs14("div", { children: [
-          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "IconButton \u2014 sizes" }),
-          /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap gap-3 items-end", children: [
-            [
-              { s: "smallest", icon: /* @__PURE__ */ jsx14(PencilIcon2, { size: 14 }) },
-              { s: "small", icon: /* @__PURE__ */ jsx14(PencilIcon2, { size: 16 }) },
-              { s: "medium", icon: /* @__PURE__ */ jsx14(PencilIcon2, { size: 20 }) },
-              { s: "large", icon: /* @__PURE__ */ jsx14(PencilIcon2, { size: 24 }) }
-            ].map(({ s, icon }) => /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-1", children: [
-              /* @__PURE__ */ jsx14(IconButton4, { size: s, children: icon }),
-              /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: s.charAt(0).toUpperCase() + s.slice(1) })
-            ] }, s)),
-            /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-1", children: [
-              /* @__PURE__ */ jsx14(IconButton4, { disabled: true, children: /* @__PURE__ */ jsx14(Trash2Icon3, { size: 20 }) }),
-              /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: "Disabled" })
-            ] }),
-            /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-1", children: [
-              /* @__PURE__ */ jsx14(IconButton4, { variant: "filled", children: /* @__PURE__ */ jsx14(PlusIcon, { size: 20 }) }),
-              /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: "Filled" })
-            ] }),
-            /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-1", children: [
-              /* @__PURE__ */ jsx14(IconButton4, { shape: "square", children: /* @__PURE__ */ jsx14(SettingsIcon2, { size: 20 }) }),
-              /* @__PURE__ */ jsx14(Typography12, { 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__ */ jsxs14("div", { children: [
-          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "LoadingButton" }),
-          /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap gap-3", children: [
-            /* @__PURE__ */ jsx14(LoadingButton, { loading: true, children: "Saving\u2026" }),
-            /* @__PURE__ */ jsx14(LoadingButton, { loading: false, children: "Idle" })
-          ] })
         ] })
-      ] }) }),
-      /* @__PURE__ */ jsx14(SectionBlock, { id: "inputs", title: "Form Inputs", children: /* @__PURE__ */ jsxs14("div", { className: "grid grid-cols-12 gap-4", children: [
-        /* @__PURE__ */ jsxs14("div", { className: "col-span-12 sm:col-span-6", children: [
-          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "TextField" }),
-          /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsx14(TextField2, { label: "Default", placeholder: "Type something\u2026" }),
-            /* @__PURE__ */ jsx14(TextField2, { label: "With value", value: "Filled value", onChange: () => {
-            } }),
-            /* @__PURE__ */ jsx14(TextField2, { label: "Error state", error: true, value: "Bad value", onChange: () => {
-            } }),
-            /* @__PURE__ */ jsx14(TextField2, { label: "Disabled", disabled: true, value: "Read only", onChange: () => {
-            } }),
-            /* @__PURE__ */ jsx14(TextField2, { size: "medium", label: "Medium", placeholder: "Placeholder under the label" }),
-            /* @__PURE__ */ jsx14(TextField2, { size: "small", label: "Small", placeholder: "Placeholder under the label" }),
-            /* @__PURE__ */ jsx14(TextField2, { size: "smallest", label: "Smallest", value: "Filled value", onChange: () => {
-            } })
-          ] })
+      ] }),
+      /* @__PURE__ */ jsxs16(SectionBlock, { id: "inputs", title: "Form Inputs", children: [
+        /* @__PURE__ */ jsxs16(Typography14, { 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" }),
+          " the control (",
+          /* @__PURE__ */ jsx16("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: "small" }),
+          ", 32px. A dialog or a standalone control carries its label",
+          " ",
+          /* @__PURE__ */ jsx16("em", { children: "inside" }),
+          " as the floating ",
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "label" }),
+          " prop and is",
+          " ",
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "medium" }),
+          ", 40px. Every field has its hairline."
         ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Select" }),
-            /* @__PURE__ */ jsxs14(Select5, { label: "Status", value: "published", onValueChange: () => {
-            }, children: [
-              /* @__PURE__ */ jsx14(SelectItem5, { value: "draft", children: "Draft" }),
-              /* @__PURE__ */ jsx14(SelectItem5, { value: "published", children: "Published" }),
-              /* @__PURE__ */ jsx14(SelectItem5, { value: "archived", children: "Archived" })
+        /* @__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="small", label above' }),
+            /* @__PURE__ */ jsx16("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: "*" })
+              ] }),
+              /* @__PURE__ */ jsx16(TextField3, { size: "small", value, disabled, onChange: () => {
+              } }),
+              help && /* @__PURE__ */ jsx16(Typography14, { 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__ */ jsx16(TextField3, { 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__ */ jsx16(TextField3, { size: "small", label: "Small", placeholder: "Placeholder under the label" }),
+              /* @__PURE__ */ jsx16(TextField3, { size: "smallest", label: "Smallest", value: "Filled value", onChange: () => {
+              } }),
+              /* @__PURE__ */ jsx16(TextField3, { size: "large", label: "Large", placeholder: "The login screen only" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs14("div", { children: [
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "MultiSelect" }),
-            /* @__PURE__ */ jsxs14(MultiSelect, { label: "Roles", value: ["admin", "editor"], onValueChange: () => {
-            }, children: [
-              /* @__PURE__ */ jsx14(MultiSelectItem, { value: "admin", children: "Admin" }),
-              /* @__PURE__ */ jsx14(MultiSelectItem, { value: "editor", children: "Editor" }),
-              /* @__PURE__ */ jsx14(MultiSelectItem, { value: "viewer", children: "Viewer" })
+          /* @__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: () => {
+              }, children: [
+                /* @__PURE__ */ jsx16(SelectItem6, { value: "draft", children: "Draft" }),
+                /* @__PURE__ */ jsx16(SelectItem6, { value: "published", children: "Published" }),
+                /* @__PURE__ */ jsx16(SelectItem6, { 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: () => {
+              }, children: [
+                /* @__PURE__ */ jsx16(MultiSelectItem, { value: "admin", children: "Admin" }),
+                /* @__PURE__ */ jsx16(MultiSelectItem, { value: "editor", children: "Editor" }),
+                /* @__PURE__ */ jsx16(MultiSelectItem, { value: "viewer", children: "Viewer" })
+              ] })
             ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
-          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block font-mono", children: "Checkbox" }),
-          /* @__PURE__ */ jsxs14("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-            /* @__PURE__ */ jsx14(Checkbox3, { checked: true, onCheckedChange: () => {
-            } }),
-            /* @__PURE__ */ jsx14("span", { children: "Checked" })
           ] }),
-          /* @__PURE__ */ jsxs14("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-            /* @__PURE__ */ jsx14(Checkbox3, { checked: false, onCheckedChange: () => {
-            } }),
-            /* @__PURE__ */ jsx14("span", { children: "Unchecked" })
+          /* @__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__ */ jsx16("span", { children: "Checked" })
+            ] }),
+            /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+              /* @__PURE__ */ jsx16(Checkbox3, { checked: false, onCheckedChange: () => {
+              } }),
+              /* @__PURE__ */ jsx16("span", { children: "Unchecked" })
+            ] }),
+            /* @__PURE__ */ jsxs16("label", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx16(Checkbox3, { checked: true, disabled: true }),
+              /* @__PURE__ */ jsx16("span", { children: "Disabled" })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs14("label", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx14(Checkbox3, { checked: true, disabled: true }),
-            /* @__PURE__ */ jsx14("span", { children: "Disabled" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "col-span-12 sm:col-span-6 flex flex-col gap-3", children: [
-          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block font-mono", children: "BooleanSwitch" }),
-          /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx14(BooleanSwitch, { value: true, onValueChange: () => {
-            } }),
-            /* @__PURE__ */ jsx14("span", { children: "On" })
+          /* @__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__ */ jsx16("span", { children: "On" })
+            ] }),
+            /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx16(BooleanSwitch, { value: false, onValueChange: () => {
+              } }),
+              /* @__PURE__ */ jsx16("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__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx16(BooleanSwitch, { value: false, disabled: true }),
+              /* @__PURE__ */ jsx16("span", { children: "Disabled off" })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx14(BooleanSwitch, { value: false, onValueChange: () => {
-            } }),
-            /* @__PURE__ */ jsx14("span", { children: "Off" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "col-span-12", children: [
-          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "SearchBar" }),
-          /* @__PURE__ */ jsx14(SearchBar4, { placeholder: "Search entities\u2026" })
-        ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "col-span-12", children: [
-          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Skeleton" }),
-          /* @__PURE__ */ jsxs14("div", { className: "flex gap-4 items-center flex-wrap", children: [
-            /* @__PURE__ */ jsx14(Skeleton6, { className: "w-10 h-10 rounded-full" }),
-            /* @__PURE__ */ jsx14(Skeleton6, { className: "w-48 h-4 rounded" }),
-            /* @__PURE__ */ jsx14(Skeleton6, { className: "w-32 h-8 rounded-md" })
+          /* @__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__ */ 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__ */ jsxs14(SectionBlock, { id: "chips-alerts", title: "Chips & Alerts", children: [
-        /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Chip \u2014 colorScheme" }),
-        /* @__PURE__ */ jsx14("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__ */ jsx14(Chip7, { colorScheme: s, children: s }, s)) }),
-        /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Chip \u2014 sizes" }),
-        /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap gap-2 items-center mb-4", children: ["smallest", "small", "medium", "large"].map((sz) => /* @__PURE__ */ jsx14(Chip7, { colorScheme: "blue", size: sz, children: sz }, sz)) }),
-        /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Chip \u2014 outlined, error, clickable, icon" }),
-        /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap gap-2 items-center mb-4", children: [
-          /* @__PURE__ */ jsx14(Chip7, { colorScheme: "red", outlined: true, children: "Outlined Red" }),
-          /* @__PURE__ */ jsx14(Chip7, { colorScheme: "blue", outlined: true, children: "Outlined Blue" }),
-          /* @__PURE__ */ jsx14(Chip7, { error: true, children: "Error" }),
-          /* @__PURE__ */ jsx14(Chip7, { error: true, outlined: true, children: "Error Outlined" }),
-          /* @__PURE__ */ jsx14(Chip7, { onClick: () => {
+      ] }),
+      /* @__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: () => {
           }, children: "Clickable" }),
-          /* @__PURE__ */ jsx14(Chip7, { icon: /* @__PURE__ */ jsx14(TagIcon, { size: 12 }), colorScheme: "teal", children: "With Icon" }),
-          /* @__PURE__ */ jsx14(Chip7, { children: "Default (no scheme)" }),
-          /* @__PURE__ */ jsx14(Chip7, { outlined: true, children: "Default Outlined" })
+          /* @__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__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "FilterChip" }),
-        /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap gap-2 items-center mb-6", children: [
-          /* @__PURE__ */ jsx14(FilterChip2, { active: true, children: "Active" }),
-          /* @__PURE__ */ jsx14(FilterChip2, { children: "Inactive" }),
-          /* @__PURE__ */ jsx14(FilterChip2, { icon: /* @__PURE__ */ jsx14(FilterIcon, { size: 12 }), active: true, children: "With Icon" }),
-          /* @__PURE__ */ jsx14(FilterChip2, { size: "small", children: "Small" }),
-          /* @__PURE__ */ jsx14(FilterChip2, { disabled: true, children: "Disabled" })
+        /* @__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__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Alert \u2014 color variants" }),
-        /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx14(Alert3, { color: "info", children: "Info \u2014 informational message" }),
-          /* @__PURE__ */ jsx14(Alert3, { color: "success", children: "Success \u2014 operation completed" }),
-          /* @__PURE__ */ jsx14(Alert3, { color: "warning", children: "Warning \u2014 attention required" }),
-          /* @__PURE__ */ jsx14(Alert3, { color: "error", children: "Error \u2014 something went wrong" })
+        /* @__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__ */ jsxs14("div", { className: "mt-4", children: [
-          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "Separator" }),
-          /* @__PURE__ */ jsx14("div", { children: "Above" }),
-          /* @__PURE__ */ jsx14(Separator5, { orientation: "horizontal" }),
-          /* @__PURE__ */ jsx14("div", { children: "Below" })
+        /* @__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__ */ jsxs14("div", { className: "mt-4", children: [
-          /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", className: "block mb-2 font-mono", children: "CircularProgress" }),
-          /* @__PURE__ */ jsx14("div", { className: "flex gap-6 items-center", children: ["small", "medium", "large"].map((s) => /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-1", children: [
-            /* @__PURE__ */ jsx14(CircularProgress, { size: s }),
-            /* @__PURE__ */ jsx14(Typography12, { variant: "caption", color: "secondary", children: s })
+        /* @__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 })
           ] }, s)) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs14(SectionBlock, { id: "users", title: "Management Screen \u2014 Alert + Table + Chip", children: [
-        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__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: [
           "Canonical layout for an admin management screen: an ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Alert" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Alert" }),
           " with an ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "action" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "action" }),
           ", a header row, and a plain ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Table" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Table" }),
           " with ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Chip" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Chip" }),
           "s. Illustrative mock \u2014 not tied to a specific screen."
         ] }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(
           Alert3,
           {
             color: "warning",
             outerClassName: "mb-4",
-            action: /* @__PURE__ */ jsx14(Button8, { children: "Make me admin" }),
+            action: /* @__PURE__ */ jsx16(Button9, { children: "Make me admin" }),
             children: "No admin users exist. You can make yourself an admin."
           }
         ),
-        /* @__PURE__ */ jsxs14("div", { className: "flex items-center mt-12", children: [
-          /* @__PURE__ */ jsx14(Typography12, { gutterBottom: true, variant: "h4", className: "grow", component: "h4", children: "Users" }),
-          /* @__PURE__ */ jsx14(Button8, { startIcon: /* @__PURE__ */ jsx14(PlusIcon, {}), children: "Add user" })
+        /* @__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__ */ jsx14("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs14(Table2, { className: "w-full", children: [
-          /* @__PURE__ */ jsxs14(TableHeader2, { children: [
-            /* @__PURE__ */ jsx14(TableCell2, { header: true, className: "truncate w-16" }),
-            /* @__PURE__ */ jsx14(TableCell2, { header: true, children: "Email" }),
-            /* @__PURE__ */ jsx14(TableCell2, { header: true, children: "Name" }),
-            /* @__PURE__ */ jsx14(TableCell2, { header: true, children: "Roles" })
+        /* @__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__ */ jsx14(TableBody2, { children: [
+          /* @__PURE__ */ jsx16(TableBody2, { children: [
             {
               uid: "1",
               email: "alice@example.com",
@@ -3514,116 +4091,113 @@ function UIReferenceView() {
               displayName: "Carol White",
               roles: []
             }
-          ].map((user) => /* @__PURE__ */ jsxs14(TableRow2, { children: [
-            /* @__PURE__ */ jsx14(TableCell2, { style: { width: "64px" }, children: /* @__PURE__ */ jsx14(Tooltip3, { asChild: true, title: "Delete this user", children: /* @__PURE__ */ jsx14(IconButton4, { size: "small", children: /* @__PURE__ */ jsx14(Trash2Icon3, {}) }) }) }),
-            /* @__PURE__ */ jsx14(TableCell2, { children: user.email }),
-            /* @__PURE__ */ jsx14(TableCell2, { className: "font-medium", children: user.displayName }),
-            /* @__PURE__ */ jsx14(TableCell2, { children: /* @__PURE__ */ jsx14("div", { className: "flex flex-wrap gap-2", children: user.roles.map((role) => /* @__PURE__ */ jsx14(Chip7, { colorScheme: role.isAdmin ? "purple" : "blue", size: "small", children: role.name }, role.id)) }) })
+          ].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, { 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)) }) })
           ] }, user.uid)) })
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxs14(SectionBlock, { id: "user-dialog", title: "Form Dialog \u2014 grid + MultiSelect + LoadingButton", children: [
-        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__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: [
           "Canonical form-in-a-card layout: ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "grid grid-cols-12 gap-4" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "grid grid-cols-12 gap-4" }),
           " for the fields, a ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "MultiSelect" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "MultiSelect" }),
           ", and a ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "LoadingButton" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "LoadingButton" }),
           " to submit. Illustrative mock \u2014 not tied to a specific screen."
         ] }),
-        /* @__PURE__ */ jsxs14("div", { className: `rounded-lg border w-full max-w-xl ${defaultBorderMixin5}`, children: [
-          /* @__PURE__ */ jsx14("div", { className: "px-6 pt-6 pb-2", children: /* @__PURE__ */ jsx14(Typography12, { variant: "h4", children: "User" }) }),
-          /* @__PURE__ */ jsx14("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs14("div", { className: "grid grid-cols-12 gap-4", children: [
-            /* @__PURE__ */ jsx14("div", { className: "col-span-12", children: /* @__PURE__ */ jsx14(TextField2, { name: "displayName", required: true, value: "Alice Johnson", onChange: () => {
+        /* @__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: () => {
             }, label: "Name" }) }),
-            /* @__PURE__ */ jsx14("div", { className: "col-span-12", children: /* @__PURE__ */ jsx14(TextField2, { required: true, name: "email", value: "alice@example.com", onChange: () => {
+            /* @__PURE__ */ jsx16("div", { className: "col-span-12", children: /* @__PURE__ */ jsx16(TextField3, { required: true, name: "email", value: "alice@example.com", onChange: () => {
             }, label: "Email", disabled: true }) }),
-            /* @__PURE__ */ jsx14("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs14(MultiSelect, { className: "w-full", label: "Roles", value: ["admin"], onValueChange: () => {
+            /* @__PURE__ */ jsx16("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs16(MultiSelect, { className: "w-full", label: "Roles", value: ["admin"], onValueChange: () => {
             }, children: [
-              /* @__PURE__ */ jsx14(MultiSelectItem, { value: "admin", children: "Admin" }),
-              /* @__PURE__ */ jsx14(MultiSelectItem, { value: "editor", children: "Editor" }),
-              /* @__PURE__ */ jsx14(MultiSelectItem, { value: "viewer", children: "Viewer" })
+              /* @__PURE__ */ jsx16(MultiSelectItem, { value: "admin", children: "Admin" }),
+              /* @__PURE__ */ jsx16(MultiSelectItem, { value: "editor", children: "Editor" }),
+              /* @__PURE__ */ jsx16(MultiSelectItem, { value: "viewer", children: "Viewer" })
             ] }) })
           ] }) }),
-          /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-end gap-2 px-6 pb-6", children: [
-            /* @__PURE__ */ jsx14(Button8, { variant: "text", children: "Cancel" }),
-            /* @__PURE__ */ jsx14(LoadingButton, { variant: "filled", loading: false, children: "Update" })
+          /* @__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__ */ jsxs14(SectionBlock, { wide: true, id: "crm-dashboard", title: "CRM Dashboard \u2014 CrmDashboardDemo", children: [
-        /* @__PURE__ */ jsx14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: "A real-world showcase of a complex dashboard home page incorporating Rebase design language." }),
-        /* @__PURE__ */ jsx14("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx14(CrmDashboardDemo, {}) })
+      /* @__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__ */ jsxs14(SectionBlock, { wide: true, id: "collection-table", title: "Collection Table", children: [
-        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs16(SectionBlock, { wide: true, id: "collection-table", title: "Collection Table", children: [
+        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "Sample data collection rendered as a sortable, searchable, filterable table with row selection. Uses ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Table" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Table" }),
           ", ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Chip" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Chip" }),
           ",",
           " ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "SearchBar" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "SearchBar" }),
           ", ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Select" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Select" }),
           ",",
           " ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Checkbox" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Checkbox" }),
           "."
         ] }),
-        /* @__PURE__ */ jsx14("div", { className: "w-full", children: /* @__PURE__ */ jsx14(CollectionTableDemo, {}) })
+        /* @__PURE__ */ jsx16("div", { className: "w-full", children: /* @__PURE__ */ jsx16(CollectionTableDemo, {}) })
       ] }),
-      /* @__PURE__ */ jsxs14(SectionBlock, { wide: true, id: "card-view", title: "Card View", children: [
-        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs16(SectionBlock, { wide: true, id: "card-view", title: "Card View", children: [
+        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "Grid of entity cards with thumbnail area, progress bar, status/priority chips, and assignee. Uses ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Card" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Card" }),
           ", ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "Chip" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "Chip" }),
           ",",
           " ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "ToggleButtonGroup" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "ToggleButtonGroup" }),
           ", ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "SearchBar" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "SearchBar" }),
           "."
         ] }),
-        /* @__PURE__ */ jsx14("div", { className: "w-full", children: /* @__PURE__ */ jsx14(CardViewDemo, {}) })
+        /* @__PURE__ */ jsx16("div", { className: "w-full", children: /* @__PURE__ */ jsx16(CardViewDemo, {}) })
       ] }),
-      /* @__PURE__ */ jsxs14(SectionBlock, { wide: true, id: "kanban-board", title: "Kanban Board", children: [
-        /* @__PURE__ */ jsxs14(Typography12, { variant: "body2", color: "secondary", className: "mb-4", children: [
+      /* @__PURE__ */ jsxs16(SectionBlock, { wide: true, id: "kanban-board", title: "Kanban Board", children: [
+        /* @__PURE__ */ jsxs16(Typography14, { variant: "body2", color: "secondary", className: "mb-4", children: [
           "Drag-and-drop kanban board with four status columns. Uses ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "KanbanView" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "KanbanView" }),
           ", ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "BoardItem" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "BoardItem" }),
           ",",
           " ",
-          /* @__PURE__ */ jsx14("code", { className: "font-mono text-xs", children: "BoardItemViewProps" }),
+          /* @__PURE__ */ jsx16("code", { className: "font-mono text-xs", children: "BoardItemViewProps" }),
           "."
         ] }),
-        /* @__PURE__ */ jsx14("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx14(KanbanBoardDemo, {}) })
+        /* @__PURE__ */ jsx16("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx16(KanbanBoardDemo, {}) })
       ] })
     ] })
   ] });
 }
-function SectionBlock({ id, title, wide, children }) {
-  return (
-    // `max-w-5xl` and `border-b` used to share this element, and they cannot.
-    // Several mocks here are app-scale and intrinsically wider than 64rem
-    // (the CRM dashboard reaches 1483px), so the section's own rule stopped
-    // at 1264px while its content ran past it — every such section read as a
-    // broken edge.
-    //
-    // Split instead: the SECTION spans the column, so its rule always
-    // reaches its own edges; the CONTENT keeps a measure, so a form column
-    // never stretches to 700px on a wide monitor. `wide` opts the app-scale
-    // mocks out of the measure — they pair it with `overflow-x-auto` so they
-    // scroll inside themselves rather than pushing the page.
-    /* @__PURE__ */ jsx14("section", { id, className: cls10("px-6 py-8 border-b scroll-mt-0", defaultBorderMixin5), children: /* @__PURE__ */ jsxs14("div", { className: wide ? void 0 : "max-w-5xl", children: [
-      /* @__PURE__ */ jsx14(Typography12, { variant: "h5", className: "mb-1", children: title }),
-      /* @__PURE__ */ jsx14("div", { className: "mt-4", children })
-    ] }) })
-  );
-}
+var TYPE_LADDER = [
+  ["h1", "36 \xB7 600 \xB7 display"],
+  ["h2", "30 \xB7 600 \xB7 display"],
+  ["h3", "24 \xB7 600 \xB7 title"],
+  ["h4", "20 \xB7 600 \xB7 title"],
+  ["h5", "18 \xB7 500 \xB7 heading"],
+  ["h6", "16 \xB7 500 \xB7 heading"],
+  ["lead", "16 \xB7 400 \xB7 relaxed"],
+  ["subtitle1", "14 \xB7 500 \xB7 heading"],
+  ["subtitle2", "14 \xB7 500"],
+  ["body1", "14 \xB7 400"],
+  ["body2", "12 \xB7 400"],
+  ["caption", "11 \xB7 400"],
+  ["label", "12 \xB7 500 \xB7 wide"],
+  ["button", "14 \xB7 500"]
+];
 export {
   CrmDashboardDemo,
   UIReferenceView,