sonance-brand-mcp 1.3.6 → 1.3.7

package/dist/assets/brand-context.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from "react";
+import { BrandId, brandPresets, applyThemeToDOM } from "./brand-system";
+
+// ============================================
+// BRAND CONTEXT
+// Global state for the currently selected brand
+// ============================================
+
+const STORAGE_KEY = "sonance-devtools-brand";
+
+interface BrandContextValue {
+  currentBrand: BrandId;
+  setBrand: (brand: BrandId) => void;
+}
+
+const BrandContext = createContext<BrandContextValue | null>(null);
+
+export function BrandProvider({ children }: { children: ReactNode }) {
+  const [currentBrand, setCurrentBrand] = useState<BrandId>("sonance");
+  const [mounted, setMounted] = useState(false);
+
+  // Load persisted brand from localStorage on mount
+  useEffect(() => {
+    setMounted(true);
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && (stored === "sonance" || stored === "iport" || stored === "blaze")) {
+      setCurrentBrand(stored as BrandId);
+      // Apply the theme when restoring from localStorage
+      const preset = brandPresets.find((p) => p.id === stored);
+      if (preset) {
+        applyThemeToDOM(preset.config);
+      }
+    }
+  }, []);
+
+  const setBrand = useCallback((brand: BrandId) => {
+    setCurrentBrand(brand);
+    localStorage.setItem(STORAGE_KEY, brand);
+  }, []);
+
+  // Don't render children until mounted to prevent hydration mismatch
+  if (!mounted) {
+    return <>{children}</>;
+  }
+
+  return (
+    <BrandContext.Provider value={{ currentBrand, setBrand }}>
+      {children}
+    </BrandContext.Provider>
+  );
+}
+
+export function useBrand(): BrandContextValue {
+  const context = useContext(BrandContext);
+  if (!context) {
+    // Return default values if not within provider (for SSR/initial render)
+    return {
+      currentBrand: "sonance",
+      setBrand: () => {},
+    };
+  }
+  return context;
+}

package/dist/assets/dev-tools/SonanceDevTools.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
 import { Palette, X, Copy, Check, RotateCcw, ChevronDown, Save, Loader2, AlertCircle, CheckCircle, Sun, Moon, Eye, EyeOff, Zap, Image as ImageIcon, Wand2, Scan, FileCode, Tag, Type, MousePointer, FormInput, Box } from "lucide-react";
 import { useTheme } from "next-themes";
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 import {
   ThemeConfig,
   BrandId,
@@ -17,8 +17,8 @@ import {
   generateThemeCSS,
   componentSnippets,
   isLightColor,
-} from "@/lib/brand-system";
-import { useBrand } from "@/lib/brand-context";
+} from "../../lib/brand-system";
+import { useBrand } from "../../lib/brand-context";
 
 // ============================================
 // SONANCE DEVTOOLS

package/dist/index.js

@@ -313,6 +313,7 @@ function runDevToolsInstaller() {
     const themeDir = path.join(targetDir, "src/theme");
     // Source resolution
     let sourceBrandSystem;
+    let sourceBrandContext;
     let sourceDevTools;
     let sourceBrandOverridesCss;
     let sourceApiTheme;
@@ -323,6 +324,7 @@ function runDevToolsInstaller() {
     let sourceApiAnalyze;
     if (IS_BUNDLED) {
         sourceBrandSystem = path.join(BUNDLED_ASSETS, "brand-system.ts");
+        sourceBrandContext = path.join(BUNDLED_ASSETS, "brand-context.tsx");
         sourceDevTools = path.join(BUNDLED_ASSETS, "dev-tools");
         sourceBrandOverridesCss = path.join(BUNDLED_ASSETS, "styles/brand-overrides.css");
         sourceApiTheme = path.join(BUNDLED_ASSETS, "api/sonance-theme/route.ts");
@@ -334,6 +336,7 @@ function runDevToolsInstaller() {
     }
     else {
         sourceBrandSystem = path.join(DEV_PROJECT_ROOT, "src/lib/brand-system.ts");
+        sourceBrandContext = path.join(DEV_PROJECT_ROOT, "src/lib/brand-context.tsx");
         sourceDevTools = path.join(DEV_PROJECT_ROOT, "src/components/dev-tools");
         sourceBrandOverridesCss = path.join(DEV_PROJECT_ROOT, "src/styles/brand-overrides.css");
         sourceApiTheme = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-theme/route.ts");
@@ -349,6 +352,11 @@ function runDevToolsInstaller() {
         console.error(`     Path: ${sourceBrandSystem}`);
         process.exit(1);
     }
+    if (!fs.existsSync(sourceBrandContext)) {
+        console.error("  ❌ Error: Could not find brand-context.tsx source file.");
+        console.error(`     Path: ${sourceBrandContext}`);
+        process.exit(1);
+    }
     if (!fs.existsSync(sourceDevTools)) {
         console.error("  ❌ Error: Could not find dev-tools source directory.");
         console.error(`     Path: ${sourceDevTools}`);
@@ -390,12 +398,14 @@ function runDevToolsInstaller() {
         process.exit(1);
     }
     console.log("  📂 Installing files...");
-    // 1. Install brand-system.ts
+    // 1. Install brand-system.ts and brand-context.tsx
     if (!fs.existsSync(libDir)) {
         fs.mkdirSync(libDir, { recursive: true });
     }
     fs.copyFileSync(sourceBrandSystem, path.join(libDir, "brand-system.ts"));
     console.log("  ✓ Created src/lib/brand-system.ts");
+    fs.copyFileSync(sourceBrandContext, path.join(libDir, "brand-context.tsx"));
+    console.log("  ✓ Created src/lib/brand-context.tsx");
     // 2. Install DevTools components
     if (!fs.existsSync(devToolsDir)) {
         fs.mkdirSync(devToolsDir, { recursive: true });
@@ -702,7 +712,8 @@ function runDevToolsUninstaller() {
         "src/app/api/sonance-assets",
         "src/app/api/sonance-inject-id",
         "src/app/api/sonance-analyze",
-        "src/lib/brand-system.ts"
+        "src/lib/brand-system.ts",
+        "src/lib/brand-context.tsx"
     ];
     for (const item of itemsToDelete) {
         const fullPath = path.join(targetDir, item);

package/package.json

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