sonance-brand-mcp 1.3.15 → 1.3.17

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

@@ -0,0 +1,332 @@
+"use client";
+
+import React from "react";
+import { Type, RotateCcw, Check, X, Sun, Moon } from "lucide-react";
+import { DetectedElement, TextOverride } from "../types";
+import { Section, SelectField } from "../components/common";
+import { cn } from "@/lib/utils";
+
+export interface TextPanelProps {
+  inspectorEnabled: boolean;
+  taggedElements: DetectedElement[];
+  selectedTextId?: string | null;
+  onSelectText?: (textId: string | null) => void;
+  textOverrides?: Record<string, TextOverride>;
+  onTextOverrideChange?: (textId: string, override: TextOverride) => void;
+  // Save/Revert handlers
+  hasChanges?: boolean;
+  onSaveChanges?: () => void;
+  onRevertAll?: () => void;
+  saveStatus?: "idle" | "saving" | "success" | "error";
+  // Theme for color editing
+  currentTheme?: "light" | "dark";
+}
+
+export function TextPanel({ 
+  inspectorEnabled, 
+  taggedElements,
+  selectedTextId,
+  onSelectText,
+  textOverrides = {},
+  onTextOverrideChange,
+  hasChanges = false,
+  onSaveChanges,
+  onRevertAll,
+  saveStatus = "idle",
+  currentTheme = "light",
+}: TextPanelProps) {
+  
+  // Find the selected element details
+  const selectedElement = selectedTextId 
+    ? taggedElements.find(el => el.textId === selectedTextId)
+    : null;
+
+  // Get current override or empty object
+  const currentOverride = selectedTextId ? (textOverrides[selectedTextId] || {}) : {};
+
+  // Helper to update override
+  const updateOverride = (updates: Partial<TextOverride>) => {
+    if (!selectedTextId || !onTextOverrideChange) return;
+    onTextOverrideChange(selectedTextId, { ...currentOverride, ...updates });
+  };
+
+  const handleReset = () => {
+    if (!selectedTextId || !onTextOverrideChange) return;
+    // Mark as reset
+    onTextOverrideChange(selectedTextId, { reset: true });
+  };
+
+  // Count number of modified elements
+  const modifiedCount = Object.keys(textOverrides).filter(
+    key => !textOverrides[key].reset && Object.keys(textOverrides[key]).length > 0
+  ).length;
+
+  if (!inspectorEnabled) {
+  return (
+      <div className="flex flex-col items-center justify-center h-full text-center p-6 text-gray-500">
+        <Type className="h-12 w-12 mb-4 opacity-20" />
+        <p className="text-sm font-medium mb-2">Text Inspector Disabled</p>
+        <p className="text-xs max-w-[200px]">
+          Enable the inspector using the mouse icon in the top bar to select and edit text.
+        </p>
+      </div>
+    );
+  }
+
+  // Show pending changes banner when there are modifications
+  const renderPendingChangesBanner = () => {
+    if (!hasChanges || modifiedCount === 0) return null;
+
+    return (
+      <div className="p-3 rounded border border-amber-200 bg-amber-50 mb-4">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
+            <span className="text-xs font-medium text-amber-800">
+              {modifiedCount} text element{modifiedCount !== 1 ? 's' : ''} modified
+            </span>
+          </div>
+        </div>
+        <p className="text-[10px] text-amber-600 mb-3">
+          Changes are previewed on the page. Save to keep them or revert to discard.
+        </p>
+        <div className="flex gap-2">
+          <button
+            onClick={onSaveChanges}
+            disabled={saveStatus === "saving"}
+            className={cn(
+              "flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-colors",
+              "bg-green-600 text-white hover:bg-green-700",
+              saveStatus === "saving" && "opacity-50 cursor-not-allowed"
+            )}
+          >
+            <Check className="h-3 w-3" />
+            {saveStatus === "saving" ? "Saving..." : "Save Changes"}
+          </button>
+          <button
+            onClick={onRevertAll}
+            disabled={saveStatus === "saving"}
+            className={cn(
+              "flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-colors",
+              "bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-200",
+              saveStatus === "saving" && "opacity-50 cursor-not-allowed"
+            )}
+          >
+            <X className="h-3 w-3" />
+            Revert All
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  if (!selectedTextId || !selectedElement) {
+    return (
+      <div className="space-y-4">
+        {renderPendingChangesBanner()}
+        <div className="flex flex-col items-center justify-center text-center p-6 text-gray-500">
+          <div className="relative">
+            <Type className="h-12 w-12 mb-4 opacity-20" />
+            <div className="absolute -bottom-1 -right-1 bg-blue-500 rounded-full p-1">
+              <Type className="h-3 w-3 text-white" />
+            </div>
+              </div>
+          <p className="text-sm font-medium mb-2">Select Text to Edit</p>
+          <p className="text-xs max-w-[200px]">
+            Click on any text element on the page to adjust its typography and content.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Check if current element has changes
+  const currentHasChanges = currentOverride && 
+    !currentOverride.reset && 
+    Object.keys(currentOverride).length > 0;
+
+  return (
+    <div className="space-y-4">
+      {renderPendingChangesBanner()}
+      
+      <div className="space-y-6">
+        <div className="flex items-center justify-between pb-2 border-b border-gray-100">
+          <div className="flex flex-col">
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-medium text-gray-900 truncate max-w-[180px]">
+                {selectedElement.name.split(':')[0]}
+              </span>
+              {currentHasChanges && (
+                <span className="px-1.5 py-0.5 text-[9px] font-medium bg-amber-100 text-amber-700 rounded">
+                  Modified
+                </span>
+              )}
+            </div>
+            <span className="text-[10px] text-gray-400 font-mono">
+              {selectedTextId}
+            </span>
+          </div>
+          <button
+            onClick={handleReset}
+            disabled={!currentHasChanges}
+            className={cn(
+              "text-xs flex items-center gap-1 transition-colors",
+              currentHasChanges 
+                ? "text-gray-400 hover:text-red-500" 
+                : "text-gray-300 cursor-not-allowed"
+            )}
+            title="Reset to original"
+          >
+            <RotateCcw className="h-3 w-3" />
+            Reset
+          </button>
+        </div>
+
+        {/* Content Editor */}
+        <Section title="Content">
+          <textarea
+            value={currentOverride.textContent ?? selectedElement.textContent ?? ""}
+            onChange={(e) => updateOverride({ textContent: e.target.value })}
+            className={cn(
+              "w-full min-h-[80px] p-2 text-sm rounded",
+              "border border-gray-200 bg-white text-gray-700",
+              "focus:outline-none focus:ring-1 focus:ring-[#00A3E1]",
+              "resize-y"
+            )}
+            placeholder="Edit text content..."
+          />
+        </Section>
+
+        {/* Typography Editor */}
+        <Section title="Typography">
+          <div className="space-y-3">
+            {/* Font Size - Dropdown */}
+            <SelectField
+              label="Size"
+              value={currentOverride.fontSize || ""}
+              options={[
+                { value: "", label: "Default" },
+                { value: "12px", label: "Small (12px)" },
+                { value: "14px", label: "Body (14px)" },
+                { value: "16px", label: "Medium (16px)" },
+                { value: "18px", label: "Large (18px)" },
+                { value: "20px", label: "XL (20px)" },
+                { value: "24px", label: "2XL (24px)" },
+                { value: "30px", label: "3XL (30px)" },
+                { value: "36px", label: "4XL (36px)" },
+                { value: "48px", label: "5XL (48px)" },
+                { value: "60px", label: "6XL (60px)" },
+              ]}
+              onChange={(val) => updateOverride({ fontSize: val })}
+            />
+
+            {/* Font Weight - Already a dropdown */}
+            <SelectField
+              label="Weight"
+              value={currentOverride.fontWeight || ""}
+              options={[
+                { value: "", label: "Default" },
+                { value: "300", label: "Light (300)" },
+                { value: "400", label: "Regular (400)" },
+                { value: "500", label: "Medium (500)" },
+                { value: "600", label: "SemiBold (600)" },
+                { value: "700", label: "Bold (700)" },
+              ]}
+              onChange={(val) => updateOverride({ fontWeight: val })}
+            />
+
+            {/* Line Height - Dropdown */}
+            <SelectField
+              label="Line Height"
+              value={currentOverride.lineHeight || ""}
+              options={[
+                { value: "", label: "Default" },
+                { value: "1", label: "Tight (1)" },
+                { value: "1.25", label: "Snug (1.25)" },
+                { value: "1.5", label: "Normal (1.5)" },
+                { value: "1.75", label: "Relaxed (1.75)" },
+                { value: "2", label: "Loose (2)" },
+              ]}
+              onChange={(val) => updateOverride({ lineHeight: val })}
+            />
+
+            {/* Letter Spacing - Dropdown */}
+            <SelectField
+              label="Letter Spacing"
+              value={currentOverride.letterSpacing || ""}
+              options={[
+                { value: "", label: "Default" },
+                { value: "-0.05em", label: "Tighter" },
+                { value: "-0.025em", label: "Tight" },
+                { value: "0", label: "Normal" },
+                { value: "0.025em", label: "Wide" },
+                { value: "0.05em", label: "Wider" },
+                { value: "0.1em", label: "Widest" },
+              ]}
+              onChange={(val) => updateOverride({ letterSpacing: val })}
+            />
+
+            {/* Color - Theme-Aware Color Picker */}
+            <div className="space-y-1">
+              <div className="flex items-center gap-2">
+                <label className="text-xs text-gray-500">Color</label>
+                <div className={cn(
+                  "flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium",
+                  currentTheme === "dark" 
+                    ? "bg-gray-800 text-gray-200" 
+                    : "bg-gray-100 text-gray-600"
+                )}>
+                  {currentTheme === "dark" ? (
+                    <Moon className="h-2.5 w-2.5" />
+                  ) : (
+                    <Sun className="h-2.5 w-2.5" />
+                  )}
+                  {currentTheme === "dark" ? "Dark" : "Light"}
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <input 
+                  type="color" 
+                  value={
+                    currentTheme === "dark"
+                      ? (currentOverride.colorDark || currentOverride.color || "#FFFFFF")
+                      : (currentOverride.colorLight || currentOverride.color || "#000000")
+                  } 
+                  onChange={(e) => {
+                    if (currentTheme === "dark") {
+                      updateOverride({ colorDark: e.target.value });
+                    } else {
+                      updateOverride({ colorLight: e.target.value });
+                    }
+                  }}
+                  className="w-8 h-7 p-0 border border-gray-200 rounded cursor-pointer"
+                  title={`Pick color for ${currentTheme} mode`}
+                />
+                <input 
+                  type="text" 
+                  value={
+                    currentTheme === "dark"
+                      ? (currentOverride.colorDark || "")
+                      : (currentOverride.colorLight || "")
+                  } 
+                  onChange={(e) => {
+                    if (currentTheme === "dark") {
+                      updateOverride({ colorDark: e.target.value });
+                    } else {
+                      updateOverride({ colorLight: e.target.value });
+                    }
+                  }}
+                  placeholder={currentTheme === "dark" ? "#FFFFFF" : "#333333"}
+                  className="flex-1 h-7 px-2 text-xs border border-gray-200 rounded focus:border-[#00A3E1] focus:outline-none font-mono"
+                />
+              </div>
+              <p className="text-[10px] text-gray-400">
+                Switch theme to set color for {currentTheme === "dark" ? "light" : "dark"} mode
+              </p>
+            </div>
+          </div>
+        </Section>
+        </div>
+    </div>
+  );
+}

package/dist/assets/dev-tools/types.ts

@@ -0,0 +1,295 @@
+
+import React from "react";
+
+export type TabId = "analysis" | "components" | "logos" | "text";
+
+export interface TabDefinition {
+  id: TabId;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+export type SaveStatus = "idle" | "saving" | "success" | "error";
+
+// Detected element types for Visual Inspector
+export type DetectedElementType = "component" | "logo" | "text";
+
+export interface DetectedElement {
+  name: string;
+  rect: DOMRect;
+  type: DetectedElementType;
+  /** Unique ID for logo elements (for selection/editing) */
+  logoId?: string;
+  /** Unique ID for text elements (for selection/editing) */
+  textId?: string;
+  /** The actual text content (for text elements) */
+  textContent?: string;
+  /** Component variant ID (hash of styles/classes) to distinguish visual styles */
+  variantId?: string;
+}
+
+// Logo asset from the API
+export interface LogoAsset {
+  id: string;
+  name: string;
+  path: string;
+  brand: string;
+  extension: string;
+}
+
+// Logo override configuration
+export interface LogoOverride {
+  src?: string;          // Single source (fallback, or used when no theme-specific)
+  srcLight?: string;     // Logo for light mode (dark logo on light bg)
+  srcDark?: string;      // Logo for dark mode (light logo on dark bg)
+  width?: number;
+  height?: number;
+  scale?: number;
+  reset?: boolean;       // If true, indicates this config is resetting to defaults
+}
+
+// Text override configuration
+export interface TextOverride {
+  textContent?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  lineHeight?: string;
+  letterSpacing?: string;
+  color?: string;           // Keep for backwards compatibility
+  colorLight?: string;      // Color for light mode
+  colorDark?: string;       // Color for dark mode
+  fontFamily?: string;
+  reset?: boolean;
+  // Element identification for persistence across page reloads
+  selector?: string;        // CSS selector to find element
+  originalText?: string;    // Original text content for fallback matching
+  tagName?: string;         // Element tag name (e.g., 'h1', 'p', 'a')
+}
+
+// Save status for logo persistence
+export type LogoSaveStatus = "idle" | "saving" | "success" | "error";
+
+// Original logo state for reset
+export interface OriginalLogoState {
+  src: string;
+  width: number;
+  height: number;
+  srcset?: string;
+}
+
+// Original text state for reset
+export interface OriginalTextState {
+  textContent: string | null;
+  fontSize: string;
+  fontWeight: string;
+  lineHeight: string;
+  letterSpacing: string;
+  color: string;
+  fontFamily: string;
+}
+
+// Component-specific style overrides for scalable styling
+export interface ComponentStyle {
+  backgroundColor?: string;
+  textColor?: string;
+  borderRadius?: string;
+  borderColor?: string;
+  fontWeight?: string;
+}
+
+// Map of component key -> style override
+export type ComponentStyleOverride = Record<string, ComponentStyle>;
+
+// ---- AI Chat Interfaces ----
+
+export interface ChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  timestamp: Date;
+  editResult?: AIEditResult;
+}
+
+export interface AIEditResult {
+  success: boolean;
+  modifiedCode?: string;
+  diff?: string;
+  explanation?: string;
+  error?: string;
+}
+
+export interface PendingEdit {
+  filePath: string;
+  originalCode: string;
+  modifiedCode: string;
+  diff: string;
+  explanation: string;
+  // AI-generated CSS for live preview (no parsing needed)
+  previewCSS?: string;
+}
+
+// Analysis result from the project analyzer
+export interface AnalysisImageElement {
+  id: string;
+  filePath: string;
+  lineNumber: number;
+  elementType: "Image" | "img";
+  srcValue: string;
+  srcType: "literal" | "variable" | "import";
+  hasId: boolean;
+  existingId?: string;
+  alt?: string;
+  suggestedId?: string;
+  context: {
+    parentComponent?: string;
+    semanticContainer?: string;
+  };
+}
+
+export interface CategorySummary {
+  total: number;
+  withId: number;
+  missingId: number;
+}
+
+export interface AnalysisResult {
+  timestamp: string;
+  scanDuration: number;
+  filesScanned: number;
+  elements: AnalysisImageElement[];
+  images: AnalysisImageElement[];
+  themeFiles: { filePath: string; type: string; hasBrandVariables: boolean }[];
+  summary: {
+    totalElements: number;
+    elementsWithId: number;
+    elementsMissingId: number;
+    byCategory: {
+      image: CategorySummary;
+      text: CategorySummary;
+      interactive: CategorySummary;
+      input: CategorySummary;
+      definition: CategorySummary;
+    };
+    // Legacy fields
+    totalImages: number;
+    imagesWithId: number;
+    imagesMissingId: number;
+    brandLogosDetected: number;
+  };
+}
+
+export type AnalysisStatus = "idle" | "scanning" | "complete" | "error";
+
+export type ConfigSection = 'colors' | 'radius' | 'typography';
+
+export type AutoFixStatus = "idle" | "fixing" | "success" | "error";
+
+export interface LogoToolsPanelProps {
+  logoAssets: LogoAsset[];
+  logoAssetsByBrand: Record<string, LogoAsset[]>;
+  selectedLogoId: string | null;
+  onSelectLogo: (id: string | null) => void;
+  globalLogoConfig: LogoOverride;
+  individualLogoConfigs: Record<string, LogoOverride>;
+  onGlobalConfigChange: (config: LogoOverride) => void;
+  onIndividualConfigChange: (logoId: string, config: LogoOverride) => void;
+  onResetAll: () => void;
+  onResetLogo: (logoId: string) => void;
+  onSaveChanges: () => void;
+  saveStatus: LogoSaveStatus;
+  saveMessage: string;
+  findComplementaryLogo: (path: string) => { light?: string; dark?: string } | null;
+  currentTheme: string;
+  onAutoFixId?: (element: DetectedElement) => void;
+  autoFixStatus?: AutoFixStatus;
+  autoFixMessage?: string;
+}
+
+export type ComponentsViewMode = "visual" | "inspector";
+
+// ---- Vision Mode Types ----
+
+export interface VisionFocusedElement {
+  name: string;
+  type: DetectedElementType;
+  variantId?: string;
+  coordinates: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  description?: string;
+}
+
+export interface VisionEditRequest {
+  action: "analyze" | "edit" | "save";
+  screenshot?: string;
+  pageRoute: string;
+  userPrompt: string;
+  focusedElements?: VisionFocusedElement[];
+  modifications?: VisionFileModification[];
+}
+
+export interface VisionFileModification {
+  filePath: string;
+  originalContent: string;
+  modifiedContent: string;
+  diff: string;
+  explanation: string;
+  previewCSS?: string;
+}
+
+export interface VisionEditResponse {
+  success: boolean;
+  modifications?: VisionFileModification[];
+  aggregatedPreviewCSS?: string;
+  explanation?: string;
+  reasoning?: string;
+  error?: string;
+}
+
+export interface VisionPendingEdit {
+  modifications: VisionFileModification[];
+  aggregatedPreviewCSS: string;
+  explanation: string;
+}
+
+// ---- Apply-First Mode Types (Cursor-style instant preview) ----
+
+export interface ApplyFirstSession {
+  sessionId: string;
+  modifications: VisionFileModification[];
+  appliedAt: number;
+  status: 'applied' | 'accepted' | 'reverted';
+  backupPaths: string[];
+}
+
+export type ApplyFirstStatus =
+  | 'idle'           // No active session
+  | 'generating'     // AI is generating changes
+  | 'applying'       // Writing files to disk
+  | 'waiting-hmr'    // Waiting for HMR to show changes
+  | 'reviewing'      // User is reviewing actual changes
+  | 'accepting'      // User clicked accept, cleaning up backups
+  | 'reverting'      // User clicked revert, restoring backups
+  | 'error';         // Something went wrong
+
+export interface ApplyFirstRequest {
+  action: "apply" | "accept" | "revert";
+  sessionId?: string;
+  screenshot?: string;
+  pageRoute?: string;
+  userPrompt?: string;
+  focusedElements?: VisionFocusedElement[];
+}
+
+export interface ApplyFirstResponse {
+  success: boolean;
+  sessionId?: string;
+  modifications?: VisionFileModification[];
+  backupPaths?: string[];
+  explanation?: string;
+  reasoning?: string;
+  error?: string;
+}