project-graph-mcp 2.2.6 → 2.3.1

package/vendor/symbiote-node/layout/LayoutSidebar/SidebarSection.js

@@ -0,0 +1,183 @@
+/**
+ * SidebarSection — itemize sub-component for sidebar section items
+ *
+ * Renders a master panel entry with icon, label.
+ * Edit mode: shows visibility toggle + drag handle.
+ * Shows sub-panel list with close buttons for non-master panels.
+ *
+ * @module symbiote-node/layout/LayoutSidebar/SidebarSection
+ */
+import Symbiote, { html } from '@symbiotejs/symbiote';
+import { navigate } from '../LayoutRouter/LayoutRouter.js';
+
+export class SidebarSection extends Symbiote {
+  isoMode = true;
+
+  init$ = {
+    sectionId: '',
+    icon: 'dashboard',
+    label: '',
+    isActive: false,
+    isVisible: true,
+    isDisabled: false,
+    eyeIcon: 'visibility',
+    hasSubPanels: false,
+    isExpanded: false,
+    subPanels: [],
+
+    onSectionClick: () => {
+      if (!this.$.isVisible || this.$.isDisabled) return;
+      navigate(this.$.sectionId);
+    },
+
+    onExpandToggle: (e) => {
+      e.stopPropagation();
+      if (!this.$.hasSubPanels) return;
+      this.$.isExpanded = !this.$.isExpanded;
+    },
+
+    onToggleVisibility: (e) => {
+      e.stopPropagation();
+      const sidebar = this.closest('layout-sidebar');
+      if (sidebar) sidebar.toggleVisibility(this.$.sectionId);
+    },
+  };
+
+  renderCallback() {
+    this.sub('isActive', (val) => {
+      this.toggleAttribute('data-active', val);
+    });
+
+    this.sub('isExpanded', (val) => {
+      this.toggleAttribute('data-expanded', val);
+    });
+
+    this.sub('isVisible', (val) => {
+      this.toggleAttribute('data-hidden', !val);
+      this.$.eyeIcon = val ? 'visibility' : 'visibility_off';
+    });
+
+    this.sub('isDisabled', (val) => {
+      this.toggleAttribute('data-disabled', val);
+    });
+
+    this.sub('subPanels', (panels) => {
+      const has = panels && panels.length > 0;
+      this.$.hasSubPanels = has;
+      this.toggleAttribute('data-has-sub', has);
+      // Collapse if no sub-panels
+      if (!has) this.$.isExpanded = false;
+    });
+
+    // Drag support
+    this.setAttribute('draggable', 'true');
+
+    this.addEventListener('dragstart', (e) => {
+      const sidebar = this.closest('layout-sidebar');
+      if (!sidebar?.hasAttribute('edit-mode')) {
+        e.preventDefault();
+        return;
+      }
+      const sections = Array.from(this.parentElement.children);
+      const idx = sections.indexOf(this);
+      e.dataTransfer.setData('text/plain', String(idx));
+      e.dataTransfer.effectAllowed = 'move';
+      this.setAttribute('data-dragging', '');
+    });
+
+    this.addEventListener('dragend', () => {
+      this.removeAttribute('data-dragging');
+    });
+
+    this.addEventListener('dragover', (e) => {
+      const sidebar = this.closest('layout-sidebar');
+      if (!sidebar?.hasAttribute('edit-mode')) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      this.setAttribute('data-dragover', '');
+    });
+
+    this.addEventListener('dragleave', () => {
+      this.removeAttribute('data-dragover');
+    });
+
+    this.addEventListener('drop', (e) => {
+      e.preventDefault();
+      this.removeAttribute('data-dragover');
+      const sidebar = this.closest('layout-sidebar');
+      if (!sidebar?.hasAttribute('edit-mode')) return;
+
+      const fromIdx = parseInt(e.dataTransfer.getData('text/plain'), 10);
+      const sections = Array.from(this.parentElement.children);
+      const toIdx = sections.indexOf(this);
+      if (fromIdx !== toIdx) {
+        sidebar.moveSection(fromIdx, toIdx);
+      }
+    });
+  }
+}
+
+SidebarSection.template = html`
+<div class="sec-drag-handle">
+  <span class="material-symbols-outlined">drag_indicator</span>
+</div>
+<div class="sec-item" ${{ onclick: 'onSectionClick' }}>
+  <span class="material-symbols-outlined sec-icon" ${{ textContent: 'icon' }}></span>
+  <span class="sec-label" ${{ textContent: 'label' }}></span>
+  <span class="material-symbols-outlined sec-expand" ${{ onclick: 'onExpandToggle' }}>chevron_right</span>
+</div>
+<button class="sec-eye" ${{ onclick: 'onToggleVisibility' }}>
+  <span class="material-symbols-outlined" ${{ textContent: 'eyeIcon' }}></span>
+</button>
+<div class="sec-sub-panels" itemize="subPanels" item-tag="sidebar-sub-item"></div>
+`;
+
+SidebarSection.reg('sidebar-section');
+
+/**
+ * SidebarSubItem — sub-panel entry inside a section
+ * Shows close button for non-master panels (isMaster=false)
+ */
+export class SidebarSubItem extends Symbiote {
+  isoMode = true;
+
+  init$ = {
+    title: '',
+    icon: 'web_asset',
+    panelId: '',
+    isMaster: false,
+
+    onClose: (e) => {
+      e.stopPropagation();
+      const panelId = this.$.panelId;
+      if (!panelId) return;
+
+      // Find the panel-layout and call joinPanels
+      const sidebar = this.closest('layout-sidebar');
+      if (sidebar) {
+        sidebar.dispatchEvent(new CustomEvent('panel-close', {
+          bubbles: true,
+          detail: { panelId },
+        }));
+      }
+    },
+  };
+
+  renderCallback() {
+    this.sub('isMaster', (val) => {
+      this.toggleAttribute('data-master', val);
+    });
+  }
+}
+
+SidebarSubItem.template = html`
+<div class="sub-panel-item">
+  <span class="material-symbols-outlined" ${{ textContent: 'icon' }}></span>
+  <span ${{ textContent: 'title' }}></span>
+  <button class="sub-panel-close" ${{ onclick: 'onClose' }}>
+    <span class="material-symbols-outlined">close</span>
+  </button>
+</div>
+`;
+
+SidebarSubItem.reg('sidebar-sub-item');

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

@@ -0,0 +1,246 @@
+/**
+ * @fileoverview BSP (Binary Space Partitioning) Layout Tree
+ * Implements Blender-style area splitting/joining mechanics.
+ */
+
+/**
+ * @typedef {'horizontal' | 'vertical'} SplitDirection
+ */
+
+/**
+ * @typedef {Object} PanelNode
+ * @property {string} id - Unique node ID
+ * @property {'panel'} type - Node type
+ * @property {string} panelType - Panel content type (e.g., 'viewport', 'timeline')
+ * @property {boolean} [collapsed] - Whether panel is collapsed
+ * @property {Object} [panelState] - Panel-specific state
+ */
+
+/**
+ * @typedef {Object} SplitNode
+ * @property {string} id - Unique node ID
+ * @property {'split'} type - Node type
+ * @property {SplitDirection} direction - Split direction
+ * @property {number} ratio - Split ratio (0-1), size of first child
+ * @property {LayoutNode} first - First child node
+ * @property {LayoutNode} second - Second child node
+ */
+
+/**
+ * @typedef {PanelNode | SplitNode} LayoutNode
+ */
+
+let idCounter = 0;
+
+/**
+ * Generate unique node ID
+ * @returns {string}
+ */
+export function generateId() {
+  return `node_${++idCounter}_${Date.now().toString(36)}`;
+}
+
+/**
+ * Create a panel node
+ * @param {string} panelType - Panel content type
+ * @param {Object} [panelState] - Initial panel state
+ * @returns {PanelNode}
+ */
+export function createPanel(panelType, panelState = {}) {
+  return {
+    id: generateId(),
+    type: 'panel',
+    panelType,
+    panelState,
+    collapsed: false
+  };
+}
+
+/**
+ * Create a split node
+ * @param {SplitDirection} direction - Split direction
+ * @param {LayoutNode} first - First child
+ * @param {LayoutNode} second - Second child
+ * @param {number} [ratio=0.5] - Split ratio
+ * @returns {SplitNode}
+ */
+export function createSplit(direction, first, second, ratio = 0.5) {
+  return {
+    id: generateId(),
+    type: 'split',
+    direction,
+    ratio,
+    first,
+    second
+  };
+}
+
+/**
+ * Find a node by ID in the tree
+ * @param {LayoutNode} root - Root node
+ * @param {string} id - Node ID to find
+ * @returns {LayoutNode | null}
+ */
+export function findNode(root, id) {
+  if (root.id === id) return root;
+  if (root.type === 'split') {
+    return findNode(root.first, id) || findNode(root.second, id);
+  }
+  return null;
+}
+
+/**
+ * Find parent of a node
+ * @param {LayoutNode} root - Root node
+ * @param {string} id - Child node ID
+ * @returns {{ parent: SplitNode, which: 'first' | 'second' } | null}
+ */
+export function findParent(root, id) {
+  if (root.type !== 'split') return null;
+
+  if (root.first.id === id) return { parent: root, which: 'first' };
+  if (root.second.id === id) return { parent: root, which: 'second' };
+
+  return findParent(root.first, id) || findParent(root.second, id);
+}
+
+/**
+ * Split a panel into two
+ * @param {LayoutNode} root - Root node
+ * @param {string} panelId - Panel ID to split
+ * @param {SplitDirection} direction - Split direction
+ * @param {number} [ratio=0.5] - Split ratio
+ * @param {string} [newPanelType] - Type for new panel (defaults to same as original)
+ * @returns {LayoutNode} - New root node
+ */
+export function splitPanel(root, panelId, direction, ratio = 0.5, newPanelType) {
+  const node = findNode(root, panelId);
+  if (!node || node.type !== 'panel') {
+    console.warn(`Cannot split: panel ${panelId} not found`);
+    return root;
+  }
+
+  const newPanel = createPanel(newPanelType || node.panelType);
+  const splitNode = createSplit(direction, node, newPanel, ratio);
+
+  // If splitting the root
+  if (root.id === panelId) {
+    return splitNode;
+  }
+
+  // Find parent and replace
+  const parentInfo = findParent(root, panelId);
+  if (parentInfo) {
+    parentInfo.parent[parentInfo.which] = splitNode;
+  }
+
+  return root;
+}
+
+/**
+ * Join two panels (remove one panel and its parent split)
+ * @param {LayoutNode} root - Root node
+ * @param {string} panelToRemove - Panel ID to remove
+ * @returns {LayoutNode} - New root node
+ */
+export function joinPanels(root, panelToRemove) {
+  const parentInfo = findParent(root, panelToRemove);
+  if (!parentInfo) {
+    // Trying to remove root - not allowed
+    console.warn('Cannot join: panel is root');
+    return root;
+  }
+
+  const { parent, which } = parentInfo;
+  const survivor = which === 'first' ? parent.second : parent.first;
+
+  // If parent is root, survivor becomes new root
+  const grandparentInfo = findParent(root, parent.id);
+  if (!grandparentInfo) {
+    return survivor;
+  }
+
+  // Replace parent with survivor in grandparent
+  grandparentInfo.parent[grandparentInfo.which] = survivor;
+  return root;
+}
+
+/**
+ * Update split ratio
+ * @param {LayoutNode} root - Root node
+ * @param {string} splitId - Split node ID
+ * @param {number} ratio - New ratio (0-1)
+ * @returns {LayoutNode} - Same root (mutated)
+ */
+export function resizeSplit(root, splitId, ratio) {
+  const node = findNode(root, splitId);
+  if (!node || node.type !== 'split') {
+    console.warn(`Cannot resize: split ${splitId} not found`);
+    return root;
+  }
+
+  node.ratio = Math.max(0.1, Math.min(0.9, ratio));
+  return root;
+}
+
+/**
+ * Serialize layout to JSON string
+ * @param {LayoutNode} root - Root node
+ * @returns {string}
+ */
+export function serialize(root) {
+  return JSON.stringify(root);
+}
+
+/**
+ * Deserialize layout from JSON string
+ * @param {string} json - JSON string
+ * @returns {LayoutNode}
+ */
+export function deserialize(json) {
+  return JSON.parse(json);
+}
+
+/**
+ * Clone a layout tree (deep copy)
+ * @param {LayoutNode} root - Root node
+ * @returns {LayoutNode}
+ */
+export function clone(root) {
+  return deserialize(serialize(root));
+}
+
+/**
+ * Get all panel nodes in tree
+ * @param {LayoutNode} root - Root node
+ * @returns {PanelNode[]}
+ */
+export function getAllPanels(root) {
+  if (root.type === 'panel') return [root];
+  return [...getAllPanels(root.first), ...getAllPanels(root.second)];
+}
+
+/**
+ * Update a node's properties by ID
+ * @param {LayoutNode} root - Root node
+ * @param {string} nodeId - Node ID to update
+ * @param {Object} updates - Properties to update
+ * @returns {boolean} - True if node was found and updated
+ */
+export function updateNode(root, nodeId, updates) {
+  const node = findNode(root, nodeId);
+  if (!node) return false;
+  Object.assign(node, updates);
+  return true;
+}
+
+/**
+ * Get neighbor panel IDs for a panel
+ * @param {LayoutNode} root - Root node
+ * @param {string} panelId - Panel ID
+ * @returns {{ left?: string, right?: string, top?: string, bottom?: string }}
+ */
+export function getNeighbors(root, panelId) {
+  // TODO: Implement neighbor detection for join preview
+  return {};
+}

package/vendor/symbiote-node/layout/PanelMenu/PanelMenu.css.js

@@ -0,0 +1,43 @@
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+panel-menu {
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
+
+  .menu-container {
+    pointer-events: auto;
+    background: var(--bg-popup, #2a2a2a);
+    border: 1px solid var(--border-popup, #444);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px var(--sn-shadow-color, rgba(0, 0, 0, 0.4));
+    min-width: 160px;
+    padding: 4px 0;
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+    color: var(--text-main, #e0e0e0);
+    font-size: 0.85rem;
+    transition: background 0.1s;
+
+    &:hover {
+      background: var(--bg-hover, #3a3a3a);
+    }
+
+    &[active] {
+      color: var(--accent, #4a9eff);
+    }
+
+    .material-symbols-outlined {
+      font-size: 18px;
+      opacity: 0.8;
+    }
+  }
+}
+`;

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

@@ -0,0 +1,89 @@
+/**
+ * @fileoverview PanelMenu - Dropdown menu for panel type selection
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './PanelMenu.tpl.js';
+import { styles } from './PanelMenu.css.js';
+
+export class PanelMenu extends Symbiote {
+  static isoMode = true;
+
+  init$ = {
+    visible: false,
+    panelId: '',
+    items: [],
+    currentType: '',
+
+    onItemClick: (e) => {
+      const type = e.target.closest('[data-type]')?.dataset.type;
+      if (type) {
+        this.dispatchEvent(new CustomEvent('panel-type-select', {
+          bubbles: true,
+          composed: true,
+          detail: { panelId: this.$.panelId, type }
+        }));
+        this.hide();
+      }
+    },
+  };
+
+  /**
+   * Show menu at position
+   * @param {number} x 
+   * @param {number} y 
+   * @param {string} panelId 
+   * @param {string} currentType 
+   * @param {Array<{type: string, title: string, icon: string}>} items 
+   */
+  show(x, y, panelId, currentType, items) {
+    this.$.panelId = panelId;
+    this.$.currentType = currentType;
+
+    // Transform items to include isActive flag for template binding
+    this.$.items = items.map(item => ({
+      ...item,
+      icon: item.icon || 'dashboard',
+      title: item.title || item.type,
+      isActive: item.type === currentType
+    }));
+
+    this.style.left = `${x}px`;
+    this.style.top = `${y}px`;
+    this.$.visible = true;
+
+    // Close on outside click
+    if (typeof setTimeout !== 'undefined') {
+      setTimeout(() => {
+        if (typeof document !== 'undefined') {
+          document.addEventListener('pointerdown', this._onOutsideClick);
+        }
+      }, 0);
+    }
+  }
+
+  hide() {
+    this.$.visible = false;
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('pointerdown', this._onOutsideClick);
+    }
+  }
+
+  _onOutsideClick = (e) => {
+    if (!this.contains(e.target)) {
+      this.hide();
+    }
+  };
+
+  disconnectedCallback() {
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('pointerdown', this._onOutsideClick);
+    }
+  }
+}
+
+PanelMenu.template = template;
+PanelMenu.rootStyles = styles;
+
+PanelMenu.reg('panel-menu');
+

package/vendor/symbiote-node/layout/PanelMenu/PanelMenu.tpl.js

@@ -0,0 +1,14 @@
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+<div class="menu-container" ${{ '@hidden': '!visible' }}>
+  <div class="menu-items" itemize="items">
+    <template>
+      <div class="menu-item" ${{ onclick: '^onItemClick', '@data-type': 'type', '@active': 'isActive' }}>
+        <span class="material-symbols-outlined">{{icon}}</span>
+        <span>{{title}}</span>
+      </div>
+    </template>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,16 @@
+/**
+ * @fileoverview Layout module exports
+ * Blender-style panel layout system for Symbiote.js
+ */
+
+export { Layout } from './Layout/Layout.js';
+export { LayoutNode } from './LayoutNode/LayoutNode.js';
+export { ActionZone } from './ActionZone/ActionZone.js';
+export { LayoutPreview } from './LayoutPreview/LayoutPreview.js';
+export { LayoutSidebar } from './LayoutSidebar/LayoutSidebar.js';
+export * as LayoutTree from './LayoutTree.js';
+export {
+  navigate, updateParams, parseQuery, buildHash, buildQuery,
+  getRoute, setDefaultPanel,
+} from './LayoutRouter/LayoutRouter.js';
+export { syncWithRouter } from './LayoutRouter/routerSync.js';

package/vendor/symbiote-node/menu/ContextMenu/ContextMenu.css.js

@@ -0,0 +1,61 @@
+/**
+ * ContextMenu styles
+ * @module symbiote-node/menu/ContextMenu.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+context-menu {
+  position: absolute;
+  inset: 0;
+  z-index: 200;
+  pointer-events: none;
+
+  &[hidden] {
+    display: none;
+  }
+
+  & .sn-ctx-backdrop {
+    position: absolute;
+    inset: 0;
+    pointer-events: all;
+  }
+
+  & .sn-ctx-menu {
+    position: absolute;
+    pointer-events: all;
+    min-width: 160px;
+    background: var(--sn-ctx-bg, #1e1e3a);
+    border: 1px solid var(--sn-ctx-border, #3a3a6a);
+    border-radius: 8px;
+    box-shadow: 0 8px 24px var(--sn-shadow-color, rgba(0, 0, 0, 0.5));
+    padding: 4px;
+    overflow: hidden;
+  }
+}
+
+.sn-ctx-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: var(--sn-ctx-color, #e0e0e0);
+  font-family: var(--sn-font, 'Inter', sans-serif);
+  font-size: 13px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.1s;
+
+  &:hover {
+    background: var(--sn-ctx-hover, rgba(74, 158, 255, 0.15));
+  }
+}
+
+.sn-ctx-icon {
+  font-size: 18px;
+  opacity: 0.7;
+}
+`;