tembro 3.1.9 → 3.1.11

package/dist/src/showcase/preview-registry.js

@@ -4,26 +4,27 @@ import { Badge as n } from "../components/ui/badge/index.js";
 import { Table as r, TableBody as i, TableCell as a, TableHead as o, TableHeader as s, TableRow as c } from "../components/ui/table/index.js";
 import { actionsShowcaseDemoRegistry as l } from "../components/actions/demo.js";
 import { calendarShowcaseDemoRegistry as u } from "../components/calendar/demo.js";
-import { dataTableShowcaseDemoRegistry as d } from "../components/data-table/demo.js";
-import { displayShowcaseDemoRegistry as f } from "../components/display/demo.js";
-import { feedbackShowcaseDemoRegistry as p } from "../components/feedback/demo.js";
-import { filtersShowcaseDemoRegistry as m } from "../components/filters/demo.js";
-import { formShowcaseDemoRegistry as h } from "../components/form/demo.js";
-import { inputsShowcaseDemoRegistry as g } from "../components/inputs/demo.js";
-import { layoutShowcaseDemoRegistry as _ } from "../components/layout/demo.js";
-import { navigationShowcaseDemoRegistry as v } from "../components/navigation/demo.js";
-import { overlayShowcaseDemoRegistry as y } from "../components/overlay/demo.js";
-import { patternsShowcaseDemoRegistry as b } from "../components/patterns/demo.js";
-import { uploadShowcaseDemoRegistry as x } from "../components/upload/demo.js";
-import { wizardShowcaseDemoRegistry as S } from "../components/wizard/demo.js";
-import { defaultComponentDemoState as C } from "./premium/types.js";
-import { premiumShowcaseDemoRegistry as w } from "./premium/index.js";
-import { registrySpecificDemoRegistry as T } from "./registry-specific.js";
-import { supplementalShowcaseDemoRegistry as E } from "./supplemental.js";
-import { previewSurfaceCatalog as D } from "./preview-catalog.js";
-import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import { chartsShowcaseDemoRegistry as d } from "../components/charts/demo.js";
+import { dataTableShowcaseDemoRegistry as f } from "../components/data-table/demo.js";
+import { displayShowcaseDemoRegistry as p } from "../components/display/demo.js";
+import { feedbackShowcaseDemoRegistry as m } from "../components/feedback/demo.js";
+import { filtersShowcaseDemoRegistry as h } from "../components/filters/demo.js";
+import { formShowcaseDemoRegistry as g } from "../components/form/demo.js";
+import { inputsShowcaseDemoRegistry as _ } from "../components/inputs/demo.js";
+import { layoutShowcaseDemoRegistry as v } from "../components/layout/demo.js";
+import { navigationShowcaseDemoRegistry as y } from "../components/navigation/demo.js";
+import { overlayShowcaseDemoRegistry as b } from "../components/overlay/demo.js";
+import { patternsShowcaseDemoRegistry as x } from "../components/patterns/demo.js";
+import { uploadShowcaseDemoRegistry as S } from "../components/upload/demo.js";
+import { wizardShowcaseDemoRegistry as C } from "../components/wizard/demo.js";
+import { defaultComponentDemoState as w } from "./premium/types.js";
+import { premiumShowcaseDemoRegistry as T } from "./premium/index.js";
+import { registrySpecificDemoRegistry as E } from "./registry-specific.js";
+import { supplementalShowcaseDemoRegistry as D } from "./supplemental.js";
+import { previewSurfaceCatalog as O } from "./preview-catalog.js";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
 //#region src/showcase/preview-registry.tsx
-var A = [
+var j = [
 	{
 		label: "Revenue",
 		value: "$24,780",
@@ -44,7 +45,7 @@ var A = [
 		value: "6.3%",
 		delta: "+1.1%"
 	}
-], j = [
+], M = [
 	[
 		"TM-001",
 		"Acme Dashboard",
@@ -69,7 +70,7 @@ var A = [
 		"Live",
 		"$7,620"
 	]
-], M = [
+], N = [
 	[
 		"INV-001",
 		"Acme Inc.",
@@ -100,7 +101,7 @@ var A = [
 		"Paid",
 		"$3,860"
 	]
-], N = "min-h-screen bg-[var(--aui-page-bg-alt)] p-6 aui-text-strong", P = "border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-[var(--aui-shadow-panel)]", F = "border border-[color:var(--aui-divider)] bg-[color:var(--aui-surface-muted)]", I = "aui-surface-strong text-[color:var(--aui-surface-strong-foreground)]", L = "aui-text-muted", R = "text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_28%)]", z = "border-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_88%)] bg-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_90%)] text-[color:var(--aui-surface-strong-foreground)]", B = "border-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_88%)] bg-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_95%)] text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_18%)]", V = {
+], P = "min-h-screen bg-[var(--aui-page-bg-alt)] p-6 aui-text-strong", F = "border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-[var(--aui-shadow-panel)]", I = "border border-[color:var(--aui-divider)] bg-[color:var(--aui-surface-muted)]", L = "aui-surface-strong text-[color:var(--aui-surface-strong-foreground)]", R = "aui-text-muted", z = "text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_28%)]", B = "border-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_88%)] bg-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_90%)] text-[color:var(--aui-surface-strong-foreground)]", V = "border-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_88%)] bg-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_95%)] text-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_18%)]", H = {
 	...l,
 	...u,
 	...d,
@@ -115,33 +116,34 @@ var A = [
 	...b,
 	...x,
 	...S,
-	...T,
+	...C,
 	...E,
-	...w
+	...D,
+	...T
 };
-function H() {
-	return /* @__PURE__ */ O("div", {
+function U() {
+	return /* @__PURE__ */ k("div", {
 		className: "flex size-11 items-center justify-center rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-surface-strong)] text-sm font-semibold tracking-[0.2em] text-[color:var(--aui-surface-strong-foreground)]",
 		children: "AZ"
 	});
 }
-function U({ tone: l }) {
-	return l === "dashboard" ? /* @__PURE__ */ O("div", {
-		className: N,
-		children: /* @__PURE__ */ k("div", {
+function W({ tone: l }) {
+	return l === "dashboard" ? /* @__PURE__ */ k("div", {
+		className: P,
+		children: /* @__PURE__ */ A("div", {
 			className: "grid min-h-[720px] gap-6 lg:grid-cols-[260px_1fr]",
-			children: [/* @__PURE__ */ k("aside", {
-				className: `rounded-[28px] p-5 ${P}`,
-				children: [/* @__PURE__ */ k("div", {
+			children: [/* @__PURE__ */ A("aside", {
+				className: `rounded-[28px] p-5 ${F}`,
+				children: [/* @__PURE__ */ A("div", {
 					className: "mb-6 flex items-center gap-3",
-					children: [/* @__PURE__ */ O(H, {}), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
+					children: [/* @__PURE__ */ k(U, {}), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
 						className: "font-semibold",
 						children: "Tembro"
-					}), /* @__PURE__ */ O("p", {
-						className: `text-sm ${L}`,
+					}), /* @__PURE__ */ k("p", {
+						className: `text-sm ${R}`,
 						children: "Dashboard shell"
 					})] })]
-				}), /* @__PURE__ */ O("div", {
+				}), /* @__PURE__ */ k("div", {
 					className: "space-y-2 text-sm",
 					children: [
 						"Overview",
@@ -150,90 +152,90 @@ function U({ tone: l }) {
 						"Orders",
 						"Finance",
 						"Settings"
-					].map((e, t) => /* @__PURE__ */ O("div", {
-						className: t === 0 ? `rounded-2xl px-4 py-3 ${I}` : `rounded-2xl px-4 py-3 ${L}`,
+					].map((e, t) => /* @__PURE__ */ k("div", {
+						className: t === 0 ? `rounded-2xl px-4 py-3 ${L}` : `rounded-2xl px-4 py-3 ${R}`,
 						children: e
 					}, e))
 				})]
-			}), /* @__PURE__ */ k("main", {
-				className: `space-y-6 rounded-[32px] p-6 ${P}`,
+			}), /* @__PURE__ */ A("main", {
+				className: `space-y-6 rounded-[32px] p-6 ${F}`,
 				children: [
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ A("div", {
 						className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
-						children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
-							className: `text-sm uppercase tracking-[0.24em] ${L}`,
+						children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
+							className: `text-sm uppercase tracking-[0.24em] ${R}`,
 							children: "Overview"
-						}), /* @__PURE__ */ O("h1", {
+						}), /* @__PURE__ */ k("h1", {
 							className: "mt-2 text-4xl font-semibold tracking-tight",
 							children: "Operations dashboard"
-						})] }), /* @__PURE__ */ k("div", {
+						})] }), /* @__PURE__ */ A("div", {
 							className: "flex gap-3",
-							children: [/* @__PURE__ */ O(e, {
+							children: [/* @__PURE__ */ k(e, {
 								variant: "outline",
 								className: "rounded-2xl",
 								children: "Route preview"
-							}), /* @__PURE__ */ O(e, {
+							}), /* @__PURE__ */ k(e, {
 								className: "rounded-2xl",
 								children: "Create report"
 							})]
 						})]
 					}),
-					/* @__PURE__ */ O("div", {
+					/* @__PURE__ */ k("div", {
 						className: "grid gap-4 xl:grid-cols-4",
-						children: A.map((e) => /* @__PURE__ */ k("div", {
-							className: `rounded-[24px] p-5 ${F}`,
+						children: j.map((e) => /* @__PURE__ */ A("div", {
+							className: `rounded-[24px] p-5 ${I}`,
 							children: [
-								/* @__PURE__ */ O("p", {
-									className: `text-sm ${L}`,
+								/* @__PURE__ */ k("p", {
+									className: `text-sm ${R}`,
 									children: e.label
 								}),
-								/* @__PURE__ */ O("p", {
+								/* @__PURE__ */ k("p", {
 									className: "mt-2 text-3xl font-semibold tracking-tight",
 									children: e.value
 								}),
-								/* @__PURE__ */ O("p", {
+								/* @__PURE__ */ k("p", {
 									className: "mt-3 text-sm text-emerald-600",
 									children: e.delta
 								})
 							]
 						}, e.label))
 					}),
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ A("div", {
 						className: "grid gap-6 xl:grid-cols-[1.15fr_0.85fr]",
-						children: [/* @__PURE__ */ k("section", {
-							className: `rounded-[28px] p-5 ${F}`,
+						children: [/* @__PURE__ */ A("section", {
+							className: `rounded-[28px] p-5 ${I}`,
 							children: [
-								/* @__PURE__ */ O("h2", {
+								/* @__PURE__ */ k("h2", {
 									className: "text-xl font-semibold",
 									children: "Revenue trend"
 								}),
-								/* @__PURE__ */ O("p", {
-									className: `mt-2 text-sm leading-6 ${L}`,
+								/* @__PURE__ */ k("p", {
+									className: `mt-2 text-sm leading-6 ${R}`,
 									children: "Monthly performance with steady lift across product lines."
 								}),
-								/* @__PURE__ */ O("div", { className: "mt-5 h-72 rounded-[24px] bg-[color:var(--aui-page-bg)] [background-image:linear-gradient(180deg,color-mix(in_oklch,var(--aui-accent)_18%,transparent),transparent),radial-gradient(circle_at_bottom_left,color-mix(in_oklch,var(--aui-success)_20%,transparent),transparent_40%)]" })
+								/* @__PURE__ */ k("div", { className: "mt-5 h-72 rounded-[24px] bg-[color:var(--aui-page-bg)] [background-image:linear-gradient(180deg,color-mix(in_oklch,var(--aui-accent)_18%,transparent),transparent),radial-gradient(circle_at_bottom_left,color-mix(in_oklch,var(--aui-success)_20%,transparent),transparent_40%)]" })
 							]
-						}), /* @__PURE__ */ k("section", {
-							className: `rounded-[28px] p-5 ${F}`,
+						}), /* @__PURE__ */ A("section", {
+							className: `rounded-[28px] p-5 ${I}`,
 							children: [
-								/* @__PURE__ */ O("h2", {
+								/* @__PURE__ */ k("h2", {
 									className: "text-xl font-semibold",
 									children: "Release checklist"
 								}),
-								/* @__PURE__ */ O("p", {
-									className: `mt-2 text-sm leading-6 ${L}`,
+								/* @__PURE__ */ k("p", {
+									className: `mt-2 text-sm leading-6 ${R}`,
 									children: "Production gating before public deployment."
 								}),
-								/* @__PURE__ */ O("div", {
+								/* @__PURE__ */ k("div", {
 									className: "mt-5 space-y-3",
 									children: [
 										"QA approved",
 										"Docs updated",
 										"Tokens synced",
 										"Routes verified"
-									].map((e, t) => /* @__PURE__ */ k("div", {
-										className: `flex items-center justify-between rounded-2xl px-4 py-3 ${P}`,
-										children: [/* @__PURE__ */ O("span", { children: e }), /* @__PURE__ */ O(n, {
+									].map((e, t) => /* @__PURE__ */ A("div", {
+										className: `flex items-center justify-between rounded-2xl px-4 py-3 ${F}`,
+										children: [/* @__PURE__ */ k("span", { children: e }), /* @__PURE__ */ k(n, {
 											variant: t === 3 ? "outline" : "secondary",
 											children: t === 3 ? "Pending" : "Done"
 										})]
@@ -242,45 +244,45 @@ function U({ tone: l }) {
 							]
 						})]
 					}),
-					/* @__PURE__ */ k("section", {
-						className: `rounded-[28px] p-5 ${F}`,
-						children: [/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ A("section", {
+						className: `rounded-[28px] p-5 ${I}`,
+						children: [/* @__PURE__ */ A("div", {
 							className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
-							children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("h2", {
+							children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h2", {
 								className: "text-xl font-semibold",
 								children: "Recent workspaces"
-							}), /* @__PURE__ */ O("p", {
-								className: `mt-2 text-sm leading-6 ${L}`,
+							}), /* @__PURE__ */ k("p", {
+								className: `mt-2 text-sm leading-6 ${R}`,
 								children: "Dense table preview inside a public docs frame."
-							})] }), /* @__PURE__ */ k("div", {
+							})] }), /* @__PURE__ */ A("div", {
 								className: "flex gap-3",
-								children: [/* @__PURE__ */ O(t, {
+								children: [/* @__PURE__ */ k(t, {
 									placeholder: "Filter rows...",
 									className: "w-full lg:w-64"
-								}), /* @__PURE__ */ O(e, {
+								}), /* @__PURE__ */ k(e, {
 									variant: "outline",
 									className: "rounded-2xl",
 									children: "Export"
 								})]
 							})]
-						}), /* @__PURE__ */ O("div", {
-							className: `mt-5 overflow-hidden rounded-[24px] ${P}`,
-							children: /* @__PURE__ */ k(r, { children: [/* @__PURE__ */ O(s, { children: /* @__PURE__ */ k(c, { children: [
-								/* @__PURE__ */ O(o, { children: "ID" }),
-								/* @__PURE__ */ O(o, { children: "Name" }),
-								/* @__PURE__ */ O(o, { children: "Status" }),
-								/* @__PURE__ */ O(o, {
+						}), /* @__PURE__ */ k("div", {
+							className: `mt-5 overflow-hidden rounded-[24px] ${F}`,
+							children: /* @__PURE__ */ A(r, { children: [/* @__PURE__ */ k(s, { children: /* @__PURE__ */ A(c, { children: [
+								/* @__PURE__ */ k(o, { children: "ID" }),
+								/* @__PURE__ */ k(o, { children: "Name" }),
+								/* @__PURE__ */ k(o, { children: "Status" }),
+								/* @__PURE__ */ k(o, {
 									className: "text-right",
 									children: "Revenue"
 								})
-							] }) }), /* @__PURE__ */ O(i, { children: j.map(([e, t, r, i]) => /* @__PURE__ */ k(c, { children: [
-								/* @__PURE__ */ O(a, { children: e }),
-								/* @__PURE__ */ O(a, { children: t }),
-								/* @__PURE__ */ O(a, { children: /* @__PURE__ */ O(n, {
+							] }) }), /* @__PURE__ */ k(i, { children: M.map(([e, t, r, i]) => /* @__PURE__ */ A(c, { children: [
+								/* @__PURE__ */ k(a, { children: e }),
+								/* @__PURE__ */ k(a, { children: t }),
+								/* @__PURE__ */ k(a, { children: /* @__PURE__ */ k(n, {
 									variant: r === "Live" ? "secondary" : r === "Review" ? "outline" : "destructive",
 									children: r
 								}) }),
-								/* @__PURE__ */ O(a, {
+								/* @__PURE__ */ k(a, {
 									className: "text-right",
 									children: i
 								})
@@ -290,83 +292,83 @@ function U({ tone: l }) {
 				]
 			})]
 		})
-	}) : l === "table" ? /* @__PURE__ */ O("div", {
-		className: N,
-		children: /* @__PURE__ */ k("section", {
-			className: `mx-auto max-w-6xl rounded-[32px] p-6 ${P}`,
-			children: [/* @__PURE__ */ k("div", {
+	}) : l === "table" ? /* @__PURE__ */ k("div", {
+		className: P,
+		children: /* @__PURE__ */ A("section", {
+			className: `mx-auto max-w-6xl rounded-[32px] p-6 ${F}`,
+			children: [/* @__PURE__ */ A("div", {
 				className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
-				children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("h1", {
+				children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h1", {
 					className: "text-3xl font-semibold tracking-tight",
 					children: "Invoices table"
-				}), /* @__PURE__ */ O("p", {
-					className: `mt-2 text-sm leading-6 ${L}`,
+				}), /* @__PURE__ */ k("p", {
+					className: `mt-2 text-sm leading-6 ${R}`,
 					children: "Responsive data-table preview route with filters, states and pagination shell."
-				})] }), /* @__PURE__ */ k("div", {
+				})] }), /* @__PURE__ */ A("div", {
 					className: "flex gap-3",
 					children: [
-						/* @__PURE__ */ O(t, {
+						/* @__PURE__ */ k(t, {
 							placeholder: "Search invoices...",
 							className: "w-full lg:w-64"
 						}),
-						/* @__PURE__ */ O(e, {
+						/* @__PURE__ */ k(e, {
 							variant: "outline",
 							className: "rounded-2xl",
 							children: "Columns"
 						}),
-						/* @__PURE__ */ O(e, {
+						/* @__PURE__ */ k(e, {
 							className: "rounded-2xl",
 							children: "Export CSV"
 						})
 					]
 				})]
-			}), /* @__PURE__ */ k("div", {
+			}), /* @__PURE__ */ A("div", {
 				className: "mt-5 space-y-5",
 				children: [
-					/* @__PURE__ */ O("div", {
+					/* @__PURE__ */ k("div", {
 						className: "flex flex-wrap gap-2",
 						children: [
 							"All",
 							"Paid",
 							"Review",
 							"Draft"
-						].map((e, t) => /* @__PURE__ */ O(n, {
+						].map((e, t) => /* @__PURE__ */ k(n, {
 							variant: t === 0 ? "default" : "outline",
 							children: e
 						}, e))
 					}),
-					/* @__PURE__ */ O("div", {
-						className: `overflow-hidden rounded-[24px] ${P}`,
-						children: /* @__PURE__ */ k(r, { children: [/* @__PURE__ */ O(s, { children: /* @__PURE__ */ k(c, { children: [
-							/* @__PURE__ */ O(o, { children: "Invoice" }),
-							/* @__PURE__ */ O(o, { children: "Customer" }),
-							/* @__PURE__ */ O(o, { children: "Status" }),
-							/* @__PURE__ */ O(o, {
+					/* @__PURE__ */ k("div", {
+						className: `overflow-hidden rounded-[24px] ${F}`,
+						children: /* @__PURE__ */ A(r, { children: [/* @__PURE__ */ k(s, { children: /* @__PURE__ */ A(c, { children: [
+							/* @__PURE__ */ k(o, { children: "Invoice" }),
+							/* @__PURE__ */ k(o, { children: "Customer" }),
+							/* @__PURE__ */ k(o, { children: "Status" }),
+							/* @__PURE__ */ k(o, {
 								className: "text-right",
 								children: "Amount"
 							})
-						] }) }), /* @__PURE__ */ O(i, { children: M.map(([e, t, r, i]) => /* @__PURE__ */ k(c, { children: [
-							/* @__PURE__ */ O(a, { children: e }),
-							/* @__PURE__ */ O(a, { children: t }),
-							/* @__PURE__ */ O(a, { children: /* @__PURE__ */ O(n, {
+						] }) }), /* @__PURE__ */ k(i, { children: N.map(([e, t, r, i]) => /* @__PURE__ */ A(c, { children: [
+							/* @__PURE__ */ k(a, { children: e }),
+							/* @__PURE__ */ k(a, { children: t }),
+							/* @__PURE__ */ k(a, { children: /* @__PURE__ */ k(n, {
 								variant: r === "Paid" ? "secondary" : r === "Review" ? "outline" : "destructive",
 								children: r
 							}) }),
-							/* @__PURE__ */ O(a, {
+							/* @__PURE__ */ k(a, {
 								className: "text-right",
 								children: i
 							})
 						] }, e)) })] })
 					}),
-					/* @__PURE__ */ k("div", {
-						className: `flex items-center justify-between rounded-[24px] px-4 py-3 text-sm ${F} ${L}`,
-						children: [/* @__PURE__ */ O("span", { children: "5 rows visible" }), /* @__PURE__ */ k("div", {
+					/* @__PURE__ */ A("div", {
+						className: `flex items-center justify-between rounded-[24px] px-4 py-3 text-sm ${I} ${R}`,
+						children: [/* @__PURE__ */ k("span", { children: "5 rows visible" }), /* @__PURE__ */ A("div", {
 							className: "flex gap-2",
-							children: [/* @__PURE__ */ O(e, {
+							children: [/* @__PURE__ */ k(e, {
 								variant: "outline",
 								size: "sm",
 								children: "Prev"
-							}), /* @__PURE__ */ O(e, {
+							}), /* @__PURE__ */ k(e, {
 								size: "sm",
 								children: "Next"
 							})]
@@ -375,185 +377,185 @@ function U({ tone: l }) {
 				]
 			})]
 		})
-	}) : l === "auth" ? /* @__PURE__ */ O("div", {
+	}) : l === "auth" ? /* @__PURE__ */ k("div", {
 		className: "min-h-screen bg-[linear-gradient(180deg,color-mix(in_oklch,var(--aui-warning)_14%,var(--aui-page-bg-alt)),var(--aui-page-bg))] p-6 aui-text-strong",
-		children: /* @__PURE__ */ k("div", {
+		children: /* @__PURE__ */ A("div", {
 			className: "mx-auto grid min-h-[720px] max-w-6xl gap-6 lg:grid-cols-[1.05fr_0.95fr]",
-			children: [/* @__PURE__ */ k("div", {
+			children: [/* @__PURE__ */ A("div", {
 				className: "flex flex-col justify-between rounded-[36px] border border-[color:color-mix(in_oklch,var(--aui-warning)_40%,transparent)] bg-[radial-gradient(circle_at_top_left,color-mix(in_oklch,var(--aui-warning)_22%,transparent),transparent_35%),var(--aui-surface-strong)] p-8 text-[color:var(--aui-surface-strong-foreground)] shadow-[var(--aui-shadow-panel)]",
-				children: [/* @__PURE__ */ k("div", { children: [
-					/* @__PURE__ */ k("div", {
-						className: `inline-flex items-center gap-3 rounded-full border px-3 py-2 ${z}`,
-						children: [/* @__PURE__ */ O("div", {
+				children: [/* @__PURE__ */ A("div", { children: [
+					/* @__PURE__ */ A("div", {
+						className: `inline-flex items-center gap-3 rounded-full border px-3 py-2 ${B}`,
+						children: [/* @__PURE__ */ k("div", {
 							className: "flex size-8 items-center justify-center rounded-xl border-[color:color-mix(in_oklch,var(--aui-surface-strong-foreground),transparent_88%)] bg-[color:var(--aui-page-bg)] text-xs font-semibold tracking-[0.22em] text-[color:var(--aui-page-foreground)]",
 							children: "AZ"
-						}), /* @__PURE__ */ O("span", {
+						}), /* @__PURE__ */ k("span", {
 							className: "text-sm font-medium",
 							children: "Tembro"
 						})]
 					}),
-					/* @__PURE__ */ O("h1", {
+					/* @__PURE__ */ k("h1", {
 						className: "mt-8 max-w-lg text-5xl font-semibold tracking-tight",
 						children: "Production sign in flow for modern product surfaces."
 					}),
-					/* @__PURE__ */ O("p", {
-						className: `mt-4 max-w-md text-base leading-7 ${R}`,
+					/* @__PURE__ */ k("p", {
+						className: `mt-4 max-w-md text-base leading-7 ${z}`,
 						children: "Preview a reusable auth block inside the docs system without leaving the library site."
 					})
-				] }), /* @__PURE__ */ O("div", {
+				] }), /* @__PURE__ */ k("div", {
 					className: "grid gap-3 sm:grid-cols-3",
 					children: [
 						"Social login",
 						"Password reset",
 						"Session states"
-					].map((e) => /* @__PURE__ */ O("div", {
-						className: `rounded-2xl border px-4 py-4 text-sm ${B}`,
+					].map((e) => /* @__PURE__ */ k("div", {
+						className: `rounded-2xl border px-4 py-4 text-sm ${V}`,
 						children: e
 					}, e))
 				})]
-			}), /* @__PURE__ */ O("section", {
-				className: `flex items-center rounded-[36px] p-8 ${P}`,
-				children: /* @__PURE__ */ k("div", {
+			}), /* @__PURE__ */ k("section", {
+				className: `flex items-center rounded-[36px] p-8 ${F}`,
+				children: /* @__PURE__ */ A("div", {
 					className: "mx-auto w-full max-w-md space-y-6",
 					children: [
-						/* @__PURE__ */ k("div", {
+						/* @__PURE__ */ A("div", {
 							className: "space-y-2 text-center",
-							children: [/* @__PURE__ */ O("h2", {
+							children: [/* @__PURE__ */ k("h2", {
 								className: "text-3xl font-semibold tracking-tight",
 								children: "Welcome back"
-							}), /* @__PURE__ */ O("p", {
-								className: `text-sm leading-6 ${L}`,
+							}), /* @__PURE__ */ k("p", {
+								className: `text-sm leading-6 ${R}`,
 								children: "Sign in to continue to your workspace and preview environment."
 							})]
 						}),
-						/* @__PURE__ */ O(e, {
+						/* @__PURE__ */ k(e, {
 							variant: "outline",
 							className: "w-full rounded-2xl",
 							children: "Continue with Google"
 						}),
-						/* @__PURE__ */ k("div", {
+						/* @__PURE__ */ A("div", {
 							className: "grid gap-4",
-							children: [/* @__PURE__ */ k("div", {
+							children: [/* @__PURE__ */ A("div", {
 								className: "space-y-2",
-								children: [/* @__PURE__ */ O("label", {
+								children: [/* @__PURE__ */ k("label", {
 									className: "text-sm font-medium aui-text-subtle",
 									children: "Email"
-								}), /* @__PURE__ */ O(t, { defaultValue: "jane@example.com" })]
-							}), /* @__PURE__ */ k("div", {
+								}), /* @__PURE__ */ k(t, { defaultValue: "jane@example.com" })]
+							}), /* @__PURE__ */ A("div", {
 								className: "space-y-2",
-								children: [/* @__PURE__ */ O("label", {
+								children: [/* @__PURE__ */ k("label", {
 									className: "text-sm font-medium aui-text-subtle",
 									children: "Password"
-								}), /* @__PURE__ */ O(t, {
+								}), /* @__PURE__ */ k(t, {
 									type: "password",
 									defaultValue: "password123"
 								})]
 							})]
 						}),
-						/* @__PURE__ */ O(e, {
+						/* @__PURE__ */ k(e, {
 							className: "w-full rounded-2xl",
 							children: "Sign in"
 						}),
-						/* @__PURE__ */ k("div", {
-							className: `flex items-center justify-between text-sm ${L}`,
-							children: [/* @__PURE__ */ O("span", { children: "Forgot password?" }), /* @__PURE__ */ O("span", { children: "Create account" })]
+						/* @__PURE__ */ A("div", {
+							className: `flex items-center justify-between text-sm ${R}`,
+							children: [/* @__PURE__ */ k("span", { children: "Forgot password?" }), /* @__PURE__ */ k("span", { children: "Create account" })]
 						})
 					]
 				})
 			})]
 		})
-	}) : l === "product" ? /* @__PURE__ */ O("div", {
+	}) : l === "product" ? /* @__PURE__ */ k("div", {
 		className: "min-h-screen bg-[linear-gradient(180deg,color-mix(in_oklch,var(--aui-danger)_10%,var(--aui-page-bg-alt)),var(--aui-page-bg))] p-6 aui-text-strong",
-		children: /* @__PURE__ */ k("div", {
+		children: /* @__PURE__ */ A("div", {
 			className: "mx-auto grid max-w-6xl gap-6 lg:grid-cols-[1.05fr_0.95fr]",
-			children: [/* @__PURE__ */ O("section", {
-				className: `rounded-[36px] p-8 ${P}`,
-				children: /* @__PURE__ */ O("div", {
+			children: [/* @__PURE__ */ k("section", {
+				className: `rounded-[36px] p-8 ${F}`,
+				children: /* @__PURE__ */ k("div", {
 					className: "flex h-[560px] items-center justify-center rounded-[28px] bg-[radial-gradient(circle_at_top,color-mix(in_oklch,var(--aui-danger)_16%,transparent),transparent_35%),linear-gradient(180deg,var(--aui-page-bg),color-mix(in_oklch,var(--aui-danger)_8%,var(--aui-page-bg)))]",
-					children: /* @__PURE__ */ k("div", {
+					children: /* @__PURE__ */ A("div", {
 						className: "grid gap-6",
-						children: [/* @__PURE__ */ O("div", { className: `mx-auto h-72 w-56 rounded-[28px] ${P}` }), /* @__PURE__ */ O("div", {
+						children: [/* @__PURE__ */ k("div", { className: `mx-auto h-72 w-56 rounded-[28px] ${F}` }), /* @__PURE__ */ k("div", {
 							className: "grid grid-cols-4 gap-3",
 							children: [
 								,
 								,
 								,
 								,
-							].fill(null).map((e, t) => /* @__PURE__ */ O("div", { className: `h-20 rounded-2xl ${P}` }, t))
+							].fill(null).map((e, t) => /* @__PURE__ */ k("div", { className: `h-20 rounded-2xl ${F}` }, t))
 						})]
 					})
 				})
-			}), /* @__PURE__ */ k("div", {
-				className: `space-y-6 rounded-[36px] p-8 ${P}`,
+			}), /* @__PURE__ */ A("div", {
+				className: `space-y-6 rounded-[36px] p-8 ${F}`,
 				children: [
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ A("div", {
 						className: "space-y-4",
 						children: [
-							/* @__PURE__ */ k("div", {
+							/* @__PURE__ */ A("div", {
 								className: "flex items-center gap-3",
-								children: [/* @__PURE__ */ O(n, {
+								children: [/* @__PURE__ */ k(n, {
 									className: "rounded-full bg-emerald-50 text-emerald-700 hover:bg-emerald-50",
 									children: "In stock"
-								}), /* @__PURE__ */ O(n, {
+								}), /* @__PURE__ */ k(n, {
 									variant: "outline",
 									children: "Ships today"
 								})]
 							}),
-							/* @__PURE__ */ O("h1", {
+							/* @__PURE__ */ k("h1", {
 								className: "text-5xl font-semibold tracking-tight",
 								children: "Azamat Chair"
 							}),
-							/* @__PURE__ */ O("p", {
-								className: `text-lg leading-8 ${L}`,
+							/* @__PURE__ */ k("p", {
+								className: `text-lg leading-8 ${R}`,
 								children: "A clean product detail surface with media gallery, pricing hierarchy and conversion controls."
 							})
 						]
 					}),
-					/* @__PURE__ */ O("div", {
-						className: `rounded-[28px] p-6 ${F}`,
-						children: /* @__PURE__ */ k("div", {
+					/* @__PURE__ */ k("div", {
+						className: `rounded-[28px] p-6 ${I}`,
+						children: /* @__PURE__ */ A("div", {
 							className: "flex items-end justify-between",
-							children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
-								className: `text-sm ${L}`,
+							children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
+								className: `text-sm ${R}`,
 								children: "Price"
-							}), /* @__PURE__ */ O("p", {
+							}), /* @__PURE__ */ k("p", {
 								className: "mt-2 text-4xl font-semibold",
 								children: "$249"
-							})] }), /* @__PURE__ */ O("p", {
+							})] }), /* @__PURE__ */ k("p", {
 								className: "text-sm text-emerald-600",
 								children: "Free shipping"
 							})]
 						})
 					}),
-					/* @__PURE__ */ O("div", {
+					/* @__PURE__ */ k("div", {
 						className: "grid gap-3 sm:grid-cols-3",
 						children: [
 							"Oak",
 							"Walnut",
 							"Black"
-						].map((e, t) => /* @__PURE__ */ O("button", {
-							className: t === 0 ? `rounded-2xl border px-4 py-3 text-sm ${I}` : "rounded-2xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm aui-text-subtle",
+						].map((e, t) => /* @__PURE__ */ k("button", {
+							className: t === 0 ? `rounded-2xl border px-4 py-3 text-sm ${L}` : "rounded-2xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm aui-text-subtle",
 							children: e
 						}, e))
 					}),
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ A("div", {
 						className: "flex gap-3",
-						children: [/* @__PURE__ */ O(e, {
+						children: [/* @__PURE__ */ k(e, {
 							className: "flex-1 rounded-2xl",
 							children: "Add to cart"
-						}), /* @__PURE__ */ O(e, {
+						}), /* @__PURE__ */ k(e, {
 							variant: "outline",
 							className: "flex-1 rounded-2xl",
 							children: "Save"
 						})]
 					}),
-					/* @__PURE__ */ O("div", {
+					/* @__PURE__ */ k("div", {
 						className: "grid gap-3",
 						children: [
 							"Premium ash wood frame",
 							"Textured linen seat",
 							"Two-year warranty"
-						].map((e) => /* @__PURE__ */ O("div", {
+						].map((e) => /* @__PURE__ */ k("div", {
 							className: "rounded-2xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm aui-text-subtle",
 							children: e
 						}, e))
@@ -561,24 +563,24 @@ function U({ tone: l }) {
 				]
 			})]
 		})
-	}) : l === "command" ? /* @__PURE__ */ O("div", {
-		className: N,
-		children: /* @__PURE__ */ O("div", {
-			className: `mx-auto max-w-4xl rounded-[36px] p-6 ${P}`,
-			children: /* @__PURE__ */ k("div", {
-				className: `mx-auto max-w-3xl overflow-hidden rounded-[28px] bg-[linear-gradient(180deg,var(--aui-page-bg),var(--aui-page-bg-alt))] ${P}`,
-				children: [/* @__PURE__ */ O("div", {
+	}) : l === "command" ? /* @__PURE__ */ k("div", {
+		className: P,
+		children: /* @__PURE__ */ k("div", {
+			className: `mx-auto max-w-4xl rounded-[36px] p-6 ${F}`,
+			children: /* @__PURE__ */ A("div", {
+				className: `mx-auto max-w-3xl overflow-hidden rounded-[28px] bg-[linear-gradient(180deg,var(--aui-page-bg),var(--aui-page-bg-alt))] ${F}`,
+				children: [/* @__PURE__ */ k("div", {
 					className: "border-b border-[color:var(--aui-divider)] px-5 py-4",
-					children: /* @__PURE__ */ O(t, {
+					children: /* @__PURE__ */ k(t, {
 						defaultValue: "Search components, blocks, templates...",
 						className: "border-0 px-0 text-base shadow-none focus-visible:ring-0"
 					})
-				}), /* @__PURE__ */ k("div", {
+				}), /* @__PURE__ */ A("div", {
 					className: "grid gap-6 p-5 md:grid-cols-2",
-					children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
-						className: `mb-3 text-xs font-semibold uppercase tracking-[0.24em] ${L}`,
+					children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
+						className: `mb-3 text-xs font-semibold uppercase tracking-[0.24em] ${R}`,
 						children: "Trending"
-					}), /* @__PURE__ */ O("div", {
+					}), /* @__PURE__ */ k("div", {
 						className: "space-y-2",
 						children: [
 							"Button",
@@ -586,24 +588,24 @@ function U({ tone: l }) {
 							"Card",
 							"Dialog",
 							"Data Table"
-						].map((e, t) => /* @__PURE__ */ k("div", {
-							className: t === 0 ? `flex items-center justify-between rounded-2xl px-4 py-3 text-sm ${I}` : "flex items-center justify-between rounded-2xl px-4 py-3 text-sm aui-text-subtle",
-							children: [/* @__PURE__ */ O("span", { children: e }), /* @__PURE__ */ O(n, {
+						].map((e, t) => /* @__PURE__ */ A("div", {
+							className: t === 0 ? `flex items-center justify-between rounded-2xl px-4 py-3 text-sm ${L}` : "flex items-center justify-between rounded-2xl px-4 py-3 text-sm aui-text-subtle",
+							children: [/* @__PURE__ */ k("span", { children: e }), /* @__PURE__ */ k(n, {
 								variant: t === 0 ? "secondary" : "outline",
 								children: String.fromCharCode(66 + t)
 							})]
 						}, e))
-					})] }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
-						className: `mb-3 text-xs font-semibold uppercase tracking-[0.24em] ${L}`,
+					})] }), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
+						className: `mb-3 text-xs font-semibold uppercase tracking-[0.24em] ${R}`,
 						children: "Quick actions"
-					}), /* @__PURE__ */ O("div", {
+					}), /* @__PURE__ */ k("div", {
 						className: "space-y-2",
 						children: [
 							"Open docs",
 							"Preview template",
 							"Copy install command",
 							"Switch theme"
-						].map((e) => /* @__PURE__ */ O("div", {
+						].map((e) => /* @__PURE__ */ k("div", {
 							className: "rounded-2xl border border-[color:var(--aui-divider)] px-4 py-3 text-sm aui-text-subtle",
 							children: e
 						}, e))
@@ -611,22 +613,22 @@ function U({ tone: l }) {
 				})]
 			})
 		})
-	}) : l === "calendar" ? /* @__PURE__ */ O("div", {
+	}) : l === "calendar" ? /* @__PURE__ */ k("div", {
 		className: "min-h-screen bg-[linear-gradient(180deg,color-mix(in_oklch,var(--aui-accent)_10%,var(--aui-page-bg-alt)),var(--aui-page-bg))] p-6 aui-text-strong",
-		children: /* @__PURE__ */ k("div", {
+		children: /* @__PURE__ */ A("div", {
 			className: "mx-auto grid max-w-5xl gap-6 lg:grid-cols-[0.95fr_1.05fr]",
-			children: [/* @__PURE__ */ k("section", {
-				className: `rounded-[32px] p-6 ${P}`,
+			children: [/* @__PURE__ */ A("section", {
+				className: `rounded-[32px] p-6 ${F}`,
 				children: [
-					/* @__PURE__ */ O("h1", {
+					/* @__PURE__ */ k("h1", {
 						className: "text-3xl font-semibold tracking-tight",
 						children: "June 2026"
 					}),
-					/* @__PURE__ */ O("p", {
-						className: `mt-2 text-sm leading-6 ${L}`,
+					/* @__PURE__ */ k("p", {
+						className: `mt-2 text-sm leading-6 ${R}`,
 						children: "Calendar family preview with selected dates and scheduling context."
 					}),
-					/* @__PURE__ */ O("div", {
+					/* @__PURE__ */ k("div", {
 						className: "mt-5 grid grid-cols-7 gap-2 text-center text-sm",
 						children: [
 							"Mo",
@@ -637,46 +639,46 @@ function U({ tone: l }) {
 							"Sa",
 							"Su",
 							...Array.from({ length: 35 }, (e, t) => `${t + 1}`)
-						].map((e, t) => /* @__PURE__ */ O("div", {
-							className: t > 10 && t < 13 ? `rounded-2xl px-3 py-3 ${I}` : "rounded-2xl border border-[color:var(--aui-divider)] px-3 py-3 aui-text-subtle",
+						].map((e, t) => /* @__PURE__ */ k("div", {
+							className: t > 10 && t < 13 ? `rounded-2xl px-3 py-3 ${L}` : "rounded-2xl border border-[color:var(--aui-divider)] px-3 py-3 aui-text-subtle",
 							children: e
 						}, `${e}-${t}`))
 					})
 				]
-			}), /* @__PURE__ */ k("section", {
-				className: `rounded-[32px] p-6 ${P}`,
+			}), /* @__PURE__ */ A("section", {
+				className: `rounded-[32px] p-6 ${F}`,
 				children: [
-					/* @__PURE__ */ O("h2", {
+					/* @__PURE__ */ k("h2", {
 						className: "text-2xl font-semibold tracking-tight",
 						children: "Schedule event"
 					}),
-					/* @__PURE__ */ O("p", {
-						className: `mt-2 text-sm leading-6 ${L}`,
+					/* @__PURE__ */ k("p", {
+						className: `mt-2 text-sm leading-6 ${R}`,
 						children: "Pair calendar surfaces with summary cards and chosen range context."
 					}),
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ A("div", {
 						className: "mt-5 space-y-4",
-						children: [/* @__PURE__ */ k("div", {
-							className: `rounded-[24px] p-5 ${F}`,
-							children: [/* @__PURE__ */ O("p", {
-								className: `text-sm ${L}`,
+						children: [/* @__PURE__ */ A("div", {
+							className: `rounded-[24px] p-5 ${I}`,
+							children: [/* @__PURE__ */ k("p", {
+								className: `text-sm ${R}`,
 								children: "Selected range"
-							}), /* @__PURE__ */ O("p", {
+							}), /* @__PURE__ */ k("p", {
 								className: "mt-2 text-2xl font-semibold",
 								children: "12 Jun - 18 Jun"
 							})]
-						}), /* @__PURE__ */ O("div", {
+						}), /* @__PURE__ */ k("div", {
 							className: "grid gap-3",
 							children: [
 								"Design review",
 								"Prototype handoff",
 								"Release QA"
-							].map((e) => /* @__PURE__ */ k("div", {
+							].map((e) => /* @__PURE__ */ A("div", {
 								className: "flex items-center justify-between rounded-2xl border border-[color:var(--aui-divider)] px-4 py-3",
-								children: [/* @__PURE__ */ O("span", {
+								children: [/* @__PURE__ */ k("span", {
 									className: "text-sm aui-text-subtle",
 									children: e
-								}), /* @__PURE__ */ O(n, {
+								}), /* @__PURE__ */ k(n, {
 									variant: "outline",
 									children: "Scheduled"
 								})]
@@ -686,62 +688,62 @@ function U({ tone: l }) {
 				]
 			})]
 		})
-	}) : /* @__PURE__ */ O("div", {
+	}) : /* @__PURE__ */ k("div", {
 		className: "min-h-screen bg-[linear-gradient(180deg,color-mix(in_oklch,var(--aui-success)_8%,var(--aui-page-bg-alt)),var(--aui-page-bg))] p-6 aui-text-strong",
-		children: /* @__PURE__ */ O("div", {
+		children: /* @__PURE__ */ k("div", {
 			className: "mx-auto max-w-5xl space-y-6",
-			children: /* @__PURE__ */ k("section", {
-				className: `rounded-[32px] p-6 ${P}`,
+			children: /* @__PURE__ */ A("section", {
+				className: `rounded-[32px] p-6 ${F}`,
 				children: [
-					/* @__PURE__ */ O("h1", {
+					/* @__PURE__ */ k("h1", {
 						className: "text-3xl font-semibold tracking-tight",
 						children: "Upload assets"
 					}),
-					/* @__PURE__ */ O("p", {
-						className: `mt-2 text-sm leading-6 ${L}`,
+					/* @__PURE__ */ k("p", {
+						className: `mt-2 text-sm leading-6 ${R}`,
 						children: "Preview drag, status and asset-library patterns in one route."
 					}),
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ A("div", {
 						className: "mt-5 grid gap-6 lg:grid-cols-[1.05fr_0.95fr]",
-						children: [/* @__PURE__ */ O("div", {
+						children: [/* @__PURE__ */ k("div", {
 							className: "flex min-h-[320px] items-center justify-center rounded-[28px] border border-dashed border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)]",
-							children: /* @__PURE__ */ k("div", {
+							children: /* @__PURE__ */ A("div", {
 								className: "space-y-3 text-center",
 								children: [
-									/* @__PURE__ */ O("p", {
+									/* @__PURE__ */ k("p", {
 										className: "text-lg font-semibold",
 										children: "Drop files here"
 									}),
-									/* @__PURE__ */ O("p", {
-										className: `text-sm ${L}`,
+									/* @__PURE__ */ k("p", {
+										className: `text-sm ${R}`,
 										children: "PNG, JPG, SVG, PDF up to 20MB"
 									}),
-									/* @__PURE__ */ O(e, {
+									/* @__PURE__ */ k(e, {
 										className: "rounded-2xl",
 										children: "Browse files"
 									})
 								]
 							})
-						}), /* @__PURE__ */ O("div", {
+						}), /* @__PURE__ */ k("div", {
 							className: "space-y-3",
 							children: [
 								"Brand-guide.pdf",
 								"hero-image.png",
 								"avatar-collection.zip"
-							].map((e, t) => /* @__PURE__ */ k("div", {
+							].map((e, t) => /* @__PURE__ */ A("div", {
 								className: "rounded-2xl border border-[color:var(--aui-divider)] px-4 py-4",
-								children: [/* @__PURE__ */ k("div", {
+								children: [/* @__PURE__ */ A("div", {
 									className: "flex items-center justify-between",
-									children: [/* @__PURE__ */ O("span", {
+									children: [/* @__PURE__ */ k("span", {
 										className: "font-medium aui-text-strong",
 										children: e
-									}), /* @__PURE__ */ O(n, {
+									}), /* @__PURE__ */ k(n, {
 										variant: t === 2 ? "outline" : "secondary",
 										children: t === 2 ? "Uploading" : "Done"
 									})]
-								}), /* @__PURE__ */ O("div", {
+								}), /* @__PURE__ */ k("div", {
 									className: "mt-3 h-2 rounded-full bg-[color:var(--aui-surface-muted)]",
-									children: /* @__PURE__ */ O("div", { className: t === 2 ? "h-2 w-2/3 rounded-full bg-[color:var(--aui-surface-strong)]" : "h-2 w-full rounded-full bg-emerald-500" })
+									children: /* @__PURE__ */ k("div", { className: t === 2 ? "h-2 w-2/3 rounded-full bg-[color:var(--aui-surface-strong)]" : "h-2 w-full rounded-full bg-emerald-500" })
 								})]
 							}, e))
 						})]
@@ -751,81 +753,81 @@ function U({ tone: l }) {
 		})
 	});
 }
-var W = Object.fromEntries(D.map((e) => [e.slug, {
+var G = Object.fromEntries(O.map((e) => [e.slug, {
 	title: e.title,
 	command: e.command,
 	code: e.code,
 	Render: function() {
-		return /* @__PURE__ */ O(U, { tone: e.tone });
+		return /* @__PURE__ */ k(W, { tone: e.tone });
 	}
 }]));
-function G(e) {
-	let t = V[e];
+function K(e) {
+	let t = H[e];
 	return t ? {
 		title: `${e} preview`,
 		command: `npx tembro add ${e}`,
 		code: t.mock.code,
 		Render() {
-			return /* @__PURE__ */ O("div", {
-				className: N,
-				children: /* @__PURE__ */ k("div", {
-					className: `mx-auto max-w-5xl space-y-6 rounded-[32px] p-6 ${P}`,
+			return /* @__PURE__ */ k("div", {
+				className: P,
+				children: /* @__PURE__ */ A("div", {
+					className: `mx-auto max-w-5xl space-y-6 rounded-[32px] p-6 ${F}`,
 					children: [
-						/* @__PURE__ */ k("div", {
+						/* @__PURE__ */ A("div", {
 							className: "space-y-2",
 							children: [
-								/* @__PURE__ */ k("div", {
+								/* @__PURE__ */ A("div", {
 									className: "flex flex-wrap gap-2",
-									children: [/* @__PURE__ */ O("span", {
-										className: `rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${L}`,
+									children: [/* @__PURE__ */ k("span", {
+										className: `rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${R}`,
 										children: "Component preview"
-									}), /* @__PURE__ */ O("span", {
-										className: `rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${L}`,
+									}), /* @__PURE__ */ k("span", {
+										className: `rounded-full border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${R}`,
 										children: "Playground route"
 									})]
 								}),
-								/* @__PURE__ */ O("h1", {
+								/* @__PURE__ */ k("h1", {
 									className: "text-4xl font-semibold tracking-tight capitalize",
 									children: e
 								}),
-								/* @__PURE__ */ O("p", {
-									className: `text-base leading-7 ${L}`,
+								/* @__PURE__ */ k("p", {
+									className: `text-base leading-7 ${R}`,
 									children: "Direct component demo route for iframe-based docs preview."
 								})
 							]
 						}),
-						/* @__PURE__ */ O("div", {
+						/* @__PURE__ */ k("div", {
 							className: "rounded-[28px] border border-[color:var(--aui-divider)] bg-[linear-gradient(180deg,var(--aui-page-bg),var(--aui-page-bg-alt))] p-6",
-							children: /* @__PURE__ */ O(t.Showcase, {
+							children: /* @__PURE__ */ k(t.Showcase, {
 								mode: "playground",
-								state: C,
+								state: w,
 								setState: () => void 0
 							})
 						}),
-						/* @__PURE__ */ O("div", {
+						/* @__PURE__ */ k("div", {
 							className: "grid gap-4 md:grid-cols-3",
-							children: t.mock.highlights.map((e) => /* @__PURE__ */ O("div", {
+							children: t.mock.highlights.map((e) => /* @__PURE__ */ k("div", {
 								className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-surface-muted)] p-4 text-sm aui-text-subtle",
 								children: e
 							}, e))
 						}),
-						/* @__PURE__ */ k("div", {
+						/* @__PURE__ */ A("div", {
 							className: "grid gap-4 md:grid-cols-2",
-							children: [/* @__PURE__ */ k("div", {
-								className: `rounded-[24px] p-4 ${F}`,
-								children: [/* @__PURE__ */ O("p", {
-									className: `text-xs font-semibold uppercase tracking-[0.22em] ${L}`,
+							children: [/* @__PURE__ */ A("div", {
+								className: `rounded-[24px] p-4 ${I}`,
+								children: [/* @__PURE__ */ k("p", {
+									className: `text-xs font-semibold uppercase tracking-[0.22em] ${R}`,
 									children: "CLI"
-								}), /* @__PURE__ */ O("code", {
+								}), /* @__PURE__ */ k("code", {
 									className: "mt-3 block text-sm aui-text-strong",
 									children: `npx tembro add ${e}`
 								})]
-							}), /* @__PURE__ */ k("div", {
-								className: `rounded-[24px] p-4 ${F}`,
-								children: [/* @__PURE__ */ O("p", {
-									className: `text-xs font-semibold uppercase tracking-[0.22em] ${L}`,
+							}), /* @__PURE__ */ A("div", {
+								className: `rounded-[24px] p-4 ${I}`,
+								children: [/* @__PURE__ */ k("p", {
+									className: `text-xs font-semibold uppercase tracking-[0.22em] ${R}`,
 									children: "Preview note"
-								}), /* @__PURE__ */ O("p", {
+								}), /* @__PURE__ */ k("p", {
 									className: "mt-3 text-sm leading-6 aui-text-subtle",
 									children: "This route exists to inspect the live reusable surface in isolation before wiring it into docs, templates or application pages."
 								})]
@@ -838,4 +840,4 @@ function G(e) {
 	} : null;
 }
 //#endregion
-export { G as getComponentPreview, W as previewBlockRegistry };
+export { K as getComponentPreview, G as previewBlockRegistry };