sonance-brand-mcp 1.3.14 → 1.3.16

package/dist/assets/dev-tools/panels/ComponentsPanel.tsx

@@ -0,0 +1,623 @@
+"use client";
+
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import { Box, X, RotateCcw } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { DetectedElement, AnalysisResult, ComponentStyle, PendingEdit, AIEditResult, ComponentStyleOverride, VisionFocusedElement, VisionPendingEdit, ApplyFirstSession, ApplyFirstStatus } from "../types";
+import { COMPONENT_CONFIG_MAP, getVisibleSections } from "../constants";
+import { componentSnippets, ThemeConfig } from "../../../lib/brand-system";
+import { ChatInterface } from "../components/ChatInterface";
+import { DiffPreview } from "../components/DiffPreview";
+import { VisionDiffPreview } from "../components/VisionDiffPreview";
+import { ApplyFirstPreview } from "../components/ApplyFirstPreview";
+
+type ComponentsViewMode = "visual" | "inspector";
+
+export interface ComponentsPanelProps {
+  copiedId: string | null;
+  onCopy: (text: string, id: string) => void;
+  installedComponents: string[];
+  inspectorEnabled: boolean;
+  onToggleInspector: (force?: boolean) => void;
+  config: ThemeConfig;
+  updateConfig: (updates: Partial<ThemeConfig>) => void;
+  onReset: () => void;
+  taggedElements: DetectedElement[];
+  selectedComponentType: string;
+  onSelectComponentType: (type: string) => void;
+  componentScope: "all" | "variant" | "page" | "selected";
+  onScopeChange: (scope: "all" | "variant" | "page" | "selected") => void;
+  selectedComponentId: string | null;
+  onSelectComponent: (id: string | null) => void;
+  selectedVariantId: string | null;
+  onSelectVariant: (id: string | null) => void;
+  analysisResult: AnalysisResult | null;
+  // Component-specific style overrides
+  componentOverrides: Record<string, ComponentStyle>;
+  onUpdateComponentOverride: (componentType: string, override: Partial<ComponentStyle>) => void;
+  onResetComponentOverrides: () => void;
+  // New props for view mode
+  viewMode: ComponentsViewMode;
+  onViewModeChange: (mode: ComponentsViewMode) => void;
+  // Preview mode - lifted to parent for overlay coordination
+  isPreviewActive: boolean;
+  onPreviewActiveChange: (active: boolean) => void;
+  // Vision mode props
+  visionMode?: boolean;
+  visionFocusedElements?: VisionFocusedElement[];
+  onVisionEditComplete?: (result: VisionPendingEdit) => void;
+  // Vision pending edit (for VisionDiffPreview)
+  visionPendingEdit?: VisionPendingEdit | null;
+  onSaveVisionEdit?: () => void;
+  onClearVisionPendingEdit?: () => void;
+  // Apply-First Mode props
+  applyFirstSession?: ApplyFirstSession | null;
+  applyFirstStatus?: ApplyFirstStatus;
+  onApplyFirstComplete?: (session: ApplyFirstSession) => void;
+  onApplyFirstAccept?: () => void;
+  onApplyFirstRevert?: () => void;
+}
+
+export function ComponentsPanel({ 
+  copiedId, 
+  onCopy, 
+  installedComponents, 
+  inspectorEnabled, 
+  onToggleInspector,
+  config,
+  updateConfig,
+  onReset,
+  taggedElements,
+  selectedComponentType,
+  onSelectComponentType,
+  componentScope,
+  onScopeChange,
+  selectedComponentId,
+  onSelectComponent,
+  selectedVariantId,
+  onSelectVariant,
+  analysisResult,
+  componentOverrides,
+  onUpdateComponentOverride,
+  onResetComponentOverrides,
+  viewMode,
+  onViewModeChange,
+  isPreviewActive,
+  onPreviewActiveChange,
+  visionMode = false,
+  visionFocusedElements = [],
+  onVisionEditComplete,
+  visionPendingEdit,
+  onSaveVisionEdit,
+  onClearVisionPendingEdit,
+  applyFirstSession,
+  applyFirstStatus = "idle",
+  onApplyFirstComplete,
+  onApplyFirstAccept,
+  onApplyFirstRevert,
+}: ComponentsPanelProps) {
+  // Auto-activate inspector when entering this tab
+  useEffect(() => {
+    if (!inspectorEnabled && selectedComponentType === "all") {
+      onToggleInspector(true);
+    }
+  }, []);
+
+  // AI Chat state
+  const [pendingEdit, setPendingEdit] = useState<PendingEdit | null>(null);
+  const [aiSaveStatus, setAiSaveStatus] = useState<"idle" | "saving" | "success" | "error">("idle");
+  const [aiSaveMessage, setAiSaveMessage] = useState("");
+  
+  // Edit scope: "component" affects all instances, "variant" affects only selected variant
+  const [editScope, setEditScope] = useState<"component" | "variant">("component");
+
+  // Color architecture state
+  const [colorArchitecture, setColorArchitecture] = useState<{
+    primary: string;
+    accent: string;
+    sources: { filePath: string; type: string; variables: { name: string; value: string; lineNumber: number }[] }[];
+    recommendation: string;
+  } | null>(null);
+  const [colorSaveStatus, setColorSaveStatus] = useState<"idle" | "saving" | "success" | "error">("idle");
+  const [colorSaveMessage, setColorSaveMessage] = useState("");
+
+  // Get count of detected components on this page
+  const pageCount = useMemo(() => {
+    if (selectedComponentType === "all") {
+      return taggedElements.filter(el => el.type === "component").length;
+    }
+    
+    return taggedElements.filter((el) => {
+      if (el.type !== "component") return false;
+      const name = el.name.toLowerCase();
+      
+      // Match specific component or generic fallback
+      if (name === selectedComponentType || name.includes(selectedComponentType)) {
+        return true;
+      }
+      if (selectedComponentType === "button-primary" && name === "button") {
+        return true;
+      }
+      if (selectedComponentType === "input" && name === "input") return true;
+      
+      return false;
+    }).length;
+  }, [taggedElements, selectedComponentType]);
+
+  // Get app-wide count from analysis
+  const appCount = useMemo(() => {
+    if (!analysisResult?.summary?.totalElements) return 0;
+    
+    // For now, use total elements. Could be refined per component type.
+    if (selectedComponentType === "all") {
+      return analysisResult.summary.totalElements;
+    }
+    
+    // Map selected type to analysis categories
+    if (selectedComponentType.includes("button")) {
+      return analysisResult.summary.byCategory?.interactive?.total || 0;
+    }
+    if (selectedComponentType === "input" || selectedComponentType === "select" || selectedComponentType === "textarea") {
+      return analysisResult.summary.byCategory?.input?.total || 0;
+    }
+    
+    return 0;
+  }, [analysisResult, selectedComponentType]);
+
+  // Get the selected component's display name
+  const getComponentDisplayName = () => {
+    if (selectedComponentType === "all") return "Component";
+    
+    // Check if it's a specific component
+    const snippet = componentSnippets.find(s => s.id === selectedComponentType);
+    if (snippet) return snippet.name;
+    
+    // Check if it's a category
+    const categoryKey = selectedComponentType.toLowerCase();
+    if (COMPONENT_CONFIG_MAP[categoryKey]) {
+      return categoryKey.charAt(0).toUpperCase() + categoryKey.slice(1);
+    }
+    
+    // Capitalize generic names
+    return selectedComponentType
+      .split('-')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  };
+
+  const selectedComponentName = useMemo(() => {
+    if (selectedComponentType === "all") return null;
+    return getComponentDisplayName();
+  }, [selectedComponentType]);
+
+  // Get visible config sections for the selected component
+  const visibleSections = useMemo(() => {
+    return getVisibleSections(selectedComponentType);
+  }, [selectedComponentType]);
+
+  // Get current component's style overrides (or defaults)
+  const currentOverrides = useMemo(() => {
+    return componentOverrides[selectedComponentType] || {};
+  }, [componentOverrides, selectedComponentType]);
+
+  // Get computed styles of the selected variant for AI context
+  const variantStyles = useMemo(() => {
+    if (!selectedVariantId) return null;
+    
+    // Find an element with this variant ID
+    const element = document.querySelector(`[data-sonance-variant="${selectedVariantId}"]`);
+    if (!element) return null;
+    
+    const computed = window.getComputedStyle(element);
+    return {
+      backgroundColor: computed.backgroundColor,
+      color: computed.color,
+      borderColor: computed.borderColor,
+      borderRadius: computed.borderRadius,
+      borderWidth: computed.borderWidth,
+      padding: computed.padding,
+      fontSize: computed.fontSize,
+      fontWeight: computed.fontWeight,
+      boxShadow: computed.boxShadow,
+    };
+  }, [selectedVariantId]);
+
+  // Reset edit scope when variant selection changes
+  useEffect(() => {
+    if (selectedVariantId) {
+      setEditScope("variant"); // Default to variant when one is selected
+    } else {
+      setEditScope("component");
+    }
+  }, [selectedVariantId]);
+
+  // Helper to update a style property for the selected component
+  const updateComponentStyle = useCallback((updates: Partial<ComponentStyleOverride>) => {
+    if (selectedComponentType !== "all") {
+      onUpdateComponentOverride(selectedComponentType, updates);
+    }
+  }, [selectedComponentType, onUpdateComponentOverride]);
+
+  // Get list of page instances matching the selected type (for navigation)
+  const pageInstances = useMemo<DetectedElement[]>(() => {
+    if (selectedComponentType === "all") {
+      return taggedElements.filter((el) => el.type === "component");
+    }
+    
+    return taggedElements.filter((el) => {
+      if (el.type !== "component") return false;
+      const name = el.name.toLowerCase();
+      
+      // Check for specific component match
+      if (name === selectedComponentType || name.includes(selectedComponentType)) {
+        return true;
+      }
+      
+      // Handle generic "button" -> "button-primary" mapping
+      if (selectedComponentType === "button-primary" && name === "button") {
+        return true;
+      }
+      
+      // Handle generic mappings for other types
+      if (selectedComponentType === "input" && name === "input") return true;
+      if (selectedComponentType === "select" && name === "select") return true;
+      if (selectedComponentType === "textarea" && name === "textarea") return true;
+      
+      // Fallback to category matching
+      const categoryMappings: Record<string, string[]> = {
+        "buttons": ["button"],
+        "forms": ["input", "textarea", "select", "checkbox", "radio", "switch"],
+      };
+      
+      const keywords = categoryMappings[selectedComponentType] || [];
+      return keywords.some((keyword) => name.includes(keyword));
+    });
+  }, [taggedElements, selectedComponentType]);
+
+  // Check color architecture on mount
+  useEffect(() => {
+    async function fetchAnalysis() {
+      try {
+        const response = await fetch("/api/sonance-analyze");
+        if (response.ok) {
+          const data = await response.json();
+          
+          // Update color architecture
+          if (data.colorArchitecture) {
+            setColorArchitecture(data.colorArchitecture);
+          }
+        }
+      } catch {
+        // API might not exist yet
+      }
+    }
+    fetchAnalysis();
+  }, []);
+  
+  // Handle AI edit completion
+  const handleAIEditComplete = useCallback((result: AIEditResult) => {
+    // Could do additional processing here if needed
+    console.log("AI edit complete:", result);
+  }, []);
+
+  // Handle saving AI edits to file
+  const handleSaveAIEdit = useCallback(async () => {
+    if (!pendingEdit) return;
+
+    setAiSaveStatus("saving");
+    setAiSaveMessage("");
+
+    try {
+      const response = await fetch("/api/sonance-ai-edit", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "save",
+          componentType: selectedComponentType,
+          filePath: pendingEdit.filePath,
+          modifiedCode: pendingEdit.modifiedCode,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to save changes");
+      }
+
+      setAiSaveStatus("success");
+      setAiSaveMessage(data.message || "Changes saved successfully!");
+      onPreviewActiveChange(false); // Clear preview on save
+
+      // Keep showing success for a bit, then auto-clear
+      setTimeout(() => {
+        setAiSaveStatus("idle");
+        setAiSaveMessage("");
+      }, 10000);
+    } catch (error) {
+      setAiSaveStatus("error");
+      setAiSaveMessage(error instanceof Error ? error.message : "Failed to save changes");
+
+      setTimeout(() => {
+        setAiSaveStatus("idle");
+        setAiSaveMessage("");
+      }, 5000);
+    }
+  }, [pendingEdit, selectedComponentType]);
+
+  // Clear pending edit and preview
+  const handleClearPendingEdit = useCallback(() => {
+    setPendingEdit(null);
+    setAiSaveStatus("idle");
+    setAiSaveMessage("");
+    onPreviewActiveChange(false);
+  }, [onPreviewActiveChange]);
+
+  // Handle preview toggle from DiffPreview
+  const handlePreviewToggle = useCallback((active: boolean) => {
+    onPreviewActiveChange(active);
+  }, [onPreviewActiveChange]);
+
+  // Handle saving color changes
+  const handleSaveColors = async () => {
+    if (!colorArchitecture) return;
+    
+    setColorSaveStatus("saving");
+    setColorSaveMessage("");
+    
+    try {
+      const response = await fetch("/api/sonance-save-colors", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          primaryColor: config.baseColor,
+          accentColor: config.accentColor,
+          colorArchitecture,
+        }),
+      });
+      
+      const data = await response.json();
+      
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to save colors");
+      }
+      
+      setColorSaveStatus("success");
+      setColorSaveMessage(data.message || "Colors saved successfully!");
+      
+      setTimeout(() => {
+        setColorSaveStatus("idle");
+        setColorSaveMessage("");
+      }, 5000);
+    } catch (error) {
+      setColorSaveStatus("error");
+      setColorSaveMessage(error instanceof Error ? error.message : "Failed to save colors");
+      
+      setTimeout(() => {
+        setColorSaveStatus("idle");
+        setColorSaveMessage("");
+      }, 5000);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Selected Component State */}
+      {selectedComponentType !== "all" && (
+        <>
+          {/* Selected Component Header */}
+          <div className="p-3 rounded border border-[#00A3E1] bg-[#00A3E1]/5">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Box className="h-4 w-4 text-[#00A3E1]" />
+                <div className="flex flex-col">
+                  <span id="brand-panel-span-selectedcomponentnam" className="text-sm font-semibold text-gray-900">{selectedComponentName}</span>
+                  {selectedVariantId && (
+                    <span id="brand-panel-span-variant-selectedvari" className="text-[10px] text-gray-500 font-mono">
+                      Variant: {selectedVariantId.substring(0, 6)}
+                    </span>
+                  )}
+                </div>
+              </div>
+              <button
+                onClick={() => onSelectComponentType("all")}
+                className="text-xs text-gray-400 hover:text-gray-600"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+            
+            {/* Stats */}
+            <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
+              <span id="brand-panel-span"><strong className="text-gray-700">{pageCount}</strong> on this page</span>
+              {appCount > 0 && (
+                <span id="brand-panel-span"><strong className="text-gray-700">{appCount}</strong> in entire app</span>
+              )}
+            </div>
+          </div>
+
+          {/* Variants List - show all unique variants */}
+          {(() => {
+            // Get unique variants for this component type
+            const variantMap = new Map<string, { count: number; variantId: string }>();
+            pageInstances.forEach((el) => {
+              if (el.variantId) {
+                const existing = variantMap.get(el.variantId);
+                if (existing) {
+                  existing.count++;
+                } else {
+                  variantMap.set(el.variantId, { count: 1, variantId: el.variantId });
+                }
+              }
+            });
+            
+            const variants = Array.from(variantMap.values());
+            
+            if (variants.length > 1) {
+              return (
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs font-medium text-gray-600">Variants ({variants.length})</span>
+                    {selectedVariantId && (
+                      <button
+                        onClick={() => onSelectVariant(null)}
+                        className="text-xs text-[#00A3E1] hover:underline"
+                      >
+                        Clear selection
+                      </button>
+                    )}
+                  </div>
+                  <div className="grid grid-cols-2 gap-2">
+                    {variants.map(({ variantId, count }) => (
+                      <button
+                        key={variantId}
+                        onClick={() => onSelectVariant(selectedVariantId === variantId ? null : variantId)}
+                        className={cn(
+                          "p-2 rounded border text-left transition-colors",
+                          selectedVariantId === variantId
+                            ? "border-[#00A3E1] bg-[#00A3E1]/10"
+                            : "border-gray-200 hover:border-gray-300 bg-white"
+                        )}
+                      >
+                        <span className="text-xs font-mono text-gray-700">#{variantId.substring(0, 6)}</span>
+                        <span className="text-[10px] text-gray-400 ml-1">({count})</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              );
+            }
+            
+            return null;
+          })()}
+
+          {/* No instances on page */}
+          {pageInstances.length === 0 && (
+            <div className="p-2 rounded border border-amber-200 bg-amber-50 text-center">
+              <span id="brand-panel-span-no-instances-on-this" className="text-xs text-amber-700">
+                No instances on this page. Navigate to a page with this component.
+              </span>
+            </div>
+          )}
+
+          {/* Edit Scope Toggle - only show when a variant is selected */}
+          {selectedVariantId && (
+            <div className="flex items-center gap-2 p-2 bg-gray-50 rounded border border-gray-200">
+              <span className="text-xs text-gray-500">Apply changes to:</span>
+              <div className="flex gap-1 flex-1">
+                <button
+                  onClick={() => setEditScope("component")}
+                  className={cn(
+                    "flex-1 px-2 py-1.5 text-xs font-medium rounded transition-colors",
+                    editScope === "component"
+                      ? "bg-[#00A3E1] text-white"
+                      : "bg-white text-gray-600 border border-gray-200 hover:bg-gray-100"
+                  )}
+                >
+                  All {selectedComponentName}s
+                </button>
+                <button
+                  onClick={() => setEditScope("variant")}
+                  className={cn(
+                    "flex-1 px-2 py-1.5 text-xs font-medium rounded transition-colors",
+                    editScope === "variant"
+                      ? "bg-[#00A3E1] text-white"
+                      : "bg-white text-gray-600 border border-gray-200 hover:bg-gray-100"
+                  )}
+                >
+                  This Variant
+                </button>
+              </div>
+            </div>
+          )}
+
+        </>
+      )}
+
+      {/* How it works - only when no component selected */}
+      {selectedComponentType === "all" && (
+        <div className="bg-blue-50/50 rounded-lg p-3 border border-blue-100">
+          <h4 id="h4-how-it-works" className="text-xs font-semibold text-blue-900 mb-2 uppercase tracking-wide">How it works</h4>
+          <ol className="text-xs text-blue-800 space-y-1 list-decimal list-inside">
+            <li>Hover & click any element on the page to select it</li>
+            <li>Describe how you want to change it below</li>
+          </ol>
+        </div>
+      )}
+
+      {/* AI Component Editor */}
+      <div className="space-y-4 pt-2">
+            {/* Pending Edit Preview (single-file component edit) */}
+            {pendingEdit && (
+              <DiffPreview
+                pendingEdit={pendingEdit}
+                componentType={selectedComponentType}
+                onSave={handleSaveAIEdit}
+                onCancel={handleClearPendingEdit}
+                onPreviewToggle={handlePreviewToggle}
+                isPreviewActive={isPreviewActive}
+                saveStatus={aiSaveStatus}
+                saveMessage={aiSaveMessage}
+                variantId={selectedVariantId}
+              />
+            )}
+
+            {/* Vision Mode Pending Edit Preview (multi-file) - OLD: CSS preview */}
+            {visionPendingEdit && onSaveVisionEdit && onClearVisionPendingEdit && !applyFirstSession && (
+              <VisionDiffPreview
+                pendingEdit={visionPendingEdit}
+                onSave={onSaveVisionEdit}
+                onCancel={onClearVisionPendingEdit}
+              />
+            )}
+
+            {/* Apply-First Mode Preview - NEW: Changes already applied */}
+            {applyFirstSession && onApplyFirstAccept && onApplyFirstRevert && (
+              <ApplyFirstPreview
+                session={applyFirstSession}
+                status={applyFirstStatus}
+                onAccept={onApplyFirstAccept}
+                onRevert={onApplyFirstRevert}
+              />
+            )}
+
+            {/* AI Chat Interface - hide when any pending edit is present */}
+            {!pendingEdit && !visionPendingEdit && !applyFirstSession && (
+              <ChatInterface
+                componentType={selectedComponentType}
+                componentName={selectedComponentName || selectedComponentType}
+                onEditComplete={handleAIEditComplete}
+                onSaveRequest={setPendingEdit}
+                pendingEdit={pendingEdit}
+                onClearPending={handleClearPendingEdit}
+                editScope={editScope}
+                variantId={selectedVariantId}
+                variantStyles={variantStyles}
+                visionMode={visionMode}
+                visionFocusedElements={visionFocusedElements}
+                onVisionEditComplete={onVisionEditComplete}
+                onApplyFirstComplete={onApplyFirstComplete}
+              />
+            )}
+
+            {/* Reset Button */}
+            <button
+              onClick={() => {
+                onReset();
+                onResetComponentOverrides();
+                handleClearPendingEdit();
+              }}
+              className={cn(
+                "w-full flex items-center justify-center gap-2 py-2.5",
+                "text-xs font-medium text-gray-500 hover:text-gray-700",
+                "border border-gray-200 rounded hover:bg-gray-50 transition-colors"
+              )}
+            >
+              <RotateCcw className="h-3.5 w-3.5" />
+              Reset
+            </button>
+          </div>
+    </div>
+  );
+}
+