project-graph-mcp 2.2.6 → 2.3.0

package/vendor/symbiote-node/layout/LayoutNode/LayoutNode.js

@@ -0,0 +1,467 @@
+/**
+ * @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 { template } from './LayoutNode.tpl.js';
+import { styles } from './LayoutNode.css.js';
+import './../ActionZone/ActionZone.js';
+
+export class LayoutNode extends Symbiote {
+  static isoMode = true;
+
+  init$ = {
+    // Node data
+    nodeData: null,
+
+    // Computed values (updated in sub())
+    nodeType: 'panel',
+    isPanel: true,
+    isSplit: false,
+    direction: 'horizontal',
+    ratio: 0.5,
+    panelType: 'default',
+    nodeId: '',
+
+    // Panel display
+    panelTitle: 'Panel',
+    panelIcon: 'dashboard',
+
+    // Panel states
+    isCollapsed: false,
+    canCollapse: true, // Whether collapse is possible (has sibling panel)
+    collapseDirection: 'vertical', // 'vertical' or 'horizontal' - based on parent split
+    collapseIcon: 'expand_less',
+    savedRatio: 0.5, // Saved ratio before collapse for proper restore
+    isFullscreen: false,
+    fullscreenIcon: 'fullscreen',
+
+    // Split sizing
+    firstStyle: '',
+    secondStyle: '',
+
+    // Inherited from Layout
+    '^panelTypes': {},
+    '^fullscreenPanelId': null,
+
+    // Handlers
+    onResizerDown: (e) => this._startResize(e),
+    onTypeClick: (e) => this._showTypeMenu(e),
+    onCollapseClick: () => this._toggleCollapse(),
+    onExpandClick: () => this._toggleCollapse(), // Alias for collapsed state
+    onFullscreenClick: () => this._toggleFullscreen(),
+  };
+
+  renderCallback() {
+    // Subscribe to nodeData changes and update computed values
+    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 || '';
+
+      // Read collapsed state from data (declarative)
+      if (data.type === 'panel') {
+        this.$.isCollapsed = data.collapsed || false;
+        if (this.$.isCollapsed) {
+          this.setAttribute('collapsed', '');
+          this.setAttribute('collapse-dir', this.$.collapseDirection);
+        } else {
+          this.removeAttribute('collapsed');
+          this.removeAttribute('collapse-dir');
+        }
+        // Update icon based on direction
+        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);
+    });
+
+    // Subscribe to panelTypes changes to update icons when registered after render
+    this.sub('^panelTypes', () => {
+      this._updatePanelInfo();
+    });
+
+    // Subscribe to panelType changes to inject component when type changes via menu
+    this.sub('panelType', () => {
+      this._updatePanelInfo();
+    });
+
+    // Initial render if data already set
+    if (this.$.nodeData) {
+      this.sub('nodeData', (d) => { }); // Trigger subscription
+    }
+  }
+
+  _updateStyles() {
+    const ratio = this.$.ratio;
+    const dir = this.$.direction;
+    const data = this.$.nodeData;
+
+    // Check if children are collapsed (declarative from nodeData)
+    const firstCollapsed = data?.first?.collapsed || false;
+    const secondCollapsed = data?.second?.collapsed || false;
+
+    // Collapsed size constants
+    const COLLAPSED_SIZE = dir === 'horizontal' ? '32px' : '28px';
+
+    if (firstCollapsed) {
+      // First child collapsed - fixed size, second expands
+      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) {
+      // Second child collapsed - first expands, fixed size
+      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 {
+      // Normal ratio-based sizing
+      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() {
+    const panelTypes = this.$['^panelTypes'] || {};
+    const config = panelTypes[this.$.panelType] || {};
+    this.$.panelTitle = config.title || this.$.panelType;
+    this.$.panelIcon = config.icon || 'dashboard';
+
+    // Inject component if specified and not already created
+    this._injectPanelComponent(config);
+
+    // Check if panel can collapse (must be child of a split)
+    const container = this.parentElement;
+    if (!container) return;
+    const isSplitChild = container && (container.classList.contains('split-first') || container.classList.contains('split-second'));
+
+    // Additional safety check: Ensure sibling exists and is not collapsed
+    let siblingExists = false;
+    let siblingCollapsed = false;
+    let isFirst = false;
+
+    if (isSplitChild) {
+      isFirst = container.classList.contains('split-first');
+      // Use :scope > to find direct child only, not nested ones
+      const siblingContainer = isFirst
+        ? container.parentElement.querySelector(':scope > .split-second')
+        : container.parentElement.querySelector(':scope > .split-first');
+      siblingExists = !!siblingContainer;
+
+      // Check if sibling panel is collapsed (direct child panel only)
+      if (siblingContainer) {
+        const siblingNode = siblingContainer.querySelector(':scope > layout-node');
+        // Only check collapsed state if sibling is a panel
+        if (siblingNode?.getAttribute('node-type') === 'panel') {
+          siblingCollapsed = siblingNode.$.isCollapsed || false;
+        }
+      }
+    }
+
+    // If we are a panel, update canCollapse based on position
+    if (this.$.nodeType === 'panel') {
+      // Can't collapse if no sibling OR if sibling is already collapsed (would leave empty space)
+      this.$.canCollapse = !!isSplitChild && siblingExists && !siblingCollapsed;
+
+      if (isSplitChild) {
+        // Update direction based on parent split
+        let parentNode = container.closest('layout-node');
+        if (!parentNode && container.getRootNode() instanceof ShadowRoot) {
+          parentNode = container.getRootNode().host;
+        }
+
+        if (parentNode) {
+          const parentDir = parentNode.getAttribute('direction');
+          this.$.collapseDirection = parentDir;
+
+          // Arrow shows direction panel will collapse TO:
+          // First panel collapses left/up, second panel collapses right/down
+          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) {
+    const contentEl = this.ref.panelContent;
+    if (!contentEl) return;
+
+    const componentTag = config.component;
+    if (!componentTag) return;
+
+    // Hide all existing panel components via inline style (overrides CSS)
+    for (const child of contentEl.children) {
+      child.style.display = 'none';
+    }
+
+    // Check if target component already exists — show it
+    const existing = contentEl.querySelector(componentTag);
+    if (existing) {
+      existing.style.display = '';
+      return;
+    }
+
+    // Create new component
+    const component = document.createElement(componentTag);
+    component.setAttribute('data-panel-id', this.$.nodeData?.id || '');
+    contentEl.appendChild(component);
+  }
+
+  _renderNode(data) {
+    // Update attributes for CSS selectors
+    const prevType = this.getAttribute('node-type');
+    this.setAttribute('node-type', data.type);
+
+    if (data.type === 'split') {
+      this.setAttribute('direction', data.direction);
+      this._renderSplit(data);
+    } else {
+      this.removeAttribute('direction');
+
+      // CRITICAL: Clean up child nodes if we changed from split to panel
+      // This prevents orphan layout-node elements staying in DOM
+      if (prevType === 'split') {
+        if (this.ref.first) this.ref.first.innerHTML = '';
+        if (this.ref.second) this.ref.second.innerHTML = '';
+      }
+
+      // For panels, setup action zones
+      this._setupActionZones(data.id);
+      // Ensure collapse status is updated
+      this._updatePanelInfo();
+    }
+  }
+
+  _renderSplit(data) {
+    // Create child nodes for first and second
+    // Pass the current split direction so panels know which way to collapse
+    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);
+      // Wait for child to initialize then update info
+      if (typeof setTimeout !== 'undefined') {
+        setTimeout(() => child._updatePanelInfo && child._updatePanelInfo());
+      }
+    }
+    // Use shallow copy to ensure subscription triggers even if only nested properties changed
+    child.$.nodeData = { ...nodeData };
+  }
+
+  _setupActionZones(panelId) {
+    // Action zones are in the template, just set their panel ID
+    const zones = this.querySelectorAll('action-zone');
+    zones.forEach((zone) => {
+      zone.$.panelId = panelId;
+    });
+  }
+
+  _startResize(e) {
+    e.preventDefault();
+    const startPos = this.$.direction === 'horizontal' ? e.clientX : e.clientY;
+    const startRatio = this.$.ratio;
+
+    this.setAttribute('resizing', '');
+
+    // Collapse thresholds
+    const COLLAPSE_THRESHOLD = 0.05;
+    const UNCOLLAPSE_THRESHOLD = 0.08;
+
+    const onMove = (moveEvent) => {
+      const rect = this.getBoundingClientRect();
+      const currentPos = this.$.direction === 'horizontal' ? moveEvent.clientX : moveEvent.clientY;
+      const containerSize = this.$.direction === 'horizontal' ? rect.width : rect.height;
+      const startOffset = this.$.direction === 'horizontal' ? rect.left : rect.top;
+
+      // Calculate new ratio based on mouse position relative to container
+      let rawRatio = (currentPos - startOffset) / containerSize;
+
+      // Get first and second child nodes
+      const firstChild = this.ref.first?.querySelector('layout-node');
+      const secondChild = this.ref.second?.querySelector('layout-node');
+
+      // Check for collapse/uncollapse of first panel
+      if (rawRatio < COLLAPSE_THRESHOLD && firstChild && !firstChild.$.isCollapsed) {
+        // Collapse first panel
+        firstChild._setCollapsed(true);
+        return; // Don't update styles further when collapsed
+      } else if (rawRatio > UNCOLLAPSE_THRESHOLD && firstChild?.$.isCollapsed) {
+        // Uncollapse first panel
+        firstChild._setCollapsed(false);
+      }
+
+      // Check for collapse/uncollapse of second panel
+      if (rawRatio > (1 - COLLAPSE_THRESHOLD) && secondChild && !secondChild.$.isCollapsed) {
+        // Collapse second panel
+        secondChild._setCollapsed(true);
+        return; // Don't update styles further when collapsed
+      } else if (rawRatio < (1 - UNCOLLAPSE_THRESHOLD) && secondChild?.$.isCollapsed) {
+        // Uncollapse second panel
+        secondChild._setCollapsed(false);
+      }
+
+      // Skip style updates if any panel is still collapsed
+      if (firstChild?.$.isCollapsed || secondChild?.$.isCollapsed) {
+        return;
+      }
+
+      // Clamp ratio
+      let newRatio = Math.max(0.1, Math.min(0.9, rawRatio));
+
+      // Update ratio and styles
+      this.$.ratio = newRatio;
+      this._updateStyles();
+
+      // Update nodeData for persistence
+      if (this.$.nodeData) {
+        this.$.nodeData.ratio = newRatio;
+      }
+
+      // Notify parent
+      this._notifyChange();
+    };
+
+    const onUp = () => {
+      this.removeAttribute('resizing');
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', onUp);
+    };
+
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+  }
+
+  _notifyChange() {
+    this.dispatchEvent(new CustomEvent('layout-change', {
+      bubbles: true,
+      detail: { nodeId: this.$.nodeId }
+    }));
+  }
+
+  _toggleCollapse() {
+    // Dispatch event to Layout - it will update the tree data
+    // which triggers a re-render with declarative collapsed handling
+    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.$.isCollapsed === collapsed) return;
+
+    // Dispatch event to Layout - it will update the tree data
+    this.dispatchEvent(new CustomEvent('panel-collapse-toggle', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        panelId: this.$.nodeId,
+        collapsed: collapsed
+      }
+    }));
+  }
+
+  _toggleFullscreen() {
+    // Don't allow fullscreen when collapsed
+    if (this.$.isCollapsed) return;
+
+    this.dispatchEvent(new CustomEvent('panel-fullscreen', {
+      bubbles: true,
+      composed: true,
+      detail: { panelId: this.$.nodeId }
+    }));
+  }
+
+  _showTypeMenu(e) {
+    // Don't show type menu when collapsed
+    if (this.$.isCollapsed) return;
+
+    const 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/vendor/symbiote-node/layout/LayoutNode/LayoutNode.tpl.js

@@ -0,0 +1,33 @@
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+<div class="panel-view" ${{ '@hidden': '!isPanel' }}>
+  <div class="panel-header">
+    <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="Collapse">
+      <span class="material-symbols-outlined" ${{ textContent: 'collapseIcon' }}></span>
+    </button>
+    <button class="header-btn fullscreen-btn" ${{ onclick: 'onFullscreenClick' }} title="Fullscreen">
+      <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"></action-zone>
+  <action-zone corner="tr"></action-zone>
+  <action-zone corner="bl"></action-zone>
+  <action-zone corner="br"></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/vendor/symbiote-node/layout/LayoutPreview/LayoutPreview.css.js

@@ -0,0 +1,46 @@
+import { css } from '@symbiotejs/symbiote';
+
+export const 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: color-mix(in srgb, var(--sn-danger-color, #ef4444) 30%, transparent);
+    border: 2px solid color-mix(in srgb, var(--sn-danger-color, #ef4444) 60%, transparent);
+    display: none;
+  }
+
+  &[type="join"] .preview-overlay {
+    display: block;
+  }
+
+  .preview-line {
+    position: absolute;
+    background: var(--layout-highlight, #888);
+    box-shadow: 0 0 8px var(--layout-highlight, #888);
+    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/vendor/symbiote-node/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$ = {
+    // Preview type: 'split-h' | 'split-v' | 'join' | null
+    previewType: null,
+
+    // Target panel rect for positioning
+    targetRect: null,
+
+    // Preview visibility
+    visible: false,
+
+    // Computed styles
+    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') {
+      // Horizontal split - vertical line
+      const x = panelRect.left + panelRect.width * ratio;
+      this.$.lineStyle = `
+        left: ${x}px;
+        top: ${panelRect.top}px;
+        width: 4px;
+        height: ${panelRect.height}px;
+      `;
+      this.$.overlayStyle = '';
+    } else {
+      // Vertical split - horizontal line
+      const 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/vendor/symbiote-node/layout/LayoutPreview/LayoutPreview.tpl.js

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