npm - @getcoherent/core - Versions diffs - 0.2.4 → 0.3.0 - Mend

@getcoherent/core 0.2.4 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -3469,7 +3469,9 @@ declare class PageGenerator {
     /**
      * Generate layout code (for root layout)
      */
-    generateLayout(layout: PageLayout, appType?: 'multi-page' | 'spa'): Promise<string>;
+    generateLayout(layout: PageLayout, appType?: 'multi-page' | 'spa', options?: {
+        skipNav?: boolean;
+    }): Promise<string>;
     /**
      * Generate Next.js App Router root layout
      */
@@ -3479,6 +3481,15 @@ declare class PageGenerator {
      * Documentation is part of Design System; also hide on legacy /docs for consistency.
      */
     generateAppNav(): string;
+    /**
+     * Generate shared Header component code for components/shared/header.tsx.
+     * Contains navigation items, theme toggle, and Design System FAB.
+     */
+    generateSharedHeaderCode(): string;
+    /**
+     * Generate shared Footer component code for components/shared/footer.tsx.
+     */
+    generateSharedFooterCode(): string;
     /**
      * Generate React SPA root layout
      */
@@ -3680,8 +3691,9 @@ declare class ProjectScaffolder {
      */
     private generatePages;
     /**
-     * Generate root layout (and AppNav when navigation enabled).
-     * Public so init can call it after create-next-app to add Design System button and Coherent layout.
+     * Generate root layout with shared Header/Footer components.
+     * Creates layout.tsx (without inline nav), then registers shared Header and Footer
+     * in the manifest and wires them into layout.tsx via integrateSharedLayoutIntoRootLayout.
      */
     generateRootLayout(): Promise<void>;
     private generateDefaultPages;

package/dist/index.js CHANGED Viewed

@@ -5552,9 +5552,9 @@ ${sections}
   /**
    * Generate layout code (for root layout)
    */
-  async generateLayout(layout, appType = "multi-page") {
+  async generateLayout(layout, appType = "multi-page", options) {
     if (appType === "multi-page") {
-      return this.generateNextJSLayout(layout);
+      return this.generateNextJSLayout(layout, options);
     } else {
       return this.generateReactSPALayout(layout);
     }
@@ -5562,9 +5562,9 @@ ${sections}
   /**
    * Generate Next.js App Router root layout
    */
-  generateNextJSLayout(_layout) {
+  generateNextJSLayout(_layout, options) {
     const cssVars = buildCssVariables(this.config);
-    const navEnabled = this.config.navigation?.enabled;
+    const navEnabled = this.config.navigation?.enabled && !options?.skipNav;
     const navRendered = navEnabled ? "<AppNav />" : "";
     const isDark = this.config.theme?.defaultMode === "dark";
     const htmlClass = isDark ? ' className="dark"' : "";
@@ -5610,7 +5610,7 @@ export default function RootLayout({
       </head>
       <body className="min-h-screen flex flex-col bg-background text-foreground antialiased">
 ${navEnabled ? `        ${navRendered}
-        ` : ""}<div className="flex-1 flex flex-col">{children}</div>
+        ` : ""}        <div className="flex-1 flex flex-col">{children}</div>
       </body>
     </html>
   )
@@ -5737,6 +5737,111 @@ export function AppNav() {
     </Fragment>
   )
 }
+`;
+  }
+  /**
+   * Generate shared Header component code for components/shared/header.tsx.
+   * Contains navigation items, theme toggle, and Design System FAB.
+   */
+  generateSharedHeaderCode() {
+    const navItems = this.config.navigation?.items || [];
+    const authRoutes = /* @__PURE__ */ new Set([
+      "/login",
+      "/signin",
+      "/sign-in",
+      "/signup",
+      "/sign-up",
+      "/register",
+      "/forgot-password",
+      "/reset-password"
+    ]);
+    const visibleItems = navItems.filter((item) => !authRoutes.has(item.route) && !item.route.includes("["));
+    const hasMultipleItems = visibleItems.length > 1;
+    const items = visibleItems.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 appName = this.escapeString(this.config.name);
+    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()
+  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-6">
+            <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>
+          <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>
+    </>
+  )
+}
+`;
+  }
+  /**
+   * Generate shared Footer component code for components/shared/footer.tsx.
+   */
+  generateSharedFooterCode() {
+    const appName = this.escapeString(this.config.name);
+    return `'use client'
+export function Footer() {
+  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>\\u00A9 {new Date().getFullYear()} ${appName}</p>
+        <p className="hidden sm:block">Built with Coherent Design Method</p>
+      </div>
+    </footer>
+  )
+}
 `;
   }
   /**
@@ -6552,17 +6657,33 @@ export function cn(...inputs: ClassValue[]) {
     }
   }
   /**
-   * Generate root layout (and AppNav when navigation enabled).
-   * Public so init can call it after create-next-app to add Design System button and Coherent layout.
+   * Generate root layout with shared Header/Footer components.
+   * Creates layout.tsx (without inline nav), then registers shared Header and Footer
+   * in the manifest and wires them into layout.tsx via integrateSharedLayoutIntoRootLayout.
    */
   async generateRootLayout() {
     const appType = this.config.settings.appType || "multi-page";
     const layout = this.config.pages[0]?.layout || "centered";
-    const code = await this.pageGenerator.generateLayout(layout, appType);
+    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 appNavCode = this.pageGenerator.generateAppNav();
-      await this.writeFile("app/AppNav.tsx", appNavCode);
+      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();
+      await generateSharedComponent(this.projectRoot, {
+        name: "Footer",
+        type: "layout",
+        code: footerCode,
+        description: "Site footer",
+        usedIn: ["app/layout.tsx"]
+      });
+      await integrateSharedLayoutIntoRootLayout(this.projectRoot);
     }
   }
   async generateDefaultPages() {

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Core design system engine for Coherent",
   "type": "module",
   "main": "./dist/index.js",