sonance-brand-mcp 1.3.14 → 1.3.16

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

@@ -0,0 +1,190 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { X, Sparkles, Eye, Loader2, Save, RefreshCw } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { PendingEdit } from "../types";
+import { removePreviewStyles, injectPreviewStyles, extractPreviewCSSFromCode } from "../utils";
+
+export interface DiffPreviewProps {
+  pendingEdit: PendingEdit;
+  componentType: string;
+  onSave: () => void;
+  onCancel: () => void;
+  onPreviewToggle: (isActive: boolean) => void;
+  isPreviewActive: boolean;
+  saveStatus: "idle" | "saving" | "success" | "error";
+  saveMessage: string;
+  // Variant ID for targeted preview (applies styles to specific variant instances)
+  variantId?: string | null;
+}
+
+export function DiffPreview({
+  pendingEdit,
+  componentType,
+  onSave,
+  onCancel,
+  onPreviewToggle,
+  isPreviewActive,
+  saveStatus,
+  saveMessage,
+  variantId,
+}: DiffPreviewProps) {
+  // Track if we've auto-activated preview for this edit
+  const hasAutoActivated = useRef(false);
+
+  // Auto-activate preview when component mounts or pendingEdit changes
+  useEffect(() => {
+    if (!hasAutoActivated.current && pendingEdit) {
+      // First try AI-provided previewCSS (most reliable - AI knows exactly what it changed)
+      // Fall back to extraction if AI didn't provide previewCSS
+      let previewCSS = pendingEdit.previewCSS;
+      
+      if (!previewCSS) {
+        // Fallback: try to extract CSS from code changes
+        previewCSS = extractPreviewCSSFromCode(
+          pendingEdit.originalCode,
+          pendingEdit.modifiedCode,
+          componentType,
+          variantId
+        );
+      }
+      
+      if (previewCSS) {
+        injectPreviewStyles(previewCSS);
+        onPreviewToggle(true);
+      }
+      hasAutoActivated.current = true;
+    }
+  }, [pendingEdit, componentType, variantId, onPreviewToggle]);
+
+  // Reset auto-activation flag when pendingEdit changes (new edit)
+  useEffect(() => {
+    hasAutoActivated.current = false;
+  }, [pendingEdit.modifiedCode]);
+
+  // Cleanup preview on unmount or cancel
+  useEffect(() => {
+    return () => {
+      removePreviewStyles();
+    };
+  }, []);
+
+  return (
+    <div className="space-y-3 p-3 rounded border border-[#00A3E1]/30 bg-[#00A3E1]/5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Sparkles className="h-4 w-4 text-[#00A3E1]" />
+          <span id="diff-preview-span-ai-changes-ready" className="text-xs font-semibold text-gray-900">AI Changes Ready</span>
+        </div>
+        <button
+          onClick={onCancel}
+          className="text-gray-400 hover:text-gray-600"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+
+      {/* Explanation */}
+      <p id="diff-preview-p-pendingeditexplanati" className="text-xs text-gray-600">{pendingEdit.explanation}</p>
+
+      {/* Diff Display */}
+      <div className="max-h-40 overflow-auto rounded border border-gray-200 bg-white">
+        <pre className="p-2 text-[10px] font-mono whitespace-pre-wrap">
+          {pendingEdit.diff.split("\n").map((line, i) => (
+            <div
+              key={i}
+              className={cn(
+                line.startsWith("+") && !line.startsWith("@@")
+                  ? "bg-green-50 text-green-700"
+                  : line.startsWith("-") && !line.startsWith("@@")
+                  ? "bg-red-50 text-red-700"
+                  : line.startsWith("@@")
+                  ? "bg-blue-50 text-blue-600 font-semibold"
+                  : "text-gray-600"
+              )}
+            >
+              {line}
+            </div>
+          ))}
+        </pre>
+      </div>
+
+      {/* File Path */}
+      <div className="text-[10px] text-gray-400">
+        File: {pendingEdit.filePath}
+      </div>
+
+      {/* Live Preview Indicator */}
+      <div className="flex items-center gap-2 p-2 rounded bg-[#00A3E1]/10 border border-[#00A3E1]/30">
+        <Eye className="h-3.5 w-3.5 text-[#00A3E1]" />
+        <span className="text-xs text-[#00A3E1]">
+          Live preview active - scroll to see changes on the page
+        </span>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex gap-2">
+        {/* Save Button */}
+        <button
+          onClick={onSave}
+          disabled={saveStatus === "saving"}
+          className={cn(
+            "flex-1 flex items-center justify-center gap-2 py-2",
+            "text-xs font-medium rounded transition-colors",
+            "bg-[#333F48] text-white hover:bg-[#2a343c]",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          )}
+        >
+          {saveStatus === "saving" ? (
+            <>
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              Saving...
+            </>
+          ) : (
+            <>
+              <Save className="h-3.5 w-3.5" />
+              Save to File
+            </>
+          )}
+        </button>
+        {/* Cancel Button */}
+        <button
+          onClick={onCancel}
+          disabled={saveStatus === "saving"}
+          className={cn(
+            "px-4 py-2 text-xs font-medium rounded transition-colors",
+            "border border-gray-200 text-gray-600 hover:bg-gray-50",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          )}
+        >
+          Cancel
+        </button>
+      </div>
+
+      {/* Save Status Message */}
+      {saveMessage && (
+        <div
+          className={cn(
+            "p-2 rounded text-xs",
+            saveStatus === "success" && "bg-green-50 text-green-700 border border-green-200",
+            saveStatus === "error" && "bg-red-50 text-red-700 border border-red-200"
+          )}
+        >
+          {saveMessage}
+        </div>
+      )}
+
+      {/* Success: Refresh Hint */}
+      {saveStatus === "success" && (
+        <div className="flex items-center gap-2 p-2 rounded bg-amber-50 border border-amber-200">
+          <RefreshCw className="h-3.5 w-3.5 text-amber-600" />
+          <span id="diff-preview-span-refresh-the-page-to-" className="text-xs text-amber-700">
+            Refresh the page to see your changes
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,353 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { Box, Image as ImageIcon, Type, MousePointer, Sparkles, Eye, Check } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { DetectedElement, DetectedElementType, VisionFocusedElement } from "../types";
+
+export interface InspectorOverlayProps {
+  elements: DetectedElement[];
+  selectedLogoId?: string | null;
+  onLogoClick?: (logoId: string) => void;
+  selectedTextId?: string | null;
+  onTextClick?: (textId: string) => void;
+  interactive?: boolean;
+  selectedComponentId?: string | null;
+  onComponentClick?: (componentName: string) => void;
+  componentSelectionMode?: boolean;
+  // New: For inspector-first workflow - called when any component is clicked
+  onSelectComponentAndClose?: (componentType: string, variantId?: string) => void;
+  inspectorClickMode?: boolean; // When true, all components are clickable
+  // The currently selected component type (for visual highlighting)
+  selectedComponentType?: string;
+  // The currently selected component variant ID (for scoped highlighting)
+  selectedVariantId?: string | null;
+  // Current edit scope
+  componentScope?: "all" | "variant" | "page" | "selected";
+  // Preview mode - when AI changes are pending, shows green highlights
+  previewMode?: boolean;
+  // Vision mode props
+  visionMode?: boolean;
+  visionFocusedElements?: VisionFocusedElement[];
+  onVisionElementClick?: (element: DetectedElement) => void;
+  // Changed elements - elements that were modified, shown with green highlight until accept/revert
+  changedElements?: VisionFocusedElement[];
+}
+
+// Color config for different element types
+const inspectorColors: Record<DetectedElementType, { border: string; bg: string; selectedBorder: string; selectedBg: string }> = {
+  component: { border: "#00A3E1", bg: "#00A3E1", selectedBorder: "#00A3E1", selectedBg: "#00A3E1" }, // Sonance blue
+  logo: { border: "#FC4C02", bg: "#FC4C02", selectedBorder: "#C02B0A", selectedBg: "#C02B0A" },       // IPORT orange / Blaze red for selected
+  text: { border: "#8B5CF6", bg: "#8B5CF6", selectedBorder: "#7C3AED", selectedBg: "#7C3AED" },       // Purple for text
+};
+
+// Preview mode colors - green to indicate pending changes
+const previewColors = {
+  border: "#22C55E", // Green-500
+  bg: "#22C55E",
+  selectedBorder: "#16A34A", // Green-600
+  selectedBg: "#16A34A",
+};
+
+// Vision mode colors - purple for AI vision analysis
+const visionColors = {
+  border: "#8B5CF6", // Purple-600
+  bg: "#8B5CF6",
+  selectedBorder: "#7C3AED", // Purple-700 (focused elements)
+  selectedBg: "#7C3AED",
+};
+
+export function InspectorOverlay({
+  elements,
+  selectedLogoId,
+  onLogoClick,
+  selectedTextId,
+  onTextClick,
+  interactive = false,
+  selectedComponentId,
+  onComponentClick,
+  componentSelectionMode = false,
+  onSelectComponentAndClose,
+  inspectorClickMode = false,
+  selectedComponentType = "all",
+  selectedVariantId,
+  componentScope,
+  previewMode = false,
+  visionMode = false,
+  visionFocusedElements = [],
+  onVisionElementClick,
+  changedElements = [],
+}: InspectorOverlayProps) {
+  // Use document-level click listener for selection (doesn't block scroll)
+  // Disabled in preview mode - user should save or cancel, not select new elements
+  useEffect(() => {
+    if (previewMode) return; // No interaction in preview mode
+    if (!inspectorClickMode && !componentSelectionMode && !interactive && !visionMode) return;
+
+    const handleDocumentClick = (e: MouseEvent) => {
+      const clickX = e.clientX;
+      const clickY = e.clientY;
+
+      // Don't capture clicks on the DevTools panel itself
+      const devToolsPanel = document.querySelector('[data-sonance-devtools="true"]');
+      if (devToolsPanel?.contains(e.target as Node)) return;
+
+      // Find ALL elements that contain the click point
+      const matchingElements = elements.filter(el =>
+        clickX >= el.rect.left &&
+        clickX <= el.rect.left + el.rect.width &&
+        clickY >= el.rect.top &&
+        clickY <= el.rect.top + el.rect.height
+      );
+
+      // Sort by area (smallest first) - smaller elements are more specific
+      // This ensures clicking on a nested element picks that element, not its parent
+      matchingElements.sort((a, b) => {
+        const areaA = a.rect.width * a.rect.height;
+        const areaB = b.rect.width * b.rect.height;
+        return areaA - areaB;
+      });
+
+      // Process the most specific (smallest) matching element
+      for (const el of matchingElements) {
+        // Vision mode takes priority - clicking elements adds/removes from focused list
+        if (visionMode && onVisionElementClick) {
+          e.preventDefault();
+          e.stopPropagation();
+          onVisionElementClick(el);
+          return;
+        } else if (interactive && el.type === "logo" && el.logoId && onLogoClick) {
+          e.preventDefault();
+          e.stopPropagation();
+          onLogoClick(el.logoId);
+          return;
+        } else if (interactive && el.type === "text" && el.textId && onTextClick) {
+          e.preventDefault();
+          e.stopPropagation();
+          onTextClick(el.textId);
+          return;
+        } else if (inspectorClickMode && el.type === "component" && onSelectComponentAndClose) {
+          e.preventDefault();
+          e.stopPropagation();
+          let componentType = el.name.toLowerCase();
+          if (componentType === "button") {
+            componentType = "button-primary";
+          }
+          onSelectComponentAndClose(componentType, el.variantId);
+          return;
+        } else if (componentSelectionMode && el.type === "component" && onComponentClick) {
+          e.preventDefault();
+          e.stopPropagation();
+          onComponentClick(el.name);
+          return;
+        }
+      }
+    };
+
+    // Use capture phase to intercept before other handlers
+    document.addEventListener("click", handleDocumentClick, true);
+    return () => document.removeEventListener("click", handleDocumentClick, true);
+  }, [elements, inspectorClickMode, componentSelectionMode, interactive, onLogoClick, onTextClick, onSelectComponentAndClose, onComponentClick, previewMode, visionMode, onVisionElementClick]);
+
+  return (
+    <div
+      style={{ 
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+        zIndex: 9997,
+        overflow: "visible",
+        pointerEvents: "none",
+        touchAction: "auto", // Ensure touch scrolling works
+      }}
+    >
+      {/* Visual overlays only - no pointer events, scroll works naturally */}
+      {elements.map((el, index) => {
+        const isLogoSelected = el.type === "logo" && el.logoId === selectedLogoId;
+        const isTextSelected = el.type === "text" && el.textId === selectedTextId;
+        const isComponentSelected = el.type === "component" && el.name === selectedComponentId;
+        const isSelected = isLogoSelected || isComponentSelected || isTextSelected;
+
+        // Check if this element is focused in vision mode
+        const isVisionFocused = visionMode && visionFocusedElements.some(
+          (ve) => ve.name === el.name && ve.variantId === el.variantId
+        );
+
+        // Check if this element was changed (Apply-First mode - highlight until accept/revert)
+        const isChangedElement = changedElements.length > 0 && changedElements.some(
+          (ce) => ce.name === el.name && ce.variantId === el.variantId
+        );
+
+        // In vision mode, only show focused elements (hide non-focused to reduce clutter)
+        if (visionMode && !isVisionFocused && visionFocusedElements.length > 0) {
+          return null;
+        }
+
+        // When showing changed elements, only show those specific elements
+        if (changedElements.length > 0 && !isChangedElement && !visionMode && !inspectorClickMode) {
+          return null;
+        }
+
+        // Use appropriate colors based on mode:
+        // - Changed elements (green) - highest priority (Apply-First mode)
+        // - Preview mode (green) takes priority
+        // - Vision mode (purple) for vision-focused elements
+        // - Otherwise use type-based colors
+        const colors = isChangedElement
+          ? previewColors // Green for changed elements
+          : previewMode
+            ? previewColors
+            : visionMode
+              ? (isVisionFocused ? visionColors : { ...visionColors, border: "#8B5CF680", bg: "#8B5CF680" })
+              : inspectorColors[el.type];
+
+        // Check if this element matches the currently selected component type
+        const elementType = el.name?.toLowerCase() || "";
+        const selectedType = selectedComponentType?.toLowerCase() || "all";
+
+        // Check for type match (used for label visibility)
+        const typeMatches = selectedType === "all" ||
+          elementType === selectedType ||
+          elementType.startsWith(selectedType.replace("-primary", "").replace("-secondary", "").replace("-outline", "").replace("-ghost", ""));
+
+        // Check for full match (used for border highlighting - considers variant scope)
+        let isMatchingType = false;
+        if (selectedType === "all") {
+          isMatchingType = true;
+        } else if (componentScope === "variant" && selectedVariantId) {
+          // If we have a selected variant, we must match BOTH type AND variant for full highlight
+          isMatchingType = typeMatches && el.variantId === selectedVariantId;
+        } else {
+          isMatchingType = typeMatches;
+        }
+
+        // In vision mode, don't dim elements - show all with purple, focused ones brighter
+        // In other modes, dim non-matching elements when a specific type is selected
+        // Never dim changed elements
+        const isDimmed = !visionMode && !isChangedElement && selectedType !== "all" && !isMatchingType;
+
+        const borderColor = isDimmed ? "#6b728080" : (isChangedElement ? colors.selectedBorder : (isVisionFocused ? colors.selectedBorder : (isSelected ? colors.selectedBorder : colors.border)));
+        const bgColor = isDimmed ? "#6b728080" : (isChangedElement ? colors.selectedBg : (isVisionFocused ? colors.selectedBg : (isSelected ? colors.selectedBg : colors.bg)));
+        const isLogoClickable = interactive && el.type === "logo" && el.logoId && onLogoClick;
+        const isTextClickable = interactive && el.type === "text" && el.textId && onTextClick;
+        const isComponentClickable = componentSelectionMode && el.type === "component" && onComponentClick;
+        const isInspectorClickable = inspectorClickMode && el.type === "component" && onSelectComponentAndClose;
+        const isVisionClickable = visionMode && onVisionElementClick;
+        const isClickable = isLogoClickable || isComponentClickable || isInspectorClickable || isVisionClickable || isTextClickable;
+        
+        return (
+          <div
+            key={`${el.type}-${el.logoId || el.name}-${index}`}
+            className={cn(
+              "absolute",
+              isClickable && "cursor-pointer"
+            )}
+          style={{
+              position: "fixed", // Use fixed instead of absolute relative to 0x0 parent
+            top: el.rect.top,
+            left: el.rect.left,
+            width: el.rect.width,
+            height: el.rect.height,
+              pointerEvents: "none",
+              touchAction: "auto", // Allow touch scrolling
+          }}
+        >
+          {/* Border highlight - in preview/changed mode, use only glow (no border) so actual styling is visible */}
+          <div
+              className={cn(
+                "absolute transition-all",
+                // In preview/changed mode: no border, just glow - so component's actual styling is visible
+                (previewMode && isMatchingType) || isChangedElement ? "inset-[-4px]" : "inset-0 rounded-sm",
+                !previewMode && !visionMode && !isChangedElement && (isSelected ? "border-3" : isDimmed ? "border" : "border-2"),
+                visionMode && (isVisionFocused ? "border-3" : "border-2"),
+                (previewMode && isMatchingType) && "animate-pulse",
+                (visionMode && isVisionFocused) && "animate-pulse",
+                isChangedElement && "animate-pulse"
+              )}
+              style={{
+                pointerEvents: "none",
+                borderColor: (previewMode && isMatchingType) || isChangedElement ? "transparent" : borderColor,
+                borderWidth: (previewMode && isMatchingType) || isChangedElement ? 0 : undefined,
+                // Preview mode / Changed elements: outer glow only, no border overlay
+                // Vision mode: show glow for focused elements
+                boxShadow: isChangedElement
+                  ? `0 0 0 3px ${previewColors.border}, 0 0 20px 8px ${previewColors.border}80`
+                  : previewMode && isMatchingType
+                    ? `0 0 0 3px ${previewColors.border}, 0 0 20px 8px ${previewColors.border}80`
+                    : visionMode && isVisionFocused
+                      ? `0 0 0 3px ${visionColors.border}, 0 0 15px 5px ${visionColors.border}60`
+                      : isSelected
+                        ? `0 0 0 2px ${borderColor}40`
+                        : undefined,
+                opacity: isDimmed ? 0.4 : (visionMode && !isVisionFocused ? 0.6 : 1),
+                borderRadius: previewMode && isMatchingType ? "inherit" : undefined,
+              }}
+          />
+          {/* Label - show for matching elements, changed elements, or vision mode */}
+          {(typeMatches || isChangedElement || (visionMode && isVisionFocused)) && (
+          <div
+            className={cn(
+              "absolute -top-6 left-0",
+              "px-1.5 py-0.5 text-[10px] font-medium",
+              "text-white rounded-t-sm",
+              "whitespace-nowrap shadow-sm",
+              "flex items-center gap-1",
+              "transition-all",
+              (previewMode && isMatchingType) && "animate-pulse",
+              (visionMode && isVisionFocused) && "animate-pulse",
+              isChangedElement && "animate-pulse"
+            )}
+              style={{ backgroundColor: bgColor }}
+            >
+              {isChangedElement ? (
+                <>
+                  <Check className="h-3 w-3" />
+                  <span>Changed: {el.name}</span>
+                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
+                </>
+              ) : previewMode && isMatchingType ? (
+                <>
+                  <Sparkles className="h-3 w-3" />
+                  <span>Preview: {el.name}</span>
+                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
+                </>
+              ) : visionMode && isVisionFocused ? (
+                <>
+                  <Eye className="h-3 w-3" />
+                  <span>Focused: {el.name}</span>
+                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px]">#{el.variantId.substring(0, 4)}</span>}
+                </>
+              ) : visionMode ? (
+                <>
+                  <Eye className="h-3 w-3 opacity-60" />
+                  {el.name}
+                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px] border-l border-white/30 pl-1">#{el.variantId.substring(0, 4)}</span>}
+                </>
+              ) : (
+                <>
+                  {el.type === "logo" && <ImageIcon className="h-3 w-3" />}
+                  {el.type === "component" && <Box className="h-3 w-3" />}
+                  {el.type === "text" && <Type className="h-3 w-3" />}
+                  {el.name}
+                  {el.variantId && <span className="ml-1 opacity-80 font-mono text-[9px] border-l border-white/30 pl-1">#{el.variantId.substring(0, 4)}</span>}
+                  {isSelected && <span className="ml-1">✓</span>}
+                </>
+              )}
+          </div>
+          )}
+            {/* Click hint for logos */}
+            {isClickable && !isSelected && (
+              <div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+                <span id="span-click-to-select" className="px-2 py-1 text-[10px] font-medium text-white bg-black/70 rounded">
+                  Click to select
+                </span>
+        </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}