symbiote-ui 0.3.0-alpha.4

package/layout/LayoutNode/LayoutNode.js

@@ -0,0 +1,509 @@
+/**
+ * @fileoverview LayoutNode - Universal recursive layout node
+ * Renders panel or split based on node type.
+ * Split nodes recursively create child LayoutNodes.
+ * Panels include action zones for split/join gestures.
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { ensureMaterialSymbols } from '../../icons/MaterialSymbols.js';
+import { template } from './LayoutNode.tpl.js';
+import { styles } from './LayoutNode.css.js';
+import './../ActionZone/ActionZone.js';
+import { translate } from '../../locale/index.js';
+
+const LAYOUT_NODE_ICONS = [
+  'arrow_drop_down',
+  'chevron_left',
+  'chevron_right',
+  'dashboard',
+  'expand_less',
+  'expand_more',
+  'fullscreen',
+  'fullscreen_exit',
+];
+
+export class LayoutNode extends Symbiote {
+  static isoMode = true;
+
+  init$ = {
+
+    nodeData: null,
+
+
+    nodeType: 'panel',
+    isPanel: true,
+    isSplit: false,
+    direction: 'horizontal',
+    ratio: 0.5,
+    panelType: 'default',
+    nodeId: '',
+
+
+    panelTitle: 'Panel',
+    panelIcon: 'dashboard',
+    panelChrome: true,
+
+
+    isCollapsed: false,
+    canCollapse: true,
+    collapseDirection: 'vertical',
+    collapseIcon: 'expand_less',
+    savedRatio: 0.5,
+    isFullscreen: false,
+    fullscreenIcon: 'fullscreen',
+    collapseTitle: translate('layout.collapse'),
+    fullscreenTitle: translate('layout.fullscreen'),
+
+
+    firstStyle: '',
+    secondStyle: '',
+
+
+    '^panelTypes': {},
+    '^fullscreenPanelId': null,
+    '^panelChrome': true,
+
+
+    onResizerDown: (e) => this._startResize(e),
+    onTypeClick: (e) => this._showTypeMenu(e),
+    onCollapseClick: () => this._toggleCollapse(),
+    onExpandClick: () => this._toggleCollapse(),
+    onFullscreenClick: () => this._toggleFullscreen(),
+  };
+
+  renderCallback() {
+    ensureMaterialSymbols(LAYOUT_NODE_ICONS);
+
+    this.sub('nodeData', (data) => {
+      if (!data) return;
+
+      this.$.nodeType = data.type || 'panel';
+      this.$.isPanel = this.$.nodeType === 'panel';
+      this.$.isSplit = this.$.nodeType === 'split';
+      this.$.direction = data.direction || 'horizontal';
+      this.$.ratio = data.ratio || 0.5;
+      this.$.panelType = data.panelType || 'default';
+      this.$.nodeId = data.id || '';
+
+
+      if (data.type === 'panel') {
+        this.$.isCollapsed = data.collapsed || false;
+        this.toggleAttribute('collapsed', this.$.isCollapsed);
+        this.#syncHostAttribute('collapse-dir', this.$.isCollapsed ? this.$.collapseDirection : '');
+
+        if (this.$.isCollapsed) {
+          if (this.$.collapseDirection === 'horizontal') {
+            this.$.collapseIcon = 'chevron_right';
+          } else {
+            this.$.collapseIcon = 'expand_more';
+          }
+        } else {
+          if (this.$.collapseDirection === 'horizontal') {
+            this.$.collapseIcon = 'chevron_left';
+          } else {
+            this.$.collapseIcon = 'expand_less';
+          }
+        }
+      }
+
+      this._updateStyles();
+      this._updatePanelInfo();
+      this._renderNode(data);
+    });
+
+
+    this.sub('^panelTypes', () => {
+      this._updatePanelInfo();
+    });
+
+
+    this.sub('panelType', () => {
+      this._updatePanelInfo();
+    });
+
+
+    if (this.$.nodeData) {
+      this.sub('nodeData', () => {});
+    }
+  }
+
+  _updateStyles() {
+    let ratio = this.$.ratio;
+    let dir = this.$.direction;
+    let data = this.$.nodeData;
+
+
+    let firstCollapsed = data?.first?.collapsed || false;
+    let secondCollapsed = data?.second?.collapsed || false;
+
+
+    const COLLAPSED_SIZE = dir === 'horizontal' ? '32px' : '28px';
+
+    if (firstCollapsed) {
+
+      if (dir === 'horizontal') {
+        this.$.firstStyle = `width: ${COLLAPSED_SIZE}; height: 100%; flex: 0 0 ${COLLAPSED_SIZE};`;
+        this.$.secondStyle = 'flex: 1; height: 100%;';
+      } else {
+        this.$.firstStyle = `height: ${COLLAPSED_SIZE}; width: 100%; flex: 0 0 ${COLLAPSED_SIZE};`;
+        this.$.secondStyle = 'flex: 1; width: 100%;';
+      }
+    } else if (secondCollapsed) {
+
+      if (dir === 'horizontal') {
+        this.$.firstStyle = 'flex: 1; height: 100%;';
+        this.$.secondStyle = `width: ${COLLAPSED_SIZE}; height: 100%; flex: 0 0 ${COLLAPSED_SIZE};`;
+      } else {
+        this.$.firstStyle = 'flex: 1; width: 100%;';
+        this.$.secondStyle = `height: ${COLLAPSED_SIZE}; width: 100%; flex: 0 0 ${COLLAPSED_SIZE};`;
+      }
+    } else {
+
+      if (dir === 'horizontal') {
+        this.$.firstStyle = `width: ${ratio * 100}%; height: 100%;`;
+        this.$.secondStyle = `width: ${(1 - ratio) * 100}%; height: 100%;`;
+      } else {
+        this.$.firstStyle = `height: ${ratio * 100}%; width: 100%;`;
+        this.$.secondStyle = `height: ${(1 - ratio) * 100}%; width: 100%;`;
+      }
+    }
+  }
+
+  _updatePanelInfo() {
+    let panelTypes = this.$['^panelTypes'] || {};
+    let config = panelTypes[this.$.panelType] || {};
+    this.$.panelTitle = config.title || this.$.panelType;
+    this.$.panelIcon = config.icon || 'dashboard';
+    ensureMaterialSymbols([this.$.panelIcon]);
+
+
+    this._injectPanelComponent(config);
+
+
+    let container = this.parentElement;
+    if (!container) return;
+    let isSplitChild =
+      container &&
+      (container.classList.contains('split-first') || container.classList.contains('split-second'));
+
+
+    let siblingExists = false;
+    let siblingCollapsed = false;
+    let isFirst = false;
+
+    if (isSplitChild) {
+      isFirst = container.classList.contains('split-first');
+
+      let siblingContainer = isFirst
+        ? container.parentElement.querySelector(':scope > .split-second')
+        : container.parentElement.querySelector(':scope > .split-first');
+      siblingExists = !!siblingContainer;
+
+
+      if (siblingContainer) {
+        let siblingNode = siblingContainer.querySelector(':scope > layout-node');
+
+        if (siblingNode?.getAttribute('node-type') === 'panel') {
+          siblingCollapsed = siblingNode.$.isCollapsed || false;
+        }
+      }
+    }
+
+
+    if (this.$.nodeType === 'panel') {
+
+      this.$.canCollapse = !!isSplitChild && siblingExists && !siblingCollapsed;
+
+      if (isSplitChild) {
+
+        let parentNode = container.closest('layout-node');
+        if (!parentNode && container.getRootNode() instanceof ShadowRoot) {
+          parentNode = container.getRootNode().host;
+        }
+
+        if (parentNode) {
+          let parentDir = parentNode.getAttribute('direction');
+          this.$.collapseDirection = parentDir;
+          if (this.$.isCollapsed) {
+            this.#syncHostAttribute('collapse-dir', parentDir);
+          }
+
+
+          if (!this.$.isCollapsed) {
+            if (parentDir === 'horizontal') {
+              this.$.collapseIcon = isFirst ? 'chevron_left' : 'chevron_right';
+            } else {
+              this.$.collapseIcon = isFirst ? 'expand_less' : 'expand_more';
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Inject custom component into panel content.
+   * Hides existing components instead of destroying them to preserve state.
+   * Uses style.display instead of hidden attribute because components may have
+   * CSS rules (e.g. display:block) that override the hidden attribute.
+   * @param {Object} config - Panel type configuration
+   */
+  _injectPanelComponent(config) {
+    let contentEl = this.ref.panelContent;
+    if (!contentEl) return;
+
+    let componentTag = config.component;
+    if (!componentTag) return;
+
+
+    for (const child of contentEl.children) {
+      child.style.display = 'none';
+    }
+
+
+    let existing = contentEl.querySelector(componentTag);
+    if (existing) {
+      existing.style.display = '';
+      return;
+    }
+
+
+    let component = document.createElement(componentTag);
+    component.dataset.panelId = this.$.nodeData?.id || '';
+    contentEl.appendChild(component);
+  }
+
+  _renderNode(data) {
+    this.$.panelChrome = this.$.panelChrome !== false && this.$['^panelChrome'] !== false;
+    this.setAttribute('panel-chrome', this.$.panelChrome ? 'default' : 'none');
+
+    let prevType = this.getAttribute('node-type');
+    this.#syncHostAttribute('node-type', data.type);
+
+    if (data.type === 'split') {
+      this.#syncHostAttribute('direction', data.direction);
+      this._renderSplit(data);
+    } else {
+      this.removeAttribute('direction');
+
+
+      if (prevType === 'split') {
+        if (this.ref.first) this.ref.first.replaceChildren();
+        if (this.ref.second) this.ref.second.replaceChildren();
+      }
+
+
+      this._setupActionZones(data.id);
+
+      this._updatePanelInfo();
+    }
+  }
+
+  _renderSplit(data) {
+
+
+    if (data.first && this.ref.first) {
+      this._ensureChildNode(this.ref.first, data.first);
+    }
+    if (data.second && this.ref.second) {
+      this._ensureChildNode(this.ref.second, data.second);
+    }
+  }
+
+  /**
+   * @param {HTMLElement} container
+   * @param {Object} nodeData
+   */
+  _ensureChildNode(container, nodeData) {
+    let child = container.querySelector('layout-node');
+    if (!child) {
+      child = document.createElement('layout-node');
+      container.appendChild(child);
+
+      if (typeof setTimeout !== 'undefined') {
+        setTimeout(() => child._updatePanelInfo && child._updatePanelInfo());
+      }
+    }
+
+    child.$.panelChrome = this.$.panelChrome !== false;
+    child.setAttribute('panel-chrome', this.$.panelChrome ? 'default' : 'none');
+    child.$.nodeData = { ...nodeData };
+  }
+
+  _setupActionZones(panelId) {
+
+    let zones = this.querySelectorAll('action-zone');
+    zones.forEach((zone) => {
+      zone.$.panelId = panelId;
+    });
+  }
+
+  _startResize(e) {
+    if (this.$.panelChrome === false || this.$['^panelChrome'] === false) return;
+    e.preventDefault();
+    this.toggleAttribute('resizing', true);
+
+
+    const COLLAPSE_THRESHOLD = 0.05;
+    const UNCOLLAPSE_THRESHOLD = 0.08;
+
+    let onMove = (moveEvent) => {
+      let rect = this.getBoundingClientRect();
+      let currentPos = this.$.direction === 'horizontal' ? moveEvent.clientX : moveEvent.clientY;
+      let containerSize = this.$.direction === 'horizontal' ? rect.width : rect.height;
+      let startOffset = this.$.direction === 'horizontal' ? rect.left : rect.top;
+
+
+      let rawRatio = (currentPos - startOffset) / containerSize;
+
+
+      let firstChild = this.ref.first?.querySelector('layout-node');
+      let secondChild = this.ref.second?.querySelector('layout-node');
+
+
+      if (rawRatio < COLLAPSE_THRESHOLD && firstChild && !firstChild.$.isCollapsed) {
+
+        firstChild._setCollapsed(true);
+        return;
+      } else if (rawRatio > UNCOLLAPSE_THRESHOLD && firstChild?.$.isCollapsed) {
+
+        firstChild._setCollapsed(false);
+      }
+
+
+      if (rawRatio > 1 - COLLAPSE_THRESHOLD && secondChild && !secondChild.$.isCollapsed) {
+
+        secondChild._setCollapsed(true);
+        return;
+      } else if (rawRatio < 1 - UNCOLLAPSE_THRESHOLD && secondChild?.$.isCollapsed) {
+
+        secondChild._setCollapsed(false);
+      }
+
+
+      if (firstChild?.$.isCollapsed || secondChild?.$.isCollapsed) {
+        return;
+      }
+
+
+      let newRatio = Math.max(0.1, Math.min(0.9, rawRatio));
+
+
+      this.$.ratio = newRatio;
+      this._updateStyles();
+
+
+      if (this.$.nodeData) {
+        this.$.nodeData.ratio = newRatio;
+      }
+
+
+      this._notifyChange();
+    };
+
+    let onUp = () => {
+      this.removeAttribute('resizing');
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', onUp);
+    };
+
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+  }
+
+  #syncHostAttribute(name, value) {
+    if (value === undefined || value === null || value === '') {
+      this.removeAttribute(name);
+      return;
+    }
+    this.toggleAttribute(name, true);
+    let attr = this.getAttributeNode(name);
+    if (attr) attr.value = String(value);
+  }
+
+  _notifyChange() {
+    this.dispatchEvent(
+      new CustomEvent('layout-change', {
+        bubbles: true,
+        detail: { nodeId: this.$.nodeId },
+      })
+    );
+  }
+
+  _toggleCollapse() {
+    if (this.$.panelChrome === false || this.$['^panelChrome'] === false) return;
+
+
+    this.dispatchEvent(
+      new CustomEvent('panel-collapse-toggle', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          panelId: this.$.nodeId,
+          collapsed: !this.$.isCollapsed,
+        },
+      })
+    );
+  }
+
+  /**
+   * Programmatically set collapsed state (used by resize gesture)
+   * @param {boolean} collapsed
+   */
+  _setCollapsed(collapsed) {
+    if (this.$.panelChrome === false || this.$['^panelChrome'] === false) return;
+    if (this.$.isCollapsed === collapsed) return;
+
+
+    this.dispatchEvent(
+      new CustomEvent('panel-collapse-toggle', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          panelId: this.$.nodeId,
+          collapsed: collapsed,
+        },
+      })
+    );
+  }
+
+  _toggleFullscreen() {
+    if (this.$.panelChrome === false || this.$['^panelChrome'] === false) return;
+
+    if (this.$.isCollapsed) return;
+
+    this.dispatchEvent(
+      new CustomEvent('panel-fullscreen', {
+        bubbles: true,
+        composed: true,
+        detail: { panelId: this.$.nodeId },
+      })
+    );
+  }
+
+  _showTypeMenu(e) {
+    if (this.$.panelChrome === false || this.$['^panelChrome'] === false) return;
+
+    if (this.$.isCollapsed) return;
+
+    let rect = e.target.getBoundingClientRect();
+    this.dispatchEvent(
+      new CustomEvent('panel-type-menu', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          panelId: this.$.nodeId,
+          currentType: this.$.panelType,
+          x: rect.left,
+          y: rect.bottom + 4,
+        },
+      })
+    );
+  }
+}
+
+LayoutNode.template = template;
+LayoutNode.rootStyles = styles;
+
+LayoutNode.reg('layout-node');

package/layout/LayoutNode/LayoutNode.tpl.js

@@ -0,0 +1,39 @@
+import { html } from '@symbiotejs/symbiote';
+
+export let template = html`
+  <div class="panel-view" ${{ '@hidden': '!isPanel' }}>
+    <div class="panel-header" ${{ '@hidden': '!panelChrome' }}>
+      <button class="header-btn type-btn" ${{ onclick: 'onTypeClick' }}>
+        <span class="material-symbols-outlined panel-icon" ${{ textContent: 'panelIcon' }}></span>
+        <span class="panel-title" ${{ textContent: 'panelTitle' }}></span>
+        <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
+      </button>
+      <div class="header-spacer"></div>
+      <button
+        class="header-btn collapse-btn"
+        ${{ onclick: 'onCollapseClick', '@hidden': '!canCollapse', title: 'collapseTitle' }}
+      >
+        <span class="material-symbols-outlined" ${{ textContent: 'collapseIcon' }}></span>
+      </button>
+      <button
+        class="header-btn fullscreen-btn"
+        ${{ onclick: 'onFullscreenClick', title: 'fullscreenTitle' }}
+      >
+        <span class="material-symbols-outlined" ${{ textContent: 'fullscreenIcon' }}></span>
+      </button>
+    </div>
+    <div class="panel-content" ref="panelContent" ${{ '@hidden': 'isCollapsed' }}></div>
+
+    <!-- Action zones for split/join -->
+    <action-zone corner="tl" ${{ '@hidden': '!panelChrome' }}></action-zone>
+    <action-zone corner="tr" ${{ '@hidden': '!panelChrome' }}></action-zone>
+    <action-zone corner="bl" ${{ '@hidden': '!panelChrome' }}></action-zone>
+    <action-zone corner="br" ${{ '@hidden': '!panelChrome' }}></action-zone>
+  </div>
+
+  <div class="split-view" ${{ '@hidden': '!isSplit', '@direction': 'direction' }}>
+    <div class="split-first" ref="first" ${{ '@style': 'firstStyle' }}></div>
+    <div class="split-resizer" ${{ onpointerdown: 'onResizerDown' }}></div>
+    <div class="split-second" ref="second" ${{ '@style': 'secondStyle' }}></div>
+  </div>
+`;

package/layout/LayoutPreview/LayoutPreview.css.js

@@ -0,0 +1,46 @@
+import { css } from '@symbiotejs/symbiote';
+
+export let styles = css`
+  layout-preview {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 9999;
+
+    &[hidden] {
+      display: none;
+    }
+
+    .preview-overlay {
+      position: absolute;
+      background: var(--sn-layout-preview-join-bg);
+      border: 2px solid var(--sn-layout-preview-join-border);
+      display: none;
+    }
+
+    &[type='join'] .preview-overlay {
+      display: block;
+    }
+
+    .preview-line {
+      position: absolute;
+      background: var(--sn-layout-preview-line);
+      box-shadow: var(--sn-layout-preview-line-shadow);
+      display: none;
+    }
+
+    &[type='split-h'] .preview-line,
+    &[type='split-v'] .preview-line {
+      display: block;
+    }
+
+    /* Hidden attribute overrides */
+    .preview-overlay[hidden],
+    .preview-line[hidden] {
+      display: none !important;
+    }
+  }
+`;

package/layout/LayoutPreview/LayoutPreview.js

@@ -0,0 +1,102 @@
+/**
+ * @fileoverview LayoutPreview - Visual preview for split/join operations
+ * Shows where the new panel will be created or which panel will be removed.
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './LayoutPreview.tpl.js';
+import { styles } from './LayoutPreview.css.js';
+
+export class LayoutPreview extends Symbiote {
+  static isoMode = true;
+
+  init$ = {
+
+    previewType: null,
+
+
+    targetRect: null,
+
+
+    visible: false,
+
+
+    overlayStyle: '',
+    lineStyle: '',
+  };
+
+  renderCallback() {
+    this.sub('previewType', (type) => {
+      if (type) {
+        this.setAttribute('type', type);
+      } else {
+        this.removeAttribute('type');
+      }
+    });
+  }
+
+  /**
+   * Show split preview
+   * @param {'split-h' | 'split-v'} direction
+   * @param {DOMRect} panelRect
+   * @param {number} [ratio=0.5]
+   */
+  showSplit(direction, panelRect, ratio = 0.5) {
+    this.$.previewType = direction;
+    this.$.visible = true;
+
+    if (direction === 'split-h') {
+
+      let x = panelRect.left + panelRect.width * ratio;
+      this.$.lineStyle = `
+        left: ${x}px;
+        top: ${panelRect.top}px;
+        width: 4px;
+        height: ${panelRect.height}px;
+      `;
+      this.$.overlayStyle = '';
+    } else {
+
+      let y = panelRect.top + panelRect.height * ratio;
+      this.$.lineStyle = `
+        left: ${panelRect.left}px;
+        top: ${y}px;
+        width: ${panelRect.width}px;
+        height: 4px;
+      `;
+      this.$.overlayStyle = '';
+    }
+  }
+
+  /**
+   * Show join preview (overlay on target panel)
+   * @param {DOMRect} targetRect - Panel that will be removed
+   */
+  showJoin(targetRect) {
+    this.$.previewType = 'join';
+    this.$.visible = true;
+
+    this.$.overlayStyle = `
+      left: ${targetRect.left}px;
+      top: ${targetRect.top}px;
+      width: ${targetRect.width}px;
+      height: ${targetRect.height}px;
+    `;
+    this.$.lineStyle = '';
+  }
+
+  /**
+   * Hide preview
+   */
+  hide() {
+    this.$.visible = false;
+    this.$.previewType = null;
+    this.$.overlayStyle = '';
+    this.$.lineStyle = '';
+  }
+}
+
+LayoutPreview.template = template;
+LayoutPreview.rootStyles = styles;
+
+LayoutPreview.reg('layout-preview');

package/layout/LayoutPreview/LayoutPreview.tpl.js

@@ -0,0 +1,6 @@
+import { html } from '@symbiotejs/symbiote';
+
+export let template = html`
+  <div class="preview-overlay" ${{ '@style': 'overlayStyle', '@hidden': '!visible' }}></div>
+  <div class="preview-line" ${{ '@style': 'lineStyle', '@hidden': '!visible' }}></div>
+`;