@principal-ai/principal-view-react 0.16.32 → 0.16.34

package/dist/index.d.ts

@@ -51,5 +51,9 @@ export type { JsonValue, GraphifyFileType, GraphifyConfidence, GraphifyNodeType,
 export type { GraphifyAnchorResolution, SubsystemGraphifyAnchor, GraphifyMethodInfo, GraphifyPropertyInfo, GraphifyParamInfo, GraphifyCallInfo, GraphifyReferenceInfo, GraphifyImportInfo, GraphifyClassDetail, GraphifyFunctionDetail, GraphifyTypeDetail, GraphifyModuleDetail, GraphifyExternalDetail, GraphifyComponentDetail, GraphifyEdgeRef, } from './graphify';
 export { SubsystemComponentGraph } from './subsystem/SubsystemComponentGraph';
 export type { SubsystemComponentGraphProps } from './subsystem/SubsystemComponentGraph';
+export { SubsystemFileTree } from './subsystem/SubsystemFileTree';
+export type { SubsystemFileTreeProps } from './subsystem/SubsystemFileTree';
+export { GraphLayoutCover } from './subsystem/GraphLayoutCover';
+export type { GraphLayoutCoverProps } from './subsystem/GraphLayoutCover';
 export type { SubsystemComponent, SubsystemComponentEdge, SubsystemGraphDocument, SubsystemComponentKind, SubsystemEdgeMechanism, } from './subsystem/model';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -37,4 +37,6 @@ export { PipelineView, useStateView } from './components/state-view';
 export { SessionEventFeed, SessionEventFeedGrouped, } from './components/session-events';
 // Subsystem component graph
 export { SubsystemComponentGraph } from './subsystem/SubsystemComponentGraph';
+export { SubsystemFileTree } from './subsystem/SubsystemFileTree';
+export { GraphLayoutCover } from './subsystem/GraphLayoutCover';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAsBH,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAS9D,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAOnG,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,6BAA6B;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,8BAA8B;AAC9B,OAAO,EACL,sBAAsB,EACtB,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,2BAA2B;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,mBAAmB;AACnB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,GACd,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAGvG,4DAA4D;AAC5D,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAG1E,6EAA6E;AAC7E,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,SAAS,EACT,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,GACvB,MAAM,wBAAwB,CAAC;AAsChC,6DAA6D;AAC7D,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAmCrE,sEAAsE;AACtE,OAAO,EACL,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,6BAA6B,CAAC;AAsCrC,4BAA4B;AAC5B,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAsBH,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAG/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAS9D,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAOnG,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,6BAA6B;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,8BAA8B;AAC9B,OAAO,EACL,sBAAsB,EACtB,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,2BAA2B;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,mBAAmB;AACnB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,GACd,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAGvG,4DAA4D;AAC5D,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAG1E,6EAA6E;AAC7E,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,SAAS,EACT,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,GACvB,MAAM,wBAAwB,CAAC;AAsChC,6DAA6D;AAC7D,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAmCrE,sEAAsE;AACtE,OAAO,EACL,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,6BAA6B,CAAC;AAsCrC,4BAA4B;AAC5B,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/subsystem/GraphLayoutCover.d.ts

@@ -0,0 +1,19 @@
+/**
+ * GraphLayoutCover — opaque overlay that hides a graph's startup sequence
+ * (initial measurement render, layout swap, camera settle animation).
+ *
+ * Must sit inside a `position: relative` ancestor sized to the canvas; it
+ * covers exactly that box. Renders covered from mount and fades out
+ * `holdMs` after `revealed` flips true, then stays transparent until the
+ * next `revealed → false` reset.
+ */
+export interface GraphLayoutCoverProps {
+    /** True once the final layout is ready and the camera has settled. */
+    revealed: boolean;
+    /** How long to stay fully opaque after `revealed`. @default 650 */
+    holdMs?: number;
+    /** Label shown while covered. @default 'Laying out graph…' */
+    label?: string;
+}
+export declare function GraphLayoutCover({ revealed, holdMs, label, }: GraphLayoutCoverProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GraphLayoutCover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GraphLayoutCover.d.ts","sourceRoot":"","sources":["../../src/subsystem/GraphLayoutCover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,MAAM,WAAW,qBAAqB;IACpC,sEAAsE;IACtE,QAAQ,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,MAAY,EACZ,KAA2B,GAC5B,EAAE,qBAAqB,2CA0CvB"}

package/dist/subsystem/GraphLayoutCover.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * GraphLayoutCover — opaque overlay that hides a graph's startup sequence
+ * (initial measurement render, layout swap, camera settle animation).
+ *
+ * Must sit inside a `position: relative` ancestor sized to the canvas; it
+ * covers exactly that box. Renders covered from mount and fades out
+ * `holdMs` after `revealed` flips true, then stays transparent until the
+ * next `revealed → false` reset.
+ */
+import { useEffect, useState } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+export function GraphLayoutCover({ revealed, holdMs = 650, label = 'Laying out graph…', }) {
+    const { theme } = useTheme();
+    const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+    const [coverUp, setCoverUp] = useState(true);
+    useEffect(() => {
+        if (!revealed) {
+            setCoverUp(true);
+            return;
+        }
+        const t = setTimeout(() => setCoverUp(false), holdMs);
+        return () => clearTimeout(t);
+    }, [revealed, holdMs]);
+    return (_jsx("div", { style: {
+            position: 'absolute',
+            inset: 0,
+            zIndex: 15,
+            background: theme.colors.background,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            opacity: coverUp ? 1 : 0,
+            transition: 'opacity 200ms ease',
+            pointerEvents: 'none',
+        }, children: coverUp && (_jsx("span", { style: {
+                color: muted,
+                fontFamily: theme.fonts.monospace,
+                fontSize: theme.fontSizes[0],
+            }, children: label })) }));
+}
+//# sourceMappingURL=GraphLayoutCover.js.map

package/dist/subsystem/GraphLayoutCover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphLayoutCover.js","sourceRoot":"","sources":["../../src/subsystem/GraphLayoutCover.tsx"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAWzD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,MAAM,GAAG,GAAG,EACZ,KAAK,GAAG,mBAAmB,GACL;IACtB,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;IACnE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,EAAE;YACb,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,OAAO;SACR;QACD,MAAM,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,cACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,EAAE;YACV,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;YACnC,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACxB,UAAU,EAAE,oBAAoB;YAChC,aAAa,EAAE,MAAM;SACtB,YAEA,OAAO,IAAI,CACV,eACE,KAAK,EAAE;gBACL,KAAK,EAAE,KAAK;gBACZ,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS;gBACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;aAC7B,YAEA,KAAK,GACD,CACR,GACG,CACP,CAAC;AACJ,CAAC"}

package/dist/subsystem/SubsystemComponentGraph.d.ts

@@ -24,6 +24,9 @@ export interface SubsystemComponentGraphProps {
     maxNodeWidth?: number;
     /** Show edge labels (mechanism names) on the graph. @default true */
     showEdgeLabels?: boolean;
+    /** Show the click-to-open file chip under each component name.
+     *  @default true */
+    showFileBadges?: boolean;
     /** Subsystem title displayed in the sidebar. */
     title?: string;
     /** Markdown description rendered in the sidebar. */
@@ -35,11 +38,23 @@ export interface SubsystemComponentGraphProps {
     /** Rendered in the sidebar under the description (e.g. selection inspector). */
     sidebarAfterDescription?: ReactNode;
     /**
-     * Rendered inside the selected-component detail panel when the component
-     * has a `file`. Host-injected reader/renderer so this package stays free
-     * of fs and code-view dependencies.
+     * Host-injected reader/renderer for the bottom file drawer, keyed by
+     * repo-root-relative path. Opening happens on node click (component with a
+     * `file`) and sidebar file-tree click. Keeps this package free of fs and
+     * code-view dependencies.
+     */
+    renderFileViewer?: (file: string) => ReactNode;
+    /**
+     * Legacy component-keyed variant, kept for backward compatibility. When
+     * `renderFileViewer` is absent, drawer content resolves via the first
+     * component whose `file` matches the opened path.
      */
     renderFileView?: (component: SubsystemComponent) => ReactNode;
+    /**
+     * Called when a file in the sidebar file tree is clicked (repo-root-relative
+     * path). The tree is derived from the components' `file` values.
+     */
+    onFileSelect?: (file: string) => void;
 }
 export declare function SubsystemComponentGraph(props: SubsystemComponentGraphProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SubsystemComponentGraph.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SubsystemComponentGraph.d.ts","sourceRoot":"","sources":["../../src/subsystem/SubsystemComponentGraph.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAAiC,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBtE,OAAO,EAKL,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EAExB,MAAM,SAAS,CAAC;AAuBjB,MAAM,WAAW,4BAA4B;IAC3C,UAAU,EAAE,kBAAkB,EAAE,CAAC;IACjC,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,6EAA6E;IAC7E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACtD;kFAC8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gFAAgF;IAChF,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,kBAAkB,KAAK,SAAS,CAAC;CAC/D;AAwkBD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAsC1E"}
+{"version":3,"file":"SubsystemComponentGraph.d.ts","sourceRoot":"","sources":["../../src/subsystem/SubsystemComponentGraph.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAAiC,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBtE,OAAO,EAKL,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EAExB,MAAM,SAAS,CAAC;AAyBjB,MAAM,WAAW,4BAA4B;IAC3C,UAAU,EAAE,kBAAkB,EAAE,CAAC;IACjC,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,6EAA6E;IAC7E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACtD;kFAC8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;wBACoB;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gFAAgF;IAChF,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IAC/C;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAC9D;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAgxBD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAsC1E"}

package/dist/subsystem/SubsystemComponentGraph.js

@@ -15,9 +15,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ReactFlow, ReactFlowProvider, Background, BackgroundVariant, Controls, useReactFlow, useViewport, applyNodeChanges, } from '@xyflow/react';
 import { useTheme } from '@principal-ade/industry-theme';
+import { X } from 'lucide-react';
 import { IndustryMarkdownSlide } from 'themed-markdown';
 import { buildSubsystemGraph, KIND_COLOR, MECHANISM_COLOR, deriveNameFromSymbol, } from './model';
 import { SubsystemComponentNode, SubsystemEdge, SUBSYSTEM_CALLBACKS } from './nodes';
+import { SubsystemFileTree } from './SubsystemFileTree';
+import { GraphLayoutCover } from './GraphLayoutCover';
 const MECHANISM_DESCRIPTIONS = [
     ['imports', 'import statement (code-level dependency)', true],
     ['imports_from', 'imported by (reverse dependency)', true],
@@ -42,7 +45,7 @@ const nodeTypes = {
 const edgeTypes = {
     'subsystem-edge': SubsystemEdge,
 };
-function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, title, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, renderFileView }) {
+function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showFileBadges, title, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, renderFileView, renderFileViewer, onFileSelect }) {
     const { theme } = useTheme();
     const { fitView } = useReactFlow();
     const viewport = useViewport();
@@ -52,10 +55,17 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
     });
     const [layoutReady, setLayoutReady] = useState(false);
     const [selected, setSelected] = useState(null);
+    // File currently shown in the bottom drawer (repo-root-relative path).
+    const [openFile, setOpenFile] = useState(null);
+    // Component the pointer is over (null on leave) → transient tree highlight.
+    const [hoveredComponentId, setHoveredComponentId] = useState(null);
     // Ref mirror of `selected` so the SUBSYSTEM_CALLBACKS click handler (a
     // closure over the effect deps) can toggle without a stale value.
     const selectedRef = useRef(null);
     selectedRef.current = selected;
+    // Ref mirror of `openFile` for the tree-click toggle.
+    const openFileRef = useRef(null);
+    openFileRef.current = openFile;
     // Pass 1: build with estimated widths so React Flow can measure the DOM.
     // The pane stays hidden until Pass 2 completes.
     useEffect(() => {
@@ -124,6 +134,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
             const comp = components.find((c) => c.id === id);
             if (comp) {
                 // Clicking the already-selected node unselects it (toggle off).
+                // Selection is independent of the file drawer — nodes never open it.
                 if (selectedRef.current?.id === comp.id) {
                     setSelected(null);
                     setSelectedEdgeId(null);
@@ -136,15 +147,35 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
         };
         SUBSYSTEM_CALLBACKS.onEdgeSelect = selectEdge;
         SUBSYSTEM_CALLBACKS.maxNodeWidth = maxNodeWidth;
+        SUBSYSTEM_CALLBACKS.onHover = setHoveredComponentId;
         return () => {
             SUBSYSTEM_CALLBACKS.onSelect = undefined;
             SUBSYSTEM_CALLBACKS.onEdgeSelect = undefined;
             SUBSYSTEM_CALLBACKS.maxNodeWidth = undefined;
+            SUBSYSTEM_CALLBACKS.onHover = undefined;
         };
     }, [components, onSelect, maxNodeWidth, selectEdge]);
     const { nodes, edges: convertedEdges } = built;
     const xyflowNodesBase = nodes;
     const baseEdges = convertedEdges;
+    // While a file is open in the drawer, tag each node with whether its
+    // component lives in that file — the node renderer spotlights matches and
+    // dims non-matches (mirrors the edge-dimming behavior on selection).
+    const dispNodes = useMemo(() => {
+        let ns = xyflowNodesBase.map((n) => ({
+            ...n,
+            data: { ...n.data, showFileBadges },
+        }));
+        if (!openFile)
+            return ns;
+        return ns.map((n) => {
+            const comp = n.data?.component;
+            return {
+                ...n,
+                data: { ...n.data, fileMatch: comp?.file === openFile },
+            };
+        });
+    }, [xyflowNodesBase, openFile, showFileBadges]);
     const baseNodesKey = useMemo(() => nodes.map((n) => n.id).sort().join(','), [nodes]);
     const baseEdgesKey = useMemo(() => convertedEdges.map((e) => e.id).sort().join(','), [convertedEdges]);
     // When an edge is selected, dim every other edge + its label to focus it.
@@ -172,14 +203,14 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
                 pendingMeasuredRef.current = true;
             }
         }
-        const result = applyNodeChanges(changes, xyflowNodesBase);
+        const result = applyNodeChanges(changes, dispNodes);
         // After applying changes, check if we should trigger pass 2.
         if (pendingMeasuredRef.current) {
             // Use microtask so the state update from applyNodeChanges commits first.
             queueMicrotask(() => triggerPass2());
         }
         return result;
-    }, [xyflowNodesBase, triggerPass2]);
+    }, [dispNodes, triggerPass2]);
     const onEdgesChange = useCallback((_changes) => dispEdges, [dispEdges]);
     useEffect(() => {
         const t = setTimeout(() => {
@@ -187,11 +218,36 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
         }, 200);
         return () => clearTimeout(t);
     }, [baseNodesKey, baseEdgesKey, fitView]);
+    // When the file drawer opens/closes the canvas resizes — reframe once the
+    // height transition settles: onto the matching (spotlit) nodes while a file
+    // is open, back to the whole graph when it closes.
+    const prevOpenFileRef = useRef(null);
+    useEffect(() => {
+        const prev = prevOpenFileRef.current;
+        prevOpenFileRef.current = openFile;
+        if (!layoutReady || prev === openFile)
+            return;
+        const t = setTimeout(() => {
+            if (openFile) {
+                const ids = xyflowNodesBase
+                    .filter((n) => n.data?.component?.file === openFile)
+                    .map((n) => ({ id: n.id }));
+                if (ids.length > 0) {
+                    fitView({ nodes: ids, padding: 0.35, minZoom: 0.05, maxZoom: 2, duration: 250 });
+                }
+            }
+            else {
+                fitView({ padding: 0.1, includeHiddenNodes: false, minZoom: 0.05, maxZoom: 2, duration: 250 });
+            }
+        }, 230);
+        return () => clearTimeout(t);
+    }, [openFile, layoutReady, xyflowNodesBase, fitView]);
     const onNodeClick = useCallback((_e, node) => {
         const comp = node.data?.component;
         setSelectedEdgeId(null);
         if (node.type === 'subsystem-component' && comp) {
             // Clicking the already-selected node unselects it (toggle off).
+            // Selection is independent of the file drawer — nodes never open it.
             if (selected?.id === comp.id) {
                 setSelected(null);
                 return;
@@ -209,6 +265,16 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
         setSelected(null);
         setSelectedEdgeId(null);
     }, []);
+    // Sidebar file-tree click → toggle in the bottom drawer (+ host hook only
+    // when opening, so hosts don't see close events).
+    const onTreeSelectFile = useCallback((file) => {
+        if (openFileRef.current === file) {
+            setOpenFile(null);
+            return;
+        }
+        setOpenFile(file);
+        onFileSelect?.(file);
+    }, [onFileSelect]);
     // Edge label data for the overlay (rendered OUTSIDE ReactFlow so the pane
     // doesn't intercept pointer events). Uses ELK-computed label midpoints from
     // the actual edge path (not node-center approximations).
@@ -228,30 +294,58 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
         return new Set(edgeLabels.map((l) => l.mechanism));
     }, [edgeLabels]);
     const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
-    return (_jsxs("div", { style: { visibility: layoutReady ? 'visible' : 'hidden', width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }, children: [(title || description || usedMechanisms.size > 0 || sidebarExtra || sidebarAfterDescription) && (_jsxs("div", { style: {
-                    width: 280,
-                    minWidth: 280,
+    // Unique source files across components → sidebar file tree.
+    const files = useMemo(() => Array.from(new Set(components.map((c) => c.file).filter(Boolean))).sort(), [components]);
+    // The hovered node's file (null when not hovering / file-less component).
+    const hoveredFile = useMemo(() => {
+        if (!hoveredComponentId)
+            return null;
+        return components.find((c) => c.id === hoveredComponentId)?.file ?? null;
+    }, [components, hoveredComponentId]);
+    // Drawer content renderer: prefer the path-keyed viewer; fall back to the
+    // legacy component-keyed one via a file → first-component lookup.
+    const fileViewer = useMemo(() => {
+        if (renderFileViewer)
+            return renderFileViewer;
+        if (renderFileView) {
+            const byFile = new Map(components.filter((c) => c.file).map((c) => [c.file, c]));
+            return (file) => {
+                const comp = byFile.get(file);
+                return comp ? renderFileView(comp) : null;
+            };
+        }
+        return undefined;
+    }, [renderFileViewer, renderFileView, components]);
+    return (_jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }, children: [(title || description || usedMechanisms.size > 0 || sidebarExtra || sidebarAfterDescription || files.length > 0) && (_jsxs("div", { style: {
+                    width: 340,
+                    minWidth: 340,
                     borderRight: `1px solid ${theme.colors.border}`,
                     background: theme.colors.backgroundSecondary ?? theme.colors.background,
-                    padding: '16px',
-                    overflowY: 'auto',
                     display: 'flex',
                     flexDirection: 'column',
-                    gap: 12,
-                }, children: [sidebarExtra, title && (_jsx("h2", { style: {
-                            margin: 0,
-                            fontSize: theme.fontSizes[2],
-                            fontWeight: 600,
-                            color: theme.colors.text,
-                            fontFamily: theme.fonts.heading,
-                        }, children: title })), description && (_jsx("div", { style: { fontSize: theme.fontSizes[0], lineHeight: 1.5 }, children: _jsx(IndustryMarkdownSlide, { content: description, slideIdPrefix: "subsystem-desc", slideIndex: 0, isVisible: true, theme: theme, disableScroll: true, fontSizeScale: 0.9, enableKeyboardScrolling: false, autoFocusOnVisible: false }) })), sidebarAfterDescription, usedMechanisms.size > 0 && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx("span", { style: { fontSize: theme.fontSizes[0] * 0.8, fontFamily: theme.fonts.monospace, textTransform: 'uppercase', color: muted, fontWeight: 600 }, children: "Edge Legend" }), MECHANISM_DESCRIPTIONS.filter(([m]) => usedMechanisms.has(m)).map(([mechanism, desc, verifiable]) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: theme.fontSizes[0] }, children: [_jsx("span", { style: {
-                                            width: 8,
-                                            height: 8,
-                                            borderRadius: verifiable ? '50%' : '30% 70% 70% 30% / 30% 30% 70% 70%',
-                                            background: MECHANISM_COLOR[mechanism],
-                                            border: verifiable ? 'none' : `1px dashed ${MECHANISM_COLOR[mechanism]}`,
-                                            flexShrink: 0,
-                                        } }), _jsx("span", { style: { fontFamily: theme.fonts.monospace, color: MECHANISM_COLOR[mechanism], fontWeight: 500 }, children: mechanism }), _jsx("span", { style: { color: muted }, children: desc })] }, mechanism)))] }))] })), _jsxs("div", { style: { flex: 1, position: 'relative', display: 'flex', flexDirection: 'column', minHeight: 0 }, children: [showEdgeLabels !== false && (_jsx("div", { style: {
+                    overflow: 'hidden',
+                }, children: [_jsxs("div", { style: {
+                            flex: 1,
+                            minHeight: 0,
+                            overflowY: 'auto',
+                            padding: '16px',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 12,
+                        }, children: [sidebarExtra, title && (_jsx("h2", { style: {
+                                    margin: 0,
+                                    fontSize: theme.fontSizes[2],
+                                    fontWeight: 600,
+                                    color: theme.colors.text,
+                                    fontFamily: theme.fonts.heading,
+                                }, children: title })), description && (_jsx("div", { style: { fontSize: theme.fontSizes[0], lineHeight: 1.5 }, children: _jsx(IndustryMarkdownSlide, { content: description, slideIdPrefix: "subsystem-desc", slideIndex: 0, isVisible: true, theme: theme, disableScroll: true, fontSizeScale: 0.9, enableKeyboardScrolling: false, autoFocusOnVisible: false }) })), sidebarAfterDescription, usedMechanisms.size > 0 && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx("span", { style: { fontSize: theme.fontSizes[0] * 0.8, fontFamily: theme.fonts.monospace, textTransform: 'uppercase', color: muted, fontWeight: 600 }, children: "Edge Legend" }), MECHANISM_DESCRIPTIONS.filter(([m]) => usedMechanisms.has(m)).map(([mechanism, desc, verifiable]) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: theme.fontSizes[0] }, children: [_jsx("span", { style: {
+                                                    width: 8,
+                                                    height: 8,
+                                                    borderRadius: verifiable ? '50%' : '30% 70% 70% 30% / 30% 30% 70% 70%',
+                                                    background: MECHANISM_COLOR[mechanism],
+                                                    border: verifiable ? 'none' : `1px dashed ${MECHANISM_COLOR[mechanism]}`,
+                                                    flexShrink: 0,
+                                                } }), _jsx("span", { style: { fontFamily: theme.fonts.monospace, color: MECHANISM_COLOR[mechanism], fontWeight: 500 }, children: mechanism }), _jsx("span", { style: { color: muted }, children: desc })] }, mechanism)))] }))] }), files.length > 0 && (_jsx(SubsystemFileTree, { files: files, selectedFile: selected?.file ?? openFile, hoveredFile: hoveredFile, onSelectFile: onTreeSelectFile }))] })), _jsxs("div", { style: { flex: 1, position: 'relative', display: 'flex', flexDirection: 'column', minHeight: 0 }, children: [showEdgeLabels !== false && (_jsx("div", { style: {
                             position: 'absolute',
                             inset: 0,
                             overflow: 'hidden',
@@ -283,17 +377,18 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
                                     opacity: lbl.dimmed ? 0.15 : 1,
                                     whiteSpace: 'nowrap',
                                 }, children: lbl.mechanism }, lbl.id));
-                        }) })), _jsxs(ReactFlow, { nodes: xyflowNodesBase, edges: dispEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.05, maxZoom: 4, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, proOptions: { hideAttribution: true }, nodesDraggable: false, elementsSelectable: true, selectNodesOnDrag: false, nodesConnectable: false, edgesReconnectable: false, onPaneClick: onPaneClick, panOnDrag: true, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, style: {
+                        }) })), _jsxs(ReactFlow, { nodes: dispNodes, edges: dispEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.05, maxZoom: 4, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, proOptions: { hideAttribution: true }, nodesDraggable: false, elementsSelectable: true, selectNodesOnDrag: false, nodesConnectable: false, edgesReconnectable: false, onPaneClick: onPaneClick, panOnDrag: true, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, style: {
                             width: '100%',
                             height: '100%',
                             flex: 1,
                             minHeight: 0,
                             background: theme.colors.background,
-                        }, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 }), _jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true })] }, `${baseNodesKey}-${baseEdgesKey}`), selected && _jsx(ComponentDetail, { component: selected, renderFileView: renderFileView }), canvasOverlay] })] }));
+                        }, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 }), _jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true })] }, `${baseNodesKey}-${baseEdgesKey}`), selected && _jsx(ComponentDetail, { component: selected }), _jsx(FileDrawer, { file: openFile, onClose: () => setOpenFile(null), children: fileViewer && openFile ? fileViewer(openFile) : null }), _jsx(GraphLayoutCover, { revealed: layoutReady }), canvasOverlay] })] }));
 }
 /** Detail panel for the selected component — the verifiable identity + sources
- *  moved off the canvas so nodes stay minimal. */
-function ComponentDetail({ component, renderFileView }) {
+ *  moved off the canvas so nodes stay minimal. File content lives in the
+ *  bottom FileDrawer, not here. */
+function ComponentDetail({ component }) {
     const { theme } = useTheme();
     const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
     const color = KIND_COLOR[component.kind] ?? '#888';
@@ -330,13 +425,69 @@ function ComponentDetail({ component, renderFileView }) {
                             fontFamily: theme.fonts.monospace,
                             textTransform: 'uppercase',
                             fontSize: theme.fontSizes[0] * 0.8,
-                        }, children: k }), _jsx("span", { style: { color: theme.colors.text, fontFamily: theme.fonts.monospace }, children: v })] }, k))), component.detail && _jsx(GraphifyDetailSections, { detail: component.detail }), renderFileView && component.file && (_jsx("div", { style: {
-                    marginTop: 8,
-                    maxHeight: 320,
-                    overflow: 'auto',
-                    border: `1px solid ${theme.colors.border}`,
-                    borderRadius: 6,
-                }, children: renderFileView(component) }))] }));
+                        }, children: k }), _jsx("span", { style: { color: theme.colors.text, fontFamily: theme.fonts.monospace }, children: v })] }, k))), component.detail && _jsx(GraphifyDetailSections, { detail: component.detail })] }));
+}
+/** Bottom panel that slides up from the bottom of the graph area to show a
+ *  file's contents — opened by node clicks and sidebar file-tree clicks
+ *  alike. Sits in normal flow (canvas shrinks while open, nothing covered)
+ *  and animates via height; stays mounted so open/close animates. */
+function FileDrawer({ file, onClose, children, }) {
+    const { theme } = useTheme();
+    const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+    const open = file !== null;
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [open, onClose]);
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            // Above the absolute edge-label overlay (zIndex 5), which spans the
+            // whole graph-area container including this panel's slice.
+            zIndex: 6,
+            flexShrink: 0,
+            height: open ? '45%' : 0,
+            minHeight: 0,
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            background: theme.colors.background,
+            borderTop: open ? `1px solid ${theme.colors.border}` : 'none',
+            transition: 'height 200ms ease',
+        }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '6px 10px',
+                    borderBottom: `1px solid ${theme.colors.border}`,
+                    flexShrink: 0,
+                }, children: [_jsx("span", { title: file ?? undefined, style: {
+                            flex: 1,
+                            minWidth: 0,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            fontFamily: theme.fonts.monospace,
+                            fontSize: theme.fontSizes[0],
+                            color: muted,
+                        }, children: file }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close file", style: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: 22,
+                            height: 22,
+                            padding: 0,
+                            border: 'none',
+                            borderRadius: 4,
+                            background: 'transparent',
+                            color: theme.colors.text,
+                            cursor: 'pointer',
+                        }, children: _jsx(X, { size: 14 }) })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: children })] }));
 }
 /** Renders the graphify drill-down payload for a component. */
 function GraphifyDetailSections({ detail }) {