symbiote-ui 0.3.0-alpha.4

package/canvas/NodeCanvas/NodeCanvas.tpl.js

@@ -0,0 +1,22 @@
+import { html } from '@symbiotejs/symbiote';
+
+export let 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>
+    </div>
+    <quick-toolbar ref="quickToolbar" hidden></quick-toolbar>
+    <context-menu ref="contextMenu" hidden></context-menu>
+    <node-minimap ref="minimap" hidden></node-minimap>
+    <button ref="minimapToggle" class="sn-minimap-toggle" ${{ title: 'minimapToggleTitle' }}>
+      <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/canvas/NodeSearch/NodeSearch.css.js

@@ -0,0 +1,97 @@
+/**
+ * NodeSearch styles
+ * @module symbiote-node/canvas/NodeSearch.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export let styles = css`
+  node-search {
+    position: absolute;
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 360px;
+    z-index: 200;
+    font-family: var(--sn-font);
+
+    &[hidden] {
+      display: none;
+    }
+
+    & .search-bar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 14px;
+      background: var(--sn-node-bg);
+      border: 1px solid var(--sn-node-border);
+      border-radius: 10px;
+      box-shadow: 0 8px 32px var(--sn-shadow-color);
+    }
+
+    & .search-icon {
+      font-size: 18px;
+      color: var(--sn-text-dim);
+    }
+
+    & .search-input {
+      flex: 1;
+      background: none;
+      border: none;
+      outline: none;
+      color: var(--sn-text);
+      font-size: 14px;
+      font-family: inherit;
+    }
+
+    & .search-input::placeholder {
+      color: var(--sn-text-dim);
+    }
+
+    & .search-hint {
+      font-size: 11px;
+      color: var(--sn-text-dim);
+      padding: 2px 6px;
+      border: 1px solid var(--sn-node-border);
+      border-radius: 4px;
+    }
+
+    & .search-results {
+      margin-top: 4px;
+      background: var(--sn-node-bg);
+      border-radius: 8px;
+      border: 1px solid var(--sn-node-border);
+      box-shadow: 0 4px 16px var(--sn-shadow-color);
+      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);
+    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);
+    padding: 1px 6px;
+    border-radius: 4px;
+    background: color-mix(in srgb, currentColor 5%, transparent);
+  }
+`;

package/canvas/NodeSearch/NodeSearch.js

@@ -0,0 +1,140 @@
+/**
+ * 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 { ensureMaterialSymbols } from '../../icons/MaterialSymbols.js';
+import { template, searchResultTemplate } from './NodeSearch.tpl.js';
+import { styles } from './NodeSearch.css.js';
+import { translate } from '../../locale/index.js';
+
+export class NodeSearch extends Symbiote {
+  init$ = {
+    query: '',
+    results: [],
+    isOpen: false,
+    placeholder: translate('nodeSearch.placeholder'),
+    onResultClick: (e) => {
+      let 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(() => {
+      let input = this.querySelector('.search-input');
+      if (input) input.focus();
+    });
+  }
+
+  close() {
+    this.$.isOpen = false;
+    this.$.query = '';
+    this.$.results = [];
+    let 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;
+    let nodes = this.#getNodes();
+    let q = query.toLowerCase();
+    let 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() {
+    ensureMaterialSymbols(['search']);
+
+    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();
+    }
+  }
+}
+
+
+class SearchResultItem extends Symbiote {
+  init$ = {
+    id: '',
+    label: '',
+    type: '',
+    category: '',
+  };
+}
+
+SearchResultItem.template = searchResultTemplate;
+SearchResultItem.reg('search-result-item');
+
+NodeSearch.template = template;
+NodeSearch.rootStyles = styles;
+NodeSearch.reg('node-search');

package/canvas/NodeSearch/NodeSearch.tpl.js

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