@design.estate/dees-catalog 3.96.0 → 3.96.2

package/ts_web/elements/00group-dataview/dees-table/dees-table.ts

@@ -735,22 +735,24 @@ export class DeesTable<T> extends DeesElement {
                             return html`
                               <td class="actionsCol">
                                 <div class="actionsContainer">
-                                  ${inRowActions.map(
-                                    (actionArg) => html`
-                                      <div
-                                        class="action"
-                                        @click=${() =>
-                                          actionArg.actionFunc({
-                                            item: itemArg,
-                                            table: this,
-                                          })}
-                                      >
-                                        ${actionArg.iconName
-                                          ? html` <dees-icon .icon=${actionArg.iconName}></dees-icon> `
-                                          : actionArg.name}
-                                      </div>
-                                    `
-                                  )}
+                                  ${inRowActions
+                                    .filter((actionArg) => this.isActionRelevant(actionArg, itemArg))
+                                    .map(
+                                      (actionArg) => html`
+                                        <div
+                                          class="action"
+                                          @click=${() =>
+                                            actionArg.actionFunc({
+                                              item: itemArg,
+                                              table: this,
+                                            })}
+                                        >
+                                          ${actionArg.iconName
+                                            ? html` <dees-icon .icon=${actionArg.iconName}></dees-icon> `
+                                            : actionArg.name}
+                                        </div>
+                                      `
+                                    )}
                                 </div>
                               </td>
                             `;
@@ -2119,7 +2121,11 @@ export class DeesTable<T> extends DeesElement {
       this.startEditing(cell.item, cell.col);
       return;
     }
-    const dblAction = this.dataActions.find((a) => a.type?.includes('doubleClick'));
+    const dblAction = this.dataActions.find(
+      (action) =>
+        action.type?.includes('doubleClick')
+        && this.isActionRelevant(action, cell.item)
+    );
     if (dblAction) dblAction.actionFunc({ item: cell.item, table: this });
   };
 
@@ -2145,16 +2151,19 @@ export class DeesTable<T> extends DeesElement {
       this.emitSelectionChange();
       this.requestUpdate();
     }
-    const userItems: plugins.tsclass.website.IMenuItem[] = this.getActionsForType('contextmenu').map(
-      (action) => ({
-        name: action.name,
-        iconName: action.iconName as any,
-        action: async () => {
-          await action.actionFunc({ item, table: this });
-          return null;
-        },
-      })
-    );
+    const userItems: plugins.tsclass.website.IMenuItem[] = this
+      .getActionsForType('contextmenu')
+      .filter((action) => this.isActionRelevant(action, item))
+      .map(
+        (action) => ({
+          name: action.name,
+          iconName: action.iconName as any,
+          action: async () => {
+            await action.actionFunc({ item, table: this });
+            return null;
+          },
+        })
+      );
     const defaultItems: plugins.tsclass.website.IMenuItem[] = [
       {
         name:
@@ -2333,6 +2342,13 @@ export class DeesTable<T> extends DeesElement {
     );
   }
 
+  private isActionRelevant(actionArg: ITableAction<T>, itemArg: T): boolean {
+    return (
+      !actionArg.actionRelevancyCheckFunc
+      || actionArg.actionRelevancyCheckFunc(itemArg)
+    );
+  }
+
   getActionsForType(typeArg: ITableAction['type'][0]) {
     const actions: ITableAction[] = [];
     for (const action of this.dataActions) {

package/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts

@@ -89,8 +89,8 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
 
       .option {
         position: relative;
-        display: flex;
-        align-items: center;
+        display: grid;
+        place-items: center;
         height: 100%;
         padding: 0 var(--dees-spacing-lg);
         border-radius: var(--dees-radius-sm);
@@ -104,6 +104,21 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
         z-index: 2;
       }
 
+      .option-label,
+      .option::after {
+        grid-area: 1 / 1;
+      }
+
+      /* Reserve the selected label's semibold width in every state so moving
+         the thumb never changes the segmented control's intrinsic width. */
+      .option::after {
+        content: attr(data-option);
+        visibility: hidden;
+        font-weight: 600;
+        pointer-events: none;
+        user-select: none;
+      }
+
       /* Hairline separators between unselected segments; they fade out next to
          the thumb. */
       .option::before {
@@ -197,8 +212,9 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
                 index === 0 || isSelected || index - 1 === selectedIndex;
               return html`<div
                 class="option ${isSelected ? 'selected' : ''} ${hideSeparator ? 'no-sep' : ''}"
+                data-option=${option}
                 @click=${() => this.handleSelection(option)}
-              >${option}</div>`;
+              ><span class="option-label">${option}</span></div>`;
             })}
           </div>
         </div>

package/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -373,6 +373,7 @@ export class DeesSimpleAppDash extends DeesElement {
         bottom: 24px;
         width: calc(100% - 240px);
         overflow: auto;
+        scrollbar-gutter: stable;
         background: var(--dees-color-bg-canvas);
         overscroll-behavior: contain;
       }

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)};