sonance-brand-mcp 1.3.73 → 1.3.74

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

@@ -271,6 +271,12 @@ export function SonanceDevTools() {
         // Check if session is recent (< 1 hour old)
         const MAX_SESSION_AGE = 60 * 60 * 1000; // 1 hour
         if (session.timestamp && Date.now() - session.timestamp < MAX_SESSION_AGE) {
+          // Validate session has actual modifications
+          if (!session.modifications || session.modifications.length === 0) {
+            console.log("[Apply-First] Session has no modifications, auto-clearing:", session.sessionId);
+            localStorage.removeItem("sonance-apply-first-session");
+            return;
+          }
           console.log("[Apply-First] Restoring session from localStorage:", session.sessionId);
           setApplyFirstSession(session);
           setApplyFirstStatus("reviewing");

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

@@ -1,176 +1,10 @@
 "use client";
 
-import React, { useState, useEffect, useCallback } from "react";
-import { X, Zap, Loader2, Check, ChevronDown, ChevronRight, FileCode, AlertTriangle, Info, Eye, EyeOff } from "lucide-react";
+import React, { useState, useEffect } from "react";
+import { X, Zap, Loader2, Check, ChevronDown, ChevronRight, FileCode, AlertTriangle, Info } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { ApplyFirstSession, ApplyFirstStatus, VisionFileModification } from "../types";
 
-// CSS Injection Preview ID
-const PREVIEW_STYLE_ID = "sonance-preview-css";
-
-/**
- * Extract className changes from a diff
- * Returns: { removed: string[], added: string[] }
- */
-function extractClassNameChanges(diff: string): { removed: string[]; added: string[] } {
-  const removed: string[] = [];
-  const added: string[] = [];
-  
-  // Regex to find className="..." patterns
-  const classNameRegex = /className=["']([^"']+)["']/g;
-  
-  const lines = diff.split("\n");
-  for (const line of lines) {
-    if (line.startsWith("-") && !line.startsWith("---")) {
-      // Removed line - extract className
-      let match;
-      while ((match = classNameRegex.exec(line)) !== null) {
-        removed.push(...match[1].split(/\s+/));
-      }
-    } else if (line.startsWith("+") && !line.startsWith("+++")) {
-      // Added line - extract className
-      let match;
-      while ((match = classNameRegex.exec(line)) !== null) {
-        added.push(...match[1].split(/\s+/));
-      }
-    }
-  }
-  
-  return { removed, added };
-}
-
-/**
- * Common Tailwind class to CSS mapping for preview
- * Covers styling classes for instant visual feedback
- */
-const TAILWIND_TO_CSS: Record<string, string> = {
-  // 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;",
-  "text-sonance-blue": "color: #00D3C8 !important;",
-  "border-sonance-charcoal": "border-color: #333F48 !important;",
-  "border-sonance-blue": "border-color: #00D3C8 !important;",
-  "bg-sonance-charcoal": "background-color: #333F48 !important;",
-  "bg-sonance-blue": "background-color: #00D3C8 !important;",
-  
-  // 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;",
-};
-
-/**
- * Generate CSS for preview based on class changes
- */
-function generatePreviewCSS(modifications: VisionFileModification[]): string {
-  const cssRules: string[] = [];
-  
-  for (const mod of modifications) {
-    const { added } = extractClassNameChanges(mod.diff);
-    
-    // Generate CSS for added classes
-    for (const cls of added) {
-      if (TAILWIND_TO_CSS[cls]) {
-        // We can't know the exact selector, so we apply to elements with data-sonance-preview
-        cssRules.push(TAILWIND_TO_CSS[cls]);
-      }
-    }
-  }
-  
-  if (cssRules.length === 0) return "";
-  
-  // Apply to changed elements (marked by InspectorOverlay)
-  return `
-    [data-sonance-changed="true"] {
-      ${cssRules.join("\n      ")}
-      outline: 2px dashed #00D3C8 !important;
-      outline-offset: 2px !important;
-    }
-  `;
-}
-
-/**
- * Inject preview CSS into the document
- */
-function injectPreviewCSS(css: string): void {
-  // Remove existing preview styles first
-  removePreviewCSS();
-  
-  if (!css.trim()) return;
-  
-  const style = document.createElement("style");
-  style.id = PREVIEW_STYLE_ID;
-  style.textContent = css;
-  document.head.appendChild(style);
-  
-  console.log("[Preview CSS] Injected:", css.substring(0, 200));
-}
-
-/**
- * Remove preview CSS from the document
- */
-function removePreviewCSS(): void {
-  const existing = document.getElementById(PREVIEW_STYLE_ID);
-  if (existing) {
-    existing.remove();
-    console.log("[Preview CSS] Removed");
-  }
-}
-
 export interface ApplyFirstPreviewProps {
   session: ApplyFirstSession;
   status: ApplyFirstStatus;
@@ -260,15 +94,6 @@ function HMRStatusBadge({ status }: { status: ApplyFirstStatus }) {
     );
   }
   
-  if (status === "previewing") {
-    return (
-      <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-700">
-        <Eye className="h-3 w-3" />
-        Preview Mode
-      </span>
-    );
-  }
-
   return null;
 }
 
@@ -281,7 +106,6 @@ export function ApplyFirstPreview({
   onApplyPreview,
 }: ApplyFirstPreviewProps) {
   const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
-  const [cssPreviewEnabled, setCssPreviewEnabled] = useState(true);
 
   // Expand first file by default
   useEffect(() => {
@@ -289,31 +113,6 @@ export function ApplyFirstPreview({
       setExpandedFiles(new Set([session.modifications[0].filePath]));
     }
   }, [session]);
-  
-  // CSS Preview injection for ALL modes (preview AND applied)
-  // This ensures the user can always see visual changes immediately
-  useEffect(() => {
-    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 disabled
-      removePreviewCSS();
-    }
-    
-    // Cleanup on unmount
-    return () => {
-      removePreviewCSS();
-    };
-  }, [session, cssPreviewEnabled]);
-  
-  // Toggle CSS preview
-  const toggleCssPreview = useCallback(() => {
-    setCssPreviewEnabled(prev => !prev);
-  }, []);
 
   const toggleFile = (filePath: string) => {
     setExpandedFiles((prev) => {
@@ -356,20 +155,6 @@ export function ApplyFirstPreview({
           </span>
         </div>
         <div className="flex items-center gap-2">
-          {/* 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.73",
+  "version": "1.3.74",
   "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",