symbiote-ui 0.3.0-alpha.4

package/navigation/QuickOpen/QuickOpen.js

@@ -0,0 +1,185 @@
+import Symbiote from '@symbiotejs/symbiote';
+import template from './QuickOpen.tpl.js';
+import css from './QuickOpen.css.js';
+import { fuzzyScore, normalizeQuickOpenItems, searchQuickOpenItems } from '../quick-open-utils.js';
+import { translate } from '../../locale/index.js';
+
+function emit(el, type, detail = {}) {
+  el.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail }));
+}
+
+function escapeHtml(value) {
+  return String(value ?? '')
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+export class QuickOpen extends Symbiote {
+  init$ = {
+    visible: false,
+    query: '',
+    resultsHTML: '',
+    selectedIdx: 0,
+    placeholder: translate('quickOpen.placeholder'),
+    emptyText: translate('quickOpen.empty'),
+    maxResults: 15,
+    onDialogClick: (event) => {
+      event.stopPropagation();
+    },
+    onInput: (event) => {
+      this._onInput(event);
+    },
+    onKeydown: (event) => {
+      this._onKeydown(event);
+    },
+    onResultClick: (event) => {
+      let item = event.target.closest('.qo-item');
+      if (!item) return;
+      this.$.selectedIdx = Number(item.dataset.idx);
+      this._selectCurrent();
+    },
+  };
+
+  _items = [];
+  _results = [];
+  _renderInitialized = false;
+  _removeDocumentKeydown = null;
+
+  renderCallback() {
+    if (this._renderInitialized) return;
+    this._renderInitialized = true;
+
+    this._overlay = this.querySelector('.qo-overlay');
+    this._overlay?.addEventListener('click', (event) => {
+      if (event.target === this._overlay) this.close();
+    });
+
+    let keydown = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+        event.preventDefault();
+        this.toggle();
+      }
+
+      if (event.key === 'Escape' && this.$.visible) {
+        event.preventDefault();
+        this.close();
+      }
+    };
+
+    document.addEventListener('keydown', keydown);
+    this._removeDocumentKeydown = () => document.removeEventListener('keydown', keydown);
+
+    this.sub('visible', (visible) => {
+      if (!this._overlay) return;
+      this._overlay.hidden = !visible;
+
+      if (visible) {
+        requestAnimationFrame(() => {
+          let input = this.querySelector('.qo-input');
+          if (input) {
+            input.value = '';
+            input.focus();
+          }
+        });
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    this._removeDocumentKeydown?.();
+    super.disconnectedCallback?.();
+  }
+
+  setItems(items = []) {
+    this._items = normalizeQuickOpenItems(items);
+    this._search(this.$.query);
+  }
+
+  setFiles(files = []) {
+    this.setItems(files);
+  }
+
+  open() {
+    this.$.visible = true;
+    this.$.query = '';
+    this.$.selectedIdx = 0;
+    this._search('');
+  }
+
+  close() {
+    this.$.visible = false;
+  }
+
+  toggle() {
+    if (this.$.visible) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  _onInput(event) {
+    this.$.query = event.target.value;
+    this.$.selectedIdx = 0;
+    this._search(this.$.query);
+  }
+
+  _onKeydown(event) {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      this.$.selectedIdx = Math.min(this.$.selectedIdx + 1, this._results.length - 1);
+      this._renderResults();
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      this.$.selectedIdx = Math.max(this.$.selectedIdx - 1, 0);
+      this._renderResults();
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      this._selectCurrent();
+    }
+  }
+
+  _selectCurrent() {
+    let result = this._results[this.$.selectedIdx];
+    if (!result) return;
+
+    this.close();
+    emit(this, 'quick-open-select', result.item);
+  }
+
+  _search(query) {
+    this._results = searchQuickOpenItems(this._items, query, this.$.maxResults);
+    this._renderResults();
+  }
+
+  static _fuzzyScore(query, candidate) {
+    return fuzzyScore(query, candidate);
+  }
+
+  _renderResults() {
+    if (this._results.length === 0) {
+      this.$.resultsHTML = `<div class="qo-empty">${escapeHtml(this.$.emptyText)}</div>`;
+      return;
+    }
+
+    let html = [];
+    for (let i = 0; i < this._results.length; i++) {
+      let { item } = this._results[i];
+      let selectedClass = i === this.$.selectedIdx ? ' qo-selected' : '';
+
+      html.push(`<div class="qo-item${selectedClass}" data-idx="${i}" data-value="${escapeHtml(item.value)}">
+        <span class="qo-name">${escapeHtml(item.label)}</span>
+        <span class="qo-path">${escapeHtml(item.path)}</span>
+      </div>`);
+    }
+
+    this.$.resultsHTML = html.join('');
+  }
+}
+
+QuickOpen.template = template;
+QuickOpen.rootStyles = css;
+QuickOpen.reg('quick-open');

package/navigation/QuickOpen/QuickOpen.tpl.js

@@ -0,0 +1,15 @@
+export default `
+  <div class="qo-overlay">
+    <div class="qo-dialog" ${{onclick: 'onDialogClick'}}>
+      <div class="qo-input-wrap">
+        <span class="material-symbols-outlined qo-icon">search</span>
+        <input class="qo-input" type="text"
+          ${{placeholder: 'placeholder'}}
+          ${{oninput: 'onInput', onkeydown: 'onKeydown'}}>
+        <kbd class="qo-kbd">ESC</kbd>
+      </div>
+      <div class="qo-results" bind="innerHTML: resultsHTML"
+        ${{onclick: 'onResultClick'}}></div>
+    </div>
+  </div>
+`;

package/navigation/quick-open-utils.js

@@ -0,0 +1,101 @@
+export function normalizeQuickOpenItems(items = []) {
+  return items
+    .map((item) => {
+      if (typeof item === 'string') {
+        return {
+          id: item,
+          label: item.split('/').pop() || item,
+          path: item.includes('/') ? item.substring(0, item.lastIndexOf('/')) : '',
+          value: item,
+        };
+      }
+
+      let value = item.value || item.file || item.path || item.id || item.label || '';
+      let label = item.label || item.name || String(value).split('/').pop() || String(value);
+      let path = item.path || '';
+      if (!path && typeof value === 'string' && value.includes('/')) {
+        path = value.substring(0, value.lastIndexOf('/'));
+      }
+
+      return {
+        ...item,
+        id: item.id || value || label,
+        label,
+        path,
+        value,
+      };
+    })
+    .filter((item) => item.value || item.label);
+}
+
+export function fuzzyScore(query, candidate) {
+  if (!query) return 0;
+  if (candidate.includes(query)) {
+    return 100 + (query.length / candidate.length) * 50;
+  }
+
+  let queryIdx = 0;
+  let streak = 0;
+  let score = 0;
+
+  for (let i = 0; i < candidate.length && queryIdx < query.length; i++) {
+    if (candidate[i] === query[queryIdx]) {
+      queryIdx++;
+      score += 10 + streak;
+      streak += 5;
+
+      if (i === 0 || candidate[i - 1] === '/' || candidate[i - 1] === '-' || candidate[i - 1] === '.') {
+        score += 15;
+      }
+    } else {
+      streak = 0;
+    }
+  }
+
+  return queryIdx === query.length ? score : 0;
+}
+
+export function searchQuickOpenItems(items = [], query = '', limit = 15) {
+  let normalizedQuery = query.toLowerCase().trim();
+  let normalizedItems = normalizeQuickOpenItems(items);
+
+  if (!normalizedQuery) {
+    return normalizedItems.slice(0, limit).map((item) => ({ item, score: 0 }));
+  }
+
+  let results = [];
+  for (let item of normalizedItems) {
+    let haystack = [item.label, item.path, item.value].filter(Boolean).join('/').toLowerCase();
+    let score = fuzzyScore(normalizedQuery, haystack);
+    if (score > 0) results.push({ item, score });
+  }
+
+  results.sort((a, b) => b.score - a.score);
+  return results.slice(0, limit);
+}
+
+export function collectQuickOpenFilesFromSkeleton(skeleton = {}) {
+  let files = new Set();
+
+  for (let file of Object.keys(skeleton.X || {})) {
+    files.add(file);
+  }
+
+  for (let node of Object.values(skeleton.n || {})) {
+    if (node.f) files.add(node.f);
+  }
+
+  for (let [dir, entries] of Object.entries(skeleton.f || {})) {
+    for (let file of entries) {
+      files.add(dir === './' ? file : `${dir}${file}`);
+    }
+  }
+
+  for (let [dir, entries] of Object.entries(skeleton.a || {})) {
+    for (let file of entries) {
+      files.add(dir === './' ? file : `${dir}${file}`);
+    }
+  }
+
+  return [...files].sort();
+}

package/node/CtrlItem/CtrlItem.css.js

@@ -0,0 +1,41 @@
+/**
+ * CtrlItem styles
+ * @module symbiote-node/node/CtrlItem.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export let 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);
+      letter-spacing: 0.5px;
+    }
+
+    & .sn-ctrl-input {
+      background: var(--sn-field-control-bg);
+      border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+      border-radius: 4px;
+      padding: 4px 8px;
+      color: var(--sn-text);
+      font-size: 12px;
+      outline: none;
+      font-family: inherit;
+
+      &:focus {
+        border-color: var(--sn-node-accent);
+      }
+
+      &[readonly] {
+        opacity: 0.6;
+        cursor: default;
+      }
+    }
+  }
+`;

package/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/node/CtrlItem/CtrlItem.tpl.js

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

package/node/GraphFrame/GraphFrame.css.js

@@ -0,0 +1,66 @@
+/**
+ * GraphFrame styles
+ * @module symbiote-node/node/GraphFrame.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export let styles = css`
+  graph-frame {
+    position: absolute;
+    display: block;
+    border: var(--sn-frame-border-width) var(--sn-frame-border-style)
+      color-mix(in srgb, var(--frame-color, var(--sn-node-selected)) 60%, transparent);
+    border-radius: var(--sn-frame-radius);
+    background: color-mix(in srgb, var(--frame-color, var(--sn-node-selected)) 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);
+      font-size: var(--sn-frame-font-size);
+      font-weight: 600;
+      color: color-mix(in srgb, var(--frame-color, var(--sn-node-selected)) 90%, var(--sn-text));
+      user-select: none;
+      cursor: grab;
+      border-bottom: 1px solid color-mix(in srgb, var(--frame-color, var(--sn-node-selected)) 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, var(--sn-node-selected)) 40%, transparent);
+      border-bottom: 3px solid color-mix(in srgb, var(--frame-color, var(--sn-node-selected)) 40%, transparent);
+      border-radius: 0 0 10px 0;
+    }
+
+    &:hover {
+      border-color: color-mix(in srgb, var(--frame-color, var(--sn-node-selected)) 80%, transparent);
+    }
+
+    &[data-selected] {
+      border-color: var(--frame-color, var(--sn-node-selected));
+      box-shadow: 0 0 12px color-mix(in srgb, var(--frame-color, var(--sn-node-selected)) 30%, transparent);
+    }
+  }
+`;

package/node/GraphFrame/GraphFrame.js

@@ -0,0 +1,32 @@
+/**
+ * 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 { ensureMaterialSymbols } from '../../icons/MaterialSymbols.js';
+import { template } from './GraphFrame.tpl.js';
+import { styles } from './GraphFrame.css.js';
+
+export class GraphFrame extends Symbiote {
+  init$ = {
+    label: 'Group',
+    color: 'var(--sn-node-selected)',
+  };
+
+  renderCallback() {
+    ensureMaterialSymbols(['dashboard']);
+
+    this.sub('color', (val) => {
+      if (val) this.style.setProperty('--frame-color', val);
+    });
+  }
+}
+
+GraphFrame.template = template;
+GraphFrame.rootStyles = styles;
+GraphFrame.reg('graph-frame');

package/node/GraphFrame/GraphFrame.tpl.js

@@ -0,0 +1,13 @@
+/**
+ * GraphFrame template
+ * @module symbiote-node/node/GraphFrame.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export let 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>
+`;