sonance-brand-mcp 1.3.15 → 1.3.16

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

@@ -0,0 +1,621 @@
+"use client";
+
+import React from "react";
+import { Image as ImageIcon, Sun, Moon, CheckCircle, AlertCircle, Loader2, RotateCcw, Save, Check, Wand2 } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { LogoAsset, LogoOverride, OriginalLogoState, DetectedElement, LogoSaveStatus } from "../types";
+import { Section } from "../components/common";
+
+type AutoFixStatus = "idle" | "fixing" | "success" | "error";
+
+export interface LogoToolsPanelProps {
+  logoAssets: LogoAsset[];
+  logoAssetsByBrand: Record<string, LogoAsset[]>;
+  selectedLogoId: string | null;
+  globalLogoConfig: LogoOverride;
+  individualLogoConfigs: Record<string, LogoOverride>;
+  originalLogoStates: Record<string, OriginalLogoState>;
+  taggedElements: DetectedElement[];
+  onGlobalConfigChange: (config: LogoOverride) => void;
+  onIndividualConfigChange: (logoId: string, config: LogoOverride) => void;
+  onSelectLogo: (logoId: string | null) => void;
+  onResetAll: () => void;
+  onResetLogo: (logoId: string) => void;
+  onSaveChanges: (configOverride?: LogoOverride, brandId?: string, selector?: string, logoId?: string) => void;
+  saveStatus: LogoSaveStatus;
+  saveMessage: string;
+  findComplementaryLogo: (path: string) => { light?: string; dark?: string } | null;
+  currentTheme: string;
+  onAutoFixId: (logoSrc: string, suggestedId: string) => Promise<{ success: boolean; error?: string }>;
+  autoFixStatus: AutoFixStatus;
+  autoFixMessage: string;
+}
+
+/**
+ * Generates a context-aware ID suggestion for a logo element based on its
+ * position in the DOM, parent containers, and attributes.
+ */
+function generateIdSuggestion(logoId: string, brandId?: string): string {
+  // Try to get context from the DOM element
+  const element = document.querySelector(`[data-sonance-logo-id="${logoId}"]`);
+  if (!element) {
+    return brandId ? `${brandId}-logo` : "brand-logo";
+  }
+  
+  // Check parent containers for context
+  const parentNames: string[] = [];
+  let current = element.parentElement;
+  let depth = 0;
+  
+  while (current && depth < 5) {
+    // Check for semantic elements
+    const tagName = current.tagName.toLowerCase();
+    if (["header", "footer", "nav", "aside", "main", "section"].includes(tagName)) {
+      parentNames.unshift(tagName);
+      break;
+    }
+    
+    // Check for data-sonance-name attribute
+    const sonanceName = current.getAttribute("data-sonance-name");
+    if (sonanceName) {
+      parentNames.unshift(sonanceName.toLowerCase().replace(/\s+/g, "-"));
+      break;
+    }
+    
+    // Check for common class hints
+    const classList = current.className;
+    if (typeof classList === "string") {
+      if (classList.includes("header")) parentNames.unshift("header");
+      else if (classList.includes("footer")) parentNames.unshift("footer");
+      else if (classList.includes("sidebar")) parentNames.unshift("sidebar");
+      else if (classList.includes("nav")) parentNames.unshift("nav");
+    }
+    
+    current = current.parentElement;
+    depth++;
+  }
+  
+  // Check alt text for context
+  const altText = element.getAttribute("alt");
+  if (altText) {
+    const cleanAlt = altText.toLowerCase()
+      .replace(/[^a-z0-9\s]/g, "")
+      .replace(/\s+/g, "-")
+      .substring(0, 20);
+    if (cleanAlt && cleanAlt !== "logo") {
+      parentNames.push(cleanAlt);
+    }
+  }
+  
+  // Build the suggested ID
+  const parts: string[] = [];
+  if (parentNames.length > 0) {
+    parts.push(parentNames[0]);
+  }
+  if (brandId) {
+    parts.push(brandId);
+  }
+  parts.push("logo");
+  
+  return parts.join("-");
+}
+
+export function LogoToolsPanel({
+  logoAssets,
+  logoAssetsByBrand,
+  selectedLogoId,
+  globalLogoConfig,
+  individualLogoConfigs,
+  originalLogoStates,
+  taggedElements,
+  onGlobalConfigChange,
+  onIndividualConfigChange,
+  onSelectLogo,
+  onResetAll,
+  onResetLogo,
+  onSaveChanges,
+  saveStatus,
+  saveMessage,
+  findComplementaryLogo,
+  currentTheme,
+  onAutoFixId,
+  autoFixStatus,
+  autoFixMessage,
+}: LogoToolsPanelProps) {
+  const logoElements = taggedElements.filter((el) => el.type === "logo" && el.logoId);
+  const selectedLogo = logoElements.find((el) => el.logoId === selectedLogoId);
+  const selectedConfig = selectedLogoId ? individualLogoConfigs[selectedLogoId] || {} : {};
+  const selectedOriginal = selectedLogoId ? originalLogoStates[selectedLogoId] : null;
+
+  // Attempt to identify the brand and element ID of the selected logo
+  let selectedBrandId: string | undefined;
+  let selectedElementId: string | undefined;
+  
+  if (selectedLogoId) {
+    // Check if the element has an ID attribute for targeted CSS
+    const logoElement = document.querySelector(`[data-sonance-logo-id="${selectedLogoId}"]`);
+    if (logoElement && logoElement.id) {
+      selectedElementId = logoElement.id;
+    }
+  }
+  
+  if (selectedOriginal && selectedOriginal.src) {
+    // Try to find matching asset
+    // Normalize paths for comparison (remove protocol/domain if present)
+    const normalize = (p: string) => p.split("?")[0].split("#")[0]; // remove query/hash
+    const originalPath = normalize(selectedOriginal.src);
+    
+    // Find asset where path ends with the original src filename or vice versa
+    const asset = logoAssets.find(a => 
+      originalPath.endsWith(a.path) || a.path.endsWith(originalPath) || originalPath.includes(a.name)
+    );
+    if (asset) {
+      selectedBrandId = asset.brand;
+    } else {
+      // Fallback: guess from path
+      if (originalPath.toLowerCase().includes("sonance")) selectedBrandId = "sonance";
+      else if (originalPath.toLowerCase().includes("iport")) selectedBrandId = "iport";
+      else if (originalPath.toLowerCase().includes("blaze")) selectedBrandId = "blaze";
+    }
+  }
+
+  // Get sorted brand keys
+  const brandKeys = Object.keys(logoAssetsByBrand).sort();
+
+  return (
+    <div className="space-y-5">
+      {/* Header info */}
+      <div className="p-3 rounded border border-orange-200 bg-orange-50">
+        <p id="analysis-modal-p" className="text-xs text-orange-700">
+          <strong>{logoElements.length}</strong> logo{logoElements.length !== 1 ? "s" : ""} detected on this page.
+          Click a logo on the page to select it for editing.
+        </p>
+      </div>
+
+      {/* Global Controls */}
+      <Section title="Replace All Logos">
+        <div className="space-y-3">
+          {/* Theme indicator */}
+          <div className="flex items-center gap-2 text-[10px] text-gray-400">
+            <span id="section-span-currenttheme-dark-da" className={cn("px-1.5 py-0.5 rounded", currentTheme === "light" ? "bg-yellow-100 text-yellow-700" : "bg-gray-700 text-gray-200")}>
+              {currentTheme === "dark" ? "🌙 Dark Mode" : "☀️ Light Mode"}
+            </span>
+            <span id="section-span-current-preview">Current preview</span>
+          </div>
+
+          {/* Light Mode Logo */}
+          <div className="space-y-1.5">
+            <label className="text-xs text-gray-500 flex items-center gap-1.5">
+              <Sun className="h-3 w-3 text-yellow-500" />
+              Light Mode Logo:
+            </label>
+            <select
+              value={globalLogoConfig.srcLight || ""}
+              onChange={(e) => {
+                const newPath = e.target.value || undefined;
+                if (newPath) {
+                  // Auto-fill dark variant if available
+                  const complementary = findComplementaryLogo(newPath);
+                  onGlobalConfigChange({ 
+                    ...globalLogoConfig, 
+                    srcLight: newPath,
+                    srcDark: complementary?.dark || globalLogoConfig.srcDark,
+                  });
+                } else {
+                  onGlobalConfigChange({ ...globalLogoConfig, srcLight: undefined });
+                }
+              }}
+              className={cn(
+                "w-full h-8 px-2 text-xs rounded",
+                "border border-gray-200 bg-white text-gray-700",
+                "focus:outline-none focus:ring-1 focus:ring-[#FC4C02]"
+              )}
+            >
+              <option value="">-- Select light mode logo --</option>
+              {brandKeys.map((brand) => (
+                <optgroup key={brand} label={brand.charAt(0).toUpperCase() + brand.slice(1)}>
+                  {logoAssetsByBrand[brand].map((asset) => (
+                    <option key={asset.id} value={asset.path}>
+                      {asset.name}
+                    </option>
+                  ))}
+                </optgroup>
+              ))}
+            </select>
+          </div>
+
+          {/* Dark Mode Logo */}
+          <div className="space-y-1.5">
+            <label className="text-xs text-gray-500 flex items-center gap-1.5">
+              <Moon className="h-3 w-3 text-blue-400" />
+              Dark Mode Logo:
+            </label>
+            <select
+              value={globalLogoConfig.srcDark || ""}
+              onChange={(e) => {
+                const newPath = e.target.value || undefined;
+                if (newPath) {
+                  // Auto-fill light variant if available
+                  const complementary = findComplementaryLogo(newPath);
+                  onGlobalConfigChange({ 
+                    ...globalLogoConfig, 
+                    srcDark: newPath,
+                    srcLight: complementary?.light || globalLogoConfig.srcLight,
+                  });
+                } else {
+                  onGlobalConfigChange({ ...globalLogoConfig, srcDark: undefined });
+                }
+              }}
+              className={cn(
+                "w-full h-8 px-2 text-xs rounded",
+                "border border-gray-200 bg-white text-gray-700",
+                "focus:outline-none focus:ring-1 focus:ring-[#FC4C02]"
+              )}
+            >
+              <option value="">-- Select dark mode logo --</option>
+              {brandKeys.map((brand) => (
+                <optgroup key={brand} label={brand.charAt(0).toUpperCase() + brand.slice(1)}>
+                  {logoAssetsByBrand[brand].map((asset) => (
+                    <option key={asset.id} value={asset.path}>
+                      {asset.name}
+                    </option>
+                  ))}
+                </optgroup>
+              ))}
+            </select>
+          </div>
+
+          <div className="space-y-1.5">
+            <label className="text-xs text-gray-500">Scale: {Math.round((globalLogoConfig.scale || 1) * 100)}%</label>
+            <input
+              type="range"
+              min="25"
+              max="200"
+              value={(globalLogoConfig.scale || 1) * 100}
+              onChange={(e) => onGlobalConfigChange({ ...globalLogoConfig, scale: parseInt(e.target.value) / 100 })}
+              className="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200"
+            />
+          </div>
+        </div>
+      </Section>
+
+      {/* Save Status Message */}
+      {saveMessage && (
+        <div
+          className={cn(
+            "flex items-start gap-2 p-2 rounded text-xs",
+            saveStatus === "success" && "bg-green-50 text-green-700 border border-green-200",
+            saveStatus === "error" && "bg-red-50 text-red-700 border border-red-200"
+          )}
+        >
+          {saveStatus === "success" && <CheckCircle className="h-3.5 w-3.5 shrink-0 mt-0.5" />}
+          {saveStatus === "error" && <AlertCircle className="h-3.5 w-3.5 shrink-0 mt-0.5" />}
+          <span id="analysis-modal-span-savemessage">{saveMessage}</span>
+        </div>
+      )}
+
+      {/* Save Button */}
+      {(globalLogoConfig.reset || globalLogoConfig.srcLight || globalLogoConfig.srcDark) && (
+        <button
+          onClick={() => onSaveChanges()}
+          disabled={saveStatus === "saving"}
+          className={cn(
+            "w-full flex items-center justify-center gap-2 py-2.5",
+            "text-sm font-medium text-white rounded transition-colors",
+            globalLogoConfig.reset ? "bg-amber-600 hover:bg-amber-700" : "bg-[#333F48] hover:bg-[#2a343c]",
+            "disabled:opacity-50 disabled:cursor-not-allowed"
+          )}
+        >
+          {saveStatus === "saving" ? (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin" />
+              Saving...
+            </>
+          ) : (
+            <>
+              {globalLogoConfig.reset ? <RotateCcw className="h-4 w-4" /> : <Save className="h-4 w-4" />}
+              {globalLogoConfig.reset ? "Save Reset" : "Save to Brand System"}
+            </>
+          )}
+        </button>
+      )}
+
+      {/* Selected Logo Controls */}
+      {selectedLogoId && selectedLogo && (
+        <Section title={`Edit: ${selectedLogo.name}`}>
+          <div className="space-y-3 p-3 rounded border border-[#FC4C02] bg-orange-50/50">
+            {/* Original info */}
+            {selectedOriginal && (
+              <div className="text-[10px] text-gray-500">
+                Original: {selectedOriginal.width} × {selectedOriginal.height}px
+              </div>
+            )}
+
+            {/* Theme indicator */}
+            <div className="flex items-center gap-2 text-[10px] text-gray-400">
+              <span id="analysis-modal-span-currenttheme-dark-da" className={cn("px-1.5 py-0.5 rounded", currentTheme === "light" ? "bg-yellow-100 text-yellow-700" : "bg-gray-700 text-gray-200")}>
+                {currentTheme === "dark" ? "🌙 Dark Mode" : "☀️ Light Mode"}
+              </span>
+              <span id="analysis-modal-span-current-preview">Current preview</span>
+            </div>
+
+            {/* Light Mode Logo */}
+            <div className="space-y-1.5">
+              <label className="text-xs text-gray-500 flex items-center gap-1.5">
+                <Sun className="h-3 w-3 text-yellow-500" />
+                Light Mode Logo:
+              </label>
+              <select
+                value={selectedConfig.srcLight || ""}
+                onChange={(e) => {
+                  const newPath = e.target.value || undefined;
+                  if (newPath) {
+                    const complementary = findComplementaryLogo(newPath);
+                    onIndividualConfigChange(selectedLogoId, { 
+                      ...selectedConfig, 
+                      srcLight: newPath,
+                      srcDark: complementary?.dark || selectedConfig.srcDark,
+                    });
+                  } else {
+                    onIndividualConfigChange(selectedLogoId, { ...selectedConfig, srcLight: undefined });
+                  }
+                }}
+                className={cn(
+                  "w-full h-8 px-2 text-xs rounded",
+                  "border border-gray-200 bg-white text-gray-700",
+                  "focus:outline-none focus:ring-1 focus:ring-[#FC4C02]"
+                )}
+              >
+                <option value="">-- Use global/original --</option>
+                {brandKeys.map((brand) => (
+                  <optgroup key={brand} label={brand.charAt(0).toUpperCase() + brand.slice(1)}>
+                    {logoAssetsByBrand[brand].map((asset) => (
+                      <option key={asset.id} value={asset.path}>
+                        {asset.name}
+                      </option>
+                    ))}
+                  </optgroup>
+                ))}
+              </select>
+            </div>
+
+            {/* Dark Mode Logo */}
+            <div className="space-y-1.5">
+              <label className="text-xs text-gray-500 flex items-center gap-1.5">
+                <Moon className="h-3 w-3 text-blue-400" />
+                Dark Mode Logo:
+              </label>
+              <select
+                value={selectedConfig.srcDark || ""}
+                onChange={(e) => {
+                  const newPath = e.target.value || undefined;
+                  if (newPath) {
+                    const complementary = findComplementaryLogo(newPath);
+                    onIndividualConfigChange(selectedLogoId, { 
+                      ...selectedConfig, 
+                      srcDark: newPath,
+                      srcLight: complementary?.light || selectedConfig.srcLight,
+                    });
+                  } else {
+                    onIndividualConfigChange(selectedLogoId, { ...selectedConfig, srcDark: undefined });
+                  }
+                }}
+                className={cn(
+                  "w-full h-8 px-2 text-xs rounded",
+                  "border border-gray-200 bg-white text-gray-700",
+                  "focus:outline-none focus:ring-1 focus:ring-[#FC4C02]"
+                )}
+              >
+                <option value="">-- Use global/original --</option>
+                {brandKeys.map((brand) => (
+                  <optgroup key={brand} label={brand.charAt(0).toUpperCase() + brand.slice(1)}>
+                    {logoAssetsByBrand[brand].map((asset) => (
+                      <option key={asset.id} value={asset.path}>
+                        {asset.name}
+                      </option>
+                    ))}
+                  </optgroup>
+                ))}
+              </select>
+            </div>
+
+            {/* Dimensions */}
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1">
+                <label className="text-xs text-gray-500">Width (px)</label>
+                <input
+                  type="number"
+                  min="10"
+                  max="1000"
+                  value={selectedConfig.width || ""}
+                  placeholder="auto"
+                  onChange={(e) => onIndividualConfigChange(selectedLogoId, { 
+                    ...selectedConfig, 
+                    width: e.target.value ? parseInt(e.target.value) : undefined 
+                  })}
+                  className={cn(
+                    "w-full h-8 px-2 text-xs rounded",
+                    "border border-gray-200 bg-white text-gray-700",
+                    "focus:outline-none focus:ring-1 focus:ring-[#FC4C02]"
+                  )}
+                />
+              </div>
+              <div className="space-y-1">
+                <label className="text-xs text-gray-500">Height (px)</label>
+                <input
+                  type="number"
+                  min="10"
+                  max="1000"
+                  value={selectedConfig.height || ""}
+                  placeholder="auto"
+                  onChange={(e) => onIndividualConfigChange(selectedLogoId, { 
+                    ...selectedConfig, 
+                    height: e.target.value ? parseInt(e.target.value) : undefined 
+                  })}
+                  className={cn(
+                    "w-full h-8 px-2 text-xs rounded",
+                    "border border-gray-200 bg-white text-gray-700",
+                    "focus:outline-none focus:ring-1 focus:ring-[#FC4C02]"
+                  )}
+                />
+              </div>
+            </div>
+
+            {/* Scale */}
+            <div className="space-y-1.5">
+              <label className="text-xs text-gray-500">Scale: {Math.round((selectedConfig.scale || 1) * 100)}%</label>
+              <input
+                type="range"
+                min="25"
+                max="200"
+                value={(selectedConfig.scale || 1) * 100}
+                onChange={(e) => onIndividualConfigChange(selectedLogoId, { ...selectedConfig, scale: parseInt(e.target.value) / 100 })}
+                className="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200"
+              />
+            </div>
+
+            {/* Warning if element has no ID for individual persistence */}
+            {!selectedElementId && (selectedConfig.width || selectedConfig.height || selectedConfig.scale) && (() => {
+              const suggestedId = generateIdSuggestion(selectedLogoId, selectedBrandId);
+              const codeSnippet = `id="${suggestedId}"`;
+              const logoSrc = selectedOriginal?.src || "";
+              
+              return (
+                <div className="p-2.5 rounded border border-amber-200 bg-amber-50 space-y-2">
+                  <p id="analysis-modal-p" className="text-[10px] text-amber-700">
+                    <strong>⚠️ No ID found.</strong> Saving will update the <strong>global {selectedBrandId || "brand"} default</strong>, affecting all logos of this brand.
+                  </p>
+                  <div className="flex items-center gap-2">
+                    <code className="flex-1 px-2 py-1 text-[10px] bg-amber-100 text-amber-800 rounded font-mono truncate" title={codeSnippet}>
+                      {codeSnippet}
+                    </code>
+                    <button
+                      onClick={() => onAutoFixId(logoSrc, suggestedId)}
+                      disabled={autoFixStatus === "fixing"}
+                      className={cn(
+                        "flex items-center gap-1 px-2 py-1 text-[10px] font-medium rounded transition-colors whitespace-nowrap",
+                        autoFixStatus === "success" 
+                          ? "bg-green-100 text-green-700" 
+                          : autoFixStatus === "error"
+                          ? "bg-red-100 text-red-700"
+                          : "text-amber-700 bg-amber-100 hover:bg-amber-200",
+                        autoFixStatus === "fixing" && "opacity-50 cursor-not-allowed"
+                      )}
+                      title="Automatically inject this ID into your source code"
+                    >
+                      {autoFixStatus === "fixing" ? (
+                        <>
+                          <Loader2 className="h-3 w-3 animate-spin" />
+                          Fixing...
+                        </>
+                      ) : autoFixStatus === "success" ? (
+                        <>
+                          <Check className="h-3 w-3" />
+                          Fixed!
+                        </>
+                      ) : autoFixStatus === "error" ? (
+                        <>
+                          <AlertCircle className="h-3 w-3" />
+                          Failed
+                        </>
+                      ) : (
+                        <>
+                          <Wand2 className="h-3 w-3" />
+                          Auto-Fix
+                        </>
+                      )}
+                    </button>
+                  </div>
+                  {autoFixMessage && (
+                    <p id="analysis-modal-p-autofixmessage" className={cn(
+                      "text-[9px]",
+                      autoFixStatus === "success" ? "text-green-600" : autoFixStatus === "error" ? "text-red-600" : "text-amber-600"
+                    )}>
+                      {autoFixMessage}
+                    </p>
+                  )}
+                  {!autoFixMessage && (
+                    <p id="analysis-modal-p-click-autofix-to-inj" className="text-[9px] text-amber-600">
+                      Click Auto-Fix to inject this ID into your source code automatically.
+                    </p>
+                  )}
+                </div>
+              );
+            })()}
+
+            {/* Reset this logo */}
+            <div className="flex gap-2">
+              <button
+                onClick={() => {
+                  if (selectedLogoId) {
+                    onResetLogo(selectedLogoId);
+                  }
+                }}
+                className={cn(
+                  "flex-1 flex items-center justify-center gap-2 py-2",
+                  "text-xs font-medium text-gray-500 hover:text-gray-700",
+                  "border border-gray-200 rounded hover:bg-white transition-colors"
+                )}
+              >
+                <RotateCcw className="h-3 w-3" />
+                Reset
+              </button>
+              
+              {(selectedConfig.reset || selectedConfig.srcLight || selectedConfig.srcDark || selectedConfig.src || selectedConfig.width || selectedConfig.height || (selectedConfig.scale && selectedConfig.scale !== 1)) && (
+                <button
+                  onClick={() => onSaveChanges(selectedConfig, selectedBrandId, selectedElementId ? `#${selectedElementId}` : undefined, selectedLogoId || undefined)}
+                  disabled={saveStatus === "saving"}
+                  className={cn(
+                    "flex-1 flex items-center justify-center gap-2 py-2",
+                    "text-xs font-medium text-white rounded transition-colors",
+                    selectedConfig.reset ? "bg-amber-600 hover:bg-amber-700" : (selectedElementId ? "bg-[#00A3E1] hover:bg-[#0090c8]" : "bg-[#333F48] hover:bg-[#2a343c]"),
+                    "disabled:opacity-50 disabled:cursor-not-allowed"
+                  )}
+                  title={selectedConfig.reset ? "Save Reset (Delete Override)" : (selectedElementId ? `Save to element #${selectedElementId}` : (selectedBrandId ? `Save as ${selectedBrandId} brand default` : "Save as brand default"))}
+                >
+                  {saveStatus === "saving" ? (
+                    <Loader2 className="h-3 w-3 animate-spin" />
+                  ) : (
+                    <>
+                      {selectedConfig.reset ? <RotateCcw className="h-3 w-3" /> : <Save className="h-3 w-3" />}
+                      {selectedConfig.reset ? "Save Reset" : (selectedElementId ? "Save to Element" : "Save to Brand")}
+                    </>
+                  )}
+                </button>
+              )}
+            </div>
+            
+            {/* Individual Save Status Message */}
+            {saveMessage && (saveStatus === "success" || saveStatus === "error") && (
+              <div
+                className={cn(
+                  "flex items-center gap-2 p-2 rounded text-xs mt-2",
+                  saveStatus === "success" && "bg-green-50 text-green-700 border border-green-200",
+                  saveStatus === "error" && "bg-red-50 text-red-700 border border-red-200"
+                )}
+              >
+                {saveStatus === "success" && <CheckCircle className="h-3.5 w-3.5 shrink-0" />}
+                {saveStatus === "error" && <AlertCircle className="h-3.5 w-3.5 shrink-0" />}
+                <span id="text-panel-span-savemessage">{saveMessage}</span>
+              </div>
+            )}
+          </div>
+        </Section>
+      )}
+
+      {/* Reset All */}
+      <button
+        onClick={onResetAll}
+        className={cn(
+          "w-full flex items-center justify-center gap-2 py-2.5",
+          "text-xs font-medium text-gray-500 hover:text-gray-700",
+          "border border-gray-200 rounded hover:bg-gray-50 transition-colors"
+        )}
+      >
+        <RotateCcw className="h-3.5 w-3.5" />
+        Reset All Logos
+      </button>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+import { LogoToolsPanel, LogoToolsPanelProps } from "./LogoToolsPanel";
+
+// LogosPanel now just wraps LogoToolsPanel - inspector is controlled via header
+export type LogosPanelProps = LogoToolsPanelProps;
+
+export function LogosPanel(props: LogosPanelProps) {
+  return (
+    <div className="space-y-4">
+      <LogoToolsPanel {...props} />
+    </div>
+  );
+}
+