@tapizlabs/ui 0.1.6 → 0.2.1

package/dist/index.js

@@ -690,6 +690,8 @@ var variantClasses = {
     hover:bg-[rgba(255,122,77,0.08)]`,
   "outline-success": `${TOKEN_BASE} border border-[var(--color-good)] text-[var(--color-good)]
     hover:bg-[rgba(77,214,163,0.08)]`,
+  brutal: `${TOKEN_BASE} border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-primary)]
+    shadow-[var(--tapiz-shadow-brutal)] font-bold hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[var(--tapiz-shadow-brutal-lg)]`,
   link: "text-[var(--color-primary-300)] hover:text-[var(--color-primary-400)] disabled:opacity-40 disabled:cursor-not-allowed inline-flex items-center gap-1"
 };
 var sizeClasses = {
@@ -1391,11 +1393,43 @@ function Tooltip({ text, children, position = "top", align = "center", width = "
 
 // src/components/shared/Card.tsx
 import { jsx as jsx27 } from "react/jsx-runtime";
-function Card({ children, className = "", hover = false, style }) {
-  return /* @__PURE__ */ jsx27("div", { className: `card ${hover ? "card-hover transition-all" : ""} ${className}`, style, children });
+var variantClasses2 = {
+  surface: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-sm)]",
+  raised: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-raised)] shadow-[var(--tapiz-shadow-md)]",
+  outlined: "border border-[var(--tapiz-border-strong)] bg-transparent",
+  brutal: "border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-brutal)]",
+  glass: "border border-[var(--tapiz-border-subtle)] bg-[color-mix(in_srgb,var(--tapiz-bg-surface)_78%,transparent)] shadow-[var(--tapiz-shadow-md)] backdrop-blur-xl"
+};
+var paddingClasses = {
+  none: "p-0",
+  sm: "p-3",
+  md: "p-5",
+  lg: "p-6"
+};
+function Card({
+  children,
+  className = "",
+  hover = false,
+  style,
+  variant = "surface",
+  padding = "md"
+}) {
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      className: [
+        variantClasses2[variant],
+        paddingClasses[padding],
+        hover ? "card-hover" : "",
+        className
+      ].filter(Boolean).join(" "),
+      style,
+      children
+    }
+  );
 }
 function CardHeader({ children, className = "" }) {
-  return /* @__PURE__ */ jsx27("div", { className: `border-b border-border px-5 py-3 ${className}`, children });
+  return /* @__PURE__ */ jsx27("div", { className: `border-b border-[var(--tapiz-border-subtle)] px-5 py-3 ${className}`, children });
 }
 function CardBody({ children, className = "" }) {
   return /* @__PURE__ */ jsx27("div", { className: `p-5 ${className}`, children });
@@ -1482,18 +1516,19 @@ function SkeletonPageHeader() {
 
 // src/components/shared/Badge.tsx
 import { jsx as jsx30 } from "react/jsx-runtime";
-var variantClasses2 = {
-  default: "border-primary-300 text-primary-300",
-  success: "border-good text-good",
-  warning: "border-signal-400 text-signal-400",
-  danger: "border-warn text-warn",
+var variantClasses3 = {
+  default: "border-[var(--tapiz-accent)] text-[var(--tapiz-accent)] bg-[var(--tapiz-accent-soft)]",
+  success: "border-[var(--tapiz-success)] text-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)]",
+  warning: "border-[var(--tapiz-warning)] text-[var(--tapiz-warning)] bg-[var(--tapiz-warning-soft)]",
+  danger: "border-[var(--tapiz-danger)] text-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)]",
+  info: "border-[var(--tapiz-info)] text-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)]",
   muted: "border-txt-3 text-txt-3"
 };
 function Badge({ children, variant = "default", className = "" }) {
   return /* @__PURE__ */ jsx30(
     "span",
     {
-      className: `inline-flex items-center border px-2 py-0.5 font-mono text-[9px] font-bold uppercase tracking-widest ${variantClasses2[variant]} ${className}`,
+      className: `inline-flex items-center border px-2 py-0.5 font-mono text-[9px] font-bold uppercase tracking-widest ${variantClasses3[variant]} ${className}`,
       children
     }
   );
@@ -1559,30 +1594,103 @@ function InfoBanner(props) {
 
 // src/components/shared/PageHeader.tsx
 import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
-function PageHeader({ title, subtitle, action, icon, banner, className = "" }) {
-  return /* @__PURE__ */ jsxs23(
+function PageHeader({
+  title,
+  subtitle,
+  description,
+  action,
+  actions,
+  icon,
+  banner,
+  breadcrumbs,
+  meta,
+  className = "",
+  variant = "default"
+}) {
+  const resolvedActions = actions ?? action;
+  const variantClass = variant === "brutal" ? "border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-5 shadow-[var(--tapiz-shadow-brutal)]" : variant === "enterprise" ? "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5 shadow-[var(--tapiz-shadow-sm)]" : "border-b border-[var(--tapiz-border-subtle)] pb-4";
+  return /* @__PURE__ */ jsxs23("div", { className: `page-header mb-5 flex flex-col gap-3 animate-fade-in-up ${variantClass} ${className}`.trim(), children: [
+    breadcrumbs ? /* @__PURE__ */ jsx33("div", { className: "font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: breadcrumbs }) : null,
+    /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "min-w-0", children: [
+        subtitle ? /* @__PURE__ */ jsx33("div", { className: "kicker mb-1.5", children: subtitle }) : null,
+        /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2.5", children: [
+          icon ? /* @__PURE__ */ jsx33("span", { className: "text-[var(--tapiz-accent)]", children: icon }) : null,
+          /* @__PURE__ */ jsx33("h2", { className: "font-(--font-display) text-[22px] tracking-[-0.03em] text-[var(--tapiz-text-primary)] md:text-[26px]", children: title })
+        ] }),
+        description ? /* @__PURE__ */ jsx33("div", { className: "mt-2 max-w-3xl text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null,
+        meta ? /* @__PURE__ */ jsx33("div", { className: "mt-3 font-mono text-[11px] text-[var(--tapiz-text-disabled)]", children: meta }) : null
+      ] }),
+      resolvedActions ? /* @__PURE__ */ jsx33("div", { className: "flex shrink-0 flex-wrap gap-2", children: resolvedActions }) : null
+    ] }),
+    banner ? banner : null
+  ] });
+}
+
+// src/components/shared/MetricCard.tsx
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+var trendClasses = {
+  positive: "border-[var(--tapiz-success)] text-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)]",
+  negative: "border-[var(--tapiz-danger)] text-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)]",
+  warning: "border-[var(--tapiz-warning)] text-[var(--tapiz-warning)] bg-[var(--tapiz-warning-soft)]",
+  neutral: "border-[var(--tapiz-border-strong)] text-[var(--tapiz-text-muted)] bg-[var(--tapiz-bg-surface-muted)]"
+};
+function MetricCard({
+  label,
+  value,
+  description,
+  icon,
+  trend,
+  trendTone = "neutral",
+  className = "",
+  variant = "surface"
+}) {
+  return /* @__PURE__ */ jsxs24(Card, { variant, padding: "md", hover: true, className: `relative overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx34("p", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: label }),
+        /* @__PURE__ */ jsx34("div", { className: "mt-2 font-display text-3xl font-semibold tracking-[-0.05em] text-[var(--tapiz-text-primary)]", children: value })
+      ] }),
+      icon ? /* @__PURE__ */ jsx34("div", { className: "grid h-10 w-10 shrink-0 place-items-center border border-[var(--tapiz-border-strong)] bg-[var(--color-icon-bg)] text-[var(--tapiz-accent)]", children: icon }) : null
+    ] }),
+    description || trend ? /* @__PURE__ */ jsxs24("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [
+      trend ? /* @__PURE__ */ jsx34("span", { className: `inline-flex border px-2 py-0.5 font-mono text-[10px] font-bold uppercase tracking-widest ${trendClasses[trendTone]}`, children: trend }) : null,
+      description ? /* @__PURE__ */ jsx34("p", { className: "text-xs text-[var(--tapiz-text-muted)]", children: description }) : null
+    ] }) : null
+  ] });
+}
+
+// src/components/shared/StatGrid.tsx
+import { jsx as jsx35 } from "react/jsx-runtime";
+function StatGrid({ children, className = "", minColumnWidth = "14rem" }) {
+  return /* @__PURE__ */ jsx35(
     "div",
     {
-      className: `page-header mb-5 flex flex-col gap-3 border-b border-border pb-4 animate-fade-in-up ${className}`.trim(),
-      children: [
-        /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
-          /* @__PURE__ */ jsxs23("div", { children: [
-            subtitle ? /* @__PURE__ */ jsx33("div", { className: "kicker mb-1.5", children: subtitle }) : null,
-            /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2.5", children: [
-              icon ? /* @__PURE__ */ jsx33("span", { className: "text-primary-300", children: icon }) : null,
-              /* @__PURE__ */ jsx33("h2", { className: "font-(--font-display) text-[22px] tracking-[-0.03em] text-txt-1", children: title })
-            ] })
-          ] }),
-          action ? /* @__PURE__ */ jsx33("div", { children: action }) : null
-        ] }),
-        banner ? banner : null
-      ]
+      className: `grid gap-4 ${className}`,
+      style: { gridTemplateColumns: `repeat(auto-fit, minmax(${minColumnWidth}, 1fr))` },
+      children
     }
   );
 }
 
+// src/components/shared/SectionCard.tsx
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+function SectionCard({ title, eyebrow, description, action, children, className = "" }) {
+  return /* @__PURE__ */ jsxs25(Card, { variant: "surface", padding: "none", className, children: [
+    title || eyebrow || description || action ? /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-3 border-b border-[var(--tapiz-border-subtle)] px-5 py-4 sm:flex-row sm:items-start sm:justify-between", children: [
+      /* @__PURE__ */ jsxs25("div", { className: "min-w-0", children: [
+        eyebrow ? /* @__PURE__ */ jsx36("div", { className: "kicker mb-1", children: eyebrow }) : null,
+        title ? /* @__PURE__ */ jsx36("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
+        description ? /* @__PURE__ */ jsx36("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null
+      ] }),
+      action ? /* @__PURE__ */ jsx36("div", { className: "shrink-0", children: action }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx36("div", { className: "p-5", children })
+  ] });
+}
+
 // src/components/shared/SearchInput.tsx
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 function SearchInput({
   value,
   onChange,
@@ -1595,9 +1703,9 @@ function SearchInput({
   clearTitle = "Clear search",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs24("div", { className: `relative ${wrapperClassName}`.trim(), style: wrapperStyle, children: [
-    /* @__PURE__ */ jsx34("span", { className: `pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 ${iconClassName}`.trim(), children: /* @__PURE__ */ jsx34(Search, { size: 15 }) }),
-    /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs26("div", { className: `relative ${wrapperClassName}`.trim(), style: wrapperStyle, children: [
+    /* @__PURE__ */ jsx37("span", { className: `pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 ${iconClassName}`.trim(), children: /* @__PURE__ */ jsx37(Search, { size: 15 }) }),
+    /* @__PURE__ */ jsx37(
       Input,
       {
         ...props,
@@ -1608,21 +1716,21 @@ function SearchInput({
         className: `pl-9 ${inputClassName}`.trim()
       }
     ),
-    clearable && value ? /* @__PURE__ */ jsx34(
+    clearable && value ? /* @__PURE__ */ jsx37(
       "button",
       {
         type: "button",
         onClick: () => onChange(""),
         className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-lg p-1 text-txt-4 transition-colors hover:bg-ink-300 hover:text-txt-2",
         title: clearTitle,
-        children: /* @__PURE__ */ jsx34(X, { size: 14 })
+        children: /* @__PURE__ */ jsx37(X, { size: 14 })
       }
     ) : null
   ] });
 }
 
 // src/components/shared/Pagination.tsx
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 function getPageNumbers(page, totalPages) {
   if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
   const pages = [1];
@@ -1646,10 +1754,10 @@ function Pagination({ page, totalPages, onChange, totalItems, pageSize, labels }
   const pageNumbers = getPageNumbers(page, totalPages);
   const from = pageSize ? (page - 1) * pageSize + 1 : null;
   const to = pageSize && totalItems ? Math.min(page * pageSize, totalItems) : null;
-  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col items-center justify-between gap-3 border-t border-border pt-3 sm:flex-row", children: [
-    totalItems != null && from != null && to != null ? /* @__PURE__ */ jsx35("span", { className: "order-2 font-mono text-[12px] text-txt-4 sm:order-1", children: copy.showing({ from, to, total: totalItems }) }) : /* @__PURE__ */ jsx35("span", { className: "order-2 font-mono text-[11px] text-txt-4 sm:order-1", children: copy.page({ page, totalPages }) }),
-    /* @__PURE__ */ jsxs25("div", { className: "order-1 flex items-center gap-1 sm:order-2", children: [
-      /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center justify-between gap-3 border-t border-border pt-3 sm:flex-row", children: [
+    totalItems != null && from != null && to != null ? /* @__PURE__ */ jsx38("span", { className: "order-2 font-mono text-[12px] text-txt-4 sm:order-1", children: copy.showing({ from, to, total: totalItems }) }) : /* @__PURE__ */ jsx38("span", { className: "order-2 font-mono text-[11px] text-txt-4 sm:order-1", children: copy.page({ page, totalPages }) }),
+    /* @__PURE__ */ jsxs27("div", { className: "order-1 flex items-center gap-1 sm:order-2", children: [
+      /* @__PURE__ */ jsxs27(
         "button",
         {
           type: "button",
@@ -1658,13 +1766,13 @@ function Pagination({ page, totalPages, onChange, totalItems, pageSize, labels }
           title: copy.prevTitle,
           className: "flex items-center gap-1 border border-border px-2.5 py-1.5 font-mono text-[11px] text-txt-3 transition-colors hover:border-border-hi hover:text-txt-1 disabled:cursor-not-allowed disabled:opacity-30",
           children: [
-            /* @__PURE__ */ jsx35(ChevronLeft, { size: 12 }),
-            /* @__PURE__ */ jsx35("span", { className: "hidden sm:inline", children: copy.prev })
+            /* @__PURE__ */ jsx38(ChevronLeft, { size: 12 }),
+            /* @__PURE__ */ jsx38("span", { className: "hidden sm:inline", children: copy.prev })
           ]
         }
       ),
-      /* @__PURE__ */ jsx35("div", { className: "flex items-center gap-1", children: pageNumbers.map(
-        (entry, index) => entry === "\u2026" ? /* @__PURE__ */ jsx35("span", { className: "w-7 text-center font-mono text-[11px] text-txt-4", children: "\u2026" }, `ellipsis-${index}`) : /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx38("div", { className: "flex items-center gap-1", children: pageNumbers.map(
+        (entry, index) => entry === "\u2026" ? /* @__PURE__ */ jsx38("span", { className: "w-7 text-center font-mono text-[11px] text-txt-4", children: "\u2026" }, `ellipsis-${index}`) : /* @__PURE__ */ jsx38(
           "button",
           {
             type: "button",
@@ -1675,7 +1783,7 @@ function Pagination({ page, totalPages, onChange, totalItems, pageSize, labels }
           entry
         )
       ) }),
-      /* @__PURE__ */ jsxs25(
+      /* @__PURE__ */ jsxs27(
         "button",
         {
           type: "button",
@@ -1684,8 +1792,8 @@ function Pagination({ page, totalPages, onChange, totalItems, pageSize, labels }
           title: copy.nextTitle,
           className: "flex items-center gap-1 border border-border px-2.5 py-1.5 font-mono text-[10px] text-txt-3 transition-colors hover:border-border-hi hover:text-txt-1 disabled:cursor-not-allowed disabled:opacity-30",
           children: [
-            /* @__PURE__ */ jsx35("span", { className: "hidden sm:inline", children: copy.next }),
-            /* @__PURE__ */ jsx35(ChevronRight, { size: 12 })
+            /* @__PURE__ */ jsx38("span", { className: "hidden sm:inline", children: copy.next }),
+            /* @__PURE__ */ jsx38(ChevronRight, { size: 12 })
           ]
         }
       )
@@ -1694,31 +1802,32 @@ function Pagination({ page, totalPages, onChange, totalItems, pageSize, labels }
 }
 
 // src/components/shared/SectionTitle.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function SectionTitle({ children, className = "" }) {
-  return /* @__PURE__ */ jsx36("h3", { className: `mb-1 text-sm font-semibold text-txt-1 ${className}`.trim(), children });
+  return /* @__PURE__ */ jsx39("h3", { className: `mb-1 text-sm font-semibold text-txt-1 ${className}`.trim(), children });
 }
 
 // src/components/shared/StatusBadge.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
-var BASE = "inline-flex items-center border px-2 py-0.5 font-mono text-[9px] font-medium uppercase tracking-[0.15em]";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var BASE = "inline-flex items-center border px-2 py-0.5 font-mono text-[9px] font-bold uppercase tracking-[0.15em]";
 var variantStyles = {
-  default: "border-border-hi text-txt-2",
-  active: "border-primary-300 text-primary-300",
-  success: "border-good text-good",
-  inactive: "border-txt-4 text-txt-4",
-  warning: "border-warn text-warn",
-  danger: "border-warn text-warn",
-  pending: "border-txt-3 text-txt-3"
+  default: "border-[var(--tapiz-border-strong)] text-[var(--tapiz-text-secondary)] bg-[var(--tapiz-bg-surface-muted)]",
+  active: "border-[var(--tapiz-accent)] text-[var(--tapiz-accent)] bg-[var(--tapiz-accent-soft)]",
+  success: "border-[var(--tapiz-success)] text-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)]",
+  inactive: "border-[var(--tapiz-text-disabled)] text-[var(--tapiz-text-disabled)] bg-transparent",
+  warning: "border-[var(--tapiz-warning)] text-[var(--tapiz-warning)] bg-[var(--tapiz-warning-soft)]",
+  danger: "border-[var(--tapiz-danger)] text-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)]",
+  info: "border-[var(--tapiz-info)] text-[var(--tapiz-info)] bg-[var(--tapiz-info-soft)]",
+  pending: "border-[var(--tapiz-text-muted)] text-[var(--tapiz-text-muted)] bg-transparent"
 };
 function StatusBadge({ label, variant = "default", className = "" }) {
-  return /* @__PURE__ */ jsx37("span", { className: `${BASE} ${variantStyles[variant]} ${className}`.trim(), children: label });
+  return /* @__PURE__ */ jsx40("span", { className: `${BASE} ${variantStyles[variant]} ${className}`.trim(), children: label });
 }
 
 // src/components/shared/ActionMenu.tsx
 import { useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState as useState5 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { Fragment, jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 var defaultMenuStyle = {
   background: "var(--color-ink-200)",
   border: "1px solid var(--color-border-hi)",
@@ -1802,9 +1911,9 @@ function ActionMenu({
       document.removeEventListener("keydown", handle);
     };
   }, [open]);
-  const menuNode = open && pos ? /* @__PURE__ */ jsxs26(Fragment, { children: [
-    /* @__PURE__ */ jsx38("div", { className: "fixed inset-0 z-9998", onClick: () => setOpen(false) }),
-    /* @__PURE__ */ jsx38(
+  const menuNode = open && pos ? /* @__PURE__ */ jsxs28(Fragment, { children: [
+    /* @__PURE__ */ jsx41("div", { className: "fixed inset-0 z-9998", onClick: () => setOpen(false) }),
+    /* @__PURE__ */ jsx41(
       "div",
       {
         ref: menuRef,
@@ -1821,9 +1930,9 @@ function ActionMenu({
           maxHeight: pos.maxHeight ?? defaultMenuStyle.maxHeight,
           ...menuStyle
         },
-        children: items.map((item, index) => /* @__PURE__ */ jsxs26("div", { children: [
-          index > 0 && item.danger ? /* @__PURE__ */ jsx38("div", { style: { borderTop: "1px solid var(--color-border)" } }) : null,
-          /* @__PURE__ */ jsxs26(
+        children: items.map((item, index) => /* @__PURE__ */ jsxs28("div", { children: [
+          index > 0 && item.danger ? /* @__PURE__ */ jsx41("div", { style: { borderTop: "1px solid var(--color-border)" } }) : null,
+          /* @__PURE__ */ jsxs28(
             "button",
             {
               type: "button",
@@ -1835,8 +1944,8 @@ function ActionMenu({
                 item.onSelect();
               },
               children: [
-                item.loading ? /* @__PURE__ */ jsx38(Spinner, { color: "text-[var(--color-txt-3)]" }) : /* @__PURE__ */ jsx38("span", { className: item.danger ? "shrink-0 text-warn" : "shrink-0 text-primary-300", children: item.icon }),
-                /* @__PURE__ */ jsx38("span", { children: item.label })
+                item.loading ? /* @__PURE__ */ jsx41(Spinner, { color: "text-[var(--color-txt-3)]" }) : /* @__PURE__ */ jsx41("span", { className: item.danger ? "shrink-0 text-warn" : "shrink-0 text-primary-300", children: item.icon }),
+                /* @__PURE__ */ jsx41("span", { children: item.label })
               ]
             }
           )
@@ -1844,14 +1953,14 @@ function ActionMenu({
       }
     )
   ] }) : null;
-  return /* @__PURE__ */ jsxs26("div", { ref: btnRef, className: fullWidth ? "relative w-full" : "relative inline-block max-w-full", children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs28("div", { ref: btnRef, className: fullWidth ? "relative w-full" : "relative inline-block max-w-full", children: [
+    /* @__PURE__ */ jsx41(
       Button,
       {
         size: buttonSize,
         variant: buttonVariant,
         icon,
-        iconRight: /* @__PURE__ */ jsx38(ChevronDown, { size: 11 }),
+        iconRight: /* @__PURE__ */ jsx41(ChevronDown, { size: 11 }),
         onClick: () => setOpen((value) => !value),
         className: buttonClassName,
         fullWidth,
@@ -1867,29 +1976,29 @@ import { useMemo as useMemo2, useState as useState6 } from "react";
 
 // src/components/table/DataTableRow.tsx
 import { memo } from "react";
-import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 var ALIGN_CLASS = {
   left: "text-left",
   center: "text-center",
   right: "text-right"
 };
-function DataTableRowInner({ row, columns, onRowClick, rowActions }) {
+function DataTableRowInner({ row, columns, onRowClick, rowActions, densityCellClass = "px-3 py-2.5", striped = true }) {
   const clickable = Boolean(onRowClick);
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs29(
     "tr",
     {
       onClick: clickable ? () => onRowClick?.(row) : void 0,
-      className: `border-b border-border transition-colors hover:bg-ink-300/30 ${clickable ? "cursor-pointer" : ""}`,
+      className: `border-b border-[var(--tapiz-border-subtle)] transition-colors hover:bg-[var(--tapiz-bg-surface-muted)] ${striped ? "even:bg-[color-mix(in_srgb,var(--tapiz-bg-surface-muted)_35%,var(--tapiz-bg-surface))]" : ""} ${clickable ? "cursor-pointer" : ""}`,
       children: [
-        columns.map((column) => /* @__PURE__ */ jsx39(
+        columns.map((column) => /* @__PURE__ */ jsx42(
           "td",
           {
-            className: `px-3 py-2 text-xs text-txt-3 ${ALIGN_CLASS[column.align ?? "left"]} ${column.className ?? ""}`,
+            className: `${densityCellClass} text-xs text-[var(--tapiz-text-secondary)] ${ALIGN_CLASS[column.align ?? "left"]} ${column.className ?? ""}`,
             children: column.cell(row)
           },
           column.id
         )),
-        rowActions !== void 0 && /* @__PURE__ */ jsx39("td", { className: "px-3 py-2 text-right", children: rowActions(row) })
+        rowActions !== void 0 && /* @__PURE__ */ jsx42("td", { className: `${densityCellClass} text-right`, children: rowActions(row) })
       ]
     }
   );
@@ -1897,7 +2006,7 @@ function DataTableRowInner({ row, columns, onRowClick, rowActions }) {
 var DataTableRow = memo(DataTableRowInner);
 
 // src/components/table/DataTable.tsx
-import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
 var ALIGN_CLASS2 = {
   left: "text-left",
   center: "text-center",
@@ -1927,7 +2036,12 @@ function DataTable({
   rowActions,
   serverSort,
   footer,
-  mobileCard
+  mobileCard,
+  density = "comfortable",
+  variant = "default",
+  stickyHeader = false,
+  striped = true,
+  className = ""
 }) {
   const [sort, setSort] = useState6(null);
   const sortedData = useMemo2(() => {
@@ -1952,24 +2066,32 @@ function DataTable({
   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";
-  return /* @__PURE__ */ jsxs28("div", { className: "border border-border overflow-x-auto", children: [
-    mobileCard !== void 0 && /* @__PURE__ */ jsx40("div", { className: "md:hidden", children: isLoading ? Array.from({ length: loadingRows }).map((_, i) => /* @__PURE__ */ jsx40("div", { className: "h-16 animate-pulse bg-ink-300" }, i)) : sortedData.length === 0 ? emptyState : sortedData.map((row) => /* @__PURE__ */ jsx40("div", { children: mobileCard(row) }, rowKey(row))) }),
-    /* @__PURE__ */ jsxs28("table", { className: tableClass, children: [
-      /* @__PURE__ */ jsx40("thead", { children: /* @__PURE__ */ jsxs28("tr", { className: "border-b border-border bg-ink-300", children: [
+  const densityHeaderClass = density === "compact" ? "px-3 py-2" : density === "spacious" ? "px-4 py-4" : "px-3 py-2.5";
+  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 === "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__ */ jsx43("div", { className: "md:hidden", children: isLoading ? Array.from({ length: loadingRows }).map((_, i) => /* @__PURE__ */ jsx43("div", { className: "h-16 animate-pulse bg-ink-300" }, i)) : sortedData.length === 0 ? emptyState : sortedData.map((row) => /* @__PURE__ */ jsx43("div", { children: mobileCard(row) }, rowKey(row))) }),
+    /* @__PURE__ */ jsxs30("table", { className: tableClass, children: [
+      /* @__PURE__ */ jsx43("thead", { children: /* @__PURE__ */ jsxs30("tr", { className: "border-b border-border bg-ink-300", children: [
         columns.map((column) => {
-          const baseClass = `px-3 py-2.5 ${ALIGN_CLASS2[column.align ?? "left"]} font-mono text-[11px] tracking-[.08em] text-txt-4 font-semibold whitespace-nowrap`;
+          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__ */ jsx40("th", { scope: "col", className: baseClass, children: column.header }, column.id);
+            return /* @__PURE__ */ jsx43("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__ */ jsx40(
+          return /* @__PURE__ */ jsx43(
             "th",
             {
               scope: "col",
               "aria-sort": ariaSort(active, direction),
               className: baseClass,
-              children: /* @__PURE__ */ jsxs28(
+              children: /* @__PURE__ */ jsxs30(
                 "button",
                 {
                   type: "button",
@@ -1977,7 +2099,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__ */ jsx40(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx40(ChevronDown, { size: 12 }))
+                    active && (direction === "asc" ? /* @__PURE__ */ jsx43(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx43(ChevronDown, { size: 12 }))
                   ]
                 }
               )
@@ -1985,15 +2107,17 @@ function DataTable({
             column.id
           );
         }),
-        hasActions && /* @__PURE__ */ jsx40("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__ */ jsx43("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__ */ jsx40("tbody", { children: isLoading ? Array.from({ length: loadingRows }).map((_, rowIndex) => /* @__PURE__ */ jsx40("tr", { className: "border-b border-border", children: Array.from({ length: colCount }).map((__, colIndex) => /* @__PURE__ */ jsx40("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx40("div", { className: "h-4 bg-ink-300 rounded animate-pulse w-24" }) }, colIndex)) }, rowIndex)) : sortedData.length === 0 ? /* @__PURE__ */ jsx40("tr", { children: /* @__PURE__ */ jsx40("td", { colSpan: colCount, className: "px-4 py-10 text-center text-txt-4 text-sm font-mono", children: emptyState }) }) : sortedData.map((row) => /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx43("tbody", { children: isLoading ? Array.from({ length: loadingRows }).map((_, rowIndex) => /* @__PURE__ */ jsx43("tr", { className: "border-b border-[var(--tapiz-border-subtle)]", children: Array.from({ length: colCount }).map((__, colIndex) => /* @__PURE__ */ jsx43("td", { className: densityCellClass, children: /* @__PURE__ */ jsx43("div", { className: "h-4 w-24 animate-pulse bg-[var(--tapiz-bg-surface-muted)]" }) }, colIndex)) }, rowIndex)) : sortedData.length === 0 ? /* @__PURE__ */ jsx43("tr", { children: /* @__PURE__ */ jsx43("td", { colSpan: colCount, className: "px-4 py-10 text-center text-txt-4 text-sm font-mono", children: emptyState }) }) : sortedData.map((row) => /* @__PURE__ */ jsx43(
         DataTableRow,
         {
           row,
           columns,
           onRowClick,
-          rowActions
+          rowActions,
+          densityCellClass,
+          striped
         },
         rowKey(row)
       )) })
@@ -2001,24 +2125,1688 @@ function DataTable({
     footer !== void 0 && footer
   ] });
 }
+
+// src/components/marketing/MarketingShell.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
+function MarketingShell({ children, className = "", grid = true, noise = true }) {
+  return /* @__PURE__ */ jsx44(
+    "main",
+    {
+      className: [
+        "min-h-screen overflow-hidden bg-[var(--tapiz-bg-page)] text-[var(--tapiz-text-primary)]",
+        grid ? "tapiz-grid-bg" : "",
+        noise ? "tapiz-noise-bg" : "",
+        className
+      ].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+
+// src/components/marketing/HeroFrame.tsx
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+function HeroFrame({ eyebrow, title, description, actions, visual, meta, className = "" }) {
+  return /* @__PURE__ */ jsxs31("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__ */ jsxs31("div", { className: "animate-fade-in-up", children: [
+      eyebrow ? /* @__PURE__ */ jsx45("div", { className: "kicker mb-4", children: eyebrow }) : null,
+      /* @__PURE__ */ jsx45("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__ */ jsx45("p", { className: "mt-6 max-w-2xl text-base leading-7 text-[var(--tapiz-text-secondary)] md:text-lg", children: description }) : null,
+      actions ? /* @__PURE__ */ jsx45("div", { className: "mt-8 flex flex-wrap gap-3", children: actions }) : null,
+      meta ? /* @__PURE__ */ jsx45("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__ */ jsx45("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/FeatureCard.tsx
+import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+function FeatureCard({ title, description, icon, eyebrow, children, className = "", variant = "surface" }) {
+  return /* @__PURE__ */ jsxs32(Card, { variant, hover: true, className: `group ${className}`, children: [
+    /* @__PURE__ */ jsxs32("div", { className: "flex items-start gap-4", children: [
+      icon ? /* @__PURE__ */ jsx46("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__ */ jsxs32("div", { className: "min-w-0", children: [
+        eyebrow ? /* @__PURE__ */ jsx46("div", { className: "kicker mb-1", children: eyebrow }) : null,
+        /* @__PURE__ */ jsx46("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: title }),
+        description ? /* @__PURE__ */ jsx46("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
+      ] })
+    ] }),
+    children ? /* @__PURE__ */ jsx46("div", { className: "mt-5", children }) : null
+  ] });
+}
+
+// src/components/marketing/FeatureGrid.tsx
+import { jsx as jsx47 } from "react/jsx-runtime";
+function FeatureGrid({ children, className = "" }) {
+  return /* @__PURE__ */ jsx47("div", { className: `grid gap-4 md:grid-cols-2 xl:grid-cols-3 ${className}`, children });
+}
+
+// src/components/marketing/CTASection.tsx
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
+function CTASection({ eyebrow, title, description, actions, className = "" }) {
+  return /* @__PURE__ */ jsx48("section", { className: `mx-auto max-w-7xl px-[var(--tapiz-space-page-x)] py-[var(--tapiz-space-section-y)] ${className}`, children: /* @__PURE__ */ jsxs33("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__ */ jsx48("div", { className: "kicker mb-3", children: eyebrow }) : null,
+    /* @__PURE__ */ jsxs33("div", { className: "grid gap-6 lg:grid-cols-[1fr_auto] lg:items-end", children: [
+      /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsx48("h2", { className: "max-w-3xl text-3xl font-semibold tracking-[-0.05em] md:text-5xl", children: title }),
+        description ? /* @__PURE__ */ jsx48("p", { className: "mt-4 max-w-2xl text-base leading-7 text-[var(--tapiz-text-secondary)]", children: description }) : null
+      ] }),
+      actions ? /* @__PURE__ */ jsx48("div", { className: "flex flex-wrap gap-3", children: actions }) : null
+    ] })
+  ] }) });
+}
+
+// src/components/marketing/MockupFrame.tsx
+import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
+function MockupFrame({ children, title, toolbar, className = "" }) {
+  return /* @__PURE__ */ jsxs34("div", { className: `overflow-hidden border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-brutal)] ${className}`, children: [
+    /* @__PURE__ */ jsxs34("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__ */ jsxs34("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx49("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-danger)]" }),
+        /* @__PURE__ */ jsx49("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-warning)]" }),
+        /* @__PURE__ */ jsx49("span", { className: "h-2.5 w-2.5 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-success)]" })
+      ] }),
+      title ? /* @__PURE__ */ jsx49("div", { className: "font-mono text-[10px] uppercase tracking-widest text-[var(--tapiz-text-muted)]", children: title }) : null,
+      /* @__PURE__ */ jsx49("div", { children: toolbar })
+    ] }),
+    /* @__PURE__ */ jsx49("div", { className: "p-4", children })
+  ] });
+}
+
+// src/components/marketing/ComparisonTable.tsx
+import { jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
+function ComparisonTable({ rows, featureHeader = "Feature", includedHeader = "Tapiz", alternativeHeader = "Other", className = "" }) {
+  return /* @__PURE__ */ jsx50("div", { className: `overflow-x-auto border border-[var(--tapiz-border-strong)] ${className}`, children: /* @__PURE__ */ jsxs35("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx50("thead", { children: /* @__PURE__ */ jsxs35("tr", { children: [
+      /* @__PURE__ */ jsx50("th", { className: "px-4 py-3 text-left", children: featureHeader }),
+      /* @__PURE__ */ jsx50("th", { className: "px-4 py-3 text-left", children: includedHeader }),
+      /* @__PURE__ */ jsx50("th", { className: "px-4 py-3 text-left", children: alternativeHeader })
+    ] }) }),
+    /* @__PURE__ */ jsx50("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsxs35("tr", { className: "border-t border-[var(--tapiz-border-subtle)]", children: [
+      /* @__PURE__ */ jsx50("td", { className: "px-4 py-3 font-medium text-[var(--tapiz-text-primary)]", children: row.feature }),
+      /* @__PURE__ */ jsx50("td", { className: "px-4 py-3 text-[var(--tapiz-text-secondary)]", children: row.included }),
+      /* @__PURE__ */ jsx50("td", { className: "px-4 py-3 text-[var(--tapiz-text-muted)]", children: row.alternative })
+    ] }, index)) })
+  ] }) });
+}
+
+// src/components/layout/AppShell.tsx
+import { jsx as jsx51, jsxs as jsxs36 } from "react/jsx-runtime";
+var variantClasses4 = {
+  default: "bg-[var(--tapiz-bg-page)]",
+  grid: "bg-[var(--tapiz-bg-page)] tapiz-grid-bg",
+  noise: "bg-[var(--tapiz-bg-page)] tapiz-noise-bg"
+};
+function AppShell({ sidebar, topbar, children, aside, className = "", contentClassName = "", variant = "default" }) {
+  return /* @__PURE__ */ jsxs36("div", { className: `min-h-screen text-[var(--tapiz-text-primary)] ${variantClasses4[variant]} ${className}`, children: [
+    topbar,
+    /* @__PURE__ */ jsxs36("div", { className: "mx-auto flex w-full max-w-[1600px]", children: [
+      sidebar ? /* @__PURE__ */ jsx51("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__ */ jsx51("main", { className: `min-w-0 flex-1 px-[var(--tapiz-space-page-x)] py-6 ${contentClassName}`, children }),
+      aside ? /* @__PURE__ */ jsx51("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 jsx52, jsxs as jsxs37 } from "react/jsx-runtime";
+var ratios = {
+  "50/50": "lg:grid-cols-2",
+  "60/40": "lg:grid-cols-[minmax(0,3fr)_minmax(320px,2fr)]",
+  "70/30": "lg:grid-cols-[minmax(0,7fr)_minmax(280px,3fr)]"
+};
+function SplitPane({ primary, secondary, ratio = "60/40", reverseOnMobile = false, className = "" }) {
+  return /* @__PURE__ */ jsxs37("div", { className: `grid gap-5 ${ratios[ratio]} ${className}`, children: [
+    /* @__PURE__ */ jsx52("div", { className: reverseOnMobile ? "order-2 lg:order-1" : "", children: primary }),
+    /* @__PURE__ */ jsx52("div", { className: reverseOnMobile ? "order-1 lg:order-2" : "", children: secondary })
+  ] });
+}
+
+// src/components/layout/Stack.tsx
+import { jsx as jsx53 } 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__ */ jsx53("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 jsx54 } 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__ */ jsx54("div", { className: `flex flex-wrap ${gapClasses2[gap]} ${alignClasses2[align]} ${justifyClasses2[justify]} ${className}`, children });
+}
+
+// src/components/navigation/Breadcrumbs.tsx
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+function Breadcrumbs({ items, separator = "/", className = "" }) {
+  return /* @__PURE__ */ jsx55("nav", { "aria-label": "Breadcrumb", className: `font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)] ${className}`, children: /* @__PURE__ */ jsx55("ol", { className: "flex flex-wrap items-center gap-2", children: items.map((item, index) => /* @__PURE__ */ jsxs38("li", { className: "flex items-center gap-2", children: [
+    index > 0 ? /* @__PURE__ */ jsx55("span", { "aria-hidden": "true", className: "text-[var(--tapiz-text-disabled)]", children: separator }) : null,
+    item.href && !item.current ? /* @__PURE__ */ jsx55("a", { className: "hover:text-[var(--tapiz-accent)]", href: item.href, children: item.label }) : /* @__PURE__ */ jsx55("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 Fragment2, jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+function SidebarNav({ groups, header, footer, className = "" }) {
+  return /* @__PURE__ */ jsxs39("div", { className: `flex h-full min-h-screen flex-col bg-[var(--tapiz-bg-surface)] ${className}`, children: [
+    header ? /* @__PURE__ */ jsx56("div", { className: "border-b border-[var(--tapiz-border-subtle)] p-4", children: header }) : null,
+    /* @__PURE__ */ jsx56("nav", { className: "flex-1 space-y-6 p-3", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs39("div", { children: [
+      group.label ? /* @__PURE__ */ jsx56("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__ */ jsx56("div", { className: "space-y-1", children: group.items.map((item, itemIndex) => /* @__PURE__ */ jsx56(SidebarNavLink, { item }, itemIndex)) })
+    ] }, groupIndex)) }),
+    footer ? /* @__PURE__ */ jsx56("div", { className: "border-t border-[var(--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.disabled ? "pointer-events-none opacity-40" : ""
+  ].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ jsxs39(Fragment2, { children: [
+    item.icon ? /* @__PURE__ */ jsx56("span", { className: "grid size-5 place-items-center text-[var(--tapiz-text-muted)]", children: item.icon }) : null,
+    /* @__PURE__ */ jsx56("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+    item.badge ? /* @__PURE__ */ jsx56("span", { children: item.badge }) : null
+  ] });
+  return item.href ? /* @__PURE__ */ jsx56("a", { className, href: item.href, children: content }) : /* @__PURE__ */ jsx56("button", { type: "button", className, onClick: item.onClick, disabled: item.disabled, children: content });
+}
+
+// src/components/navigation/TopNav.tsx
+import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
+function TopNav({ brand, links = [], actions, className = "", sticky = true }) {
+  return /* @__PURE__ */ jsx57("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__ */ jsxs40("div", { className: "mx-auto flex h-16 max-w-[1600px] items-center gap-6 px-[var(--tapiz-space-page-x)]", children: [
+    brand ? /* @__PURE__ */ jsx57("div", { className: "shrink-0", children: brand }) : null,
+    /* @__PURE__ */ jsx57("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__ */ jsx57("a", { href: link.href, className: cls, children: link.label }, index) : /* @__PURE__ */ jsx57("button", { type: "button", onClick: link.onClick, className: cls, children: link.label }, index);
+    }) }),
+    actions ? /* @__PURE__ */ jsx57("div", { className: "ml-auto flex items-center gap-2", children: actions }) : null
+  ] }) });
+}
+
+// src/components/disclosure/Tabs.tsx
+import { jsx as jsx58, jsxs as jsxs41 } 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",
+  brutal: "border-2 border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] p-1 shadow-[var(--tapiz-shadow-brutal)]"
+};
+function Tabs({ items, activeId, onChange, className = "", variant = "line" }) {
+  const active = items.find((item) => item.id === activeId) ?? items[0];
+  return /* @__PURE__ */ jsxs41("div", { className, children: [
+    /* @__PURE__ */ jsx58("div", { role: "tablist", className: `flex flex-wrap gap-1 ${variants[variant]}`, children: items.map((item) => {
+      const selected = item.id === active?.id;
+      return /* @__PURE__ */ jsxs41(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": selected,
+          disabled: item.disabled,
+          onClick: () => onChange?.(item.id),
+          className: `inline-flex items-center gap-2 px-3 py-2 text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-40 ${selected ? "bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-primary)] shadow-[inset_0_-2px_0_var(--tapiz-accent)]" : "text-[var(--tapiz-text-muted)] hover:bg-[var(--tapiz-bg-surface)] hover:text-[var(--tapiz-text-primary)]"}`,
+          children: [
+            item.label,
+            item.badge
+          ]
+        },
+        item.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx58("div", { role: "tabpanel", className: "pt-4", children: active?.content })
+  ] });
+}
+
+// src/components/disclosure/Accordion.tsx
+import { jsx as jsx59, jsxs as jsxs42 } from "react/jsx-runtime";
+function Accordion({ items, openIds = [], onToggle, className = "" }) {
+  return /* @__PURE__ */ jsx59("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__ */ jsxs42("section", { children: [
+      /* @__PURE__ */ jsxs42(
+        "button",
+        {
+          type: "button",
+          disabled: item.disabled,
+          "aria-expanded": open,
+          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__ */ jsx59("span", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
+            /* @__PURE__ */ jsxs42("span", { className: "flex items-center gap-3 text-[var(--tapiz-text-muted)]", children: [
+              item.meta,
+              /* @__PURE__ */ jsx59("span", { "aria-hidden": "true", className: "font-mono text-lg", children: open ? "\u2212" : "+" })
+            ] })
+          ]
+        }
+      ),
+      open ? /* @__PURE__ */ jsx59("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 jsx60, jsxs as jsxs43 } 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)]",
+  upcoming: "border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-muted)]",
+  error: "border-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)] text-[var(--tapiz-danger)]"
+};
+function Stepper({ steps, orientation = "horizontal", className = "" }) {
+  return /* @__PURE__ */ jsx60("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__ */ jsxs43("li", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsx60("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__ */ jsxs43("span", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx60("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: step.label }),
+        step.description ? /* @__PURE__ */ jsx60("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 jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
+function Drawer({ open, onClose, title, description, children, footer, side = "right", className = "" }) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs44("div", { className: "fixed inset-0 z-50", children: [
+    /* @__PURE__ */ jsx61("button", { type: "button", "aria-label": "Close drawer", className: "absolute inset-0 bg-[var(--tapiz-bg-overlay)]", onClick: onClose }),
+    /* @__PURE__ */ jsxs44("section", { className: `absolute top-0 h-full w-full max-w-md border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-lg)] ${side === "right" ? "right-0 border-l" : "left-0 border-r"} ${className}`, children: [
+      /* @__PURE__ */ jsxs44("header", { className: "flex items-start justify-between gap-4 border-b border-[var(--tapiz-border-subtle)] p-5", children: [
+        /* @__PURE__ */ jsxs44("div", { children: [
+          title ? /* @__PURE__ */ jsx61("h2", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
+          description ? /* @__PURE__ */ jsx61("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx61("button", { type: "button", onClick: onClose, className: "border border-[var(--tapiz-border-subtle)] px-2 py-1 font-mono text-sm text-[var(--tapiz-text-muted)] hover:text-[var(--tapiz-text-primary)]", children: "\xD7" })
+      ] }),
+      /* @__PURE__ */ jsx61("div", { className: "max-h-[calc(100vh-9rem)] overflow-auto p-5", children }),
+      footer ? /* @__PURE__ */ jsx61("footer", { className: "border-t border-[var(--tapiz-border-subtle)] p-4", children: footer }) : null
+    ] })
+  ] });
+}
+
+// src/components/overlays/Popover.tsx
+import { jsx as jsx62, jsxs as jsxs45 } from "react/jsx-runtime";
+function Popover({ trigger, children, open = false, align = "start", className = "" }) {
+  return /* @__PURE__ */ jsxs45("div", { className: `relative inline-block ${className}`, children: [
+    trigger,
+    open ? /* @__PURE__ */ jsx62("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 jsx63, jsxs as jsxs46 } 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__ */ jsx63("div", { className: "fixed inset-0 z-50 grid place-items-start bg-[var(--tapiz-bg-overlay)] px-4 pt-[12vh]", onClick: onClose, children: /* @__PURE__ */ jsxs46("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__ */ jsx63("div", { className: "border-b border-[var(--tapiz-border-subtle)] p-3", children: /* @__PURE__ */ jsx63(SearchInput, { value: query, onChange: (value) => onQueryChange?.(value), placeholder, autoFocus: true }) }),
+    /* @__PURE__ */ jsxs46("div", { className: "max-h-[50vh] overflow-auto p-2", children: [
+      !hasItems ? /* @__PURE__ */ jsx63("div", { className: "p-6 text-center text-sm text-[var(--tapiz-text-muted)]", children: empty }) : null,
+      groups.map((group, groupIndex) => /* @__PURE__ */ jsxs46("div", { className: "py-2", children: [
+        group.label ? /* @__PURE__ */ jsx63("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__ */ jsxs46("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__ */ jsx63("span", { className: "grid size-8 place-items-center border border-[var(--tapiz-border-subtle)] text-[var(--tapiz-text-muted)]", children: item.icon }) : null,
+          /* @__PURE__ */ jsxs46("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx63("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.label }),
+            item.description ? /* @__PURE__ */ jsx63("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: item.description }) : null
+          ] }),
+          item.shortcut ? /* @__PURE__ */ jsx63("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.shortcut }) : null
+        ] }, item.id))
+      ] }, groupIndex))
+    ] })
+  ] }) });
+}
+
+// src/components/forms/FormField.tsx
+import { jsx as jsx64, jsxs as jsxs47 } from "react/jsx-runtime";
+function FormField({ label, hint, error, required, htmlFor, children, className = "" }) {
+  return /* @__PURE__ */ jsxs47("div", { className: `space-y-1.5 ${className}`, children: [
+    label ? /* @__PURE__ */ jsxs47(FieldLabel, { htmlFor, children: [
+      label,
+      required ? " *" : ""
+    ] }) : null,
+    children,
+    error ? /* @__PURE__ */ jsx64(FormError, { message: String(error) }) : hint ? /* @__PURE__ */ jsx64(FieldHint, { children: hint }) : null
+  ] });
+}
+
+// src/components/forms/Switch.tsx
+import { jsx as jsx65, jsxs as jsxs48 } from "react/jsx-runtime";
+function Switch({ checked = false, onChange, disabled, label, description, className = "" }) {
+  return /* @__PURE__ */ jsxs48("label", { className: `flex cursor-pointer items-start gap-3 ${disabled ? "cursor-not-allowed opacity-50" : ""} ${className}`, children: [
+    /* @__PURE__ */ jsx65(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        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__ */ jsx65("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__ */ jsxs48("span", { children: [
+      label ? /* @__PURE__ */ jsx65("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: label }) : null,
+      description ? /* @__PURE__ */ jsx65("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: description }) : null
+    ] }) : null
+  ] });
+}
+
+// src/components/forms/ToggleGroup.tsx
+import { jsx as jsx66 } from "react/jsx-runtime";
+function ToggleGroup({ options, value, onChange, className = "", fullWidth = false }) {
+  return /* @__PURE__ */ jsx66("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__ */ jsx66(
+      "button",
+      {
+        type: "button",
+        disabled: option.disabled,
+        onClick: () => onChange?.(option.value),
+        className: `px-3 py-1.5 text-sm font-semibold disabled:opacity-40 ${fullWidth ? "flex-1" : ""} ${selected ? "bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-primary)] shadow-[inset_0_-2px_0_var(--tapiz-accent)]" : "text-[var(--tapiz-text-muted)] hover:text-[var(--tapiz-text-primary)]"}`,
+        children: option.label
+      },
+      option.value
+    );
+  }) });
+}
+
+// src/components/forms/InputGroup.tsx
+import { jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
+function InputGroup({ prefix, suffix, children, className = "" }) {
+  return /* @__PURE__ */ jsxs49("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__ */ jsx67("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__ */ jsx67("div", { className: "min-w-0 flex-1 [&_input]:border-0 [&_input]:shadow-none [&_input]:focus:shadow-none", children }),
+    suffix ? /* @__PURE__ */ jsx67("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 jsx68, jsxs as jsxs50 } 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)]",
+  warning: "border-[var(--tapiz-warning)] bg-[var(--tapiz-warning-soft)] text-[var(--tapiz-warning)]",
+  danger: "border-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)] text-[var(--tapiz-danger)]",
+  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__ */ jsxs50("div", { className: `flex gap-3 border p-4 ${toneClasses[tone2]} ${className}`, children: [
+    icon ? /* @__PURE__ */ jsx68("div", { className: "mt-0.5 shrink-0", children: icon }) : null,
+    /* @__PURE__ */ jsxs50("div", { className: "min-w-0 flex-1", children: [
+      title ? /* @__PURE__ */ jsx68("div", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
+      children ? /* @__PURE__ */ jsx68("div", { className: "mt-1 text-sm text-[var(--tapiz-text-secondary)]", children }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx68("div", { className: "shrink-0", children: actions }) : null
+  ] });
+}
+
+// src/components/feedback/Progress.tsx
+import { jsx as jsx69, jsxs as jsxs51 } from "react/jsx-runtime";
+var tones = {
+  accent: "bg-[var(--tapiz-accent)]",
+  success: "bg-[var(--tapiz-success)]",
+  warning: "bg-[var(--tapiz-warning)]",
+  danger: "bg-[var(--tapiz-danger)]"
+};
+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__ */ jsxs51("div", { className, children: [
+    label || showValue ? /* @__PURE__ */ jsxs51("div", { className: "mb-1 flex items-center justify-between gap-3 text-xs text-[var(--tapiz-text-muted)]", children: [
+      label ? /* @__PURE__ */ jsx69("span", { children: label }) : /* @__PURE__ */ jsx69("span", {}),
+      showValue ? /* @__PURE__ */ jsxs51("span", { className: "font-mono", children: [
+        Math.round(percentage),
+        "%"
+      ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx69("div", { className: "h-2 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx69("div", { className: `h-full ${tones[tone2]}`, style: { width: `${percentage}%` } }) })
+  ] });
+}
+
+// src/components/shared/Avatar.tsx
+import { jsx as jsx70 } 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__ */ jsx70("img", { src, alt: name, className: `border border-[var(--tapiz-border-strong)] object-cover ${sizes[size]} ${className}` }) : /* @__PURE__ */ jsx70("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 jsx71 } from "react/jsx-runtime";
+function Kbd({ children, className = "" }) {
+  return /* @__PURE__ */ jsx71("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 jsx72, jsxs as jsxs52 } 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)]",
+  success: "border-[var(--tapiz-success)] bg-[var(--tapiz-success-soft)] text-[var(--tapiz-success)]",
+  warning: "border-[var(--tapiz-warning)] bg-[var(--tapiz-warning-soft)] text-[var(--tapiz-warning)]",
+  danger: "border-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)] text-[var(--tapiz-danger)]"
+};
+function Timeline({ items, className = "" }) {
+  return /* @__PURE__ */ jsx72("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__ */ jsxs52("li", { className: "relative flex gap-3", children: [
+    /* @__PURE__ */ jsx72("span", { className: `z-10 grid size-8 shrink-0 place-items-center border text-xs ${tones2[item.tone ?? "neutral"]}`, children: item.icon ?? "\u2022" }),
+    /* @__PURE__ */ jsxs52("span", { className: "min-w-0 flex-1 pb-2", children: [
+      /* @__PURE__ */ jsxs52("span", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
+        /* @__PURE__ */ jsx72("span", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
+        item.time ? /* @__PURE__ */ jsx72("span", { className: "font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: item.time }) : null
+      ] }),
+      item.description ? /* @__PURE__ */ jsx72("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 jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
+function KeyValueList({ items, className = "", density = "normal" }) {
+  return /* @__PURE__ */ jsx73("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__ */ jsxs53("div", { className: `grid gap-2 ${density === "compact" ? "p-3 md:grid-cols-[160px_1fr]" : "p-4 md:grid-cols-[220px_1fr]"}`, children: [
+    /* @__PURE__ */ jsx73("dt", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: item.keyLabel }),
+    /* @__PURE__ */ jsxs53("dd", { children: [
+      /* @__PURE__ */ jsx73("div", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.value }),
+      item.description ? /* @__PURE__ */ jsx73("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.description }) : null
+    ] })
+  ] }, index)) });
+}
+
+// src/components/shared/CodeBlock.tsx
+import { jsx as jsx74, jsxs as jsxs54 } from "react/jsx-runtime";
+function CodeBlock({ children, language, title, actions, className = "" }) {
+  return /* @__PURE__ */ jsxs54("figure", { className: `overflow-hidden border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] ${className}`, children: [
+    title || language || actions ? /* @__PURE__ */ jsxs54("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__ */ jsx74("span", { className: "font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: title ?? language }),
+      actions
+    ] }) : null,
+    /* @__PURE__ */ jsx74("pre", { className: "overflow-auto p-4 text-sm leading-6 text-[var(--tapiz-text-secondary)]", children: /* @__PURE__ */ jsx74("code", { children }) })
+  ] });
+}
+
+// src/components/marketing/LogoCloud.tsx
+import { jsx as jsx75, jsxs as jsxs55 } from "react/jsx-runtime";
+function LogoCloud({ title, items, className = "" }) {
+  return /* @__PURE__ */ jsx75("section", { className: `border-y border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] py-8 ${className}`, children: /* @__PURE__ */ jsxs55("div", { className: "mx-auto max-w-7xl px-[var(--tapiz-space-page-x)]", children: [
+    title ? /* @__PURE__ */ jsx75("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__ */ jsx75("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4 lg:grid-cols-6", children: items.map((item) => /* @__PURE__ */ jsx75("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 jsx76, jsxs as jsxs56 } from "react/jsx-runtime";
+function TestimonialCard({ quote, author, role, avatarSrc, className = "", variant = "surface" }) {
+  return /* @__PURE__ */ jsxs56("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__ */ jsxs56("blockquote", { className: "text-base leading-7 text-[var(--tapiz-text-secondary)]", children: [
+      "\u201C",
+      quote,
+      "\u201D"
+    ] }),
+    /* @__PURE__ */ jsxs56("figcaption", { className: "mt-5 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx76(Avatar, { name: author, src: avatarSrc, size: "sm" }),
+      /* @__PURE__ */ jsxs56("span", { children: [
+        /* @__PURE__ */ jsx76("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: author }),
+        role ? /* @__PURE__ */ jsx76("span", { className: "block text-xs text-[var(--tapiz-text-muted)]", children: role }) : null
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/marketing/PricingCard.tsx
+import { jsx as jsx77, jsxs as jsxs57 } from "react/jsx-runtime";
+function PricingCard({ name, price, description, features = [], cta, highlighted = false, className = "" }) {
+  return /* @__PURE__ */ jsxs57("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__ */ jsxs57("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsx77("h3", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: name }),
+      description ? /* @__PURE__ */ jsx77("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null,
+      /* @__PURE__ */ jsx77("div", { className: "mt-6 text-4xl font-semibold tracking-tight text-[var(--tapiz-text-primary)]", children: price }),
+      /* @__PURE__ */ jsx77("ul", { className: "mt-6 space-y-3 text-sm text-[var(--tapiz-text-secondary)]", children: features.map((feature, index) => /* @__PURE__ */ jsxs57("li", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx77("span", { className: "text-[var(--tapiz-success)]", children: "\u2713" }),
+        /* @__PURE__ */ jsx77("span", { children: feature })
+      ] }, index)) })
+    ] }),
+    /* @__PURE__ */ jsx77("div", { className: "mt-6", children: cta ?? /* @__PURE__ */ jsx77(Button, { variant: highlighted ? "primary" : "secondary", fullWidth: true, children: "Get started" }) })
+  ] });
+}
+
+// src/components/marketing/StatsBand.tsx
+import { jsx as jsx78, jsxs as jsxs58 } from "react/jsx-runtime";
+function StatsBand({ items, className = "" }) {
+  return /* @__PURE__ */ jsx78("section", { className: `border-y border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-inverse)] text-[var(--tapiz-text-inverse)] ${className}`, children: /* @__PURE__ */ jsx78("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__ */ jsxs58("div", { className: "p-6 md:p-8", children: [
+    /* @__PURE__ */ jsx78("div", { className: "text-3xl font-semibold tracking-tight", children: item.value }),
+    /* @__PURE__ */ jsx78("div", { className: "mt-2 font-mono text-[10px] font-bold uppercase tracking-[0.18em] opacity-70", children: item.label }),
+    item.description ? /* @__PURE__ */ jsx78("div", { className: "mt-3 text-sm opacity-70", children: item.description }) : null
+  ] }, index)) }) });
+}
+
+// src/presets/framework.ts
+var tapizFrameworkPresets = {
+  enterprise: {
+    shell: "tapiz-enterprise-shell",
+    card: "tapiz-enterprise-card",
+    button: "primary",
+    density: "comfortable"
+  },
+  brutal: {
+    shell: "tapiz-enterprise-shell tapiz-grid-bg",
+    card: "tapiz-brutal-card",
+    button: "brutal",
+    density: "comfortable"
+  },
+  dashboard: {
+    shell: "tapiz-enterprise-shell",
+    card: "stat-card",
+    button: "secondary",
+    density: "compact"
+  },
+  marketing: {
+    shell: "tapiz-enterprise-shell tapiz-noise-bg",
+    card: "tapiz-enterprise-card",
+    button: "primary",
+    density: "spacious"
+  },
+  compact: {
+    shell: "tapiz-enterprise-shell",
+    card: "card",
+    button: "secondary",
+    density: "compact"
+  }
+};
+
+// src/components/layout/Container.tsx
+import { jsx as jsx79 } from "react/jsx-runtime";
+var sizeClasses2 = {
+  sm: "max-w-3xl",
+  md: "max-w-5xl",
+  lg: "max-w-7xl",
+  xl: "max-w-[90rem]",
+  full: "max-w-none"
+};
+function Container({ children, size = "lg", padded = true, className = "", style }) {
+  return /* @__PURE__ */ jsx79(
+    "div",
+    {
+      className: ["mx-auto w-full", sizeClasses2[size], padded ? "px-[var(--tapiz-space-page-x)]" : "", className].filter(Boolean).join(" "),
+      style,
+      children
+    }
+  );
+}
+
+// src/components/layout/Surface.tsx
+import { jsx as jsx80 } 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)]",
+  raised: "bg-[var(--tapiz-bg-surface-raised)] text-[var(--tapiz-text-primary)] shadow-[var(--tapiz-shadow-md)]",
+  muted: "bg-[var(--tapiz-bg-surface-muted)] text-[var(--tapiz-text-primary)]",
+  brutal: "bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-primary)] border-2 border-[var(--tapiz-border-strong)] shadow-[var(--tapiz-shadow-brutal)]",
+  inverse: "bg-[var(--tapiz-bg-surface-inverse)] text-[var(--tapiz-text-inverse)]"
+};
+var paddingClasses2 = {
+  none: "p-0",
+  sm: "p-3",
+  md: "p-5",
+  lg: "p-6",
+  xl: "p-8"
+};
+function Surface({ children, variant = "surface", padding = "md", bordered = true, className = "", style }) {
+  return /* @__PURE__ */ jsx80(
+    "section",
+    {
+      className: [variantClasses5[variant], paddingClasses2[padding], bordered && variant !== "brutal" ? "border border-[var(--tapiz-border-subtle)]" : "", className].filter(Boolean).join(" "),
+      style,
+      children
+    }
+  );
+}
+
+// src/components/layout/Divider.tsx
+import { jsx as jsx81, jsxs as jsxs59 } from "react/jsx-runtime";
+function Divider({ orientation = "horizontal", label, className = "" }) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx81("div", { className: `mx-2 min-h-6 w-px bg-[var(--tapiz-border-subtle)] ${className}`, "aria-hidden": "true" });
+  }
+  if (label) {
+    return /* @__PURE__ */ jsxs59("div", { className: `flex items-center gap-3 ${className}`, children: [
+      /* @__PURE__ */ jsx81("div", { className: "h-px flex-1 bg-[var(--tapiz-border-subtle)]" }),
+      /* @__PURE__ */ jsx81("span", { className: "font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--tapiz-text-muted)]", children: label }),
+      /* @__PURE__ */ jsx81("div", { className: "h-px flex-1 bg-[var(--tapiz-border-subtle)]" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx81("hr", { className: `border-[var(--tapiz-border-subtle)] ${className}` });
+}
+
+// src/components/layout/ResponsiveGrid.tsx
+import { jsx as jsx82 } from "react/jsx-runtime";
+var gapClasses3 = {
+  sm: "gap-3",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8"
+};
+function ResponsiveGrid({ children, min = "18rem", gap = "md", className = "", style }) {
+  return /* @__PURE__ */ jsx82(
+    "div",
+    {
+      className: `grid ${gapClasses3[gap]} ${className}`,
+      style: { gridTemplateColumns: `repeat(auto-fit, minmax(${min}, 1fr))`, ...style },
+      children
+    }
+  );
+}
+
+// src/components/data-display/Sparkline.tsx
+import { jsx as jsx83, jsxs as jsxs60 } 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);
+  const max = Math.max(...safeValues);
+  const range = max - min || 1;
+  const step = safeValues.length > 1 ? width / (safeValues.length - 1) : width;
+  const points = safeValues.map((value, index) => {
+    const x = index * step;
+    const y = height - (value - min) / range * (height - 6) - 3;
+    return `${x},${y}`;
+  }).join(" ");
+  return /* @__PURE__ */ jsxs60("svg", { className, style, width, height, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": label, children: [
+    /* @__PURE__ */ jsx83("polyline", { points, fill: "none", stroke: "var(--tapiz-accent)", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "miter" }),
+    /* @__PURE__ */ jsx83("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 jsx84, jsxs as jsxs61 } 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__ */ jsx84("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__ */ jsxs61("div", { children: [
+      /* @__PURE__ */ jsxs61("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsx84("span", { className: "font-medium text-[var(--tapiz-text-secondary)]", children: item.label }),
+        /* @__PURE__ */ jsx84("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: valueFormatter(item.value) })
+      ] }),
+      /* @__PURE__ */ jsx84("div", { className: "h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx84("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${percent}%` } }) }),
+      item.detail ? /* @__PURE__ */ jsx84("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 jsx85, jsxs as jsxs62 } 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__ */ jsxs62("div", { className: `inline-flex items-center gap-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs62("svg", { width: size, height: size, viewBox: "0 0 112 112", role: "img", "aria-label": `${Math.round(ratio * 100)}%`, children: [
+      /* @__PURE__ */ jsx85("circle", { cx: "56", cy: "56", r: radius, fill: "none", stroke: "var(--tapiz-border-subtle)", strokeWidth: "10" }),
+      /* @__PURE__ */ jsx85(
+        "circle",
+        {
+          cx: "56",
+          cy: "56",
+          r: radius,
+          fill: "none",
+          stroke: "var(--tapiz-accent)",
+          strokeWidth: "10",
+          strokeDasharray: circumference,
+          strokeDashoffset: offset,
+          strokeLinecap: "square",
+          transform: "rotate(-90 56 56)"
+        }
+      ),
+      /* @__PURE__ */ jsxs62("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__ */ jsxs62("div", { children: [
+      label ? /* @__PURE__ */ jsx85("div", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: label }) : null,
+      caption ? /* @__PURE__ */ jsx85("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 jsx86, jsxs as jsxs63 } from "react/jsx-runtime";
+function FilterChip({ children, active = false, onRemove, className = "" }) {
+  return /* @__PURE__ */ jsxs63(
+    "span",
+    {
+      className: [
+        "inline-flex items-center gap-2 border px-2.5 py-1 font-mono text-[11px] uppercase tracking-[0.12em]",
+        active ? "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-accent-soft)] text-[var(--tapiz-text-primary)]" : "border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] text-[var(--tapiz-text-muted)]",
+        className
+      ].join(" "),
+      children: [
+        children,
+        onRemove ? /* @__PURE__ */ jsx86("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 jsx87, jsxs as jsxs64 } from "react/jsx-runtime";
+function DataToolbar({ title, description, search, filters, actions, className = "" }) {
+  return /* @__PURE__ */ jsxs64("div", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs64("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [
+      /* @__PURE__ */ jsxs64("div", { children: [
+        title ? /* @__PURE__ */ jsx87("h3", { className: "text-base font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
+        description ? /* @__PURE__ */ jsx87("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null
+      ] }),
+      actions ? /* @__PURE__ */ jsx87("div", { className: "flex flex-wrap gap-2", children: actions }) : null
+    ] }),
+    search || filters ? /* @__PURE__ */ jsxs64("div", { className: "mt-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
+      search ? /* @__PURE__ */ jsx87("div", { className: "min-w-0 flex-1", children: search }) : null,
+      filters ? /* @__PURE__ */ jsx87("div", { className: "flex flex-wrap gap-2", children: filters }) : null
+    ] }) : null
+  ] });
+}
+
+// src/components/framework/ResourceCard.tsx
+import { Fragment as Fragment3, jsx as jsx88, jsxs as jsxs65 } from "react/jsx-runtime";
+function ResourceCard({ title, description, eyebrow, icon, meta, status, actions, href, className = "" }) {
+  const content = /* @__PURE__ */ jsxs65(Fragment3, { children: [
+    /* @__PURE__ */ jsxs65("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs65("div", { className: "flex min-w-0 items-start gap-3", children: [
+        icon ? /* @__PURE__ */ jsx88("div", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-2 text-[var(--tapiz-accent)]", children: icon }) : null,
+        /* @__PURE__ */ jsxs65("div", { className: "min-w-0", children: [
+          eyebrow ? /* @__PURE__ */ jsx88("div", { className: "kicker mb-2", children: eyebrow }) : null,
+          /* @__PURE__ */ jsx88("h3", { className: "truncate text-base font-semibold text-[var(--tapiz-text-primary)]", children: title }),
+          description ? /* @__PURE__ */ jsx88("p", { className: "mt-2 line-clamp-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
+        ] })
+      ] }),
+      status ? /* @__PURE__ */ jsx88(Badge, { children: status }) : null
+    ] }),
+    meta || actions ? /* @__PURE__ */ jsxs65("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__ */ jsx88("div", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: meta }) : /* @__PURE__ */ jsx88("span", {}),
+      actions ? /* @__PURE__ */ jsx88("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__ */ jsx88("a", { href, className: classes, children: content }) : /* @__PURE__ */ jsx88("article", { className: classes, children: content });
+}
+
+// src/components/framework/IntegrationCard.tsx
+import { jsx as jsx89, jsxs as jsxs66 } from "react/jsx-runtime";
+var statusLabel = {
+  connected: "Connected",
+  disconnected: "Disconnected",
+  syncing: "Syncing",
+  error: "Error"
+};
+var statusVariant = {
+  connected: "success",
+  disconnected: "default",
+  syncing: "info",
+  error: "danger"
+};
+function IntegrationCard({ name, description, logo, status = "disconnected", lastSync, actions, className = "" }) {
+  return /* @__PURE__ */ jsxs66("article", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5 ${className}`, children: [
+    /* @__PURE__ */ jsxs66("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs66("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx89("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__ */ jsx89("span", { className: "font-mono text-xs", children: "API" }) }),
+        /* @__PURE__ */ jsxs66("div", { children: [
+          /* @__PURE__ */ jsx89("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: name }),
+          description ? /* @__PURE__ */ jsx89("p", { className: "mt-1 text-sm leading-5 text-[var(--tapiz-text-muted)]", children: description }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx89(StatusBadge, { variant: statusVariant[status], label: statusLabel[status] })
+    ] }),
+    /* @__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: [
+      /* @__PURE__ */ jsx89("div", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: lastSync ?? "No sync yet" }),
+      actions ? /* @__PURE__ */ jsx89("div", { className: "flex gap-2", children: actions }) : null
+    ] })
+  ] });
+}
+
+// src/components/framework/HealthIndicator.tsx
+import { jsx as jsx90, jsxs as jsxs67 } from "react/jsx-runtime";
+var toneClasses2 = {
+  operational: "bg-[var(--tapiz-success)]",
+  degraded: "bg-[var(--tapiz-warning)]",
+  outage: "bg-[var(--tapiz-danger)]",
+  unknown: "bg-[var(--tapiz-text-disabled)]"
+};
+var defaultLabel = {
+  operational: "Operational",
+  degraded: "Degraded",
+  outage: "Outage",
+  unknown: "Unknown"
+};
+function HealthIndicator({ tone: tone2 = "unknown", label, detail, className = "" }) {
+  return /* @__PURE__ */ jsxs67("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__ */ jsx90("span", { className: `size-2.5 ${toneClasses2[tone2]}`, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx90("span", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: label ?? defaultLabel[tone2] }),
+    detail ? /* @__PURE__ */ jsx90("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: detail }) : null
+  ] });
+}
+
+// src/components/framework/AuditLog.tsx
+import { jsx as jsx91, jsxs as jsxs68 } from "react/jsx-runtime";
+function AuditLog({ items, className = "" }) {
+  return /* @__PURE__ */ jsx91("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__ */ jsxs68("div", { className: "flex gap-3 p-4", children: [
+    /* @__PURE__ */ jsx91(Avatar, { name: item.initials ?? item.actor, size: "sm" }),
+    /* @__PURE__ */ jsxs68("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs68("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs68("p", { className: "text-sm text-[var(--tapiz-text-secondary)]", children: [
+          /* @__PURE__ */ jsx91("strong", { className: "text-[var(--tapiz-text-primary)]", children: item.actor }),
+          " ",
+          item.action
+        ] }),
+        /* @__PURE__ */ jsx91("span", { className: "font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.timestamp })
+      ] }),
+      item.detail ? /* @__PURE__ */ jsx91("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 jsx92, jsxs as jsxs69 } from "react/jsx-runtime";
+var toneClasses3 = {
+  default: "border-[var(--tapiz-border-subtle)]",
+  accent: "border-[var(--tapiz-accent)]",
+  success: "border-[var(--tapiz-success)]",
+  warning: "border-[var(--tapiz-warning)]",
+  danger: "border-[var(--tapiz-danger)]"
+};
+function KanbanBoard({ columns, className = "" }) {
+  return /* @__PURE__ */ jsx92("div", { className: `grid gap-4 overflow-x-auto md:grid-flow-col md:auto-cols-[minmax(18rem,1fr)] ${className}`, children: columns.map((column) => /* @__PURE__ */ jsxs69("section", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)] p-3", children: [
+    /* @__PURE__ */ jsxs69("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs69("div", { children: [
+        /* @__PURE__ */ jsx92("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: column.title }),
+        column.description ? /* @__PURE__ */ jsx92("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: column.description }) : null
+      ] }),
+      /* @__PURE__ */ jsx92("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: column.items.length })
+    ] }),
+    /* @__PURE__ */ jsx92("div", { className: "space-y-3", children: column.items.map((item) => /* @__PURE__ */ jsxs69("article", { className: `border-l-2 bg-[var(--tapiz-bg-surface)] p-3 shadow-[var(--tapiz-shadow-sm)] ${toneClasses3[item.tone ?? "default"]}`, children: [
+      /* @__PURE__ */ jsx92("h4", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: item.title }),
+      item.description ? /* @__PURE__ */ jsx92("p", { className: "mt-1 text-xs leading-5 text-[var(--tapiz-text-muted)]", children: item.description }) : null,
+      item.meta ? /* @__PURE__ */ jsx92("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 jsx93, jsxs as jsxs70 } from "react/jsx-runtime";
+function AccessMatrix({ roles, permissions, className = "" }) {
+  return /* @__PURE__ */ jsx93("div", { className: `overflow-x-auto border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: /* @__PURE__ */ jsxs70("table", { className: "min-w-full text-sm", children: [
+    /* @__PURE__ */ jsx93("thead", { children: /* @__PURE__ */ jsxs70("tr", { children: [
+      /* @__PURE__ */ jsx93("th", { className: "px-4 py-3 text-left", children: "Permission" }),
+      roles.map((role) => /* @__PURE__ */ jsx93("th", { className: "px-4 py-3 text-center", children: role.label }, role.key))
+    ] }) }),
+    /* @__PURE__ */ jsx93("tbody", { children: permissions.map((permission) => /* @__PURE__ */ jsxs70("tr", { children: [
+      /* @__PURE__ */ jsxs70("td", { className: "px-4 py-3", children: [
+        /* @__PURE__ */ jsx93("div", { className: "font-medium text-[var(--tapiz-text-primary)]", children: permission.label }),
+        permission.description ? /* @__PURE__ */ jsx93("div", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: permission.description }) : null
+      ] }),
+      roles.map((role) => /* @__PURE__ */ jsx93("td", { className: "px-4 py-3 text-center", children: /* @__PURE__ */ jsx93("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 jsx94, jsxs as jsxs71 } from "react/jsx-runtime";
+var defaultWeekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+function CalendarGrid({ days, weekdays = defaultWeekdays, className = "" }) {
+  return /* @__PURE__ */ jsxs71("div", { className: `border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] ${className}`, children: [
+    /* @__PURE__ */ jsx94("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__ */ jsx94("div", { className: "px-3 py-2 font-mono text-[10px] uppercase tracking-[0.16em] text-[var(--tapiz-text-muted)]", children: day }, index)) }),
+    /* @__PURE__ */ jsx94("div", { className: "grid grid-cols-7", children: days.map((day, index) => /* @__PURE__ */ jsxs71("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__ */ jsxs71("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx94("span", { className: "font-mono text-xs text-[var(--tapiz-text-primary)]", children: day.date }),
+        day.label ? /* @__PURE__ */ jsx94("span", { className: "text-[10px] text-[var(--tapiz-text-muted)]", children: day.label }) : null
+      ] }),
+      day.events?.length ? /* @__PURE__ */ jsx94("div", { className: "mt-2 space-y-1", children: day.events.map((event, eventIndex) => /* @__PURE__ */ jsx94("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 jsx95, jsxs as jsxs72 } from "react/jsx-runtime";
+function Slider({ label, valueLabel, className = "", ...props }) {
+  return /* @__PURE__ */ jsxs72("label", { className: `block ${className}`, children: [
+    label || valueLabel ? /* @__PURE__ */ jsxs72("span", { className: "mb-2 flex items-center justify-between gap-3 text-sm", children: [
+      label ? /* @__PURE__ */ jsx95("span", { className: "font-medium text-[var(--tapiz-text-secondary)]", children: label }) : /* @__PURE__ */ jsx95("span", {}),
+      valueLabel ? /* @__PURE__ */ jsx95("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: valueLabel }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx95(
+      "input",
+      {
+        ...props,
+        type: "range",
+        className: "h-2 w-full cursor-pointer appearance-none border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)] accent-[var(--tapiz-accent)]"
+      }
+    )
+  ] });
+}
+
+// src/components/forms/FileDropzone.tsx
+import { jsx as jsx96, jsxs as jsxs73 } from "react/jsx-runtime";
+function FileDropzone({ title = "Drop files here", description, actionLabel = "Browse", className = "", ...props }) {
+  return /* @__PURE__ */ jsxs73("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__ */ jsx96("input", { ...props, type: "file", className: "sr-only" }),
+    /* @__PURE__ */ jsx96("span", { className: "block text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }),
+    description ? /* @__PURE__ */ jsx96("span", { className: "mt-2 block text-sm text-[var(--tapiz-text-muted)]", children: description }) : null,
+    /* @__PURE__ */ jsx96("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 { jsx as jsx97, jsxs as jsxs74 } from "react/jsx-runtime";
+function PasswordInput({ revealLabel = "Show", className = "", ...props }) {
+  return /* @__PURE__ */ jsxs74("div", { className: `flex 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_0_var(--tapiz-signal)] ${className}`, children: [
+    /* @__PURE__ */ jsx97(
+      "input",
+      {
+        ...props,
+        type: "password",
+        className: "min-w-0 flex-1 border-0 bg-transparent px-3 py-2 text-sm text-[var(--tapiz-text-primary)] outline-none"
+      }
+    ),
+    /* @__PURE__ */ jsx97("button", { type: "button", className: "border-l border-[var(--tapiz-border-subtle)] px-3 font-mono text-xs text-[var(--tapiz-text-muted)]", tabIndex: -1, children: revealLabel })
+  ] });
+}
+
+// src/components/forms/TextareaCounter.tsx
+import { jsx as jsx98, jsxs as jsxs75 } from "react/jsx-runtime";
+function TextareaCounter({ maxLength, value = "", className = "", ...props }) {
+  const count = value.length;
+  return /* @__PURE__ */ jsxs75("div", { className, children: [
+    /* @__PURE__ */ jsx98("textarea", { ...props, value, maxLength, className: "input-field min-h-28" }),
+    /* @__PURE__ */ jsxs75("div", { className: "mt-1 text-right font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: [
+      count,
+      "/",
+      maxLength
+    ] })
+  ] });
+}
+
+// src/components/feedback/Callout.tsx
+import { jsx as jsx99, jsxs as jsxs76 } 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)]",
+  warning: "border-[var(--tapiz-warning)] bg-[var(--tapiz-warning-soft)]",
+  danger: "border-[var(--tapiz-danger)] bg-[var(--tapiz-danger-soft)]",
+  neutral: "border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]"
+};
+function Callout({ title, children, tone: tone2 = "info", icon, actions, className = "" }) {
+  return /* @__PURE__ */ jsx99("aside", { className: `border-l-4 p-4 ${toneClasses4[tone2]} ${className}`, children: /* @__PURE__ */ jsxs76("div", { className: "flex gap-3", children: [
+    icon ? /* @__PURE__ */ jsx99("div", { className: "text-[var(--tapiz-text-primary)]", children: icon }) : null,
+    /* @__PURE__ */ jsxs76("div", { className: "min-w-0 flex-1", children: [
+      title ? /* @__PURE__ */ jsx99("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
+      children ? /* @__PURE__ */ jsx99("div", { className: "mt-1 text-sm leading-6 text-[var(--tapiz-text-secondary)]", children }) : null,
+      actions ? /* @__PURE__ */ jsx99("div", { className: "mt-3 flex flex-wrap gap-2", children: actions }) : null
+    ] })
+  ] }) });
+}
+
+// src/components/feedback/LoadingOverlay.tsx
+import { jsx as jsx100, jsxs as jsxs77 } from "react/jsx-runtime";
+function LoadingOverlay({ visible = false, label = "Loading", children, className = "" }) {
+  return /* @__PURE__ */ jsxs77("div", { className: `relative ${className}`, children: [
+    children,
+    visible ? /* @__PURE__ */ jsx100("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__ */ jsxs77("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__ */ jsx100(Spinner, {}),
+      /* @__PURE__ */ jsx100("span", { children: label })
+    ] }) }) : null
+  ] });
+}
+
+// src/components/feedback/NotificationList.tsx
+import { jsx as jsx101, jsxs as jsxs78 } from "react/jsx-runtime";
+function NotificationList({ items, className = "" }) {
+  return /* @__PURE__ */ jsx101("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__ */ jsxs78("article", { className: "flex gap-3 p-4", children: [
+    /* @__PURE__ */ jsx101("span", { className: `mt-1 size-2.5 ${item.unread ? "bg-[var(--tapiz-accent)]" : "bg-[var(--tapiz-border-subtle)]"}`, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs78("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs78("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsx101("h3", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: item.title }),
+        item.time ? /* @__PURE__ */ jsx101("span", { className: "font-mono text-[11px] text-[var(--tapiz-text-muted)]", children: item.time }) : null
+      ] }),
+      item.description ? /* @__PURE__ */ jsx101("p", { className: "mt-1 text-sm leading-5 text-[var(--tapiz-text-muted)]", children: item.description }) : null,
+      item.action ? /* @__PURE__ */ jsx101("div", { className: "mt-3", children: item.action }) : null
+    ] })
+  ] }, item.id)) });
+}
+
+// src/components/layout/MasonryGrid.tsx
+import { jsx as jsx102 } 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__ */ jsx102("div", { className: [columnClasses[columns], gapClasses4[gap], className].filter(Boolean).join(" "), style, children });
+}
+
+// src/components/layout/PageRail.tsx
+import { Fragment as Fragment4, jsx as jsx103, jsxs as jsxs79 } from "react/jsx-runtime";
+function PageRail({ title, items, actions, className = "", style }) {
+  return /* @__PURE__ */ jsxs79("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__ */ jsx103("div", { className: "kicker mb-3 px-2", children: title }) : null,
+    /* @__PURE__ */ jsx103("nav", { className: "flex flex-col gap-1", children: items.map((item, index) => {
+      const content = /* @__PURE__ */ jsxs79(Fragment4, { children: [
+        /* @__PURE__ */ jsx103("span", { className: "truncate", children: item.label }),
+        item.meta ? /* @__PURE__ */ jsx103("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__ */ jsx103("a", { href: item.href, className: classes, children: content }, index) : /* @__PURE__ */ jsx103("div", { className: classes, children: content }, index);
+    }) }),
+    actions ? /* @__PURE__ */ jsx103("div", { className: "mt-3 border-t border-[var(--tapiz-border-subtle)] pt-3", children: actions }) : null
+  ] });
+}
+
+// src/components/layout/StickyBar.tsx
+import { jsx as jsx104 } from "react/jsx-runtime";
+function StickyBar({ children, position = "top", className = "", style }) {
+  return /* @__PURE__ */ jsx104(
+    "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(" "),
+      style,
+      children
+    }
+  );
+}
+
+// src/components/forms/Combobox.tsx
+import { jsx as jsx105, jsxs as jsxs80 } from "react/jsx-runtime";
+function Combobox({ options, placeholder = "Select option", invalid = false, className = "", ...props }) {
+  return /* @__PURE__ */ jsxs80("select", { ...props, className: ["input-field appearance-none bg-[var(--tapiz-bg-surface)]", invalid ? "border-warn focus:border-warn" : "", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx105("option", { value: "", children: placeholder }),
+    options.map((option) => /* @__PURE__ */ jsx105("option", { value: option.value, children: String(option.label) }, option.value))
+  ] });
+}
+
+// src/components/forms/DateRangePicker.tsx
+import { jsx as jsx106, jsxs as jsxs81 } from "react/jsx-runtime";
+function DateRangePicker({ startLabel = "From", endLabel = "To", startProps, endProps, className = "" }) {
+  return /* @__PURE__ */ jsxs81("div", { className: ["grid gap-3 md:grid-cols-2", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs81("label", { className: "flex flex-col gap-1.5 text-sm text-[var(--tapiz-text-muted)]", children: [
+      /* @__PURE__ */ jsx106("span", { children: startLabel }),
+      /* @__PURE__ */ jsx106("input", { type: "date", ...startProps, className: ["input-field", startProps?.className || ""].join(" ") })
+    ] }),
+    /* @__PURE__ */ jsxs81("label", { className: "flex flex-col gap-1.5 text-sm text-[var(--tapiz-text-muted)]", children: [
+      /* @__PURE__ */ jsx106("span", { children: endLabel }),
+      /* @__PURE__ */ jsx106("input", { type: "date", ...endProps, className: ["input-field", endProps?.className || ""].join(" ") })
+    ] })
+  ] });
+}
+
+// src/components/forms/ColorSwatchPicker.tsx
+import { jsx as jsx107, jsxs as jsxs82 } from "react/jsx-runtime";
+function ColorSwatchPicker({ options, value, onChange, className = "" }) {
+  return /* @__PURE__ */ jsx107("div", { className: ["flex flex-wrap gap-2", className].filter(Boolean).join(" "), children: options.map((option) => {
+    const selected = option.value === value;
+    return /* @__PURE__ */ jsxs82("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__ */ jsx107("span", { className: "h-4 w-4 border border-[var(--tapiz-border-strong)]", style: { background: option.color } }),
+      /* @__PURE__ */ jsx107("span", { children: option.label })
+    ] }, option.value);
+  }) });
+}
+
+// src/components/forms/RatingInput.tsx
+import { jsx as jsx108 } from "react/jsx-runtime";
+function RatingInput({ value = 0, max = 5, icon = "\u2605", onChange, label = "Rating", className = "" }) {
+  return /* @__PURE__ */ jsx108("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__ */ jsx108("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 jsx109, jsxs as jsxs83 } 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__ */ jsxs83("div", { className: ["inline-grid place-items-center", className].filter(Boolean).join(" "), style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsxs83("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
+      /* @__PURE__ */ jsx109("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--tapiz-border-subtle)", strokeWidth: "10" }),
+      /* @__PURE__ */ jsx109("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--tapiz-accent)", strokeWidth: "10", strokeLinecap: "square", strokeDasharray: `${dash} ${circumference - dash}` })
+    ] }),
+    /* @__PURE__ */ jsxs83("div", { className: "absolute text-center", children: [
+      /* @__PURE__ */ jsxs83("div", { className: "font-display text-2xl font-semibold text-[var(--tapiz-text-primary)]", children: [
+        Math.round(normalized * 100),
+        "%"
+      ] }),
+      label ? /* @__PURE__ */ jsx109("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 jsx110 } from "react/jsx-runtime";
+function HeatmapGrid({ cells, columns = 7, max, className = "" }) {
+  const peak = max ?? Math.max(1, ...cells.map((cell) => cell.value));
+  return /* @__PURE__ */ jsx110("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__ */ jsx110("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__ */ jsx110("span", { className: "sr-only", children: cell.label }) : null }, index);
+  }) });
+}
+
+// src/components/data-display/FunnelChart.tsx
+import { jsx as jsx111, jsxs as jsxs84 } from "react/jsx-runtime";
+function FunnelChart({ steps, className = "" }) {
+  const max = Math.max(1, ...steps.map((step) => step.value));
+  return /* @__PURE__ */ jsx111("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__ */ jsxs84("div", { children: [
+      /* @__PURE__ */ jsxs84("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsx111("span", { className: "font-medium text-[var(--tapiz-text-primary)]", children: step.label }),
+        /* @__PURE__ */ jsxs84("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: [
+          step.value,
+          step.meta ? ` \xB7 ${String(step.meta)}` : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx111("div", { className: "h-9 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx111("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 jsx112, jsxs as jsxs85 } from "react/jsx-runtime";
+function ComparisonMeter({ leftLabel, rightLabel, value, className = "" }) {
+  const clamped = Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ jsxs85("div", { className, children: [
+    /* @__PURE__ */ jsxs85("div", { className: "mb-2 flex justify-between gap-3 text-sm text-[var(--tapiz-text-muted)]", children: [
+      /* @__PURE__ */ jsx112("span", { children: leftLabel }),
+      /* @__PURE__ */ jsx112("span", { children: rightLabel })
+    ] }),
+    /* @__PURE__ */ jsxs85("div", { className: "relative h-3 border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface-muted)]", children: [
+      /* @__PURE__ */ jsx112("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${clamped}%` } }),
+      /* @__PURE__ */ jsx112("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 jsx113, jsxs as jsxs86 } from "react/jsx-runtime";
+function ActivityFeed({ items, className = "" }) {
+  return /* @__PURE__ */ jsx113("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__ */ jsxs86("div", { className: "flex gap-3 p-4", children: [
+    /* @__PURE__ */ jsx113(Avatar, { name: item.actor, src: item.avatarUrl, size: "sm" }),
+    /* @__PURE__ */ jsxs86("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs86("p", { className: "text-sm text-[var(--tapiz-text-primary)]", children: [
+        /* @__PURE__ */ jsx113("strong", { children: item.actor }),
+        " ",
+        item.action
+      ] }),
+      item.meta ? /* @__PURE__ */ jsx113("div", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: item.meta }) : null
+    ] }),
+    item.time ? /* @__PURE__ */ jsx113("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 jsx114, jsxs as jsxs87 } from "react/jsx-runtime";
+function InboxList({ items, className = "" }) {
+  return /* @__PURE__ */ jsx114("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("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__ */ jsxs87("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs87("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx114("h3", { className: "truncate text-sm font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
+        item.sender ? /* @__PURE__ */ jsx114("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: item.sender }) : null
+      ] }),
+      /* @__PURE__ */ jsxs87("div", { className: "flex shrink-0 items-center gap-2", children: [
+        item.tag ? /* @__PURE__ */ jsx114(Badge, { children: item.tag }) : null,
+        item.time ? /* @__PURE__ */ jsx114("span", { className: "font-mono text-[10px] text-[var(--tapiz-text-muted)]", children: item.time }) : null
+      ] })
+    ] }),
+    item.snippet ? /* @__PURE__ */ jsx114("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 jsx115, jsxs as jsxs88 } from "react/jsx-runtime";
+function ApprovalQueue({ items, onApprove, onReject, className = "" }) {
+  return /* @__PURE__ */ jsx115("div", { className: ["space-y-3", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsx115("article", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4", children: /* @__PURE__ */ jsxs88("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [
+    /* @__PURE__ */ jsxs88("div", { children: [
+      /* @__PURE__ */ jsxs88("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx115("h3", { className: "font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
+        item.priority ? /* @__PURE__ */ jsx115(Badge, { variant: item.priority === "high" ? "danger" : item.priority === "medium" ? "warning" : "default", children: item.priority }) : null
+      ] }),
+      item.requester ? /* @__PURE__ */ jsxs88("p", { className: "mt-1 text-xs text-[var(--tapiz-text-muted)]", children: [
+        "Requested by ",
+        item.requester
+      ] }) : null,
+      item.description ? /* @__PURE__ */ jsx115("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: item.description }) : null
+    ] }),
+    /* @__PURE__ */ jsxs88("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx115(Button, { size: "sm", variant: "secondary", onClick: () => onReject?.(index), children: "Reject" }),
+      /* @__PURE__ */ jsx115(Button, { size: "sm", onClick: () => onApprove?.(index), children: "Approve" })
+    ] })
+  ] }) }, index)) });
+}
+
+// src/components/framework/SLAStatus.tsx
+import { jsx as jsx116, jsxs as jsxs89 } from "react/jsx-runtime";
+function SLAStatus({ label, value, target = 95, className = "" }) {
+  const ok = value >= target;
+  return /* @__PURE__ */ jsxs89("div", { className: ["border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-4", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs89("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx116("span", { className: "text-sm font-medium text-[var(--tapiz-text-primary)]", children: label }),
+      /* @__PURE__ */ jsx116("span", { className: ["font-mono text-xs", ok ? "text-[var(--tapiz-success)]" : "text-[var(--tapiz-warning)]"].join(" "), children: ok ? "Within SLA" : "At risk" })
+    ] }),
+    /* @__PURE__ */ jsx116("div", { className: "mt-3 h-2 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]", children: /* @__PURE__ */ jsx116("div", { className: "h-full bg-[var(--tapiz-accent)]", style: { width: `${Math.max(0, Math.min(100, value))}%` } }) }),
+    /* @__PURE__ */ jsxs89("div", { className: "mt-2 flex justify-between font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--tapiz-text-muted)]", children: [
+      /* @__PURE__ */ jsxs89("span", { children: [
+        value,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxs89("span", { children: [
+        "Target ",
+        target,
+        "%"
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/framework/FeatureFlagTable.tsx
+import { jsx as jsx117, jsxs as jsxs90 } from "react/jsx-runtime";
+function FeatureFlagTable({ flags, onToggle, className = "" }) {
+  return /* @__PURE__ */ jsx117("div", { className: ["overflow-hidden border border-[var(--tapiz-border-subtle)]", className].filter(Boolean).join(" "), children: flags.map((flag) => /* @__PURE__ */ jsxs90("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__ */ jsxs90("div", { children: [
+      /* @__PURE__ */ jsxs90("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx117("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: flag.name }),
+        /* @__PURE__ */ jsx117(Badge, { children: flag.key })
+      ] }),
+      flag.description ? /* @__PURE__ */ jsx117("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: flag.description }) : null
+    ] }),
+    /* @__PURE__ */ jsx117("div", { className: "text-sm text-[var(--tapiz-text-muted)]", children: flag.rollout }),
+    /* @__PURE__ */ jsx117(Switch, { checked: flag.enabled, onChange: (checked) => onToggle?.(flag.key, checked) })
+  ] }, flag.key)) });
+}
+
+// src/components/framework/PlanUsage.tsx
+import { jsx as jsx118, jsxs as jsxs91 } from "react/jsx-runtime";
+function PlanUsage({ title = "Plan usage", items, className = "" }) {
+  return /* @__PURE__ */ jsxs91("section", { className: ["border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx118("h3", { className: "text-sm font-semibold text-[var(--tapiz-text-primary)]", children: title }),
+    /* @__PURE__ */ jsx118("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__ */ jsxs91("div", { children: [
+        /* @__PURE__ */ jsxs91("div", { className: "mb-1 flex justify-between text-sm", children: [
+          /* @__PURE__ */ jsx118("span", { className: "text-[var(--tapiz-text-primary)]", children: item.label }),
+          /* @__PURE__ */ jsxs91("span", { className: "font-mono text-xs text-[var(--tapiz-text-muted)]", children: [
+            item.used,
+            "/",
+            item.limit
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx118("div", { className: "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: `${pct}%` } }) })
+      ] }, index);
+    }) })
+  ] });
+}
+
+// src/components/marketing/AnnouncementBar.tsx
+import { jsx as jsx119, jsxs as jsxs92 } from "react/jsx-runtime";
+function AnnouncementBar({ children, action, className = "" }) {
+  return /* @__PURE__ */ jsx119("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__ */ jsxs92("div", { className: "mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-3 text-center", children: [
+    " ",
+    /* @__PURE__ */ jsx119("span", { children }),
+    action ? /* @__PURE__ */ jsx119("span", { children: action }) : null
+  ] }) });
+}
+
+// src/components/marketing/FAQSection.tsx
+import { jsx as jsx120, jsxs as jsxs93 } from "react/jsx-runtime";
+function FAQSection({ title = "Frequently asked questions", description, items, className = "" }) {
+  return /* @__PURE__ */ jsxs93("section", { className, children: [
+    /* @__PURE__ */ jsxs93("div", { className: "mb-6 max-w-2xl", children: [
+      /* @__PURE__ */ jsx120("div", { className: "kicker", children: "FAQ" }),
+      /* @__PURE__ */ jsx120("h2", { className: "mt-2 text-3xl font-semibold tracking-[-0.05em] text-[var(--tapiz-text-primary)]", children: title }),
+      description ? /* @__PURE__ */ jsx120("p", { className: "mt-2 text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx120(Accordion, { items: items.map((item, index) => ({ id: `faq-${index}`, title: item.question, content: item.answer })) })
+  ] });
+}
+
+// src/components/marketing/RoadmapList.tsx
+import { jsx as jsx121, jsxs as jsxs94 } from "react/jsx-runtime";
+function RoadmapList({ items, className = "" }) {
+  return /* @__PURE__ */ jsx121("div", { className: ["grid gap-3 md:grid-cols-3", className].filter(Boolean).join(" "), children: items.map((item, index) => /* @__PURE__ */ jsxs94("article", { className: "border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface)] p-5", children: [
+    /* @__PURE__ */ jsxs94("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx121("span", { className: "kicker", children: item.quarter ?? `0${index + 1}` }),
+      item.status ? /* @__PURE__ */ jsx121(Badge, { children: item.status }) : null
+    ] }),
+    /* @__PURE__ */ jsx121("h3", { className: "mt-4 font-semibold text-[var(--tapiz-text-primary)]", children: item.title }),
+    item.description ? /* @__PURE__ */ jsx121("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 jsx122, jsxs as jsxs95 } from "react/jsx-runtime";
+var toneClasses5 = {
+  neutral: "bg-[var(--tapiz-text-muted)]",
+  success: "bg-[var(--tapiz-success)]",
+  warning: "bg-[var(--tapiz-warning)]",
+  danger: "bg-[var(--tapiz-danger)]",
+  info: "bg-[var(--tapiz-info)]"
+};
+function InlineStatus({ tone: tone2 = "neutral", children, pulse = false, className = "" }) {
+  return /* @__PURE__ */ jsxs95("span", { className: ["inline-flex items-center gap-2 text-sm text-[var(--tapiz-text-muted)]", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx122("span", { className: ["h-2 w-2 rounded-full", toneClasses5[tone2], pulse ? "animate-pulse" : ""].filter(Boolean).join(" ") }),
+    children
+  ] });
+}
+
+// src/showcase/TapizDocsPage.tsx
+import { Fragment as Fragment5, jsx as jsx123, jsxs as jsxs96 } from "react/jsx-runtime";
+var demoRows = [
+  { id: "1", student: "Mila Petrovi\u0107", status: "Active", score: 94 },
+  { id: "2", student: "Vuk Jovanovi\u0107", status: "Pending", score: 82 },
+  { id: "3", student: "Sara Ili\u0107", status: "Blocked", score: 68 }
+];
+var calendarDays = Array.from({ length: 35 }, (_, index) => ({
+  date: index + 1,
+  selected: index === 10,
+  muted: index > 30,
+  events: index === 10 ? ["Exam review", "Parent sync"] : index === 15 ? ["Quiz"] : void 0
+}));
+function DemoSection({ id, title, description, children }) {
+  return /* @__PURE__ */ jsxs96("section", { id, className: "scroll-mt-20 border-t border-[var(--tapiz-border-subtle)] py-12", children: [
+    /* @__PURE__ */ jsxs96("div", { className: "mb-6 flex flex-col gap-2 md:flex-row md:items-end md:justify-between", children: [
+      /* @__PURE__ */ jsxs96("div", { children: [
+        /* @__PURE__ */ jsx123("div", { className: "kicker", children: id }),
+        /* @__PURE__ */ jsx123("h2", { className: "mt-2 text-3xl font-semibold tracking-[-0.05em] text-[var(--tapiz-text-primary)]", children: title }),
+        /* @__PURE__ */ jsx123("p", { className: "mt-2 max-w-2xl text-sm leading-6 text-[var(--tapiz-text-muted)]", children: description })
+      ] }),
+      /* @__PURE__ */ jsx123("a", { href: "#top", className: "font-mono text-xs uppercase tracking-[0.16em] text-[var(--tapiz-accent)]", children: "Back to top" })
+    ] }),
+    children
+  ] });
+}
+function TapizDocsPage({ title = "Tapiz UI Framework", subtitle = "A brutal-enterprise React component system with tokens, primitives, patterns, and ready-made application blocks." }) {
+  return /* @__PURE__ */ jsxs96("main", { id: "top", className: "tapiz-enterprise-shell min-h-screen tapiz-noise-bg", children: [
+    /* @__PURE__ */ jsx123(
+      TopNav,
+      {
+        brand: /* @__PURE__ */ jsx123("span", { className: "font-display text-lg font-semibold tracking-[-0.04em]", children: "Tapiz UI" }),
+        links: [
+          { label: "Foundations", href: "#foundations" },
+          { label: "Forms", href: "#forms" },
+          { label: "Data", href: "#data" },
+          { label: "Framework", href: "#framework" },
+          { label: "Advanced", href: "#advanced" },
+          { label: "Marketing", href: "#marketing" }
+        ],
+        actions: /* @__PURE__ */ jsx123(Button, { size: "sm", variant: "brutal", children: "Install" })
+      }
+    ),
+    /* @__PURE__ */ jsx123(
+      HeroFrame,
+      {
+        eyebrow: "Design system / React framework",
+        title,
+        description: subtitle,
+        actions: /* @__PURE__ */ jsxs96(Fragment5, { children: [
+          /* @__PURE__ */ jsx123(Button, { variant: "primary", children: "Start building" }),
+          /* @__PURE__ */ jsx123(Button, { variant: "secondary", children: "View tokens" })
+        ] }),
+        meta: "Light/dark safe \xB7 token driven \xB7 no app-specific dependencies",
+        visual: /* @__PURE__ */ jsxs96(MockupFrame, { title: "Component registry", children: [
+          /* @__PURE__ */ jsxs96(StatGrid, { children: [
+            /* @__PURE__ */ jsx123(MetricCard, { label: "Components", value: "80+", trend: "expanded", trendTone: "positive" }),
+            /* @__PURE__ */ jsx123(MetricCard, { label: "Themes", value: "2", trend: "light/dark" }),
+            /* @__PURE__ */ jsx123(MetricCard, { label: "Patterns", value: "12", trend: "framework", trendTone: "warning" })
+          ] }),
+          /* @__PURE__ */ jsx123("div", { className: "mt-4", children: /* @__PURE__ */ jsx123(Sparkline, { values: [18, 24, 21, 32, 44, 39, 58], width: 420, height: 56 }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs96(Container, { size: "xl", className: "pb-16", children: [
+      /* @__PURE__ */ jsx123(Surface, { variant: "brutal", padding: "md", className: "mb-8", children: /* @__PURE__ */ jsxs96(Cluster, { justify: "between", align: "center", children: [
+        /* @__PURE__ */ jsx123(Breadcrumbs, { items: [{ label: "Docs", href: "#top" }, { label: "Components" }] }),
+        /* @__PURE__ */ jsxs96(Cluster, { gap: "sm", children: [
+          /* @__PURE__ */ jsx123(Kbd, { children: "\u2318" }),
+          /* @__PURE__ */ jsx123(Kbd, { children: "K" }),
+          /* @__PURE__ */ jsx123("span", { className: "text-sm text-[var(--tapiz-text-muted)]", children: "Command-first framework UX" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs96(DemoSection, { id: "foundations", title: "Foundations", description: "Core surfaces, cards, badges, layout helpers, empty states, skeletons and typography primitives.", children: [
+        /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "16rem", children: [
+          /* @__PURE__ */ jsxs96(Card, { variant: "surface", children: [
+            /* @__PURE__ */ jsx123("div", { className: "kicker", children: "surface" }),
+            /* @__PURE__ */ jsx123("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: "Default card treatment." })
+          ] }),
+          /* @__PURE__ */ jsxs96(Card, { variant: "raised", children: [
+            /* @__PURE__ */ jsx123("div", { className: "kicker", children: "raised" }),
+            /* @__PURE__ */ jsx123("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: "Elevated enterprise panel." })
+          ] }),
+          /* @__PURE__ */ jsxs96(Card, { variant: "brutal", children: [
+            /* @__PURE__ */ jsx123("div", { className: "kicker", children: "brutal" }),
+            /* @__PURE__ */ jsx123("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: "Hard border + hard shadow." })
+          ] }),
+          /* @__PURE__ */ jsxs96(Card, { variant: "glass", children: [
+            /* @__PURE__ */ jsx123("div", { className: "kicker", children: "glass" }),
+            /* @__PURE__ */ jsx123("p", { className: "mt-2 text-sm text-[var(--tapiz-text-muted)]", children: "Backdrop style surface." })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx123(Divider, { label: "status tokens", className: "my-8" }),
+        /* @__PURE__ */ jsxs96(Cluster, { children: [
+          /* @__PURE__ */ jsx123(Badge, { children: "Default" }),
+          /* @__PURE__ */ jsx123(Badge, { variant: "success", children: "Success" }),
+          /* @__PURE__ */ jsx123(Badge, { variant: "warning", children: "Warning" }),
+          /* @__PURE__ */ jsx123(Badge, { variant: "danger", children: "Danger" }),
+          /* @__PURE__ */ jsx123(Badge, { variant: "info", children: "Info" }),
+          /* @__PURE__ */ jsx123(StatusBadge, { label: "Active", variant: "active" }),
+          /* @__PURE__ */ jsx123(StatusBadge, { label: "Pending", variant: "pending" }),
+          /* @__PURE__ */ jsx123(StatusBadge, { label: "Inactive", variant: "inactive" })
+        ] }),
+        /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "20rem", className: "mt-8", children: [
+          /* @__PURE__ */ jsx123(EmptyState, { title: "No records", description: "Use empty states instead of blank panels." }),
+          /* @__PURE__ */ jsx123(SectionCard, { title: "Skeleton loading", description: "Use while data is loading.", children: /* @__PURE__ */ jsxs96(Stack, { children: [
+            /* @__PURE__ */ jsx123(Skeleton, { className: "h-4 w-3/4" }),
+            /* @__PURE__ */ jsx123(Skeleton, { className: "h-4 w-1/2" }),
+            /* @__PURE__ */ jsx123(Skeleton, { className: "h-20 w-full" })
+          ] }) }),
+          /* @__PURE__ */ jsx123(KeyValueList, { density: "compact", items: [{ keyLabel: "Package", value: "@tapizlabs/ui" }, { keyLabel: "Mode", value: "Framework" }, { keyLabel: "Theme", value: "Token-first" }] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx123(DemoSection, { id: "forms", title: "Forms", description: "Controlled-ready field primitives for enterprise CRUD, settings, onboarding and import flows.", children: /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "20rem", children: [
+        /* @__PURE__ */ jsx123(SectionCard, { title: "Fields", children: /* @__PURE__ */ jsxs96(Stack, { children: [
+          /* @__PURE__ */ jsx123(FormField, { label: "Workspace name", hint: "Shown in the app shell", children: /* @__PURE__ */ jsx123(Input, { placeholder: "Tapiz Academy" }) }),
+          /* @__PURE__ */ jsx123(FormField, { label: "Role", children: /* @__PURE__ */ jsxs96(Select, { children: [
+            /* @__PURE__ */ jsx123("option", { children: "Teacher" }),
+            /* @__PURE__ */ jsx123("option", { children: "Admin" })
+          ] }) }),
+          /* @__PURE__ */ jsx123(FormField, { label: "Notes", children: /* @__PURE__ */ jsx123(Textarea, { placeholder: "Internal note" }) })
+        ] }) }),
+        /* @__PURE__ */ jsx123(SectionCard, { title: "Advanced inputs", children: /* @__PURE__ */ jsxs96(Stack, { children: [
+          /* @__PURE__ */ jsx123(InputGroup, { prefix: "https://", suffix: ".tapiz.app", children: /* @__PURE__ */ jsx123(Input, { placeholder: "school" }) }),
+          /* @__PURE__ */ jsx123(PasswordInput, { placeholder: "Password" }),
+          /* @__PURE__ */ jsx123(Slider, { label: "Automation level", valueLabel: "72%", defaultValue: 72 }),
+          /* @__PURE__ */ jsx123(ToggleGroup, { value: "monthly", options: [{ label: "Monthly", value: "monthly" }, { label: "Yearly", value: "yearly" }] }),
+          /* @__PURE__ */ jsx123(Switch, { label: "Enable notifications", checked: true }),
+          /* @__PURE__ */ jsx123(Combobox, { placeholder: "Choose workspace", options: [{ value: "academy", label: "Academy" }, { value: "enterprise", label: "Enterprise" }] }),
+          /* @__PURE__ */ jsx123(DateRangePicker, {}),
+          /* @__PURE__ */ jsx123(ColorSwatchPicker, { value: "accent", options: [{ value: "accent", label: "Accent", color: "var(--tapiz-accent)" }, { value: "success", label: "Success", color: "var(--tapiz-success)" }, { value: "warning", label: "Warning", color: "var(--tapiz-warning)" }] }),
+          /* @__PURE__ */ jsx123(RatingInput, { value: 4 })
+        ] }) }),
+        /* @__PURE__ */ jsx123(SectionCard, { title: "Upload and text area", children: /* @__PURE__ */ jsxs96(Stack, { children: [
+          /* @__PURE__ */ jsx123(FileDropzone, { title: "Import CSV", description: "Drag attendance data or click to browse." }),
+          /* @__PURE__ */ jsx123(TextareaCounter, { maxLength: 120, value: "Reusable character-count textarea for messages and descriptions.", readOnly: true })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs96(DemoSection, { id: "data", title: "Data display", description: "Tables, charts, progress, metrics, filters and visual summaries for dense products.", children: [
+        /* @__PURE__ */ jsx123(
+          DataToolbar,
+          {
+            title: "Students",
+            description: "Search, filter and operate on tabular data.",
+            search: /* @__PURE__ */ jsx123(SearchInput, { placeholder: "Search students", value: "", onChange: () => void 0 }),
+            filters: /* @__PURE__ */ jsxs96(Fragment5, { children: [
+              /* @__PURE__ */ jsx123(FilterChip, { active: true, children: "Active" }),
+              /* @__PURE__ */ jsx123(FilterChip, { children: "Grade 8" }),
+              /* @__PURE__ */ jsx123(FilterChip, { children: "High score" })
+            ] }),
+            actions: /* @__PURE__ */ jsx123(Button, { size: "sm", children: "Export" }),
+            className: "mb-4"
+          }
+        ),
+        /* @__PURE__ */ jsx123(
+          DataTable,
+          {
+            variant: "enterprise",
+            data: demoRows,
+            rowKey: (row) => row.id,
+            columns: [
+              { id: "student", header: "Student", cell: (row) => row.student, sortAccessor: (row) => row.student },
+              { id: "status", header: "Status", cell: (row) => /* @__PURE__ */ jsx123(StatusBadge, { label: row.status, variant: row.status === "Active" ? "success" : row.status === "Pending" ? "pending" : "danger" }) },
+              { id: "score", header: "Score", cell: (row) => `${row.score}%`, align: "right", sortAccessor: (row) => row.score }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "19rem", className: "mt-8", children: [
+          /* @__PURE__ */ jsx123(MetricCard, { label: "Attendance", value: "96.4%", trend: "+4.2%", trendTone: "positive", description: "vs last month" }),
+          /* @__PURE__ */ jsx123(SectionCard, { title: "Bar list", children: /* @__PURE__ */ jsx123(BarList, { items: [{ label: "Quiz", value: 42 }, { label: "Attendance", value: 68 }, { label: "Assignments", value: 54 }] }) }),
+          /* @__PURE__ */ jsx123(SectionCard, { title: "Donut", children: /* @__PURE__ */ jsx123(DonutMetric, { value: 82, label: "Completion", caption: "Average across active classes" }) }),
+          /* @__PURE__ */ jsx123(SectionCard, { title: "Progress", children: /* @__PURE__ */ jsx123(Progress, { value: 64, label: "Migration" }) }),
+          /* @__PURE__ */ jsx123(SectionCard, { title: "Score ring", children: /* @__PURE__ */ jsx123(ScoreRing, { value: 88, label: "quality" }) }),
+          /* @__PURE__ */ jsx123(SectionCard, { title: "Heatmap", children: /* @__PURE__ */ jsx123(HeatmapGrid, { cells: Array.from({ length: 35 }, (_, index) => ({ value: index * 7 % 18, title: `Day ${index + 1}` })) }) }),
+          /* @__PURE__ */ jsx123(SectionCard, { title: "Funnel", children: /* @__PURE__ */ jsx123(FunnelChart, { steps: [{ label: "Visited", value: 1200 }, { label: "Started", value: 820 }, { label: "Completed", value: 540 }] }) }),
+          /* @__PURE__ */ jsx123(SectionCard, { title: "Comparison", children: /* @__PURE__ */ jsx123(ComparisonMeter, { leftLabel: "Manual", rightLabel: "Automated", value: 72 }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx123(DemoSection, { id: "navigation", title: "Navigation and disclosure", description: "Application shell, nav bars, tabs, accordion, stepper and overlays.", children: /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "23rem", children: [
+        /* @__PURE__ */ jsx123(SectionCard, { title: "App shell preview", children: /* @__PURE__ */ jsx123(
+          AppShell,
+          {
+            sidebar: /* @__PURE__ */ jsx123(SidebarNav, { groups: [{ label: "Workspace", items: [{ label: "Dashboard", active: true }, { label: "Students" }, { label: "Reports" }] }] }),
+            topbar: /* @__PURE__ */ jsx123(TopNav, { brand: "Tapiz", links: [{ label: "Docs", href: "#top" }] }),
+            children: /* @__PURE__ */ jsx123("div", { className: "p-4 text-sm text-[var(--tapiz-text-muted)]", children: "Shell content slot" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs96(SectionCard, { title: "Tabs and accordion", children: [
+          /* @__PURE__ */ jsx123(Tabs, { activeId: "usage", variant: "boxed", items: [{ id: "usage", label: "Usage", content: "Use tabs for related panels." }, { id: "api", label: "API", content: "Prop-driven and typed." }] }),
+          /* @__PURE__ */ jsx123(Accordion, { className: "mt-4", openIds: ["one"], items: [{ id: "one", title: "Token-first", content: "No raw hex colors in application code." }, { id: "two", title: "Accessible", content: "Keyboard-friendly primitives." }] })
+        ] }),
+        /* @__PURE__ */ jsxs96(SectionCard, { title: "Stepper / overlay states", children: [
+          /* @__PURE__ */ jsx123(Stepper, { steps: [{ id: "create", label: "Create", status: "complete" }, { id: "configure", label: "Configure", status: "current" }, { id: "launch", label: "Launch", status: "upcoming" }] }),
+          /* @__PURE__ */ jsxs96(Cluster, { className: "mt-4", children: [
+            /* @__PURE__ */ jsx123(Popover, { trigger: /* @__PURE__ */ jsx123(Button, { size: "sm", children: "Popover" }), children: "Contextual content" }),
+            /* @__PURE__ */ jsx123(Drawer, { open: false, title: "Drawer", children: "Drawer content" })
+          ] }),
+          /* @__PURE__ */ jsx123(CommandMenu, { open: false, groups: [{ label: "Actions", items: [{ id: "open-dashboard", label: "Open dashboard" }, { id: "create-class", label: "Create class" }] }] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx123(DemoSection, { id: "feedback", title: "Feedback", description: "Alerts, callouts, notifications, health states and loading overlays.", children: /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "22rem", children: [
+        /* @__PURE__ */ jsx123(Alert2, { tone: "info", title: "Info alert", children: "Use for important inline messages." }),
+        /* @__PURE__ */ jsx123(Callout, { tone: "warning", title: "Migration warning", children: "Review token usage before publishing." }),
+        /* @__PURE__ */ jsx123(SectionCard, { title: "Notifications", children: /* @__PURE__ */ jsx123(NotificationList, { items: [{ id: "1", title: "New import completed", description: "1,204 rows processed.", time: "2m", unread: true }, { id: "2", title: "Report ready", time: "1h" }] }) }),
+        /* @__PURE__ */ jsx123(SectionCard, { title: "Health", children: /* @__PURE__ */ jsxs96(Stack, { children: [
+          /* @__PURE__ */ jsx123(HealthIndicator, { tone: "operational", detail: "99.99%" }),
+          /* @__PURE__ */ jsx123(HealthIndicator, { tone: "degraded", detail: "API latency" }),
+          /* @__PURE__ */ jsx123(HealthIndicator, { tone: "outage", detail: "1 service" }),
+          /* @__PURE__ */ jsx123(InlineStatus, { tone: "success", pulse: true, children: "Realtime sync active" })
+        ] }) }),
+        /* @__PURE__ */ jsx123(LoadingOverlay, { visible: true, label: "Syncing", children: /* @__PURE__ */ jsx123("div", { className: "h-28 border border-[var(--tapiz-border-subtle)] bg-[var(--tapiz-bg-surface-muted)]" }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs96(DemoSection, { id: "framework", title: "Framework patterns", description: "Higher-level enterprise blocks for admin panels, permissions, integrations, calendars and workflows.", children: [
+        /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "23rem", children: [
+          /* @__PURE__ */ jsx123(ResourceCard, { title: "Classroom OS", eyebrow: "resource", description: "Reusable resource card for project, course, class or team entities.", status: "Live", meta: "Updated today" }),
+          /* @__PURE__ */ jsx123(IntegrationCard, { name: "Google Classroom", description: "Sync rosters and assignments.", status: "connected", lastSync: "Synced 12m ago" }),
+          /* @__PURE__ */ jsx123(AuditLog, { items: [{ actor: "Danijel", action: "updated permissions", timestamp: "09:42" }, { actor: "System", action: "synced attendance", timestamp: "09:30" }] })
+        ] }),
+        /* @__PURE__ */ jsx123(SplitPane, { className: "mt-8", primary: /* @__PURE__ */ jsx123(KanbanBoard, { columns: [{ id: "todo", title: "Todo", items: [{ id: "a", title: "Design docs page", tone: "accent" }] }, { id: "doing", title: "Doing", items: [{ id: "b", title: "Build components", tone: "warning" }] }, { id: "done", title: "Done", items: [{ id: "c", title: "Tokens", tone: "success" }] }] }), secondary: /* @__PURE__ */ jsx123(AccessMatrix, { roles: [{ key: "admin", label: "Admin" }, { key: "teacher", label: "Teacher" }], permissions: [{ key: "users", label: "Manage users", roles: { admin: true, teacher: false } }, { key: "classes", label: "Manage classes", roles: { admin: true, teacher: true } }] }) }),
+        /* @__PURE__ */ jsx123(CalendarGrid, { className: "mt-8", days: calendarDays })
+      ] }),
+      /* @__PURE__ */ jsxs96(DemoSection, { id: "advanced", title: "Advanced framework blocks", description: "More product-grade patterns for operations, approvals, feature management, usage, rails and sticky controls.", children: [
+        /* @__PURE__ */ jsx123(StickyBar, { className: "mb-6", children: /* @__PURE__ */ jsxs96(Cluster, { justify: "between", children: [
+          /* @__PURE__ */ jsx123(InlineStatus, { tone: "info", children: "Previewing max component set" }),
+          /* @__PURE__ */ jsx123(Button, { size: "sm", variant: "secondary", children: "Copy layout" })
+        ] }) }),
+        /* @__PURE__ */ jsx123(
+          SplitPane,
+          {
+            primary: /* @__PURE__ */ jsxs96(Stack, { children: [
+              /* @__PURE__ */ jsx123(ApprovalQueue, { items: [{ title: "Publish new grading rubric", requester: "Mila", priority: "high", description: "Requires admin approval before rollout." }, { title: "Invite external mentor", requester: "Vuk", priority: "medium" }] }),
+              /* @__PURE__ */ jsx123(FeatureFlagTable, { flags: [{ key: "ai.quiz", name: "AI quiz generator", description: "Enable assisted quiz creation.", enabled: true, rollout: "80%" }, { key: "reports.v2", name: "Reports v2", description: "New analytics dashboard.", enabled: false, rollout: "Beta" }] })
+            ] }),
+            secondary: /* @__PURE__ */ jsx123(PageRail, { title: "Docs rail", items: [{ label: "Forms", href: "#forms", active: true, meta: "12" }, { label: "Data", href: "#data", meta: "9" }, { label: "Framework", href: "#framework", meta: "18" }] })
+          }
+        ),
+        /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "22rem", className: "mt-8", children: [
+          /* @__PURE__ */ jsx123(PlanUsage, { items: [{ label: "Seats", used: 128, limit: 200 }, { label: "Storage", used: 64, limit: 100 }, { label: "Automations", used: 18, limit: 25 }] }),
+          /* @__PURE__ */ jsx123(SectionCard, { title: "SLA", children: /* @__PURE__ */ jsxs96(Stack, { children: [
+            /* @__PURE__ */ jsx123(SLAStatus, { label: "API uptime", value: 99 }),
+            /* @__PURE__ */ jsx123(SLAStatus, { label: "Queue latency", value: 91, target: 95 })
+          ] }) }),
+          /* @__PURE__ */ jsx123(SectionCard, { title: "Inbox", children: /* @__PURE__ */ jsx123(InboxList, { items: [{ title: "Import completed", sender: "System", snippet: "Attendance import finished with 0 errors.", time: "2m", unread: true, tag: "Ops" }, { title: "Teacher request", sender: "Ana", snippet: "Needs access to Grade 8 workspace.", time: "1h" }] }) }),
+          /* @__PURE__ */ jsx123(SectionCard, { title: "Activity", children: /* @__PURE__ */ jsx123(ActivityFeed, { items: [{ actor: "Danijel", action: "enabled Reports v2", time: "now" }, { actor: "System", action: "rotated API keys", time: "1h" }] }) })
+        ] }),
+        /* @__PURE__ */ jsx123(MasonryGrid, { columns: 3, className: "mt-8", children: ["Token contract", "Component variants", "Agent docs", "A11y states", "Dark mode", "Framework patterns"].map((item) => /* @__PURE__ */ jsxs96(Card, { variant: "brutal", className: "mb-5 break-inside-avoid", children: [
+          /* @__PURE__ */ jsx123("div", { className: "kicker", children: "module" }),
+          /* @__PURE__ */ jsx123("h3", { className: "mt-2 font-semibold", children: item })
+        ] }, item)) })
+      ] }),
+      /* @__PURE__ */ jsxs96(DemoSection, { id: "marketing", title: "Marketing blocks", description: "Landing-page building blocks for SaaS, education and enterprise presentation pages.", children: [
+        /* @__PURE__ */ jsx123(AnnouncementBar, { action: /* @__PURE__ */ jsx123(Button, { size: "sm", variant: "brutal", children: "Read changelog" }), children: "New Tapiz UI max component pack is available." }),
+        /* @__PURE__ */ jsxs96(FeatureGrid, { children: [
+          /* @__PURE__ */ jsx123(FeatureCard, { title: "Token architecture", description: "Centralized semantic tokens for consistent light/dark UI." }),
+          /* @__PURE__ */ jsx123(FeatureCard, { title: "Framework blocks", description: "Move faster with app shell, tables, forms and overlays." }),
+          /* @__PURE__ */ jsx123(FeatureCard, { title: "Brutal enterprise", description: "Strong borders, sharp rhythm and professional hierarchy." })
+        ] }),
+        /* @__PURE__ */ jsx123(StatsBand, { className: "mt-8", items: [{ value: "80+", label: "Components" }, { value: "2", label: "Themes" }, { value: "0", label: "App deps" }] }),
+        /* @__PURE__ */ jsx123(LogoCloud, { className: "mt-8", title: "Works for product surfaces", items: [{ name: "Dashboard" }, { name: "Admin" }, { name: "Landing" }, { name: "Docs" }, { name: "Forms" }, { name: "Data" }] }),
+        /* @__PURE__ */ jsxs96(ResponsiveGrid, { min: "20rem", className: "mt-8", children: [
+          /* @__PURE__ */ jsx123(TestimonialCard, { quote: "Tapiz UI gives the product an instant enterprise backbone.", author: "Design Lead", role: "Tapiz Labs" }),
+          /* @__PURE__ */ jsx123(PricingCard, { name: "Framework", price: "\u20AC0", highlighted: true, features: ["Token system", "Components", "Docs page"] }),
+          /* @__PURE__ */ jsx123(ComparisonTable, { includedHeader: "Tapiz", alternativeHeader: "Ad-hoc UI", rows: [{ feature: "Light/dark", included: "Yes", alternative: "Manual" }, { feature: "Agent docs", included: "Included", alternative: "No" }] })
+        ] }),
+        /* @__PURE__ */ jsx123(RoadmapList, { className: "mt-8", items: [{ quarter: "Q1", title: "Core framework", status: "Done", description: "Shell, nav, forms and table primitives." }, { quarter: "Q2", title: "Analytics blocks", status: "Now", description: "Charts, status and operational views." }, { quarter: "Q3", title: "AI workflows", status: "Next", description: "Agent-ready docs and generated screens." }] }),
+        /* @__PURE__ */ jsx123(FAQSection, { className: "mt-8", description: "Common framework usage questions.", items: [{ question: "Can this be used outside Tapiz?", answer: "Yes. Components are generic and token-driven." }, { question: "Does it require app router?", answer: "No. The package avoids app-specific dependencies." }] }),
+        /* @__PURE__ */ jsx123(CTASection, { className: "mt-8", eyebrow: "Ready", title: "Build with Tapiz UI", description: "Copy this page into your docs app or export TapizDocsPage from the package.", actions: /* @__PURE__ */ jsx123(Button, { variant: "primary", children: "Use framework" }) })
+      ] }),
+      /* @__PURE__ */ jsx123(DemoSection, { id: "code", title: "Usage snippets", description: "Copyable examples for agents and developers.", children: /* @__PURE__ */ jsx123(CodeBlock, { language: "tsx", children: `import { TapizDocsPage } from "@tapizlabs/ui";
+import "@tapizlabs/ui/theme.css";
+
+export default function Docs() {
+  return <TapizDocsPage />;
+}` }) })
+    ] })
+  ] });
+}
 export {
+  AccessMatrix,
+  Accordion,
   ActionMenu,
   Activity,
+  ActivityFeed,
   ActivityMenu,
-  Alert,
+  Alert2 as Alert,
+  AnnouncementBar,
+  AppShell,
   AppleIcon,
+  ApprovalQueue,
   ArrowLeft,
   ArrowRight,
+  AuditLog,
+  Avatar,
   Badge,
   Ban,
   BarChart,
+  BarList,
   BaseModal,
   Bell,
   Book,
+  Breadcrumbs,
   Button,
+  CTASection,
   Calendar,
+  CalendarGrid,
   CalendarMonth,
   CalendarWeek,
+  Callout,
   Card,
   CardBody,
   CardHeader,
@@ -2032,15 +3820,28 @@ export {
   ChevronUp,
   Clipboard,
   Clock,
+  Cluster,
+  CodeBlock,
+  ColorSwatchPicker,
+  Combobox,
+  CommandMenu,
   Compare,
+  ComparisonMeter,
+  ComparisonTable,
   ConfirmDialog,
+  Container,
   Copy,
   Cpu,
   CreditCard,
   DataTable,
+  DataToolbar,
   Database,
+  DateRangePicker,
   DefaultErrorFallback,
+  Divider,
+  DonutMetric,
   Download,
+  Drawer,
   Edit,
   EmptyState,
   ErrorBoundary,
@@ -2048,15 +3849,23 @@ export {
   ExternalLink,
   Eye,
   EyeOff,
+  FAQSection,
   Faculty,
+  FeatureCard,
+  FeatureFlagTable,
+  FeatureGrid,
   FieldHint,
   FieldLabel,
+  FileDropzone,
   FileText,
   FileUpload,
+  FilterChip,
   FingerprintIcon,
   FormError,
+  FormField,
   FormIcon,
   FormulaIcon,
+  FunnelChart,
   Gear,
   Globe,
   GooglePlayIcon,
@@ -2065,70 +3874,118 @@ export {
   GridBg,
   HardDrive,
   Hash,
+  HealthIndicator,
+  HeatmapGrid,
   HelpCircle,
+  HeroFrame,
   History,
   Home,
   Icons,
   Image,
+  InboxList,
   Info,
   InfoBanner,
+  InlineStatus,
   Input,
+  InputGroup,
+  IntegrationCard,
   Intersect,
+  KanbanBoard,
+  Kbd,
+  KeyValueList,
   Layers,
+  LoadingOverlay,
   LockIcon,
   LogOut,
+  LogoCloud,
   LogoMark,
   Mail,
+  MarketingShell,
+  MasonryGrid,
   Megaphone,
   Menu,
+  MetricCard,
+  MockupFrame,
   Monitor,
   Moon,
   NavAnalytics,
   NavQrAttendance,
   NavScoresheet,
   NavSecurity,
+  NotificationList,
   NumberIcon,
   OfficeHours,
   PageHeader,
+  PageRail,
   PageSpinner,
   Pagination,
+  PasswordInput,
   Pdf,
+  PlanUsage,
   Plus,
+  Popover,
+  PricingCard,
   Printer,
+  Progress,
   QrCode,
   RadioButton,
+  RatingInput,
   Refresh,
   RefreshCw,
   Repeat,
   Report,
+  ResourceCard,
+  ResponsiveGrid,
+  RoadmapList,
   RotateCcw,
+  SLAStatus,
   Scan,
+  ScoreRing,
   Search,
   SearchInput,
+  SectionCard,
   SectionIcons,
   SectionTitle,
   Select,
   Server,
   Shield,
+  SidebarNav,
   Skeleton,
   SkeletonBanner,
   SkeletonCard,
   SkeletonKpiCard,
   SkeletonPageHeader,
   SkeletonTable,
+  Slider,
   Smartphone,
+  Sparkline,
   Spinner,
+  SplitPane,
   Spotlight,
+  Stack,
   Star,
+  StatGrid,
+  StatsBand,
   StatusBadge,
+  Stepper,
+  StickyBar,
   Sun,
+  Surface,
+  Switch,
   Table,
   Tablet,
+  Tabs,
+  TapizDocsPage,
+  TestimonialCard,
   TextIcon,
   Textarea,
+  TextareaCounter,
+  Timeline,
   Toast,
   ToastProvider,
+  ToggleGroup,
   Tooltip,
+  TopNav,
   Trash,
   Trophy,
   TwoFAIcon,
@@ -2141,6 +3998,7 @@ export {
   Users,
   X,
   Zap,
+  tapizFrameworkPresets,
   useToast
 };
 //# sourceMappingURL=index.js.map