sonance-brand-mcp 1.3.111 → 1.3.113

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

@@ -0,0 +1,162 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import { DetectedElement, OriginalLogoState } from "../types";
+import { generateImageElementId, isLegacyId } from "./useContentHash";
+
+/**
+ * Image detection configuration
+ */
+export interface ImageDetectionConfig {
+  /** Callback to check if element is in active layer */
+  isInActiveLayer: (el: Element) => boolean;
+  /** Current original states (for preserving existing state) */
+  existingOriginalStates?: Record<string, OriginalLogoState>;
+}
+
+/**
+ * Image detection result
+ */
+export interface ImageDetectionResult {
+  elements: DetectedElement[];
+  originalStates: Record<string, OriginalLogoState>;
+}
+
+/**
+ * Extract logo name from image src
+ * Returns name if src contains "logo", null otherwise
+ */
+export function extractLogoName(src: string): string | null {
+  if (!src) return null;
+
+  const lowerSrc = src.toLowerCase();
+  if (!lowerSrc.includes("logo")) return null;
+
+  // Extract filename without extension
+  const filename = src.split("/").pop()?.split("?")[0] || "";
+  const nameWithoutExt = filename.replace(/\.[^/.]+$/, "");
+
+  // Clean up the name
+  return nameWithoutExt
+    .replace(/[-_]/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+/**
+ * Detect images/logos on the page
+ * Identifies logo images and tracks their original state
+ */
+export function detectImages(config: ImageDetectionConfig): ImageDetectionResult {
+  const { isInActiveLayer, existingOriginalStates = {} } = config;
+  const detected: DetectedElement[] = [];
+  const originalStates: Record<string, OriginalLogoState> = { ...existingOriginalStates };
+
+  const images = document.querySelectorAll("img");
+  images.forEach((img) => {
+    if (!isInActiveLayer(img)) return;
+
+    const src = img.src || img.getAttribute("src") || "";
+    const alt = img.alt || "";
+
+    // Check if this is a logo (src or alt contains "logo")
+    const logoName = extractLogoName(src);
+    const altContainsLogo = alt.toLowerCase().includes("logo");
+
+    if (!logoName && !altContainsLogo) return;
+
+    const rect = img.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) return;
+
+    // Get or generate stable ID
+    let logoId = img.getAttribute("data-sonance-logo-id");
+
+    // Check if using legacy sequential ID and migrate if needed
+    if (logoId && isLegacyId(logoId)) {
+      const newId = generateImageElementId(img);
+      img.setAttribute("data-sonance-logo-id", newId);
+
+      // Migrate original state if exists
+      if (originalStates[logoId]) {
+        originalStates[newId] = originalStates[logoId];
+        delete originalStates[logoId];
+      }
+
+      logoId = newId;
+    }
+
+    if (!logoId) {
+      logoId = generateImageElementId(img);
+      img.setAttribute("data-sonance-logo-id", logoId);
+    }
+
+    // Store original state if not already stored
+    if (!originalStates[logoId]) {
+      const originalSrc = img.getAttribute("data-original-src") || src;
+      const originalSrcset = img.getAttribute("data-original-srcset") || img.srcset || "";
+
+      originalStates[logoId] = {
+        src: originalSrc,
+        width: img.naturalWidth || img.width,
+        height: img.naturalHeight || img.height,
+        srcset: originalSrcset || undefined,
+      };
+
+      // Store original src/srcset as data attributes for reset
+      if (!img.getAttribute("data-original-src")) {
+        img.setAttribute("data-original-src", src);
+      }
+      if (!img.getAttribute("data-original-srcset") && img.srcset) {
+        img.setAttribute("data-original-srcset", img.srcset);
+      }
+    }
+
+    const displayName = logoName || alt || "Logo";
+    const imageSrc = img.getAttribute("data-original-src") || src;
+
+    detected.push({
+      name: displayName,
+      rect,
+      type: "logo",
+      logoId,
+      imageSrc,
+    });
+  });
+
+  return { elements: detected, originalStates };
+}
+
+/**
+ * Hook for image detection
+ * Maintains original state across scans
+ */
+export function useImageDetection() {
+  const originalStatesRef = useRef<Record<string, OriginalLogoState>>({});
+
+  const detect = useCallback((config: Omit<ImageDetectionConfig, "existingOriginalStates">): ImageDetectionResult => {
+    const result = detectImages({
+      ...config,
+      existingOriginalStates: originalStatesRef.current,
+    });
+
+    // Update ref with new states
+    originalStatesRef.current = result.originalStates;
+
+    return result;
+  }, []);
+
+  const resetOriginalStates = useCallback(() => {
+    originalStatesRef.current = {};
+  }, []);
+
+  const getOriginalStates = useCallback(() => {
+    return originalStatesRef.current;
+  }, []);
+
+  return {
+    detectImages: detect,
+    resetOriginalStates,
+    getOriginalStates,
+    originalStatesRef,
+  };
+}

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

@@ -0,0 +1,217 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import { DetectedElement, OriginalTextState } from "../types";
+import { generateTextElementId, isLegacyId } from "./useContentHash";
+
+/**
+ * Text detection configuration
+ */
+export interface TextDetectionConfig {
+  /** Callback to check if element is in active layer */
+  isInActiveLayer: (el: Element) => boolean;
+  /** Current original states (for preserving existing state) */
+  existingOriginalStates?: Record<string, OriginalTextState>;
+}
+
+/**
+ * Text detection result
+ */
+export interface TextDetectionResult {
+  elements: DetectedElement[];
+  originalStates: Record<string, OriginalTextState>;
+}
+
+/**
+ * Semantic text element selectors
+ * Only select meaningful text containers - exclude spans as they're usually nested
+ */
+const TEXT_SELECTORS = "h1, h2, h3, h4, h5, h6, p, a, label, blockquote, figcaption, li";
+
+/**
+ * Minimum dimensions to filter out decorative/icon elements
+ */
+const MIN_WIDTH = 20;
+const MIN_HEIGHT = 10;
+const MIN_TEXT_LENGTH = 2;
+
+/**
+ * Check if element has meaningful text content
+ */
+function hasMeaningfulContent(element: Element): boolean {
+  const textContent = element.textContent?.trim() || "";
+
+  if (textContent.length < MIN_TEXT_LENGTH) return false;
+
+  // Skip elements that only contain whitespace/invisible chars
+  if (/^[\s\u200B-\u200D\uFEFF]+$/.test(textContent)) return false;
+
+  return true;
+}
+
+/**
+ * Check if element is nested inside another text element we'd track
+ */
+function isNestedTextElement(element: Element): boolean {
+  const parentTextEl = element.parentElement?.closest(TEXT_SELECTORS);
+
+  if (!parentTextEl) return false;
+
+  // Skip if parent is part of DevTools
+  if (parentTextEl.closest("[data-sonance-devtools]")) return false;
+
+  // Allow links inside paragraphs to be selectable
+  const tagName = element.tagName.toLowerCase();
+  const parentTagName = parentTextEl.tagName.toLowerCase();
+
+  if (tagName === "a" && parentTagName === "p") return false;
+
+  return true;
+}
+
+/**
+ * Get display name for text element
+ */
+function getDisplayName(element: Element, textContent: string): string {
+  const tagName = element.tagName.toLowerCase();
+
+  let displayName: string;
+  switch (tagName) {
+    case "a":
+      displayName = "Link";
+      break;
+    case "li":
+      displayName = "List Item";
+      break;
+    default:
+      displayName = tagName.toUpperCase();
+  }
+
+  const truncatedContent = textContent.length > 30
+    ? textContent.substring(0, 30) + "..."
+    : textContent;
+
+  return `${displayName}: ${truncatedContent}`;
+}
+
+/**
+ * Detect text elements on the page
+ * Filters noise and captures original state
+ */
+export function detectTextElements(config: TextDetectionConfig): TextDetectionResult {
+  const { isInActiveLayer, existingOriginalStates = {} } = config;
+  const detected: DetectedElement[] = [];
+  const originalStates: Record<string, OriginalTextState> = { ...existingOriginalStates };
+
+  // Track added elements to avoid duplicates
+  const addedElements = new Set<Element>();
+
+  const textElements = document.querySelectorAll(TEXT_SELECTORS);
+  textElements.forEach((el) => {
+    // Skip elements outside active layer
+    if (!isInActiveLayer(el)) return;
+
+    // Skip nested text elements (avoid duplicates)
+    if (isNestedTextElement(el)) return;
+
+    // Skip already processed elements
+    if (addedElements.has(el)) return;
+
+    const rect = el.getBoundingClientRect();
+
+    // Filter out small/decorative elements
+    if (rect.width < MIN_WIDTH || rect.height < MIN_HEIGHT) return;
+
+    const textContent = el.textContent?.trim() || "";
+
+    // Skip elements without meaningful content
+    if (!hasMeaningfulContent(el)) return;
+
+    // Skip invisible elements
+    if (rect.width <= 0 || rect.height <= 0) return;
+
+    // Get or generate stable ID
+    let textId = el.getAttribute("data-sonance-text-id");
+
+    // Check if using legacy sequential ID and migrate if needed
+    if (textId && isLegacyId(textId)) {
+      const newId = generateTextElementId(el);
+      el.setAttribute("data-sonance-text-id", newId);
+
+      // Migrate original state if exists
+      if (originalStates[textId]) {
+        originalStates[newId] = originalStates[textId];
+        delete originalStates[textId];
+      }
+
+      textId = newId;
+    }
+
+    if (!textId) {
+      textId = generateTextElementId(el);
+      el.setAttribute("data-sonance-text-id", textId);
+    }
+
+    // Capture original state if not already captured
+    if (!originalStates[textId]) {
+      const computed = window.getComputedStyle(el);
+      originalStates[textId] = {
+        textContent: el.textContent,
+        fontSize: computed.fontSize,
+        fontWeight: computed.fontWeight,
+        lineHeight: computed.lineHeight,
+        letterSpacing: computed.letterSpacing,
+        color: computed.color,
+        fontFamily: computed.fontFamily,
+      };
+    }
+
+    const displayName = getDisplayName(el, textContent);
+
+    addedElements.add(el);
+    detected.push({
+      name: displayName,
+      rect,
+      type: "text",
+      textId,
+      textContent,
+    });
+  });
+
+  return { elements: detected, originalStates };
+}
+
+/**
+ * Hook for text detection
+ * Maintains original state across scans
+ */
+export function useTextDetection() {
+  const originalStatesRef = useRef<Record<string, OriginalTextState>>({});
+
+  const detect = useCallback((config: Omit<TextDetectionConfig, "existingOriginalStates">): TextDetectionResult => {
+    const result = detectTextElements({
+      ...config,
+      existingOriginalStates: originalStatesRef.current,
+    });
+
+    // Update ref with new states
+    originalStatesRef.current = result.originalStates;
+
+    return result;
+  }, []);
+
+  const resetOriginalStates = useCallback(() => {
+    originalStatesRef.current = {};
+  }, []);
+
+  const getOriginalStates = useCallback(() => {
+    return originalStatesRef.current;
+  }, []);
+
+  return {
+    detectTextElements: detect,
+    resetOriginalStates,
+    getOriginalStates,
+    originalStatesRef,
+  };
+}