sonance-brand-mcp 1.3.1 → 1.3.3

package/dist/assets/api/sonance-save-logo/route.ts

@@ -0,0 +1,426 @@
+import { NextResponse } from "next/server";
+import * as fs from "fs";
+import * as path from "path";
+
+/**
+ * Sonance DevTools API - Save Logo Configuration
+ * 
+ * This endpoint is DEVELOPMENT ONLY.
+ * It updates the brandLogos configuration in brand-system.ts
+ * to persist logo changes across page reloads.
+ */
+
+interface SaveLogoRequest {
+  srcLight?: string;
+  srcDark?: string;
+  width?: number;
+  height?: number;
+  scale?: number;
+  brandId?: string; // Optional - defaults to 'sonance'
+  selector?: string; // Optional CSS selector for targeting specific elements (e.g., "#my-logo")
+  reset?: boolean; // If true, removes overrides instead of setting them
+}
+
+interface LogoDimensions {
+  width?: number;
+  height?: number;
+  scale?: number;
+}
+
+interface SelectorOverride {
+  selector: string;
+  scale?: number;
+  width?: number;
+  height?: number;
+}
+
+/**
+ * Updates the brand-overrides.css file with logo sizing CSS variables.
+ * This ensures saved sizes are baked into production builds.
+ * 
+ * Supports two modes:
+ * 1. Global brand defaults: Updates :root CSS variables
+ * 2. Selector-specific: Appends rules for specific elements (e.g., #my-logo)
+ */
+function updateBrandOverridesCss(
+  cssPath: string, 
+  brandId: string, 
+  dimensions: LogoDimensions,
+  selector?: string,
+  reset?: boolean
+): void {
+  const validBrands = ["sonance", "iport", "blaze"];
+  
+  // Read existing CSS or create default structure
+  let existingCssContent = "";
+  const brandSizes: Record<string, LogoDimensions> = {};
+  const selectorOverrides: SelectorOverride[] = [];
+  
+  if (fs.existsSync(cssPath)) {
+    existingCssContent = fs.readFileSync(cssPath, "utf-8");
+    
+    // Parse existing brand values from :root
+    for (const brand of validBrands) {
+      const scaleMatch = existingCssContent.match(new RegExp(`--${brand}-logo-scale:\\s*([^;]+);`));
+      const widthMatch = existingCssContent.match(new RegExp(`--${brand}-logo-width:\\s*([^;]+);`));
+      const heightMatch = existingCssContent.match(new RegExp(`--${brand}-logo-height:\\s*([^;]+);`));
+      
+      brandSizes[brand] = {
+        scale: scaleMatch && scaleMatch[1] !== "1" ? parseFloat(scaleMatch[1]) : undefined,
+        width: widthMatch && widthMatch[1] !== "auto" ? parseInt(widthMatch[1]) : undefined,
+        height: heightMatch && heightMatch[1] !== "auto" ? parseInt(heightMatch[1]) : undefined,
+      };
+    }
+    
+    // Parse existing selector-specific rules
+    // Match patterns like: #my-logo { --sonance-logo-scale: 0.5; }
+    const selectorPattern = /\/\* Selector: ([^\s]+) \*\/\s*\n([^\{]+)\s*\{([^}]+)\}/g;
+    let selectorMatch;
+    while ((selectorMatch = selectorPattern.exec(existingCssContent)) !== null) {
+      const sel = selectorMatch[1];
+      const content = selectorMatch[3];
+      const scaleMatch = content.match(/transform:\s*scale\(([^)]+)\)/);
+      const widthMatch = content.match(/width:\s*(\d+)px/);
+      const heightMatch = content.match(/height:\s*(\d+)px/);
+      
+      selectorOverrides.push({
+        selector: sel,
+        scale: scaleMatch ? parseFloat(scaleMatch[1]) : undefined,
+        width: widthMatch ? parseInt(widthMatch[1]) : undefined,
+        height: heightMatch ? parseInt(heightMatch[1]) : undefined,
+      });
+    }
+  }
+  
+  // If this is a selector-specific override, add/update it
+  if (selector) {
+    if (reset) {
+      // Remove the selector override
+      const existingIndex = selectorOverrides.findIndex(s => s.selector === selector);
+      if (existingIndex >= 0) {
+        selectorOverrides.splice(existingIndex, 1);
+      }
+    } else {
+      const existingIndex = selectorOverrides.findIndex(s => s.selector === selector);
+      const newOverride: SelectorOverride = {
+        selector,
+        ...(dimensions.scale !== undefined && dimensions.scale !== 1 && { scale: dimensions.scale }),
+        ...(dimensions.width !== undefined && { width: dimensions.width }),
+        ...(dimensions.height !== undefined && { height: dimensions.height }),
+      };
+      
+      if (existingIndex >= 0) {
+        selectorOverrides[existingIndex] = { ...selectorOverrides[existingIndex], ...newOverride };
+      } else {
+        selectorOverrides.push(newOverride);
+      }
+    }
+  } else {
+    // Update global brand defaults
+    if (reset) {
+      // Reset to defaults
+      brandSizes[brandId] = {
+        scale: 1,
+        width: undefined, // auto
+        height: undefined // auto
+      };
+    } else {
+      brandSizes[brandId] = {
+        ...brandSizes[brandId],
+        ...(dimensions.scale !== undefined && dimensions.scale !== 1 && { scale: dimensions.scale }),
+        ...(dimensions.width !== undefined && { width: dimensions.width }),
+        ...(dimensions.height !== undefined && { height: dimensions.height }),
+      };
+    }
+  }
+  
+  // Generate new CSS content
+  let newCssContent = `/* ==========================================================================
+   Sonance Brand Overrides - Auto-generated by Sonance DevTools
+   DO NOT EDIT MANUALLY - Changes will be overwritten by DevTools saves
+   ========================================================================== */
+
+:root {
+  /* Sonance Logo Sizing */
+  --sonance-logo-scale: ${brandSizes.sonance?.scale || 1};
+  --sonance-logo-width: ${brandSizes.sonance?.width ? brandSizes.sonance.width + "px" : "auto"};
+  --sonance-logo-height: ${brandSizes.sonance?.height ? brandSizes.sonance.height + "px" : "auto"};
+  
+  /* IPORT Logo Sizing */
+  --iport-logo-scale: ${brandSizes.iport?.scale || 1};
+  --iport-logo-width: ${brandSizes.iport?.width ? brandSizes.iport.width + "px" : "auto"};
+  --iport-logo-height: ${brandSizes.iport?.height ? brandSizes.iport.height + "px" : "auto"};
+  
+  /* Blaze Audio Logo Sizing */
+  --blaze-logo-scale: ${brandSizes.blaze?.scale || 1};
+  --blaze-logo-width: ${brandSizes.blaze?.width ? brandSizes.blaze.width + "px" : "auto"};
+  --blaze-logo-height: ${brandSizes.blaze?.height ? brandSizes.blaze.height + "px" : "auto"};
+}
+`;
+
+  // Append selector-specific overrides
+  if (selectorOverrides.length > 0) {
+    newCssContent += `
+/* ==========================================================================
+   Element-Specific Overrides
+   ========================================================================== */
+`;
+    
+    for (const override of selectorOverrides) {
+      const styles: string[] = [];
+      if (override.scale !== undefined && override.scale !== 1) {
+        styles.push(`  transform: scale(${override.scale})`);
+        styles.push(`  transform-origin: center`);
+      }
+      if (override.width !== undefined) {
+        styles.push(`  width: ${override.width}px`);
+      }
+      if (override.height !== undefined) {
+        styles.push(`  height: ${override.height}px`);
+      }
+      
+      if (styles.length > 0) {
+        newCssContent += `
+/* Selector: ${override.selector} */
+${override.selector} {
+${styles.join(";\n")};
+}
+`;
+      }
+    }
+  }
+  
+  // Ensure directory exists
+  const cssDir = path.dirname(cssPath);
+  if (!fs.existsSync(cssDir)) {
+    fs.mkdirSync(cssDir, { recursive: true });
+  }
+  
+  fs.writeFileSync(cssPath, newCssContent, "utf-8");
+}
+
+export async function POST(request: Request) {
+  // Security: Only allow in development
+  if (process.env.NODE_ENV !== "development") {
+    return NextResponse.json(
+      { error: "This endpoint is only available in development mode." },
+      { status: 403 }
+    );
+  }
+
+  try {
+    const body: SaveLogoRequest = await request.json();
+    const { srcLight, srcDark, width, height, scale, brandId = "sonance", selector, reset } = body;
+
+    // Check if there's anything to save
+    const hasSrcChanges = srcLight || srcDark;
+    const hasDimensionChanges = width !== undefined || height !== undefined || (scale !== undefined && scale !== 1);
+    
+    if (!reset && !hasSrcChanges && !hasDimensionChanges) {
+      return NextResponse.json(
+        { error: "No changes to save. Provide srcLight, srcDark, or dimension properties." },
+        { status: 400 }
+      );
+    }
+
+    // Validate brand ID
+    const validBrands = ["sonance", "iport", "blaze"];
+    if (!validBrands.includes(brandId)) {
+      return NextResponse.json(
+        { error: `Invalid brandId. Must be one of: ${validBrands.join(", ")}` },
+        { status: 400 }
+      );
+    }
+
+    // Resolve path to brand-system.ts
+    const projectRoot = process.cwd();
+    const brandSystemPath = path.join(projectRoot, "src", "lib", "brand-system.ts");
+
+    if (!fs.existsSync(brandSystemPath)) {
+      return NextResponse.json(
+        { error: "brand-system.ts not found" },
+        { status: 404 }
+      );
+    }
+
+    // Read the current file
+    let fileContent = fs.readFileSync(brandSystemPath, "utf-8");
+
+    // Track what was updated
+    const updated: Record<string, unknown> = { brandId };
+
+    // Handle source path changes (update brandLogos object)
+    if (hasSrcChanges && srcLight && srcDark) {
+      // Create regex patterns to find and replace the logo configuration
+      // Pattern matches: brandId: { light: '...', dark: '...', alt: '...' }
+      const brandLogoPattern = new RegExp(
+        `(${brandId}:\\s*\\{\\s*)(light:\\s*['"][^'"]*['"],?\\s*)(dark:\\s*['"][^'"]*['"],?\\s*)(alt:\\s*['"][^'"]*['"])`,
+        "s"
+      );
+
+      const match = fileContent.match(brandLogoPattern);
+      
+      if (!match) {
+        return NextResponse.json(
+          { error: `Could not find ${brandId} logo configuration in brand-system.ts` },
+          { status: 400 }
+        );
+      }
+
+      // Replace the logo paths
+      const newLogoConfig = `$1light: '${srcLight}',\n    dark: '${srcDark}',\n    $4`;
+      fileContent = fileContent.replace(brandLogoPattern, newLogoConfig);
+      
+      updated.light = srcLight;
+      updated.dark = srcDark;
+    }
+
+    // Handle dimension changes (store in a separate config section or CSS variables)
+    // For now, we'll store dimensions in a logoSizes object in brand-system.ts
+    // Note: brand-system.ts (TypeScript) currently only supports global overrides, not selectors
+    // So we only update it if no selector is provided
+    if (!selector && (hasDimensionChanges || reset)) {
+      const sizeConfig = {
+        ...(width !== undefined && { width }),
+        ...(height !== undefined && { height }),
+        ...(scale !== undefined && scale !== 1 && { scale }),
+      };
+      
+      // More robust pattern: match the entire logoSizes declaration including nested braces
+      // Pattern: export const logoSizes: Record<...> = { content };
+      const logoSizesPattern = /export const logoSizes:\s*Record<string,\s*\{[^}]+\}>\s*=\s*\{([\s\S]*?)\};/;
+      const sizesMatch = fileContent.match(logoSizesPattern);
+      
+      if (sizesMatch) {
+        // Update existing logoSizes
+        const existingSizes = sizesMatch[1];
+        const brandSizePattern = new RegExp(`${brandId}:\\s*\\{[^}]*\\}`, "g");
+        
+        if (reset) {
+          // Remove brand size if reset
+          let newSizesContent = existingSizes;
+          if (brandSizePattern.test(existingSizes)) {
+            newSizesContent = existingSizes.replace(brandSizePattern, "");
+            // Clean up trailing commas/newlines
+            newSizesContent = newSizesContent.replace(/,\s*,/g, ",").replace(/,\s*$/, "");
+          }
+          const newLogoSizesBlock = `export const logoSizes: Record<string, { width?: number; height?: number; scale?: number }> = {${newSizesContent}\n};`;
+          fileContent = fileContent.replace(logoSizesPattern, newLogoSizesBlock);
+        } else {
+          // Update/Add brand size
+          const newBrandSize = `${brandId}: ${JSON.stringify(sizeConfig)}`;
+          
+          let newSizesContent: string;
+          if (brandSizePattern.test(existingSizes)) {
+            // Replace existing brand size
+            newSizesContent = existingSizes.replace(
+              new RegExp(`${brandId}:\\s*\\{[^}]*\\}`, "g"),
+              newBrandSize
+            );
+          } else {
+            // Add new brand size
+            const trimmedExisting = existingSizes.trim();
+            newSizesContent = trimmedExisting
+              ? `${trimmedExisting.replace(/,?\s*$/, "")},\n  ${newBrandSize}`
+              : `\n  ${newBrandSize}`;
+          }
+          
+          const newLogoSizesBlock = `export const logoSizes: Record<string, { width?: number; height?: number; scale?: number }> = {${newSizesContent}\n};`;
+          fileContent = fileContent.replace(logoSizesPattern, newLogoSizesBlock);
+        }
+      } else if (!reset) {
+        // Create new logoSizes object (doesn't exist yet)
+        const newLogoSizesBlock = `\n// Logo dimension overrides\nexport const logoSizes: Record<string, { width?: number; height?: number; scale?: number }> = {\n  ${brandId}: ${JSON.stringify(sizeConfig)}\n};\n`;
+        
+        // Add after brandLogos definition
+        const brandLogosEndPattern = /export const brandLogos[^;]+;/s;
+        const brandLogosMatch = fileContent.match(brandLogosEndPattern);
+        if (brandLogosMatch) {
+          fileContent = fileContent.replace(brandLogosEndPattern, `${brandLogosMatch[0]}${newLogoSizesBlock}`);
+        } else {
+          // Fallback: append to end of file
+          fileContent += newLogoSizesBlock;
+        }
+      }
+      
+      if (!reset) {
+        updated.dimensions = sizeConfig;
+      }
+    }
+
+    // Write the updated brand-system.ts file
+    fs.writeFileSync(brandSystemPath, fileContent, "utf-8");
+
+    // Also update the CSS overrides file for production builds
+    const brandOverridesPath = path.join(projectRoot, "src", "styles", "brand-overrides.css");
+    updateBrandOverridesCss(brandOverridesPath, brandId, { width, height, scale }, selector, reset);
+
+    const targetDescription = selector || brandId;
+    return NextResponse.json({
+      success: true,
+      message: `Logo configuration for ${targetDescription} saved successfully`,
+      updated: { ...updated, selector, reset },
+    });
+  } catch (error) {
+    console.error("Error saving logo configuration:", error);
+    return NextResponse.json(
+      { error: "Failed to save logo configuration", details: String(error) },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET() {
+  // Security: Only allow in development
+  if (process.env.NODE_ENV !== "development") {
+    return NextResponse.json(
+      { error: "This endpoint is only available in development mode." },
+      { status: 403 }
+    );
+  }
+
+  try {
+    const projectRoot = process.cwd();
+    const brandSystemPath = path.join(projectRoot, "src", "lib", "brand-system.ts");
+
+    if (!fs.existsSync(brandSystemPath)) {
+      return NextResponse.json({ exists: false });
+    }
+
+    // Read and parse the brandLogos from the file
+    const fileContent = fs.readFileSync(brandSystemPath, "utf-8");
+    
+    // Extract brandLogos object using regex
+    const brandLogosMatch = fileContent.match(/export const brandLogos[^{]*{([^}]+(?:{[^}]*}[^}]*)*)}/s);
+    
+    if (!brandLogosMatch) {
+      return NextResponse.json({ exists: true, parsed: false });
+    }
+
+    // Parse individual brand configurations
+    const brands: Record<string, { light: string; dark: string; alt: string }> = {};
+    const brandPattern = /(\w+):\s*{\s*light:\s*['"]([^'"]+)['"],?\s*dark:\s*['"]([^'"]+)['"],?\s*alt:\s*['"]([^'"]+)['"]/g;
+    
+    let match;
+    while ((match = brandPattern.exec(brandLogosMatch[0])) !== null) {
+      brands[match[1]] = {
+        light: match[2],
+        dark: match[3],
+        alt: match[4],
+      };
+    }
+
+    return NextResponse.json({ 
+      exists: true, 
+      parsed: true,
+      brands,
+    });
+  } catch (error) {
+    console.error("Error reading logo configuration:", error);
+    return NextResponse.json(
+      { error: "Failed to read logo configuration", details: String(error) },
+      { status: 500 }
+    );
+  }
+}
+

package/dist/assets/api/sonance-theme/route.ts

@@ -0,0 +1,106 @@
+import { NextResponse } from "next/server";
+import * as fs from "fs";
+import * as path from "path";
+
+/**
+ * Sonance DevTools API - Save Theme
+ * 
+ * This endpoint is DEVELOPMENT ONLY.
+ * It writes theme configuration to disk so changes persist.
+ */
+
+export async function POST(request: Request) {
+  // Security: Only allow in development
+  if (process.env.NODE_ENV !== "development") {
+    return NextResponse.json(
+      { error: "This endpoint is only available in development mode." },
+      { status: 403 }
+    );
+  }
+
+  try {
+    const body = await request.json();
+    const { css, config } = body;
+
+    if (!css || !config) {
+      return NextResponse.json(
+        { error: "Missing required fields: css and config" },
+        { status: 400 }
+      );
+    }
+
+    // Resolve paths relative to project root
+    const projectRoot = process.cwd();
+    const themeDir = path.join(projectRoot, "src", "theme");
+
+    // Ensure theme directory exists
+    if (!fs.existsSync(themeDir)) {
+      fs.mkdirSync(themeDir, { recursive: true });
+    }
+
+    // Write CSS file
+    const cssPath = path.join(themeDir, "sonance-theme.css");
+    const cssContent = `/**
+ * Sonance Theme - Auto-generated by DevTools
+ * Do not edit manually - use the DevTools plugin to make changes.
+ * 
+ * Generated: ${new Date().toISOString()}
+ */
+
+:root {
+${css}
+}
+`;
+    fs.writeFileSync(cssPath, cssContent, "utf-8");
+
+    // Write JSON config file
+    const configPath = path.join(themeDir, "sonance-config.json");
+    fs.writeFileSync(configPath, JSON.stringify(config, null, 2), "utf-8");
+
+    return NextResponse.json({
+      success: true,
+      message: "Theme saved successfully",
+      files: {
+        css: "src/theme/sonance-theme.css",
+        config: "src/theme/sonance-config.json",
+      },
+    });
+  } catch (error) {
+    console.error("Error saving theme:", error);
+    return NextResponse.json(
+      { error: "Failed to save theme", details: String(error) },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET() {
+  // Security: Only allow in development
+  if (process.env.NODE_ENV !== "development") {
+    return NextResponse.json(
+      { error: "This endpoint is only available in development mode." },
+      { status: 403 }
+    );
+  }
+
+  try {
+    const projectRoot = process.cwd();
+    const configPath = path.join(projectRoot, "src", "theme", "sonance-config.json");
+
+    if (!fs.existsSync(configPath)) {
+      return NextResponse.json({ config: null, exists: false });
+    }
+
+    const configContent = fs.readFileSync(configPath, "utf-8");
+    const config = JSON.parse(configContent);
+
+    return NextResponse.json({ config, exists: true });
+  } catch (error) {
+    console.error("Error reading theme:", error);
+    return NextResponse.json(
+      { error: "Failed to read theme", details: String(error) },
+      { status: 500 }
+    );
+  }
+}
+