tembro 1.0.0

package/packages/cli/vendor/src/showcase/families/inputs/data.ts

@@ -0,0 +1,40 @@
+export type WorkspaceOption = {
+  value: string
+  label: string
+  description: string
+  data: {
+    team: string
+    status: "Live" | "Draft" | "Review"
+  }
+}
+
+export const workspaceOptions: WorkspaceOption[] = [
+  { value: "acme-dashboard", label: "Acme Dashboard", description: "Core analytics workspace", data: { team: "Growth", status: "Live" } },
+  { value: "crm-workspace", label: "CRM Workspace", description: "Deals and pipeline control", data: { team: "Sales", status: "Review" } },
+  { value: "store-command", label: "Store Command", description: "Commerce operations shell", data: { team: "Commerce", status: "Live" } },
+  { value: "finance-dock", label: "Finance Dock", description: "Billing and payout center", data: { team: "Finance", status: "Draft" } },
+  { value: "creator-hub", label: "Creator Hub", description: "Content and campaign surface", data: { team: "Marketing", status: "Live" } },
+  { value: "ops-center", label: "Ops Center", description: "Internal service operations", data: { team: "Operations", status: "Review" } },
+]
+
+export const defaultWorkspaceGroups = [
+  {
+    label: "Pinned",
+    options: workspaceOptions.slice(0, 2),
+  },
+  {
+    label: "All workspaces",
+    options: workspaceOptions.slice(2),
+  },
+]
+
+export const environmentOptions = [
+  { value: "production", label: "Production", description: "Public customer-facing traffic", keywords: ["prod", "live"] },
+  { value: "staging", label: "Staging", description: "Pre-release QA and review", keywords: ["preview", "qa"] },
+  { value: "development", label: "Development", description: "Internal local build flow", keywords: ["dev", "sandbox"] },
+]
+
+export const densityOptions = [
+  { value: "comfortable", label: "Comfortable" },
+  { value: "compact", label: "Compact" },
+]

package/packages/cli/vendor/src/showcase/families/inputs/index.ts

@@ -0,0 +1,2 @@
+export { InputsFamilyShowcase } from "./showcase"
+export { inputsFamilyMock } from "./mock"

package/packages/cli/vendor/src/showcase/families/inputs/mock.ts

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const inputsFamilyMock: FamilyDemoMock = {
+  code: `import { AsyncSelect, AsyncMultiSelect } from "tembro"\n\nexport function Example() {\n  return <AsyncSelect loadOptions={loadOptions} />\n}`,
+  highlights: ["AsyncSelect hydration", "AsyncMultiSelect limits", "Create option flow", "Grouped remote results"],
+  scenarios: [
+    { title: "Workspace switching", description: "Load large remote workspace lists without blocking the form shell." },
+    { title: "Linked module setup", description: "Attach multiple modules with max selection and select-all rules." },
+    { title: "Editable resource forms", description: "Hydrate saved values back into async inputs on edit routes." },
+  ],
+  metrics: [
+    { label: "Exports", value: "14" },
+    { label: "Async flows", value: "6+" },
+    { label: "Status", value: "Stable" },
+  ],
+}
+
+

package/packages/cli/vendor/src/showcase/families/inputs/showcase.tsx

@@ -0,0 +1,294 @@
+import * as React from "react"
+
+import {
+  AsyncMultiSelect,
+  AsyncSelect,
+  Badge,
+  Button,
+  SimpleSelect,
+  Textarea,
+} from "@/index"
+
+import type { FamilyDemoProps } from "../types"
+
+import {
+  defaultWorkspaceGroups,
+  densityOptions,
+  environmentOptions,
+  workspaceOptions,
+  type WorkspaceOption,
+} from "./data"
+
+export function InputsFamilyShowcase({ state, setState }: FamilyDemoProps) {
+  const [mode, setMode] = React.useState<"default" | "error" | "strict">("default")
+  const [singleValue, setSingleValue] = React.useState<string | undefined>("acme-dashboard")
+  const [singleOption, setSingleOption] = React.useState<WorkspaceOption | null>(workspaceOptions[0])
+  const [multiValue, setMultiValue] = React.useState<string[]>(["crm-workspace", "store-command"])
+  const [multiOptions, setMultiOptions] = React.useState<WorkspaceOption[]>([workspaceOptions[1], workspaceOptions[2]])
+  const [environment, setEnvironment] = React.useState<string | undefined>("production")
+
+  const loadOptions = React.useCallback(
+    async (search: string) => {
+      await new Promise((resolve) => window.setTimeout(resolve, 320))
+
+      if (mode === "error") {
+        throw new Error("Failed to load")
+      }
+
+      const query = search.trim().toLowerCase()
+      const filtered = workspaceOptions.filter((item) =>
+        [item.label, item.description, item.data.team, item.data.status].join(" ").toLowerCase().includes(query)
+      )
+
+      if (!query) return defaultWorkspaceGroups
+      return [{ label: "Search results", options: filtered }]
+    },
+    [mode]
+  )
+
+  const loadSelectedOption = React.useCallback(async (value: string) => {
+    await new Promise((resolve) => window.setTimeout(resolve, 120))
+    return workspaceOptions.find((item) => item.value === value) ?? null
+  }, [])
+
+  const loadSelectedOptions = React.useCallback(async (values: string[]) => {
+    await new Promise((resolve) => window.setTimeout(resolve, 120))
+    return workspaceOptions.filter((item) => values.includes(item.value))
+  }, [])
+
+  const activeSingle = singleOption ?? workspaceOptions.find((item) => item.value === singleValue) ?? null
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+        <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
+          <div className="space-y-3">
+            <div className="flex flex-wrap gap-2">
+              <Badge variant="outline">AsyncSelect</Badge>
+              <Badge variant="outline">AsyncMultiSelect</Badge>
+              <Badge variant="outline">SimpleSelect</Badge>
+              <Badge variant="outline">{mode === "strict" ? "Min search 2" : mode === "error" ? "Error mode" : "Default mode"}</Badge>
+            </div>
+            <div>
+              <p className="aui-text-strong text-sm font-medium">Select family coverage</p>
+              <p className="aui-text-muted mt-1 text-sm leading-6">
+                Static select, async search, hydrated edit mode, create flow, multiselect limits, clear actions and selection summaries all stay visible here.
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button variant={mode === "default" ? "default" : "outline"} size="sm" onClick={() => setMode("default")}>Default</Button>
+            <Button variant={mode === "strict" ? "default" : "outline"} size="sm" onClick={() => setMode("strict")}>Strict</Button>
+            <Button variant={mode === "error" ? "default" : "outline"} size="sm" onClick={() => setMode("error")}>Error</Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setMode("default")
+                setSingleValue("acme-dashboard")
+                setSingleOption(workspaceOptions[0])
+                setMultiValue(["crm-workspace", "store-command"])
+                setMultiOptions([workspaceOptions[1], workspaceOptions[2]])
+                setEnvironment("production")
+              }}
+            >
+              Reset
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-[1.12fr_0.88fr]">
+        <div className="space-y-4">
+          <div className="grid gap-4 xl:grid-cols-2">
+            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+              <p className="aui-text-strong text-sm font-medium">Simple select</p>
+              <p className="aui-text-muted mt-1 text-sm leading-6">Static option set with search and clear action for lightweight forms.</p>
+              <div className="mt-4">
+                <SimpleSelect
+                  value={environment}
+                  onValueChange={(value) => {
+                    setEnvironment(value)
+                    setState({ notes: `${value ?? "No environment"} selected for deploy routing.` })
+                  }}
+                  options={environmentOptions}
+                  placeholder="Choose environment"
+                  searchable
+                  clearable
+                />
+              </div>
+            </div>
+
+            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+              <p className="aui-text-strong text-sm font-medium">Single async select</p>
+              <p className="aui-text-muted mt-1 text-sm leading-6">Hydrate selected value, search grouped results and create custom workspace.</p>
+              <div className="mt-4">
+                <AsyncSelect<string, WorkspaceOption["data"], WorkspaceOption>
+                  value={singleValue}
+                  selectedOption={singleOption}
+                  onValueChange={(value, option) => {
+                    setSingleValue(value)
+                    setSingleOption(option ?? null)
+                    setState({ notes: `${option?.label ?? "Selection cleared"} connected to downstream workspace flow.` })
+                  }}
+                  loadOptions={loadOptions}
+                  loadSelectedOption={loadSelectedOption}
+                  defaultOptions={defaultWorkspaceGroups}
+                  minSearchLength={mode === "strict" ? 2 : 0}
+                  cacheOptions
+                  clearable
+                  labels={{
+                    placeholder: "Select workspace",
+                    searchPlaceholder: "Search workspaces...",
+                    loading: "Loading workspaces...",
+                    error: "Could not load workspaces",
+                    empty: "No workspace found",
+                    minSearchLength: (length) => `Type at least ${length} characters`,
+                  }}
+                  renderValue={(option) => (
+                    <span className="inline-flex min-w-0 flex-col text-left">
+                      <span className="truncate">{option.label}</span>
+                      <span className="aui-text-muted truncate text-xs">{option.data.team}</span>
+                    </span>
+                  )}
+                  renderOption={(option, optionState) => (
+                    <span className="flex min-w-0 items-start justify-between gap-3">
+                      <span className="min-w-0">
+                        <span className="block truncate font-medium">{option.label}</span>
+                        <span className="aui-text-muted block truncate text-xs">{option.description}</span>
+                      </span>
+                      <span className={optionState.selected ? "rounded-full aui-surface-strong px-2 py-0.5 text-[11px]" : "rounded-full bg-[color:var(--aui-page-bg-alt)] px-2 py-0.5 text-[11px] aui-text-strong"}>
+                        {option.data.status}
+                      </span>
+                    </span>
+                  )}
+                  onCreateOption={(search) => ({
+                    value: search.trim().toLowerCase().replace(/\s+/g, "-"),
+                    label: search.trim(),
+                    description: "Created from the current route",
+                    data: { team: "Custom", status: "Draft" },
+                  })}
+                  createOptionLabel={(search) => `Create workspace "${search}"`}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+            <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+              <div>
+                <p className="aui-text-strong text-sm font-medium">Async multi select</p>
+                <p className="aui-text-muted mt-1 text-sm leading-6">Select all visible options, cap selection count and keep tag removal independent from trigger open state.</p>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Badge variant="outline">{multiValue.length} linked</Badge>
+                <Badge variant="outline">Max 3</Badge>
+                <Badge variant="outline">Select visible</Badge>
+              </div>
+            </div>
+            <div className="mt-4">
+              <AsyncMultiSelect<string, WorkspaceOption["data"], WorkspaceOption>
+                value={multiValue}
+                selectedOptions={multiOptions}
+                onValueChange={(value, options) => {
+                  setMultiValue(value)
+                  setMultiOptions(options)
+                  setState({ notes: `${options.length} linked modules attached to the workspace form.` })
+                }}
+                loadOptions={loadOptions}
+                loadSelectedOptions={loadSelectedOptions}
+                defaultOptions={defaultWorkspaceGroups}
+                minSearchLength={mode === "strict" ? 2 : 0}
+                maxSelected={3}
+                showSelectAll
+                clearable
+                labels={{
+                  placeholder: "Attach modules",
+                  searchPlaceholder: "Search modules...",
+                  loading: "Loading modules...",
+                  error: "Could not load modules",
+                  empty: "No module found",
+                  clearAll: "Clear all",
+                  selectAll: "Select visible",
+                  selectedCount: (count) => `${count} selected`,
+                  maxSelected: (count) => `Maximum ${count} modules`,
+                  minSearchLength: (length) => `Type at least ${length} characters`,
+                }}
+                renderOption={(option) => (
+                  <span className="flex min-w-0 items-start justify-between gap-3">
+                    <span className="min-w-0">
+                      <span className="block truncate font-medium">{option.label}</span>
+                      <span className="aui-text-muted block truncate text-xs">{option.data.team}</span>
+                    </span>
+                    <span className="aui-text-muted text-[11px]">{option.data.status}</span>
+                  </span>
+                )}
+              />
+            </div>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-3">
+            {[
+              {
+                title: "Row-safe clear",
+                body: "Clear icons and tag remove actions stay isolated from the parent trigger or row click surface.",
+              },
+              {
+                title: "Hydrated edit mode",
+                body: "Selected values can be restored from remote data without forcing the full option list to preload.",
+              },
+              {
+                title: "Large option sets",
+                body: "Use async search when a plain select would overload the route or the user needs remote filtering.",
+              },
+            ].map((item) => (
+              <div key={item.title} className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+                <p className="aui-text-strong text-sm font-medium">{item.title}</p>
+                <p className="aui-text-subtle mt-2 text-sm leading-6">{item.body}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-4 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+          <Textarea value={state.notes} onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => setState({ notes: event.target.value })} className="min-h-24" />
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-1">
+            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4">
+              <p className="aui-text-muted text-sm">Mode</p>
+              <p className="aui-text-strong mt-2 text-lg font-semibold">{mode}</p>
+              <p className="aui-text-strong mt-2 text-sm">
+                {mode === "error" ? "Forces renderError state." : mode === "strict" ? "Requires min search before loading." : "Immediate async search with grouped defaults."}
+              </p>
+            </div>
+            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4">
+              <p className="aui-text-muted text-sm">Selected workspace</p>
+              <p className="aui-text-strong mt-2 text-lg font-semibold">{activeSingle?.label ?? "Nothing selected"}</p>
+              <p className="aui-text-subtle mt-2 text-sm">{activeSingle?.description ?? "Choose a workspace to hydrate its shell."}</p>
+            </div>
+            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4">
+              <p className="aui-text-muted text-sm">Linked modules</p>
+              <p className="aui-text-strong mt-2 text-lg font-semibold">{multiValue.length} attached</p>
+              <p className="aui-text-subtle mt-2 text-sm">Tags, clear all and select visible stay synchronized with controlled value state.</p>
+            </div>
+            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4">
+              <p className="aui-text-muted text-sm">Environment</p>
+              <p className="aui-text-strong mt-2 text-lg font-semibold">{environmentOptions.find((item) => item.value === environment)?.label ?? "Not selected"}</p>
+              <p className="aui-text-subtle mt-2 text-sm">SimpleSelect covers the static branch of the same select family.</p>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {["grouped", "hydration", "create-option", "multi-select", "clearable", "searchable"].map((tag) => (
+              <Badge key={tag} variant="outline">{tag}</Badge>
+            ))}
+          </div>
+          <SimpleSelect
+            value={state.density}
+            onValueChange={(value) => setState({ density: (value as FamilyDemoProps["state"]["density"] | undefined) ?? "comfortable" })}
+            options={densityOptions}
+            placeholder="Preview density"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/families/layout/index.ts

@@ -0,0 +1,2 @@
+export { LayoutFamilyShowcase } from "./showcase"
+export { layoutFamilyMock } from "./mock"

package/packages/cli/vendor/src/showcase/families/layout/mock.ts

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const layoutFamilyMock: FamilyDemoMock = {
+  code: `import { AppShell, AppHeader, AppSidebar, PageHeader, StatCard } from "tembro"\n\nexport function Example() {\n  return <AppShell />\n}`,
+  highlights: ["App shell composition", "Sidebar navigation", "Page headers", "Dashboard stat surfaces"],
+  scenarios: [
+    { title: "Admin workspace", description: "Combine shell, sidebar and stat cards into a dense admin product." },
+    { title: "Analytics overview", description: "Use cards and page headers to structure KPI-heavy screens." },
+    { title: "Nested navigation", description: "Keep route context visible with breadcrumbs and section headers." },
+  ],
+  metrics: [
+    { label: "Exports", value: "8" },
+    { label: "Layouts", value: "3" },
+    { label: "Status", value: "Stable" },
+  ],
+}
+
+

package/packages/cli/vendor/src/showcase/families/layout/showcase.tsx

@@ -0,0 +1,57 @@
+import type { ChangeEvent } from "react"
+
+import { Badge, Button, Input } from "@/index"
+
+import type { FamilyDemoProps } from "../types"
+
+export function LayoutFamilyShowcase({ state, setState }: FamilyDemoProps) {
+  return (
+    <div className="grid gap-4 xl:grid-cols-[0.24fr_1fr]">
+      <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] p-4">
+        {["Overview", "Analytics", "Customers", "Orders", "Settings"].map((item, index) => (
+          <div key={item} className={`mb-2 rounded-xl px-3 py-2.5 text-sm ${index === 0 ? "aui-surface-strong" : "bg-[color:var(--aui-surface)] aui-text-muted"}`}>
+            {item}
+          </div>
+        ))}
+      </div>
+      <div className="space-y-4">
+        <div className="flex flex-col gap-4 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4 md:flex-row md:items-center md:justify-between">
+          <div>
+            <p className="text-2xl font-semibold tracking-tight">Revenue overview</p>
+            <p className="aui-text-muted text-sm">Structured layout with reusable surface hierarchy.</p>
+          </div>
+          <div className="flex gap-3">
+            <Input value={state.search} onChange={(event: ChangeEvent<HTMLInputElement>) => setState({ search: event.target.value })} placeholder="Search workspace..." className="w-48" />
+            <Button>New report</Button>
+          </div>
+        </div>
+        <div className="grid gap-4 md:grid-cols-3">
+          {[
+            ["Revenue", "$24,780"],
+            ["Active users", "18,390"],
+            ["Conversion", "6.3%"],
+          ].map(([label, value]) => (
+            <div key={label} className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+              <p className="aui-text-muted text-sm">{label}</p>
+              <p className="mt-2 text-3xl font-semibold tracking-tight">{value}</p>
+              <Badge className="mt-3 rounded-full bg-emerald-50 text-emerald-700 hover:bg-emerald-50">Live</Badge>
+            </div>
+          ))}
+        </div>
+        <div className="grid gap-4 md:grid-cols-[1fr_0.38fr]">
+          <div className="h-48 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[linear-gradient(180deg,rgba(59,130,246,0.12),transparent),radial-gradient(circle_at_bottom_left,rgba(34,197,94,0.18),transparent_40%)]" />
+          <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+            <p className="font-medium">Recent updates</p>
+            <div className="aui-text-muted mt-4 space-y-3 text-sm">
+              <div>Dashboard tokens synced</div>
+              <div>Sidebar nav refreshed</div>
+              <div>Header metrics updated</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+

package/packages/cli/vendor/src/showcase/families/navigation/index.ts

@@ -0,0 +1,2 @@
+export { NavigationFamilyShowcase } from "./showcase"
+export { navigationFamilyMock } from "./mock"

package/packages/cli/vendor/src/showcase/families/navigation/mock.ts

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const navigationFamilyMock: FamilyDemoMock = {
+  code: `import { Pagination, PageTabs, StepperTabs } from "tembro"\n\nexport function Example() {\n  return <Pagination />\n}`,
+  highlights: ["Pagination controls", "Page tabs", "Stepper tabs", "Route-aware segmentation"],
+  scenarios: [
+    { title: "Paged reports", description: "Move through dense result sets with explicit page state." },
+    { title: "Section tabs", description: "Segment detail pages into clear content groups." },
+    { title: "Stepper flow", description: "Represent ordered multi-stage progress in navigation." },
+  ],
+  metrics: [
+    { label: "Exports", value: "3" },
+    { label: "Navigation modes", value: "3" },
+    { label: "Status", value: "Stable" },
+  ],
+}
+
+

package/packages/cli/vendor/src/showcase/families/navigation/showcase.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@/index"
+
+import type { FamilyDemoProps } from "../types"
+
+export function NavigationFamilyShowcase({ state, setState }: FamilyDemoProps) {
+  const pages = [1, 2, 3, 8]
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-3">
+        {["Overview", "Analytics", "Reports"].map((item, index) => (
+          <button key={item} className={`rounded-2xl border px-5 py-3 text-sm ${index === 0 ? "aui-surface-strong border-[color:var(--aui-surface-strong)]" : "aui-text-muted border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"}`}>
+            {item}
+          </button>
+        ))}
+      </div>
+      <div className="flex items-center justify-between rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-4 py-3">
+        <Button variant="outline" size="sm" onClick={() => setState({ step: Math.max(1, state.step - 1) })}>Prev</Button>
+        <div className="flex gap-2">
+          {pages.map((page) => (
+            <button key={page} onClick={() => setState({ step: page === 8 ? 4 : page })} className={`rounded-xl border px-4 py-2 text-sm ${state.step === (page === 8 ? 4 : page) ? "aui-surface-strong border-[color:var(--aui-surface-strong)]" : "aui-text-muted border-[color:var(--aui-surface-border)]"}`}>
+              {page}
+            </button>
+          ))}
+        </div>
+        <Button size="sm" onClick={() => setState({ step: Math.min(4, state.step + 1) })}>Next</Button>
+      </div>
+    </div>
+  )
+}
+

package/packages/cli/vendor/src/showcase/families/notifications/index.ts

@@ -0,0 +1,2 @@
+export { NotificationsFamilyShowcase } from "./showcase"
+export { notificationsFamilyMock } from "./mock"

package/packages/cli/vendor/src/showcase/families/notifications/mock.ts

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const notificationsFamilyMock: FamilyDemoMock = {
+  code: `import { Toast } from "tembro"\n\nexport function Example() {\n  return <Toast />\n}`,
+  highlights: ["Toast messages", "Transient feedback", "Success and warning states", "Async completion"],
+  scenarios: [
+    { title: "Success feedback", description: "Acknowledge completed actions without interrupting the user." },
+    { title: "Warning states", description: "Surface short-lived problems or validation reminders." },
+    { title: "Background jobs", description: "Notify users when async tasks finish." },
+  ],
+  metrics: [
+    { label: "Exports", value: "1" },
+    { label: "Modes", value: "Success + warning" },
+    { label: "Status", value: "Preview" },
+  ],
+}
+
+

package/packages/cli/vendor/src/showcase/families/notifications/showcase.tsx

@@ -0,0 +1,24 @@
+import { Badge, Button } from "@/index"
+
+export function NotificationsFamilyShowcase() {
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      <div className="aui-status-success rounded-[22px] p-4">
+        <div className="flex items-center justify-between">
+          <p className="font-medium">Changes saved</p>
+          <Badge variant="secondary">Success</Badge>
+        </div>
+        <p className="mt-2 text-sm">Your workspace updates have been published successfully.</p>
+      </div>
+      <div className="aui-status-warning rounded-[22px] p-4">
+        <div className="flex items-center justify-between">
+          <p className="font-medium">Review needed</p>
+          <Badge variant="outline">Warning</Badge>
+        </div>
+        <p className="mt-2 text-sm">Two components still need accessibility review before release.</p>
+        <Button variant="outline" className="mt-4">Open review queue</Button>
+      </div>
+    </div>
+  )
+}
+

package/packages/cli/vendor/src/showcase/families/overlay/index.ts

@@ -0,0 +1,2 @@
+export { OverlayFamilyShowcase } from "./showcase"
+export { overlayFamilyMock } from "./mock"

package/packages/cli/vendor/src/showcase/families/overlay/mock.ts

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const overlayFamilyMock: FamilyDemoMock = {
+  code: `import { ConfirmDialog, ModalShell, SheetShell } from "tembro"\n\nexport function Example() {\n  return <ConfirmDialog />\n}`,
+  highlights: ["Confirm dialogs", "Sheet surfaces", "Modal actions", "Focused flows"],
+  scenarios: [
+    { title: "Deletion confirm", description: "Protect destructive actions with explicit confirmation." },
+    { title: "Edit sheet", description: "Slide contextual editing surfaces without leaving the page." },
+    { title: "Compact modal", description: "Collect short forms in a focused overlay." },
+  ],
+  metrics: [
+    { label: "Exports", value: "4" },
+    { label: "Surfaces", value: "Dialog + sheet" },
+    { label: "Status", value: "Stable" },
+  ],
+}
+
+

package/packages/cli/vendor/src/showcase/families/overlay/showcase.tsx

@@ -0,0 +1,23 @@
+import { Badge, Button } from "@/index"
+
+export function OverlayFamilyShowcase() {
+  return (
+    <div className="grid gap-4 md:grid-cols-3">
+      {[
+        ["Confirm dialog", "Irreversible actions with strong intent and footer controls."],
+        ["Edit sheet", "Context-aware panel for quick updates and side tasks."],
+        ["Modal shell", "Focused overlay for short forms and approvals."],
+      ].map(([title, text], index) => (
+        <div key={title} className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-5">
+          <div className="flex items-center justify-between">
+            <p className="aui-text-strong text-lg font-semibold">{title}</p>
+            <Badge variant={index === 0 ? "destructive" : "outline"}>{index === 0 ? "Confirm" : "Overlay"}</Badge>
+          </div>
+          <p className="aui-text-muted mt-3 text-sm leading-6">{text}</p>
+          <Button className="mt-4 w-full">{index === 0 ? "Open confirm" : index === 1 ? "Open sheet" : "Open modal"}</Button>
+        </div>
+      ))}
+    </div>
+  )
+}
+

package/packages/cli/vendor/src/showcase/families/patterns/index.ts

@@ -0,0 +1,2 @@
+export { PatternsFamilyShowcase } from "./showcase"
+export { patternsFamilyMock } from "./mock"

package/packages/cli/vendor/src/showcase/families/patterns/mock.ts

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const patternsFamilyMock: FamilyDemoMock = {
+  code: `import { ResourcePage, ResourceDetailPage, FormBuilder } from "tembro"\n\nexport function Example() {\n  return <ResourcePage />\n}`,
+  highlights: ["Resource pages", "Detail layouts", "Form builder presets", "Composed product patterns"],
+  scenarios: [
+    { title: "CMS resource page", description: "List, filter and inspect resources in a pattern-driven layout." },
+    { title: "Detail view", description: "Break detail screens into overview, activity and settings content." },
+    { title: "Form builder", description: "Generate field structures from reusable form presets." },
+  ],
+  metrics: [
+    { label: "Exports", value: "4" },
+    { label: "Pattern types", value: "Page + builder" },
+    { label: "Status", value: "Stable" },
+  ],
+}
+
+

package/packages/cli/vendor/src/showcase/families/patterns/showcase.tsx

@@ -0,0 +1,23 @@
+import { Badge, Button } from "@/index"
+
+export function PatternsFamilyShowcase() {
+  return (
+    <div className="grid gap-4 md:grid-cols-3">
+      {[
+        ["Resource page", "List-heavy surface with filters, cards and actions."],
+        ["Detail page", "Focused record view with modular content blocks."],
+        ["Form builder", "Preset-driven field composer for internal tools."],
+      ].map(([title, text], index) => (
+        <div key={title} className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-5">
+          <div className="flex items-center justify-between">
+            <p className="aui-text-strong text-lg font-semibold">{title}</p>
+            <Badge variant={index === 2 ? "secondary" : "outline"}>{index === 2 ? "Preset" : "Pattern"}</Badge>
+          </div>
+          <p className="aui-text-muted mt-3 text-sm leading-6">{text}</p>
+          <Button className="mt-4 w-full">{index === 0 ? "Open resources" : index === 1 ? "Open detail" : "Open builder"}</Button>
+        </div>
+      ))}
+    </div>
+  )
+}
+