@design.estate/dees-catalog 3.97.0 → 3.98.0

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

@@ -37,16 +37,17 @@ 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;
 
-// Use a global static cache for all icons to reduce rendering
-const iconCache = new Map<string, 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>();
 
 // Clear cache items occasionally to prevent memory leaks 
 const MAX_CACHE_SIZE = 500;
 function limitCacheSize() {
-  if (iconCache.size > MAX_CACHE_SIZE) {
+  if (iconMaskCache.size > MAX_CACHE_SIZE) {
     // Remove oldest entries (first 20% of items)
-    const keysToDelete = Array.from(iconCache.keys()).slice(0, MAX_CACHE_SIZE / 5);
-    keysToDelete.forEach(key => iconCache.delete(key));
+    const keysToDelete = Array.from(iconMaskCache.keys()).slice(0, MAX_CACHE_SIZE / 5);
+    keysToDelete.forEach(key => iconMaskCache.delete(key));
   }
 }
 
@@ -151,53 +152,42 @@ export class DeesIcon extends DeesElement {
     }
   }
 
-  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) || '';
-    }
+  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;
 
-    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 '';
-      }
+    if (!(lucideIcons as any)[pascalCaseName]) {
+      throw new Error(`Lucide icon '${pascalCaseName}' was not found`);
+    }
 
-      // 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>`;
+    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}'`);
     }
+
+    // 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;
+  }
+
+  private clearIconContainer(container: HTMLElement): void {
+    container.style.backgroundColor = 'transparent';
+    container.style.setProperty('mask-image', 'none');
+    container.style.setProperty('-webkit-mask-image', 'none');
   }
 
   public static styles = [
@@ -213,11 +203,14 @@ export class DeesIcon extends DeesElement {
         pointer-events: none;
       }
 
-      /* Improve rendering performance */
-      #iconContainer svg {
-        display: block;
-        height: 100%;
-        width: 100%;
+      #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%;
         will-change: transform; /* Helps with animations */
         contain: strict; /* Performance optimization */
       }
@@ -244,11 +237,11 @@ export class DeesIcon extends DeesElement {
     }
     
     const effectiveIcon = this.getEffectiveIcon();
-    const container = this.shadowRoot?.querySelector('#iconContainer');
+    const container = this.shadowRoot?.querySelector('#iconContainer') as HTMLElement | null;
     if (!container) return;
 
     if (!effectiveIcon) {
-      container.innerHTML = '';
+      this.clearIconContainer(container);
       this.lastIcon = effectiveIcon;
       this.lastIconSize = this.iconSize;
       this.lastColor = this.color;
@@ -276,45 +269,16 @@ export class DeesIcon extends DeesElement {
       const { type, name } = this.parseIconString(effectiveIcon);
       
       if (type === 'lucide') {
-        // 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;
-          }
-        }
+        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);
       } else {
-        container.innerHTML = '';
+        this.clearIconContainer(container);
         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,6 +37,8 @@ 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;
@@ -226,6 +228,7 @@ 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
@@ -258,6 +261,7 @@ 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
@@ -524,6 +528,10 @@ 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)};