@pb33f/cowboy-components 0.12.5 → 0.13.0

package/dist/components/visualizer/explorer.d.ts

@@ -1,13 +1,11 @@
-import '../';
 import { ForeignObjectComponent } from "./foreign-object.js";
 import { GraphNodeComponent } from "./nodes/graph-node.js";
 import { ElkNode, ElkExtendedEdge } from 'elkjs';
-import { Edge, GraphResponse, Node, VacuumResult } from "../../model/graph.js";
+import { Edge, GraphMode, GraphResponse, Node, VacuumResult } from "../../model/graph.js";
 import { EdgeComponent } from "./edge.js";
 import { EqualizerComponent } from "./equalizer.js";
 import { ExplorerDependentNodeClickedEvent, ExplorerEqualizerChangedEvent, ExplorerLoadMoreChildrenEvent } from "../../events/doctor.js";
 import { HasEyes } from "./has-eyes.js";
-import { TheDoctor } from "../the-doctor/the-doctor.js";
 export type ExplorerNode = ElkNode & Node;
 export type ExplorerEdge = ElkExtendedEdge & Edge;
 export declare enum Direction {
@@ -16,7 +14,35 @@ export declare enum Direction {
     LEFT = "LEFT",
     RIGHT = "RIGHT"
 }
+/**
+ * Factory function type for creating an ELK layout worker.
+ * Consumers that cannot use Vite's `?worker&inline` (e.g. static HTML reports
+ * bundled with a different build tool) can supply their own factory via
+ * `ExplorerComponent.elkWorkerFactory`.
+ */
+export type ElkWorkerFactory = () => Worker;
+export type GraphDependentWorkerFactory = () => Worker;
 export declare class ExplorerComponent extends HasEyes {
+    /**
+     * Optional external factory for creating the graph-dependent worker.
+     * Same pattern as elkWorkerFactory — set before any element is created.
+     */
+    static graphDependentWorkerFactory: GraphDependentWorkerFactory | null;
+    /**
+     * Optional external factory for creating the ELK layout worker.
+     *
+     * Set this **before** any `<pb33f-explorer>` element is created so that
+     * the constructor picks it up.  When set, the Vite `?worker&inline`
+     * import is bypassed entirely, avoiding the nested-blob-Worker issue
+     * that browsers block in static-report builds.
+     *
+     * Example (in the consumer):
+     * ```ts
+     * import { ExplorerComponent, createElkLayoutWorker } from '@pb33f/cowboy-components/static-report';
+     * ExplorerComponent.elkWorkerFactory = createElkLayoutWorker;
+     * ```
+     */
+    static elkWorkerFactory: ElkWorkerFactory | null;
     static styles: import("lit").CSSResult[];
     svgItem: SVGSVGElement;
     svgGroup: SVGSVGElement;
@@ -26,6 +52,11 @@ export declare class ExplorerComponent extends HasEyes {
     renderEqualizer: boolean;
     embeddedMode: boolean;
     graphResponse: GraphResponse;
+    disablePovMode: boolean;
+    hideExamples: boolean;
+    hideControls: boolean;
+    changeView: boolean;
+    graphMode: GraphMode;
     povMode: boolean;
     povNodeId: string | null;
     povNode: Node | null;
@@ -44,7 +75,7 @@ export declare class ExplorerComponent extends HasEyes {
     private zoomW;
     private zoomH;
     private readonly graphDependentWorker;
-    private readonly elkLayoutWorker;
+    private elkLayoutWorker;
     private layoutRequestId;
     nodes: ExplorerNode[];
     edges: ExplorerEdge[];
@@ -72,7 +103,7 @@ export declare class ExplorerComponent extends HasEyes {
     violationMap: Map<string, VacuumResult>;
     edgeComponentMap: Map<string, EdgeComponent>;
     nodeComponentMap: Map<string, ForeignObjectComponent>;
-    activeNode: Node;
+    activeNode: Node | undefined;
     previousActiveNodeId: string | null;
     zoomMax: number;
     zoomMin: number;
@@ -91,7 +122,6 @@ export declare class ExplorerComponent extends HasEyes {
     get visibleChildrenCount(): Map<string, number>;
     get pathRevealNodes(): Set<string>;
     get pathRevealTarget(): string | null;
-    doc: TheDoctor;
     private resizeObserver;
     private containerWidth;
     private containerHeight;
@@ -105,11 +135,12 @@ export declare class ExplorerComponent extends HasEyes {
     private boundLoadMoreChildren;
     private boundPovModeExit;
     private boundGraphDependentMessage;
-    constructor(doc: TheDoctor);
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private _resizeRafId;
     private setupResizeObserver;
-    private updateViewBoxForContainer;
+    updateViewBoxForContainer(): void;
     toggleNodeVisibility(nodes: Node[], edges: Edge[], collapse: boolean): void;
     dependentNodeClicked(evt: CustomEvent<ExplorerDependentNodeClickedEvent>): void;
     loadMoreChildrenClicked(evt: CustomEvent<ExplorerLoadMoreChildrenEvent>): void;
@@ -173,6 +204,7 @@ export declare class ExplorerComponent extends HasEyes {
     readyGo(): void;
     reset(): void;
     snapToRoot(): void;
+    resetSelection(): void;
     centerOnRoot(): void;
     navigateToRoot(): void;
     animateViewBox(targetX: number, targetY: number, duration: number): void;

package/dist/components/visualizer/explorer.js

@@ -4,18 +4,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import '../';
+var ExplorerComponent_1;
 import { queryAll, customElement, query, state, property } from "lit/decorators.js";
-import { html, svg } from "lit";
+import { html, svg, nothing } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import visualizerCss from "./visualizer.css.js";
+import { GraphMode } from "../../model/graph.js";
 import { EqualizerComponent } from "./equalizer.js";
 import { ExplorerComponentFactory } from "../../factories/explorer-component-factory.js";
 import { renderSvgMarkers } from "./templates/svg-markers.js";
 import { ExplorerDependentNodeClicked, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, ExplorerLoadMoreChildren, ExplorerPovModeExit, ExplorerReset, ExplorerRotate, ExplorerZoomIn, ExplorerZoomOut, ModelTreeNodeClicked } from "../../events/doctor.js";
 import { HasEyes } from "./has-eyes.js";
-import GraphDependentWorker from "../../workers/graph-dependent.worker.js?worker";
-import ElkLayoutWorker from "../../workers/elk-layout.worker.js?worker";
+import GraphDependentWorker from "../../workers/graph-dependent.worker.js?worker&inline";
+import ElkLayoutWorker from "../../workers/elk-layout.worker.js?worker&inline";
 import sharedCss from "../../css/shared.css.js";
 import { ExpansionManager } from "../../managers/expansion-manager.js";
 import { LayoutFilterManager } from "../../managers/layout-filter-manager.js";
@@ -26,14 +27,19 @@ export var Direction;
     Direction["LEFT"] = "LEFT";
     Direction["RIGHT"] = "RIGHT";
 })(Direction || (Direction = {}));
-let ExplorerComponent = class ExplorerComponent extends HasEyes {
+let ExplorerComponent = ExplorerComponent_1 = class ExplorerComponent extends HasEyes {
     get expandedNodes() { return this.expansionManager.expandedNodes; }
     get visibleChildrenCount() { return this.expansionManager.visibleChildrenCount; }
     get pathRevealNodes() { return this.expansionManager.pathRevealNodes; }
     get pathRevealTarget() { return this.expansionManager.pathRevealTarget; }
-    constructor(doc) {
+    constructor() {
         super();
         this.embeddedMode = false;
+        this.disablePovMode = false;
+        this.hideExamples = false;
+        this.hideControls = false;
+        this.changeView = false;
+        this.graphMode = GraphMode.standard;
         this.povPreviousViewBox = null;
         this.povFocusNodeId = null;
         this.layoutRequestId = 0;
@@ -56,7 +62,7 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         this.resizeObserver = null;
         this.containerWidth = 0;
         this.containerHeight = 0;
-        this.doc = doc;
+        this._resizeRafId = 0;
         this.ready = false;
         this.direction = Direction.RIGHT;
         this.nodeMap = new Map();
@@ -90,8 +96,12 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         this.zoomY = null;
         this.zoomW = null;
         this.zoomH = null;
-        this.graphDependentWorker = new GraphDependentWorker();
-        this.elkLayoutWorker = new ElkLayoutWorker();
+        this.graphDependentWorker = ExplorerComponent_1.graphDependentWorkerFactory
+            ? ExplorerComponent_1.graphDependentWorkerFactory()
+            : new GraphDependentWorker();
+        this.elkLayoutWorker = ExplorerComponent_1.elkWorkerFactory
+            ? ExplorerComponent_1.elkWorkerFactory()
+            : new ElkLayoutWorker();
         this.elkLayoutWorker.onerror = (e) => {
             console.error('[explorer] ELK layout worker error:', e);
         };
@@ -101,7 +111,20 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
             buildGraph: () => this.buildGraph(),
             moveToNode: (node) => this.moveToNode(node),
             getActiveNode: () => this.activeNode,
-            setActiveNode: (node) => { this.activeNode = node; },
+            setActiveNode: (node) => {
+                if (this.previousActiveNodeId && this.renderGraphMap) {
+                    const prev = this.renderGraphMap.get(this.previousActiveNodeId);
+                    if (prev)
+                        prev.active = false;
+                }
+                this.activeNode = node;
+                if (node && this.renderGraphMap) {
+                    const comp = this.renderGraphMap.get(node.id);
+                    if (comp)
+                        comp.active = true;
+                }
+                this.requestUpdate();
+            },
             setPreviousActiveNodeId: (id) => { this.previousActiveNodeId = id; },
             getNodeScreenOffset: (nodeId) => this.getNodeScreenOffset(nodeId),
             restoreNodeScreenPosition: (nodeId, offset) => this.restoreNodeScreenPosition(nodeId, offset),
@@ -165,15 +188,20 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         this.removeEventListener(ExplorerLoadMoreChildren, this.boundLoadMoreChildren);
     }
     setupResizeObserver() {
-        this.resizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                const { width, height } = entry.contentRect;
-                if (width !== this.containerWidth || height !== this.containerHeight) {
-                    this.containerWidth = width;
-                    this.containerHeight = height;
-                    this.updateViewBoxForContainer();
-                }
-            }
+        this.resizeObserver = new ResizeObserver(() => {
+            cancelAnimationFrame(this._resizeRafId);
+            this._resizeRafId = requestAnimationFrame(() => {
+                const { width, height } = this.getBoundingClientRect();
+                if (width === 0 || height === 0)
+                    return;
+                if (Math.abs(width - this.containerWidth) < 2 &&
+                    Math.abs(height - this.containerHeight) < 2)
+                    return;
+                this.containerWidth = width;
+                this.containerHeight = height;
+                // Only update aspect ratio — do NOT mutate viewBox here
+                // to avoid feedback loops with split-panel layouts.
+            });
         });
         this.resizeObserver.observe(this);
     }
@@ -284,6 +312,8 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
     }
     updateGraphResponse(graphResponse) {
         this.graphResponse = graphResponse;
+        this.graphMode = graphResponse.mode || (this.changeView ? GraphMode.change : GraphMode.standard);
+        this.changeView = this.graphMode === GraphMode.change;
         this.expansionManager.invalidateChildrenCache();
         this.layoutFilterManager.invalidateChildrenCache();
         this.equalizer.graphResponse = graphResponse;
@@ -566,12 +596,13 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
     }
     buildGraph() {
         const currentRequestId = ++this.layoutRequestId;
+        const layoutOptions = this.generateOptions();
         const filtered = this.filterGraphByExpansion(this.graphResponse.nodes || [], this.graphResponse.edges || []);
         this.hasMoreChildren = filtered.hasMoreChildren;
         this.applyPositionHints(filtered.nodes);
         const graph = {
             id: "root",
-            layoutOptions: this.generateOptions(),
+            layoutOptions: layoutOptions,
             children: filtered.nodes,
             edges: filtered.edges
         };
@@ -607,7 +638,7 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
             this.elkLayoutWorker.postMessage({
                 requestId: currentRequestId,
                 graph: graph,
-                layoutOptions: { 'algorithm': 'layered' }
+                layoutOptions: layoutOptions
             });
         });
     }
@@ -623,7 +654,11 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
             povMode: this.povMode,
             povNodeId: this.povNodeId,
             activeNode: this.activeNode,
-            violationMap: this.violationMap
+            violationMap: this.violationMap,
+            disablePovMode: this.disablePovMode,
+            hideExamples: this.hideExamples,
+            changeView: this.changeView,
+            graphMode: this.graphMode
         });
         this.nodes = result.nodes;
         this.nodeComponents = result.nodeComponents;
@@ -692,6 +727,16 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
             this.activeNode = rootNode;
         }
     }
+    resetSelection() {
+        if (this.previousActiveNodeId && this.renderGraphMap) {
+            const prev = this.renderGraphMap.get(this.previousActiveNodeId);
+            if (prev)
+                prev.active = false;
+        }
+        this.activeNode = undefined;
+        this.previousActiveNodeId = null;
+        this.requestUpdate();
+    }
     centerOnRoot() {
         if (!this.graph?.children)
             return;
@@ -850,7 +895,7 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         let viewBoxW = this.zoomW !== null ? this.zoomW : defaultW;
         let viewBoxH = this.zoomH !== null ? this.zoomH : defaultH;
         return svg `
-        ${this.equalizer}
+        ${this.hideControls ? nothing : this.equalizer}
         <svg preserveAspectRatio="xMidYMid meet"
                              style="width: 100%; height: ${this.embeddedMode ? '100%' : 'calc(100vh - 170px)'}; cursor: ${this.isDragging ? 'grabbing' : 'grab'};"
                              viewBox="${viewBoxX} ${viewBoxY} ${viewBoxW} ${viewBoxH}"
@@ -867,6 +912,26 @@ let ExplorerComponent = class ExplorerComponent extends HasEyes {
         `;
     }
 };
+/**
+ * Optional external factory for creating the graph-dependent worker.
+ * Same pattern as elkWorkerFactory — set before any element is created.
+ */
+ExplorerComponent.graphDependentWorkerFactory = null;
+/**
+ * Optional external factory for creating the ELK layout worker.
+ *
+ * Set this **before** any `<pb33f-explorer>` element is created so that
+ * the constructor picks it up.  When set, the Vite `?worker&inline`
+ * import is bypassed entirely, avoiding the nested-blob-Worker issue
+ * that browsers block in static-report builds.
+ *
+ * Example (in the consumer):
+ * ```ts
+ * import { ExplorerComponent, createElkLayoutWorker } from '@pb33f/cowboy-components/static-report';
+ * ExplorerComponent.elkWorkerFactory = createElkLayoutWorker;
+ * ```
+ */
+ExplorerComponent.elkWorkerFactory = null;
 ExplorerComponent.styles = [visualizerCss, sharedCss];
 __decorate([
     query('svg')
@@ -892,6 +957,21 @@ __decorate([
 __decorate([
     property()
 ], ExplorerComponent.prototype, "graphResponse", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExplorerComponent.prototype, "disablePovMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExplorerComponent.prototype, "hideExamples", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExplorerComponent.prototype, "hideControls", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExplorerComponent.prototype, "changeView", void 0);
+__decorate([
+    property()
+], ExplorerComponent.prototype, "graphMode", void 0);
 __decorate([
     property()
 ], ExplorerComponent.prototype, "povMode", void 0);
@@ -904,7 +984,7 @@ __decorate([
 __decorate([
     state()
 ], ExplorerComponent.prototype, "models", void 0);
-ExplorerComponent = __decorate([
+ExplorerComponent = ExplorerComponent_1 = __decorate([
     customElement('pb33f-explorer')
 ], ExplorerComponent);
 export { ExplorerComponent };

package/dist/components/visualizer/foreign-object.js

@@ -46,7 +46,7 @@ let ForeignObjectComponent = class ForeignObjectComponent extends LitElement {
         return svg `
               <rect id="node-${this.id}" x="${this.x}" y="${this.y}" width="${this.width}" height="${this.height}" class="node"/>
                 <foreignObject x="${this.x}" y="${this.y}" width="${this.width}" height="${this.height + 30}" class="fo">
-                    <div xmlns="http://www.w3.org/1999/xhtml" class="node-body" style="height: ${this.height}px; width: ${this.width}px;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" class="node-body" style="height: ${this.height}px; width: ${this.width}px; overflow: visible;">
                       ${body}
                     </div>
                 </foreignObject>`;

package/dist/components/visualizer/nodes/callback.js

@@ -36,14 +36,7 @@ let CallbackNodeComponent = class CallbackNodeComponent extends GraphNodeCompone
     }
     render() {
         this.callback = this.nodeInstance;
-        return html `
-            <div class="${this.renderClasses()}" 
-                 style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
-                ${this.renderNode()}
-                ${this.renderUpArrow()}
-                ${this.renderChanges()}
-            </div>
-        `;
+        return this.renderNodeWrapper(this.renderNode());
     }
 };
 CallbackNodeComponent.styles = [sharedCss, changesCss];

package/dist/components/visualizer/nodes/change-view-node.d.ts

@@ -0,0 +1,19 @@
+import { TemplateResult } from "lit";
+import { GraphNodeComponent } from "./graph-node.js";
+import { Node } from "../../../model/graph.js";
+export declare class ChangeViewNodeComponent extends GraphNodeComponent {
+    static styles: import("lit").CSSResult[];
+    constructor(nodeMap: Map<string, Node>);
+    private renderHeader;
+    private childRowClicked;
+    /**
+     * Compute the "own-only" changes for a node by subtracting changes
+     * that also appear in its direct children's timelines.
+     * This mirrors the filtering in renderChanges() so that child-row
+     * badges match what the child node itself would display.
+     */
+    private getOwnChanges;
+    private renderChildRows;
+    renderChanges(): TemplateResult;
+    render(): TemplateResult<1>;
+}

package/dist/components/visualizer/nodes/change-view-node.js

@@ -0,0 +1,132 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import sharedCss from "../shared.css.js";
+import changesCss from "./changes.css.js";
+import changeViewCss from "./change-view.css.js";
+import { GraphNodeComponent } from "./graph-node.js";
+import { IconColor, IconSize } from "../../model-icon/model-icon.js";
+import { NodeType } from "../../../model/node_type.js";
+import { categorizeChanges } from "../../../model/graph.js";
+import { ExplorerNodeClicked } from "../../../events/doctor.js";
+let ChangeViewNodeComponent = class ChangeViewNodeComponent extends GraphNodeComponent {
+    constructor(nodeMap) {
+        super(nodeMap);
+    }
+    renderHeader() {
+        switch (this.node?.type) {
+            case NodeType.OPERATION:
+                return html `
+                    <div class="row header">
+                        <pb33f-model-icon color="${IconColor.secondary}" size="${IconSize.small}"
+                                          icon="${NodeType.OPERATION}"></pb33f-model-icon>
+                        <pb33f-http-method method="${this.label}" tiny></pb33f-http-method>
+                        ${this.renderDependentControl()}
+                    </div>`;
+            case NodeType.PATH_ITEM:
+                return html `
+                    <div class="row header">
+                        <pb33f-model-icon color="${IconColor.secondary}" size="${IconSize.small}"
+                                          icon="${NodeType.PATH_ITEM}"></pb33f-model-icon>
+                        <pb33f-render-operation-path path="${this.label}"></pb33f-render-operation-path>
+                        ${this.renderDependentControl()}
+                    </div>`;
+            case NodeType.DOCUMENT:
+                return html `
+                    <div class="row header">
+                        <pb33f-model-icon color="${IconColor.secondary}" size="${IconSize.small}"
+                                          icon="${NodeType.DOCUMENT}"></pb33f-model-icon>
+                        <span class="header-text">OpenAPI Document</span>
+                        ${this.renderDependentControl()}
+                    </div>`;
+            default:
+                return html `
+                    <div class="row header">
+                        <pb33f-model-icon color="${IconColor.secondary}" size="${IconSize.small}"
+                                          icon="${this.node?.type}"></pb33f-model-icon>
+                        <span class="header-text">${this.label}</span>
+                        ${this.renderDependentControl()}
+                    </div>`;
+        }
+    }
+    childRowClicked(nodeId, e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent(ExplorerNodeClicked, {
+            bubbles: true,
+            composed: true,
+            detail: { nodeId }
+        }));
+    }
+    /**
+     * Compute the "own-only" changes for a node by subtracting changes
+     * that also appear in its direct children's timelines.
+     * This mirrors the filtering in renderChanges() so that child-row
+     * badges match what the child node itself would display.
+     */
+    getOwnChanges(node) {
+        if (!node.timeline?.length)
+            return [];
+        const childChanges = node.childChanges;
+        if (!childChanges?.length)
+            return node.timeline;
+        const childTimelineSet = new Set();
+        for (const cs of childChanges) {
+            const grandchild = this.nodeMap?.get(cs.nodeId);
+            if (grandchild?.timeline) {
+                for (const c of grandchild.timeline) {
+                    childTimelineSet.add(`${c.path}:${c.property}:${c.change}:${c.context?.newLine}:${c.context?.originalLine}`);
+                }
+            }
+        }
+        return node.timeline.filter((c) => !childTimelineSet.has(`${c.path}:${c.property}:${c.change}:${c.context?.newLine}:${c.context?.originalLine}`));
+    }
+    renderChildRows() {
+        const children = this.node?.childChanges;
+        if (!children || children.length === 0)
+            return nothing;
+        return html `${children.map(cs => html `
+            <div class="row cv-row" @click="${(e) => this.childRowClicked(cs.nodeId, e)}">
+                <span class="chevron">&nbsp;&gt;</span>
+                ${cs.type === NodeType.OPERATION
+            ? html `<pb33f-http-method method="${cs.label}" tiny></pb33f-http-method>`
+            : cs.type === NodeType.PATH_ITEM
+                ? html `<pb33f-render-operation-path class="cv-label" path="${cs.label}"></pb33f-render-operation-path>`
+                : html `<pb33f-model-icon size="${IconSize.small}" icon="${cs.type}"></pb33f-model-icon><span class="cv-label">${cs.label}</span>`}
+            </div>
+        `)}`;
+    }
+    renderChanges() {
+        if (!this.node?.timeline?.length)
+            return html ``;
+        if (!this.node.childChanges?.length)
+            return super.renderChanges();
+        const ownOnly = this.getOwnChanges(this.node);
+        if (!ownOnly.length)
+            return html ``;
+        const counts = categorizeChanges(ownOnly);
+        const blocks = this.renderBadges(counts.breaking, counts.modifications, counts.additions, counts.removals);
+        return html `<div class="row-node change-div">${blocks}</div>`;
+    }
+    render() {
+        return html `
+            <div class="${this.renderClasses()}"
+                 style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
+                ${this.renderHeader()}
+                ${this.renderChildRows()}
+                ${this.renderChanges()}
+                ${this.renderUpArrow()}
+            </div>
+            ${this.renderActiveArrow()}
+        `;
+    }
+};
+ChangeViewNodeComponent.styles = [sharedCss, changesCss, changeViewCss];
+ChangeViewNodeComponent = __decorate([
+    customElement('pb33f-explorer-change-view-node')
+], ChangeViewNodeComponent);
+export { ChangeViewNodeComponent };

package/dist/components/visualizer/nodes/change-view.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/visualizer/nodes/change-view.css.js

@@ -0,0 +1,40 @@
+import { css } from "lit";
+export default css `
+    .cv-row {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        cursor: pointer;
+    }
+
+    .cv-row:hover {
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    .cv-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .cv-badges {
+        display: flex;
+        gap: 2px;
+        flex-shrink: 0;
+    }
+
+    .change-icon {
+        border-color: rgba(150, 150, 150, 0.3);
+    }
+
+    .change-icon.breaking,
+    .change-icon.removed {
+        border-color: var(--error-color-lowalpha);
+    }
+
+    .change-icon.added {
+        border-color: rgba(0, 255, 0, 0.3);
+    }
+`;

package/dist/components/visualizer/nodes/changes.css.js

@@ -28,6 +28,4 @@ export default css `
         color: var(--font-color-sub1)
     }
     
-    .change-div {
-    }
 `;

package/dist/components/visualizer/nodes/components.js

@@ -108,14 +108,7 @@ let ComponentsNodeComponent = class ComponentsNodeComponent extends GraphNodeCom
     }
     render() {
         this.components = this.nodeInstance;
-        return html `
-            <div class="${this.renderClasses()}" 
-                 style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
-                ${this.renderDocument()}
-                ${this.renderUpArrow()}
-                ${this.renderChanges()}
-            </div>
-        `;
+        return this.renderNodeWrapper(this.renderDocument());
     }
 };
 ComponentsNodeComponent.styles = [sharedCss, changesCss];

package/dist/components/visualizer/nodes/contact.js

@@ -31,14 +31,7 @@ let ContactNodeComponent = class ContactNodeComponent extends GraphNodeComponent
     }
     render() {
         this.contact = this.nodeInstance;
-        return html `
-            <div class="${this.renderClasses()}"
-                 style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
-                ${this.renderNode()}
-                ${this.renderUpArrow()}
-                ${this.renderChanges()}
-            </div>
-        `;
+        return this.renderNodeWrapper(this.renderNode());
     }
 };
 ContactNodeComponent.styles = [sharedCss, changesCss];

package/dist/components/visualizer/nodes/document.js

@@ -37,7 +37,7 @@ let DocumentNodeComponent = class DocumentNodeComponent extends GraphNodeCompone
             </div>`);
         }
         if (this.document?.paths) {
-            values.push(html `<div class="row"<span class="chevron">&nbsp;&gt;</span>
+            values.push(html `<div class="row"><span class="chevron">&nbsp;&gt;</span>
             <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.PATHS}"></pb33f-model-icon>
             Paths
             <sl-badge variant="primary" class="count">
@@ -70,14 +70,7 @@ let DocumentNodeComponent = class DocumentNodeComponent extends GraphNodeCompone
     }
     render() {
         this.document = this.nodeInstance;
-        return html `
-            <div class="${this.renderClasses()}" 
-                 style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
-                ${this.renderDocument()}
-                ${this.renderUpArrow()}
-                ${this.renderChanges()}
-            </div>
-        `;
+        return this.renderNodeWrapper(this.renderDocument());
     }
 };
 DocumentNodeComponent.styles = [sharedCss];