sonance-brand-mcp 1.3.110 → 1.3.112

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

@@ -65,8 +65,8 @@ export function TextPanel({
   return (
       <div className="flex flex-col items-center justify-center h-full text-center p-6 text-gray-500">
         <Type className="h-12 w-12 mb-4 opacity-20" />
-        <p className="text-sm font-medium mb-2">Text Inspector Disabled</p>
-        <p className="text-xs max-w-[200px]">
+        <p id="text-panel-p-text-inspector-disab" className="text-sm font-medium mb-2">Text Inspector Disabled</p>
+        <p id="text-panel-p-enable-the-inspector" className="text-xs max-w-[200px]">
           Enable the inspector using the mouse icon in the top bar to select and edit text.
         </p>
       </div>
@@ -82,12 +82,12 @@ export function TextPanel({
         <div className="flex items-center justify-between mb-2">
           <div className="flex items-center gap-2">
             <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
-            <span className="text-xs font-medium text-amber-800">
+            <span id="text-panel-span-modifiedcount-text-e" className="text-xs font-medium text-amber-800">
               {modifiedCount} text element{modifiedCount !== 1 ? 's' : ''} modified
             </span>
           </div>
         </div>
-        <p className="text-[10px] text-amber-600 mb-3">
+        <p id="text-panel-p-changes-are-previewe" className="text-[10px] text-amber-600 mb-3">
           Changes are previewed on the page. Save to keep them or revert to discard.
         </p>
         <div className="flex gap-2">
@@ -131,8 +131,8 @@ export function TextPanel({
               <Type className="h-3 w-3 text-white" />
             </div>
               </div>
-          <p className="text-sm font-medium mb-2">Select Text to Edit</p>
-          <p className="text-xs max-w-[200px]">
+          <p id="text-panel-p-select-text-to-edit" className="text-sm font-medium mb-2">Select Text to Edit</p>
+          <p id="text-panel-p-click-on-any-text-el" className="text-xs max-w-[200px]">
             Click on any text element on the page to adjust its typography and content.
           </p>
         </div>
@@ -153,16 +153,16 @@ export function TextPanel({
         <div className="flex items-center justify-between pb-2 border-b border-gray-100">
           <div className="flex flex-col">
             <div className="flex items-center gap-2">
-              <span className="text-xs font-medium text-gray-900 truncate max-w-[180px]">
+              <span id="text-panel-span-selectedelementnames" className="text-xs font-medium text-gray-900 truncate max-w-[180px]">
                 {selectedElement.name.split(':')[0]}
               </span>
               {currentHasChanges && (
-                <span className="px-1.5 py-0.5 text-[9px] font-medium bg-amber-100 text-amber-700 rounded">
+                <span id="text-panel-span-modified" className="px-1.5 py-0.5 text-[9px] font-medium bg-amber-100 text-amber-700 rounded">
                   Modified
                 </span>
               )}
             </div>
-            <span className="text-[10px] text-gray-400 font-mono">
+            <span id="text-panel-span-selectedtextid" className="text-[10px] text-gray-400 font-mono">
               {selectedTextId}
             </span>
           </div>
@@ -320,7 +320,7 @@ export function TextPanel({
                   className="flex-1 h-7 px-2 text-xs border border-gray-200 rounded focus:border-[#00A3E1] focus:outline-none font-mono"
                 />
               </div>
-              <p className="text-[10px] text-gray-400">
+              <p id="text-panel-p-switch-theme-to-set-" className="text-[10px] text-gray-400">
                 Switch theme to set color for {currentTheme === "dark" ? "light" : "dark"} mode
               </p>
             </div>

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

@@ -1,7 +1,17 @@
 
 import React from "react";
 
-export type TabId = "analysis" | "components" | "logos" | "text";
+export type TabId = "analysis" | "elements";
+
+// Element type filters for the unified element view
+export interface ElementFilters {
+  components: boolean;
+  images: boolean;
+  text: boolean;
+}
+
+// Type for the currently selected element in the unified view
+export type SelectedElementType = "component" | "logo" | "text" | null;
 
 export interface TabDefinition {
   id: TabId;
@@ -32,6 +42,8 @@ export interface DetectedElement {
   elementId?: string;
   /** IDs of child elements for more precise targeting */
   childIds?: string[];
+  /** The src attribute for image elements (for tracing to source code) */
+  imageSrc?: string;
 }
 
 // Logo asset from the API
@@ -83,6 +95,43 @@ export interface OriginalLogoState {
   srcset?: string;
 }
 
+// ---- Image Editing Types ----
+
+// Image override configuration (for general images, not just logos)
+export interface ImageOverride {
+  src?: string;           // New image source URL
+  width?: number;         // Override width in pixels
+  height?: number;        // Override height in pixels
+  scale?: number;         // Scale factor (1 = 100%)
+  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+  reset?: boolean;        // If true, indicates this config is resetting to defaults
+}
+
+// Original image state for reset functionality
+export interface OriginalImageState {
+  src: string;
+  width: number;
+  height: number;
+  objectFit: string;
+  srcset?: string;
+}
+
+// Public folder image asset
+export interface PublicImageAsset {
+  id: string;
+  name: string;
+  path: string;            // Relative path from /public (e.g., "/banners/hero.jpg")
+  folder: string;          // Parent folder name for grouping
+  extension: string;
+  dimensions?: {
+    width: number;
+    height: number;
+  };
+}
+
+// Image save status
+export type ImageSaveStatus = "idle" | "saving" | "success" | "error";
+
 // Original text state for reset
 export interface OriginalTextState {
   textContent: string | null;
@@ -108,12 +157,51 @@ export type ComponentStyleOverride = Record<string, ComponentStyle>;
 
 // ---- AI Chat Interfaces ----
 
+/** Action status for inline diff display */
+export type ChatActionStatus = "pending" | "accepted" | "reverted" | "error";
+
+/** Action type for inline display in chat messages */
+export type ChatActionType = "diff" | "applied" | "reverted" | "error";
+
+/** File change info for inline diff display */
+export interface ChatFileChange {
+  path: string;
+  diff: string;
+  originalContent?: string;
+  modifiedContent?: string;
+}
+
+/** Inline action display attached to assistant messages */
+export interface ChatMessageAction {
+  type: ChatActionType;
+  files?: ChatFileChange[];
+  status: ChatActionStatus;
+  sessionId?: string;
+  explanation?: string;
+}
+
 export interface ChatMessage {
   id: string;
-  role: "user" | "assistant";
+  role: "user" | "assistant" | "system";
   content: string;
   timestamp: Date;
   editResult?: AIEditResult;
+  /** Inline action display for diffs/changes */
+  action?: ChatMessageAction;
+}
+
+/** Chat session for multi-conversation support */
+export interface ChatSession {
+  id: string;
+  name: string;
+  messages: ChatMessage[];
+  createdAt: Date;
+  updatedAt: Date;
+  /** Context for the session (component type, vision mode, etc.) */
+  context?: {
+    componentType?: string;
+    visionMode?: boolean;
+  };
 }
 
 export interface AIEditResult {
@@ -250,6 +338,8 @@ export interface VisionFocusedElement {
   childIds?: string[];
   /** Parent section context for section-level targeting */
   parentSection?: ParentSectionInfo;
+  /** The src attribute for image elements (for tracing to source code) */
+  imageSrc?: string;
 }
 
 export interface VisionEditRequest {
@@ -295,6 +385,7 @@ export interface ApplyFirstSession {
   status: 'preview' | 'applied' | 'accepted' | 'reverted';
   backupPaths: string[];
   isPreview?: boolean; // True if changes are not yet written to disk
+  isTextOnlyChange?: boolean; // True if only text content was changed (show in Details tab instead of AI Chat)
 }
 
 export type ApplyFirstStatus =

package/dist/assets/globals.css

@@ -1,4 +1,8 @@
 @import "tailwindcss";
+
+/* Configure dark mode to use data-theme attribute */
+@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
 @import "../styles/brand-overrides.css";
 
 /* ============================================
@@ -166,11 +170,13 @@
   --space-24: 6rem;
   --space-32: 8rem;
 
-  /* Border Radius */
+  /* Border Radius - Liquid Glass (updated from 0-4px to 8-16px) */
   --radius-none: 0;
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --radius-lg: 8px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-2xl: 24px;
   --radius-full: 9999px;
 
   /* Animation */
@@ -179,6 +185,43 @@
   --duration-fast: 150ms;
   --duration-normal: 250ms;
   --duration-slow: 400ms;
+
+  /* ============================================
+     LIQUID GLASS SYSTEM - Light Mode
+     ============================================ */
+
+  /* Glass Backgrounds (Light Mode - frosted glass effect) */
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-bg-hover: rgba(255, 255, 255, 0.8);
+  --glass-bg-active: rgba(255, 255, 255, 0.9);
+  --glass-bg-elevated: rgba(255, 255, 255, 0.85);
+  --glass-bg-subtle: rgba(255, 255, 255, 0.5);
+
+  /* Glass Borders (Light Mode) */
+  --glass-border: rgba(0, 0, 0, 0.08);
+  --glass-border-hover: rgba(0, 0, 0, 0.12);
+  --glass-border-focus: rgba(0, 0, 0, 0.15);
+
+  /* Blur Values */
+  --glass-blur-sm: 8px;
+  --glass-blur-md: 12px;
+  --glass-blur-lg: 20px;
+  --glass-blur-xl: 32px;
+
+  /* Glass Shadows (Light Mode) */
+  --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --glass-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
+  --glass-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
+
+  /* Glow Effects - Using Sonance Blue */
+  --glow-primary: rgba(0, 163, 225, 0.2);
+  --glow-primary-subtle: rgba(0, 163, 225, 0.1);
+  --glow-primary-intense: rgba(0, 163, 225, 0.35);
+
+  /* Inner Highlights */
+  --glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  --glass-inner-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.03);
 }
 
 /* Dark Mode */
@@ -252,6 +295,37 @@
   --sidebar-accent-foreground: #FFFFFF;
   --sidebar-border: #3a444c;
   --sidebar-ring: #00A3E1;
+
+  /* ============================================
+     LIQUID GLASS SYSTEM - Dark Mode
+     ============================================ */
+
+  /* Glass Backgrounds (Dark Mode - classic glass morphism) */
+  --glass-bg: rgba(255, 255, 255, 0.03);
+  --glass-bg-hover: rgba(255, 255, 255, 0.06);
+  --glass-bg-active: rgba(255, 255, 255, 0.1);
+  --glass-bg-elevated: rgba(255, 255, 255, 0.08);
+  --glass-bg-subtle: rgba(255, 255, 255, 0.02);
+
+  /* Glass Borders (Dark Mode) */
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-border-hover: rgba(255, 255, 255, 0.12);
+  --glass-border-focus: rgba(255, 255, 255, 0.18);
+
+  /* Glass Shadows (Dark Mode - more pronounced) */
+  --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
+  --glass-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --glass-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
+
+  /* Glow Effects - More intense in dark mode */
+  --glow-primary: rgba(0, 163, 225, 0.35);
+  --glow-primary-subtle: rgba(0, 163, 225, 0.2);
+  --glow-primary-intense: rgba(0, 163, 225, 0.5);
+
+  /* Inner Highlights (Dark Mode) */
+  --glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  --glass-inner-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
 }
 
 /* System preference detection fallback */
@@ -395,11 +469,22 @@
 
   /* Font */
   --font-sans: var(--font-montserrat), system-ui, sans-serif;
-  
-  /* Border Radius */
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --radius-lg: 8px;
+
+  /* Border Radius - Liquid Glass */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-2xl: 24px;
+
+  /* Glass System Colors */
+  --color-glass-bg: var(--glass-bg);
+  --color-glass-bg-hover: var(--glass-bg-hover);
+  --color-glass-bg-active: var(--glass-bg-active);
+  --color-glass-bg-elevated: var(--glass-bg-elevated);
+  --color-glass-border: var(--glass-border);
+  --color-glass-border-hover: var(--glass-border-hover);
+  --color-glass-border-focus: var(--glass-border-focus);
 }
 
 /* ============================================
@@ -520,3 +605,134 @@ code ::selection,
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
+/* ============================================
+   LIQUID GLASS UTILITY CLASSES
+   ============================================ */
+
+/* Glass Card - Primary container */
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow-md);
+  border-radius: var(--radius-lg);
+  transition: all 0.2s ease-out;
+}
+
+.glass-card:hover {
+  background: var(--glass-bg-hover);
+  border-color: var(--glass-border-hover);
+  box-shadow: var(--glass-shadow-lg), 0 0 20px var(--glow-primary-subtle);
+}
+
+/* Glass Button */
+.glass-btn {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  transition: all 0.2s ease-out;
+}
+
+.glass-btn:hover {
+  background: var(--glass-bg-hover);
+  border-color: var(--glass-border-hover);
+  box-shadow: 0 0 20px var(--glow-primary);
+}
+
+.glass-btn:active {
+  background: var(--glass-bg-active);
+  transform: scale(0.98);
+}
+
+/* Glass Input */
+.glass-input {
+  background: var(--glass-bg-subtle);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  transition: all 0.2s ease-out;
+}
+
+.glass-input:hover {
+  border-color: var(--glass-border-hover);
+}
+
+.glass-input:focus {
+  outline: none;
+  border-color: var(--sonance-blue);
+  box-shadow: 0 0 20px var(--glow-primary);
+}
+
+/* Glow Effect Utilities */
+.hover-glow {
+  transition: box-shadow 0.3s ease-out;
+}
+
+.hover-glow:hover {
+  box-shadow: 0 0 30px var(--glow-primary);
+}
+
+.glow-subtle:hover {
+  box-shadow: 0 0 15px var(--glow-primary-subtle);
+}
+
+.glow-intense:hover {
+  box-shadow: 0 0 40px var(--glow-primary-intense);
+}
+
+.focus-glow:focus {
+  box-shadow: 0 0 25px var(--glow-primary);
+}
+
+/* Glass Blur Utilities */
+.glass-blur {
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+}
+
+.glass-blur-sm {
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+}
+
+.glass-blur-xl {
+  backdrop-filter: blur(var(--glass-blur-xl));
+  -webkit-backdrop-filter: blur(var(--glass-blur-xl));
+}
+
+/* Glass Border Utilities */
+.glass-border {
+  border: 1px solid var(--glass-border);
+}
+
+.glass-border-hover:hover {
+  border-color: var(--glass-border-hover);
+}
+
+/* Text Gradient Utility */
+.text-gradient {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(135deg, var(--sonance-blue) 0%, var(--sonance-charcoal) 100%);
+}
+
+/* Fallback for browsers without backdrop-filter support */
+@supports not (backdrop-filter: blur(10px)) {
+  .glass-card,
+  .glass-btn,
+  .glass-input {
+    background: rgba(255, 255, 255, 0.95);
+  }
+
+  [data-theme="dark"] .glass-card,
+  [data-theme="dark"] .glass-btn,
+  [data-theme="dark"] .glass-input {
+    background: rgba(26, 31, 36, 0.95);
+  }
+}

package/dist/assets/styles/brand-overrides.css

@@ -4,13 +4,14 @@
    ========================================================================== */
 
 :root {
+  --zoom--scale: 0.93;
   /* Sonance Logo Sizing */
-  --sonance-logo-scale: 1;
+  --sonance-logo-scale: 0.94;
   --sonance-logo-width: auto;
   --sonance-logo-height: auto;
   
   /* IPORT Logo Sizing */
-  --iport-logo-scale: 1;
+  --iport-logo-scale: 1.08;
   --iport-logo-width: auto;
   --iport-logo-height: auto;
   

package/dist/assets/utils.ts

@@ -1,6 +1,7 @@
 import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return clsx(inputs);
+  return twMerge(clsx(inputs));
 }
 

package/dist/index.js

@@ -7,6 +7,7 @@ import * as path from "path";
 import * as os from "os";
 import { fileURLToPath } from "url";
 import { execSync } from "child_process";
+import sharp from "sharp";
 // ============================================
 // INSTALLER (--init flag)
 // ============================================
@@ -1486,10 +1487,28 @@ async function embedLogo(logoPath) {
         };
     }
     try {
-        // Read file as base64
-        const fileBuffer = fs.readFileSync(resolvedPath);
-        const base64Data = fileBuffer.toString('base64');
+        const MAX_DIMENSION = 7500; // Leave margin below Claude's 8000px limit
+        // Read the image file
+        let imageBuffer = fs.readFileSync(resolvedPath);
         const mimeType = getImageMimeType(resolvedPath);
+        // Only process raster images (not SVG)
+        if (mimeType !== 'image/svg+xml') {
+            const image = sharp(imageBuffer);
+            const metadata = await image.metadata();
+            // Check if resizing is needed
+            if (metadata.width && metadata.height) {
+                if (metadata.width > MAX_DIMENSION || metadata.height > MAX_DIMENSION) {
+                    // Resize maintaining aspect ratio
+                    imageBuffer = await image
+                        .resize(MAX_DIMENSION, MAX_DIMENSION, {
+                        fit: 'inside',
+                        withoutEnlargement: true,
+                    })
+                        .toBuffer();
+                }
+            }
+        }
+        const base64Data = imageBuffer.toString('base64');
         return {
             success: true,
             type: "image",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.110",
+  "version": "1.3.112",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",
@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.0.0",
+    "sharp": "^0.33.5",
     "zod": "^3.23.8"
   },
   "devDependencies": {