sonance-brand-mcp 1.3.2 → 1.3.3

package/dist/index.js

@@ -463,26 +463,132 @@ function runDevToolsInstaller() {
         fs.writeFileSync(path.join(themeDir, "sonance-config.json"), JSON.stringify(initialConfig, null, 2), "utf-8");
         console.log("  ✓ Created src/theme/ with initial files");
     }
+    // Detect user's file paths
+    const globalsCssPaths = [
+        "src/app/globals.css",
+        "app/globals.css",
+        "src/styles/globals.css",
+        "styles/globals.css"
+    ];
+    const layoutPaths = [
+        "src/app/layout.tsx",
+        "app/layout.tsx",
+        "src/app/layout.jsx",
+        "app/layout.jsx"
+    ];
+    let detectedGlobalsCss = null;
+    let detectedLayout = null;
+    for (const cssPath of globalsCssPaths) {
+        if (fs.existsSync(path.join(targetDir, cssPath))) {
+            detectedGlobalsCss = cssPath;
+            break;
+        }
+    }
+    for (const layoutPath of layoutPaths) {
+        if (fs.existsSync(path.join(targetDir, layoutPath))) {
+            detectedLayout = layoutPath;
+            break;
+        }
+    }
+    // Track what was auto-configured vs needs manual setup
+    let cssAutoConfigured = false;
+    let layoutAutoConfigured = false;
+    const manualSteps = [];
+    // --- Auto-inject CSS imports into globals.css ---
+    if (detectedGlobalsCss) {
+        const globalsFullPath = path.join(targetDir, detectedGlobalsCss);
+        try {
+            let cssContent = fs.readFileSync(globalsFullPath, "utf-8");
+            const import1 = '@import "../styles/brand-overrides.css";';
+            const import2 = '@import "../theme/sonance-theme.css";';
+            // Prepend imports if not already present
+            const newImports = [];
+            if (!cssContent.includes("brand-overrides.css"))
+                newImports.push(import1);
+            if (!cssContent.includes("sonance-theme.css"))
+                newImports.push(import2);
+            if (newImports.length > 0) {
+                cssContent = newImports.join("\n") + "\n" + cssContent;
+                fs.writeFileSync(globalsFullPath, cssContent, "utf-8");
+            }
+            cssAutoConfigured = true;
+        }
+        catch (err) {
+            manualSteps.push(`Could not modify ${detectedGlobalsCss} - add CSS imports manually`);
+        }
+    }
+    else {
+        manualSteps.push("globals.css not found - create it and add:\n     @import \"../styles/brand-overrides.css\";\n     @import \"../theme/sonance-theme.css\";");
+    }
+    // --- Auto-inject into layout file ---
+    if (detectedLayout) {
+        const layoutFullPath = path.join(targetDir, detectedLayout);
+        try {
+            let layoutContent = fs.readFileSync(layoutFullPath, "utf-8");
+            let modified = false;
+            // Add import if not present
+            if (!layoutContent.includes("SonanceDevTools")) {
+                const importMatch = layoutContent.match(/^import .+$/gm);
+                if (importMatch && importMatch.length > 0) {
+                    const lastImport = importMatch[importMatch.length - 1];
+                    layoutContent = layoutContent.replace(lastImport, `${lastImport}\nimport { SonanceDevTools } from '@/components/dev-tools';`);
+                    modified = true;
+                }
+                else {
+                    // No imports found, add at the top
+                    layoutContent = `import { SonanceDevTools } from '@/components/dev-tools';\n${layoutContent}`;
+                    modified = true;
+                }
+            }
+            // Add component before </body> if not present
+            if (!layoutContent.includes("<SonanceDevTools")) {
+                if (layoutContent.includes("</body>")) {
+                    layoutContent = layoutContent.replace(/<\/body>/, `        {process.env.NODE_ENV === 'development' && <SonanceDevTools />}\n      </body>`);
+                    modified = true;
+                }
+                else {
+                    manualSteps.push("Could not find </body> tag - add DevTools component manually");
+                }
+            }
+            if (modified) {
+                fs.writeFileSync(layoutFullPath, layoutContent, "utf-8");
+            }
+            // Check if layout was fully configured
+            layoutAutoConfigured = layoutContent.includes("SonanceDevTools") && layoutContent.includes("<SonanceDevTools");
+        }
+        catch (err) {
+            manualSteps.push(`Could not modify ${detectedLayout} - add DevTools import and component manually`);
+        }
+    }
+    else {
+        manualSteps.push("layout.tsx not found - add to your layout:\n     import { SonanceDevTools } from '@/components/dev-tools';\n     {process.env.NODE_ENV === 'development' && <SonanceDevTools />}");
+    }
+    // --- Output results ---
     console.log("");
     console.log("  ✅ Sonance DevTools installed successfully!");
     console.log("");
-    console.log("  ┌──────────────────────────────────────────────────────────────────┐");
-    console.log("  │  Next steps:                                                     │");
-    console.log("  │                                                                  │");
-    console.log("  │  1. Add to your globals.css:                                     │");
-    console.log("  │     @import \"../styles/brand-overrides.css\";                     │");
-    console.log("  │     @import \"../theme/sonance-theme.css\";                        │");
-    console.log("  │                                                                  │");
-    console.log("  │  2. Add to your layout.tsx:                                      │");
-    console.log("  │     import { SonanceDevTools } from '@/components/dev-tools';    │");
-    console.log("  │                                                                  │");
-    console.log("  │  3. Add to your render function:                                 │");
-    console.log("  │     {process.env.NODE_ENV === 'development' && <SonanceDevTools />}│");
-    console.log("  │                                                                  │");
-    console.log("  │  4. Apply CSS variables to your logo components:                 │");
-    console.log("  │     style={{ transform: `scale(var(--sonance-logo-scale, 1))` }} │");
-    console.log("  │                                                                  │");
-    console.log("  └──────────────────────────────────────────────────────────────────┘");
+    if (cssAutoConfigured) {
+        console.log(`  ✓ Auto-configured ${detectedGlobalsCss}`);
+    }
+    if (layoutAutoConfigured) {
+        console.log(`  ✓ Auto-configured ${detectedLayout}`);
+    }
+    if (manualSteps.length > 0) {
+        console.log("");
+        console.log("  ⚠️  Some files need manual setup:");
+        console.log("");
+        manualSteps.forEach((step, i) => {
+            console.log(`  ${i + 1}. ${step}`);
+            console.log("");
+        });
+        console.log("  ─────────────────────────────────────────────────────────────────────");
+        console.log("  After completing the steps above, run your dev server.");
+        console.log("  ─────────────────────────────────────────────────────────────────────");
+    }
+    else {
+        console.log("");
+        console.log("  🚀 DONE! Run your dev server and look for the DevTools button.");
+    }
     console.log("");
 }
 // Check for install-devtools command

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",