symbiote-ui 0.3.0-alpha.4

package/manifest/component-registry.js

@@ -0,0 +1,2446 @@
+export const COMPONENT_UI_SPECIFIER = 'symbiote-ui/ui';
+export const COMPONENT_DESCRIPTOR_SCHEMA = 'schemas/component-descriptor-v2.json';
+
+const STATIC_RENDERABLE_TAGS = new Set([
+  'code-block',
+  'source-viewer',
+  'sn-badge',
+  'sn-banner',
+  'sn-card',
+  'sn-data-table',
+  'sn-empty-state',
+  'sn-event-feed',
+  'sn-field',
+  'sn-metric',
+]);
+
+const HYDRATE_ONLY_TAGS = new Set([
+  'chat-composer',
+  'chat-list',
+  'chat-list-item',
+  'chat-message-item',
+  'chat-sidebar-item',
+  'chat-sidebar-shell',
+  'chat-sidebar-sub-item',
+  'chat-transcript',
+  'list-detail-shell',
+  'project-tabs',
+  'quick-open',
+  'sn-list-item',
+  'source-editor',
+  'tree-panel',
+  'tree-view',
+]);
+
+const CLIENT_ONLY_CATEGORIES = new Set([
+  'canvas',
+  'effects',
+  'inspector',
+  'menu',
+  'navigation',
+  'node',
+  'palette',
+  'toolbar',
+]);
+
+const WEBMCP_TOOLS = {
+  'chat-composer': [
+    {
+      name: 'chat_composer_submit',
+      description: 'Submit or stop the current composer input through the host-owned chat transport.',
+      inputSchema: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          value: { type: 'string' },
+          action: { enum: ['submit', 'stop'] },
+        },
+        required: ['action'],
+      },
+      annotations: { readOnlyHint: false, destructiveHint: false },
+      exposedTo: ['agent', 'assistant'],
+    },
+  ],
+  'quick-open': [
+    {
+      name: 'quick_open_select',
+      description: 'Search and select an item from a host-provided quick-open result set.',
+      inputSchema: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          query: { type: 'string' },
+          itemId: { type: 'string' },
+        },
+      },
+      annotations: { readOnlyHint: false, destructiveHint: false },
+      exposedTo: ['agent', 'assistant'],
+    },
+  ],
+  'project-tabs': [
+    {
+      name: 'project_tabs_select',
+      description: 'Select or describe a tab in a dynamic host layout without owning route or persistence policy.',
+      inputSchema: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          tabId: { type: 'string' },
+        },
+        required: ['tabId'],
+      },
+      annotations: { readOnlyHint: false, destructiveHint: false },
+      exposedTo: ['agent', 'assistant'],
+    },
+  ],
+  'sn-list-item': [
+    {
+      name: 'list_item_select',
+      description: 'Select a reusable list item from host-provided data.',
+      inputSchema: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          itemId: { type: 'string' },
+        },
+        required: ['itemId'],
+      },
+      annotations: { readOnlyHint: false, destructiveHint: false },
+      exposedTo: ['agent', 'assistant'],
+    },
+  ],
+  'source-editor': [
+    {
+      name: 'source_editor_content',
+      description: 'Read or replace source editor text while leaving persistence policy to the host application.',
+      inputSchema: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          action: { enum: ['read', 'replace'] },
+          value: { type: 'string' },
+        },
+        required: ['action'],
+      },
+      annotations: { readOnlyHint: false, destructiveHint: false },
+      exposedTo: ['agent', 'assistant'],
+    },
+  ],
+  'sn-tree-panel': [
+    {
+      name: 'tree_panel_select',
+      description: 'Filter or select a tree item from host-provided tree data.',
+      inputSchema: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          query: { type: 'string' },
+          itemId: { type: 'string' },
+        },
+      },
+      annotations: { readOnlyHint: false, destructiveHint: false },
+      exposedTo: ['agent', 'assistant'],
+    },
+  ],
+};
+
+function getSsrContract(component) {
+  if (STATIC_RENDERABLE_TAGS.has(component.tagName)) {
+    return {
+      mode: 'jsda-ssr-renderable',
+      importSafe: false,
+      jsdaRenderable: true,
+      requiresDom: true,
+      browserApis: [],
+      notes: 'Import after JSDA/linkedom installs DOM globals; verify rendering with JSDA SSR smoke tests.',
+    };
+  }
+  if (HYDRATE_ONLY_TAGS.has(component.tagName)) {
+    return {
+      mode: 'hydrate-only',
+      importSafe: false,
+      jsdaRenderable: false,
+      requiresDom: true,
+      browserApis: ['events', 'selection', 'focus'],
+      notes: 'May render shell markup under SSR, but interactive behavior belongs to browser hydration.',
+    };
+  }
+  if (CLIENT_ONLY_CATEGORIES.has(component.category)) {
+    return {
+      mode: 'client-only',
+      importSafe: false,
+      jsdaRenderable: false,
+      requiresDom: true,
+      browserApis: ['canvas', 'layout-metrics', 'observers', 'animation-frame'],
+      notes: 'Browser-only interaction surface; exclude from JSDA SSR render fixtures unless guarded by a host fallback.',
+    };
+  }
+  return {
+    mode: 'hydrate-only',
+    importSafe: false,
+    jsdaRenderable: false,
+    requiresDom: true,
+    browserApis: ['events'],
+    notes: 'Default browser component classification pending component-specific JSDA SSR smoke coverage.',
+  };
+}
+
+function getWebMcpContract(component) {
+  let tools = WEBMCP_TOOLS[component.tagName];
+  if (!tools) return null;
+  return {
+    documentation: 'Agent-facing WebMCP documentation for stable component affordances only; host workflow policy remains outside symbiote-ui.',
+    tools,
+  };
+}
+
+function normalizeContract(component) {
+  if (!component.contract) return null;
+  return {
+    ...component.contract,
+    schemaVersion: 'component-descriptor-v2',
+    ssr: component.contract.ssr || getSsrContract(component),
+    ...(component.contract.webmcp || getWebMcpContract(component)
+      ? { webmcp: component.contract.webmcp || getWebMcpContract(component) }
+      : {}),
+  };
+}
+
+const UI_NAMED_EXPORTS = new Set([
+  'GraphNode',
+  'NodeCallout',
+  'NodeSocket',
+  'NodeCanvas',
+  'CanvasGraph',
+  'GraphExplorerShell',
+  'ContextMenu',
+  'Layout',
+  'LayoutSidebar',
+  'LayoutNode',
+  'CrossLayoutPortalBridge',
+  'ProjectTabs',
+  'CodeBlock',
+  'SourceViewer',
+  'SourceEditor',
+  'LoadingOverlay',
+  'OutputListPreview',
+  'OutputGraphPreview',
+  'CellBg',
+  'QuickToolbar',
+  'InspectorPanel',
+  'PaletteBrowser',
+  'Minimap',
+  'NodeSearch',
+  'GraphTabs',
+  'Breadcrumb',
+  'QuickOpen',
+  'ChatMessageItem',
+  'ChatTranscript',
+  'ChatComposer',
+  'ChatList',
+  'ChatListItem',
+  'ChatSidebarShell',
+  'ChatSidebarItem',
+  'ChatSidebarSubItem',
+  'ListItem',
+  'ListDetailShell',
+  'TreeView',
+  'TreePanel',
+  'ActionButton',
+  'FormField',
+  'SurfaceCard',
+  'StatusBadge',
+  'MetricItem',
+  'DataTable',
+  'EventFeed',
+  'StatusBanner',
+  'EmptyState',
+  'GraphFrame',
+  'StatusRibbon',
+]);
+
+const COMPONENT_VISIBILITY = {
+  public: 'public',
+  internal: 'internal',
+  experimental: 'experimental',
+};
+
+export let COMPONENTS = [
+  {
+    tagName: 'graph-node',
+    className: 'GraphNode',
+    module: 'node/GraphNode/GraphNode.js',
+    category: 'node',
+    description: 'Interactive graph node component for the node canvas.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/graph-model-v1.json',
+      capabilities: ['node-card', 'ports', 'controls', 'category-accent', 'type-accent', 'error-state'],
+      attributes: [
+        { name: 'node-label', type: 'string', description: 'Rendered node label.' },
+        { name: 'node-category', type: 'string', description: 'Semantic node category used for icon and accent selection.' },
+        { name: 'node-type', type: 'string', description: 'Semantic node type used for type-specific accent selection when a matching theme token exists.' },
+      ],
+      properties: [
+        { name: 'mediaSrc', type: 'string', description: 'Media or avatar image URL derived from node params.' },
+        { name: 'summary', type: 'string', description: 'Presentation summary derived from node params.' },
+        { name: 'href', type: 'string', description: 'Presentation link derived from node params.' },
+        { name: 'itemsList', type: 'array', description: 'Presentation list items derived from node params.' },
+        { name: 'inputPorts', type: 'array', description: 'Input port descriptors derived from node input data.' },
+        { name: 'outputPorts', type: 'array', description: 'Output port descriptors derived from node output data.' },
+        { name: 'controlsList', type: 'array', description: 'Control descriptors rendered inside the node body.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-node-bg',
+        '--sn-node-border',
+        '--sn-node-selected',
+        '--sn-node-radius',
+        '--sn-node-accent',
+        '--sn-node-header-bg',
+        '--sn-node-items-max-height',
+      ],
+    },
+  },
+  {
+    tagName: 'node-socket',
+    className: 'NodeSocket',
+    module: 'node/NodeSocket/NodeSocket.js',
+    category: 'node',
+    description: 'Socket endpoint component for graph node inputs and outputs.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/graph-model-v1.json',
+      capabilities: ['socket-endpoint', 'shape-variant', 'accent-color', 'connection-target'],
+      attributes: [
+        { name: 'data-socket-color', type: 'string', description: 'Socket color reflected to the local socket color variable.' },
+        { name: 'data-socket-shape', type: 'string', description: 'Socket shape: circle, square, diamond, or triangle.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-node-accent',
+        '--sn-node-bg',
+      ],
+    },
+  },
+  {
+    tagName: 'node-callout',
+    className: 'NodeCallout',
+    module: 'node/NodeCallout/NodeCallout.js',
+    category: 'node',
+    description: 'Floating node callout anchored to a graph node or DOM element.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['floating-callout', 'anchor-tracking', 'node-label'],
+      attributes: [
+        { name: 'anchor-node-id', type: 'string', description: 'Graph node id used as the anchor element.' },
+        { name: 'anchor-selector', type: 'string', description: 'CSS selector for the anchor element.' },
+        { name: 'placement', type: 'string', description: 'Callout placement: top, bottom, left, or right.' },
+        { name: 'offset', type: 'number', description: 'Distance in pixels between the callout and anchor.' },
+        { name: 'trigger', type: 'string', description: 'Visibility trigger: always or hover.' },
+        { name: 'text', type: 'string', description: 'Optional plain text content when no slotted content is used.' },
+      ],
+      properties: [
+        { name: 'anchorElement', type: 'Element|null', description: 'Direct DOM element used as the callout anchor.' },
+      ],
+      methods: [
+        { name: 'show', type: 'function', description: 'Shows the callout.' },
+        { name: 'hide', type: 'function', description: 'Hides the callout.' },
+        { name: 'requestUpdate', type: 'function', description: 'Refreshes callout geometry.' },
+      ],
+      slots: [
+        { name: 'default', description: 'Callout content.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-overlay-z-base',
+        '--sn-node-callout-z',
+        '--sn-node-callout-bg',
+        '--sn-node-callout-border',
+        '--sn-node-callout-color',
+        '--sn-node-callout-shadow',
+        '--sn-node-callout-radius',
+        '--sn-node-callout-padding',
+        '--sn-node-callout-max-width',
+        '--sn-node-callout-font-size',
+        '--sn-node-callout-font-weight',
+        '--sn-node-callout-line-height',
+        '--sn-node-callout-arrow-size',
+      ],
+    },
+  },
+  {
+    tagName: 'node-canvas',
+    className: 'NodeCanvas',
+    module: 'canvas/NodeCanvas/NodeCanvas.js',
+    category: 'canvas',
+    description: 'Primary graph canvas custom element.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/graph-model-v1.json',
+      capabilities: ['node-editor-canvas', 'connections', 'frames', 'subgraphs', 'viewport', 'selection'],
+      attributes: [
+        { name: 'connection-engine', type: 'string', description: 'Connection renderer engine selection.' },
+      ],
+      properties: [
+        { name: 'zoom', type: 'number', description: 'Current canvas zoom.' },
+        { name: 'panX', type: 'number', description: 'Current horizontal pan.' },
+        { name: 'panY', type: 'number', description: 'Current vertical pan.' },
+      ],
+      methods: [
+        { name: 'setEditor', type: 'function', description: 'Connects a host-provided editor model to the canvas.' },
+        { name: 'setSnapGrid', type: 'function', description: 'Toggles snap grid and size.' },
+        { name: 'setReadonly', type: 'function', description: 'Toggles readonly interaction mode.' },
+        { name: 'setReadonlyNodeDragging', type: 'function', description: 'Allows node dragging while readonly editing stays disabled.' },
+        { name: 'setChrome', type: 'function', description: 'Toggles canvas chrome, menus, and viewport controls.' },
+        { name: 'setPanels', type: 'function', description: 'Toggles canvas side panels while preserving node menus.' },
+        { name: 'setViewportLocked', type: 'function', description: 'Locks pan and zoom while preserving rendering.' },
+        { name: 'setCompactMode', type: 'function', description: 'Toggles compact node rendering.' },
+        { name: 'setPathStyle', type: 'function', description: 'Sets connection path rendering style.' },
+        { name: 'setFlowLayout', type: 'function', description: 'Positions nodes in vertical or horizontal document flow and can enable native canvas scrolling.' },
+        { name: 'clearFlowLayout', type: 'function', description: 'Clears flow layout sizing and scroll mode.' },
+        { name: 'setNodePosition', type: 'function', description: 'Positions one node in canvas coordinates.' },
+        { name: 'getPositions', type: 'function', description: 'Returns node positions.' },
+      ],
+      events: [
+        { name: 'toolbar-action', description: 'Emits a toolbar action for a selected node.' },
+        { name: 'subgraph-enter', description: 'Emits when canvas enters a subgraph.', detail: [{ name: 'path', type: 'array' }] },
+        { name: 'subgraph-exit', description: 'Emits when canvas exits a subgraph.', detail: [{ name: 'path', type: 'array' }] },
+        { name: 'manualviewport', description: 'Emits after user-driven viewport changes.' },
+      ],
+      themeAliases: [
+        '--sn-bg',
+        '--sn-grid-dot',
+        '--sn-grid-size',
+        '--sn-conn-color',
+        '--sn-conn-selected',
+        '--sn-node-bg',
+        '--sn-node-border',
+      ],
+    },
+  },
+  {
+    tagName: 'canvas-graph',
+    className: 'CanvasGraph',
+    module: 'canvas/CanvasGraph/CanvasGraph.js',
+    category: 'canvas',
+    description: 'Generic hierarchical canvas graph renderer with force layout and selection events.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/graph-model-v1.json',
+      capabilities: ['hierarchical-graph', 'force-layout', 'semantic-clusters', 'focus-selection', 'layout-snapshot'],
+      properties: [
+        { name: 'graphDB', type: 'object', description: 'Normalized graph store created from graph-model-v1 data.' },
+        { name: 'currentGroupId', type: 'string', description: 'Current drilled group id, or empty at root.' },
+        { name: 'activeNode', type: 'object', description: 'Currently focused graph node.' },
+        { name: 'renderMode', type: 'string', description: 'Graph rendering mode, such as dots or cards.' },
+      ],
+      methods: [
+        { name: 'setGraphModel', type: 'function', description: 'Loads normalized graph data into the canvas renderer.' },
+        { name: 'setPath', type: 'function', description: 'Navigates to a group path or semantic cluster path.' },
+        { name: 'flyToNode', type: 'function', description: 'Focuses a node by id and enters parent groups when needed.' },
+        { name: 'fitView', type: 'function', description: 'Fits the visible graph into the canvas viewport.' },
+        { name: 'resetView', type: 'function', description: 'Resets viewport pan and zoom.' },
+        { name: 'setLayoutSnapshot', type: 'function', description: 'Restores persisted graph node positions and viewport state.' },
+        { name: 'getLayoutSnapshot', type: 'function', description: 'Returns serializable node positions and viewport state.' },
+      ],
+      events: [
+        { name: 'file-selected', description: 'Emits when a leaf/file node is selected.', detail: [{ name: 'path', type: 'string' }] },
+        { name: 'group-selected', description: 'Emits when a group node is selected.', detail: [{ name: 'path', type: 'string' }] },
+        { name: 'node-deselected', description: 'Emits when focus is cleared.' },
+        { name: 'path-changed', description: 'Emits after drill path changes.', detail: [{ name: 'path', type: 'string' }] },
+        { name: 'layout-tick', description: 'Emits during force layout updates.' },
+        { name: 'layout-done', description: 'Emits when force layout settles.' },
+        { name: 'layout-snapshot', description: 'Emits a serializable layout snapshot after user layout changes.' },
+        { name: 'toolbar-action', description: 'Emits selected toolbar action for the active node.' },
+      ],
+      themeAliases: [
+        '--sn-bg',
+        '--sn-node-bg',
+        '--sn-node-border',
+        '--sn-node-selected',
+        '--sn-conn-color',
+        '--sn-cat-server',
+        '--sn-cat-data',
+        '--sn-effect-focus-ring',
+      ],
+    },
+  },
+  {
+    tagName: 'graph-explorer-shell',
+    className: 'GraphExplorerShell',
+    module: 'canvas/GraphExplorerShell/GraphExplorerShell.js',
+    category: 'canvas',
+    description: 'Generic graph explorer shell with toolbar, canvas, overlay, legend, and stats slots.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['graph-toolbar', 'graph-slots', 'canvas-host', 'overlay-host', 'stats-host'],
+      properties: [
+        { name: 'title', type: 'string', description: 'Explorer title displayed by the host shell.' },
+        { name: 'mode', type: 'string', description: 'Current graph view mode supplied by the host adapter.' },
+      ],
+      slots: [
+        { name: 'toolbar', description: 'Toolbar controls for view, fit, layers, labels, and graph actions.' },
+        { name: 'canvas', description: 'Primary graph canvas component.' },
+        { name: 'overlay', description: 'Loading, empty, or transient overlay content.' },
+        { name: 'legend', description: 'Optional graph legend or semantic cluster panel.' },
+        { name: 'stats', description: 'Optional graph statistics and metadata summary.' },
+      ],
+      events: [
+        { name: 'graph-explorer-action', description: 'Host-level graph toolbar action request.' },
+      ],
+      themeAliases: [
+        '--sn-panel-bg',
+        '--sn-node-border',
+        '--sn-toolbar-bg',
+        '--sn-toolbar-border',
+        '--sn-toolbar-color',
+        '--sn-toolbar-hover',
+      ],
+    },
+  },
+  {
+    tagName: 'context-menu',
+    className: 'ContextMenu',
+    module: 'menu/ContextMenu/ContextMenu.js',
+    category: 'menu',
+    description: 'Generic context menu custom element for graph and canvas actions.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['context-menu', 'positioned-overlay', 'action-list', 'backdrop-dismiss'],
+      properties: [
+        { name: 'items', type: 'array', description: 'Menu item descriptors with label and icon.' },
+        { name: 'visible', type: 'boolean', description: 'Menu visibility state.' },
+      ],
+      methods: [
+        { name: 'show', type: 'function', description: 'Shows the menu at screen coordinates with action descriptors.' },
+        { name: 'hide', type: 'function', description: 'Hides the menu and clears actions.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-overlay-z-base',
+        '--sn-ctx-bg',
+        '--sn-ctx-border',
+        '--sn-ctx-color',
+        '--sn-ctx-hover',
+        '--sn-ctx-z',
+        '--sn-shadow-color',
+        '--sn-font',
+      ],
+    },
+  },
+  {
+    tagName: 'ctx-item',
+    className: 'CtxItem',
+    module: 'menu/ContextMenu/ContextMenu.js',
+    category: 'menu',
+    description: 'Internal item used by context-menu.',
+  },
+  {
+    tagName: 'panel-layout',
+    className: 'Layout',
+    module: 'layout/Layout/Layout.js',
+    category: 'layout',
+    description: 'Panel-based application layout shell.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['layout-tree', 'split-panels', 'panel-registry', 'local-storage'],
+      attributes: [
+        { name: 'storage-key', type: 'string', description: 'Optional key for persisted layout state.' },
+        { name: 'min-panel-size', type: 'number', description: 'Minimum panel size in pixels.' },
+      ],
+      properties: [
+        { name: 'layoutTree', type: 'object', description: 'Pure layout tree data rendered by layout-node children.' },
+        { name: 'panelTypes', type: 'object', description: 'Host-provided panel type descriptors keyed by panel type.' },
+        { name: 'panelChrome', type: 'boolean', description: 'Whether panel headers and split action zones are visible.' },
+      ],
+      methods: [
+        { name: 'registerPanelType', type: 'function', description: 'Registers a renderable panel type descriptor.' },
+      ],
+      events: [
+        { name: 'layout-change', description: 'Bubbles when the layout tree changes.' },
+      ],
+      themeAliases: [
+        '--sn-layout-bg',
+        '--sn-layout-gap-bg',
+        '--sn-layout-border',
+        '--sn-layout-resizer-size',
+      ],
+    },
+  },
+  {
+    tagName: 'layout-sidebar',
+    className: 'LayoutSidebar',
+    module: 'layout/LayoutSidebar/LayoutSidebar.js',
+    category: 'layout',
+    description: 'Sidebar navigation component for the panel layout.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['sidebar-sections', 'panel-drag', 'collapse-state', 'local-storage'],
+      properties: [
+        { name: 'disabled', type: 'boolean', description: 'Disables and hides sidebar interactions.' },
+        { name: 'sections', type: 'array', description: 'Sidebar section descriptors with nested panel entries.' },
+        { name: 'activeSection', type: 'string', description: 'Active sidebar section id.' },
+        { name: 'disabledSections', type: 'array', description: 'Disabled section ids.' },
+      ],
+      methods: [
+        { name: 'setSections', type: 'function', description: 'Replaces sidebar section data.' },
+        { name: 'setActiveSection', type: 'function', description: 'Sets active section id.' },
+        { name: 'setDisabledSections', type: 'function', description: 'Sets disabled section ids.' },
+        { name: 'resetConfig', type: 'function', description: 'Clears persisted sidebar configuration.' },
+      ],
+      events: [
+        { name: 'panel-close', description: 'Requests closing a panel from the sidebar.' },
+      ],
+      themeAliases: [
+        '--sn-bg',
+        '--sn-node-border',
+        '--sn-node-selected',
+        '--sn-node-hover',
+        '--sn-text',
+        '--sn-text-dim',
+      ],
+    },
+  },
+  {
+    tagName: 'layout-node',
+    className: 'LayoutNode',
+    module: 'layout/LayoutNode/LayoutNode.js',
+    category: 'layout',
+    description: 'Resizable and dockable layout node component.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['layout-branch', 'layout-panel', 'resize', 'collapse', 'fullscreen', 'panel-menu'],
+      attributes: [
+        { name: 'node-type', type: 'string', description: 'Layout node type: panel or split.' },
+        { name: 'direction', type: 'string', description: 'Split direction.' },
+        { name: 'panel-type', type: 'string', description: 'Host panel type for panel nodes.' },
+      ],
+      events: [
+        { name: 'layout-change', description: 'Emits after layout node structure changes.' },
+        { name: 'panel-collapse-toggle', description: 'Emits when a panel collapse state changes.' },
+        { name: 'panel-fullscreen', description: 'Requests fullscreen for a panel node.' },
+        { name: 'panel-type-menu', description: 'Requests opening panel type selection UI.' },
+      ],
+      themeAliases: [
+        '--sn-node-bg',
+        '--sn-node-border',
+        '--sn-node-header-bg',
+        '--sn-node-selected',
+        '--sn-text',
+        '--sn-text-dim',
+        '--sn-layout-gap-bg',
+      ],
+    },
+  },
+  {
+    tagName: 'cross-layout-portal-bridge',
+    className: 'CrossLayoutPortalBridge',
+    module: 'layout/CrossLayoutPortalBridge/CrossLayoutPortalBridge.js',
+    category: 'layout',
+    description: 'Viewport bridge component for connecting anchors across independent layouts.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['portal-bridge', 'cross-layout-connection', 'viewport-tracking'],
+      attributes: [
+        { name: 'source-selector', type: 'string', description: 'CSS selector for the source anchor element.' },
+        { name: 'target-selector', type: 'string', description: 'CSS selector for the target anchor element.' },
+        { name: 'source-side', type: 'string', description: 'Source anchor side.' },
+        { name: 'target-side', type: 'string', description: 'Target anchor side.' },
+        { name: 'path-style', type: 'string', description: 'Bridge path style, such as bezier or pcb.' },
+      ],
+      methods: [
+        { name: 'requestUpdate', type: 'function', description: 'Schedules bridge geometry refresh.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-portal-bridge-z',
+        '--sn-portal-bridge-stroke',
+        '--sn-portal-bridge-width',
+        '--sn-portal-bridge-dash',
+        '--sn-portal-bridge-dot',
+        '--sn-portal-bridge-grid',
+        '--sn-portal-bridge-stub',
+        '--sn-portal-bridge-chamfer',
+      ],
+    },
+  },
+  {
+    tagName: 'action-zone',
+    className: 'ActionZone',
+    module: 'layout/ActionZone/ActionZone.js',
+    category: 'layout',
+    description: 'Internal split and join gesture control used by layout-node.',
+  },
+  {
+    tagName: 'layout-preview',
+    className: 'LayoutPreview',
+    module: 'layout/LayoutPreview/LayoutPreview.js',
+    category: 'layout',
+    description: 'Internal split and join preview overlay used by panel-layout.',
+  },
+  {
+    tagName: 'panel-menu',
+    className: 'PanelMenu',
+    module: 'layout/PanelMenu/PanelMenu.js',
+    category: 'layout',
+    description: 'Internal panel type menu used by panel-layout.',
+  },
+  {
+    tagName: 'project-tabs',
+    className: 'ProjectTabs',
+    module: 'layout/ProjectTabs/ProjectTabs.js',
+    category: 'layout',
+    description: 'Generic project/workspace tab strip with add, select, and close events.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['tab-list', 'select', 'close', 'create'],
+      properties: [
+        { name: 'tabs', type: 'array', description: 'Array of tab descriptors with id, name, color, icon, and closeable fields.' },
+        { name: 'activeId', type: 'string', description: 'Active tab id.' },
+        { name: 'homeIcon', type: 'string', description: 'Material Symbols icon for the home tab.' },
+        { name: 'homeLabel', type: 'string', description: 'Accessible home tab label.' },
+        { name: 'addTitle', type: 'string', description: 'Accessible add button title.' },
+      ],
+      methods: [
+        { name: 'setTabs', type: 'function', description: 'Replaces tab data and active tab id.' },
+      ],
+      events: [
+        { name: 'project-tabs-home', description: 'Requests navigation to the home surface.' },
+        { name: 'project-tabs-add', description: 'Requests creation or opening of a tab.' },
+        {
+          name: 'project-tabs-select',
+          description: 'Requests tab selection.',
+          detail: [{ name: 'id', type: 'string', required: true }],
+        },
+        {
+          name: 'project-tabs-close',
+          description: 'Requests tab close.',
+          detail: [{ name: 'id', type: 'string', required: true }],
+        },
+      ],
+      themeAliases: [
+        '--sn-tabs-height',
+        '--sn-tabs-bg',
+        '--sn-tabs-active-bg',
+        '--sn-tabs-border',
+        '--sn-tabs-radius',
+      ],
+    },
+  },
+  {
+    tagName: 'project-tab-item',
+    className: 'ProjectTabItem',
+    module: 'layout/ProjectTabs/ProjectTabs.js',
+    category: 'layout',
+    description: 'Internal tab item used by project-tabs.',
+  },
+  {
+    tagName: 'code-block',
+    className: 'CodeBlock',
+    module: 'display/CodeBlock/CodeBlock.js',
+    category: 'display',
+    description: 'Code, markdown, image, and diagnostics display component.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['syntax-highlight', 'markdown-render', 'image-render', 'line-gutter', 'diagnostics'],
+      attributes: [
+        { name: 'image-api-base', type: 'string', description: 'Optional base URL for resolving image preview sources.' },
+      ],
+      properties: [
+        { name: 'code', type: 'string', description: 'Source, markdown text, or image path.' },
+        { name: 'lang', type: 'string', description: 'Language mode.' },
+        { name: 'isMarkdown', type: 'boolean', description: 'Whether markdown rendering is active.' },
+        { name: 'isImage', type: 'boolean', description: 'Whether image rendering is active.' },
+      ],
+      methods: [
+        { name: 'setContent', type: 'function', description: 'Sets source content, language mode, and optional render bases.' },
+        { name: 'setBasePath', type: 'function', description: 'Sets base path for rendered markdown links.' },
+        { name: 'setImageApiBase', type: 'function', description: 'Sets image API base URL.' },
+        { name: 'scrollToLine', type: 'function', description: 'Scrolls the code viewport to a line.' },
+        { name: 'setDiagnostics', type: 'function', description: 'Sets diagnostic squiggle data.' },
+        { name: 'clearDiagnostics', type: 'function', description: 'Clears diagnostic squiggles.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-bg',
+        '--sn-text',
+        '--sn-text-dim',
+        '--sn-node-border',
+        '--sn-cat-server',
+        '--sn-warning-color',
+        '--sn-syntax-keyword',
+        '--sn-syntax-string',
+        '--sn-syntax-comment',
+        '--sn-syntax-function',
+        '--sn-syntax-property',
+        '--sn-diagnostic-error-bg',
+        '--sn-diagnostic-warning-bg',
+      ],
+    },
+  },
+  {
+    tagName: 'cb-squiggle',
+    className: 'CbSquiggle',
+    module: 'display/CodeBlock/CodeBlock.js',
+    category: 'display',
+    description: 'Internal diagnostic squiggle marker used by code-block.',
+  },
+  {
+    tagName: 'source-viewer',
+    className: 'SourceViewer',
+    module: 'display/SourceViewer/SourceViewer.js',
+    category: 'display',
+    description: 'Source file viewer with code, markdown, image, metadata, actions, and transform modes.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['source-code', 'markdown-preview', 'image-preview', 'diagnostics', 'transform-toggle'],
+      attributes: [
+        { name: 'image-api-base', type: 'string', description: 'Optional base URL for resolving image preview sources.' },
+      ],
+      properties: [
+        { name: 'filename', type: 'string', description: 'Current file name or empty-state label.' },
+        { name: 'hasFile', type: 'boolean', description: 'Whether a file is currently displayed.' },
+        { name: 'viewMode', type: 'string', description: 'Current display mode: source, rendered, or transformed.' },
+      ],
+      methods: [
+        { name: 'showFile', type: 'function', description: 'Displays a source file from pure path, language, code, and optional transform data.' },
+        { name: 'showDirectory', type: 'function', description: 'Displays normalized directory text.' },
+        { name: 'showImage', type: 'function', description: 'Displays an image path through the nested code-block renderer.' },
+        { name: 'showError', type: 'function', description: 'Displays an error state.' },
+        { name: 'scrollToLine', type: 'function', description: 'Scrolls nested code-block to a line.' },
+        { name: 'setDiagnostics', type: 'function', description: 'Passes diagnostics to nested code-block.' },
+      ],
+      events: [
+        {
+          name: 'source-viewer-show-graph',
+          description: 'Requests graph focus for the current source path.',
+          detail: [{ name: 'path', type: 'string' }],
+        },
+        {
+          name: 'source-viewer-toggle-mode',
+          description: 'Fires after the viewer switches source/rendered/transformed mode.',
+          detail: [
+            { name: 'path', type: 'string' },
+            { name: 'mode', type: 'string' },
+          ],
+        },
+      ],
+      themeAliases: [
+        '--sn-source-bg',
+        '--sn-source-header-bg',
+        '--sn-source-border',
+        '--sn-source-toolbar-gap',
+        '--sn-source-action-icon-size',
+      ],
+    },
+  },
+  {
+    tagName: 'source-editor',
+    className: 'SourceEditor',
+    module: 'display/SourceEditor/SourceEditor.js',
+    category: 'display',
+    description: 'Generic source text editor with content, dirty state, readonly, disabled, focus, and tab handling.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['source-editing', 'dirty-state', 'keyboard-tab-indent'],
+      properties: [
+        { name: 'value', type: 'string', description: 'Editor content.' },
+        { name: 'language', type: 'string', description: 'Language label reflected to data-language.' },
+        { name: 'placeholder', type: 'string', description: 'Textarea placeholder.' },
+        { name: 'ariaLabel', type: 'string', description: 'Accessible editor label.' },
+        { name: 'readonly', type: 'boolean', description: 'Readonly editor state.' },
+        { name: 'disabled', type: 'boolean', description: 'Disabled editor state.' },
+        { name: 'dirty', type: 'boolean', description: 'Whether content differs from host baseline.' },
+      ],
+      methods: [
+        { name: 'getContent', type: 'function', description: 'Returns current editor text.' },
+        { name: 'setContent', type: 'function', description: 'Sets editor text and optional dirty state.' },
+        { name: 'setEditable', type: 'function', description: 'Toggles disabled state from an editable flag.' },
+        { name: 'setLanguage', type: 'function', description: 'Sets language metadata.' },
+        { name: 'setDirty', type: 'function', description: 'Sets dirty state.' },
+        { name: 'focus', type: 'function', description: 'Focuses the textarea.' },
+        { name: 'select', type: 'function', description: 'Selects textarea content.' },
+      ],
+      events: [
+        {
+          name: 'source-editor-input',
+          description: 'Emits after text changes.',
+          detail: [
+            { name: 'value', type: 'string', required: true },
+            { name: 'dirty', type: 'boolean', required: true },
+            { name: 'language', type: 'string', required: true },
+          ],
+        },
+      ],
+      themeAliases: [
+        '--sn-source-editor-bg',
+        '--sn-source-editor-color',
+        '--sn-source-editor-padding',
+        '--sn-source-editor-font-size',
+        '--sn-editor-bg',
+        '--sn-editor-text',
+        '--sn-editor-border',
+        '--sn-editor-radius',
+        '--sn-editor-font',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-loading-overlay',
+    className: 'LoadingOverlay',
+    module: 'display/LoadingOverlay/LoadingOverlay.js',
+    category: 'display',
+    description: 'Generic loading overlay with label, phase, progress, and secondary status text.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['loading-state', 'progress', 'hide-transition'],
+      properties: [
+        { name: 'label', type: 'string', description: 'Primary loading label.' },
+        { name: 'pct', type: 'number', description: 'Progress percentage from 0 to 100.' },
+        { name: 'phase', type: 'string', description: 'Current loading phase.' },
+        { name: 'sub', type: 'string', description: 'Secondary loading text.' },
+        { name: 'isHidden', type: 'boolean', description: 'Hidden transition state.' },
+      ],
+      methods: [
+        { name: 'show', type: 'function', description: 'Shows the overlay.' },
+        { name: 'hide', type: 'function', description: 'Hides the overlay and optionally calls completion after transition.' },
+        { name: 'setProgress', type: 'function', description: 'Sets clamped progress, phase, and secondary text.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-loading-bg',
+        '--sn-loading-text',
+        '--sn-loading-accent',
+        '--sn-loading-radius',
+      ],
+    },
+  },
+  {
+    tagName: 'output-list-preview',
+    className: 'OutputListPreview',
+    module: 'display/OutputListPreview/OutputListPreview.js',
+    category: 'display',
+    description: 'Generic normalized list preview for arbitrary output values.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['normalized-output-list', 'scalar-to-item', 'record-to-items', 'truncation', 'empty-state'],
+      properties: [
+        { name: 'title', type: 'string', description: 'Preview title.' },
+        { name: 'countText', type: 'string', description: 'Visible and total item count text.' },
+        { name: 'emptyText', type: 'string', description: 'Empty state text.' },
+        { name: 'isEmpty', type: 'boolean', description: 'Whether the normalized list has visible items.' },
+        { name: 'isTruncated', type: 'boolean', description: 'Whether output was truncated by the preview limit.' },
+        { name: 'showHeader', type: 'boolean', description: 'Whether header metadata is visible.' },
+      ],
+      methods: [
+        { name: 'setValue', type: 'function', description: 'Normalizes and renders arbitrary output value data.' },
+        { name: 'setItems', type: 'function', description: 'Alias for setting list-like output values.' },
+        { name: 'setData', type: 'function', description: 'Renders pre-normalized list preview data.' },
+        { name: 'getData', type: 'function', description: 'Returns current normalized list preview data.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-text',
+        '--sn-text-dim',
+        '--sn-font-ui',
+        '--sn-font-mono',
+        '--sn-node-bg',
+        '--sn-node-border',
+      ],
+    },
+  },
+  {
+    tagName: 'output-graph-preview',
+    className: 'OutputGraphPreview',
+    module: 'display/OutputGraphPreview/OutputGraphPreview.js',
+    category: 'display',
+    description: 'Generic normalized graph preview for node and edge output values.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['normalized-preview-graph', 'node-edge-preview', 'connection-normalization', 'truncation', 'empty-state'],
+      properties: [
+        { name: 'title', type: 'string', description: 'Preview title.' },
+        { name: 'countText', type: 'string', description: 'Visible node and edge count text.' },
+        { name: 'emptyText', type: 'string', description: 'Empty state text.' },
+        { name: 'isEmpty', type: 'boolean', description: 'Whether the normalized graph has visible nodes.' },
+        { name: 'isTruncated', type: 'boolean', description: 'Whether graph output was truncated by preview limits.' },
+        { name: 'showHeader', type: 'boolean', description: 'Whether header metadata is visible.' },
+      ],
+      methods: [
+        { name: 'setValue', type: 'function', description: 'Normalizes and renders arbitrary graph-like output data.' },
+        { name: 'setGraph', type: 'function', description: 'Alias for setting graph-like output data.' },
+        { name: 'setData', type: 'function', description: 'Renders pre-normalized graph preview data.' },
+        { name: 'getData', type: 'function', description: 'Returns current normalized graph preview data.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-text',
+        '--sn-text-dim',
+        '--sn-font-ui',
+        '--sn-font-mono',
+        '--sn-node-bg',
+        '--sn-node-border',
+        '--sn-node-hover',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-status-ribbon',
+    className: 'StatusRibbon',
+    module: 'display/StatusRibbon/StatusRibbon.js',
+    category: 'display',
+    description: 'Floating notification ribbon that auto-fades and displays active status.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['status', 'ribbon', 'auto-fade', 'themeable'],
+      attributes: [
+        { name: 'status-event', type: 'string', description: 'Event name for status changes.' },
+        { name: 'state-event', type: 'string', description: 'Event name for state changes.' },
+        { name: 'fade-timeout', type: 'number', description: 'Auto-fade duration in milliseconds.' },
+      ],
+      properties: [
+        { name: 'eventTarget', type: 'object', description: 'Target object to listen for events on.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-bg-overlay',
+        '--sn-shadow-lg',
+        '--sn-accent-glow',
+        '--sn-font-ui',
+        '--sn-text',
+        '--sn-text-dim',
+      ],
+    },
+  },
+  {
+    tagName: 'cell-bg',
+    className: 'CellBg',
+    module: 'effects/CellBg/CellBg.js',
+    category: 'effects',
+    description: 'Animated cellular automaton background effect.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['animated-background', 'canvas-effect', 'pulse', 'resize-aware', 'reduced-motion-friendly'],
+      properties: [
+        { name: 'active', type: 'boolean', description: 'Persistent animation state.' },
+      ],
+      methods: [
+        { name: 'toggle', type: 'function', description: 'Starts or stops persistent background animation.' },
+        { name: 'pulse', type: 'function', description: 'Runs a timed animation pulse.' },
+        { name: 'resize', type: 'function', description: 'Resizes the canvas to its host bounds.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-bg',
+      ],
+    },
+  },
+  {
+    tagName: 'quick-toolbar',
+    className: 'QuickToolbar',
+    module: 'toolbar/QuickToolbar/QuickToolbar.js',
+    category: 'toolbar',
+    description: 'Floating quick action toolbar for graph editing.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/graph-model-v1.json',
+      capabilities: ['floating-toolbar', 'node-actions', 'position-follow', 'action-callback'],
+      properties: [
+        { name: 'items', type: 'array', description: 'Toolbar action descriptors.' },
+        { name: 'visible', type: 'boolean', description: 'Toolbar visibility state.' },
+        { name: 'hasTitle', type: 'boolean', description: 'Whether the active node title row is visible.' },
+        { name: 'nodeTitle', type: 'string', description: 'Active node title shown for nodes without their own visible header.' },
+      ],
+      methods: [
+        { name: 'show', type: 'function', description: 'Shows toolbar for a node element.' },
+        { name: 'hide', type: 'function', description: 'Hides toolbar and clears active node.' },
+        { name: 'scheduleHide', type: 'function', description: 'Defers hover-triggered hiding while pointer focus may move into the toolbar.' },
+        { name: 'cancelHide', type: 'function', description: 'Cancels a pending hover-triggered hide.' },
+        { name: 'updatePosition', type: 'function', description: 'Repositions toolbar above the active node.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-overlay-z-base',
+        '--sn-toolbar-bg',
+        '--sn-toolbar-border',
+        '--sn-toolbar-color',
+        '--sn-toolbar-hover',
+        '--sn-toolbar-occlusion-bg',
+        '--sn-toolbar-active',
+        '--sn-toolbar-danger',
+        '--sn-toolbar-danger-color',
+        '--sn-toolbar-z',
+        '--sn-toolbar-title-color',
+        '--sn-toolbar-title-font-size',
+        '--sn-toolbar-title-font-weight',
+        '--sn-toolbar-title-line-height',
+        '--sn-toolbar-title-min-width',
+        '--sn-toolbar-title-max-width',
+        '--sn-toolbar-title-lines',
+        '--sn-shadow-color',
+        '--sn-cat-data',
+      ],
+    },
+  },
+  {
+    tagName: 'inspector-panel',
+    className: 'InspectorPanel',
+    module: 'inspector/InspectorPanel/InspectorPanel.js',
+    category: 'inspector',
+    description: 'Inspector panel for selected graph node properties.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/graph-model-v1.json',
+      capabilities: ['node-inspector', 'port-summary', 'control-editing', 'subgraph-enter', 'fire-action', 'resizable-panel'],
+      properties: [
+        { name: 'visible', type: 'boolean', description: 'Inspector visibility state.' },
+        { name: 'nodeLabel', type: 'string', description: 'Selected node label.' },
+        { name: 'nodeType', type: 'string', description: 'Selected node type.' },
+        { name: 'nodeCategory', type: 'string', description: 'Selected node category.' },
+        { name: 'nodeId', type: 'string', description: 'Selected node id.' },
+        { name: 'inputsList', type: 'array', description: 'Selected node input port descriptors.' },
+        { name: 'outputsList', type: 'array', description: 'Selected node output port descriptors.' },
+        { name: 'controlsList', type: 'array', description: 'Selected node control descriptors.' },
+        { name: 'hasSelection', type: 'boolean', description: 'Whether a node is selected.' },
+      ],
+      methods: [
+        { name: 'inspect', type: 'function', description: 'Renders inspector state for a node-like object.' },
+        { name: 'clear', type: 'function', description: 'Clears selected node state.' },
+      ],
+      events: [
+        { name: 'node-fire', description: 'Requests firing the selected node.', detail: [{ name: 'nodeId', type: 'string' }] },
+        { name: 'ctrl-change', description: 'Reports edited control values.', detail: [{ name: 'key', type: 'string' }, { name: 'value', type: 'any' }] },
+      ],
+      themeAliases: [
+        '--sn-node-bg',
+        '--sn-node-border',
+        '--sn-node-selected',
+        '--sn-font',
+        '--sn-text',
+        '--sn-text-dim',
+        '--sn-cat-server',
+        '--sn-subgraph-accent',
+        '--sn-success-color',
+      ],
+    },
+  },
+  {
+    tagName: 'insp-port-item',
+    className: 'InspPortItem',
+    module: 'inspector/InspectorPanel/InspectorPanel.js',
+    category: 'inspector',
+    description: 'Internal port inspector item used by inspector-panel.',
+  },
+  {
+    tagName: 'insp-ctrl-item',
+    className: 'InspCtrlItem',
+    module: 'inspector/InspectorPanel/InspectorPanel.js',
+    category: 'inspector',
+    description: 'Internal control inspector item used by inspector-panel.',
+  },
+  {
+    tagName: 'template-preview',
+    className: 'TemplatePreview',
+    module: 'inspector/TemplatePreview/TemplatePreview.js',
+    category: 'inspector',
+    description: 'Internal template preview used by inspector-panel.',
+  },
+  {
+    tagName: 'palette-browser',
+    className: 'PaletteBrowser',
+    module: 'palette/PaletteBrowser/PaletteBrowser.js',
+    category: 'palette',
+    description: 'Node palette browser for adding graph nodes.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/graph-model-v1.json',
+      capabilities: ['node-palette', 'category-list', 'search-filter', 'factory-select'],
+      properties: [
+        { name: 'categories', type: 'array', description: 'Rendered palette category descriptors.' },
+      ],
+      methods: [
+        { name: 'setCategories', type: 'function', description: 'Sets palette categories and item factories.' },
+        { name: 'onSelect', type: 'function', description: 'Sets host callback for palette item selection.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-ctx-bg',
+        '--sn-ctx-hover',
+        '--sn-node-border',
+        '--sn-node-selected',
+        '--sn-font',
+        '--sn-text',
+        '--sn-text-dim',
+      ],
+    },
+  },
+  {
+    tagName: 'pal-item',
+    className: 'PalItem',
+    module: 'palette/PaletteBrowser/PaletteBrowser.js',
+    category: 'palette',
+    description: 'Internal palette item used by palette-browser.',
+  },
+  {
+    tagName: 'pal-category',
+    className: 'PalCategory',
+    module: 'palette/PaletteBrowser/PaletteBrowser.js',
+    category: 'palette',
+    description: 'Internal palette category used by palette-browser.',
+  },
+  {
+    tagName: 'node-minimap',
+    className: 'Minimap',
+    module: 'canvas/Minimap/Minimap.js',
+    category: 'canvas',
+    description: 'Canvas minimap for graph navigation.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/graph-model-v1.json',
+      capabilities: ['graph-minimap', 'viewport-overview', 'drag-navigation', 'state-getter'],
+      properties: [
+        { name: 'visible', type: 'boolean', description: 'Minimap visibility state.' },
+      ],
+      methods: [
+        { name: 'setStateGetter', type: 'function', description: 'Sets host callback returning nodes, transform, and container size.' },
+      ],
+      events: [
+        {
+          name: 'minimap-navigate',
+          description: 'Requests canvas pan after minimap interaction.',
+          detail: [
+            { name: 'x', type: 'number' },
+            { name: 'y', type: 'number' },
+          ],
+        },
+      ],
+      themeAliases: [
+        '--sn-node-bg',
+        '--sn-node-border',
+        '--sn-node-selected',
+        '--sn-shadow-color',
+        '--sn-text',
+        '--sn-text-dim',
+      ],
+    },
+  },
+  {
+    tagName: 'node-search',
+    className: 'NodeSearch',
+    module: 'canvas/NodeSearch/NodeSearch.js',
+    category: 'canvas',
+    description: 'Search component for graph nodes and actions.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/graph-model-v1.json',
+      capabilities: ['node-search', 'query-filter', 'keyboard-dismiss', 'focus-callback'],
+      properties: [
+        { name: 'query', type: 'string', description: 'Current search query.' },
+        { name: 'results', type: 'array', description: 'Matched node result descriptors.' },
+        { name: 'isOpen', type: 'boolean', description: 'Search panel visibility state.' },
+      ],
+      methods: [
+        { name: 'configure', type: 'function', description: 'Sets host callbacks for node lookup and result selection.' },
+        { name: 'open', type: 'function', description: 'Opens and focuses the search panel.' },
+        { name: 'close', type: 'function', description: 'Closes search and clears query/results.' },
+        { name: 'toggle', type: 'function', description: 'Toggles search visibility.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-font',
+        '--sn-node-bg',
+        '--sn-node-border',
+        '--sn-shadow-color',
+        '--sn-text',
+        '--sn-text-dim',
+      ],
+    },
+  },
+  {
+    tagName: 'search-result-item',
+    className: 'SearchResultItem',
+    module: 'canvas/NodeSearch/NodeSearch.js',
+    category: 'canvas',
+    description: 'Internal result item used by node-search.',
+  },
+  {
+    tagName: 'graph-tabs',
+    className: 'GraphTabs',
+    module: 'canvas/GraphTabs/GraphTabs.js',
+    category: 'canvas',
+    description: 'Tab strip component for multiple graph views.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['graph-tab-strip', 'add-tab', 'switch-tab', 'close-tab', 'tab-state'],
+      properties: [
+        { name: 'tabItems', type: 'array', description: 'Rendered graph tab descriptors.' },
+        { name: 'activeTab', type: 'string', readonly: true, description: 'Active tab id.' },
+        { name: 'tabs', type: 'array', readonly: true, description: 'Current tab descriptors.' },
+      ],
+      methods: [
+        { name: 'setCallbacks', type: 'function', description: 'Sets host callbacks for switch, add, and close.' },
+        { name: 'addTab', type: 'function', description: 'Adds and activates a tab.' },
+        { name: 'switchTo', type: 'function', description: 'Activates a tab by id.' },
+        { name: 'removeTab', type: 'function', description: 'Removes a tab by id.' },
+        { name: 'setTabState', type: 'function', description: 'Stores host tab state.' },
+        { name: 'getTabState', type: 'function', description: 'Returns stored host tab state.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-ctx-bg',
+        '--sn-node-bg',
+        '--sn-node-border',
+        '--sn-node-selected',
+        '--sn-font',
+        '--sn-text',
+        '--sn-text-dim',
+      ],
+    },
+  },
+  {
+    tagName: 'tab-item',
+    className: 'TabItem',
+    module: 'canvas/GraphTabs/GraphTabs.js',
+    category: 'canvas',
+    description: 'Internal tab item used by graph-tabs.',
+  },
+  {
+    tagName: 'graph-breadcrumb',
+    className: 'Breadcrumb',
+    module: 'canvas/Breadcrumb/Breadcrumb.js',
+    category: 'canvas',
+    description: 'Breadcrumb component for graph and subgraph navigation.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/graph-model-v1.json',
+      capabilities: ['graph-breadcrumb', 'path-render', 'level-navigation', 'auto-hide-root'],
+      properties: [
+        { name: 'crumbs', type: 'array', description: 'Rendered breadcrumb segment descriptors.' },
+        { name: 'isVisible', type: 'boolean', description: 'Breadcrumb visibility state.' },
+      ],
+      methods: [
+        { name: 'onNavigate', type: 'function', description: 'Sets host callback for breadcrumb level selection.' },
+        { name: 'setPath', type: 'function', description: 'Renders graph path segments and hides at root.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-ctx-bg',
+        '--sn-ctx-hover',
+        '--sn-node-border',
+        '--sn-shadow-color',
+        '--sn-font',
+        '--sn-text',
+        '--sn-text-dim',
+      ],
+    },
+  },
+  {
+    tagName: 'breadcrumb-item',
+    className: 'BreadcrumbItem',
+    module: 'canvas/Breadcrumb/Breadcrumb.js',
+    category: 'canvas',
+    description: 'Internal breadcrumb item used by graph-breadcrumb.',
+  },
+  {
+    tagName: 'quick-open',
+    className: 'QuickOpen',
+    module: 'navigation/QuickOpen/QuickOpen.js',
+    category: 'navigation',
+    description: 'Generic fuzzy quick-open dialog for selecting files or application items.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['fuzzy-search', 'keyboard-navigation', 'modal-overlay', 'item-select'],
+      properties: [
+        { name: 'visible', type: 'boolean', description: 'Dialog visibility.' },
+        { name: 'query', type: 'string', description: 'Current search query.' },
+        { name: 'placeholder', type: 'string', description: 'Input placeholder.' },
+        { name: 'emptyText', type: 'string', description: 'No-results text.' },
+        { name: 'maxResults', type: 'number', description: 'Maximum rendered results.' },
+      ],
+      methods: [
+        { name: 'setItems', type: 'function', description: 'Sets normalized quick-open items.' },
+        { name: 'setFiles', type: 'function', description: 'Sets file-like quick-open items.' },
+        { name: 'open', type: 'function', description: 'Opens the dialog.' },
+        { name: 'close', type: 'function', description: 'Closes the dialog.' },
+        { name: 'toggle', type: 'function', description: 'Toggles dialog visibility.' },
+      ],
+      events: [
+        { name: 'quick-open-select', description: 'Emits selected item data.' },
+      ],
+      themeAliases: [
+        '--sn-bg-overlay',
+        '--sn-panel-bg',
+        '--sn-node-border',
+        '--sn-node-hover',
+        '--sn-text',
+        '--sn-text-dim',
+      ],
+    },
+  },
+  {
+    tagName: 'chat-message-item',
+    className: 'ChatMessageItem',
+    module: 'chat/ChatMessageItem/ChatMessageItem.js',
+    category: 'chat',
+    description: 'Generic chat message renderer for text, tool, board, and thinking messages.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['chat-message-render', 'markdown-text', 'tool-card', 'status-board', 'thinking-state', 'copy-action'],
+      properties: [
+        { name: 'type', type: 'string', description: 'Message item type.' },
+        { name: 'role', type: 'string', description: 'Message role used for rendering branch selection.' },
+        { name: 'text', type: 'string', description: 'Markdown-capable message text.' },
+        { name: 'isStreaming', type: 'boolean', description: 'Whether the message is currently streaming.' },
+        { name: 'isLatestTool', type: 'boolean', description: 'Whether the latest tool card should render open.' },
+        { name: 'name', type: 'string', description: 'Tool or message name.' },
+        { name: 'input', type: 'object', description: 'Tool input payload.' },
+        { name: 'result', type: 'object', description: 'Tool result payload.' },
+        { name: 'done', type: 'boolean', description: 'Whether a thinking message is complete.' },
+        { name: 'elapsedText', type: 'string', description: 'Human-readable elapsed time.' },
+        { name: 'status', type: 'string', description: 'Thinking or task status text.' },
+        { name: 'metaHtml', type: 'string', description: 'Trusted host-generated metadata markup.' },
+        { name: 'workSummaryHtml', type: 'string', description: 'Trusted host-generated completed work summary markup.' },
+        { name: 'copyText', type: 'string', description: 'Plain text copied by the host wrapper.' },
+        { name: 'cardItems', type: 'array', description: 'Status card descriptors rendered inside board messages.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-bg',
+        '--sn-text',
+        '--sn-text-dim',
+        '--sn-font-mono',
+        '--sn-node-bg',
+        '--sn-node-border',
+        '--sn-node-hover',
+        '--sn-node-selected',
+        '--sn-accent-bg',
+        '--sn-accent-bg-subtle',
+        '--sn-success-color',
+        '--sn-danger-color',
+      ],
+    },
+  },
+  {
+    tagName: 'chat-transcript',
+    className: 'ChatTranscript',
+    module: 'chat/ChatTranscript/ChatTranscript.js',
+    category: 'chat',
+    description: 'Generic chat transcript shell with message rendering, scroll controls, live status, and status card events.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['chat-transcript', 'message-list', 'scroll-state', 'status-card-events'],
+      properties: [
+        { name: 'messageItems', type: 'array', description: 'Normalized message item descriptors rendered by chat-message-item.' },
+      ],
+      methods: [
+        { name: 'setMessageItems', type: 'function', description: 'Replaces transcript messages from pure data.' },
+        { name: 'scrollToBottom', type: 'function', description: 'Scrolls the message container to the bottom.' },
+        { name: 'getScrollState', type: 'function', description: 'Returns overflow and bottom-position state.' },
+        { name: 'renderLiveStatus', type: 'function', description: 'Renders host-provided live status metadata.' },
+        { name: 'findStatusBoard', type: 'function', description: 'Finds a rendered status board by card ids.' },
+        { name: 'updateStatusCard', type: 'function', description: 'Updates a status card by host-owned id.' },
+      ],
+      events: [
+        { name: 'chat-transcript-scroll', description: 'Emits current scroll state.', detail: [{ name: 'isAtBottom', type: 'boolean' }] },
+        { name: 'chat-transcript-scroll-bottom', description: 'Emits after scroll-to-bottom is requested.' },
+        { name: 'status-card-open', description: 'Requests opening a linked status card target.' },
+        { name: 'message-copy', description: 'Reports copy result for message text.' },
+      ],
+      themeAliases: [
+        '--sn-chat-bg',
+        '--sn-chat-message-bg',
+        '--sn-chat-user-message-bg',
+        '--sn-chat-agent-message-bg',
+        '--sn-chat-message-radius',
+        '--sn-chat-gap',
+      ],
+    },
+  },
+  {
+    tagName: 'chat-composer',
+    className: 'ChatComposer',
+    module: 'chat/ChatComposer/ChatComposer.js',
+    category: 'chat',
+    description: 'Generic chat composer with input, context chips, footer controls, and autocomplete host.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['chat-input', 'context-chips', 'footer-controls', 'autocomplete-host', 'drag-drop-context'],
+      properties: [
+        { name: 'value', type: 'string', description: 'Current input value.' },
+        { name: 'disabled', type: 'boolean', description: 'Disables the textarea.' },
+        { name: 'placeholder', type: 'string', description: 'Textarea placeholder.' },
+        { name: 'attachedContext', type: 'array', description: 'Context chip descriptors.' },
+        { name: 'footerHtml', type: 'string', description: 'Trusted footer controls HTML owned by the host adapter.' },
+        { name: 'isSending', type: 'boolean', description: 'Switches send button into stop state.' },
+      ],
+      methods: [
+        { name: 'setValue', type: 'function', description: 'Sets input value.' },
+        { name: 'setAttachedContext', type: 'function', description: 'Sets context chip descriptors.' },
+        { name: 'setFooterHtml', type: 'function', description: 'Sets trusted footer controls HTML.' },
+        { name: 'setDisabled', type: 'function', description: 'Sets disabled state.' },
+        { name: 'setSending', type: 'function', description: 'Sets sending state.' },
+      ],
+      events: [
+        { name: 'chat-composer-input', description: 'Emits input value and caret position.' },
+        { name: 'chat-composer-submit', description: 'Requests submit from Enter.' },
+        { name: 'chat-composer-send', description: 'Requests send or stop from the send button.' },
+        { name: 'chat-composer-key', description: 'Passes navigation/autocomplete keys to the host.' },
+        { name: 'chat-composer-param-change', description: 'Emits footer control value changes.' },
+        { name: 'chat-composer-context-remove', description: 'Requests context chip removal.' },
+        { name: 'chat-composer-context-drop', description: 'Requests dropped context attachment.' },
+      ],
+      themeAliases: [
+        '--sn-composer-bg',
+        '--sn-composer-border',
+        '--sn-composer-radius',
+        '--sn-composer-control-gap',
+        '--sn-composer-send-hover-bg',
+        '--sn-composer-footer-icon-size',
+        '--sn-composer-footer-toggle-icon-size',
+        '--sn-composer-input-min-height',
+      ],
+    },
+  },
+  {
+    tagName: 'chat-list',
+    className: 'ChatList',
+    module: 'chat/ChatList/ChatList.js',
+    category: 'chat',
+    description: 'Generic chat list shell with filters, creation action, item list, and selection/delete events.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['chat-list', 'filter-tabs', 'create-action', 'select', 'delete'],
+      properties: [
+        { name: 'chatItems', type: 'array', description: 'Chat item descriptors rendered as chat-list-item children.' },
+        { name: 'filter', type: 'string', description: 'Active filter id.' },
+        { name: 'title', type: 'string', description: 'List heading.' },
+        { name: 'newLabel', type: 'string', description: 'Create button label.' },
+        { name: 'emptyMessage', type: 'string', description: 'Empty state message.' },
+      ],
+      methods: [
+        { name: 'setItems', type: 'function', description: 'Replaces chat item descriptors.' },
+        { name: 'setEmptyMessage', type: 'function', description: 'Sets empty state text.' },
+        { name: 'setFilter', type: 'function', description: 'Sets active filter and emits filter event.' },
+      ],
+      events: [
+        { name: 'chat-list-new', description: 'Requests a new chat.' },
+        { name: 'chat-list-select', description: 'Emits selected chat id and item.' },
+        { name: 'chat-list-delete', description: 'Requests chat deletion.' },
+        { name: 'chat-list-filter', description: 'Emits active filter changes.' },
+      ],
+      themeAliases: [
+        '--sn-node-bg',
+        '--sn-node-border',
+        '--sn-node-hover',
+        '--sn-node-selected',
+        '--sn-text',
+        '--sn-text-dim',
+      ],
+    },
+  },
+  {
+    tagName: 'chat-list-item',
+    className: 'ChatListItem',
+    module: 'chat/ChatListItem/ChatListItem.js',
+    category: 'chat',
+    description: 'Generic chat list item with project badge, adapter, preview, metadata, nesting, and delete action.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['chat-list-row', 'active-state', 'nested-depth', 'delete-action', 'metadata'],
+      properties: [
+        { name: 'id', type: 'string', description: 'Chat id.' },
+        { name: 'name', type: 'string', description: 'Chat display name.' },
+        { name: 'project', type: 'string', description: 'Project label.' },
+        { name: 'adapter', type: 'string', description: 'Provider adapter label.' },
+        { name: 'status', type: 'string', description: 'Chat status label.' },
+        { name: 'lastMessage', type: 'string', description: 'Preview text.' },
+        { name: 'depth', type: 'number', description: 'Nested visual depth.' },
+        { name: 'isActive', type: 'boolean', description: 'Active row state.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-node-bg',
+        '--sn-node-border',
+        '--sn-node-hover',
+        '--sn-node-selected',
+        '--sn-text',
+        '--sn-text-dim',
+        '--sn-danger-color',
+      ],
+    },
+  },
+  {
+    tagName: 'chat-sidebar-shell',
+    className: 'ChatSidebarShell',
+    module: 'chat/ChatSidebar/ChatSidebar.js',
+    category: 'chat',
+    description: 'Generic collapsible and resizable chat navigation shell.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['chat-sidebar', 'collapse', 'resize', 'nested-chat-list', 'responsive-auto-collapse'],
+      properties: [
+        { name: 'chats', type: 'array', description: 'Nested chat descriptors.' },
+        { name: 'navCollapsed', type: 'boolean', description: 'Collapsed navigation state.' },
+        { name: 'navWidth', type: 'number', description: 'Expanded navigation width.' },
+        { name: 'groupDividers', type: 'boolean', description: 'Whether grouped root chat rows render project dividers.' },
+      ],
+      methods: [
+        { name: 'setChats', type: 'function', description: 'Replaces nested chat descriptors.' },
+        { name: 'setCollapsed', type: 'function', description: 'Sets collapsed state.' },
+        { name: 'setWidth', type: 'function', description: 'Sets clamped navigation width.' },
+        { name: 'setGroupDividers', type: 'function', description: 'Toggles grouped root chat dividers.' },
+      ],
+      events: [
+        { name: 'chat-sidebar-new', description: 'Requests creating a chat.' },
+        { name: 'chat-sidebar-select', description: 'Emits selected chat id.' },
+        { name: 'chat-sidebar-delete', description: 'Requests chat deletion.' },
+        { name: 'chat-sidebar-toggle', description: 'Emits child expansion changes.' },
+        { name: 'chat-sidebar-collapse-change', description: 'Emits collapsed state changes.' },
+        { name: 'chat-sidebar-width-change', description: 'Emits width changes.' },
+      ],
+      themeAliases: [
+        '--sn-node-bg',
+        '--sn-node-hover',
+        '--sn-text',
+        '--sn-text-dim',
+      ],
+    },
+  },
+  {
+    tagName: 'chat-sidebar-item',
+    className: 'ChatSidebarItem',
+    module: 'chat/ChatSidebarItem/ChatSidebarItem.js',
+    category: 'chat',
+    description: 'Generic chat sidebar root item with nested child chat rendering.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['chat-sidebar-row', 'nested-children', 'active-state', 'delete-action', 'status-slot'],
+      properties: [
+        { name: 'id', type: 'string', description: 'Chat id.' },
+        { name: 'cleanName', type: 'string', description: 'Rendered chat name.' },
+        { name: 'adapter', type: 'string', description: 'Provider adapter label.' },
+        { name: 'agentColor', type: 'string', description: 'Optional row icon accent color.' },
+        { name: 'statusKind', type: 'string', description: 'Status visual kind: running, done, or error.' },
+        { name: 'statusIcon', type: 'string', description: 'Material Symbols status icon name.' },
+        { name: 'statusTitle', type: 'string', description: 'Accessible status tooltip text.' },
+        { name: 'subChats', type: 'array', description: 'Child chat descriptors.' },
+        { name: 'isExpanded', type: 'boolean', description: 'Child list expanded state.' },
+        { name: 'isActive', type: 'boolean', description: 'Active row state.' },
+      ],
+      events: [
+        { name: 'chat-sidebar-select', description: 'Emits selected chat id and item data.' },
+        { name: 'chat-sidebar-toggle', description: 'Emits child expansion changes.' },
+        { name: 'chat-sidebar-delete', description: 'Requests deletion.' },
+      ],
+      themeAliases: [
+        '--sn-node-bg',
+        '--sn-node-hover',
+        '--sn-text',
+        '--sn-text-dim',
+        '--sn-cat-server',
+        '--sn-danger-color',
+      ],
+    },
+  },
+  {
+    tagName: 'chat-sidebar-sub-item',
+    className: 'ChatSidebarSubItem',
+    module: 'chat/ChatSidebarItem/ChatSidebarItem.js',
+    category: 'chat',
+    description: 'Generic chat sidebar child item.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['chat-sidebar-child-row', 'active-state', 'delete-action', 'status-slot'],
+      properties: [
+        { name: 'id', type: 'string', description: 'Child chat id.' },
+        { name: 'cleanName', type: 'string', description: 'Rendered child chat name.' },
+        { name: 'adapter', type: 'string', description: 'Provider adapter label.' },
+        { name: 'agentType', type: 'string', description: 'Child agent type label.' },
+        { name: 'agentColor', type: 'string', description: 'Optional row icon accent color.' },
+        { name: 'statusKind', type: 'string', description: 'Status visual kind: running, done, or error.' },
+        { name: 'statusIcon', type: 'string', description: 'Material Symbols status icon name.' },
+        { name: 'statusTitle', type: 'string', description: 'Accessible status tooltip text.' },
+        { name: 'isActive', type: 'boolean', description: 'Active row state.' },
+      ],
+      events: [
+        { name: 'chat-sidebar-select', description: 'Emits selected child chat id and item data.' },
+        { name: 'chat-sidebar-delete', description: 'Requests child chat deletion.' },
+      ],
+      themeAliases: [
+        '--sn-node-bg',
+        '--sn-node-hover',
+        '--sn-text',
+        '--sn-text-dim',
+        '--sn-font-mono',
+        '--sn-cat-server',
+        '--sn-danger-color',
+      ],
+    },
+  },
+  {
+    tagName: 'sidebar-section',
+    className: 'SidebarSection',
+    module: 'layout/LayoutSidebar/SidebarSection.js',
+    category: 'layout',
+    description: 'Internal section item used by layout-sidebar.',
+  },
+  {
+    tagName: 'sidebar-sub-item',
+    className: 'SidebarSubItem',
+    module: 'layout/LayoutSidebar/SidebarSection.js',
+    category: 'layout',
+    description: 'Internal sidebar child item used by layout-sidebar.',
+  },
+  {
+    tagName: 'sn-list-item',
+    className: 'ListItem',
+    module: 'list/ListItem/ListItem.js',
+    category: 'list',
+    description: 'Generic selectable list item with label, description, icon, meta text, and item payload event.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['selectable-list-item', 'keyboard-select', 'payload-event'],
+      properties: [
+        { name: 'label', type: 'string', description: 'Primary row text.' },
+        { name: 'description', type: 'string', description: 'Secondary row text.' },
+        { name: 'icon', type: 'string', description: 'Optional Material Symbols icon name.' },
+        { name: 'meta', type: 'string', description: 'Trailing metadata text.' },
+        { name: 'active', type: 'boolean', description: 'Active row state reflected to host attribute.' },
+        { name: 'disabled', type: 'boolean', description: 'Disabled row state reflected to host attribute.' },
+        { name: 'item', type: 'object', description: 'Host-owned payload emitted on select.' },
+      ],
+      methods: [
+        { name: 'setItem', type: 'function', description: 'Sets payload and row display properties from one item descriptor.' },
+      ],
+      events: [
+        {
+          name: 'sn-list-item-select',
+          description: 'Emits selected payload unless the row is disabled.',
+          detail: [{ name: 'item', type: 'object' }],
+        },
+      ],
+      themeAliases: [
+        '--sn-list-item-bg',
+        '--sn-list-item-hover-bg',
+        '--sn-list-item-active-bg',
+        '--sn-list-item-radius',
+        '--sn-list-item-gap',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-list-detail-shell',
+    className: 'ListDetailShell',
+    module: 'list/ListDetailShell/ListDetailShell.js',
+    category: 'list',
+    description: 'Generic two-pane list and detail shell with host-owned content slots.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['list-detail-layout', 'slot-composition', 'responsive-stack', 'theme-aliases'],
+      attributes: [
+        { name: 'sidebar-title', type: 'string', description: 'Sidebar header title.' },
+        { name: 'sidebar-icon', type: 'string', description: 'Optional sidebar Material Symbols icon name.' },
+        { name: 'detail-title', type: 'string', description: 'Detail header title.' },
+        { name: 'detail-icon', type: 'string', description: 'Optional detail Material Symbols icon name.' },
+        { name: 'detail-description', type: 'string', description: 'Optional detail header description.' },
+        { name: 'detail-mode', type: 'string', description: 'Detail density mode, such as compact.' },
+        { name: 'has-detail', type: 'boolean', description: 'Shows detail content and hides the detail empty state.' },
+      ],
+      properties: [
+        { name: 'sidebarTitle', type: 'string', description: 'Sidebar header title.' },
+        { name: 'sidebarIcon', type: 'string', description: 'Optional sidebar icon name.' },
+        { name: 'detailTitle', type: 'string', description: 'Detail header title.' },
+        { name: 'detailIcon', type: 'string', description: 'Optional detail icon name.' },
+        { name: 'detailDescription', type: 'string', description: 'Optional detail header description.' },
+        { name: 'detailMode', type: 'string', description: 'Detail density mode.' },
+        { name: 'hasDetail', type: 'boolean', description: 'Detail availability reflected by the has-detail attribute.' },
+      ],
+      slots: [
+        { name: 'list-header', description: 'Optional host-owned sidebar header content.' },
+        { name: 'sidebar-actions', description: 'Optional commands aligned in the sidebar header.' },
+        { name: 'list', description: 'Host-owned list content.' },
+        { name: 'list-empty', description: 'Host-owned list empty state.' },
+        { name: 'detail-header', description: 'Optional host-owned detail header content.' },
+        { name: 'detail-actions', description: 'Optional commands aligned in the detail header.' },
+        { name: 'detail', description: 'Host-owned detail content.' },
+        { name: 'detail-empty', description: 'Host-owned detail empty state.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-list-detail-bg',
+        '--sn-list-detail-border',
+        '--sn-list-detail-radius',
+        '--sn-list-detail-sidebar-width',
+        '--sn-list-detail-sidebar-bg',
+        '--sn-list-detail-main-bg',
+        '--sn-list-detail-header-bg',
+        '--sn-list-detail-header-padding',
+        '--sn-list-detail-main-padding',
+        '--sn-list-detail-title-size',
+        '--sn-list-detail-title-color',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-tree-view',
+    className: 'TreeView',
+    module: 'tree/TreeView/TreeView.js',
+    category: 'tree',
+    description: 'Generic tree view with selection, expansion, filtering, drag payloads, and host-owned item data.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['tree-data', 'select', 'expand-collapse', 'filter', 'drag-payload', 'local-storage'],
+      properties: [
+        { name: 'items', type: 'array', description: 'Tree item descriptors with id/path, label, icon, badges, children, and payload fields.' },
+        { name: 'selectedId', type: 'string', description: 'Selected item id or path.' },
+        { name: 'expandedIds', type: 'array', description: 'Expanded item ids.' },
+        { name: 'defaultExpandedIds', type: 'array', description: 'Initial expanded ids when storage has no value.' },
+        { name: 'filterText', type: 'string', description: 'Filter text matched against item labels and metadata.' },
+        { name: 'storageKey', type: 'string', description: 'Optional localStorage key for expanded state.' },
+        { name: 'toggleBranchesOnSelect', type: 'boolean', description: 'Toggles branch rows when selected.' },
+      ],
+      methods: [
+        { name: 'setItems', type: 'function', description: 'Replaces tree data.' },
+        { name: 'collapseAll', type: 'function', description: 'Collapses all branches.' },
+        { name: 'expandAncestors', type: 'function', description: 'Expands ancestors for an id or path.' },
+        { name: 'scrollSelectedIntoView', type: 'function', description: 'Scrolls selected row into view.' },
+      ],
+      events: [
+        {
+          name: 'sn-tree-select',
+          description: 'Emits the selected item descriptor.',
+          detail: [{ name: 'item', type: 'object', required: true }],
+        },
+        {
+          name: 'sn-tree-dragstart',
+          description: 'Emits drag item and payload metadata.',
+          detail: [
+            { name: 'item', type: 'object', required: true },
+            { name: 'payload', type: 'any' },
+          ],
+        },
+      ],
+      themeAliases: [
+        '--sn-tree-row-height',
+        '--sn-tree-indent',
+        '--sn-tree-icon-size',
+        '--sn-tree-row-radius',
+        '--sn-tree-row-selected-bg',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-tree-panel',
+    className: 'TreePanel',
+    module: 'tree/TreePanel/TreePanel.js',
+    category: 'tree',
+    description: 'Generic tree panel with filter input, collapse action, placeholder state, and an embedded tree view.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['tree-data', 'tree-panel-chrome', 'filter', 'expand-collapse', 'placeholder', 'local-storage'],
+      attributes: [
+        { name: 'title', type: 'string', description: 'Optional panel heading text.' },
+        { name: 'title-icon', type: 'string', description: 'Optional Material Symbols icon name shown before the title.' },
+        { name: 'placeholder', type: 'string', description: 'Placeholder text shown before tree data is available.' },
+        { name: 'filter-placeholder', type: 'string', description: 'Search input placeholder.' },
+        { name: 'collapse-title', type: 'string', description: 'Accessible title for the collapse-all action.' },
+      ],
+      properties: [
+        { name: 'items', type: 'array', description: 'Tree item descriptors forwarded to the embedded tree view.' },
+        { name: 'selectedId', type: 'string', description: 'Selected item id or path.' },
+        { name: 'expandedIds', type: 'array', description: 'Expanded item ids.' },
+        { name: 'defaultExpandedIds', type: 'array', description: 'Initial expanded ids when storage has no value.' },
+        { name: 'filterText', type: 'string', description: 'Filter text mirrored to the input and embedded tree view.' },
+        { name: 'storageKey', type: 'string', description: 'Optional localStorage key for expanded state.' },
+        { name: 'toggleBranchesOnSelect', type: 'boolean', description: 'Toggles branch rows when selected.' },
+      ],
+      methods: [
+        { name: 'setItems', type: 'function', description: 'Replaces tree data.' },
+        { name: 'collapseAll', type: 'function', description: 'Collapses all branches.' },
+        { name: 'expandAncestors', type: 'function', description: 'Expands ancestors for an id or path.' },
+        { name: 'scrollSelectedIntoView', type: 'function', description: 'Scrolls selected row into view.' },
+        { name: 'showPlaceholder', type: 'function', description: 'Shows placeholder text and hides the embedded tree.' },
+        { name: 'showTree', type: 'function', description: 'Shows the embedded tree and hides the placeholder.' },
+      ],
+      events: [
+        {
+          name: 'sn-tree-select',
+          description: 'Bubbles selected item events from the embedded tree view.',
+          detail: [{ name: 'item', type: 'object', required: true }],
+        },
+        {
+          name: 'sn-tree-dragstart',
+          description: 'Bubbles drag item and payload metadata from the embedded tree view.',
+          detail: [
+            { name: 'item', type: 'object', required: true },
+            { name: 'payload', type: 'any' },
+          ],
+        },
+        {
+          name: 'sn-tree-toggle',
+          description: 'Bubbles branch toggle events from the embedded tree view.',
+          detail: [{ name: 'item', type: 'object' }],
+        },
+        {
+          name: 'sn-tree-panel-filter',
+          description: 'Emits when the panel filter input changes.',
+          detail: [{ name: 'filterText', type: 'string' }],
+        },
+        {
+          name: 'sn-tree-panel-collapse',
+          description: 'Emits after the panel collapse-all action is requested.',
+        },
+      ],
+      themeAliases: [
+        '--sn-tree-panel-font-size',
+        '--sn-tree-panel-toolbar-gap',
+        '--sn-tree-panel-toolbar-padding',
+        '--sn-tree-panel-row-min-height',
+        '--sn-tree-panel-label-weight',
+        '--sn-tree-row-selected-bg',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-button',
+    className: 'ActionButton',
+    module: 'control/Button/Button.js',
+    category: 'control',
+    description: 'Generic themeable action control for buttons, icon buttons, and command rows.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['control', 'button', 'slots', 'keyboard-activation', 'themeable'],
+      attributes: [
+        { name: 'variant', type: 'string', description: 'Control variant: default, primary, danger, or icon.' },
+        { name: 'disabled', type: 'boolean', description: 'Disables pointer and keyboard activation.' },
+      ],
+      slots: [
+        { name: 'default', description: 'Button label and optional icon content.' },
+      ],
+      events: [
+        { name: 'click', description: 'Native click event emitted by pointer or keyboard activation.' },
+      ],
+      themeAliases: [
+        '--sn-button-bg',
+        '--sn-button-color',
+        '--sn-button-border',
+        '--sn-button-padding',
+        '--sn-button-radius',
+        '--sn-button-gap',
+        '--sn-button-min-height',
+        '--sn-button-font-size',
+        '--sn-button-font-weight',
+        '--sn-button-line-height',
+        '--sn-button-hover-bg',
+        '--sn-button-hover-border',
+        '--sn-button-disabled-opacity',
+        '--sn-button-primary-bg',
+        '--sn-button-primary-border',
+        '--sn-button-primary-color',
+        '--sn-button-primary-hover-filter',
+        '--sn-button-danger-bg',
+        '--sn-button-danger-border',
+        '--sn-button-danger-color',
+        '--sn-button-danger-hover-bg',
+        '--sn-button-danger-hover-border',
+        '--sn-button-danger-hover-color',
+        '--sn-button-icon-size',
+        '--sn-button-icon-font-size',
+        '--sn-button-focus-ring',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-field',
+    className: 'FormField',
+    module: 'control/Field/Field.js',
+    category: 'control',
+    description: 'Themeable form field wrapper for native inputs, selects, textareas, labels, and hints.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['form-field', 'native-controls', 'slots', 'themeable'],
+      attributes: [
+        { name: 'variant', type: 'string', description: 'Field density/layout variant: default, compact, or inline.' },
+      ],
+      slots: [
+        { name: 'default', description: 'Native input, select, textarea, label, and optional hint content.' },
+        { name: 'label', description: 'Optional explicit label slot when the label is not a direct child.' },
+        { name: 'hint', description: 'Optional helper text rendered under the control.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-field-margin-block-end',
+        '--sn-field-label-margin-block-end',
+        '--sn-field-label-color',
+        '--sn-field-label-size',
+        '--sn-field-label-weight',
+        '--sn-field-label-line-height',
+        '--sn-field-label-transform',
+        '--sn-field-control-bg',
+        '--sn-field-control-border',
+        '--sn-field-control-color',
+        '--sn-field-control-padding',
+        '--sn-field-control-radius',
+        '--sn-field-control-font-size',
+        '--sn-field-control-line-height',
+        '--sn-field-control-focus-border',
+        '--sn-field-control-focus-shadow',
+        '--sn-field-placeholder-color',
+        '--sn-field-textarea-min-height',
+        '--sn-field-hint-margin-block-start',
+        '--sn-field-hint-color',
+        '--sn-field-hint-size',
+        '--sn-field-hint-line-height',
+        '--sn-field-inline-gap',
+        '--sn-field-compact-margin-block-end',
+        '--sn-field-compact-control-padding',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-card',
+    className: 'SurfaceCard',
+    module: 'surface/Card/Card.js',
+    category: 'surface',
+    description: 'Generic themeable surface card for dashboard, list, detail, and settings UI composition.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['surface', 'card', 'slots', 'interactive-state', 'themeable'],
+      attributes: [
+        { name: 'variant', type: 'string', description: 'Surface variant: default, flat, or panel.' },
+        { name: 'interactive', type: 'boolean', description: 'Enables hover affordance for clickable cards.' },
+      ],
+      slots: [
+        { name: 'default', description: 'Main card content.' },
+        { name: 'title', description: 'Optional card title content.' },
+        { name: 'footer', description: 'Optional footer/action row content.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-card-bg',
+        '--sn-card-border',
+        '--sn-card-radius',
+        '--sn-card-padding',
+        '--sn-card-margin-block-end',
+        '--sn-card-hover-bg',
+        '--sn-card-hover-border',
+        '--sn-card-title-color',
+        '--sn-card-title-size',
+        '--sn-card-title-weight',
+        '--sn-card-title-margin-block-end',
+        '--sn-card-footer-gap',
+        '--sn-card-footer-margin-block-start',
+        '--sn-card-footer-padding-block-start',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-badge',
+    className: 'StatusBadge',
+    module: 'display/Badge/Badge.js',
+    category: 'display',
+    description: 'Generic themeable status badge for compact state, type, and metadata labels.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['status', 'badge', 'slots', 'themeable'],
+      attributes: [
+        { name: 'variant', type: 'string', description: 'Status variant: default, success, info, warning, or error.' },
+      ],
+      slots: [
+        { name: 'default', description: 'Badge label and optional icon content.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-badge-bg',
+        '--sn-badge-color',
+        '--sn-badge-border',
+        '--sn-badge-padding',
+        '--sn-badge-radius',
+        '--sn-badge-gap',
+        '--sn-badge-font-size',
+        '--sn-badge-font-weight',
+        '--sn-badge-line-height',
+        '--sn-badge-success-color',
+        '--sn-badge-success-border',
+        '--sn-badge-info-color',
+        '--sn-badge-info-border',
+        '--sn-badge-warning-color',
+        '--sn-badge-warning-border',
+        '--sn-badge-error-color',
+        '--sn-badge-error-border',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-metric',
+    className: 'MetricItem',
+    module: 'display/Metric/Metric.js',
+    category: 'display',
+    description: 'Generic themeable label/value metric row for dashboard stats, health summaries, and settings metadata.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['metric', 'stat', 'label-value', 'slots', 'status', 'themeable'],
+      attributes: [
+        { name: 'variant', type: 'string', description: 'Metric variant: default or stacked.' },
+        { name: 'status', type: 'string', description: 'Value status: default, success, warning, or error.' },
+      ],
+      slots: [
+        { name: 'label', description: 'Metric label content.' },
+        { name: 'value', description: 'Metric value content.' },
+        { name: 'default', description: 'Fallback metric value content.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-metric-gap',
+        '--sn-metric-padding',
+        '--sn-metric-border',
+        '--sn-metric-color',
+        '--sn-metric-label-color',
+        '--sn-metric-label-size',
+        '--sn-metric-value-color',
+        '--sn-metric-value-size',
+        '--sn-metric-value-weight',
+        '--sn-metric-value-font',
+        '--sn-metric-success-color',
+        '--sn-metric-warning-color',
+        '--sn-metric-error-color',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-data-table',
+    className: 'DataTable',
+    module: 'display/DataTable/DataTable.js',
+    category: 'display',
+    description: 'Generic themeable data table for provider-neutral tabular records.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['data-table', 'column-schema', 'row-records', 'structured-cells', 'empty-state', 'themeable'],
+      properties: [
+        { name: 'emptyText', type: 'string', description: 'Empty state text.' },
+        { name: 'isEmpty', type: 'boolean', description: 'Whether the table has no rendered rows or columns.' },
+      ],
+      methods: [
+        { name: 'setColumns', type: 'function', description: 'Sets column descriptors with keys, labels, and alignment.' },
+        { name: 'setRows', type: 'function', description: 'Sets row records or cell descriptor maps.' },
+        { name: 'setData', type: 'function', description: 'Sets columns, rows, and optional empty text in one call.' },
+        { name: 'getData', type: 'function', description: 'Returns the current column and row descriptors.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-data-table-bg',
+        '--sn-data-table-border',
+        '--sn-data-table-radius',
+        '--sn-data-table-color',
+        '--sn-data-table-header-bg',
+        '--sn-data-table-header-color',
+        '--sn-data-table-header-border',
+        '--sn-data-table-header-size',
+        '--sn-data-table-header-weight',
+        '--sn-data-table-header-transform',
+        '--sn-data-table-row-border',
+        '--sn-data-table-cell-padding',
+        '--sn-data-table-cell-size',
+        '--sn-data-table-cell-gap',
+        '--sn-data-table-line-height',
+        '--sn-data-table-min-width',
+        '--sn-data-table-marker-size',
+        '--sn-data-table-marker-radius',
+        '--sn-data-table-empty-padding',
+        '--sn-data-table-empty-color',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-event-feed',
+    className: 'EventFeed',
+    module: 'display/EventFeed/EventFeed.js',
+    category: 'display',
+    description: 'Generic themeable event feed for provider-neutral runtime and tool events.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['event-feed', 'structured-events', 'preview-routing', 'empty-state', 'themeable'],
+      properties: [
+        { name: 'eventsList', type: 'array', description: 'Rendered event item descriptors.' },
+        { name: 'eventCount', type: 'string', description: 'Rendered event count.' },
+        { name: 'emptyText', type: 'string', description: 'Empty state text.' },
+      ],
+      methods: [
+        { name: 'setEvents', type: 'function', description: 'Sets structured events with optional max item count.' },
+        { name: 'addEvent', type: 'function', description: 'Prepends one structured event.' },
+        { name: 'clearEvents', type: 'function', description: 'Clears all events.' },
+        { name: 'getEvents', type: 'function', description: 'Returns current structured events.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-bg-overlay',
+        '--sn-card-radius',
+        '--sn-cat-data',
+        '--sn-cat-server',
+        '--sn-danger-color',
+        '--sn-font',
+        '--sn-font-mono',
+        '--sn-list-item-radius',
+        '--sn-node-border',
+        '--sn-node-header-bg',
+        '--sn-success-color',
+        '--sn-text',
+        '--sn-text-dim',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-event-feed-item',
+    className: 'EventFeedItem',
+    module: 'display/EventFeed/EventFeedItem.js',
+    category: 'display',
+    description: 'Internal event feed item used by sn-event-feed.',
+  },
+  {
+    tagName: 'sn-banner',
+    className: 'StatusBanner',
+    module: 'display/Banner/Banner.js',
+    category: 'display',
+    description: 'Generic themeable status banner for inline feedback and transient process state.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['status', 'banner', 'feedback', 'slots', 'themeable'],
+      attributes: [
+        { name: 'variant', type: 'string', description: 'Banner variant: default, info, running, success, warning, or error.' },
+      ],
+      slots: [
+        { name: 'default', description: 'Banner message and optional icon content.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-banner-bg',
+        '--sn-banner-color',
+        '--sn-banner-border',
+        '--sn-banner-padding',
+        '--sn-banner-radius',
+        '--sn-banner-gap',
+        '--sn-banner-margin-block-end',
+        '--sn-banner-font-size',
+        '--sn-banner-font-weight',
+        '--sn-banner-line-height',
+        '--sn-banner-icon-size',
+        '--sn-banner-info-color',
+        '--sn-banner-info-border',
+        '--sn-banner-success-color',
+        '--sn-banner-success-border',
+        '--sn-banner-warning-color',
+        '--sn-banner-warning-border',
+        '--sn-banner-error-color',
+        '--sn-banner-error-border',
+        '--sn-banner-running-spin-duration',
+      ],
+    },
+  },
+  {
+    tagName: 'sn-empty-state',
+    className: 'EmptyState',
+    module: 'display/EmptyState/EmptyState.js',
+    category: 'display',
+    description: 'Generic themeable placeholder for empty lists, loading gaps, and unavailable content.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/runtime-ui-v1.json',
+      capabilities: ['empty-state', 'placeholder', 'slots', 'themeable'],
+      attributes: [
+        { name: 'variant', type: 'string', description: 'Placeholder variant: default or error.' },
+      ],
+      slots: [
+        { name: 'default', description: 'Placeholder label and optional icon content.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-empty-state-color',
+        '--sn-empty-state-error-color',
+        '--sn-empty-state-padding',
+        '--sn-empty-state-gap',
+        '--sn-empty-state-min-height',
+        '--sn-empty-state-height',
+        '--sn-empty-state-font-size',
+        '--sn-empty-state-font-style',
+        '--sn-empty-state-line-height',
+        '--sn-empty-state-icon-size',
+      ],
+    },
+  },
+  {
+    tagName: 'ctrl-item',
+    className: 'CtrlItem',
+    module: 'node/CtrlItem/CtrlItem.js',
+    category: 'node',
+    description: 'Internal control item used by graph-node.',
+  },
+  {
+    tagName: 'port-item',
+    className: 'PortItem',
+    module: 'node/PortItem/PortItem.js',
+    category: 'node',
+    description: 'Internal port item used by graph-node.',
+  },
+  {
+    tagName: 'graph-frame',
+    className: 'GraphFrame',
+    module: 'node/GraphFrame/GraphFrame.js',
+    category: 'node',
+    description: 'Graph canvas frame primitive for grouped node regions.',
+    contract: {
+      status: 'draft',
+      schemaVersion: 'component-descriptor-v1',
+      dataSchema: 'schemas/graph-model-v1.json',
+      capabilities: ['node-group-frame', 'label', 'accent-color', 'resize-affordance'],
+      properties: [
+        { name: 'label', type: 'string', description: 'Frame label.' },
+        { name: 'color', type: 'string', description: 'Frame accent color.' },
+      ],
+      events: [],
+      themeAliases: [
+        '--sn-frame-border-width',
+        '--sn-frame-border-style',
+        '--sn-frame-radius',
+        '--sn-frame-font',
+        '--sn-frame-font-size',
+      ],
+    },
+  },
+].map((component) => {
+  let exportName = UI_NAMED_EXPORTS.has(component.className) ? component.className : null;
+  let visibility = component.visibility || (exportName ? COMPONENT_VISIBILITY.public : COMPONENT_VISIBILITY.internal);
+  let internal = visibility === COMPONENT_VISIBILITY.internal;
+  return {
+    ...component,
+    contract: normalizeContract(component),
+    visibility,
+    internal,
+    specifier: COMPONENT_UI_SPECIFIER,
+    exportName,
+    importKind: internal ? 'side-effect' : 'named',
+  };
+});
+
+export function listComponents(filter = {}) {
+  let { includeInternal = false, includeExperimental = false, ...componentFilter } = filter;
+  return COMPONENTS.filter((component) => {
+    if (!includeInternal && component.internal) return false;
+    if (!includeExperimental && component.visibility === COMPONENT_VISIBILITY.experimental) return false;
+    for (let [key, value] of Object.entries(componentFilter)) {
+      if (component[key] !== value) return false;
+    }
+    return true;
+  });
+}
+
+export function getComponent(tagName) {
+  return COMPONENTS.find((component) => component.tagName === tagName);
+}
+
+export function hasComponent(tagName) {
+  return Boolean(getComponent(tagName));
+}
+
+export function getComponentModule(tagName) {
+  return getComponent(tagName)?.module;
+}
+
+export function getComponentSpecifier(tagName) {
+  return getComponent(tagName)?.specifier;
+}
+
+export function getComponentExportName(tagName) {
+  return getComponent(tagName)?.exportName;
+}
+
+export function getComponentTags(filter = {}) {
+  return listComponents(filter).map((component) => component.tagName);
+}