@principal-ai/principal-view-react 0.16.55 → 0.16.57

package/dist/subsystem/tokenizeComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokenizeComponent.js","sourceRoot":"","sources":["../../src/subsystem/tokenizeComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,8CAA8C;AAC9C,IAAI,eAAe,GAAyD,IAAI,CAAC;AACjF,IAAI,sBAAsB,GAGd,IAAI,CAAC;AAEjB,KAAK,UAAU,WAAW;IACxB,IAAI,CAAC,eAAe,EAAE;QACpB,eAAe,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC;KACjD;IACD,IAAI,CAAC,sBAAsB,EAAE;QAC3B,sBAAsB,GAAG,OAAO,CAAC,GAAG,CAAC;YACnC,MAAM,CAAC,6BAA6B,CAAC;YACrC,MAAM,CAAC,yBAAyB,CAAC;SAClC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;KAC7D;IACD,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAAC,CAAC;IACzF,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AAC/B,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,iBAAiB,CAAC,SAA6B,EAAE,UAAU,GAAG,EAAE;IACpF,sDAAsD;IACtD,IAAI,SAAS,CAAC,MAAM;QAAE,OAAO,SAAS,CAAC,MAAM,CAAC;IAE9C,yDAAyD;IACzD,MAAM,IAAI,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,IAAI,SAAS,CAAC,IAAI,CAAC;IACtD,IAAI,IAAI,KAAK,UAAU,EAAE;QACvB,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;QAC9F,OAAO;YACL,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE;YACrC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE;YAClC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE;YAClC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC/B,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE;SACnC,CAAC;KACH;IAED,+BAA+B;IAC/B,MAAM,GAAG,GAAG,yBAAyB,CAAC,SAAS,CAAC,CAAC;IACjD,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,MAAM,WAAW,EAAE,CAAC;IAClD,MAAM,SAAS,GAAG,MAAM,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE;QAC3C,MAAM,EAAE,YAAY;QACpB,OAAO,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC;QAC7C,UAAU;KACX,CAAC,CAAC;IAEH,OAAO,iBAAiB,CAAC,SAAS,CAAC,CAAC;AACtC,CAAC"}
+{"version":3,"file":"tokenizeComponent.js","sourceRoot":"","sources":["../../src/subsystem/tokenizeComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,8CAA8C;AAC9C,IAAI,eAAe,GAAyD,IAAI,CAAC;AACjF,IAAI,sBAAsB,GAGd,IAAI,CAAC;AAEjB,KAAK,UAAU,WAAW;IACxB,IAAI,CAAC,eAAe,EAAE;QACpB,eAAe,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC;KACjD;IACD,IAAI,CAAC,sBAAsB,EAAE;QAC3B,sBAAsB,GAAG,OAAO,CAAC,GAAG,CAAC;YACnC,MAAM,CAAC,6BAA6B,CAAC;YACrC,MAAM,CAAC,yBAAyB,CAAC;SAClC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;KAC7D;IACD,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAAC,CAAC;IACzF,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AAC/B,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,iBAAiB,CACrC,SAA6B,EAC7B,UAAU,GAAG,EAAE,EACf,YAAmC,aAAa;IAEhD,sDAAsD;IACtD,IAAI,SAAS,CAAC,MAAM;QAAE,OAAO,SAAS,CAAC,MAAM,CAAC;IAE9C,yDAAyD;IACzD,MAAM,IAAI,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,IAAI,SAAS,CAAC,SAAS,CAAC;IAC3D,IAAI,IAAI,KAAK,UAAU,EAAE;QACvB,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;QAC9F,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAClE,OAAO,iBAAiB,CAAC,aAAa,OAAO,GAAG,EAAE,SAAS,CAAC,CAAC;KAC9D;IAED,+BAA+B;IAC/B,MAAM,GAAG,GAAG,yBAAyB,CAAC,SAAS,CAAC,CAAC;IACjD,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,MAAM,WAAW,EAAE,CAAC;IAClD,MAAM,SAAS,GAAG,MAAM,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE;QAC3C,MAAM,EAAE,YAAY;QACpB,OAAO,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC;QAC7C,UAAU;KACX,CAAC,CAAC;IAEH,OAAO,iBAAiB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AACjD,CAAC"}

package/dist/subsystem/tokenizeFormatted.d.ts

@@ -1,15 +1,12 @@
 /**
  * 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 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 declare function tokenizeFormatted(code: string): SubsystemDeclToken[];
+export declare function tokenizeFormatted(code: string, themeName?: PierreSyntaxThemeName): Promise<SubsystemDeclToken[]>;
 //# sourceMappingURL=tokenizeFormatted.d.ts.map

package/dist/subsystem/tokenizeFormatted.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokenizeFormatted.d.ts","sourceRoot":"","sources":["../../src/subsystem/tokenizeFormatted.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,KAAK,EAAE,kBAAkB,EAA0B,MAAM,SAAS,CAAC;AAsB1E;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,kBAAkB,EAAE,CAGpE"}
+{"version":3,"file":"tokenizeFormatted.d.ts","sourceRoot":"","sources":["../../src/subsystem/tokenizeFormatted.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,MAAM,EACZ,SAAS,GAAE,qBAAqC,GAC/C,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAE/B"}

package/dist/subsystem/tokenizeFormatted.js

@@ -1,84 +1,13 @@
 /**
  * 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';
-// Register once — safe to call multiple times.
-try {
-    hljs.registerLanguage('typescript', typescript);
-}
-catch {
-    // Already registered.
-}
-// hljs class → our token kind
-const CLASS_MAP = {
-    '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';
 /**
  * Tokenize a formatted TypeScript string into SubsystemDeclToken[].
  * The input should already be formatted by Prettier (or be valid TS).
  */
-export function tokenizeFormatted(code) {
-    const result = hljs.highlight(code, { language: 'typescript' });
-    return parseHighlightedHtml(result.value);
-}
-// ---------------------------------------------------------------------------
-// HTML parser — walks the hljs output and extracts tokens
-// ---------------------------------------------------------------------------
-function unescapeHtml(text) {
-    return text
-        .replace(/&quot;/g, '"')
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')
-        .replace(/&amp;/g, '&')
-        .replace(/&#39;/g, "'");
-}
-function parseHighlightedHtml(html) {
-    const tokens = [];
-    // Regex matches either `<span class="hljs-...">`, `</span>`, or text content.
-    const re = /<span class="([^"]+)">|<\/span>|[^<]+/g;
-    const classStack = [];
-    let match;
-    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, themeName = 'pierre-dark') {
+    return tokenizeWithPierreSyntax(code, themeName);
 }
 //# sourceMappingURL=tokenizeFormatted.js.map

package/dist/subsystem/tokenizeFormatted.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokenizeFormatted.js","sourceRoot":"","sources":["../../src/subsystem/tokenizeFormatted.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tokenizeFormatted.js","sourceRoot":"","sources":["../../src/subsystem/tokenizeFormatted.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAIlE;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAC/B,IAAY,EACZ,YAAmC,aAAa;IAEhD,OAAO,wBAAwB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AACnD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/principal-view-react",
-  "version": "0.16.55",
+  "version": "0.16.57",
   "description": "React components for graph-based principal view framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,6 +14,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@pierre/theme": "^2.0.0",
     "@pierre/trees": "1.0.0-beta.6",
     "@xyflow/react": "^12.11.3",
     "elkjs": "^0.12.0",
@@ -29,6 +30,7 @@
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
+    "shiki": "^4.0.0",
     "themed-markdown": "^0.1.82",
     "zustand": "4.5.0"
   },

package/src/graphify/consolidated.ts

@@ -190,6 +190,22 @@ export interface GraphifyExternalDetail {
   label: string;
 }
 
+/**
+ * A retained-state node (`kind: 'store'`): state and its contract, no
+ * behavior. `kind` is the node's verifiable anchor — a store anchors to a
+ * *state location* (module consts, a file or db), not to a declaration.
+ * When a class manages the store's access, that is a SEPARATE node
+ * (`kind: 'class'`, methods = the access mechanism) joined by
+ * `writes`/`reads` — never merged into one hybrid node. This payload
+ * renders as state declarations (`declare const …`), never as a class
+ * stub.
+ */
+export interface GraphifyStoreDetail {
+  kind: 'store';
+  /** The retained state members (module-level consts or class fields). */
+  properties: GraphifyPropertyInfo[];
+}
+
 /** A standalone method selected from its owning class. */
 export interface GraphifyMethodDetail {
   kind: 'method';
@@ -215,7 +231,8 @@ export type GraphifyComponentDetail =
   | GraphifyMethodDetail
   | GraphifyTypeDetail
   | GraphifyModuleDetail
-  | GraphifyExternalDetail;
+  | GraphifyExternalDetail
+  | GraphifyStoreDetail;
 
 /** A raw graphify edge backing a facet claim (verification + provenance). */
 export interface GraphifyEdgeRef {

package/src/graphify/index.ts

@@ -31,6 +31,7 @@ export type {
   GraphifyTypeDetail,
   GraphifyModuleDetail,
   GraphifyExternalDetail,
+  GraphifyStoreDetail,
   GraphifyComponentDetail,
   GraphifyEdgeRef,
 } from './consolidated';

package/src/graphify/kind.ts

@@ -104,11 +104,17 @@ export function inferGraphifyKind(
 	return { kind: 'unknown', evidence };
 }
 
-/** Strict claimed-vs-inferred check (no class≈function alias). */
+/** Type-family constructs all infer as the coarse 'type' — graph structure
+ *  (implements/references edges) cannot sub-classify interface vs alias vs
+ *  enum vs variable; only the source declaration can. */
+const TYPE_FAMILY: ReadonlySet<string> = new Set(['interface', 'type_alias', 'enum']);
+
+/** Strict claimed-vs-inferred check, with type-family compatibility. */
 export function kindsMatch(
 	claimed: string | undefined,
 	inferred: InferredGraphifyKind,
 ): boolean {
 	if (!claimed || claimed === 'external') return true;
+	if (TYPE_FAMILY.has(claimed)) return inferred === 'type';
 	return claimed === inferred;
 }

package/src/index.ts

@@ -281,7 +281,8 @@ export type {
   ComponentDeclarationProps,
 } from './subsystem/ComponentDeclaration';
 export { ComponentDeclaration } from './subsystem/ComponentDeclaration';
-export { MECHANISM_COLOR, KIND_COLOR, MECHANISM_STYLE } from './subsystem/model';
+export { MECHANISM_COLOR, MECHANISM_STYLE } from './subsystem/model';
+export { CONSTRUCT_COLOR, constructColorsFromPierreTheme } from './pierre/constructColors';
 export {
   purlRepoKey,
   purlOwnerName,
@@ -302,7 +303,7 @@ export type {
   SubsystemComponent,
   SubsystemComponentEdge,
   SubsystemGraphDocument,
-  SubsystemComponentKind,
+  SubsystemComponentConstruct,
   SubsystemEdgeMechanism,
 } from './subsystem/model';
 export type {
@@ -318,9 +319,10 @@ export {
 } from './subsystem/declarationRef';
 
 // Pierre code views (@pierre/diffs wrappers)
-export { PierreFileView, PierreSnippetView, sliceSnippetWindow } from './pierre';
+export { PierreFileView, PierreSnippetView, sliceSnippetWindow, resolvePierreSyntaxThemeName } from './pierre';
 export type {
   PierreFileViewProps,
   PierreSnippetViewProps,
   SnippetSlice,
+  PierreSyntaxThemeName,
 } from './pierre';

package/src/pierre/constructColors.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, test } from 'bun:test';
+import { CONSTRUCT_COLOR, constructColorsFromPierreTheme } from './constructColors';
+import type { SubsystemComponentConstruct } from '../subsystem/model';
+
+const CONSTRUCTS: SubsystemComponentConstruct[] = [
+  'class',
+  'function',
+  'method',
+  'interface',
+  'type_alias',
+  'enum',
+  'module',
+  'store',
+  'external',
+];
+
+const HEX = /^#[0-9a-f]{6}$/;
+
+describe('constructColorsFromPierreTheme', () => {
+  test('resolves every construct to a hex in both themes (no fallbacks)', () => {
+    for (const themeName of ['pierre-dark', 'pierre-light'] as const) {
+      const colors = constructColorsFromPierreTheme(themeName);
+      for (const construct of CONSTRUCTS) {
+        expect(colors[construct]).toMatch(HEX);
+      }
+    }
+  });
+
+  test('all seven constructs are distinguishable within a theme', () => {
+    for (const themeName of ['pierre-dark', 'pierre-light'] as const) {
+      const colors = constructColorsFromPierreTheme(themeName);
+      const values = CONSTRUCTS.map((c) => colors[c]);
+      expect(new Set(values).size).toBe(CONSTRUCTS.length);
+    }
+  });
+
+  test('colliding scope pairs are shaded apart (class/type, function/method)', () => {
+    const dark = constructColorsFromPierreTheme('pierre-dark');
+    expect(dark.class).not.toBe(dark.type);
+    expect(dark.function).not.toBe(dark.method);
+  });
+
+  test('dark and light instantiations differ', () => {
+    expect(constructColorsFromPierreTheme('pierre-dark')).not.toEqual(
+      constructColorsFromPierreTheme('pierre-light'),
+    );
+  });
+
+  test('the static dark instantiation matches the derived table', () => {
+    expect(CONSTRUCT_COLOR).toEqual(constructColorsFromPierreTheme('pierre-dark'));
+  });
+});

package/src/pierre/constructColors.ts

@@ -0,0 +1,112 @@
+/**
+ * Construct colors derived from the Pierre syntax themes.
+ *
+ * Single source of truth for node coloring: the same palette the declaration
+ * panel and Pierre file views render with. The themes are static JSON objects
+ * (VS Code/Shiki `tokenColors` scope rules), so extraction is a synchronous
+ * scope lookup — no Shiki call, no React context. Dark/light (and any future
+ * variant) resolves by mode at render time.
+ *
+ * Syntax themes deliberately reuse one hue across related scopes (class and
+ * type share `entity.name.class`); the node taxonomy needs distinguishable
+ * colors, so colliding constructs take a shade of the scope color — derived
+ * from the theme itself, toward white in dark themes and toward black in
+ * light themes.
+ */
+
+import type { SubsystemComponentConstruct } from '../subsystem/model';
+import type { PierreSyntaxThemeName } from './pierreSyntaxTheme';
+import pierreDark from '@pierre/theme/pierre-dark';
+import pierreLight from '@pierre/theme/pierre-light';
+
+interface PierreThemeInput {
+  type: 'dark' | 'light';
+  colors: Record<string, string>;
+  tokenColors: Array<{ scope: string | string[]; settings: { foreground?: string } }>;
+}
+
+const THEMES: Record<PierreSyntaxThemeName, PierreThemeInput> = {
+  'pierre-dark': pierreDark as unknown as PierreThemeInput,
+  'pierre-light': pierreLight as unknown as PierreThemeInput,
+};
+
+/** First rule whose scope list contains the exact scope. */
+function scopeColor(theme: PierreThemeInput, scope: string): string | undefined {
+  for (const rule of theme.tokenColors) {
+    const scopes = Array.isArray(rule.scope) ? rule.scope : [rule.scope];
+    if (scopes.includes(scope)) return rule.settings.foreground;
+  }
+  return undefined;
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  const full = h.length === 3 ? h.split('').map((c) => c + c).join('') : h;
+  const n = parseInt(full.slice(0, 6), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function rgbToHex([r, g, b]: [number, number, number]): string {
+  const to = (v: number) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0');
+  return `#${to(r)}${to(g)}${to(b)}`;
+}
+
+/** Linear blend of two hex colors; amount 0 = base, 1 = other. */
+function mix(hex: string, other: string, amount: number): string {
+  const base = hexToRgb(hex);
+  const target = hexToRgb(other);
+  return rgbToHex([
+    base[0] + (target[0] - base[0]) * amount,
+    base[1] + (target[1] - base[1]) * amount,
+    base[2] + (target[2] - base[2]) * amount,
+  ]);
+}
+
+export function constructColorsFromPierreTheme(
+  themeName: PierreSyntaxThemeName,
+): Record<SubsystemComponentConstruct, string> {
+  const theme = THEMES[themeName];
+  // A scope the theme doesn't declare resolves to the theme's own foreground —
+  // still all-Pierre, never a hand-picked value.
+  const editorFg = theme.colors['editor.foreground'] ?? '#fafafa';
+  const pick = (scope: string) => scopeColor(theme, scope) ?? editorFg;
+  const towardBackground = theme.type === 'dark' ? lighten : darken;
+
+  const classColor = pick('entity.name.class');
+  const functionColor = pick('entity.name.function');
+  const typeColor = pick('support.type');
+  const moduleColor = pick('entity.name.namespace');
+
+  return {
+    class: classColor,
+    // interface/type are the type-name scope, shaded to separate them from
+    // class (whose declaration name shares the same hue in syntax themes)
+    interface: towardBackground(typeColor, 0.14),
+    type_alias: towardBackground(typeColor, 0.28),
+    function: functionColor,
+    method: towardBackground(functionColor, 0.14),
+    // enum members are constants — the generic constant hue
+    enum: pick('constant'),
+    // module and store share the constant hue — the module holds the store,
+    // and the store IS the retained value, so the store keeps the pure
+    // `variable.other.constant` color and the module takes the shade
+    module: towardBackground(moduleColor, 0.18),
+    store: pick('variable.other.constant'),
+    external: pick('comment'),
+  };
+}
+
+function lighten(hex: string, amount: number): string {
+  return mix(hex, '#ffffff', amount);
+}
+
+function darken(hex: string, amount: number): string {
+  return mix(hex, '#000000', amount);
+}
+
+/**
+ * The dark-theme instantiation, for consumers without a mode context (the
+ * bun-side excalidraw exporter). React components derive per mode instead.
+ */
+export const CONSTRUCT_COLOR: Record<SubsystemComponentConstruct, string> =
+  constructColorsFromPierreTheme('pierre-dark');

package/src/pierre/index.ts

@@ -4,3 +4,8 @@ export { PierreSnippetView } from './PierreSnippetView';
 export type { PierreSnippetViewProps } from './PierreSnippetView';
 export { sliceSnippetWindow } from './sliceSnippet';
 export type { SnippetSlice } from './sliceSnippet';
+export {
+  PIERRE_DEFAULT_SYNTAX_THEMES,
+  resolvePierreSyntaxThemeName,
+} from './pierreSyntaxTheme';
+export type { PierreSyntaxThemeName } from './pierreSyntaxTheme';

package/src/pierre/pierreSyntaxTheme.ts

@@ -0,0 +1,23 @@
+/**
+ * Pierre syntax theme names — aligned with @pierre/diffs DEFAULT_THEMES.
+ */
+
+export type PierreSyntaxThemeName = 'pierre-dark' | 'pierre-light';
+
+export const PIERRE_DEFAULT_SYNTAX_THEMES = {
+  dark: 'pierre-dark',
+  light: 'pierre-light',
+} as const satisfies Record<'dark' | 'light', PierreSyntaxThemeName>;
+
+/** Pick pierre-dark / pierre-light to match Pierre file views and industry-theme mode. */
+export function resolvePierreSyntaxThemeName(mode?: string): PierreSyntaxThemeName {
+  if (mode === 'light') return PIERRE_DEFAULT_SYNTAX_THEMES.light;
+  if (mode === 'dark') return PIERRE_DEFAULT_SYNTAX_THEMES.dark;
+  if (
+    typeof window !== 'undefined' &&
+    window.matchMedia('(prefers-color-scheme: light)').matches
+  ) {
+    return PIERRE_DEFAULT_SYNTAX_THEMES.light;
+  }
+  return PIERRE_DEFAULT_SYNTAX_THEMES.dark;
+}

package/src/pierre/syntaxTokens.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, test } from 'bun:test';
+import { tokenizeWithPierreSyntax } from './syntaxTokens';
+
+describe('tokenizeWithPierreSyntax', () => {
+  test('assigns Pierre dark keyword and type colors', async () => {
+    const tokens = await tokenizeWithPierreSyntax(
+      'export class Foo extends Bar {}',
+      'pierre-dark',
+    );
+    const joined = tokens.filter((t) => t.kind !== 'newline').map((t) => t.text).join('');
+    expect(joined).toBe('export class Foo extends Bar {}');
+
+    const exportTok = tokens.find((t) => t.text === 'export');
+    const classTok = tokens.find((t) => t.text === 'class');
+    const fooTok = tokens.find((t) => t.text === 'Foo');
+    const barTok = tokens.find((t) => t.text === 'Bar');
+
+    expect(exportTok?.color).toBe('#ff678d');
+    expect(classTok?.color).toBe('#d568ea');
+    expect(fooTok?.color).toBe('#d568ea');
+    expect(barTok?.color).toBe('#d568ea');
+  });
+
+  test('light theme resolves different palette than dark', async () => {
+    const [dark, light] = await Promise.all([
+      tokenizeWithPierreSyntax('const x = 1', 'pierre-dark'),
+      tokenizeWithPierreSyntax('const x = 1', 'pierre-light'),
+    ]);
+    const darkConst = dark.find((t) => t.text === 'const');
+    const lightConst = light.find((t) => t.text === 'const');
+    expect(darkConst?.color).toBeTruthy();
+    expect(lightConst?.color).toBeTruthy();
+    expect(darkConst?.color).not.toBe(lightConst?.color);
+  });
+});

package/src/pierre/syntaxTokens.ts

@@ -0,0 +1,60 @@
+/**
+ * Tokenize TypeScript with Shiki + Pierre themes — same stack as @pierre/diffs.
+ */
+
+import { createHighlighter, type Highlighter, type ThemeInput } from 'shiki';
+import pierreDark from '@pierre/theme/pierre-dark';
+import pierreLight from '@pierre/theme/pierre-light';
+import type { SubsystemDeclToken } from '../subsystem/model';
+import type { PierreSyntaxThemeName } from './pierreSyntaxTheme';
+
+let highlighterPromise: Promise<Highlighter> | null = null;
+
+async function getPierreHighlighter(): Promise<Highlighter> {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: [
+        pierreDark as unknown as ThemeInput,
+        pierreLight as unknown as ThemeInput,
+      ],
+      langs: ['typescript'],
+    });
+  }
+  return highlighterPromise;
+}
+
+function normalizeColor(color?: string): string | undefined {
+  return color?.toLowerCase();
+}
+
+/**
+ * Tokenize formatted TypeScript using Pierre's Shiki themes.
+ * Each token carries the resolved foreground color Pierre would render.
+ */
+export async function tokenizeWithPierreSyntax(
+  code: string,
+  themeName: PierreSyntaxThemeName,
+): Promise<SubsystemDeclToken[]> {
+  const highlighter = await getPierreHighlighter();
+  const { tokens } = highlighter.codeToTokens(code, {
+    lang: 'typescript',
+    theme: themeName,
+  });
+
+  const result: SubsystemDeclToken[] = [];
+  for (let lineIndex = 0; lineIndex < tokens.length; lineIndex++) {
+    const line = tokens[lineIndex];
+    for (const token of line) {
+      if (!token.content) continue;
+      result.push({
+        text: token.content,
+        kind: 'punctuation',
+        color: normalizeColor(token.color),
+      });
+    }
+    if (lineIndex < tokens.length - 1) {
+      result.push({ text: '', kind: 'newline' });
+    }
+  }
+  return result;
+}

package/src/stories/{BoundaryNodes.stories.tsx → Audit/BoundaryNodes.stories.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 

package/src/stories/{CanvasEdgeTypes.stories.tsx → Audit/CanvasEdgeTypes.stories.tsx}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas, DerivedEdge } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 

package/src/stories/{CanvasNodeTypes.stories.tsx → Audit/CanvasNodeTypes.stories.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 

package/src/stories/{ColorPriority.stories.tsx → Audit/ColorPriority.stories.tsx}

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas, GraphEvent, ComponentLibrary } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 

package/src/stories/{DiamondBadges.stories.tsx → Audit/DiamondBadges.stories.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 

package/src/stories/{NodeDimensionsTesting.stories.tsx → Audit/NodeDimensionsTesting.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas, ExtendedCanvasNode } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Testing/Node Dimensions & Text Readability',
+  title: 'Audit/NodeDimensionsTesting',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{NodeFieldsAudit.stories.tsx → Audit/NodeFieldsAudit.stories.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 

package/src/stories/{NodeFontSizeTesting.stories.tsx → Audit/NodeFontSizeTesting.stories.tsx}

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import type { Theme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Testing/Node Font Size & Dimensions',
+  title: 'Audit/NodeFontSizeTesting',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{NodeShapes.stories.tsx → Audit/NodeShapes.stories.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';