@getcoherent/core 0.5.12 → 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;
@@ -1882,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;
@@ -1988,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;
@@ -2497,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;
@@ -2718,7 +2715,9 @@ 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;
@@ -3445,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;

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({
@@ -1237,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;
@@ -1246,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};
@@ -1268,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};
@@ -1291,7 +1356,7 @@ ${accentVars}}
   --warning: ${dark.warning};
   --error: ${dark.error};
   --info: ${dark.info || dark.primary};
-${accentDarkVars}}
+${accentDarkVars}${sidebarDarkVars}${chartDarkVars}}
 `;
 }
 
@@ -6070,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) {
@@ -6089,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)
@@ -6138,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"
@@ -6248,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() {
@@ -6279,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>
   )
 }
 `;
@@ -7082,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 {
@@ -7108,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};
   }
 
   * {
@@ -7215,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.12",
+  "version": "0.5.13",
   "description": "Core design system engine for Coherent",
   "type": "module",
   "main": "./dist/index.js",