symbiote-ui 0.3.0-alpha.4

package/node/GraphNode/GraphNode.js

@@ -0,0 +1,173 @@
+/**
+ * GraphNode — visual node card component
+ *
+ * Renders node header, input/output ports with sockets,
+ * and embedded controls. Receives data via _nodeData property.
+ *
+ * @module symbiote-node/components/GraphNode
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { ensureMaterialSymbols } from '../../icons/MaterialSymbols.js';
+import { template } from './GraphNode.tpl.js';
+import { styles } from './GraphNode.css.js';
+import '../PortItem/PortItem.js';
+import '../CtrlItem/CtrlItem.js';
+
+/** @type {Object<string, string>} */
+const CATEGORY_ICONS = {
+  server: 'dns',
+  instance: 'memory',
+  control: 'tune',
+  data: 'database',
+
+  directory: 'folder',
+  file: 'description',
+  function: 'functions',
+  class: 'class',
+  module: 'package_2',
+  default: 'radio_button_checked',
+};
+
+function setOptionalAttribute(el, name, value) {
+  if (value) {
+    el.setAttribute(name, String(value));
+  } else {
+    el.removeAttribute(name);
+  }
+}
+
+function normalizeNodeTone(value) {
+  let tone = String(value || '').trim().toLowerCase();
+  if (tone === 'inverted') return 'inverse';
+  return tone;
+}
+
+export class GraphNode extends Symbiote {
+  destructionDelay = 200;
+
+  init$ = {
+    '@node-label': '',
+    '@node-category': 'default',
+    nodeLabel: '',
+    nodeIcon: 'radio_button_checked',
+    mediaSrc: '',
+    mediaAlt: '',
+    summary: '',
+    href: '',
+    linkLabel: 'Open',
+    linkIcon: 'arrow_forward',
+    hasItems: false,
+    itemsList: [],
+    inputPorts: [],
+    outputPorts: [],
+    controlsList: [],
+  };
+
+  renderCallback() {
+    ensureMaterialSymbols(Object.values(CATEGORY_ICONS));
+
+    this.sub('@node-label', (val) => {
+      this.$.nodeLabel = val || '';
+    });
+    this.sub('@node-category', (val) => {
+      this.$.nodeIcon = CATEGORY_ICONS[val] || CATEGORY_ICONS.default;
+      ensureMaterialSymbols([this.$.nodeIcon]);
+    });
+
+
+    if (this._nodeData) {
+      this.#populateFromNodeData(this._nodeData);
+    }
+  }
+
+  #syncMedia() {
+    let src = this.$.mediaSrc;
+    if (src && this.ref.mediaImage) {
+      this.ref.mediaImage.src = src;
+      this.ref.mediaImage.alt = this.$.mediaAlt || '';
+      this.ref.mediaImage.draggable = false;
+    }
+    this.toggleAttribute('data-has-media', Boolean(src));
+  }
+
+  #syncLink() {
+    let href = this.$.href;
+    if (!this.ref.contentLink) return;
+    if (!href) {
+      this.ref.contentLink.removeAttribute('href');
+      return;
+    }
+    this.ref.contentLink.href = href;
+    if (href.startsWith('http://') || href.startsWith('https://')) {
+      this.ref.contentLink.target = '_blank';
+      this.ref.contentLink.rel = 'noopener noreferrer';
+      this.$.linkIcon = 'open_in_new';
+    } else {
+      this.ref.contentLink.removeAttribute('target');
+      this.ref.contentLink.removeAttribute('rel');
+      this.$.linkIcon = 'arrow_forward';
+    }
+    ensureMaterialSymbols([this.$.linkIcon]);
+  }
+
+  /**
+   * Populate ports and controls from Node instance
+   * @param {import('../core/Node.js').Node} node
+   */
+  #populateFromNodeData(node) {
+    let params = node.params || {};
+    let contentHidden = Boolean(params.hideContent || params.contentHidden);
+    this.toggleAttribute('data-header-hidden', Boolean(params.hideHeader || params.headerHidden));
+    this.toggleAttribute('data-content-hidden', contentHidden);
+    setOptionalAttribute(this, 'data-node-tone', normalizeNodeTone(params.tone || params.nodeTone));
+    this.set$({
+      nodeIcon: node.icon || CATEGORY_ICONS[node.category] || CATEGORY_ICONS.default,
+      mediaSrc: params.media || params.image || params.avatar || '',
+      mediaAlt: params.mediaAlt || params.imageAlt || params.avatarAlt || node.label || '',
+      summary: contentHidden ? '' : params.summary || '',
+      href: params.href || '',
+      linkLabel: params.linkLabel || 'Open',
+      hasItems: !contentHidden && Array.isArray(params.items) && params.items.length > 0,
+      itemsList: !contentHidden && Array.isArray(params.items)
+        ? params.items.map((item) => ({
+            href: item.href || '#',
+            target: item.external ? '_blank' : '',
+            rel: item.external ? 'noopener noreferrer' : '',
+            kicker: item.kicker || '',
+            title: item.title || '',
+            summary: item.summary || '',
+          }))
+        : [],
+      inputPorts: Object.entries(node.inputs).map(([key, input]) => ({
+        key,
+        label: input.label || key,
+        socketColor: input.socket?.color || 'var(--sn-node-accent)',
+        socketName: input.socket?.name || 'any',
+        side: 'input',
+      })),
+      outputPorts: Object.entries(node.outputs).map(([key, output]) => ({
+        key,
+        label: output.label || key,
+        socketColor: output.socket?.color || 'var(--sn-node-accent)',
+        socketName: output.socket?.name || 'any',
+        side: 'output',
+      })),
+      controlsList: Object.entries(node.controls).map(([key, ctrl]) => ({
+        key,
+        label: key,
+        inputType: ctrl.type || 'text',
+        value: ctrl.value !== undefined ? String(ctrl.value) : '',
+        isReadonly: ctrl.readonly || false,
+      })),
+    });
+    ensureMaterialSymbols([this.$.nodeIcon]);
+    this.#syncMedia();
+    this.#syncLink();
+  }
+}
+
+GraphNode.template = template;
+GraphNode.rootStyles = styles;
+
+GraphNode.reg('graph-node');

package/node/GraphNode/GraphNode.tpl.js

@@ -0,0 +1,33 @@
+import { html } from '@symbiotejs/symbiote';
+
+export let template = html`
+  <div class="sn-node-header">
+    <span class="sn-node-icon material-symbols-outlined">{{nodeIcon}}</span>
+    <span class="sn-node-label">{{nodeLabel}}</span>
+  </div>
+  <div class="sn-node-media" ${{ '@hidden': '!mediaSrc' }}>
+    <img ref="mediaImage" class="sn-node-media-img" alt="{{mediaAlt}}">
+  </div>
+  <div class="sn-node-body">
+    <div class="inputs" ${{ itemize: 'inputPorts', 'item-tag': 'port-item' }}></div>
+    <div class="sn-node-content" ${{ '@hidden': '!summary' }}>
+      <p class="sn-node-summary">{{summary}}</p>
+      <a ref="contentLink" class="sn-node-link" ${{ '@hidden': '!href' }}>
+        <span>{{linkLabel}}</span>
+        <span class="material-symbols-outlined">{{linkIcon}}</span>
+      </a>
+    </div>
+    <div class="sn-node-items" itemize="itemsList" ${{ '@hidden': '!hasItems' }}>
+      <template>
+        <a class="sn-node-item" ${{ '@href': 'href', '@target': 'target', '@rel': 'rel' }}>
+          <span class="sn-node-item-kicker">{{kicker}}</span>
+          <span class="sn-node-item-title">{{title}}</span>
+          <span class="sn-node-item-summary">{{summary}}</span>
+        </a>
+      </template>
+    </div>
+    <div class="controls" ${{ itemize: 'controlsList', 'item-tag': 'ctrl-item' }}></div>
+    <div class="outputs" ${{ itemize: 'outputPorts', 'item-tag': 'port-item' }}></div>
+  </div>
+  <div ref="previewArea" class="sn-preview" hidden></div>
+`;

package/node/NodeCallout/NodeCallout.css.js

@@ -0,0 +1,91 @@
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+  node-callout {
+    position: fixed;
+    inset: 0 auto auto 0;
+    z-index: var(--sn-node-callout-z, var(--sn-overlay-z-base, 20000));
+    display: block;
+    inline-size: max-content;
+    max-inline-size: min(var(--sn-node-callout-max-width, 520px), calc(100vw - 32px));
+    pointer-events: none;
+    contain: layout style;
+
+    &[hidden] {
+      display: none !important;
+    }
+
+    &[trigger='hover']:not([data-open]) {
+      visibility: hidden;
+    }
+
+    .sn-node-callout {
+      position: relative;
+      box-sizing: border-box;
+      max-inline-size: inherit;
+      padding: var(--sn-node-callout-padding, 10px 12px);
+      border: 1px solid var(--sn-node-callout-border, var(--sn-node-border));
+      border-radius: var(--sn-node-callout-radius, var(--sn-node-radius));
+      background: var(--sn-node-callout-bg, var(--sn-node-bg));
+      box-shadow: var(--sn-node-callout-shadow, var(--sn-shadow-lg));
+      color: var(--sn-node-callout-color, var(--sn-text));
+      font-family: var(--sn-font);
+      font-size: var(--sn-node-callout-font-size, 12px);
+      font-weight: var(--sn-node-callout-font-weight, 700);
+      line-height: var(--sn-node-callout-line-height, 1.35);
+      text-align: center;
+      text-wrap: balance;
+      white-space: normal;
+      overflow-wrap: anywhere;
+      opacity: 1;
+      transform: translateY(0);
+      transition:
+        opacity 120ms ease,
+        transform 120ms ease;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    &[trigger='hover']:not([data-open]) .sn-node-callout {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+
+    .sn-node-callout::after {
+      content: '';
+      position: absolute;
+      inline-size: var(--sn-node-callout-arrow-size, 10px);
+      block-size: var(--sn-node-callout-arrow-size, 10px);
+      border-inline-end: 1px solid var(--sn-node-callout-border, var(--sn-node-border));
+      border-block-end: 1px solid var(--sn-node-callout-border, var(--sn-node-border));
+      background: var(--sn-node-callout-bg, var(--sn-node-bg));
+      transform: rotate(45deg);
+    }
+
+    &[placement='top'] .sn-node-callout::after {
+      inset-block-end: calc(var(--sn-node-callout-arrow-size, 10px) / -2 - 1px);
+      inset-inline-start: calc(50% - var(--sn-node-callout-arrow-size, 10px) / 2);
+    }
+
+    &[placement='bottom'] .sn-node-callout::after {
+      inset-block-start: calc(var(--sn-node-callout-arrow-size, 10px) / -2 - 1px);
+      inset-inline-start: calc(50% - var(--sn-node-callout-arrow-size, 10px) / 2);
+      transform: rotate(225deg);
+    }
+
+    &[placement='left'] .sn-node-callout::after {
+      inset-inline-end: calc(var(--sn-node-callout-arrow-size, 10px) / -2 - 1px);
+      inset-block-start: calc(50% - var(--sn-node-callout-arrow-size, 10px) / 2);
+      transform: rotate(-45deg);
+    }
+
+    &[placement='right'] .sn-node-callout::after {
+      inset-inline-start: calc(var(--sn-node-callout-arrow-size, 10px) / -2 - 1px);
+      inset-block-start: calc(50% - var(--sn-node-callout-arrow-size, 10px) / 2);
+      transform: rotate(135deg);
+    }
+
+    .sn-node-callout-text[hidden] {
+      display: none;
+    }
+  }
+`;

package/node/NodeCallout/NodeCallout.js

@@ -0,0 +1,281 @@
+import Symbiote from '@symbiotejs/symbiote';
+import { slotProcessor } from '@symbiotejs/symbiote/core/slotProcessor.js';
+import { bringOverlayToFront } from '../../ui/overlay-stack.js';
+import { template } from './NodeCallout.tpl.js';
+import { styles } from './NodeCallout.css.js';
+
+/**
+ * Floating label anchored to a graph node or any DOM element.
+ */
+export class NodeCallout extends Symbiote {
+  static observedAttributes = ['anchor-node-id', 'anchor-selector', 'placement', 'offset', 'text', 'trigger', 'hidden'];
+
+  #box = null;
+  #text = null;
+  #anchorElement = null;
+  #resizeObserver = null;
+  #mutationObserver = null;
+  #observedAnchor = null;
+  #hoverActive = false;
+  #raf = 0;
+  #lastLayout = '';
+  #isMounted = false;
+
+  constructor() {
+    super();
+    this.templateProcessors.add(slotProcessor);
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+    if (this.#isMounted) return;
+    this.#isMounted = true;
+
+    if (!this.hasAttribute('placement')) this.setAttribute('placement', 'top');
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'tooltip');
+
+    this.#box = this.querySelector('.sn-node-callout');
+    this.#text = this.querySelector('.sn-node-callout-text');
+    this.#syncText();
+
+    if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+    if (typeof ResizeObserver !== 'undefined') {
+      this.#resizeObserver = new ResizeObserver(() => this.requestUpdate());
+    }
+    if (typeof MutationObserver !== 'undefined') {
+      this.#mutationObserver = new MutationObserver(() => this.requestUpdate());
+      this.#mutationObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['style', 'class', 'hidden'],
+        childList: true,
+        subtree: true,
+      });
+    }
+
+    window.addEventListener('resize', this.#onWindowChange, { passive: true });
+    window.addEventListener('scroll', this.#onWindowChange, { passive: true, capture: true });
+    this.requestUpdate();
+    if (typeof requestAnimationFrame !== 'undefined') {
+      this.#track();
+    }
+  }
+
+  disconnectedCallback() {
+    this.#isMounted = false;
+    this.#clearAnchorObservation();
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = null;
+
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('resize', this.#onWindowChange);
+      window.removeEventListener('scroll', this.#onWindowChange, { capture: true });
+    }
+
+    if (typeof cancelAnimationFrame !== 'undefined') {
+      cancelAnimationFrame(this.#raf);
+    }
+    this.#raf = 0;
+    super.disconnectedCallback?.();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === 'text') this.#syncText();
+    if (name === 'trigger' && newValue !== 'hover') {
+      this.#hoverActive = false;
+    }
+    this.requestUpdate();
+  }
+
+  show() {
+    this.hidden = false;
+    bringOverlayToFront(this);
+    this.requestUpdate();
+  }
+
+  hide() {
+    this.hidden = true;
+  }
+
+  get anchorElement() {
+    return this.#anchorElement;
+  }
+
+  set anchorElement(value) {
+    this.#anchorElement = typeof Element !== 'undefined' && value instanceof Element ? value : null;
+    this.requestUpdate();
+  }
+
+  requestUpdate() {
+    this.#render();
+  }
+
+  #onWindowChange = () => this.requestUpdate();
+
+  #onAnchorEnter = () => {
+    if (this.#trigger() !== 'hover') return;
+    this.#hoverActive = true;
+    bringOverlayToFront(this);
+    this.requestUpdate();
+  };
+
+  #onAnchorLeave = (event) => {
+    if (this.#trigger() !== 'hover') return;
+    if (event?.relatedTarget && this.#observedAnchor?.contains(event.relatedTarget)) return;
+    this.#hoverActive = false;
+    this.requestUpdate();
+  };
+
+  #track() {
+    if (typeof requestAnimationFrame === 'undefined') return;
+    this.#render();
+    this.#raf = requestAnimationFrame(() => this.#track());
+  }
+
+  #syncText() {
+    this.#text ||= this.querySelector('.sn-node-callout-text');
+    if (!this.#text) return;
+    const text = this.getAttribute('text') || '';
+    this.#text.textContent = text;
+    this.#text.hidden = !text;
+  }
+
+  #render() {
+    if (!this.isConnected || this.hidden) return;
+    this.#box ||= this.querySelector('.sn-node-callout');
+    const anchor = this.#anchor();
+    if (!anchor || !this.#box) {
+      this.#clearAnchorObservation();
+      this.style.visibility = 'hidden';
+      this.#lastLayout = '';
+      return;
+    }
+
+    this.#observeAnchor(anchor);
+    const isOpen = this.#isOpen();
+    const wasOpen = this.hasAttribute('data-open');
+    this.toggleAttribute('data-open', isOpen);
+    this.style.visibility = isOpen ? '' : 'hidden';
+    if (isOpen && !wasOpen) bringOverlayToFront(this);
+
+    const anchorRect = anchor.getBoundingClientRect();
+    const boxRect = this.#box.getBoundingClientRect();
+    const placement = this.#placement();
+    const offset = this.#offset();
+    const padding = 12;
+    let x = 0;
+    let y = 0;
+
+    if (placement === 'bottom') {
+      x = anchorRect.left + anchorRect.width / 2 - boxRect.width / 2;
+      y = anchorRect.bottom + offset;
+    } else if (placement === 'left') {
+      x = anchorRect.left - boxRect.width - offset;
+      y = anchorRect.top + anchorRect.height / 2 - boxRect.height / 2;
+    } else if (placement === 'right') {
+      x = anchorRect.right + offset;
+      y = anchorRect.top + anchorRect.height / 2 - boxRect.height / 2;
+    } else {
+      x = anchorRect.left + anchorRect.width / 2 - boxRect.width / 2;
+      y = anchorRect.top - boxRect.height - offset;
+    }
+
+    x = Math.min(Math.max(padding, x), window.innerWidth - boxRect.width - padding);
+    y = Math.min(Math.max(padding, y), window.innerHeight - boxRect.height - padding);
+
+    const nextLayout = `${Math.round(x)}:${Math.round(y)}:${placement}`;
+    if (nextLayout === this.#lastLayout) return;
+    this.#lastLayout = nextLayout;
+    this.style.transform = `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
+  }
+
+  #observeAnchor(anchor) {
+    if (!this.#resizeObserver || this.#observedAnchor === anchor) return;
+    this.#clearAnchorObservation();
+    this.#resizeObserver.observe(anchor);
+    anchor.addEventListener('mouseenter', this.#onAnchorEnter);
+    anchor.addEventListener('mouseover', this.#onAnchorEnter);
+    anchor.addEventListener('pointerenter', this.#onAnchorEnter);
+    anchor.addEventListener('pointerover', this.#onAnchorEnter);
+    anchor.addEventListener('mouseleave', this.#onAnchorLeave);
+    anchor.addEventListener('mouseout', this.#onAnchorLeave);
+    anchor.addEventListener('pointerleave', this.#onAnchorLeave);
+    anchor.addEventListener('pointerout', this.#onAnchorLeave);
+    this.#observedAnchor = anchor;
+  }
+
+  #clearAnchorObservation() {
+    if (this.#resizeObserver && this.#observedAnchor) {
+      this.#resizeObserver.unobserve(this.#observedAnchor);
+    }
+    this.#observedAnchor?.removeEventListener('mouseenter', this.#onAnchorEnter);
+    this.#observedAnchor?.removeEventListener('mouseover', this.#onAnchorEnter);
+    this.#observedAnchor?.removeEventListener('pointerenter', this.#onAnchorEnter);
+    this.#observedAnchor?.removeEventListener('pointerover', this.#onAnchorEnter);
+    this.#observedAnchor?.removeEventListener('mouseleave', this.#onAnchorLeave);
+    this.#observedAnchor?.removeEventListener('mouseout', this.#onAnchorLeave);
+    this.#observedAnchor?.removeEventListener('pointerleave', this.#onAnchorLeave);
+    this.#observedAnchor?.removeEventListener('pointerout', this.#onAnchorLeave);
+    this.#observedAnchor = null;
+    this.#hoverActive = false;
+  }
+
+  #anchor() {
+    if (this.#anchorElement?.isConnected) {
+      this.toggleAttribute('data-anchor-selector-invalid', false);
+      return this.#anchorElement;
+    }
+
+    const nodeId = this.getAttribute('anchor-node-id') || '';
+    if (nodeId) {
+      for (const node of document.querySelectorAll('graph-node[node-id]')) {
+        if (node.getAttribute('node-id') === nodeId) {
+          this.toggleAttribute('data-anchor-selector-invalid', false);
+          return node;
+        }
+      }
+      this.toggleAttribute('data-anchor-selector-invalid', false);
+      return null;
+    }
+
+    const selector = this.getAttribute('anchor-selector') || '';
+    if (!selector) {
+      this.toggleAttribute('data-anchor-selector-invalid', false);
+      return null;
+    }
+    try {
+      const anchor = document.querySelector(selector);
+      this.toggleAttribute('data-anchor-selector-invalid', false);
+      return anchor;
+    } catch {
+      this.toggleAttribute('data-anchor-selector-invalid', true);
+      return null;
+    }
+  }
+
+  #placement() {
+    const placement = this.getAttribute('placement') || 'top';
+    return ['top', 'bottom', 'left', 'right'].includes(placement) ? placement : 'top';
+  }
+
+  #offset() {
+    const value = Number.parseFloat(this.getAttribute('offset') || '');
+    return Number.isFinite(value) ? value : 14;
+  }
+
+  #trigger() {
+    const trigger = this.getAttribute('trigger') || 'always';
+    return trigger === 'hover' ? 'hover' : 'always';
+  }
+
+  #isOpen() {
+    return this.#trigger() !== 'hover' || this.#hoverActive;
+  }
+}
+
+NodeCallout.template = template;
+NodeCallout.rootStyles = styles;
+NodeCallout.reg('node-callout');

package/node/NodeCallout/NodeCallout.tpl.js

@@ -0,0 +1,8 @@
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+  <div class="sn-node-callout" part="box">
+    <span class="sn-node-callout-text" part="text" hidden></span>
+    <slot></slot>
+  </div>
+`;

package/node/NodeSocket/NodeSocket.css.js

@@ -0,0 +1,68 @@
+/**
+ * NodeSocket styles
+ * @module symbiote-node/node/NodeSocket.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export let styles = css`
+  node-socket {
+    display: block;
+    width: var(--sn-socket-size);
+    height: var(--sn-socket-size);
+    border-radius: 50%;
+    background: var(--socket-color, var(--sn-node-accent));
+    border: var(--sn-socket-border-width) solid var(--sn-node-bg);
+    cursor: crosshair;
+    flex-shrink: 0;
+    transition:
+      transform 0.2s ease-out,
+      box-shadow 0.2s ease-out;
+    z-index: 10;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 44px;
+      height: 44px;
+      transform: translate(-50%, -50%);
+    }
+
+    &:hover {
+      transform: scale(1.3);
+      box-shadow: 0 0 8px var(--socket-color, var(--sn-node-accent));
+    }
+
+    &[data-socket-shape='square'] {
+      border-radius: 2px;
+    }
+
+    &[data-socket-shape='diamond'] {
+      border-radius: 1px;
+      transform: rotate(45deg) scale(0.85);
+
+      &:hover {
+        transform: rotate(45deg) scale(1.1);
+      }
+    }
+
+    &[data-socket-shape='triangle'] {
+      border-radius: 0;
+      background: transparent;
+      width: 0;
+      height: 0;
+      border: calc(var(--sn-socket-size) / 2) solid transparent;
+      border-left: calc(var(--sn-socket-size) - var(--sn-socket-border-width)) solid
+        var(--socket-color, var(--sn-node-accent));
+      border-right: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    node-socket {
+      transition: none;
+    }
+  }
+`;

package/node/NodeSocket/NodeSocket.js

@@ -0,0 +1,26 @@
+/**
+ * NodeSocket — connection endpoint circle
+ *
+ * Visual socket indicator for node ports.
+ * Changes color via socket data attribute.
+ *
+ * @module symbiote-node/components/NodeSocket
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './NodeSocket.tpl.js';
+import { styles } from './NodeSocket.css.js';
+
+export class NodeSocket extends Symbiote {
+  renderCallback() {
+    this.sub('@data-socket-color', (val) => {
+      if (val) {
+        this.style.setProperty('--socket-color', val);
+      }
+    });
+  }
+}
+
+NodeSocket.template = template;
+NodeSocket.rootStyles = styles;
+NodeSocket.reg('node-socket');

package/node/NodeSocket/NodeSocket.tpl.js

@@ -0,0 +1,7 @@
+/**
+ * NodeSocket template
+ * @module symbiote-node/node/NodeSocket.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export let template = html`<slot></slot>`;