@design.estate/dees-catalog 3.94.0 → 3.96.0

package/ts_web/elements/00group-layout/dees-mosaic/dees-mosaic.ts

@@ -0,0 +1,562 @@
+import { demoFunc } from './dees-mosaic.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type {
+  IMosaicLayout,
+  IMosaicLayoutChangeDetail,
+  IMosaicSplitNode,
+  IMosaicSurfaceMeta,
+  TMosaicLayoutChangeReason,
+  TMosaicNode,
+} from './types.js';
+import { mosaicEqualize, mosaicLeaves, mosaicRemove, mosaicResize } from './tree.js';
+import { MosaicDragController, type IMosaicDropTarget } from './interaction.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-mosaic': DeesMosaic;
+  }
+}
+
+/**
+ * Sway-like tiling workspace. Controlled component: the host owns `layout`
+ * and applies the complete next layouts emitted through
+ * `mosaic-layout-change`. Tile content projects through named slots
+ * (`slot="tile-<leafId>"`) so hosts keep light-DOM ownership — the load-
+ * bearing property for Electron webviews, which must never be reparented
+ * (slot reassignment is safe; verified by spike).
+ */
+@customElement('dees-mosaic')
+export class DeesMosaic extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Layout'];
+
+  @property({ attribute: false })
+  accessor layout: IMosaicLayout = { root: null };
+
+  @property({ attribute: false })
+  accessor surfaces: Record<string, IMosaicSurfaceMeta> = {};
+
+  @property()
+  accessor focusedLeafId: string = '';
+
+  @property({ type: Number })
+  accessor minTileWidth: number = 160;
+
+  @property({ type: Number })
+  accessor minTileHeight: number = 100;
+
+  @property({ type: Number })
+  accessor tilebarHeight: number = 26;
+
+  @property({ type: Boolean })
+  accessor resizeEnabled: boolean = true;
+
+  @property({ type: Boolean })
+  accessor dragEnabled: boolean = true;
+
+  /** transient drop-target highlight during a tile drag */
+  @state()
+  accessor dropTarget: IMosaicDropTarget | null = null;
+
+  private dragController = new MosaicDragController(this);
+
+  /** cancels an in-flight divider drag when the host disconnects mid-gesture */
+  private activeDividerCancel: (() => void) | null = null;
+
+  public async disconnectedCallback(): Promise<void> {
+    this.activeDividerCancel?.();
+    this.dragController.cancelActiveGesture();
+    await super.disconnectedCallback();
+  }
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        min-width: 0;
+        min-height: 0;
+        height: 100%;
+        font-family: var(--dees-font-family);
+        background: var(--dees-color-bg-canvas);
+        --mosaic-tilebar-height: 26px;
+      }
+
+      .rootBox {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .split {
+        display: flex;
+        min-width: 0;
+        min-height: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      .split.row {
+        flex-direction: row;
+      }
+
+      .split.column {
+        flex-direction: column;
+      }
+
+      .cell {
+        min-width: 0;
+        min-height: 0;
+        display: flex;
+      }
+
+      .divider {
+        flex: 0 0 5px;
+        position: relative;
+        background: transparent;
+        z-index: 1;
+      }
+
+      .split.row > .divider {
+        cursor: col-resize;
+      }
+
+      .split.column > .divider {
+        cursor: row-resize;
+      }
+
+      .divider::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        margin: auto;
+        background: var(--dees-color-border-subtle);
+        transition: background var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      .split.row > .divider::after {
+        width: 1px;
+      }
+
+      .split.column > .divider::after {
+        height: 1px;
+      }
+
+      .divider:hover::after,
+      .divider:focus-visible::after,
+      .divider.dragging::after {
+        background: var(--dees-color-accent-primary);
+      }
+
+      .split.row > .divider:hover::after,
+      .split.row > .divider.dragging::after {
+        width: 3px;
+      }
+
+      .split.column > .divider:hover::after,
+      .split.column > .divider.dragging::after {
+        height: 3px;
+      }
+
+      .divider:focus-visible {
+        outline: none;
+      }
+
+      .pane {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--dees-radius-md);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-subtle);
+        overflow: hidden;
+      }
+
+      .pane.focused {
+        border-color: var(--dees-color-border-strong);
+      }
+
+      /* really slim tilebar: drag handle + title + close */
+      .tilebar {
+        flex: 0 0 var(--mosaic-tilebar-height);
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        padding: 0 4px 0 var(--dees-spacing-sm);
+        background: var(--dees-color-bg-secondary);
+        border-bottom: 1px solid var(--dees-color-border-subtle);
+        cursor: grab;
+        user-select: none;
+      }
+
+      .tilebar.dragging {
+        cursor: grabbing;
+      }
+
+      .tilebar dees-icon {
+        color: var(--dees-color-text-secondary);
+        flex: 0 0 auto;
+      }
+
+      .tileTitle {
+        min-width: 0;
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .pane.focused .tileTitle {
+        color: var(--dees-color-text-primary);
+      }
+
+      .tileSpacer {
+        flex: 1;
+      }
+
+      .tileClose {
+        flex: 0 0 auto;
+        display: grid;
+        place-items: center;
+        width: 20px;
+        height: 20px;
+        border: 0;
+        border-radius: var(--dees-radius-sm);
+        corner-shape: var(--dees-corner-shape);
+        background: transparent;
+        color: var(--dees-color-text-muted);
+        cursor: pointer;
+        padding: 0;
+      }
+
+      .tileClose:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .paneContent {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+        position: relative;
+        display: flex;
+      }
+
+      .paneContent ::slotted(*) {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+      }
+
+      .emptyBox {
+        display: grid;
+        place-items: center;
+        width: 100%;
+        height: 100%;
+      }
+
+      /* drag artifacts */
+      .dragShield {
+        position: fixed;
+        inset: 0;
+        z-index: 40;
+        cursor: grabbing;
+      }
+
+      .dragGhost {
+        position: fixed;
+        z-index: 42;
+        transform: translate(-50%, -120%);
+        padding: 3px 10px;
+        border-radius: var(--dees-radius-full);
+        background: var(--dees-material-thick-bg);
+        backdrop-filter: var(--dees-material-thick-filter);
+        border: 1px solid var(--dees-color-border-default);
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-weight: 600;
+        pointer-events: none;
+        box-shadow: var(--dees-shadow-md);
+        white-space: nowrap;
+      }
+
+      .dropPreview {
+        position: absolute;
+        z-index: 41;
+        border-radius: var(--dees-radius-md);
+        corner-shape: var(--dees-corner-shape);
+        background: color-mix(in srgb, var(--dees-color-accent-primary) 18%, transparent);
+        border: 1px solid var(--dees-color-accent-primary);
+        pointer-events: none;
+        transition:
+          left var(--dees-transition-fast) var(--dees-ease-standard),
+          top var(--dees-transition-fast) var(--dees-ease-standard),
+          width var(--dees-transition-fast) var(--dees-ease-standard),
+          height var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .dropPreview {
+          transition: none;
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div
+        class="rootBox"
+        style="--mosaic-tilebar-height: ${this.tilebarHeight}px"
+        @pointerdown=${this.handleRootPointerDown}
+      >
+        ${this.layout.root
+          ? this.renderNode(this.layout.root)
+          : html`<div class="emptyBox"><slot name="empty"></slot></div>`}
+        ${this.renderDropPreview()}
+      </div>
+    `;
+  }
+
+  private renderNode(node: TMosaicNode): TemplateResult {
+    if (node.type === 'leaf') {
+      const meta = this.surfaces[node.surface] ?? { title: node.surface };
+      const title = node.title || meta.title;
+      const closeable = meta.closeable !== false;
+      return html`
+        <div class="pane ${this.focusedLeafId === node.id ? 'focused' : ''}" data-leaf-id=${node.id}>
+          <div
+            class="tilebar"
+            data-leaf-id=${node.id}
+            @pointerdown=${(event: PointerEvent) => this.dragController.handleTilebarPointerDown(event, node.id, title)}
+          >
+            ${meta.icon ? html`<dees-icon .icon=${meta.icon} iconSize="12"></dees-icon>` : ''}
+            <span class="tileTitle">${title}</span>
+            <span class="tileSpacer"></span>
+            ${closeable
+              ? html`
+                  <button
+                    class="tileClose"
+                    type="button"
+                    aria-label="Close ${title}"
+                    @pointerdown=${(event: PointerEvent) => event.stopPropagation()}
+                    @click=${() => this.requestCloseTile(node.id, node.surface)}
+                  >
+                    <dees-icon icon="lucide:X" iconSize="12"></dees-icon>
+                  </button>
+                `
+              : ''}
+          </div>
+          <div class="paneContent" data-leaf-id=${node.id}>
+            <slot name="tile-${node.id}"></slot>
+          </div>
+        </div>
+      `;
+    }
+    const parts: TemplateResult[] = [];
+    node.children.forEach((child, index) => {
+      parts.push(html`
+        <div class="cell" data-cell-of=${node.id} style="flex: ${node.ratios[index]} 1 0%">
+          ${this.renderNode(child)}
+        </div>
+      `);
+      if (index < node.children.length - 1 && this.resizeEnabled) {
+        parts.push(html`
+          <div
+            class="divider"
+            role="separator"
+            tabindex="0"
+            aria-orientation=${node.orientation === 'row' ? 'vertical' : 'horizontal'}
+            data-split-id=${node.id}
+            data-divider-index=${index}
+            @pointerdown=${(event: PointerEvent) => this.handleDividerPointerDown(event, node, index)}
+            @dblclick=${() => this.commitLayout(mosaicEqualize(this.layout, node.id), 'equalize')}
+            @keydown=${(event: KeyboardEvent) => this.handleDividerKeydown(event, node, index)}
+          ></div>
+        `);
+      }
+    });
+    return html`<div class="split ${node.orientation}" data-split-id=${node.id}>${parts}</div>`;
+  }
+
+  private renderDropPreview(): TemplateResult {
+    const target = this.dropTarget;
+    if (!target) return html``;
+    const hostRect = this.getBoundingClientRect();
+    const rect = target.previewRect;
+    return html`
+      <div
+        class="dropPreview"
+        style="left: ${rect.left - hostRect.left}px; top: ${rect.top - hostRect.top}px; width: ${rect.width}px; height: ${rect.height}px"
+      ></div>
+    `;
+  }
+
+  // ------------------------------------------------------------- public API
+
+  /** Content-area rect per leaf id, in viewport coordinates. */
+  public getLeafRects(): Record<string, DOMRect> {
+    const rects: Record<string, DOMRect> = {};
+    for (const pane of this.shadowRoot?.querySelectorAll<HTMLElement>('.paneContent[data-leaf-id]') ?? []) {
+      rects[pane.dataset.leafId as string] = pane.getBoundingClientRect();
+    }
+    return rects;
+  }
+
+  public equalize(splitId?: string): void {
+    this.commitLayout(mosaicEqualize(this.layout, splitId), 'equalize');
+  }
+
+  public focusTile(leafId: string): void {
+    this.focusedLeafId = leafId;
+    const leaf = mosaicLeaves(this.layout).find((candidate) => candidate.id === leafId);
+    if (leaf) this.emitTileEvent('mosaic-tile-focus', leaf.id, leaf.surface);
+  }
+
+  // ------------------------------------------------------------- internals
+
+  public commitLayout(layout: IMosaicLayout, reason: TMosaicLayoutChangeReason): void {
+    const detail: IMosaicLayoutChangeDetail = { layout, reason };
+    this.dispatchEvent(new CustomEvent('mosaic-layout-change', { detail, bubbles: true, composed: true }));
+  }
+
+  private requestCloseTile(leafId: string, surface: string): void {
+    const closeEvent = new CustomEvent('mosaic-tile-close', {
+      detail: { leafId, surface },
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+    const proceed = this.dispatchEvent(closeEvent);
+    if (!proceed) return;
+    this.commitLayout(mosaicRemove(this.layout, leafId), 'close');
+  }
+
+  private emitTileEvent(name: string, leafId: string, surface: string): void {
+    this.dispatchEvent(new CustomEvent(name, { detail: { leafId, surface }, bubbles: true, composed: true }));
+  }
+
+  private handleRootPointerDown = (event: PointerEvent): void => {
+    const pane = (event.composedPath().find(
+      (element) => element instanceof HTMLElement && element.classList?.contains('pane'),
+    )) as HTMLElement | undefined;
+    const leafId = pane?.dataset.leafId;
+    if (!leafId || leafId === this.focusedLeafId) return;
+    this.focusTile(leafId);
+  };
+
+  // -------------------------------------------------------------- resizing
+
+  private handleDividerPointerDown(event: PointerEvent, split: IMosaicSplitNode, dividerIndex: number): void {
+    if (!this.resizeEnabled || event.button !== 0) return;
+    if (this.activeDividerCancel) return; // one divider gesture at a time (multi-touch guard)
+    event.preventDefault();
+    const divider = event.currentTarget as HTMLElement;
+    const container = divider.parentElement as HTMLElement;
+    const horizontal = split.orientation === 'row';
+    const containerExtent = horizontal ? container.clientWidth : container.clientHeight;
+    const startCoord = horizontal ? event.clientX : event.clientY;
+    const cells = Array.from(container.children).filter(
+      (child) => child instanceof HTMLElement && child.classList.contains('cell'),
+    ) as HTMLElement[];
+    const leftCell = cells[dividerIndex];
+    const rightCell = cells[dividerIndex + 1];
+    if (!leftCell || !rightCell || !containerExtent) return;
+    const startLeftRatio = split.ratios[dividerIndex];
+    const startRightRatio = split.ratios[dividerIndex + 1];
+    const pair = startLeftRatio + startRightRatio;
+    const minPx = horizontal ? this.minTileWidth : this.minTileHeight;
+    const minRatio = Math.max(0.05, Math.min(minPx / containerExtent, pair / 2));
+    divider.classList.add('dragging');
+    try {
+      divider.setPointerCapture(event.pointerId);
+    } catch {
+      // synthetic pointers (tests) cannot be captured; listeners work anyway
+    }
+    let lastLeftRatio = startLeftRatio;
+    let resizeEmitFrame = 0;
+
+    const onMove = (moveEvent: PointerEvent) => {
+      const delta = (horizontal ? moveEvent.clientX : moveEvent.clientY) - startCoord;
+      const ratioDelta = delta / containerExtent;
+      lastLeftRatio = Math.min(Math.max(startLeftRatio + ratioDelta, minRatio), pair - minRatio);
+      // css-only while dragging; the tree commits once on release
+      leftCell.style.flex = `${lastLeftRatio} 1 0%`;
+      rightCell.style.flex = `${pair - lastLeftRatio} 1 0%`;
+      if (!resizeEmitFrame) {
+        resizeEmitFrame = requestAnimationFrame(() => {
+          resizeEmitFrame = 0;
+          this.dispatchEvent(new CustomEvent('mosaic-resizing', { detail: {}, bubbles: true, composed: true }));
+        });
+      }
+    };
+    const finish = (commit: boolean) => {
+      this.activeDividerCancel = null;
+      divider.classList.remove('dragging');
+      divider.removeEventListener('pointermove', onMove);
+      divider.removeEventListener('pointerup', onUp);
+      divider.removeEventListener('lostpointercapture', onLost);
+      window.removeEventListener('keydown', onKey, true);
+      if (resizeEmitFrame) cancelAnimationFrame(resizeEmitFrame);
+      if (commit && lastLeftRatio !== startLeftRatio) {
+        this.commitLayout(
+          mosaicResize(this.layout, split.id, dividerIndex, lastLeftRatio - startLeftRatio),
+          'resize',
+        );
+      } else if (!commit) {
+        leftCell.style.flex = `${startLeftRatio} 1 0%`;
+        rightCell.style.flex = `${startRightRatio} 1 0%`;
+      }
+    };
+    const onUp = () => finish(true);
+    const onLost = () => finish(true);
+    const onKey = (keyEvent: KeyboardEvent) => {
+      if (keyEvent.key === 'Escape') {
+        keyEvent.preventDefault();
+        try {
+          divider.releasePointerCapture(event.pointerId);
+        } catch {
+          // not captured (synthetic pointer)
+        }
+        finish(false);
+      }
+    };
+    divider.addEventListener('pointermove', onMove);
+    divider.addEventListener('pointerup', onUp);
+    divider.addEventListener('lostpointercapture', onLost);
+    window.addEventListener('keydown', onKey, true);
+    this.activeDividerCancel = () => finish(false);
+  }
+
+  private handleDividerKeydown(event: KeyboardEvent, split: IMosaicSplitNode, dividerIndex: number): void {
+    const horizontal = split.orientation === 'row';
+    const decrease = horizontal ? 'ArrowLeft' : 'ArrowUp';
+    const increase = horizontal ? 'ArrowRight' : 'ArrowDown';
+    if (event.key !== decrease && event.key !== increase) return;
+    event.preventDefault();
+    const container = (event.currentTarget as HTMLElement).parentElement as HTMLElement;
+    const extent = horizontal ? container.clientWidth : container.clientHeight;
+    if (!extent) return;
+    const step = (event.key === increase ? 16 : -16) / extent;
+    this.commitLayout(mosaicResize(this.layout, split.id, dividerIndex, step), 'resize');
+  }
+}

package/ts_web/elements/00group-layout/dees-mosaic/index.ts

@@ -0,0 +1,3 @@
+export * from './dees-mosaic.js';
+export * from './types.js';
+export * from './tree.js';