sonance-brand-mcp 1.3.70 → 1.3.71

package/dist/assets/dev-tools/components/ApplyFirstPreview.tsx

@@ -41,15 +41,18 @@ function extractClassNameChanges(diff: string): { removed: string[]; added: stri
 
 /**
  * Common Tailwind class to CSS mapping for preview
- * Only covers the most common styling classes for quick previews
+ * Covers styling classes for instant visual feedback
  */
 const TAILWIND_TO_CSS: Record<string, string> = {
-  // Text colors
+  // Text colors - basic
   "text-white": "color: white !important;",
   "text-black": "color: black !important;",
   "text-gray-900": "color: rgb(17, 24, 39) !important;",
+  "text-gray-800": "color: rgb(31, 41, 55) !important;",
   "text-gray-700": "color: rgb(55, 65, 81) !important;",
+  "text-gray-600": "color: rgb(75, 85, 99) !important;",
   "text-gray-500": "color: rgb(107, 114, 128) !important;",
+  "text-gray-400": "color: rgb(156, 163, 175) !important;",
   
   // Sonance brand colors
   "text-sonance-charcoal": "color: #333F48 !important;",
@@ -59,23 +62,55 @@ const TAILWIND_TO_CSS: Record<string, string> = {
   "bg-sonance-charcoal": "background-color: #333F48 !important;",
   "bg-sonance-blue": "background-color: #00D3C8 !important;",
   
-  // Semantic colors
+  // Semantic text colors
   "text-primary": "color: var(--primary) !important;",
   "text-primary-foreground": "color: var(--primary-foreground) !important;",
+  "text-secondary": "color: var(--secondary) !important;",
+  "text-secondary-foreground": "color: var(--secondary-foreground) !important;",
   "text-accent": "color: var(--accent) !important;",
   "text-accent-foreground": "color: var(--accent-foreground) !important;",
+  "text-foreground": "color: var(--foreground) !important;",
+  "text-muted": "color: var(--muted) !important;",
+  "text-muted-foreground": "color: var(--muted-foreground) !important;",
+  "text-destructive": "color: var(--destructive) !important;",
+  "text-destructive-foreground": "color: var(--destructive-foreground) !important;",
+  
+  // Semantic backgrounds
   "bg-primary": "background-color: hsl(var(--primary)) !important;",
+  "bg-secondary": "background-color: hsl(var(--secondary)) !important;",
   "bg-accent": "background-color: hsl(var(--accent)) !important;",
+  "bg-muted": "background-color: hsl(var(--muted)) !important;",
+  "bg-destructive": "background-color: hsl(var(--destructive)) !important;",
+  "bg-success": "background-color: var(--success) !important;",
+  "bg-card": "background-color: hsl(var(--card)) !important;",
+  "bg-background": "background-color: hsl(var(--background)) !important;",
   
   // Common backgrounds
   "bg-white": "background-color: white !important;",
   "bg-black": "background-color: black !important;",
+  "bg-gray-50": "background-color: rgb(249, 250, 251) !important;",
   "bg-gray-100": "background-color: rgb(243, 244, 246) !important;",
   "bg-gray-200": "background-color: rgb(229, 231, 235) !important;",
+  "bg-gray-300": "background-color: rgb(209, 213, 219) !important;",
+  "bg-gray-800": "background-color: rgb(31, 41, 55) !important;",
+  "bg-gray-900": "background-color: rgb(17, 24, 39) !important;",
+  
+  // Status colors
+  "bg-green-500": "background-color: rgb(34, 197, 94) !important;",
+  "bg-green-600": "background-color: rgb(22, 163, 74) !important;",
+  "bg-blue-500": "background-color: rgb(59, 130, 246) !important;",
+  "bg-blue-600": "background-color: rgb(37, 99, 235) !important;",
+  "bg-red-500": "background-color: rgb(239, 68, 68) !important;",
+  "bg-red-600": "background-color: rgb(220, 38, 38) !important;",
+  "bg-yellow-500": "background-color: rgb(234, 179, 8) !important;",
+  "bg-orange-500": "background-color: rgb(249, 115, 22) !important;",
   
   // Borders
   "border-gray-200": "border-color: rgb(229, 231, 235) !important;",
   "border-gray-300": "border-color: rgb(209, 213, 219) !important;",
+  "border-primary": "border-color: hsl(var(--primary)) !important;",
+  "border-accent": "border-color: hsl(var(--accent)) !important;",
+  "border-destructive": "border-color: hsl(var(--destructive)) !important;",
 };
 
 /**
@@ -255,18 +290,17 @@ export function ApplyFirstPreview({
     }
   }, [session]);
   
-  // CSS Preview injection for preview mode
+  // CSS Preview injection for ALL modes (preview AND applied)
+  // This ensures the user can always see visual changes immediately
   useEffect(() => {
-    const isPreviewMode = session.isPreview === true;
-    
-    if (isPreviewMode && cssPreviewEnabled) {
-      // Generate and inject preview CSS
+    if (cssPreviewEnabled && session.modifications.length > 0) {
+      // Generate and inject preview CSS to show visual changes immediately
       const previewCSS = generatePreviewCSS(session.modifications);
       if (previewCSS) {
         injectPreviewCSS(previewCSS);
       }
     } else {
-      // Remove preview CSS when not in preview mode or disabled
+      // Remove preview CSS when disabled
       removePreviewCSS();
     }
     
@@ -322,22 +356,20 @@ export function ApplyFirstPreview({
           </span>
         </div>
         <div className="flex items-center gap-2">
-          {/* CSS Preview Toggle (only in preview mode) */}
-          {isPreviewMode && (
-            <button
-              onClick={toggleCssPreview}
-              className={cn(
-                "flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded transition-colors",
-                cssPreviewEnabled
-                  ? "bg-blue-200 text-blue-700"
-                  : "bg-gray-200 text-gray-500"
-              )}
-              title={cssPreviewEnabled ? "Hide CSS preview" : "Show CSS preview"}
-            >
-              {cssPreviewEnabled ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
-              CSS
-            </button>
-          )}
+          {/* CSS Preview Toggle - show for all modes to ensure visual changes are visible */}
+          <button
+            onClick={toggleCssPreview}
+            className={cn(
+              "flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded transition-colors",
+              cssPreviewEnabled
+                ? isPreviewMode ? "bg-blue-200 text-blue-700" : "bg-green-200 text-green-700"
+                : "bg-gray-200 text-gray-500"
+            )}
+            title={cssPreviewEnabled ? "Hide visual preview" : "Show visual preview"}
+          >
+            {cssPreviewEnabled ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
+            Preview
+          </button>
           <HMRStatusBadge status={status} />
         </div>
       </div>

package/package.json

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