sonance-brand-mcp 1.3.15 → 1.3.16

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

@@ -1,10 +1,31 @@
-// Sonance DevTools - Development-only brand theming overlay
-// 
-// Usage:
-// import { SonanceDevTools } from '@/components/dev-tools';
-// 
-// In your root layout:
-// {process.env.NODE_ENV === 'development' && <SonanceDevTools />}
+// Main component
+export { SonanceDevTools } from "./SonanceDevTools";
 
-export { SonanceDevTools, default } from './SonanceDevTools';
+// Types
+export * from "./types";
 
+// Constants
+export * from "./constants";
+
+// Utilities (explicit exports to avoid conflict with constants.ts getVisibleSections)
+export {
+  generateComponentCSS,
+  injectPreviewStyles,
+  removePreviewStyles,
+  tailwindClassToCSS,
+  extractPreviewCSSFromCode,
+  shouldShowScopeOptions,
+} from "./utils";
+
+// Shared Components
+export { Section, ColorSwatch, SelectField } from "./components/common";
+export { InspectorOverlay } from "./components/InspectorOverlay";
+export { ChatInterface } from "./components/ChatInterface";
+export { DiffPreview } from "./components/DiffPreview";
+
+// Panels
+export { AnalysisPanel } from "./panels/AnalysisPanel";
+export { TextPanel } from "./panels/TextPanel";
+export { LogoToolsPanel } from "./panels/LogoToolsPanel";
+export { LogosPanel } from "./panels/LogosPanel";
+export { ComponentsPanel } from "./panels/ComponentsPanel";

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

@@ -0,0 +1,329 @@
+"use client";
+
+import React from "react";
+import { Scan, Loader2, AlertCircle, RotateCcw, Image as ImageIcon, Type, MousePointer, Box, FormInput, CheckCircle, Wand2 } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { AnalysisResult, AnalysisStatus } from "../types";
+
+export interface AnalysisPanelProps {
+  analysisStatus: AnalysisStatus;
+  analysisResult: AnalysisResult | null;
+  analysisError: string;
+  bulkTagStatus: "idle" | "tagging" | "complete";
+  bulkTagMessage: string;
+  onRunAnalysis: () => void;
+  onBulkTag: (elementIds?: string[], category?: string) => void;
+}
+
+export function AnalysisPanel({
+  analysisStatus,
+  analysisResult,
+  analysisError,
+  bulkTagStatus,
+  bulkTagMessage,
+  onRunAnalysis,
+  onBulkTag,
+}: AnalysisPanelProps) {
+  return (
+    <div className="space-y-4">
+      {/* 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>
+          <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.
+            </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"
+          >
+            <Scan className="h-4 w-4" />
+            Scan Project
+          </button>
+        </div>
+      )}
+
+      {/* 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>
+          <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.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* 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>
+          <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>
+          </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"
+          >
+            <RotateCcw className="h-4 w-4" />
+            Try Again
+          </button>
+        </div>
+      )}
+
+      {/* Results */}
+      {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>
+            <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>
+            <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>
+          </div>
+
+          {/* Category Breakdown */}
+          <div className="space-y-2">
+            <h4 id="analysis-panel-h4-elements-by-category" className="text-xs font-medium text-gray-500 uppercase tracking-wide">Elements by Category</h4>
+            <div className="space-y-1.5">
+              {/* Images */}
+              {(() => {
+                const cat = analysisResult.summary.byCategory?.image;
+                const total = cat?.total || analysisResult.summary.totalImages;
+                const withId = cat?.withId || analysisResult.summary.imagesWithId;
+                const missingId = cat?.missingId || analysisResult.summary.imagesMissingId;
+                const isComplete = withId === total && total > 0;
+                return (
+                  <div className={cn(
+                    "flex items-center justify-between p-2 rounded border",
+                    isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                  )}>
+                    <div className="flex items-center gap-2">
+                      <ImageIcon className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-blue-600")} />
+                      <span id="analysis-panel-span-images" className="text-xs font-medium">Images</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span id="analysis-panel-span-withidtotal" className={isComplete ? "text-green-700" : "text-gray-600"}>{withId}/{total}</span>
+                      {missingId > 0 && (
+                        <button
+                          onClick={() => onBulkTag(undefined, "image")}
+                          disabled={bulkTagStatus === "tagging"}
+                          className="px-1.5 py-0.5 text-[10px] font-medium text-white bg-blue-500 hover:bg-blue-600 rounded disabled:opacity-50"
+                        >
+                          Tag {missingId}
+                        </button>
+                      )}
+                      {isComplete && <CheckCircle className="h-3 w-3 text-green-600" />}
+                    </div>
+                  </div>
+                );
+              })()}
+              
+              {/* Text Elements */}
+              {analysisResult.summary.byCategory?.text && (() => {
+                const cat = analysisResult.summary.byCategory.text;
+                const isComplete = cat.withId === cat.total && cat.total > 0;
+                return (
+                  <div className={cn(
+                    "flex items-center justify-between p-2 rounded border",
+                    isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                  )}>
+                    <div className="flex items-center gap-2">
+                      <Type className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-purple-600")} />
+                      <span id="analysis-panel-span-text" className="text-xs font-medium">Text</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span id="analysis-panel-span-catwithidcattotal" className={isComplete ? "text-green-700" : "text-gray-600"}>{cat.withId}/{cat.total}</span>
+                      {cat.missingId > 0 && (
+                        <button
+                          onClick={() => onBulkTag(undefined, "text")}
+                          disabled={bulkTagStatus === "tagging"}
+                          className="px-1.5 py-0.5 text-[10px] font-medium text-white bg-purple-500 hover:bg-purple-600 rounded disabled:opacity-50"
+                        >
+                          Tag {cat.missingId}
+                        </button>
+                      )}
+                      {isComplete && <CheckCircle className="h-3 w-3 text-green-600" />}
+                    </div>
+                  </div>
+                );
+              })()}
+              
+              {/* Interactive (Buttons, Links) */}
+              {analysisResult.summary.byCategory?.interactive && (() => {
+                const cat = analysisResult.summary.byCategory.interactive;
+                const isComplete = cat.withId === cat.total && cat.total > 0;
+                return (
+                  <div className={cn(
+                    "flex items-center justify-between p-2 rounded border",
+                    isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                  )}>
+                    <div className="flex items-center gap-2">
+                      <MousePointer className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-cyan-600")} />
+                      <span id="analysis-panel-span-interactive" className="text-xs font-medium">Interactive</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span id="analysis-panel-span-catwithidcattotal" className={isComplete ? "text-green-700" : "text-gray-600"}>{cat.withId}/{cat.total}</span>
+                      {cat.missingId > 0 && (
+                        <button
+                          onClick={() => onBulkTag(undefined, "interactive")}
+                          disabled={bulkTagStatus === "tagging"}
+                          className="px-1.5 py-0.5 text-[10px] font-medium text-white bg-cyan-500 hover:bg-cyan-600 rounded disabled:opacity-50"
+                        >
+                          Tag {cat.missingId}
+                        </button>
+                      )}
+                      {isComplete && <CheckCircle className="h-3 w-3 text-green-600" />}
+                    </div>
+                  </div>
+                );
+              })()}
+              
+              {/* Component Definitions */}
+              {analysisResult.summary.byCategory?.definition && (() => {
+                const cat = analysisResult.summary.byCategory.definition;
+                const isComplete = cat.withId === cat.total && cat.total > 0;
+                return (
+                  <div className={cn(
+                    "flex items-center justify-between p-2 rounded border",
+                    isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                  )}>
+                    <div className="flex items-center gap-2">
+                      <Box className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-violet-600")} />
+                      <span id="analysis-panel-span-definitions" className="text-xs font-medium">Components</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span id="analysis-panel-span-defwithidtotal" className={isComplete ? "text-green-700" : "text-gray-600"}>{cat.withId}/{cat.total}</span>
+                      {cat.missingId > 0 && (
+                        <button
+                          onClick={() => onBulkTag(undefined, "definition")}
+                          disabled={bulkTagStatus === "tagging"}
+                          className="px-1.5 py-0.5 text-[10px] font-medium text-white bg-violet-500 hover:bg-violet-600 rounded disabled:opacity-50"
+                        >
+                          Tag {cat.missingId}
+                        </button>
+                      )}
+                      {isComplete && <CheckCircle className="h-3 w-3 text-green-600" />}
+                    </div>
+                  </div>
+                );
+              })()}
+              
+              {/* Inputs */}
+              {analysisResult.summary.byCategory?.input && (() => {
+                const cat = analysisResult.summary.byCategory.input;
+                const isComplete = cat.withId === cat.total && cat.total > 0;
+                return (
+                  <div className={cn(
+                    "flex items-center justify-between p-2 rounded border",
+                    isComplete ? "border-green-200 bg-green-50" : "border-gray-200 bg-gray-50"
+                  )}>
+                    <div className="flex items-center gap-2">
+                      <FormInput className={cn("h-3.5 w-3.5", isComplete ? "text-green-600" : "text-orange-600")} />
+                      <span id="analysis-panel-span-inputs" className="text-xs font-medium">Inputs</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span id="analysis-panel-span-catwithidcattotal" className={isComplete ? "text-green-700" : "text-gray-600"}>{cat.withId}/{cat.total}</span>
+                      {cat.missingId > 0 && (
+                        <button
+                          onClick={() => onBulkTag(undefined, "input")}
+                          disabled={bulkTagStatus === "tagging"}
+                          className="px-1.5 py-0.5 text-[10px] font-medium text-white bg-orange-500 hover:bg-orange-600 rounded disabled:opacity-50"
+                        >
+                          Tag {cat.missingId}
+                        </button>
+                      )}
+                      {isComplete && <CheckCircle className="h-3 w-3 text-green-600" />}
+                    </div>
+                  </div>
+                );
+              })()}
+            </div>
+          </div>
+
+          {/* Auto-Tag All Button */}
+          {analysisResult.summary.elementsMissingId > 0 && (
+            <div className="space-y-2 pt-2 border-t border-gray-200">
+              {bulkTagMessage && (
+                <div className={cn(
+                  "p-2 rounded text-xs",
+                  bulkTagStatus === "complete" && bulkTagMessage.includes("failed")
+                    ? "bg-amber-50 text-amber-700 border border-amber-200"
+                    : "bg-green-50 text-green-700 border border-green-200"
+                )}>
+                  {bulkTagMessage}
+                </div>
+              )}
+              
+              <button
+                onClick={() => onBulkTag()}
+                disabled={bulkTagStatus === "tagging"}
+                className={cn(
+                  "w-full flex items-center justify-center gap-2 px-3 py-2",
+                  "text-sm font-medium text-white rounded transition-colors",
+                  "bg-[#333F48] hover:bg-[#2a343c]",
+                  "disabled:opacity-50 disabled:cursor-not-allowed"
+                )}
+              >
+                {bulkTagStatus === "tagging" ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Tagging...
+                  </>
+                ) : (
+                  <>
+                    <Wand2 className="h-4 w-4" />
+                    Auto-Tag All ({analysisResult.summary.elementsMissingId})
+                  </>
+                )}
+              </button>
+            </div>
+          )}
+
+          {/* All Elements Have IDs */}
+          {analysisResult.summary.elementsMissingId === 0 && analysisResult.summary.totalElements > 0 && (
+            <div className="flex items-center gap-2 p-3 rounded border border-green-200 bg-green-50">
+              <CheckCircle className="h-5 w-5 text-green-600 shrink-0" />
+              <div>
+                <p id="analysis-panel-p-all-elements-have-id" className="text-xs font-medium text-green-700">All elements have IDs!</p>
+                <p id="analysis-panel-p-ready-for-individual" className="text-[10px] text-green-600">Ready for individual styling.</p>
+              </div>
+            </div>
+          )}
+
+          {/* Re-scan button */}
+          <div className="text-xs text-gray-400 flex items-center justify-between pt-2">
+            <span id="analysis-panel-span-scanned-in-analysisr">Scanned in {analysisResult.scanDuration}ms</span>
+            <button
+              onClick={onRunAnalysis}
+              className="text-[#00A3E1] hover:underline"
+            >
+              Re-scan
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+