sonance-brand-mcp 1.3.2 → 1.3.4

package/dist/index.js

@@ -274,6 +274,20 @@ const BUNDLED_ASSETS = path.join(__dirname, "assets");
 const IS_BUNDLED = fs.existsSync(BUNDLED_ASSETS);
 // Development paths (when running from source)
 const DEV_PROJECT_ROOT = path.resolve(__dirname, "../..");
+/**
+ * Calculate relative path from one file to another for CSS imports
+ */
+function getRelativeImportPath(fromFile, toFile) {
+    const fromDir = path.dirname(fromFile);
+    let relativePath = path.relative(fromDir, toFile);
+    // Ensure forward slashes for CSS imports (Windows compatibility)
+    relativePath = relativePath.replace(/\\/g, '/');
+    // CSS imports need ./ prefix for same-level or relative paths
+    if (!relativePath.startsWith('.')) {
+        relativePath = './' + relativePath;
+    }
+    return relativePath;
+}
 /**
  * Run the installer for DevTools Plugin (copies files to user project)
  */
@@ -463,26 +477,260 @@ 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");
+            // Calculate correct relative paths from globals.css to the target files
+            const stylesTarget = path.join(targetDir, "src/styles/brand-overrides.css");
+            const themeTarget = path.join(targetDir, "src/theme/sonance-theme.css");
+            const import1 = `@import "${getRelativeImportPath(globalsFullPath, stylesTarget)}";`;
+            const import2 = `@import "${getRelativeImportPath(globalsFullPath, themeTarget)}";`;
+            // 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 - add these imports to your main CSS file:\n     @import \"[path-to]/src/styles/brand-overrides.css\";\n     @import \"[path-to]/src/theme/sonance-theme.css\";\n     (adjust the path based on your CSS file location)");
+    }
+    // --- 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("");
+}
+/**
+ * Run the uninstaller for DevTools Plugin (removes files and imports)
+ */
+function runDevToolsUninstaller() {
+    console.log("");
+    console.log("  ┌─────────────────────────────────────────────────┐");
+    console.log("  │                                                 │");
+    console.log("  │   🧹  Sonance DevTools - Uninstaller            │");
+    console.log("  │                                                 │");
+    console.log("  └─────────────────────────────────────────────────┘");
+    console.log("");
+    const targetDir = process.cwd();
+    let removedItems = [];
+    let errors = [];
+    // Detect file paths (same logic as installer)
+    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"
+    ];
+    // --- 1. Remove CSS imports from globals.css ---
+    for (const cssPath of globalsCssPaths) {
+        const fullPath = path.join(targetDir, cssPath);
+        if (fs.existsSync(fullPath)) {
+            try {
+                let content = fs.readFileSync(fullPath, "utf-8");
+                const originalContent = content;
+                // Remove lines containing the imports
+                content = content.split('\n')
+                    .filter(line => !line.includes('brand-overrides.css') && !line.includes('sonance-theme.css'))
+                    .join('\n');
+                // Clean up extra blank lines at the top
+                content = content.replace(/^\n+/, '');
+                if (content !== originalContent) {
+                    fs.writeFileSync(fullPath, content, "utf-8");
+                    removedItems.push(`Removed CSS imports from ${cssPath}`);
+                }
+            }
+            catch (err) {
+                errors.push(`Could not modify ${cssPath}`);
+            }
+            break;
+        }
+    }
+    // --- 2. Remove from layout.tsx ---
+    for (const layoutPath of layoutPaths) {
+        const fullPath = path.join(targetDir, layoutPath);
+        if (fs.existsSync(fullPath)) {
+            try {
+                let content = fs.readFileSync(fullPath, "utf-8");
+                const originalContent = content;
+                // Remove import line
+                content = content.split('\n')
+                    .filter(line => !line.includes("SonanceDevTools") || !line.includes("import"))
+                    .join('\n');
+                // Remove component usage line
+                content = content.split('\n')
+                    .filter(line => !line.includes("<SonanceDevTools"))
+                    .join('\n');
+                if (content !== originalContent) {
+                    fs.writeFileSync(fullPath, content, "utf-8");
+                    removedItems.push(`Removed DevTools from ${layoutPath}`);
+                }
+            }
+            catch (err) {
+                errors.push(`Could not modify ${layoutPath}`);
+            }
+            break;
+        }
+    }
+    // --- 3. Delete installed directories/files ---
+    const itemsToDelete = [
+        "src/components/dev-tools",
+        "src/styles/brand-overrides.css",
+        "src/theme",
+        "src/app/api/sonance-theme",
+        "src/app/api/sonance-components",
+        "src/app/api/sonance-save-logo",
+        "src/app/api/sonance-assets",
+        "src/app/api/sonance-inject-id",
+        "src/app/api/sonance-analyze",
+        "src/lib/brand-system.ts"
+    ];
+    for (const item of itemsToDelete) {
+        const fullPath = path.join(targetDir, item);
+        if (fs.existsSync(fullPath)) {
+            try {
+                const stats = fs.statSync(fullPath);
+                if (stats.isDirectory()) {
+                    fs.rmSync(fullPath, { recursive: true, force: true });
+                }
+                else {
+                    fs.unlinkSync(fullPath);
+                }
+                removedItems.push(`Deleted ${item}`);
+            }
+            catch (err) {
+                errors.push(`Could not delete ${item}`);
+            }
+        }
+    }
+    // --- Output results ---
+    if (removedItems.length > 0) {
+        console.log("  ✅ Removed:");
+        removedItems.forEach(item => console.log(`     ✓ ${item}`));
+    }
+    else {
+        console.log("  ℹ️  No DevTools installation found to remove.");
+    }
+    if (errors.length > 0) {
+        console.log("");
+        console.log("  ⚠️  Some items could not be removed:");
+        errors.forEach(err => console.log(`     - ${err}`));
+    }
+    console.log("");
+    console.log("  🧹 Uninstall complete!");
     console.log("");
 }
 // Check for install-devtools command
@@ -490,6 +738,11 @@ if (process.argv.includes("install-devtools") || process.argv.includes("--instal
     runDevToolsInstaller();
     process.exit(0);
 }
+// Check for uninstall-devtools command
+if (process.argv.includes("uninstall-devtools") || process.argv.includes("--uninstall-devtools")) {
+    runDevToolsUninstaller();
+    process.exit(0);
+}
 // Resolve paths based on environment
 function getAssetPath(assetType) {
     if (IS_BUNDLED) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "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",