canvas-ui-sdk 0.3.23 → 4.0.0

package/registry/layout/account-settings-shell.json

@@ -1,7 +1,16 @@
 {
   "name": "account-settings-shell",
   "type": "registry:layout",
-  "description": "Settings page layout with left sidebar navigation (Profile, Security, Payments, Notifications tabs).",
+  "description": "Settings page layout with left sidebar tab navigation (Profile, Security, Payments, Notifications) and right content area. Sidebar stacks above content on mobile. Full viewport height. Use for user preferences, account management, or any settings interface.",
+  "keywords": [
+    "settings",
+    "account",
+    "preferences",
+    "tabs",
+    "profile",
+    "security"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/account-settings-shell.tsx",

package/registry/layout/dashboard-shell.json

@@ -1,7 +1,18 @@
 {
   "name": "dashboard-shell",
   "type": "registry:layout",
-  "description": "Main dashboard layout with dark sidebar (320px) and fixed header. Sidebar has collapsible sections with nav items.",
+  "description": "Full-screen app layout with dark sidebar (320px) and fixed header. Sidebar has collapsible sections with nav items. Hides sidebar on mobile with a slide-out menu. Full viewport height. Use for data-heavy applications with many navigation sections like admin dashboards, CRM tools, or project management.",
+  "keywords": [
+    "admin",
+    "dashboard",
+    "sidebar",
+    "navigation",
+    "crm",
+    "back-office",
+    "management",
+    "app"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/dashboard-shell.tsx",

package/registry/layout/double-sidebar-shell.json

@@ -1,12 +1,21 @@
 {
   "name": "double-sidebar-shell",
   "type": "registry:layout",
-  "description": "Two-column sidebar layout (96px icons + 280px nav). Each column can be light/dark themed independently.",
+  "description": "Two-column sidebar layout (96px icon strip + 280px nav panel). Each column can be light or dark themed independently. Full viewport height. Use for complex apps with category groupings and nested navigation.",
+  "keywords": [
+    "sidebar",
+    "double",
+    "icon",
+    "navigation",
+    "categories",
+    "nested"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/double-sidebar-shell.tsx",
       "type": "registry:layout",
-      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { Header } from \"./header\";\nimport { useCSSVariableSync } from \"../../hooks/use-css-variable-sync\";\nimport { DoubleSidebar, DoubleSidebarSection, NavTab, defaultDoubleSidebarSections } from \"./double-sidebar\";\nimport { \n  Sheet, \n  SheetContent,\n  SheetTitle,\n} from \"../ui/sheet\";\nimport { cn } from \"../../lib/utils\";\nimport { useThemeBranding } from \"../../context/theme-context\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\n\ninterface DoubleSidebarShellProps {\n  /** Navigation sections for the double sidebar */\n  sections?: DoubleSidebarSection[];\n  /** Visual variant for the icon column */\n  iconVariant?: \"dark\" | \"light\";\n  /** Visual variant for the navigation column */\n  navVariant?: \"dark\" | \"light\";\n  /** Optional page header content (e.g., breadcrumbs, page title) */\n  pageHeader?: React.ReactNode;\n  /** Main content - the modular blocks */\n  children: React.ReactNode;\n  /** Callback when a tab is clicked */\n  onTabClick?: (section: DoubleSidebarSection, tab: NavTab) => void;\n  /** Callback when app menu (hamburger) is clicked - for future app-level menu */\n  onAppMenuClick?: () => void;\n  /** Additional class name for the main content area */\n  contentClassName?: string;\n}\n\n/**\n * Canvas Design System - Double Sidebar Shell\n * \n * A composable page layout with a two-column sidebar that provides:\n * - Fixed header (80px)\n * - Fixed double sidebar on desktop (96px icons + 280px nav = 376px total)\n * - Floating sidebar toggle button on mobile (left edge)\n * - Mobile sheet navigation with both sidebar columns\n * - Each sidebar column can be independently themed (light/dark)\n * - Main content area with pageHeader slot and children slot for blocks\n * \n * Uses the same styling and spacing as DashboardShell for non-sidebar content.\n * \n * @example\n * ```tsx\n * <DoubleSidebarShell \n *   sections={sections}\n *   iconVariant=\"light\" \n *   navVariant=\"light\"\n * >\n *   <ContentDropzone label=\"Main content area\" />\n * </DoubleSidebarShell>\n * ```\n */\nexport function DoubleSidebarShell({\n  sections = defaultDoubleSidebarSections,\n  iconVariant,\n  navVariant,\n  pageHeader,\n  children,\n  onTabClick,\n  onAppMenuClick,\n  contentClassName,\n}: DoubleSidebarShellProps) {\n  useCSSVariableSync();\n  const { branding } = useThemeBranding();\n  const themeSidebarMode = branding.sidebarMode ?? \"dark\";\n  const effectiveIconVariant = iconVariant ?? themeSidebarMode;\n  const effectiveNavVariant = navVariant ?? themeSidebarMode;\n  const [sidebarOpen, setSidebarOpen] = useState(false);\n\n  const handleTabClick = (section: DoubleSidebarSection, tab: NavTab) => {\n    onTabClick?.(section, tab);\n    // Close sidebar when tab is clicked\n    setSidebarOpen(false);\n  };\n\n  const handleAppMenuClick = () => {\n    // Placeholder for future app-level menu\n    onAppMenuClick?.();\n    console.log(\"App menu clicked - implement app-level mobile menu here\");\n  };\n\n  return (\n    <div className=\"min-h-screen bg-[var(--canvas-background)]\">\n      {/* Header - Fixed at top, offset on desktop to not overlap double sidebar */}\n      <div className=\"fixed top-0 left-0 right-0 lg:left-[var(--double-sidebar-width)] z-40\">\n        <Header onMenuClick={handleAppMenuClick} />\n      </div>\n\n      {/* Desktop Double Sidebar - Fixed on left, visible lg+ */}\n      <div className=\"hidden lg:block fixed top-0 left-0 bottom-0 z-50 w-[var(--double-sidebar-width)]\">\n        <DoubleSidebar\n          sections={sections}\n          iconVariant={effectiveIconVariant}\n          navVariant={effectiveNavVariant}\n          onTabClick={handleTabClick}\n        />\n      </div>\n\n      {/* Mobile Sidebar Toggle Button - Floating on left edge */}\n      <button\n        onClick={() => setSidebarOpen(true)}\n        className={cn(\n          \"lg:hidden fixed left-0 z-30\",\n          \"top-[calc(var(--header-height)+4px)]\",\n          \"flex items-center justify-center\",\n          \"size-11\",\n          \"bg-[var(--canvas-background)]\",\n          \"border border-l-0 border-[var(--canvas-neutral-border)]\",\n          \"rounded-r-[var(--radius-xs)]\",\n          \"shadow-[0px_4px_16px_0px_rgba(0,0,0,0.04)]\",\n          \"transition-opacity hover:opacity-80\"\n        )}\n        aria-label=\"Open sidebar\"\n      >\n        <ChevronRight className=\"size-6 text-[var(--canvas-primary)]\" />\n      </button>\n\n      {/* Mobile Double Sidebar Sheet */}\n      <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>\n        <SheetContent side=\"left\" className=\"p-0 w-[var(--double-sidebar-width)]\">\n          <VisuallyHidden.Root>\n            <SheetTitle>Navigation</SheetTitle>\n          </VisuallyHidden.Root>\n          <DoubleSidebar\n            sections={sections}\n            iconVariant={effectiveIconVariant}\n            navVariant={effectiveNavVariant}\n            onTabClick={handleTabClick}\n            onClose={() => setSidebarOpen(false)}\n          />\n        </SheetContent>\n      </Sheet>\n\n      {/* Main Content Area - Same styling as DashboardShell */}\n      <main\n        className={cn(\n          \"pt-[var(--header-height)]\",\n          \"lg:pl-[var(--double-sidebar-width)]\",\n          \"min-h-screen\"\n        )}\n      >\n        <div \n          className={cn(\n            \"flex flex-col gap-[var(--spacing-xl)]\",\n            \"px-[var(--spacing-xl)] lg:px-[var(--spacing-5xl)]\",\n            \"pt-10 pb-[var(--spacing-5xl)]\",\n            contentClassName\n          )}\n        >\n          {/* Page Header Slot */}\n          {pageHeader && (\n            <section className=\"pt-0\">\n              {pageHeader}\n            </section>\n          )}\n\n          {/* Main Content Slot - Blocks go here */}\n          <section className=\"flex flex-col gap-[var(--spacing-4xl)]\">\n            {children}\n          </section>\n        </div>\n      </main>\n    </div>\n  );\n}\n\n// Re-export types for convenience\nexport type { DoubleSidebarSection, NavTab } from \"./double-sidebar\";\n\n\n"
+      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { Header } from \"./header\";\nimport { useCSSVariableSync } from \"../../hooks/use-css-variable-sync\";\nimport { DoubleSidebar, DoubleSidebarSection, NavTab, defaultDoubleSidebarSections } from \"./double-sidebar\";\nimport { \n  Sheet, \n  SheetContent,\n  SheetTitle,\n} from \"../ui/sheet\";\nimport { cn } from \"../../lib/utils\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\n\ninterface DoubleSidebarShellProps {\n  /** Navigation sections for the double sidebar */\n  sections?: DoubleSidebarSection[];\n  /** Visual variant for the icon column */\n  iconVariant?: \"dark\" | \"light\";\n  /** Visual variant for the navigation column */\n  navVariant?: \"dark\" | \"light\";\n  /** Optional page header content (e.g., breadcrumbs, page title) */\n  pageHeader?: React.ReactNode;\n  /** Main content - the modular blocks */\n  children: React.ReactNode;\n  /** Callback when a tab is clicked */\n  onTabClick?: (section: DoubleSidebarSection, tab: NavTab) => void;\n  /** Callback when app menu (hamburger) is clicked - for future app-level menu */\n  onAppMenuClick?: () => void;\n  /** Additional class name for the main content area */\n  contentClassName?: string;\n}\n\n/**\n * Canvas Design System - Double Sidebar Shell\n * \n * A composable page layout with a two-column sidebar that provides:\n * - Fixed header (80px)\n * - Fixed double sidebar on desktop (96px icons + 280px nav = 376px total)\n * - Floating sidebar toggle button on mobile (left edge)\n * - Mobile sheet navigation with both sidebar columns\n * - Each sidebar column can be independently themed (light/dark)\n * - Main content area with pageHeader slot and children slot for blocks\n * \n * Uses the same styling and spacing as DashboardShell for non-sidebar content.\n * \n * @example\n * ```tsx\n * <DoubleSidebarShell \n *   sections={sections}\n *   iconVariant=\"light\" \n *   navVariant=\"light\"\n * >\n *   <ContentDropzone label=\"Main content area\" />\n * </DoubleSidebarShell>\n * ```\n */\nexport function DoubleSidebarShell({\n  sections = defaultDoubleSidebarSections,\n  iconVariant,\n  navVariant,\n  pageHeader,\n  children,\n  onTabClick,\n  onAppMenuClick,\n  contentClassName,\n}: DoubleSidebarShellProps) {\n  useCSSVariableSync();\n  const effectiveIconVariant = iconVariant ?? \"dark\";\n  const effectiveNavVariant = navVariant ?? \"light\";\n  const [sidebarOpen, setSidebarOpen] = useState(false);\n\n  const handleTabClick = (section: DoubleSidebarSection, tab: NavTab) => {\n    onTabClick?.(section, tab);\n    // Close sidebar when tab is clicked\n    setSidebarOpen(false);\n  };\n\n  const handleAppMenuClick = () => {\n    // Placeholder for future app-level menu\n    onAppMenuClick?.();\n    console.log(\"App menu clicked - implement app-level mobile menu here\");\n  };\n\n  return (\n    <div className=\"min-h-screen bg-[var(--canvas-background)]\">\n      {/* Header - Fixed at top, offset on desktop to not overlap double sidebar */}\n      <div className=\"fixed top-0 left-0 right-0 lg:left-[var(--double-sidebar-width)] z-40\">\n        <Header onMenuClick={handleAppMenuClick} />\n      </div>\n\n      {/* Desktop Double Sidebar - Fixed on left, visible lg+ */}\n      <div className=\"hidden lg:block fixed top-0 left-0 bottom-0 z-50 w-[var(--double-sidebar-width)]\">\n        <DoubleSidebar\n          sections={sections}\n          iconVariant={effectiveIconVariant}\n          navVariant={effectiveNavVariant}\n          onTabClick={handleTabClick}\n        />\n      </div>\n\n      {/* Mobile Sidebar Toggle Button - Floating on left edge */}\n      <button\n        onClick={() => setSidebarOpen(true)}\n        className={cn(\n          \"lg:hidden fixed left-0 z-30\",\n          \"top-[calc(var(--header-height)+4px)]\",\n          \"flex items-center justify-center\",\n          \"size-11\",\n          \"bg-[var(--canvas-background)]\",\n          \"border border-l-0 border-[var(--canvas-neutral-border)]\",\n          \"rounded-r-[var(--radius-xs)]\",\n          \"shadow-[0px_4px_16px_0px_rgba(0,0,0,0.04)]\",\n          \"transition-opacity hover:opacity-80\"\n        )}\n        aria-label=\"Open sidebar\"\n      >\n        <ChevronRight className=\"size-6 text-[var(--canvas-primary)]\" />\n      </button>\n\n      {/* Mobile Double Sidebar Sheet */}\n      <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>\n        <SheetContent side=\"left\" className=\"p-0 w-[var(--double-sidebar-width)]\">\n          <VisuallyHidden.Root>\n            <SheetTitle>Navigation</SheetTitle>\n          </VisuallyHidden.Root>\n          <DoubleSidebar\n            sections={sections}\n            iconVariant={effectiveIconVariant}\n            navVariant={effectiveNavVariant}\n            onTabClick={handleTabClick}\n            onClose={() => setSidebarOpen(false)}\n          />\n        </SheetContent>\n      </Sheet>\n\n      {/* Main Content Area - Same styling as DashboardShell */}\n      <main\n        className={cn(\n          \"pt-[var(--header-height)]\",\n          \"lg:pl-[var(--double-sidebar-width)]\",\n          \"min-h-screen\"\n        )}\n      >\n        <div \n          className={cn(\n            \"flex flex-col gap-[var(--spacing-xl)]\",\n            \"px-[var(--spacing-xl)] lg:px-[var(--spacing-5xl)]\",\n            \"pt-10 pb-[var(--spacing-5xl)]\",\n            contentClassName\n          )}\n        >\n          {/* Page Header Slot */}\n          {pageHeader && (\n            <section className=\"pt-0\">\n              {pageHeader}\n            </section>\n          )}\n\n          {/* Main Content Slot - Blocks go here */}\n          <section className=\"flex flex-col gap-[var(--spacing-4xl)]\">\n            {children}\n          </section>\n        </div>\n      </main>\n    </div>\n  );\n}\n\n// Re-export types for convenience\nexport type { DoubleSidebarSection, NavTab } from \"./double-sidebar\";\n\n\n"
     }
   ],
   "dependencies": [

package/registry/layout/double-sidebar.json

@@ -1,7 +1,15 @@
 {
   "name": "double-sidebar",
   "type": "registry:layout",
-  "description": "Two-column sidebar with icon strip and nav panel. Used inside DoubleSidebarShell.",
+  "description": "Two-column sidebar with icon strip (96px) and nav panel (280px, full height). Used inside DoubleSidebarShell. Icons select categories, nav panel shows items for selected category.",
+  "keywords": [
+    "sidebar",
+    "double",
+    "icon",
+    "categories",
+    "navigation"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/double-sidebar.tsx",

package/registry/layout/header.json

@@ -1,7 +1,16 @@
 {
   "name": "header",
   "type": "registry:layout",
-  "description": "Top navigation bar with logo, nav links, icon cluster (search, notifications, messages, cart), and avatar dropdown.",
+  "description": "Responsive top navigation bar (~64px tall) with logo, nav links, icon cluster (search, notifications, messages, cart), and avatar dropdown. Collapses to hamburger menu on mobile. Light and dark variants.",
+  "keywords": [
+    "header",
+    "navbar",
+    "navigation",
+    "top-bar",
+    "logo",
+    "menu"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/header.tsx",

package/registry/layout/icon-sidebar-shell.json

@@ -1,7 +1,15 @@
 {
   "name": "icon-sidebar-shell",
   "type": "registry:layout",
-  "description": "Layout with narrow icon-only sidebar (96px). Good for apps with few main sections.",
+  "description": "App layout with narrow icon-only sidebar (96px) and fixed header. Icons expand to tooltip labels on hover. Full viewport height. Use for apps with few main sections where you want maximum content space.",
+  "keywords": [
+    "sidebar",
+    "icon",
+    "compact",
+    "navigation",
+    "app"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/icon-sidebar-shell.tsx",

package/registry/layout/icon-sidebar.json

@@ -1,7 +1,15 @@
 {
   "name": "icon-sidebar",
   "type": "registry:layout",
-  "description": "Narrow sidebar with only icons and tooltips. Used inside IconSidebarShell.",
+  "description": "Narrow sidebar (96px, full height) with only icons and tooltips. Used inside IconSidebarShell. Shows icon buttons with hover tooltips for labels.",
+  "keywords": [
+    "sidebar",
+    "icon",
+    "compact",
+    "narrow",
+    "navigation"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/icon-sidebar.tsx",

package/registry/layout/mobile-menu-shell.json

@@ -1,7 +1,16 @@
 {
   "name": "mobile-menu-shell",
   "type": "registry:layout",
-  "description": "Mobile-first layout with bottom navigation bar. Good for mobile app-like experiences.",
+  "description": "Mobile-first layout with sticky bottom navigation bar (Home, Search, Profile tabs). Full viewport height. Use for mobile app-like experiences or responsive apps that need bottom tab navigation.",
+  "keywords": [
+    "mobile",
+    "bottom",
+    "tabs",
+    "navigation",
+    "app",
+    "responsive"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/mobile-menu-shell.tsx",

package/registry/layout/multistep-progressbar-shell.json

@@ -1,7 +1,15 @@
 {
   "name": "multistep-progressbar-shell",
   "type": "registry:layout",
-  "description": "",
+  "description": "Alternative multi-step layout with a horizontal progress bar instead of numbered step tracker. Content area centered below. Use for simplified wizard flows where progress percentage matters more than step numbers.",
+  "keywords": [
+    "wizard",
+    "multistep",
+    "progress",
+    "bar",
+    "form"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/multistep-progressbar-shell.tsx",

package/registry/layout/multistep-shell.json

@@ -1,7 +1,17 @@
 {
   "name": "multistep-shell",
   "type": "registry:layout",
-  "description": "Multi-step wizard layout with horizontal step tracker, step title/description, and navigation buttons.",
+  "description": "Multi-step wizard layout with horizontal step tracker at top, step title/description, and navigation buttons. Content area centered (max 768px). Full viewport height. Use for registration flows, onboarding, or any sequential form process.",
+  "keywords": [
+    "wizard",
+    "multistep",
+    "steps",
+    "form",
+    "onboarding",
+    "registration",
+    "flow"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/multistep-shell.tsx",

package/registry/layout/multistep-sidebar-shell.json

@@ -1,12 +1,20 @@
 {
   "name": "multistep-sidebar-shell",
   "type": "registry:layout",
-  "description": "Multi-step wizard with sidebar step list instead of horizontal tracker.",
+  "description": "Multi-step wizard with step list in a left sidebar instead of horizontal tracker. Full viewport height. Use when steps need descriptions or the flow has many steps.",
+  "keywords": [
+    "wizard",
+    "multistep",
+    "sidebar",
+    "steps",
+    "form"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/multistep-sidebar-shell.tsx",
       "type": "registry:layout",
-      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Header } from \"./header\";\nimport { useCSSVariableSync } from \"../../hooks/use-css-variable-sync\";\nimport { StepTracker, Step, defaultSteps } from \"../blocks/step-tracker\";\nimport { InfoCard, LinksCard, LinkItem, defaultSupportLinks } from \"../blocks/sidebar-cards\";\nimport { Button } from \"../ui/button\";\nimport { Typography } from \"../ui/typography\";\n\ninterface MultistepSidebarShellProps {\n  /** Array of step objects */\n  steps?: Step[];\n  /** Current active step (0-indexed) */\n  currentStep?: number;\n  /** Callback when a step is clicked */\n  onStepClick?: (stepIndex: number) => void;\n  /** Info card title */\n  infoTitle?: string;\n  /** Info card description */\n  infoDescription?: string;\n  /** Links card title */\n  linksTitle?: string;\n  /** Links card items */\n  links?: LinkItem[];\n  /** Main content */\n  children: React.ReactNode;\n  /** Callback when Cancel/Back is clicked */\n  onCancel?: () => void;\n  /** Callback when Continue/Submit is clicked */\n  onContinue?: () => void;\n  /** Cancel button text */\n  cancelText?: string;\n  /** Continue button text */\n  continueText?: string;\n  /** Whether Continue button is disabled */\n  continueDisabled?: boolean;\n  /** Callback when app menu (hamburger) is clicked */\n  onAppMenuClick?: () => void;\n  /** Additional class name for the main content area */\n  contentClassName?: string;\n}\n\n/**\n * Canvas Design System - Multistep Sidebar Shell\n * \n * A layout for multi-step processes with a sidebar:\n * - Fixed header with logo\n * - Horizontal step tracker below header\n * - Step title and description\n * - Two-column layout:\n *   - Left: Main content with navigation buttons\n *   - Right: Sidebar (320px) with Info and Links cards\n * \n * @example\n * ```tsx\n * <MultistepSidebarShell\n *   steps={defaultSteps}\n *   currentStep={0}\n *   onCancel={() => router.back()}\n *   onContinue={() => setStep(step + 1)}\n * >\n *   <ContentDropzone />\n * </MultistepSidebarShell>\n * ```\n */\nexport function MultistepSidebarShell({\n  steps = defaultSteps,\n  currentStep = 0,\n  onStepClick,\n  infoTitle,\n  infoDescription,\n  linksTitle,\n  links = defaultSupportLinks,\n  children,\n  onCancel,\n  onContinue,\n  cancelText,\n  continueText,\n  continueDisabled = false,\n  onAppMenuClick,\n  contentClassName,\n}: MultistepSidebarShellProps) {\n  useCSSVariableSync();\n\n  const handleAppMenuClick = () => {\n    onAppMenuClick?.();\n    console.log(\"App menu clicked - implement app-level mobile menu here\");\n  };\n\n  const currentStepData = steps[currentStep];\n  const isFirstStep = currentStep === 0;\n  const isLastStep = currentStep === steps.length - 1;\n\n  return (\n    <div className=\"min-h-screen bg-[var(--canvas-background)]\">\n      {/* Header - Fixed at top with logo visible */}\n      <header className=\"sticky top-0 z-40\">\n        <Header onMenuClick={handleAppMenuClick} showDesktopLogo />\n      </header>\n\n      {/* Step Tracker Section */}\n      <div className=\"w-full\">\n        <StepTracker\n          steps={steps}\n          currentStep={currentStep}\n          onStepClick={onStepClick}\n        />\n      </div>\n\n      {/* Main Content Area - Two Column Layout */}\n      <main className=\"w-full\">\n        <div \n          className={cn(\n            \"w-full max-w-[1200px] mx-auto\",\n            \"px-[var(--spacing-xl)] lg:px-0\",\n            \"py-10\",\n            \"flex gap-10\"\n          )}\n        >\n          {/* Left: Main Content */}\n          <div className={cn(\"flex-1 min-w-0\", contentClassName)}>\n            {/* Step Content Container */}\n            <div className=\"flex flex-col gap-[var(--spacing-3xl)]\">\n              {/* Step Title and Description */}\n              <div className=\"flex flex-col gap-1\">\n                <Typography variant=\"h6\" as=\"h3\">\n                  {currentStepData?.label || `Step ${currentStep + 1}`}\n                </Typography>\n                {currentStepData?.description && (\n                  <Typography variant=\"body-m\" color=\"muted\">\n                    {currentStepData.description}\n                  </Typography>\n                )}\n              </div>\n\n              {/* Main Content Area */}\n              <div className=\"w-full\">\n                {children}\n              </div>\n\n              {/* Navigation Buttons */}\n              <div className=\"flex gap-[var(--spacing-3xl)] items-center justify-end\">\n                <Button variant=\"neutral\" onClick={onCancel}>\n                  {cancelText || (isFirstStep ? \"Cancel\" : \"Back\")}\n                </Button>\n                <Button variant=\"primary\" onClick={onContinue} disabled={continueDisabled}>\n                  {continueText || (isLastStep ? \"Submit\" : \"Continue\")}\n                </Button>\n              </div>\n            </div>\n          </div>\n\n          {/* Right: Sidebar */}\n          <aside className=\"hidden lg:flex flex-col gap-10 shrink-0\">\n            <InfoCard \n              title={infoTitle} \n              description={infoDescription} \n            />\n            <LinksCard \n              title={linksTitle} \n              links={links} \n            />\n          </aside>\n        </div>\n      </main>\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Header } from \"./header\";\nimport { useCSSVariableSync } from \"../../hooks/use-css-variable-sync\";\nimport { StepTracker, Step, defaultSteps } from \"../blocks/step-tracker\";\nimport { InfoCard, SupportLinksCard, LinkItem, defaultSupportLinks } from \"../blocks/sidebar-cards\";\nimport { Button } from \"../ui/button\";\nimport { Typography } from \"../ui/typography\";\n\ninterface MultistepSidebarShellProps {\n  /** Array of step objects */\n  steps?: Step[];\n  /** Current active step (0-indexed) */\n  currentStep?: number;\n  /** Callback when a step is clicked */\n  onStepClick?: (stepIndex: number) => void;\n  /** Info card title */\n  infoTitle?: string;\n  /** Info card description */\n  infoDescription?: string;\n  /** Links card title */\n  linksTitle?: string;\n  /** Links card items */\n  links?: LinkItem[];\n  /** Main content */\n  children: React.ReactNode;\n  /** Callback when Cancel/Back is clicked */\n  onCancel?: () => void;\n  /** Callback when Continue/Submit is clicked */\n  onContinue?: () => void;\n  /** Cancel button text */\n  cancelText?: string;\n  /** Continue button text */\n  continueText?: string;\n  /** Whether Continue button is disabled */\n  continueDisabled?: boolean;\n  /** Callback when app menu (hamburger) is clicked */\n  onAppMenuClick?: () => void;\n  /** Additional class name for the main content area */\n  contentClassName?: string;\n}\n\n/**\n * Canvas Design System - Multistep Sidebar Shell\n * \n * A layout for multi-step processes with a sidebar:\n * - Fixed header with logo\n * - Horizontal step tracker below header\n * - Step title and description\n * - Two-column layout:\n *   - Left: Main content with navigation buttons\n *   - Right: Sidebar (320px) with Info and Links cards\n * \n * @example\n * ```tsx\n * <MultistepSidebarShell\n *   steps={defaultSteps}\n *   currentStep={0}\n *   onCancel={() => router.back()}\n *   onContinue={() => setStep(step + 1)}\n * >\n *   <ContentDropzone />\n * </MultistepSidebarShell>\n * ```\n */\nexport function MultistepSidebarShell({\n  steps = defaultSteps,\n  currentStep = 0,\n  onStepClick,\n  infoTitle,\n  infoDescription,\n  linksTitle,\n  links = defaultSupportLinks,\n  children,\n  onCancel,\n  onContinue,\n  cancelText,\n  continueText,\n  continueDisabled = false,\n  onAppMenuClick,\n  contentClassName,\n}: MultistepSidebarShellProps) {\n  useCSSVariableSync();\n\n  const handleAppMenuClick = () => {\n    onAppMenuClick?.();\n    console.log(\"App menu clicked - implement app-level mobile menu here\");\n  };\n\n  const currentStepData = steps[currentStep];\n  const isFirstStep = currentStep === 0;\n  const isLastStep = currentStep === steps.length - 1;\n\n  return (\n    <div className=\"min-h-screen bg-[var(--canvas-background)]\">\n      {/* Header - Fixed at top with logo visible */}\n      <header className=\"sticky top-0 z-40\">\n        <Header onMenuClick={handleAppMenuClick} showDesktopLogo />\n      </header>\n\n      {/* Step Tracker Section */}\n      <div className=\"w-full\">\n        <StepTracker\n          steps={steps}\n          currentStep={currentStep}\n          onStepClick={onStepClick}\n        />\n      </div>\n\n      {/* Main Content Area - Two Column Layout */}\n      <main className=\"w-full\">\n        <div \n          className={cn(\n            \"w-full max-w-[1200px] mx-auto\",\n            \"px-[var(--spacing-xl)] lg:px-0\",\n            \"py-10\",\n            \"flex gap-10\"\n          )}\n        >\n          {/* Left: Main Content */}\n          <div className={cn(\"flex-1 min-w-0\", contentClassName)}>\n            {/* Step Content Container */}\n            <div className=\"flex flex-col gap-[var(--spacing-3xl)]\">\n              {/* Step Title and Description */}\n              <div className=\"flex flex-col gap-1\">\n                <Typography variant=\"h6\" as=\"h3\">\n                  {currentStepData?.label || `Step ${currentStep + 1}`}\n                </Typography>\n                {currentStepData?.description && (\n                  <Typography variant=\"body-m\" color=\"muted\">\n                    {currentStepData.description}\n                  </Typography>\n                )}\n              </div>\n\n              {/* Main Content Area */}\n              <div className=\"w-full\">\n                {children}\n              </div>\n\n              {/* Navigation Buttons */}\n              <div className=\"flex gap-[var(--spacing-3xl)] items-center justify-end\">\n                <Button variant=\"neutral\" onClick={onCancel}>\n                  {cancelText || (isFirstStep ? \"Cancel\" : \"Back\")}\n                </Button>\n                <Button variant=\"primary\" onClick={onContinue} disabled={continueDisabled}>\n                  {continueText || (isLastStep ? \"Submit\" : \"Continue\")}\n                </Button>\n              </div>\n            </div>\n          </div>\n\n          {/* Right: Sidebar */}\n          <aside className=\"hidden lg:flex flex-col gap-10 shrink-0\">\n            <InfoCard \n              title={infoTitle} \n              description={infoDescription} \n            />\n            <SupportLinksCard\n              title={linksTitle}\n              links={links}\n            />\n          </aside>\n        </div>\n      </main>\n    </div>\n  );\n}\n"
     }
   ],
   "dependencies": [],

package/registry/layout/project-context-shell.json

@@ -6,7 +6,7 @@
     {
       "path": "components/layout/project-context-shell.tsx",
       "type": "registry:layout",
-      "content": "\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { ScrollArea } from \"../ui/scroll-area\";\nimport {\n  FileText,\n  Users,\n  LayoutGrid,\n  Wand2,\n} from \"lucide-react\";\nimport { useThemeImages, useThemeBranding } from \"../../context/theme-context\";\nimport {\n  Diamond,\n  Hexagon,\n  Star,\n  Lightning,\n  Sparkle,\n  Infinity,\n  Code,\n  Terminal,\n  Cpu,\n  Database,\n  Globe,\n  Cloud,\n  WifiHigh,\n  Briefcase,\n  Buildings,\n  Storefront,\n  Handshake,\n  ChartLine,\n  Palette as PaletteIcon,\n  PencilSimple,\n  Camera,\n  MusicNote,\n  Lightbulb,\n  Leaf,\n  Tree,\n  Sun,\n  Moon,\n  Fire,\n  Drop,\n  ChatCircle,\n  Envelope,\n  Phone,\n  Megaphone,\n  Heart,\n  Shield,\n  Trophy,\n  Rocket,\n  Target,\n  Flag,\n  type Icon as PhosphorIcon,\n} from \"@phosphor-icons/react\";\n\n// ═══════════════════════════════════════════════════════════\n// LOGO ICON SHAPES\n// ═══════════════════════════════════════════════════════════\n\ntype IconShapeId = \"rounded\" | \"circle\" | \"square\";\n\nconst iconShapes: { id: IconShapeId; renderBackground: (bgColor: string) => React.ReactNode }[] = [\n  {\n    id: \"rounded\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <rect width=\"32\" height=\"32\" rx=\"10\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n  {\n    id: \"circle\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <circle cx=\"16\" cy=\"16\" r=\"16\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n  {\n    id: \"square\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <rect width=\"32\" height=\"32\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n];\n\nconst iconMap: Record<string, PhosphorIcon> = {\n  Diamond, Hexagon, Star, Lightning, Sparkle, Infinity, Code, Terminal, Cpu, Database,\n  Globe, Cloud, WifiHigh, Briefcase, Buildings, Storefront, Handshake, ChartLine,\n  Palette: PaletteIcon, PencilSimple, Camera, MusicNote, Lightbulb, Leaf, Tree,\n  Sun, Moon, Fire, Drop, ChatCircle, Envelope, Phone, Megaphone, Heart, Shield,\n  Trophy, Rocket, Target, Flag,\n};\n\nfunction resolveBrandingColor(value: string): string {\n  if (!value) return \"#ffffff\";\n  if (value.startsWith(\"var(\")) {\n    const varName = value.replace(\"var(\", \"\").replace(\")\", \"\");\n    if (typeof window !== \"undefined\") {\n      const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();\n      return computed || \"#ffffff\";\n    }\n    return \"#ffffff\";\n  }\n  return value;\n}\n\n// ═══════════════════════════════════════════════════════════\n// TAB TYPES\n// ═══════════════════════════════════════════════════════════\n\nexport type ProjectContextTab = \"scope\" | \"personas\" | \"screens\" | \"prompts\";\n\ninterface TabConfig {\n  id: ProjectContextTab;\n  label: string;\n  icon: typeof FileText;\n  description: string;\n}\n\nconst tabs: TabConfig[] = [\n  {\n    id: \"scope\",\n    label: \"Scope\",\n    icon: FileText,\n    description: \"Upload your project scope document\",\n  },\n  {\n    id: \"personas\",\n    label: \"Personas\",\n    icon: Users,\n    description: \"Define who you're building for\",\n  },\n  {\n    id: \"screens\",\n    label: \"Screens\",\n    icon: LayoutGrid,\n    description: \"Map out your product's screens and flows\",\n  },\n  {\n    id: \"prompts\",\n    label: \"Prompt Helpers\",\n    icon: Wand2,\n    description: \"Build prompts with existing components\",\n  },\n];\n\n// ═══════════════════════════════════════════════════════════\n// SHELL COMPONENT\n// ═══════════════════════════════════════════════════════════\n\ninterface ProjectContextShellProps {\n  children: ReactNode;\n  activeTab: ProjectContextTab;\n  onTabChange: (tab: ProjectContextTab) => void;\n}\n\nexport function ProjectContextShell({\n  children,\n  activeTab,\n  onTabChange,\n}: ProjectContextShellProps) {\n  const activeTabConfig = tabs.find((t) => t.id === activeTab);\n  const themeImages = useThemeImages();\n  const { branding, isMounted } = useThemeBranding();\n  \n  // Get logo (use light variant for this light sidebar)\n  const logoUrl = themeImages.logoLight;\n  const iconShape = iconShapes.find(s => s.id === branding.iconShape) || iconShapes[0];\n\n  return (\n    <div className=\"min-h-screen flex bg-[var(--canvas-background)]\">\n        {/* Sidebar */}\n        <aside className=\"w-64 border-r border-[var(--canvas-border)] bg-[var(--canvas-background)] flex flex-col shrink-0\">\n          {/* Logo + Title Header - matches main header height */}\n          <div className=\"px-4 border-b border-[var(--canvas-border)] flex items-center h-[97px]\">\n            {/* Logo */}\n            <div className={`flex items-center ${isMounted ? 'opacity-100' : 'opacity-0'}`}>\n              {logoUrl ? (\n                <img \n                  src={logoUrl} \n                  alt=\"Logo\" \n                  className=\"h-8 w-auto object-contain\"\n                />\n              ) : (\n                // Uses CSS variables directly - no JavaScript resolution needed\n                <div className=\"flex items-center\">\n                  <div className=\"relative size-8 shrink-0\">\n                    {iconShape.renderBackground(branding.bgColor || \"var(--canvas-primary)\")}\n                    <div className=\"absolute inset-0 flex items-center justify-center z-10\">\n                      {(() => {\n                        const IconComponent = iconMap[branding.iconName || \"Buildings\"] || Buildings;\n                        return <IconComponent weight=\"bold\" size={18} color={branding.iconColor || \"var(--canvas-primary-foreground)\"} />;\n                      })()}\n                    </div>\n                  </div>\n                  <span className=\"font-semibold ml-2.5 text-[var(--canvas-text)]\" style={{ fontSize: \"var(--typo-body-xl-size)\" }}>\n                    {branding.wordmark || \"canvas\"}\n                  </span>\n                </div>\n              )}\n            </div>\n          </div>\n\n          <nav className=\"flex-1 p-2\">\n            {tabs.map((tab) => {\n              const Icon = tab.icon;\n              const isActive = activeTab === tab.id;\n\n              return (\n                <button\n                  key={tab.id}\n                  onClick={() => onTabChange(tab.id)}\n                  className={cn(\n                    \"cursor-pointer w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors mb-1\",\n                    isActive\n                      ? \"bg-[var(--canvas-surface-brand)] text-[var(--canvas-primary)]\"\n                      : \"text-[var(--canvas-text-muted)] hover:bg-[var(--canvas-surface)] hover:text-[var(--canvas-text)]\"\n                  )}\n                >\n                  <Icon className=\"size-4 shrink-0\" />\n                  <span className=\"font-medium\" style={{ fontSize: \"var(--typo-body-s-size)\" }}>{tab.label}</span>\n                </button>\n              );\n            })}\n          </nav>\n\n          {/* Help section */}\n          <div className=\"p-4 border-t border-[var(--canvas-border)]\">\n            <div className=\"rounded-lg bg-[var(--canvas-surface)] p-3\">\n              <p className=\"text-[var(--canvas-text-muted)] leading-relaxed\" style={{ fontSize: \"var(--typo-body-xs-size)\" }}>\n                💡 Use the prompt templates to generate content with Cursor AI\n              </p>\n            </div>\n          </div>\n        </aside>\n\n        {/* Content Area */}\n        <main className=\"flex-1 flex flex-col min-w-0 overflow-hidden\">\n          {/* Tab Header */}\n          <div className=\"border-b border-[var(--canvas-border)] px-8 py-6 bg-[var(--canvas-background)]\">\n            {activeTabConfig && (\n              <div>\n                <h2 className=\"font-semibold text-[var(--canvas-text)]\" style={{ fontSize: \"var(--typo-body-xl-size)\" }}>\n                  {activeTabConfig.label}\n                </h2>\n                <p className=\"text-[var(--canvas-text-muted)]\" style={{ fontSize: \"var(--typo-body-s-size)\" }}>\n                  {activeTabConfig.description}\n                </p>\n              </div>\n            )}\n          </div>\n\n          {/* Scrollable Content */}\n          <ScrollArea className=\"flex-1\">\n            <div className=\"p-8\">{children}</div>\n          </ScrollArea>\n        </main>\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { ScrollArea } from \"../ui/scroll-area\";\nimport {\n  FileText,\n  Users,\n  LayoutGrid,\n  Wand2,\n} from \"lucide-react\";\nimport { useThemeImages, useThemeBranding } from \"../../context/theme-context\";\nimport {\n  Diamond,\n  Hexagon,\n  Star,\n  Lightning,\n  Sparkle,\n  Infinity,\n  Code,\n  Terminal,\n  Cpu,\n  Database,\n  Globe,\n  Cloud,\n  WifiHigh,\n  Briefcase,\n  Buildings,\n  Storefront,\n  Handshake,\n  ChartLine,\n  Palette as PaletteIcon,\n  PencilSimple,\n  Camera,\n  MusicNote,\n  Lightbulb,\n  Leaf,\n  Tree,\n  Sun,\n  Moon,\n  Fire,\n  Drop,\n  ChatCircle,\n  Envelope,\n  Phone,\n  Megaphone,\n  Heart,\n  Shield,\n  Trophy,\n  Rocket,\n  Target,\n  Flag,\n  type Icon as PhosphorIcon,\n} from \"@phosphor-icons/react\";\n\n// ═══════════════════════════════════════════════════════════\n// LOGO ICON SHAPES\n// ═══════════════════════════════════════════════════════════\n\ntype IconShapeId = \"rounded\" | \"circle\" | \"square\";\n\nconst iconShapes: { id: IconShapeId; renderBackground: (bgColor: string) => React.ReactNode }[] = [\n  {\n    id: \"rounded\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <rect width=\"32\" height=\"32\" rx=\"10\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n  {\n    id: \"circle\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <circle cx=\"16\" cy=\"16\" r=\"16\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n  {\n    id: \"square\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <rect width=\"32\" height=\"32\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n];\n\nconst iconMap: Record<string, PhosphorIcon> = {\n  Diamond, Hexagon, Star, Lightning, Sparkle, Infinity, Code, Terminal, Cpu, Database,\n  Globe, Cloud, WifiHigh, Briefcase, Buildings, Storefront, Handshake, ChartLine,\n  Palette: PaletteIcon, PencilSimple, Camera, MusicNote, Lightbulb, Leaf, Tree,\n  Sun, Moon, Fire, Drop, ChatCircle, Envelope, Phone, Megaphone, Heart, Shield,\n  Trophy, Rocket, Target, Flag,\n};\n\nfunction resolveBrandingColor(value: string): string {\n  if (!value) return \"#ffffff\";\n  if (value.startsWith(\"var(\")) {\n    const varName = value.replace(\"var(\", \"\").replace(\")\", \"\");\n    if (typeof window !== \"undefined\") {\n      const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();\n      return computed || \"#ffffff\";\n    }\n    return \"#ffffff\";\n  }\n  return value;\n}\n\n// ═══════════════════════════════════════════════════════════\n// TAB TYPES\n// ═══════════════════════════════════════════════════════════\n\nexport type ProjectContextTab = \"scope\" | \"personas\" | \"screens\" | \"prompts\";\n\ninterface TabConfig {\n  id: ProjectContextTab;\n  label: string;\n  icon: typeof FileText;\n  description: string;\n}\n\nconst tabs: TabConfig[] = [\n  {\n    id: \"scope\",\n    label: \"Scope\",\n    icon: FileText,\n    description: \"Upload your project scope document\",\n  },\n  {\n    id: \"personas\",\n    label: \"Personas\",\n    icon: Users,\n    description: \"Define who you're building for\",\n  },\n  {\n    id: \"screens\",\n    label: \"Screens\",\n    icon: LayoutGrid,\n    description: \"Map out your product's screens and flows\",\n  },\n  {\n    id: \"prompts\",\n    label: \"Prompt Helpers\",\n    icon: Wand2,\n    description: \"Build prompts with existing components\",\n  },\n];\n\n// ═══════════════════════════════════════════════════════════\n// SHELL COMPONENT\n// ═══════════════════════════════════════════════════════════\n\ninterface ProjectContextShellProps {\n  children: ReactNode;\n  activeTab: ProjectContextTab;\n  onTabChange: (tab: ProjectContextTab) => void;\n}\n\nexport function ProjectContextShell({\n  children,\n  activeTab,\n  onTabChange,\n}: ProjectContextShellProps) {\n  const activeTabConfig = tabs.find((t) => t.id === activeTab);\n  const themeImages = useThemeImages();\n  const { branding, isMounted } = useThemeBranding();\n  \n  // Get logo (use light variant for this light sidebar)\n  const logoUrl = themeImages.logoLight;\n  const iconShape = iconShapes.find(s => s.id === branding.iconShape) || iconShapes[0];\n\n  return (\n    <div className=\"min-h-screen flex bg-[var(--canvas-background)]\">\n        {/* Sidebar */}\n        <aside className=\"w-64 border-r border-[var(--canvas-border)] bg-[var(--canvas-background)] flex flex-col shrink-0\">\n          {/* Logo + Title Header - matches main header height */}\n          <div className=\"px-4 border-b border-[var(--canvas-border)] flex items-center h-[97px]\">\n            {/* Logo */}\n            <div className={`flex items-center ${isMounted ? 'opacity-100' : 'opacity-0'}`}>\n              {logoUrl ? (\n                <img \n                  src={logoUrl} \n                  alt=\"Logo\" \n                  className=\"h-8 w-auto object-contain\"\n                />\n              ) : (\n                // Uses CSS variables directly - no JavaScript resolution needed\n                <div className=\"flex items-center\">\n                  <div className=\"relative size-8 shrink-0\">\n                    {iconShape.renderBackground(branding.bgColor || \"var(--canvas-primary)\")}\n                    <div className=\"absolute inset-0 flex items-center justify-center z-10\">\n                      {(() => {\n                        const IconComponent = iconMap[branding.iconName || \"Buildings\"] || Buildings;\n                        return <IconComponent weight=\"bold\" size={18} color={branding.iconColor || \"var(--canvas-primary-foreground)\"} />;\n                      })()}\n                    </div>\n                  </div>\n                  <span className=\"font-semibold ml-2.5 text-[var(--canvas-text)]\" style={{ fontSize: \"var(--typo-body-xl-size)\" }}>\n                    {branding.wordmark || \"canvas\"}\n                  </span>\n                </div>\n              )}\n            </div>\n          </div>\n\n          <nav className=\"flex-1 p-2\">\n            {tabs.map((tab) => {\n              const Icon = tab.icon;\n              const isActive = activeTab === tab.id;\n\n              return (\n                <button\n                  key={tab.id}\n                  onClick={() => onTabChange(tab.id)}\n                  className={cn(\n                    \"cursor-pointer w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors mb-1\",\n                    isActive\n                      ? \"bg-[var(--canvas-surface-brand)] text-[var(--canvas-primary)]\"\n                      : \"text-[var(--canvas-text-muted)] hover:bg-[var(--canvas-surface)] hover:text-[var(--canvas-text)]\"\n                  )}\n                >\n                  <Icon className=\"size-4 shrink-0\" />\n                  <span className=\"font-medium\" style={{ fontSize: \"var(--typo-body-s-size)\" }}>{tab.label}</span>\n                </button>\n              );\n            })}\n          </nav>\n\n          {/* Help section */}\n          <div className=\"p-4 border-t border-[var(--canvas-border)]\">\n            <div className=\"rounded-lg bg-[var(--canvas-surface)] p-3\">\n              <p className=\"text-[var(--canvas-text-muted)] leading-relaxed\" style={{ fontSize: \"var(--typo-body-xs-size)\" }}>\n                💡 Use the prompt templates to generate content with AI\n              </p>\n            </div>\n          </div>\n        </aside>\n\n        {/* Content Area */}\n        <main className=\"flex-1 flex flex-col min-w-0 overflow-hidden\">\n          {/* Tab Header */}\n          <div className=\"border-b border-[var(--canvas-border)] px-8 py-6 bg-[var(--canvas-background)]\">\n            {activeTabConfig && (\n              <div>\n                <h2 className=\"font-semibold text-[var(--canvas-text)]\" style={{ fontSize: \"var(--typo-body-xl-size)\" }}>\n                  {activeTabConfig.label}\n                </h2>\n                <p className=\"text-[var(--canvas-text-muted)]\" style={{ fontSize: \"var(--typo-body-s-size)\" }}>\n                  {activeTabConfig.description}\n                </p>\n              </div>\n            )}\n          </div>\n\n          {/* Scrollable Content */}\n          <ScrollArea className=\"flex-1\">\n            <div className=\"p-8\">{children}</div>\n          </ScrollArea>\n        </main>\n    </div>\n  );\n}\n"
     }
   ],
   "dependencies": [

package/registry/layout/search-bar-shell.json

@@ -1,7 +1,14 @@
 {
   "name": "search-bar-shell",
   "type": "registry:layout",
-  "description": "Layout with prominent search bar in header area.",
+  "description": "Layout with prominent search bar in header area. Centered content below. Full viewport height. Use for search-focused pages like documentation, knowledge bases, or directory search.",
+  "keywords": [
+    "search",
+    "documentation",
+    "knowledge-base",
+    "directory"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/search-bar-shell.tsx",

package/registry/layout/sidebar-nav.json

@@ -1,7 +1,13 @@
 {
   "name": "sidebar-nav",
   "type": "registry:layout",
-  "description": "Navigation items component used inside Sidebar. Handles section titles and item rendering.",
+  "description": "Navigation items component used inside Sidebar. Handles section titles and item rendering with active states. Compact, fits within sidebar width.",
+  "keywords": [
+    "navigation",
+    "sidebar",
+    "menu-items"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/sidebar-nav.tsx",

package/registry/layout/sidebar.json

@@ -1,12 +1,19 @@
 {
   "name": "sidebar",
   "type": "registry:layout",
-  "description": "Dark or light sidebar with logo and collapsible nav sections. Used inside DashboardShell.",
+  "description": "Dark or light sidebar (320px, full height) with logo and collapsible nav sections. Used inside DashboardShell. Each section has a title and list of nav items with icons.",
+  "keywords": [
+    "sidebar",
+    "navigation",
+    "menu",
+    "collapsible"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/sidebar.tsx",
       "type": "registry:layout",
-      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { ScrollArea } from \"../ui/scroll-area\";\nimport { SidebarNav, NavSection, NavItem } from \"./sidebar-nav\";\nimport { useThemeImages, useThemeBranding } from \"../../context/theme-context\";\n\n// Phosphor Icons (Bold variant) - same curated set as variables-modal\nimport {\n  Diamond,\n  Hexagon,\n  Star,\n  Lightning,\n  Sparkle,\n  Infinity,\n  Code,\n  Terminal,\n  Cpu,\n  Database,\n  Globe,\n  Cloud,\n  WifiHigh,\n  Briefcase,\n  Buildings,\n  Storefront,\n  Handshake,\n  ChartLine,\n  Palette as PaletteIcon,\n  PencilSimple,\n  Camera,\n  MusicNote,\n  Lightbulb,\n  Leaf,\n  Tree,\n  Sun,\n  Moon,\n  Fire,\n  Drop,\n  ChatCircle,\n  Envelope,\n  Phone,\n  Megaphone,\n  Heart,\n  Shield,\n  Trophy,\n  Rocket,\n  Target,\n  Flag,\n  type Icon as PhosphorIcon,\n} from \"@phosphor-icons/react\";\n\n// ============================================\n// Icon Shape Presets for Logo Creator\n// ============================================\n\ntype IconShapeId = \"rounded\" | \"circle\" | \"square\";\n\ninterface IconShape {\n  id: IconShapeId;\n  renderBackground: (bgColor: string) => React.ReactNode;\n}\n\nconst iconShapes: IconShape[] = [\n  {\n    id: \"rounded\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <rect width=\"32\" height=\"32\" rx=\"10\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n  {\n    id: \"circle\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <circle cx=\"16\" cy=\"16\" r=\"16\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n  {\n    id: \"square\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <rect width=\"32\" height=\"32\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n];\n\n// Map icon names to components\nconst iconMap: Record<string, PhosphorIcon> = {\n  Diamond,\n  Hexagon,\n  Star,\n  Lightning,\n  Sparkle,\n  Infinity,\n  Code,\n  Terminal,\n  Cpu,\n  Database,\n  Globe,\n  Cloud,\n  WifiHigh,\n  Briefcase,\n  Buildings,\n  Storefront,\n  Handshake,\n  ChartLine,\n  Palette: PaletteIcon,\n  PencilSimple,\n  Camera,\n  MusicNote,\n  Lightbulb,\n  Leaf,\n  Tree,\n  Sun,\n  Moon,\n  Fire,\n  Drop,\n  ChatCircle,\n  Envelope,\n  Phone,\n  Megaphone,\n  Heart,\n  Shield,\n  Trophy,\n  Rocket,\n  Target,\n  Flag,\n};\n\n// Helper to resolve CSS variable references to actual hex colors\nfunction resolveBrandingColor(value: string): string {\n  if (!value) return \"#ffffff\";\n  if (value.startsWith(\"var(\")) {\n    const varName = value.replace(\"var(\", \"\").replace(\")\", \"\");\n    if (typeof window !== \"undefined\") {\n      const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();\n      return computed || \"#ffffff\";\n    }\n    return \"#ffffff\";\n  }\n  return value;\n}\n\ninterface SidebarProps {\n  /** Navigation sections to display */\n  sections: NavSection[];\n  /** Visual variant - dark for desktop, light for mobile sheet */\n  variant?: \"dark\" | \"light\";\n  /** Callback when a nav item or subtab is clicked */\n  onItemClick?: (item: NavItem | Omit<NavItem, \"children\" | \"icon\">) => void;\n  /** Additional class names */\n  className?: string;\n}\n\n/**\n * Canvas Design System - Sidebar Component\n * \n * Desktop: Fixed dark sidebar (320px width) on the left\n * Mobile: Light theme sidebar rendered inside a Sheet\n */\nexport function Sidebar({ \n  sections, \n  variant = \"dark\", \n  onItemClick,\n  className \n}: SidebarProps) {\n  const isDark = variant === \"dark\";\n  const themeImages = useThemeImages();\n  const { branding, isMounted } = useThemeBranding();\n  \n  // Get the appropriate logo based on variant\n  const logoUrl = isDark ? themeImages.logoDark : themeImages.logoLight;\n  \n  // Get the icon shape renderer\n  const iconShape = iconShapes.find(s => s.id === branding.iconShape) || iconShapes[0];\n  \n  return (\n    <aside\n      className={cn(\n        \"flex flex-col h-full w-[var(--sidebar-width)]\",\n        isDark && \"bg-[var(--canvas-sidebar-dark-bg)] border-r border-[var(--canvas-sidebar-dark-border)]\",\n        !isDark && \"bg-[var(--canvas-background)] border-r border-[var(--canvas-border)]\",\n        className\n      )}\n    >\n      {/* Logo Section */}\n      <div className={cn(\n        \"flex items-center h-8 shrink-0\",\n        \"pt-11 pb-0 pr-[var(--spacing-2xl)] pl-9\"\n      )}>\n        {logoUrl ? (\n          // Custom logo replaces entire lockup (icon + wordmark)\n          <img \n            src={logoUrl} \n            alt=\"Logo\" \n            className={`h-8 w-auto object-contain ${isMounted ? 'opacity-100' : 'opacity-0'}`}\n          />\n        ) : (\n          // Logo creator: dynamic icon shape + Phosphor icon + wordmark\n          // Uses CSS variables directly - no JavaScript resolution needed\n          <div className=\"flex items-center\">\n            <div className=\"relative size-8 shrink-0\">\n              {iconShape.renderBackground(branding.bgColor || \"var(--canvas-primary)\")}\n              <div className=\"absolute inset-0 flex items-center justify-center z-10\">\n                {(() => {\n                  const IconComponent = iconMap[branding.iconName || \"Buildings\"] || Buildings;\n                  return <IconComponent weight=\"bold\" size={18} color={branding.iconColor || \"var(--canvas-primary-foreground)\"} />;\n                })()}\n              </div>\n            </div>\n            <span className={cn(\n              \"font-semibold ml-[var(--spacing-md)]\",\n              isDark ? \"text-[var(--canvas-sidebar-dark-active-text)]\" : \"text-[var(--canvas-text)]\"\n            )} style={{ fontSize: \"var(--typo-body-xl-size)\" }}>\n              {branding.wordmark || \"canvas\"}\n            </span>\n          </div>\n        )}\n      </div>\n\n      {/* Navigation */}\n      <ScrollArea className=\"flex-1 px-[var(--spacing-2xl)] pb-[var(--spacing-5xl)]\">\n        <SidebarNav \n          sections={sections} \n          variant={variant} \n          onItemClick={onItemClick}\n        />\n      </ScrollArea>\n    </aside>\n  );\n}\n\n// Re-export types for convenience\nexport type { NavSection, NavItem } from \"./sidebar-nav\";\n\n"
+      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { ScrollArea } from \"../ui/scroll-area\";\nimport { SidebarNav, NavSection, NavItem } from \"./sidebar-nav\";\nimport { useThemeImages, useThemeBranding } from \"../../context/theme-context\";\n\n// Phosphor Icons (Bold variant) - same curated set as variables-modal\nimport {\n  Diamond,\n  Hexagon,\n  Star,\n  Lightning,\n  Sparkle,\n  Infinity,\n  Code,\n  Terminal,\n  Cpu,\n  Database,\n  Globe,\n  Cloud,\n  WifiHigh,\n  Briefcase,\n  Buildings,\n  Storefront,\n  Handshake,\n  ChartLine,\n  Palette as PaletteIcon,\n  PencilSimple,\n  Camera,\n  MusicNote,\n  Lightbulb,\n  Leaf,\n  Tree,\n  Sun,\n  Moon,\n  Fire,\n  Drop,\n  ChatCircle,\n  Envelope,\n  Phone,\n  Megaphone,\n  Heart,\n  Shield,\n  Trophy,\n  Rocket,\n  Target,\n  Flag,\n  type Icon as PhosphorIcon,\n} from \"@phosphor-icons/react\";\n\n// ============================================\n// Icon Shape Presets for Logo Creator\n// ============================================\n\ntype IconShapeId = \"rounded\" | \"circle\" | \"square\";\n\ninterface IconShape {\n  id: IconShapeId;\n  renderBackground: (bgColor: string) => React.ReactNode;\n}\n\nconst iconShapes: IconShape[] = [\n  {\n    id: \"rounded\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <rect width=\"32\" height=\"32\" rx=\"10\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n  {\n    id: \"circle\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <circle cx=\"16\" cy=\"16\" r=\"16\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n  {\n    id: \"square\",\n    renderBackground: (bgColor: string) => (\n      <svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"size-full absolute inset-0\">\n        <rect width=\"32\" height=\"32\" style={{ fill: bgColor }} />\n      </svg>\n    ),\n  },\n];\n\n// Map icon names to components\nconst iconMap: Record<string, PhosphorIcon> = {\n  Diamond,\n  Hexagon,\n  Star,\n  Lightning,\n  Sparkle,\n  Infinity,\n  Code,\n  Terminal,\n  Cpu,\n  Database,\n  Globe,\n  Cloud,\n  WifiHigh,\n  Briefcase,\n  Buildings,\n  Storefront,\n  Handshake,\n  ChartLine,\n  Palette: PaletteIcon,\n  PencilSimple,\n  Camera,\n  MusicNote,\n  Lightbulb,\n  Leaf,\n  Tree,\n  Sun,\n  Moon,\n  Fire,\n  Drop,\n  ChatCircle,\n  Envelope,\n  Phone,\n  Megaphone,\n  Heart,\n  Shield,\n  Trophy,\n  Rocket,\n  Target,\n  Flag,\n};\n\n// Helper to resolve CSS variable references to actual hex colors\nfunction resolveBrandingColor(value: string): string {\n  if (!value) return \"#ffffff\";\n  if (value.startsWith(\"var(\")) {\n    const varName = value.replace(\"var(\", \"\").replace(\")\", \"\");\n    if (typeof window !== \"undefined\") {\n      const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();\n      return computed || \"#ffffff\";\n    }\n    return \"#ffffff\";\n  }\n  return value;\n}\n\ninterface SidebarProps {\n  /** Navigation sections to display */\n  sections: NavSection[];\n  /** Visual variant - dark for desktop, light for mobile sheet */\n  variant?: \"dark\" | \"light\";\n  /** Callback when a nav item or subtab is clicked */\n  onItemClick?: (item: NavItem | Omit<NavItem, \"children\" | \"icon\">) => void;\n  /** Additional class names */\n  className?: string;\n}\n\n/**\n * Canvas Design System - Sidebar Component\n * \n * Desktop: Fixed dark sidebar (320px width) on the left\n * Mobile: Light theme sidebar rendered inside a Sheet\n */\nexport function Sidebar({ \n  sections, \n  variant = \"dark\", \n  onItemClick,\n  className \n}: SidebarProps) {\n  const isDark = variant === \"dark\";\n  const themeImages = useThemeImages();\n  const { branding, isMounted } = useThemeBranding();\n  \n  // Get the appropriate logo based on variant\n  const logoUrl = isDark ? themeImages.logoDark : themeImages.logoLight;\n  \n  // Get the icon shape renderer\n  const iconShape = iconShapes.find(s => s.id === branding.iconShape) || iconShapes[0];\n  \n  return (\n    <aside\n      className={cn(\n        \"flex flex-col h-full w-[var(--sidebar-width)]\",\n        isDark && \"bg-[var(--canvas-sidebar-dark-bg)] border-r border-[var(--canvas-sidebar-dark-border)]\",\n        !isDark && \"bg-[var(--canvas-background)] border-r border-[var(--canvas-border)]\",\n        className\n      )}\n    >\n      {/* Logo Section */}\n      <div className={cn(\n        \"flex items-center h-8 shrink-0\",\n        \"pt-11 pb-0 pr-[var(--spacing-2xl)] pl-9\"\n      )}>\n        {logoUrl ? (\n          // Custom logo replaces entire lockup (icon + wordmark)\n          <img \n            src={logoUrl} \n            alt=\"Logo\" \n            className={`h-8 w-auto object-contain ${isMounted ? 'opacity-100' : 'opacity-0'}`}\n          />\n        ) : (\n          // Logo creator: dynamic icon shape + Phosphor icon + wordmark\n          // Uses CSS variables directly - no JavaScript resolution needed\n          <div className=\"flex items-center\">\n            <div className=\"relative size-8 shrink-0\">\n              {iconShape.renderBackground(branding.bgColor || \"var(--canvas-primary)\")}\n              <div className=\"absolute inset-0 flex items-center justify-center z-10\">\n                {(() => {\n                  const IconComponent = iconMap[branding.iconName || \"Buildings\"] || Buildings;\n                  return <IconComponent weight=\"bold\" size={18} color={branding.iconColor || \"var(--canvas-primary-foreground)\"} />;\n                })()}\n              </div>\n            </div>\n            <span className={cn(\n              \"font-semibold ml-[var(--spacing-md)]\",\n              isDark ? \"text-[var(--canvas-sidebar-dark-active-text)]\" : \"text-[var(--canvas-text)]\"\n            )} style={{ fontSize: \"var(--typo-body-xl-size)\", fontFamily: \"var(--typo-body-xl-font, var(--typo-global-font))\" }}>\n              {branding.wordmark || \"canvas\"}\n            </span>\n          </div>\n        )}\n      </div>\n\n      {/* Navigation */}\n      <ScrollArea className=\"flex-1 px-[var(--spacing-2xl)] pb-[var(--spacing-5xl)]\">\n        <SidebarNav \n          sections={sections} \n          variant={variant} \n          onItemClick={onItemClick}\n        />\n      </ScrollArea>\n    </aside>\n  );\n}\n\n// Re-export types for convenience\nexport type { NavSection, NavItem } from \"./sidebar-nav\";\n\n"
     }
   ],
   "dependencies": [

package/registry/layout/standard-page-shell.json

@@ -1,7 +1,16 @@
 {
   "name": "standard-page-shell",
   "type": "registry:layout",
-  "description": "No-sidebar layout with centered content (max 992px). Has optional flair banner and page header with tabs.",
+  "description": "No-sidebar layout with centered content (max 992px). Has optional flair banner at top and page header with tabs. Full viewport height. Use for content pages, marketing pages, search results, or any page that doesn't need persistent navigation.",
+  "keywords": [
+    "centered",
+    "content",
+    "standard",
+    "page",
+    "no-sidebar",
+    "simple"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/standard-page-shell.tsx",

package/registry/layout/vertical-multistep-shell.json

@@ -1,7 +1,16 @@
 {
   "name": "vertical-multistep-shell",
   "type": "registry:layout",
-  "description": "Multi-step wizard with vertical step tracker on the left side.",
+  "description": "Multi-step wizard with vertical step tracker on the left side. Steps show as a vertical list with descriptions. Full viewport height. Use for compact multi-step forms.",
+  "keywords": [
+    "wizard",
+    "multistep",
+    "vertical",
+    "steps",
+    "form",
+    "compact"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/layout/vertical-multistep-shell.tsx",

package/registry/ui/avatar.json

@@ -1,7 +1,15 @@
 {
   "name": "avatar",
   "type": "registry:ui",
-  "description": "",
+  "description": "Circular avatar image with fallback initials. Built on Radix Avatar. Use for user photos, profile thumbnails, or any person/entity representation.",
+  "keywords": [
+    "avatar",
+    "image",
+    "profile",
+    "user",
+    "photo"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/ui/avatar.tsx",

package/registry/ui/button.json

@@ -1,7 +1,15 @@
 {
   "name": "button",
   "type": "registry:ui",
-  "description": "",
+  "description": "Themed button with 6 variants (primary, primary-outline, primary-neutral, neutral, neutral-delete, delete) and 4 sizes (mini, sm, default, lg). Inline element (~36-48px tall depending on size). Use for form submissions, actions, navigation, or any clickable trigger.",
+  "keywords": [
+    "button",
+    "action",
+    "submit",
+    "click",
+    "cta"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/ui/button.tsx",

package/registry/ui/calendar.json

@@ -1,7 +1,15 @@
 {
   "name": "calendar",
   "type": "registry:ui",
-  "description": "",
+  "description": "Month calendar widget for single or range date selection. Shows month grid with navigation arrows. Use for date pickers, scheduling inputs, or any date selection.",
+  "keywords": [
+    "calendar",
+    "date",
+    "picker",
+    "month",
+    "schedule"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/ui/calendar.tsx",

package/registry/ui/checkbox.json

@@ -1,7 +1,14 @@
 {
   "name": "checkbox",
   "type": "registry:ui",
-  "description": "",
+  "description": "Themed checkbox with check indicator. Built on Radix Checkbox. Use for boolean toggles or multi-select lists in forms.",
+  "keywords": [
+    "checkbox",
+    "toggle",
+    "form",
+    "boolean"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/ui/checkbox.tsx",

package/registry/ui/date-input.json

@@ -1,7 +1,15 @@
 {
   "name": "date-input",
   "type": "registry:ui",
-  "description": "",
+  "description": "Date input field with calendar icon that opens a calendar popover for date selection. Combines Input with Calendar. Use for date entry fields in forms.",
+  "keywords": [
+    "date",
+    "input",
+    "picker",
+    "calendar",
+    "form"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/ui/date-input.tsx",

package/registry/ui/dialog.json

@@ -1,7 +1,14 @@
 {
   "name": "dialog",
   "type": "registry:ui",
-  "description": "",
+  "description": "Modal dialog overlay with title, description, and content area. Built on Radix Dialog. Use as the base for popup components or any modal interaction.",
+  "keywords": [
+    "dialog",
+    "modal",
+    "overlay",
+    "popup"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/ui/dialog.tsx",

package/registry/ui/dropdown-menu.json

@@ -1,7 +1,14 @@
 {
   "name": "dropdown-menu",
   "type": "registry:ui",
-  "description": "",
+  "description": "Dropdown menu with items, labels, separators, and keyboard navigation. Built on Radix DropdownMenu. Use for action menus, context menus, or any dropdown list of actions.",
+  "keywords": [
+    "dropdown",
+    "menu",
+    "actions",
+    "context-menu"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/ui/dropdown-menu.tsx",

package/registry/ui/file-uploader.json

@@ -1,7 +1,15 @@
 {
   "name": "file-uploader",
   "type": "registry:ui",
-  "description": "",
+  "description": "Drag-and-drop file upload area with browse button. Shows upload progress and file previews. Use for document uploads, image uploads, or any file attachment interface.",
+  "keywords": [
+    "upload",
+    "file",
+    "drag-drop",
+    "attachment",
+    "document"
+  ],
+  "visualWeight": "light",
   "files": [
     {
       "path": "components/ui/file-uploader.tsx",

package/registry/ui/image-uploader.json

@@ -1,7 +1,15 @@
 {
   "name": "image-uploader",
   "type": "registry:ui",
-  "description": "",
+  "description": "Image upload component with drag-and-drop, preview grid of uploaded images, and remove buttons. Use for multi-image uploads, gallery management, or product photo uploads.",
+  "keywords": [
+    "upload",
+    "image",
+    "drag-drop",
+    "gallery",
+    "photos"
+  ],
+  "visualWeight": "medium",
   "files": [
     {
       "path": "components/ui/image-uploader.tsx",