project-graph-mcp 2.2.6 → 2.3.0

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

@@ -0,0 +1,79 @@
+/**
+ * ContextMenu — right-click menu for graph editor
+ *
+ * Shows contextual actions for canvas, nodes, and connections.
+ * Triple-file component: .js + .tpl.js + .css.js
+ *
+ * @module symbiote-node/components/ContextMenu
+ */
+
+import Symbiote, { html } from '@symbiotejs/symbiote';
+import { template, ctxItemTemplate } from './ContextMenu.tpl.js';
+import { styles } from './ContextMenu.css.js';
+
+class CtxItem extends Symbiote {
+  init$ = {
+    label: '',
+    icon: '',
+    onclick: () => {
+      this.$['^onItemClick'](this.$.label);
+    },
+  };
+}
+
+CtxItem.template = ctxItemTemplate;
+CtxItem.reg('ctx-item');
+
+export class ContextMenu extends Symbiote {
+
+  /** @type {Map<string, function>} */
+  _actions = new Map();
+
+  init$ = {
+    items: [],
+    visible: false,
+    onBackdropClick: () => this.hide(),
+    onItemClick: (label) => {
+      const action = this._actions.get(label);
+      if (action) action();
+      this.hide();
+    },
+  };
+
+  /**
+   * Show the menu at screen coordinates
+   * @param {number} x - Screen X
+   * @param {number} y - Screen Y
+   * @param {Array<{label: string, icon: string, action: function}>} items
+   */
+  show(x, y, items) {
+    this._actions.clear();
+    for (const item of items) {
+      this._actions.set(item.label, item.action);
+    }
+    this.$.items = items.map((i) => ({ label: i.label, icon: i.icon }));
+    const menu = this.querySelector('.sn-ctx-menu');
+    if (menu) {
+      menu.style.left = `${x}px`;
+      menu.style.top = `${y}px`;
+    }
+    this.$.visible = true;
+  }
+
+  /** Hide menu */
+  hide() {
+    this.$.visible = false;
+    this.$.items = [];
+    this._actions.clear();
+  }
+
+  renderCallback() {
+    this.sub('visible', (val) => {
+      this.toggleAttribute('hidden', !val);
+    });
+  }
+}
+
+ContextMenu.template = template;
+ContextMenu.rootStyles = styles;
+ContextMenu.reg('context-menu');

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

@@ -0,0 +1,19 @@
+/**
+ * ContextMenu template
+ * @module symbiote-node/menu/ContextMenu.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+<div class="sn-ctx-backdrop" ${{ onclick: 'onBackdropClick' }}></div>
+<div class="sn-ctx-menu">
+  <div class="ctx-items" ${{ itemize: 'items', 'item-tag': 'ctx-item' }}></div>
+</div>
+`;
+
+export const ctxItemTemplate = html`
+<button class="sn-ctx-btn" ${{ onclick: 'onclick' }}>
+  <span class="material-symbols-outlined sn-ctx-icon">{{icon}}</span>
+  <span>{{label}}</span>
+</button>
+`;

package/vendor/symbiote-node/node/CtrlItem/CtrlItem.css.js

@@ -0,0 +1,41 @@
+/**
+ * CtrlItem styles
+ * @module symbiote-node/node/CtrlItem.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+ctrl-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px 12px;
+
+  & .sn-ctrl-label {
+    font-size: 10px;
+    text-transform: uppercase;
+    color: var(--sn-text-dim, #94a3b8);
+    letter-spacing: 0.5px;
+  }
+
+  & .sn-ctrl-input {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+    border-radius: 4px;
+    padding: 4px 8px;
+    color: var(--sn-text, #e2e8f0);
+    font-size: 12px;
+    outline: none;
+    font-family: inherit;
+
+    &:focus {
+      border-color: var(--sn-node-accent, #4a9eff);
+    }
+
+    &[readonly] {
+      opacity: 0.6;
+      cursor: default;
+    }
+  }
+}
+`;

package/vendor/symbiote-node/node/CtrlItem/CtrlItem.js

@@ -0,0 +1,24 @@
+/**
+ * CtrlItem — itemize item for node embedded controls
+ *
+ * Rendered by GraphNode via itemize API.
+ * Receives {key, label, inputType, value, isReadonly} from parent data.
+ *
+ * @module symbiote-node/components/CtrlItem
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './CtrlItem.tpl.js';
+import { styles } from './CtrlItem.css.js';
+
+export class CtrlItem extends Symbiote {
+  key = '';
+  label = '';
+  inputType = 'text';
+  value = '';
+  isReadonly = false;
+}
+
+CtrlItem.template = template;
+CtrlItem.rootStyles = styles;
+CtrlItem.reg('ctrl-item');

package/vendor/symbiote-node/node/CtrlItem/CtrlItem.tpl.js

@@ -0,0 +1,16 @@
+/**
+ * CtrlItem template
+ * @module symbiote-node/node/CtrlItem.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+<label class="sn-ctrl-label">{{label}}</label>
+<input class="sn-ctrl-input"
+  ${{
+    '@type': 'inputType',
+    '@value': 'value',
+    '@readonly': 'isReadonly',
+  }}
+>
+`;

package/vendor/symbiote-node/node/GraphFrame/GraphFrame.css.js

@@ -0,0 +1,65 @@
+/**
+ * GraphFrame styles
+ * @module symbiote-node/node/GraphFrame.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+graph-frame {
+  position: absolute;
+  display: block;
+  border: var(--sn-frame-border-width, 2px) var(--sn-frame-border-style, solid) color-mix(in srgb, var(--frame-color, #4a9eff) 60%, transparent);
+  border-radius: var(--sn-frame-radius, 12px);
+  background: color-mix(in srgb, var(--frame-color, #4a9eff) 8%, transparent);
+  z-index: -1;
+  pointer-events: all;
+  min-width: 120px;
+  min-height: 80px;
+
+  & .sn-frame-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    font-family: var(--sn-frame-font, var(--sn-font, 'Inter', sans-serif));
+    font-size: var(--sn-frame-font-size, 13px);
+    font-weight: 600;
+    color: color-mix(in srgb, var(--frame-color, #4a9eff) 90%, white);
+    user-select: none;
+    cursor: grab;
+    border-bottom: 1px solid color-mix(in srgb, var(--frame-color, #4a9eff) 20%, transparent);
+  }
+
+  & .sn-frame-icon {
+    font-size: 16px;
+    opacity: 0.7;
+  }
+
+  & .sn-frame-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  & .sn-frame-resize {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 16px;
+    height: 16px;
+    cursor: nwse-resize;
+    border-right: 3px solid color-mix(in srgb, var(--frame-color, #4a9eff) 40%, transparent);
+    border-bottom: 3px solid color-mix(in srgb, var(--frame-color, #4a9eff) 40%, transparent);
+    border-radius: 0 0 10px 0;
+  }
+
+  &:hover {
+    border-color: color-mix(in srgb, var(--frame-color, #4a9eff) 80%, transparent);
+  }
+
+  &[data-selected] {
+    border-color: var(--frame-color, #4a9eff);
+    box-shadow: 0 0 12px color-mix(in srgb, var(--frame-color, #4a9eff) 30%, transparent);
+  }
+}
+`;

package/vendor/symbiote-node/node/GraphFrame/GraphFrame.js

@@ -0,0 +1,29 @@
+/**
+ * GraphFrame — visual grouping frame component (Blender-style)
+ *
+ * Colored rectangle with label that groups nodes spatially.
+ * Moving the frame moves all nodes whose positions fall within its bounds.
+ *
+ * @module symbiote-node/components/GraphFrame
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './GraphFrame.tpl.js';
+import { styles } from './GraphFrame.css.js';
+
+export class GraphFrame extends Symbiote {
+  init$ = {
+    label: 'Group',
+    color: '#4a9eff',
+  };
+
+  renderCallback() {
+    this.sub('color', (val) => {
+      if (val) this.style.setProperty('--frame-color', val);
+    });
+  }
+}
+
+GraphFrame.template = template;
+GraphFrame.rootStyles = styles;
+GraphFrame.reg('graph-frame');

package/vendor/symbiote-node/node/GraphFrame/GraphFrame.tpl.js

@@ -0,0 +1,13 @@
+/**
+ * GraphFrame template
+ * @module symbiote-node/node/GraphFrame.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+<div class="sn-frame-header">
+  <span class="material-symbols-outlined sn-frame-icon">dashboard</span>
+  <span class="sn-frame-label">{{label}}</span>
+</div>
+<div ref="resizeHandle" class="sn-frame-resize"></div>
+`;