tembro 1.0.0

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

@@ -0,0 +1,40 @@
+import type * as React from "react"
+
+export type FamilyDemoState = {
+  search: string
+  notes: string
+  step: number
+  uploadCount: number
+  density: "comfortable" | "compact"
+}
+
+export type FamilyDemoMock = {
+  code: string
+  highlights: string[]
+  scenarios: Array<{
+    title: string
+    description: string
+  }>
+  metrics: Array<{
+    label: string
+    value: string
+  }>
+}
+
+export type FamilyDemoProps = {
+  state: FamilyDemoState
+  setState: (patch: Partial<FamilyDemoState>) => void
+}
+
+export type FamilyDemoBundle = {
+  mock: FamilyDemoMock
+  Showcase: (props: FamilyDemoProps) => React.ReactNode
+}
+
+export const defaultFamilyDemoState: FamilyDemoState = {
+  search: "",
+  notes: "This module family is wired into the public showcase and has real route-level actions.",
+  step: 2,
+  uploadCount: 3,
+  density: "comfortable",
+}

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

@@ -0,0 +1,7 @@
+export const uploadHelperTags = [
+  "Dropzone",
+  "Custom actions",
+  "Progress",
+  "Rejected files",
+  "Image preview",
+]

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

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

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

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const uploadFamilyMock: FamilyDemoMock = {
+  code: `import { FileUpload, ImageUpload } from "tembro"\n\nexport function Example() {\n  return <FileUpload />\n}`,
+  highlights: ["File upload", "Image upload", "Attachment counts", "Media-ready flows"],
+  scenarios: [
+    { title: "Asset manager", description: "Collect multiple files and preview uploaded media." },
+    { title: "Profile image flow", description: "Use image upload in account and brand settings." },
+    { title: "Document attachments", description: "Attach release notes, invoices or briefs inline." },
+  ],
+  metrics: [
+    { label: "Exports", value: "2" },
+    { label: "Files", value: "12" },
+    { label: "Status", value: "Preview" },
+  ],
+}
+
+

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

@@ -0,0 +1,86 @@
+import * as React from "react"
+
+import { Badge, FileUpload, ImageUpload } from "@/index"
+
+import type { FamilyDemoProps } from "../types"
+
+import { uploadHelperTags } from "./data"
+
+export function UploadFamilyShowcase({ setState }: FamilyDemoProps) {
+  const [files, setFiles] = React.useState<File[]>([])
+  const [images, setImages] = React.useState<File[]>([])
+
+  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">
+              {uploadHelperTags.map((tag) => (
+                <Badge key={tag} variant="outline">{tag}</Badge>
+              ))}
+            </div>
+            <div>
+              <p className="aui-text-strong text-sm font-medium">Upload family coverage</p>
+              <p className="aui-text-muted mt-1 text-sm leading-6">
+                File and image upload should expose real dropzone behavior, clear actions, remove actions, preview surfaces and controlled file counts.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+          <p className="aui-text-strong text-sm font-medium">File upload</p>
+          <p className="aui-text-muted mt-1 text-sm leading-6">Drop files, clear all, reject invalid types and keep remove actions inside the file item surface.</p>
+          <div className="mt-4">
+            <FileUpload
+              files={files}
+              onFilesChange={(nextFiles) => {
+                setFiles(nextFiles)
+                setState({ notes: `${nextFiles.length} file attachments are now staged.` })
+              }}
+              accept=".pdf,.docx,.png"
+              maxFiles={4}
+              maxSize={4 * 1024 * 1024}
+              helperText="Accepts PDF, DOCX and PNG up to 4 MB."
+            />
+          </div>
+        </div>
+
+        <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
+          <p className="aui-text-strong text-sm font-medium">Image upload</p>
+          <p className="aui-text-muted mt-1 text-sm leading-6">Image preview, removable files and count summary are exposed directly from the reusable component.</p>
+          <div className="mt-4">
+            <ImageUpload
+              files={images}
+              onFilesChange={(nextFiles) => {
+                setImages(nextFiles)
+                setState({ notes: `${nextFiles.length} preview images are now staged.` })
+              }}
+              maxFiles={3}
+              helperText="Upload hero illustrations or block thumbnails."
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <div 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-muted text-sm">Attached files</p>
+          <p className="aui-text-strong mt-2 text-lg font-semibold">{files.length}</p>
+        </div>
+        <div 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-muted text-sm">Attached images</p>
+          <p className="aui-text-strong mt-2 text-lg font-semibold">{images.length}</p>
+        </div>
+        <div 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-muted text-sm">Interaction proof</p>
+          <p className="aui-text-strong mt-2 text-lg font-semibold">Remove and clear are isolated</p>
+          <p className="aui-text-subtle mt-2 text-sm">Nested upload actions no longer conflict with the parent dropzone click surface.</p>
+        </div>
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,18 @@
+import type { FamilyDemoMock } from "../types"
+
+export const wizardFamilyMock: FamilyDemoMock = {
+  code: `import { Stepper, Wizard } from "tembro"\n\nexport function Example() {\n  return <Wizard />\n}`,
+  highlights: ["Multi-step flow", "Progress state", "Guided forms", "Step affordances"],
+  scenarios: [
+    { title: "Onboarding", description: "Guide users through setup without overwhelming them." },
+    { title: "Checkout flow", description: "Break complex processes into sequential steps." },
+    { title: "Workspace creation", description: "Collect structured info with visible progress." },
+  ],
+  metrics: [
+    { label: "Exports", value: "2" },
+    { label: "Steps", value: "4" },
+    { label: "Status", value: "Stable" },
+  ],
+}
+
+

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

@@ -0,0 +1,39 @@
+import { Button } from "@/index"
+
+import type { FamilyDemoProps } from "../types"
+
+const steps = ["Workspace", "Brand", "Members", "Publish"]
+
+export function WizardFamilyShowcase({ state, setState }: FamilyDemoProps) {
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-3 md:grid-cols-4">
+        {steps.map((label, index) => {
+          const stepNumber = index + 1
+          const active = state.step === stepNumber
+          const complete = state.step > stepNumber
+          return (
+            <button
+              key={label}
+              onClick={() => setState({ step: stepNumber })}
+              className={`rounded-[22px] border px-4 py-4 text-left ${active ? "aui-surface-strong border-[color:var(--aui-surface-strong)]" : complete ? "aui-status-success" : "border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] aui-text-muted"}`}
+            >
+              <div className="text-xs uppercase tracking-[0.24em]">{`Step ${stepNumber}`}</div>
+              <div className="mt-2 text-lg font-semibold">{label}</div>
+            </button>
+          )
+        })}
+      </div>
+      <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-5">
+        <p className="text-2xl font-semibold tracking-tight">{steps[state.step - 1]} step</p>
+        <p className="aui-text-muted mt-2 text-sm leading-6">A multi-step guided workflow with a stable route and predictable step flow.</p>
+        <div className="mt-5 flex gap-3">
+          <Button variant="outline" onClick={() => setState({ step: Math.max(1, state.step - 1) })}>Back</Button>
+          <Button onClick={() => setState({ step: Math.min(4, state.step + 1) })}>Next</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+

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

@@ -0,0 +1,56 @@
+import { actionsShowcaseDemoRegistry } from "@/components/actions/demo"
+import { calendarShowcaseDemoRegistry } from "@/components/calendar/demo"
+import { dataTableShowcaseDemoRegistry } from "@/components/data-table/demo"
+import { displayShowcaseDemoRegistry } from "@/components/display/demo"
+import { feedbackShowcaseDemoRegistry } from "@/components/feedback/demo"
+import { filtersShowcaseDemoRegistry } from "@/components/filters/demo"
+import { formShowcaseDemoRegistry } from "@/components/form/demo"
+import { inputsShowcaseDemoRegistry } from "@/components/inputs/demo"
+import { layoutShowcaseDemoRegistry } from "@/components/layout/demo"
+import { navigationShowcaseDemoRegistry } from "@/components/navigation/demo"
+import { overlayShowcaseDemoRegistry } from "@/components/overlay/demo"
+import { patternsShowcaseDemoRegistry } from "@/components/patterns/demo"
+import { uploadShowcaseDemoRegistry } from "@/components/upload/demo"
+import { wizardShowcaseDemoRegistry } from "@/components/wizard/demo"
+import { defaultComponentDemoState, premiumShowcaseDemoRegistry } from "./premium"
+import { registryQualityDemoRegistry } from "./registry-quality"
+import { registrySpecificDemoRegistry } from "./registry-specific"
+import { supplementalShowcaseDemoRegistry } from "./supplemental"
+
+export * from "./types"
+export * from "./premium"
+export * from "./registry-quality"
+export * from "./registry-specific"
+export * from "./fallback"
+export * from "./families/index"
+export * from "./preview-catalog"
+export * from "./preview-registry"
+export * from "./site-data"
+export * from "./component-api-schema"
+export * from "./search-utils"
+export * from "./package-meta"
+export * from "./supplemental"
+
+export const showcaseDemoRegistry = {
+  ...actionsShowcaseDemoRegistry,
+  ...calendarShowcaseDemoRegistry,
+  ...dataTableShowcaseDemoRegistry,
+  ...displayShowcaseDemoRegistry,
+  ...feedbackShowcaseDemoRegistry,
+  ...filtersShowcaseDemoRegistry,
+  ...formShowcaseDemoRegistry,
+  ...inputsShowcaseDemoRegistry,
+  ...layoutShowcaseDemoRegistry,
+  ...navigationShowcaseDemoRegistry,
+  ...overlayShowcaseDemoRegistry,
+  ...patternsShowcaseDemoRegistry,
+  ...uploadShowcaseDemoRegistry,
+  ...wizardShowcaseDemoRegistry,
+  ...registrySpecificDemoRegistry,
+  ...supplementalShowcaseDemoRegistry,
+  ...premiumShowcaseDemoRegistry,
+  ...registryQualityDemoRegistry,
+}
+
+export { defaultComponentDemoState }
+export const componentDemoRegistry = showcaseDemoRegistry

package/packages/cli/vendor/src/showcase/package-meta.ts

@@ -0,0 +1,4 @@
+export const PACKAGE_LATEST_VERSION = "1.0.0"
+export const PACKAGE_LATEST_RELEASE_DATE = "July 7, 2026"
+export const PACKAGE_DEPENDENCY_RANGE = `^${PACKAGE_LATEST_VERSION}`
+

package/packages/cli/vendor/src/showcase/premium/accordion/index.ts

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

package/packages/cli/vendor/src/showcase/premium/accordion/mock.ts

@@ -0,0 +1,43 @@
+import type { ComponentDemoMock } from "../types"
+
+export const accordionMock: ComponentDemoMock = {
+  code: `import { Accordion } from "@/index"
+
+const items = [
+  {
+    key: "tokens",
+    title: "Theme tokens",
+    description: "Control border, background, radius, and spacing from one place.",
+    content: "Keep product decisions inside tokens instead of hardcoded one-off wrappers.",
+  },
+  {
+    key: "families",
+    title: "Component families",
+    description: "Teach one primary surface first.",
+    content: "Members like AsyncSelect or FormAsyncSelect should stay inside the canonical route.",
+  },
+]
+
+export function Example() {
+  return <Accordion type="single" defaultValue="tokens" items={items} />
+}`,
+  htmlCode: `<details data-slot="accordion">
+  <summary data-slot="accordion-trigger">Theme tokens</summary>
+  <div data-slot="accordion-content">Keep product decisions inside tokens.</div>
+</details>`,
+  cliCommand: "npx tembro add accordion",
+  highlights: [
+    "Single and multiple expansion behavior",
+    "Title, description, and body content through one item contract",
+    "Good for docs FAQs, settings help, and release notes",
+  ],
+  scenarios: [
+    { title: "Settings help", description: "Hide advanced explanation until the user requests it." },
+    { title: "FAQ", description: "Keep pages shorter while preserving full guidance." },
+    { title: "Release checklist", description: "Reveal only the currently relevant operational details." },
+  ],
+  capabilityNotes: [
+    "Use `type=\"single\"` for focus-first documentation flows.",
+    "Use `type=\"multiple\"` when users may compare several sections together.",
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/accordion/showcase.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+
+import { Accordion, Badge } from "@/index"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+const docsItems = [
+  {
+    key: "tokens",
+    title: "Theme tokens stay in one place",
+    description: "Radius, color and shadow should not be redefined per route.",
+    content: "Use shared CSS tokens so consumers can adapt the system without fighting deeply nested component styles.",
+  },
+  {
+    key: "surface",
+    title: "One canonical public surface",
+    description: "Teach one entry point before helper members.",
+    content: "Start with Input, Select, DataTable, Card and Badge. Move aliases and advanced members lower in the docs hierarchy.",
+  },
+  {
+    key: "demo",
+    title: "Real demos beat placeholder previews",
+    description: "Each route should prove the actual component behavior.",
+    content: "A docs page should show the real installed component with interactive state, not a generic substitute card.",
+  },
+] as const
+
+const releaseItems = [
+  {
+    key: "docs",
+    title: "Docs updated",
+    description: "Public route and CLI snippet verified",
+    content: "Component detail page, API notes, and install snippet were reviewed together before release.",
+  },
+  {
+    key: "tokens",
+    title: "Visual tokens synced",
+    description: "No stray radius, border, or surface overrides",
+    content: "The route uses package tokens directly so the result matches what consumers install.",
+  },
+  {
+    key: "qa",
+    title: "QA preview checked",
+    description: "Build and interactive preview passed",
+    content: "The component was verified with type-check and production build before push.",
+  },
+] as const
+
+export function AccordionShowcase() {
+  const [singleValue, setSingleValue] = React.useState<string | string[]>("surface")
+  const [multiValue, setMultiValue] = React.useState<string | string[]>(["docs"])
+
+  return (
+    <div className="space-y-0">
+      <section className="pb-6">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed primitive</p>
+        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Accordion keeps dense guidance readable</h3>
+        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
+          This route uses the exported accordion surface directly. The page adds only spacing and explanation around it.
+        </p>
+      </section>
+
+      <section className={panelClass}>
+        <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
+          <div>
+            <p className="text-lg font-semibold aui-text-strong">Documentation flow</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              Single-open mode keeps the user focused on one explanation at a time.
+            </p>
+            <Accordion className="mt-5" type="single" value={singleValue} onValueChange={setSingleValue} items={[...docsItems]} />
+          </div>
+
+          <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <p className="text-sm font-semibold aui-text-strong">Current open item</p>
+                <p className="mt-1 text-xs aui-text-muted">Controlled state mirrors route-level docs navigation.</p>
+              </div>
+              <Badge variant="secondary">{Array.isArray(singleValue) ? singleValue.join(", ") : singleValue || "none"}</Badge>
+            </div>
+            <div className="mt-4 space-y-3 text-sm leading-6 aui-text-muted">
+              <p>Use this mode on component detail pages, FAQs, or policy explanations where only one answer should dominate the layout.</p>
+              <p>The trigger keeps title and helper description together, so content stays understandable even before expansion.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
+          <div>
+            <p className="text-lg font-semibold aui-text-strong">Operational checklist</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              Multiple-open mode works better when teams compare several readiness items together.
+            </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              {(Array.isArray(multiValue) ? multiValue : []).map((item) => (
+                <Badge key={item} variant="outline">{item}</Badge>
+              ))}
+            </div>
+          </div>
+
+          <Accordion className="xl:mt-8" type="multiple" value={multiValue} onValueChange={setMultiValue} items={[...releaseItems]} />
+        </div>
+      </section>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/action-menu/index.ts

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

package/packages/cli/vendor/src/showcase/premium/action-menu/mock.ts

@@ -0,0 +1,29 @@
+import type { ComponentDemoMock } from "../types"
+
+export const actionMenuMock: ComponentDemoMock = {
+  code: `import { ActionMenu } from "tembro"
+
+export function Example() {
+  return (
+    <ActionMenu
+      label="Row actions"
+      actions={[
+        { key: "open", label: "Open" },
+        { key: "duplicate", label: "Duplicate" },
+        { key: "archive", label: "Archive", destructive: true },
+      ]}
+    />
+  )
+}`,
+  highlights: ["Compact row actions", "Async action loading state", "Destructive item styling", "Works well inside tables and cards"],
+  scenarios: [
+    { title: "Table row actions", description: "Collapse inspect, duplicate, and archive operations into one compact surface." },
+    { title: "Card menu", description: "Attach contextual actions to summary cards without visual clutter." },
+    { title: "Dense admin tools", description: "Preserve space while keeping operational actions discoverable." },
+  ],
+  capabilityNotes: [
+    "ActionMenu is strongest when actions are secondary to the main content.",
+    "Use clear verb labels and reserve destructive styling for genuinely destructive operations.",
+    "If every action is primary, a visible button row may be better than a menu.",
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/action-menu/showcase.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { ArchiveIcon, CopyIcon, ExternalLinkIcon } from "lucide-react"
+
+import { ActionMenu, Badge } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+const panelClass =
+  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
+
+export function ActionMenuShowcase({ mode }: ComponentDemoProps) {
+  const [lastAction, setLastAction] = React.useState("No action selected")
+
+  return (
+    <div className="space-y-5">
+      <section className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6">
+        <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
+          <div className="max-w-xl">
+            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Compact actions</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">ActionMenu should hide secondary actions, not critical path actions</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              This surface is ideal for row or card actions that matter, but should not dominate the layout.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Contextual</Badge>
+            <Badge variant="outline" className="rounded-full">Secondary actions</Badge>
+          </div>
+        </div>
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <section className={panelClass}>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium aui-text-strong">Invoice #2048</p>
+              <p className="mt-1 text-sm aui-text-muted">Acme Growth payment workflow</p>
+            </div>
+            <ActionMenu
+              label="Invoice actions"
+              actions={[
+                { key: "open", label: "Open details", icon: <ExternalLinkIcon className="size-4" />, onSelect: async () => setLastAction("Opened invoice details") },
+                { key: "duplicate", label: "Duplicate", icon: <CopyIcon className="size-4" />, onSelect: async () => setLastAction("Duplicated invoice workflow") },
+                { key: "archive", label: "Archive", icon: <ArchiveIcon className="size-4" />, destructive: true, onSelect: async () => setLastAction("Archived invoice workflow") },
+              ]}
+            />
+          </div>
+        </section>
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Last action</p>
+          <p className="mt-3 text-base font-medium aui-text-strong">{lastAction}</p>
+        </section>
+      </div>
+
+      {mode === "playground" ? (
+        <section className={panelClass}>
+          <p className="text-sm aui-text-muted">ActionMenu table row, card header yoki compact list itemlarda juda foydali.</p>
+        </section>
+      ) : null}
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/activity-feed/index.ts

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

package/packages/cli/vendor/src/showcase/premium/activity-feed/mock.ts

@@ -0,0 +1,28 @@
+import type { ComponentDemoMock } from "../types"
+
+export const activityFeedMock: ComponentDemoMock = {
+  code: `import { ActivityFeed } from "tembro"
+
+const items = [
+  { id: "i-1", title: "Team invited", description: "New designer joined the workspace.", time: "2 min ago", tone: "info" },
+  { id: "i-2", title: "Deployment succeeded", description: "Staging deployment passed smoke checks.", time: "12 min ago", tone: "success" },
+  { id: "i-3", title: "Payment issue", description: "Invoice sync failed, retry queue enabled.", time: "34 min ago", tone: "warning" },
+]
+
+export function Example() {
+  return <ActivityFeed title="Recent activity" items={items} compact />
+}`,
+  highlights: ["Audit feed for admins", "Time-based event rows", "Status tones", "Compact list mode"],
+  relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "users-table"],
+  scenarios: [
+    { title: "Operation logs", description: "Show timeline-like events in a side panel near detail content." },
+    { title: "Approval queue", description: "Keep audit trails visible next to table actions." },
+    { title: "System health feeds", description: "Surface important background events without overwhelming layout." },
+  ],
+  capabilityNotes: [
+    "Provide stable `id` values for each item to avoid flicker in updates.",
+    "Use meaningful `time` strings and `tone` to communicate action urgency.",
+    "Use `compact` for narrow sidebars and dense dashboard sections.",
+  ],
+}
+

package/packages/cli/vendor/src/showcase/premium/activity-feed/showcase.tsx

@@ -0,0 +1,65 @@
+import * as React from "react"
+
+import { ActivityFeed } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+const items = [
+  { id: "i-1", title: "Team invited", description: "New designer joined the workspace.", time: "2 min ago", tone: "info" as const },
+  { id: "i-2", title: "Deployment succeeded", description: "Staging deployment passed smoke checks.", time: "12 min ago", tone: "success" as const },
+  { id: "i-3", title: "Invoice warning", description: "Payment sync delayed in queue, retrying soon.", time: "34 min ago", tone: "warning" as const },
+  { id: "i-4", title: "Critical alert", description: "Webhook failed for production billing endpoint.", time: "1h ago", tone: "danger" as const },
+]
+
+const toneFilters = ["all", "success", "warning", "info", "danger"] as const
+
+type ToneFilter = (typeof toneFilters)[number]
+
+export function ActivityFeedShowcase({ mode }: ComponentDemoProps) {
+  const [compact, setCompact] = React.useState(mode === "playground")
+  const [filter, setFilter] = React.useState<ToneFilter>("all")
+
+  const visibleItems = React.useMemo(() => {
+    if (filter === "all") {
+      return items
+    }
+
+    return items.filter((item) => item.tone === filter)
+  }, [filter])
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-2">
+        <div className="aui-text-muted text-sm">Density: {compact ? "Compact" : "Spacious"}</div>
+        <div className="flex flex-wrap gap-2">
+          <button
+            type="button"
+            className="rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-3 py-2 text-sm"
+            onClick={() => setCompact((value) => !value)}
+          >
+            {compact ? "Use spacious" : "Use compact"}
+          </button>
+          {toneFilters.map((entry) => (
+            <button
+              key={entry}
+              type="button"
+              className={`rounded-lg border px-3 py-2 text-sm ${filter === entry ? "aui-surface-strong border-[color:var(--aui-surface-strong)]" : "border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"}`}
+              onClick={() => setFilter(entry)}
+            >
+              {entry}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <ActivityFeed
+        title="Recent activity"
+        description="System and team events are grouped into one lightweight feed."
+        items={visibleItems}
+        compact={compact}
+        empty={<span className="aui-text-muted text-sm">No matching activity for selected tone.</span>}
+      />
+    </div>
+  )
+}
+

package/packages/cli/vendor/src/showcase/premium/affix/index.ts

@@ -0,0 +1,3 @@
+export { affixMock } from "./mock"
+export { AffixShowcase } from "./showcase"
+