tembro 3.1.1 → 3.1.6

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

@@ -6,9 +6,9 @@ export const statisticMock: ComponentDemoMock = {
 export function Example() {
   return (
     <StatisticGrid columns={3}>
-      <StatisticCard label="Revenue" value="$24.8k" change="+12.4%" trend="up" />
+      <StatisticCard label="Revenue" prefix="$" value="24.8k" change="+12.4%" trend="up" />
       <StatisticCard label="Errors" value="14" change="-3.1%" trend="down" />
-      <StatisticCard label="Conversion" value="6.3%" description="vs last 30 days" />
+      <StatisticCard label="Conversion" value="6.3" suffix="%" loading={false} description="vs last 30 days" />
     </StatisticGrid>
   )
 }`,

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

@@ -1,8 +1,13 @@
-import { Badge, ProgressRing, Statistic, StatisticCard, StatisticGrid, TrendCard } from "@/index"
+import * as React from "react"
+
+import { Badge, Button, ProgressCircle, Statistic, StatisticCard, StatisticGrid } from "@/index"
 
 const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
 
 export function StatisticShowcase() {
+  const [loading, setLoading] = React.useState(false)
+  const [columns, setColumns] = React.useState<1 | 2 | 3 | 4>(3)
+
   return (
     <div className="space-y-0">
       <section className="pb-6">
@@ -14,10 +19,20 @@ export function StatisticShowcase() {
       </section>
 
       <section className={panelClass}>
-        <StatisticGrid columns={3}>
-          <StatisticCard label="Revenue" value="$24.8k" change="+12.4%" trend="up" description="vs last 30 days" />
-          <StatisticCard label="Errors" value="14" change="-3.1%" trend="down" description="production incidents" />
-          <StatisticCard label="Adoption" value="86%" description="workspace activation rate" action={<Badge variant="secondary">Live</Badge>} />
+        <div className="mb-4 flex flex-wrap gap-2">
+          <Button size="sm" variant={loading ? "default" : "outline"} onClick={() => setLoading((value) => !value)}>
+            {loading ? "Resolve data" : "Show loading"}
+          </Button>
+          {([1, 2, 3, 4] as const).map((value) => (
+            <Button key={value} size="sm" variant={columns === value ? "default" : "outline"} onClick={() => setColumns(value)}>
+              {value} column{value > 1 ? "s" : ""}
+            </Button>
+          ))}
+        </div>
+        <StatisticGrid columns={columns}>
+          <StatisticCard loading={loading} label="Revenue" prefix="$" value="24.8k" change="+12.4%" trend="up" description="vs last 30 days" />
+          <StatisticCard loading={loading} label="Errors" value="14" change="-3.1%" trend="down" description="production incidents" />
+          <StatisticCard loading={loading} label="Adoption" value="86" suffix="%" change="No change" trend="neutral" description="workspace activation rate" action={<Badge variant="secondary">Live</Badge>} />
         </StatisticGrid>
       </section>
 
@@ -46,9 +61,9 @@ export function StatisticShowcase() {
 
       <section className={panelClass}>
         <div className="grid gap-6 xl:grid-cols-[1fr_240px]">
-          <TrendCard title="Release velocity" value="24" change="+3" trend="up" description="completed this sprint" sparkline={[8, 10, 9, 14, 18, 19, 24]} />
+          <StatisticCard label="Release velocity" value="24" change="+3" trend="up" description="completed this sprint" />
           <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
-            <ProgressRing value={76} label="76%" description="coverage" tone="success" />
+            <ProgressCircle value={76} label="76%" description="coverage" tone="success" />
           </div>
         </div>
       </section>

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

@@ -1,12 +1,13 @@
 import * as React from "react"
 
-import { Button, Tag } from "@/index"
+import { Button } from "@/index"
+import { Tag } from "@/components/display/tag"
 
 export function TagShowcase() {
   const all = [
-    { key: "team", label: "Team", tone: "info" as const },
+    { key: "team", label: "Design team", tone: "info" as const },
     { key: "ready", label: "Ready", tone: "success" as const },
-    { key: "warn", label: "Warn", tone: "warning" as const },
+    { key: "warn", label: "Needs review", tone: "warning" as const },
     { key: "block", label: "Blocked", tone: "danger" as const },
   ]
   const [items, setItems] = React.useState(all)
@@ -15,23 +16,53 @@ export function TagShowcase() {
   const reset = () => setItems(all)
 
   return (
-    <div className="space-y-4">
-      <div className="rounded-lg border border-border bg-card p-4">
-        <div className="mb-4 flex items-center justify-between gap-3">
-          <p className="text-sm font-medium text-foreground">Filter tags</p>
+    <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-5 lg:flex-row lg:items-start lg:justify-between">
+          <div className="max-w-xl">
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Metadata</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Tags should stay compact and removable</h3>
+            <p className="mt-3 text-sm leading-6 aui-text-muted">
+              Use tags for filters, topics, and lightweight status metadata where the user may need to remove a single token.
+            </p>
+          </div>
           <Button size="sm" variant="outline" onClick={reset}>
             Reset
           </Button>
         </div>
-        <div className="flex flex-wrap gap-2">
+
+        <div className="mt-6 flex flex-wrap gap-2">
           {items.map((item) => (
             <Tag key={item.key} tone={item.tone} removable onRemove={() => remove(item.key)}>
               {item.label}
             </Tag>
           ))}
-          {items.length === 0 ? <span className="text-sm text-muted-foreground">No filters</span> : null}
+          {items.length === 0 ? <span className="text-sm aui-text-muted">No filters</span> : null}
+        </div>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-2">
+        <div className="rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Sizes</p>
+          <div className="mt-4 flex flex-wrap items-center gap-2">
+            <Tag size="sm">Small</Tag>
+            <Tag>Default</Tag>
+            <Tag size="lg">Large</Tag>
+            <Tag selected>Selected</Tag>
+          </div>
+        </div>
+
+        <div className="rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Tones</p>
+          <div className="mt-4 flex flex-wrap items-center gap-2">
+            <Tag tone="neutral">Neutral</Tag>
+            <Tag tone="info">Info</Tag>
+            <Tag tone="success">Success</Tag>
+            <Tag tone="warning">Warning</Tag>
+            <Tag tone="danger">Danger</Tag>
+          </div>
         </div>
-      </div>
+      </section>
     </div>
   )
 }

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

@@ -1,4 +1,4 @@
-import { Blockquote, Heading, Mark, Spoiler, SpoilerSummary, Text } from "@/index"
+import { Blockquote, Heading, Mark, Spoiler, SpoilerSummary, Text } from "@/components/display/typography"
 
 export function TypographyShowcase() {
   return (

package/packages/cli/vendor/src/showcase/preview-catalog.tsx

@@ -12,8 +12,8 @@ export const previewSurfaceCatalog: PreviewSurfaceRecord[] = [
   {
     slug: "dashboard-01",
     title: "Dashboard with sidebar",
-    command: "npx tembro init --template next --defaults\nnpx tembro add sidebar metric-grid data-table",
-    code: `import { Sidebar } from "@/components/layout/sidebar"\nimport { MetricGrid } from "@/components/display/metric-grid"\n\nexport function Dashboard01() {\n  return <Sidebar />\n}`,
+    command: "npx tembro init --template next --defaults\nnpx tembro add sidebar statistic data-table",
+    code: `import { Sidebar } from "tembro"\n\nexport function Dashboard01() {\n  return <Sidebar />\n}`,
     tone: "dashboard",
   },
   {

package/packages/cli/vendor/src/showcase/preview-compositions.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { InfoCard } from "@/components/display/info-card"
+import { FileUpload } from "@/components/upload/file-upload"
+
+type PreviewStatCardProps = {
+  title?: React.ReactNode
+  value?: React.ReactNode
+  description?: React.ReactNode
+  trend?: { value: React.ReactNode; tone?: string }
+  helperText?: React.ReactNode
+  icon?: React.ReactNode
+}
+
+export function PreviewStatCard({ title, value, description, trend, helperText, icon }: PreviewStatCardProps) {
+  return <InfoCard eyebrow={title} title={value} description={description} icon={icon} status={trend?.value} content={helperText} density="compact" />
+}
+
+type PreviewPropertyItem = { key: string; label: React.ReactNode; value: React.ReactNode; description?: React.ReactNode }
+
+export function PreviewPropertyGrid({ items }: { items: PreviewPropertyItem[]; columns?: 1 | 2 | 3 | 4; bordered?: boolean }) {
+  return (
+    <dl className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      {items.map((item) => (
+        <div key={item.key} className="min-w-0 border p-3">
+          <dt className="text-xs text-muted-foreground">{item.label}</dt>
+          <dd className="mt-1 break-words text-sm font-medium">{item.value}</dd>
+          {item.description ? <p className="mt-1 text-xs text-muted-foreground">{item.description}</p> : null}
+        </div>
+      ))}
+    </dl>
+  )
+}
+
+export function PreviewFileDropzone({ label, description, accept }: { label?: React.ReactNode; description?: React.ReactNode; accept?: string }) {
+  return <FileUpload files={[]} onFilesChange={() => undefined} accept={accept} dropzoneLabel={label} dropzoneDescription={description} showFileList={false} />
+}

package/packages/cli/vendor/src/showcase/registry-quality.ts

@@ -17,17 +17,7 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("drawer", "Drawer", "overlay", "Side panel for contextual details without leaving the page."),
 
   component("pagination", "Pagination", "navigation", "Controlled page navigation with edge buttons and active state."),
-  component("nav-tabs", "NavTabs", "navigation", "Navigation tabs for switching related document sections."),
-  component("page-tabs", "PageTabs", "navigation", "Top-level page tab strip for route-sized sections."),
-  component("stepper-tabs", "StepperTabs", "navigation", "Step-like tabs for setup and onboarding progress."),
-
-  component("password-input", "PasswordInput", "inputs", "Password field with visibility toggle and secure autocomplete defaults."),
-  component("number-input", "NumberInput", "inputs", "Numeric entry for counts, thresholds, and reporting controls."),
-  component("phone-input", "PhoneInput", "inputs", "Phone input with stable raw and masked value handling."),
-  component("money-input", "MoneyInput", "inputs", "Currency entry for billing, finance and KPI editing flows."),
-  component("simple-select", "SimpleSelect", "inputs", "Static local-option select for dashboards and settings forms."),
   component("async-select", "AsyncSelect", "inputs", "Remote-loaded select for large server-backed option sets."),
-  component("combobox", "Combobox", "inputs", "Searchable local choice input for reassignment and command-like selection."),
   component("slider", "Slider", "inputs", "Single value range control for density, threshold, and score tuning."),
   component("range-slider", "RangeSlider", "inputs", "Two-handle slider for min/max filtering."),
   component("rating", "Rating", "inputs", "Compact score input for feedback and review flows."),
@@ -36,37 +26,30 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   component("tag-input", "TagInput", "inputs", "Tokenized text input for labels, skills, and quick filters."),
 
   component("progress", "Progress", "display", "Linear progress with label, value formatter, tone and indeterminate state."),
-  component("progress-circle", "ProgressCircle", "display", "Compact circular progress for sidebars and status cards."),
   component("timeline", "Timeline", "display", "Vertical or horizontal event stream for workflow history."),
   component("status-dot", "StatusDot", "display", "Tiny live status indicator with optional pulse animation."),
-  component("user-card", "UserCard", "display", "User summary row with avatar, metadata and actions."),
   component("notification-center", "NotificationCenter", "display", "Compact activity and notifications stream."),
-  component("data-list", "DataList", "display", "Readable title and description rows for compact operational lists."),
   component("status-legend", "StatusLegend", "display", "Explain status meaning and counts in a compact legend."),
-  component("trend-card", "TrendCard", "display", "Metric summary card with trend context."),
 
   component("action-menu", "ActionMenu", "actions", "Compact dropdown action menu for rows and cards."),
   component("button-group", "ButtonGroup", "actions", "Grouped action buttons for view switching and compact controls."),
   component("quick-action-grid", "QuickActionGrid", "actions", "Action launcher grid for dense dashboard shortcuts."),
   component("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
 
-  component("app-header", "AppHeader", "layout", "Sticky product header with left, center and right slots."),
-  component("app-shell", "AppShell", "layout", "Responsive application shell with sidebar, header and content regions."),
-  component("section-header", "SectionHeader", "layout", "Reusable section title block with actions and metadata."),
-  component("stat-card", "StatCard", "layout", "Dashboard stat card for KPI, trend and helper text."),
-
-  component("alert", "Alert", "feedback", "Inline feedback banner for success, warning, info, and error states."),
-  component("page-state", "PageState", "feedback", "Full-page completion or blocked state with next actions."),
+  component("alert", "Alert", "feedback", "Inline feedback banner for success, warning, info, and error states."),
+  component("page-state", "PageState", "feedback", "Full-page completion or blocked state with next actions."),
+  component("empty-state", "EmptyState", "patterns", "Focused empty and error state with clear next actions."),
 
   component("calendar", "Calendar", "calendar", "Single month calendar surface for date picker and scheduling flows."),
 
   component("file-upload", "FileUpload", "upload", "Full file upload surface with dropzone, action button and helper text."),
   component("image-upload", "ImageUpload", "upload", "Image upload pattern with preview-oriented copy."),
-  component("file-dropzone", "FileDropzone", "upload", "Lightweight file dropzone primitive for custom upload flows."),
 
   component("stepper", "Stepper", "wizard", "Clickable step navigation for multi-step forms."),
   component("wizard", "Wizard", "wizard", "Stepper, content and footer controls combined into one workflow."),
 
-  component("resource-page", "ResourcePage", "patterns", "Full resource index page shell for admin dashboards."),
-  component("resource-detail-page", "ResourceDetailPage", "patterns", "Detail page shell with title, metadata and sections."),
-])
+  component("resource-page", "ResourcePage", "patterns", "Full resource index page shell for admin dashboards."),
+  component("resource-detail-page", "ResourceDetailPage", "patterns", "Detail page shell with title, metadata and sections."),
+  component("page-toolbar", "PageToolbar", "patterns", "Reusable page toolbar for search, filters, view controls and actions."),
+  component("data-view", "DataView", "patterns", "Data view shell that combines toolbar, table, loading, error and empty states."),
+])

package/packages/cli/vendor/src/showcase/registry-specific.tsx

@@ -21,38 +21,33 @@ import {
   Calendar,
   DescriptionList,
   Drawer,
-  FileDropzone,
   FileUpload,
   ImageUpload,
   FilterBar,
   InfoCard,
   Input,
   List,
-  NavTabs,
   OtpInput,
   PageState,
-  PageTabs,
   Pagination,
   Progress,
-  ProgressCircle,
   QuickActionGrid,
   RangeSlider,
   Rating,
   SavedFilterSelect,
-  SectionHeader,
   Slider,
-  Select,
   StatusDot,
   StatusLegend,
   Stepper,
-  StepperTabs,
   TagInput,
+  Tabs,
+  TabsList,
+  TabsTrigger,
   Timeline,
-  UserCard,
   Wizard,
+  Avatar,
 } from "@/index"
-import { AppHeader } from "@/components/layout/app-header"
-import { StatCard } from "@/components/layout/stat-card"
+import { PreviewFileDropzone as FileDropzone, PreviewStatCard as StatCard } from "@/showcase/preview-compositions"
 import { FormBuilder, customField, formSection } from "@/components/patterns/form-builder"
 import { ResourceDetailPage } from "@/components/patterns/resource-detail-page"
 import { ResourcePage, ResourcePageSection } from "@/components/patterns/resource-page"
@@ -90,44 +85,30 @@ const registryDemoDefinitions = [
   component("alert-dialog", "AlertDialog", "overlay", "Destructive confirmation dialog with loading-ready action states."),
   component("drawer", "Drawer", "overlay", "Side panel for contextual details without leaving the page."),
   component("pagination", "Pagination", "navigation", "Controlled page navigation with edge buttons and active state."),
-  component("nav-tabs", "NavTabs", "navigation", "Navigation tabs for switching related document sections."),
-  component("search-input", "SearchInput", "inputs", "Search field with icon, count, shortcut and debounce-friendly value handling."),
-  component("password-input", "PasswordInput", "inputs", "Password field with visibility toggle and secure autocomplete defaults."),
   component("slider", "Slider", "inputs", "Single value range control for density, threshold, and score tuning."),
   component("range-slider", "RangeSlider", "inputs", "Two-handle slider for min/max filtering."),
   component("rating", "Rating", "inputs", "Compact score input for feedback and review flows."),
   component("otp-input", "OtpInput", "inputs", "One-time code entry with fixed-length slots."),
   component("tag-input", "TagInput", "inputs", "Tokenized text input for labels, skills, and quick filters."),
   component("progress", "Progress", "display", "Linear progress with label, value formatter, tone and indeterminate state."),
-  component("progress-circle", "ProgressCircle", "display", "Compact circular progress for sidebars and status cards."),
   component("timeline", "Timeline", "display", "Vertical or horizontal event stream for workflow history."),
   component("status-dot", "StatusDot", "display", "Tiny live status indicator with optional pulse animation."),
-  component("user-card", "UserCard", "display", "User summary row with avatar, metadata and actions."),
   component("notification-center", "NotificationCenter", "display", "Compact activity and notifications stream."),
-  component("data-list", "DataList", "display", "Readable title and description rows for compact operational lists."),
   component("status-legend", "StatusLegend", "display", "Explain status meaning and counts in a compact legend."),
-  component("trend-card", "TrendCard", "display", "Metric summary card with trend context."),
   component("action-menu", "ActionMenu", "actions", "Compact dropdown action menu for rows and cards."),
   component("button-group", "ButtonGroup", "actions", "Grouped action buttons for view switching and compact controls."),
   component("quick-action-grid", "QuickActionGrid", "actions", "Action launcher grid for dense dashboard shortcuts."),
-  component("app-header", "AppHeader", "layout", "Sticky product header with left, center and right slots."),
-  component("section-header", "SectionHeader", "layout", "Reusable section title block with actions and metadata."),
-  component("stat-card", "StatCard", "layout", "Dashboard stat card for KPI, trend and helper text."),
   component("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
-  component("page-tabs", "PageTabs", "navigation", "Top-level page tab strip for route-sized sections."),
-  component("stepper-tabs", "StepperTabs", "navigation", "Step-like tabs for setup and onboarding progress."),
   component("alert", "Alert", "feedback", "Inline feedback banner for success, warning, info, and error states."),
   component("page-state", "PageState", "feedback", "Full-page completion or blocked state with next actions."),
   component("form-builder", "FormBuilder", "patterns", "Declarative form scaffold with sections and reusable field presets."),
   component("calendar", "Calendar", "calendar", "Single month calendar surface for date picker and scheduling flows."),
   component("file-upload", "FileUpload", "upload", "Full file upload surface with dropzone, action button and helper text."),
   component("image-upload", "ImageUpload", "upload", "Image upload pattern with preview-oriented copy.", "ImageUpload"),
-  component("file-dropzone", "FileDropzone", "upload", "Lightweight file dropzone primitive for custom upload flows."),
   component("stepper", "Stepper", "wizard", "Clickable step navigation for multi-step forms."),
   component("wizard", "Wizard", "wizard", "Stepper, content and footer controls combined into one workflow."),
   component("resource-page", "ResourcePage", "patterns", "Full resource index page shell for admin dashboards."),
   component("resource-detail-page", "ResourceDetailPage", "patterns", "Detail page shell with title, metadata and sections."),
-  component("quantity-stepper", "Input", "inputs", "Bounded quantity input with +/- controls and fast editing."),
 ] satisfies RegistryDemoDefinition[]
 
 export const registrySpecificDemoRegistry: Record<string, ComponentDemoBundle> = Object.fromEntries(
@@ -251,14 +232,6 @@ function InputPreview({
   const value = state.textValue
   const onValueChange = (nextValue: string) => setState({ textValue: nextValue })
 
-  if (slug === "search-input") {
-    return <Input type="search" value={value} onValueChange={onValueChange} resultCount={12} shortcut="Ctrl K" placeholder="Search customers..." />
-  }
-
-  if (slug === "password-input") {
-    return <Input kind="password" value="secret-token" onValueChange={onValueChange} placeholder="Password" />
-  }
-
   if (slug === "slider") {
     return <Slider label="Density" description="Tune content density." defaultValue={64} showValue />
   }
@@ -275,39 +248,10 @@ function InputPreview({
     return <OtpInput value={value.replace(/\D/g, "").slice(0, 6)} onValueChange={onValueChange} />
   }
 
-  if (slug === "quantity-stepper") {
-    return <Input kind="quantity" value={3} min={1} max={10} showControls aria-label="Quantity" />
-  }
-
   if (slug === "tag-input") {
     return <TagInput defaultValue={["dashboard", "beta", "ops"]} placeholder="Add label" />
   }
 
-  if (slug === "simple-select") {
-    return (
-      <div className="grid gap-4">
-        <Select
-          value="private"
-          onValueChange={() => undefined}
-          options={[
-            { value: "public", label: "Public", description: "Visible to all users" },
-            { value: "private", label: "Private", description: "Restricted to invited members" },
-            { value: "internal", label: "Internal", description: "Only workspace maintainers" },
-            { value: "archived", label: "Archived", description: "History only", disabled: true },
-          ]}
-          placeholder="Visibility"
-          searchable
-          clearable
-        />
-        <div className="grid gap-3 md:grid-cols-3">
-          <div className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm aui-text-muted">Static options with lightweight search.</div>
-          <div className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm aui-text-muted">Clear action stays inside the trigger surface.</div>
-          <div className="rounded-2xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm aui-text-muted">Use before moving to AsyncSelect.</div>
-        </div>
-      </div>
-    )
-  }
-
   if (slug === "async-select") {
     const asyncSelectOptions = [
       { value: "north" as const, label: "North Region", description: "Sales ops" },
@@ -408,42 +352,14 @@ function NavigationPreview({ slug }: { slug: string }) {
     return <Pagination page={3} pageCount={9} onPageChange={() => undefined} />
   }
 
-  if (slug === "page-tabs") {
-    return (
-      <PageTabs
-        value="overview"
-        variant="pills"
-        items={[
-          { value: "overview", label: "Overview" },
-          { value: "usage", label: "Usage" },
-          { value: "api", label: "API", badge: "3" },
-        ]}
-      />
-    )
-  }
-
-  if (slug === "stepper-tabs") {
-    return (
-      <StepperTabs
-        value="billing"
-        items={[
-          { value: "profile", label: "Profile", description: "Team and owner details", completed: true },
-          { value: "billing", label: "Billing", description: "Payment and invoices" },
-          { value: "review", label: "Review", description: "Confirm release" },
-        ]}
-      />
-    )
-  }
-
   return (
-    <NavTabs
-      value="overview"
-      items={[
-        { value: "overview", label: "Overview" },
-        { value: "usage", label: "Usage" },
-        { value: "api", label: "API" },
-      ]}
-    />
+    <Tabs defaultValue="overview">
+      <TabsList variant="pills" overflow="wrap">
+        <TabsTrigger value="overview" variant="pills">Overview</TabsTrigger>
+        <TabsTrigger value="usage" variant="pills">Usage</TabsTrigger>
+        <TabsTrigger value="api" variant="pills">API</TabsTrigger>
+      </TabsList>
+    </Tabs>
   )
 }
 
@@ -478,10 +394,6 @@ function DisplayPreview({ slug }: { slug: string }) {
     return <Progress label="Migration progress" description="Production rollout" value={68} tone="success" showValue />
   }
 
-  if (slug === "progress-circle") {
-    return <ProgressCircle value={72} label="Profile completed" />
-  }
-
   if (slug === "timeline") {
     return (
       <Timeline
@@ -524,18 +436,6 @@ function DisplayPreview({ slug }: { slug: string }) {
   }
 
 
-  if (slug === "data-list") {
-    return (
-      <List
-        items={[
-          { key: "1", title: "Enterprise plan", description: "Priority support and SSO", extra: "$499" },
-          { key: "2", title: "Growth plan", description: "Most used by product teams", extra: "$199" },
-          { key: "3", title: "Starter plan", description: "Lightweight team setup", extra: "$49" },
-        ]}
-      />
-    )
-  }
-
   if (slug === "status-legend") {
     return (
       <StatusLegend
@@ -551,10 +451,6 @@ function DisplayPreview({ slug }: { slug: string }) {
     )
   }
 
-  if (slug === "trend-card") {
-    return <StatCard title={slug === "trend-card" ? "Weekly revenue" : "Current vs previous"} value="$84.2k" description="Compared with last month" trend={{ value: "+12.4%", tone: "success" }} icon={<LayoutDashboardIcon />} />
-  }
-
   if (slug === "info-card") {
     return (
       <div className="grid gap-4">
@@ -576,7 +472,14 @@ function DisplayPreview({ slug }: { slug: string }) {
     )
   }
 
-  return <UserCard name="Azamat Jurayev" description="Product designer and maintainer" meta="Admin workspace" actions={<Button size="sm">Invite</Button>} />
+  return (
+    <InfoCard
+      title="Azamat Jurayev"
+      description="Product designer and maintainer"
+      media={<Avatar name="Azamat Jurayev" />}
+      actions={<Button size="sm">Invite</Button>}
+    />
+  )
 }
 
 function ActionsPreview({
@@ -671,20 +574,20 @@ function ActionsPreview({
 function LayoutPreview({ slug }: { slug: string }) {
   if (slug === "app-header") {
     return (
-      <AppHeader
-        sticky={false}
-        left={<><LayoutDashboardIcon className="size-4" /><span className="font-medium">Dashboard</span></>}
-        center={<Badge variant="secondary">Preview</Badge>}
-        right={<><Button variant="ghost" size="icon-sm" aria-label="Notifications"><BellIcon /></Button><Button size="sm">Deploy</Button></>}
-        className="rounded-xl border border-[color:var(--aui-divider)]"
-      />
+      <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-3">
+        <div className="flex items-center gap-2">
+          <LayoutDashboardIcon className="size-4" />
+          <span className="font-medium">Dashboard</span>
+        </div>
+        <Badge variant="secondary">Preview</Badge>
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="icon-sm" aria-label="Notifications"><BellIcon /></Button>
+          <Button size="sm">Deploy</Button>
+        </div>
+      </div>
     )
   }
 
-  if (slug === "section-header") {
-    return <SectionHeader eyebrow="Components" title="Production-ready surfaces" description="SectionHeader keeps copy, metadata and actions aligned." actions={<Button size="sm">Add component</Button>} />
-  }
-
   return (
     <StatCard
       title="Revenue"
@@ -740,10 +643,6 @@ function CalendarPreview() {
 }
 
 function UploadPreview({ slug }: { slug: string }) {
-  if (slug === "file-dropzone") {
-    return <FileDropzone label="Drop contract files" description="PDF, PNG or CSV up to 10MB." />
-  }
-
   if (slug === "file-upload") {
     return (
       <div className="grid gap-4">