@principal-ai/principal-view-react 0.16.54 → 0.16.56

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -37,6 +37,7 @@ import { IndustryMarkdownSlide } from 'themed-markdown';
 import {
   buildSubsystemGraph,
   MECHANISM_COLOR,
+  subsystemGraphLayoutKey,
   type SubsystemComponentEdge,
   type SubsystemComponent,
   type SubsystemEdgeMechanism,
@@ -163,19 +164,30 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
   }, [components, selected]);
 
   // Pass 1: build with estimated widths so React Flow can measure the DOM.
-  // The pane stays hidden until Pass 2 completes.
+  // The pane stays hidden until Pass 2 completes. Key off layout-affecting
+  // fields only — declarationRef updates after verify must not re-run ELK.
+  const layoutKey = useMemo(
+    () => subsystemGraphLayoutKey({ components, edges }),
+    [components, edges],
+  );
+  const componentsRef = useRef(components);
+  const edgesRef = useRef(edges);
+  componentsRef.current = components;
+  edgesRef.current = edges;
+
   useEffect(() => {
     let alive = true;
     pass2DoneRef.current = false;
     measuredDimsRef.current = new Map();
     prevMeasuredSigRef.current = '';
-    void buildSubsystemGraph({ components, edges }, { maxNodeWidth, showEdgeLabels }).then(({ nodes, edges: e }) => {
+    const doc = { components: componentsRef.current, edges: edgesRef.current };
+    void buildSubsystemGraph(doc, { maxNodeWidth, showEdgeLabels }).then(({ nodes, edges: e }) => {
       if (!alive) return;
       setBuilt({ nodes, edges: e as Edge[] });
       setLayoutReady(false);
     });
     return () => { alive = false; };
-  }, [components, edges]);
+  }, [layoutKey, maxNodeWidth, showEdgeLabels]);
 
   // Track measured dimensions from React Flow's dimension changes.
   // These arrive as { type: 'dimensions', id, dimensions } in onNodesChange.
@@ -722,7 +734,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
               top: 10,
               right: 10,
               zIndex: 8,
-              maxWidth: 'min(560px, 70%)',
+              width: 'min(560px, 70%)',
               maxHeight: '46%',
               overflowY: 'auto',
               background: theme.colors.background,

package/src/subsystem/model.test.ts

@@ -6,6 +6,7 @@ import {
   deriveNameFromSymbol,
   formatPurl,
   packageColor,
+  subsystemGraphLayoutKey,
 } from './model';
 import type { SubsystemComponent, SubsystemComponentEdge } from './model';
 
@@ -87,4 +88,25 @@ describe('subsystem graph model', () => {
     // Malformed purls pass through untouched.
     expect(formatPurl('not-a-purl')).toBe('not-a-purl');
   });
+
+  test('subsystemGraphLayoutKey ignores declarationRef-only changes', () => {
+    const base = { components: comps, edges };
+    const withRef = {
+      components: comps.map((c, i) =>
+        i === 0
+          ? {
+              ...c,
+              declarationRef: {
+                file: c.file,
+                startLine: 42,
+                lineHash: 'abc',
+                capturedAt: new Date(0).toISOString(),
+              },
+            }
+          : c,
+      ),
+      edges,
+    };
+    expect(subsystemGraphLayoutKey(base)).toBe(subsystemGraphLayoutKey(withRef));
+  });
 });

package/src/subsystem/model.ts

@@ -45,6 +45,8 @@ export type SubsystemDeclTokenKind =
 export interface SubsystemDeclToken {
   text: string;
   kind: SubsystemDeclTokenKind;
+  /** Shiki/Pierre foreground when tokenized client-side; omitted on legacy wire tokens. */
+  color?: string;
 }
 
 export type SubsystemEdgeMechanism =
@@ -380,6 +382,22 @@ export function convertSubsystemToEdges(doc: SubsystemGraphDocument): SubsystemG
   return edges;
 }
 
+/** Stable key for layout-affecting graph fields (ignores declarationRef, etc.). */
+export function subsystemGraphLayoutKey(
+  doc: Pick<SubsystemGraphDocument, 'components' | 'edges'>,
+): string {
+  const components = doc.components
+    .map(({ id, purl, name, symbol, kind, file, purpose }) =>
+      [id, purl, name, symbol ?? '', kind, file, purpose ?? ''].join('\0'))
+    .sort()
+    .join('\n');
+  const edgeKey = doc.edges
+    .map(({ id, from, to, mechanism }) => [id, from, to, mechanism].join('\0'))
+    .sort()
+    .join('\n');
+  return `${components}|${edgeKey}`;
+}
+
 /**
  * Build the full React Flow graph (nodes + edges) using **ELK auto-layout** to
  * position every node (including external stub targets), so the graph is

package/src/subsystem/tokenizeComponent.ts

@@ -2,12 +2,13 @@
  * Tokenize a SubsystemComponent into a flat token stream for the detail panel.
  *
  * Pipeline: generate declaration string → format with Prettier → tokenize
- * with highlight.js. The `component.tokens` field, when present, overrides
- * the entire pipeline (for pre-tokenized data from graphify).
+ * with Shiki + Pierre themes. The `component.tokens` field, when present,
+ * overrides the entire pipeline (for pre-tokenized data from graphify).
  *
  * This function is async because Prettier's format() is async.
  */
 
+import type { PierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
 import type { SubsystemComponent, SubsystemDeclToken } from './model';
 import { generateDeclarationString } from './formatDeclaration';
 import { tokenizeFormatted } from './tokenizeFormatted';
@@ -40,7 +41,11 @@ async function getPrettier() {
  * it's returned as-is. Otherwise the pipeline generates a TypeScript
  * declaration string, formats it with Prettier, and tokenizes the output.
  */
-export async function tokenizeComponent(component: SubsystemComponent, printWidth = 80): Promise<SubsystemDeclToken[]> {
+export async function tokenizeComponent(
+  component: SubsystemComponent,
+  printWidth = 80,
+  themeName: PierreSyntaxThemeName = 'pierre-dark',
+): Promise<SubsystemDeclToken[]> {
   // Pre-tokenized tokens from the wire take precedence.
   if (component.tokens) return component.tokens;
 
@@ -48,13 +53,8 @@ export async function tokenizeComponent(component: SubsystemComponent, printWidt
   const kind = component.detail?.kind ?? component.kind;
   if (kind === 'external') {
     const label = component.detail?.kind === 'external' ? component.detail.label : component.name;
-    return [
-      { text: 'external', kind: 'keyword' },
-      { text: ' ', kind: 'punctuation' },
-      { text: "'", kind: 'punctuation' },
-      { text: label, kind: 'string' },
-      { text: "'", kind: 'punctuation' },
-    ];
+    const escaped = label.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+    return tokenizeFormatted(`external '${escaped}'`, themeName);
   }
 
   // Generate → format → tokenize
@@ -66,5 +66,5 @@ export async function tokenizeComponent(component: SubsystemComponent, printWidt
     printWidth,
   });
 
-  return tokenizeFormatted(formatted);
+  return tokenizeFormatted(formatted, themeName);
 }

package/src/subsystem/tokenizeFormatted.ts

@@ -1,92 +1,19 @@
 /**
  * Tokenize a formatted TypeScript declaration string into SubsystemDeclToken[]
- * using highlight.js.
- *
- * highlight.js produces HTML with `<span class="hljs-...">` wrappers. This
- * module parses that output into our token format so the renderer stays
- * language-agnostic.
+ * using Shiki + Pierre themes (same highlighter stack as @pierre/diffs).
  */
 
-import hljs from 'highlight.js/lib/core';
-import typescript from 'highlight.js/lib/languages/typescript';
-import type { SubsystemDeclToken, SubsystemDeclTokenKind } from './model';
-
-// Register once — safe to call multiple times.
-try {
-  hljs.registerLanguage('typescript', typescript);
-} catch {
-  // Already registered.
-}
-
-// hljs class → our token kind
-const CLASS_MAP: Record<string, SubsystemDeclTokenKind> = {
-  'hljs-keyword': 'keyword',
-  'hljs-title': 'name',
-  'hljs-title.function_': 'name',
-  'hljs-params': 'member',
-  'hljs-type': 'type',
-  'hljs-built_in': 'type',
-  'hljs-string': 'string',
-  'hljs-number': 'string',
-  'hljs-comment': 'punctuation',
-};
+import { tokenizeWithPierreSyntax } from '../pierre/syntaxTokens';
+import type { PierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
+import type { SubsystemDeclToken } from './model';
 
 /**
  * Tokenize a formatted TypeScript string into SubsystemDeclToken[].
  * The input should already be formatted by Prettier (or be valid TS).
  */
-export function tokenizeFormatted(code: string): SubsystemDeclToken[] {
-  const result = hljs.highlight(code, { language: 'typescript' });
-  return parseHighlightedHtml(result.value);
-}
-
-// ---------------------------------------------------------------------------
-// HTML parser — walks the hljs output and extracts tokens
-// ---------------------------------------------------------------------------
-
-function unescapeHtml(text: string): string {
-  return text
-    .replace(/&quot;/g, '"')
-    .replace(/&lt;/g, '<')
-    .replace(/&gt;/g, '>')
-    .replace(/&amp;/g, '&')
-    .replace(/&#39;/g, "'");
-}
-
-function parseHighlightedHtml(html: string): SubsystemDeclToken[] {
-  const tokens: SubsystemDeclToken[] = [];
-  // Regex matches either `<span class="hljs-...">`, `</span>`, or text content.
-  const re = /<span class="([^"]+)">|<\/span>|[^<]+/g;
-  const classStack: string[] = [];
-  let match: RegExpExecArray | null;
-
-  while ((match = re.exec(html)) !== null) {
-    const chunk = match[0];
-
-    if (chunk.startsWith('<span')) {
-      // Opening tag — push class onto stack.
-      classStack.push(match[1]);
-    } else if (chunk === '</span>') {
-      // Closing tag — pop class.
-      classStack.pop();
-    } else {
-      // Text content — emit tokens for each line segment.
-      const currentClass = classStack[classStack.length - 1] ?? '';
-      const kind = CLASS_MAP[currentClass] ?? 'punctuation';
-      const text = chunk;
-
-      // Split on newlines so each line becomes its own token set.
-      const lines = text.split('\n');
-      for (let i = 0; i < lines.length; i++) {
-        if (i > 0) {
-          tokens.push({ text: '', kind: 'newline' });
-        }
-        if (lines[i]) {
-          tokens.push({ text: unescapeHtml(lines[i]), kind });
-        }
-      }
-    }
-  }
-
-  return tokens;
+export function tokenizeFormatted(
+  code: string,
+  themeName: PierreSyntaxThemeName = 'pierre-dark',
+): Promise<SubsystemDeclToken[]> {
+  return tokenizeWithPierreSyntax(code, themeName);
 }