sonance-brand-mcp 1.3.110 → 1.3.112

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,
+  };
+}

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

@@ -21,6 +21,9 @@ export {
 export { Section, ColorSwatch, SelectField } from "./components/common";
 export { InspectorOverlay } from "./components/InspectorOverlay";
 export { ChatInterface } from "./components/ChatInterface";
+export { ChatTabBar } from "./components/ChatTabBar";
+export { ChatHistory } from "./components/ChatHistory";
+export { InlineDiffPreview } from "./components/InlineDiffPreview";
 export { DiffPreview } from "./components/DiffPreview";
 
 // Panels

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

@@ -25,24 +25,24 @@ export function AnalysisPanel({
   onBulkTag,
 }: AnalysisPanelProps) {
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       {/* Initial State */}
       {analysisStatus === "idle" && !analysisResult && (
-        <div className="text-center py-6 space-y-4">
-          <div className="mx-auto w-14 h-14 rounded-full bg-gray-100 flex items-center justify-center">
-            <Scan className="h-7 w-7 text-gray-400" />
+        <div className="text-center py-4 space-y-3">
+          <div className="mx-auto w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
+            <Scan className="h-5 w-5 text-gray-400" />
           </div>
           <div>
-            <h3 id="analysis-panel-h3-analyze-your-project" className="text-base font-medium">Analyze Your Project</h3>
-            <p id="analysis-panel-p-scan-your-codebase-t" className="text-xs text-gray-500 mt-1">
-              Scan your codebase to index all images, logos, and theme files.
+            <h3 id="analysis-panel-h3-analyze-your-project" className="text-sm font-medium">Analyze Project</h3>
+            <p id="analysis-panel-p-scan-your-codebase-t" className="text-[11px] text-gray-500 mt-0.5">
+              Index images, logos, and theme files.
             </p>
           </div>
           <button
             onClick={onRunAnalysis}
-            className="inline-flex items-center gap-2 px-4 py-2 bg-[#333F48] text-white text-sm font-medium rounded hover:bg-[#2a343c] transition-colors"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-[#333F48] text-white text-xs font-medium rounded hover:bg-[#2a343c] transition-colors"
           >
-            <Scan className="h-4 w-4" />
+            <Scan className="h-3.5 w-3.5" />
             Scan Project
           </button>
         </div>
@@ -50,14 +50,14 @@ export function AnalysisPanel({
 
       {/* Scanning State */}
       {analysisStatus === "scanning" && (
-        <div className="text-center py-6 space-y-4">
-          <div className="mx-auto w-14 h-14 rounded-full bg-blue-50 flex items-center justify-center">
-            <Loader2 className="h-7 w-7 text-[#00A3E1] animate-spin" />
+        <div className="text-center py-4 space-y-3">
+          <div className="mx-auto w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center">
+            <Loader2 className="h-5 w-5 text-[#00A3E1] animate-spin" />
           </div>
           <div>
-            <h3 id="analysis-panel-h3-scanning" className="text-base font-medium">Scanning...</h3>
-            <p id="analysis-panel-p-analyzing-your-sourc" className="text-xs text-gray-500 mt-1">
-              Analyzing your source files for design assets.
+            <h3 id="analysis-panel-h3-scanning" className="text-sm font-medium">Scanning...</h3>
+            <p id="analysis-panel-p-analyzing-your-sourc" className="text-[11px] text-gray-500 mt-0.5">
+              Analyzing source files.
             </p>
           </div>
         </div>
@@ -65,19 +65,19 @@ export function AnalysisPanel({
 
       {/* Error State */}
       {analysisStatus === "error" && (
-        <div className="text-center py-6 space-y-4">
-          <div className="mx-auto w-14 h-14 rounded-full bg-red-50 flex items-center justify-center">
-            <AlertCircle className="h-7 w-7 text-red-500" />
+        <div className="text-center py-4 space-y-3">
+          <div className="mx-auto w-10 h-10 rounded-full bg-red-50 flex items-center justify-center">
+            <AlertCircle className="h-5 w-5 text-red-500" />
           </div>
           <div>
-            <h3 id="analysis-panel-h3-analysis-failed" className="text-base font-medium text-red-600">Analysis Failed</h3>
-            <p id="analysis-panel-p-analysiserror" className="text-xs text-gray-500 mt-1">{analysisError}</p>
+            <h3 id="analysis-panel-h3-analysis-failed" className="text-sm font-medium text-red-600">Analysis Failed</h3>
+            <p id="analysis-panel-p-analysiserror" className="text-[11px] text-gray-500 mt-0.5">{analysisError}</p>
           </div>
           <button
             onClick={onRunAnalysis}
-            className="inline-flex items-center gap-2 px-4 py-2 bg-[#333F48] text-white text-sm font-medium rounded hover:bg-[#2a343c] transition-colors"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-[#333F48] text-white text-xs font-medium rounded hover:bg-[#2a343c] transition-colors"
           >
-            <RotateCcw className="h-4 w-4" />
+            <RotateCcw className="h-3.5 w-3.5" />
             Try Again
           </button>
         </div>
@@ -87,18 +87,18 @@ export function AnalysisPanel({
       {analysisStatus === "complete" && analysisResult && (
         <>
           {/* Overview Stats */}
-          <div className="grid grid-cols-3 gap-2">
-            <div className="p-2 rounded border border-gray-200 bg-gray-50 text-center">
-              <div className="text-[10px] text-gray-500 uppercase tracking-wide">Files</div>
-              <div className="text-lg font-semibold">{analysisResult.filesScanned}</div>
+          <div className="grid grid-cols-3 gap-1.5">
+            <div className="p-1.5 rounded border border-gray-200 bg-gray-50 text-center">
+              <div className="text-[9px] text-gray-500 uppercase tracking-wide">Files</div>
+              <div className="text-base font-semibold">{analysisResult.filesScanned}</div>
             </div>
-            <div className="p-2 rounded border border-green-200 bg-green-50 text-center">
-              <div className="text-[10px] text-green-600 uppercase tracking-wide">With IDs</div>
-              <div className="text-lg font-semibold text-green-700">{analysisResult.summary.elementsWithId}</div>
+            <div className="p-1.5 rounded border border-green-200 bg-green-50 text-center">
+              <div className="text-[9px] text-green-600 uppercase tracking-wide">With IDs</div>
+              <div className="text-base font-semibold text-green-700">{analysisResult.summary.elementsWithId}</div>
             </div>
-            <div className="p-2 rounded border border-amber-200 bg-amber-50 text-center">
-              <div className="text-[10px] text-amber-600 uppercase tracking-wide">Missing</div>
-              <div className="text-lg font-semibold text-amber-700">{analysisResult.summary.elementsMissingId}</div>
+            <div className="p-1.5 rounded border border-amber-200 bg-amber-50 text-center">
+              <div className="text-[9px] text-amber-600 uppercase tracking-wide">Missing</div>
+              <div className="text-base font-semibold text-amber-700">{analysisResult.summary.elementsMissingId}</div>
             </div>
           </div>