tembro 1.0.0

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

@@ -0,0 +1,113 @@
+import * as React from "react"
+import { ActivityIcon, CheckCircle2Icon, FolderIcon } from "lucide-react"
+
+import { Badge, EntityCard, FileCard, InfoCard } from "@/index"
+
+import { activityItems, metricCards } from "./data"
+
+export function DisplayFamilyShowcase() {
+  const [activeCard, setActiveCard] = React.useState("workspace")
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-4 md:grid-cols-3">
+        {metricCards.map((item) => (
+          <div key={item.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">{item.label}</p>
+            <p className="mt-2 text-3xl font-semibold tracking-tight">{item.value}</p>
+            <p className="aui-text-subtle mt-2 text-sm">{item.note}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-[1.1fr_0.9fr]">
+        <div className="space-y-4">
+          <InfoCard
+            eyebrow="Workspace surface"
+            title="Azamat UI release rail"
+            description="Display components should present density, metadata, actions and emphasis without requiring route-specific styling each time."
+            meta="Updated 2 min ago"
+            status={<Badge variant="secondary">Live</Badge>}
+            content={
+              <div className="grid gap-3 md:grid-cols-3">
+                <div className="rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+                  <p className="aui-text-muted text-xs uppercase tracking-[0.18em]">Surface</p>
+                  <p className="aui-text-strong mt-2 text-sm font-medium">InfoCard</p>
+                </div>
+                <div className="rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+                  <p className="aui-text-muted text-xs uppercase tracking-[0.18em]">State</p>
+                  <p className="aui-text-strong mt-2 text-sm font-medium">Selected-safe actions</p>
+                </div>
+                <div className="rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+                  <p className="aui-text-muted text-xs uppercase tracking-[0.18em]">Use case</p>
+                  <p className="aui-text-strong mt-2 text-sm font-medium">Overview, result, summary</p>
+                </div>
+              </div>
+            }
+            actions={<Badge variant="outline">Action-safe</Badge>}
+          />
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <EntityCard
+              title="Workspace card"
+              description="Composable entity block with media, status and actions."
+              icon={<FolderIcon className="size-4" />}
+              status={<Badge variant="outline">Review</Badge>}
+              meta="Team: Core"
+              selected={activeCard === "workspace"}
+              onSelect={() => setActiveCard("workspace")}
+              actions={<Badge variant="outline">Inspect</Badge>}
+            />
+            <FileCard
+              name="release-notes.md"
+              description="Prepared for changelog and docs page."
+              meta="Updated 5m ago"
+              selected={activeCard === "file"}
+              onOpen={() => setActiveCard("file")}
+              actions={<Badge variant="outline">Versioned</Badge>}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+            <p className="font-medium">Status legend</p>
+            <div className="mt-4 flex flex-wrap gap-2">
+              <Badge variant="secondary">Live</Badge>
+              <Badge variant="outline">Review</Badge>
+              <Badge variant="destructive">Blocked</Badge>
+            </div>
+          </div>
+
+          <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+            <p className="font-medium">Activity feed</p>
+            <div className="aui-text-muted mt-4 space-y-3 text-sm">
+              {activityItems.map((item) => (
+                <div key={item} className="flex items-center gap-3 rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+                  <ActivityIcon className="size-4 shrink-0" />
+                  <span>{item}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+            <p className="aui-text-muted text-sm">Focused surface</p>
+            <p className="aui-text-strong mt-2 text-lg font-semibold">{activeCard === "workspace" ? "Workspace card" : "File card"}</p>
+            <p className="aui-text-subtle mt-2 text-sm">Display family now shows actual card surfaces instead of only plain bordered boxes.</p>
+            <div className="mt-3 flex flex-wrap gap-2">
+              <Badge variant="outline">InfoCard</Badge>
+              <Badge variant="outline">EntityCard</Badge>
+              <Badge variant="outline">FileCard</Badge>
+              <Badge variant="outline">Badges</Badge>
+            </div>
+            <div className="mt-4 flex items-center gap-2 text-sm text-emerald-600">
+              <CheckCircle2Icon className="size-4" />
+              <span>Nested actions stay isolated from parent selection.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,18 @@
+export const savedViews = [
+  { value: "all-pipeline", label: "All pipeline", description: "Full team deal flow" },
+  { value: "at-risk", label: "At risk", description: "Overdue and stalled records" },
+  { value: "owner-azamat", label: "Owner: Azamat", description: "Personal operating view" },
+]
+
+export const defaultFilterChips = [
+  { key: "status", label: "Status", value: "Active", tone: "default" as const },
+  { key: "segment", label: "Segment", value: "Enterprise", tone: "info" as const },
+  { key: "period", label: "Period", value: "This month", tone: "muted" as const },
+  { key: "owner", label: "Owner", value: "Assigned", tone: "success" as const },
+]
+
+export const statusOptions = [
+  { value: "active", label: "Active", description: "Healthy operating records" },
+  { value: "review", label: "Review", description: "Needs manual follow-up" },
+  { value: "overdue", label: "Overdue", description: "Past expected date" },
+]

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

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

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

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const filtersFamilyMock: FamilyDemoMock = {
+  code: `import { FilterBar, FilterChips } from "tembro"\n\nexport function Example() {\n  return <FilterBar />\n}`,
+  highlights: ["Filter bars", "Applied chips", "Search + filter coupling", "Dashboard refinement"],
+  scenarios: [
+    { title: "Analytics toolbar", description: "Combine search, chips and status filters in one row." },
+    { title: "Lead boards", description: "Switch quickly between open, review and won states." },
+    { title: "Saved segments", description: "Represent active narrowing rules with persistent chips." },
+  ],
+  metrics: [
+    { label: "Exports", value: "2" },
+    { label: "Modes", value: "Bar + chips" },
+    { label: "Status", value: "Stable" },
+  ],
+}
+
+

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

@@ -0,0 +1,137 @@
+import type { ChangeEvent } from "react"
+import * as React from "react"
+
+import { Badge, Button, FilterChips, Input, SavedFilterSelect, SimpleSelect } from "@/index"
+
+import type { FamilyDemoProps } from "../types"
+
+import { defaultFilterChips, savedViews, statusOptions } from "./data"
+
+export function FiltersFamilyShowcase({ state, setState }: FamilyDemoProps) {
+  const [view, setView] = React.useState<string | undefined>("all-pipeline")
+  const [status, setStatus] = React.useState<string | undefined>("active")
+  const [chips, setChips] = React.useState(defaultFilterChips)
+
+  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">SavedFilterSelect</Badge>
+              <Badge variant="outline">FilterChips</Badge>
+              <Badge variant="outline">SimpleSelect</Badge>
+            </div>
+            <div>
+              <p className="aui-text-strong text-sm font-medium">Filter composition flow</p>
+              <p className="aui-text-muted mt-1 text-sm leading-6">
+                Search, saved view switch, field-level filter and removable active chips should read like one coherent toolbar rather than separate widgets.
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" size="sm" onClick={() => setState({ search: "" })}>Clear query</Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setView("all-pipeline")
+                setStatus("active")
+                setChips(defaultFilterChips)
+                setState({ search: "", notes: "Filters reset to default operating view." })
+              }}
+            >
+              Reset
+            </Button>
+            <Button size="sm" onClick={() => setState({ notes: "Current filter composition prepared for save flow." })}>Save view</Button>
+          </div>
+        </div>
+
+        <div className="mt-4 grid gap-3 xl:grid-cols-[1.2fr_0.8fr_0.8fr]">
+          <Input
+            value={state.search}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => setState({ search: event.target.value })}
+            placeholder="Search records..."
+            className="w-full"
+          />
+          <SavedFilterSelect
+            value={view}
+            onValueChange={(value) => {
+              setView(value)
+              setState({ notes: `${savedViews.find((item) => item.value === value)?.label ?? "View cleared"} applied to the table toolbar.` })
+            }}
+            filters={savedViews}
+            onSave={(name) => setState({ notes: `Saved filter view requested: ${name}` })}
+            onDelete={(value) => setState({ notes: `${savedViews.find((item) => item.value === value)?.label ?? value} requested for deletion.` })}
+          />
+          <SimpleSelect
+            value={status}
+            onValueChange={(value) => {
+              setStatus(value)
+              setState({ notes: `${statusOptions.find((item) => item.value === value)?.label ?? "Status cleared"} filter applied.` })
+            }}
+            options={statusOptions}
+            placeholder="Select status"
+            clearable
+            searchable
+          />
+        </div>
+
+        <div className="mt-4 rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] p-4">
+          <FilterChips
+            chips={chips}
+            onRemove={(key) => {
+              setChips((current) => current.filter((chip) => chip.key !== key))
+              setState({ notes: `${key} filter removed from the active toolbar state.` })
+            }}
+            onClear={() => {
+              setChips([])
+              setState({ notes: "All active filter chips cleared." })
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
+        <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge variant="outline">Step 1: query</Badge>
+            <Badge variant="outline">Step 2: saved view</Badge>
+            <Badge variant="outline">Step 3: active chips</Badge>
+          </div>
+          <div className="mt-4 grid gap-3 md:grid-cols-3">
+            <div className="rounded-[18px] 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">Search narrows result scope</p>
+              <p className="aui-text-subtle mt-2 text-sm leading-6">Top-level search stays lightweight and pairs with field filters instead of replacing them.</p>
+            </div>
+            <div className="rounded-[18px] 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">Saved view restores intent</p>
+              <p className="aui-text-subtle mt-2 text-sm leading-6">Named views bring back common operating states without manually rebuilding every chip.</p>
+            </div>
+            <div className="rounded-[18px] 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">Chips expose active state</p>
+              <p className="aui-text-subtle mt-2 text-sm leading-6">Each chip can be removed independently, and clear-all stays available for quick resets.</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+          <div className="grid gap-3">
+            <div className="rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+              <p className="aui-text-muted text-sm">Current query</p>
+              <p className="aui-text-strong mt-2 text-lg font-semibold">{state.search || "All records"}</p>
+            </div>
+            <div className="rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+              <p className="aui-text-muted text-sm">Saved view</p>
+              <p className="aui-text-strong mt-2 text-lg font-semibold">{savedViews.find((item) => item.value === view)?.label ?? "None"}</p>
+            </div>
+            <div className="rounded-[18px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
+              <p className="aui-text-muted text-sm">Active chips</p>
+              <p className="aui-text-strong mt-2 text-lg font-semibold">{chips.length}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,37 @@
+export type WorkspaceOption = {
+  value: string
+  label: string
+  description: string
+  data: {
+    team: string
+    status: "Live" | "Draft" | "Review"
+  }
+}
+
+export type FormValues = {
+  workspaceName: string
+  status: string
+  owner: string
+  publishChanges: boolean
+  notes: string
+}
+
+export const workspaceOptions: WorkspaceOption[] = [
+  { value: "azamat-ui", label: "Azamat UI", description: "Public component library", data: { team: "Core", status: "Live" } },
+  { value: "crm-pulse", label: "CRM Pulse", description: "Sales workflow module", data: { team: "Sales", status: "Review" } },
+  { value: "store-command", label: "Store Command", description: "Commerce operations area", data: { team: "Commerce", status: "Live" } },
+  { value: "finance-dock", label: "Finance Dock", description: "Billing admin surface", data: { team: "Finance", status: "Draft" } },
+]
+
+export const groupedWorkspaceOptions = [
+  { label: "Pinned", options: workspaceOptions.slice(0, 2) },
+  { label: "All projects", options: workspaceOptions.slice(2) },
+]
+
+export const defaultFormValues: FormValues = {
+  workspaceName: "Tembro",
+  status: "review",
+  owner: "azamat-ui",
+  publishChanges: true,
+  notes: "Public documentation and component routes are being prepared for release.",
+}

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

@@ -0,0 +1,4 @@
+export { FormFamilyShowcase } from "./showcase"
+export { formFamilyMock } from "./mock"
+export { defaultFormValues, groupedWorkspaceOptions, workspaceOptions } from "./data"
+export type { FormValues, WorkspaceOption } from "./data"

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

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const formFamilyMock: FamilyDemoMock = {
+  code: `import { FormInput, FormSelect, FormSwitch } from "tembro"\n\nexport function Example() {\n  return (\n    <>\n      <FormInput control={control} name="workspaceName" label="Workspace" />\n      <FormInput control={control} name="ownerPhone" kind="phone" label="Owner phone" />\n      <FormSelect control={control} name="owner" kind="async" label="Linked workspace" />\n      <FormSwitch control={control} name="publishChanges" label="Publish after save" />\n    </>\n  )\n}`,
+  highlights: ["Universal form wrappers", "Async field hydration", "Dirty + reset flow", "Consistent validation surfaces"],
+  scenarios: [
+    { title: "Settings form", description: "Keep labels, helper text, toggles and async fields aligned through the same wrapper language." },
+    { title: "Edit resource flow", description: "Hydrate saved owner/workspace values back into the form route with `FormSelect kind=\"async\"`." },
+    { title: "Long forms", description: "Scale complex field groups without splitting into many narrowly named wrappers." },
+  ],
+  metrics: [
+    { label: "Exports", value: "14" },
+    { label: "Universal wrappers", value: "2 primary" },
+    { label: "Status", value: "Stable" },
+  ],
+}
+
+

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

@@ -0,0 +1,230 @@
+import * as React from "react"
+import { useForm, useWatch } from "react-hook-form"
+
+import { Badge, Button, FormInput, FormSelect, FormSwitch, FormTextarea } from "@/index"
+
+import type { FamilyDemoProps } from "../types"
+
+import {
+  defaultFormValues,
+  groupedWorkspaceOptions,
+  type FormValues,
+  workspaceOptions,
+  type WorkspaceOption,
+} from "./data"
+
+export function FormFamilyShowcase({ setState }: FamilyDemoProps) {
+  const [mode, setMode] = React.useState<"editing" | "submitting" | "saved">("editing")
+  const form = useForm<FormValues>({
+    defaultValues: defaultFormValues,
+  })
+
+  const publishChanges = useWatch({ control: form.control, name: "publishChanges" })
+  const workspaceName = useWatch({ control: form.control, name: "workspaceName" })
+  const status = useWatch({ control: form.control, name: "status" })
+  const owner = useWatch({ control: form.control, name: "owner" })
+
+  const loadOptions = React.useCallback(async (search: string) => {
+    await new Promise((resolve) => window.setTimeout(resolve, 260))
+
+    const query = search.trim().toLowerCase()
+    if (!query) return groupedWorkspaceOptions
+
+    return [
+      {
+        label: "Search results",
+        options: workspaceOptions.filter((item) =>
+          [item.label, item.description, item.data.team, item.data.status].join(" ").toLowerCase().includes(query)
+        ),
+      },
+    ]
+  }, [])
+
+  const loadSelectedOption = React.useCallback(async (value: string) => {
+    await new Promise((resolve) => window.setTimeout(resolve, 120))
+    return workspaceOptions.find((item) => item.value === value) ?? null
+  }, [])
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    setMode("submitting")
+    await new Promise((resolve) => window.setTimeout(resolve, 420))
+    setMode("saved")
+    setState({
+      notes: `Saved ${values.workspaceName} with ${values.status} status and ${values.publishChanges ? "enabled" : "disabled"} publish sync.`,
+    })
+  })
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-5">
+        <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">react-hook-form</Badge>
+              <Badge variant="outline">Wrapped fields</Badge>
+              <Badge variant="outline">Async entity select</Badge>
+              <Badge variant="outline">{form.formState.isDirty ? "Dirty" : "Pristine"}</Badge>
+            </div>
+            <div>
+              <p className="aui-text-strong text-sm font-medium">Settings editor flow</p>
+              <p className="aui-text-muted mt-1 text-sm leading-6">
+                Wrapped field shell, async entity selection, boolean control, helper copy and submit/reset behavior should read like one coherent form route.
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                form.reset(defaultFormValues)
+                setMode("editing")
+              }}
+            >
+              Reset
+            </Button>
+            <Button size="sm" onClick={() => void onSubmit()} disabled={mode === "submitting"}>
+              {mode === "submitting" ? "Saving..." : mode === "saved" ? "Saved" : "Save changes"}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-[1.08fr_0.92fr]">
+        <div className="space-y-4 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-5">
+          <form
+            className="grid gap-4"
+            onSubmit={(event) => {
+              event.preventDefault()
+              void onSubmit()
+            }}
+          >
+            <div className="grid gap-4 md:grid-cols-2">
+              <FormInput<FormValues>
+                control={form.control}
+                name="workspaceName"
+                label="Workspace name"
+                required
+                placeholder="Enter workspace name"
+                description="Primary title rendered across docs, templates, and component routes."
+                fieldClassName="h-11"
+              />
+
+              <FormSelect<FormValues>
+                control={form.control}
+                name="status"
+                label="Release status"
+                required
+                description="Use a controlled select for lifecycle state."
+                options={[
+                  { label: "Draft", value: "draft" },
+                  { label: "Review", value: "review" },
+                  { label: "Live", value: "live" },
+                ]}
+                placeholder="Choose status"
+              />
+            </div>
+
+            <FormSelect
+              control={form.control}
+              name="owner"
+              kind="async"
+              label="Linked workspace"
+              required
+              description="Hydrate saved entity values back into the form and keep async selection inside the same FormSelect API."
+              defaultOptions={groupedWorkspaceOptions}
+              loadOptions={loadOptions}
+              loadSelectedOption={loadSelectedOption}
+              labels={{
+                placeholder: "Select workspace",
+                searchPlaceholder: "Search workspaces...",
+                loading: "Loading workspaces...",
+                empty: "No workspace found",
+              }}
+              renderValue={(option: WorkspaceOption) => (
+                <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: WorkspaceOption, optionState: { selected: boolean }) => (
+                <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]" : "aui-text-muted rounded-full bg-[color:var(--aui-surface-muted)] px-2 py-0.5 text-[11px]"}>
+                    {option.data.status}
+                  </span>
+                </span>
+              )}
+            />
+
+            <FormTextarea<FormValues>
+              control={form.control}
+              name="notes"
+              label="Release notes"
+              description="Long-form copy should stay aligned with labels, descriptions and validation shell."
+              fieldClassName="min-h-28"
+            />
+
+            <FormSwitch<FormValues>
+              control={form.control}
+              name="publishChanges"
+              label="Publish after save"
+              description="Demonstrates wrapped boolean controls inside the same form system."
+            />
+          </form>
+
+          <div className="grid gap-3 md:grid-cols-3">
+            <div className="rounded-[18px] 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">Step 1: edit fields</p>
+              <p className="aui-text-subtle mt-2 text-sm leading-6">Text, select, async select and textarea stay aligned inside one shell system.</p>
+            </div>
+            <div className="rounded-[18px] 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">Step 2: track dirty</p>
+              <p className="aui-text-subtle mt-2 text-sm leading-6">Pristine and dirty state remain visible without building custom page-specific glue.</p>
+            </div>
+            <div className="rounded-[18px] 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">Step 3: submit flow</p>
+              <p className="aui-text-subtle mt-2 text-sm leading-6">Save and reset show real behavior instead of just decorative buttons.</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4 rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-5">
+          <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-surface-muted)] p-4">
+              <p className="aui-text-muted text-sm">Form state</p>
+              <p className="aui-text-strong mt-2 text-lg font-semibold">{mode}</p>
+              <p className="aui-text-subtle mt-2 text-sm">{form.formState.isDirty ? "There are unsaved changes in the editor." : "Current values match the saved snapshot."}</p>
+            </div>
+            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] p-4">
+              <p className="aui-text-muted text-sm">Current workspace</p>
+              <p className="aui-text-strong mt-2 text-lg font-semibold">{workspaceName || "Untitled workspace"}</p>
+              <p className="aui-text-subtle mt-2 text-sm">Status: {status} • Owner: {owner}</p>
+            </div>
+            <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] p-4">
+              <p className="aui-text-muted text-sm">Submit behavior</p>
+              <div className="mt-3 flex flex-wrap gap-2">
+                <Badge variant="outline">Reset</Badge>
+                <Badge variant="outline">Dirty tracking</Badge>
+                <Badge variant="outline">Async hydrate</Badge>
+                <Badge variant="outline">{publishChanges ? "Publish on" : "Publish off"}</Badge>
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] p-4">
+            <p className="aui-text-muted text-sm">Why this matters</p>
+            <div className="aui-text-subtle mt-3 space-y-2 text-sm">
+              <p>One wrapper system keeps label, helper and error layout consistent.</p>
+              <p>Async fields can hydrate edit values instead of only supporting fresh creation.</p>
+              <p>Form route now shows actual submit and reset flow instead of static decoration.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/families/form/types.ts

@@ -0,0 +1,10 @@
+export type FormDemoField = {
+  label: string
+  kind: "input" | "badge" | "textarea"
+  helper: string
+}
+
+export type FormDemoAction = {
+  label: string
+  variant: "default" | "outline"
+}

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

@@ -0,0 +1,37 @@
+import type { FamilyDemoBundle } from "./types"
+
+import { actionsFamilyMock, ActionsFamilyShowcase } from "./actions"
+import { calendarFamilyMock, CalendarFamilyShowcase } from "./calendar"
+import { commandFamilyMock, CommandFamilyShowcase } from "./command"
+import { dataTableFamilyMock, DataTableFamilyShowcase } from "./data-table"
+import { displayFamilyMock, DisplayFamilyShowcase } from "./display"
+import { filtersFamilyMock, FiltersFamilyShowcase } from "./filters"
+import { formFamilyMock, FormFamilyShowcase } from "./form"
+import { inputsFamilyMock, InputsFamilyShowcase } from "./inputs"
+import { layoutFamilyMock, LayoutFamilyShowcase } from "./layout"
+import { navigationFamilyMock, NavigationFamilyShowcase } from "./navigation"
+import { notificationsFamilyMock, NotificationsFamilyShowcase } from "./notifications"
+import { overlayFamilyMock, OverlayFamilyShowcase } from "./overlay"
+import { patternsFamilyMock, PatternsFamilyShowcase } from "./patterns"
+import { uploadFamilyMock, UploadFamilyShowcase } from "./upload"
+import { wizardFamilyMock, WizardFamilyShowcase } from "./wizard"
+
+export { defaultFamilyDemoState, type FamilyDemoBundle, type FamilyDemoProps, type FamilyDemoState } from "./types"
+
+export const familyDemoRegistry: Record<string, FamilyDemoBundle> = {
+  actions: { mock: actionsFamilyMock, Showcase: ActionsFamilyShowcase },
+  filters: { mock: filtersFamilyMock, Showcase: FiltersFamilyShowcase },
+  overlay: { mock: overlayFamilyMock, Showcase: OverlayFamilyShowcase },
+  navigation: { mock: navigationFamilyMock, Showcase: NavigationFamilyShowcase },
+  layout: { mock: layoutFamilyMock, Showcase: LayoutFamilyShowcase },
+  "data-table": { mock: dataTableFamilyMock, Showcase: DataTableFamilyShowcase },
+  inputs: { mock: inputsFamilyMock, Showcase: InputsFamilyShowcase },
+  form: { mock: formFamilyMock, Showcase: FormFamilyShowcase },
+  display: { mock: displayFamilyMock, Showcase: DisplayFamilyShowcase },
+  notifications: { mock: notificationsFamilyMock, Showcase: NotificationsFamilyShowcase },
+  command: { mock: commandFamilyMock, Showcase: CommandFamilyShowcase },
+  calendar: { mock: calendarFamilyMock, Showcase: CalendarFamilyShowcase },
+  wizard: { mock: wizardFamilyMock, Showcase: WizardFamilyShowcase },
+  upload: { mock: uploadFamilyMock, Showcase: UploadFamilyShowcase },
+  patterns: { mock: patternsFamilyMock, Showcase: PatternsFamilyShowcase },
+}