tembro 2.0.6 → 2.1.1

package/packages/cli/vendor/src/showcase/component-api-schema.ts

@@ -29,14 +29,16 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
       { name: "variant", type: "'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'warning' | 'link'", defaultValue: "'default'", description: "Controls visual hierarchy and action tone.", example: "variant=\"destructive\"" },
       { name: "size", type: "'xs' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'", defaultValue: "'default'", description: "Controls height, spacing and icon-only sizing.", example: "size=\"icon-sm\"" },
       { name: "loading", type: "boolean", defaultValue: "false", description: "Shows the spinner, disables interaction and communicates pending state.", example: "loading={isSaving}" },
-      { name: "loadingLabel", type: "string", defaultValue: "'Loading'", description: "Accessible label displayed while the button is loading.", example: "loadingLabel=\"Saving\"" },
-      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables the action and removes it from normal interaction.", example: "disabled={!canSubmit}" },
-      { name: "leftIcon", type: "ReactNode", defaultValue: "-", description: "Icon rendered before the label. Use for primary verbs and scan-friendly actions." },
-      { name: "rightIcon", type: "ReactNode", defaultValue: "-", description: "Icon rendered after the label. Use for forward navigation or external transitions." },
-      { name: "asChild", type: "boolean", defaultValue: "false", description: "Renders the visual button style on a child element for link or router composition.", example: "asChild" },
-      { name: "className", type: "string", defaultValue: "-", description: "Optional class override for spacing or layout composition." },
-      { name: "children", type: "ReactNode", defaultValue: "-", required: true, description: "Button label or icon content. Icon-only buttons must still provide an accessible name." },
-      { name: "aria-label", type: "string", defaultValue: "-", description: "Required for icon-only buttons so the action is announced correctly.", notes: "Use when children are only icons." },
+      { name: "loadingLabel", type: "string", defaultValue: "'Loading'", description: "Accessible label displayed while the button is loading.", example: "loadingLabel=\"Saving\"" },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables the action and removes it from normal interaction.", example: "disabled={!canSubmit}" },
+      { name: "leftIcon", type: "ReactNode", defaultValue: "-", description: "Icon rendered before the label. Use for primary verbs and scan-friendly actions." },
+      { name: "rightIcon", type: "ReactNode", defaultValue: "-", description: "Icon rendered after the label. Use for forward navigation or external transitions." },
+      { name: "iconOnly", type: "boolean", defaultValue: "false", description: "Switches default sizing to the icon button size while keeping Button semantics.", example: "iconOnly aria-label=\"Download\"" },
+      { name: "fullWidth", type: "boolean", defaultValue: "false", description: "Expands the button to fill its parent width.", example: "fullWidth" },
+      { name: "pressed", type: "boolean", defaultValue: "false", description: "Marks toggle-like button state with aria-pressed and selected styling.", example: "pressed={active}" },
+      { name: "className", type: "string", defaultValue: "-", description: "Optional class override for spacing or layout composition." },
+      { name: "children", type: "ReactNode", defaultValue: "-", required: true, description: "Button label or icon content. Icon-only buttons must still provide an accessible name." },
+      { name: "aria-label", type: "string", defaultValue: "-", description: "Required for icon-only buttons so the action is announced correctly.", notes: "Use when children are only icons." },
     ],
     examples: [
       { title: "Primary action", code: "<Button>Save changes</Button>" },
@@ -51,18 +53,24 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
     source: "metadata",
     summary: "Primary typed-value surface. Start with Input and move into presets only when behavior requires it.",
     props: [
-      { name: "value", type: "string | number", defaultValue: "-", description: "Controlled input value.", example: "value={name}" },
-      { name: "defaultValue", type: "string | number", defaultValue: "-", description: "Uncontrolled initial value." },
-      { name: "onChange", type: "ChangeEventHandler<HTMLInputElement>", defaultValue: "-", description: "Native change handler for value updates.", example: "onChange={(event) => setValue(event.target.value)}" },
-      { name: "onValueChange", type: "(value: string) => void", defaultValue: "-", description: "Direct text callback for controlled string flows.", example: "onValueChange={setQuery}" },
-      { name: "type", type: "HTMLInputTypeAttribute", defaultValue: "'text'", description: "Native input type. Prefer presets only when formatting or masking is required." },
-      { name: "placeholder", type: "string", defaultValue: "-", description: "Short hint for empty input state." },
-      { name: "clearable", type: "boolean", defaultValue: "false", description: "Shows the built-in clear action when a value exists.", example: "clearable" },
-      { name: "onClear", type: "() => void", defaultValue: "-", description: "Called after the built-in clear action resets the field." },
-      { name: "trailingAction", type: "ReactNode", defaultValue: "-", description: "Interactive trailing slot for counters, shortcuts, or toggle actions.", example: "trailingAction={<span>12 results</span>}" },
-      { name: "replaceTrailingWhenClear", type: "boolean", defaultValue: "true", description: "Controls whether clear replaces trailing content or sits beside it." },
-      { name: "clearOnEscape", type: "boolean", defaultValue: "false", description: "Clears the value on Escape when clearable mode is active." },
-      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables editing and interaction." },
+      { name: "value", type: "string | number", defaultValue: "-", description: "Controlled input value.", example: "value={name}" },
+      { name: "defaultValue", type: "string | number", defaultValue: "-", description: "Uncontrolled initial value." },
+      { name: "kind", type: "'text' | 'search' | 'password' | 'number' | 'phone' | 'money' | 'quantity' | 'masked' | 'date' | 'date-range'", defaultValue: "'text'", description: "Routes Input into a supported preset without teaching a new public component name first.", example: "kind=\"search\"" },
+      { name: "onChange", type: "ChangeEventHandler<HTMLInputElement>", defaultValue: "-", description: "Native change handler for value updates.", example: "onChange={(event) => setValue(event.target.value)}" },
+      { name: "onValueChange", type: "(value: string) => void", defaultValue: "-", description: "Direct text callback for controlled string flows.", example: "onValueChange={setQuery}" },
+      { name: "type", type: "HTMLInputTypeAttribute", defaultValue: "'text'", description: "Native input type. Prefer presets only when formatting or masking is required." },
+      { name: "placeholder", type: "string", defaultValue: "-", description: "Short hint for empty input state." },
+      { name: "leading", type: "ReactNode", defaultValue: "-", description: "Non-interactive leading slot for icons, prefixes, or labels." },
+      { name: "trailing", type: "ReactNode", defaultValue: "-", description: "Passive trailing slot for units, counts, or status copy." },
+      { name: "clearable", type: "boolean", defaultValue: "false", description: "Shows the built-in clear action when a value exists.", example: "clearable" },
+      { name: "onClear", type: "() => void", defaultValue: "-", description: "Called after the built-in clear action resets the field." },
+      { name: "trailingAction", type: "ReactNode", defaultValue: "-", description: "Interactive trailing slot for counters, shortcuts, or toggle actions.", example: "trailingAction={<span>12 results</span>}" },
+      { name: "replaceTrailingWhenClear", type: "boolean", defaultValue: "true", description: "Controls whether clear replaces trailing content or sits beside it." },
+      { name: "clearOnEscape", type: "boolean", defaultValue: "false", description: "Clears the value on Escape when clearable mode is active." },
+      { name: "helperText", type: "ReactNode", defaultValue: "-", description: "Support copy rendered below the field." },
+      { name: "errorText", type: "ReactNode", defaultValue: "-", description: "Validation copy rendered below the field and connected to danger styling." },
+      { name: "showCharacterCount", type: "boolean", defaultValue: "false", description: "Shows current length and maxLength when available." },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables editing and interaction." },
       { name: "required", type: "boolean", defaultValue: "false", description: "Marks the input as required for native validation." },
       { name: "name", type: "string", defaultValue: "-", description: "Form field name used during submission." },
       { name: "id", type: "string", defaultValue: "-", description: "Connects input to label and help text." },
@@ -75,27 +83,57 @@ export const componentApiSchemas: Record<string, ComponentApiSchema> = {
     ],
     accessibility: ["Always pair form inputs with labels.", "Use aria-describedby for helper/error text.", "Keep disabled and read-only states visually distinct."],
   },
-  select: {
-    slug: "select",
-    source: "metadata",
-    summary: "Primary selection surface. Start with Select and move into members only when async loading, multi-selection, or command-style filtering is required.",
-    props: [
-      { name: "value", type: "string | string[]", defaultValue: "-", description: "Controlled selected value. Multi-select uses an array." },
-      { name: "defaultValue", type: "string | string[]", defaultValue: "-", description: "Uncontrolled initial selected value." },
-      { name: "onValueChange", type: "(value: string | string[]) => void", defaultValue: "-", description: "Called when the selected value changes.", example: "onValueChange={setStatus}" },
-      { name: "options", type: "Array<{ label: string; value: string; disabled?: boolean }>", defaultValue: "[]", required: true, description: "Selectable option list." },
-      { name: "placeholder", type: "string", defaultValue: "-", description: "Text shown when no value is selected." },
-      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables the control and option selection." },
-      { name: "searchable", type: "boolean", defaultValue: "false", description: "Enables local filtering on the main Select surface." },
-      { name: "multiple", type: "boolean", defaultValue: "false", description: "Allows multiple values when the active member supports it." },
-    ],
-    examples: [
-      { title: "Primary select", code: "<Select value={status} onValueChange={setStatus} options={statusOptions} />" },
-      { title: "Searchable primary select", code: "<Select value={owner} onValueChange={setOwner} searchable options={ownerOptions} />" },
-      { title: "Async member direction", code: "// Prefer Select first; use AsyncSelect only when remote loading is required." },
-    ],
-    accessibility: ["Use clear option labels.", "Keep disabled options visible but not selectable.", "Do not replace long forms with hidden select menus."],
-  },
+  select: {
+    slug: "select",
+    source: "metadata",
+    summary: "Primary single-selection surface. Start with Select for finite option sets, then use AsyncSelect with isMulti only when remote loading or multi-value behavior is required.",
+    props: [
+      { name: "value", type: "string | null", defaultValue: "-", description: "Controlled selected value." },
+      { name: "defaultValue", type: "string | null", defaultValue: "-", description: "Uncontrolled initial selected value." },
+      { name: "onValueChange", type: "(value: string | undefined) => void", defaultValue: "-", description: "Called when the selected value changes.", example: "onValueChange={setStatus}" },
+      { name: "options", type: "Array<{ label: string; value: string; disabled?: boolean }>", defaultValue: "[]", required: true, description: "Selectable option list." },
+      { name: "groups", type: "Array<{ label?: ReactNode; options: SelectOption[] }>", defaultValue: "-", description: "Grouped selectable options for longer finite lists." },
+      { name: "placeholder", type: "string", defaultValue: "-", description: "Text shown when no value is selected." },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables the control and option selection." },
+      { name: "searchable", type: "boolean", defaultValue: "false", description: "Enables local filtering on the main Select surface." },
+      { name: "clearable", type: "boolean", defaultValue: "false", description: "Shows a clear action when a value is selected." },
+      { name: "loading", type: "boolean", defaultValue: "false", description: "Disables selection and renders a loading state." },
+      { name: "emptyLabel", type: "ReactNode", defaultValue: "'No options found'", description: "Empty state content for local filtering." },
+      { name: "emptyMessage", type: "ReactNode", defaultValue: "-", description: "Alias for empty state content used by newer docs." },
+      { name: "renderOption", type: "(option, state) => ReactNode", defaultValue: "-", description: "Custom option renderer for richer rows." },
+    ],
+    examples: [
+      { title: "Primary select", code: "<Select value={status} onValueChange={setStatus} options={statusOptions} />" },
+      { title: "Searchable primary select", code: "<Select value={owner} onValueChange={setOwner} searchable options={ownerOptions} />" },
+      { title: "Grouped select", code: "<Select value={region} onValueChange={setRegion} groups={regionGroups} searchable />" },
+      { title: "Async member direction", code: "// Prefer Select first; use AsyncSelect only when remote loading is required." },
+    ],
+    accessibility: ["Use clear option labels.", "Keep disabled options visible but not selectable.", "Do not replace long forms with hidden select menus."],
+  },
+  textarea: {
+    slug: "textarea",
+    source: "metadata",
+    summary: "Multi-line text entry surface with helper, error, read-only, disabled and character-count support.",
+    props: [
+      { name: "value", type: "string", defaultValue: "-", description: "Controlled textarea value." },
+      { name: "defaultValue", type: "string", defaultValue: "-", description: "Uncontrolled initial value." },
+      { name: "onChange", type: "ChangeEventHandler<HTMLTextAreaElement>", defaultValue: "-", description: "Native change handler." },
+      { name: "onValueChange", type: "(value: string) => void", defaultValue: "-", description: "Direct text callback for controlled flows." },
+      { name: "rows", type: "number", defaultValue: "-", description: "Initial visible row count." },
+      { name: "maxLength", type: "number", defaultValue: "-", description: "Native maximum character length." },
+      { name: "helperText", type: "ReactNode", defaultValue: "-", description: "Support copy rendered below the field." },
+      { name: "errorText", type: "ReactNode", defaultValue: "-", description: "Validation copy rendered below the field and danger styling." },
+      { name: "showCharacterCount", type: "boolean", defaultValue: "false", description: "Shows current length and maxLength when available." },
+      { name: "disabled", type: "boolean", defaultValue: "false", description: "Disables editing." },
+      { name: "readOnly", type: "boolean", defaultValue: "false", description: "Keeps content copyable while preventing edits." },
+    ],
+    examples: [
+      { title: "Controlled note", code: "<Textarea value={note} onValueChange={setNote} helperText=\"Internal note\" />" },
+      { title: "Limited feedback", code: "<Textarea maxLength={240} showCharacterCount />" },
+      { title: "Error state", code: "<Textarea errorText=\"Please add at least 10 characters.\" />" },
+    ],
+    accessibility: ["Pair textareas with visible labels.", "Use helper and error copy instead of placeholder-only instructions.", "Keep read-only distinct from disabled."],
+  },
   "data-table": {
     slug: "data-table",
     source: "metadata",

package/packages/cli/vendor/src/showcase/fallback.tsx

@@ -1,8 +1,7 @@
 import {
-  Accordion,
-  Alert,
-  AnchorNav,
-  Avatar,
+  Accordion,
+  Alert,
+  Avatar,
   AvatarGroup,
   Badge,
   Button,
@@ -504,21 +503,7 @@ function renderGenericPreviewSurface(
     )
   }
 
-  if (item.slug === "anchor-nav") {
-    return (
-      <AnchorNav
-        orientation="horizontal"
-        title="Sections"
-        items={[
-          { key: "overview", label: "Overview", href: "#overview", active: true },
-          { key: "usage", label: "Usage", href: "#usage" },
-          { key: "api", label: "API", href: "#api" },
-        ]}
-      />
-    )
-  }
-
-  if (item.slug === "page-tabs") {
+  if (item.slug === "page-tabs") {
     return (
       <PageTabs
         value="overview"

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

@@ -39,6 +39,7 @@ export function AlertShowcase({ mode }: ComponentDemoProps) {
           tone={tone}
           dismissible
           onDismiss={() => setVisible(false)}
+          actionsAlign={tone === "destructive" ? "start" : "end"}
           title={tone === "success" ? "Workspace synced" : tone === "destructive" ? "Action blocked" : tone === "info" ? "Heads up" : "Review needed"}
           description={
             tone === "success"

package/packages/cli/vendor/src/showcase/premium/app-sidebar/showcase.tsx

@@ -82,6 +82,7 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
             mobileToggleLabel="Open workspace menu"
             header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
             footer={<div className="aui-text-muted px-3 py-2 text-xs">Starter plan • 3 editors</div>}
+            footerClassName="bg-[color:var(--aui-page-bg-alt)]/55"
             className="min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"
           />
         </section>

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

@@ -6,9 +6,10 @@ import type { ComponentDemoProps } from "../types"
 import { badgeDemoItems } from "./data"
 
 const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+type BadgeVariant = ComponentDemoProps["state"]["badgeVariant"]
 
 export function BadgeShowcase({ state, setState, mode }: ComponentDemoProps) {
-  const variants = ["default", "secondary", "destructive", "outline", "ghost", "link"] as const
+  const variants: BadgeVariant[] = ["default", "secondary", "soft", "destructive", "outline", "ghost", "link"]
   const activeItem = badgeDemoItems.find((item) => item.variant === state.badgeVariant) ?? badgeDemoItems[0]
   const [chipVisible, setChipVisible] = React.useState(true)
 
@@ -47,7 +48,7 @@ export function BadgeShowcase({ state, setState, mode }: ComponentDemoProps) {
                 key={variant}
                 type="button"
                 size="sm"
-                variant={state.badgeVariant === variant ? "default" : "secondary"}
+                variant={state.badgeVariant === variant ? ("default" as const) : ("secondary" as const)}
                 onClick={() => setState({ badgeVariant: variant })}
               >
                 {variant}
@@ -93,6 +94,7 @@ export function BadgeShowcase({ state, setState, mode }: ComponentDemoProps) {
 
               <div className="flex flex-wrap gap-2 border-t border-[color:var(--aui-divider)] pt-4">
                 <Badge variant="secondary" label="Customers" count={18} />
+                <Badge variant="soft" tone="info" label="Synced" dot />
                 <Badge status="warning" label="Pending approval" />
                 {chipVisible ? (
                   <Badge

package/packages/cli/vendor/src/showcase/premium/badge/types.ts

@@ -1,5 +1,5 @@
 export type BadgeDemoItem = {
   label: string
-  variant: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"
+  variant: "default" | "secondary" | "soft" | "destructive" | "outline" | "ghost" | "link"
   note: string
 }

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

@@ -8,6 +8,8 @@ const pages = [
   { key: "home", label: "Home", href: "/" },
   { key: "apps", label: "Apps", href: "/apps" },
   { key: "workspace", label: "Workspace", href: "/apps/workspace" },
+  { key: "team", label: "Team settings", href: "/apps/workspace/team" },
+  { key: "security", label: "Security", href: "/apps/workspace/team/security" },
   { key: "overview", label: "Overview", current: true },
 ]
 
@@ -52,7 +54,7 @@ export function BreadcrumbsShowcase({ mode }: ComponentDemoProps) {
       ) : null}
 
       <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3">
-        <Breadcrumbs items={selectedItems} separator={separator} />
+        <Breadcrumbs items={selectedItems} separator={separator} maxItems={activeMode === "full" ? 4 : undefined} />
       </div>
     </div>
   )

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

@@ -17,7 +17,7 @@ export function BasicExamples() {
 
       <div className="flex flex-wrap gap-3">
         <Button size="sm">Small</Button>
-        <Button size="icon" aria-label="Download">
+        <Button iconOnly aria-label="Download">
           <DownloadIcon className="size-4" />
         </Button>
         <Button>
@@ -36,9 +36,6 @@ export function BasicExamples() {
       </div>
 
       <div className="flex flex-wrap gap-3">
-        <Button asChild>
-          <a href="/docs">Open docs</a>
-        </Button>
         <a className={buttonVariants({ variant: "outline", size: "sm" })} href="/components">
           Link styled as button
         </a>
@@ -92,4 +89,4 @@ export function ControlledButton() {
     "Supports focus, disabled and loading states for safe async interactions.",
     "Use buttonVariants for non-button elements, but keep Button variant props for real button usage.",
   ],
-}
+}

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

@@ -31,7 +31,7 @@ function VariantRow({
       <div className="flex flex-wrap items-center gap-2">
         <Button variant={variant}>{label}</Button>
         <Button variant={variant} size="sm">Small</Button>
-        <Button variant={variant} size="icon" aria-label={`${label} icon button`}>
+        <Button variant={variant} iconOnly aria-label={`${label} icon button`}>
           <ArrowRightIcon className="size-4" />
         </Button>
       </div>
@@ -220,7 +220,7 @@ export function ButtonShowcase() {
               <Button loading loadingLabel="Publishing">
                 Publish
               </Button>
-              <Button variant="outline" size="icon" aria-label="Download">
+              <Button variant="outline" iconOnly aria-label="Download">
                 <DownloadIcon className="size-4" />
               </Button>
               <a href="#" className={buttonVariants({ variant: "link" })}>

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

@@ -1,4 +1,4 @@
-import { Badge, Card } from "@/index"
+import { Badge, Button, Card } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -42,8 +42,11 @@ export function CardShowcase({ state }: ComponentDemoProps) {
         <div className="grid gap-4 xl:grid-cols-[minmax(0,1.08fr)_minmax(0,0.92fr)]">
           <Card
             size={state.cardCompact ? "sm" : "default"}
+            eyebrow="Content"
             title={primaryProject.title}
             description={primaryProject.description}
+            badge={<Badge tone="success" variant="soft">Live</Badge>}
+            action={<Button type="button" size="xs" variant="outline">Open</Button>}
             content={
               <div className="grid gap-3 sm:grid-cols-3">
                 {primaryProject.metrics.map((metric) => (
@@ -58,6 +61,9 @@ export function CardShowcase({ state }: ComponentDemoProps) {
 
           <Card
             size="sm"
+            interactive
+            selected
+            eyebrow="Selectable"
             title={compactProject.title}
             description={compactProject.description}
             content={
@@ -70,6 +76,25 @@ export function CardShowcase({ state }: ComponentDemoProps) {
             footer={compactProject.footer}
           />
         </div>
+        <div className="mt-4 grid gap-4 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
+          <Card
+            orientation="horizontal"
+            mediaAspect="square"
+            title="Media card"
+            description="The same Card primitive owns image, copy, action and footer slots."
+            media={<div className="h-full min-h-36 bg-[linear-gradient(135deg,var(--primary),color-mix(in_oklch,var(--primary),white_42%))]" />}
+            action={<Button type="button" size="xs">View</Button>}
+            content={<p className="text-sm leading-6 aui-text-muted">Use media slots for previews, thumbnails, charts, or product visuals without creating another card component.</p>}
+          />
+          <Card
+            size="sm"
+            density="compact"
+            title="Compact action card"
+            description="Dense layouts still use the same header, content and footer anatomy."
+            content={<div className="text-sm aui-text-strong">12 files ready for review</div>}
+            footer={<Button type="button" size="xs" variant="secondary">Review files</Button>}
+          />
+        </div>
       </section>
     </div>
   )

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

@@ -1,11 +1,12 @@
 import * as React from "react"
 
 import { Button, Carousel, CarouselItem } from "@/index"
+import { cn } from "@/lib/utils"
 
 const steps = [
-  { title: "Onboarding", text: "Guide quickly from first login.", tone: "Launch" },
-  { title: "Components", text: "Review ready-made dashboard patterns.", tone: "Library" },
-  { title: "Release", text: "Publish, test, and iterate faster.", tone: "Ship" },
+  { title: "Onboarding", text: "Guide quickly from first login.", tone: "Launch", detail: "Hero slider for product onboarding and release tours." },
+  { title: "Components", text: "Review ready-made dashboard patterns.", tone: "Library", detail: "Card rail, docs previews, and swipe-ready gallery states." },
+  { title: "Release", text: "Publish, test, and iterate faster.", tone: "Ship", detail: "Active slide details stay below the main frame for context." },
 ]
 
 export function CarouselShowcase() {
@@ -48,13 +49,28 @@ export function CarouselShowcase() {
         loop
         showArrows={showArrows}
         showDots={showDots}
+        showStatus
+        showThumbnails
         autoplay={autoplay}
         autoplayInterval={2200}
         showPlaybackControl
+        aspectRatio="16 / 9"
         onIndexChange={(next) => setIndex(next)}
         onAutoplayChange={setPlaying}
         previousLabel="Previous slide"
         nextLabel="Next slide"
+        renderThumbnail={(_, itemIndex, active) => (
+          <div className={cn("grid gap-1 p-3", active && "bg-primary/5")}>
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">0{itemIndex + 1}</div>
+            <div className="text-sm font-medium text-foreground">{steps[itemIndex]?.title}</div>
+          </div>
+        )}
+        renderActiveDetail={(_, activeIndex) => (
+          <div className="rounded-[20px] border border-border/70 bg-card/80 p-4">
+            <p className="text-sm font-semibold text-foreground">{steps[activeIndex]?.title}</p>
+            <p className="mt-1 text-sm text-muted-foreground">{steps[activeIndex]?.detail}</p>
+          </div>
+        )}
       >
         {steps.map((step, slideIndex) => (
           <CarouselItem key={step.title}>

package/packages/cli/vendor/src/showcase/premium/command-bar/showcase.tsx

@@ -46,7 +46,7 @@ export function CommandBarShowcase() {
               </div>
             </div>
 
-            <CommandBar open={open} position={position} className="max-w-[calc(100%-2rem)]">
+            <CommandBar open={open} position={position} grouped label="Review flow" className="max-w-[calc(100%-2rem)]">
               <Kbd>G</Kbd>
               <Button size="sm" variant="ghost">
                 <MessageSquareIcon className="mr-2 size-4" />

package/packages/cli/vendor/src/showcase/premium/data-table/mock.ts

@@ -1,30 +1,31 @@
 import type { ComponentDemoMock } from "../types"
 
-export const dataTableMock: ComponentDemoMock = {
-  code: `import {
-  DataTable,
-  DataTableBulkActions,
-  DataTableColumnVisibilityMenu,
-  DataTableSortableHeader,
-  createDataTableActionsColumn,
-  createDataTableSelectColumn,
-} from "tembro"
-
-export function Example() {
-  return (
-    <DataTable
-      columns={columns}
-      data={rows}
-      enableRowSelection
-      density="comfortable"
-      striped
-      bordered
-      stickyHeader
-      rowActions={(row) => getActions(row.original)}
-      bulkActions={bulkActions}
-    />
-  )
-}`,
+export const dataTableMock: ComponentDemoMock = {
+  code: `import { DataTable } from "tembro"
+
+export function Example() {
+  return (
+    <DataTable
+      columns={columns}
+      data={rows}
+      title="Customers"
+      description="Search, filter, select, and act on operational rows."
+      search={{ value: query, onValueChange: setQuery, placeholder: "Search rows..." }}
+      filters={<StatusFilter value={status} onValueChange={setStatus} />}
+      toolbarActions={<ExportButton rows={rows} />}
+      features={{ columnVisibility: true, rowActions: true, bulkActions: true }}
+      rowSelection={rowSelection}
+      onRowSelectionChange={setRowSelection}
+      rowActions={(row) => getActions(row.original)}
+      bulkActions={bulkActions}
+      pagination={{ pageIndex, pageSize, pageCount, totalRows: rows.length, onPageChange: setPageIndex }}
+      density="comfortable"
+      striped
+      bordered
+      stickyHeader
+    />
+  )
+}`,
   highlights: ["Toolbar actions", "Bulk actions", "Row click", "Visibility menu", "Density", "Preset-driven views", "Mobile strategy", "Pagination"],
   scenarios: [
     { title: "Finance operations", description: "Filter, sort and paginate transactional rows with export-ready actions." },

package/packages/cli/vendor/src/showcase/premium/file-upload/showcase.tsx

@@ -4,6 +4,18 @@ import { Badge, FileUpload } from "@/index"
 
 export function FileUploadShowcase() {
   const [files, setFiles] = React.useState<File[]>([])
+  const [status, setStatus] = React.useState<Record<string, "idle" | "uploading" | "success" | "error">>({})
+
+  React.useEffect(() => {
+    setStatus((current) => {
+      const next = { ...current }
+      files.forEach((file, index) => {
+        const key = `${file.name}-${file.size}-${file.lastModified}`
+        next[key] ??= index === 0 ? "uploading" : index === 1 ? "error" : "success"
+      })
+      return next
+    })
+  }, [files])
 
   return (
     <div className="space-y-4">
@@ -22,12 +34,20 @@ export function FileUploadShowcase() {
       <FileUpload
         files={files}
         onFilesChange={setFiles}
+        status={status}
         accept=".pdf,.docx,.png"
         maxFiles={4}
         maxSize={4 * 1024 * 1024}
         dropzoneLabel="Upload release assets"
         dropzoneDescription="Drag files here or choose from your device."
         helperText="Supports PDF, DOCX and PNG up to 4 MB."
+        onRetryFile={(file) => {
+          const key = `${file.name}-${file.size}-${file.lastModified}`
+          setStatus((current) => ({ ...current, [key]: "uploading" }))
+          window.setTimeout(() => {
+            setStatus((current) => ({ ...current, [key]: "success" }))
+          }, 900)
+        }}
       />
 
       <div className="grid gap-3 md:grid-cols-3">
@@ -37,7 +57,7 @@ export function FileUploadShowcase() {
         </div>
         <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
           <p className="font-medium aui-text-strong">Interaction model</p>
-          <p className="mt-2 aui-text-muted">Remove and clear actions stay isolated from the parent dropzone click.</p>
+          <p className="mt-2 aui-text-muted">Uploading, success and retry-ready error rows all stay isolated from the parent dropzone click.</p>
         </div>
         <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
           <p className="font-medium aui-text-strong">Use case</p>

package/packages/cli/vendor/src/showcase/premium/image-upload/showcase.tsx

@@ -23,6 +23,9 @@ export function ImageUploadShowcase() {
         files={files}
         onFilesChange={setFiles}
         maxFiles={3}
+        minImageWidth={1200}
+        minImageHeight={800}
+        aspectRatio={1.5}
         helperText="Upload hero illustrations or block thumbnails."
       />
 
@@ -33,7 +36,7 @@ export function ImageUploadShowcase() {
         </div>
         <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
           <p className="font-medium aui-text-strong">Interaction model</p>
-          <p className="mt-2 aui-text-muted">Remove action stays separate from the parent dropzone surface.</p>
+          <p className="mt-2 aui-text-muted">Preview, remove, and ratio validation live inside the same reusable media surface.</p>
         </div>
         <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
           <p className="font-medium aui-text-strong">Use case</p>

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

@@ -5,7 +5,6 @@ import { AlertDialogShowcase, alertDialogMock } from "./alert-dialog"
 import { accordionMock, AccordionShowcase } from "./accordion"
 import { activityFeedMock, ActivityFeedShowcase } from "./activity-feed"
 import { ActionMenuShowcase, actionMenuMock } from "./action-menu"
-import { appShellMock, AppShellShowcase } from "./app-shell"
 import { appSidebarMock, AppSidebarShowcase } from "./app-sidebar"
 import { asyncSelectMock, AsyncSelectShowcase } from "./async-select"
 import { asyncMultiSelectMock, AsyncMultiSelectShowcase } from "./async-multi-select"
@@ -203,7 +202,6 @@ export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> =
   table: { mock: tableMock, Showcase: TableShowcase },
   sidebar: { mock: appSidebarMock, Showcase: AppSidebarShowcase },
   "app-sidebar": { mock: appSidebarMock, Showcase: AppSidebarShowcase },
-  "app-shell": { mock: appShellMock, Showcase: AppShellShowcase },
   "sidebar-nav": { mock: sidebarNavMock, Showcase: SidebarNavShowcase },
   breadcrumbs: { mock: breadcrumbsMock, Showcase: BreadcrumbsShowcase },
   "page-header": { mock: pageHeaderMock, Showcase: PageHeaderShowcase },

package/packages/cli/vendor/src/showcase/premium/loading-state/showcase.tsx

@@ -48,7 +48,7 @@ export function LoadingStateShowcase({ mode }: ComponentDemoProps) {
       ) : null}
 
       <LoadingState label={labels[index]} description={descriptions[index]} />
-      {showSecondary ? <LoadingState label={`${labels[index]} (compact)`} description="This is a second loading area inside the same page." /> : null}
+      {showSecondary ? <LoadingState variant="progress" progress={68} label={`${labels[index]} (progress)`} description="This is a second loading area inside the same page." /> : null}
     </div>
   )
 }