@tapizlabs/ui 0.2.18 → 0.2.21

package/dist/index.js

@@ -998,7 +998,7 @@ function Checkbox({
                   height: s.icon,
                   viewBox: "0 0 12 12",
                   fill: "none",
-                  stroke: "#000",
+                  stroke: "var(--color-ink-000)",
                   strokeWidth: "2.2",
                   strokeLinecap: "square",
                   children: /* @__PURE__ */ jsx17("polyline", { points: "1.5,6 4.5,9.5 10.5,2.5" })
@@ -1914,33 +1914,13 @@ function StatusBadge({ label, variant = "default", className = "" }) {
 }
 
 // src/components/shared/ActionMenu.tsx
-import { useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState as useState5 } from "react";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState6 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
-var defaultMenuStyle = {
-  background: "var(--color-ink-200)",
-  border: "1px solid var(--color-border-hi)",
-  borderTop: "2px solid var(--color-primary-300)",
-  boxShadow: "0 16px 48px -8px rgba(0,0,0,0.45)",
-  maxHeight: "min(320px, calc(100vh - 180px))"
-};
-var itemBaseClass = "flex w-full items-center gap-2.5 border-l-2 border-transparent px-4 py-2.5 text-left text-sm transition-colors duration-100 hover:border-[var(--color-primary-300)] disabled:cursor-not-allowed disabled:opacity-40";
-function ActionMenu({
-  label,
-  items,
-  icon,
-  buttonSize = "sm",
-  buttonVariant = "secondary",
-  buttonClassName = "",
-  menuClassName,
-  menuStyle,
-  fullWidth = false,
-  closeLabel
-}) {
-  const [open, setOpen] = useState5(false);
+
+// src/components/shared/useMenuPosition.ts
+import { useLayoutEffect, useState as useState5 } from "react";
+function useMenuPosition(open, btnRef, itemCount) {
   const [pos, setPos] = useState5(null);
-  const btnRef = useRef2(null);
-  const menuRef = useRef2(null);
   useLayoutEffect(() => {
     if (!open || !btnRef.current) return;
     const updatePosition = () => {
@@ -1954,7 +1934,7 @@ function ActionMenu({
         viewportPadding,
         Math.min(rect.right - menuW, window.innerWidth - menuW - viewportPadding)
       );
-      const estimatedMenuHeight = Math.min(320, items.length * 44 + 16);
+      const estimatedMenuHeight = Math.min(320, itemCount * 44 + 16);
       const spaceAbove = Math.max(0, rect.top - viewportPadding - menuOffset);
       const spaceBelow = Math.max(0, window.innerHeight - rect.bottom - viewportPadding - menuOffset);
       const preferBelow = spaceBelow >= estimatedMenuHeight || spaceBelow >= spaceAbove;
@@ -1981,7 +1961,36 @@ function ActionMenu({
       window.removeEventListener("resize", updatePosition);
       document.removeEventListener("scroll", updatePosition, true);
     };
-  }, [items.length, open]);
+  }, [itemCount, open, btnRef]);
+  return pos;
+}
+
+// src/components/shared/ActionMenu.tsx
+import { Fragment as Fragment2, jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+var defaultMenuStyle = {
+  background: "var(--color-ink-200)",
+  border: "1px solid var(--color-border-hi)",
+  borderTop: "2px solid var(--color-primary-300)",
+  boxShadow: "0 16px 48px -8px rgba(0,0,0,0.45)",
+  maxHeight: "min(320px, calc(100vh - 180px))"
+};
+var itemBaseClass = "flex w-full items-center gap-2.5 border-l-2 border-transparent px-4 py-2.5 text-left text-sm transition-colors duration-100 hover:border-[var(--color-primary-300)] disabled:cursor-not-allowed disabled:opacity-40";
+function ActionMenu({
+  label,
+  items,
+  icon,
+  buttonSize = "sm",
+  buttonVariant = "secondary",
+  buttonClassName = "",
+  menuClassName,
+  menuStyle,
+  fullWidth = false,
+  closeLabel
+}) {
+  const [open, setOpen] = useState6(false);
+  const btnRef = useRef2(null);
+  const menuRef = useRef2(null);
+  const pos = useMenuPosition(open, btnRef, items.length);
   useEffect2(() => {
     if (!open) return;
     function handle(e) {
@@ -2000,6 +2009,7 @@ function ActionMenu({
       document.removeEventListener("keydown", handle);
     };
   }, [open]);
+  void closeLabel;
   const menuNode = open && pos ? /* @__PURE__ */ jsxs28(Fragment2, { children: [
     /* @__PURE__ */ jsx42("div", { className: "fixed inset-0 z-9998", onClick: () => setOpen(false) }),
     /* @__PURE__ */ jsx42(
@@ -2060,9 +2070,6 @@ function ActionMenu({
   ] });
 }
 
-// src/components/table/DataTable.tsx
-import { useMemo as useMemo2, useState as useState6 } from "react";
-
 // src/components/table/DataTableRow.tsx
 import { memo } from "react";
 import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
@@ -2094,13 +2101,21 @@ function DataTableRowInner({ row, columns, onRowClick, rowActions, densityCellCl
 }
 var DataTableRow = memo(DataTableRowInner);
 
-// src/components/table/DataTable.tsx
-import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
-var ALIGN_CLASS2 = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right"
-};
+// src/components/table/DataTableMobileCard.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
+function DataTableMobileCard({
+  data,
+  isLoading,
+  loadingRows,
+  emptyState,
+  rowKey,
+  mobileCard
+}) {
+  return /* @__PURE__ */ jsx44("div", { className: "md:hidden", children: isLoading ? Array.from({ length: loadingRows }).map((_, i) => /* @__PURE__ */ jsx44("div", { className: "h-16 animate-pulse bg-ink-300" }, i)) : data.length === 0 ? emptyState : data.map((row) => /* @__PURE__ */ jsx44("div", { children: mobileCard(row) }, rowKey(row))) });
+}
+
+// src/components/table/useSortedData.ts
+import { useMemo as useMemo2, useState as useState7 } from "react";
 function compareValues(a, b) {
   if (a == null && b == null) return 0;
   if (a == null) return -1;
@@ -2110,6 +2125,37 @@ function compareValues(a, b) {
   if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
   return String(a).localeCompare(String(b));
 }
+function useSortedData(data, columns, serverSort) {
+  const [sort, setSort] = useState7(null);
+  const sortedData = useMemo2(() => {
+    if (serverSort) return data;
+    if (!sort) return data;
+    const column = columns.find((c) => c.id === sort.columnId);
+    if (!column?.sortAccessor) return data;
+    const accessor = column.sortAccessor;
+    const factor = sort.direction === "asc" ? 1 : -1;
+    return [...data].sort((a, b) => compareValues(accessor(a), accessor(b)) * factor);
+  }, [data, columns, sort, serverSort]);
+  const toggleSort = (columnId) => {
+    if (serverSort) {
+      serverSort.onSort(columnId);
+      return;
+    }
+    setSort((prev) => {
+      if (prev?.columnId !== columnId) return { columnId, direction: "asc" };
+      return { columnId, direction: prev.direction === "asc" ? "desc" : "asc" };
+    });
+  };
+  return { sortedData, sort, toggleSort };
+}
+
+// src/components/table/DataTable.tsx
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+var ALIGN_CLASS2 = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
 function ariaSort(active, direction) {
   if (!active) return "none";
   return direction === "asc" ? "ascending" : "descending";
@@ -2132,26 +2178,7 @@ function DataTable({
   striped = true,
   className = ""
 }) {
-  const [sort, setSort] = useState6(null);
-  const sortedData = useMemo2(() => {
-    if (serverSort) return data;
-    if (!sort) return data;
-    const column = columns.find((c) => c.id === sort.columnId);
-    if (!column?.sortAccessor) return data;
-    const accessor = column.sortAccessor;
-    const factor = sort.direction === "asc" ? 1 : -1;
-    return [...data].sort((a, b) => compareValues(accessor(a), accessor(b)) * factor);
-  }, [data, columns, sort, serverSort]);
-  const toggleSort = (columnId) => {
-    if (serverSort) {
-      serverSort.onSort(columnId);
-      return;
-    }
-    setSort((prev) => {
-      if (prev?.columnId !== columnId) return { columnId, direction: "asc" };
-      return { columnId, direction: prev.direction === "asc" ? "desc" : "asc" };
-    });
-  };
+  const { sortedData, sort, toggleSort } = useSortedData(data, columns, serverSort);
   const hasActions = rowActions !== void 0;
   const colCount = columns.length + (hasActions ? 1 : 0);
   const tableClass = mobileCard !== void 0 ? "hidden md:table w-full text-sm table-collapse" : "w-full text-sm table-collapse";
@@ -2159,22 +2186,32 @@ function DataTable({
   const densityCellClass = density === "compact" ? "px-3 py-2" : density === "spacious" ? "px-4 py-4" : "px-3 py-2.5";
   const wrapperClass = [
     "overflow-x-auto",
-    variant === "brutal" ? "border-2 border-[var(--tapiz-border-strong)] shadow-[var(--tapiz-shadow-brutal)]" : "border border-[var(--tapiz-border-subtle)]",
+    variant === "brutal" ? "border-2 border-[var(--tapiz-border-strong)] shadow-[var(--tapiz-shadow-brutal)]" : "border border-(--tapiz-border-subtle)",
     variant === "enterprise" ? "bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-md)]" : "",
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs30("div", { className: wrapperClass, children: [
-    mobileCard !== void 0 && /* @__PURE__ */ jsx44("div", { className: "md:hidden", children: isLoading ? Array.from({ length: loadingRows }).map((_, i) => /* @__PURE__ */ jsx44("div", { className: "h-16 animate-pulse bg-ink-300" }, i)) : sortedData.length === 0 ? emptyState : sortedData.map((row) => /* @__PURE__ */ jsx44("div", { children: mobileCard(row) }, rowKey(row))) }),
+    mobileCard !== void 0 && /* @__PURE__ */ jsx45(
+      DataTableMobileCard,
+      {
+        data: sortedData,
+        isLoading,
+        loadingRows,
+        emptyState,
+        rowKey,
+        mobileCard
+      }
+    ),
     /* @__PURE__ */ jsxs30("table", { className: tableClass, children: [
-      /* @__PURE__ */ jsx44("thead", { children: /* @__PURE__ */ jsxs30("tr", { className: "border-b border-border bg-ink-300", children: [
+      /* @__PURE__ */ jsx45("thead", { children: /* @__PURE__ */ jsxs30("tr", { className: "border-b border-border bg-ink-300", children: [
         columns.map((column) => {
           const baseClass = `${densityHeaderClass} ${stickyHeader ? "sticky top-0 z-10" : ""} ${ALIGN_CLASS2[column.align ?? "left"]} font-mono text-[11px] tracking-[.08em] text-txt-4 font-semibold whitespace-nowrap`;
           if (!column.sortable || !column.sortAccessor) {
-            return /* @__PURE__ */ jsx44("th", { scope: "col", className: baseClass, children: column.header }, column.id);
+            return /* @__PURE__ */ jsx45("th", { scope: "col", className: baseClass, children: column.header }, column.id);
           }
           const active = serverSort ? serverSort.field === column.id : sort?.columnId === column.id;
           const direction = serverSort ? serverSort.dir : sort?.direction ?? "asc";
-          return /* @__PURE__ */ jsx44(
+          return /* @__PURE__ */ jsx45(
             "th",
             {
               scope: "col",
@@ -2188,7 +2225,7 @@ function DataTable({
                   className: `inline-flex items-center gap-1 select-none transition-colors hover:text-txt-1 ${active ? "text-txt-1" : ""}`,
                   children: [
                     column.header,
-                    active && (direction === "asc" ? /* @__PURE__ */ jsx44(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx44(ChevronDown, { size: 12 }))
+                    active && (direction === "asc" ? /* @__PURE__ */ jsx45(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx45(ChevronDown, { size: 12 }))
                   ]
                 }
               )
@@ -2196,9 +2233,9 @@ function DataTable({
             column.id
           );
         }),
-        hasActions && /* @__PURE__ */ jsx44("th", { scope: "col", className: "px-3 py-2.5 text-right font-mono text-[11px] tracking-[.08em] text-txt-4 font-semibold whitespace-nowrap" })
+        hasActions && /* @__PURE__ */ jsx45("th", { scope: "col", className: "px-3 py-2.5 text-right font-mono text-[11px] tracking-[.08em] text-txt-4 font-semibold whitespace-nowrap" })
       ] }) }),
-      /* @__PURE__ */ jsx44("tbody", { children: isLoading ? Array.from({ length: loadingRows }).map((_, rowIndex) => /* @__PURE__ */ jsx44("tr", { className: "border-b border-[var(--tapiz-border-subtle)]", children: Array.from({ length: colCount }).map((__, colIndex) => /* @__PURE__ */ jsx44("td", { className: densityCellClass, children: /* @__PURE__ */ jsx44("div", { className: "h-4 w-24 animate-pulse bg-[var(--tapiz-bg-surface-muted)]" }) }, colIndex)) }, rowIndex)) : sortedData.length === 0 ? /* @__PURE__ */ jsx44("tr", { children: /* @__PURE__ */ jsx44("td", { colSpan: colCount, className: "px-4 py-10 text-center text-txt-4 text-sm font-mono", children: emptyState }) }) : sortedData.map((row) => /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsx45("tbody", { children: isLoading ? Array.from({ length: loadingRows }).map((_, rowIndex) => /* @__PURE__ */ jsx45("tr", { className: "border-b border-(--tapiz-border-subtle)", children: Array.from({ length: colCount }).map((__, colIndex) => /* @__PURE__ */ jsx45("td", { className: densityCellClass, children: /* @__PURE__ */ jsx45("div", { className: "h-4 w-24 animate-pulse bg-(--tapiz-bg-surface-muted)" }) }, colIndex)) }, rowIndex)) : sortedData.length === 0 ? /* @__PURE__ */ jsx45("tr", { children: /* @__PURE__ */ jsx45("td", { colSpan: colCount, className: "px-4 py-10 text-center text-txt-4 text-sm font-mono", children: emptyState }) }) : sortedData.map((row) => /* @__PURE__ */ jsx45(
         DataTableRow,
         {
           row,
@@ -2216,77 +2253,101 @@ function DataTable({
 }
 
 // src/components/marketing/CTASection.tsx
-import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 function CTASection({ eyebrow, title, description, actions, className = "" }) {
-  return /* @__PURE__ */ jsx45("section", { className: `mx-auto max-w-7xl px-[var(--tapiz-space-page-x)] py-[var(--tapiz-space-section-y)] ${className}`, children: /* @__PURE__ */ jsxs31("div", { className: "border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-8 shadow-[var(--tapiz-shadow-brutal-lg)] md:p-12", children: [
-    eyebrow ? /* @__PURE__ */ jsx45("div", { className: "kicker mb-3", children: eyebrow }) : null,
+  return /* @__PURE__ */ jsx46("section", { className: `mx-auto max-w-7xl px-[var(--tapiz-space-page-x)] py-[var(--tapiz-space-section-y)] ${className}`, children: /* @__PURE__ */ jsxs31("div", { className: "border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-8 shadow-[var(--tapiz-shadow-brutal-lg)] md:p-12", children: [
+    eyebrow ? /* @__PURE__ */ jsx46("div", { className: "kicker mb-3", children: eyebrow }) : null,
     /* @__PURE__ */ jsxs31("div", { className: "grid gap-6 lg:grid-cols-[1fr_auto] lg:items-end", children: [
       /* @__PURE__ */ jsxs31("div", { children: [
-        /* @__PURE__ */ jsx45("h2", { className: "max-w-3xl text-3xl font-semibold tracking-[-0.05em] md:text-5xl", children: title }),
-        description ? /* @__PURE__ */ jsx45("p", { className: "mt-4 max-w-2xl text-base leading-7 text-[var(--tapiz-text-secondary)]", children: description }) : null
+        /* @__PURE__ */ jsx46("h2", { className: "max-w-3xl text-3xl font-semibold tracking-[-0.05em] md:text-5xl", children: title }),
+        description ? /* @__PURE__ */ jsx46("p", { className: "mt-4 max-w-2xl text-base leading-7 text-[var(--tapiz-text-secondary)]", children: description }) : null
       ] }),
-      actions ? /* @__PURE__ */ jsx45("div", { className: "flex flex-wrap gap-3", children: actions }) : null
+      actions ? /* @__PURE__ */ jsx46("div", { className: "flex flex-wrap gap-3", children: actions }) : null
     ] })
   ] }) });
 }
 
 // src/components/marketing/ComparisonTable.tsx
-import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
 function ComparisonTable({ rows, featureHeader = "Feature", includedHeader = "Tapiz", alternativeHeader = "Other", className = "" }) {
-  return /* @__PURE__ */ jsx46("div", { className: `overflow-x-auto border border-[var(--tapiz-border-strong)] ${className}`, children: /* @__PURE__ */ jsxs32("table", { className: "w-full text-sm", children: [
-    /* @__PURE__ */ jsx46("thead", { children: /* @__PURE__ */ jsxs32("tr", { children: [
-      /* @__PURE__ */ jsx46("th", { className: "px-4 py-3 text-left", children: featureHeader }),
-      /* @__PURE__ */ jsx46("th", { className: "px-4 py-3 text-left", children: includedHeader }),
-      /* @__PURE__ */ jsx46("th", { className: "px-4 py-3 text-left", children: alternativeHeader })
+  return /* @__PURE__ */ jsx47("div", { className: `overflow-x-auto border border-[var(--tapiz-border-strong)] ${className}`, children: /* @__PURE__ */ jsxs32("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx47("thead", { children: /* @__PURE__ */ jsxs32("tr", { children: [
+      /* @__PURE__ */ jsx47("th", { className: "px-4 py-3 text-left", children: featureHeader }),
+      /* @__PURE__ */ jsx47("th", { className: "px-4 py-3 text-left", children: includedHeader }),
+      /* @__PURE__ */ jsx47("th", { className: "px-4 py-3 text-left", children: alternativeHeader })
     ] }) }),
-    /* @__PURE__ */ jsx46("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs32("tr", { className: "border-t border-[var(--tapiz-border-subtle)]", children: [
-      /* @__PURE__ */ jsx46("td", { className: "px-4 py-3 font-medium text-[var(--tapiz-text-primary)]", children: row.feature }),
-      /* @__PURE__ */ jsx46("td", { className: "px-4 py-3 text-[var(--tapiz-text-secondary)]", children: row.included }),
-      /* @__PURE__ */ jsx46("td", { className: "px-4 py-3 text-[var(--tapiz-text-muted)]", children: row.alternative })
+    /* @__PURE__ */ jsx47("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs32("tr", { className: "border-t border-[var(--tapiz-border-subtle)]", children: [
+      /* @__PURE__ */ jsx47("td", { className: "px-4 py-3 font-medium text-[var(--tapiz-text-primary)]", children: row.feature }),
+      /* @__PURE__ */ jsx47("td", { className: "px-4 py-3 text-[var(--tapiz-text-secondary)]", children: row.included }),
+      /* @__PURE__ */ jsx47("td", { className: "px-4 py-3 text-[var(--tapiz-text-muted)]", children: row.alternative })
     ] }, index)) })
   ] }) });
 }
 
 // src/components/marketing/FeatureCard.tsx
-import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 function FeatureCard({ title, description, icon, eyebrow, children, className = "", variant = "surface" }) {
   return /* @__PURE__ */ jsxs33(Card, { variant, hover: true, className: `group ${className}`, children: [
     /* @__PURE__ */ jsxs33("div", { className: "flex items-start gap-4", children: [
-      icon ? /* @__PURE__ */ jsx47("div", { className: "grid h-11 w-11 shrink-0 place-items-center border border-[var(--tapiz-border-strong)] bg-[var(--color-icon-bg)] text-[var(--tapiz-accent)] group-hover:translate-x-[-1px] group-hover:translate-y-[-1px]", children: icon }) : null,
+      icon ? /* @__PURE__ */ jsx48("div", { className: "grid h-11 w-11 shrink-0 place-items-center border border-[var(--tapiz-border-strong)] bg-[var(--color-icon-bg)] text-[var(--tapiz-accent)] group-hover:translate-x-[-1px] group-hover:translate-y-[-1px]", children: icon }) : null,
       /* @__PURE__ */ jsxs33("div", { className: "min-w-0", children: [
-        eyebrow ? /* @__PURE__ */ jsx47("div", { className: "kicker mb-1", children: eyebrow }) : null,
-        /* @__PURE__ */ jsx47("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: title }),
-        description ? /* @__PURE__ */ jsx47("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
+        eyebrow ? /* @__PURE__ */ jsx48("div", { className: "kicker mb-1", children: eyebrow }) : null,
+        /* @__PURE__ */ jsx48("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: title }),
+        description ? /* @__PURE__ */ jsx48("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
       ] })
     ] }),
-    children ? /* @__PURE__ */ jsx47("div", { className: "mt-5", children }) : null
+    children ? /* @__PURE__ */ jsx48("div", { className: "mt-5", children }) : null
   ] });
 }
 
 // src/components/marketing/FeatureGrid.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function FeatureGrid({ children, className = "" }) {
-  return /* @__PURE__ */ jsx48("div", { className: `grid gap-4 md:grid-cols-2 xl:grid-cols-3 ${className}`, children });
+  return /* @__PURE__ */ jsx49("div", { className: `grid gap-4 md:grid-cols-2 xl:grid-cols-3 ${className}`, children });
 }
 
 // src/components/marketing/HeroFrame.tsx
-import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
 function HeroFrame({ eyebrow, title, description, actions, visual, meta, className = "" }) {
   return /* @__PURE__ */ jsxs34("section", { className: `mx-auto grid max-w-7xl gap-10 px-[var(--tapiz-space-page-x)] py-[var(--tapiz-space-section-y)] lg:grid-cols-[1fr_0.9fr] lg:items-center ${className}`, children: [
     /* @__PURE__ */ jsxs34("div", { className: "animate-fade-in-up", children: [
-      eyebrow ? /* @__PURE__ */ jsx49("div", { className: "kicker mb-4", children: eyebrow }) : null,
-      /* @__PURE__ */ jsx49("h1", { className: "max-w-4xl text-5xl font-semibold leading-[0.95] tracking-[-0.07em] text-[var(--tapiz-text-primary)] md:text-7xl", children: title }),
-      description ? /* @__PURE__ */ jsx49("p", { className: "mt-6 max-w-2xl text-base leading-7 text-[var(--tapiz-text-secondary)] md:text-lg", children: description }) : null,
-      actions ? /* @__PURE__ */ jsx49("div", { className: "mt-8 flex flex-wrap gap-3", children: actions }) : null,
-      meta ? /* @__PURE__ */ jsx49("div", { className: "mt-8 border-l-2 border-[var(--tapiz-accent)] pl-4 font-mono text-xs text-[var(--tapiz-text-muted)]", children: meta }) : null
+      eyebrow ? /* @__PURE__ */ jsx50("div", { className: "kicker mb-4", children: eyebrow }) : null,
+      /* @__PURE__ */ jsx50("h1", { className: "max-w-4xl text-5xl font-semibold leading-[0.95] tracking-[-0.07em] text-[var(--tapiz-text-primary)] md:text-7xl", children: title }),
+      description ? /* @__PURE__ */ jsx50("p", { className: "mt-6 max-w-2xl text-base leading-7 text-[var(--tapiz-text-secondary)] md:text-lg", children: description }) : null,
+      actions ? /* @__PURE__ */ jsx50("div", { className: "mt-8 flex flex-wrap gap-3", children: actions }) : null,
+      meta ? /* @__PURE__ */ jsx50("div", { className: "mt-8 border-l-2 border-[var(--tapiz-accent)] pl-4 font-mono text-xs text-[var(--tapiz-text-muted)]", children: meta }) : null
     ] }),
-    visual ? /* @__PURE__ */ jsx49("div", { className: "animate-scale-in border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-brutal-lg)]", children: visual }) : null
+    visual ? /* @__PURE__ */ jsx50("div", { className: "animate-scale-in border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-brutal-lg)]", children: visual }) : null
   ] });
 }
 
+// src/components/marketing/useDrawerState.ts
+import { useEffect as useEffect3, useState as useState8 } from "react";
+function useDrawerState() {
+  const [open, setOpen] = useState8(false);
+  const [renderDrawer, setRenderDrawer] = useState8(false);
+  useEffect3(() => {
+    if (open) {
+      setRenderDrawer(true);
+      document.body.style.overflow = "hidden";
+      document.body.classList.add("tapiz-landing-navbar-open");
+      return () => {
+        document.body.style.overflow = "";
+        document.body.classList.remove("tapiz-landing-navbar-open");
+      };
+    }
+    const timeoutId = window.setTimeout(() => {
+      setRenderDrawer(false);
+      document.body.style.overflow = "";
+      document.body.classList.remove("tapiz-landing-navbar-open");
+    }, 220);
+    return () => window.clearTimeout(timeoutId);
+  }, [open]);
+  return { open, setOpen, renderDrawer };
+}
+
 // src/components/marketing/LandingNavbarShell.tsx
-import { useEffect as useEffect3, useState as useState7 } from "react";
-import { Fragment as Fragment3, jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
 function LandingNavbarShell({
   ariaNavLabel,
   brand,
@@ -2305,53 +2366,35 @@ function LandingNavbarShell({
   theme,
   themeLabels
 }) {
-  const [open, setOpen] = useState7(false);
-  const [renderDrawer, setRenderDrawer] = useState7(false);
-  useEffect3(() => {
-    if (open) {
-      setRenderDrawer(true);
-      document.body.style.overflow = "hidden";
-      document.body.classList.add("tapiz-landing-navbar-open");
-      return () => {
-        document.body.style.overflow = "";
-        document.body.classList.remove("tapiz-landing-navbar-open");
-      };
-    }
-    const timeoutId = window.setTimeout(() => {
-      setRenderDrawer(false);
-      document.body.style.overflow = "";
-      document.body.classList.remove("tapiz-landing-navbar-open");
-    }, 220);
-    return () => window.clearTimeout(timeoutId);
-  }, [open]);
+  const { open, setOpen, renderDrawer } = useDrawerState();
   const drawerLabel = mobileDialogLabel ?? menuLabel;
   const resolvedCloseMenuLabel = closeMenuLabel ?? menuLabel;
   const resolvedMobileNavLabel = mobileNavLabel ?? ariaNavLabel;
   const themeLabel = theme === "dark" ? themeLabels.light : themeLabels.dark;
   return /* @__PURE__ */ jsxs35(Fragment3, { children: [
-    /* @__PURE__ */ jsx50("header", { className: ["tapiz-landing-navbar", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs35("div", { className: ["tapiz-landing-navbar__container", containerClassName].filter(Boolean).join(" "), children: [
-      /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__brand", children: brand }),
-      /* @__PURE__ */ jsx50("nav", { className: "tapiz-landing-navbar__links", "aria-label": ariaNavLabel, children: items.map((item) => /* @__PURE__ */ jsxs35("a", { href: item.href, className: "tapiz-landing-navbar__link", children: [
-        item.icon ? /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "tapiz-landing-navbar__link-icon", children: item.icon }) : null,
-        /* @__PURE__ */ jsx50("span", { children: item.label })
+    /* @__PURE__ */ jsx51("header", { className: ["tapiz-landing-navbar", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs35("div", { className: ["tapiz-landing-navbar__container", containerClassName].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsx51("div", { className: "tapiz-landing-navbar__brand", children: brand }),
+      /* @__PURE__ */ jsx51("nav", { className: "tapiz-landing-navbar__links", "aria-label": ariaNavLabel, children: items.map((item) => /* @__PURE__ */ jsxs35("a", { href: item.href, className: "tapiz-landing-navbar__link", children: [
+        item.icon ? /* @__PURE__ */ jsx51("span", { "aria-hidden": "true", className: "tapiz-landing-navbar__link-icon", children: item.icon }) : null,
+        /* @__PURE__ */ jsx51("span", { children: item.label })
       ] }, item.href)) }),
       /* @__PURE__ */ jsxs35("div", { className: "tapiz-landing-navbar__actions", children: [
-        desktopLanguageSwitcher ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__language tapiz-landing-navbar__language--desktop", children: desktopLanguageSwitcher }) : null,
-        /* @__PURE__ */ jsx50(
+        desktopLanguageSwitcher ? /* @__PURE__ */ jsx51("div", { className: "tapiz-landing-navbar__language tapiz-landing-navbar__language--desktop", children: desktopLanguageSwitcher }) : null,
+        /* @__PURE__ */ jsx51(
           "button",
           {
             type: "button",
             className: `tapiz-landing-navbar__theme is-${theme}`,
             "aria-label": themeLabel,
             onClick: onThemeToggle,
-            children: /* @__PURE__ */ jsx50("span", { className: "tapiz-landing-navbar__theme-track", "aria-hidden": "true", children: /* @__PURE__ */ jsxs35("span", { className: "tapiz-landing-navbar__theme-thumb", children: [
-              /* @__PURE__ */ jsx50(Sun, { size: 13, className: "tapiz-landing-navbar__theme-sun" }),
-              /* @__PURE__ */ jsx50(Moon, { size: 13, className: "tapiz-landing-navbar__theme-moon" })
+            children: /* @__PURE__ */ jsx51("span", { className: "tapiz-landing-navbar__theme-track", "aria-hidden": "true", children: /* @__PURE__ */ jsxs35("span", { className: "tapiz-landing-navbar__theme-thumb", children: [
+              /* @__PURE__ */ jsx51(Sun, { size: 13, className: "tapiz-landing-navbar__theme-sun" }),
+              /* @__PURE__ */ jsx51(Moon, { size: 13, className: "tapiz-landing-navbar__theme-moon" })
             ] }) })
           }
         ),
-        desktopActions ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__desktop-actions", children: desktopActions }) : null,
-        /* @__PURE__ */ jsx50(
+        desktopActions ? /* @__PURE__ */ jsx51("div", { className: "tapiz-landing-navbar__desktop-actions", children: desktopActions }) : null,
+        /* @__PURE__ */ jsx51(
           "button",
           {
             type: "button",
@@ -2359,12 +2402,12 @@ function LandingNavbarShell({
             "aria-label": menuLabel,
             "aria-expanded": open,
             onClick: () => setOpen((value) => !value),
-            children: open ? /* @__PURE__ */ jsx50(X, { size: 18 }) : /* @__PURE__ */ jsx50(Menu, { size: 18 })
+            children: open ? /* @__PURE__ */ jsx51(X, { size: 18 }) : /* @__PURE__ */ jsx51(Menu, { size: 18 })
           }
         )
       ] })
     ] }) }),
-    renderDrawer ? /* @__PURE__ */ jsx50(
+    renderDrawer ? /* @__PURE__ */ jsx51(
       "button",
       {
         type: "button",
@@ -2383,21 +2426,21 @@ function LandingNavbarShell({
         "aria-modal": "true",
         "aria-label": drawerLabel,
         children: [
-          /* @__PURE__ */ jsx50("nav", { className: "tapiz-landing-navbar__drawer-nav", "aria-label": resolvedMobileNavLabel, children: items.map((item) => /* @__PURE__ */ jsxs35(
+          /* @__PURE__ */ jsx51("nav", { className: "tapiz-landing-navbar__drawer-nav", "aria-label": resolvedMobileNavLabel, children: items.map((item) => /* @__PURE__ */ jsxs35(
             "a",
             {
               href: item.href,
               className: "tapiz-landing-navbar__drawer-link",
               onClick: () => setOpen(false),
               children: [
-                item.icon ? /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "tapiz-landing-navbar__link-icon", children: item.icon }) : null,
-                /* @__PURE__ */ jsx50("span", { children: item.label })
+                item.icon ? /* @__PURE__ */ jsx51("span", { "aria-hidden": "true", className: "tapiz-landing-navbar__link-icon", children: item.icon }) : null,
+                /* @__PURE__ */ jsx51("span", { children: item.label })
               ]
             },
             item.href
           )) }),
-          mobileLanguageSwitcher ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__language tapiz-landing-navbar__language--mobile", children: mobileLanguageSwitcher }) : null,
-          mobileActions ? /* @__PURE__ */ jsx50("div", { className: "tapiz-landing-navbar__drawer-actions", children: mobileActions }) : null
+          mobileLanguageSwitcher ? /* @__PURE__ */ jsx51("div", { className: "tapiz-landing-navbar__language tapiz-landing-navbar__language--mobile", children: mobileLanguageSwitcher }) : null,
+          mobileActions ? /* @__PURE__ */ jsx51("div", { className: "tapiz-landing-navbar__drawer-actions", children: mobileActions }) : null
         ]
       }
     ) : null
@@ -2405,9 +2448,9 @@ function LandingNavbarShell({
 }
 
 // src/components/marketing/MarketingShell.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function MarketingShell({ children, className = "", grid = true, noise = true }) {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     "main",
     {
       className: [
@@ -2422,24 +2465,24 @@ function MarketingShell({ children, className = "", grid = true, noise = true })
 }
 
 // src/components/marketing/MockupFrame.tsx
-import { jsx as jsx52, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 function MockupFrame({ children, title, toolbar, className = "" }) {
   return /* @__PURE__ */ jsxs36("div", { className: `overflow-hidden border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-brutal)] ${className}`, children: [
     /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between border-b border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] px-3 py-2", children: [
       /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx52("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-danger)]" }),
-        /* @__PURE__ */ jsx52("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-warning)]" }),
-        /* @__PURE__ */ jsx52("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-success)]" })
+        /* @__PURE__ */ jsx53("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-danger)]" }),
+        /* @__PURE__ */ jsx53("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-warning)]" }),
+        /* @__PURE__ */ jsx53("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-success)]" })
       ] }),
-      title ? /* @__PURE__ */ jsx52("div", { className: "font-mono text-[10px] uppercase tracking-widest text-[var(--tapiz-text-muted)]", children: title }) : null,
-      /* @__PURE__ */ jsx52("div", { children: toolbar })
+      title ? /* @__PURE__ */ jsx53("div", { className: "font-mono text-[10px] uppercase tracking-widest text-[var(--tapiz-text-muted)]", children: title }) : null,
+      /* @__PURE__ */ jsx53("div", { children: toolbar })
     ] }),
-    /* @__PURE__ */ jsx52("div", { className: "p-4", children })
+    /* @__PURE__ */ jsx53("div", { className: "p-4", children })
   ] });
 }
 
 // src/components/layout/AppShell.tsx
-import { jsx as jsx53, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
 var variantClasses4 = {
   default: "bg-[var(--tapiz-bg-page)]",
   grid: "bg-[var(--tapiz-bg-page)] tapiz-grid-bg",
@@ -2449,15 +2492,15 @@ function AppShell({ sidebar, topbar, children, aside, className = "", contentCla
   return /* @__PURE__ */ jsxs37("div", { className: `min-h-screen text-[var(--tapiz-text-primary)] ${variantClasses4[variant]} ${className}`, children: [
     topbar,
     /* @__PURE__ */ jsxs37("div", { className: "mx-auto flex w-full max-w-[1600px]", children: [
-      sidebar ? /* @__PURE__ */ jsx53("aside", { className: "hidden min-h-[calc(100vh-1px)] w-72 shrink-0 border-r border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] lg:block", children: sidebar }) : null,
-      /* @__PURE__ */ jsx53("main", { className: `min-w-0 flex-1 px-[var(--tapiz-space-page-x)] py-6 ${contentClassName}`, children }),
-      aside ? /* @__PURE__ */ jsx53("aside", { className: "hidden w-80 shrink-0 border-l border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] xl:block", children: aside }) : null
+      sidebar ? /* @__PURE__ */ jsx54("aside", { className: "hidden min-h-[calc(100vh-1px)] w-72 shrink-0 border-r border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] lg:block", children: sidebar }) : null,
+      /* @__PURE__ */ jsx54("main", { className: `min-w-0 flex-1 px-[var(--tapiz-space-page-x)] py-6 ${contentClassName}`, children }),
+      aside ? /* @__PURE__ */ jsx54("aside", { className: "hidden w-80 shrink-0 border-l border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] xl:block", children: aside }) : null
     ] })
   ] });
 }
 
 // src/components/layout/SplitPane.tsx
-import { jsx as jsx54, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 var ratios = {
   "50/50": "lg:grid-cols-2",
   "60/40": "lg:grid-cols-[minmax(0,3fr)_minmax(320px,2fr)]",
@@ -2465,79 +2508,79 @@ var ratios = {
 };
 function SplitPane({ primary, secondary, ratio = "60/40", reverseOnMobile = false, className = "" }) {
   return /* @__PURE__ */ jsxs38("div", { className: `grid gap-5 ${ratios[ratio]} ${className}`, children: [
-    /* @__PURE__ */ jsx54("div", { className: reverseOnMobile ? "order-2 lg:order-1" : "", children: primary }),
-    /* @__PURE__ */ jsx54("div", { className: reverseOnMobile ? "order-1 lg:order-2" : "", children: secondary })
+    /* @__PURE__ */ jsx55("div", { className: reverseOnMobile ? "order-2 lg:order-1" : "", children: primary }),
+    /* @__PURE__ */ jsx55("div", { className: reverseOnMobile ? "order-1 lg:order-2" : "", children: secondary })
   ] });
 }
 
 // src/components/layout/Stack.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var gapClasses = { xs: "gap-1", sm: "gap-2", md: "gap-4", lg: "gap-6", xl: "gap-8" };
 var alignClasses = { start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch" };
 var justifyClasses = { start: "justify-start", center: "justify-center", between: "justify-between", end: "justify-end" };
 function Stack({ children, gap = "md", direction = "vertical", align = "stretch", justify = "start", wrap = false, className = "" }) {
-  return /* @__PURE__ */ jsx55("div", { className: `flex ${direction === "vertical" ? "flex-col" : "flex-row"} ${gapClasses[gap]} ${alignClasses[align]} ${justifyClasses[justify]} ${wrap ? "flex-wrap" : ""} ${className}`, children });
+  return /* @__PURE__ */ jsx56("div", { className: `flex ${direction === "vertical" ? "flex-col" : "flex-row"} ${gapClasses[gap]} ${alignClasses[align]} ${justifyClasses[justify]} ${wrap ? "flex-wrap" : ""} ${className}`, children });
 }
 
 // src/components/layout/Cluster.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var gapClasses2 = { xs: "gap-1", sm: "gap-2", md: "gap-3", lg: "gap-5" };
 var alignClasses2 = { start: "items-start", center: "items-center", end: "items-end" };
 var justifyClasses2 = { start: "justify-start", center: "justify-center", between: "justify-between", end: "justify-end" };
 function Cluster({ children, gap = "sm", align = "center", justify = "start", className = "" }) {
-  return /* @__PURE__ */ jsx56("div", { className: `flex flex-wrap ${gapClasses2[gap]} ${alignClasses2[align]} ${justifyClasses2[justify]} ${className}`, children });
+  return /* @__PURE__ */ jsx57("div", { className: `flex flex-wrap ${gapClasses2[gap]} ${alignClasses2[align]} ${justifyClasses2[justify]} ${className}`, children });
 }
 
 // src/components/navigation/Breadcrumbs.tsx
-import { jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs39 } from "react/jsx-runtime";
 function Breadcrumbs({ items, separator = "/", className = "" }) {
-  return /* @__PURE__ */ jsx57("nav", { "aria-label": "Breadcrumb", className: `font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)] ${className}`, children: /* @__PURE__ */ jsx57("ol", { className: "flex flex-wrap items-center gap-2", children: items.map((item, index) => /* @__PURE__ */ jsxs39("li", { className: "flex items-center gap-2", children: [
-    index > 0 ? /* @__PURE__ */ jsx57("span", { "aria-hidden": "true", className: "text-[var(--tapiz-text-disabled)]", children: separator }) : null,
-    item.href && !item.current ? /* @__PURE__ */ jsx57("a", { className: "hover:text-[var(--tapiz-accent)]", href: item.href, children: item.label }) : /* @__PURE__ */ jsx57("span", { "aria-current": item.current ? "page" : void 0, className: item.current ? "text-[var(--tapiz-text-primary)]" : "", children: item.label })
+  return /* @__PURE__ */ jsx58("nav", { "aria-label": "Breadcrumb", className: `font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)] ${className}`, children: /* @__PURE__ */ jsx58("ol", { className: "flex flex-wrap items-center gap-2", children: items.map((item, index) => /* @__PURE__ */ jsxs39("li", { className: "flex items-center gap-2", children: [
+    index > 0 ? /* @__PURE__ */ jsx58("span", { "aria-hidden": "true", className: "text-[var(--tapiz-text-disabled)]", children: separator }) : null,
+    item.href && !item.current ? /* @__PURE__ */ jsx58("a", { className: "hover:text-[var(--tapiz-accent)]", href: item.href, children: item.label }) : /* @__PURE__ */ jsx58("span", { "aria-current": item.current ? "page" : void 0, className: item.current ? "text-[var(--tapiz-text-primary)]" : "", children: item.label })
   ] }, index)) }) });
 }
 
 // src/components/navigation/SidebarNav.tsx
-import { Fragment as Fragment4, jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx59, jsxs as jsxs40 } from "react/jsx-runtime";
 function SidebarNav({ groups, header, footer, className = "" }) {
-  return /* @__PURE__ */ jsxs40("div", { className: `flex h-full min-h-screen flex-col bg-[var(--tapiz-bg-surface)] ${className}`, children: [
-    header ? /* @__PURE__ */ jsx58("div", { className: "border-b border-[var(--tapiz-border-subtle)] p-4", children: header }) : null,
-    /* @__PURE__ */ jsx58("nav", { className: "flex-1 space-y-6 p-3", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs40("div", { children: [
-      group.label ? /* @__PURE__ */ jsx58("div", { className: "mb-2 px-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: group.label }) : null,
-      /* @__PURE__ */ jsx58("div", { className: "space-y-1", children: group.items.map((item, itemIndex) => /* @__PURE__ */ jsx58(SidebarNavLink, { item }, itemIndex)) })
+  return /* @__PURE__ */ jsxs40("div", { className: `flex h-full min-h-screen flex-col bg-(--tapiz-bg-surface) ${className}`, children: [
+    header ? /* @__PURE__ */ jsx59("div", { className: "border-b border-(--tapiz-border-subtle) p-4", children: header }) : null,
+    /* @__PURE__ */ jsx59("nav", { className: "flex-1 space-y-6 p-3", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs40("div", { children: [
+      group.label ? /* @__PURE__ */ jsx59("div", { className: "mb-2 px-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-(--tapiz-text-muted)", children: group.label }) : null,
+      /* @__PURE__ */ jsx59("div", { className: "space-y-1", children: group.items.map((item, itemIndex) => /* @__PURE__ */ jsx59(SidebarNavLink, { item }, itemIndex)) })
     ] }, groupIndex)) }),
-    footer ? /* @__PURE__ */ jsx58("div", { className: "border-t border-[var(--tapiz-border-subtle)] p-4", children: footer }) : null
+    footer ? /* @__PURE__ */ jsx59("div", { className: "border-t border-(--tapiz-border-subtle) p-4", children: footer }) : null
   ] });
 }
 function SidebarNavLink({ item }) {
   const className = [
     "flex w-full items-center gap-3 border px-3 py-2 text-left text-sm font-medium",
-    item.active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-text-primary)] shadow-[inset_3px_0_0_var(--tapiz-accent)]" : "border-transparent text-[var(--tapiz-text-secondary)] hover:border-[var(--tapiz-border-subtle)] hover:bg-[var(--tapiz-bg-surface-muted)] hover:text-[var(--tapiz-text-primary)]",
+    item.active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-text-primary)] shadow-[inset_3px_0_0_var(--tapiz-accent)]" : "border-transparent text-[var(--tapiz-text-secondary)] hover:border-(--tapiz-border-subtle) hover:bg-[var(--tapiz-bg-surface-muted)] hover:text-[var(--tapiz-text-primary)]",
     item.disabled ? "pointer-events-none opacity-40" : ""
   ].filter(Boolean).join(" ");
   const content = /* @__PURE__ */ jsxs40(Fragment4, { children: [
-    item.icon ? /* @__PURE__ */ jsx58("span", { className: "grid size-5 place-items-center text-[var(--tapiz-text-muted)]", children: item.icon }) : null,
-    /* @__PURE__ */ jsx58("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
-    item.badge ? /* @__PURE__ */ jsx58("span", { children: item.badge }) : null
+    item.icon ? /* @__PURE__ */ jsx59("span", { className: "grid size-5 place-items-center text-(--tapiz-text-muted)", children: item.icon }) : null,
+    /* @__PURE__ */ jsx59("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+    item.badge ? /* @__PURE__ */ jsx59("span", { children: item.badge }) : null
   ] });
-  return item.href ? /* @__PURE__ */ jsx58("a", { className, href: item.href, children: content }) : /* @__PURE__ */ jsx58("button", { type: "button", className, onClick: item.onClick, disabled: item.disabled, children: content });
+  return item.href ? /* @__PURE__ */ jsx59("a", { className, href: item.href, children: content }) : /* @__PURE__ */ jsx59("button", { type: "button", className, onClick: item.onClick, disabled: item.disabled, children: content });
 }
 
 // src/components/navigation/TopNav.tsx
-import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs41 } from "react/jsx-runtime";
 function TopNav({ brand, links = [], actions, className = "", sticky = true }) {
-  return /* @__PURE__ */ jsx59("header", { className: `${sticky ? "sticky top-0 z-40" : ""} border-b border-[var(--tapiz-border-subtle)] bg-[color-mix(in_srgb,var(--tapiz-bg-surface)_88%,transparent)] backdrop-blur-xl ${className}`, children: /* @__PURE__ */ jsxs41("div", { className: "mx-auto flex h-16 max-w-[1600px] items-center gap-6 px-[var(--tapiz-space-page-x)]", children: [
-    brand ? /* @__PURE__ */ jsx59("div", { className: "shrink-0", children: brand }) : null,
-    /* @__PURE__ */ jsx59("nav", { className: "hidden items-center gap-1 md:flex", children: links.map((link, index) => {
+  return /* @__PURE__ */ jsx60("header", { className: `${sticky ? "sticky top-0 z-40" : ""} border-b border-[var(--tapiz-border-subtle)] bg-[color-mix(in_srgb,var(--tapiz-bg-surface)_88%,transparent)] backdrop-blur-xl ${className}`, children: /* @__PURE__ */ jsxs41("div", { className: "mx-auto flex h-16 max-w-[1600px] items-center gap-6 px-[var(--tapiz-space-page-x)]", children: [
+    brand ? /* @__PURE__ */ jsx60("div", { className: "shrink-0", children: brand }) : null,
+    /* @__PURE__ */ jsx60("nav", { className: "hidden items-center gap-1 md:flex", children: links.map((link, index) => {
       const cls = `border px-3 py-1.5 text-sm font-medium ${link.active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] text-[var(--tapiz-text-primary)]" : "border-transparent text-[var(--tapiz-text-secondary)] hover:border-[var(--tapiz-border-subtle)] hover:text-[var(--tapiz-text-primary)]"}`;
-      return link.href ? /* @__PURE__ */ jsx59("a", { href: link.href, className: cls, children: link.label }, index) : /* @__PURE__ */ jsx59("button", { type: "button", onClick: link.onClick, className: cls, children: link.label }, index);
+      return link.href ? /* @__PURE__ */ jsx60("a", { href: link.href, className: cls, children: link.label }, index) : /* @__PURE__ */ jsx60("button", { type: "button", onClick: link.onClick, className: cls, children: link.label }, index);
     }) }),
-    actions ? /* @__PURE__ */ jsx59("div", { className: "ml-auto flex items-center gap-2", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx60("div", { className: "ml-auto flex items-center gap-2", children: actions }) : null
   ] }) });
 }
 
 // src/components/disclosure/Tabs.tsx
-import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs42 } from "react/jsx-runtime";
 var variants = {
   line: "border-b border-[var(--tapiz-border-subtle)]",
   boxed: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-1",
@@ -2546,7 +2589,7 @@ var variants = {
 function Tabs({ items, activeId, onChange, className = "", variant = "line" }) {
   const active = items.find((item) => item.id === activeId) ?? items[0];
   return /* @__PURE__ */ jsxs42("div", { className, children: [
-    /* @__PURE__ */ jsx60("div", { role: "tablist", className: `flex flex-wrap gap-1 ${variants[variant]}`, children: items.map((item) => {
+    /* @__PURE__ */ jsx61("div", { role: "tablist", className: `flex flex-wrap gap-1 ${variants[variant]}`, children: items.map((item) => {
       const selected = item.id === active?.id;
       return /* @__PURE__ */ jsxs42(
         "button",
@@ -2565,17 +2608,88 @@ function Tabs({ items, activeId, onChange, className = "", variant = "line" }) {
         item.id
       );
     }) }),
-    /* @__PURE__ */ jsx60("div", { role: "tabpanel", className: "pt-4", children: active?.content })
+    /* @__PURE__ */ jsx61("div", { role: "tabpanel", className: "pt-4", children: active?.content })
   ] });
 }
 
+// src/components/disclosure/SegmentedTabs.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState9 } from "react";
+import { jsx as jsx62, jsxs as jsxs43 } from "react/jsx-runtime";
+function SegmentedTabs({
+  items,
+  activeId,
+  onChange,
+  className = "",
+  buttonClassName = ""
+}) {
+  const refs = useRef3([]);
+  const [indicator, setIndicator] = useState9({ left: 0, width: 0 });
+  useLayoutEffect2(() => {
+    const activeIndex = items.findIndex((item) => item.id === activeId);
+    const activeNode = refs.current[activeIndex];
+    if (!activeNode) return;
+    setIndicator({
+      left: activeNode.offsetLeft,
+      width: activeNode.offsetWidth
+    });
+  }, [activeId, items]);
+  return /* @__PURE__ */ jsxs43(
+    "div",
+    {
+      className: `relative inline-flex w-fit max-w-full flex-wrap items-center gap-1 rounded-[11px] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] px-1.5 py-1 ${className}`,
+      children: [
+        /* @__PURE__ */ jsx62(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute bottom-1 top-1 rounded-[8px] border border-[color:color-mix(in_srgb,var(--tapiz-accent)_50%,transparent)] bg-[color:color-mix(in_srgb,var(--tapiz-accent)_12%,transparent)] shadow-[0_0_0_1px_color-mix(in_srgb,var(--tapiz-accent)_8%,transparent)] transition-[left,width] duration-300 ease-out",
+            style: { left: indicator.left, width: indicator.width }
+          }
+        ),
+        items.map((item, index) => {
+          const active = item.id === activeId;
+          return /* @__PURE__ */ jsxs43(
+            "button",
+            {
+              ref: (node) => {
+                refs.current[index] = node;
+              },
+              type: "button",
+              onClick: () => onChange(item.id),
+              className: `group relative z-10 inline-flex items-center gap-2 rounded-[8px] border px-4 py-1 text-sm font-medium transition-[color,border-color,background-color,box-shadow] duration-200 ease-out ${active ? "border-transparent bg-transparent text-[var(--tapiz-accent)]" : "border-transparent text-[var(--tapiz-text-muted)] hover:border-[var(--tapiz-border-subtle)] hover:bg-[var(--tapiz-bg-surface)] hover:text-[var(--tapiz-text-primary)]"} ${buttonClassName}`,
+              children: [
+                item.icon ? /* @__PURE__ */ jsx62(
+                  "span",
+                  {
+                    className: active ? "text-[var(--tapiz-accent)]" : "text-[var(--tapiz-text-subtle)] transition-colors duration-200 group-hover:text-[var(--tapiz-text-primary)]",
+                    children: item.icon
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx62("span", { className: "flex items-center gap-2.5", children: item.label }),
+                item.badge ? /* @__PURE__ */ jsx62(
+                  "span",
+                  {
+                    className: `inline-flex min-w-7 items-center justify-center rounded-[6px] border px-1.5 py-[2px] text-xs font-semibold tabular-nums ${active ? "border-[color:color-mix(in_srgb,var(--tapiz-accent)_30%,transparent)] bg-[color:color-mix(in_srgb,var(--tapiz-accent)_14%,transparent)] text-[var(--tapiz-accent)]" : "border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-muted)]"}`,
+                    children: item.badge
+                  }
+                ) : null
+              ]
+            },
+            item.id
+          );
+        })
+      ]
+    }
+  );
+}
+
 // src/components/disclosure/Accordion.tsx
-import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs44 } from "react/jsx-runtime";
 function Accordion({ items, openIds = [], onToggle, className = "" }) {
-  return /* @__PURE__ */ jsx61("div", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item) => {
+  return /* @__PURE__ */ jsx63("div", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item) => {
     const open = openIds.includes(item.id);
-    return /* @__PURE__ */ jsxs43("section", { children: [
-      /* @__PURE__ */ jsxs43(
+    return /* @__PURE__ */ jsxs44("section", { children: [
+      /* @__PURE__ */ jsxs44(
         "button",
         {
           type: "button",
@@ -2584,21 +2698,21 @@ function Accordion({ items, openIds = [], onToggle, className = "" }) {
           onClick: () => onToggle?.(item.id),
           className: "flex w-full items-center justify-between gap-4 px-4 py-3 text-left disabled:opacity-40",
           children: [
-            /* @__PURE__ */ jsx61("span", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
-            /* @__PURE__ */ jsxs43("span", { className: "flex items-center gap-3 text-[var(--tapiz-text-muted)]", children: [
+            /* @__PURE__ */ jsx63("span", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
+            /* @__PURE__ */ jsxs44("span", { className: "flex items-center gap-3 text-[var(--tapiz-text-muted)]", children: [
               item.meta,
-              /* @__PURE__ */ jsx61("span", { "aria-hidden": "true", className: "font-mono text-lg", children: open ? "\u2212" : "+" })
+              /* @__PURE__ */ jsx63("span", { "aria-hidden": "true", className: "font-mono text-lg", children: open ? "\u2212" : "+" })
             ] })
           ]
         }
       ),
-      open ? /* @__PURE__ */ jsx61("div", { className: "border-t border-[var(--tapiz-border-subtle)] px-4 py-4 text-sm text-[var(--tapiz-text-secondary)]", children: item.content }) : null
+      open ? /* @__PURE__ */ jsx63("div", { className: "border-t border-[var(--tapiz-border-subtle)] px-4 py-4 text-sm text-[var(--tapiz-text-secondary)]", children: item.content }) : null
     ] }, item.id);
   }) });
 }
 
 // src/components/disclosure/Stepper.tsx
-import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs45 } from "react/jsx-runtime";
 var tone = {
   complete: "border-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)] text-[var(--tapiz-success)]",
   current: "border-[var(--tapiz-accent)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-accent)]",
@@ -2606,65 +2720,193 @@ var tone = {
   error: "border-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)] text-[var(--tapiz-danger)]"
 };
 function Stepper({ steps, orientation = "horizontal", className = "" }) {
-  return /* @__PURE__ */ jsx62("ol", { className: `grid gap-3 ${orientation === "horizontal" ? "md:grid-cols-[repeat(auto-fit,minmax(0,1fr))]" : ""} ${className}`, children: steps.map((step, index) => {
+  return /* @__PURE__ */ jsx64("ol", { className: `grid gap-3 ${orientation === "horizontal" ? "md:grid-cols-[repeat(auto-fit,minmax(0,1fr))]" : ""} ${className}`, children: steps.map((step, index) => {
     const status = step.status ?? "upcoming";
-    return /* @__PURE__ */ jsxs44("li", { className: "flex gap-3", children: [
-      /* @__PURE__ */ jsx62("span", { className: `grid size-8 shrink-0 place-items-center border font-mono text-xs font-bold ${tone[status]}`, children: status === "complete" ? "\u2713" : index + 1 }),
-      /* @__PURE__ */ jsxs44("span", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx62("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: step.label }),
-        step.description ? /* @__PURE__ */ jsx62("span", { className: "mt-1 block text-xs text-[var(--tapiz-text-muted)]", children: step.description }) : null
+    return /* @__PURE__ */ jsxs45("li", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsx64("span", { className: `grid size-8 shrink-0 place-items-center border font-mono text-xs font-bold ${tone[status]}`, children: status === "complete" ? "\u2713" : index + 1 }),
+      /* @__PURE__ */ jsxs45("span", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx64("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: step.label }),
+        step.description ? /* @__PURE__ */ jsx64("span", { className: "mt-1 block text-xs text-[var(--tapiz-text-muted)]", children: step.description }) : null
       ] })
     ] }, step.id);
   }) });
 }
 
 // src/components/overlays/Drawer.tsx
-import { jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
 function Drawer({ open, onClose, title, description, children, footer, side = "right", className = "" }) {
   if (!open) return null;
-  return /* @__PURE__ */ jsxs45("div", { className: "fixed inset-0 z-50", children: [
-    /* @__PURE__ */ jsx63("button", { type: "button", "aria-label": "Close drawer", className: "absolute inset-0 bg-(--tapiz-bg-overlay)", onClick: onClose }),
-    /* @__PURE__ */ jsxs45("section", { className: `absolute top-0 h-full w-full max-w-md border-(--tapiz-border-strong) bg-(--tapiz-bg-surface) shadow-(--tapiz-shadow-lg) ${side === "right" ? "right-0 border-l" : "left-0 border-r"} ${className}`, children: [
-      /* @__PURE__ */ jsxs45("header", { className: "flex items-start justify-between gap-4 border-b border-(--tapiz-border-subtle) p-5", children: [
-        /* @__PURE__ */ jsxs45("div", { children: [
-          title ? /* @__PURE__ */ jsx63("h2", { className: "text-lg font-semibold text-(--tapiz-text-primary)", children: title }) : null,
-          description ? /* @__PURE__ */ jsx63("p", { className: "mt-1 text-sm text-(--tapiz-text-muted)", children: description }) : null
+  return /* @__PURE__ */ jsxs46("div", { className: "fixed inset-0 z-50", children: [
+    /* @__PURE__ */ jsx65("button", { type: "button", "aria-label": "Close drawer", className: "absolute inset-0 bg-(--tapiz-bg-overlay)", onClick: onClose }),
+    /* @__PURE__ */ jsxs46("section", { className: `absolute top-0 h-full w-full max-w-md border-(--tapiz-border-strong) bg-(--tapiz-bg-surface) shadow-(--tapiz-shadow-lg) ${side === "right" ? "right-0 border-l" : "left-0 border-r"} ${className}`, children: [
+      /* @__PURE__ */ jsxs46("header", { className: "flex items-start justify-between gap-4 border-b border-(--tapiz-border-subtle) p-5", children: [
+        /* @__PURE__ */ jsxs46("div", { children: [
+          title ? /* @__PURE__ */ jsx65("h2", { className: "text-lg font-semibold text-(--tapiz-text-primary)", children: title }) : null,
+          description ? /* @__PURE__ */ jsx65("p", { className: "mt-1 text-sm text-(--tapiz-text-muted)", children: description }) : null
         ] }),
-        /* @__PURE__ */ jsx63("button", { type: "button", onClick: onClose, className: "border border-(--tapiz-border-subtle) px-2 py-1 font-mono text-sm text-(--tapiz-text-muted) hover:text-(--tapiz-text-primary)", children: "\xD7" })
+        /* @__PURE__ */ jsx65("button", { type: "button", onClick: onClose, className: "border border-(--tapiz-border-subtle) px-2 py-1 font-mono text-sm text-(--tapiz-text-muted) hover:text-(--tapiz-text-primary)", children: "\xD7" })
       ] }),
-      /* @__PURE__ */ jsx63("div", { className: "max-h-[calc(100vh-9rem)] overflow-auto p-5", children }),
-      footer ? /* @__PURE__ */ jsx63("footer", { className: "border-t border-(--tapiz-border-subtle) p-4", children: footer }) : null
+      /* @__PURE__ */ jsx65("div", { className: "max-h-[calc(100vh-9rem)] overflow-auto p-5", children }),
+      footer ? /* @__PURE__ */ jsx65("footer", { className: "border-t border-(--tapiz-border-subtle) p-4", children: footer }) : null
     ] })
   ] });
 }
 
+// src/components/overlays/SidePanel.tsx
+import { useEffect as useEffect4, useId as useId4, useState as useState10 } from "react";
+import { createPortal as createPortal5 } from "react-dom";
+import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
+var widthRem = {
+  md: 28,
+  lg: 42,
+  xl: 48
+};
+var MOBILE_QUERY = "(max-width: 639px)";
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function SidePanel({
+  isOpen,
+  onClose,
+  title,
+  subtitle,
+  icon,
+  footer,
+  children,
+  width = "md",
+  side = "right",
+  closeLabel = "Close panel"
+}) {
+  const titleId = useId4();
+  const [mounted, setMounted] = useState10(isOpen);
+  const [shown, setShown] = useState10(false);
+  const [isMobile, setIsMobile] = useState10(
+    () => typeof window !== "undefined" && window.matchMedia(MOBILE_QUERY).matches
+  );
+  const [reduceMotion, setReduceMotion] = useState10(
+    () => typeof window !== "undefined" && window.matchMedia(REDUCED_MOTION_QUERY).matches
+  );
+  if (isOpen && !mounted) setMounted(true);
+  if (!isOpen && shown) setShown(false);
+  useEffect4(() => {
+    if (isOpen) {
+      const raf = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true)));
+      return () => cancelAnimationFrame(raf);
+    }
+    const timer = setTimeout(() => setMounted(false), 250);
+    return () => clearTimeout(timer);
+  }, [isOpen]);
+  useEffect4(() => {
+    const mobileMq = window.matchMedia(MOBILE_QUERY);
+    const motionMq = window.matchMedia(REDUCED_MOTION_QUERY);
+    const sync = () => {
+      setIsMobile(mobileMq.matches);
+      setReduceMotion(motionMq.matches);
+    };
+    sync();
+    mobileMq.addEventListener("change", sync);
+    motionMq.addEventListener("change", sync);
+    return () => {
+      mobileMq.removeEventListener("change", sync);
+      motionMq.removeEventListener("change", sync);
+    };
+  }, []);
+  useEffect4(() => {
+    if (!isOpen) return;
+    const html = document.documentElement.style.overflow;
+    const body = document.body.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+    document.body.style.overflow = "hidden";
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.documentElement.style.overflow = html;
+      document.body.style.overflow = body;
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen, onClose]);
+  if (!mounted) return null;
+  const hiddenOffset = side === "right" ? "100%" : "-100%";
+  const panelStyle = {
+    maxWidth: isMobile ? "100%" : `${widthRem[width]}rem`,
+    transform: shown ? "translateX(0)" : `translateX(${hiddenOffset})`,
+    transition: reduceMotion ? "none" : "transform 200ms ease-out",
+    willChange: "transform"
+  };
+  return createPortal5(
+    /* @__PURE__ */ jsx66(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        className: `fixed inset-0 z-50 flex bg-[rgba(5,6,8,0.75)] backdrop-blur-[2px] ${side === "right" ? "justify-end" : "justify-start"} ${shown ? "opacity-100" : "opacity-0"}`,
+        style: { transition: reduceMotion ? "none" : "opacity 200ms ease" },
+        onClick: (e) => e.target === e.currentTarget && onClose(),
+        children: /* @__PURE__ */ jsxs47(
+          "div",
+          {
+            className: `flex h-full max-sm:h-dvh w-full flex-col overflow-hidden border-t-2 border-t-primary-300 bg-ink-200 ${side === "right" ? "border-l border-border-hi max-sm:border-l-0" : "border-r border-border-hi max-sm:border-r-0"}`,
+            style: panelStyle,
+            children: [
+              /* @__PURE__ */ jsxs47("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3 sm:px-5", children: [
+                /* @__PURE__ */ jsxs47("div", { className: "flex min-w-0 items-center gap-3", children: [
+                  icon && /* @__PURE__ */ jsx66("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center bg-ink-300 border border-border-hi text-primary-300", children: icon }),
+                  /* @__PURE__ */ jsxs47("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx66("h3", { id: titleId, className: "truncate font-display text-[15px] font-semibold text-txt-1", children: title }),
+                    subtitle && /* @__PURE__ */ jsx66("p", { className: "mt-0.5 truncate font-mono text-[10px] tracking-widest text-primary-300", children: subtitle })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx66(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    "aria-label": closeLabel,
+                    title: closeLabel,
+                    className: "flex h-8 w-8 shrink-0 items-center justify-center border border-transparent text-txt-3 transition-colors hover:border-border-hi hover:text-txt-1",
+                    children: /* @__PURE__ */ jsx66(X, { size: 16 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx66("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 sm:px-5", children }),
+              footer && /* @__PURE__ */ jsx66("div", { className: "shrink-0 border-t border-border px-4 py-3 sm:px-5", children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
 // src/components/overlays/Popover.tsx
-import { jsx as jsx64, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs48 } from "react/jsx-runtime";
 function Popover({ trigger, children, open = false, align = "start", className = "" }) {
-  return /* @__PURE__ */ jsxs46("div", { className: `relative inline-block ${className}`, children: [
+  return /* @__PURE__ */ jsxs48("div", { className: `relative inline-block ${className}`, children: [
     trigger,
-    open ? /* @__PURE__ */ jsx64("div", { className: `absolute top-full z-40 mt-2 min-w-64 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-2 shadow-[var(--tapiz-shadow-md)] ${align === "end" ? "right-0" : "left-0"}`, children }) : null
+    open ? /* @__PURE__ */ jsx67("div", { className: `absolute top-full z-40 mt-2 min-w-64 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-2 shadow-[var(--tapiz-shadow-md)] ${align === "end" ? "right-0" : "left-0"}`, children }) : null
   ] });
 }
 
 // src/components/overlays/CommandMenu.tsx
-import { jsx as jsx65, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs49 } from "react/jsx-runtime";
 function CommandMenu({ open, onClose, query = "", onQueryChange, groups, placeholder = "Search commands\u2026", empty = "No commands found." }) {
   if (!open) return null;
   const hasItems = groups.some((group) => group.items.length > 0);
-  return /* @__PURE__ */ jsx65("div", { className: "fixed inset-0 z-50 grid place-items-start bg-[var(--tapiz-bg-overlay)] px-4 pt-[12vh]", onClick: onClose, children: /* @__PURE__ */ jsxs47("div", { className: "mx-auto w-full max-w-2xl border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-brutal-lg)]", onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsx65("div", { className: "border-b border-[var(--tapiz-border-subtle)] p-3", children: /* @__PURE__ */ jsx65(SearchInput, { value: query, onChange: (value) => onQueryChange?.(value), placeholder, autoFocus: true }) }),
-    /* @__PURE__ */ jsxs47("div", { className: "max-h-[50vh] overflow-auto p-2", children: [
-      !hasItems ? /* @__PURE__ */ jsx65("div", { className: "p-6 text-center text-sm text-[var(--tapiz-text-muted)]", children: empty }) : null,
-      groups.map((group, groupIndex) => /* @__PURE__ */ jsxs47("div", { className: "py-2", children: [
-        group.label ? /* @__PURE__ */ jsx65("div", { className: "px-2 pb-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: group.label }) : null,
-        group.items.map((item) => /* @__PURE__ */ jsxs47("button", { type: "button", disabled: item.disabled, onClick: item.onSelect, className: "flex w-full items-center gap-3 border border-transparent px-3 py-2 text-left hover:border-[var(--tapiz-border-subtle)] hover:bg-[var(--tapiz-bg-surface-muted)] disabled:opacity-40", children: [
-          item.icon ? /* @__PURE__ */ jsx65("span", { className: "grid size-8 place-items-center border border-[var(--tapiz-border-subtle)] text-[var(--tapiz-text-muted)]", children: item.icon }) : null,
-          /* @__PURE__ */ jsxs47("span", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx65("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.label }),
-            item.description ? /* @__PURE__ */ jsx65("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: item.description }) : null
+  return /* @__PURE__ */ jsx68("div", { className: "fixed inset-0 z-50 grid place-items-start bg-[var(--tapiz-bg-overlay)] px-4 pt-[12vh]", onClick: onClose, children: /* @__PURE__ */ jsxs49("div", { className: "mx-auto w-full max-w-2xl border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-brutal-lg)]", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx68("div", { className: "border-b border-[var(--tapiz-border-subtle)] p-3", children: /* @__PURE__ */ jsx68(SearchInput, { value: query, onChange: (value) => onQueryChange?.(value), placeholder, autoFocus: true }) }),
+    /* @__PURE__ */ jsxs49("div", { className: "max-h-[50vh] overflow-auto p-2", children: [
+      !hasItems ? /* @__PURE__ */ jsx68("div", { className: "p-6 text-center text-sm text-[var(--tapiz-text-muted)]", children: empty }) : null,
+      groups.map((group, groupIndex) => /* @__PURE__ */ jsxs49("div", { className: "py-2", children: [
+        group.label ? /* @__PURE__ */ jsx68("div", { className: "px-2 pb-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: group.label }) : null,
+        group.items.map((item) => /* @__PURE__ */ jsxs49("button", { type: "button", disabled: item.disabled, onClick: item.onSelect, className: "flex w-full items-center gap-3 border border-transparent px-3 py-2 text-left hover:border-[var(--tapiz-border-subtle)] hover:bg-[var(--tapiz-bg-surface-muted)] disabled:opacity-40", children: [
+          item.icon ? /* @__PURE__ */ jsx68("span", { className: "grid size-8 place-items-center border border-[var(--tapiz-border-subtle)] text-[var(--tapiz-text-muted)]", children: item.icon }) : null,
+          /* @__PURE__ */ jsxs49("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx68("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.label }),
+            item.description ? /* @__PURE__ */ jsx68("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: item.description }) : null
           ] }),
-          item.shortcut ? /* @__PURE__ */ jsx65("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.shortcut }) : null
+          item.shortcut ? /* @__PURE__ */ jsx68("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.shortcut }) : null
         ] }, item.id))
       ] }, groupIndex))
     ] })
@@ -2672,23 +2914,23 @@ function CommandMenu({ open, onClose, query = "", onQueryChange, groups, placeho
 }
 
 // src/components/forms/FormField.tsx
-import { jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs50 } from "react/jsx-runtime";
 function FormField({ label, hint, error, required, htmlFor, children, className = "" }) {
-  return /* @__PURE__ */ jsxs48("div", { className: `space-y-1.5 ${className}`, children: [
-    label ? /* @__PURE__ */ jsxs48(FieldLabel, { htmlFor, children: [
+  return /* @__PURE__ */ jsxs50("div", { className: `space-y-1.5 ${className}`, children: [
+    label ? /* @__PURE__ */ jsxs50(FieldLabel, { htmlFor, children: [
       label,
       required ? " *" : ""
     ] }) : null,
     children,
-    error ? /* @__PURE__ */ jsx66(FormError, { message: String(error) }) : hint ? /* @__PURE__ */ jsx66(FieldHint, { children: hint }) : null
+    error ? /* @__PURE__ */ jsx69(FormError, { message: String(error) }) : hint ? /* @__PURE__ */ jsx69(FieldHint, { children: hint }) : null
   ] });
 }
 
 // src/components/forms/Switch.tsx
-import { jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs51 } from "react/jsx-runtime";
 function Switch({ checked = false, onChange, disabled, label, description, className = "" }) {
-  return /* @__PURE__ */ jsxs49("label", { className: `flex cursor-pointer items-start gap-3 ${disabled ? "cursor-not-allowed opacity-50" : ""} ${className}`, children: [
-    /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsxs51("label", { className: `flex cursor-pointer items-start gap-3 ${disabled ? "cursor-not-allowed opacity-50" : ""} ${className}`, children: [
+    /* @__PURE__ */ jsx70(
       "button",
       {
         type: "button",
@@ -2697,22 +2939,22 @@ function Switch({ checked = false, onChange, disabled, label, description, class
         disabled,
         onClick: () => onChange?.(!checked),
         className: `relative mt-0.5 h-6 w-11 border border-[var(--tapiz-border-strong)] ${checked ? "bg-[var(--tapiz-accent)]" : "bg-[var(--tapiz-bg-surface-muted)]"}`,
-        children: /* @__PURE__ */ jsx67("span", { className: `absolute top-0.5 size-4 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] transition-transform ${checked ? "left-5" : "left-0.5"}` })
+        children: /* @__PURE__ */ jsx70("span", { className: `absolute top-0.5 size-4 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] transition-transform ${checked ? "left-5" : "left-0.5"}` })
       }
     ),
-    label || description ? /* @__PURE__ */ jsxs49("span", { children: [
-      label ? /* @__PURE__ */ jsx67("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: label }) : null,
-      description ? /* @__PURE__ */ jsx67("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: description }) : null
+    label || description ? /* @__PURE__ */ jsxs51("span", { children: [
+      label ? /* @__PURE__ */ jsx70("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: label }) : null,
+      description ? /* @__PURE__ */ jsx70("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: description }) : null
     ] }) : null
   ] });
 }
 
 // src/components/forms/ToggleGroup.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 function ToggleGroup({ options, value, onChange, className = "", fullWidth = false }) {
-  return /* @__PURE__ */ jsx68("div", { className: `inline-flex border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] p-1 ${fullWidth ? "w-full" : ""} ${className}`, children: options.map((option) => {
+  return /* @__PURE__ */ jsx71("div", { className: `inline-flex border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] p-1 ${fullWidth ? "w-full" : ""} ${className}`, children: options.map((option) => {
     const selected = option.value === value;
-    return /* @__PURE__ */ jsx68(
+    return /* @__PURE__ */ jsx71(
       "button",
       {
         type: "button",
@@ -2727,17 +2969,17 @@ function ToggleGroup({ options, value, onChange, className = "", fullWidth = fal
 }
 
 // src/components/forms/InputGroup.tsx
-import { jsx as jsx69, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs52 } from "react/jsx-runtime";
 function InputGroup({ prefix, suffix, children, className = "" }) {
-  return /* @__PURE__ */ jsxs50("div", { className: `flex items-stretch border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] focus-within:border-[var(--tapiz-border-focus)] focus-within:shadow-[inset_3px_0_0_var(--tapiz-signal)] ${className}`, children: [
-    prefix ? /* @__PURE__ */ jsx69("div", { className: "flex items-center border-r border-[var(--tapiz-border-subtle)] px-3 text-sm text-[var(--tapiz-text-muted)]", children: prefix }) : null,
-    /* @__PURE__ */ jsx69("div", { className: "min-w-0 flex-1 [&_input]:border-0 [&_input]:shadow-none [&_input]:focus:shadow-none", children }),
-    suffix ? /* @__PURE__ */ jsx69("div", { className: "flex items-center border-l border-[var(--tapiz-border-subtle)] px-3 text-sm text-[var(--tapiz-text-muted)]", children: suffix }) : null
+  return /* @__PURE__ */ jsxs52("div", { className: `flex items-stretch border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] focus-within:border-[var(--tapiz-border-focus)] focus-within:shadow-[inset_3px_0_0_var(--tapiz-signal)] ${className}`, children: [
+    prefix ? /* @__PURE__ */ jsx72("div", { className: "flex items-center border-r border-[var(--tapiz-border-subtle)] px-3 text-sm text-[var(--tapiz-text-muted)]", children: prefix }) : null,
+    /* @__PURE__ */ jsx72("div", { className: "min-w-0 flex-1 [&_input]:border-0 [&_input]:shadow-none [&_input]:focus:shadow-none", children }),
+    suffix ? /* @__PURE__ */ jsx72("div", { className: "flex items-center border-l border-[var(--tapiz-border-subtle)] px-3 text-sm text-[var(--tapiz-text-muted)]", children: suffix }) : null
   ] });
 }
 
 // src/components/feedback/Alert.tsx
-import { jsx as jsx70, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
 var toneClasses = {
   info: "border-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)] text-[var(--tapiz-info)]",
   success: "border-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)] text-[var(--tapiz-success)]",
@@ -2746,18 +2988,18 @@ var toneClasses = {
   neutral: "border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-secondary)]"
 };
 function Alert2({ tone: tone2 = "info", title, children, icon, actions, className = "" }) {
-  return /* @__PURE__ */ jsxs51("div", { className: `flex gap-3 border p-4 ${toneClasses[tone2]} ${className}`, children: [
-    icon ? /* @__PURE__ */ jsx70("div", { className: "mt-0.5 shrink-0", children: icon }) : null,
-    /* @__PURE__ */ jsxs51("div", { className: "min-w-0 flex-1", children: [
-      title ? /* @__PURE__ */ jsx70("div", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
-      children ? /* @__PURE__ */ jsx70("div", { className: "mt-1 text-sm text-[var(--tapiz-text-secondary)]", children }) : null
+  return /* @__PURE__ */ jsxs53("div", { className: `flex gap-3 border p-4 ${toneClasses[tone2]} ${className}`, children: [
+    icon ? /* @__PURE__ */ jsx73("div", { className: "mt-0.5 shrink-0", children: icon }) : null,
+    /* @__PURE__ */ jsxs53("div", { className: "min-w-0 flex-1", children: [
+      title ? /* @__PURE__ */ jsx73("div", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
+      children ? /* @__PURE__ */ jsx73("div", { className: "mt-1 text-sm text-[var(--tapiz-text-secondary)]", children }) : null
     ] }),
-    actions ? /* @__PURE__ */ jsx70("div", { className: "shrink-0", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx73("div", { className: "shrink-0", children: actions }) : null
   ] });
 }
 
 // src/components/feedback/Progress.tsx
-import { jsx as jsx71, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs54 } from "react/jsx-runtime";
 var tones = {
   accent: "bg-[var(--tapiz-accent)]",
   success: "bg-[var(--tapiz-success)]",
@@ -2766,34 +3008,34 @@ var tones = {
 };
 function Progress({ value, max = 100, label, showValue = false, tone: tone2 = "accent", className = "" }) {
   const percentage = Math.max(0, Math.min(100, value / max * 100));
-  return /* @__PURE__ */ jsxs52("div", { className, children: [
-    label || showValue ? /* @__PURE__ */ jsxs52("div", { className: "mb-1 flex items-center justify-between gap-3 text-xs text-[var(--tapiz-text-muted)]", children: [
-      label ? /* @__PURE__ */ jsx71("span", { children: label }) : /* @__PURE__ */ jsx71("span", {}),
-      showValue ? /* @__PURE__ */ jsxs52("span", { className: "font-mono", children: [
+  return /* @__PURE__ */ jsxs54("div", { className, children: [
+    label || showValue ? /* @__PURE__ */ jsxs54("div", { className: "mb-1 flex items-center justify-between gap-3 text-xs text-[var(--tapiz-text-muted)]", children: [
+      label ? /* @__PURE__ */ jsx74("span", { children: label }) : /* @__PURE__ */ jsx74("span", {}),
+      showValue ? /* @__PURE__ */ jsxs54("span", { className: "font-mono", children: [
         Math.round(percentage),
         "%"
       ] }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx71("div", { className: "h-2 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx71("div", { className: `h-full ${tones[tone2]}`, style: { width: `${percentage}%` } }) })
+    /* @__PURE__ */ jsx74("div", { className: "h-2 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx74("div", { className: `h-full ${tones[tone2]}`, style: { width: `${percentage}%` } }) })
   ] });
 }
 
 // src/components/shared/Avatar.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var sizes = { xs: "size-6 text-[10px]", sm: "size-8 text-xs", md: "size-10 text-sm", lg: "size-14 text-base" };
 function Avatar({ src, name = "?", size = "md", className = "" }) {
   const initials = name.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("") || "?";
-  return src ? /* @__PURE__ */ jsx72("img", { src, alt: name, className: `border border-[var(--tapiz-border-strong)] object-cover ${sizes[size]} ${className}` }) : /* @__PURE__ */ jsx72("span", { className: `inline-grid place-items-center border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] font-mono font-bold text-[var(--tapiz-accent)] ${sizes[size]} ${className}`, children: initials });
+  return src ? /* @__PURE__ */ jsx75("img", { src, alt: name, className: `border border-[var(--tapiz-border-strong)] object-cover ${sizes[size]} ${className}` }) : /* @__PURE__ */ jsx75("span", { className: `inline-grid place-items-center border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] font-mono font-bold text-[var(--tapiz-accent)] ${sizes[size]} ${className}`, children: initials });
 }
 
 // src/components/shared/Kbd.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 function Kbd({ children, className = "" }) {
-  return /* @__PURE__ */ jsx73("kbd", { className: `inline-flex min-w-5 items-center justify-center border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] px-1.5 py-0.5 font-mono text-[10px] font-bold text-[var(--tapiz-text-secondary)] shadow-[1px_1px_0_var(--tapiz-border-strong)] ${className}`, children });
+  return /* @__PURE__ */ jsx76("kbd", { className: `inline-flex min-w-5 items-center justify-center border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] px-1.5 py-0.5 font-mono text-[10px] font-bold text-[var(--tapiz-text-secondary)] shadow-[1px_1px_0_var(--tapiz-border-strong)] ${className}`, children });
 }
 
 // src/components/shared/Timeline.tsx
-import { jsx as jsx74, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
 var tones2 = {
   neutral: "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-muted)]",
   info: "border-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)] text-[var(--tapiz-info)]",
@@ -2802,94 +3044,94 @@ var tones2 = {
   danger: "border-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)] text-[var(--tapiz-danger)]"
 };
 function Timeline({ items, className = "" }) {
-  return /* @__PURE__ */ jsx74("ol", { className: `relative space-y-4 before:absolute before:left-4 before:top-2 before:h-[calc(100%-1rem)] before:w-px before:bg-[var(--tapiz-border-subtle)] ${className}`, children: items.map((item) => /* @__PURE__ */ jsxs53("li", { className: "relative flex gap-3", children: [
-    /* @__PURE__ */ jsx74("span", { className: `z-10 grid size-8 shrink-0 place-items-center border text-xs ${tones2[item.tone ?? "neutral"]}`, children: item.icon ?? "\u2022" }),
-    /* @__PURE__ */ jsxs53("span", { className: "min-w-0 flex-1 pb-2", children: [
-      /* @__PURE__ */ jsxs53("span", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
-        /* @__PURE__ */ jsx74("span", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
-        item.time ? /* @__PURE__ */ jsx74("span", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: item.time }) : null
+  return /* @__PURE__ */ jsx77("ol", { className: `relative space-y-4 before:absolute before:left-4 before:top-2 before:h-[calc(100%-1rem)] before:w-px before:bg-[var(--tapiz-border-subtle)] ${className}`, children: items.map((item) => /* @__PURE__ */ jsxs55("li", { className: "relative flex gap-3", children: [
+    /* @__PURE__ */ jsx77("span", { className: `z-10 grid size-8 shrink-0 place-items-center border text-xs ${tones2[item.tone ?? "neutral"]}`, children: item.icon ?? "\u2022" }),
+    /* @__PURE__ */ jsxs55("span", { className: "min-w-0 flex-1 pb-2", children: [
+      /* @__PURE__ */ jsxs55("span", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
+        /* @__PURE__ */ jsx77("span", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
+        item.time ? /* @__PURE__ */ jsx77("span", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: item.time }) : null
       ] }),
-      item.description ? /* @__PURE__ */ jsx74("span", { className: "mt-1 block text-sm text-[var(--tapiz-text-secondary)]", children: item.description }) : null
+      item.description ? /* @__PURE__ */ jsx77("span", { className: "mt-1 block text-sm text-[var(--tapiz-text-secondary)]", children: item.description }) : null
     ] })
   ] }, item.id)) });
 }
 
 // src/components/shared/KeyValueList.tsx
-import { jsx as jsx75, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
 function KeyValueList({ items, className = "", density = "normal" }) {
-  return /* @__PURE__ */ jsx75("dl", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item, index) => /* @__PURE__ */ jsxs54("div", { className: `grid gap-2 ${density === "compact" ? "p-3 md:grid-cols-[160px_1fr]" : "p-4 md:grid-cols-[220px_1fr]"}`, children: [
-    /* @__PURE__ */ jsx75("dt", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: item.keyLabel }),
-    /* @__PURE__ */ jsxs54("dd", { children: [
-      /* @__PURE__ */ jsx75("div", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.value }),
-      item.description ? /* @__PURE__ */ jsx75("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.description }) : null
+  return /* @__PURE__ */ jsx78("dl", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item, index) => /* @__PURE__ */ jsxs56("div", { className: `grid gap-2 ${density === "compact" ? "p-3 md:grid-cols-[160px_1fr]" : "p-4 md:grid-cols-[220px_1fr]"}`, children: [
+    /* @__PURE__ */ jsx78("dt", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: item.keyLabel }),
+    /* @__PURE__ */ jsxs56("dd", { children: [
+      /* @__PURE__ */ jsx78("div", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.value }),
+      item.description ? /* @__PURE__ */ jsx78("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.description }) : null
     ] })
   ] }, index)) });
 }
 
 // src/components/shared/CodeBlock.tsx
-import { jsx as jsx76, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
 function CodeBlock({ children, language, title, actions, className = "" }) {
-  return /* @__PURE__ */ jsxs55("figure", { className: `overflow-hidden border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] ${className}`, children: [
-    title || language || actions ? /* @__PURE__ */ jsxs55("figcaption", { className: "flex items-center justify-between gap-3 border-b border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] px-3 py-2", children: [
-      /* @__PURE__ */ jsx76("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: title ?? language }),
+  return /* @__PURE__ */ jsxs57("figure", { className: `overflow-hidden border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] ${className}`, children: [
+    title || language || actions ? /* @__PURE__ */ jsxs57("figcaption", { className: "flex items-center justify-between gap-3 border-b border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] px-3 py-2", children: [
+      /* @__PURE__ */ jsx79("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: title ?? language }),
       actions
     ] }) : null,
-    /* @__PURE__ */ jsx76("pre", { className: "overflow-auto p-4 text-sm leading-6 text-[var(--tapiz-text-secondary)]", children: /* @__PURE__ */ jsx76("code", { children }) })
+    /* @__PURE__ */ jsx79("pre", { className: "overflow-auto p-4 text-sm leading-6 text-[var(--tapiz-text-secondary)]", children: /* @__PURE__ */ jsx79("code", { children }) })
   ] });
 }
 
 // src/components/marketing/LogoCloud.tsx
-import { jsx as jsx77, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs58 } from "react/jsx-runtime";
 function LogoCloud({ title, items, className = "" }) {
-  return /* @__PURE__ */ jsx77("section", { className: `border-y border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] py-8 ${className}`, children: /* @__PURE__ */ jsxs56("div", { className: "mx-auto max-w-7xl px-[var(--tapiz-space-page-x)]", children: [
-    title ? /* @__PURE__ */ jsx77("p", { className: "mb-6 text-center font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: title }) : null,
-    /* @__PURE__ */ jsx77("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4 lg:grid-cols-6", children: items.map((item) => /* @__PURE__ */ jsx77("div", { className: "grid min-h-20 place-items-center border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] px-4 text-center text-sm font-semibold text-[var(--tapiz-text-secondary)]", children: item.logo ?? item.name }, item.name)) })
+  return /* @__PURE__ */ jsx80("section", { className: `border-y border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] py-8 ${className}`, children: /* @__PURE__ */ jsxs58("div", { className: "mx-auto max-w-7xl px-[var(--tapiz-space-page-x)]", children: [
+    title ? /* @__PURE__ */ jsx80("p", { className: "mb-6 text-center font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: title }) : null,
+    /* @__PURE__ */ jsx80("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4 lg:grid-cols-6", children: items.map((item) => /* @__PURE__ */ jsx80("div", { className: "grid min-h-20 place-items-center border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] px-4 text-center text-sm font-semibold text-[var(--tapiz-text-secondary)]", children: item.logo ?? item.name }, item.name)) })
   ] }) });
 }
 
 // src/components/marketing/TestimonialCard.tsx
-import { jsx as jsx78, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs59 } from "react/jsx-runtime";
 function TestimonialCard({ quote, author, role, avatarSrc, className = "", variant = "surface" }) {
-  return /* @__PURE__ */ jsxs57("figure", { className: `border bg-[var(--tapiz-bg-surface)] p-5 ${variant === "brutal" ? "border-2 border-[var(--tapiz-border-strong)] shadow-[var(--tapiz-shadow-brutal)]" : "border-[var(--tapiz-border-subtle)] shadow-[var(--tapiz-shadow-sm)]"} ${className}`, children: [
-    /* @__PURE__ */ jsxs57("blockquote", { className: "text-base leading-7 text-[var(--tapiz-text-secondary)]", children: [
+  return /* @__PURE__ */ jsxs59("figure", { className: `border bg-[var(--tapiz-bg-surface)] p-5 ${variant === "brutal" ? "border-2 border-[var(--tapiz-border-strong)] shadow-[var(--tapiz-shadow-brutal)]" : "border-[var(--tapiz-border-subtle)] shadow-[var(--tapiz-shadow-sm)]"} ${className}`, children: [
+    /* @__PURE__ */ jsxs59("blockquote", { className: "text-base leading-7 text-[var(--tapiz-text-secondary)]", children: [
       "\u201C",
       quote,
       "\u201D"
     ] }),
-    /* @__PURE__ */ jsxs57("figcaption", { className: "mt-5 flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx78(Avatar, { name: author, src: avatarSrc, size: "sm" }),
-      /* @__PURE__ */ jsxs57("span", { children: [
-        /* @__PURE__ */ jsx78("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: author }),
-        role ? /* @__PURE__ */ jsx78("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: role }) : null
+    /* @__PURE__ */ jsxs59("figcaption", { className: "mt-5 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx81(Avatar, { name: author, src: avatarSrc, size: "sm" }),
+      /* @__PURE__ */ jsxs59("span", { children: [
+        /* @__PURE__ */ jsx81("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: author }),
+        role ? /* @__PURE__ */ jsx81("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: role }) : null
       ] })
     ] })
   ] });
 }
 
 // src/components/marketing/PricingCard.tsx
-import { jsx as jsx79, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs60 } from "react/jsx-runtime";
 function PricingCard({ name, price, description, features = [], cta, highlighted = false, className = "" }) {
-  return /* @__PURE__ */ jsxs58("section", { className: `flex h-full flex-col border bg-[var(--tapiz-bg-surface)] p-6 ${highlighted ? "border-2 border-[var(--tapiz-border-strong)] shadow-[var(--tapiz-shadow-brutal-lg)]" : "border-[var(--tapiz-border-subtle)] shadow-[var(--tapiz-shadow-sm)]"} ${className}`, children: [
-    /* @__PURE__ */ jsxs58("div", { className: "flex-1", children: [
-      /* @__PURE__ */ jsx79("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: name }),
-      description ? /* @__PURE__ */ jsx79("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null,
-      /* @__PURE__ */ jsx79("div", { className: "mt-6 text-4xl font-semibold tracking-tight text-[var(--tapiz-text-primary)]", children: price }),
-      /* @__PURE__ */ jsx79("ul", { className: "mt-6 space-y-3 text-sm text-[var(--tapiz-text-secondary)]", children: features.map((feature, index) => /* @__PURE__ */ jsxs58("li", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx79("span", { className: "text-[var(--tapiz-success)]", children: "\u2713" }),
-        /* @__PURE__ */ jsx79("span", { children: feature })
+  return /* @__PURE__ */ jsxs60("section", { className: `flex h-full flex-col border bg-[var(--tapiz-bg-surface)] p-6 ${highlighted ? "border-2 border-[var(--tapiz-border-strong)] shadow-[var(--tapiz-shadow-brutal-lg)]" : "border-[var(--tapiz-border-subtle)] shadow-[var(--tapiz-shadow-sm)]"} ${className}`, children: [
+    /* @__PURE__ */ jsxs60("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsx82("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: name }),
+      description ? /* @__PURE__ */ jsx82("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null,
+      /* @__PURE__ */ jsx82("div", { className: "mt-6 text-4xl font-semibold tracking-tight text-[var(--tapiz-text-primary)]", children: price }),
+      /* @__PURE__ */ jsx82("ul", { className: "mt-6 space-y-3 text-sm text-[var(--tapiz-text-secondary)]", children: features.map((feature, index) => /* @__PURE__ */ jsxs60("li", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx82("span", { className: "text-[var(--tapiz-success)]", children: "\u2713" }),
+        /* @__PURE__ */ jsx82("span", { children: feature })
       ] }, index)) })
     ] }),
-    /* @__PURE__ */ jsx79("div", { className: "mt-6", children: cta ?? /* @__PURE__ */ jsx79(Button, { variant: highlighted ? "primary" : "secondary", fullWidth: true, children: "Get started" }) })
+    /* @__PURE__ */ jsx82("div", { className: "mt-6", children: cta ?? /* @__PURE__ */ jsx82(Button, { variant: highlighted ? "primary" : "secondary", fullWidth: true, children: "Get started" }) })
   ] });
 }
 
 // src/components/marketing/StatsBand.tsx
-import { jsx as jsx80, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs61 } from "react/jsx-runtime";
 function StatsBand({ items, className = "" }) {
-  return /* @__PURE__ */ jsx80("section", { className: `border-y border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-inverse)] text-[var(--tapiz-text-inverse)] ${className}`, children: /* @__PURE__ */ jsx80("div", { className: "mx-auto grid max-w-7xl divide-y divide-[color-mix(in_srgb,var(--tapiz-text-inverse)_24%,transparent)] px-[var(--tapiz-space-page-x)] md:grid-cols-3 md:divide-x md:divide-y-0", children: items.map((item, index) => /* @__PURE__ */ jsxs59("div", { className: "p-6 md:p-8", children: [
-    /* @__PURE__ */ jsx80("div", { className: "text-3xl font-semibold tracking-tight", children: item.value }),
-    /* @__PURE__ */ jsx80("div", { className: "mt-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] opacity-70", children: item.label }),
-    item.description ? /* @__PURE__ */ jsx80("div", { className: "mt-3 text-sm opacity-70", children: item.description }) : null
+  return /* @__PURE__ */ jsx83("section", { className: `border-y border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-inverse)] text-[var(--tapiz-text-inverse)] ${className}`, children: /* @__PURE__ */ jsx83("div", { className: "mx-auto grid max-w-7xl divide-y divide-[color-mix(in_srgb,var(--tapiz-text-inverse)_24%,transparent)] px-[var(--tapiz-space-page-x)] md:grid-cols-3 md:divide-x md:divide-y-0", children: items.map((item, index) => /* @__PURE__ */ jsxs61("div", { className: "p-6 md:p-8", children: [
+    /* @__PURE__ */ jsx83("div", { className: "text-3xl font-semibold tracking-tight", children: item.value }),
+    /* @__PURE__ */ jsx83("div", { className: "mt-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] opacity-70", children: item.label }),
+    item.description ? /* @__PURE__ */ jsx83("div", { className: "mt-3 text-sm opacity-70", children: item.description }) : null
   ] }, index)) }) });
 }
 
@@ -2928,7 +3170,7 @@ var tapizFrameworkPresets = {
 };
 
 // src/components/layout/Container.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var sizeClasses2 = {
   sm: "max-w-3xl",
   md: "max-w-5xl",
@@ -2937,7 +3179,7 @@ var sizeClasses2 = {
   full: "max-w-none"
 };
 function Container({ children, size = "lg", padded = true, className = "", style }) {
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx84(
     "div",
     {
       className: ["mx-auto w-full", sizeClasses2[size], padded ? "px-[var(--tapiz-space-page-x)]" : "", className].filter(Boolean).join(" "),
@@ -2948,7 +3190,7 @@ function Container({ children, size = "lg", padded = true, className = "", style
 }
 
 // src/components/layout/Surface.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var variantClasses5 = {
   canvas: "bg-[var(--tapiz-bg-page)] text-[var(--tapiz-text-primary)]",
   surface: "bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-primary)]",
@@ -2965,7 +3207,7 @@ var paddingClasses2 = {
   xl: "p-8"
 };
 function Surface({ children, variant = "surface", padding = "md", bordered = true, className = "", style }) {
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx85(
     "section",
     {
       className: [variantClasses5[variant], paddingClasses2[padding], bordered && variant !== "brutal" ? "border border-[var(--tapiz-border-subtle)]" : "", className].filter(Boolean).join(" "),
@@ -2976,23 +3218,23 @@ function Surface({ children, variant = "surface", padding = "md", bordered = tru
 }
 
 // src/components/layout/Divider.tsx
-import { jsx as jsx83, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs62 } from "react/jsx-runtime";
 function Divider({ orientation = "horizontal", label, className = "" }) {
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx83("div", { className: `mx-2 min-h-6 w-px bg-[var(--tapiz-border-subtle)] ${className}`, "aria-hidden": "true" });
+    return /* @__PURE__ */ jsx86("div", { className: `mx-2 min-h-6 w-px bg-[var(--tapiz-border-subtle)] ${className}`, "aria-hidden": "true" });
   }
   if (label) {
-    return /* @__PURE__ */ jsxs60("div", { className: `flex items-center gap-3 ${className}`, children: [
-      /* @__PURE__ */ jsx83("div", { className: "h-px flex-1 bg-[var(--tapiz-border-subtle)]" }),
-      /* @__PURE__ */ jsx83("span", { className: "font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: label }),
-      /* @__PURE__ */ jsx83("div", { className: "h-px flex-1 bg-[var(--tapiz-border-subtle)]" })
+    return /* @__PURE__ */ jsxs62("div", { className: `flex items-center gap-3 ${className}`, children: [
+      /* @__PURE__ */ jsx86("div", { className: "h-px flex-1 bg-[var(--tapiz-border-subtle)]" }),
+      /* @__PURE__ */ jsx86("span", { className: "font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: label }),
+      /* @__PURE__ */ jsx86("div", { className: "h-px flex-1 bg-[var(--tapiz-border-subtle)]" })
     ] });
   }
-  return /* @__PURE__ */ jsx83("hr", { className: `border-[var(--tapiz-border-subtle)] ${className}` });
+  return /* @__PURE__ */ jsx86("hr", { className: `border-[var(--tapiz-border-subtle)] ${className}` });
 }
 
 // src/components/layout/ResponsiveGrid.tsx
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var gapClasses3 = {
   sm: "gap-3",
   md: "gap-4",
@@ -3000,7 +3242,7 @@ var gapClasses3 = {
   xl: "gap-8"
 };
 function ResponsiveGrid({ children, min = "18rem", gap = "md", className = "", style }) {
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx87(
     "div",
     {
       className: `grid ${gapClasses3[gap]} ${className}`,
@@ -3011,7 +3253,7 @@ function ResponsiveGrid({ children, min = "18rem", gap = "md", className = "", s
 }
 
 // src/components/data-display/Sparkline.tsx
-import { jsx as jsx85, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs63 } from "react/jsx-runtime";
 function Sparkline({ values, width = 160, height = 48, label = "Trend", className = "", style }) {
   const safeValues = values.length ? values : [0];
   const min = Math.min(...safeValues);
@@ -3023,40 +3265,40 @@ function Sparkline({ values, width = 160, height = 48, label = "Trend", classNam
     const y = height - (value - min) / range * (height - 6) - 3;
     return `${x},${y}`;
   }).join(" ");
-  return /* @__PURE__ */ jsxs61("svg", { className, style, width, height, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": label, children: [
-    /* @__PURE__ */ jsx85("polyline", { points, fill: "none", stroke: "var(--tapiz-accent)", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "miter" }),
-    /* @__PURE__ */ jsx85("line", { x1: "0", x2: width, y1: height - 1, y2: height - 1, stroke: "var(--tapiz-border-subtle)", strokeWidth: "1" })
+  return /* @__PURE__ */ jsxs63("svg", { className, style, width, height, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": label, children: [
+    /* @__PURE__ */ jsx88("polyline", { points, fill: "none", stroke: "var(--tapiz-accent)", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "miter" }),
+    /* @__PURE__ */ jsx88("line", { x1: "0", x2: width, y1: height - 1, y2: height - 1, stroke: "var(--tapiz-border-subtle)", strokeWidth: "1" })
   ] });
 }
 
 // src/components/data-display/BarList.tsx
-import { jsx as jsx86, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs64 } from "react/jsx-runtime";
 function BarList({ items, max, valueFormatter = (value) => value, className = "" }) {
   const computedMax = max ?? Math.max(1, ...items.map((item) => item.value));
-  return /* @__PURE__ */ jsx86("div", { className: `space-y-3 ${className}`, children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx89("div", { className: `space-y-3 ${className}`, children: items.map((item, index) => {
     const percent = Math.max(0, Math.min(100, item.value / computedMax * 100));
-    return /* @__PURE__ */ jsxs62("div", { children: [
-      /* @__PURE__ */ jsxs62("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
-        /* @__PURE__ */ jsx86("span", { className: "font-medium text-[var(--tapiz-text-secondary)]", children: item.label }),
-        /* @__PURE__ */ jsx86("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: valueFormatter(item.value) })
+    return /* @__PURE__ */ jsxs64("div", { children: [
+      /* @__PURE__ */ jsxs64("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsx89("span", { className: "font-medium text-[var(--tapiz-text-secondary)]", children: item.label }),
+        /* @__PURE__ */ jsx89("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: valueFormatter(item.value) })
       ] }),
-      /* @__PURE__ */ jsx86("div", { className: "h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx86("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${percent}%` } }) }),
-      item.detail ? /* @__PURE__ */ jsx86("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.detail }) : null
+      /* @__PURE__ */ jsx89("div", { className: "h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx89("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${percent}%` } }) }),
+      item.detail ? /* @__PURE__ */ jsx89("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.detail }) : null
     ] }, index);
   }) });
 }
 
 // src/components/data-display/DonutMetric.tsx
-import { jsx as jsx87, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs65 } from "react/jsx-runtime";
 function DonutMetric({ value, max = 100, label, caption, size = 112, className = "" }) {
   const radius = 42;
   const circumference = 2 * Math.PI * radius;
   const ratio = Math.max(0, Math.min(1, value / max));
   const offset = circumference * (1 - ratio);
-  return /* @__PURE__ */ jsxs63("div", { className: `inline-flex items-center gap-4 ${className}`, children: [
-    /* @__PURE__ */ jsxs63("svg", { width: size, height: size, viewBox: "0 0 112 112", role: "img", "aria-label": `${Math.round(ratio * 100)}%`, children: [
-      /* @__PURE__ */ jsx87("circle", { cx: "56", cy: "56", r: radius, fill: "none", stroke: "var(--tapiz-border-subtle)", strokeWidth: "10" }),
-      /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsxs65("div", { className: `inline-flex items-center gap-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs65("svg", { width: size, height: size, viewBox: "0 0 112 112", role: "img", "aria-label": `${Math.round(ratio * 100)}%`, children: [
+      /* @__PURE__ */ jsx90("circle", { cx: "56", cy: "56", r: radius, fill: "none", stroke: "var(--tapiz-border-subtle)", strokeWidth: "10" }),
+      /* @__PURE__ */ jsx90(
         "circle",
         {
           cx: "56",
@@ -3071,22 +3313,22 @@ function DonutMetric({ value, max = 100, label, caption, size = 112, className =
           transform: "rotate(-90 56 56)"
         }
       ),
-      /* @__PURE__ */ jsxs63("text", { x: "56", y: "61", textAnchor: "middle", className: "fill-[var(--tapiz-text-primary)] font-mono text-lg font-bold", children: [
+      /* @__PURE__ */ jsxs65("text", { x: "56", y: "61", textAnchor: "middle", className: "fill-[var(--tapiz-text-primary)] font-mono text-lg font-bold", children: [
         Math.round(ratio * 100),
         "%"
       ] })
     ] }),
-    label || caption ? /* @__PURE__ */ jsxs63("div", { children: [
-      label ? /* @__PURE__ */ jsx87("div", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: label }) : null,
-      caption ? /* @__PURE__ */ jsx87("div", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: caption }) : null
+    label || caption ? /* @__PURE__ */ jsxs65("div", { children: [
+      label ? /* @__PURE__ */ jsx90("div", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: label }) : null,
+      caption ? /* @__PURE__ */ jsx90("div", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: caption }) : null
     ] }) : null
   ] });
 }
 
 // src/components/data-display/FilterChip.tsx
-import { jsx as jsx88, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs66 } from "react/jsx-runtime";
 function FilterChip({ children, active = false, onRemove, className = "" }) {
-  return /* @__PURE__ */ jsxs64(
+  return /* @__PURE__ */ jsxs66(
     "span",
     {
       className: [
@@ -3096,56 +3338,56 @@ function FilterChip({ children, active = false, onRemove, className = "" }) {
       ].join(" "),
       children: [
         children,
-        onRemove ? /* @__PURE__ */ jsx88("button", { type: "button", onClick: onRemove, className: "text-[var(--tapiz-text-muted)] hover:text-[var(--tapiz-danger)]", "aria-label": "Remove filter", children: "\xD7" }) : null
+        onRemove ? /* @__PURE__ */ jsx91("button", { type: "button", onClick: onRemove, className: "text-[var(--tapiz-text-muted)] hover:text-[var(--tapiz-danger)]", "aria-label": "Remove filter", children: "\xD7" }) : null
       ]
     }
   );
 }
 
 // src/components/data-display/DataToolbar.tsx
-import { jsx as jsx89, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs67 } from "react/jsx-runtime";
 function DataToolbar({ title, description, search, filters, actions, className = "" }) {
-  return /* @__PURE__ */ jsxs65("div", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4 ${className}`, children: [
-    /* @__PURE__ */ jsxs65("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [
-      /* @__PURE__ */ jsxs65("div", { children: [
-        title ? /* @__PURE__ */ jsx89("h3", { className: "text-base font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
-        description ? /* @__PURE__ */ jsx89("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null
+  return /* @__PURE__ */ jsxs67("div", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs67("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [
+      /* @__PURE__ */ jsxs67("div", { children: [
+        title ? /* @__PURE__ */ jsx92("h3", { className: "text-base font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
+        description ? /* @__PURE__ */ jsx92("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null
       ] }),
-      actions ? /* @__PURE__ */ jsx89("div", { className: "flex flex-wrap gap-2", children: actions }) : null
+      actions ? /* @__PURE__ */ jsx92("div", { className: "flex flex-wrap gap-2", children: actions }) : null
     ] }),
-    search || filters ? /* @__PURE__ */ jsxs65("div", { className: "mt-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
-      search ? /* @__PURE__ */ jsx89("div", { className: "min-w-0 flex-1", children: search }) : null,
-      filters ? /* @__PURE__ */ jsx89("div", { className: "flex flex-wrap gap-2", children: filters }) : null
+    search || filters ? /* @__PURE__ */ jsxs67("div", { className: "mt-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
+      search ? /* @__PURE__ */ jsx92("div", { className: "min-w-0 flex-1", children: search }) : null,
+      filters ? /* @__PURE__ */ jsx92("div", { className: "flex flex-wrap gap-2", children: filters }) : null
     ] }) : null
   ] });
 }
 
 // src/components/framework/ResourceCard.tsx
-import { Fragment as Fragment5, jsx as jsx90, jsxs as jsxs66 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx93, jsxs as jsxs68 } from "react/jsx-runtime";
 function ResourceCard({ title, description, eyebrow, icon, meta, status, actions, href, className = "" }) {
-  const content = /* @__PURE__ */ jsxs66(Fragment5, { children: [
-    /* @__PURE__ */ jsxs66("div", { className: "flex items-start justify-between gap-4", children: [
-      /* @__PURE__ */ jsxs66("div", { className: "flex min-w-0 items-start gap-3", children: [
-        icon ? /* @__PURE__ */ jsx90("div", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-2 text-[var(--tapiz-accent)]", children: icon }) : null,
-        /* @__PURE__ */ jsxs66("div", { className: "min-w-0", children: [
-          eyebrow ? /* @__PURE__ */ jsx90("div", { className: "kicker mb-2", children: eyebrow }) : null,
-          /* @__PURE__ */ jsx90("h3", { className: "truncate text-base font-semibold text-[var(--tapiz-text-primary)]", children: title }),
-          description ? /* @__PURE__ */ jsx90("p", { className: "mt-2 line-clamp-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
+  const content = /* @__PURE__ */ jsxs68(Fragment5, { children: [
+    /* @__PURE__ */ jsxs68("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs68("div", { className: "flex min-w-0 items-start gap-3", children: [
+        icon ? /* @__PURE__ */ jsx93("div", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-2 text-[var(--tapiz-accent)]", children: icon }) : null,
+        /* @__PURE__ */ jsxs68("div", { className: "min-w-0", children: [
+          eyebrow ? /* @__PURE__ */ jsx93("div", { className: "kicker mb-2", children: eyebrow }) : null,
+          /* @__PURE__ */ jsx93("h3", { className: "truncate text-base font-semibold text-[var(--tapiz-text-primary)]", children: title }),
+          description ? /* @__PURE__ */ jsx93("p", { className: "mt-2 line-clamp-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
         ] })
       ] }),
-      status ? /* @__PURE__ */ jsx90(Badge, { children: status }) : null
+      status ? /* @__PURE__ */ jsx93(Badge, { children: status }) : null
     ] }),
-    meta || actions ? /* @__PURE__ */ jsxs66("div", { className: "mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--tapiz-border-subtle)] pt-4", children: [
-      meta ? /* @__PURE__ */ jsx90("div", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: meta }) : /* @__PURE__ */ jsx90("span", {}),
-      actions ? /* @__PURE__ */ jsx90("div", { className: "flex flex-wrap gap-2", children: actions }) : null
+    meta || actions ? /* @__PURE__ */ jsxs68("div", { className: "mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--tapiz-border-subtle)] pt-4", children: [
+      meta ? /* @__PURE__ */ jsx93("div", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: meta }) : /* @__PURE__ */ jsx93("span", {}),
+      actions ? /* @__PURE__ */ jsx93("div", { className: "flex flex-wrap gap-2", children: actions }) : null
     ] }) : null
   ] });
   const classes = `block border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5 shadow-[var(--tapiz-shadow-sm)] hover:border-[var(--tapiz-border-strong)] hover:shadow-[var(--tapiz-shadow-md)] ${className}`;
-  return href ? /* @__PURE__ */ jsx90("a", { href, className: classes, children: content }) : /* @__PURE__ */ jsx90("article", { className: classes, children: content });
+  return href ? /* @__PURE__ */ jsx93("a", { href, className: classes, children: content }) : /* @__PURE__ */ jsx93("article", { className: classes, children: content });
 }
 
 // src/components/framework/IntegrationCard.tsx
-import { jsx as jsx91, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs69 } from "react/jsx-runtime";
 var statusLabel = {
   connected: "Connected",
   disconnected: "Disconnected",
@@ -3159,26 +3401,26 @@ var statusVariant = {
   error: "danger"
 };
 function IntegrationCard({ name, description, logo, status = "disconnected", lastSync, actions, className = "" }) {
-  return /* @__PURE__ */ jsxs67("article", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5 ${className}`, children: [
-    /* @__PURE__ */ jsxs67("div", { className: "flex items-start justify-between gap-4", children: [
-      /* @__PURE__ */ jsxs67("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsx91("div", { className: "flex size-11 items-center justify-center border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] text-[var(--tapiz-accent)]", children: logo ?? /* @__PURE__ */ jsx91("span", { className: "font-mono text-xs", children: "API" }) }),
-        /* @__PURE__ */ jsxs67("div", { children: [
-          /* @__PURE__ */ jsx91("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: name }),
-          description ? /* @__PURE__ */ jsx91("p", { className: "mt-1 text-sm leading-5 text-[var(--tapiz-text-muted)]", children: description }) : null
+  return /* @__PURE__ */ jsxs69("article", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5 ${className}`, children: [
+    /* @__PURE__ */ jsxs69("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs69("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx94("div", { className: "flex size-11 items-center justify-center border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] text-[var(--tapiz-accent)]", children: logo ?? /* @__PURE__ */ jsx94("span", { className: "font-mono text-xs", children: "API" }) }),
+        /* @__PURE__ */ jsxs69("div", { children: [
+          /* @__PURE__ */ jsx94("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: name }),
+          description ? /* @__PURE__ */ jsx94("p", { className: "mt-1 text-sm leading-5 text-[var(--tapiz-text-muted)]", children: description }) : null
         ] })
       ] }),
-      /* @__PURE__ */ jsx91(StatusBadge, { variant: statusVariant[status], label: statusLabel[status] })
+      /* @__PURE__ */ jsx94(StatusBadge, { variant: statusVariant[status], label: statusLabel[status] })
     ] }),
-    /* @__PURE__ */ jsxs67("div", { className: "mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--tapiz-border-subtle)] pt-4", children: [
-      /* @__PURE__ */ jsx91("div", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: lastSync ?? "No sync yet" }),
-      actions ? /* @__PURE__ */ jsx91("div", { className: "flex gap-2", children: actions }) : null
+    /* @__PURE__ */ jsxs69("div", { className: "mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--tapiz-border-subtle)] pt-4", children: [
+      /* @__PURE__ */ jsx94("div", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: lastSync ?? "No sync yet" }),
+      actions ? /* @__PURE__ */ jsx94("div", { className: "flex gap-2", children: actions }) : null
     ] })
   ] });
 }
 
 // src/components/framework/HealthIndicator.tsx
-import { jsx as jsx92, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs70 } from "react/jsx-runtime";
 var toneClasses2 = {
   operational: "bg-[var(--tapiz-success)]",
   degraded: "bg-[var(--tapiz-warning)]",
@@ -3192,34 +3434,34 @@ var defaultLabel = {
   unknown: "Unknown"
 };
 function HealthIndicator({ tone: tone2 = "unknown", label, detail, className = "" }) {
-  return /* @__PURE__ */ jsxs68("div", { className: `inline-flex items-center gap-3 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] px-3 py-2 ${className}`, children: [
-    /* @__PURE__ */ jsx92("span", { className: `size-2.5 ${toneClasses2[tone2]}`, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx92("span", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: label ?? defaultLabel[tone2] }),
-    detail ? /* @__PURE__ */ jsx92("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: detail }) : null
+  return /* @__PURE__ */ jsxs70("div", { className: `inline-flex items-center gap-3 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] px-3 py-2 ${className}`, children: [
+    /* @__PURE__ */ jsx95("span", { className: `size-2.5 ${toneClasses2[tone2]}`, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx95("span", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: label ?? defaultLabel[tone2] }),
+    detail ? /* @__PURE__ */ jsx95("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: detail }) : null
   ] });
 }
 
 // src/components/framework/AuditLog.tsx
-import { jsx as jsx93, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs71 } from "react/jsx-runtime";
 function AuditLog({ items, className = "" }) {
-  return /* @__PURE__ */ jsx93("div", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item, index) => /* @__PURE__ */ jsxs69("div", { className: "flex gap-3 p-4", children: [
-    /* @__PURE__ */ jsx93(Avatar, { name: item.initials ?? item.actor, size: "sm" }),
-    /* @__PURE__ */ jsxs69("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs69("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsxs69("p", { className: "text-sm text-[var(--tapiz-text-secondary)]", children: [
-          /* @__PURE__ */ jsx93("strong", { className: "text-[var(--tapiz-text-primary)]", children: item.actor }),
+  return /* @__PURE__ */ jsx96("div", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item, index) => /* @__PURE__ */ jsxs71("div", { className: "flex gap-3 p-4", children: [
+    /* @__PURE__ */ jsx96(Avatar, { name: item.initials ?? item.actor, size: "sm" }),
+    /* @__PURE__ */ jsxs71("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs71("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs71("p", { className: "text-sm text-[var(--tapiz-text-secondary)]", children: [
+          /* @__PURE__ */ jsx96("strong", { className: "text-[var(--tapiz-text-primary)]", children: item.actor }),
           " ",
           item.action
         ] }),
-        /* @__PURE__ */ jsx93("span", { className: "font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.timestamp })
+        /* @__PURE__ */ jsx96("span", { className: "font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.timestamp })
       ] }),
-      item.detail ? /* @__PURE__ */ jsx93("div", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: item.detail }) : null
+      item.detail ? /* @__PURE__ */ jsx96("div", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: item.detail }) : null
     ] })
   ] }, index)) });
 }
 
 // src/components/framework/KanbanBoard.tsx
-import { jsx as jsx94, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs72 } from "react/jsx-runtime";
 var toneClasses3 = {
   default: "border-[var(--tapiz-border-subtle)]",
   accent: "border-[var(--tapiz-accent)]",
@@ -3228,65 +3470,65 @@ var toneClasses3 = {
   danger: "border-[var(--tapiz-danger)]"
 };
 function KanbanBoard({ columns, className = "" }) {
-  return /* @__PURE__ */ jsx94("div", { className: `grid gap-4 overflow-x-auto md:grid-flow-col md:auto-cols-[minmax(18rem,1fr)] ${className}`, children: columns.map((column) => /* @__PURE__ */ jsxs70("section", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-3", children: [
-    /* @__PURE__ */ jsxs70("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs70("div", { children: [
-        /* @__PURE__ */ jsx94("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: column.title }),
-        column.description ? /* @__PURE__ */ jsx94("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: column.description }) : null
+  return /* @__PURE__ */ jsx97("div", { className: `grid gap-4 overflow-x-auto md:grid-flow-col md:auto-cols-[minmax(18rem,1fr)] ${className}`, children: columns.map((column) => /* @__PURE__ */ jsxs72("section", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-3", children: [
+    /* @__PURE__ */ jsxs72("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs72("div", { children: [
+        /* @__PURE__ */ jsx97("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: column.title }),
+        column.description ? /* @__PURE__ */ jsx97("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: column.description }) : null
       ] }),
-      /* @__PURE__ */ jsx94("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: column.items.length })
+      /* @__PURE__ */ jsx97("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: column.items.length })
     ] }),
-    /* @__PURE__ */ jsx94("div", { className: "space-y-3", children: column.items.map((item) => /* @__PURE__ */ jsxs70("article", { className: `border-l-2 bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-sm)] ${toneClasses3[item.tone ?? "default"]}`, children: [
-      /* @__PURE__ */ jsx94("h4", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: item.title }),
-      item.description ? /* @__PURE__ */ jsx94("p", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: item.description }) : null,
-      item.meta ? /* @__PURE__ */ jsx94("div", { className: "mt-3 font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.meta }) : null
+    /* @__PURE__ */ jsx97("div", { className: "space-y-3", children: column.items.map((item) => /* @__PURE__ */ jsxs72("article", { className: `border-l-2 bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-sm)] ${toneClasses3[item.tone ?? "default"]}`, children: [
+      /* @__PURE__ */ jsx97("h4", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: item.title }),
+      item.description ? /* @__PURE__ */ jsx97("p", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: item.description }) : null,
+      item.meta ? /* @__PURE__ */ jsx97("div", { className: "mt-3 font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.meta }) : null
     ] }, item.id)) })
   ] }, column.id)) });
 }
 
 // src/components/framework/AccessMatrix.tsx
-import { jsx as jsx95, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs73 } from "react/jsx-runtime";
 function AccessMatrix({ roles, permissions, className = "" }) {
-  return /* @__PURE__ */ jsx95("div", { className: `overflow-x-auto border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: /* @__PURE__ */ jsxs71("table", { className: "min-w-full text-sm", children: [
-    /* @__PURE__ */ jsx95("thead", { children: /* @__PURE__ */ jsxs71("tr", { children: [
-      /* @__PURE__ */ jsx95("th", { className: "px-4 py-3 text-left", children: "Permission" }),
-      roles.map((role) => /* @__PURE__ */ jsx95("th", { className: "px-4 py-3 text-center", children: role.label }, role.key))
+  return /* @__PURE__ */ jsx98("div", { className: `overflow-x-auto border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: /* @__PURE__ */ jsxs73("table", { className: "min-w-full text-sm", children: [
+    /* @__PURE__ */ jsx98("thead", { children: /* @__PURE__ */ jsxs73("tr", { children: [
+      /* @__PURE__ */ jsx98("th", { className: "px-4 py-3 text-left", children: "Permission" }),
+      roles.map((role) => /* @__PURE__ */ jsx98("th", { className: "px-4 py-3 text-center", children: role.label }, role.key))
     ] }) }),
-    /* @__PURE__ */ jsx95("tbody", { children: permissions.map((permission) => /* @__PURE__ */ jsxs71("tr", { children: [
-      /* @__PURE__ */ jsxs71("td", { className: "px-4 py-3", children: [
-        /* @__PURE__ */ jsx95("div", { className: "font-medium text-[var(--tapiz-text-primary)]", children: permission.label }),
-        permission.description ? /* @__PURE__ */ jsx95("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: permission.description }) : null
+    /* @__PURE__ */ jsx98("tbody", { children: permissions.map((permission) => /* @__PURE__ */ jsxs73("tr", { children: [
+      /* @__PURE__ */ jsxs73("td", { className: "px-4 py-3", children: [
+        /* @__PURE__ */ jsx98("div", { className: "font-medium text-[var(--tapiz-text-primary)]", children: permission.label }),
+        permission.description ? /* @__PURE__ */ jsx98("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: permission.description }) : null
       ] }),
-      roles.map((role) => /* @__PURE__ */ jsx95("td", { className: "px-4 py-3 text-center", children: /* @__PURE__ */ jsx95("span", { className: permission.roles[role.key] ? "text-[var(--tapiz-success)]" : "text-[var(--tapiz-text-disabled)]", children: permission.roles[role.key] ? "\u2713" : "\u2014" }) }, role.key))
+      roles.map((role) => /* @__PURE__ */ jsx98("td", { className: "px-4 py-3 text-center", children: /* @__PURE__ */ jsx98("span", { className: permission.roles[role.key] ? "text-[var(--tapiz-success)]" : "text-[var(--tapiz-text-disabled)]", children: permission.roles[role.key] ? "\u2713" : "\u2014" }) }, role.key))
     ] }, permission.key)) })
   ] }) });
 }
 
 // src/components/framework/CalendarGrid.tsx
-import { jsx as jsx96, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs74 } from "react/jsx-runtime";
 var defaultWeekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 function CalendarGrid({ days, weekdays = defaultWeekdays, className = "" }) {
-  return /* @__PURE__ */ jsxs72("div", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: [
-    /* @__PURE__ */ jsx96("div", { className: "grid grid-cols-7 border-b border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: weekdays.map((day, index) => /* @__PURE__ */ jsx96("div", { className: "px-3 py-2 font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: day }, index)) }),
-    /* @__PURE__ */ jsx96("div", { className: "grid grid-cols-7", children: days.map((day, index) => /* @__PURE__ */ jsxs72("div", { className: `min-h-28 border-b border-r border-[var(--tapiz-border-subtle)] p-2 ${day.muted ? "opacity-45" : ""} ${day.selected ? "bg-[var(--tapiz-accent-soft)]" : ""}`, children: [
-      /* @__PURE__ */ jsxs72("div", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx96("span", { className: "font-mono text-xs text-[var(--tapiz-text-primary)]", children: day.date }),
-        day.label ? /* @__PURE__ */ jsx96("span", { className: "text-[10px] text-[var(--tapiz-text-muted)]", children: day.label }) : null
+  return /* @__PURE__ */ jsxs74("div", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: [
+    /* @__PURE__ */ jsx99("div", { className: "grid grid-cols-7 border-b border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: weekdays.map((day, index) => /* @__PURE__ */ jsx99("div", { className: "px-3 py-2 font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: day }, index)) }),
+    /* @__PURE__ */ jsx99("div", { className: "grid grid-cols-7", children: days.map((day, index) => /* @__PURE__ */ jsxs74("div", { className: `min-h-28 border-b border-r border-[var(--tapiz-border-subtle)] p-2 ${day.muted ? "opacity-45" : ""} ${day.selected ? "bg-[var(--tapiz-accent-soft)]" : ""}`, children: [
+      /* @__PURE__ */ jsxs74("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx99("span", { className: "font-mono text-xs text-[var(--tapiz-text-primary)]", children: day.date }),
+        day.label ? /* @__PURE__ */ jsx99("span", { className: "text-[10px] text-[var(--tapiz-text-muted)]", children: day.label }) : null
       ] }),
-      day.events?.length ? /* @__PURE__ */ jsx96("div", { className: "mt-2 space-y-1", children: day.events.map((event, eventIndex) => /* @__PURE__ */ jsx96("div", { className: "truncate border-l-2 border-[var(--tapiz-accent)] bg-[var(--tapiz-bg-surface-muted)] px-2 py-1 text-[11px] text-[var(--tapiz-text-secondary)]", children: event }, eventIndex)) }) : null
+      day.events?.length ? /* @__PURE__ */ jsx99("div", { className: "mt-2 space-y-1", children: day.events.map((event, eventIndex) => /* @__PURE__ */ jsx99("div", { className: "truncate border-l-2 border-[var(--tapiz-accent)] bg-[var(--tapiz-bg-surface-muted)] px-2 py-1 text-[11px] text-[var(--tapiz-text-secondary)]", children: event }, eventIndex)) }) : null
     ] }, index)) })
   ] });
 }
 
 // src/components/forms/Slider.tsx
-import { jsx as jsx97, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs75 } from "react/jsx-runtime";
 function Slider({ label, valueLabel, className = "", ...props }) {
-  return /* @__PURE__ */ jsxs73("label", { className: `block ${className}`, children: [
-    label || valueLabel ? /* @__PURE__ */ jsxs73("span", { className: "mb-2 flex items-center justify-between gap-3 text-sm", children: [
-      label ? /* @__PURE__ */ jsx97("span", { className: "font-medium text-[var(--tapiz-text-secondary)]", children: label }) : /* @__PURE__ */ jsx97("span", {}),
-      valueLabel ? /* @__PURE__ */ jsx97("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: valueLabel }) : null
+  return /* @__PURE__ */ jsxs75("label", { className: `block ${className}`, children: [
+    label || valueLabel ? /* @__PURE__ */ jsxs75("span", { className: "mb-2 flex items-center justify-between gap-3 text-sm", children: [
+      label ? /* @__PURE__ */ jsx100("span", { className: "font-medium text-[var(--tapiz-text-secondary)]", children: label }) : /* @__PURE__ */ jsx100("span", {}),
+      valueLabel ? /* @__PURE__ */ jsx100("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: valueLabel }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx97(
+    /* @__PURE__ */ jsx100(
       "input",
       {
         ...props,
@@ -3298,31 +3540,31 @@ function Slider({ label, valueLabel, className = "", ...props }) {
 }
 
 // src/components/forms/FileDropzone.tsx
-import { jsx as jsx98, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs76 } from "react/jsx-runtime";
 function FileDropzone({ title = "Drop files here", description, actionLabel = "Browse", className = "", ...props }) {
-  return /* @__PURE__ */ jsxs74("label", { className: `block cursor-pointer border-2 border-dashed border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-6 text-center hover:bg-[var(--tapiz-bg-surface-muted)] ${className}`, children: [
-    /* @__PURE__ */ jsx98("input", { ...props, type: "file", className: "sr-only" }),
-    /* @__PURE__ */ jsx98("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }),
-    description ? /* @__PURE__ */ jsx98("span", { className: "mt-2 block text-sm text-[var(--tapiz-text-muted)]", children: description }) : null,
-    /* @__PURE__ */ jsx98("span", { className: "mt-4 inline-flex border border-[var(--tapiz-border-strong)] px-3 py-1.5 font-mono text-xs uppercase tracking-[0.12em] text-[var(--tapiz-accent)]", children: actionLabel })
+  return /* @__PURE__ */ jsxs76("label", { className: `block cursor-pointer border-2 border-dashed border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-6 text-center hover:bg-[var(--tapiz-bg-surface-muted)] ${className}`, children: [
+    /* @__PURE__ */ jsx101("input", { ...props, type: "file", className: "sr-only" }),
+    /* @__PURE__ */ jsx101("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }),
+    description ? /* @__PURE__ */ jsx101("span", { className: "mt-2 block text-sm text-[var(--tapiz-text-muted)]", children: description }) : null,
+    /* @__PURE__ */ jsx101("span", { className: "mt-4 inline-flex border border-[var(--tapiz-border-strong)] px-3 py-1.5 font-mono text-xs uppercase tracking-[0.12em] text-[var(--tapiz-accent)]", children: actionLabel })
   ] });
 }
 
 // src/components/forms/PasswordInput.tsx
-import { useState as useState8 } from "react";
-import { jsx as jsx99, jsxs as jsxs75 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { jsx as jsx102, jsxs as jsxs77 } from "react/jsx-runtime";
 function PasswordInput({
   revealLabel = "Show password",
   className = "",
   ...props
 }) {
-  const [visible, setVisible] = useState8(false);
-  return /* @__PURE__ */ jsxs75(
+  const [visible, setVisible] = useState11(false);
+  return /* @__PURE__ */ jsxs77(
     "div",
     {
       className: `flex border border-(--tapiz-border-strong) bg-(--tapiz-bg-surface) focus-within:border-(--tapiz-border-focus) focus-within:shadow-[inset_3px_0_0_0_var(--tapiz-signal)] ${className}`,
       children: [
-        /* @__PURE__ */ jsx99(
+        /* @__PURE__ */ jsx102(
           "input",
           {
             ...props,
@@ -3330,7 +3572,7 @@ function PasswordInput({
             className: "min-w-0 flex-1 border-0 bg-transparent px-3 py-2 text-sm text-(--tapiz-text-primary) outline-none focus:shadow-none!"
           }
         ),
-        /* @__PURE__ */ jsx99(
+        /* @__PURE__ */ jsx102(
           "button",
           {
             type: "button",
@@ -3339,7 +3581,7 @@ function PasswordInput({
             onClick: () => setVisible((v) => !v),
             tabIndex: -1,
             className: "grid place-items-center px-3 text-(--tapiz-text-muted) transition-colors hover:text-(--tapiz-text-primary)",
-            children: visible ? /* @__PURE__ */ jsx99(EyeOff, { size: 15 }) : /* @__PURE__ */ jsx99(Eye, { size: 15 })
+            children: visible ? /* @__PURE__ */ jsx102(EyeOff, { size: 15 }) : /* @__PURE__ */ jsx102(Eye, { size: 15 })
           }
         )
       ]
@@ -3348,12 +3590,12 @@ function PasswordInput({
 }
 
 // src/components/forms/TextareaCounter.tsx
-import { jsx as jsx100, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs78 } from "react/jsx-runtime";
 function TextareaCounter({ maxLength, value = "", className = "", ...props }) {
   const count = value.length;
-  return /* @__PURE__ */ jsxs76("div", { className, children: [
-    /* @__PURE__ */ jsx100("textarea", { ...props, value, maxLength, className: "input-field min-h-28" }),
-    /* @__PURE__ */ jsxs76("div", { className: "mt-1 text-right font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: [
+  return /* @__PURE__ */ jsxs78("div", { className, children: [
+    /* @__PURE__ */ jsx103("textarea", { ...props, value, maxLength, className: "input-field min-h-28" }),
+    /* @__PURE__ */ jsxs78("div", { className: "mt-1 text-right font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: [
       count,
       "/",
       maxLength
@@ -3362,7 +3604,7 @@ function TextareaCounter({ maxLength, value = "", className = "", ...props }) {
 }
 
 // src/components/feedback/Callout.tsx
-import { jsx as jsx101, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs79 } from "react/jsx-runtime";
 var toneClasses4 = {
   info: "border-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)]",
   success: "border-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)]",
@@ -3371,73 +3613,73 @@ var toneClasses4 = {
   neutral: "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]"
 };
 function Callout({ title, children, tone: tone2 = "info", icon, actions, className = "" }) {
-  return /* @__PURE__ */ jsx101("aside", { className: `border-l-4 p-4 ${toneClasses4[tone2]} ${className}`, children: /* @__PURE__ */ jsxs77("div", { className: "flex gap-3", children: [
-    icon ? /* @__PURE__ */ jsx101("div", { className: "text-[var(--tapiz-text-primary)]", children: icon }) : null,
-    /* @__PURE__ */ jsxs77("div", { className: "min-w-0 flex-1", children: [
-      title ? /* @__PURE__ */ jsx101("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
-      children ? /* @__PURE__ */ jsx101("div", { className: "mt-1 text-sm leading-6 text-[var(--tapiz-text-secondary)]", children }) : null,
-      actions ? /* @__PURE__ */ jsx101("div", { className: "mt-3 flex flex-wrap gap-2", children: actions }) : null
+  return /* @__PURE__ */ jsx104("aside", { className: `border-l-4 p-4 ${toneClasses4[tone2]} ${className}`, children: /* @__PURE__ */ jsxs79("div", { className: "flex gap-3", children: [
+    icon ? /* @__PURE__ */ jsx104("div", { className: "text-[var(--tapiz-text-primary)]", children: icon }) : null,
+    /* @__PURE__ */ jsxs79("div", { className: "min-w-0 flex-1", children: [
+      title ? /* @__PURE__ */ jsx104("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
+      children ? /* @__PURE__ */ jsx104("div", { className: "mt-1 text-sm leading-6 text-[var(--tapiz-text-secondary)]", children }) : null,
+      actions ? /* @__PURE__ */ jsx104("div", { className: "mt-3 flex flex-wrap gap-2", children: actions }) : null
     ] })
   ] }) });
 }
 
 // src/components/feedback/LoadingOverlay.tsx
-import { jsx as jsx102, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs80 } from "react/jsx-runtime";
 function LoadingOverlay({ visible = false, label = "Loading", children, className = "" }) {
-  return /* @__PURE__ */ jsxs78("div", { className: `relative ${className}`, children: [
+  return /* @__PURE__ */ jsxs80("div", { className: `relative ${className}`, children: [
     children,
-    visible ? /* @__PURE__ */ jsx102("div", { className: "absolute inset-0 grid place-items-center border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-overlay)] backdrop-blur-sm", children: /* @__PURE__ */ jsxs78("div", { className: "flex items-center gap-3 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] px-4 py-3 text-sm text-[var(--tapiz-text-primary)] shadow-[var(--tapiz-shadow-brutal)]", children: [
-      /* @__PURE__ */ jsx102(Spinner, {}),
-      /* @__PURE__ */ jsx102("span", { children: label })
+    visible ? /* @__PURE__ */ jsx105("div", { className: "absolute inset-0 grid place-items-center border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-overlay)] backdrop-blur-sm", children: /* @__PURE__ */ jsxs80("div", { className: "flex items-center gap-3 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] px-4 py-3 text-sm text-[var(--tapiz-text-primary)] shadow-[var(--tapiz-shadow-brutal)]", children: [
+      /* @__PURE__ */ jsx105(Spinner, {}),
+      /* @__PURE__ */ jsx105("span", { children: label })
     ] }) }) : null
   ] });
 }
 
 // src/components/feedback/NotificationList.tsx
-import { jsx as jsx103, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs81 } from "react/jsx-runtime";
 function NotificationList({ items, className = "" }) {
-  return /* @__PURE__ */ jsx103("div", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item) => /* @__PURE__ */ jsxs79("article", { className: "flex gap-3 p-4", children: [
-    /* @__PURE__ */ jsx103("span", { className: `mt-1 size-2.5 ${item.unread ? "bg-[var(--tapiz-accent)]" : "bg-[var(--tapiz-border-subtle)]"}`, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs79("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs79("div", { className: "flex items-start justify-between gap-3", children: [
-        /* @__PURE__ */ jsx103("h3", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: item.title }),
-        item.time ? /* @__PURE__ */ jsx103("span", { className: "font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.time }) : null
+  return /* @__PURE__ */ jsx106("div", { className: `divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: items.map((item) => /* @__PURE__ */ jsxs81("article", { className: "flex gap-3 p-4", children: [
+    /* @__PURE__ */ jsx106("span", { className: `mt-1 size-2.5 ${item.unread ? "bg-[var(--tapiz-accent)]" : "bg-[var(--tapiz-border-subtle)]"}`, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs81("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs81("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsx106("h3", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: item.title }),
+        item.time ? /* @__PURE__ */ jsx106("span", { className: "font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.time }) : null
       ] }),
-      item.description ? /* @__PURE__ */ jsx103("p", { className: "mt-1 text-sm leading-5 text-[var(--tapiz-text-muted)]", children: item.description }) : null,
-      item.action ? /* @__PURE__ */ jsx103("div", { className: "mt-3", children: item.action }) : null
+      item.description ? /* @__PURE__ */ jsx106("p", { className: "mt-1 text-sm leading-5 text-[var(--tapiz-text-muted)]", children: item.description }) : null,
+      item.action ? /* @__PURE__ */ jsx106("div", { className: "mt-3", children: item.action }) : null
     ] })
   ] }, item.id)) });
 }
 
 // src/components/layout/MasonryGrid.tsx
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var columnClasses = { 2: "md:columns-2", 3: "md:columns-2 xl:columns-3", 4: "md:columns-2 lg:columns-3 xl:columns-4" };
 var gapClasses4 = { sm: "gap-3", md: "gap-5", lg: "gap-8" };
 function MasonryGrid({ children, columns = 3, gap = "md", className = "", style }) {
-  return /* @__PURE__ */ jsx104("div", { className: [columnClasses[columns], gapClasses4[gap], className].filter(Boolean).join(" "), style, children });
+  return /* @__PURE__ */ jsx107("div", { className: [columnClasses[columns], gapClasses4[gap], className].filter(Boolean).join(" "), style, children });
 }
 
 // src/components/layout/PageRail.tsx
-import { Fragment as Fragment6, jsx as jsx105, jsxs as jsxs80 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx108, jsxs as jsxs82 } from "react/jsx-runtime";
 function PageRail({ title, items, actions, className = "", style }) {
-  return /* @__PURE__ */ jsxs80("aside", { className: ["sticky top-20 rounded-none border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-sm)]", className].filter(Boolean).join(" "), style, children: [
-    title ? /* @__PURE__ */ jsx105("div", { className: "kicker mb-3 px-2", children: title }) : null,
-    /* @__PURE__ */ jsx105("nav", { className: "flex flex-col gap-1", children: items.map((item, index) => {
-      const content = /* @__PURE__ */ jsxs80(Fragment6, { children: [
-        /* @__PURE__ */ jsx105("span", { className: "truncate", children: item.label }),
-        item.meta ? /* @__PURE__ */ jsx105("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.meta }) : null
+  return /* @__PURE__ */ jsxs82("aside", { className: ["sticky top-20 rounded-none border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-sm)]", className].filter(Boolean).join(" "), style, children: [
+    title ? /* @__PURE__ */ jsx108("div", { className: "kicker mb-3 px-2", children: title }) : null,
+    /* @__PURE__ */ jsx108("nav", { className: "flex flex-col gap-1", children: items.map((item, index) => {
+      const content = /* @__PURE__ */ jsxs82(Fragment6, { children: [
+        /* @__PURE__ */ jsx108("span", { className: "truncate", children: item.label }),
+        item.meta ? /* @__PURE__ */ jsx108("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.meta }) : null
       ] });
       const classes = ["flex items-center justify-between gap-3 border px-3 py-2 text-sm transition", item.active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-text-primary)]" : "border-transparent text-[var(--tapiz-text-muted)] hover:border-[var(--tapiz-border-subtle)] hover:text-[var(--tapiz-text-primary)]"].join(" ");
-      return item.href ? /* @__PURE__ */ jsx105("a", { href: item.href, className: classes, children: content }, index) : /* @__PURE__ */ jsx105("div", { className: classes, children: content }, index);
+      return item.href ? /* @__PURE__ */ jsx108("a", { href: item.href, className: classes, children: content }, index) : /* @__PURE__ */ jsx108("div", { className: classes, children: content }, index);
     }) }),
-    actions ? /* @__PURE__ */ jsx105("div", { className: "mt-3 border-t border-[var(--tapiz-border-subtle)] pt-3", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx108("div", { className: "mt-3 border-t border-[var(--tapiz-border-subtle)] pt-3", children: actions }) : null
   ] });
 }
 
 // src/components/layout/StickyBar.tsx
-import { jsx as jsx106 } from "react/jsx-runtime";
+import { jsx as jsx109 } from "react/jsx-runtime";
 function StickyBar({ children, position = "top", className = "", style }) {
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx109(
     "div",
     {
       className: ["z-30 border-[var(--tapiz-border-subtle)] bg-[color-mix(in_srgb,var(--tapiz-bg-canvas)_88%,transparent)] px-4 py-3 backdrop-blur-xl", position === "top" ? "sticky top-0 border-b" : "sticky bottom-0 border-t", className].filter(Boolean).join(" "),
@@ -3448,191 +3690,191 @@ function StickyBar({ children, position = "top", className = "", style }) {
 }
 
 // src/components/forms/Combobox.tsx
-import { jsx as jsx107, jsxs as jsxs81 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs83 } from "react/jsx-runtime";
 function Combobox({ options, placeholder = "Select option", invalid = false, className = "", ...props }) {
-  return /* @__PURE__ */ jsxs81("select", { ...props, className: ["input-field appearance-none bg-[var(--tapiz-bg-surface)]", invalid ? "border-warn focus:border-warn" : "", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx107("option", { value: "", children: placeholder }),
-    options.map((option) => /* @__PURE__ */ jsx107("option", { value: option.value, children: String(option.label) }, option.value))
+  return /* @__PURE__ */ jsxs83("select", { ...props, className: ["input-field appearance-none bg-[var(--tapiz-bg-surface)]", invalid ? "border-warn focus:border-warn" : "", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx110("option", { value: "", children: placeholder }),
+    options.map((option) => /* @__PURE__ */ jsx110("option", { value: option.value, children: String(option.label) }, option.value))
   ] });
 }
 
 // src/components/forms/DateRangePicker.tsx
-import { jsx as jsx108, jsxs as jsxs82 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs84 } from "react/jsx-runtime";
 function DateRangePicker({ startLabel = "From", endLabel = "To", startProps, endProps, className = "" }) {
-  return /* @__PURE__ */ jsxs82("div", { className: ["grid gap-3 md:grid-cols-2", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs82("label", { className: "flex flex-col gap-1.5 text-sm text-[var(--tapiz-text-muted)]", children: [
-      /* @__PURE__ */ jsx108("span", { children: startLabel }),
-      /* @__PURE__ */ jsx108("input", { type: "date", ...startProps, className: ["input-field", startProps?.className || ""].join(" ") })
+  return /* @__PURE__ */ jsxs84("div", { className: ["grid gap-3 md:grid-cols-2", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs84("label", { className: "flex flex-col gap-1.5 text-sm text-[var(--tapiz-text-muted)]", children: [
+      /* @__PURE__ */ jsx111("span", { children: startLabel }),
+      /* @__PURE__ */ jsx111("input", { type: "date", ...startProps, className: ["input-field", startProps?.className || ""].join(" ") })
     ] }),
-    /* @__PURE__ */ jsxs82("label", { className: "flex flex-col gap-1.5 text-sm text-[var(--tapiz-text-muted)]", children: [
-      /* @__PURE__ */ jsx108("span", { children: endLabel }),
-      /* @__PURE__ */ jsx108("input", { type: "date", ...endProps, className: ["input-field", endProps?.className || ""].join(" ") })
+    /* @__PURE__ */ jsxs84("label", { className: "flex flex-col gap-1.5 text-sm text-[var(--tapiz-text-muted)]", children: [
+      /* @__PURE__ */ jsx111("span", { children: endLabel }),
+      /* @__PURE__ */ jsx111("input", { type: "date", ...endProps, className: ["input-field", endProps?.className || ""].join(" ") })
     ] })
   ] });
 }
 
 // src/components/forms/ColorSwatchPicker.tsx
-import { jsx as jsx109, jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs85 } from "react/jsx-runtime";
 function ColorSwatchPicker({ options, value, onChange, className = "" }) {
-  return /* @__PURE__ */ jsx109("div", { className: ["flex flex-wrap gap-2", className].filter(Boolean).join(" "), children: options.map((option) => {
+  return /* @__PURE__ */ jsx112("div", { className: ["flex flex-wrap gap-2", className].filter(Boolean).join(" "), children: options.map((option) => {
     const selected = option.value === value;
-    return /* @__PURE__ */ jsxs83("button", { type: "button", "aria-pressed": selected, onClick: () => onChange?.(option.value), className: ["flex items-center gap-2 border px-3 py-2 text-sm transition", selected ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)]" : "border-[var(--tapiz-border-subtle)] hover:border-[var(--tapiz-border-strong)]"].join(" "), children: [
-      /* @__PURE__ */ jsx109("span", { className: "h-4 w-4 border border-[var(--tapiz-border-strong)]", style: { background: option.color } }),
-      /* @__PURE__ */ jsx109("span", { children: option.label })
+    return /* @__PURE__ */ jsxs85("button", { type: "button", "aria-pressed": selected, onClick: () => onChange?.(option.value), className: ["flex items-center gap-2 border px-3 py-2 text-sm transition", selected ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)]" : "border-[var(--tapiz-border-subtle)] hover:border-[var(--tapiz-border-strong)]"].join(" "), children: [
+      /* @__PURE__ */ jsx112("span", { className: "h-4 w-4 border border-[var(--tapiz-border-strong)]", style: { background: option.color } }),
+      /* @__PURE__ */ jsx112("span", { children: option.label })
     ] }, option.value);
   }) });
 }
 
 // src/components/forms/RatingInput.tsx
-import { jsx as jsx110 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
 function RatingInput({ value = 0, max = 5, icon = "\u2605", onChange, label = "Rating", className = "" }) {
-  return /* @__PURE__ */ jsx110("div", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), role: "radiogroup", "aria-label": label, children: Array.from({ length: max }, (_, index) => {
+  return /* @__PURE__ */ jsx113("div", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), role: "radiogroup", "aria-label": label, children: Array.from({ length: max }, (_, index) => {
     const score = index + 1;
     const active = score <= value;
-    return /* @__PURE__ */ jsx110("button", { type: "button", role: "radio", "aria-checked": active, onClick: () => onChange?.(score), className: ["grid h-9 w-9 place-items-center border text-base transition", active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-accent)]" : "border-[var(--tapiz-border-subtle)] text-[var(--tapiz-text-muted)] hover:border-[var(--tapiz-border-strong)]"].join(" "), children: icon }, score);
+    return /* @__PURE__ */ jsx113("button", { type: "button", role: "radio", "aria-checked": active, onClick: () => onChange?.(score), className: ["grid h-9 w-9 place-items-center border text-base transition", active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-accent)]" : "border-[var(--tapiz-border-subtle)] text-[var(--tapiz-text-muted)] hover:border-[var(--tapiz-border-strong)]"].join(" "), children: icon }, score);
   }) });
 }
 
 // src/components/data-display/ScoreRing.tsx
-import { jsx as jsx111, jsxs as jsxs84 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs86 } from "react/jsx-runtime";
 function ScoreRing({ value, max = 100, label, size = 112, className = "" }) {
   const normalized = Math.max(0, Math.min(1, value / max));
   const radius = 42;
   const circumference = 2 * Math.PI * radius;
   const dash = circumference * normalized;
-  return /* @__PURE__ */ jsxs84("div", { className: ["inline-grid place-items-center", className].filter(Boolean).join(" "), style: { width: size, height: size }, children: [
-    /* @__PURE__ */ jsxs84("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
-      /* @__PURE__ */ jsx111("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--tapiz-border-subtle)", strokeWidth: "10" }),
-      /* @__PURE__ */ jsx111("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--tapiz-accent)", strokeWidth: "10", strokeLinecap: "square", strokeDasharray: `${dash} ${circumference - dash}` })
+  return /* @__PURE__ */ jsxs86("div", { className: ["inline-grid place-items-center", className].filter(Boolean).join(" "), style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsxs86("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
+      /* @__PURE__ */ jsx114("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--tapiz-border-subtle)", strokeWidth: "10" }),
+      /* @__PURE__ */ jsx114("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--tapiz-accent)", strokeWidth: "10", strokeLinecap: "square", strokeDasharray: `${dash} ${circumference - dash}` })
     ] }),
-    /* @__PURE__ */ jsxs84("div", { className: "absolute text-center", children: [
-      /* @__PURE__ */ jsxs84("div", { className: "font-display text-2xl font-semibold text-[var(--tapiz-text-primary)]", children: [
+    /* @__PURE__ */ jsxs86("div", { className: "absolute text-center", children: [
+      /* @__PURE__ */ jsxs86("div", { className: "font-display text-2xl font-semibold text-[var(--tapiz-text-primary)]", children: [
         Math.round(normalized * 100),
         "%"
       ] }),
-      label ? /* @__PURE__ */ jsx111("div", { className: "font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: label }) : null
+      label ? /* @__PURE__ */ jsx114("div", { className: "font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: label }) : null
     ] })
   ] });
 }
 
 // src/components/data-display/HeatmapGrid.tsx
-import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx115 } from "react/jsx-runtime";
 function HeatmapGrid({ cells, columns = 7, max, className = "" }) {
   const peak = max ?? Math.max(1, ...cells.map((cell) => cell.value));
-  return /* @__PURE__ */ jsx112("div", { className: ["grid gap-1", className].filter(Boolean).join(" "), style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }, children: cells.map((cell, index) => {
+  return /* @__PURE__ */ jsx115("div", { className: ["grid gap-1", className].filter(Boolean).join(" "), style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }, children: cells.map((cell, index) => {
     const opacity = 0.15 + Math.min(1, cell.value / peak) * 0.75;
-    return /* @__PURE__ */ jsx112("div", { title: cell.title, className: "aspect-square border border-[var(--tapiz-border-subtle)]", style: { background: `color-mix(in srgb, var(--tapiz-accent) ${Math.round(opacity * 100)}%, transparent)` }, children: cell.label ? /* @__PURE__ */ jsx112("span", { className: "sr-only", children: cell.label }) : null }, index);
+    return /* @__PURE__ */ jsx115("div", { title: cell.title, className: "aspect-square border border-[var(--tapiz-border-subtle)]", style: { background: `color-mix(in srgb, var(--tapiz-accent) ${Math.round(opacity * 100)}%, transparent)` }, children: cell.label ? /* @__PURE__ */ jsx115("span", { className: "sr-only", children: cell.label }) : null }, index);
   }) });
 }
 
 // src/components/data-display/FunnelChart.tsx
-import { jsx as jsx113, jsxs as jsxs85 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs87 } from "react/jsx-runtime";
 function FunnelChart({ steps, className = "" }) {
   const max = Math.max(1, ...steps.map((step) => step.value));
-  return /* @__PURE__ */ jsx113("div", { className: ["space-y-3", className].filter(Boolean).join(" "), children: steps.map((step, index) => {
+  return /* @__PURE__ */ jsx116("div", { className: ["space-y-3", className].filter(Boolean).join(" "), children: steps.map((step, index) => {
     const width = Math.max(8, step.value / max * 100);
-    return /* @__PURE__ */ jsxs85("div", { children: [
-      /* @__PURE__ */ jsxs85("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
-        /* @__PURE__ */ jsx113("span", { className: "font-medium text-[var(--tapiz-text-primary)]", children: step.label }),
-        /* @__PURE__ */ jsxs85("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: [
+    return /* @__PURE__ */ jsxs87("div", { children: [
+      /* @__PURE__ */ jsxs87("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsx116("span", { className: "font-medium text-[var(--tapiz-text-primary)]", children: step.label }),
+        /* @__PURE__ */ jsxs87("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: [
           step.value,
           step.meta ? ` \xB7 ${String(step.meta)}` : ""
         ] })
       ] }),
-      /* @__PURE__ */ jsx113("div", { className: "h-9 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx113("div", { className: "h-full border-r border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)]", style: { width: `${width}%` } }) })
+      /* @__PURE__ */ jsx116("div", { className: "h-9 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx116("div", { className: "h-full border-r border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)]", style: { width: `${width}%` } }) })
     ] }, index);
   }) });
 }
 
 // src/components/data-display/ComparisonMeter.tsx
-import { jsx as jsx114, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx117, jsxs as jsxs88 } from "react/jsx-runtime";
 function ComparisonMeter({ leftLabel, rightLabel, value, className = "" }) {
   const clamped = Math.max(0, Math.min(100, value));
-  return /* @__PURE__ */ jsxs86("div", { className, children: [
-    /* @__PURE__ */ jsxs86("div", { className: "mb-2 flex justify-between gap-3 text-sm text-[var(--tapiz-text-muted)]", children: [
-      /* @__PURE__ */ jsx114("span", { children: leftLabel }),
-      /* @__PURE__ */ jsx114("span", { children: rightLabel })
+  return /* @__PURE__ */ jsxs88("div", { className, children: [
+    /* @__PURE__ */ jsxs88("div", { className: "mb-2 flex justify-between gap-3 text-sm text-[var(--tapiz-text-muted)]", children: [
+      /* @__PURE__ */ jsx117("span", { children: leftLabel }),
+      /* @__PURE__ */ jsx117("span", { children: rightLabel })
     ] }),
-    /* @__PURE__ */ jsxs86("div", { className: "relative h-3 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]", children: [
-      /* @__PURE__ */ jsx114("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${clamped}%` } }),
-      /* @__PURE__ */ jsx114("div", { className: "absolute top-[-6px] h-6 w-px bg-[var(--tapiz-border-strong)]", style: { left: `${clamped}%` } })
+    /* @__PURE__ */ jsxs88("div", { className: "relative h-3 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]", children: [
+      /* @__PURE__ */ jsx117("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${clamped}%` } }),
+      /* @__PURE__ */ jsx117("div", { className: "absolute top-[-6px] h-6 w-px bg-[var(--tapiz-border-strong)]", style: { left: `${clamped}%` } })
     ] })
   ] });
 }
 
 // src/components/framework/ActivityFeed.tsx
-import { jsx as jsx115, jsxs as jsxs87 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs89 } from "react/jsx-runtime";
 function ActivityFeed({ items, className = "" }) {
-  return /* @__PURE__ */ jsx115("div", { className: ["divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)]", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs87("div", { className: "flex gap-3 p-4", children: [
-    /* @__PURE__ */ jsx115(Avatar, { name: item.actor, src: item.avatarUrl, size: "sm" }),
-    /* @__PURE__ */ jsxs87("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs87("p", { className: "text-sm text-[var(--tapiz-text-primary)]", children: [
-        /* @__PURE__ */ jsx115("strong", { children: item.actor }),
+  return /* @__PURE__ */ jsx118("div", { className: ["divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)]", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs89("div", { className: "flex gap-3 p-4", children: [
+    /* @__PURE__ */ jsx118(Avatar, { name: item.actor, src: item.avatarUrl, size: "sm" }),
+    /* @__PURE__ */ jsxs89("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs89("p", { className: "text-sm text-[var(--tapiz-text-primary)]", children: [
+        /* @__PURE__ */ jsx118("strong", { children: item.actor }),
         " ",
         item.action
       ] }),
-      item.meta ? /* @__PURE__ */ jsx115("div", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: item.meta }) : null
+      item.meta ? /* @__PURE__ */ jsx118("div", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: item.meta }) : null
     ] }),
-    item.time ? /* @__PURE__ */ jsx115("div", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: item.time }) : null
+    item.time ? /* @__PURE__ */ jsx118("div", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: item.time }) : null
   ] }, index)) });
 }
 
 // src/components/framework/InboxList.tsx
-import { jsx as jsx116, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs90 } from "react/jsx-runtime";
 function InboxList({ items, className = "" }) {
-  return /* @__PURE__ */ jsx116("div", { className: ["divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)]", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs88("article", { className: ["p-4 transition hover:bg-[var(--tapiz-bg-surface-muted)]", item.unread ? "border-l-4 border-l-[var(--tapiz-accent)]" : ""].join(" "), children: [
-    /* @__PURE__ */ jsxs88("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs88("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx116("h3", { className: "truncate text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
-        item.sender ? /* @__PURE__ */ jsx116("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.sender }) : null
+  return /* @__PURE__ */ jsx119("div", { className: ["divide-y divide-[var(--tapiz-border-subtle)] border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)]", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs90("article", { className: ["p-4 transition hover:bg-[var(--tapiz-bg-surface-muted)]", item.unread ? "border-l-4 border-l-[var(--tapiz-accent)]" : ""].join(" "), children: [
+    /* @__PURE__ */ jsxs90("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs90("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx119("h3", { className: "truncate text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
+        item.sender ? /* @__PURE__ */ jsx119("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.sender }) : null
       ] }),
-      /* @__PURE__ */ jsxs88("div", { className: "flex shrink-0 items-center gap-2", children: [
-        item.tag ? /* @__PURE__ */ jsx116(Badge, { children: item.tag }) : null,
-        item.time ? /* @__PURE__ */ jsx116("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.time }) : null
+      /* @__PURE__ */ jsxs90("div", { className: "flex shrink-0 items-center gap-2", children: [
+        item.tag ? /* @__PURE__ */ jsx119(Badge, { children: item.tag }) : null,
+        item.time ? /* @__PURE__ */ jsx119("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.time }) : null
       ] })
     ] }),
-    item.snippet ? /* @__PURE__ */ jsx116("p", { className: "mt-2 line-clamp-2 text-sm text-[var(--tapiz-text-muted)]", children: item.snippet }) : null
+    item.snippet ? /* @__PURE__ */ jsx119("p", { className: "mt-2 line-clamp-2 text-sm text-[var(--tapiz-text-muted)]", children: item.snippet }) : null
   ] }, index)) });
 }
 
 // src/components/framework/ApprovalQueue.tsx
-import { jsx as jsx117, jsxs as jsxs89 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs91 } from "react/jsx-runtime";
 function ApprovalQueue({ items, onApprove, onReject, className = "" }) {
-  return /* @__PURE__ */ jsx117("div", { className: ["space-y-3", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsx117("article", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4", children: /* @__PURE__ */ jsxs89("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [
-    /* @__PURE__ */ jsxs89("div", { children: [
-      /* @__PURE__ */ jsxs89("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsx117("h3", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
-        item.priority ? /* @__PURE__ */ jsx117(Badge, { variant: item.priority === "high" ? "danger" : item.priority === "medium" ? "warning" : "default", children: item.priority }) : null
+  return /* @__PURE__ */ jsx120("div", { className: ["space-y-3", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsx120("article", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4", children: /* @__PURE__ */ jsxs91("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [
+    /* @__PURE__ */ jsxs91("div", { children: [
+      /* @__PURE__ */ jsxs91("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx120("h3", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
+        item.priority ? /* @__PURE__ */ jsx120(Badge, { variant: item.priority === "high" ? "danger" : item.priority === "medium" ? "warning" : "default", children: item.priority }) : null
       ] }),
-      item.requester ? /* @__PURE__ */ jsxs89("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: [
+      item.requester ? /* @__PURE__ */ jsxs91("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: [
         "Requested by ",
         item.requester
       ] }) : null,
-      item.description ? /* @__PURE__ */ jsx117("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: item.description }) : null
+      item.description ? /* @__PURE__ */ jsx120("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: item.description }) : null
     ] }),
-    /* @__PURE__ */ jsxs89("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx117(Button, { size: "sm", variant: "secondary", onClick: () => onReject?.(index), children: "Reject" }),
-      /* @__PURE__ */ jsx117(Button, { size: "sm", onClick: () => onApprove?.(index), children: "Approve" })
+    /* @__PURE__ */ jsxs91("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx120(Button, { size: "sm", variant: "secondary", onClick: () => onReject?.(index), children: "Reject" }),
+      /* @__PURE__ */ jsx120(Button, { size: "sm", onClick: () => onApprove?.(index), children: "Approve" })
     ] })
   ] }) }, index)) });
 }
 
 // src/components/framework/SLAStatus.tsx
-import { jsx as jsx118, jsxs as jsxs90 } from "react/jsx-runtime";
+import { jsx as jsx121, jsxs as jsxs92 } from "react/jsx-runtime";
 function SLAStatus({ label, value, target = 95, className = "" }) {
   const ok = value >= target;
-  return /* @__PURE__ */ jsxs90("div", { className: ["border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs90("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx118("span", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: label }),
-      /* @__PURE__ */ jsx118("span", { className: ["font-mono text-xs", ok ? "text-[var(--tapiz-success)]" : "text-[var(--tapiz-warning)]"].join(" "), children: ok ? "Within SLA" : "At risk" })
+  return /* @__PURE__ */ jsxs92("div", { className: ["border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs92("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx121("span", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: label }),
+      /* @__PURE__ */ jsx121("span", { className: ["font-mono text-xs", ok ? "text-[var(--tapiz-success)]" : "text-[var(--tapiz-warning)]"].join(" "), children: ok ? "Within SLA" : "At risk" })
     ] }),
-    /* @__PURE__ */ jsx118("div", { className: "mt-3 h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx118("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${Math.max(0, Math.min(100, value))}%` } }) }),
-    /* @__PURE__ */ jsxs90("div", { className: "mt-2 flex justify-between font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: [
-      /* @__PURE__ */ jsxs90("span", { children: [
+    /* @__PURE__ */ jsx121("div", { className: "mt-3 h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx121("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${Math.max(0, Math.min(100, value))}%` } }) }),
+    /* @__PURE__ */ jsxs92("div", { className: "mt-2 flex justify-between font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: [
+      /* @__PURE__ */ jsxs92("span", { children: [
         value,
         "%"
       ] }),
-      /* @__PURE__ */ jsxs90("span", { children: [
+      /* @__PURE__ */ jsxs92("span", { children: [
         "Target ",
         target,
         "%"
@@ -3642,81 +3884,81 @@ function SLAStatus({ label, value, target = 95, className = "" }) {
 }
 
 // src/components/framework/FeatureFlagTable.tsx
-import { jsx as jsx119, jsxs as jsxs91 } from "react/jsx-runtime";
+import { jsx as jsx122, jsxs as jsxs93 } from "react/jsx-runtime";
 function FeatureFlagTable({ flags, onToggle, className = "" }) {
-  return /* @__PURE__ */ jsx119("div", { className: ["overflow-hidden border border-[var(--tapiz-border-subtle)]", className].filter(Boolean).join(" "), children: flags.map((flag) => /* @__PURE__ */ jsxs91("div", { className: "grid gap-3 border-b border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4 last:border-b-0 md:grid-cols-[1fr_auto_auto] md:items-center", children: [
-    /* @__PURE__ */ jsxs91("div", { children: [
-      /* @__PURE__ */ jsxs91("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsx119("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: flag.name }),
-        /* @__PURE__ */ jsx119(Badge, { children: flag.key })
+  return /* @__PURE__ */ jsx122("div", { className: ["overflow-hidden border border-[var(--tapiz-border-subtle)]", className].filter(Boolean).join(" "), children: flags.map((flag) => /* @__PURE__ */ jsxs93("div", { className: "grid gap-3 border-b border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4 last:border-b-0 md:grid-cols-[1fr_auto_auto] md:items-center", children: [
+    /* @__PURE__ */ jsxs93("div", { children: [
+      /* @__PURE__ */ jsxs93("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx122("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: flag.name }),
+        /* @__PURE__ */ jsx122(Badge, { children: flag.key })
       ] }),
-      flag.description ? /* @__PURE__ */ jsx119("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: flag.description }) : null
+      flag.description ? /* @__PURE__ */ jsx122("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: flag.description }) : null
     ] }),
-    /* @__PURE__ */ jsx119("div", { className: "text-sm text-[var(--tapiz-text-muted)]", children: flag.rollout }),
-    /* @__PURE__ */ jsx119(Switch, { checked: flag.enabled, onChange: (checked) => onToggle?.(flag.key, checked) })
+    /* @__PURE__ */ jsx122("div", { className: "text-sm text-[var(--tapiz-text-muted)]", children: flag.rollout }),
+    /* @__PURE__ */ jsx122(Switch, { checked: flag.enabled, onChange: (checked) => onToggle?.(flag.key, checked) })
   ] }, flag.key)) });
 }
 
 // src/components/framework/PlanUsage.tsx
-import { jsx as jsx120, jsxs as jsxs92 } from "react/jsx-runtime";
+import { jsx as jsx123, jsxs as jsxs94 } from "react/jsx-runtime";
 function PlanUsage({ title = "Plan usage", items, className = "" }) {
-  return /* @__PURE__ */ jsxs92("section", { className: ["border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx120("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }),
-    /* @__PURE__ */ jsx120("div", { className: "mt-4 space-y-4", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsxs94("section", { className: ["border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx123("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }),
+    /* @__PURE__ */ jsx123("div", { className: "mt-4 space-y-4", children: items.map((item, index) => {
       const pct = item.limit ? Math.min(100, item.used / item.limit * 100) : 0;
-      return /* @__PURE__ */ jsxs92("div", { children: [
-        /* @__PURE__ */ jsxs92("div", { className: "mb-1 flex justify-between text-sm", children: [
-          /* @__PURE__ */ jsx120("span", { className: "text-[var(--tapiz-text-primary)]", children: item.label }),
-          /* @__PURE__ */ jsxs92("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: [
+      return /* @__PURE__ */ jsxs94("div", { children: [
+        /* @__PURE__ */ jsxs94("div", { className: "mb-1 flex justify-between text-sm", children: [
+          /* @__PURE__ */ jsx123("span", { className: "text-[var(--tapiz-text-primary)]", children: item.label }),
+          /* @__PURE__ */ jsxs94("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: [
             item.used,
             "/",
             item.limit
           ] })
         ] }),
-        /* @__PURE__ */ jsx120("div", { className: "h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx120("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${pct}%` } }) })
+        /* @__PURE__ */ jsx123("div", { className: "h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx123("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${pct}%` } }) })
       ] }, index);
     }) })
   ] });
 }
 
 // src/components/marketing/AnnouncementBar.tsx
-import { jsx as jsx121, jsxs as jsxs93 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs95 } from "react/jsx-runtime";
 function AnnouncementBar({ children, action, className = "" }) {
-  return /* @__PURE__ */ jsx121("div", { className: ["border-b border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] px-4 py-3 text-sm text-[var(--tapiz-text-primary)]", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs93("div", { className: "mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-3 text-center", children: [
+  return /* @__PURE__ */ jsx124("div", { className: ["border-b border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] px-4 py-3 text-sm text-[var(--tapiz-text-primary)]", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs95("div", { className: "mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-3 text-center", children: [
     " ",
-    /* @__PURE__ */ jsx121("span", { children }),
-    action ? /* @__PURE__ */ jsx121("span", { children: action }) : null
+    /* @__PURE__ */ jsx124("span", { children }),
+    action ? /* @__PURE__ */ jsx124("span", { children: action }) : null
   ] }) });
 }
 
 // src/components/marketing/FAQSection.tsx
-import { jsx as jsx122, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs96 } from "react/jsx-runtime";
 function FAQSection({ title = "Frequently asked questions", description, items, className = "" }) {
-  return /* @__PURE__ */ jsxs94("section", { className, children: [
-    /* @__PURE__ */ jsxs94("div", { className: "mb-6 max-w-2xl", children: [
-      /* @__PURE__ */ jsx122("div", { className: "kicker", children: "FAQ" }),
-      /* @__PURE__ */ jsx122("h2", { className: "mt-2 text-3xl font-semibold tracking-[-0.05em] text-[var(--tapiz-text-primary)]", children: title }),
-      description ? /* @__PURE__ */ jsx122("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
+  return /* @__PURE__ */ jsxs96("section", { className, children: [
+    /* @__PURE__ */ jsxs96("div", { className: "mb-6 max-w-2xl", children: [
+      /* @__PURE__ */ jsx125("div", { className: "kicker", children: "FAQ" }),
+      /* @__PURE__ */ jsx125("h2", { className: "mt-2 text-3xl font-semibold tracking-[-0.05em] text-[var(--tapiz-text-primary)]", children: title }),
+      description ? /* @__PURE__ */ jsx125("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx122(Accordion, { items: items.map((item, index) => ({ id: `faq-${index}`, title: item.question, content: item.answer })) })
+    /* @__PURE__ */ jsx125(Accordion, { items: items.map((item, index) => ({ id: `faq-${index}`, title: item.question, content: item.answer })) })
   ] });
 }
 
 // src/components/marketing/RoadmapList.tsx
-import { jsx as jsx123, jsxs as jsxs95 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs97 } from "react/jsx-runtime";
 function RoadmapList({ items, className = "" }) {
-  return /* @__PURE__ */ jsx123("div", { className: ["grid gap-3 md:grid-cols-3", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs95("article", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5", children: [
-    /* @__PURE__ */ jsxs95("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx123("span", { className: "kicker", children: item.quarter ?? `0${index + 1}` }),
-      item.status ? /* @__PURE__ */ jsx123(Badge, { children: item.status }) : null
+  return /* @__PURE__ */ jsx126("div", { className: ["grid gap-3 md:grid-cols-3", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs97("article", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5", children: [
+    /* @__PURE__ */ jsxs97("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx126("span", { className: "kicker", children: item.quarter ?? `0${index + 1}` }),
+      item.status ? /* @__PURE__ */ jsx126(Badge, { children: item.status }) : null
     ] }),
-    /* @__PURE__ */ jsx123("h3", { className: "mt-4 font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
-    item.description ? /* @__PURE__ */ jsx123("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: item.description }) : null
+    /* @__PURE__ */ jsx126("h3", { className: "mt-4 font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
+    item.description ? /* @__PURE__ */ jsx126("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: item.description }) : null
   ] }, index)) });
 }
 
 // src/components/feedback/InlineStatus.tsx
-import { jsx as jsx124, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs98 } from "react/jsx-runtime";
 var toneClasses5 = {
   neutral: "bg-[var(--tapiz-text-muted)]",
   success: "bg-[var(--tapiz-success)]",
@@ -3725,8 +3967,8 @@ var toneClasses5 = {
   info: "bg-[var(--tapiz-info)]"
 };
 function InlineStatus({ tone: tone2 = "neutral", children, pulse = false, className = "" }) {
-  return /* @__PURE__ */ jsxs96("span", { className: ["inline-flex items-center gap-2 text-sm text-[var(--tapiz-text-muted)]", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx124("span", { className: ["h-2 w-2 rounded-full", toneClasses5[tone2], pulse ? "animate-pulse" : ""].filter(Boolean).join(" ") }),
+  return /* @__PURE__ */ jsxs98("span", { className: ["inline-flex items-center gap-2 text-sm text-[var(--tapiz-text-muted)]", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx127("span", { className: ["h-2 w-2 rounded-full", toneClasses5[tone2], pulse ? "animate-pulse" : ""].filter(Boolean).join(" ") }),
     children
   ] });
 }
@@ -3902,9 +4144,11 @@ export {
   SectionCard,
   SectionIcons,
   SectionTitle,
+  SegmentedTabs,
   Select,
   Server,
   Shield,
+  SidePanel,
   SidebarNav,
   Skeleton,
   SkeletonBanner,