gmoonc 0.0.3 → 0.0.4

package/dist/index.cjs

@@ -244,20 +244,29 @@ function patchEntryCss(entrypointPath, dryRun) {
     return { success: true, backupPath: null };
   }
   const content = readFile(entrypointPath);
-  if (content.includes("./gmoonc/styles/gmoonc.css") || content.includes("gmoonc/styles/gmoonc.css")) {
-    logSuccess("CSS import already exists");
+  const hasThemeCss = content.includes("./gmoonc/styles/theme.css") || content.includes("gmoonc/styles/theme.css");
+  const hasGmooncCss = content.includes("./gmoonc/styles/gmoonc.css") || content.includes("gmoonc/styles/gmoonc.css");
+  if (hasThemeCss && hasGmooncCss) {
+    logSuccess("CSS imports already exist");
     return { success: true, backupPath: null };
   }
   const importRegex = /^import\s+.*$/gm;
   const imports = content.match(importRegex) || [];
   let newContent = content;
+  const cssImports = [];
+  if (!hasThemeCss) {
+    cssImports.push('import "./gmoonc/styles/theme.css";');
+  }
+  if (!hasGmooncCss) {
+    cssImports.push('import "./gmoonc/styles/gmoonc.css";');
+  }
   if (imports.length > 0) {
     const lastImport = imports[imports.length - 1];
     const lastImportIndex = content.lastIndexOf(lastImport);
     const insertIndex = lastImportIndex + lastImport.length;
-    newContent = content.slice(0, insertIndex) + '\nimport "./gmoonc/styles/gmoonc.css";' + content.slice(insertIndex);
+    newContent = content.slice(0, insertIndex) + "\n" + cssImports.join("\n") + content.slice(insertIndex);
   } else {
-    newContent = 'import "./gmoonc/styles/gmoonc.css";\n' + content;
+    newContent = cssImports.join("\n") + "\n" + content;
   }
   const backupPath = writeFileSafe(entrypointPath, newContent);
   if (backupPath) {
@@ -281,23 +290,58 @@ function extractRouteComponents(appContent) {
   const lines = appContent.split("\n");
   if (indexComponent) {
     for (const line of lines) {
-      if (line.includes("import") && line.includes(indexComponent)) {
-        indexImport = line.trim();
-        break;
+      const trimmed = line.trim();
+      if (trimmed.startsWith("import")) {
+        const defaultImportMatch = trimmed.match(/import\s+(\w+)\s+from\s+["']([^"']+)["']/);
+        if (defaultImportMatch && defaultImportMatch[1] === indexComponent) {
+          indexImport = trimmed;
+          break;
+        }
+        const namedImportMatch = trimmed.match(/import\s+\{[^}]*\b(\w+)\b[^}]*\}\s+from\s+["']([^"']+)["']/);
+        if (namedImportMatch && namedImportMatch[1] === indexComponent) {
+          indexImport = trimmed;
+          break;
+        }
       }
     }
   }
   if (notFoundComponent) {
     for (const line of lines) {
-      if (line.includes("import") && line.includes(notFoundComponent)) {
-        notFoundImport = line.trim();
-        break;
+      const trimmed = line.trim();
+      if (trimmed.startsWith("import")) {
+        const defaultImportMatch = trimmed.match(/import\s+(\w+)\s+from\s+["']([^"']+)["']/);
+        if (defaultImportMatch && defaultImportMatch[1] === notFoundComponent) {
+          notFoundImport = trimmed;
+          break;
+        }
+        const namedImportMatch = trimmed.match(/import\s+\{[^}]*\b(\w+)\b[^}]*\}\s+from\s+["']([^"']+)["']/);
+        if (namedImportMatch && namedImportMatch[1] === notFoundComponent) {
+          notFoundImport = trimmed;
+          break;
+        }
       }
     }
   }
   return { indexImport, notFoundImport, indexComponent, notFoundComponent };
 }
-function generateAppRoutes(consumerDir, basePath, indexImport, notFoundImport, indexComponent, notFoundComponent, dryRun) {
+function convertImportToRelative(importLine, appRoutesPath, appPath) {
+  const pathMatch = importLine.match(/from\s+["']([^"']+)["']/);
+  if (!pathMatch) {
+    return importLine;
+  }
+  const originalPath = pathMatch[1];
+  if (originalPath.startsWith("./") || originalPath.startsWith("../")) {
+    const appDir = appPath.substring(0, appPath.lastIndexOf("/"));
+    const appRoutesDir = appRoutesPath.substring(0, appRoutesPath.lastIndexOf("/"));
+    const resolvedPath = (0, import_path5.join)(appDir, originalPath);
+    const relativePath = (0, import_path5.relative)(appRoutesDir, resolvedPath);
+    const normalizedPath = relativePath.replace(/\\/g, "/");
+    const finalPath = normalizedPath.startsWith(".") ? normalizedPath : "./" + normalizedPath;
+    return importLine.replace(pathMatch[1], finalPath);
+  }
+  return importLine;
+}
+function generateAppRoutes(consumerDir, basePath, indexImport, notFoundImport, indexComponent, notFoundComponent, appPath, dryRun) {
   const appRoutesPath = (0, import_path5.join)(consumerDir, "src/gmoonc/router/AppRoutes.tsx");
   if (dryRun) {
     logInfo(`[DRY RUN] Would generate ${appRoutesPath}`);
@@ -313,19 +357,21 @@ function generateAppRoutes(consumerDir, basePath, indexImport, notFoundImport, i
     routes.push(`    { path: "*", element: <${notFoundComponent} /> }`);
   }
   const imports = [
-    "import { useRoutes } from 'react-router-dom';",
+    "import { useRoutes, type RouteObject } from 'react-router-dom';",
     "import { createGmooncRoutes } from './createGmooncRoutes';"
   ];
   if (indexImport) {
-    imports.push(indexImport);
+    const convertedImport = convertImportToRelative(indexImport, appRoutesPath, appPath);
+    imports.push(convertedImport);
   }
   if (notFoundImport) {
-    imports.push(notFoundImport);
+    const convertedImport = convertImportToRelative(notFoundImport, appRoutesPath, appPath);
+    imports.push(convertedImport);
   }
   const content = `${imports.join("\n")}
 
 export function GMooncAppRoutes({ basePath = "${basePath}" }: { basePath?: string }) {
-  const allRoutes = [
+  const allRoutes: RouteObject[] = [
 ${routes.join(",\n")}
   ];
 
@@ -380,10 +426,54 @@ function patchBrowserRouter(consumerDir, basePath, dryRun) {
     logInfo(`[DRY RUN] Would patch ${appPath}`);
     return { success: true, backupPath: null };
   }
-  generateAppRoutes(consumerDir, basePath, indexImport, notFoundImport, indexComponent, notFoundComponent, false);
+  generateAppRoutes(consumerDir, basePath, indexImport, notFoundImport, indexComponent, notFoundComponent, appPath, false);
   const backupPath = writeFileSafe(appPath, "");
-  const importLine = `import { GMooncAppRoutes } from "./gmoonc/router/AppRoutes";`;
   const lines = appContent.split("\n");
+  let hasBrowserRouterImport = false;
+  let reactRouterImportIndex = -1;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+    if (line.includes("from") && line.includes("react-router-dom")) {
+      reactRouterImportIndex = i;
+      if (line.includes("BrowserRouter")) {
+        hasBrowserRouterImport = true;
+      }
+    }
+  }
+  if (!hasBrowserRouterImport) {
+    if (reactRouterImportIndex >= 0) {
+      const existingLine = lines[reactRouterImportIndex];
+      if (existingLine.includes("{") && existingLine.includes("}")) {
+        const updatedLine = existingLine.replace(/\{([^}]+)\}/, (match, imports) => {
+          const importList = imports.split(",").map((s) => s.trim());
+          if (!importList.includes("BrowserRouter")) {
+            importList.push("BrowserRouter");
+          }
+          return `{ ${importList.join(", ")} }`;
+        });
+        lines[reactRouterImportIndex] = updatedLine;
+      } else {
+        lines.splice(reactRouterImportIndex + 1, 0, `import { BrowserRouter } from "react-router-dom";`);
+      }
+    } else {
+      const importLine2 = `import { BrowserRouter } from "react-router-dom";`;
+      let lastImportIndex2 = -1;
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i].trim();
+        if (line.startsWith("import ") || line.startsWith("import{") || line.startsWith("import	")) {
+          lastImportIndex2 = i;
+        } else if (line && lastImportIndex2 >= 0 && !line.startsWith("//") && !line.startsWith("/*")) {
+          break;
+        }
+      }
+      if (lastImportIndex2 >= 0) {
+        lines.splice(lastImportIndex2 + 1, 0, importLine2);
+      } else {
+        lines.unshift(importLine2);
+      }
+    }
+  }
+  const importLine = `import { GMooncAppRoutes } from "./gmoonc/router/AppRoutes";`;
   let lastImportIndex = -1;
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i].trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gmoonc",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Goalmoon Ctrl (gmoonc): Complete dashboard installer for React projects",
   "license": "MIT",
   "homepage": "https://gmoonc.com",
@@ -14,7 +14,7 @@
   },
   "type": "module",
   "bin": {
-    "gmoonc": "./dist/cli.cjs"
+    "gmoonc": "./dist/index.cjs"
   },
   "files": [
     "dist",
@@ -25,7 +25,7 @@
   ],
   "scripts": {
     "sync:templates": "node scripts/sync-templates.mjs",
-    "build": "tsup src/cli/index.ts --format cjs --no-splitting --out-dir dist && node -e \"const fs=require('fs');const f='dist/cli.js';const cjs='dist/cli.cjs';if(fs.existsSync(f)){fs.renameSync(f,cjs);fs.writeFileSync(cjs,'#!/usr/bin/env node\\n'+fs.readFileSync(cjs))}\"",
+    "build": "tsup src/cli/index.ts --format cjs --no-splitting --out-dir dist && node -e \"const fs=require('fs');const path=require('path');const distDir='dist';const files=fs.readdirSync(distDir);const indexFile=files.find(f=>f.startsWith('index')&&f.endsWith('.js'));if(indexFile){const oldPath=path.join(distDir,indexFile);const newPath=path.join(distDir,'index.cjs');fs.renameSync(oldPath,newPath);const content=fs.readFileSync(newPath,'utf8');if(!content.startsWith('#!/usr/bin/env node')){fs.writeFileSync(newPath,'#!/usr/bin/env node\\n'+content)}}\"",
     "clean": "rimraf dist",
     "prepublishOnly": "npm run clean && npm run build",
     "postinstall": "node scripts/block-global-install.cjs"

package/src/templates/shared/src/gmoonc/app/menu/defaultMenu.ts

@@ -1,4 +1,4 @@
-import { type MenuItem as CoreMenuItem } from '../../core/core';
+import { type MenuItem as CoreMenuItem } from '../../core/types';
 
 /**
  * Extended MenuItem interface with submenu support

package/src/templates/shared/src/gmoonc/config/defaultConfig.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from '../core/core';
+import { defineConfig } from '../core/types';
 import { createDefaultMenu } from '../app/menu/defaultMenu';
 
 /**

package/src/templates/shared/src/gmoonc/layout/GMooncAppLayout.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { Outlet, useLocation, useNavigate, Link } from 'react-router-dom';
-import { GmooncShell } from '../ui/ui';
+import { GmooncShell } from '../ui/shell';
 import { defaultConfig } from '../config/defaultConfig';
 import { GMooncSessionProvider, useGMooncSession } from '../session/GMooncSessionContext';
 import { GMooncUserProfile } from '../components/GMooncUserProfile';
@@ -24,33 +24,36 @@ function GMooncAppLayoutInner() {
   }, [navigate]);
 
   return (
-    <GmooncShell
-      config={defaultConfig}
-      roles={roles}
-      activePath={location.pathname}
-      onNavigate={(path) => navigate(path)}
-      headerRight={
-        <GMooncUserProfile
-          onAccount={handleAccount}
-          onAbout={handleAbout}
-          onLogoutRequest={handleLogout}
-        />
-      }
-      renderLink={({ path, label, isActive, onClick }) => (
-        <Link
-          to={path}
-          onClick={onClick}
-          style={{
-            textDecoration: isActive ? 'underline' : 'none',
-            color: 'inherit'
-          }}
-        >
-          {label}
-        </Link>
-      )}
-    >
-      <Outlet />
-    </GmooncShell>
+    <div className="gmoonc-root">
+      <GmooncShell
+        config={defaultConfig}
+        roles={roles}
+        activePath={location.pathname}
+        onNavigate={(path) => navigate(path)}
+        headerRight={
+          <GMooncUserProfile
+            onAccount={handleAccount}
+            onAbout={handleAbout}
+            onLogoutRequest={handleLogout}
+          />
+        }
+        renderLink={({ path, label, isActive, onClick, className, children }) => (
+          <Link
+            to={path}
+            onClick={onClick}
+            className={className}
+            style={{
+              textDecoration: isActive ? 'underline' : 'none',
+              color: 'inherit'
+            }}
+          >
+            {children || label}
+          </Link>
+        )}
+      >
+        <Outlet />
+      </GmooncShell>
+    </div>
   );
 }
 

package/src/templates/shared/src/gmoonc/styles/theme.css

@@ -0,0 +1,101 @@
+/* 
+ * Goalmoon Ctrl (gmoonc) Theme Variables
+ * 
+ * This file contains CSS custom properties (variables) that define the visual theme
+ * of the gmoonc dashboard. You can customize these values to match your brand.
+ * 
+ * All variables are scoped under .gmoonc-root to avoid conflicts with your app.
+ */
+
+.gmoonc-root {
+  /* Colors - Background */
+  --gmoonc-color-bg: #293047;
+  --gmoonc-color-bg-light: #eaf0f5;
+  --gmoonc-color-bg-gradient-start: #eaf0f5;
+  --gmoonc-color-bg-gradient-end: #dbe2ea;
+  
+  /* Colors - Surface */
+  --gmoonc-color-surface: #374161;
+  --gmoonc-color-surface-2: #3F4A6E;
+  --gmoonc-color-surface-3: #6374AD;
+  --gmoonc-color-surface-light: #f8f9fa;
+  --gmoonc-color-surface-white: #ffffff;
+  
+  /* Colors - Text */
+  --gmoonc-color-text: #eaf0f5;
+  --gmoonc-color-text-primary: #374161;
+  --gmoonc-color-text-secondary: #6c757d;
+  --gmoonc-color-text-muted: #dbe2ea;
+  --gmoonc-color-text-white: #ffffff;
+  
+  /* Colors - Primary */
+  --gmoonc-color-primary: #879FED;
+  --gmoonc-color-primary-2: #6374AD;
+  --gmoonc-color-primary-dark: #374161;
+  
+  /* Colors - Accent */
+  --gmoonc-color-accent: #71b399;
+  
+  /* Colors - Borders */
+  --gmoonc-color-border: #dbe2ea;
+  --gmoonc-color-border-light: #e9ecef;
+  --gmoonc-color-border-dark: #1d2436;
+  
+  /* Colors - States */
+  --gmoonc-color-error: #dc2626;
+  --gmoonc-color-error-bg: #fef2f2;
+  --gmoonc-color-error-border: #fecaca;
+  --gmoonc-color-success: #166534;
+  --gmoonc-color-success-bg: #f0fdf4;
+  --gmoonc-color-success-border: #bbf7d0;
+  --gmoonc-color-disabled: #6c757d;
+  --gmoonc-color-disabled-bg: #f8f9fa;
+  
+  /* Spacing */
+  --gmoonc-gap: 12px;
+  --gmoonc-gap-sm: 8px;
+  --gmoonc-gap-md: 16px;
+  --gmoonc-gap-lg: 20px;
+  --gmoonc-gap-xl: 30px;
+  
+  /* Border Radius */
+  --gmoonc-radius: 12px;
+  --gmoonc-radius-sm: 8px;
+  --gmoonc-radius-md: 10px;
+  --gmoonc-radius-lg: 16px;
+  
+  /* Typography */
+  --gmoonc-font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  --gmoonc-font-weight-title: 700;
+  --gmoonc-font-weight-heading: 600;
+  --gmoonc-font-weight-body: 400;
+  --gmoonc-font-weight-medium: 500;
+  
+  /* Font Sizes */
+  --gmoonc-font-size-xs: 12px;
+  --gmoonc-font-size-sm: 14px;
+  --gmoonc-font-size-base: 16px;
+  --gmoonc-font-size-lg: 18px;
+  --gmoonc-font-size-xl: 24px;
+  --gmoonc-font-size-2xl: 28px;
+  --gmoonc-font-size-3xl: 32px;
+  
+  /* Shadows */
+  --gmoonc-shadow-sm: 0 4px 6px rgba(55, 65, 97, 0.1);
+  --gmoonc-shadow-md: 0 4px 20px rgba(55, 65, 97, 0.1);
+  --gmoonc-shadow-lg: 0 8px 32px rgba(55, 65, 97, 0.15);
+  --gmoonc-shadow-header: 0 4px 20px rgba(55, 65, 97, 0.3);
+  --gmoonc-shadow-menu-header: 0 8px 16px rgba(0, 0, 0, 0.22);
+  
+  /* Transitions */
+  --gmoonc-transition: 0.3s ease;
+  --gmoonc-transition-fast: 0.2s ease;
+  
+  /* Z-index */
+  --gmoonc-z-header: 1000;
+  --gmoonc-z-profile: 1001;
+  --gmoonc-z-dropdown: 1002;
+  --gmoonc-z-hamburger: 1002;
+  --gmoonc-z-backdrop: 1050;
+  --gmoonc-z-menu: 1100;
+}

package/src/templates/shared/src/gmoonc/ui/menu.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import type { MenuItem as CoreMenuItem } from '@gmoonc/core';
+import type { MenuItem as CoreMenuItem } from '../core/types';
 import './styles.css';
 
 /**
@@ -36,6 +36,8 @@ export interface GmooncMenuProps {
     label: string;
     isActive: boolean;
     onClick?: () => void;
+    className?: string;
+    children?: React.ReactNode;
   }) => React.ReactNode;
   /** Whether menu is open (for mobile/tablet) */
   isOpen?: boolean;
@@ -392,7 +394,8 @@ export function GmooncMenu({
         path: item.path,
         label: item.label,
         isActive: isItemActive,
-        onClick: handleItemClick
+        onClick: handleItemClick,
+        className: `gmoonc-menu-link ${hasSubmenu ? 'has-submenu' : ''} ${isSubmenuOpen ? 'submenu-open' : ''} ${isItemActive ? 'active' : ''}`
       })
     ) : (
       <button
@@ -439,7 +442,8 @@ export function GmooncMenu({
                 path: subItem.path,
                 label: subItem.label,
                 isActive: isSubActive,
-                onClick: handleSubItemClick
+                onClick: handleSubItemClick,
+                className: `gmoonc-submenu-link ${isSubActive ? 'active' : ''}`
               }) : (
                 <button
                   type="button"

package/src/templates/shared/src/gmoonc/ui/shell.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import type { GmooncConfig } from '@gmoonc/core';
+import type { GmooncConfig } from '../core/types';
 import { GmooncHeader } from './header';
 import { GmooncSidebar } from './sidebar';
 import { GmooncMenu, type GmooncMenuItem } from './menu';