symbiote-ui 0.3.0-alpha.4

package/node/PortItem/PortItem.css.js

@@ -0,0 +1,93 @@
+/**
+ * PortItem styles
+ * @module symbiote-node/node/PortItem.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export let styles = css`
+  port-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 12px;
+    min-height: 28px;
+
+    &[data-side='input'] {
+      flex-direction: row;
+
+      & .sn-socket {
+        margin-left: -22px;
+      }
+    }
+
+    &[data-side='output'] {
+      flex-direction: row-reverse;
+
+      & .sn-socket {
+        margin-right: -22px;
+      }
+    }
+
+    & .sn-socket {
+      position: relative;
+      width: calc(var(--sn-socket-size) + 8px);
+      height: calc(var(--sn-socket-size) + 8px);
+      border-radius: 50%;
+      background: transparent;
+      cursor: crosshair;
+      flex-shrink: 0;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::after {
+        content: '';
+        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);
+        transition:
+          transform 0.2s ease-out,
+          box-shadow 0.2s ease-out;
+        pointer-events: none;
+      }
+
+      &[data-socket-shape='square']::after {
+        border-radius: 2px;
+      }
+
+      &[data-socket-shape='diamond']::after {
+        border-radius: 1px;
+        transform: rotate(45deg) scale(0.85);
+      }
+
+      &[data-socket-shape='diamond']:hover::after {
+        transform: rotate(45deg) scale(1.1);
+      }
+
+      &[data-socket-shape='triangle']::after {
+        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;
+      }
+
+      &:hover::after {
+        transform: scale(1.3);
+        box-shadow: 0 0 8px var(--socket-color, var(--sn-node-accent));
+      }
+    }
+
+    & .port-label {
+      color: var(--sn-text-dim);
+      font-size: 12px;
+      white-space: nowrap;
+    }
+  }
+`;

package/node/PortItem/PortItem.js

@@ -0,0 +1,87 @@
+/**
+ * PortItem — itemize item for node ports (input/output)
+ *
+ * Rendered by GraphNode via itemize API.
+ * Registers socket with ConnectFlow for interactive connecting.
+ *
+ * @module symbiote-node/components/PortItem
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './PortItem.tpl.js';
+import { styles } from './PortItem.css.js';
+
+export class PortItem extends Symbiote {
+  key = '';
+  label = '';
+  socketColor = '';
+  socketName = 'any';
+  side = 'input';
+
+  renderCallback() {
+    this.sub('socketColor', (val) => {
+      if (val) this.style.setProperty('--socket-color', val);
+    });
+    this.sub('side', (val) => {
+      if (val) this.setAttribute('data-side', val);
+    });
+    this.sub('socketName', (val) => {
+      let shape = PortItem.SOCKET_SHAPES[val] || 'circle';
+      let socketEl = this.ref.socket;
+      if (socketEl) socketEl.setAttribute('data-socket-shape', shape);
+    });
+
+
+    this.#deferRegisterSocket(0);
+  }
+
+  /**
+   * Retry registration until graph-node._canvas is available
+   * @param {number} attempt
+   */
+  #deferRegisterSocket(attempt) {
+    if (attempt > 10) return;
+
+    let socketEl = this.ref.socket;
+    if (!socketEl) return;
+
+    let graphNode = this.closest('graph-node');
+    if (!graphNode || !graphNode._canvas) {
+      requestAnimationFrame(() => this.#deferRegisterSocket(attempt + 1));
+      return;
+    }
+
+    let connectFlow = graphNode._canvas.getConnectFlow();
+    if (!connectFlow) return;
+
+    let nodeId = graphNode.getAttribute('node-id');
+    let key = this.$.key;
+    let side = this.$.side;
+
+    /** @type {import('../interactions/ConnectFlow.js').SocketData} */
+    let socketData = { nodeId, key, side, element: socketEl };
+    socketEl._socketData = socketData;
+
+    connectFlow.registerSocket(socketEl, socketData);
+  }
+}
+
+PortItem.template = template;
+PortItem.rootStyles = styles;
+PortItem.reg('port-item');
+
+/** @type {Object<string, string>} - Socket type name to visual shape */
+PortItem.SOCKET_SHAPES = {
+  number: 'circle',
+  string: 'circle',
+  boolean: 'circle',
+  any: 'circle',
+  array: 'square',
+  object: 'square',
+  json: 'square',
+  exec: 'diamond',
+  execution: 'diamond',
+  trigger: 'diamond',
+  event: 'triangle',
+  signal: 'triangle',
+};

package/node/PortItem/PortItem.tpl.js

@@ -0,0 +1,10 @@
+/**
+ * PortItem template
+ * @module symbiote-node/node/PortItem.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export let template = html`
+  <div ref="socket" class="sn-socket" ${{ '@data-key': 'key' }}></div>
+  <span class="port-label">{{label}}</span>
+`;

package/package.json

@@ -0,0 +1,165 @@
+{
+  "name": "symbiote-ui",
+  "version": "0.3.0-alpha.4",
+  "type": "module",
+  "description": "Symbiote provider UI, Web Components, themes, manifests, schemas, graph layout helpers, WebMCP metadata, and SSR-safe UI contracts.",
+  "main": "index.js",
+  "customElements": "custom-elements.json",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./core": {
+      "import": "./core/index.js",
+      "default": "./core/index.js"
+    },
+    "./core/*": "./core/*",
+    "./graph": {
+      "import": "./graph/index.js",
+      "default": "./graph/index.js"
+    },
+    "./locale": {
+      "import": "./locale/index.js",
+      "default": "./locale/index.js"
+    },
+    "./manifest": {
+      "import": "./manifest/index.js",
+      "default": "./manifest/index.js"
+    },
+    "./manifest/*": "./manifest/*",
+    "./layout": {
+      "import": "./layout/index.js",
+      "default": "./layout/index.js"
+    },
+    "./xr": {
+      "import": "./xr/index.js",
+      "default": "./xr/index.js"
+    },
+    "./tokens/*": "./tokens/*",
+    "./rules/*": "./rules/*",
+    "./schemas/*": "./schemas/*",
+    "./custom-elements.json": "./custom-elements.json",
+    "./display/output-preview": "./display/output-preview.js",
+    "./display/highlight": "./display/highlight.js",
+    "./display/markdown-formatter": "./display/markdown-formatter.js",
+    "./display/format-utils": "./display/format-utils.js",
+    "./display/icons": "./display/icons.js",
+    "./display/network-approval-page": "./display/network-approval-page.js",
+    "./display/event-feed-adapter": "./display/event-feed-adapter.js",
+    "./themes/default-provider.js": "./themes/default-provider.js",
+    "./shapes/*": "./shapes/*",
+    "./plugins/*": "./plugins/*",
+    "./chat/chat-context.js": "./chat/chat-context.js",
+    "./package.json": "./package.json",
+    "./ui": {
+      "import": "./ui/index.js",
+      "default": "./ui/index.js"
+    },
+    "./webmcp": {
+      "import": "./webmcp.js",
+      "default": "./webmcp.js"
+    },
+    "./discover": {
+      "import": "./discover.js",
+      "default": "./discover.js"
+    }
+  },
+  "files": [
+    "index.js",
+    "custom-elements.json",
+    "core/",
+    "graph/",
+    "icons/",
+    "discover.js",
+    "cli.js",
+    "webmcp.js",
+    "manifest/",
+    "tokens/",
+    "rules/",
+    "schemas/",
+    "shapes/",
+    "themes/",
+    "plugins/",
+    "canvas/",
+    "node/",
+    "interactions/",
+    "layout/",
+    "locale/",
+    "xr/",
+    "navigation/",
+    "display/",
+    "effects/",
+    "control/",
+    "surface/",
+    "chat/",
+    "list/",
+    "tree/",
+    "toolbar/",
+    "inspector/",
+    "palette/",
+    "menu/",
+    "ui/",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "**/*.css.js",
+    "**/*.tpl.js",
+    "core/base-path.js",
+    "ui/index.js",
+    "canvas/**/*.js",
+    "node/**/*.js",
+    "layout/**/*.js",
+    "xr/**/*.js",
+    "display/**/*.js",
+    "effects/**/*.js",
+    "control/**/*.js",
+    "surface/**/*.js",
+    "chat/**/*.js",
+    "list/**/*.js",
+    "tree/**/*.js",
+    "navigation/**/*.js",
+    "toolbar/**/*.js",
+    "inspector/**/*.js",
+    "palette/**/*.js",
+    "menu/**/*.js"
+  ],
+  "bin": {
+    "symbiote-ui": "cli.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "node --test ../../tests/*.test.js"
+  },
+  "keywords": [
+    "node-editor",
+    "graph-editor",
+    "visual-programming",
+    "node-graph",
+    "symbiote",
+    "web-components",
+    "data-flow",
+    "dag",
+    "webmcp",
+    "ssr"
+  ],
+  "dependencies": {
+    "symbiote-engine": "0.3.0-alpha.4"
+  },
+  "peerDependencies": {
+    "@symbiotejs/symbiote": "3.8.0-webmcp.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RND-PRO/symbiote-node.git"
+  },
+  "author": "RND-PRO <nicothin@gmail.com>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/palette/PaletteBrowser/PaletteBrowser.css.js

@@ -0,0 +1,143 @@
+/**
+ * PaletteBrowser styles
+ * @module symbiote-node/palette/PaletteBrowser.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export let styles = css`
+  palette-browser {
+    display: flex;
+    flex-direction: column;
+    width: 260px;
+    height: 100%;
+    background: var(--sn-ctx-bg);
+    border-left: 1px solid var(--sn-node-border);
+    font-family: var(--sn-font);
+    font-size: 13px;
+    color: var(--sn-text);
+    overflow: hidden;
+    user-select: none;
+  }
+
+  .pal-header {
+    padding: 10px 14px;
+    font-weight: 600;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--sn-text-dim);
+    border-bottom: 1px solid var(--sn-node-border);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    & .material-symbols-outlined {
+      font-size: 16px;
+    }
+  }
+
+  .pal-search {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--sn-node-border);
+
+    & input {
+      width: 100%;
+      padding: 6px 10px;
+      background: var(--sn-field-control-bg);
+      border: 1px solid var(--sn-node-border);
+      border-radius: 4px;
+      color: var(--sn-text);
+      font-family: inherit;
+      font-size: 12px;
+      outline: none;
+      transition: border-color 0.2s ease-out;
+
+      &:focus {
+        border-color: var(--sn-node-selected);
+      }
+
+      &::placeholder {
+        color: var(--sn-text-dim);
+      }
+    }
+  }
+
+  .pal-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px 0;
+  }
+
+  pal-category {
+    & .pal-cat-header {
+      padding: 6px 14px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--sn-text-dim);
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      & .material-symbols-outlined {
+        font-size: 14px;
+        transition: transform 0.2s ease-out;
+      }
+
+      &:hover {
+        color: var(--sn-text);
+      }
+    }
+
+    &[data-collapsed] .pal-cat-items {
+      display: none;
+    }
+
+    &[data-collapsed] .pal-cat-header .material-symbols-outlined {
+      transform: rotate(-90deg);
+    }
+  }
+
+  pal-item {
+    padding: 6px 14px 6px 28px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: grab;
+    border-radius: 4px;
+    margin: 1px 6px;
+    transition: background 0.15s ease-out;
+
+    &:hover {
+      background: var(--sn-ctx-hover);
+    }
+
+    &:active {
+      cursor: grabbing;
+      background: var(--sn-ctx-hover);
+    }
+
+    & .pal-item-icon {
+      font-size: 16px;
+      width: 20px;
+      text-align: center;
+      color: var(--item-color, var(--sn-text-dim));
+    }
+
+    & .pal-item-label {
+      flex: 1;
+      font-size: 12px;
+    }
+
+    & .pal-item-desc {
+      font-size: 10px;
+      color: var(--sn-text-dim);
+      max-width: 100px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+`;

package/palette/PaletteBrowser/PaletteBrowser.js

@@ -0,0 +1,152 @@
+/**
+ * PaletteBrowser — Component library browser panel
+ *
+ * Displays categorized node types that can be dragged onto the canvas.
+ * Similar to TouchDesigner's Component Palette concept.
+ * Shows grouped node templates with icons, descriptions, and drag support.
+ *
+ * @module symbiote-node/palette/PaletteBrowser
+ */
+
+import Symbiote, { html } from '@symbiotejs/symbiote';
+import { ensureMaterialSymbols } from '../../icons/MaterialSymbols.js';
+import { template } from './PaletteBrowser.tpl.js';
+import { styles } from './PaletteBrowser.css.js';
+import { translate } from '../../locale/index.js';
+
+class PalItem extends Symbiote {
+  init$ = {
+    name: '',
+    icon: 'radio_button_checked',
+    desc: '',
+    type: '',
+    color: '',
+    category: '',
+    isHeader: false,
+  };
+
+  renderCallback() {
+    ensureMaterialSymbols([this.$.icon]);
+    this.sub('icon', (icon) => ensureMaterialSymbols([icon]));
+  }
+}
+
+PalItem.template = html`
+  <span class="pal-item-icon material-symbols-outlined" ${{ textContent: 'icon' }}></span>
+  <span class="pal-item-label" ${{ textContent: 'name' }}></span>
+  <span class="pal-item-desc" ${{ textContent: 'desc' }}></span>
+`;
+
+PalItem.reg('pal-item');
+
+class PalCategory extends Symbiote {
+  init$ = {
+    category: '',
+    catItems: [],
+  };
+
+  onToggle() {
+    this.toggleAttribute('data-collapsed');
+  }
+
+  renderCallback() {
+    ensureMaterialSymbols(['expand_more']);
+  }
+}
+
+PalCategory.template = html`
+  <div class="pal-cat-header" ${{ onclick: 'onToggle' }}>
+    <span class="material-symbols-outlined">expand_more</span>
+    <span ${{ textContent: 'category' }}></span>
+  </div>
+  <div class="pal-cat-items" ${{ itemize: 'catItems', 'item-tag': 'pal-item' }}></div>
+`;
+
+PalCategory.reg('pal-category');
+
+export class PaletteBrowser extends Symbiote {
+  init$ = {
+    categories: [],
+    title: translate('palette.title'),
+    searchPlaceholder: translate('palette.searchPlaceholder'),
+  };
+
+  /** @type {Array<{ category: string, color: string, items: Array<{ name: string, icon: string, type: string, desc: string, factory: function }> }>} */
+  #rawCategories = [];
+
+  /** @type {function|null} */
+  #onSelect = null;
+
+  /** @type {Map<string, function>} */
+  #factoryMap = new Map();
+
+  renderCallback() {
+    ensureMaterialSymbols(['widgets']);
+  }
+
+  /**
+   * Register palette categories and items
+   * @param {Array<{ category: string, color: string, items: Array<{ name: string, icon: string, type: string, desc: string, factory: function }> }>} categories
+   */
+  setCategories(categories) {
+    this.#rawCategories = categories;
+    this.#syncList();
+  }
+
+  /**
+   * Set callback for item selection
+   * @param {function} callback - (factory, name) => void
+   */
+  onSelect(callback) {
+    this.#onSelect = callback;
+  }
+
+  #syncList(filter = '') {
+    let lowerFilter = filter.toLowerCase();
+    this.#factoryMap.clear();
+    ensureMaterialSymbols(this.#rawCategories.flatMap((cat) => cat.items.map((it) => it.icon)));
+
+    this.$.categories = this.#rawCategories
+      .map((cat) => {
+        let filtered = lowerFilter
+          ? cat.items.filter(
+              (it) =>
+                it.name.toLowerCase().includes(lowerFilter) ||
+                it.desc.toLowerCase().includes(lowerFilter)
+            )
+          : cat.items;
+
+        if (filtered.length === 0) return null;
+
+        let catItems = filtered.map((it) => {
+          this.#factoryMap.set(it.name, it.factory);
+          return {
+            name: it.name,
+            icon: it.icon,
+            desc: it.desc,
+            type: it.type,
+            color: cat.color,
+          };
+        });
+
+        return { category: cat.category, catItems };
+      })
+      .filter(Boolean);
+  }
+
+  onSearchInput(e) {
+    this.#syncList(e.target.value);
+  }
+
+  onItemClick(e) {
+    let item = e.target.closest('pal-item');
+    if (!item) return;
+    let name = item.$.name;
+    let factory = this.#factoryMap.get(name);
+    if (this.#onSelect && factory) this.#onSelect(factory, name);
+  }
+}
+
+PaletteBrowser.template = template;
+PaletteBrowser.rootStyles = styles;
+PaletteBrowser.reg('palette-browser');

package/palette/PaletteBrowser/PaletteBrowser.tpl.js

@@ -0,0 +1,23 @@
+/**
+ * PaletteBrowser template
+ * @module symbiote-node/palette/PaletteBrowser.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export let template = html`
+  <div class="pal-header">
+    <span class="material-symbols-outlined">widgets</span>
+    <span ${{ textContent: 'title' }}></span>
+  </div>
+  <div class="pal-search">
+    <input
+      ref="palSearch"
+      type="text"
+      ${{ placeholder: 'searchPlaceholder', oninput: 'onSearchInput' }}
+    />
+  </div>
+  <div
+    class="pal-list"
+    ${{ itemize: 'categories', 'item-tag': 'pal-category', onclick: 'onItemClick' }}
+  ></div>
+`;