tembro 1.0.3 → 2.0.0

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

@@ -1,113 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,230 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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 },
-}