sonance-brand-mcp 1.3.110 → 1.3.112

package/dist/assets/dev-tools/hooks/useComputedStyles.ts

@@ -0,0 +1,471 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import type { VisionFocusedElement } from "../types";
+
+export interface ComputedGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation: number;
+}
+
+export interface ComputedTypography {
+  fontFamily: string;
+  fontSize: string;
+  fontWeight: string;
+  lineHeight: string;
+  letterSpacing: string;
+  textAlign: string;
+  color: string;
+}
+
+export interface ComputedFill {
+  type: "solid" | "gradient" | "image";
+  color?: string;
+  opacity: number;
+}
+
+export interface ComputedStroke {
+  color: string;
+  width: string;
+  style: string;
+}
+
+export interface ComputedEffect {
+  type: "shadow" | "blur";
+  value: string;
+}
+
+export interface ComputedStyles {
+  // Element Info
+  tagName: string;
+  className: string;
+  id: string;
+  
+  // Geometry (Layout)
+  geometry: ComputedGeometry;
+  
+  // Appearance
+  opacity: number;
+  borderRadius: string;
+  overflow: string;
+  
+  // Typography (for text elements)
+  typography: ComputedTypography | null;
+  hasText: boolean;
+  textContent: string;
+  
+  // Fills (backgrounds)
+  fills: ComputedFill[];
+  
+  // Strokes (borders)
+  strokes: ComputedStroke[];
+  
+  // Effects (shadows, filters)
+  effects: ComputedEffect[];
+  
+  // Display & Layout
+  display: string;
+  flexDirection: string;
+  alignItems: string;
+  justifyContent: string;
+  gap: string;
+  padding: string;
+  margin: string;
+}
+
+function parseColor(color: string): { color: string; opacity: number } {
+  // Handle rgba
+  const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+  if (rgbaMatch) {
+    const [, r, g, b, a] = rgbaMatch;
+    const hex = `#${parseInt(r).toString(16).padStart(2, '0')}${parseInt(g).toString(16).padStart(2, '0')}${parseInt(b).toString(16).padStart(2, '0')}`;
+    return { color: hex.toUpperCase(), opacity: a ? parseFloat(a) : 1 };
+  }
+  
+  // Handle hex
+  if (color.startsWith('#')) {
+    return { color: color.toUpperCase(), opacity: 1 };
+  }
+  
+  // Handle transparent
+  if (color === 'transparent') {
+    return { color: 'transparent', opacity: 0 };
+  }
+  
+  return { color, opacity: 1 };
+}
+
+function extractFills(styles: CSSStyleDeclaration): ComputedFill[] {
+  const fills: ComputedFill[] = [];
+  
+  const bg = styles.backgroundColor;
+  if (bg && bg !== 'transparent' && bg !== 'rgba(0, 0, 0, 0)') {
+    const { color, opacity } = parseColor(bg);
+    fills.push({ type: 'solid', color, opacity });
+  }
+  
+  const bgImage = styles.backgroundImage;
+  if (bgImage && bgImage !== 'none') {
+    if (bgImage.includes('gradient')) {
+      fills.push({ type: 'gradient', color: bgImage, opacity: 1 });
+    } else if (bgImage.includes('url')) {
+      fills.push({ type: 'image', opacity: 1 });
+    }
+  }
+  
+  return fills;
+}
+
+function extractStrokes(styles: CSSStyleDeclaration): ComputedStroke[] {
+  const strokes: ComputedStroke[] = [];
+  
+  const borderWidth = styles.borderWidth;
+  const borderColor = styles.borderColor;
+  const borderStyle = styles.borderStyle;
+  
+  if (borderWidth && borderWidth !== '0px' && borderStyle !== 'none') {
+    const { color } = parseColor(borderColor);
+    strokes.push({
+      color,
+      width: borderWidth,
+      style: borderStyle,
+    });
+  }
+  
+  return strokes;
+}
+
+function extractEffects(styles: CSSStyleDeclaration): ComputedEffect[] {
+  const effects: ComputedEffect[] = [];
+  
+  const boxShadow = styles.boxShadow;
+  if (boxShadow && boxShadow !== 'none') {
+    effects.push({ type: 'shadow', value: boxShadow });
+  }
+  
+  const filter = styles.filter;
+  if (filter && filter !== 'none') {
+    effects.push({ type: 'blur', value: filter });
+  }
+  
+  return effects;
+}
+
+function isTextElement(element: HTMLElement): boolean {
+  const textTags = ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'SPAN', 'A', 'LABEL', 'LI', 'TD', 'TH', 'BUTTON'];
+  if (textTags.includes(element.tagName)) return true;
+  
+  // Check if element has direct text content
+  const hasDirectText = Array.from(element.childNodes).some(
+    node => node.nodeType === Node.TEXT_NODE && node.textContent?.trim()
+  );
+  
+  return hasDirectText;
+}
+
+export function useComputedStyles(elementId: string | null, variantId?: string | null): ComputedStyles | null {
+  const [styles, setStyles] = useState<ComputedStyles | null>(null);
+
+  const extractStyles = useCallback(() => {
+    if (!elementId) {
+      setStyles(null);
+      return;
+    }
+
+    // Try to find element by ID first, then by data attributes
+    let element: HTMLElement | null = document.getElementById(elementId);
+    
+    if (!element) {
+      // Try finding by component type and variant
+      const selector = variantId 
+        ? `[data-component-type="${elementId}"][data-variant-id="${variantId}"]`
+        : `[data-component-type="${elementId}"]`;
+      element = document.querySelector(selector);
+    }
+    
+    if (!element) {
+      // Try finding any element with matching text content or class
+      const allElements = document.querySelectorAll('button, a, [role="button"], input, select, textarea, h1, h2, h3, h4, h5, h6, p, span');
+      for (const el of allElements) {
+        if (el.id === elementId || el.className.includes(elementId)) {
+          element = el as HTMLElement;
+          break;
+        }
+      }
+    }
+
+    if (!element) {
+      setStyles(null);
+      return;
+    }
+
+    const computed = window.getComputedStyle(element);
+    const rect = element.getBoundingClientRect();
+    
+    // Extract rotation from transform matrix
+    let rotation = 0;
+    const transform = computed.transform;
+    if (transform && transform !== 'none') {
+      const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+      if (matrixMatch) {
+        const values = matrixMatch[1].split(',').map(v => parseFloat(v.trim()));
+        rotation = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
+      }
+    }
+
+    const hasText = isTextElement(element);
+    const textContent = element.textContent?.trim() || '';
+
+    const computedStyles: ComputedStyles = {
+      tagName: element.tagName.toLowerCase(),
+      className: element.className?.toString() || '',
+      id: element.id || '',
+      
+      geometry: {
+        x: Math.round(rect.left),
+        y: Math.round(rect.top),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+        rotation,
+      },
+      
+      opacity: parseFloat(computed.opacity) * 100,
+      borderRadius: computed.borderRadius,
+      overflow: computed.overflow,
+      
+      typography: hasText ? {
+        fontFamily: computed.fontFamily.split(',')[0].replace(/['"]/g, ''),
+        fontSize: computed.fontSize,
+        fontWeight: computed.fontWeight,
+        lineHeight: computed.lineHeight,
+        letterSpacing: computed.letterSpacing,
+        textAlign: computed.textAlign,
+        color: parseColor(computed.color).color,
+      } : null,
+      hasText,
+      textContent,
+      
+      fills: extractFills(computed),
+      strokes: extractStrokes(computed),
+      effects: extractEffects(computed),
+      
+      display: computed.display,
+      flexDirection: computed.flexDirection,
+      alignItems: computed.alignItems,
+      justifyContent: computed.justifyContent,
+      gap: computed.gap,
+      padding: computed.padding,
+      margin: computed.margin,
+    };
+
+    setStyles(computedStyles);
+  }, [elementId, variantId]);
+
+  useEffect(() => {
+    extractStyles();
+    
+    // Re-extract on resize/scroll
+    const handleUpdate = () => extractStyles();
+    window.addEventListener('resize', handleUpdate);
+    window.addEventListener('scroll', handleUpdate, true);
+    
+    return () => {
+      window.removeEventListener('resize', handleUpdate);
+      window.removeEventListener('scroll', handleUpdate, true);
+    };
+  }, [extractStyles]);
+
+  return styles;
+}
+
+/**
+ * Multi-strategy element finding for robustness after HMR
+ * Tries multiple methods to find the element, falling back through them
+ * 
+ * Priority order:
+ * 1. Element ID with styled child detection (most reliable for nested styled elements)
+ * 2. Text content with span priority (finds styled inline elements)
+ * 3. Coordinates (fallback for when other strategies fail)
+ * 
+ * Note: Coordinates are stored as screen coordinates at click time and become
+ * invalid after scroll/layout changes, so they're used as a fallback, not primary.
+ */
+function findElementByMultipleStrategies(focusedElement: VisionFocusedElement): HTMLElement | null {
+  // Strategy 1: Find by element ID with styled child detection
+  // This handles cases where the detected element is a container (like <p>)
+  // but the actual styled element is a child (like <span style="color:...">)
+  if (focusedElement.elementId) {
+    const byId = document.getElementById(focusedElement.elementId);
+    if (byId && !byId.closest('[data-sonance-devtools="true"]')) {
+      // First, check if there's a styled child element with inline color
+      const styledChild = byId.querySelector('[style*="color"]') as HTMLElement;
+      if (styledChild) {
+        return styledChild;
+      }
+      // No styled child, return the element itself
+      return byId;
+    }
+  }
+  
+  // Strategy 2: Find by text content, prioritizing span elements (which often have styling)
+  if (focusedElement.textContent) {
+    const textToFind = focusedElement.textContent.trim();
+    if (textToFind.length > 0) {
+      // Search specifically for span first (inline styled elements), then other text elements
+      const spanCandidates = document.querySelectorAll('span');
+      for (const el of spanCandidates) {
+        if (el.closest('[data-sonance-devtools="true"]')) continue;
+        const elText = el.textContent?.trim() || '';
+        const compareLength = Math.min(30, textToFind.length);
+        if (elText.startsWith(textToFind.substring(0, compareLength))) {
+          return el as HTMLElement;
+        }
+      }
+      
+      // Fallback to other text elements
+      const candidates = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, label, button, a, td, th, li, div');
+      for (const el of candidates) {
+        if (el.closest('[data-sonance-devtools="true"]')) continue;
+        const elText = el.textContent?.trim() || '';
+        const compareLength = Math.min(30, textToFind.length);
+        if (elText.startsWith(textToFind.substring(0, compareLength))) {
+          // Check if this element has a styled span child
+          const styledSpan = el.querySelector('span[style*="color"]') as HTMLElement;
+          if (styledSpan) {
+            return styledSpan;
+          }
+          return el as HTMLElement;
+        }
+      }
+    }
+  }
+  
+  // Strategy 3: Find by coordinates (fallback - coordinates may be stale after scroll)
+  const { coordinates } = focusedElement;
+  if (coordinates) {
+    const centerX = coordinates.x + coordinates.width / 2;
+    const centerY = coordinates.y + coordinates.height / 2;
+    const byCoords = document.elementFromPoint(centerX, centerY) as HTMLElement;
+    if (byCoords && !byCoords.closest('[data-sonance-devtools="true"]')) {
+      return byCoords;
+    }
+  }
+  
+  return null;
+}
+
+// Enhanced version that works with full VisionFocusedElement for robust element finding
+export function useElementFromCoordinates(focusedElement: VisionFocusedElement | null): ComputedStyles | null {
+  const [styles, setStyles] = useState<ComputedStyles | null>(null);
+  const [refreshCounter, setRefreshCounter] = useState(0);
+
+  useEffect(() => {
+    if (!focusedElement) {
+      setStyles(null);
+      return;
+    }
+
+    // Use multi-strategy element finding for robustness after HMR
+    const element = findElementByMultipleStrategies(focusedElement);
+
+    if (!element) {
+      setStyles(null);
+      return;
+    }
+
+    const extractAndSetStyles = () => {
+      const computed = window.getComputedStyle(element);
+      const rect = element.getBoundingClientRect();
+
+      let rotation = 0;
+      const transform = computed.transform;
+      if (transform && transform !== 'none') {
+        const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+        if (matrixMatch) {
+          const values = matrixMatch[1].split(',').map(v => parseFloat(v.trim()));
+          rotation = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
+        }
+      }
+
+      const hasText = isTextElement(element);
+      const textContent = element.textContent?.trim() || '';
+
+      setStyles({
+        tagName: element.tagName.toLowerCase(),
+        className: element.className?.toString() || '',
+        id: element.id || '',
+
+        geometry: {
+          x: Math.round(rect.left),
+          y: Math.round(rect.top),
+          width: Math.round(rect.width),
+          height: Math.round(rect.height),
+          rotation,
+        },
+
+        opacity: parseFloat(computed.opacity) * 100,
+        borderRadius: computed.borderRadius,
+        overflow: computed.overflow,
+
+        typography: hasText ? {
+          fontFamily: computed.fontFamily.split(',')[0].replace(/['"]/g, ''),
+          fontSize: computed.fontSize,
+          fontWeight: computed.fontWeight,
+          lineHeight: computed.lineHeight,
+          letterSpacing: computed.letterSpacing,
+          textAlign: computed.textAlign,
+          color: parseColor(computed.color).color,
+        } : null,
+        hasText,
+        textContent,
+
+        fills: extractFills(computed),
+        strokes: extractStrokes(computed),
+        effects: extractEffects(computed),
+
+        display: computed.display,
+        flexDirection: computed.flexDirection,
+        alignItems: computed.alignItems,
+        justifyContent: computed.justifyContent,
+        gap: computed.gap,
+        padding: computed.padding,
+        margin: computed.margin,
+      });
+    };
+
+    // Initial extraction
+    extractAndSetStyles();
+
+    // Watch for DOM changes (HMR updates) using MutationObserver
+    const observer = new MutationObserver((mutations) => {
+      // Check if any mutation affects our element's content
+      for (const mutation of mutations) {
+        if (mutation.type === 'characterData' ||
+            mutation.type === 'childList' ||
+            (mutation.type === 'attributes' && mutation.target === element)) {
+          // Trigger a refresh
+          setRefreshCounter(c => c + 1);
+          break;
+        }
+      }
+    });
+
+    // Observe the element and its subtree for changes
+    observer.observe(element, {
+      characterData: true,
+      childList: true,
+      subtree: true,
+      attributes: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [focusedElement, refreshCounter]);
+
+  return styles;
+}
+

package/dist/assets/dev-tools/hooks/useContentHash.ts

@@ -0,0 +1,212 @@
+"use client";
+
+/**
+ * Content-based hashing utilities for generating stable element IDs
+ *
+ * Instead of sequential IDs (text-0, logo-1) that change on re-render,
+ * we generate IDs based on element content that persist across page loads.
+ */
+
+/**
+ * Fast hash function (djb2 algorithm)
+ * Produces a short, consistent hash string from any input
+ */
+export function hashString(str: string): string {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) + hash) ^ str.charCodeAt(i);
+  }
+  // Convert to hex and take last 8 chars for brevity
+  return (hash >>> 0).toString(16).padStart(8, "0");
+}
+
+/**
+ * Get a stable DOM path for an element (up to 3 levels)
+ * This helps differentiate elements with similar content in different locations
+ */
+function getDOMPath(element: Element, maxDepth: number = 3): string {
+  const path: string[] = [];
+  let current: Element | null = element;
+  let depth = 0;
+
+  while (current && current !== document.body && depth < maxDepth) {
+    const tag = current.tagName.toLowerCase();
+    const parent: Element | null = current.parentElement;
+
+    if (parent) {
+      // Get index among siblings of same type
+      const siblings = Array.from(parent.children).filter(
+        (child) => child.tagName === current!.tagName
+      );
+      const index = siblings.indexOf(current);
+      path.unshift(`${tag}[${index}]`);
+    } else {
+      path.unshift(tag);
+    }
+
+    current = parent;
+    depth++;
+  }
+
+  return path.join(">");
+}
+
+/**
+ * Generate a stable ID for text elements
+ * Based on: tagName + truncated textContent + DOM path
+ */
+export function generateTextElementId(element: Element): string {
+  const tagName = element.tagName.toLowerCase();
+  const textContent = (element.textContent || "").trim().substring(0, 50);
+  const domPath = getDOMPath(element);
+
+  const signature = `text:${tagName}:${textContent}:${domPath}`;
+  return `text-${hashString(signature)}`;
+}
+
+/**
+ * Generate a stable ID for image elements
+ * Based on: src (normalized) + alt + natural dimensions
+ */
+export function generateImageElementId(img: HTMLImageElement): string {
+  // Normalize src by removing query params and getting filename
+  const src = img.src || img.getAttribute("src") || "";
+  const srcPath = src.split("?")[0].split("/").pop() || src;
+  const alt = img.alt || "";
+  const dimensions = `${img.naturalWidth || 0}x${img.naturalHeight || 0}`;
+
+  const signature = `img:${srcPath}:${alt}:${dimensions}`;
+  return `logo-${hashString(signature)}`;
+}
+
+/**
+ * Generate a stable ID for component elements
+ * Based on: component name + variant styles + DOM path
+ */
+export function generateComponentId(element: Element): string {
+  const name = element.getAttribute("data-sonance-name") || element.tagName.toLowerCase();
+  const className = element.className?.toString() || "";
+  const domPath = getDOMPath(element);
+
+  const signature = `comp:${name}:${className}:${domPath}`;
+  return `comp-${hashString(signature)}`;
+}
+
+/**
+ * Generate a variant ID based on computed styles
+ * This groups visually identical components together
+ */
+export function generateVariantId(element: Element): string {
+  const className = element.className?.toString() || "";
+  const computed = window.getComputedStyle(element);
+
+  const styleSignature = [
+    className,
+    computed.backgroundColor,
+    computed.borderColor,
+    computed.borderRadius,
+    computed.color,
+  ].join("|");
+
+  return hashString(styleSignature);
+}
+
+/**
+ * Migration utilities for backwards compatibility with old sequential IDs
+ */
+
+interface LegacyIdMapping {
+  oldId: string;
+  newId: string;
+  selector: string;
+  textContent?: string;
+}
+
+/**
+ * Migrate old sequential IDs to new content-based IDs
+ * Returns a mapping that can be used to update localStorage entries
+ */
+export function migrateLegacyIds(
+  type: "text" | "logo",
+  oldOverrides: Record<string, unknown>
+): { migrated: Record<string, unknown>; mappings: LegacyIdMapping[] } {
+  const migrated: Record<string, unknown> = {};
+  const mappings: LegacyIdMapping[] = [];
+
+  // Pattern for old sequential IDs
+  const legacyPattern = type === "text" ? /^text-\d+$/ : /^logo-\d+$/;
+
+  for (const [oldId, value] of Object.entries(oldOverrides)) {
+    if (legacyPattern.test(oldId)) {
+      // Try to find the element and generate new ID
+      const selector = `[data-sonance-${type}-id="${oldId}"]`;
+      const element = document.querySelector(selector);
+
+      if (element) {
+        const newId = type === "text"
+          ? generateTextElementId(element)
+          : generateImageElementId(element as HTMLImageElement);
+
+        migrated[newId] = value;
+        mappings.push({
+          oldId,
+          newId,
+          selector,
+          textContent: element.textContent?.substring(0, 50),
+        });
+
+        // Update the element's data attribute to use new ID
+        element.setAttribute(`data-sonance-${type}-id`, newId);
+      } else {
+        // Element not found - keep old ID for now
+        migrated[oldId] = value;
+      }
+    } else {
+      // Already using new format or unknown format - keep as is
+      migrated[oldId] = value;
+    }
+  }
+
+  return { migrated, mappings };
+}
+
+/**
+ * Check if an ID is in the legacy sequential format
+ */
+export function isLegacyId(id: string): boolean {
+  return /^(text|logo)-\d+$/.test(id);
+}
+
+/**
+ * Storage key constants for migration tracking
+ */
+export const MIGRATION_STORAGE_KEY = "sonance-id-migration-complete";
+export const MIGRATION_VERSION = 1;
+
+/**
+ * Check if migration has already been performed
+ */
+export function isMigrationComplete(): boolean {
+  try {
+    const stored = localStorage.getItem(MIGRATION_STORAGE_KEY);
+    if (!stored) return false;
+    const { version } = JSON.parse(stored);
+    return version >= MIGRATION_VERSION;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Mark migration as complete
+ */
+export function markMigrationComplete(): void {
+  try {
+    localStorage.setItem(
+      MIGRATION_STORAGE_KEY,
+      JSON.stringify({ version: MIGRATION_VERSION, timestamp: Date.now() })
+    );
+  } catch {
+    // Ignore storage errors
+  }
+}