@zenfg/inspector 0.1.0-beta.3 → 0.1.0

package/src/panelCytoscapeGraphRenderer.ts

@@ -1,3 +1,4 @@
+import { GRAPH_VISUAL_THEME, type GraphVisualTheme } from './panelVisualTheme.ts';
 import type cytoscape from 'cytoscape';
 import type { ELK } from 'elkjs/lib/elk-api';
 
@@ -18,6 +19,9 @@ import {
 } from './panelGraphScene.ts';
 import {
     createGraphStyles,
+    fitGraphLabel,
+    fitCollapsedGroupLabel,
+    graphLabelFontSize,
     expandedGroupLabelMaxWidth,
     GRAPH_GEOMETRY,
     graphEdgeDisplayLabel,
@@ -38,7 +42,7 @@ export type GraphResizeSubscription = { disconnect(): void };
 export type GraphRendererEnvironment = {
     readonly createElement: (tagName: string) => HTMLElement;
     readonly loadRuntime: () => Promise<GraphRendererRuntime>;
-    readonly layoutScene: (elk: ELK, scene: GraphScene) => Promise<GraphLayoutResult>;
+    readonly layoutScene: (elk: ELK, scene: GraphScene, theme?: GraphVisualTheme) => Promise<GraphLayoutResult>;
     readonly observeResize?: (element: HTMLElement, onResize: () => void) => GraphResizeSubscription;
 };
 
@@ -49,6 +53,9 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
     private readonly statusMessage: HTMLElement;
     private readonly retryButton: HTMLButtonElement;
     private readonly resizeSubscription: GraphResizeSubscription | undefined;
+    private theme: GraphVisualTheme = GRAPH_VISUAL_THEME;
+    private geometryRevision = 0;
+    private wasVisible = false;
     private core: cytoscape.Core | undefined;
     private elk: ELK | undefined;
     private loading: Promise<void> | undefined;
@@ -64,6 +71,15 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
     private anchorTargetContentKey: string | undefined;
     private failedSceneContentKey: string | undefined;
     private overview = false;
+    private dragPanning = false;
+    private pointerInside = false;
+    private pointerOverElement = false;
+    private readonly cancelPointerInteraction = () => {
+        this.dragPanning = false;
+        this.cancelGroupTap();
+        this.clearHover();
+    };
+    private pendingReveal: { readonly request: NonNullable<GraphRenderRequest['reveal']>; readonly contentKey: string; readonly captureRevision: number | undefined } | undefined;
     private pendingGroupTap: { readonly id: string; readonly timer: ReturnType<typeof setTimeout> } | undefined;
 
     constructor(
@@ -72,11 +88,15 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
     ) {
         this.canvasHost = environment.createElement('div');
         this.canvasHost.className = 'zenfg-inspector-graph-canvas';
+        this.updateCursor();
         this.tooltip = environment.createElement('div');
         this.tooltip.className = 'zenfg-inspector-graph-tooltip';
         this.tooltip.hidden = true;
         // Cytoscape's node mouseout is not guaranteed when leaving its canvas directly.
-        this.canvasHost.addEventListener('pointerleave', () => this.clearHover());
+        this.canvasHost.addEventListener('pointerenter', () => { this.pointerInside = true; });
+        this.canvasHost.addEventListener('pointerleave', () => { this.pointerInside = false; this.clearHover(); });
+        this.canvasHost.addEventListener('pointercancel', this.cancelPointerInteraction);
+        this.canvasHost.ownerDocument?.defaultView?.addEventListener('blur', this.cancelPointerInteraction);
         this.status = environment.createElement('div');
         this.status.className = 'zenfg-inspector-graph-status';
         this.status.hidden = true;
@@ -90,11 +110,17 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
         this.retryButton.addEventListener('click', () => this.relayout());
         this.status.append(this.statusMessage, this.retryButton);
         this.host.replaceChildren(this.canvasHost, this.status, this.tooltip);
-        this.resizeSubscription = environment.observeResize?.(host, () => this.core?.resize());
+        this.resizeSubscription = environment.observeResize?.(host, () => {
+            const visible = host.clientWidth > 0 && host.clientHeight > 0;
+            if (visible && !this.wasVisible) this.latestRequest?.onVisible?.();
+            this.wasVisible = visible;
+            this.core?.resize();
+        });
     }
 
     render(request: GraphRenderRequest): void {
         if (this.destroyed) return;
+        if (request.theme) this.setTheme(request.theme);
         if (this.latestRequest?.scene !== request.scene
             || (this.latestRequest?.selected && selectionKey(this.latestRequest.selected)) !== (request.selected && selectionKey(request.selected))) {
             this.cancelGroupTap();
@@ -104,6 +130,13 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
             this.core?.elements().removeClass('semantic-hover');
         }
         this.latestRequest = request;
+        if (request.reveal) {
+            this.pendingReveal = { request: request.reveal, contentKey: request.scene.contentKey, captureRevision: request.captureRevision };
+        } else if (this.pendingReveal && (this.pendingReveal.captureRevision !== request.captureRevision
+            || this.pendingReveal.contentKey !== request.scene.contentKey
+            || !request.selected || selectionKey(request.selected) !== selectionKey(this.pendingReveal.request.selection))) {
+            this.pendingReveal = undefined;
+        }
         if (request.fit) {
             this.fitTargetContentKey = request.scene.contentKey;
         } else if (this.fitTargetContentKey !== request.scene.contentKey) {
@@ -132,16 +165,48 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
             this.syncInteraction(request);
             this.consumeFitIfCurrentTarget();
             this.consumeAnchorIfCurrentTarget();
+            this.consumeReveal();
             this.processedVersion = version;
             return;
         }
         this.scheduleProcessing();
     }
 
+    setTheme(theme: GraphVisualTheme): void {
+        if (this.destroyed || JSON.stringify(theme) === JSON.stringify(this.theme)) return;
+        const typographyChanged = theme.fontFamily !== this.theme.fontFamily || theme.fontSize !== this.theme.fontSize;
+        this.theme = theme;
+        this.core?.style().fromJson(createGraphStyles(theme)).update();
+        if (!typographyChanged) return;
+        this.geometryRevision++;
+        if (this.core && this.latestRequest && this.appliedScene) {
+            const selected = this.core.nodes('.semantic-selected').first();
+            const center = this.core.extent();
+            const target = selected.nonempty() ? selected : this.core.nodes().filter(node => !node.isParent()).sort((a, b) => {
+                const distance = (node: cytoscape.NodeSingular) => Math.hypot(node.position('x') - center.x1 - center.w / 2, node.position('y') - center.y1 - center.h / 2);
+                return distance(a as cytoscape.NodeSingular) - distance(b as cytoscape.NodeSingular);
+            }).first();
+            if (target.nonempty()) {
+                this.anchorElementId = target.id();
+                this.anchorTargetContentKey = this.latestRequest.scene.contentKey;
+            }
+            this.forceRelayout = true;
+            ++this.requestVersion;
+            this.scheduleProcessing();
+        }
+        this.updateSemanticZoom(true);
+    }
+
     resize(): void {
         this.core?.resize();
     }
 
+    cancelReveal(): void {
+        this.pendingReveal = undefined;
+        this.cancelGroupTap();
+        this.clearHover();
+    }
+
     fit(): void {
         const targetContentKey = this.latestRequest?.scene.contentKey;
         if (targetContentKey) this.fitTargetContentKey = targetContentKey;
@@ -171,6 +236,7 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
         this.cancelGroupTap();
         this.requestVersion++;
         this.resizeSubscription?.disconnect();
+        this.canvasHost.ownerDocument?.defaultView?.removeEventListener('blur', this.cancelPointerInteraction);
         this.hideTooltip();
         this.core?.destroy();
         this.core = undefined;
@@ -204,7 +270,7 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
 
             if (request.scene.nodes.length === 0) {
                 this.hideTooltip();
-                if (this.core) replaceElements(this.core, request.scene);
+                if (this.core) replaceElements(this.core, request.scene, this.theme);
                 this.appliedScene = request.scene;
                 this.forceRelayout = false;
                 if (this.fitTargetContentKey === request.scene.contentKey) this.fitTargetContentKey = undefined;
@@ -227,6 +293,7 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
                     this.syncInteraction(request);
                     this.consumeFitIfCurrentTarget();
                     this.consumeAnchorIfCurrentTarget();
+                    this.consumeReveal();
                     this.hideStatus();
                     this.processedVersion = version;
                     continue;
@@ -247,16 +314,18 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
 
                 if (geometryChanged || this.forceRelayout) {
                     this.showStatus('layout', 'Laying out graph…');
-                    const result = await this.environment.layoutScene(this.elk!, request.scene);
+                    const geometryRevision = this.geometryRevision;
+                    const result = await this.environment.layoutScene(this.elk!, request.scene, this.theme);
+                    if (geometryRevision !== this.geometryRevision) continue;
                     const layoutRequest = this.resolveCurrentRequest(version, request.scene.contentKey);
                     if (!layoutRequest) continue;
                     ({ version, request } = layoutRequest);
-                    if (topologyChanged || !this.appliedScene) replaceElements(core, request.scene);
-                    else updateElementData(core, request.scene);
+                    if (topologyChanged || !this.appliedScene) replaceElements(core, request.scene, this.theme);
+                    else updateElementData(core, request.scene, this.theme);
                     applyGraphLayout(core, request.scene, result);
                     laidOut = true;
                 } else {
-                    updateElementData(core, request.scene);
+                    updateElementData(core, request.scene, this.theme);
                 }
 
                 syncExpandedGroupLabelGeometry(core);
@@ -276,6 +345,7 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
                     restoreViewport(core, previousViewport);
                 }
                 this.consumeAnchorIfCurrentTarget();
+                this.consumeReveal();
                 this.updateSemanticZoom(true);
                 this.hideStatus();
                 this.processedVersion = version;
@@ -313,7 +383,7 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
         this.core = runtime.createCore({
             container: this.canvasHost,
             elements: [],
-            style: createGraphStyles(),
+            style: createGraphStyles(this.theme),
             layout: { name: 'preset' },
             minZoom: 0.03,
             maxZoom: 4,
@@ -352,9 +422,12 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
         });
         const hoverElement = (event: cytoscape.EventObject) => {
             const request = this.interactiveRequest();
-            if (!request) return;
+            if (!request || this.dragPanning) return;
             const id = event.target.id() as GraphSceneElementId;
             const selection = request.scene.interaction.selectionByElementId.get(id);
+            this.pointerInside = true;
+            this.pointerOverElement = !!selection;
+            this.updateCursor();
             if (selection) request.onHover(selection);
             const title = event.target.data('tooltip') as string | undefined;
             if (title) {
@@ -371,6 +444,18 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
         const clearHover = () => this.clearHover();
         core.on('mouseout', 'node', clearHover);
         core.on('mouseout', 'edge', clearHover);
+        core.on('dragpan', () => {
+            if (this.dragPanning) return;
+            this.dragPanning = true;
+            this.cancelGroupTap();
+            this.clearHover();
+        });
+        core.on('tapend', (event) => {
+            this.dragPanning = false;
+            this.pointerOverElement = this.pointerInside && event.target !== core
+                && !!this.interactiveRequest()?.scene.interaction.selectionByElementId.get(event.target.id());
+            this.updateCursor();
+        });
         core.on('zoom', () => this.updateSemanticZoom());
     }
 
@@ -416,6 +501,23 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
         this.anchorTargetContentKey = undefined;
     }
 
+    private consumeReveal(): void {
+        const pending = this.pendingReveal;
+        const request = this.latestRequest;
+        if (!pending || !request || !this.core || this.targetNeedsApply()) return;
+        this.pendingReveal = undefined;
+        if (pending.captureRevision !== request.captureRevision || pending.contentKey !== request.scene.contentKey) return;
+        const ids = request.scene.interaction.primaryElementIdsBySelection.get(selectionKey(pending.request.selection)) ?? [];
+        const targets = this.core.collection();
+        for (const id of ids) targets.merge(this.core.getElementById(id));
+        if (!targets.length) return;
+        this.core.resize();
+        this.core.fit(targets, 64);
+        if (this.core.zoom() > 1.2) this.core.zoom(1.2);
+        this.core.center(targets);
+        this.updateSemanticZoom();
+    }
+
     private targetNeedsApply(): boolean {
         const target = this.latestRequest?.scene;
         if (!target || !this.appliedScene) return target !== undefined;
@@ -425,7 +527,7 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
     private updateSemanticZoom(force = false): void {
         const core = this.core;
         if (!core) return;
-        const overview = isOverviewGraphScale(core.zoom());
+        const overview = isOverviewGraphScale(core.zoom(), this.theme);
         if (!force && overview === this.overview) return;
         this.overview = overview;
         core.batch(() => {
@@ -456,10 +558,16 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
     }
 
     private clearHover(): void {
+        this.pointerOverElement = false;
+        this.updateCursor();
         this.hideTooltip();
         this.latestRequest?.onHover(undefined);
     }
 
+    private updateCursor(): void {
+        this.canvasHost.style.cursor = this.dragPanning ? 'grabbing' : this.pointerOverElement ? 'pointer' : 'grab';
+    }
+
     private showStatus(kind: 'loading' | 'layout' | 'empty' | 'error', message: string, retry = false): void {
         this.status.dataset.state = kind;
         this.statusMessage.textContent = message;
@@ -525,9 +633,9 @@ const browserGraphRendererEnvironment: GraphRendererEnvironment = {
     },
 };
 
-function replaceElements(core: cytoscape.Core, scene: GraphScene): void {
+function replaceElements(core: cytoscape.Core, scene: GraphScene, theme: GraphVisualTheme = GRAPH_VISUAL_THEME): void {
     const definitions: cytoscape.ElementDefinition[] = [
-        ...scene.nodes.map(nodeDefinition),
+        ...scene.nodes.map(node => nodeDefinition(node, theme)),
         ...scene.edges.map(edgeDefinition),
     ];
     core.startBatch();
@@ -536,11 +644,11 @@ function replaceElements(core: cytoscape.Core, scene: GraphScene): void {
     core.endBatch();
 }
 
-export function updateElementData(core: cytoscape.Core, scene: GraphScene): void {
+export function updateElementData(core: cytoscape.Core, scene: GraphScene, theme: GraphVisualTheme = GRAPH_VISUAL_THEME): void {
     core.batch(() => {
         for (const node of scene.nodes) {
             const element = core.getElementById(node.id);
-            if (element.nonempty()) element.data(nodeRenderableData(node));
+            if (element.nonempty()) element.data(nodeRenderableData(node, theme));
         }
         for (const edge of scene.edges) {
             const element = core.getElementById(edge.id);
@@ -549,22 +657,30 @@ export function updateElementData(core: cytoscape.Core, scene: GraphScene): void
     });
 }
 
-function nodeDefinition(node: GraphSceneNode): cytoscape.ElementDefinition {
+function nodeDefinition(node: GraphSceneNode, theme: GraphVisualTheme): cytoscape.ElementDefinition {
     return {
         group: 'nodes',
+        pannable: true,
         data: {
             id: node.id,
             parent: node.parentId,
-            ...nodeRenderableData(node),
+            ...nodeRenderableData(node, theme),
         },
     };
 }
 
-function nodeRenderableData(node: GraphSceneNode): Record<string, unknown> {
-    const dimensions = nodeDimensions(node);
+function nodeRenderableData(node: GraphSceneNode, theme: GraphVisualTheme): Record<string, unknown> {
+    const dimensions = nodeDimensions(node, theme);
     const labelMaxWidth = node.kind === 'group' && node.collapsed
         ? expandedGroupLabelMaxWidth(dimensions.width)
-        : 160;
+        : 160 * theme.fontSize / GRAPH_GEOMETRY.baseFontSize;
+    const fitLabel = (label: string): string => node.kind !== 'group'
+        ? fitGraphLabel(label, labelMaxWidth, theme)
+        : node.collapsed ? fitCollapsedGroupLabel(label, labelMaxWidth, theme) : label;
+    const detailLabel = fitLabel(node.label);
+    const labelFontSize = node.kind === 'group' && !node.collapsed
+        ? theme.fontSize * 1.2
+        : graphLabelFontSize(detailLabel, labelMaxWidth, dimensions.height - 12 * theme.fontSize / GRAPH_GEOMETRY.baseFontSize, theme);
     return {
         kind: node.kind,
         passKind: node.kind === 'pass' ? node.passKind : undefined,
@@ -572,9 +688,10 @@ function nodeRenderableData(node: GraphSceneNode): Record<string, unknown> {
         collapsed: node.kind === 'group' && node.collapsed ? 1 : 0,
         hasCulled: node.kind === 'group' && node.culledNodeCount > 0 ? 1 : 0,
         depthBand: node.kind === 'group' ? node.depthBand : undefined,
-        detailLabel: node.label,
-        overviewLabel: node.overviewLabel,
-        displayLabel: node.label,
+        detailLabel,
+        labelFontSize,
+        overviewLabel: fitLabel(node.overviewLabel),
+        displayLabel: detailLabel,
         tooltip: node.title,
         labelMaxWidth,
         width: dimensions.width,

package/src/panelDetailLayout.ts

@@ -0,0 +1,155 @@
+const MIN_DETAIL_WIDTH = 300;
+const MAX_DETAIL_WIDTH = 480;
+const MIN_MAIN_WIDTH = 520;
+const DIVIDER_WIDTH = 8;
+
+/** Owns the dock/drawer geometry and modal keyboard boundary for one workbench. */
+export class DetailLayout {
+	private readonly backdrop = document.createElement('button');
+	private readonly divider = document.createElement('div');
+	private readonly resizeObserver: ResizeObserver | undefined;
+	private readonly abort = new AbortController();
+	private open = false;
+	private preferredWidth = MIN_DETAIL_WIDTH;
+	private previousFocus: HTMLElement | undefined;
+	private dragging = false;
+	private modal = false;
+
+	constructor(
+		private readonly workspace: HTMLElement,
+		private readonly main: HTMLElement,
+		private readonly aside: HTMLElement,
+		private readonly chrome: HTMLElement,
+		private readonly onClose: () => void,
+	) {
+		this.backdrop.type = 'button';
+		this.backdrop.className = 'zenfg-inspector-detail-backdrop';
+		this.backdrop.setAttribute('aria-label', 'Close selection inspector');
+		this.backdrop.tabIndex = -1;
+		this.backdrop.hidden = true;
+		this.backdrop.addEventListener('click', onClose);
+		this.divider.className = 'zenfg-inspector-detail-divider';
+		this.divider.setAttribute('role', 'separator');
+		this.divider.setAttribute('aria-label', 'Resize selection inspector');
+		this.divider.setAttribute('aria-orientation', 'vertical');
+		this.divider.tabIndex = 0;
+		this.divider.hidden = true;
+		workspace.insertBefore(this.divider, aside);
+		workspace.insertBefore(this.backdrop, aside);
+		this.divider.addEventListener('pointerdown', (event) => {
+			this.dragging = true;
+			this.divider.setPointerCapture(event.pointerId);
+			event.preventDefault();
+		});
+		this.divider.addEventListener('pointermove', (event) => {
+			if (!this.dragging) return;
+			this.preferredWidth = this.clampWidth(workspace.getBoundingClientRect().right - event.clientX);
+			this.applyGeometry();
+		});
+		this.divider.addEventListener('pointerup', () => { this.dragging = false; });
+		this.divider.addEventListener('lostpointercapture', () => { this.dragging = false; });
+		this.divider.addEventListener('keydown', (event) => {
+			if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			this.preferredWidth = this.clampWidth(event.key === 'Home' ? MIN_DETAIL_WIDTH : event.key === 'End' ? MAX_DETAIL_WIDTH
+				: this.preferredWidth + (event.key === 'ArrowLeft' ? 20 : -20));
+			this.applyGeometry();
+		});
+		workspace.parentElement?.addEventListener('keydown', this.handleKey, { signal: this.abort.signal });
+		this.resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(() => this.applyGeometry());
+		this.resizeObserver?.observe(workspace);
+	}
+
+	get isDrawer(): boolean { return this.modal; }
+
+	update(open: boolean): void {
+		const changed = open !== this.open;
+		if (changed && open) this.previousFocus = this.workspace.ownerDocument.activeElement as HTMLElement | undefined;
+		this.open = open;
+		this.applyGeometry();
+		if (changed && !open) this.restoreFocus();
+	}
+
+	destroy(): void {
+		this.abort.abort();
+		this.resizeObserver?.disconnect();
+		this.main.inert = false;
+		this.chrome.inert = false;
+		for (const sibling of this.chrome.parentElement?.children ?? []) if (sibling !== this.workspace) (sibling as HTMLElement).inert = false;
+		if (this.open && this.modal) this.restoreFocus();
+		this.open = false;
+	}
+
+	private restoreFocus(): void {
+		const isAvailable = (element: HTMLElement | undefined): element is HTMLElement => {
+			if (!element?.isConnected || element === element.ownerDocument.body || element.closest('[hidden], [inert]') || element.matches(':disabled')) return false;
+			for (let parent: HTMLElement | null = element; parent; parent = parent.parentElement) if (parent.inert) return false;
+			return true;
+		};
+		const target = isAvailable(this.previousFocus) ? this.previousFocus
+			: this.chrome.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]') ?? undefined;
+		if (isAvailable(target)) target.focus({ preventScroll: true });
+	}
+
+	private clampWidth(width: number): number {
+		const available = this.workspace.getBoundingClientRect().width || 1024;
+		return Math.max(MIN_DETAIL_WIDTH, Math.min(MAX_DETAIL_WIDTH, available - MIN_MAIN_WIDTH - DIVIDER_WIDTH, width));
+	}
+
+	private applyGeometry(): void {
+		const wasModal = this.modal;
+		const available = this.workspace.getBoundingClientRect().width || 1024;
+		this.modal = available < MIN_MAIN_WIDTH + DIVIDER_WIDTH + MIN_DETAIL_WIDTH;
+		if (this.modal && !wasModal && this.open && !this.aside.contains(document.activeElement)) this.previousFocus = this.workspace.ownerDocument.activeElement as HTMLElement | undefined;
+		const width = this.clampWidth(this.preferredWidth);
+		this.workspace.style.setProperty('--fgd-detail-width', `${width}px`);
+		this.workspace.classList.toggle('detail-drawer', this.modal);
+		this.workspace.classList.toggle('inspector-open', this.open);
+		this.divider.hidden = !this.open || this.modal;
+		this.divider.setAttribute('aria-valuemin', String(MIN_DETAIL_WIDTH));
+		this.divider.setAttribute('aria-valuemax', String(Math.max(MIN_DETAIL_WIDTH, Math.min(MAX_DETAIL_WIDTH, available - MIN_MAIN_WIDTH - DIVIDER_WIDTH))));
+		this.divider.setAttribute('aria-valuenow', String(Math.round(width)));
+		this.backdrop.hidden = !this.open || !this.modal;
+		this.main.inert = this.open && this.modal;
+		this.chrome.inert = this.open && this.modal;
+		for (const sibling of this.chrome.parentElement?.children ?? []) if (sibling !== this.workspace) (sibling as HTMLElement).inert = this.open && this.modal;
+		if (this.open && this.modal) {
+			this.aside.setAttribute('role', 'dialog');
+			this.aside.setAttribute('aria-modal', 'true');
+			if (!this.aside.contains(document.activeElement)) this.focusable()[0]?.focus();
+		} else {
+			this.aside.removeAttribute('role');
+			this.aside.removeAttribute('aria-modal');
+		}
+		if (wasModal !== this.modal && this.open) this.workspace.dispatchEvent(new Event('detail-layout-change'));
+	}
+
+	private focusable(): HTMLElement[] {
+		return Array.from(this.aside.querySelectorAll<HTMLElement>('button:not(:disabled), input:not(:disabled), select:not(:disabled), summary, [tabindex="0"]'))
+			.filter((element) => {
+				if (element.closest('[hidden]') || element.tabIndex < 0 && element.tagName !== 'SUMMARY') return false;
+				for (let parent = element.parentElement; parent && parent !== this.aside; parent = parent.parentElement) {
+					if (parent.tagName === 'DETAILS' && !parent.hasAttribute('open') && !parent.querySelector(':scope > summary')?.contains(element)) return false;
+				}
+				return true;
+			});
+	}
+
+	private readonly handleKey = (event: KeyboardEvent): void => {
+		if (event.defaultPrevented || !this.open) return;
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			event.stopPropagation();
+			this.onClose();
+		} else if (this.modal && event.key === 'Tab') {
+			const items = this.focusable();
+			if (!items.length) { event.preventDefault(); return; }
+			const index = items.indexOf(document.activeElement as HTMLElement);
+			if (event.shiftKey && index <= 0 || !event.shiftKey && (index === items.length - 1 || index < 0)) {
+				event.preventDefault();
+				(event.shiftKey ? items.at(-1) : items[0])?.focus();
+			}
+		}
+	};
+}

package/src/panelDetailStyles.ts

@@ -0,0 +1,56 @@
+export const PANEL_DETAIL_CSS = `
+.zenfg-inspector-detail-actions,
+.zenfg-inspector-relation-links,
+.zenfg-inspector-copy-id,
+.zenfg-inspector-raw-toolbar {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 6px 10px;
+	min-width: 0;
+}
+.zenfg-inspector-detail-actions { margin-bottom: var(--fgd-space-3); }
+.zenfg-inspector-detail-actions:empty { display: none; }
+.zenfg-inspector-inline-action,
+.zenfg-inspector-copy-id button,
+.zenfg-inspector-raw-toolbar button,
+.zenfg-inspector-capture-summary section > button,
+.zenfg-inspector-graph-search-results > button {
+	padding: 5px var(--fgd-space-2); border: 1px solid var(--fgd-border); border-radius: var(--fgd-radius-sm);
+	color: var(--fgd-text-secondary); background: var(--fgd-surface);
+	font: var(--fgd-font-size)/1.4 var(--fgd-font-ui); cursor: pointer;
+}
+.zenfg-inspector-inline-action:hover,
+.zenfg-inspector-copy-id button:hover,
+.zenfg-inspector-raw-toolbar button:hover,
+.zenfg-inspector-capture-summary section > button:hover,
+.zenfg-inspector-graph-search-results > button:hover { color: var(--fgd-text); background: var(--fgd-surface-hover); }
+.zenfg-inspector-raw-toolbar input {
+	padding: 6px var(--fgd-space-2); border: 1px solid var(--fgd-border); border-radius: var(--fgd-radius-sm);
+	color: var(--fgd-text); background: var(--fgd-panel); font: var(--fgd-font-size) var(--fgd-font-ui);
+}
+.zenfg-inspector-inspector-summary dd,
+.zenfg-inspector-relation-entry,
+.zenfg-inspector-detail-diagnostics { min-width: 0; overflow-wrap: anywhere; }
+.zenfg-inspector-inspector-summary { grid-template-columns: 108px minmax(0, 1fr); font-size: var(--fgd-font-size-small); }
+.zenfg-inspector-inspector-summary dd { font-family: var(--fgd-font-ui); }
+.zenfg-inspector-inspector-relations .zenfg-inspector-relation-button,
+.zenfg-inspector-relation-entry > span { font: var(--fgd-font-size)/1.5 var(--fgd-font-ui); }
+.zenfg-inspector-relation-links .zenfg-inspector-relation-button { flex: 1 1 130px; min-width: 0; }
+.zenfg-inspector-relation-links .zenfg-inspector-inline-action { flex: 0 0 auto; }
+.zenfg-inspector-copy-id code { overflow-wrap: anywhere; }
+.zenfg-inspector-inspector-content > details { margin-top: 14px; }
+.zenfg-inspector-inspector-content summary { cursor: pointer; }
+.zenfg-inspector-inspector-content h3 { font-size: var(--fgd-font-size-small); margin: 14px 0 6px; }
+.zenfg-inspector-detail-diagnostics article { padding: var(--fgd-space-2) 0; border-bottom: 1px solid var(--fgd-border); }
+.zenfg-inspector-detail-diagnostics p { margin: 6px 0; white-space: pre-wrap; }
+.zenfg-inspector-detail-diagnostics article[data-severity="error"] > strong { color: var(--fgd-danger); }
+.zenfg-inspector-detail-diagnostics article[data-severity="warning"] > strong { color: var(--fgd-warning); }
+.zenfg-inspector-raw-view { min-width: 0; display: grid; gap: 10px; }
+.zenfg-inspector-raw-path { overflow-wrap: anywhere; font-size: var(--fgd-font-size-small); }
+.zenfg-inspector-raw-toolbar input { flex: 1 1 170px; min-width: 0; }
+.zenfg-inspector-inspector .zenfg-inspector-raw-detail { white-space: normal; overflow: visible; overflow-wrap: anywhere; font: var(--fgd-font-size-small)/1.55 var(--fgd-font-mono); }
+.zenfg-inspector-raw-children { padding-left: var(--fgd-space-3); border-left: 1px solid var(--fgd-border); }
+.zenfg-inspector-raw-detail summary, .zenfg-inspector-raw-leaf { padding: 3px 0; }
+.zenfg-inspector-inspector-content :is(button, input, summary):focus-visible { outline: 2px solid var(--fgd-accent); outline-offset: 2px; }
+`;