@design.estate/wcctools 6.0.0 → 6.2.0

package/ts_shell/elements/wcc-contextmenu.ts

@@ -0,0 +1,306 @@
+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;
+}
+
+export interface IContextMenuOptions {
+  /** The element the menu belongs to: focus returns to it when the menu closes */
+  ownerElement?: HTMLElement;
+}
+
+@customElement('wcc-contextmenu')
+export class WccContextmenu extends DeesElement {
+  /**
+   * Show a context menu at the event's position. The menu takes focus (its first item),
+   * is operated with the arrow keys, Home/End, Enter/Space and Escape/Tab, and returns
+   * focus to `ownerElement` when it closes from the keyboard or after an action.
+   */
+  public static async show(
+    event: MouseEvent,
+    menuItems: IContextMenuItem[],
+    options: IContextMenuOptions = {}
+  ): 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;
+    menu.ownerElement = options.ownerElement ?? null;
+
+    document.body.appendChild(menu);
+
+    // Wait for render then adjust position if needed
+    await menu.updateComplete;
+    menu.adjustPosition();
+    menu.focusItem(0);
+  }
+
+  /** Focus returns here when the menu closes from the keyboard or after an action */
+  private ownerElement: HTMLElement | null = null;
+  private closing = false;
+
+  @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);
+  /** The pending frame that adds the document listeners; cancelled on removal */
+  private listenerFrame: number | null = null;
+
+  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 {
+        outline: none;
+      }
+
+      .menu-item:hover,
+      .menu-item:focus {
+        background: rgba(59, 130, 246, 0.15);
+        color: #fff;
+        outline: none;
+      }
+
+      .menu-item:focus-visible {
+        box-shadow: inset 0 0 0 2px #3b82f6;
+      }
+
+      .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" role="menu" tabindex="-1" @keydown=${this.handleMenuKeydown}>
+        ${this.menuItems.map(item => html`
+          <div
+            class="menu-item ${item.disabled ? 'disabled' : ''}"
+            role="menuitem"
+            tabindex="-1"
+            aria-disabled=${item.disabled ? 'true' : 'false'}
+            @click=${() => this.handleItemClick(item)}
+          >
+            ${item.iconName ? html`<span class="icon" aria-hidden="true">${item.iconName}</span>` : null}
+            <span class="label">${item.name}</span>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback();
+    // Removed again while connecting: there is nothing to listen for
+    if (!this.isConnected) return;
+    // Delay adding listeners to avoid immediate close
+    this.cancelListenerFrame();
+    this.listenerFrame = requestAnimationFrame(() => {
+      this.listenerFrame = null;
+      document.addEventListener('click', this.boundHandleOutsideClick);
+      document.addEventListener('contextmenu', this.boundHandleOutsideClick);
+      document.addEventListener('keydown', this.boundHandleKeydown);
+      this.classList.add('visible');
+    });
+  }
+
+  async disconnectedCallback() {
+    // A frame still pending would add the listeners after removal
+    this.cancelListenerFrame();
+    document.removeEventListener('click', this.boundHandleOutsideClick);
+    document.removeEventListener('contextmenu', this.boundHandleOutsideClick);
+    document.removeEventListener('keydown', this.boundHandleKeydown);
+    await super.disconnectedCallback();
+  }
+
+  private cancelListenerFrame() {
+    if (this.listenerFrame !== null) {
+      cancelAnimationFrame(this.listenerFrame);
+      this.listenerFrame = null;
+    }
+  }
+
+  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(true);
+    }
+  }
+
+  private getEnabledItems(): HTMLElement[] {
+    return Array.from(this.shadowRoot?.querySelectorAll<HTMLElement>('.menu-item:not(.disabled)') ?? []);
+  }
+
+  /** Focus an enabled item by index (wrapping); the menu itself if there is none */
+  private focusItem(indexArg: number) {
+    const items = this.getEnabledItems();
+    if (items.length === 0) {
+      (this.shadowRoot?.querySelector('.menu') as HTMLElement | null)?.focus({ preventScroll: true });
+      return;
+    }
+    const index = ((indexArg % items.length) + items.length) % items.length;
+    items[index].focus({ preventScroll: true });
+  }
+
+  private handleMenuKeydown = (e: KeyboardEvent) => {
+    const items = this.getEnabledItems();
+    const current = items.indexOf(this.shadowRoot?.activeElement as HTMLElement);
+    switch (e.key) {
+      case 'ArrowDown':
+        this.focusItem(current + 1);
+        break;
+      case 'ArrowUp':
+        this.focusItem(current < 0 ? -1 : current - 1);
+        break;
+      case 'Home':
+        this.focusItem(0);
+        break;
+      case 'End':
+        this.focusItem(-1);
+        break;
+      case 'Enter':
+      case ' ':
+        if (current >= 0) items[current].click();
+        break;
+      case 'Escape':
+      case 'Tab':
+        this.close(true);
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  private async handleItemClick(item: IContextMenuItem) {
+    if (item.disabled) return;
+    await item.action();
+    this.close(true);
+  }
+
+  private close(returnFocus = false) {
+    if (this.closing) return;
+    this.closing = true;
+    if (returnFocus && this.ownerElement?.isConnected) {
+      this.ownerElement.focus({ preventScroll: true });
+    }
+    this.classList.remove('visible');
+    setTimeout(() => this.remove(), 150);
+  }
+}

package/ts_shell/elements/wcc-preview-frame.ts

@@ -0,0 +1,167 @@
+import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
+
+import * as plugins from '../plugins.js';
+
+export type TWccViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wcc-preview-frame': WccPreviewFrame;
+  }
+}
+
+/** The width of the preview document per viewport; desktop and native fill the frame. */
+const getViewportWidth = (viewportArg: TWccViewport): string => {
+  switch (viewportArg) {
+    case 'tablet':
+      return `${plugins.deesDomtools.breakpoints.tablet}px`;
+    case 'phablet':
+      return `${plugins.deesDomtools.breakpoints.phablet}px`;
+    case 'phone':
+      return `${plugins.deesDomtools.breakpoints.phone}px`;
+    default:
+      return '100%';
+  }
+};
+
+/**
+ * Hosts the preview document in an iframe as wide as the selected viewport, so the preview's
+ * width media queries respond to it.
+ */
+@customElement('wcc-preview-frame')
+export class WccPreviewFrame extends DeesElement {
+  @property()
+  accessor viewport: TWccViewport = 'desktop';
+
+  /** The preview document's address. Set once: changing it navigates the preview. */
+  @property()
+  accessor previewSrc: string = '';
+
+  @property({ type: Boolean })
+  accessor advancedEditorOpen: boolean = false;
+
+  @property({ type: Boolean })
+  accessor isNative: boolean = false;
+
+  @property({ type: Number })
+  accessor sidebarWidth: number = 200;
+
+  @property({ type: Boolean })
+  accessor isResizing: boolean = false;
+
+  /**
+   * Catalog bundles whose latest run failed: shown over the preview, which shows an outdated
+   * bundle or none, until a run finishes and the preview reloads.
+   */
+  @property({ attribute: false })
+  accessor bundleFailures: plugins.interfaces.IWccBundleStatus[] = [];
+
+  public static styles = [
+    css`
+      :host {
+        border: 10px solid rgba(255, 174, 175, 1);
+        box-sizing: border-box;
+        position: absolute;
+        background: ${cssManager.bdTheme('#333', '#000')};
+        right: 0px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        overscroll-behavior: contain;
+      }
+
+      .preview {
+        display: block;
+        box-sizing: border-box;
+        height: 100%;
+        margin: 0 auto;
+        border: 0;
+        background: transparent;
+      }
+
+      .bundle-failure {
+        position: absolute;
+        inset: 0;
+        box-sizing: border-box;
+        overflow: auto;
+        padding: 24px;
+        background: rgba(20, 0, 0, 0.92);
+        color: #ffd7d7;
+        font-family: 'Geist Sans', 'Inter', sans-serif;
+        font-size: 14px;
+      }
+
+      .bundle-failure h2 {
+        margin: 0 0 8px;
+        font-size: 16px;
+        font-weight: 600;
+        color: #ff8a8a;
+      }
+
+      .bundle-failure pre {
+        margin: 0 0 24px;
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+        font-family: 'Geist Mono', 'Intel One Mono', monospace;
+        font-size: 13px;
+        line-height: 1.5;
+      }
+    `,
+  ];
+
+  public get iframe(): HTMLIFrameElement | null {
+    return this.shadowRoot?.querySelector('iframe') ?? null;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          ${this.isNative ? `
+            border: 0px solid rgba(255, 174, 175, 0) !important;
+            left: 0px !important;
+            right: 0px !important;
+            top: 0px !important;
+            bottom: 0px !important;
+          ` : `
+            bottom: ${this.advancedEditorOpen ? '400px' : '100px'};
+            border: 10px solid rgba(255, 174, 175, 1);
+            left: ${this.sidebarWidth}px;
+            top: 0;
+          `}
+          transition: ${this.isResizing ? 'none' : 'all 0.3s ease'};
+          padding: 0;
+        }
+
+        .preview {
+          width: ${this.isNative ? '100%' : getViewportWidth(this.viewport)};
+          pointer-events: ${this.isResizing ? 'none' : 'auto'};
+          ${!this.isNative && this.viewport !== 'desktop'
+            ? 'border-right: 1px dotted #444; border-left: 1px dotted #444;'
+            : ''
+          }
+        }
+
+        ${!this.isNative ? `
+          @container wccShell (max-width: 600px) {
+            :host {
+              left: 0;
+              top: 120px;
+              bottom: ${this.advancedEditorOpen ? '460px' : '160px'};
+            }
+          }
+        ` : ''}
+      </style>
+      ${this.previewSrc ? html`
+        <iframe class="preview" title="Preview" src=${this.previewSrc}></iframe>
+      ` : null}
+      ${this.bundleFailures.length > 0 ? html`
+        <div class="bundle-failure" role="alert">
+          ${this.bundleFailures.map((bundleArg) => html`
+            <h2>bundle failed: ${bundleArg.name}</h2>
+            <pre>${bundleArg.errorMessage}</pre>
+          `)}
+        </div>
+      ` : null}
+    `;
+  }
+}