@getcoherent/core 0.3.12 → 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+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.

package/dist/index.d.ts

@@ -1094,53 +1094,27 @@ declare const PageDefinitionSchema: z.ZodObject<{
 }>;
 type PageDefinition = z.infer<typeof PageDefinitionSchema>;
 /**
- * Navigation item
+ * Navigation item — supports flat links and grouped dropdown menus.
+ * Items with the same `group` value are rendered as a DropdownMenu.
+ * Items with `children` render as a dropdown trigger with sub-items.
  */
-declare const NavigationItemSchema: z.ZodObject<{
-    label: z.ZodString;
-    route: z.ZodString;
-    icon: z.ZodOptional<z.ZodString>;
-    requiresAuth: z.ZodDefault<z.ZodBoolean>;
-    order: z.ZodNumber;
-}, "strip", z.ZodTypeAny, {
-    order: number;
-    route: string;
-    requiresAuth: boolean;
+declare const NavigationItemSchema: z.ZodType<NavigationItem>;
+interface NavigationItem {
     label: string;
-    icon?: string | undefined;
-}, {
-    order: number;
     route: string;
-    label: string;
-    requiresAuth?: boolean | undefined;
-    icon?: string | undefined;
-}>;
-type NavigationItem = z.infer<typeof NavigationItemSchema>;
+    icon?: string;
+    requiresAuth?: boolean;
+    order: number;
+    group?: string;
+    children?: NavigationItem[];
+}
 /**
  * Navigation configuration
  */
 declare const NavigationSchema: z.ZodObject<{
     enabled: z.ZodDefault<z.ZodBoolean>;
     type: z.ZodDefault<z.ZodEnum<["header", "sidebar", "both"]>>;
-    items: z.ZodArray<z.ZodObject<{
-        label: z.ZodString;
-        route: z.ZodString;
-        icon: z.ZodOptional<z.ZodString>;
-        requiresAuth: z.ZodDefault<z.ZodBoolean>;
-        order: z.ZodNumber;
-    }, "strip", z.ZodTypeAny, {
-        order: number;
-        route: string;
-        requiresAuth: boolean;
-        label: string;
-        icon?: string | undefined;
-    }, {
-        order: number;
-        route: string;
-        label: string;
-        requiresAuth?: boolean | undefined;
-        icon?: string | undefined;
-    }>, "many">;
+    items: z.ZodArray<z.ZodType<NavigationItem, z.ZodTypeDef, NavigationItem>, "many">;
     logo: z.ZodOptional<z.ZodObject<{
         text: z.ZodOptional<z.ZodString>;
         image: z.ZodOptional<z.ZodString>;
@@ -1154,25 +1128,13 @@ declare const NavigationSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     type: "header" | "sidebar" | "both";
     enabled: boolean;
-    items: {
-        order: number;
-        route: string;
-        requiresAuth: boolean;
-        label: string;
-        icon?: string | undefined;
-    }[];
+    items: NavigationItem[];
     logo?: {
         text?: string | undefined;
         image?: string | undefined;
     } | undefined;
 }, {
-    items: {
-        order: number;
-        route: string;
-        label: string;
-        requiresAuth?: boolean | undefined;
-        icon?: string | undefined;
-    }[];
+    items: NavigationItem[];
     type?: "header" | "sidebar" | "both" | undefined;
     enabled?: boolean | undefined;
     logo?: {
@@ -2058,25 +2020,7 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
     navigation: z.ZodOptional<z.ZodObject<{
         enabled: z.ZodDefault<z.ZodBoolean>;
         type: z.ZodDefault<z.ZodEnum<["header", "sidebar", "both"]>>;
-        items: z.ZodArray<z.ZodObject<{
-            label: z.ZodString;
-            route: z.ZodString;
-            icon: z.ZodOptional<z.ZodString>;
-            requiresAuth: z.ZodDefault<z.ZodBoolean>;
-            order: z.ZodNumber;
-        }, "strip", z.ZodTypeAny, {
-            order: number;
-            route: string;
-            requiresAuth: boolean;
-            label: string;
-            icon?: string | undefined;
-        }, {
-            order: number;
-            route: string;
-            label: string;
-            requiresAuth?: boolean | undefined;
-            icon?: string | undefined;
-        }>, "many">;
+        items: z.ZodArray<z.ZodType<NavigationItem, z.ZodTypeDef, NavigationItem>, "many">;
         logo: z.ZodOptional<z.ZodObject<{
             text: z.ZodOptional<z.ZodString>;
             image: z.ZodOptional<z.ZodString>;
@@ -2090,25 +2034,13 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
     }, "strip", z.ZodTypeAny, {
         type: "header" | "sidebar" | "both";
         enabled: boolean;
-        items: {
-            order: number;
-            route: string;
-            requiresAuth: boolean;
-            label: string;
-            icon?: string | undefined;
-        }[];
+        items: NavigationItem[];
         logo?: {
             text?: string | undefined;
             image?: string | undefined;
         } | undefined;
     }, {
-        items: {
-            order: number;
-            route: string;
-            label: string;
-            requiresAuth?: boolean | undefined;
-            icon?: string | undefined;
-        }[];
+        items: NavigationItem[];
         type?: "header" | "sidebar" | "both" | undefined;
         enabled?: boolean | undefined;
         logo?: {
@@ -2436,13 +2368,7 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
     navigation?: {
         type: "header" | "sidebar" | "both";
         enabled: boolean;
-        items: {
-            order: number;
-            route: string;
-            requiresAuth: boolean;
-            label: string;
-            icon?: string | undefined;
-        }[];
+        items: NavigationItem[];
         logo?: {
             text?: string | undefined;
             image?: string | undefined;
@@ -2628,13 +2554,7 @@ declare const DesignSystemConfigSchema: z.ZodObject<{
         autoScaffold?: boolean | undefined;
     };
     navigation?: {
-        items: {
-            order: number;
-            route: string;
-            label: string;
-            requiresAuth?: boolean | undefined;
-            icon?: string | undefined;
-        }[];
+        items: NavigationItem[];
         type?: "header" | "sidebar" | "both" | undefined;
         enabled?: boolean | undefined;
         logo?: {
@@ -3491,6 +3411,11 @@ declare class PageGenerator {
      * Generate shared Footer component code for components/shared/footer.tsx.
      */
     generateSharedFooterCode(): string;
+    /**
+     * Generate shared Sidebar component code for components/shared/sidebar.tsx.
+     * Used when navigation.type is 'sidebar' or 'both'.
+     */
+    generateSharedSidebarCode(): string;
     /**
      * Generate React SPA root layout
      */
@@ -3745,6 +3670,16 @@ declare class ProjectScaffolder {
      * Update config reference
      */
     updateConfig(newConfig: DesignSystemConfig): void;
+    /**
+     * Initial header for coherent init — Coherent Design Method branding.
+     * Replaced by app-branded header on first `coherent chat` via regenerateLayout().
+     */
+    private generateInitialHeaderCode;
+    /**
+     * Initial footer for coherent init — Coherent Design Method branding.
+     * Replaced by app-branded footer on first `coherent chat` via regenerateLayout().
+     */
+    private generateInitialFooterCode;
 }
 
 interface BasePageContent {

package/dist/index.js

@@ -206,9 +206,10 @@ var NavigationItemSchema = z.object({
   label: z.string(),
   route: z.string(),
   icon: z.string().optional(),
-  // lucide-react icon name
   requiresAuth: z.boolean().default(false),
-  order: z.number()
+  order: z.number(),
+  group: z.string().optional(),
+  children: z.lazy(() => z.array(NavigationItemSchema)).optional()
 });
 var NavigationSchema = z.object({
   enabled: z.boolean().default(true),
@@ -3673,6 +3674,10 @@ const knownNames: Record<string, string> = {
   tooltip: 'Tooltip',
   'radio-group': 'RadioGroup',
   slider: 'Slider',
+  sheet: 'Sheet',
+  'dropdown-menu': 'DropdownMenu',
+  'context-menu': 'ContextMenu',
+  command: 'Command',
 }
 
 const descriptions: Record<string, string> = {
@@ -3697,6 +3702,10 @@ const descriptions: Record<string, string> = {
   tooltip: 'Contextual info on hover',
   'radio-group': 'Select one option from a set',
   slider: 'Select a value from a range',
+  sheet: 'Slide-out panel from the edge of the screen',
+  'dropdown-menu': 'Menu triggered by a button with a list of actions',
+  'context-menu': 'Right-click menu with contextual actions',
+  command: 'Command palette for searching and executing actions',
 }
 
 function displayName(component: any): string {
@@ -3848,6 +3857,147 @@ function SelectPreview({ size }: { size?: string }) {
   )
 }
 
+function SheetPreview({ side }: { side?: string }) {
+  const [open, setOpen] = useState(false)
+  const s = side || 'right'
+  const positionClasses: Record<string, string> = {
+    top: 'inset-x-0 top-0 border-b',
+    bottom: 'inset-x-0 bottom-0 border-t',
+    left: 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+    right: 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+  }
+  return (
+    <>
+      <button onClick={() => setOpen(true)}
+        className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 h-9 text-sm font-medium hover:bg-muted transition-colors">
+        Open Sheet
+      </button>
+      {open && (
+        <div className="fixed inset-0 z-50" onClick={() => setOpen(false)}>
+          <div className="fixed inset-0 bg-black/80" />
+          <div className={cn('fixed z-50 gap-4 bg-background p-6 shadow-lg', positionClasses[s] || positionClasses.right)}
+            onClick={e => e.stopPropagation()}>
+            <div className="flex flex-col space-y-2 mb-4">
+              <h3 className="text-lg font-semibold">Sheet Panel</h3>
+              <p className="text-sm text-muted-foreground">This is a sheet sliding from the {s}.</p>
+            </div>
+            <button onClick={() => setOpen(false)}
+              className="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100 transition-opacity">
+              <svg width="16" height="16" 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>
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+function DropdownMenuPreview({ size }: { size?: string }) {
+  const [open, setOpen] = useState(false)
+  const sizeClasses: Record<string, string> = {
+    sm: 'min-w-[6rem]',
+    md: 'min-w-[8rem]',
+    lg: 'min-w-[12rem]',
+  }
+  const s = size || 'md'
+  return (
+    <div className="relative">
+      <button onClick={() => setOpen(!open)}
+        className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 h-9 text-sm font-medium hover:bg-muted transition-colors gap-1">
+        Actions {chevronSvg}
+      </button>
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <div className={cn('absolute top-full left-0 z-50 mt-1 rounded-md border bg-popover text-popover-foreground p-1 shadow-md animate-in fade-in-0 zoom-in-95', sizeClasses[s] || sizeClasses.md)}>
+            <button onClick={() => setOpen(false)} className="relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground transition-colors">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
+              Edit
+            </button>
+            <button onClick={() => setOpen(false)} className="relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground transition-colors">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+              Duplicate
+            </button>
+            <div className="-mx-1 my-1 h-px bg-border" />
+            <button onClick={() => setOpen(false)} className="relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none text-destructive hover:bg-destructive/10 transition-colors">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
+              Delete
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+function ContextMenuPreview() {
+  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
+  return (
+    <div className="relative">
+      <div
+        onContextMenu={e => { e.preventDefault(); setPos({ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY }) }}
+        className="flex items-center justify-center w-48 h-24 rounded-lg border-2 border-dashed border-muted-foreground/25 text-sm text-muted-foreground cursor-context-menu select-none hover:border-muted-foreground/40 transition-colors"
+      >
+        Right-click here
+      </div>
+      {pos && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setPos(null)} onContextMenu={e => { e.preventDefault(); setPos(null) }} />
+          <div style={{ position: 'absolute', top: pos.y, left: pos.x }} className="z-50 min-w-[8rem] rounded-md border bg-popover text-popover-foreground p-1 shadow-md animate-in fade-in-0 zoom-in-95">
+            <button onClick={() => setPos(null)} className="relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground transition-colors">View</button>
+            <button onClick={() => setPos(null)} className="relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground transition-colors">Edit</button>
+            <div className="-mx-1 my-1 h-px bg-border" />
+            <button onClick={() => setPos(null)} className="relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none text-destructive hover:bg-destructive/10 transition-colors">Delete</button>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+function CommandPreview() {
+  const [query, setQuery] = useState('')
+  const items = ['Dashboard', 'Projects', 'Team', 'Settings', 'Profile']
+  const filtered = items.filter(i => i.toLowerCase().includes(query.toLowerCase()))
+  return (
+    <div className="w-72 rounded-lg border bg-popover text-popover-foreground shadow-md">
+      <div className="flex items-center border-b px-3 h-10">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2 shrink-0 opacity-50"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+        <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Type a command\u2026" className="flex h-full w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground" />
+      </div>
+      <div className="p-1 max-h-48 overflow-y-auto">
+        {filtered.length === 0 ? (
+          <p className="py-4 text-center text-sm text-muted-foreground">No results found.</p>
+        ) : (
+          filtered.map(item => (
+            <button key={item} className="relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground transition-colors">{item}</button>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+
+function TooltipPreview() {
+  const [show, setShow] = useState(false)
+  return (
+    <div className="relative inline-block">
+      <button
+        onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}
+        className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 h-9 text-sm font-medium hover:bg-muted transition-colors"
+      >
+        Hover me
+      </button>
+      {show && (
+        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md animate-in fade-in-0 zoom-in-95">
+          Tooltip content
+          <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-primary" />
+        </div>
+      )}
+    </div>
+  )
+}
+
 function Preview({ component, variant, size }: { component: any; variant?: string; size?: string }) {
   const id = component.id
 
@@ -3958,6 +4108,12 @@ function Preview({ component, variant, size }: { component: any; variant?: strin
     )
   }
 
+  if (id === 'sheet') return <SheetPreview side={variant} />
+  if (id === 'dropdown-menu') return <DropdownMenuPreview size={size} />
+  if (id === 'context-menu') return <ContextMenuPreview />
+  if (id === 'command') return <CommandPreview />
+  if (id === 'tooltip') return <TooltipPreview />
+
   const cls = resolveClasses(component, variant, size)
   if (cls) {
     return <div className={cn(cls)}>{displayName(component)}</div>
@@ -3992,6 +4148,10 @@ export default function ComponentShowcase({ component }: ComponentShowcaseProps)
     if (id === 'separator') return \`<\${n} />\`
     if (id === 'progress') return \`<\${n} value={60} />\`
     if (id === 'avatar') return \`<\${n}>\\n  <AvatarImage src="/avatar.png" />\\n  <AvatarFallback>AV</AvatarFallback>\\n</\${n}>\`
+    if (id === 'sheet') return \`<Sheet>\\n  <SheetTrigger asChild>\\n    <Button variant="outline">Open</Button>\\n  </SheetTrigger>\\n  <SheetContent>\\n    <SheetHeader>\\n      <SheetTitle>Title</SheetTitle>\\n      <SheetDescription>Description</SheetDescription>\\n    </SheetHeader>\\n  </SheetContent>\\n</Sheet>\`
+    if (id === 'dropdown-menu') return \`<DropdownMenu>\\n  <DropdownMenuTrigger asChild>\\n    <Button variant="outline">Open</Button>\\n  </DropdownMenuTrigger>\\n  <DropdownMenuContent>\\n    <DropdownMenuItem>Action</DropdownMenuItem>\\n  </DropdownMenuContent>\\n</DropdownMenu>\`
+    if (id === 'context-menu') return \`<ContextMenu>\\n  <ContextMenuTrigger>Right click</ContextMenuTrigger>\\n  <ContextMenuContent>\\n    <ContextMenuItem>Action</ContextMenuItem>\\n  </ContextMenuContent>\\n</ContextMenu>\`
+    if (id === 'command') return \`<Command>\\n  <CommandInput placeholder="Type a command..." />\\n  <CommandList>\\n    <CommandEmpty>No results.</CommandEmpty>\\n    <CommandGroup heading="Suggestions">\\n      <CommandItem>Calendar</CommandItem>\\n    </CommandGroup>\\n  </CommandList>\\n</Command>\`
     return \`<\${n} />\`
   })()
 
@@ -5237,9 +5397,9 @@ ${imports}
 export default function ${pageName}Page() {
   ${this.generateFormState(def)}
   return (
-    <main className="${containerClass}">
+    <div className="${containerClass}">
 ${sections}
-    </main>
+    </div>
   )
 }
 `;
@@ -5261,9 +5421,9 @@ export const metadata: Metadata = {
 
 export default function ${pageName}Page() {
   return (
-    <main className="${containerClass}">
+    <div className="${containerClass}">
 ${sections}
-    </main>
+    </div>
   )
 }
 `;
@@ -5573,13 +5733,13 @@ ${sections}
    */
   getContainerClass(layout) {
     const layoutClasses = {
-      centered: "max-w-4xl mx-auto px-4 py-8",
-      "sidebar-left": "flex min-h-screen",
-      "sidebar-right": "flex flex-row-reverse min-h-screen",
-      "full-width": "w-full",
-      grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6"
+      centered: "space-y-6",
+      "sidebar-left": "flex gap-6",
+      "sidebar-right": "flex flex-row-reverse gap-6",
+      "full-width": "space-y-6",
+      grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
     };
-    return layoutClasses[layout] || "container mx-auto px-4 py-8";
+    return layoutClasses[layout] || "space-y-6";
   }
   /**
    * Generate layout code (for root layout)
@@ -5787,22 +5947,81 @@ export function AppNav() {
       "/forgot-password",
       "/reset-password"
     ]);
+    const marketingRoutes = /* @__PURE__ */ new Set(["/", "/landing", "/pricing", "/about", "/contact", "/blog", "/features"]);
+    const isSubRoute = (route) => route.replace(/^\//, "").split("/").length > 1;
     const visibleItems = navItems.filter(
-      (item) => item.route !== "/" && !authRoutes.has(item.route) && !item.route.includes("[")
+      (item) => !marketingRoutes.has(item.route) && !authRoutes.has(item.route) && !item.route.includes("[") && !isSubRoute(item.route)
     );
-    const hasMultipleItems = visibleItems.length > 0;
-    const items = visibleItems.map(
+    const grouped = /* @__PURE__ */ new Map();
+    const ungrouped = [];
+    for (const item of visibleItems) {
+      if (item.group) {
+        const list = grouped.get(item.group) || [];
+        list.push(item);
+        grouped.set(item.group, list);
+      } else if (item.children && item.children.length > 0) {
+        grouped.set(item.label, [item]);
+      } else {
+        ungrouped.push(item);
+      }
+    }
+    const hasDropdowns = grouped.size > 0;
+    const hasAuthItems = navItems.some((item) => authRoutes.has(item.route));
+    const authItems = navItems.filter((item) => authRoutes.has(item.route));
+    const signInItem = authItems.find((item) => /sign.?in|login/i.test(item.label));
+    const signUpItem = authItems.find((item) => /sign.?up|register/i.test(item.label));
+    const linkItems = ungrouped.map(
       (item) => `<Link href="${item.route}" className={\`text-sm font-medium px-3 py-2 rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring \${pathname === "${item.route}" ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'}\`}>${item.label}</Link>`
     ).join("\n            ");
-    const navItemsBlock = hasMultipleItems ? `
-            ${items}
+    const dropdownBlocks = [];
+    for (const [groupName, items] of grouped) {
+      const parentItem = items.length === 1 && items[0].children ? items[0] : null;
+      const childItems = parentItem ? parentItem.children : items;
+      const triggerLabel = parentItem ? parentItem.label : groupName;
+      const menuItems = childItems.map(
+        (child) => `                  <DropdownMenuItem asChild>
+                    <Link href="${child.route}" className="w-full">${child.label}</Link>
+                  </DropdownMenuItem>`
+      ).join("\n");
+      dropdownBlocks.push(`<DropdownMenu>
+              <DropdownMenuTrigger className="flex items-center gap-1 text-sm font-medium px-3 py-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                ${triggerLabel}
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+${menuItems}
+              </DropdownMenuContent>
+            </DropdownMenu>`);
+    }
+    const allNavElements = [linkItems, ...dropdownBlocks].filter(Boolean).join("\n            ");
+    const navItemsBlock = allNavElements ? `
+            ${allNavElements}
             ` : "";
+    const authButtonsBlock = hasAuthItems && (signInItem || signUpItem) ? `${signInItem ? `
+            <Link href="${signInItem.route}" className="text-sm font-medium px-3 py-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors">${signInItem.label}</Link>` : ""}${signUpItem ? `
+            <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 appName = this.escapeString(this.config.name);
+    const mobileNavItems = [...ungrouped];
+    for (const [, items] of grouped) {
+      const parentItem = items.length === 1 && items[0].children ? items[0] : null;
+      const childItems = parentItem ? parentItem.children : items;
+      mobileNavItems.push(...childItems);
+    }
+    const mobileLinks = mobileNavItems.map(
+      (item) => `<Link href="${item.route}" onClick={() => setMobileOpen(false)} className={\`block text-sm font-medium px-3 py-2 rounded-md 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 mobileAuthBlock = hasAuthItems && (signInItem || signUpItem) ? `
+            <div className="border-t pt-3 mt-2 space-y-1">${signInItem ? `
+              <Link href="${signInItem.route}" onClick={() => setMobileOpen(false)} className="block text-sm font-medium px-3 py-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors">${signInItem.label}</Link>` : ""}${signUpItem ? `
+              <Link href="${signUpItem.route}" onClick={() => setMobileOpen(false)} className="block text-sm font-medium px-3 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors text-center">${signUpItem.label}</Link>` : ""}
+            </div>` : "";
     return `'use client'
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'${dropdownImport}
 
 function ThemeToggle() {
   const [dark, setDark] = useState(false)
@@ -5832,6 +6051,12 @@ function ThemeToggle() {
 
 export function Header() {
   const pathname = usePathname()
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  useEffect(() => {
+    setMobileOpen(false)
+  }, [pathname])
+
   if (pathname?.startsWith('/design-system')) return null
   return (
     <>
@@ -5841,12 +6066,30 @@ export function Header() {
             <Link href="/" className="flex items-center gap-2 text-sm font-semibold text-foreground hover:text-foreground/90 transition-colors shrink-0">
               ${appName}
             </Link>
-            <div className="flex items-center gap-1">${navItemsBlock}</div>
+            <div className="hidden md:flex items-center gap-1">${navItemsBlock}</div>
           </div>
-          <div className="flex items-center gap-1">
+          <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>
           </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"
@@ -5865,22 +6108,174 @@ export function Header() {
    */
   generateSharedFooterCode() {
     const appName = this.escapeString(this.config.name);
+    const navItems = this.config.navigation?.items || [];
+    const authRoutes = /* @__PURE__ */ new Set([
+      "/login",
+      "/signin",
+      "/sign-in",
+      "/signup",
+      "/sign-up",
+      "/register",
+      "/forgot-password",
+      "/reset-password"
+    ]);
+    const marketingRoutes = /* @__PURE__ */ new Set(["/", "/landing", "/pricing", "/about", "/contact", "/blog", "/features"]);
+    const isSubRoute = (route) => route.replace(/^\//, "").split("/").length > 1;
+    const appLinks = navItems.filter(
+      (item) => !marketingRoutes.has(item.route) && !authRoutes.has(item.route) && !item.route.includes("[") && !isSubRoute(item.route)
+    ).slice(0, 4);
+    const linkElements = appLinks.map(
+      (item) => `            <Link href="${item.route}" className="text-sm text-muted-foreground hover:text-foreground transition-colors">${item.label}</Link>`
+    ).join("\n");
+    const marketingLinks = navItems.filter((item) => marketingRoutes.has(item.route) && item.route !== "/").slice(0, 3);
+    const marketingLinkElements = marketingLinks.map(
+      (item) => `            <Link href="${item.route}" className="text-sm text-muted-foreground hover:text-foreground transition-colors">${item.label}</Link>`
+    ).join("\n");
+    const hasMarketingLinks = marketingLinks.length > 0;
+    const companyColumn = hasMarketingLinks ? `            <div className="flex flex-col space-y-3">
+              <p className="text-sm font-medium text-foreground">Company</p>
+${marketingLinkElements}
+            </div>` : "";
     return `'use client'
 
+import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
 export function Footer() {
   const pathname = usePathname()
   if (pathname?.startsWith('/design-system')) return null
   return (
-    <footer className="border-t">
-      <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 text-sm text-muted-foreground sm:px-6 lg:px-8">
-        <p>{'\xA9'} {new Date().getFullYear()} ${appName}</p>
-        <p className="hidden sm:block">Built with Coherent Design Method</p>
+    <footer className="border-t bg-muted/30">
+      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col gap-8 py-8 md:flex-row md:justify-between">
+          <div className="space-y-3">
+            <Link href="/" className="text-sm font-semibold text-foreground hover:text-foreground/90 transition-colors">
+              ${appName}
+            </Link>
+            <p className="text-sm text-muted-foreground max-w-xs">
+              Modern project management for teams of all sizes.
+            </p>
+          </div>
+          <div className="flex gap-12">
+            <div className="flex flex-col space-y-3">
+              <p className="text-sm font-medium text-foreground">Product</p>
+${linkElements}
+            </div>
+${companyColumn}
+          </div>
+        </div>
+        <div className="flex items-center justify-between border-t py-4 text-xs text-muted-foreground">
+          <p>{'\xA9'} {new Date().getFullYear()} ${appName}. All rights reserved.</p>
+          <div className="flex gap-4">
+            <span>Privacy Policy</span>
+            <span>Terms of Service</span>
+          </div>
+        </div>
       </div>
     </footer>
   )
 }
+`;
+  }
+  /**
+   * Generate shared Sidebar component code for components/shared/sidebar.tsx.
+   * Used when navigation.type is 'sidebar' or 'both'.
+   */
+  generateSharedSidebarCode() {
+    const navItems = this.config.navigation?.items || [];
+    const authRoutes = /* @__PURE__ */ new Set([
+      "/login",
+      "/signin",
+      "/sign-in",
+      "/signup",
+      "/sign-up",
+      "/register",
+      "/forgot-password",
+      "/reset-password"
+    ]);
+    const marketingRoutes = /* @__PURE__ */ new Set(["/", "/landing", "/pricing", "/about", "/contact", "/blog", "/features"]);
+    const isSubRoute = (route) => route.replace(/^\//, "").split("/").length > 1;
+    const visibleItems = navItems.filter(
+      (item) => !marketingRoutes.has(item.route) && !authRoutes.has(item.route) && !item.route.includes("[") && !isSubRoute(item.route)
+    );
+    const grouped = /* @__PURE__ */ new Map();
+    const ungrouped = [];
+    for (const item of visibleItems) {
+      if (item.group) {
+        const list = grouped.get(item.group) || [];
+        list.push(item);
+        grouped.set(item.group, list);
+      } else {
+        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 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() {
+  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>
+  )
+}
 `;
   }
   /**
@@ -6715,15 +7110,18 @@ export function cn(...inputs: ClassValue[]) {
     const code = await this.pageGenerator.generateLayout(layout, appType, { skipNav: true });
     await this.writeFile("app/layout.tsx", code);
     if (this.config.navigation?.enabled && appType === "multi-page") {
-      const headerCode = this.pageGenerator.generateSharedHeaderCode();
-      await generateSharedComponent(this.projectRoot, {
-        name: "Header",
-        type: "layout",
-        code: headerCode,
-        description: "Main site header with navigation and theme toggle",
-        usedIn: ["app/layout.tsx"]
-      });
-      const footerCode = this.pageGenerator.generateSharedFooterCode();
+      const navType = this.config.navigation.type || "header";
+      if (navType === "header" || navType === "both") {
+        const headerCode = this.generateInitialHeaderCode();
+        await generateSharedComponent(this.projectRoot, {
+          name: "Header",
+          type: "layout",
+          code: headerCode,
+          description: "Main site header with navigation and theme toggle",
+          usedIn: ["app/layout.tsx"]
+        });
+      }
+      const footerCode = this.generateInitialFooterCode();
       await generateSharedComponent(this.projectRoot, {
         name: "Footer",
         type: "layout",
@@ -6731,6 +7129,16 @@ export function cn(...inputs: ClassValue[]) {
         description: "Site footer",
         usedIn: ["app/layout.tsx"]
       });
+      if (navType === "sidebar" || navType === "both") {
+        const sidebarCode = this.pageGenerator.generateSharedSidebarCode();
+        await generateSharedComponent(this.projectRoot, {
+          name: "Sidebar",
+          type: "layout",
+          code: sidebarCode,
+          description: "Vertical sidebar navigation with collapsible sections",
+          usedIn: ["app/(app)/layout.tsx"]
+        });
+      }
       await integrateSharedLayoutIntoRootLayout(this.projectRoot);
     }
   }
@@ -7205,6 +7613,134 @@ Recommendations are added here when you use \`coherent chat\` and the AI suggest
     this.pageGenerator.updateConfig(newConfig);
     this.tailwindGenerator.updateConfig(newConfig);
   }
+  /**
+   * Initial header for coherent init — Coherent Design Method branding.
+   * Replaced by app-branded header on first `coherent chat` via regenerateLayout().
+   */
+  generateInitialHeaderCode() {
+    return `'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useEffect, useState } from 'react'
+
+function ThemeToggle() {
+  const [dark, setDark] = useState(false)
+  useEffect(() => {
+    setDark(document.documentElement.classList.contains('dark'))
+  }, [])
+  const toggle = () => {
+    const next = !dark
+    setDark(next)
+    document.documentElement.classList.toggle('dark', next)
+  }
+  return (
+    <button
+      onClick={toggle}
+      className="flex items-center justify-center w-9 h-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+      title={dark ? 'Switch to light theme' : 'Switch to dark theme'}
+      aria-label="Toggle theme"
+    >
+      {dark ? (
+        <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"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
+      ) : (
+        <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"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+      )}
+    </button>
+  )
+}
+
+export function Header() {
+  const pathname = usePathname()
+  if (pathname?.startsWith('/design-system')) return null
+  return (
+    <>
+      <nav className="sticky top-0 z-50 shrink-0 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center gap-3">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="shrink-0 text-primary">
+              <path d="M10 4C10.5523 4 11 4.44772 11 5V13H19C19.5523 13 20 13.4477 20 14V20.4287C19.9999 22.401 18.401 23.9999 16.4287 24H3.57129C1.59895 23.9999 7.5245e-05 22.401 0 20.4287V7.57129C7.53742e-05 5.59895 1.59895 4.00008 3.57129 4H10ZM2 20.4287C2.00008 21.2965 2.70352 21.9999 3.57129 22H9V15H2V20.4287ZM11 22H16.4287C17.2965 21.9999 17.9999 21.2965 18 20.4287V15H11V22ZM3.57129 6C2.70352 6.00008 2.00008 6.70352 2 7.57129V13H9V6H3.57129ZM20.5 0C22.433 0 24 1.567 24 3.5V9.90039C23.9998 10.5076 23.5076 10.9998 22.9004 11H14.0996C13.4924 10.9998 13.0002 10.5076 13 9.90039V1.09961C13.0002 0.492409 13.4924 0.000211011 14.0996 0H20.5ZM15 9H22V3.5C22 2.67157 21.3284 2 20.5 2H15V9Z" fill="currentColor"/>
+            </svg>
+            <Link href="/" className="text-sm font-semibold text-foreground hover:text-foreground/90 transition-colors">
+              Coherent Design Method
+            </Link>
+          </div>
+          <div className="flex items-center gap-1">
+            <ThemeToggle />
+          </div>
+        </div>
+      </nav>
+      <Link
+        href="/design-system"
+        className="fixed bottom-4 right-4 z-50 flex items-center gap-2 rounded-full border border-white/20 bg-black/60 backdrop-blur-md text-white px-4 py-2 text-xs shadow-sm hover:bg-black/80 transition-all"
+        title="Design System"
+      >
+        Design System
+      </Link>
+    </>
+  )
+}
+`;
+  }
+  /**
+   * Initial footer for coherent init — Coherent Design Method branding.
+   * Replaced by app-branded footer on first `coherent chat` via regenerateLayout().
+   */
+  generateInitialFooterCode() {
+    return `'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+export function Footer() {
+  const pathname = usePathname()
+  if (pathname?.startsWith('/design-system')) return null
+  return (
+    <footer className="border-t bg-background">
+      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-2 gap-8 py-10 md:grid-cols-4">
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex items-center gap-2 mb-2">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="shrink-0 text-primary">
+                <path d="M10 4C10.5523 4 11 4.44772 11 5V13H19C19.5523 13 20 13.4477 20 14V20.4287C19.9999 22.401 18.401 23.9999 16.4287 24H3.57129C1.59895 23.9999 7.5245e-05 22.401 0 20.4287V7.57129C7.53742e-05 5.59895 1.59895 4.00008 3.57129 4H10ZM2 20.4287C2.00008 21.2965 2.70352 21.9999 3.57129 22H9V15H2V20.4287ZM11 22H16.4287C17.2965 21.9999 17.9999 21.2965 18 20.4287V15H11V22ZM3.57129 6C2.70352 6.00008 2.00008 6.70352 2 7.57129V13H9V6H3.57129ZM20.5 0C22.433 0 24 1.567 24 3.5V9.90039C23.9998 10.5076 23.5076 10.9998 22.9004 11H14.0996C13.4924 10.9998 13.0002 10.5076 13 9.90039V1.09961C13.0002 0.492409 13.4924 0.000211011 14.0996 0H20.5ZM15 9H22V3.5C22 2.67157 21.3284 2 20.5 2H15V9Z" fill="currentColor"/>
+              </svg>
+              <span className="text-sm font-semibold">Coherent Design Method</span>
+            </div>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Design once. Stay consistent everywhere.
+            </p>
+          </div>
+          <div>
+            <h4 className="mb-3 text-sm font-semibold">Product</h4>
+            <ul className="space-y-2">
+              <li><Link href="/design-system" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Design System</Link></li>
+              <li><a href="https://getcoherent.design" target="_blank" rel="noopener noreferrer" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Website</a></li>
+              <li><a href="https://github.com/skovtun/coherent-design-method" target="_blank" rel="noopener noreferrer" className="text-sm text-muted-foreground hover:text-foreground transition-colors">GitHub</a></li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="mb-3 text-sm font-semibold">Legal</h4>
+            <ul className="space-y-2">
+              <li><span className="text-sm text-muted-foreground cursor-pointer hover:text-foreground transition-colors">Terms of Use</span></li>
+              <li><span className="text-sm text-muted-foreground cursor-pointer hover:text-foreground transition-colors">Privacy Policy</span></li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="mb-3 text-sm font-semibold">Author</h4>
+            <ul className="space-y-2">
+              <li><a href="https://www.linkedin.com/in/sergeikovtun/" target="_blank" rel="noopener noreferrer" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Sergei Kovtun</a></li>
+            </ul>
+          </div>
+        </div>
+        <div className="border-t py-6 text-center text-xs text-muted-foreground">
+          {'\\u00A9'} {new Date().getFullYear()} Coherent Design Method. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  )
+}
+`;
+  }
 };
 
 // src/generators/templates/pages/_shared.ts

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.12",
+  "version": "0.5.0",
   "description": "Core design system engine for Coherent",
   "type": "module",
   "main": "./dist/index.js",
@@ -32,12 +32,6 @@
   ],
   "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"
@@ -47,5 +41,11 @@
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
     "vitest": "^1.2.1"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest"
   }
-}
+}