@principal-ai/subsystems-react 0.17.0

package/dist/subsystem/nodes.js

@@ -0,0 +1,289 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Subsystem component/group node + edge renderers.
+ *
+ * Lightweight, purpose-built for the subsystem component graph: a component
+ * renders its name (kind-tagged, colored by package) plus its symbol/purpose.
+ * Groups render as package containers. Clicking
+ * a component calls `onSelect` (to open the entry point / file).
+ */
+import { useState } from 'react';
+import { Handle, Position, } from '@xyflow/react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { MECHANISM_COLOR, MECHANISM_STYLE, ROLE_COLOR, ROLE_LABEL, constructBadgeLabel, deriveNameFromSymbol, BADGE_EDGE_INSET, nodeMinWidthForBadges, packageColor, } from './model';
+import { constructColorsFromPierreTheme } from '../pierre/constructColors';
+import { resolvePierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
+export const CONSTRUCT_LABEL = {
+    class: 'class',
+    function: 'function',
+    method: 'method',
+    interface: 'interface',
+    type_alias: 'type alias',
+    enum: 'enum',
+    module: 'module',
+    store: 'store',
+    external: 'external',
+};
+/** Insert zero-width spaces at identifier word boundaries so long names wrap
+ *  on naming conventions (snake_case `foo_`|`bar`, camelCase `foo`|`Bar`,
+ *  PascalCase `Foo`|`Bar`, acronym `ABC`|`Def`) instead of mid-character. */
+function breakWords(s) {
+    const zwsp = '\u200b';
+    return s
+        // camelCase: lower/digit → Upper  (and the boundary before it holds)
+        .replace(/([a-z0-9])([A-Z])/g, `$1${zwsp}$2`)
+        // acronym → word: `ABC`|`Def` (two Uppercase then a lowercase)
+        .replace(/([A-Z])([A-Z][a-z])/g, `$1${zwsp}$2`)
+        // separators: break after `_`, `-`, `.`
+        .replace(/([_\-.])([^_\-.\u200b])/g, `$1${zwsp}$2`);
+}
+/** Root callbacks carried through node data (injected by the graph component). */
+export const SUBSYSTEM_CALLBACKS = {};
+export function SubsystemComponentNode(props) {
+    const { theme, mode } = useTheme();
+    const { data, selected, width: nodeWidth, height: nodeHeight } = props;
+    const c = data.component;
+    // Construct owns node color, derived from the active Pierre syntax theme —
+    // the same palette the declaration panel and file drawer render with. Role
+    // shows as the hover badge, not as color — for now; a role glyph/accent may
+    // come later.
+    const color = constructColorsFromPierreTheme(resolvePierreSyntaxThemeName(mode))[c.construct];
+    const [hover, setHover] = useState(false);
+    const configuredMax = SUBSYSTEM_CALLBACKS.maxNodeWidth;
+    const maxWidth = configuredMax ?? 300;
+    // `symbol` is the source of truth; `name` is derived from it consistently.
+    const displayName = deriveNameFromSymbol(c.symbol, c.construct, c.name, c.file, c.stereotype);
+    // Top badges are absolutely positioned — widen the node so they nowrap
+    // instead of wrapping, including when construct + role badges share the top.
+    const badgeMinWidth = nodeMinWidthForBadges(c);
+    // Set while a file is open in the drawer: true → spotlight, false → dim,
+    // absent (no file open) → neutral.
+    const fileMatch = data.fileMatch;
+    // Selection is stamped into data by the graph component — React Flow's own
+    // `selected` never updates because the node stops click propagation.
+    const isSelected = selected || data.isSelected === true;
+    return (_jsxs("div", { onMouseEnter: () => {
+            setHover(true);
+            SUBSYSTEM_CALLBACKS.onHover?.(c.id);
+        }, onMouseLeave: () => {
+            setHover(false);
+            SUBSYSTEM_CALLBACKS.onHover?.(null);
+        }, onClick: (e) => {
+            e.stopPropagation();
+            SUBSYSTEM_CALLBACKS.onSelect?.(c.id);
+        }, style: {
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            boxSizing: 'border-box',
+            width: nodeWidth,
+            height: nodeHeight,
+            minWidth: badgeMinWidth,
+            maxWidth,
+            padding: '6px 10px',
+            borderRadius: 8,
+            background: theme.colors.backgroundSecondary ?? theme.colors.background,
+            // Selected / file-matched nodes get a thicker border; kind colors are
+            // kept for selection (thickness only). The file-open spotlight keeps
+            // its primary tint.
+            border: `${isSelected || fileMatch ? 4 : 2}px solid ${fileMatch ? theme.colors.primary : color}`,
+            boxShadow: fileMatch
+                ? `0 1px 4px rgba(0,0,0,0.25), 0 0 12px ${theme.colors.primary}55`
+                : '0 1px 4px rgba(0,0,0,0.25)',
+            opacity: fileMatch === false || data.dimmed === true ? 0.18 : 1,
+            transition: 'opacity 150ms ease',
+            cursor: 'pointer',
+            fontFamily: theme.fonts.body,
+        }, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    top: -9,
+                    left: BADGE_EDGE_INSET,
+                    zIndex: 1,
+                    fontFamily: theme.fonts.monospace,
+                    fontSize: theme.fontSizes[0] * 1.1,
+                    letterSpacing: 0.5,
+                    textTransform: 'uppercase',
+                    lineHeight: '17px',
+                    whiteSpace: 'nowrap',
+                    color,
+                    background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                    border: `1px solid ${color}`,
+                    borderRadius: 4,
+                    padding: '0 5px',
+                }, children: constructBadgeLabel(c) }), c.role != null && (_jsx("div", { style: {
+                    position: 'absolute',
+                    top: -9,
+                    right: BADGE_EDGE_INSET,
+                    zIndex: 1,
+                    fontFamily: theme.fonts.monospace,
+                    fontSize: theme.fontSizes[0] * 1.1,
+                    letterSpacing: 0.5,
+                    textTransform: 'uppercase',
+                    lineHeight: '17px',
+                    whiteSpace: 'nowrap',
+                    color: ROLE_COLOR[c.role],
+                    background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                    border: `1px solid ${ROLE_COLOR[c.role]}`,
+                    borderRadius: 4,
+                    padding: '0 5px',
+                }, children: ROLE_LABEL[c.role] })), (hover || fileMatch === true) && c.file ? (_jsx("div", { style: {
+                    position: 'absolute',
+                    bottom: -13,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    zIndex: 1,
+                    fontFamily: theme.fonts.monospace,
+                    fontSize: theme.fontSizes[0] * 1.1,
+                    letterSpacing: 0.5,
+                    lineHeight: '17px',
+                    whiteSpace: 'nowrap',
+                    // filename stays neutral — the construct color belongs to the
+                    // borders and badges, not the file name
+                    color: theme.colors.text ?? theme.colors.textSecondary,
+                    background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                    border: `1px solid ${color}`,
+                    borderRadius: 4,
+                    padding: '0 5px',
+                    cursor: 'pointer',
+                }, onClick: (e) => {
+                    // Open the file directly; don't also toggle node selection.
+                    e.stopPropagation();
+                    SUBSYSTEM_CALLBACKS.onOpenFile?.(c.id);
+                }, children: c.file.split('/').pop() })) : null, _jsx("div", { style: {
+                    fontSize: theme.fontSizes[2],
+                    fontWeight: 600,
+                    color: theme.colors.text,
+                    lineHeight: 1.2,
+                    textAlign: 'center',
+                    // Let long names wrap within the node's capped width (instead of
+                    // truncating), but cap each line so the node doesn't grow unbounded.
+                    whiteSpace: 'normal',
+                    overflowWrap: 'anywhere',
+                    maxWidth: '100%',
+                    fontFamily: theme.fonts.body,
+                }, children: breakWords(displayName) }), c.symbol &&
+                c.symbol !==
+                    displayName
+                        .replace(/^<(.+)>$/, '$1')
+                        .replace(/ ?\{\}$/, '')
+                        .replace(/\(\)$/, '') && (_jsx("div", { style: {
+                    fontSize: theme.fontSizes[0] * 0.82,
+                    fontFamily: theme.fonts.monospace,
+                    color: color,
+                    marginTop: 1,
+                    textAlign: 'center',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '100%',
+                }, title: c.symbol, children: c.symbol })), _jsx(Handle, { type: "target", position: Position.Left, style: { opacity: 0 } }), _jsx(Handle, { type: "source", position: Position.Right, style: { opacity: 0 } })] }));
+}
+/**
+ * Process boundary frame — a React Flow parent node. Members render inside
+ * via `parentId`; this draws the labeled container only (no handles, no
+ * selection). The border color derives deterministically from the process key
+ * so each deployment unit reads as its own region.
+ */
+export function SubsystemGroupNode(props) {
+    const { theme } = useTheme();
+    const { data, width, height, selected } = props;
+    const region = data.region;
+    const color = packageColor(region?.key ?? 'process');
+    const dimmed = data.dimmed === true;
+    const hidden = data.hidden === true;
+    if (!region)
+        return null;
+    return (_jsx("div", { style: {
+            position: 'relative',
+            width: width ?? 400,
+            height: height ?? 300,
+            boxSizing: 'border-box',
+            borderRadius: 12,
+            border: `2px ${selected ? 'solid' : 'dashed'} ${color}`,
+            background: `${color}14`,
+            opacity: hidden ? 0 : dimmed ? 0.35 : 1,
+            transition: 'opacity 150ms ease',
+            pointerEvents: 'none',
+        }, children: _jsx("div", { style: {
+                position: 'absolute',
+                top: -19,
+                left: 12,
+                fontFamily: theme.fonts.monospace,
+                fontSize: theme.fontSizes[3],
+                fontWeight: 700,
+                letterSpacing: 0.6,
+                color,
+                background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                border: `1px solid ${color}`,
+                borderRadius: 4,
+                padding: '1px 7px',
+                whiteSpace: 'nowrap',
+            }, children: region.label }) }));
+}
+/** `#rrggbb` + alpha → `#rrggbbaa`. Used to dim a stroke/marker by color so
+ *  each opacity gets its own SVG marker id — path `opacity` leaks across every
+ *  edge that shares a `url(#marker)` (the focused edge's arrowhead dims). */
+export function hexWithAlpha(hex, alpha) {
+    const raw = hex.replace('#', '');
+    const full = raw.length === 3 ? [...raw].map((c) => c + c).join('') : raw;
+    if (!/^[0-9a-fA-F]{6}$/.test(full))
+        return hex;
+    const a = Math.round(Math.min(1, Math.max(0, alpha)) * 255)
+        .toString(16)
+        .padStart(2, '0');
+    return `#${full}${a}`;
+}
+/**
+ * File-open spotlight flag for a node. `true` = lives in the open file,
+ * `false` = dim, `undefined` = render neutrally.
+ *
+ * Focused-edge endpoints stay neutral when they don't live in the open file
+ * (the target of a focused edge must not dim with the rest).
+ */
+export function fileMatchForNode(nodeFile, openFile, isFocusEndpoint) {
+    if (!openFile)
+        return undefined;
+    if (nodeFile === openFile)
+        return true;
+    if (isFocusEndpoint)
+        return undefined;
+    return false;
+}
+/**
+ * Hide / dim a node or edge while flows are open.
+ * - not in any opened flow → hidden
+ * - in an opened flow, but not the selected flow/step → dimmed
+ * - in the selected flow or step (or opened with nothing selected) → full
+ */
+export function flowElementVisibility(opts) {
+    const { inOpened, inSelected, anyOpened, anySelected } = opts;
+    if (!anyOpened && !anySelected)
+        return { hidden: false, dimmed: false };
+    if (!inOpened && !inSelected)
+        return { hidden: true, dimmed: false };
+    if (anySelected && !inSelected)
+        return { hidden: false, dimmed: true };
+    return { hidden: false, dimmed: false };
+}
+export const EDGE_DIM_ALPHA = 0.15;
+/** Subsystem edge — SVG path only. The mechanism label is rendered as an
+ *  absolutely-positioned HTML overlay OUTSIDE the ReactFlow tree (by the
+ *  parent Inner component) so it sits above the pane and receives pointer
+ *  events. */
+export function SubsystemEdge({ data, markerEnd, }) {
+    const path = data?.elkPath ?? '';
+    const mechanism = data?.mechanism ?? 'imports';
+    const color = MECHANISM_COLOR[mechanism] ?? '#888';
+    // Dash style comes from the mechanism table (dashed = inverted-control or
+    // observational relationships: hierarchy, registration, watches).
+    const isDashed = MECHANISM_STYLE[mechanism] === 'dashed';
+    const dimmed = data?.dimmed === true;
+    // Dim the stroke by color, never via path `opacity`. SVG markers are shared
+    // by id; opacity on the referencing path paints every arrowhead that uses
+    // the same marker — including the focused edge's target.
+    const stroke = dimmed ? hexWithAlpha(color, EDGE_DIM_ALPHA) : color;
+    return (_jsxs(_Fragment, { children: [_jsx("path", { d: path, fill: "none", stroke: "transparent", strokeWidth: 20, className: "react-flow__edge-interaction" }), _jsx("path", { d: path, fill: "none", stroke: stroke, strokeWidth: 1.5, strokeDasharray: isDashed ? '6 4' : undefined, markerEnd: markerEnd, style: { pointerEvents: 'none' } })] }));
+}
+//# sourceMappingURL=nodes.js.map

package/dist/subsystem/nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodes.js","sourceRoot":"","sources":["../../src/subsystem/nodes.tsx"],"names":[],"mappings":"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"}

package/dist/subsystem/paths.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Multi-repo path handling for subsystem graphs.
+ *
+ * A component's `file` is relative to ITS OWN repo root — the repo identified
+ * by its `purl` (`pkg:github/<owner>/<name>[#<path>]`) — never to the machine.
+ * When a graph spans several repos the sidebar tree needs synthetic
+ * `<owner>/<name>/` prefixes to keep same-named paths apart; hosts resolve
+ * each file against `repoRoots[purlRepo] ?? repoRoot`.
+ */
+/** Normalize a purl to its repo key: fragment and surrounding whitespace stripped. */
+export declare function purlRepoKey(purl: string | undefined): string | undefined;
+/** `owner/name` from a purl (`pkg:github/acme/widget#x/y.ts` → `acme/widget`). */
+export declare function purlOwnerName(purl: string | undefined): string | undefined;
+export interface TreeEntry {
+    /** Path as shown in the sidebar tree (repo-prefixed when multi-repo). */
+    displayPath: string;
+    /** The component's own file value — what hosts resolve + drawers open. */
+    file: string;
+}
+export interface TreePathMapping {
+    entries: TreeEntry[];
+    /** True when components span more than one repo (prefixes are shown). */
+    multiRepo: boolean;
+    /** displayPath → file. */
+    toFile: Map<string, string>;
+    /** file → displayPath (first component wins). */
+    toDisplay: Map<string, string>;
+}
+/**
+ * Build the sidebar tree's path set from components. Single-repo graphs (and
+ * purl-less components) keep bare `file` values; mixed-repo graphs prefix each
+ * entry with its purl's `owner/name` so the tree groups by repo.
+ */
+export declare function buildTreePathMapping(components: ReadonlyArray<{
+    file?: string;
+    purl?: string;
+}>): TreePathMapping;
+export interface RepoGroup {
+    /** Purl repo key (`pkg:github/owner/name`) — undefined for purl-less components. */
+    repoKey?: string;
+    /** `owner` segment of the purl, when present. */
+    owner?: string;
+    /** Repository name segment of the purl, when present. */
+    repo?: string;
+    /** The group's files, bare `file` values (each tree scopes its own paths). */
+    entries: TreeEntry[];
+}
+/**
+ * Group components by repo for the multi-tree sidebar. Groups preserve
+ * first-appearance order; purl-less components land in a trailing unbadged
+ * group. Entries carry bare `file` values — separate trees scope their own
+ * path sets, so no synthetic prefixes are needed.
+ */
+export declare function buildRepoGroups(components: ReadonlyArray<{
+    file?: string;
+    purl?: string;
+}>): {
+    multiRepo: boolean;
+    groups: RepoGroup[];
+};
+/** GitHub owner-avatar URL for a purl, or undefined for non-github hosts. */
+export declare function repoAvatarUrl(purl: string | undefined): string | undefined;
+//# sourceMappingURL=paths.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paths.d.ts","sourceRoot":"","sources":["../../src/subsystem/paths.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,sFAAsF;AACtF,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAIxE;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAO1E;AAED,MAAM,WAAW,SAAS;IACxB,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,yEAAyE;IACzE,SAAS,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,iDAAiD;IACjD,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,aAAa,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG,eAAe,CAmBjH;AAOD,MAAM,WAAW,SAAS;IACxB,oFAAoF;IACpF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,OAAO,EAAE,SAAS,EAAE,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,aAAa,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG;IAC5F,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB,CAwBA;AAED,6EAA6E;AAC7E,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAI1E"}

package/dist/subsystem/paths.js

@@ -0,0 +1,86 @@
+/**
+ * Multi-repo path handling for subsystem graphs.
+ *
+ * A component's `file` is relative to ITS OWN repo root — the repo identified
+ * by its `purl` (`pkg:github/<owner>/<name>[#<path>]`) — never to the machine.
+ * When a graph spans several repos the sidebar tree needs synthetic
+ * `<owner>/<name>/` prefixes to keep same-named paths apart; hosts resolve
+ * each file against `repoRoots[purlRepo] ?? repoRoot`.
+ */
+/** Normalize a purl to its repo key: fragment and surrounding whitespace stripped. */
+export function purlRepoKey(purl) {
+    if (!purl)
+        return undefined;
+    const base = purl.split('#')[0]?.trim();
+    return base || undefined;
+}
+/** `owner/name` from a purl (`pkg:github/acme/widget#x/y.ts` → `acme/widget`). */
+export function purlOwnerName(purl) {
+    const key = purlRepoKey(purl);
+    if (!key)
+        return undefined;
+    // pkg:<type>/<owner>/<name> → take the last two segments.
+    const parts = key.split('/').filter(Boolean);
+    if (parts.length < 2)
+        return undefined;
+    return `${parts[parts.length - 2]}/${parts[parts.length - 1]}`;
+}
+/**
+ * Build the sidebar tree's path set from components. Single-repo graphs (and
+ * purl-less components) keep bare `file` values; mixed-repo graphs prefix each
+ * entry with its purl's `owner/name` so the tree groups by repo.
+ */
+export function buildTreePathMapping(components) {
+    const withFiles = components.filter((c) => c.file);
+    const repos = new Set(withFiles.map((c) => purlRepoKey(c.purl)).filter((k) => !!k));
+    const multiRepo = repos.size > 1;
+    const entries = [];
+    const toFile = new Map();
+    const toDisplay = new Map();
+    for (const c of withFiles) {
+        const ownerName = multiRepo ? purlOwnerName(c.purl) : undefined;
+        const displayPath = ownerName ? `${ownerName}/${c.file}` : c.file;
+        if (toFile.has(displayPath))
+            continue;
+        entries.push({ displayPath, file: c.file });
+        toFile.set(displayPath, c.file);
+        if (!toDisplay.has(c.file))
+            toDisplay.set(c.file, displayPath);
+    }
+    return { entries, multiRepo, toFile, toDisplay };
+}
+/**
+ * Group components by repo for the multi-tree sidebar. Groups preserve
+ * first-appearance order; purl-less components land in a trailing unbadged
+ * group. Entries carry bare `file` values — separate trees scope their own
+ * path sets, so no synthetic prefixes are needed.
+ */
+export function buildRepoGroups(components) {
+    const withFiles = components.filter((c) => c.file);
+    const repos = new Set(withFiles.map((c) => purlRepoKey(c.purl)).filter((k) => !!k));
+    const multiRepo = repos.size > 1;
+    const byKey = new Map();
+    const order = [];
+    for (const c of withFiles) {
+        const key = purlRepoKey(c.purl);
+        let group = byKey.get(key ?? '');
+        if (!group) {
+            const ownerName = key ? purlOwnerName(c.purl) : undefined;
+            const [owner, repo] = ownerName?.split('/') ?? [];
+            group = { repoKey: key, owner, repo, entries: [] };
+            byKey.set(key ?? '', group);
+            order.push(key);
+        }
+        if (!group.entries.some((e) => e.file === c.file)) {
+            group.entries.push({ displayPath: c.file, file: c.file });
+        }
+    }
+    return { multiRepo, groups: order.map((k) => byKey.get(k ?? '')) };
+}
+/** GitHub owner-avatar URL for a purl, or undefined for non-github hosts. */
+export function repoAvatarUrl(purl) {
+    const key = purlRepoKey(purl);
+    const match = key?.match(/^pkg:github\/([^/]+)\//);
+    return match ? `https://github.com/${match[1]}.png?size=64` : undefined;
+}
+//# sourceMappingURL=paths.js.map

package/dist/subsystem/paths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paths.js","sourceRoot":"","sources":["../../src/subsystem/paths.ts"],"names":[],"mappings":"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"}

package/dist/subsystem/tokenizeComponent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Tokenize a SubsystemComponent into a flat token stream for the detail panel.
+ *
+ * Pipeline: generate declaration string → format with Prettier → tokenize
+ * 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';
+/**
+ * Tokenize a SubsystemComponent into SubsystemDeclToken[].
+ *
+ * When `component.tokens` is present (pre-tokenized data from the wire),
+ * it's returned as-is. Otherwise the pipeline generates a TypeScript
+ * declaration string, formats it with Prettier, and tokenizes the output.
+ */
+export declare function tokenizeComponent(component: SubsystemComponent, printWidth?: number, themeName?: PierreSyntaxThemeName): Promise<SubsystemDeclToken[]>;
+//# sourceMappingURL=tokenizeComponent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokenizeComponent.d.ts","sourceRoot":"","sources":["../../src/subsystem/tokenizeComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAyBtE;;;;;;GAMG;AACH,wBAAsB,iBAAiB,CACrC,SAAS,EAAE,kBAAkB,EAC7B,UAAU,SAAK,EACf,SAAS,GAAE,qBAAqC,GAC/C,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAsB/B"}

package/dist/subsystem/tokenizeComponent.js

@@ -0,0 +1,56 @@
+/**
+ * Tokenize a SubsystemComponent into a flat token stream for the detail panel.
+ *
+ * Pipeline: generate declaration string → format with Prettier → tokenize
+ * 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 { generateDeclarationString } from './formatDeclaration';
+import { tokenizeFormatted } from './tokenizeFormatted';
+// Lazy-loaded Prettier to avoid startup cost.
+let prettierPromise = null;
+let prettierPluginsPromise = null;
+async function getPrettier() {
+    if (!prettierPromise) {
+        prettierPromise = import('prettier/standalone');
+    }
+    if (!prettierPluginsPromise) {
+        prettierPluginsPromise = Promise.all([
+            import('prettier/plugins/typescript'),
+            import('prettier/plugins/estree'),
+        ]).then(([typescript, estree]) => ({ typescript, estree }));
+    }
+    const [prettier, plugins] = await Promise.all([prettierPromise, prettierPluginsPromise]);
+    return { prettier, plugins };
+}
+/**
+ * Tokenize a SubsystemComponent into SubsystemDeclToken[].
+ *
+ * When `component.tokens` is present (pre-tokenized data from the wire),
+ * 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, printWidth = 80, themeName = 'pierre-dark') {
+    // Pre-tokenized tokens from the wire take precedence.
+    if (component.tokens)
+        return component.tokens;
+    // External kind — not valid TypeScript, bypass Prettier.
+    const kind = component.detail?.kind ?? component.construct;
+    if (kind === 'external') {
+        const label = component.detail?.kind === 'external' ? component.detail.label : component.name;
+        const escaped = label.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+        return tokenizeFormatted(`external '${escaped}'`, themeName);
+    }
+    // Generate → format → tokenize
+    const raw = generateDeclarationString(component);
+    const { prettier, plugins } = await getPrettier();
+    const formatted = await prettier.format(raw, {
+        parser: 'typescript',
+        plugins: [plugins.typescript, plugins.estree],
+        printWidth,
+    });
+    return tokenizeFormatted(formatted, themeName);
+}
+//# sourceMappingURL=tokenizeComponent.js.map

package/dist/subsystem/tokenizeComponent.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,12 @@
+/**
+ * Tokenize a formatted TypeScript declaration string into SubsystemDeclToken[]
+ * 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, themeName?: PierreSyntaxThemeName): Promise<SubsystemDeclToken[]>;
+//# sourceMappingURL=tokenizeFormatted.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,13 @@
+/**
+ * Tokenize a formatted TypeScript declaration string into SubsystemDeclToken[]
+ * using Shiki + Pierre themes (same highlighter stack as @pierre/diffs).
+ */
+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, themeName = 'pierre-dark') {
+    return tokenizeWithPierreSyntax(code, themeName);
+}
+//# sourceMappingURL=tokenizeFormatted.js.map

package/dist/subsystem/tokenizeFormatted.js.map

@@ -0,0 +1 @@
+{"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/dist/utils/animationMapping.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Animation mapping utilities
+ *
+ * Maps log levels and component events to appropriate animations
+ * for Milestone 1 default visualization behavior
+ */
+import type { LogLevel } from '@principal-ai/subsystems-core';
+/**
+ * Node animation configuration
+ */
+export interface NodeAnimation {
+    type: 'pulse' | 'flash' | 'shake' | 'entry';
+    duration: number;
+    intensity?: number;
+    color?: string;
+}
+/**
+ * Edge animation configuration
+ */
+export interface EdgeAnimation {
+    type: 'flow' | 'particle' | 'pulse' | 'glow';
+    duration: number;
+    direction?: 'forward' | 'backward' | 'bidirectional';
+    color?: string;
+}
+/**
+ * Map log level to node animation
+ *
+ * Default behavior for Milestone 1:
+ * - debug: subtle pulse (low intensity)
+ * - info: standard pulse (medium intensity)
+ * - warn: amber pulse (high intensity)
+ * - error: red flash + shake
+ */
+export declare function logLevelToNodeAnimation(level: LogLevel): NodeAnimation;
+/**
+ * Map component action to node animation (Milestone 2)
+ */
+export declare function actionToNodeAnimation(_action: string, state?: string): NodeAnimation;
+/**
+ * Get animation config for edge based on action (Milestone 2)
+ */
+export declare function actionToEdgeAnimation(_action: string, edgeConfig?: EdgeAnimation): EdgeAnimation;
+/**
+ * Check if log level should trigger animation
+ */
+export declare function shouldAnimate(level: LogLevel, minLevel?: LogLevel): boolean;
+/**
+ * Calculate animation intensity based on frequency
+ * Used to adjust animation intensity when multiple logs occur rapidly
+ */
+export declare function calculateIntensity(baseIntensity: number, eventCount: number, _timeWindow?: number): number;
+//# sourceMappingURL=animationMapping.d.ts.map