@principal-ai/subsystems-react 0.20.6 → 0.21.0

package/src/stories/Subsystem/ComponentGraph/Appearance.stories.tsx

@@ -5,7 +5,7 @@ import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme
 import { SubsystemComponentGraph } from '../../../subsystem/SubsystemComponentGraph';
 import type { SubsystemComponent, SubsystemComponentEdge } from '../../../subsystem/model';
 import type { GraphifyComponentDetail } from '../../../graphify';
-import { investigateOnlyComponents, investigateOnlyEdges } from './fixtures';
+import { investigateOnlyComponents, investigateOnlyRelations, investigateOnlyWalkthroughs } from './fixtures';
 
 const meta = {
   title: 'Subsystem/ComponentGraph/Appearance',
@@ -32,7 +32,7 @@ export const NarrowMaxWidth: Story = {
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={investigateOnlyComponents}
-        edges={investigateOnlyEdges}
+        relations={investigateOnlyRelations} walkthroughs={investigateOnlyWalkthroughs}
         maxNodeWidth={140}
       />
     </div>
@@ -93,7 +93,6 @@ const namingConventionComponents: SubsystemComponent[] = [
   },
 ];
 
-const namingConventionEdges: SubsystemComponentEdge[] = [];
 
 /** Nodes with compact `maxNodeWidth` so the different conventions visibly wrap
  *  at their word boundaries (camelCase, snake_case, PascalCase, acronyms). */
@@ -102,7 +101,7 @@ export const NamingConventions: Story = {
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={namingConventionComponents}
-        edges={namingConventionEdges}
+        relations={[]}
         maxNodeWidth={180}
       />
     </div>
@@ -137,7 +136,7 @@ const kindVariationComponents: SubsystemComponent[] = [
     purpose: 'members only — methods with typed params + returns, a typed field',
     symbol: 'Transcoder',
     layer: 1,
-    detail: {
+    declaration: {
       kind: 'class',
       methods: [
         { nodeId: 'tm1', name: 'encode', parameters: [{ type: 'RawFrame' }], returnType: 'Uint8Array' },
@@ -160,7 +159,7 @@ const kindVariationComponents: SubsystemComponent[] = [
     purpose: 'relationships only — extends + implements, constructed-by comment; empty body elides the braces',
     symbol: 'HttpTransport',
     layer: 1,
-    detail: {
+    declaration: {
       kind: 'class',
       methods: [],
       properties: [],
@@ -191,7 +190,7 @@ const kindVariationComponents: SubsystemComponent[] = [
     purpose: 'signature only — named + positional (type-only) params, array return; no callers/callees comments',
     symbol: 'normalizeSession',
     layer: 2,
-    detail: {
+    declaration: {
       kind: 'function',
       parameters: [
         { name: 'session', type: 'SessionRecord' },
@@ -211,7 +210,7 @@ const kindVariationComponents: SubsystemComponent[] = [
     purpose: 'signature + call relationships — union-typed param, generic return, called-by / calls trailing comments',
     symbol: 'mergeSessions',
     layer: 2,
-    detail: {
+    declaration: {
       kind: 'function',
       parameters: [
         { name: 'sessions', type: 'SessionRecord[]' },
@@ -243,7 +242,7 @@ const kindVariationComponents: SubsystemComponent[] = [
     purpose: 'fields only — typed interface body, nothing else',
     symbol: 'SessionRecord',
     layer: 3,
-    detail: {
+    declaration: {
       kind: 'type',
       properties: [
         { name: 'id', type: 'string' },
@@ -262,7 +261,7 @@ const kindVariationComponents: SubsystemComponent[] = [
     purpose: 'full — fields + implemented-by (clicks through to HttpTransport) + used-by comments',
     symbol: 'Transport',
     layer: 3,
-    detail: {
+    declaration: {
       kind: 'type',
       properties: [{ name: 'name', type: 'string' }],
       usedBy: [{ nodeId: 'u1', name: 'main', context: 'parameter_type' }],
@@ -290,7 +289,7 @@ const kindVariationComponents: SubsystemComponent[] = [
     purpose: 'exports only — export statement + defines comment',
     symbol: '',
     layer: 4,
-    detail: {
+    declaration: {
       kind: 'module',
       exports: ['extractToolName', 'extractFilePath'],
       imports: [],
@@ -306,7 +305,7 @@ const kindVariationComponents: SubsystemComponent[] = [
     purpose: 'full — import statements + re-export statement + defines comment',
     symbol: '',
     layer: 4,
-    detail: {
+    declaration: {
       kind: 'module',
       exports: ['SessionReader', 'SessionStore'],
       imports: [{ nodeId: 'i1', name: 'transcript', relation: 'imports_from' }],
@@ -334,14 +333,13 @@ const kindVariationComponents: SubsystemComponent[] = [
     purpose: 'labeled — the full purl as a quoted string literal',
     symbol: '',
     layer: 5,
-    detail: {
+    declaration: {
       kind: 'external',
       label: 'pkg:npm/@principal-ai/subsystems-studio',
     } satisfies GraphifyComponentDetail,
   },
 ];
 
-const kindVariationEdges: SubsystemComponentEdge[] = [];
 
 function KindVariationsDemo() {
   const [selected, setSelected] = useState<string | null>(null);
@@ -349,7 +347,7 @@ function KindVariationsDemo() {
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={kindVariationComponents}
-        edges={kindVariationEdges}
+        relations={[]}
         onSelect={(id) => setSelected(id)}
       />
       <div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>

package/src/stories/Subsystem/ComponentGraph/Basics.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import { SubsystemComponentGraph } from '../../../subsystem/SubsystemComponentGraph';
 import type { SubsystemComponent, SubsystemComponentEdge } from '../../../subsystem/model';
-import { components, edges } from './fixtures';
+import { components, graphSpecFromEdges } from './fixtures';
 
 const meta = {
   title: 'Subsystem/ComponentGraph/Basics',
@@ -33,7 +33,7 @@ const twoNodeComponents = components([
   ['dst', 'SessionReader', 'class', 'SessionReader.ts', 'pkg:github/principal-ai/agent-monitoring', 'normalizes sessions into events'],
 ]);
 
-const twoNodeEdges = edges([
+const twoNodeEdges = graphSpecFromEdges([
   ['src', 'dst', 'imports'],
 ]);
 
@@ -44,7 +44,7 @@ function TwoNodeDemo({ showEdgeLabels = true }: { showEdgeLabels?: boolean }) {
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={twoNodeComponents}
-        edges={twoNodeEdges}
+        relations={twoNodeEdges.relations} walkthroughs={twoNodeEdges.walkthroughs}
         onSelect={(id) => setSelected(id)}
         onEdgeSelect={(e) => setSelectedEdge(e)}
         showEdgeLabels={showEdgeLabels}
@@ -74,7 +74,7 @@ export const TwoNodeNoLabels: Story = {
 // ---------------------------------------------------------------------------
 function PlaygroundDemo({ leftCount, rightCount, showEdgeLabels }: { leftCount: number; rightCount: number; showEdgeLabels: boolean }) {
   const comps: SubsystemComponent[] = [];
-  const edgeList: SubsystemComponentEdge[] = [];
+  const edgeSpec: Array<[string, string, SubsystemComponentEdge['mechanism']]> = [];
 
   for (let i = 0; i < leftCount; i++) {
     comps.push({
@@ -97,16 +97,16 @@ function PlaygroundDemo({ leftCount, rightCount, showEdgeLabels }: { leftCount:
     });
   }
 
-  let ei = 0;
   for (let i = 0; i < leftCount; i++) {
     for (let j = 0; j < rightCount; j++) {
-      edgeList.push({ id: `e${ei++}`, from: `l${i}`, to: `r${j}`, mechanism: 'imports' });
+      edgeSpec.push([`l${i}`, `r${j}`, 'imports']);
     }
   }
+  const graph = graphSpecFromEdges(edgeSpec);
 
   return (
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <SubsystemComponentGraph components={comps} edges={edgeList} showEdgeLabels={showEdgeLabels} />
+      <SubsystemComponentGraph components={comps} relations={graph.relations} walkthroughs={graph.walkthroughs} showEdgeLabels={showEdgeLabels} />
     </div>
   );
 }
@@ -131,7 +131,7 @@ export const Playground: Story = {
 export const Empty: Story = {
   render: () => (
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <SubsystemComponentGraph components={[]} edges={[]} />
+      <SubsystemComponentGraph components={[]} relations={[]} />
     </div>
   ),
 };

package/src/stories/Subsystem/ComponentGraph/Captures.stories.tsx

@@ -5,7 +5,7 @@ import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme
 import { SubsystemComponentGraph } from '../../../subsystem/SubsystemComponentGraph';
 import type { SubsystemComponent, SubsystemComponentEdge } from '../../../subsystem/model';
 import type { GraphifyComponentDetail } from '../../../graphify';
-import { components, edges, readerDetail, investigateOnlyComponents, investigateOnlyEdges } from './fixtures';
+import { components, graphSpecFromEdges, readerDetail, investigateOnlyComponents, investigateOnlyRelations, investigateOnlyWalkthroughs } from './fixtures';
 
 const meta = {
   title: 'Subsystem/ComponentGraph/Captures',
@@ -37,7 +37,7 @@ const v2ReaderComponents = components([
   ['registry', 'supported-agents', 'module', 'supported-agents.ts', 'pkg:github/principal-ai/agent-monitoring', 'registry of supported agents (the shared seam)', 'registerAgent'],
 ]);
 
-const v2ReaderEdges = edges([
+const v2ReaderEdges = graphSpecFromEdges([
   ['transcript', 'reader', 'imports'],
   ['paths', 'reader', 'imports'],
   ['capture', 'reader', 'calls'],
@@ -55,7 +55,7 @@ function V2ReaderDemo() {
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={v2ReaderComponents}
-        edges={v2ReaderEdges}
+        relations={v2ReaderEdges.relations} walkthroughs={v2ReaderEdges.walkthroughs}
         onSelect={(id) => setSelected(id)}
         onEdgeSelect={(e) => setSelectedEdge(e)}
       />
@@ -80,7 +80,7 @@ export const V2ReaderSubsystem: Story = {
 export const InvestigateOnly: Story = {
   render: () => (
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <SubsystemComponentGraph components={investigateOnlyComponents} edges={investigateOnlyEdges} />
+      <SubsystemComponentGraph components={investigateOnlyComponents} relations={investigateOnlyRelations} walkthroughs={investigateOnlyWalkthroughs} />
     </div>
   ),
 };
@@ -98,7 +98,7 @@ const minimalComponents = components([
   ['transcript', 'transcript', 'module', 'transcript.ts', 'pkg:github/principal-ai/agent-monitoring', 'parses session records + type guards', 'transcript'],
 ]);
 
-const sharedEdges = edges([
+const sharedEdges = graphSpecFromEdges([
   ['transcript', 'record', 'defines'],
   ['reader', 'normalize', 'method'],
   ['normalize', 'record', 'references'],
@@ -106,10 +106,10 @@ const sharedEdges = edges([
 
 /** The same subsystem after `resolveSubsystemToGraphify` populates `detail`. */
 const resolvedComponents: SubsystemComponent[] = [
-  { ...minimalComponents[0], detail: readerDetail },
+  { ...minimalComponents[0], declaration: readerDetail },
   {
     ...minimalComponents[1],
-    detail: {
+    declaration: {
       kind: 'function',
       parameters: [{ name: 'session', type: 'SessionRecord' }],
       returnType: 'SessionEvent[]',
@@ -119,7 +119,7 @@ const resolvedComponents: SubsystemComponent[] = [
   },
   {
     ...minimalComponents[2],
-    detail: {
+    declaration: {
       kind: 'type',
       properties: [
         { name: 'id', type: 'string' },
@@ -131,7 +131,7 @@ const resolvedComponents: SubsystemComponent[] = [
   },
   {
     ...minimalComponents[3],
-    detail: {
+    declaration: {
       kind: 'module',
       exports: ['CodexRolloutRecord', 'CodexSessionMeta'],
       imports: [{ nodeId: 'i1', name: 'paths', relation: 'imports_from' }],
@@ -146,12 +146,12 @@ function MinimalVsResolvedDemo({ resolved }: { resolved: boolean }) {
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={resolved ? resolvedComponents : minimalComponents}
-        edges={sharedEdges}
+        relations={sharedEdges.relations} walkthroughs={sharedEdges.walkthroughs}
         onSelect={(id) => setSelected(id)}
       />
       <div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
         {resolved
-          ? 'post-graphify: click a component to see the enriched GraphifyComponentDetail'
+          ? 'post-graphify: click a component to see the enriched declaration'
           : 'pre-graphify: LLM-authored symbols only — no detail yet'}
       </div>
     </div>
@@ -179,7 +179,7 @@ const investigationComponents: SubsystemComponent[] = [
     purl: 'pkg:github/t3code/t3code',
     purpose: 'adapts opencode session/threads + events to the t3 runtime',
     symbol: 'makeOpenCodeAdapter',
-    detail: {
+    declaration: {
       kind: 'module',
       exports: ['makeOpenCodeAdapter', 'OpenCodeAdapterLiveOptions'],
       imports: [{ nodeId: 'i1', name: 'orchestration', relation: 'imports_from' }],
@@ -206,7 +206,7 @@ const investigationComponents: SubsystemComponent[] = [
   },
 ];
 
-const investigationEdges = edges([
+const investigationEdges = graphSpecFromEdges([
   ['adapter', 'contracts', 'imports_from'],
   ['ingestion', 'adapter', 'uses'],
   ['ingestion', 'contracts', 'references'],
@@ -218,7 +218,7 @@ function InvestigationDemo() {
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={investigationComponents}
-        edges={investigationEdges}
+        relations={investigationEdges.relations} walkthroughs={investigationEdges.walkthroughs}
         onSelect={(id) => setSelected(id)}
       />
       <div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>

package/src/stories/Subsystem/ComponentGraph/CustomEntities.stories.tsx

@@ -5,6 +5,7 @@ import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme
 import { SubsystemComponentGraph } from '../../../subsystem/SubsystemComponentGraph';
 import type { SubsystemComponent, SubsystemComponentEdge } from '../../../subsystem/model';
 import type { GraphifyCustomEntityDetail } from '../../../graphify';
+import { graphSpecFromEdges } from './fixtures';
 
 /** Authored attributes surfaced in the declaration panel. */
 function entityDetail(attributes: Array<[string, string]>): GraphifyCustomEntityDetail {
@@ -32,7 +33,7 @@ const components: SubsystemComponent[] = [
     purl: 'external',
     purpose: 'submits a facilities work request',
     role: 'entry',
-    detail: entityDetail([
+    declaration: entityDetail([
       ['vertical', 'buildings'],
       ['escalationPath', 'FacilitiesTechnician → ShiftSupervisor'],
     ]),
@@ -47,7 +48,7 @@ const components: SubsystemComponent[] = [
     purpose: 'performs repairs, resolves L1 requests',
     process: 'novatech/core-ops',
     layer: 1,
-    detail: entityDetail([
+    declaration: entityDetail([
       ['level', 'L1'],
       ['projects', 'HVAC, plumbing'],
     ]),
@@ -62,7 +63,7 @@ const components: SubsystemComponent[] = [
     purpose: 'assigns technicians, approves out-of-scope work',
     process: 'novatech/core-ops',
     layer: 2,
-    detail: entityDetail([
+    declaration: entityDetail([
       ['level', 'L2'],
       ['approvalLimit', '$500'],
     ]),
@@ -77,7 +78,7 @@ const components: SubsystemComponent[] = [
     purpose: 'owns the queue, escalates campus-wide issues',
     process: 'novatech/core-ops',
     layer: 3,
-    detail: entityDetail([
+    declaration: entityDetail([
       ['level', 'L3'],
       ['approvalLimit', '$5,000'],
     ]),
@@ -92,7 +93,7 @@ const components: SubsystemComponent[] = [
     purpose: 'funds large projects, signs off L4 requests',
     process: 'novatech/core-ops',
     layer: 4,
-    detail: entityDetail([
+    declaration: entityDetail([
       ['level', 'L4'],
       ['approvalLimit', 'unlimited'],
     ]),
@@ -108,7 +109,7 @@ const components: SubsystemComponent[] = [
     purpose: 'proposes nudges from open-request patterns; never owns the queue',
     process: 'novatech/core-ops',
     layer: 2,
-    detail: entityDetail([
+    declaration: entityDetail([
       ['slack', 'novatech/facilities-ops'],
       ['permission', 'propose-only'],
     ]),
@@ -124,7 +125,7 @@ const components: SubsystemComponent[] = [
     purpose: 'holds proposed nudges until a supervisor confirms them',
     process: 'novatech/core-ops',
     layer: 3,
-    detail: entityDetail([
+    declaration: entityDetail([
       ['durable', 'postgres + outbox'],
       ['owner', 'CampusOpsManager'],
     ]),
@@ -142,7 +143,7 @@ const components: SubsystemComponent[] = [
   },
 ];
 
-const edges: SubsystemComponentEdge[] = [
+const entityGraph = graphSpecFromEdges([
   ['wr', 'store', 'feeds'],
   ['store', 'tech', 'feeds'],
   ['tech', 'sup', 'watches'],
@@ -151,7 +152,7 @@ const edges: SubsystemComponentEdge[] = [
   ['agent', 'queue', 'feeds'],
   ['queue', 'mgr', 'feeds'],
   ['mgr', 'vp', 'watches'],
-].map(([from, to, mechanism], i) => ({ id: `e${i}`, from, to, mechanism }));
+]);
 
 const meta = {
   title: 'Subsystem/ComponentGraph/CustomEntities',
@@ -177,7 +178,7 @@ export const NovaTechWorkRequests: Story = {
         title="Custom entities — NovaTech work-request chain"
         description="Persons, an agent, and a queue as `custom_entity` nodes (badge = entityKind). Actors keep the themed coral; the agent and queue wear authored `color` overrides. Click a node for its declaration — `entity 'Name' — kind` plus authored `attributes` (key: value)."
         components={components}
-        edges={edges}
+        relations={entityGraph.relations} walkthroughs={entityGraph.walkthroughs}
       />
     </div>
   ),

package/src/stories/Subsystem/ComponentGraph/DetailPanel.stories.tsx

@@ -31,7 +31,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // ---------------------------------------------------------------------------
-// One node per GraphifyComponentDetail kind — what each looks like + drills down
+// One node per declaration kind — what each looks like + drills down
 // ---------------------------------------------------------------------------
 const detailKindComponents: SubsystemComponent[] = [
   {
@@ -42,7 +42,7 @@ const detailKindComponents: SubsystemComponent[] = [
     purl: 'pkg:github/principal-ai/agent-monitoring',
     purpose: 'class-like: owns outgoing method edges',
     symbol: '',
-    detail: readerDetail,
+    declaration: readerDetail,
   },
   {
     id: 'detail-method',
@@ -52,7 +52,7 @@ const detailKindComponents: SubsystemComponent[] = [
     purl: 'pkg:github/principal-ai/agent-monitoring',
     purpose: 'a class method — the specific thing this session focused on',
     symbol: 'SessionReader.normalize',
-    detail: {
+    declaration: {
       kind: 'function',
       parameters: [{ name: 'session', type: 'SessionRecord' }],
       returnType: 'SessionEvent[]',
@@ -68,7 +68,7 @@ const detailKindComponents: SubsystemComponent[] = [
     purl: 'pkg:github/principal-ai/agent-monitoring',
     purpose: 'function-like: label ends () with no method edges',
     symbol: 'normalizeSession',
-    detail: {
+    declaration: {
       kind: 'function',
       parameters: [
         { name: 'session', type: 'SessionRecord' },
@@ -87,7 +87,7 @@ const detailKindComponents: SubsystemComponent[] = [
     purl: 'pkg:github/principal-ai/agent-monitoring',
     purpose: 'multi-param signature — named, positional (graphify captures types only), union types, generic return',
     symbol: 'mergeSessions',
-    detail: {
+    declaration: {
       kind: 'function',
       parameters: [
         { name: 'sessions', type: 'SessionRecord[]' },
@@ -111,7 +111,7 @@ const detailKindComponents: SubsystemComponent[] = [
     purl: 'pkg:github/principal-ai/agent-monitoring',
     purpose: 'no parameters, no return type — the barest function signature',
     symbol: 'flush',
-    detail: {
+    declaration: {
       kind: 'function',
       parameters: [],
       callers: [{ nodeId: 'c4', name: 'EventProcessor.dispose', source_location: 'L142' }],
@@ -126,7 +126,7 @@ const detailKindComponents: SubsystemComponent[] = [
     purl: 'pkg:github/principal-ai/agent-monitoring',
     purpose: 'class with fully-typed members — method params + returns, field types, extends + implements',
     symbol: 'EventProcessor',
-    detail: {
+    declaration: {
       kind: 'class',
       methods: [
         { nodeId: 'rm1', name: 'process', parameters: [{ type: 'RawEvent' }, { type: 'ProcessingOptions' }], returnType: 'ProcessedEvent' },
@@ -156,7 +156,7 @@ const detailKindComponents: SubsystemComponent[] = [
     purl: 'pkg:github/principal-ai/agent-monitoring',
     purpose: 'type-like: revealed by incoming implements edges',
     symbol: 'SessionRecord',
-    detail: {
+    declaration: {
       kind: 'type',
       properties: [
         { name: 'id', type: 'string' },
@@ -174,7 +174,7 @@ const detailKindComponents: SubsystemComponent[] = [
     purl: 'pkg:github/principal-ai/agent-monitoring',
     purpose: 'a type symbol that lives in the transcript module; the node is the symbol, the file is its location',
     symbol: 'CodexRolloutRecord',
-    detail: {
+    declaration: {
       kind: 'type',
       properties: [
         { name: 'type', type: 'string' },
@@ -193,14 +193,13 @@ const detailKindComponents: SubsystemComponent[] = [
     purl: 'pkg:npm/@principal-ai/subsystems-studio',
     purpose: 'an npm package consumer — the whole package as a node',
     symbol: '',
-    detail: {
+    declaration: {
       kind: 'external',
       label: 'pkg:npm/@principal-ai/subsystems-studio',
     } satisfies GraphifyComponentDetail,
   },
 ];
 
-const detailKindEdges: SubsystemComponentEdge[] = [];
 
 function DetailKindsDemo() {
   const [selected, setSelected] = useState<string | null>(null);
@@ -208,11 +207,11 @@ function DetailKindsDemo() {
     <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <SubsystemComponentGraph
         components={detailKindComponents}
-        edges={detailKindEdges}
+        relations={[]}
         onSelect={(id) => setSelected(id)}
       />
       <div style={{ marginTop: 8, fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
-        {selected ? `selected: ${selected}` : 'click a component to see its GraphifyComponentDetail'}
+        {selected ? `selected: ${selected}` : 'click a component to see its declaration'}
       </div>
     </div>
   );
@@ -303,7 +302,7 @@ function DeclarationLineOpenDemo() {
         title="Declaration line open (Storybook)"
         description="Uses bundled ?raw fixtures + PierreSnippetView from this package. Select ComponentDeclaration, toggle file, click the path or L251."
         components={declarationOpenComponents}
-        edges={[]}
+        relations={[]}
         renderFileViewer={renderFileViewer}
       />
     </div>