symbiote-ui 0.3.0-alpha.4

package/inspector/InspectorPanel/InspectorPanel.js

@@ -0,0 +1,368 @@
+/**
+ * InspectorPanel — side panel showing selected node properties
+ *
+ * Displays node label, type, category, inputs/outputs/controls.
+ * Updates when selection changes. Shows "No selection" when nothing selected.
+ *
+ * @module symbiote-node/inspector/InspectorPanel
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { ensureMaterialSymbols } from '../../icons/MaterialSymbols.js';
+import { template, inspPortItemTemplate, inspCtrlItemTemplate } from './InspectorPanel.tpl.js';
+import { styles } from './InspectorPanel.css.js';
+import '../TemplatePreview/TemplatePreview.js';
+import { translate } from '../../locale/index.js';
+
+const INSPECTOR_ICONS = [
+  'account_tree',
+  'input',
+  'login',
+  'output',
+  'play_arrow',
+  'touch_app',
+  'tune',
+];
+
+export class InspectorPanel extends Symbiote {
+  init$ = {
+    visible: false,
+    nodeLabel: '',
+    nodeType: '',
+    nodeCategory: '',
+    nodeId: '',
+    inputsList: [],
+    outputsList: [],
+    controlsList: [],
+    hasSelection: false,
+    isFireable: false,
+    isSubgraph: false,
+    isTemplateBuilder: false,
+    innerNodeCount: 0,
+    emptyLabel: translate('inspector.empty'),
+    labelLabel: translate('inspector.label'),
+    typeLabel: translate('inspector.type'),
+    categoryLabel: translate('inspector.category'),
+    inputsLabel: translate('inspector.inputs'),
+    outputsLabel: translate('inspector.outputs'),
+    controlsLabel: translate('inspector.controls'),
+    fireLabel: translate('inspector.fire'),
+    subgraphLabel: translate('inspector.subgraph'),
+    innerNodesLabel: translate('inspector.innerNodes'),
+    enterSubgraphLabel: translate('inspector.enterSubgraph'),
+    onFire: () => {
+      if (this._currentNodeId) {
+        this.dispatchEvent(
+          new CustomEvent('node-fire', {
+            detail: { nodeId: this._currentNodeId },
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+    },
+    onEnterSubgraph: () => {
+      if (this._canvas && this._currentNodeId) {
+        this._canvas.drillDown(this._currentNodeId);
+      }
+    },
+  };
+
+  /** @type {*} */
+  _canvas = null;
+
+  /** @type {string|null} */
+  _currentNodeId = null;
+
+  /**
+   * Show inspector for a node
+   * @param {*} node - Node instance or node-like object
+   */
+  inspect(node) {
+    if (!node) {
+      this.clear();
+      return;
+    }
+
+    let inputs = Object.entries(node.inputs).map(([key, port]) => ({
+      key,
+      label: port.label || key,
+      socketType: port.socket?.name || 'any',
+    }));
+
+    let outputs = Object.entries(node.outputs).map(([key, port]) => ({
+      key,
+      label: port.label || key,
+      socketType: port.socket?.name || 'any',
+    }));
+
+    let controls = Object.entries(node.controls).map(([key, ctrl]) => ({
+      key,
+      label: ctrl.label || key,
+      value: ctrl.value ?? '',
+      type: ctrl.type || 'text',
+      options: (ctrl.options || []).join(','),
+    }));
+
+    let isSubgraph = !!node._isSubgraph;
+    let innerNodeCount = 0;
+    if (isSubgraph && node.innerEditor) {
+      innerNodeCount = node.innerEditor.getNodes().length;
+    }
+
+    this._currentNodeId = node.id;
+
+
+    let driver = node.driver || node._driver;
+    let isFireable =
+      !!driver?.fireable ||
+      node.type === 'debug/inject' ||
+      node.category === 'trigger' ||
+      node.category === 'queue';
+
+    this.set$({
+      nodeLabel: node.label,
+      nodeType: node.type || 'default',
+      nodeCategory: node.category || 'default',
+      nodeId: node.id,
+      inputsList: inputs,
+      outputsList: outputs,
+      controlsList: controls,
+      hasSelection: true,
+      visible: true,
+      isFireable,
+      isSubgraph,
+      isTemplateBuilder:
+        node.type === 'transform/template-builder' || node.type === 'transform/template',
+      innerNodeCount,
+    });
+
+
+    if (node.type === 'transform/template-builder' || node.type === 'transform/template') {
+      requestAnimationFrame(() => {
+        /** @type {*} */
+        let preview = this.querySelector('template-preview');
+        if (preview && node.params?.template) {
+          preview.$.template = node.params.template;
+        }
+      });
+    }
+  }
+
+  /** Clear inspector */
+  clear() {
+    this._currentNodeId = null;
+    this.set$({
+      hasSelection: false,
+      nodeLabel: '',
+      nodeType: '',
+      nodeCategory: '',
+      nodeId: '',
+      inputsList: [],
+      outputsList: [],
+      controlsList: [],
+      isFireable: false,
+      isSubgraph: false,
+      isTemplateBuilder: false,
+      innerNodeCount: 0,
+    });
+  }
+
+  renderCallback() {
+    ensureMaterialSymbols(INSPECTOR_ICONS);
+
+    this.sub('visible', (val) => {
+      this.toggleAttribute('hidden', !val);
+    });
+
+
+    this.addEventListener('ctrl-change', (/** @type {CustomEvent} */ e) => {
+      let { key, value } = e.detail;
+      if (this._currentNodeId && this._canvas) {
+        let editor = this._canvas._editor;
+        if (editor) {
+          let node = editor.getNode(this._currentNodeId);
+          if (node && node.controls[key]) {
+            node.controls[key].setValue(value);
+          }
+
+          if (node && node.params) {
+            node.params[key] = value;
+          }
+
+          if (key === 'template') {
+            let preview = this.querySelector('template-preview');
+            if (preview) preview.$.template = value;
+          }
+        }
+      }
+    });
+
+    this.sub('hasSelection', (val) => {
+      /** @type {HTMLElement} */
+      let empty = this.querySelector('.insp-empty');
+      /** @type {HTMLElement} */
+      let content = this.querySelector('.insp-content');
+      if (empty) empty.hidden = val;
+      if (content) content.hidden = !val;
+    });
+
+    this.sub('isSubgraph', (val) => {
+      /** @type {HTMLElement} */
+      let sgSection = this.querySelector('.insp-subgraph');
+      if (sgSection) sgSection.hidden = !val;
+    });
+
+
+    const STORAGE_KEY = 'sn-inspector-width';
+    let handle = this.querySelector('.insp-resize-handle');
+
+
+    let saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) this.style.width = saved + 'px';
+
+    if (handle) {
+      let startX = 0;
+      let startW = 0;
+
+      /** @param {PointerEvent} e */
+      let onMove = (e) => {
+        let delta = startX - e.clientX;
+        let newWidth = Math.max(200, Math.min(600, startW + delta));
+        this.style.width = newWidth + 'px';
+      };
+
+      let onUp = () => {
+        handle.classList.remove('dragging');
+        localStorage.setItem(STORAGE_KEY, String(this.offsetWidth));
+        document.removeEventListener('pointermove', onMove);
+        document.removeEventListener('pointerup', onUp);
+      };
+
+      handle.addEventListener('pointerdown', (/** @type {PointerEvent} */ e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        startX = e.clientX;
+        startW = this.offsetWidth;
+        handle.classList.add('dragging');
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', onUp);
+      });
+    }
+  }
+}
+
+
+class InspPortItem extends Symbiote {
+  init$ = {
+    key: '',
+    label: '',
+    socketType: '',
+  };
+}
+
+InspPortItem.template = inspPortItemTemplate;
+InspPortItem.reg('insp-port-item');
+
+
+class InspCtrlItem extends Symbiote {
+  init$ = {
+    key: '',
+    label: '',
+    value: '',
+    type: 'text',
+    options: '',
+  };
+
+  renderCallback() {
+    /** @type {HTMLElement} */
+    let container = this.querySelector('.insp-ctrl-input');
+    if (!container) return;
+
+    this.sub('type', (type) => {
+      this._renderControl(container, type);
+    });
+  }
+
+  /**
+   * Render the appropriate control element
+   * @param {HTMLElement} container
+   * @param {string} type
+   */
+  _renderControl(container, type) {
+    container.replaceChildren();
+
+    if (type === 'textarea') {
+      let el = document.createElement('textarea');
+      el.className = 'insp-ctrl-textarea';
+      el.value = this.$.value || '';
+      el.rows = 6;
+      el.spellcheck = false;
+      el.addEventListener('input', () => this._emitChange(el.value));
+      container.appendChild(el);
+    } else if (type === 'boolean') {
+      let label = document.createElement('label');
+      label.className = 'insp-ctrl-toggle';
+      let el = document.createElement('input');
+      el.type = 'checkbox';
+      el.checked = this.$.value === true || this.$.value === 'true';
+      el.addEventListener('change', () => this._emitChange(el.checked));
+      let slider = document.createElement('span');
+      slider.className = 'insp-ctrl-slider';
+      label.appendChild(el);
+      label.appendChild(slider);
+      container.appendChild(label);
+    } else if (type === 'select') {
+      let el = document.createElement('select');
+      el.className = 'insp-ctrl-select';
+      let opts =
+        typeof this.$.options === 'string'
+          ? this.$.options
+              .split(',')
+              .map((s) => s.trim())
+              .filter(Boolean)
+          : [];
+      for (const opt of opts) {
+        let option = document.createElement('option');
+        option.value = opt;
+        option.textContent = opt;
+        if (opt === String(this.$.value)) option.selected = true;
+        el.appendChild(option);
+      }
+      el.addEventListener('change', () => this._emitChange(el.value));
+      container.appendChild(el);
+    } else {
+
+      let el = document.createElement('input');
+      el.className = 'insp-ctrl-input-el';
+      el.type = type === 'number' ? 'number' : 'text';
+      el.value = this.$.value ?? '';
+      el.spellcheck = false;
+      el.addEventListener('input', () => {
+        this._emitChange(type === 'number' ? Number(el.value) : el.value);
+      });
+      container.appendChild(el);
+    }
+  }
+
+  /**
+   * Emit change event to parent InspectorPanel
+   * @param {*} value
+   */
+  _emitChange(value) {
+    this.$.value = value;
+    this.dispatchEvent(
+      new CustomEvent('ctrl-change', {
+        bubbles: true,
+        detail: { key: this.$.key, value },
+      })
+    );
+  }
+}
+
+InspCtrlItem.template = inspCtrlItemTemplate;
+InspCtrlItem.reg('insp-ctrl-item');
+
+InspectorPanel.template = template;
+InspectorPanel.rootStyles = styles;
+InspectorPanel.reg('inspector-panel');

package/inspector/InspectorPanel/InspectorPanel.tpl.js

@@ -0,0 +1,96 @@
+/**
+ * InspectorPanel template
+ * @module symbiote-node/inspector/InspectorPanel.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export let template = html`
+  <div class="insp-resize-handle"></div>
+
+  <div class="insp-body">
+    <div class="insp-empty">
+      <span class="material-symbols-outlined">touch_app</span>
+      <span ${{ textContent: 'emptyLabel' }}></span>
+    </div>
+
+    <div class="insp-content" hidden>
+      <div class="insp-field">
+        <label ${{ textContent: 'labelLabel' }}></label>
+        <div class="insp-value">{{nodeLabel}}</div>
+      </div>
+      <div class="insp-field">
+        <label ${{ textContent: 'typeLabel' }}></label>
+        <div class="insp-value insp-tag">{{nodeType}}</div>
+      </div>
+      <div class="insp-field">
+        <label ${{ textContent: 'categoryLabel' }}></label>
+        <div class="insp-value insp-tag">{{nodeCategory}}</div>
+      </div>
+      <div class="insp-field">
+        <label>ID</label>
+        <div class="insp-value insp-mono">{{nodeId}}</div>
+      </div>
+
+      <div class="insp-section">
+        <div class="insp-section-title">
+          <span class="material-symbols-outlined">input</span> <span ${{ textContent: 'inputsLabel' }}></span>
+        </div>
+        <div ${{ itemize: 'inputsList', 'item-tag': 'insp-port-item' }}></div>
+      </div>
+
+      <div class="insp-section">
+        <div class="insp-section-title">
+          <span class="material-symbols-outlined">output</span> <span ${{ textContent: 'outputsLabel' }}></span>
+        </div>
+        <div ${{ itemize: 'outputsList', 'item-tag': 'insp-port-item' }}></div>
+      </div>
+
+      <div class="insp-section">
+        <div class="insp-section-title">
+          <span class="material-symbols-outlined">tune</span> <span ${{ textContent: 'controlsLabel' }}></span>
+        </div>
+        <div ${{ itemize: 'controlsList', 'item-tag': 'insp-ctrl-item' }}></div>
+      </div>
+
+      <div class="insp-template-preview" ${{ '@hidden': '!isTemplateBuilder' }}>
+        <template-preview></template-preview>
+      </div>
+
+      <div class="insp-fire" ${{ '@hidden': '!isFireable' }}>
+        <button class="insp-fire-btn" ${{ onclick: 'onFire' }}>
+          <span class="material-symbols-outlined">play_arrow</span>
+          <span ${{ textContent: 'fireLabel' }}></span>
+        </button>
+      </div>
+
+      <div class="insp-subgraph" hidden>
+        <div class="insp-section-title">
+          <span class="material-symbols-outlined">account_tree</span> <span ${{ textContent: 'subgraphLabel' }}></span>
+        </div>
+        <div class="insp-field">
+          <label ${{ textContent: 'innerNodesLabel' }}></label>
+          <div class="insp-value">{{innerNodeCount}}</div>
+        </div>
+        <button class="insp-enter-btn" ${{ onclick: 'onEnterSubgraph' }}>
+          <span class="material-symbols-outlined">login</span>
+          <span ${{ textContent: 'enterSubgraphLabel' }}></span>
+        </button>
+      </div>
+    </div>
+  </div>
+`;
+
+export let inspPortItemTemplate = html`
+  <div class="insp-port">
+    <span class="insp-port-dot"></span>
+    <span class="insp-port-label">{{label}}</span>
+    <span class="insp-port-type">{{socketType}}</span>
+  </div>
+`;
+
+export let inspCtrlItemTemplate = html`
+  <div class="insp-ctrl">
+    <label class="insp-ctrl-label">{{label}}</label>
+    <div class="insp-ctrl-input"></div>
+  </div>
+`;

package/inspector/TemplatePreview/TemplatePreview.css.js

@@ -0,0 +1,104 @@
+/**
+ * TemplatePreview styles
+ * @module symbiote-node/inspector/TemplatePreview.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export let styles = css`
+  template-preview {
+    display: block;
+    padding-top: 8px;
+
+    & .tpl-preview-section {
+      margin-bottom: 10px;
+    }
+
+    & .tpl-chips-label,
+    & .tpl-preview-label {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: var(--sn-text-dim);
+      margin-bottom: 4px;
+      letter-spacing: 0.5px;
+    }
+
+    & .tpl-chips-label .material-symbols-outlined,
+    & .tpl-preview-label .material-symbols-outlined {
+      font-size: 14px;
+      opacity: 0.6;
+    }
+
+    & .tpl-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+
+    & .tpl-chips-empty {
+      font-size: 11px;
+      color: var(--sn-text-dim);
+      font-style: italic;
+      padding: 4px 0;
+
+      &[hidden] {
+        display: none;
+      }
+    }
+
+    & .tpl-test-data {
+      width: 100%;
+      padding: 6px 8px;
+      font-size: 11px;
+      font-family: var(--sn-font-mono);
+      color: var(--sn-text);
+      background: color-mix(in srgb, currentColor 6%, transparent);
+      border: 1px solid var(--sn-node-border);
+      border-radius: 4px;
+      outline: none;
+      resize: vertical;
+      min-height: 50px;
+      box-sizing: border-box;
+      line-height: 1.4;
+      transition: border-color 0.15s;
+
+      &:focus {
+        border-color: var(--sn-node-selected);
+      }
+    }
+
+    & .tpl-preview-result {
+      font-size: 12px;
+      font-family: var(--sn-font-mono);
+      color: var(--sn-text);
+      background: color-mix(in srgb, currentColor 4%, transparent);
+      border: 1px solid var(--sn-node-border);
+      border-radius: 4px;
+      padding: 8px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      min-height: 30px;
+      line-height: 1.4;
+    }
+  }
+
+  .tpl-chip {
+    display: inline-block;
+    padding: 2px 8px;
+    font-size: 11px;
+    font-family: var(--sn-font-mono);
+    border-radius: 10px;
+    background: var(--sn-success-bg);
+    color: var(--sn-success-color);
+    border: 1px solid var(--sn-success-border);
+
+    &[data-missing] {
+      background: var(--sn-danger-bg);
+      color: var(--sn-danger-color);
+      border-color: var(--sn-danger-border);
+    }
+  }
+`;

package/inspector/TemplatePreview/TemplatePreview.js

@@ -0,0 +1,145 @@
+/**
+ * TemplatePreview — live preview for template-builder node
+ *
+ * Shows placeholder chips (resolved/missing), test data input,
+ * and interpolated preview text. Updates reactively.
+ *
+ * @module symbiote-node/inspector/TemplatePreview
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { ensureMaterialSymbols } from '../../icons/MaterialSymbols.js';
+import { template } from './TemplatePreview.tpl.js';
+import { styles } from './TemplatePreview.css.js';
+import { extractPlaceholders } from 'symbiote-engine/packs/transform/template-builder.handler.js';
+import { translate } from '../../locale/index.js';
+
+const DEFAULT_TEST_DATA = JSON.stringify(
+  {
+    status: 'created',
+    region: 'RU',
+    jobUid: '00c3b879-example',
+    details: 'Test delivery',
+    timestamp: new Date().toISOString(),
+  },
+  null,
+  2
+);
+
+export class TemplatePreview extends Symbiote {
+  init$ = {
+    template: '',
+    testData: DEFAULT_TEST_DATA,
+    placeholderChips: [],
+    previewText: '',
+    noPlaceholders: true,
+    placeholdersLabel: translate('templatePreview.placeholders'),
+    emptyLabel: translate('templatePreview.empty'),
+    testDataLabel: translate('templatePreview.testData'),
+    previewLabel: translate('templatePreview.preview'),
+  };
+
+  renderCallback() {
+    ensureMaterialSymbols(['data_object', 'sell', 'visibility']);
+
+    /** @type {HTMLTextAreaElement|null} */
+    let textarea = this.querySelector('.tpl-test-data');
+    if (textarea) {
+      textarea.value = this.$.testData;
+      textarea.addEventListener('input', () => {
+        this.$.testData = textarea.value;
+      });
+    }
+
+
+    this.sub('template', () => this._updatePreview());
+    this.sub('testData', () => this._updatePreview());
+  }
+
+  /**
+   * Extract placeholders, interpolate template, update chips + preview.
+   * @returns {void}
+   */
+  _updatePreview() {
+    let tpl = this.$.template;
+    let placeholders = extractPlaceholders(tpl);
+
+    this.$.noPlaceholders = placeholders.length === 0;
+
+
+    let data = {};
+    try {
+      data = JSON.parse(this.$.testData);
+    } catch {
+      this.$.previewText = '⚠️ Invalid JSON in test data';
+      this.$.placeholderChips = placeholders.map((name) => ({ name }));
+      this._applyChipColors([]);
+      return;
+    }
+
+
+    let resolved = [];
+    let chips = placeholders.map((name) => {
+      let val = this._resolvePath(data, name);
+      let isResolved = val !== undefined;
+      if (isResolved) resolved.push(name);
+      return { name };
+    });
+
+    this.$.placeholderChips = chips;
+
+
+    requestAnimationFrame(() => this._applyChipColors(resolved));
+
+
+    if (!tpl) {
+      this.$.previewText = '';
+      return;
+    }
+
+    let text = tpl.replace(/\{\{?([^{}]+)\}?\}/g, (match, key) => {
+      let trimmed = key.trim();
+      let value = this._resolvePath(data, trimmed);
+      if (value === undefined) return match;
+      if (typeof value === 'object') return JSON.stringify(value);
+      return String(value);
+    });
+
+    this.$.previewText = text;
+  }
+
+  /**
+   * Apply data-missing attribute to chip elements based on resolved status.
+   *
+   * @param {string[]} resolved - Names of resolved placeholders
+   */
+  _applyChipColors(resolved) {
+    let chipEls = this.querySelectorAll('.tpl-chip');
+    chipEls.forEach((el) => {
+      let name = el.textContent?.trim();
+      if (name && !resolved.includes(name)) {
+        el.setAttribute('data-missing', '');
+      } else {
+        el.removeAttribute('data-missing');
+      }
+    });
+  }
+
+  /**
+   * Resolve a dot-notation path in an object.
+   *
+   * @param {Object} obj - Data object
+   * @param {string} path - Dot-separated path
+   * @returns {*} Resolved value or undefined
+   */
+  _resolvePath(obj, path) {
+    return path.split('.').reduce((o, k) => {
+      if (o === null || o === undefined) return undefined;
+      return o[k];
+    }, obj);
+  }
+}
+
+TemplatePreview.template = template;
+TemplatePreview.rootStyles = styles;
+TemplatePreview.reg('template-preview');