tembro 2.0.6 → 2.1.0

package/packages/cli/vendor/src/showcase/premium/metric-grid/showcase.tsx

@@ -1,12 +1,12 @@
 import * as React from "react"
 
-import { Button, MetricGrid } from "@/index"
+import { BarChart, Button, ChartFrame, ChartLegend, DonutChart, MetricGrid } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
 
 const items = [
-  { key: "users", label: "Users", value: "2,410", description: "Last 30 days", tone: "success" as const },
-  { key: "revenue", label: "Revenue", value: "$132k", description: "Compared with last month", tone: "info" as const },
+  { key: "users", label: "Users", value: "2,410", description: "Last 30 days", tone: "success" as const, trend: "+12%" },
+  { key: "revenue", label: "Revenue", value: "$132k", description: "Compared with last month", tone: "info" as const, trend: "+8.4%" },
   { key: "errors", label: "Errors", value: "3", description: "Immediate follow up", tone: "danger" as const },
   { key: "churn", label: "Churn", value: "1.8%", description: "Within target", tone: "warning" as const },
 ]
@@ -33,6 +33,38 @@ export function MetricGridShowcase({ mode }: ComponentDemoProps) {
       ) : null}
 
       <MetricGrid items={items} columns={columnCount} compact={compact} />
+      <div className="grid gap-4 xl:grid-cols-2">
+        <ChartFrame title="Category performance" description="Bar chart shares the same token palette.">
+          <BarChart
+            data={[
+              { label: "CRM", value: 42 },
+              { label: "Finance", value: 31 },
+              { label: "Auth", value: -8 },
+              { label: "Forms", value: 26 },
+            ]}
+          />
+        </ChartFrame>
+        <ChartFrame title="Traffic split" description="Donut, legend and KPI blocks stay visually aligned.">
+          <div className="grid justify-items-center gap-4">
+            <DonutChart
+              centerValue="68%"
+              centerLabel="Usage"
+              data={[
+                { label: "Dashboard", value: 42 },
+                { label: "Forms", value: 18 },
+                { label: "Reports", value: 8 },
+              ]}
+            />
+            <ChartLegend
+              data={[
+                { label: "Dashboard", value: 42 },
+                { label: "Forms", value: 18 },
+                { label: "Reports", value: 8 },
+              ]}
+            />
+          </div>
+        </ChartFrame>
+      </div>
     </div>
   )
-}
+}

package/packages/cli/vendor/src/showcase/premium/notification-center/showcase.tsx

@@ -8,9 +8,9 @@ const panelClass =
   "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
 
 const seedItems = [
-  { id: "1", title: "Invoice paid", description: "Acme Growth settled invoice #2048.", time: "2m ago", read: false },
-  { id: "2", title: "Deployment ready", description: "Release candidate passed checks and waits for promotion.", time: "12m ago", read: false },
-  { id: "3", title: "Member invited", description: "Operations workspace access was sent to Dilshod.", time: "1h ago", read: true },
+  { id: "1", title: "Invoice paid", description: "Acme Growth settled invoice #2048.", time: "2m ago", read: false, group: "Today" },
+  { id: "2", title: "Deployment ready", description: "Release candidate passed checks and waits for promotion.", time: "12m ago", read: false, group: "Today" },
+  { id: "3", title: "Member invited", description: "Operations workspace access was sent to Dilshod.", time: "1h ago", read: true, group: "Earlier" },
 ]
 
 export function NotificationCenterShowcase({ mode }: ComponentDemoProps) {
@@ -44,6 +44,7 @@ export function NotificationCenterShowcase({ mode }: ComponentDemoProps) {
           <NotificationCenter
             notifications={items}
             onMarkAllRead={() => setItems((current) => current.map((item) => ({ ...item, read: true })))}
+            onClearAll={() => setItems([])}
             onNotificationClick={(notification) =>
               setItems((current) => current.map((item) => (item.id === notification.id ? { ...item, read: true } : item)))
             }

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

@@ -54,6 +54,7 @@ export function PageStateShowcase({ mode }: ComponentDemoProps) {
             </Button>
           )
         }
+        extra={tone === "error" ? <Button variant="ghost">Open logs</Button> : undefined}
       />
 
       {mode === "playground" ? (

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

@@ -11,6 +11,7 @@ export function PaginationShowcase({ mode }: ComponentDemoProps) {
   const [page, setPage] = React.useState(6)
   const [pageCount, setPageCount] = React.useState(18)
   const [showEdges, setShowEdges] = React.useState(true)
+  const [pageSize, setPageSize] = React.useState(20)
 
   return (
     <div className="space-y-5">
@@ -36,7 +37,17 @@ export function PaginationShowcase({ mode }: ComponentDemoProps) {
             <p className="text-sm font-medium aui-text-muted">Review queue pages</p>
             <p className="mt-2 text-sm leading-6 aui-text-muted">Showing page <span className="font-medium aui-text-strong">{page}</span> of <span className="font-medium aui-text-strong">{pageCount}</span>.</p>
           </div>
-          <Pagination page={page} pageCount={pageCount} onPageChange={setPage} showEdges={showEdges} />
+          <Pagination
+            page={page}
+            pageCount={pageCount}
+            onPageChange={setPage}
+            showEdges={showEdges}
+            totalCount={pageCount * pageSize}
+            pageSize={pageSize}
+            pageSizeOptions={[10, 20, 50]}
+            onPageSizeChange={setPageSize}
+            showSummary
+          />
         </div>
       </section>
 
@@ -53,6 +64,7 @@ export function PaginationShowcase({ mode }: ComponentDemoProps) {
           <div className="mt-4 space-y-2 text-sm leading-6 aui-text-muted">
             <p>Page: <span className="font-medium aui-text-strong">{page}</span></p>
             <p>Total pages: <span className="font-medium aui-text-strong">{pageCount}</span></p>
+            <p>Page size: <span className="font-medium aui-text-strong">{pageSize}</span></p>
             <p>Edges: <span className="font-medium aui-text-strong">{showEdges ? "visible" : "hidden"}</span></p>
           </div>
         </section>

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

@@ -1,4 +1,4 @@
-import { Button, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/index"
+import { Button, Input, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/index"
 
 import { popoverDemoItems } from "./data"
 
@@ -57,16 +57,32 @@ export function PopoverShowcase() {
       </section>
 
       <section className={panelClass}>
-        <div className="border-y border-[color:var(--aui-divider)]">
-          {[
-            "Trigger text should already hint that extra context exists.",
-            "If users need multiple actions or long reading, move up to a heavier surface.",
-            "Popover body should stay compact enough to scan in one glance.",
-          ].map((item) => (
-            <div key={item} className="border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0">
-              {item}
-            </div>
-          ))}
+        <div className="grid gap-5 xl:grid-cols-[0.85fr_1.15fr]">
+          <div>
+            <p className="text-lg font-semibold aui-text-strong">Inline settings form</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              Short forms fit when they change a local view and can be dismissed without losing page context.
+            </p>
+          </div>
+          <div className="flex justify-start xl:justify-end">
+            <Popover>
+              <PopoverTrigger render={<Button variant="outline" />}>Edit workspace</PopoverTrigger>
+              <PopoverContent align="end" collisionPadding={16}>
+                <PopoverHeader>
+                  <PopoverTitle>Workspace details</PopoverTitle>
+                  <PopoverDescription>Update the label used in local navigation.</PopoverDescription>
+                </PopoverHeader>
+                <div className="grid gap-3">
+                  <Input aria-label="Workspace name" defaultValue="Growth analytics" />
+                  <Input aria-label="Workspace slug" defaultValue="growth" />
+                </div>
+                <div className="flex justify-end gap-2">
+                  <Button type="button" variant="secondary" size="sm">Cancel</Button>
+                  <Button type="button" size="sm">Save</Button>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
         </div>
       </section>
     </div>

package/packages/cli/vendor/src/showcase/premium/radio-group/showcase.tsx

@@ -8,7 +8,7 @@ const panelClass =
 const planOptions = [
   { value: "starter", label: "Starter", description: "Good for single workspace setup." },
   { value: "growth", label: "Growth", description: "Adds more seats and team workflows." },
-  { value: "enterprise", label: "Enterprise", description: "Advanced controls and support." },
+  { value: "enterprise", label: "Enterprise", description: "Advanced controls and support.", disabled: true },
 ] as const
 
 export function RadioGroupShowcase() {
@@ -61,6 +61,18 @@ export function RadioGroupShowcase() {
             ))}
           </div>
         </div>
+        <div className="mt-5">
+          <RadioGroup
+            invalid
+            defaultValue="card"
+            orientation="horizontal"
+            options={[
+              { value: "card", label: "Card" },
+              { value: "bank", label: "Bank" },
+              { value: "invoice", label: "Invoice", disabled: true },
+            ]}
+          />
+        </div>
       </section>
     </div>
   )

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

@@ -1,5 +1,7 @@
 import * as React from "react"
 
+import { ArchiveIcon, CopyIcon, PencilIcon, Trash2Icon } from "lucide-react"
+
 import { Badge, Button, RightClickMenu } from "@/index"
 
 const panelClass =
@@ -32,13 +34,14 @@ export function RightClickMenuShowcase() {
             <div className="mt-3">
               <RightClickMenu
                 items={[
-                  { label: "Rename", onSelect: () => setLastAction("Rename") },
-                  { label: "Duplicate", onSelect: () => setLastAction("Duplicate") },
-                  { label: "Archive", onSelect: () => setLastAction("Archive") },
+                  { label: "Rename", icon: <PencilIcon />, shortcut: "R", onSelect: () => setLastAction("Rename") },
+                  { label: "Duplicate", icon: <CopyIcon />, shortcut: "D", onSelect: () => setLastAction("Duplicate") },
+                  { label: "Archive", icon: <ArchiveIcon />, onSelect: () => setLastAction("Archive") },
+                  { label: "Remove", icon: <Trash2Icon />, variant: "destructive", onSelect: () => setLastAction("Remove") },
                 ]}
               >
-                <div className="rounded-[20px] border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-4 py-12 text-center text-sm aui-text-muted">
-                  Right click anywhere in this area
+                <div className="rounded-[20px] border border-dashed border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-4 py-12 text-center text-sm aui-text-muted" tabIndex={0}>
+                  Right click, use Shift+F10, or press the context-menu key in this area
                 </div>
               </RightClickMenu>
             </div>

package/packages/cli/vendor/src/showcase/premium/segmented-control/showcase.tsx

@@ -76,6 +76,7 @@ export function SegmentedControlShowcase() {
               <SegmentedControl
                 size="lg"
                 fullWidth
+                equalWidth
                 defaultValue="filters"
                 options={[
                   { value: "filters", label: "Filters", icon: <SlidersHorizontalIcon className="size-4" /> },

package/packages/cli/vendor/src/showcase/premium/select/data.ts

@@ -5,8 +5,8 @@ export const selectDemoGroups: SelectDemoGroup[] = [
     title: "Plan picker",
     options: [
       { value: "starter", label: "Starter" },
-      { value: "growth", label: "Growth" },
-      { value: "enterprise", label: "Enterprise" },
+      { value: "growth", label: "Growth", description: "25 seats and shared support" },
+      { value: "enterprise", label: "Enterprise", description: "Unlimited seats and priority support" },
     ],
   },
   {
@@ -18,4 +18,13 @@ export const selectDemoGroups: SelectDemoGroup[] = [
       { value: "draft", label: "Draft" },
     ],
   },
-]
+  {
+    title: "Grouped workspace routing",
+    options: [
+      { value: "north", label: "North Region", description: "Sales operations", keywords: ["sales"] },
+      { value: "south", label: "South Region", description: "Support queue", keywords: ["support"] },
+      { value: "billing", label: "Billing Desk", description: "Finance team", keywords: ["finance"] },
+      { value: "archive", label: "Archive", description: "Read-only records", disabled: true, keywords: ["disabled"] },
+    ],
+  },
+]

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

@@ -1,9 +1,9 @@
 import type { ComponentDemoMock } from "../types"
 
 export const selectMock: ComponentDemoMock = {
-  code: `import { Select } from "tembro"\n\nconst planOptions = [\n  { value: "starter", label: "Starter" },\n  { value: "growth", label: "Growth" },\n  { value: "enterprise", label: "Enterprise" },\n]\n\nexport function Example() {\n  return <Select defaultValue="starter" options={planOptions} />\n}`,
-  cliCommand: "npx tembro add select",
-  highlights: ["Primary selection surface", "Controlled selection", "Searchable local flow", "Compact trigger options"],
+  code: `import { Select } from "tembro"\n\nconst planGroups = [\n  {\n    label: "Plans",\n    options: [\n      { value: "starter", label: "Starter" },\n      { value: "growth", label: "Growth", description: "25 seats" },\n      { value: "enterprise", label: "Enterprise", description: "Priority support" },\n    ],\n  },\n]\n\nexport function Example() {\n  return (\n    <Select\n      defaultValue="starter"\n      groups={planGroups}\n      searchable\n      clearable\n      emptyMessage="No plan matched"\n    />\n  )\n}`,
+  cliCommand: "npx tembro add select",
+  highlights: ["Primary selection surface", "Controlled selection", "Searchable local flow", "Grouped option support", "Compact trigger options"],
   relatedBlockSlugs: ["crm-dashboard", "users-table", "dashboard-starter"],
   scenarios: [
     { title: "Plan picker", description: "Switch between starter, growth and enterprise plans." },
@@ -13,7 +13,7 @@ export const selectMock: ComponentDemoMock = {
   ],
   capabilityNotes: [
     "Start here for most static single-choice flows before reaching for helper members.",
-    "Supports controlled and uncontrolled selected values plus searchable local filtering.",
+    "Supports controlled and uncontrolled selected values, grouped options, clearable state, and searchable local filtering.",
     "Includes trigger sizing for compact or default density layouts.",
     "AsyncSelect, AsyncMultiSelect, SimpleSelect, and Combobox should read as related members rather than separate starting points.",
   ],

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

@@ -13,10 +13,12 @@ type SelectMode = "plan" | "density"
 export function SelectShowcase({ state, setState }: ComponentDemoProps) {
   const planOptions = selectDemoGroups[0].options
   const compactOptions = selectDemoGroups[1].options
+  const groupedOptions = selectDemoGroups[2].options
   const selectedValue = state.selectValue ?? planOptions[0].value
   const selectedPlan = planOptions.find((option) => option.value === selectedValue) ?? planOptions[0]
   const highlightedPlan = planOptions[1] ?? planOptions[0]
   const [surface, setSurface] = React.useState<SelectMode>("plan")
+  const [workspace, setWorkspace] = React.useState("north")
 
   const summaryRows =
     selectedPlan.value === "enterprise"
@@ -55,7 +57,7 @@ export function SelectShowcase({ state, setState }: ComponentDemoProps) {
           <Button size="sm" variant={surface === "plan" ? "default" : "outline"} onClick={() => setSurface("plan")}>
             Default trigger
           </Button>
-          <Button size="sm" variant={surface === "density" ? "default" : "outline"} onClick={() => setSurface("density")}>
+              <Button size="sm" variant={surface === "density" ? "default" : "outline"} onClick={() => setSurface("density")}>
             Compact trigger
           </Button>
         </div>
@@ -92,6 +94,25 @@ export function SelectShowcase({ state, setState }: ComponentDemoProps) {
               </div>
             </div>
 
+            <div className="rounded-[20px] border border-[color:var(--aui-divider)] p-4">
+              <p className="text-sm font-medium aui-text-muted">Grouped searchable select</p>
+              <div className="mt-3">
+                <Select
+                  value={workspace}
+                  onValueChange={(value) => setWorkspace(value ?? "north")}
+                  searchable
+                  clearable
+                  placeholder="Choose workspace"
+                  emptyMessage="No workspace matched"
+                  groups={[
+                    { label: "Regions", options: groupedOptions.slice(0, 2) },
+                    { label: "Operations", options: groupedOptions.slice(2) },
+                  ]}
+                  triggerClassName="w-full"
+                />
+              </div>
+            </div>
+
             <div className="grid gap-3 sm:grid-cols-3">
               {summaryRows.map(([label, value]) => (
                 <div key={label} className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">

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

@@ -1,6 +1,9 @@
 export type SelectDemoOption = {
   value: string
   label: string
+  description?: string
+  disabled?: boolean
+  keywords?: string[]
 }
 
 export type SelectDemoGroup = {

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

@@ -1,4 +1,4 @@
-import { Badge, Statistic, StatisticCard, StatisticGrid } from "@/index"
+import { Badge, ProgressRing, Statistic, StatisticCard, StatisticGrid, TrendCard } from "@/index"
 
 const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
 
@@ -43,6 +43,15 @@ export function StatisticShowcase() {
           </div>
         </div>
       </section>
+
+      <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]} />
+          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
+            <ProgressRing value={76} label="76%" description="coverage" tone="success" />
+          </div>
+        </div>
+      </section>
     </div>
   )
 }

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

@@ -29,12 +29,17 @@ export function SwitchShowcase({ state, setState }: ComponentDemoProps) {
 
         <div className="mt-6 grid gap-3">
           {switchDemoRows.map((row, index) => (
-            <div key={row.title} className={`${panelClass} flex items-center justify-between gap-4`}>
-              <div>
-                <p className="font-medium aui-text-strong">{row.title}</p>
-                <p className="text-sm aui-text-muted">{row.description}</p>
-              </div>
-              <Switch checked={index === 0 ? state.switchOn : row.defaultChecked} onCheckedChange={index === 0 ? (switchOn) => setState({ switchOn }) : undefined} defaultChecked={index > 0 ? row.defaultChecked : undefined} />
+            <div key={row.title} className={panelClass}>
+              <Switch
+                label={row.title}
+                description={row.description}
+                checked={index === 0 ? state.switchOn : row.defaultChecked}
+                onCheckedChange={index === 0 ? (switchOn) => setState({ switchOn }) : undefined}
+                defaultChecked={index > 0 ? row.defaultChecked : undefined}
+                size={index === 0 ? "lg" : "md"}
+                labelPlacement="start"
+                className="w-full justify-between"
+              />
             </div>
           ))}
         </div>
@@ -60,6 +65,10 @@ export function SwitchShowcase({ state, setState }: ComponentDemoProps) {
             </Button>
           </div>
         </div>
+        <div className="mt-5 grid gap-3 sm:grid-cols-2">
+          <Switch label="Sync in progress" description="Loading disables the control until the request finishes." loading defaultChecked />
+          <Switch label="Invalid setting" description="Error state keeps the same field layout." invalid />
+        </div>
       </section>
     </div>
   )

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

@@ -1,3 +1,5 @@
+import { ActivityIcon, BellIcon, FileTextIcon, SettingsIcon, ShieldIcon, UsersIcon } from "lucide-react"
+
 import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "@/index"
 
 import type { ComponentDemoProps } from "../types"
@@ -38,7 +40,7 @@ export function TabsShowcase({ state, setState }: ComponentDemoProps) {
 
       <div className={panelClass}>
         <Tabs value={state.activeTab} onValueChange={(value: string) => setState({ activeTab: value as ComponentDemoProps["state"]["activeTab"] })}>
-          <TabsList>
+          <TabsList overflow="scroll">
             {tabsDemoPanels.map((panel) => (
               <TabsTrigger key={panel.value} value={panel.value}>{panel.label}</TabsTrigger>
             ))}
@@ -51,6 +53,51 @@ export function TabsShowcase({ state, setState }: ComponentDemoProps) {
         </Tabs>
       </div>
 
+      <section className={panelClass}>
+        <div className="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
+          <div>
+            <p className="text-lg font-semibold aui-text-strong">Variants and overflow</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              The same primitive covers underline navigation, compact density, icon labels, and long mobile tab rows.
+            </p>
+          </div>
+          <div className="grid gap-4">
+            <Tabs defaultValue="activity">
+              <TabsList variant="underline" overflow="scroll">
+                <TabsTrigger variant="underline" value="activity"><ActivityIcon />Activity</TabsTrigger>
+                <TabsTrigger variant="underline" value="files"><FileTextIcon />Files</TabsTrigger>
+                <TabsTrigger variant="underline" value="members"><UsersIcon />Members</TabsTrigger>
+                <TabsTrigger variant="underline" value="security"><ShieldIcon />Security</TabsTrigger>
+                <TabsTrigger variant="underline" value="settings"><SettingsIcon />Settings</TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <Tabs defaultValue="compact">
+              <TabsList variant="compact" overflow="wrap">
+                <TabsTrigger variant="compact" value="compact">Compact</TabsTrigger>
+                <TabsTrigger variant="compact" value="alerts"><BellIcon />Alerts</TabsTrigger>
+                <TabsTrigger variant="compact" value="audit">Audit</TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <Tabs defaultValue="vertical" orientation="vertical" className="grid gap-3 sm:grid-cols-[180px_1fr]">
+              <TabsList variant="pills" overflow="wrap" className="grid">
+                <TabsTrigger variant="pills" value="vertical">Vertical</TabsTrigger>
+                <TabsTrigger variant="pills" value="pills">Pills</TabsTrigger>
+                <TabsTrigger variant="pills" value="overflow">Overflow</TabsTrigger>
+              </TabsList>
+              <TabsContent value="vertical" className="mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted">
+                Vertical tabs keep local settings readable when each panel has a larger form.
+              </TabsContent>
+              <TabsContent value="pills" className="mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted">
+                Pill tabs carry a stronger selected state for dense dashboards.
+              </TabsContent>
+              <TabsContent value="overflow" className="mt-0 rounded-xl border border-[color:var(--aui-divider)] p-4 text-sm leading-6 aui-text-muted">
+                Scroll overflow keeps long labels accessible on small screens.
+              </TabsContent>
+            </Tabs>
+          </div>
+        </div>
+      </section>
+
       <section className={panelClass}>
         <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
           <div>

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

@@ -2,7 +2,7 @@ import type { ComponentDemoMock } from "../types"
 
 export const textareaMock: ComponentDemoMock = {
   code: `import { FormEvent, useState } from "react"
-import { Textarea } from "@/index"
+import { Textarea } from "tembro"
 
 export function Example() {
   const [note, setNote] = useState("")
@@ -15,11 +15,19 @@ export function Example() {
 
   return (
     <form onSubmit={submit} className="space-y-3">
-      <Textarea rows={6} value={note} onChange={(event) => setNote(event.target.value)} placeholder="Write your message..." />
-      <Textarea rows={4} defaultValue="Internal changelog draft..." />
+      <Textarea
+        rows={6}
+        value={note}
+        onValueChange={setNote}
+        placeholder="Write your message..."
+        helperText="Keep instructions visible below the field."
+        errorText={error ? "Please enter at least 10 characters." : undefined}
+        maxLength={240}
+        showCharacterCount
+      />
+      <Textarea rows={4} defaultValue="Internal changelog draft..." helperText="Draft copy" />
       <Textarea readOnly value="Locked review comment" rows={3} />
       <button type="submit">Submit</button>
-      {error ? <p className="text-sm text-red-600">Please enter at least 10 characters.</p> : null}
     </form>
   )
 }`,

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

@@ -39,6 +39,9 @@ export function TextareaShowcase({ state, setState }: ComponentDemoProps) {
                 rows={textareaDemoFields[0].rows}
                 className={`${textareaDemoFields[0].minHeight} resize-y`}
                 placeholder={textareaDemoFields[0].placeholder}
+                helperText="Visible helper copy keeps instructions outside the placeholder."
+                maxLength={240}
+                showCharacterCount
               />
             </div>
           </div>
@@ -83,6 +86,7 @@ export function TextareaShowcase({ state, setState }: ComponentDemoProps) {
               defaultValue={textareaDemoFields[1].defaultValue}
               rows={textareaDemoFields[1].rows}
               className={`${textareaDemoFields[1].minHeight} resize-none`}
+              helperText="Uncontrolled draft with stable helper spacing."
             />
           </div>
         </section>
@@ -95,6 +99,7 @@ export function TextareaShowcase({ state, setState }: ComponentDemoProps) {
               readOnly={textareaDemoFields[2].readOnly}
               rows={textareaDemoFields[2].rows}
               className={`${textareaDemoFields[2].minHeight} resize-none opacity-70`}
+              errorText={state.textareaValue.trim().length > 0 && state.textareaValue.trim().length < 10 ? "Draft needs at least 10 characters." : undefined}
             />
             <p className="text-sm leading-6 aui-text-muted">
               Read-only textareas should still be easy to scan and copy without looking like disabled, broken, or low-priority content.

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

@@ -9,7 +9,7 @@ const panelClass =
 
 function ToastPlayground({ mode }: { mode: ComponentDemoProps["mode"] }) {
   const [seed, setSeed] = React.useState(0)
-  const { addToast, success, warning, error, clearToasts, toasts, dismissToast } = useToast()
+  const { addToast, success, warning, error, promise, clearToasts, toasts, dismissToast } = useToast()
 
   const addSimple = () => {
     setSeed((value) => value + 1)
@@ -39,6 +39,19 @@ function ToastPlayground({ mode }: { mode: ComponentDemoProps["mode"] }) {
     error({ title: "Request failed", description: `Failure occurred while saving item #${seed + 1}` })
   }
 
+  const runPromiseToast = () => {
+    void promise(
+      new Promise<string>((resolve) => {
+        window.setTimeout(() => resolve("Export ready"), 1200)
+      }),
+      {
+        loading: { title: "Preparing export", description: "Building CSV package.", group: "Export" },
+        success: (message) => ({ title: message, description: "Download can start now.", group: "Export" }),
+        error: () => ({ title: "Export failed", description: "Retry after refreshing.", group: "Export" }),
+      }
+    )
+  }
+
   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">
@@ -70,6 +83,9 @@ function ToastPlayground({ mode }: { mode: ComponentDemoProps["mode"] }) {
           <Button size="sm" variant="outline" onClick={addError}>
             Error
           </Button>
+          <Button size="sm" variant="outline" onClick={runPromiseToast}>
+            Promise
+          </Button>
           <Button size="sm" variant="outline" onClick={clearToasts}>
             Clear all
           </Button>

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

@@ -6,7 +6,7 @@ export type ComponentDemoState = {
   checked: boolean
   switchOn: boolean
   selectValue: string
-  badgeVariant: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"
+  badgeVariant: "default" | "secondary" | "soft" | "destructive" | "outline" | "ghost" | "link"
   cardCompact: boolean
   activeTab: "overview" | "activity" | "settings"
 }

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

@@ -50,8 +50,9 @@ export const registryQualityDemoRegistry = createShowcaseDemoRegistry([
   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("section-header", "SectionHeader", "layout", "Reusable section title block with actions and metadata."),
+  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."),

package/packages/cli/vendor/src/showcase/render-registry-preview.tsx

@@ -15,7 +15,6 @@ import {
   ActionMenu,
   Alert,
   AlertDialog,
-  AnchorNav,
   Badge,
   Button,
   ButtonGroup,
@@ -226,20 +225,6 @@ function NavigationPreview({ slug }: { slug: string }) {
     return <Pagination page={3} pageCount={9} onPageChange={() => undefined} />
   }
 
-  if (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 (slug === "page-tabs") {
     return (
       <PageTabs