@getcoherent/core 0.5.11 → 0.5.13

package/dist/index.d.ts

@@ -903,10 +903,7 @@ declare const LayoutBlockDefinitionSchema: z.ZodObject<{
     generatedCode?: string | undefined;
 }>;
 type LayoutBlockDefinition = z.infer<typeof LayoutBlockDefinitionSchema>;
-/**
- * Page layout type
- */
-declare const PageLayoutSchema: z.ZodEnum<["centered", "sidebar-left", "sidebar-right", "full-width", "grid"]>;
+declare const PageLayoutSchema: z.ZodEffects<z.ZodEnum<["centered", "sidebar-left", "sidebar-right", "full-width", "grid"]>, "centered" | "sidebar-left" | "sidebar-right" | "full-width" | "grid", unknown>;
 type PageLayout = z.infer<typeof PageLayoutSchema>;
 /**
  * Page definition
@@ -956,7 +953,7 @@ declare const PageDefinitionSchema: z.ZodObject<{
     id: z.ZodPipeline<z.ZodEffects<z.ZodString, string, string>, z.ZodString>;
     name: z.ZodString;
     route: z.ZodPipeline<z.ZodEffects<z.ZodString, string, string>, z.ZodString>;
-    layout: z.ZodEnum<["centered", "sidebar-left", "sidebar-right", "full-width", "grid"]>;
+    layout: z.ZodEffects<z.ZodEnum<["centered", "sidebar-left", "sidebar-right", "full-width", "grid"]>, "centered" | "sidebar-left" | "sidebar-right" | "full-width" | "grid", unknown>;
     sections: z.ZodDefault<z.ZodArray<z.ZodObject<{
         id: z.ZodString;
         name: z.ZodString;
@@ -1062,11 +1059,11 @@ declare const PageDefinitionSchema: z.ZodObject<{
     name: string;
     description: string;
     id: string;
-    layout: "centered" | "sidebar-left" | "sidebar-right" | "full-width" | "grid";
     createdAt: string;
     updatedAt: string;
     route: string;
     title: string;
+    layout?: unknown;
     sections?: {
         name: string;
         id: string;
@@ -1251,6 +1248,7 @@ type Features = z.infer<typeof FeaturesSchema>;
  * This is the single source of truth
  */
 declare const DesignSystemConfigSchema: z.ZodObject<{
+    provider: z.ZodDefault<z.ZodEnum<["shadcn", "custom"]>>;
     version: z.ZodDefault<z.ZodString>;
     coherentVersion: z.ZodOptional<z.ZodString>;
     frameworkVersions: z.ZodOptional<z.ZodObject<{
@@ -1881,7 +1879,7 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
         id: z.ZodPipeline<z.ZodEffects<z.ZodString, string, string>, z.ZodString>;
         name: z.ZodString;
         route: z.ZodPipeline<z.ZodEffects<z.ZodString, string, string>, z.ZodString>;
-        layout: z.ZodEnum<["centered", "sidebar-left", "sidebar-right", "full-width", "grid"]>;
+        layout: z.ZodEffects<z.ZodEnum<["centered", "sidebar-left", "sidebar-right", "full-width", "grid"]>, "centered" | "sidebar-left" | "sidebar-right" | "full-width" | "grid", unknown>;
         sections: z.ZodDefault<z.ZodArray<z.ZodObject<{
             id: z.ZodString;
             name: z.ZodString;
@@ -1987,11 +1985,11 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
         name: string;
         description: string;
         id: string;
-        layout: "centered" | "sidebar-left" | "sidebar-right" | "full-width" | "grid";
         createdAt: string;
         updatedAt: string;
         route: string;
         title: string;
+        layout?: unknown;
         sections?: {
             name: string;
             id: string;
@@ -2182,6 +2180,7 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
     description: string;
     createdAt: string;
     updatedAt: string;
+    provider: "custom" | "shadcn";
     version: string;
     tokens: {
         colors: {
@@ -2495,11 +2494,11 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
         name: string;
         description: string;
         id: string;
-        layout: "centered" | "sidebar-left" | "sidebar-right" | "full-width" | "grid";
         createdAt: string;
         updatedAt: string;
         route: string;
         title: string;
+        layout?: unknown;
         sections?: {
             name: string;
             id: string;
@@ -2567,6 +2566,7 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
             image?: string | undefined;
         } | undefined;
     } | undefined;
+    provider?: "custom" | "shadcn" | undefined;
     version?: string | undefined;
     coherentVersion?: string | undefined;
     frameworkVersions?: {
@@ -2697,6 +2697,32 @@ declare const EXAMPLE_MULTIPAGE_CONFIG: DesignSystemConfig;
  */
 declare const EXAMPLE_SPA_CONFIG: DesignSystemConfig;
 
+interface ComponentMeta {
+    id: string;
+    name: string;
+    category: 'form' | 'layout' | 'navigation' | 'feedback' | 'data-display' | 'overlay' | 'typography';
+    managed: boolean;
+}
+interface ComponentAPI {
+    name: string;
+    subcomponents: string[];
+    importPath: string;
+    keyProps: Record<string, string>;
+    usage: string;
+    antiPatterns: string[];
+}
+interface ComponentProvider {
+    id: string;
+    init(projectRoot: string): Promise<void>;
+    install(name: string, projectRoot: string): Promise<void>;
+    has(name: string): boolean;
+    list(): ComponentMeta[];
+    listNames(): string[];
+    getComponentAPI(name: string): ComponentAPI | null;
+    getCssVariables(tokens: DesignTokens): string;
+    getThemeBlock(tokens: DesignTokens): string;
+}
+
 /**
  * Types for Epic 2: Shared Components manifest (coherent.components.json).
  * See docs/epic-2-shared-components.md.
@@ -3418,7 +3444,7 @@ declare class PageGenerator {
      */
     generateSharedFooterCode(): string;
     /**
-     * Generate shared Sidebar component code for components/shared/sidebar.tsx.
+     * Generate shared Sidebar component code using shadcn/ui Sidebar.
      * Used when navigation.type is 'sidebar' or 'both'.
      */
     generateSharedSidebarCode(): string;
@@ -4274,4 +4300,4 @@ interface AuditResult {
  */
 declare function runAudit(projectRoot: string): Promise<AuditResult>;
 
-export { type AuditEntryResult, type AuditResult, type BlogContent, CLI_VERSION, type ChangelogContent, type ColorToken, ColorTokenSchema, type ComponentCriteria, type ComponentDefinition, ComponentDefinitionSchema, type ComponentDependency, ComponentGenerator, ComponentManager, type ComponentSize, ComponentSizeSchema, type ComponentSpec, type ComponentVariant, ComponentVariantSchema, type ContactContent, type CreateSharedComponentInput, type DashboardContent, type DesignSystemConfig, DesignSystemConfigSchema, DesignSystemGenerator, DesignSystemManager, type DesignTokens, DesignTokensSchema, type DiscoveryResult, EXAMPLE_MULTIPAGE_CONFIG, EXAMPLE_SPA_CONFIG, FIGMA_BASE_IDS, FRAMEWORK_VERSIONS, type FaqContent, type Features, FeaturesSchema, type FigmaBaseId, FigmaClient, type FigmaClientOptions, type FigmaColorStyle, type FigmaComponentData, type FigmaComponentMap, type FigmaComponentMeta, type FigmaDocumentNode, type FigmaEffectStyle, type FigmaFileResponse, type FigmaIntermediateData, type FigmaLayout, type FigmaNode, type FigmaNormalizationResult, type FigmaNormalizedEntry, type FigmaPageData, type FigmaProperty, type FigmaRgba, type FigmaStyleMeta, type FigmaTextStyle, type FigmaTokenExtractionResult, type FigmaVariant, type GalleryContent, type GenerateSharedComponentInput, type GenerateSharedComponentResult, type GeneratedPage, type LandingContent, type LayoutBlockDefinition, LayoutBlockDefinitionSchema, type ListingContent, type LoginContent, MANIFEST_FILENAME, type ModificationRequest, type ModificationResult, type Navigation, type NavigationItem, NavigationItemSchema, NavigationSchema, type OnboardingContent, type PageAnalysis, PageAnalysisSchema, type PageContent, type PageDefinition, PageDefinitionSchema, PageGenerator, type PageLayout, PageLayoutSchema, PageManager, type PageSection, PageSectionSchema, type PricingContent, type ProfileContent, ProjectScaffolder, type RadiusToken, RadiusTokenSchema, type RegisterContent, type SettingsContent, type SharedComponentEntry, SharedComponentEntrySchema, type SharedComponentType, SharedComponentTypeSchema, type SharedComponentsManifest, SharedComponentsManifestSchema, type SpacingToken, SpacingTokenSchema, TailwindConfigGenerator, type TemplateOptions, type TypographyToken, TypographyTokenSchema, allocateNextCid, atomicWriteFile, buildCssVariables, componentExists, createEntry, extractConfigObject, extractTokensFromFigma, figmaComponentNameToBaseId, figmaRgbaToHex, findSharedComponent, findSharedComponentByIdOrName, formatCid, generatePageFromFrame, generatePagesFromFigma, generateSharedComponent, generateSharedComponentTsx, getComponent, getManifestPath, getPage, getPageFilePath, getSupportedPageTypes, getTemplateForPageType, integrateSharedLayoutIntoRootLayout, loadManifest, mergeExtractedColorsWithDefaults, normalizeFigmaComponents, pageRouteExists, parseCid, parseFigmaFileResponse, removeEntry, resolveUniqueName, runAudit, saveManifest, setSharedMapping, toSharedFileName, updateEntry, updateUsedIn, validateConfig, validatePartialConfig };
+export { type AuditEntryResult, type AuditResult, type BlogContent, CLI_VERSION, type ChangelogContent, type ColorToken, ColorTokenSchema, type ComponentAPI, type ComponentCriteria, type ComponentDefinition, ComponentDefinitionSchema, type ComponentDependency, ComponentGenerator, ComponentManager, type ComponentMeta, type ComponentProvider, type ComponentSize, ComponentSizeSchema, type ComponentSpec, type ComponentVariant, ComponentVariantSchema, type ContactContent, type CreateSharedComponentInput, type DashboardContent, type DesignSystemConfig, DesignSystemConfigSchema, DesignSystemGenerator, DesignSystemManager, type DesignTokens, DesignTokensSchema, type DiscoveryResult, EXAMPLE_MULTIPAGE_CONFIG, EXAMPLE_SPA_CONFIG, FIGMA_BASE_IDS, FRAMEWORK_VERSIONS, type FaqContent, type Features, FeaturesSchema, type FigmaBaseId, FigmaClient, type FigmaClientOptions, type FigmaColorStyle, type FigmaComponentData, type FigmaComponentMap, type FigmaComponentMeta, type FigmaDocumentNode, type FigmaEffectStyle, type FigmaFileResponse, type FigmaIntermediateData, type FigmaLayout, type FigmaNode, type FigmaNormalizationResult, type FigmaNormalizedEntry, type FigmaPageData, type FigmaProperty, type FigmaRgba, type FigmaStyleMeta, type FigmaTextStyle, type FigmaTokenExtractionResult, type FigmaVariant, type GalleryContent, type GenerateSharedComponentInput, type GenerateSharedComponentResult, type GeneratedPage, type LandingContent, type LayoutBlockDefinition, LayoutBlockDefinitionSchema, type ListingContent, type LoginContent, MANIFEST_FILENAME, type ModificationRequest, type ModificationResult, type Navigation, type NavigationItem, NavigationItemSchema, NavigationSchema, type OnboardingContent, type PageAnalysis, PageAnalysisSchema, type PageContent, type PageDefinition, PageDefinitionSchema, PageGenerator, type PageLayout, PageLayoutSchema, PageManager, type PageSection, PageSectionSchema, type PricingContent, type ProfileContent, ProjectScaffolder, type RadiusToken, RadiusTokenSchema, type RegisterContent, type SettingsContent, type SharedComponentEntry, SharedComponentEntrySchema, type SharedComponentType, SharedComponentTypeSchema, type SharedComponentsManifest, SharedComponentsManifestSchema, type SpacingToken, SpacingTokenSchema, TailwindConfigGenerator, type TemplateOptions, type TypographyToken, TypographyTokenSchema, allocateNextCid, atomicWriteFile, buildCssVariables, componentExists, createEntry, extractConfigObject, extractTokensFromFigma, figmaComponentNameToBaseId, figmaRgbaToHex, findSharedComponent, findSharedComponentByIdOrName, formatCid, generatePageFromFrame, generatePagesFromFigma, generateSharedComponent, generateSharedComponentTsx, getComponent, getManifestPath, getPage, getPageFilePath, getSupportedPageTypes, getTemplateForPageType, integrateSharedLayoutIntoRootLayout, loadManifest, mergeExtractedColorsWithDefaults, normalizeFigmaComponents, pageRouteExists, parseCid, parseFigmaFileResponse, removeEntry, resolveUniqueName, runAudit, saveManifest, setSharedMapping, toSharedFileName, updateEntry, updateUsedIn, validateConfig, validatePartialConfig };

package/dist/index.js

@@ -146,7 +146,7 @@ var LayoutBlockDefinitionSchema = z.object({
   createdAt: z.string().datetime().optional(),
   updatedAt: z.string().datetime().optional()
 });
-var PageLayoutSchema = z.enum([
+var PAGE_LAYOUT_ENUM = z.enum([
   "centered",
   // Single centered column
   "sidebar-left",
@@ -158,6 +158,10 @@ var PageLayoutSchema = z.enum([
   "grid"
   // CSS Grid layout
 ]);
+var PageLayoutSchema = z.preprocess((val) => {
+  if (val === "sidebar") return "sidebar-left";
+  return val;
+}, PAGE_LAYOUT_ENUM);
 var PageAnalysisSchema = z.object({
   sections: z.array(
     z.object({
@@ -244,6 +248,8 @@ var FeaturesSchema = z.object({
   })
 });
 var DesignSystemConfigSchema = z.object({
+  // Component provider
+  provider: z.enum(["shadcn", "custom"]).default("shadcn"),
   // Metadata
   version: z.string().default("1.0.0"),
   coherentVersion: z.string().optional(),
@@ -314,6 +320,7 @@ function getPage(config, route) {
   return config.pages.find((p) => p.route === route);
 }
 var EXAMPLE_MULTIPAGE_CONFIG = {
+  provider: "shadcn",
   version: "1.0.0",
   name: "My Multi-page App",
   description: "A beautiful multi-page application",
@@ -1234,6 +1241,43 @@ function blendColors(hex1, hex2, ratio) {
   const toHex = (n) => n.toString(16).padStart(2, "0");
   return `#${toHex(blend(r1, r2))}${toHex(blend(g1, g2))}${toHex(blend(b1, b2))}`;
 }
+function hexToHsl(hex) {
+  const c = hex.replace("#", "");
+  const r = parseInt(c.slice(0, 2), 16) / 255;
+  const g = parseInt(c.slice(2, 4), 16) / 255;
+  const b = parseInt(c.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) h = ((b - r) / d + 2) / 6;
+  else h = ((r - g) / d + 4) / 6;
+  return [h * 360, s, l];
+}
+function hslToHex(h, s, l) {
+  h = (h % 360 + 360) % 360;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * Math.max(0, Math.min(1, color))).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+function generateChartColors(primary, secondary) {
+  const [h1, s1, l1] = hexToHsl(primary);
+  const [h2, s2, l2] = hexToHsl(secondary);
+  return [
+    primary,
+    secondary,
+    hslToHex(h1 + 60, s1 * 0.8, l1),
+    hslToHex(h2 + 90, s2 * 0.7, l2),
+    hslToHex(h1 + 180, s1 * 0.6, l1)
+  ];
+}
 function buildCssVariables(config) {
   const light = config.tokens.colors.light;
   const dark = config.tokens.colors.dark;
@@ -1243,7 +1287,31 @@ function buildCssVariables(config) {
   const accentDarkVars = `  --accent: ${dark.muted};
   --accent-foreground: ${dark.foreground};
 `;
+  const sidebarLightVars = `  --sidebar-background: ${light.background};
+  --sidebar-foreground: ${light.foreground};
+  --sidebar-primary: ${light.primary};
+  --sidebar-primary-foreground: ${contrastFg(light.primary)};
+  --sidebar-accent: ${light.muted};
+  --sidebar-accent-foreground: ${light.foreground};
+  --sidebar-border: ${light.border};
+  --sidebar-ring: ${light.primary};
+`;
+  const chartLight = generateChartColors(light.primary, light.secondary);
+  const chartDark = generateChartColors(dark.primary, dark.secondary);
+  const chartLightVars = chartLight.map((c, i) => `  --chart-${i + 1}: ${c};`).join("\n") + "\n";
+  const chartDarkVars = chartDark.map((c, i) => `  --chart-${i + 1}: ${c};`).join("\n") + "\n";
+  const sidebarDarkVars = `  --sidebar-background: ${dark.background};
+  --sidebar-foreground: ${dark.foreground};
+  --sidebar-primary: ${dark.primary};
+  --sidebar-primary-foreground: ${contrastFg(dark.primary)};
+  --sidebar-accent: ${dark.muted};
+  --sidebar-accent-foreground: ${dark.foreground};
+  --sidebar-border: ${dark.border};
+  --sidebar-ring: ${dark.primary};
+`;
+  const radius = config.tokens.radius?.md ?? "0.5rem";
   return `:root {
+  --radius: ${radius};
   --background: ${light.background};
   --foreground: ${light.foreground};
   --primary: ${light.primary};
@@ -1265,7 +1333,7 @@ function buildCssVariables(config) {
   --warning: ${light.warning};
   --error: ${light.error};
   --info: ${light.info || light.primary};
-${accentVars}}
+${accentVars}${sidebarLightVars}${chartLightVars}}
 .dark {
   --background: ${dark.background};
   --foreground: ${dark.foreground};
@@ -1288,7 +1356,7 @@ ${accentVars}}
   --warning: ${dark.warning};
   --error: ${dark.error};
   --info: ${dark.info || dark.primary};
-${accentDarkVars}}
+${accentDarkVars}${sidebarDarkVars}${chartDarkVars}}
 `;
 }
 
@@ -6067,6 +6135,8 @@ ${menuItems}
             <Link href="${signUpItem.route}" className="inline-flex items-center justify-center text-sm font-medium h-9 px-4 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">${signUpItem.label}</Link>` : ""}` : "";
     const dropdownImport = hasDropdowns ? `
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'` : "";
+    const sheetImport = `
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'`;
     const appName = this.escapeString(this.config.name);
     const mobileNavItems = [...ungrouped];
     for (const [, items] of grouped) {
@@ -6086,7 +6156,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { useEffect, useState } from 'react'${dropdownImport}
+import { useEffect, useState } from 'react'${dropdownImport}${sheetImport}
 
 function ThemeToggle() {
   const [dark, setDark] = useState(false)
@@ -6135,26 +6205,23 @@ export function Header() {
           </div>
           <div className="flex items-center gap-1">${authButtonsBlock}
             <ThemeToggle />
-            <button
-              onClick={() => setMobileOpen(!mobileOpen)}
-              className="flex md:hidden items-center justify-center w-9 h-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-              aria-label="Toggle menu"
-            >
-              {mobileOpen ? (
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-              ) : (
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
-              )}
-            </button>
+            <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+              <SheetTrigger asChild>
+                <button
+                  className="flex md:hidden items-center justify-center w-9 h-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  aria-label="Toggle menu"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
+                </button>
+              </SheetTrigger>
+              <SheetContent side="right" className="w-72 p-4">
+                <nav className="flex flex-col gap-1 pt-8">
+                  ${mobileLinks}${mobileAuthBlock}
+                </nav>
+              </SheetContent>
+            </Sheet>
           </div>
         </div>
-        {mobileOpen && (
-          <div className="md:hidden border-t bg-background">
-            <div className="mx-auto max-w-7xl px-4 py-3 space-y-1">
-            ${mobileLinks}${mobileAuthBlock}
-            </div>
-          </div>
-        )}
       </nav>
       <Link
         href="/design-system"
@@ -6245,7 +6312,7 @@ ${companyColumn}
 `;
   }
   /**
-   * Generate shared Sidebar component code for components/shared/sidebar.tsx.
+   * Generate shared Sidebar component code using shadcn/ui Sidebar.
    * Used when navigation.type is 'sidebar' or 'both'.
    */
   generateSharedSidebarCode() {
@@ -6276,71 +6343,71 @@ ${companyColumn}
         ungrouped.push(item);
       }
     }
-    const linkItems = ungrouped.map(
-      (item) => `          <Link
-            href="${item.route}"
-            className={\`flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors \${pathname === "${item.route}" ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'}\`}
-          >
-            ${item.label}
-          </Link>`
-    ).join("\n");
-    const groupBlocks = [];
-    for (const [groupName, items] of grouped) {
-      const groupLinks = items.map(
-        (item) => `              <Link
-                href="${item.route}"
-                className={\`flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors \${pathname === "${item.route}" ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'}\`}
-              >
-                ${item.label}
-              </Link>`
-      ).join("\n");
-      groupBlocks.push(`          <div className="space-y-1">
-            <p className="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">${groupName}</p>
-${groupLinks}
-          </div>`);
-    }
-    const allSections = [linkItems, ...groupBlocks].filter(Boolean).join("\n");
+    const menuItem = (item) => `              <SidebarMenuItem>
+                <SidebarMenuButton asChild isActive={pathname === "${item.route}"}>
+                  <Link href="${item.route}">${item.label}</Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>`;
+    const ungroupedItems = ungrouped.map(menuItem).join("\n");
+    const groupBlocks = Array.from(grouped.entries()).map(([groupName, items]) => {
+      const groupItems = items.map(menuItem).join("\n");
+      return `          <SidebarGroup>
+            <SidebarGroupLabel>${groupName}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+${groupItems}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>`;
+    }).join("\n");
+    const mainGroup = ungroupedItems ? `          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+${ungroupedItems}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>` : "";
+    const allGroups = [mainGroup, groupBlocks].filter(Boolean).join("\n");
     const appName = this.escapeString(this.config.name);
     return `'use client'
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { useState } from 'react'
-
-export function Sidebar() {
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/components/ui/sidebar'
+
+export function AppSidebar() {
   const pathname = usePathname()
-  const [collapsed, setCollapsed] = useState(false)
 
   if (pathname?.startsWith('/design-system')) return null
 
   return (
-    <aside className={\`shrink-0 border-r bg-muted/30 transition-all duration-200 \${collapsed ? 'w-16' : 'w-64'}\`}>
-      <div className="flex h-14 items-center justify-between border-b px-4">
-        {!collapsed && (
-          <Link href="/" className="text-sm font-semibold text-foreground truncate">
-            ${appName}
-          </Link>
-        )}
-        <button
-          onClick={() => setCollapsed(!collapsed)}
-          className="flex items-center justify-center w-8 h-8 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            {collapsed ? (
-              <><path d="m9 18 6-6-6-6"/></>
-            ) : (
-              <><path d="m15 18-6-6 6-6"/></>
-            )}
-          </svg>
-        </button>
-      </div>
-      {!collapsed && (
-        <nav className="flex flex-col gap-1 p-3">
-${allSections}
-        </nav>
-      )}
-    </aside>
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <div className="flex items-center justify-between px-2 py-1">
+            <Link href="/" className="text-sm font-semibold text-foreground truncate">
+              ${appName}
+            </Link>
+            <SidebarTrigger />
+          </div>
+        </SidebarHeader>
+        <SidebarContent>
+${allGroups}
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
   )
 }
 `;
@@ -7079,6 +7146,19 @@ export default config
     --warning: ${light.warning};
     --error: ${light.error};
     --info: ${light.info || light.primary};
+    --sidebar-background: ${light.background};
+    --sidebar-foreground: ${light.foreground};
+    --sidebar-primary: ${light.primary};
+    --sidebar-primary-foreground: ${_ProjectScaffolder.contrastingForeground(light.primary)};
+    --sidebar-accent: ${light.muted};
+    --sidebar-accent-foreground: ${light.foreground};
+    --sidebar-border: ${light.border};
+    --sidebar-ring: ${light.primary};
+    --chart-1: ${light.primary};
+    --chart-2: ${light.secondary};
+    --chart-3: ${light.success};
+    --chart-4: ${light.warning};
+    --chart-5: ${light.error};
   }
 
   .dark {
@@ -7105,6 +7185,19 @@ export default config
     --warning: ${dark.warning};
     --error: ${dark.error};
     --info: ${dark.info || dark.primary};
+    --sidebar-background: ${dark.background};
+    --sidebar-foreground: ${dark.foreground};
+    --sidebar-primary: ${dark.primary};
+    --sidebar-primary-foreground: ${_ProjectScaffolder.contrastingForeground(dark.primary)};
+    --sidebar-accent: ${dark.muted};
+    --sidebar-accent-foreground: ${dark.foreground};
+    --sidebar-border: ${dark.border};
+    --sidebar-ring: ${dark.primary};
+    --chart-1: ${dark.primary};
+    --chart-2: ${dark.secondary};
+    --chart-3: ${dark.success};
+    --chart-4: ${dark.warning};
+    --chart-5: ${dark.error};
   }
 
   * {
@@ -7212,10 +7305,10 @@ export function cn(...inputs: ClassValue[]) {
       if (navType === "sidebar" || navType === "both") {
         const sidebarCode = this.pageGenerator.generateSharedSidebarCode();
         await generateSharedComponent(this.projectRoot, {
-          name: "Sidebar",
+          name: "AppSidebar",
           type: "layout",
           code: sidebarCode,
-          description: "Vertical sidebar navigation with collapsible sections",
+          description: "Application sidebar using shadcn/ui Sidebar components",
           usedIn: ["app/(app)/layout.tsx"]
         });
       }

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.11",
+  "version": "0.5.13",
   "description": "Core design system engine for Coherent",
   "type": "module",
   "main": "./dist/index.js",
@@ -32,6 +32,12 @@
   ],
   "author": "Coherent Design Method",
   "license": "MIT",
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest"
+  },
   "dependencies": {
     "handlebars": "^4.7.8",
     "zod": "^3.22.4"
@@ -41,11 +47,5 @@
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
     "vitest": "^1.2.1"
-  },
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Sergei Kovtun
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.