@design.estate/dees-wcctools 3.4.0 → 3.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "3.4.0",
+  "version": "3.5.1",
   "private": false,
   "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
   "exports": {

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-wcctools',
-  version: '3.4.0',
+  version: '3.5.1',
   description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
 }

package/ts_web/elements/wcc-contextmenu.ts

@@ -0,0 +1,211 @@
+import { DeesElement, property, html, customElement, type TemplateResult, state, css, cssManager } from '@design.estate/dees-element';
+
+export interface IContextMenuItem {
+  name: string;
+  iconName?: string;
+  action: () => void | Promise<void>;
+  disabled?: boolean;
+}
+
+@customElement('wcc-contextmenu')
+export class WccContextmenu extends DeesElement {
+  // Static method to show context menu at position
+  public static async show(
+    event: MouseEvent,
+    menuItems: IContextMenuItem[]
+  ): Promise<void> {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Remove any existing context menu
+    const existing = document.querySelector('wcc-contextmenu');
+    if (existing) {
+      existing.remove();
+    }
+
+    const menu = new WccContextmenu();
+    menu.menuItems = menuItems;
+    menu.x = event.clientX;
+    menu.y = event.clientY;
+
+    document.body.appendChild(menu);
+
+    // Wait for render then adjust position if needed
+    await menu.updateComplete;
+    menu.adjustPosition();
+  }
+
+  @property({ type: Array })
+  accessor menuItems: IContextMenuItem[] = [];
+
+  @property({ type: Number })
+  accessor x: number = 0;
+
+  @property({ type: Number })
+  accessor y: number = 0;
+
+  @state()
+  accessor visible: boolean = false;
+
+  private boundHandleOutsideClick = this.handleOutsideClick.bind(this);
+  private boundHandleKeydown = this.handleKeydown.bind(this);
+
+  public static styles = [
+    css`
+      :host {
+        position: fixed;
+        z-index: 10000;
+        opacity: 0;
+        transform: scale(0.95) translateY(-5px);
+        transition: opacity 0.15s ease, transform 0.15s ease;
+        pointer-events: none;
+      }
+
+      :host(.visible) {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+        pointer-events: auto;
+      }
+
+      .menu {
+        min-width: 160px;
+        background: #0f0f0f;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 6px;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+        padding: 4px 0;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-size: 12px;
+      }
+
+      .menu-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        color: #ccc;
+        cursor: pointer;
+        transition: background 0.1s ease;
+        user-select: none;
+      }
+
+      .menu-item:hover {
+        background: rgba(59, 130, 246, 0.15);
+        color: #fff;
+      }
+
+      .menu-item.disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      .menu-item .icon {
+        font-family: 'Material Symbols Outlined';
+        font-size: 16px;
+        font-weight: normal;
+        font-style: normal;
+        line-height: 1;
+        letter-spacing: normal;
+        text-transform: none;
+        white-space: nowrap;
+        word-wrap: normal;
+        direction: ltr;
+        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+        opacity: 0.7;
+      }
+
+      .menu-item:hover .icon {
+        opacity: 1;
+      }
+
+      .menu-item .label {
+        flex: 1;
+      }
+    `
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="menu">
+        ${this.menuItems.map(item => html`
+          <div
+            class="menu-item ${item.disabled ? 'disabled' : ''}"
+            @click=${() => this.handleItemClick(item)}
+          >
+            ${item.iconName ? html`<span class="icon">${item.iconName}</span>` : null}
+            <span class="label">${item.name}</span>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback();
+    // Delay adding listeners to avoid immediate close
+    requestAnimationFrame(() => {
+      document.addEventListener('click', this.boundHandleOutsideClick);
+      document.addEventListener('contextmenu', this.boundHandleOutsideClick);
+      document.addEventListener('keydown', this.boundHandleKeydown);
+      this.classList.add('visible');
+    });
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    document.removeEventListener('click', this.boundHandleOutsideClick);
+    document.removeEventListener('contextmenu', this.boundHandleOutsideClick);
+    document.removeEventListener('keydown', this.boundHandleKeydown);
+  }
+
+  private adjustPosition() {
+    const rect = this.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+
+    let x = this.x;
+    let y = this.y;
+
+    // Adjust if menu goes off right edge
+    if (x + rect.width > windowWidth - 10) {
+      x = windowWidth - rect.width - 10;
+    }
+
+    // Adjust if menu goes off bottom edge
+    if (y + rect.height > windowHeight - 10) {
+      y = windowHeight - rect.height - 10;
+    }
+
+    // Ensure not off left or top
+    if (x < 10) x = 10;
+    if (y < 10) y = 10;
+
+    this.style.left = `${x}px`;
+    this.style.top = `${y}px`;
+  }
+
+  private handleOutsideClick(e: Event) {
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this.close();
+    }
+  }
+
+  private handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      this.close();
+    }
+  }
+
+  private async handleItemClick(item: IContextMenuItem) {
+    if (item.disabled) return;
+    await item.action();
+    this.close();
+  }
+
+  private close() {
+    this.classList.remove('visible');
+    setTimeout(() => this.remove(), 150);
+  }
+}

package/ts_web/elements/wcc-dashboard.ts

@@ -62,6 +62,14 @@ export class WccDashboard extends DeesElement {
   @property()
   accessor searchQuery: string = '';
 
+  // Pinned items as Set of "sectionName::itemName"
+  @property({ attribute: false })
+  accessor pinnedItems: Set<string> = new Set();
+
+  // Sidebar width (resizable)
+  @property({ type: Number })
+  accessor sidebarWidth: number = 200;
+
   // Derived from selectedViewport - no need for separate property
   public get isNative(): boolean {
     return this.selectedViewport === 'native';
@@ -122,6 +130,8 @@ export class WccDashboard extends DeesElement {
         .dashboardRef=${this}
         .selectedItem=${this.selectedItem}
         .searchQuery=${this.searchQuery}
+        .pinnedItems=${this.pinnedItems}
+        .sidebarWidth=${this.sidebarWidth}
         .isNative=${this.isNative}
         @selectedType=${(eventArg) => {
           this.selectedType = eventArg.detail;
@@ -136,6 +146,19 @@ export class WccDashboard extends DeesElement {
           this.searchQuery = eventArg.detail;
           this.updateUrlWithScrollState();
         }}
+        @pinnedChanged=${(eventArg: CustomEvent) => {
+          this.pinnedItems = eventArg.detail;
+          this.updateUrlWithScrollState();
+        }}
+        @widthChanged=${async (eventArg: CustomEvent) => {
+          this.sidebarWidth = eventArg.detail;
+          this.updateUrlWithScrollState();
+          const frame = await this.wccFrame;
+          if (frame) {
+            frame.sidebarWidth = eventArg.detail;
+            frame.requestUpdate();
+          }
+        }}
       ></wcc-sidebar>
       <wcc-properties
         .dashboardRef=${this}
@@ -144,6 +167,7 @@ export class WccDashboard extends DeesElement {
         .selectedViewport=${this.selectedViewport}
         .selectedTheme=${this.selectedTheme}
         .isNative=${this.isNative}
+        .sidebarWidth=${this.sidebarWidth}
         @selectedViewport=${(eventArg) => {
           this.selectedViewport = eventArg.detail;
           this.scheduleUpdate();
@@ -162,7 +186,7 @@ export class WccDashboard extends DeesElement {
           this.toggleNative();
         }}
       ></wcc-properties>
-      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isNative=${this.isNative}>
+      <wcc-frame id="wccFrame" viewport=${this.selectedViewport} .isNative=${this.isNative} .sidebarWidth=${this.sidebarWidth}>
       </wcc-frame>
     `;
   }
@@ -237,6 +261,8 @@ export class WccDashboard extends DeesElement {
           const search = routeInfo.queryParams.search;
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          const pinned = routeInfo.queryParams.pinned;
+          const sidebarWidth = routeInfo.queryParams.sidebarWidth;
 
           if (search) {
             this.searchQuery = search;
@@ -249,13 +275,36 @@ export class WccDashboard extends DeesElement {
           if (sidebarScrollY) {
             this.sidebarScrollY = parseInt(sidebarScrollY);
           }
+          if (pinned) {
+            const newPinned = new Set(pinned.split(',').filter(Boolean));
+            // Only update if actually different to avoid update loops
+            if (this.pinnedItems.size !== newPinned.size ||
+                ![...newPinned].every(k => this.pinnedItems.has(k))) {
+              this.pinnedItems = newPinned;
+            }
+          } else if (this.pinnedItems.size > 0) {
+            this.pinnedItems = new Set();
+          }
+          if (sidebarWidth) {
+            this.sidebarWidth = parseInt(sidebarWidth, 10);
+          }
 
-          // Apply scroll positions after a short delay to ensure DOM is ready
-          setTimeout(() => {
+          // Apply scroll positions and update frame after a short delay to ensure DOM is ready
+          setTimeout(async () => {
             this.applyScrollPositions();
+            // Ensure frame gets the sidebarWidth
+            const frame = await this.wccFrame;
+            if (frame) {
+              frame.sidebarWidth = this.sidebarWidth;
+              frame.requestUpdate();
+            }
           }, 100);
         } else {
           this.searchQuery = '';
+          // Only clear if not already empty to avoid update loops
+          if (this.pinnedItems.size > 0) {
+            this.pinnedItems = new Set();
+          }
         }
 
         const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
@@ -301,6 +350,8 @@ export class WccDashboard extends DeesElement {
           const search = routeInfo.queryParams.search;
           const frameScrollY = routeInfo.queryParams.frameScrollY;
           const sidebarScrollY = routeInfo.queryParams.sidebarScrollY;
+          const pinned = routeInfo.queryParams.pinned;
+          const sidebarWidth = routeInfo.queryParams.sidebarWidth;
 
           if (search) {
             this.searchQuery = search;
@@ -313,6 +364,19 @@ export class WccDashboard extends DeesElement {
           if (sidebarScrollY) {
             this.sidebarScrollY = parseInt(sidebarScrollY);
           }
+          if (pinned) {
+            const newPinned = new Set(pinned.split(',').filter(Boolean));
+            // Only update if actually different to avoid update loops
+            if (this.pinnedItems.size !== newPinned.size ||
+                ![...newPinned].every(k => this.pinnedItems.has(k))) {
+              this.pinnedItems = newPinned;
+            }
+          } else if (this.pinnedItems.size > 0) {
+            this.pinnedItems = new Set();
+          }
+          if (sidebarWidth) {
+            this.sidebarWidth = parseInt(sidebarWidth, 10);
+          }
 
           // Apply scroll positions after a short delay to ensure DOM is ready
           setTimeout(() => {
@@ -320,6 +384,10 @@ export class WccDashboard extends DeesElement {
           }, 100);
         } else {
           this.searchQuery = '';
+          // Only clear if not already empty to avoid update loops
+          if (this.pinnedItems.size > 0) {
+            this.pinnedItems = new Set();
+          }
         }
 
         const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
@@ -402,6 +470,12 @@ export class WccDashboard extends DeesElement {
     if (this.sidebarScrollY > 0) {
       queryParams.set('sidebarScrollY', this.sidebarScrollY.toString());
     }
+    if (this.pinnedItems.size > 0) {
+      queryParams.set('pinned', Array.from(this.pinnedItems).join(','));
+    }
+    if (this.sidebarWidth !== 200) {
+      queryParams.set('sidebarWidth', this.sidebarWidth.toString());
+    }
 
     const queryString = queryParams.toString();
     const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
@@ -462,6 +536,12 @@ export class WccDashboard extends DeesElement {
     if (this.sidebarScrollY > 0) {
       queryParams.set('sidebarScrollY', this.sidebarScrollY.toString());
     }
+    if (this.pinnedItems.size > 0) {
+      queryParams.set('pinned', Array.from(this.pinnedItems).join(','));
+    }
+    if (this.sidebarWidth !== 200) {
+      queryParams.set('sidebarWidth', this.sidebarWidth.toString());
+    }
 
     const queryString = queryParams.toString();
     const fullUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;

package/ts_web/elements/wcc-frame.ts

@@ -19,13 +19,18 @@ export class WccFrame extends DeesElement {
   @property({ type: Boolean })
   accessor isNative: boolean = false;
 
+  @property({ type: Number })
+  accessor sidebarWidth: number = 200;
+
+  @property({ type: Boolean })
+  accessor isResizing: boolean = false;
+
   public static styles = [
     css`
       :host {
         border: 10px solid #ffaeaf;
         position: absolute;
         background: ${cssManager.bdTheme('#333', '#000')};
-        left: 200px;
         right: 0px;
         top: 0px;
         overflow-y: auto;
@@ -55,9 +60,9 @@ export class WccFrame extends DeesElement {
           ` : `
             bottom: ${this.advancedEditorOpen ? '400px' : '100px'};
             border: 10px solid #ffaeaf;
-            left: 200px;
+            left: ${this.sidebarWidth}px;
           `}
-          transition: all 0.3s ease;
+          transition: ${this.isResizing ? 'none' : 'all 0.3s ease'};
           ${this.isNative ? 'padding: 0px;' : (() => {
           switch (this.viewport) {
             case 'desktop':
@@ -67,19 +72,19 @@ export class WccFrame extends DeesElement {
             case 'tablet':
               return `
                   padding: 0px ${
-                    (document.body.clientWidth - 200 - domtools.breakpoints.tablet) / 2
+                    (document.body.clientWidth - this.sidebarWidth - domtools.breakpoints.tablet) / 2
                   }px;
                 `;
             case 'phablet':
               return `
                   padding: 0px ${
-                    (document.body.clientWidth - 200 - domtools.breakpoints.phablet) / 2
+                    (document.body.clientWidth - this.sidebarWidth - domtools.breakpoints.phablet) / 2
                   }px;
                 `;
             case 'phone':
               return `
                   padding: 0px ${
-                    (document.body.clientWidth - 200 - domtools.breakpoints.phone) / 2
+                    (document.body.clientWidth - this.sidebarWidth - domtools.breakpoints.phone) / 2
                   }px;
                 `;
           }

package/ts_web/elements/wcc-properties.ts

@@ -37,6 +37,9 @@ export class WccProperties extends DeesElement {
   @property()
   accessor isNative: boolean = false;
 
+  @property({ type: Number })
+  accessor sidebarWidth: number = 200;
+
   @state()
   accessor propertyContent: TemplateResult[] = [];
 
@@ -89,7 +92,7 @@ export class WccProperties extends DeesElement {
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           box-sizing: border-box;
           position: absolute;
-          left: 200px;
+          left: ${this.sidebarWidth}px;
           height: ${this.editingProperties.length > 0 ? 100 + this.editorHeight : 100}px;
           bottom: 0px;
           right: 0px;