tembro 1.0.0

package/dist/showcase/premium/alert/showcase.js

@@ -0,0 +1,113 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { Alert as n } from "../../../components/feedback/alert.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/alert/showcase.tsx
+var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5", s = [
+	"info",
+	"success",
+	"warning",
+	"destructive"
+];
+function c({ mode: c }) {
+	let [l, u] = r.useState(2), [d, f] = r.useState(0), p = s[l] ?? "warning";
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ i("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ a("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ i("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Inline feedback"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Alert should guide the next user decision"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "Use alert when the page needs a visible, contextual message with a clear action. It should feel operational, not decorative."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Context aware"
+						}), /* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Action ready"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ i(n, {
+				tone: p,
+				title: p === "success" ? "Workspace synced" : p === "destructive" ? "Action blocked" : p === "info" ? "Heads up" : "Review needed",
+				description: p === "success" ? "Changes were saved and the team can continue safely." : p === "destructive" ? "The release cannot continue until billing permissions are restored." : p === "info" ? "Usage data refreshed and one metric changed since your last visit." : "Billing rules changed and one approval is pending before publish.",
+				action: /* @__PURE__ */ i(e, {
+					size: "sm",
+					variant: p === "destructive" ? "destructive" : "default",
+					onClick: () => f((e) => e + 1),
+					children: p === "success" ? "Continue" : p === "destructive" ? "Fix access" : p === "info" ? "Open details" : "Open review"
+				})
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "grid gap-4 xl:grid-cols-[0.9fr_1.1fr]",
+				children: [/* @__PURE__ */ a("section", {
+					className: o,
+					children: [
+						/* @__PURE__ */ i("p", {
+							className: "text-sm font-medium aui-text-muted",
+							children: "Action count"
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+							children: d
+						}),
+						/* @__PURE__ */ i("p", {
+							className: "mt-2 text-sm leading-6 aui-text-muted",
+							children: "Alert CTA should resolve a real decision, not just dismiss a message."
+						})
+					]
+				}), /* @__PURE__ */ a("section", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Recommended usage"
+					}), /* @__PURE__ */ a("div", {
+						className: "mt-4 space-y-3 text-sm leading-6 aui-text-muted",
+						children: [/* @__PURE__ */ i("p", { children: "Put alert above the affected surface, form, or result area." }), /* @__PURE__ */ i("p", { children: "Prefer one primary action. If the user only needs acknowledgment, use toast instead." })]
+					})]
+				})]
+			}),
+			c === "playground" ? /* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-wrap gap-2",
+					children: [s.map((t, n) => /* @__PURE__ */ i(e, {
+						size: "sm",
+						variant: l === n ? "default" : "outline",
+						onClick: () => u(n),
+						children: t
+					}, t)), /* @__PURE__ */ i(e, {
+						size: "sm",
+						variant: "outline",
+						onClick: () => f(0),
+						children: "Reset counter"
+					})]
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { c as AlertShowcase };

package/dist/showcase/premium/alert-dialog/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.AlertDialogShowcase=e.AlertDialogShowcase,exports.alertDialogMock=t.alertDialogMock;

package/dist/showcase/premium/alert-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { AlertDialogShowcase } from "./showcase";
+export { alertDialogMock } from "./mock";

package/dist/showcase/premium/alert-dialog/index.js

@@ -0,0 +1,3 @@
+import { AlertDialogShowcase as e } from "./showcase.js";
+import { alertDialogMock as t } from "./mock.js";
+export { e as AlertDialogShowcase, t as alertDialogMock };

package/dist/showcase/premium/alert-dialog/mock.cjs

@@ -0,0 +1,19 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import * as React from "react"
+import { AlertDialog, Button } from "tembro"
+
+export function Example() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <>
+      <Button variant="destructive" onClick={() => setOpen(true)}>Delete workspace</Button>
+      <AlertDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Delete workspace?"
+        description="This removes active billing rules and member access."
+        actionLabel="Delete"
+      />
+    </>
+  )
+}`,highlights:[`Destructive confirmation flow`,`Async-ready action state`,`Strong title + consequence copy`,`Built on the same dialog primitives as the rest of the system`],scenarios:[{title:`Delete resource`,description:`Require explicit confirmation before destructive irreversible actions.`},{title:`Reset configuration`,description:`Warn users when policies, tokens, or routes will be cleared.`},{title:`High-risk approval`,description:`Pause sensitive admin actions until the user confirms consequences.`}],capabilityNotes:[`Use alert-dialog only for genuinely high-risk actions.`,`The description should explain consequence, not restate the title.`,`If the action is recoverable or low-risk, a regular dialog is often enough.`]};exports.alertDialogMock=e;

package/dist/showcase/premium/alert-dialog/mock.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDemoMock } from "../types";
+export declare const alertDialogMock: ComponentDemoMock;

package/dist/showcase/premium/alert-dialog/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/alert-dialog/mock.ts
+var e = {
+	code: "import * as React from \"react\"\nimport { AlertDialog, Button } from \"tembro\"\n\nexport function Example() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>Delete workspace</Button>\n      <AlertDialog\n        open={open}\n        onOpenChange={setOpen}\n        title=\"Delete workspace?\"\n        description=\"This removes active billing rules and member access.\"\n        actionLabel=\"Delete\"\n      />\n    </>\n  )\n}",
+	highlights: [
+		"Destructive confirmation flow",
+		"Async-ready action state",
+		"Strong title + consequence copy",
+		"Built on the same dialog primitives as the rest of the system"
+	],
+	scenarios: [
+		{
+			title: "Delete resource",
+			description: "Require explicit confirmation before destructive irreversible actions."
+		},
+		{
+			title: "Reset configuration",
+			description: "Warn users when policies, tokens, or routes will be cleared."
+		},
+		{
+			title: "High-risk approval",
+			description: "Pause sensitive admin actions until the user confirms consequences."
+		}
+	],
+	capabilityNotes: [
+		"Use alert-dialog only for genuinely high-risk actions.",
+		"The description should explain consequence, not restate the title.",
+		"If the action is recoverable or low-risk, a regular dialog is often enough."
+	]
+};
+//#endregion
+export { e as alertDialogMock };

package/dist/showcase/premium/alert-dialog/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/overlay/alert-dialog.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=`rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`;function s({mode:e}){let[s,c]=i.useState(!1),[l,u]=i.useState(!1),[d,f]=i.useState(`No action confirmed yet`);return(0,a.jsxs)(`div`,{className:`space-y-5`,children:[(0,a.jsx)(`section`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6`,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between`,children:[(0,a.jsxs)(`div`,{className:`max-w-xl`,children:[(0,a.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Destructive gate`}),(0,a.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`AlertDialog should interrupt only when the action has real consequence`}),(0,a.jsx)(`p`,{className:`mt-3 max-w-lg text-sm leading-6 aui-text-muted`,children:`This is not a generic modal. It exists to slow the user down before irreversible, expensive, or risky operations.`})]}),(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`High risk`}),(0,a.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Explicit confirmation`})]})]})}),(0,a.jsx)(`section`,{className:o,children:(0,a.jsxs)(`div`,{className:`flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between`,children:[(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Live destructive flow`}),(0,a.jsx)(`p`,{className:`mt-2 text-sm leading-6 aui-text-muted`,children:`Open the dialog and confirm a risky workspace action.`})]}),(0,a.jsx)(t.Button,{variant:`destructive`,onClick:()=>c(!0),children:`Delete workspace`})]})}),(0,a.jsxs)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:[(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Last result`}),(0,a.jsx)(`p`,{className:`mt-3 text-base font-medium aui-text-strong`,children:d})]}),(0,a.jsxs)(`section`,{className:o,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium aui-text-muted`,children:`Design rule`}),(0,a.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Keep alert-dialog copy direct: what will happen, what is lost, and what the user should expect next.`})]})]}),(0,a.jsx)(r.AlertDialog,{open:s,onOpenChange:c,loading:l,title:`Delete workspace?`,description:`This removes active billing rules, API tokens, and member access from the selected workspace.`,actionLabel:`Delete workspace`,onAction:async()=>{u(!0),await new Promise(e=>window.setTimeout(e,450)),u(!1),c(!1),f(`Workspace deletion confirmed`)}}),e===`playground`?(0,a.jsx)(`section`,{className:o,children:(0,a.jsx)(t.Button,{size:`sm`,variant:`outline`,onClick:()=>f(`No action confirmed yet`),children:`Reset result`})}):null]})}exports.AlertDialogShowcase=s;

package/dist/showcase/premium/alert-dialog/showcase.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { ComponentDemoProps } from "../types";
+export declare function AlertDialogShowcase({ mode }: ComponentDemoProps): React.JSX.Element;

package/dist/showcase/premium/alert-dialog/showcase.js

@@ -0,0 +1,110 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { AlertDialog as n } from "../../../components/overlay/alert-dialog.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/showcase/premium/alert-dialog/showcase.tsx
+var o = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5";
+function s({ mode: s }) {
+	let [c, l] = r.useState(!1), [u, d] = r.useState(!1), [f, p] = r.useState("No action confirmed yet");
+	return /* @__PURE__ */ a("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ i("section", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6",
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between",
+					children: [/* @__PURE__ */ a("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ i("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Destructive gate"
+							}),
+							/* @__PURE__ */ i("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "AlertDialog should interrupt only when the action has real consequence"
+							}),
+							/* @__PURE__ */ i("p", {
+								className: "mt-3 max-w-lg text-sm leading-6 aui-text-muted",
+								children: "This is not a generic modal. It exists to slow the user down before irreversible, expensive, or risky operations."
+							})
+						]
+					}), /* @__PURE__ */ a("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "High risk"
+						}), /* @__PURE__ */ i(t, {
+							variant: "outline",
+							className: "rounded-full",
+							children: "Explicit confirmation"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ a("div", {
+					className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+					children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Live destructive flow"
+					}), /* @__PURE__ */ i("p", {
+						className: "mt-2 text-sm leading-6 aui-text-muted",
+						children: "Open the dialog and confirm a risky workspace action."
+					})] }), /* @__PURE__ */ i(e, {
+						variant: "destructive",
+						onClick: () => l(!0),
+						children: "Delete workspace"
+					})]
+				})
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "grid gap-4 xl:grid-cols-2",
+				children: [/* @__PURE__ */ a("section", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Last result"
+					}), /* @__PURE__ */ i("p", {
+						className: "mt-3 text-base font-medium aui-text-strong",
+						children: f
+					})]
+				}), /* @__PURE__ */ a("section", {
+					className: o,
+					children: [/* @__PURE__ */ i("p", {
+						className: "text-sm font-medium aui-text-muted",
+						children: "Design rule"
+					}), /* @__PURE__ */ i("p", {
+						className: "mt-3 text-sm leading-6 aui-text-muted",
+						children: "Keep alert-dialog copy direct: what will happen, what is lost, and what the user should expect next."
+					})]
+				})]
+			}),
+			/* @__PURE__ */ i(n, {
+				open: c,
+				onOpenChange: l,
+				loading: u,
+				title: "Delete workspace?",
+				description: "This removes active billing rules, API tokens, and member access from the selected workspace.",
+				actionLabel: "Delete workspace",
+				onAction: async () => {
+					d(!0), await new Promise((e) => window.setTimeout(e, 450)), d(!1), l(!1), p("Workspace deletion confirmed");
+				}
+			}),
+			s === "playground" ? /* @__PURE__ */ i("section", {
+				className: o,
+				children: /* @__PURE__ */ i(e, {
+					size: "sm",
+					variant: "outline",
+					onClick: () => p("No action confirmed yet"),
+					children: "Reset result"
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { s as AlertDialogShowcase };

package/dist/showcase/premium/app-shell/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.AppShellShowcase=e.AppShellShowcase,exports.appShellMock=t.appShellMock;

package/dist/showcase/premium/app-shell/index.d.ts

@@ -0,0 +1,2 @@
+export { AppShellShowcase } from "./showcase";
+export { appShellMock } from "./mock";

package/dist/showcase/premium/app-shell/index.js

@@ -0,0 +1,3 @@
+import { AppShellShowcase as e } from "./showcase.js";
+import { appShellMock as t } from "./mock.js";
+export { e as AppShellShowcase, t as appShellMock };

package/dist/showcase/premium/app-shell/mock.cjs

@@ -0,0 +1,48 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { AppHeader, AppSidebar, AppShell, Breadcrumbs, InfoCard, MetricGrid, PageContainer, PageHeader, SidebarNav, Button } from "tembro"
+
+const navItems = [
+  { key: "overview", label: "Overview", href: "/overview", active: true },
+  { key: "products", label: "Products", href: "/products" },
+  { key: "settings", label: "Settings", href: "/settings" },
+]
+
+const metrics = [
+  { key: "mrr", label: "MRR", value: "$84k", description: "+14% vs last month", trend: "up" },
+  { key: "sessions", label: "Active sessions", value: "1,240", description: "12% live growth" },
+  { key: "issues", label: "Open issues", value: "23", description: "3 priority", trend: "down" },
+]
+
+export function Example() {
+  return (
+    <AppShell
+      sidebarWidth="default"
+      mainClassName="p-4"
+      sidebar={
+        <AppSidebar
+          header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
+          footer={<div className="px-3 py-2 text-xs aui-text-muted">v1.2.0</div>}
+        >
+          <SidebarNav items={navItems} />
+        </AppSidebar>
+      }
+      header={<AppHeader left="Admin Console" right={<Button variant="outline">Open command</Button>} />}
+      aside={<InfoCard title="Workspace" description="Metrics, alerts, and quick access cards." compact>Aside slot keeps secondary context near main content.</InfoCard>}
+    >
+      <PageContainer size="lg">
+        <PageHeader
+          eyebrow="Product dashboard"
+          title="Teams and activity"
+          description="Use shell slots for consistent layout and mobile-safe nav control."
+          breadcrumbs={<Breadcrumbs items={[
+            { key: "home", label: "Home", href: "/" },
+            { key: "dashboard", label: "Dashboard", current: true },
+          ]} />}
+          actions={<Button variant="outline" size="sm">Manage</Button>}
+        />
+        <div className="mt-4">
+          <MetricGrid items={metrics} compact />
+        </div>
+      </PageContainer>
+    </AppShell>
+  )
+}`,cliCommand:`npx tembro add app-shell`,highlights:[`Shell slots (header, sidebar, aside)`,`Static and mobile sidebar behavior`,`Breadcrumbs inside page header`,`Metric block composition`],relatedBlockSlugs:[`dashboard-starter`,`crm-dashboard`,`settings-form`],scenarios:[{title:`Dashboard shell`,description:`Build an app frame with reusable header, sidebar and aside areas.`},{title:`Router-aware layout`,description:`Keep navigation and route content separated by region for SPA and SSR pages.`},{title:`Mobile fallback`,description:`Toggle mobile menu and keep aside optional for narrow screens.`}],capabilityNotes:[`Use AppShell when every page shares a stable structure: header, sidebar, main and optional aside.`,`Keep sidebar composition explicit so route-level content stays predictable and testable.`,"Pass controlled `sidebarCollapsed` and `mobileSidebarOpen` when app state is owned by a global layout manager.",`Avoid overloading the aside region in mobile contexts; hide non-essential context when needed.`]};exports.appShellMock=e;

package/dist/showcase/premium/app-shell/mock.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDemoMock } from "../types";
+export declare const appShellMock: ComponentDemoMock;

package/dist/showcase/premium/app-shell/mock.js

@@ -0,0 +1,38 @@
+//#region src/showcase/premium/app-shell/mock.ts
+var e = {
+	code: "import { AppHeader, AppSidebar, AppShell, Breadcrumbs, InfoCard, MetricGrid, PageContainer, PageHeader, SidebarNav, Button } from \"tembro\"\n\nconst navItems = [\n  { key: \"overview\", label: \"Overview\", href: \"/overview\", active: true },\n  { key: \"products\", label: \"Products\", href: \"/products\" },\n  { key: \"settings\", label: \"Settings\", href: \"/settings\" },\n]\n\nconst metrics = [\n  { key: \"mrr\", label: \"MRR\", value: \"$84k\", description: \"+14% vs last month\", trend: \"up\" },\n  { key: \"sessions\", label: \"Active sessions\", value: \"1,240\", description: \"12% live growth\" },\n  { key: \"issues\", label: \"Open issues\", value: \"23\", description: \"3 priority\", trend: \"down\" },\n]\n\nexport function Example() {\n  return (\n    <AppShell\n      sidebarWidth=\"default\"\n      mainClassName=\"p-4\"\n      sidebar={\n        <AppSidebar\n          header={<div className=\"px-3 py-2 text-sm font-semibold\">Azamat Workspace</div>}\n          footer={<div className=\"px-3 py-2 text-xs aui-text-muted\">v1.2.0</div>}\n        >\n          <SidebarNav items={navItems} />\n        </AppSidebar>\n      }\n      header={<AppHeader left=\"Admin Console\" right={<Button variant=\"outline\">Open command</Button>} />}\n      aside={<InfoCard title=\"Workspace\" description=\"Metrics, alerts, and quick access cards.\" compact>Aside slot keeps secondary context near main content.</InfoCard>}\n    >\n      <PageContainer size=\"lg\">\n        <PageHeader\n          eyebrow=\"Product dashboard\"\n          title=\"Teams and activity\"\n          description=\"Use shell slots for consistent layout and mobile-safe nav control.\"\n          breadcrumbs={<Breadcrumbs items={[\n            { key: \"home\", label: \"Home\", href: \"/\" },\n            { key: \"dashboard\", label: \"Dashboard\", current: true },\n          ]} />}\n          actions={<Button variant=\"outline\" size=\"sm\">Manage</Button>}\n        />\n        <div className=\"mt-4\">\n          <MetricGrid items={metrics} compact />\n        </div>\n      </PageContainer>\n    </AppShell>\n  )\n}",
+	cliCommand: "npx tembro add app-shell",
+	highlights: [
+		"Shell slots (header, sidebar, aside)",
+		"Static and mobile sidebar behavior",
+		"Breadcrumbs inside page header",
+		"Metric block composition"
+	],
+	relatedBlockSlugs: [
+		"dashboard-starter",
+		"crm-dashboard",
+		"settings-form"
+	],
+	scenarios: [
+		{
+			title: "Dashboard shell",
+			description: "Build an app frame with reusable header, sidebar and aside areas."
+		},
+		{
+			title: "Router-aware layout",
+			description: "Keep navigation and route content separated by region for SPA and SSR pages."
+		},
+		{
+			title: "Mobile fallback",
+			description: "Toggle mobile menu and keep aside optional for narrow screens."
+		}
+	],
+	capabilityNotes: [
+		"Use AppShell when every page shares a stable structure: header, sidebar, main and optional aside.",
+		"Keep sidebar composition explicit so route-level content stays predictable and testable.",
+		"Pass controlled `sidebarCollapsed` and `mobileSidebarOpen` when app state is owned by a global layout manager.",
+		"Avoid overloading the aside region in mobile contexts; hide non-essential context when needed."
+	]
+};
+//#endregion
+export { e as appShellMock };

package/dist/showcase/premium/app-shell/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/ui/badge/index.cjs"),r=require("../../../components/layout/app-sidebar.cjs"),i=require("../../../components/layout/breadcrumbs.cjs"),a=require("../../../components/layout/page-container.cjs"),o=require("../../../components/layout/sidebar-nav.cjs"),s=require("../../../components/display/metric-grid.cjs"),c=require("../../../components/display/smart-card.cjs"),l=require("../../../components/layout/app-header.cjs"),u=require("../../../components/layout/page-header.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=[{key:`overview`,label:`Overview`,href:`#overview`},{key:`products`,label:`Products`,href:`#products`},{key:`billing`,label:`Billing`,href:`#billing`},{key:`settings`,label:`Settings`,href:`#settings`}],m=[{key:`mrr`,label:`MRR`,value:`$64k`,description:`11% vs last week`,tone:`success`},{key:`users`,label:`Users`,value:`1,020`,description:`3% churn risk`,tone:`warning`},{key:`tasks`,label:`Tasks`,value:`58`,description:`5 in progress`,tone:`info`},{key:`response`,label:`Latency`,value:`1.2s`,description:`P95 API response`,tone:`default`}];function h({mode:e}){let[h,g]=d.useState(`overview`),[_,v]=d.useState(!1),y=p.map(e=>({...e,active:e.key===h,onSelect:()=>g(e.key)})),b=p.find(e=>e.key===h)?.label??`Overview`;return(0,f.jsxs)(`div`,{className:`space-y-5`,children:[(0,f.jsx)(`div`,{className:`rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5`,children:(0,f.jsxs)(`div`,{className:`flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between`,children:[(0,f.jsxs)(`div`,{className:`max-w-xl`,children:[(0,f.jsx)(`p`,{className:`text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted`,children:`Application frame`}),(0,f.jsx)(`h3`,{className:`mt-3 text-2xl font-semibold tracking-tight aui-text-strong`,children:`Reusable shell preview`}),(0,f.jsx)(`p`,{className:`mt-3 text-sm leading-6 aui-text-muted`,children:`Header, sidebar, main content and aside should feel like one predictable route frame.`})]}),(0,f.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,f.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Header`}),(0,f.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Sidebar`}),(0,f.jsx)(n.Badge,{variant:`outline`,className:`rounded-full`,children:`Aside`})]})]})}),e===`playground`?(0,f.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:(0,f.jsx)(t.Button,{size:`sm`,variant:_?`outline`:`default`,onClick:()=>v(e=>!e),children:_?`Expand sidebar`:`Collapse sidebar`})}):null,(0,f.jsxs)(`div`,{className:`overflow-hidden rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]`,children:[(0,f.jsx)(l.AppHeader,{className:`border-b border-[color:var(--aui-divider)] px-4 py-3`,left:`Product shell`,right:(0,f.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Profile`})}),(0,f.jsxs)(`div`,{className:`grid min-h-[420px] lg:grid-cols-[250px_minmax(0,1fr)_260px]`,children:[(0,f.jsx)(r.AppSidebar,{className:_?`hidden lg:block`:``,header:(0,f.jsx)(`div`,{className:`px-3 py-2 text-sm font-semibold`,children:`AZA Studio`}),footer:(0,f.jsx)(`div`,{className:`aui-text-muted px-3 py-2 text-xs`,children:`Shell footer`}),children:(0,f.jsx)(o.SidebarNav,{items:y})}),(0,f.jsx)(`div`,{className:`min-w-0 border-x border-[color:var(--aui-divider)] p-4`,children:(0,f.jsxs)(a.PageContainer,{size:`lg`,children:[(0,f.jsx)(u.PageHeader,{eyebrow:`Workspace`,title:b,description:`Use shared shell primitives to keep regions stable across routes.`,breadcrumbs:(0,f.jsx)(i.Breadcrumbs,{items:[{key:`home`,label:`Home`,href:`/`},{key:`components`,label:`Components`,href:`/components`},{key:`active`,label:b,current:!0}]}),actions:(0,f.jsx)(t.Button,{size:`sm`,children:`Manage`})}),(0,f.jsx)(`div`,{className:`mt-4`,children:(0,f.jsx)(s.MetricGrid,{items:m,columns:2,compact:!0})})]})}),(0,f.jsx)(`aside`,{className:`hidden p-4 lg:block`,children:(0,f.jsx)(c.SmartCard,{title:`Quick actions`,description:`Support content can live in the aside.`,compact:!0})})]})]})]})}exports.AppShellShowcase=h;

package/dist/showcase/premium/app-shell/showcase.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { ComponentDemoProps } from "../types";
+export declare function AppShellShowcase({ mode }: ComponentDemoProps): React.JSX.Element;

package/dist/showcase/premium/app-shell/showcase.js

@@ -0,0 +1,204 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { Badge as t } from "../../../components/ui/badge/index.js";
+import { AppSidebar as n } from "../../../components/layout/app-sidebar.js";
+import { Breadcrumbs as r } from "../../../components/layout/breadcrumbs.js";
+import { PageContainer as i } from "../../../components/layout/page-container.js";
+import { SidebarNav as a } from "../../../components/layout/sidebar-nav.js";
+import { MetricGrid as o } from "../../../components/display/metric-grid.js";
+import { SmartCard as s } from "../../../components/display/smart-card.js";
+import { AppHeader as c } from "../../../components/layout/app-header.js";
+import { PageHeader as l } from "../../../components/layout/page-header.js";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/showcase/premium/app-shell/showcase.tsx
+var p = [
+	{
+		key: "overview",
+		label: "Overview",
+		href: "#overview"
+	},
+	{
+		key: "products",
+		label: "Products",
+		href: "#products"
+	},
+	{
+		key: "billing",
+		label: "Billing",
+		href: "#billing"
+	},
+	{
+		key: "settings",
+		label: "Settings",
+		href: "#settings"
+	}
+], m = [
+	{
+		key: "mrr",
+		label: "MRR",
+		value: "$64k",
+		description: "11% vs last week",
+		tone: "success"
+	},
+	{
+		key: "users",
+		label: "Users",
+		value: "1,020",
+		description: "3% churn risk",
+		tone: "warning"
+	},
+	{
+		key: "tasks",
+		label: "Tasks",
+		value: "58",
+		description: "5 in progress",
+		tone: "info"
+	},
+	{
+		key: "response",
+		label: "Latency",
+		value: "1.2s",
+		description: "P95 API response",
+		tone: "default"
+	}
+];
+function h({ mode: h }) {
+	let [g, _] = u.useState("overview"), [v, y] = u.useState(!1), b = p.map((e) => ({
+		...e,
+		active: e.key === g,
+		onSelect: () => _(e.key)
+	})), x = p.find((e) => e.key === g)?.label ?? "Overview";
+	return /* @__PURE__ */ f("div", {
+		className: "space-y-5",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5",
+				children: /* @__PURE__ */ f("div", {
+					className: "flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between",
+					children: [/* @__PURE__ */ f("div", {
+						className: "max-w-xl",
+						children: [
+							/* @__PURE__ */ d("p", {
+								className: "text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted",
+								children: "Application frame"
+							}),
+							/* @__PURE__ */ d("h3", {
+								className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
+								children: "Reusable shell preview"
+							}),
+							/* @__PURE__ */ d("p", {
+								className: "mt-3 text-sm leading-6 aui-text-muted",
+								children: "Header, sidebar, main content and aside should feel like one predictable route frame."
+							})
+						]
+					}), /* @__PURE__ */ f("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ d(t, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Header"
+							}),
+							/* @__PURE__ */ d(t, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Sidebar"
+							}),
+							/* @__PURE__ */ d(t, {
+								variant: "outline",
+								className: "rounded-full",
+								children: "Aside"
+							})
+						]
+					})]
+				})
+			}),
+			h === "playground" ? /* @__PURE__ */ d("div", {
+				className: "flex flex-wrap gap-3",
+				children: /* @__PURE__ */ d(e, {
+					size: "sm",
+					variant: v ? "outline" : "default",
+					onClick: () => y((e) => !e),
+					children: v ? "Expand sidebar" : "Collapse sidebar"
+				})
+			}) : null,
+			/* @__PURE__ */ f("div", {
+				className: "overflow-hidden rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)]",
+				children: [/* @__PURE__ */ d(c, {
+					className: "border-b border-[color:var(--aui-divider)] px-4 py-3",
+					left: "Product shell",
+					right: /* @__PURE__ */ d(e, {
+						size: "sm",
+						variant: "outline",
+						children: "Profile"
+					})
+				}), /* @__PURE__ */ f("div", {
+					className: "grid min-h-[420px] lg:grid-cols-[250px_minmax(0,1fr)_260px]",
+					children: [
+						/* @__PURE__ */ d(n, {
+							className: v ? "hidden lg:block" : "",
+							header: /* @__PURE__ */ d("div", {
+								className: "px-3 py-2 text-sm font-semibold",
+								children: "AZA Studio"
+							}),
+							footer: /* @__PURE__ */ d("div", {
+								className: "aui-text-muted px-3 py-2 text-xs",
+								children: "Shell footer"
+							}),
+							children: /* @__PURE__ */ d(a, { items: b })
+						}),
+						/* @__PURE__ */ d("div", {
+							className: "min-w-0 border-x border-[color:var(--aui-divider)] p-4",
+							children: /* @__PURE__ */ f(i, {
+								size: "lg",
+								children: [/* @__PURE__ */ d(l, {
+									eyebrow: "Workspace",
+									title: x,
+									description: "Use shared shell primitives to keep regions stable across routes.",
+									breadcrumbs: /* @__PURE__ */ d(r, { items: [
+										{
+											key: "home",
+											label: "Home",
+											href: "/"
+										},
+										{
+											key: "components",
+											label: "Components",
+											href: "/components"
+										},
+										{
+											key: "active",
+											label: x,
+											current: !0
+										}
+									] }),
+									actions: /* @__PURE__ */ d(e, {
+										size: "sm",
+										children: "Manage"
+									})
+								}), /* @__PURE__ */ d("div", {
+									className: "mt-4",
+									children: /* @__PURE__ */ d(o, {
+										items: m,
+										columns: 2,
+										compact: !0
+									})
+								})]
+							})
+						}),
+						/* @__PURE__ */ d("aside", {
+							className: "hidden p-4 lg:block",
+							children: /* @__PURE__ */ d(s, {
+								title: "Quick actions",
+								description: "Support content can live in the aside.",
+								compact: !0
+							})
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { h as AppShellShowcase };

package/dist/showcase/premium/app-sidebar/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.AppSidebarShowcase=e.AppSidebarShowcase,exports.appSidebarMock=t.appSidebarMock;

package/dist/showcase/premium/app-sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { AppSidebarShowcase } from "./showcase";
+export { appSidebarMock } from "./mock";

package/dist/showcase/premium/app-sidebar/index.js

@@ -0,0 +1,3 @@
+import { AppSidebarShowcase as e } from "./showcase.js";
+import { appSidebarMock as t } from "./mock.js";
+export { e as AppSidebarShowcase, t as appSidebarMock };