@elixpo/lixsketch 5.5.20 → 5.5.21

package/src/react/components/canvas/MultiSelectActions.jsx

@@ -6,6 +6,7 @@ import { showToast } from '../../utils/toast'
 export default function MultiSelectActions() {
   const [count, setCount] = useState(0)
   const [groupState, setGroupState] = useState('none') // 'none' | 'partial' | 'all'
+  const [frameEligible, setFrameEligible] = useState(false)
 
   useEffect(() => {
     // Poll multi-selection state. Cheap — Set size + a single
@@ -18,6 +19,7 @@ export default function MultiSelectActions() {
 
       if (n < 2) {
         setGroupState('none')
+        setFrameEligible(false)
         return
       }
       let withId = 0
@@ -28,6 +30,7 @@ export default function MultiSelectActions() {
           groupIds.add(s.groupId)
         }
       })
+      setFrameEligible(Array.from(sel).every((s) => s.shapeName !== 'frame' && !s.parentFrame))
       // "all" = every shape has a groupId AND they all share the same one
       if (withId === n && groupIds.size === 1) setGroupState('all')
       else if (withId > 0) setGroupState('partial')
@@ -82,7 +85,7 @@ export default function MultiSelectActions() {
 
         {/* Frame is only useful when shapes aren't already grouped — a
             grouped set is conceptually a "frameless frame" already. */}
-        {!grouped && (
+        {!grouped && frameEligible && (
           <button
             onClick={handleFrame}
             className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs text-accent-blue hover:bg-accent-blue/10 transition-all duration-150"

package/src/react/components/sidebars/IconSidebar.jsx

@@ -90,6 +90,14 @@ export default function IconSidebar() {
   const [icons, setIcons] = useState([])
   const [loading, setLoading] = useState(false)
   const debounceRef = useRef(null)
+  const searchInputRef = useRef(null)
+  const requestSequenceRef = useRef(0)
+
+  useEffect(() => {
+    if (!visible) return
+    const frame = requestAnimationFrame(() => searchInputRef.current?.focus())
+    return () => cancelAnimationFrame(frame)
+  }, [visible])
 
   // Close on Escape
   useEffect(() => {
@@ -115,6 +123,7 @@ export default function IconSidebar() {
   }, [visible, setActiveTool])
 
   const fetchIcons = useCallback(async (searchQuery, cat) => {
+    const requestSequence = ++requestSequenceRef.current
     const params = new URLSearchParams()
     if (searchQuery) params.set('q', searchQuery)
     if (cat) params.set('category', cat)
@@ -124,6 +133,7 @@ export default function IconSidebar() {
     // Return cached results instantly if available
     if (iconResultCache.has(cacheKey)) {
       setIcons(iconResultCache.get(cacheKey))
+      setLoading(false)
       return
     }
 
@@ -134,12 +144,12 @@ export default function IconSidebar() {
         const data = await res.json()
         const results = data.results || []
         iconResultCache.set(cacheKey, results)
-        setIcons(results)
+        if (requestSequence === requestSequenceRef.current) setIcons(results)
       }
     } catch (err) {
       console.error('Icon fetch failed:', err)
     }
-    setLoading(false)
+    if (requestSequence === requestSequenceRef.current) setLoading(false)
   }, [])
 
   // Fetch icons when visibility, query, or category changes (debounced for query typing)
@@ -148,30 +158,10 @@ export default function IconSidebar() {
     if (debounceRef.current) clearTimeout(debounceRef.current)
     debounceRef.current = setTimeout(() => {
       fetchIcons(query, category)
-    }, query ? 300 : 0)
+    }, query ? 80 : 0)
     return () => clearTimeout(debounceRef.current)
   }, [query, visible, category, fetchIcons])
 
-  // Preload all categories in background on first sidebar open
-  const hasPreloaded = useRef(false)
-  useEffect(() => {
-    if (!visible || hasPreloaded.current) return
-    hasPreloaded.current = true
-    // Fire-and-forget: preload each category so switching is instant
-    CATEGORIES.forEach((cat) => {
-      const params = new URLSearchParams()
-      if (cat.value) params.set('category', cat.value)
-      params.set('inline', '1')
-      const key = params.toString()
-      if (!iconResultCache.has(key)) {
-        fetch(`${getIconsBaseUrl()}/api/icons/search?${key}`)
-          .then((r) => r.ok ? r.json() : null)
-          .then((data) => { if (data?.results) iconResultCache.set(key, data.results) })
-          .catch(() => {})
-      }
-    })
-  }, [visible])
-
   const handleIconClick = useCallback((icon) => {
     if (typeof window === 'undefined') return
     const place = (svgContent) => {
@@ -214,6 +204,7 @@ export default function IconSidebar() {
         <div className="flex items-center gap-2 bg-surface-hover border border-border-light rounded-lg px-2.5 py-2">
           <i className="bx bxs-search text-text-muted text-sm" />
           <input
+            ref={searchInputRef}
             id="iconSearchInput"
             type="text"
             value={query}

package/src/react/components/sidebars/ImageSidebar.jsx

@@ -10,6 +10,15 @@ export default function ImageSidebar() {
   const { t } = useTranslation()
   const selectedShapeSidebar = useSketchStore((s) => s.selectedShapeSidebar)
   const toggleImageGenerateModal = useUIStore((s) => s.toggleImageGenerateModal)
+  const toggleAIModal = useUIStore((s) => s.toggleAIModal)
+  const isGraph = typeof window !== 'undefined' && window.currentShape?._frameType === 'graph'
+
+  const handleEditGraph = useCallback(() => {
+    const shape = window.currentShape
+    if (!shape || shape._frameType !== 'graph') return
+    window.__aiEditTargetFrame = shape
+    toggleAIModal()
+  }, [toggleAIModal])
 
   const handleEditWithAI = useCallback(() => {
     const shape = window.currentShape
@@ -36,31 +45,45 @@ export default function ImageSidebar() {
 
   return (
     <ShapeSidebar visible={selectedShapeSidebar === 'image'}>
-      {/* Edit with AI */}
-      <button
-        onClick={handleEditWithAI}
-        title="Edit with AI"
-        className="h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-purple-400 hover:bg-purple-500/10 transition-all duration-100"
-      >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
-          <path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z" />
-        </svg>
-        <span className="text-xs">AI Edit</span>
-      </button>
+      {isGraph && (
+        <>
+          <button
+            onClick={handleEditGraph}
+            title="Edit graph"
+            className="h-9 flex cursor-pointer items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-accent hover:bg-accent/10 transition-all duration-100"
+          >
+            <i className="bx bx-line-chart text-base" />
+            <span className="text-xs">Edit graph</span>
+          </button>
+          <Divider />
+        </>
+      )}
 
-      <Divider />
-
-      {/* Replace image */}
-      <button
-        onClick={handleReplace}
-        title="Replace image"
-        className="h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-white hover:bg-white/[0.06] transition-all duration-100"
-      >
-        <i className="bx bx-upload text-base" />
-        <span className="text-xs">Replace</span>
-      </button>
-
-      <Divider />
+      {/* Edit with AI */}
+      {!isGraph && (
+        <>
+          <button
+            onClick={handleEditWithAI}
+            title="Edit with AI"
+            className="h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-purple-400 hover:bg-purple-500/10 transition-all duration-100"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
+              <path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z" />
+            </svg>
+            <span className="text-xs">AI Edit</span>
+          </button>
+          <Divider />
+          <button
+            onClick={handleReplace}
+            title="Replace image"
+            className="h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-white hover:bg-white/[0.06] transition-all duration-100"
+          >
+            <i className="bx bx-upload text-base" />
+            <span className="text-xs">Replace</span>
+          </button>
+          <Divider />
+        </>
+      )}
 
       {/* Layer controls */}
       <LayerControls />

package/src/react/store/useUIStore.js

@@ -29,25 +29,82 @@ function invertShapeColors(prevResolved, nextResolved) {
 
   for (const shape of shapes) {
     let changed = false
-    if (shape.options) {
-      if (normalize(shape.options.stroke) === from) {
-        shape.options.stroke = to
+    if (shape.shapeName === 'icon' || shape.type === 'icon') {
+      const isDark = nextResolved === 'dark'
+      const targetDarkColor = '#1a1a2e'
+      const bgDarkColor = '#15111f'
+
+      if (shape.group) {
+        shape.group.querySelectorAll('*').forEach((element) => {
+          if (element.nodeType === 1) {
+            const fill = element.getAttribute('fill')
+            const stroke = element.getAttribute('stroke')
+
+            if (fill && fill !== 'none' && fill !== 'transparent') {
+              const normFill = fill.toLowerCase().trim()
+              if (isDark) {
+                if (normFill === targetDarkColor || normFill === '#000000' || normFill === '#000') {
+                  element.setAttribute('fill', '#ffffff')
+                  changed = true
+                } else if (normFill === '#ffffff' || normFill === '#fff') {
+                  element.setAttribute('fill', bgDarkColor)
+                  changed = true
+                }
+              } else {
+                if (normFill === '#ffffff' || normFill === '#fff') {
+                  element.setAttribute('fill', targetDarkColor)
+                  changed = true
+                } else if (normFill === bgDarkColor) {
+                  element.setAttribute('fill', '#ffffff')
+                  changed = true
+                }
+              }
+            }
+
+            if (stroke && stroke !== 'none' && stroke !== 'transparent') {
+              const normStroke = stroke.toLowerCase().trim()
+              if (isDark) {
+                if (normStroke === targetDarkColor || normStroke === '#000000' || normStroke === '#000') {
+                  element.setAttribute('stroke', '#ffffff')
+                  changed = true
+                } else if (normStroke === '#ffffff' || normStroke === '#fff') {
+                  element.setAttribute('stroke', bgDarkColor)
+                  changed = true
+                }
+              } else {
+                if (normStroke === '#ffffff' || normStroke === '#fff') {
+                  element.setAttribute('stroke', targetDarkColor)
+                  changed = true
+                } else if (normStroke === bgDarkColor) {
+                  element.setAttribute('stroke', '#ffffff')
+                  changed = true
+                }
+              }
+            }
+          }
+        })
+      }
+    } else {
+      if (shape.options) {
+        if (normalize(shape.options.stroke) === from) {
+          shape.options.stroke = to
+          changed = true
+        }
+        if (normalize(shape.options.fill) === from) {
+          shape.options.fill = to
+          changed = true
+        }
+      }
+      // Text shapes store color directly
+      if (shape.color !== undefined && normalize(shape.color) === from) {
+        shape.color = to
         changed = true
       }
-      if (normalize(shape.options.fill) === from) {
-        shape.options.fill = to
+      if (shape.strokeColor !== undefined && normalize(shape.strokeColor) === from) {
+        shape.strokeColor = to
         changed = true
       }
     }
-    // Text shapes store color directly
-    if (shape.color !== undefined && normalize(shape.color) === from) {
-      shape.color = to
-      changed = true
-    }
-    if (shape.strokeColor !== undefined && normalize(shape.strokeColor) === from) {
-      shape.strokeColor = to
-      changed = true
-    }
     if (changed && typeof shape.draw === 'function') {
       shape.draw()
     }

package/src/shapes/Frame.js

@@ -480,6 +480,7 @@ move(dx, dy) {
     labelText.textContent = this.frameName || "Frame";
     labelText.style.cursor = "pointer";
     labelText.style.userSelect = "none";
+    labelText.style.pointerEvents = "all";
     
     if (this.rotation !== 0) {
         const centerX = this.x + this.width / 2;
@@ -487,6 +488,11 @@ move(dx, dy) {
         labelText.setAttribute("transform", `rotate(${this.rotation}, ${centerX}, ${centerY})`);
     }
     
+    // Do not let the first click select/redraw the frame: replacing the label
+    // between clicks prevents the browser from ever emitting `dblclick`.
+    labelText.addEventListener('pointerdown', (e) => e.stopPropagation());
+    labelText.addEventListener('click', (e) => e.stopPropagation());
+
     // Add double-click event for renaming
     labelText.addEventListener('dblclick', (e) => {
         e.stopPropagation();
@@ -498,6 +504,10 @@ move(dx, dy) {
 }
 
 startLabelEdit(labelElement) {
+    if (this._labelEditor) {
+        this._labelEditor.querySelector('input')?.focus();
+        return;
+    }
     // Create a foreignObject to hold an HTML input
     const foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
     foreignObject.setAttribute("x", this.x + 5);
@@ -535,6 +545,7 @@ startLabelEdit(labelElement) {
     
     foreignObject.appendChild(input);
     this.group.appendChild(foreignObject);
+    this._labelEditor = foreignObject;
     
     // Hide the original label
     labelElement.style.display = "none";
@@ -545,7 +556,10 @@ startLabelEdit(labelElement) {
         input.select();
     }, 10);
     
+    let finished = false;
     const finishEdit = () => {
+        if (finished) return;
+        finished = true;
         const newName = input.value.trim() || "Frame";
         
         // Track name change in undo system if it actually changed
@@ -573,7 +587,8 @@ startLabelEdit(labelElement) {
         this.frameName = newName;
         
         // Remove the input
-        this.group.removeChild(foreignObject);
+        foreignObject.remove();
+        this._labelEditor = null;
         
         // Show and update the label
         labelElement.style.display = "block";
@@ -590,8 +605,10 @@ startLabelEdit(labelElement) {
             finishEdit();
         } else if (e.key === 'Escape') {
             e.preventDefault();
+            finished = true;
             // Cancel edit - restore original name
-            this.group.removeChild(foreignObject);
+            foreignObject.remove();
+            this._labelEditor = null;
             labelElement.style.display = "block";
         }
     });

package/src/shapes/IconShape.js

@@ -79,6 +79,25 @@ class IconShape {
         this.element.setAttribute('data-shape-height', value);
     }
 
+    _transformMetrics() {
+        const vbWidth = parseFloat(this.element.getAttribute('data-viewbox-width')) || 24;
+        const vbHeight = parseFloat(this.element.getAttribute('data-viewbox-height')) || 24;
+        const scale = Math.min(this.width / vbWidth, this.height / vbHeight);
+        return {
+            scale,
+            localCenterX: this.width / 2 / scale,
+            localCenterY: this.height / 2 / scale,
+        };
+    }
+
+    _applyTransform() {
+        const { scale, localCenterX, localCenterY } = this._transformMetrics();
+        this.element.setAttribute(
+            'transform',
+            `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${this.rotation}, ${localCenterX}, ${localCenterY})`
+        );
+    }
+
     get rotation() {
         const dataRotation = this.element.getAttribute('data-shape-rotation');
         if (dataRotation) {
@@ -97,27 +116,14 @@ class IconShape {
 
     set rotation(value) {
         this.element.setAttribute('data-shape-rotation', value);
-
-        const vbWidth = parseFloat(this.element.getAttribute('data-viewbox-width')) || 24;
-        const vbHeight = parseFloat(this.element.getAttribute('data-viewbox-height')) || 24;
-        const scale = this.width / Math.max(vbWidth, vbHeight);
-        const localCenterX = this.width / 2 / scale;
-        const localCenterY = this.height / 2 / scale;
-
-        this.element.setAttribute('transform', `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${value}, ${localCenterX}, ${localCenterY})`);
+        this._applyTransform();
     }
 
     move(dx, dy) {
         this.x += dx;
         this.y += dy;
 
-        const vbWidth = parseFloat(this.element.getAttribute('data-viewbox-width')) || 24;
-        const vbHeight = parseFloat(this.element.getAttribute('data-viewbox-height')) || 24;
-        const scale = this.width / Math.max(vbWidth, vbHeight);
-        const localCenterX = this.width / 2 / scale;
-        const localCenterY = this.height / 2 / scale;
-
-        this.element.setAttribute('transform', `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${this.rotation}, ${localCenterX}, ${localCenterY})`);
+        this._applyTransform();
 
         this.element.setAttribute('x', this.x);
         this.element.setAttribute('y', this.y);
@@ -173,11 +179,7 @@ class IconShape {
     }
 
     draw() {
-        const scale = this.width / 24;
-        const localCenterX = this.width / 2 / scale;
-        const localCenterY = this.height / 2 / scale;
-
-        this.element.setAttribute('transform', `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${this.rotation}, ${localCenterX}, ${localCenterY})`);
+        this._applyTransform();
 
         this.element.setAttribute('data-shape-x', this.x);
         this.element.setAttribute('data-shape-y', this.y);
@@ -246,11 +248,7 @@ class IconShape {
             pos.parentFrame.addShapeToFrame(this);
         }
 
-        const scale = pos.width / 24;
-        const localCenterX = pos.width / 2 / scale;
-        const localCenterY = pos.height / 2 / scale;
-
-        this.element.setAttribute('transform', `translate(${pos.x}, ${pos.y}) scale(${scale}) rotate(${pos.rotation}, ${localCenterX}, ${localCenterY})`);
+        this._applyTransform();
 
         this.element.setAttribute('data-shape-x', pos.x);
         this.element.setAttribute('data-shape-y', pos.y);

package/src/shapes/ImageShape.js

@@ -262,8 +262,12 @@ class ImageShape {
     }
 
     selectShape() {
-        // Select the image
-        selectImage({ target: this.element, stopPropagation: () => {} });
+        // Image interaction state lives in imageTool. Use its bridge so
+        // programmatically-created images (graphs, restored scenes, paste)
+        // receive the same drag/resize controls as pointer-selected images.
+        if (typeof window.__selectImageElement === 'function') {
+            window.__selectImageElement(this.element, { force: true });
+        }
     }
 }
 

package/src/tools/frameTool.js

@@ -143,9 +143,12 @@ const handleMouseDown = (e) => {
             currentFrame = null;
             currentShape = null;
         } else {
-            pushCreateAction(currentFrame);
             // Check for shapes that should be contained in the new frame
             currentFrame.updateContainedShapes(true); // Apply clipping immediately for new frames
+            pushCreateAction(currentFrame, {
+                frameCreation: true,
+                containedShapes: [...currentFrame.containedShapes]
+            });
 
             // Auto-select the new frame and switch to selection tool
             const placedFrame = currentFrame;
@@ -177,17 +180,24 @@ const handleMouseDown = (e) => {
         }
     }
 
-    // Only check frame containment for shapes that aren't already in frames
+    // Only check frame containment for shapes that aren't already in frames.
+    // Record this fallback attachment too; individual shape tools normally do
+    // it themselves, but restored/imported shapes can reach this path.
     if (!isDragging) {
         shapes.forEach(shape => {
             if (shape.shapeName !== 'frame' && !shape.parentFrame) {
-                shapes.forEach(frame => {
-                    if (frame.shapeName === 'frame') {
-                        if (frame.isShapeInFrame(shape)) {
-                            frame.addShapeToFrame(shape);
-                        }
+                let targetFrame = null;
+                for (let i = shapes.length - 1; i >= 0; i--) {
+                    const frame = shapes[i];
+                    if (frame.shapeName === 'frame' && frame.isShapeInFrame(shape)) {
+                        targetFrame = frame;
+                        break;
                     }
-                });
+                }
+                if (targetFrame) {
+                    targetFrame.addShapeToFrame(shape);
+                    pushFrameAttachmentAction(targetFrame, shape, 'attach', null);
+                }
             }
         });
     }
@@ -278,4 +288,4 @@ export {
     handleMouseDown as handleMouseDownFrame,
     handleMouseMove as handleMouseMoveFrame,
     handleMouseUp as handleMouseUpFrame
-};
+};

package/src/tools/iconTool.js

@@ -258,6 +258,18 @@ const handleMouseDownIcon = async (e) => {
         return;
     }
 
+// Helper to get inherited attribute from the SVG sub-tree
+function getInheritedAttr(element, attrName) {
+    let curr = element;
+    while (curr && curr.nodeType === 1) {
+        if (curr.getAttribute(attrName)) {
+            return curr.getAttribute(attrName);
+        }
+        curr = curr.parentElement;
+    }
+    return null;
+}
+
     if (!isDraggingIcon || !iconToPlace || !isIconToolActive) {
         return;
     }
@@ -322,29 +334,50 @@ const handleMouseDownIcon = async (e) => {
         backgroundRect.setAttribute('style', 'pointer-events: all; cursor: pointer;');
         finalIconGroup.appendChild(backgroundRect);
 
-        const allChildren = originalSvgElement.children;
-        for (let i = 0; i < allChildren.length; i++) {
-            const clonedChild = allChildren[i].cloneNode(true);
+        const isDark = document.body && document.body.classList.contains('theme-dark');
+        const targetDarkColor = '#1a1a2e';
+        const bgDarkColor = '#15111f';
 
-            // Apply white fill/stroke so icons are visible on dark canvas
-            const applyWhiteStyle = (element) => {
-                if (element.nodeType === 1) {
-                    const fill = element.getAttribute('fill');
-                    const stroke = element.getAttribute('stroke');
-                    // Replace black/dark fills with white; leave 'none'/'transparent' alone
-                    if (!fill || fill === '#000' || fill === '#000000' || fill === 'black' || fill === 'currentColor') {
-                        element.setAttribute('fill', '#ffffff');
-                    }
-                    if (stroke === '#000' || stroke === '#000000' || stroke === 'black' || stroke === 'currentColor') {
-                        element.setAttribute('stroke', '#ffffff');
-                    }
-                    for (let j = 0; j < element.children.length; j++) {
-                        applyWhiteStyle(element.children[j]);
-                    }
+        const applyThemeStyle = (element) => {
+            if (element.nodeType === 1) {
+                const fill = getInheritedAttr(element, 'fill');
+                const stroke = getInheritedAttr(element, 'stroke');
+
+                const normFill = fill ? fill.toLowerCase().trim() : null;
+                const normStroke = stroke ? stroke.toLowerCase().trim() : null;
+
+                // Handle fill
+                if (normFill === 'none' || normFill === 'transparent') {
+                    element.setAttribute('fill', 'none');
+                } else if (!normFill || ['#000', '#000000', 'black', 'currentcolor', '#1a1a2e'].includes(normFill)) {
+                    element.setAttribute('fill', isDark ? '#ffffff' : targetDarkColor);
+                } else if (['#fff', '#ffffff', 'white', '#15111f'].includes(normFill)) {
+                    element.setAttribute('fill', isDark ? bgDarkColor : '#ffffff');
                 }
-            };
-            applyWhiteStyle(clonedChild);
 
+                // Handle stroke
+                if (normStroke === 'none' || normStroke === 'transparent') {
+                    element.setAttribute('stroke', 'none');
+                } else if (normStroke && ['#000', '#000000', 'black', 'currentcolor', '#1a1a2e'].includes(normStroke)) {
+                    element.setAttribute('stroke', isDark ? '#ffffff' : targetDarkColor);
+                } else if (normStroke && ['#fff', '#ffffff', 'white', '#15111f'].includes(normStroke)) {
+                    element.setAttribute('stroke', isDark ? bgDarkColor : '#ffffff');
+                }
+
+                for (let j = 0; j < element.children.length; j++) {
+                    applyThemeStyle(element.children[j]);
+                }
+            }
+        };
+
+        // Apply theme styles to original elements while they are still in context
+        for (let i = 0; i < originalSvgElement.children.length; i++) {
+            applyThemeStyle(originalSvgElement.children[i]);
+        }
+
+        const allChildren = originalSvgElement.children;
+        for (let i = 0; i < allChildren.length; i++) {
+            const clonedChild = allChildren[i].cloneNode(true);
             finalIconGroup.appendChild(clonedChild);
         }
 
@@ -1250,8 +1283,8 @@ function normalizeSVGSize(svgContent, fillColor = '#fff', strokeColor = null) {
                 
                 // Only apply to shape elements, not container elements like 'g'
                 if (['path', 'circle', 'rect', 'polygon', 'ellipse', 'polyline', 'line'].includes(tagName)) {
-                    const currentFill = element.getAttribute('fill');
-                    const currentStroke = element.getAttribute('stroke');
+                    const currentFill = getInheritedAttr(element, 'fill');
+                    const currentStroke = getInheritedAttr(element, 'stroke');
                     
                     // Check if parent <g> has explicit colors - if so, don't override
                     let parentG = element.parentElement;
@@ -1266,19 +1299,21 @@ function normalizeSVGSize(svgContent, fillColor = '#fff', strokeColor = null) {
                     }
                     
                     // Only apply white fill if:
-                    // 1. Element doesn't have explicit 'none' fill
+                    // 1. Element doesn't have explicit/inherited 'none'/'transparent' fill
                     // 2. Element doesn't already have a specific color (other than black/default)
                     // 3. Parent <g> doesn't have explicit colors
-                    if (!hasParentColor && currentFill !== 'none') {
+                    if (!hasParentColor && currentFill !== 'none' && currentFill !== 'transparent') {
                         // Only override if it's black, default, or unset
                         if (!currentFill || currentFill === '#000' || currentFill === '#000000' || currentFill === 'black' || currentFill === 'currentColor') {
                             element.setAttribute('fill', fillColor);
                         }
+                    } else if (currentFill === 'none' || currentFill === 'transparent') {
+                        element.setAttribute('fill', 'none');
                     }
                     
                     // Handle stroke similarly
                     if (strokeColor && !hasParentColor) {
-                        if (currentStroke && currentStroke !== 'none') {
+                        if (currentStroke && currentStroke !== 'none' && currentStroke !== 'transparent') {
                             if (!currentStroke || currentStroke === '#000' || currentStroke === '#000000' || currentStroke === 'black' || currentStroke === 'currentColor') {
                                 element.setAttribute('stroke', strokeColor);
                             }