symbiote-ui 0.3.0-alpha.4

package/graph/project-transaction.js

@@ -0,0 +1,284 @@
+import { normalizeGraphEdge, normalizeGraphModel, normalizeGraphNode } from './model.js';
+import { normalizeProjectPackage } from './project-package.js';
+
+const LOCAL_PATH_PATTERN = /(^|[\s"'=:])(?:\/Users\/|\/home\/|[A-Za-z]:\\)/;
+const SUPPORTED_OPERATIONS = new Set([
+  'graph.addNode',
+  'graph.addEdge',
+  'layout.addPanel',
+  'layout.setRoot',
+  'layout.updateNode',
+  'theme.setModifier',
+]);
+
+function asObject(value) {
+  return value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+}
+
+const FORBIDDEN_PATCH_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
+const ALLOWED_LAYOUT_PATCH_KEYS = new Set(['rect', 'weight']);
+const ALLOWED_NODE_PATCH_KEYS = new Set(['layout', 'props', 'attrs']);
+
+function normalizeId(value, fieldName) {
+  const id = String(value ?? '').trim();
+  if (!id) throw new Error(`${fieldName} is required`);
+  return id;
+}
+
+function assertNoLocalPaths(value) {
+  if (LOCAL_PATH_PATTERN.test(JSON.stringify(value))) {
+    throw new Error('project transaction contains an absolute local path');
+  }
+}
+
+function normalizeOperation(rawOperation) {
+  const data = asObject(rawOperation);
+  const type = normalizeId(data.type, 'operation.type');
+  if (!SUPPORTED_OPERATIONS.has(type)) {
+    throw new Error(`unsupported project transaction operation "${type}"`);
+  }
+
+  if (type === 'graph.addNode') {
+    return {
+      type,
+      graph: normalizeId(data.graph, 'operation.graph'),
+      node: normalizeGraphNode(data.node),
+    };
+  }
+
+  if (type === 'graph.addEdge') {
+    return {
+      type,
+      graph: normalizeId(data.graph, 'operation.graph'),
+      edge: normalizeGraphEdge(data.edge),
+    };
+  }
+
+  if (type === 'layout.setRoot') {
+    return {
+      type,
+      layout: normalizeId(data.layout, 'operation.layout'),
+      root: asObject(data.root),
+    };
+  }
+
+  if (type === 'layout.addPanel') {
+    return {
+      type,
+      layout: normalizeId(data.layout, 'operation.layout'),
+      parentId: data.parentId == null ? null : normalizeId(data.parentId, 'operation.parentId'),
+      panel: asObject(data.panel),
+    };
+  }
+
+  if (type === 'layout.updateNode') {
+    return {
+      type,
+      layout: normalizeId(data.layout, 'operation.layout'),
+      nodeId: normalizeId(data.nodeId, 'operation.nodeId'),
+      patch: asObject(data.patch),
+    };
+  }
+
+  return {
+    type,
+    theme: normalizeId(data.theme, 'operation.theme'),
+    name: normalizeId(data.name, 'operation.name'),
+    value: data.value,
+  };
+}
+
+export function normalizeProjectTransaction(rawTransaction = {}) {
+  assertNoLocalPaths(rawTransaction);
+  const data = asObject(rawTransaction);
+  const version = String(data.version ?? 'project-transaction-v1');
+  if (version !== 'project-transaction-v1') {
+    throw new Error(`unsupported project transaction version "${version}"`);
+  }
+
+  return {
+    version,
+    id: normalizeId(data.id, 'transaction.id'),
+    targetProject: data.targetProject == null ? null : String(data.targetProject),
+    operations: (data.operations || []).map(normalizeOperation),
+    metadata: asObject(data.metadata),
+  };
+}
+
+function cloneProjectForMutation(project) {
+  return JSON.parse(JSON.stringify({
+    ...project,
+    graphsById: undefined,
+    layoutsById: undefined,
+    themesById: undefined,
+  }));
+}
+
+function applyOperation(project, operation) {
+  if (operation.type === 'graph.addNode') {
+    const graph = project.graphs[operation.graph];
+    if (!graph) throw new Error(`graph "${operation.graph}" is not defined`);
+    graph.nodes.push(operation.node);
+    return;
+  }
+
+  if (operation.type === 'graph.addEdge') {
+    const graph = project.graphs[operation.graph];
+    if (!graph) throw new Error(`graph "${operation.graph}" is not defined`);
+    graph.edges.push(operation.edge);
+    return;
+  }
+
+  if (operation.type === 'layout.setRoot') {
+    const layout = project.layouts[operation.layout];
+    if (!layout) throw new Error(`layout "${operation.layout}" is not defined`);
+    layout.root = operation.root;
+    return;
+  }
+
+  if (operation.type === 'layout.addPanel') {
+    const layout = project.layouts[operation.layout];
+    if (!layout) throw new Error(`layout "${operation.layout}" is not defined`);
+    addPanelToLayout(layout, operation);
+    return;
+  }
+
+  if (operation.type === 'layout.updateNode') {
+    const layout = project.layouts[operation.layout];
+    if (!layout) throw new Error(`layout "${operation.layout}" is not defined`);
+    updateLayoutNode(layout, operation.nodeId, operation.patch);
+    return;
+  }
+
+  const theme = project.themes[operation.theme];
+  if (!theme) throw new Error(`theme "${operation.theme}" is not defined`);
+  theme.modifiers = {
+    ...asObject(theme.modifiers),
+    [operation.name]: operation.value,
+  };
+}
+
+function addPanelToLayout(layout, operation) {
+  const panel = operation.panel;
+  if (!panel.component) throw new Error('operation.panel.component is required');
+
+  if (!operation.parentId) {
+    layout.root = {
+      ...asObject(layout.root),
+      children: [...(Array.isArray(layout.root?.children) ? layout.root.children : []), panel],
+    };
+    return;
+  }
+
+  const inserted = appendChildById(layout.root, operation.parentId, panel);
+  if (!inserted) throw new Error(`layout parent "${operation.parentId}" is not defined`);
+}
+
+function appendChildById(node, parentId, child) {
+  if (!node || typeof node !== 'object') return false;
+  if (node.id === parentId) {
+    node.children = [...(Array.isArray(node.children) ? node.children : []), child];
+    return true;
+  }
+  for (const nested of node.children || []) {
+    if (appendChildById(nested, parentId, child)) return true;
+  }
+  return false;
+}
+
+function assertPlainPatchObject(value, path) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    throw new Error(`${path} must be an object`);
+  }
+}
+
+function cloneSafePatchObject(value, path) {
+  assertPlainPatchObject(value, path);
+  let next = {};
+  for (const [key, child] of Object.entries(value)) {
+    if (FORBIDDEN_PATCH_KEYS.has(key)) {
+      throw new Error(`layout.updateNode patch key "${key}" is not allowed`);
+    }
+    next[key] = child && typeof child === 'object' && !Array.isArray(child)
+      ? cloneSafePatchObject(child, `${path}.${key}`)
+      : child;
+  }
+  return next;
+}
+
+function normalizeLayoutPatch(layoutPatch) {
+  assertPlainPatchObject(layoutPatch, 'layout.updateNode.patch.layout');
+  let next = {};
+  for (const [key, value] of Object.entries(layoutPatch)) {
+    if (!ALLOWED_LAYOUT_PATCH_KEYS.has(key)) {
+      throw new Error(`layout.updateNode patch.layout.${key} is not allowed`);
+    }
+    next[key] = value && typeof value === 'object' && !Array.isArray(value)
+      ? cloneSafePatchObject(value, `layout.updateNode.patch.layout.${key}`)
+      : value;
+  }
+  return next;
+}
+
+function normalizeLayoutNodePatch(patch) {
+  assertPlainPatchObject(patch, 'layout.updateNode.patch');
+  let next = {};
+  for (const [key, value] of Object.entries(patch)) {
+    if (!ALLOWED_NODE_PATCH_KEYS.has(key)) {
+      throw new Error(`layout.updateNode patch.${key} is not allowed`);
+    }
+    next[key] = key === 'layout'
+      ? normalizeLayoutPatch(value)
+      : cloneSafePatchObject(value, `layout.updateNode.patch.${key}`);
+  }
+  return next;
+}
+
+function mergePatch(target, patch) {
+  for (const [key, value] of Object.entries(patch)) {
+    if (value && typeof value === 'object' && !Array.isArray(value) && target[key] && typeof target[key] === 'object' && !Array.isArray(target[key])) {
+      target[key] = mergePatch({ ...target[key] }, value);
+    } else {
+      target[key] = value;
+    }
+  }
+  return target;
+}
+
+function patchNodeById(node, nodeId, patch) {
+  if (!node || typeof node !== 'object') return false;
+  if (node.id === nodeId) {
+    mergePatch(node, patch);
+    return true;
+  }
+  if (patchNodeById(node.first, nodeId, patch) || patchNodeById(node.second, nodeId, patch)) {
+    return true;
+  }
+  for (const nested of node.children || []) {
+    if (patchNodeById(nested, nodeId, patch)) return true;
+  }
+  return false;
+}
+
+export function updateLayoutNode(layout, nodeId, patch, options = {}) {
+  const root = options.root || layout?.root;
+  if (!root) throw new Error('layout.root is required');
+  const updated = patchNodeById(root, nodeId, normalizeLayoutNodePatch(patch));
+  if (!updated) throw new Error(`layout node "${nodeId}" is not defined`);
+  return layout;
+}
+
+export function applyProjectTransaction(project, rawTransaction) {
+  const transaction = normalizeProjectTransaction(rawTransaction);
+  const nextProject = cloneProjectForMutation(project);
+
+  for (const operation of transaction.operations) {
+    applyOperation(nextProject, operation);
+  }
+
+  for (const [id, graph] of Object.entries(nextProject.graphs)) {
+    nextProject.graphs[id] = normalizeGraphModel(graph);
+  }
+
+  return normalizeProjectPackage(nextProject);
+}

package/graph/skeleton-utils.js

@@ -0,0 +1,84 @@
+const basenameIndexes = new WeakMap()
+
+export function dirOf(filePath) {
+  if (!filePath) return './'
+  const idx = filePath.lastIndexOf('/')
+  return idx >= 0 ? filePath.slice(0, idx + 1) : './'
+}
+
+export function baseName(filePath) {
+  if (!filePath) return '?'
+  const idx = filePath.lastIndexOf('/')
+  return idx >= 0 ? filePath.slice(idx + 1) : filePath
+}
+
+function buildBasenameIndex(knownFiles) {
+  const cached = basenameIndexes.get(knownFiles)
+  if (cached) return cached
+
+  const index = new Map()
+  for (const file of knownFiles) {
+    const base = baseName(file)
+    if (!index.has(base)) index.set(base, file)
+    if (!base.endsWith('.js') && !index.has(base + '.js')) {
+      index.set(base + '.js', file)
+    }
+  }
+  basenameIndexes.set(knownFiles, index)
+  return index
+}
+
+export function resolveImport(importPath, fromFile, knownFiles) {
+  if (knownFiles.has(importPath)) return importPath
+  if (knownFiles.has(importPath + '.js')) return importPath + '.js'
+
+  if (importPath.startsWith('.')) {
+    const dir = dirOf(fromFile)
+    let resolved = dir + importPath.replace(/^\.\//, '')
+    const parts = resolved.split('/')
+    const normalized = []
+    for (const part of parts) {
+      if (part === '..') normalized.pop()
+      else if (part !== '.') normalized.push(part)
+    }
+    resolved = normalized.join('/')
+
+    if (knownFiles.has(resolved)) return resolved
+    if (knownFiles.has(resolved + '.js')) return resolved + '.js'
+    if (knownFiles.has(resolved + '/index.js')) return resolved + '/index.js'
+  }
+
+  const base = importPath.split('/').pop()
+  const index = buildBasenameIndex(knownFiles)
+  return index.get(base) || index.get(base.replace(/\.js$/, '')) || null
+}
+
+export function collectSkeletonFiles(skeleton = {}) {
+  const files = new Set()
+  const assetFiles = new Set()
+  const classFiles = new Set()
+
+  for (const data of Object.values(skeleton.n || {})) {
+    if (data.f) {
+      files.add(data.f)
+      classFiles.add(data.f)
+    }
+  }
+  for (const file of Object.keys(skeleton.X || {})) {
+    files.add(file)
+  }
+  for (const [dir, names] of Object.entries(skeleton.f || {})) {
+    for (const name of names) {
+      files.add(dir === './' ? name : dir + name)
+    }
+  }
+  for (const [dir, names] of Object.entries(skeleton.a || {})) {
+    for (const name of names) {
+      const fullPath = dir === './' ? name : dir + name
+      files.add(fullPath)
+      assetFiles.add(fullPath)
+    }
+  }
+
+  return { files, assetFiles, classFiles }
+}

package/graph/theme-contract.js

@@ -0,0 +1,36 @@
+export const GRAPH_TYPE_COLOR_TOKENS = Object.freeze({
+  action: '--sn-graph-type-action',
+  output: '--sn-graph-type-output',
+  data: '--sn-graph-type-data',
+  config: '--sn-graph-type-config',
+  external: '--sn-graph-type-external',
+  style: '--sn-graph-type-style',
+  docs: '--sn-graph-type-docs',
+  asset: '--sn-graph-type-asset',
+  group: '--sn-graph-type-group',
+});
+
+export const GRAPH_CLUSTER_COLOR_TOKENS = Object.freeze([
+  '--sn-graph-cluster-0',
+  '--sn-graph-cluster-1',
+  '--sn-graph-cluster-2',
+  '--sn-graph-cluster-3',
+  '--sn-graph-cluster-4',
+  '--sn-graph-cluster-5',
+  '--sn-graph-cluster-6',
+]);
+
+export function getGraphClusterColorToken(index = 0) {
+  let token = GRAPH_CLUSTER_COLOR_TOKENS[Math.abs(Number(index) || 0) % GRAPH_CLUSTER_COLOR_TOKENS.length];
+  return `var(${token})`;
+}
+
+export function isGraphColorReference(value) {
+  let color = String(value || '').trim();
+  return /^#?[0-9a-f]{3}([0-9a-f]{3})?$/i.test(color) || /^var\(--sn-[A-Za-z0-9_-]+\)$/.test(color);
+}
+
+export function normalizeGraphColorReference(value, fallbackIndex = 0) {
+  let color = String(value || '').trim();
+  return isGraphColorReference(color) ? color : getGraphClusterColorToken(fallbackIndex);
+}

package/graph/transaction-parser.js

@@ -0,0 +1,56 @@
+/**
+ * Transaction Parser — extract project-transaction-v1 blocks from chat messages.
+ *
+ * Parses fenced code blocks in agent messages to find structured
+ * project transaction payloads.
+ */
+
+const TRANSACTION_FENCE_RE = /```([^\n`]*)\n([\s\S]*?)```/g
+const AGENT_ROLES = new Set(['agent', 'assistant'])
+
+function parseJsonBlock(source) {
+  try {
+    return JSON.parse(source)
+  } catch {
+    return null
+  }
+}
+
+function transactionItems(value) {
+  if (Array.isArray(value)) return value
+  return value && typeof value === 'object' ? [value] : []
+}
+
+function isTransactionFence(info, payload) {
+  const normalizedInfo = String(info || '').toLowerCase()
+  if (normalizedInfo.includes('project-transaction-v1')) return true
+  return payload?.version === 'project-transaction-v1'
+    || (Array.isArray(payload) && payload.some((item) => item?.version === 'project-transaction-v1'))
+}
+
+/**
+ * Extract project-transaction-v1 items from an array of chat messages.
+ *
+ * Scans agent/assistant messages for fenced code blocks containing
+ * valid project-transaction-v1 JSON payloads.
+ *
+ * @param {Array<{role: string, text?: string, content?: string}>} [messages=[]]
+ * @returns {Array<object>} Extracted transaction objects
+ */
+export function extractProjectTransactionsFromMessages(messages = []) {
+  const transactions = []
+  for (const message of messages || []) {
+    if (!AGENT_ROLES.has(message?.role)) continue
+    const text = String(message.text || message.content || '')
+    for (const match of text.matchAll(TRANSACTION_FENCE_RE)) {
+      const payload = parseJsonBlock(match[2].trim())
+      if (!isTransactionFence(match[1], payload)) continue
+      for (const item of transactionItems(payload)) {
+        if (item?.version === 'project-transaction-v1' && item.id && Array.isArray(item.operations)) {
+          transactions.push(item)
+        }
+      }
+    }
+  }
+  return transactions
+}

package/icons/MaterialSymbols.js

@@ -0,0 +1,69 @@
+const MATERIAL_SYMBOLS_LOCAL_URL = new URL('./material-symbols.css', import.meta.url).href;
+
+const ICON_NAME_RE = /^[a-z0-9_]+$/;
+
+/** @type {Set<string>} */
+const loadedIcons = new Set();
+
+const LINK_SELECTOR = 'link[data-sn-material-symbols="managed"]';
+
+/** @type {{ autoload: boolean, hrefBuilder: ((iconNames: string[]) => string)|null }} */
+const config = {
+  autoload: true,
+  hrefBuilder: null,
+};
+
+/**
+ * Configure Material Symbols loading for host apps with strict CSP, privacy,
+ * or alternative font delivery requirements.
+ * @param {{ autoload?: boolean, hrefBuilder?: ((iconNames: string[]) => string)|null }} options
+ */
+export function configureMaterialSymbols(options = {}) {
+  if (typeof options.autoload === 'boolean') config.autoload = options.autoload;
+  if ('hrefBuilder' in options) config.hrefBuilder = options.hrefBuilder || null;
+}
+
+/**
+ * Ensure Material Symbols ligatures used by built-in UI are available.
+ * Components declare the icons they own so hosts can still use a custom
+ * `hrefBuilder` for subset font loading. The default provider path is a
+ * self-hosted font to keep public demos and embedded browsers deterministic.
+ * @param {string[]} iconNames
+ */
+export function ensureMaterialSymbols(iconNames) {
+  if (!config.autoload || !isBrowserDocument()) return;
+
+  const names = [...new Set(iconNames.filter((name) => typeof name === 'string' && ICON_NAME_RE.test(name)))].sort();
+  if (names.length === 0) return;
+
+  let changed = false;
+  for (const name of names) {
+    if (loadedIcons.has(name)) continue;
+    loadedIcons.add(name);
+    changed = true;
+  }
+  if (!changed) return;
+
+  const iconList = [...loadedIcons].sort();
+  const href = config.hrefBuilder
+    ? config.hrefBuilder(iconList)
+    : MATERIAL_SYMBOLS_LOCAL_URL;
+  if (!href) return;
+
+  let link = document.querySelector(LINK_SELECTOR);
+  if (!link) {
+    link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.dataset.snMaterialSymbols = 'managed';
+    document.head.append(link);
+  }
+  link.href = href;
+  link.dataset.snMaterialSymbolsIcons = iconList.join(',');
+}
+
+function isBrowserDocument() {
+  return typeof document !== 'undefined'
+    && typeof window !== 'undefined'
+    && document.nodeType === 9
+    && !!document.head;
+}

package/icons/material-symbols.css

@@ -0,0 +1,24 @@
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: normal;
+  font-display: block;
+  src: url('./material-symbols-outlined-400.ttf') format('truetype');
+}
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-feature-settings: 'liga';
+}

package/index.js

@@ -0,0 +1,95 @@
+/**
+ * symbiote-ui — Node-safe provider UI API.
+ *
+ * Browser components live in the explicit `symbiote-ui/ui` entrypoint.
+ */
+
+export * from './core/index.js';
+export * from './graph/index.js';
+export * from './locale/index.js';
+
+export {
+  NodeShape,
+  RectShape,
+  PillShape,
+  CircleShape,
+  DiamondShape,
+  CommentShape,
+  getShape,
+  registerShape,
+  SVGShape,
+  createSVGShape,
+  SVG_PRESETS,
+} from './shapes/index.js';
+
+export {
+  DEFAULT_PROVIDER_THEME,
+  DEFAULT_THEME,
+} from './themes/Theme.js';
+
+export {
+  DEFAULT_PROVIDER_PALETTE,
+  DEFAULT_PALETTE,
+} from './themes/Palette.js';
+
+export { MODERN_SKIN, COMPACT_SKIN, ROUNDED_SKIN } from './themes/Skin.js';
+export { CARBON, CARBON_PALETTE } from './themes/carbon.js';
+export { PCB_DARK } from './themes/pcb.js';
+export { EBOOK, EBOOK_PALETTE } from './themes/ebook.js';
+export { NEON_PALETTE } from './themes/neon.js';
+export { GraphHistory } from 'symbiote-engine';
+export { Readonly } from './plugins/Readonly.js';
+export { History } from './plugins/History.js';
+export { computeAutoLayout, computeTreeLayout } from './canvas/AutoLayout.js';
+export {
+  createCanvasGraphStore,
+  normalizeCanvasGraphModel,
+} from './canvas/graph-model.js';
+export {
+  computeInitialGraphPositions,
+  createForceLayoutPayload,
+  findForceNodeGroup,
+  getDrillableFiles,
+  getForceLayoutOptions,
+  getGraphCacheKey,
+  getOrBuildGraph,
+} from './canvas/graph-layout.js';
+export {
+  GRAPH_DIRECTORY_FRAME_COLORS,
+  GRAPH_PATH_STYLES,
+  addGraphDirectoryFrames,
+  buildFlatPathHash,
+  getFileSelectionNodeId,
+  getFlatFocusRestoreKey,
+  getGraphHashNavigationState,
+  getGraphPathStyleDisplay,
+  getNextGraphPathStyle,
+  resolveFlatHashChange,
+  resolveInitialGraphViewMode,
+  shouldClearFocusOnSelection,
+  shouldFitForceLayoutInitialTick,
+  shouldRestoreFlatFocus,
+} from './canvas/graph-explorer.js';
+export { resolveSymbolFile, findConnectionPath } from './graph/graph-algorithms.js';
+export {
+  HTML_IN_CANVAS_APIS,
+  HTML_IN_CANVAS_RENDERER,
+  HTML_IN_CANVAS_RENDERER_NAME,
+  captureHtmlElementImage,
+  closeHtmlElementImage,
+  copyHtmlElementToWebGPUTexture,
+  createHtmlInCanvasAdapter,
+  drawHtmlElement2d,
+  getHtmlInCanvasChangedElements,
+  getHtmlElementCanvasTransform,
+  getHtmlInCanvasSupport,
+  requestHtmlInCanvasPaint,
+  setupHtmlInCanvas,
+  uploadHtmlElementToWebGLTexture,
+} from './canvas/html-in-canvas.js';
+export * from './xr/index.js';
+export { buildFileGraph, buildStructuredGraph } from './canvas/project-graph-builder.js';
+export { buildGraphModelFromSkeleton, buildCanvasGraphModelFromSkeleton } from './canvas/project-graph-model.js';
+export { collectQuickOpenFilesFromSkeleton, fuzzyScore, searchQuickOpenItems } from './navigation/quick-open-utils.js';
+export { normalizeOutputList, normalizePreviewGraph } from './display/output-preview.js';
+export { createNetworkApprovalPageStyles, renderNetworkApprovalPage } from './display/network-approval-page.js';