@design.estate/dees-catalog 3.49.0 → 3.49.2

package/ts_web/elements/00group-overlay/dees-speechbubble/dees-speechbubble.ts

@@ -42,7 +42,7 @@ export class DeesSpeechbubble extends DeesElement {
     speechbubble.manifested = true;
     windowLayer.appendChild(speechbubble);
     windowLayer.style.pointerEvents = 'none';
-    (windowLayer.shadowRoot.querySelector('.windowOverlay') as HTMLElement).style.pointerEvents = 'none';
+    (windowLayer.shadowRoot!.querySelector('.windowOverlay') as HTMLElement).style.pointerEvents = 'none';
     return speechbubble;
   }
 
@@ -50,13 +50,13 @@ export class DeesSpeechbubble extends DeesElement {
   @property({
     type: Object,
   })
-  accessor reffedElement: HTMLElement;
+  accessor reffedElement!: HTMLElement;
 
   @property({
     type: String,
     reflect: true,
   })
-  accessor text: string;
+  accessor text!: string;
 
   @property({
     type: Boolean,
@@ -73,7 +73,7 @@ export class DeesSpeechbubble extends DeesElement {
   })
   accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
-  public windowLayer: DeesWindowLayer;
+  public windowLayer!: DeesWindowLayer;
 
   constructor() {
     super();
@@ -189,7 +189,7 @@ export class DeesSpeechbubble extends DeesElement {
     }
     if (this.manifested) {
       await this.updatePosition();
-      (this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '1';
+      (this.shadowRoot!.querySelector('.maincontainer') as HTMLElement).style.opacity = '1';
     } else {
       // lets make sure we instrument it
       let speechbubble: DeesSpeechbubble;
@@ -227,7 +227,7 @@ export class DeesSpeechbubble extends DeesElement {
   public async show() {}
 
   public async destroy() {
-    (this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '0';
+    (this.shadowRoot!.querySelector('.maincontainer') as HTMLElement).style.opacity = '0';
     this.windowLayer.destroy();
   }
 }

package/ts_web/elements/00group-runtime/environments/WebContainerEnvironment.ts

@@ -132,7 +132,7 @@ export class WebContainerEnvironment implements IExecutionEnvironment {
     const watcher = this.container!.fs.watch(
       path,
       { recursive: options?.recursive ?? false },
-      callback
+      callback as (event: 'rename' | 'change', filename: string | Uint8Array) => void
     );
     return {
       stop: () => watcher.close(),

package/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.demo.ts

@@ -109,14 +109,14 @@ export const demoFunc = () => html`
 
       <dees-panel .title=${'Interactive Shopping Cart'} .subtitle=${'Product cards with dynamic cart calculation'} .runAfterRender=${async (elementArg: HTMLElement) => {
         const products = [
-          { id: 'laptop', element: null, data: { name: 'MacBook Pro 14"', category: 'Computers', description: 'M3 Pro chip with 18GB RAM', price: 1999, originalPrice: 2199, iconName: 'lucide:laptop' }},
-          { id: 'ipad', element: null, data: { name: 'iPad Air', category: 'Tablets', description: '10.9" Liquid Retina display', price: 599, iconName: 'lucide:tablet' }},
-          { id: 'keyboard', element: null, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }}
+          { id: 'laptop', element: null as DeesShoppingProductcard | null, data: { name: 'MacBook Pro 14"', category: 'Computers', description: 'M3 Pro chip with 18GB RAM', price: 1999, originalPrice: 2199, iconName: 'lucide:laptop' }},
+          { id: 'ipad', element: null as DeesShoppingProductcard | null, data: { name: 'iPad Air', category: 'Tablets', description: '10.9" Liquid Retina display', price: 599, iconName: 'lucide:tablet' }},
+          { id: 'keyboard', element: null as DeesShoppingProductcard | null, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }}
         ];
 
         const updateCartSummary = () => {
           let total = 0;
-          const items = [];
+          const items: string[] = [];
           
           products.forEach(product => {
             const element = elementArg.querySelector(`#${product.id}`) as DeesShoppingProductcard;
@@ -216,8 +216,8 @@ export const demoFunc = () => html`
               const output = document.querySelector('#selection-output');
               if (output) {
                 const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
-                const selectedProducts = [];
-                selectedCards.forEach((card: DeesShoppingProductcard) => {
+                const selectedProducts: string[] = [];
+                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
                   if (card.selected) {
                     selectedProducts.push(card.productData.name);
                   }
@@ -243,8 +243,8 @@ export const demoFunc = () => html`
               const output = document.querySelector('#selection-output');
               if (output) {
                 const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
-                const selectedProducts = [];
-                selectedCards.forEach((card: DeesShoppingProductcard) => {
+                const selectedProducts: string[] = [];
+                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
                   if (card.selected) {
                     selectedProducts.push(card.productData.name);
                   }
@@ -271,8 +271,8 @@ export const demoFunc = () => html`
               const output = document.querySelector('#selection-output');
               if (output) {
                 const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
-                const selectedProducts = [];
-                selectedCards.forEach((card: DeesShoppingProductcard) => {
+                const selectedProducts: string[] = [];
+                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
                   if (card.selected) {
                     selectedProducts.push(card.productData.name);
                   }

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

@@ -46,7 +46,7 @@ export class DeesSimpleAppDash extends DeesElement {
   accessor terminalSetupCommand: string = `echo "Terminal ready"`;
 
   @state()
-  accessor selectedView: IView;
+  accessor selectedView!: IView;
 
 
   public static styles = [
@@ -386,7 +386,7 @@ export class DeesSimpleAppDash extends DeesElement {
     `;
   }
 
-  public async firstUpdated(_changedProperties): Promise<void> {
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     const domtools = await this.domtoolsPromise;
     super.firstUpdated(_changedProperties);
     if (this.viewTabs && this.viewTabs.length > 0) {
@@ -395,7 +395,7 @@ export class DeesSimpleAppDash extends DeesElement {
     }
   }
   
-  public currentTerminal: DeesWorkspaceTerminal;
+  public currentTerminal: DeesWorkspaceTerminal | null = null;
   public async launchTerminal() {
     const domtools = await this.domtoolsPromise;
     if (this.currentTerminal) {
@@ -404,7 +404,7 @@ export class DeesSimpleAppDash extends DeesElement {
       return;
     }
 
-    const maincontainer = this.shadowRoot.querySelector('.maincontainer');
+    const maincontainer = this.shadowRoot!.querySelector('.maincontainer')! as HTMLElement;
     const { DeesWorkspaceTerminal } = await import('../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js');
     const terminal = new DeesWorkspaceTerminal();
     terminal.setupCommand = this.terminalSetupCommand;
@@ -444,9 +444,9 @@ export class DeesSimpleAppDash extends DeesElement {
   }
 
 
-  private currentView: DeesElement;
+  private currentView!: DeesElement;
   public async loadView(viewArg: IView) {
-    const appcontent = this.shadowRoot.querySelector('.appcontent');
+    const appcontent = this.shadowRoot!.querySelector('.appcontent')!;
     const view = new viewArg.element();
     if (this.currentView) {
       this.currentView.remove();

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

@@ -141,15 +141,15 @@ export class DeesSimpleLogin extends DeesElement {
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     super.firstUpdated(_changedProperties);
     
-    const form = this.shadowRoot.querySelector('dees-form') as any;
+    const form = this.shadowRoot!.querySelector('dees-form') as any;
     if (form) {
-      form.addEventListener('formData', (event: CustomEvent) => {
+      form.addEventListener('formData', ((event: CustomEvent) => {
         this.dispatchEvent(new CustomEvent('login', { 
           detail: event.detail, 
           bubbles: true, 
           composed: true 
         }));
-      });
+      }) as EventListener);
     }
   }
 
@@ -158,9 +158,9 @@ export class DeesSimpleLogin extends DeesElement {
    */
   public async switchToSlottedContent() {
     const domtools = await this.domtoolsPromise;
-    const loginDiv: HTMLDivElement = this.shadowRoot.querySelector('.login');
-    const loginContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.loginContainer');
-    const slotContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.slotContainer');
+    const loginDiv = this.shadowRoot!.querySelector('.login') as HTMLDivElement;
+    const loginContainerDiv = this.shadowRoot!.querySelector('.loginContainer') as HTMLDivElement;
+    const slotContainerDiv = this.shadowRoot!.querySelector('.slotContainer') as HTMLDivElement;
     loginDiv.style.opacity = '0';
     loginDiv.style.transform = 'translateY(20px)';
     loginContainerDiv.style.pointerEvents = 'none';

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

@@ -15,7 +15,7 @@ export const demoFunc = () => {
     .filter(key => {
       // Skip utility functions and focus on icon components (first letter is uppercase)
       const isUppercaseFirst = key[0] === key[0].toUpperCase() && key[0] !== key[0].toLowerCase();
-      const isFunction = typeof lucideIcons[key] === 'function';
+      const isFunction = typeof (lucideIcons as any)[key] === 'function';
       const notUtility = !['createElement', 'createIcons', 'default'].includes(key);
       return isFunction && isUppercaseFirst && notUtility;
     })
@@ -63,7 +63,7 @@ export const demoFunc = () => {
   const searchIcons = (event: InputEvent) => {
     const searchTerm = (event.target as HTMLInputElement).value.toLowerCase().trim();
     // Get the demo container first, then search within it
-    const demoContainer = (event.target as HTMLElement).closest('.demoContainer');
+    const demoContainer = (event.target as HTMLElement).closest('.demoContainer')!;
     const containers = demoContainer.querySelectorAll('.iconContainer');
     
     containers.forEach(container => {
@@ -79,7 +79,7 @@ export const demoFunc = () => {
     });
     
     // Update counts - search within demoContainer
-    demoContainer.querySelectorAll('.section-container').forEach(section => {
+    demoContainer!.querySelectorAll('.section-container').forEach(section => {
       const visibleIcons = section.querySelectorAll('.iconContainer:not(.hidden)').length;
       const countElement = section.querySelector('.icon-count');
       if (countElement) {

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

@@ -208,7 +208,7 @@ export class DeesIcon extends DeesElement {
   accessor icon: IconWithPrefix | undefined = undefined;
 
   @property({ type: Number })
-  accessor iconSize: number;
+  accessor iconSize!: number;
 
   @property({ type: String })
   accessor color: string = 'currentColor';
@@ -292,13 +292,13 @@ export class DeesIcon extends DeesElement {
       const pascalCaseName = iconName.charAt(0).toUpperCase() + iconName.slice(1);
       
       // Check if the icon exists in lucideIcons
-      if (!lucideIcons[pascalCaseName]) {
+      if (!(lucideIcons as any)[pascalCaseName]) {
         console.warn(`Lucide icon '${pascalCaseName}' not found in lucideIcons object`);
         return '';
       }
-      
+
       // Use the exact pattern from Lucide documentation
-      const svgElement = createElement(lucideIcons[pascalCaseName], {
+      const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
         color: this.color,
         size: this.iconSize,
         strokeWidth: this.strokeWidth
@@ -404,9 +404,9 @@ export class DeesIcon extends DeesElement {
           // Convert to PascalCase
           const pascalCaseName = name.charAt(0).toUpperCase() + name.slice(1);
           
-          if (lucideIcons[pascalCaseName]) {
+          if ((lucideIcons as any)[pascalCaseName]) {
             // Use the documented pattern from Lucide docs
-            const svgElement = createElement(lucideIcons[pascalCaseName], {
+            const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
               color: this.color,
               size: this.iconSize,
               strokeWidth: this.strokeWidth

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

@@ -33,12 +33,12 @@ export class DeesUpdater extends DeesElement {
   @property({
     type: String,
   })
-  accessor currentVersion: string;
+  accessor currentVersion!: string;
 
   @property({
     type: String,
   })
-  accessor updatedVersion: string;
+  accessor updatedVersion!: string;
 
   constructor() {
     super();
@@ -107,7 +107,7 @@ export class DeesUpdater extends DeesElement {
   }
 
   public async destroy() {
-    this.parentElement.removeChild(this);
+    this.parentElement!.removeChild(this);
   }
 
   private windowLayerClicked() {}

package/ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts

@@ -447,7 +447,7 @@ export class DeesWorkspaceFiletree extends DeesElement {
     e.preventDefault();
     e.stopPropagation();
 
-    const menuItems = [];
+    const menuItems: Array<{ name?: string; iconName?: string; action?: () => Promise<void>; divider?: boolean }> = [];
 
     if (node.type === 'directory') {
       // Directory-specific options
@@ -503,7 +503,7 @@ export class DeesWorkspaceFiletree extends DeesElement {
       }
     );
 
-    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems as any);
   }
 
   private async handleEmptySpaceContextMenu(e: MouseEvent) {
@@ -561,14 +561,14 @@ export class DeesWorkspaceFiletree extends DeesElement {
         menuOptions: [
           {
             name: 'Cancel',
-            action: async (modalRef) => {
+            action: async (modalRef: any) => {
               await modalRef.destroy();
               resolve(null);
             },
           },
           {
             name: options.buttonName || 'Create',
-            action: async (modalRef) => {
+            action: async (modalRef: any) => {
               // Query the input element directly and read its value
               const contentEl = modalRef.shadowRoot?.querySelector('.modal .content');
               const inputElement = contentEl?.querySelector('dees-input-text') as DeesInputText | null;

package/ts_web/elements/00group-workspace/dees-workspace-markdown/dees-workspace-markdown.ts

@@ -129,8 +129,8 @@ export class DeesWorkspaceMarkdown extends DeesElement {
   @state()
   accessor isDragging: boolean = false;
 
-  private resizeHandleElement: HTMLElement;
-  private containerElement: HTMLElement;
+  private resizeHandleElement!: HTMLElement;
+  private containerElement!: HTMLElement;
 
   public render() {
     return html`
@@ -173,26 +173,26 @@ const hello = 'yes'
     `;
   }
 
-  public async firstUpdated(_changedPropertiesArg) {
+  public async firstUpdated(_changedPropertiesArg: Map<string | number | symbol, unknown>) {
     await super.firstUpdated(_changedPropertiesArg);
 
     // Initialize current ratio from property
     this.currentSplitRatio = this.splitRatio;
 
     // Cache elements
-    this.containerElement = this.shadowRoot.querySelector('.splitContainer');
-    this.resizeHandleElement = this.shadowRoot.querySelector('.resizeHandle');
+    this.containerElement = this.shadowRoot!.querySelector('.splitContainer')!;
+    this.resizeHandleElement = this.shadowRoot!.querySelector('.resizeHandle')!;
 
-    const editor = this.shadowRoot.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+    const editor = this.shadowRoot!.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
 
     // Wire up markdown rendering
-    const markdownOutlet = this.shadowRoot.querySelector('dees-workspace-markdownoutlet');
+    const markdownOutlet = this.shadowRoot!.querySelector('dees-workspace-markdownoutlet');
     const smartmarkdownInstance = new domtools.plugins.smartmarkdown.SmartMarkdown();
     const mdParsedResult = await smartmarkdownInstance.getMdParsedResultFromMarkdown('loading...')
     editor.contentSubject.subscribe(async contentArg => {
       await mdParsedResult.updateFromMarkdownString(contentArg)
       const html = mdParsedResult.html;
-      markdownOutlet.updateHtmlText(html);
+      markdownOutlet!.updateHtmlText(html);
     });
   }
 
@@ -226,7 +226,7 @@ const hello = 'yes'
     document.removeEventListener('mouseup', this.handleMouseUp);
 
     // Trigger resize on monaco editor
-    const editor = this.shadowRoot.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+    const editor = this.shadowRoot!.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
     if (editor) {
       // Monaco needs to be notified of size changes
       window.dispatchEvent(new Event('resize'));

package/ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts

@@ -381,7 +381,7 @@ export class DeesWorkspaceMarkdownoutlet extends DeesElement {
   ];
 
   // INSTANCE
-  private outlet: HTMLElement;
+  private outlet!: HTMLElement;
 
   public render(): TemplateResult {
     return html`
@@ -394,13 +394,13 @@ export class DeesWorkspaceMarkdownoutlet extends DeesElement {
 
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
     await super.firstUpdated(_changedProperties);
-    this.outlet = this.shadowRoot.querySelector('.outlet');
+    this.outlet = this.shadowRoot!.querySelector('.outlet')!;
   }
 
   public async updateHtmlText(htmlTextArg: string) {
     await this.updateComplete;
     if (!this.outlet) {
-      this.outlet = this.shadowRoot.querySelector('.outlet');
+      this.outlet = this.shadowRoot!.querySelector('.outlet')!;
     }
     this.outlet.innerHTML = htmlTextArg;
   }

package/ts_web/elements/00group-workspace/dees-workspace-monaco/dees-workspace-monaco.ts

@@ -106,7 +106,7 @@ export class DeesWorkspaceMonaco extends DeesElement {
     _changedProperties: Map<string | number | symbol, unknown>
   ): Promise<void> {
     super.firstUpdated(_changedProperties);
-    const container = this.shadowRoot.getElementById('container');
+    const container = this.shadowRoot!.getElementById('container')!
     const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
 
     if (!DeesWorkspaceMonaco.monacoDeferred) {
@@ -174,7 +174,7 @@ export class DeesWorkspaceMonaco extends DeesElement {
     ).text();
     const styleElement = document.createElement('style');
     styleElement.textContent = css;
-    this.shadowRoot.append(styleElement);
+    this.shadowRoot!.append(styleElement);
 
 
     // editor is setup let do the rest

package/ts_web/pages/zindex-showcase.ts

@@ -537,15 +537,15 @@ export const zIndexShowcase = () => html`
               </p>
             `,
             menuOptions: [
-              { name: 'Cancel', action: async (modal) => modal.destroy() },
-              { name: 'Save', action: async (modal) => modal.destroy() }
+              { name: 'Cancel', action: async (modal) => modal!.destroy() },
+              { name: 'Save', action: async (modal) => modal!.destroy() }
             ]
           });
 
           // Add context menu to modal content
-          const modalContent = modal.shadowRoot.querySelector('.modal .content');
+          const modalContent = modal!.shadowRoot!.querySelector('.modal .content');
           if (modalContent) {
-            modalContent.addEventListener('contextmenu', async (e: MouseEvent) => {
+            (modalContent as HTMLElement).addEventListener('contextmenu', async (e: MouseEvent) => {
               DeesContextmenu.openContextMenuWithOptions(e, [
                 { name: 'Context menu in modal', iconName: 'check', action: async () => {} },
                 { divider: true },
@@ -607,7 +607,7 @@ export const zIndexShowcase = () => html`
                       ></dees-input-dropdown>
                     `,
                     menuOptions: [
-                      { name: 'Close', action: async (modal) => modal.destroy() }
+                      { name: 'Close', action: async (modal) => modal!.destroy() }
                     ]
                   });
                 }}>Show Second Modal</dees-button>
@@ -615,7 +615,7 @@ export const zIndexShowcase = () => html`
             `,
             menuOptions: [
               { name: 'Close All', action: async (modal) => {
-                modal.destroy();
+                modal!.destroy();
                 // Also show a toast
                 DeesToast.createAndShow({ message: 'All modals closed!', type: 'info' });
               }}
@@ -694,10 +694,10 @@ export const zIndexShowcase = () => html`
                   </div>
                 `,
                 menuOptions: [
-                  { name: 'Cancel', action: async (modal) => modal.destroy() },
+                  { name: 'Cancel', action: async (modal) => modal!.destroy() },
                   { name: 'Save', action: async (modal) => {
                     DeesToast.createAndShow({ message: 'Document saved!', type: 'success' });
-                    modal.destroy();
+                    modal!.destroy();
                   }}
                 ]
               });
@@ -735,10 +735,10 @@ export const zIndexShowcase = () => html`
                   </dees-form>
                 `,
                 menuOptions: [
-                  { name: 'Cancel', action: async (modal) => modal.destroy() },
+                  { name: 'Cancel', action: async (modal) => modal!.destroy() },
                   { name: 'Apply', action: async (modal) => {
                     DeesToast.createAndShow({ message: 'Tags applied!', type: 'success' });
-                    modal.destroy();
+                    modal!.destroy();
                   }}
                 ]
               });
@@ -766,7 +766,7 @@ export const zIndexShowcase = () => html`
                   ></dees-input-dropdown>
                 `,
                 menuOptions: [
-                  { name: 'Exit Fullscreen', action: async (modal) => modal.destroy() }
+                  { name: 'Exit Fullscreen', action: async (modal) => modal!.destroy() }
                 ]
               });
             }}>Open Fullscreen</dees-button>

package/ts_web/services/DeesServiceLibLoader.ts

@@ -228,7 +228,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
       const module = await import(/* @vite-ignore */ url);
 
       this.highlightJsLib = module.default;
-      return this.highlightJsLib;
+      return this.highlightJsLib!;
     })();
 
     return this.highlightJsLoadingPromise;
@@ -252,7 +252,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
       const module = await import(/* @vite-ignore */ url);
 
       this.apexChartsLib = module.default;
-      return this.apexChartsLib;
+      return this.apexChartsLib!;
     })();
 
     return this.apexChartsLoadingPromise;

package/ts_web/services/versions.ts

@@ -7,7 +7,7 @@ export const CDN_VERSIONS = {
   xtermAddonFit: '0.8.0',
   xtermAddonSearch: '0.13.0',
   highlightJs: '11.11.1',
-  apexcharts: '5.10.3',
+  apexcharts: '5.10.4',
   tiptap: '2.27.2',
   fontawesome: '7.2.0',
 } as const;