symbiote-ui 0.3.0-alpha.4

package/discover.js

@@ -0,0 +1,240 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import {
+  getAllSocketTypes,
+  getNodeMenu,
+  listDrivers,
+  listPacks,
+  loadHandlers,
+} from 'symbiote-engine';
+
+import { HTML_IN_CANVAS_RENDERER } from './canvas/html-in-canvas.js';
+import {
+  getTheme,
+  getThemeControls,
+  getThemeRecipe,
+  getThemeTokens,
+  getUiSchema,
+  listComponents,
+  listGraphSchemas,
+  listProjectSchemas,
+  listRules,
+  listThemeElementGroups,
+  listThemeRuleBlocks,
+  listTokenFiles,
+  RULESETS,
+  THEME_NAMES,
+  UI_SCHEMA_VERSIONS,
+} from './manifest/index.js';
+import { DEFAULT_LOCALE, LOCALE_CATALOG_KEYS, SUPPORTED_LOCALES } from './locale/index.js';
+import { WEBXR_RENDERER, XR_THREE_WEBXR_ADAPTER } from './xr/index.js';
+
+let __dirname = dirname(fileURLToPath(import.meta.url));
+let PKG_PATH = resolve(__dirname, 'package.json');
+let PKG = JSON.parse(readFileSync(PKG_PATH, 'utf-8'));
+
+const EXPORT_ENTRYPOINTS = [
+  {
+    specifier: 'symbiote-ui',
+    kind: 'node-safe',
+    description: 'Node-safe provider graph/core API, themes, shapes, plugins, and pure UI utilities.',
+  },
+  {
+    specifier: 'symbiote-ui/core',
+    kind: 'node-safe',
+    description: 'Core graph editor data model primitives.',
+  },
+  {
+    specifier: 'symbiote-engine',
+    kind: 'node-safe',
+    description: 'Server-side graph runtime, registry, executor, and serialization helpers.',
+  },
+  {
+    specifier: 'symbiote-ui/graph',
+    kind: 'node-safe',
+    description: 'Universal graph model normalization for UI, workflow, automation, and media projects.',
+  },
+  {
+    specifier: 'symbiote-ui/locale',
+    kind: 'node-safe',
+    description: 'Node-safe localization catalogs and translation helpers for built-in UI strings.',
+  },
+  {
+    specifier: 'symbiote-ui/manifest',
+    kind: 'node-safe',
+    description: 'Agent-readable component, theme, token, rule, and schema catalogs.',
+  },
+  {
+    specifier: 'symbiote-ui/layout',
+    kind: 'ssr-entry-safe',
+    description: 'Layout tree, section registry, and router helpers without browser components.',
+  },
+  {
+    specifier: 'symbiote-ui/xr',
+    kind: 'ssr-entry-safe',
+    description: 'WebXR capability, spatial layout projection, and XR pointer helpers without renderer lock-in.',
+  },
+  {
+    specifier: 'symbiote-ui/ui',
+    kind: 'browser',
+    description: 'Browser Web Components, layout modules, themes, router helpers, chat, navigation, and display modules.',
+  },
+  {
+    specifier: 'symbiote-ui/webmcp',
+    kind: 'browser',
+    description: 'Explicit WebMCP ToolDescriptor helpers and provider metadata integration.',
+  },
+  {
+    specifier: 'symbiote-ui/custom-elements.json',
+    kind: 'metadata',
+    description: 'Custom Elements manifest for editor/docs/design-system tooling.',
+  },
+  {
+    specifier: 'symbiote-ui/tokens/*',
+    kind: 'metadata',
+    description: 'Design token JSON files.',
+  },
+  {
+    specifier: 'symbiote-ui/rules/*',
+    kind: 'metadata',
+    description: 'Machine-readable library and Symbiote rules.',
+  },
+  {
+    specifier: 'symbiote-ui/schemas/*',
+    kind: 'metadata',
+    description: 'Graph, UI, runtime, theme, and WebMCP schema JSON files.',
+  },
+];
+
+function listPackageExportSubpaths() {
+  return Object.keys(PKG.exports || {}).sort().map((subpath) => {
+    let target = PKG.exports[subpath];
+    let importTarget = typeof target === 'string' ? target : target?.import || target?.default || null;
+    return {
+      subpath,
+      specifier: subpath === '.' ? PKG.name : `${PKG.name}/${subpath.replace(/^\.\//, '')}`,
+      target: importTarget,
+    };
+  });
+}
+
+async function loadRuntimePacks(packs) {
+  let packList = Array.isArray(packs) ? packs : String(packs).split(',');
+  for (let pack of packList) {
+    let packName = pack.trim();
+    if (packName) {
+      await import(`symbiote-engine/packs/${packName}-pack.js`);
+    }
+  }
+}
+
+/**
+ * Discover provider catalogs, rules, themes, schemas, and runtime menu data.
+ * @param {Object} [options]
+ * @returns {Promise<object>}
+ */
+export async function cmdDiscover(options = {}) {
+  if (options.pack) {
+    await loadRuntimePacks(options.pack);
+  }
+
+  if (options.handlers) {
+    let dir = resolve(/** @type {string} */ (options.handlers));
+    await loadHandlers(dir);
+  }
+
+  let drivers = listDrivers();
+  let menu = getNodeMenu();
+  let socketTypes = getAllSocketTypes();
+  let packs = listPacks();
+
+  return {
+    command: 'discover',
+    package: {
+      name: PKG.name,
+      version: PKG.version,
+      description: PKG.description,
+    },
+    exports: {
+      subpaths: listPackageExportSubpaths(),
+      entrypoints: EXPORT_ENTRYPOINTS,
+    },
+    registry: {
+      totalDrivers: drivers.length,
+      drivers: drivers.map((d) => ({
+        type: d.type,
+        category: d.category,
+        icon: d.icon,
+        inputs: (d.driver.inputs || []).map((inp) => ({ name: inp.name, type: inp.type, label: inp.label })),
+        outputs: (d.driver.outputs || []).map((out) => ({ name: out.name, type: out.type, label: out.label })),
+        description: d.driver.description,
+        params: Object.entries(d.driver.params || {}).map(([name, p]) => ({ name, type: p.type, required: p.required, default: p.default })),
+      })),
+      menu: menu.map((group) => ({
+        category: group.category,
+        nodes: group.nodes,
+      })),
+      packs,
+    },
+    socketTypes: [...socketTypes.entries()].map(([name, s]) => ({
+      name,
+      label: s.label || name,
+      color: s.color || null,
+      description: s.description || null,
+    })),
+    manifest: {
+      localization: {
+        defaultLocale: DEFAULT_LOCALE,
+        supportedLocales: [...SUPPORTED_LOCALES],
+        autoDetection: 'browser-navigator-languages',
+        catalogKeys: [...LOCALE_CATALOG_KEYS],
+      },
+      renderers: [
+        HTML_IN_CANVAS_RENDERER,
+        WEBXR_RENDERER,
+        XR_THREE_WEBXR_ADAPTER,
+      ],
+      components: listComponents().map((c) => ({
+        tagName: c.tagName,
+        className: c.className,
+        module: c.module,
+        specifier: c.specifier,
+        exportName: c.exportName,
+        importKind: c.importKind,
+        category: c.category,
+        description: c.description,
+        contract: c.contract || null,
+      })),
+      themes: THEME_NAMES.map((name) => ({
+        name,
+        ...getTheme(name),
+        tokens: getThemeTokens(name),
+      })),
+      themeRuleBlocks: listThemeRuleBlocks(),
+      themeControls: Object.fromEntries(THEME_NAMES.map((name) => [name, getThemeControls(name)])),
+      themeElementGroups: listThemeElementGroups(),
+      themeRecipes: THEME_NAMES.map((name) => getThemeRecipe(name)).filter(Boolean),
+      tokenFiles: listTokenFiles(),
+      rulesets: RULESETS.map((rs) => ({
+        name: rs.name,
+        version: rs.version,
+        path: rs.path,
+        description: rs.description,
+        rules: listRules({ ruleset: rs.name }),
+      })),
+      rules: listRules(),
+      schemas: [
+        ...listGraphSchemas(),
+        ...listProjectSchemas(),
+        ...UI_SCHEMA_VERSIONS.map((sv) => ({
+          version: sv.version,
+          path: sv.path,
+          description: sv.description,
+          ...getUiSchema(sv.version),
+        })),
+      ],
+    },
+  };
+}

package/display/Badge/Badge.css.js

@@ -0,0 +1,44 @@
+export default /*css*/ `
+sn-badge {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sn-badge-gap);
+  min-width: 0;
+  padding: var(--sn-badge-padding);
+  border: 1px solid var(--sn-badge-border);
+  border-radius: var(--sn-badge-radius);
+  background: var(--sn-badge-bg);
+  color: var(--sn-badge-color);
+  font-family: var(--sn-font);
+  font-size: var(--sn-badge-font-size);
+  font-weight: var(--sn-badge-font-weight);
+  line-height: var(--sn-badge-line-height);
+  white-space: nowrap;
+}
+
+sn-badge[hidden] {
+  display: none !important;
+}
+
+sn-badge[variant="success"] {
+  border-color: var(--sn-badge-success-border);
+  color: var(--sn-badge-success-color);
+}
+
+sn-badge[variant="info"] {
+  border-color: var(--sn-badge-info-border);
+  color: var(--sn-badge-info-color);
+}
+
+sn-badge[variant="warning"] {
+  border-color: var(--sn-badge-warning-border);
+  color: var(--sn-badge-warning-color);
+}
+
+sn-badge[variant="error"] {
+  border-color: var(--sn-badge-error-border);
+  color: var(--sn-badge-error-color);
+}
+`;

package/display/Badge/Badge.js

@@ -0,0 +1,17 @@
+import Symbiote from '@symbiotejs/symbiote';
+import { slotProcessor } from '@symbiotejs/symbiote/core/slotProcessor.js';
+import template from './Badge.tpl.js';
+import css from './Badge.css.js';
+
+export class StatusBadge extends Symbiote {
+  constructor() {
+    super();
+    this.templateProcessors.add(slotProcessor);
+  }
+}
+
+StatusBadge.template = template;
+StatusBadge.rootStyles = css;
+StatusBadge.reg('sn-badge');
+
+export default StatusBadge;

package/display/Badge/Badge.tpl.js

@@ -0,0 +1,3 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`<slot></slot>`;

package/display/Banner/Banner.css.js

@@ -0,0 +1,61 @@
+export default /*css*/ `
+sn-banner {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--sn-banner-gap);
+  width: 100%;
+  min-width: 0;
+  margin-block-end: var(--sn-banner-margin-block-end);
+  padding: var(--sn-banner-padding);
+  border: 1px solid var(--sn-banner-border);
+  border-radius: var(--sn-banner-radius);
+  background: var(--sn-banner-bg);
+  color: var(--sn-banner-color);
+  font-family: var(--sn-font);
+  font-size: var(--sn-banner-font-size);
+  font-weight: var(--sn-banner-font-weight);
+  line-height: var(--sn-banner-line-height);
+}
+
+sn-banner[hidden] {
+  display: none !important;
+}
+
+sn-banner[variant="running"],
+sn-banner[variant="info"] {
+  border-color: var(--sn-banner-info-border);
+  color: var(--sn-banner-info-color);
+}
+
+sn-banner[variant="success"] {
+  border-color: var(--sn-banner-success-border);
+  color: var(--sn-banner-success-color);
+}
+
+sn-banner[variant="warning"] {
+  border-color: var(--sn-banner-warning-border);
+  color: var(--sn-banner-warning-color);
+}
+
+sn-banner[variant="error"] {
+  border-color: var(--sn-banner-error-border);
+  color: var(--sn-banner-error-color);
+}
+
+sn-banner .material-symbols-outlined {
+  flex: 0 0 auto;
+  font-size: var(--sn-banner-icon-size);
+  line-height: 1;
+}
+
+sn-banner[variant="running"] .material-symbols-outlined {
+  animation: sn-banner-spin var(--sn-banner-running-spin-duration) linear infinite;
+}
+
+@keyframes sn-banner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+`;

package/display/Banner/Banner.js

@@ -0,0 +1,17 @@
+import Symbiote from '@symbiotejs/symbiote';
+import { slotProcessor } from '@symbiotejs/symbiote/core/slotProcessor.js';
+import template from './Banner.tpl.js';
+import css from './Banner.css.js';
+
+export class StatusBanner extends Symbiote {
+  constructor() {
+    super();
+    this.templateProcessors.add(slotProcessor);
+  }
+}
+
+StatusBanner.template = template;
+StatusBanner.rootStyles = css;
+StatusBanner.reg('sn-banner');
+
+export default StatusBanner;

package/display/Banner/Banner.tpl.js

@@ -0,0 +1,3 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`<slot></slot>`;

package/display/CodeBlock/CodeBlock.css.js

@@ -0,0 +1,194 @@
+export default `
+:host {
+  display: block;
+}
+
+  code-block {
+    display: block;
+    height: 100%;
+    overflow: hidden;
+  }
+  code-block .cb-scroll {
+    display: flex;
+    height: 100%;
+    overflow: auto;
+    align-items: stretch;
+  }
+  code-block .cb-gutter {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    margin: 0;
+    padding: 12px 8px 12px 12px;
+    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    text-align: right;
+    color: var(--sn-text-dim);
+    opacity: 0.45;
+    background: var(--sn-bg);
+    border-right: 1px solid var(--sn-node-border);
+    user-select: none;
+    white-space: pre;
+    min-width: 32px;
+    flex-shrink: 0;
+  }
+  code-block .cb-pre {
+    margin: 0;
+    padding: 12px;
+    flex: 1;
+    min-width: 0;
+    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    color: var(--sn-text);
+    tab-size: 2;
+    white-space: pre;
+    box-sizing: border-box;
+  }
+  /* Markdown container — hidden by default */
+  code-block .cb-md {
+    display: none;
+    padding: 20px 28px;
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    line-height: 1.7;
+    color: var(--sn-text);
+    font-family: var(--sn-font);
+    font-size: 14px;
+  }
+  /* Image container — hidden by default */
+  code-block .cb-img-wrap {
+    display: none;
+    flex: 1;
+    padding: 20px;
+    justify-content: center;
+    align-items: center;
+    background: repeating-conic-gradient(var(--sn-warning-color) 0% 25%, var(--sn-bg) 0% 50%) 0 0 / 16px 16px;
+  }
+  code-block .cb-img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px var(--sn-bg-overlay);
+  }
+  /* In markdown mode: hide code, show md */
+  code-block[mode-markdown] .cb-gutter { display: none; }
+  code-block[mode-markdown] .cb-pre { display: none; }
+  code-block[mode-markdown] .cb-md { display: block; }
+  /* In image mode: hide code, show image */
+  code-block[mode-image] .cb-gutter { display: none; }
+  code-block[mode-image] .cb-pre { display: none; }
+  code-block[mode-image] .cb-img-wrap { display: flex; }
+
+  /* Markdown styles */
+  code-block .md-h { margin: 20px 0 8px; color: var(--sn-text); font-weight: 700; }
+  code-block h1.md-h { font-size: 24px; border-bottom: 2px solid var(--sn-node-border); padding-bottom: 8px; }
+  code-block h2.md-h { font-size: 20px; border-bottom: 1px solid var(--sn-node-border); padding-bottom: 6px; }
+  code-block h3.md-h { font-size: 16px; }
+  code-block h4.md-h { font-size: 14px; }
+  code-block .md-p { margin: 8px 0; }
+  code-block .md-quote {
+    margin: 8px 0;
+    padding: 8px 16px;
+    border-left: 4px solid var(--sn-cat-server);
+    background: var(--sn-accent-bg-subtle);
+    border-radius: 0 4px 4px 0;
+    font-style: italic;
+  }
+  code-block .md-list {
+    margin: 8px 0;
+    padding-left: 24px;
+  }
+  code-block .md-list li {
+    margin: 3px 0;
+  }
+  code-block .md-code-block {
+    margin: 12px 0;
+    padding: 12px 16px;
+    background: var(--sn-bg);
+    border: 1px solid var(--sn-node-border);
+    border-radius: 6px;
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    font-size: 12px;
+    line-height: 1.6;
+    overflow-x: auto;
+    white-space: pre;
+  }
+  code-block .md-inline-code {
+    padding: 1px 5px;
+    background: var(--sn-node-hover);
+    border-radius: 3px;
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    font-size: 0.9em;
+  }
+  code-block .md-link {
+    color: var(--sn-cat-server);
+    text-decoration: underline;
+    text-decoration-style: dotted;
+  }
+  code-block .md-link:hover { text-decoration-style: solid; }
+  code-block .md-img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 6px;
+    margin: 8px 0;
+    border: 1px solid var(--sn-node-border);
+    box-shadow: 0 2px 8px var(--sn-bg-overlay);
+  }
+  code-block .md-hr {
+    border: none;
+    border-top: 1px solid var(--sn-node-border);
+    margin: 16px 0;
+  }
+  code-block .md-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 12px 0;
+    font-size: 13px;
+  }
+  code-block .md-table th,
+  code-block .md-table td {
+    padding: 6px 12px;
+    border: 1px solid var(--sn-node-border);
+    text-align: left;
+  }
+  code-block .md-table th {
+    background: var(--sn-node-hover);
+    font-weight: 600;
+  }
+  code-block .md-table tr:hover td {
+    background: var(--sn-bg-overlay);
+  }
+  /* Token colors */
+  code-block .t-kw   { color: var(--sn-syntax-keyword); }
+  code-block .t-str  { color: var(--sn-syntax-string); }
+  code-block .t-cm   { color: var(--sn-syntax-comment); font-style: italic; }
+  code-block .t-fn   { color: var(--sn-syntax-function); }
+  code-block .t-num  { color: var(--sn-syntax-number); }
+  code-block .t-bi   { color: var(--sn-syntax-builtin); }
+  code-block .t-prop { color: var(--sn-syntax-property); }
+  code-block .t-lit  { color: var(--sn-syntax-literal); }
+  /* JSDoc */
+  code-block .t-jd   { color: var(--sn-syntax-doc); font-style: italic; }
+  code-block .t-jd-tag  { color: var(--sn-syntax-doc-tag); font-style: normal; font-weight: 500; }
+  code-block .t-jd-type { color: var(--sn-syntax-doc-type); font-style: normal; }
+  /* Template literal inner highlighting */
+  code-block .t-tl       { color: var(--sn-syntax-template); }
+  code-block .t-tl-tag   { color: var(--sn-syntax-template-tag); }
+  code-block .t-tl-attr  { color: var(--sn-syntax-template-attr); }
+  code-block .t-tl-bracket { color: var(--sn-syntax-template-bracket); }
+  code-block .t-tl-interp { color: var(--sn-syntax-template-interpolation); }
+  code-block .t-tl-sel   { color: var(--sn-syntax-template-selector); }
+  code-block .t-tl-prop  { color: var(--sn-syntax-template-property); }
+  code-block .t-tl-val   { color: var(--sn-syntax-template-value); }
+  /* Lint squiggles */
+  code-block .cb-scroll { position: relative; }
+  code-block .cb-squiggle-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 2; }
+  code-block .cb-squiggle { position: absolute; right: 0; height: 19.2px; pointer-events: auto; cursor: help; border-radius: 2px; }
+  code-block .cb-sev-2 { background: var(--sn-diagnostic-error-bg); border-bottom: 2px wavy var(--sn-diagnostic-error-border); }
+  code-block .cb-sev-1 { background: var(--sn-diagnostic-warning-bg); border-bottom: 2px wavy var(--sn-diagnostic-warning-border); }
+`;