@design.estate/dees-catalog 3.96.3 → 3.97.0

package/ts_web/elements/00group-utility/dees-icon/dees-icon.ts

@@ -37,17 +37,16 @@ export type IconWithPrefix = `lucide:${string}` | string;
 // Legacy type kept for consumers that still import it. `iconFA` itself is no longer supported.
 export type TIconKey = string;
 
-// Cache opaque mask sources. Color is applied separately through currentColor,
-// so theme and inherited text-color changes never require rebuilding geometry.
-const iconMaskCache = new Map<string, string>();
+// Use a global static cache for all icons to reduce rendering
+const iconCache = new Map<string, string>();
 
 // Clear cache items occasionally to prevent memory leaks 
 const MAX_CACHE_SIZE = 500;
 function limitCacheSize() {
-  if (iconMaskCache.size > MAX_CACHE_SIZE) {
+  if (iconCache.size > MAX_CACHE_SIZE) {
     // Remove oldest entries (first 20% of items)
-    const keysToDelete = Array.from(iconMaskCache.keys()).slice(0, MAX_CACHE_SIZE / 5);
-    keysToDelete.forEach(key => iconMaskCache.delete(key));
+    const keysToDelete = Array.from(iconCache.keys()).slice(0, MAX_CACHE_SIZE / 5);
+    keysToDelete.forEach(key => iconCache.delete(key));
   }
 }
 
@@ -152,42 +151,53 @@ export class DeesIcon extends DeesElement {
     }
   }
 
-  private createLucideMaskImage(iconName: string): string {
-    const pascalCaseName = lucideNameToPascalCase(iconName);
-    const cacheKey = `lucide:${pascalCaseName}:${this.iconSize}:${this.strokeWidth}`;
-    const cachedMask = iconMaskCache.get(cacheKey);
-    if (cachedMask) return cachedMask;
-
-    if (!(lucideIcons as any)[pascalCaseName]) {
-      throw new Error(`Lucide icon '${pascalCaseName}' was not found`);
-    }
-
-    const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
-      color: '#fff',
-      size: this.iconSize,
-      strokeWidth: this.strokeWidth,
-    });
-    if (!svgElement) {
-      throw new Error(`Lucide did not create an element for '${pascalCaseName}'`);
+  private renderLucideIcon(iconName: string): string {
+    // Create a cache key based on all visual properties
+    const cacheKey = `lucide:${iconName}:${this.iconSize}:${this.color}:${this.strokeWidth}`;
+    
+    // Check if we already have this icon in the cache
+    if (iconCache.has(cacheKey)) {
+      return iconCache.get(cacheKey) || '';
     }
 
-    // The mask must be completely opaque. The consumer's inherited color,
-    // including any alpha, is painted exactly once behind this geometry.
-    svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    svgElement.setAttribute('color', '#fff');
-    svgElement.setAttribute('stroke', '#fff');
-    svgElement.setAttribute('fill', 'none');
-
-    const maskImage = `url("data:image/svg+xml,${encodeURIComponent(svgElement.outerHTML)}")`;
-    iconMaskCache.set(cacheKey, maskImage);
-    limitCacheSize();
-    return maskImage;
-  }
+    try {
+      // Get the Pascal case icon name (Menu instead of menu, FileText instead of file-text)
+      const pascalCaseName = lucideNameToPascalCase(iconName);
+      
+      // Check if the icon exists in lucideIcons
+      if (!(lucideIcons as any)[pascalCaseName]) {
+        console.warn(`Lucide icon '${pascalCaseName}' not found in lucideIcons object`);
+        return '';
+      }
 
-  private clearIconContainer(container: HTMLElement): void {
-    container.style.backgroundColor = 'transparent';
-    container.style.setProperty('mask-image', 'none');
-    container.style.setProperty('-webkit-mask-image', 'none');
+      // Use the exact pattern from Lucide documentation
+      const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
+        color: this.color,
+        size: this.iconSize,
+        strokeWidth: this.strokeWidth
+      });
+      
+      if (!svgElement) {
+        console.warn(`createElement returned empty result for ${pascalCaseName}`);
+        return '';
+      }
+      
+      // Get the HTML
+      const result = svgElement.outerHTML;
+      
+      // Cache the result for future use
+      iconCache.set(cacheKey, result);
+      limitCacheSize();
+      
+      return result;
+    } catch (error) {
+      console.error(`Error rendering Lucide icon ${iconName}:`, error);
+      
+      // Create a fallback SVG with the icon name
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" fill="none" stroke="${this.color}" stroke-width="${this.strokeWidth}" stroke-linecap="round" stroke-linejoin="round">
+        <text x="50%" y="50%" font-size="6" text-anchor="middle" dominant-baseline="middle" fill="${this.color}">${iconName}</text>
+      </svg>`;
+    }
   }
 
   public static styles = [
@@ -203,14 +213,11 @@ export class DeesIcon extends DeesElement {
         pointer-events: none;
       }
 
-      #iconContainer {
-        background-color: currentColor;
-        mask-position: center;
-        mask-repeat: no-repeat;
-        mask-size: 100% 100%;
-        -webkit-mask-position: center;
-        -webkit-mask-repeat: no-repeat;
-        -webkit-mask-size: 100% 100%;
+      /* Improve rendering performance */
+      #iconContainer svg {
+        display: block;
+        height: 100%;
+        width: 100%;
         will-change: transform; /* Helps with animations */
         contain: strict; /* Performance optimization */
       }
@@ -237,11 +244,11 @@ export class DeesIcon extends DeesElement {
     }
     
     const effectiveIcon = this.getEffectiveIcon();
-    const container = this.shadowRoot?.querySelector('#iconContainer') as HTMLElement | null;
+    const container = this.shadowRoot?.querySelector('#iconContainer');
     if (!container) return;
 
     if (!effectiveIcon) {
-      this.clearIconContainer(container);
+      container.innerHTML = '';
       this.lastIcon = effectiveIcon;
       this.lastIconSize = this.iconSize;
       this.lastColor = this.color;
@@ -269,16 +276,45 @@ export class DeesIcon extends DeesElement {
       const { type, name } = this.parseIconString(effectiveIcon);
       
       if (type === 'lucide') {
-        const maskImage = this.createLucideMaskImage(name);
-        container.style.backgroundColor = this.color === 'currentColor' ? '' : this.color;
-        container.style.setProperty('mask-image', maskImage);
-        container.style.setProperty('-webkit-mask-image', maskImage);
+        // For Lucide, use direct DOM manipulation as shown in the docs
+        // This approach avoids HTML string issues
+        container.innerHTML = ''; // Clear container
+        
+        try {
+          // Convert to PascalCase (handles kebab-case Lucide ids like "file-text")
+          const pascalCaseName = lucideNameToPascalCase(name);
+          
+          if ((lucideIcons as any)[pascalCaseName]) {
+            // Use the documented pattern from Lucide docs
+            const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
+              color: this.color,
+              size: this.iconSize,
+              strokeWidth: this.strokeWidth
+            });
+            
+            if (svgElement) {
+              // Directly append the element
+              container.appendChild(svgElement);
+              return; // Exit early since we've added the element
+            }
+          }
+          
+          // If we reach here, something went wrong
+          throw new Error(`Could not create element for ${pascalCaseName}`);
+        } catch (error) {
+          console.error(`Error rendering Lucide icon:`, error);
+          
+          // Fall back to the string-based approach
+          const iconHtml = this.renderLucideIcon(name);
+          if (iconHtml) {
+            container.innerHTML = iconHtml;
+          }
+        }
       } else {
-        this.clearIconContainer(container);
+        container.innerHTML = '';
         console.error(`dees-icon: fa:${name} is no longer supported. Use icon="lucide:${name}" or another Lucide icon.`);
       }
     } catch (error) {
-      this.clearIconContainer(container);
       console.error(`Error updating icon ${effectiveIcon}:`, error);
     }
   }

package/ts_web/elements/00theme.ts

@@ -37,8 +37,6 @@ export interface IThemeColors {
   bgTertiary: string;
   /** Recessed shell/window base; content surfaces sit elevated above it (both themes). */
   bgCanvas: string;
-  /** Opaque system-label base used when opacity must be composited at element level. */
-  labelBase?: string;
   textPrimary: string;
   textSecondary: string;
   textMuted: string;
@@ -228,7 +226,6 @@ export const themeDefaults: ITheme = {
       bgSecondary: '#f2f2f7',                    // secondarySystemBackground / grouped
       bgTertiary: '#e9e9eb',                     // tertiary recess (headers, hovers)
       bgCanvas: '#f2f2f7',                       // recessed shell base (systemGroupedBackground)
-      labelBase: '#3c3c43',                      // opaque system label base
       textPrimary: '#1d1d1f',                    // near-black label
       textSecondary: 'rgba(60, 60, 67, 0.60)',   // secondaryLabel
       textMuted: 'rgba(60, 60, 67, 0.30)',       // tertiaryLabel
@@ -261,7 +258,6 @@ export const themeDefaults: ITheme = {
       bgSecondary: '#1c1c1e',                     // secondarySystemBackground / systemGray6 — cards, panels
       bgTertiary: '#2c2c2e',                      // tertiarySystemBackground / systemGray5 — headers, hovers
       bgCanvas: '#000000',                        // recessed shell base (true black, matches systemBackground)
-      labelBase: '#ebebf5',                       // opaque system label base
       textPrimary: '#f5f5f7',                     // near-white label
       textSecondary: 'rgba(235, 235, 245, 0.60)', // secondaryLabel
       textMuted: 'rgba(235, 235, 245, 0.30)',     // tertiaryLabel
@@ -528,10 +524,6 @@ export const themeDefaultStyles: CSSResult = css`
     /* ========================================
      * Colors — Text / Label tiers
      * ======================================== */
-    --dees-color-label-base: ${cssManager.bdTheme(l.labelBase || '#3c3c43', d.labelBase || '#ebebf5')};
-    --dees-label-opacity-secondary: 0.6;
-    --dees-label-opacity-muted: 0.3;
-    --dees-label-opacity-quaternary: 0.18;
     --dees-color-text-primary: ${cssManager.bdTheme(l.textPrimary, d.textPrimary)};
     --dees-color-text-secondary: ${cssManager.bdTheme(l.textSecondary, d.textSecondary)};
     --dees-color-text-muted: ${cssManager.bdTheme(l.textMuted, d.textMuted)};