tembro 3.1.7 → 3.1.8

package/packages/cli/vendor/src/components/layout/app-sidebar.tsx

@@ -560,7 +560,7 @@ function SidebarSurface({
                 type="button"
                 aria-label={mobileCloseLabel}
                 data-slot="app-sidebar-mobile-close"
-                className="inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] text-[color:var(--aui-page-foreground)] transition hover:bg-[color:var(--aui-control-bg)]"
+                className="inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg-alt,var(--muted))] text-[color:var(--aui-page-foreground,var(--foreground))] transition hover:bg-[color:var(--aui-control-bg,var(--muted))]"
                 onClick={onRequestClose}
               >
                 <XIcon className="size-4" />
@@ -781,12 +781,12 @@ function Sidebar({
       data-slot="app-sidebar-mobile-trigger"
       data-state={mobileOpen ? "open" : "closed"}
       className={cn(
-        "inline-flex min-h-10 items-center gap-2 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 text-sm font-medium text-[color:var(--aui-page-foreground)] shadow-sm transition hover:bg-[color:var(--aui-page-bg-alt)]",
+        "inline-flex min-h-10 items-center gap-2 rounded-xl border border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg,var(--background))] px-3 text-sm font-medium text-[color:var(--aui-page-foreground,var(--foreground))] shadow-sm transition hover:bg-[color:var(--aui-page-bg-alt,var(--muted))]",
         mobileToggleClassName
       )}
       onClick={() => setMobileOpen(!mobileOpen)}
     >
-      <span className="inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt)]">
+      <span className="inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt,var(--muted))]">
         {mobileToggleIcon ?? <MenuIcon className="size-4" />}
       </span>
       <span>{mobileOpen ? mobileCloseLabel : mobileToggleLabel}</span>
@@ -808,11 +808,15 @@ function Sidebar({
           data-state={mobileOpen ? "open" : "closed"}
           className={cn(
             "fixed inset-0 z-40 bg-black/45 transition-opacity duration-200",
-            mobileOpen ? "opacity-100" : "pointer-events-none opacity-0",
-            mobileOverlayClassName
-          )}
-          onClick={() => setMobileOpen(false)}
-        />
+            mobileOpen ? "opacity-100" : "pointer-events-none opacity-0",
+            mobileOverlayClassName
+          )}
+          style={{
+            opacity: mobileOpen ? 1 : 0,
+            pointerEvents: mobileOpen ? "auto" : "none",
+          }}
+          onClick={() => setMobileOpen(false)}
+        />
         <SidebarSurface
           {...baseProps}
           mobile
@@ -825,16 +829,17 @@ function Sidebar({
           aria-modal="true"
           aria-label={typeof mobileTitle === "string" ? mobileTitle : "Navigation"}
           className={cn(
-            "fixed inset-y-0 left-0 z-50 max-w-[22rem] border-r border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-2xl transition-transform duration-200 ease-out",
+            "fixed inset-y-0 left-0 z-50 max-w-[22rem] border-r border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg,var(--background))] shadow-2xl transition-transform duration-200 ease-out",
             mobileOpen ? "translate-x-0" : "-translate-x-full",
             mobilePanelClassName,
             className
           )}
-          style={{
-            width: mobileWidth,
-            minWidth: mobileWidth,
-          }}
-        />
+          style={{
+            width: mobileWidth,
+            minWidth: mobileWidth,
+            translate: mobileOpen ? "0 0" : "-100% 0",
+          }}
+        />
       </div>
     </>
   )

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

@@ -1,4 +1,4 @@
-export const PACKAGE_LATEST_VERSION = "3.1.7"
+export const PACKAGE_LATEST_VERSION = "3.1.8"
 export const PACKAGE_LATEST_RELEASE_DATE = "July 15, 2026"
 export const PACKAGE_DEPENDENCY_RANGE = PACKAGE_LATEST_VERSION
 

package/packages/cli/vendor/src/showcase/tembro-registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://tembro.dev/registry.schema.json",
   "name": "tembro",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "Reusable React + TypeScript UI kit registry",
   "groups": {
     "ui": [

package/packages/cli/vendor/templates/showcase/src/App.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react"
+import { BellIcon } from "lucide-react"
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { resolveWorkbenchSelection } from "@/showcase/data/registry"
+import { HeroSection } from "@/showcase/layout/HeroSection"
+import { WorkbenchSidebar } from "@/showcase/layout/WorkbenchSidebar"
+import { CalendarSection } from "@/showcase/sections/CalendarSection"
+import { CategorySection } from "@/showcase/sections/CategorySection"
+import { ComponentDetailSection } from "@/showcase/sections/ComponentDetailSection"
+import { CoreUiSection } from "@/showcase/sections/CoreUiSection"
+import { DataTableSection } from "@/showcase/sections/DataTableSection"
+import { FormsSection } from "@/showcase/sections/FormsSection"
+import { InventorySection } from "@/showcase/sections/InventorySection"
+import { KanbanSection } from "@/showcase/sections/KanbanSection"
+import { OverlaySection } from "@/showcase/sections/OverlaySection"
+import { PatternsSection } from "@/showcase/sections/PatternsSection"
+import { VerificationSection } from "@/showcase/sections/VerificationSection"
+import { WizardSection } from "@/showcase/sections/WizardSection"
+import { SectionTitle } from "@/showcase/shared/SectionTitle"
+
+function OverviewContent() {
+  return (
+    <>
+      <section>
+        <SectionTitle
+          title="Live Component Sections"
+          description="Har bir katta category o‘z faylida: sidebar, kanban, data-table, calendar, overlay, wizard, UI controls va style variantlar."
+        />
+        <Tabs defaultValue="ui">
+          <TabsList overflow="wrap">
+            <TabsTrigger value="ui">UI</TabsTrigger>
+            <TabsTrigger value="forms">Forms</TabsTrigger>
+            <TabsTrigger value="data">Data</TabsTrigger>
+            <TabsTrigger value="kanban">Kanban</TabsTrigger>
+            <TabsTrigger value="calendar">Calendar</TabsTrigger>
+            <TabsTrigger value="overlay">Overlay</TabsTrigger>
+            <TabsTrigger value="patterns">Patterns</TabsTrigger>
+            <TabsTrigger value="wizard">Wizard</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="ui" className="mt-5">
+            <CoreUiSection />
+          </TabsContent>
+          <TabsContent value="forms" className="mt-5">
+            <FormsSection />
+          </TabsContent>
+          <TabsContent value="data" className="mt-5">
+            <DataTableSection />
+          </TabsContent>
+          <TabsContent value="kanban" className="mt-5">
+            <KanbanSection />
+          </TabsContent>
+          <TabsContent value="calendar" className="mt-5">
+            <CalendarSection />
+          </TabsContent>
+          <TabsContent value="overlay" className="mt-5">
+            <OverlaySection />
+          </TabsContent>
+          <TabsContent value="patterns" className="mt-5">
+            <PatternsSection />
+          </TabsContent>
+          <TabsContent value="wizard" className="mt-5">
+            <WizardSection />
+          </TabsContent>
+        </Tabs>
+      </section>
+
+      <InventorySection />
+      <VerificationSection />
+    </>
+  )
+}
+
+function App() {
+  const [selectedKey, setSelectedKey] = useState("overview")
+  const selection = resolveWorkbenchSelection(selectedKey)
+
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="grid min-h-screen lg:grid-cols-[280px_1fr]">
+        <WorkbenchSidebar selectedKey={selectedKey} onSelect={setSelectedKey} />
+
+        <div className="min-w-0">
+          <HeroSection />
+
+          <div className="mx-auto grid max-w-7xl gap-10 px-6 py-10 lg:px-8">
+            {selection.type === "overview" ? <OverviewContent /> : null}
+            {selection.type === "category" ? (
+              <CategorySection group={selection.group} onSelect={setSelectedKey} />
+            ) : null}
+            {selection.type === "module" ? (
+              <ComponentDetailSection group={selection.group} component={selection.component} />
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      <div className="fixed bottom-4 right-4 hidden rounded-full border bg-card px-4 py-2 text-sm shadow-lg md:flex md:items-center md:gap-2">
+        <BellIcon className="size-4 text-primary" />
+        <span>Local Tembro workbench active</span>
+      </div>
+    </main>
+  )
+}
+
+export default App

package/packages/cli/vendor/templates/showcase/src/showcase/data/registry.ts

@@ -0,0 +1,273 @@
+export type ComponentStatus = "stable" | "preview" | "experimental" | "internal"
+
+export type RegistryComponent = {
+  name: string
+  status: ComponentStatus
+  sourcePath: string
+}
+
+export type RegistryGroup = {
+  name: string
+  components: RegistryComponent[]
+}
+
+export type ComponentRow = {
+  id: string
+  component: string
+  category: string
+  status: "Ready" | "Testing" | "Review"
+  props: number
+}
+
+const component = (name: string, status: ComponentStatus, sourcePath: string): RegistryComponent => ({
+  name,
+  status,
+  sourcePath,
+})
+
+export const registryGroups: RegistryGroup[] = [
+  {
+    name: "ui",
+    components: [
+      component("button", "stable", "src/components/ui/button"),
+      component("input", "stable", "src/components/ui/input"),
+      component("textarea", "stable", "src/components/ui/textarea"),
+      component("checkbox", "stable", "src/components/ui/checkbox"),
+      component("switch", "stable", "src/components/ui/switch"),
+      component("badge", "stable", "src/components/ui/badge"),
+      component("card", "stable", "src/components/ui/card"),
+      component("skeleton", "preview", "src/components/ui/skeleton"),
+      component("tabs", "preview", "src/components/ui/tabs"),
+      component("dialog", "stable", "src/components/ui/dialog"),
+      component("dropdown-menu", "stable", "src/components/ui/dropdown-menu"),
+      component("popover", "stable", "src/components/ui/popover"),
+      component("tooltip", "preview", "src/components/ui/tooltip"),
+      component("select", "stable", "src/components/ui/select"),
+      component("table", "stable", "src/components/ui/table"),
+      component("segmented-control", "preview", "src/components/ui/segmented-control"),
+      component("radio-group", "stable", "src/components/ui/radio-group"),
+      component("accordion", "stable", "src/components/ui/accordion"),
+      component("kbd", "stable", "src/components/ui/kbd"),
+      component("scroll-box", "stable", "src/components/ui/scroll-box"),
+      component("right-click-menu", "stable", "src/components/ui/right-click-menu"),
+      component("collapse", "preview", "src/components/ui/collapse"),
+      component("command", "preview", "src/components/ui/command"),
+      component("divider", "preview", "src/components/ui/divider"),
+      component("spinner", "preview", "src/components/ui/spinner"),
+    ],
+  },
+  {
+    name: "actions",
+    components: [
+      component("action-menu", "stable", "src/components/actions/action-menu.tsx"),
+      component("button-group", "preview", "src/components/actions/button-group.tsx"),
+      component("copy-button", "preview", "src/components/actions/copy-button.tsx"),
+      component("quick-action-grid", "preview", "src/components/actions/quick-action-grid.tsx"),
+    ],
+  },
+  {
+    name: "inputs",
+    components: [
+      component("tag-input", "preview", "src/components/inputs/tag-input.tsx"),
+      component("async-select", "preview", "src/components/inputs/async-select.tsx"),
+      component("otp-input", "preview", "src/components/inputs/otp-input.tsx"),
+      component("color-picker", "stable", "src/components/inputs/color-picker.tsx"),
+      component("signature-pad", "preview", "src/components/inputs/signature-pad.tsx"),
+      component("rating", "preview", "src/components/inputs/rating.tsx"),
+      component("slider", "preview", "src/components/inputs/slider.tsx"),
+      component("inline-editable", "preview", "src/components/inputs/inline-editable.tsx"),
+      component("json-input", "preview", "src/components/inputs/json-input.tsx"),
+      component("time-picker", "preview", "src/components/inputs/time-picker.tsx"),
+    ],
+  },
+  {
+    name: "form",
+    components: [
+      component("form-field-shell", "preview", "src/components/form/form-field-shell.tsx"),
+      component("form-input", "preview", "src/components/form/form-input.tsx"),
+      component("form-select", "preview", "src/components/form/form-select.tsx"),
+      component("form-textarea", "preview", "src/components/form/form-textarea.tsx"),
+      component("form-switch", "preview", "src/components/form/form-switch.tsx"),
+      component("form-date-range-input", "preview", "src/components/form/form-date-range-input.tsx"),
+      component("form-date-picker", "preview", "src/components/form/form-date-picker.tsx"),
+      component("form-date-range-picker", "preview", "src/components/form/form-date-range-picker.tsx"),
+    ],
+  },
+  {
+    name: "display",
+    components: [
+      component("activity-feed", "stable", "src/components/display/activity-feed.tsx"),
+      component("avatar", "preview", "src/components/display/avatar.tsx"),
+      component("code-block", "preview", "src/components/display/code-block.tsx"),
+      component("carousel", "preview", "src/components/display/carousel.tsx"),
+      component("tag", "preview", "src/components/display/tag.tsx"),
+      component("typography", "preview", "src/components/display/typography.tsx"),
+      component("data-state", "preview", "src/components/display/data-state.tsx"),
+      component("description-list", "stable", "src/components/display/description-list.tsx"),
+      component("kanban", "preview", "src/components/display/kanban.tsx"),
+      component("list", "preview", "src/components/display/list.tsx"),
+      component("progress", "stable", "src/components/display/progress.tsx"),
+      component("info-card", "stable", "src/components/display/info-card.tsx"),
+      component("statistic", "preview", "src/components/display/statistic.tsx"),
+      component("status-dot", "preview", "src/components/display/status-dot.tsx"),
+      component("status-legend", "preview", "src/components/display/status-legend.tsx"),
+      component("timeline", "stable", "src/components/display/timeline.tsx"),
+      component("tree-view", "preview", "src/components/display/tree-view.tsx"),
+      component("qr-code", "stable", "src/components/display/qr-code.tsx"),
+      component("virtual-list", "preview", "src/components/display/virtual-list.tsx"),
+    ],
+  },
+  { name: "data-table", components: [component("data-table", "preview", "src/components/data-table/data-table.tsx")] },
+  {
+    name: "calendar",
+    components: [
+      component("calendar", "preview", "src/components/calendar/calendar.tsx"),
+      component("date-picker", "preview", "src/components/calendar/date-picker.tsx"),
+      component("date-range-picker", "preview", "src/components/calendar/date-range-picker.tsx"),
+    ],
+  },
+  {
+    name: "overlay",
+    components: [
+      component("confirm-dialog", "stable", "src/components/overlay/confirm-dialog.tsx"),
+      component("alert-dialog", "stable", "src/components/overlay/alert-dialog.tsx"),
+      component("drawer", "stable", "src/components/overlay/drawer.tsx"),
+    ],
+  },
+  {
+    name: "feedback",
+    components: [
+      component("loading-state", "stable", "src/components/feedback/loading-state.tsx"),
+      component("page-state", "preview", "src/components/feedback/page-state.tsx"),
+      component("alert", "preview", "src/components/feedback/alert.tsx"),
+    ],
+  },
+  {
+    name: "layout",
+    components: [
+      component("sidebar", "stable", "src/components/layout/app-sidebar.tsx"),
+      component("breadcrumbs", "stable", "src/components/layout/breadcrumbs.tsx"),
+      component("section", "preview", "src/components/layout/section.tsx"),
+    ],
+  },
+  {
+    name: "patterns",
+    components: [
+      component("bulk-action-bar", "preview", "src/components/patterns/bulk-action-bar.tsx"),
+      component("data-view", "preview", "src/components/patterns/data-view.tsx"),
+      component("detail-layout", "preview", "src/components/patterns/detail-layout.tsx"),
+      component("empty-state", "preview", "src/components/patterns/empty-state.tsx"),
+      component("form-builder", "preview", "src/components/patterns/form-builder.tsx"),
+      component("resource-detail-page", "preview", "src/components/patterns/resource-detail-page.tsx"),
+      component("resource-page", "preview", "src/components/patterns/resource-page.tsx"),
+      component("page-toolbar", "preview", "src/components/patterns/page-toolbar.tsx"),
+      component("settings-page", "preview", "src/components/patterns/settings-page.tsx"),
+    ],
+  },
+  {
+    name: "modern",
+    components: [
+      component("calendar-scheduler", "preview", "src/components/modern/calendar-scheduler.tsx"),
+      component("dual-list-picker", "preview", "src/components/modern/dual-list-picker.tsx"),
+      component("resizable-panel", "preview", "src/components/modern/resizable-panel.tsx"),
+      component("rich-text-editor", "preview", "src/components/modern/rich-text-editor.tsx"),
+      component("image-cropper", "preview", "src/components/modern/image-cropper.tsx"),
+    ],
+  },
+  {
+    name: "upload",
+    components: [
+      component("file-upload", "preview", "src/components/upload/file-upload.tsx"),
+      component("image-upload", "preview", "src/components/upload/image-upload.tsx"),
+    ],
+  },
+  {
+    name: "filters",
+    components: [
+      component("filter-bar", "stable", "src/components/filters/filter-bar.tsx"),
+      component("saved-filter-select", "preview", "src/components/filters/saved-filter-select.tsx"),
+    ],
+  },
+  { name: "navigation", components: [component("pagination", "stable", "src/components/navigation/pagination.tsx")] },
+  { name: "charts", components: [component("progress-circle", "stable", "src/components/charts/progress-circle.tsx")] },
+  {
+    name: "wizard",
+    components: [
+      component("stepper", "preview", "src/components/wizard/stepper.tsx"),
+      component("wizard", "preview", "src/components/wizard/wizard.tsx"),
+    ],
+  },
+  {
+    name: "notifications",
+    components: [
+      component("toast", "preview", "src/components/notifications/toast.tsx"),
+      component("notification-center", "preview", "src/components/notifications/notification-center.tsx"),
+    ],
+  },
+  { name: "command", components: [component("command-palette", "preview", "src/components/command/command-palette.tsx")] },
+  { name: "dnd", components: [component("sortable-list", "preview", "src/components/dnd/sortable-list.tsx")] },
+]
+
+export const componentRows: ComponentRow[] = [
+  { id: "cmp-001", component: "sidebar", category: "layout", status: "Ready", props: 34 },
+  { id: "cmp-002", component: "kanban", category: "display", status: "Ready", props: 13 },
+  { id: "cmp-003", component: "data-table", category: "data-table", status: "Testing", props: 50 },
+  { id: "cmp-004", component: "calendar", category: "calendar", status: "Ready", props: 22 },
+  { id: "cmp-005", component: "drawer", category: "overlay", status: "Ready", props: 14 },
+  { id: "cmp-006", component: "wizard", category: "wizard", status: "Review", props: 12 },
+  { id: "cmp-007", component: "button", category: "ui", status: "Ready", props: 9 },
+  { id: "cmp-008", component: "input", category: "ui", status: "Ready", props: 11 },
+]
+
+export const wizardSteps = [
+  { id: "setup", title: "Setup", description: "init + theme", completed: true },
+  { id: "add", title: "Add", description: "105 registry components", completed: true },
+  { id: "test", title: "Test", description: "visible workbench" },
+]
+
+export const moduleCount = registryGroups.reduce((sum, group) => sum + group.components.length, 0)
+
+export type WorkbenchSelection =
+  | { type: "overview"; key: "overview" }
+  | { type: "category"; key: string; group: RegistryGroup }
+  | { type: "module"; key: string; group: RegistryGroup; component: RegistryComponent }
+
+export function getCategoryKey(groupName: string) {
+  return `category:${groupName}`
+}
+
+export function getModuleKey(groupName: string, componentName: string) {
+  return `component:${groupName}/${componentName}`
+}
+
+export function getModuleLabel(componentName: string) {
+  return componentName
+}
+
+export function getModuleSourcePath(component: RegistryComponent) {
+  return component.sourcePath
+}
+
+export function resolveWorkbenchSelection(key: string): WorkbenchSelection {
+  if (key === "overview") return { type: "overview", key: "overview" }
+
+  if (key.startsWith("category:")) {
+    const groupName = key.slice("category:".length)
+    const group = registryGroups.find((item) => item.name === groupName)
+    if (group) return { type: "category", key, group }
+  }
+
+  if (key.startsWith("component:")) {
+    const value = key.slice("component:".length)
+    const slashIndex = value.indexOf("/")
+    const groupName = value.slice(0, slashIndex)
+    const componentName = value.slice(slashIndex + 1)
+    const group = registryGroups.find((item) => item.name === groupName)
+    const selectedComponent = group?.components.find((item) => item.name === componentName)
+    if (group && selectedComponent) {
+      return { type: "module", key, group, component: selectedComponent }
+    }
+  }
+
+  return { type: "overview", key: "overview" }
+}

package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx

@@ -0,0 +1,41 @@
+import { PlusIcon, SettingsIcon } from "lucide-react"
+
+import { CopyButton } from "@/components/actions/copy-button"
+import { StatisticCard, StatisticGrid } from "@/components/display/statistic"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { moduleCount, registryGroups } from "@/showcase/data/registry"
+
+export function HeroSection() {
+  return (
+    <section className="border-b bg-card">
+      <div className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
+        <div className="flex flex-wrap items-start justify-between gap-6">
+          <div className="max-w-3xl">
+            <div className="mb-3 flex flex-wrap gap-2">
+              <Badge status="success" label="tembro init done" variant="soft" />
+              <Badge status="info" label={`${moduleCount} registry components`} variant="soft" />
+              <Badge status="warning" label="real local components" variant="soft" />
+            </div>
+            <h1 className="text-4xl font-semibold tracking-tight">All Tembro Components Test Surface</h1>
+            <p className="mt-3 text-base leading-7 text-muted-foreground">
+              Vite starter olib tashlandi. Bu ekran `tembro add showcase` orqali o‘rnatilgan aniq registry componentlardan qurildi.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button leftIcon={<PlusIcon className="size-4" />}>Create</Button>
+            <Button variant="outline" leftIcon={<SettingsIcon className="size-4" />}>Settings</Button>
+            <CopyButton value="npx tembro@3.1.8 list --json">Copy list command</CopyButton>
+          </div>
+        </div>
+
+        <StatisticGrid columns={4} className="mt-8">
+          <StatisticCard label="Registry components" value={moduleCount} change="visible below" trend="up" description="tembro add <name>" />
+          <StatisticCard label="Local source files" value="152" change="with hooks/lib" trend="up" description="installed by CLI" />
+          <StatisticCard label="Categories" value={registryGroups.length} change="all shown" trend="up" description="actions to wizard" />
+          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@3.1.8" />
+        </StatisticGrid>
+      </div>
+    </section>
+  )
+}

package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx

@@ -0,0 +1,82 @@
+import {
+  CalendarDaysIcon,
+  ClipboardListIcon,
+  DatabaseIcon,
+  FolderKanbanIcon,
+  Layers3Icon,
+  LayoutDashboardIcon,
+  SparklesIcon,
+  UploadCloudIcon,
+  WandSparklesIcon,
+} from "lucide-react"
+
+import { Sidebar } from "@/components/layout/app-sidebar"
+import { Badge } from "@/components/ui/badge"
+import { getCategoryKey, getModuleKey, getModuleLabel, moduleCount, registryGroups } from "@/showcase/data/registry"
+
+type WorkbenchSidebarProps = {
+  selectedKey: string
+  onSelect: (key: string) => void
+}
+
+export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProps) {
+  return (
+    <aside className="border-r bg-sidebar p-3 lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto">
+      <Sidebar
+        width="100%"
+        header={
+          <div className="flex items-center gap-3 rounded-xl border bg-card p-3">
+            <div className="flex size-10 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+              <WandSparklesIcon className="size-5" />
+            </div>
+            <div className="min-w-0">
+              <div className="truncate font-semibold">Tembro Workbench</div>
+              <div className="text-xs text-muted-foreground">local copied components</div>
+            </div>
+          </div>
+        }
+        items={[
+          { key: "overview", label: "Overview", icon: <LayoutDashboardIcon className="size-4" />, active: selectedKey === "overview", badge: <Badge label="live" status="success" />, onSelect: () => onSelect("overview") },
+          ...registryGroups.map((group) => {
+            const categoryKey = getCategoryKey(group.name)
+            return {
+              key: categoryKey,
+              label: group.name,
+              icon: group.name === "ui"
+                ? <SparklesIcon className="size-4" />
+                : group.name === "data-table"
+                  ? <DatabaseIcon className="size-4" />
+                  : group.name === "display"
+                    ? <FolderKanbanIcon className="size-4" />
+                    : group.name === "calendar"
+                      ? <CalendarDaysIcon className="size-4" />
+                      : group.name === "overlay"
+                        ? <Layers3Icon className="size-4" />
+                        : group.name === "upload"
+                          ? <UploadCloudIcon className="size-4" />
+                          : <ClipboardListIcon className="size-4" />,
+              active: selectedKey === categoryKey || selectedKey.startsWith(`component:${group.name}/`),
+              badge: <Badge label={group.components.length} variant="secondary" />,
+              defaultExpanded: ["ui", "display", "data-table", "inputs", "layout", "overlay"].includes(group.name),
+              onSelect: () => onSelect(categoryKey),
+              items: group.components.map((component) => {
+                const moduleKey = getModuleKey(group.name, component.name)
+                return {
+                  key: moduleKey,
+                  label: getModuleLabel(component.name),
+                  active: selectedKey === moduleKey,
+                  onSelect: () => onSelect(moduleKey),
+                }
+              }),
+            }
+          }),
+        ]}
+        footerAccount={{
+          label: "tembro@3.1.8",
+          description: `${moduleCount} registry components`,
+        }}
+        activeIndicator="bar"
+      />
+    </aside>
+  )
+}

package/packages/cli/vendor/templates/showcase/src/showcase/sections/CalendarSection.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react"
+
+import { Calendar } from "@/components/calendar/calendar"
+import { DatePicker } from "@/components/calendar/date-picker"
+import { Pagination } from "@/components/navigation/pagination"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+
+export function CalendarSection() {
+  const [date, setDate] = useState("2026-07-15")
+  const [page, setPage] = useState(2)
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[1fr_0.8fr]">
+      <Card>
+        <CardHeader>
+          <CardTitle>Calendar</CardTitle>
+          <CardDescription>Single/range capable calendar module.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Calendar value={date} onValueChange={setDate} showTodayShortcut showClearShortcut showSelectionSummary />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>DatePicker and pagination</CardTitle>
+          <CardDescription>Popover date picker plus navigation pagination.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-5">
+          <DatePicker value={date} onValueChange={setDate} />
+          <Pagination page={page} pageCount={9} onPageChange={setPage} showSummary totalCount={90} pageSize={10} />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}