project-graph-mcp 2.2.4 → 2.3.0

package/vendor/symbiote-node/canvas/NodeCanvas/NodeCanvas.tpl.js

@@ -0,0 +1,22 @@
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+<div ref="canvasContainer" class="canvas-container" tabindex="0">
+  <canvas ref="connCanvas" class="sn-conn-canvas"></canvas>
+  <div ref="content" class="content">
+    <svg ref="connections" class="sn-connections"></svg>
+    <div ref="framesLayer" class="sn-frames"></div>
+    <div ref="nodesLayer" class="sn-nodes"></div>
+    <svg ref="pseudoSvg" class="pseudo-svg"></svg>
+    <quick-toolbar ref="quickToolbar" hidden></quick-toolbar>
+  </div>
+  <context-menu ref="contextMenu" hidden></context-menu>
+  <node-minimap ref="minimap" hidden></node-minimap>
+  <button ref="minimapToggle" class="sn-minimap-toggle" title="Toggle minimap">
+    <span class="material-symbols-outlined">map</span>
+  </button>
+  <node-search ref="nodeSearch" hidden></node-search>
+  <graph-breadcrumb ref="breadcrumb" hidden></graph-breadcrumb>
+</div>
+<inspector-panel ref="inspector" hidden></inspector-panel>
+`;

package/vendor/symbiote-node/canvas/NodeSearch/NodeSearch.css.js

@@ -0,0 +1,97 @@
+/**
+ * NodeSearch styles
+ * @module symbiote-node/canvas/NodeSearch.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+node-search {
+  position: absolute;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 360px;
+  z-index: 200;
+  font-family: var(--sn-font, 'Inter', sans-serif);
+
+  &[hidden] {
+    display: none;
+  }
+
+  & .search-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    background: var(--sn-node-bg, #2a2a3e);
+    border: 1px solid var(--sn-node-border, rgba(255,255,255,0.12));
+    border-radius: 10px;
+    box-shadow: 0 8px 32px var(--sn-shadow-color, rgba(0,0,0,0.4));
+  }
+
+  & .search-icon {
+    font-size: 18px;
+    color: var(--sn-text-dim, #888);
+  }
+
+  & .search-input {
+    flex: 1;
+    background: none;
+    border: none;
+    outline: none;
+    color: var(--sn-text, #d4d4d4);
+    font-size: 14px;
+    font-family: inherit;
+  }
+
+  & .search-input::placeholder {
+    color: var(--sn-text-dim, #666);
+  }
+
+  & .search-hint {
+    font-size: 11px;
+    color: var(--sn-text-dim, #555);
+    padding: 2px 6px;
+    border: 1px solid var(--sn-node-border, rgba(255,255,255,0.08));
+    border-radius: 4px;
+  }
+
+  & .search-results {
+    margin-top: 4px;
+    background: var(--sn-node-bg, #2a2a3e);
+    border-radius: 8px;
+    border: 1px solid var(--sn-node-border, rgba(255,255,255,0.08));
+    box-shadow: 0 4px 16px var(--sn-shadow-color, rgba(0,0,0,0.3));
+    overflow: hidden;
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  & .search-results:empty {
+    display: none;
+  }
+}
+
+.search-result {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  cursor: pointer;
+  color: var(--sn-text, #d4d4d4);
+  font-size: 13px;
+  transition: background 0.1s;
+
+  &:hover {
+    background: color-mix(in srgb, currentColor 6%, transparent);
+  }
+}
+
+.search-result-type {
+  font-size: 11px;
+  color: var(--sn-text-dim, #888);
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: color-mix(in srgb, currentColor 5%, transparent);
+}
+`;

package/vendor/symbiote-node/canvas/NodeSearch/NodeSearch.js

@@ -0,0 +1,132 @@
+/**
+ * NodeSearch — omnibox for searching and focusing nodes
+ *
+ * Ctrl+F or / to open. Type to filter by label, type, category.
+ * Click result to select and center viewport on that node.
+ * Escape to close.
+ *
+ * @module symbiote-node/canvas/NodeSearch
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template, searchResultTemplate } from './NodeSearch.tpl.js';
+import { styles } from './NodeSearch.css.js';
+
+export class NodeSearch extends Symbiote {
+
+  init$ = {
+    query: '',
+    results: [],
+    isOpen: false,
+    onResultClick: (e) => {
+      const item = e.target.closest('.search-result');
+      if (item?.dataset?.nodeId) {
+        this.#handleResultClick(item.dataset.nodeId);
+      }
+    },
+  };
+
+  /** @type {function|null} */
+  #getNodes = null;
+
+  /** @type {function|null} */
+  #onSelect = null;
+
+  /**
+   * Configure search
+   * @param {object} options
+   * @param {function} options.getNodes - returns array of { id, label, type, category }
+   * @param {function} options.onSelect - called with nodeId when a result is clicked
+   */
+  configure(options) {
+    this.#getNodes = options.getNodes;
+    this.#onSelect = options.onSelect;
+  }
+
+  /** Open search panel */
+  open() {
+    this.$.isOpen = true;
+    requestAnimationFrame(() => {
+      const input = this.querySelector('.search-input');
+      if (input) input.focus();
+    });
+  }
+
+  close() {
+    this.$.isOpen = false;
+    this.$.query = '';
+    this.$.results = [];
+    const input = this.querySelector('.search-input');
+    if (input) input.value = '';
+  }
+
+  /** Toggle open/close */
+  toggle() {
+    if (this.$.isOpen) this.close();
+    else this.open();
+  }
+
+  #search(query) {
+    if (!this.#getNodes) return;
+    const nodes = this.#getNodes();
+    const q = query.toLowerCase();
+    const results = nodes.filter(n =>
+      n.label.toLowerCase().includes(q) ||
+      (n.type && n.type.toLowerCase().includes(q)) ||
+      (n.category && n.category.toLowerCase().includes(q))
+    ).slice(0, 10).map(n => ({
+      id: n.id,
+      label: n.label,
+      type: n.type || 'default',
+      category: n.category || 'default',
+    }));
+    this.$.results = results;
+  }
+
+  #handleResultClick(nodeId) {
+    if (this.#onSelect) this.#onSelect(nodeId);
+    this.close();
+  }
+
+  renderCallback() {
+    this.sub('isOpen', (val) => {
+      this.toggleAttribute('hidden', !val);
+    });
+
+    this.sub('query', (q) => {
+      if (!q || q.length < 1) {
+        this.$.results = [];
+        return;
+      }
+      this.#search(q);
+    });
+  }
+
+  onSearchInput(e) {
+    this.$.query = e.target.value;
+  }
+
+  onSearchKeydown(e) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      this.close();
+    }
+  }
+
+
+}
+
+// Result item for itemize
+class SearchResultItem extends Symbiote {
+  id = '';
+  label = '';
+  type = '';
+  category = '';
+}
+
+SearchResultItem.template = searchResultTemplate;
+SearchResultItem.reg('search-result-item');
+
+NodeSearch.template = template;
+NodeSearch.rootStyles = styles;
+NodeSearch.reg('node-search');

package/vendor/symbiote-node/canvas/NodeSearch/NodeSearch.tpl.js

@@ -0,0 +1,21 @@
+/**
+ * NodeSearch template
+ * @module symbiote-node/canvas/NodeSearch.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+<div class="search-bar" ${{ onkeydown: 'onSearchKeydown' }}>
+  <span class="material-symbols-outlined search-icon">search</span>
+  <input class="search-input" type="text" placeholder="Search nodes..." ${{ oninput: 'onSearchInput' }} />
+  <span class="search-hint">Esc</span>
+</div>
+<div class="search-results" ${{ itemize: 'results', 'item-tag': 'search-result-item' }}></div>
+`;
+
+export const searchResultTemplate = html`
+<div class="search-result" data-node-id="{{id}}" ${{ onclick: '^onResultClick' }}>
+  <span class="search-result-label">{{label}}</span>
+  <span class="search-result-type">{{type}}</span>
+</div>
+`;