@zenfg/inspector 0.1.0-beta.1 → 0.1.0-beta.3

package/src/panelVisualTheme.ts

@@ -16,22 +16,33 @@ export const FRAME_GRAPH_DEBUG_VISUAL_THEME = {
 	fontMono: 'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace',
 } as const;
 
+function category(stroke: string) {
+	const canvas = FRAME_GRAPH_DEBUG_VISUAL_THEME.canvas;
+	const fill = '#' + [1, 3, 5].map((offset) => Math.round(
+		parseInt(stroke.slice(offset, offset + 2), 16) * 0.18
+		+ parseInt(canvas.slice(offset, offset + 2), 16) * 0.82,
+	).toString(16).padStart(2, '0')).join('');
+	return { stroke, fill };
+}
+
 export const GRAPH_VISUAL_THEME = {
 	canvas: FRAME_GRAPH_DEBUG_VISUAL_THEME.canvas,
 	surface: FRAME_GRAPH_DEBUG_VISUAL_THEME.surface,
 	surfaceRaised: FRAME_GRAPH_DEBUG_VISUAL_THEME.surfaceRaised,
 	text: FRAME_GRAPH_DEBUG_VISUAL_THEME.text,
 	muted: FRAME_GRAPH_DEBUG_VISUAL_THEME.muted,
-	render: { stroke: '#34d399', fill: '#12342b' },
-	compute: { stroke: '#60a5fa', fill: '#162c46' },
-	copy: { stroke: '#fbbf24', fill: '#3a2d12' },
-	clear: { stroke: '#94a3b8', fill: '#25303a' },
-	command: { stroke: '#c084fc', fill: '#322044' },
-	external: { stroke: '#fb923c', fill: '#402318' },
+	render: category('#57C785'),
+	compute: category('#9AA5FF'),
+	copy: category('#F2CD60'),
+	clear: category('#C4CF89'),
+	command: category('#CF91E8'),
+	external: category('#F29A67'),
+	declaration: category('#B9AB94'),
+	output: category('#EC91AE'),
 	texture: { stroke: '#f472b6', fill: '#3c1f32' },
 	buffer: { stroke: '#2dd4bf', fill: '#123632' },
 	group: { stroke: '#64748b', fill: '#141c29', alternateFill: '#172033' },
-	dependency: { value: '#94a3b8', ordering: '#64748b' },
+	dependency: { value: '#94a3b8', ordering: '#8593a6' },
 	access: { read: '#2dd4bf', write: '#f59e0b' },
 	selected: FRAME_GRAPH_DEBUG_VISUAL_THEME.accent,
 	hover: '#cbd5e1',

package/src/panelWorkbenchHelpers.ts

@@ -22,7 +22,7 @@ export function selectionKey(selection: Selection): string {
 		case 'node': return `node:${selection.id}`;
 		case 'group': return `group:${selection.pathKey}`;
 		case 'resource': return `resource:${selection.id}`;
-		case 'root': return `root:${selection.index}`;
+		case 'root': return `root:${selection.key}`;
 		case 'culled': return `culled:${selection.index}`;
 		case 'allocation': return `allocation:${selection.id}`;
 		case 'segment': return `segment:${selection.index}`;
@@ -161,7 +161,7 @@ export function createKindCell(kind: string, label = kind): HTMLTableCellElement
 	cell.appendChild(marker);
 	return cell;
 }
-
+
 export function groupPath(snapshot: FrameGraphDebugViewModel, groupId: string | undefined): string {
 	if (groupId === undefined) return '-';
 	return snapshot.groupById.get(groupId)?.path.join(' / ') ?? `group-${groupId}`;

package/src/panelWorkbenchView.ts

@@ -173,7 +173,8 @@ export class FrameGraphDebugWorkbench {
 		this.exportMenu.setAttribute('role', 'menu');
 		this.exportMenu.hidden = true;
 		this.downloadButton.type = 'button';
-		this.downloadButton.textContent = 'Download JSON';
+		this.downloadButton.className = 'zenfg-inspector-download-action';
+		setPanelButtonContent(this.downloadButton, 'download', 'Download JSON');
 		this.downloadButton.setAttribute('role', 'menuitem');
 		this.downloadButton.addEventListener('click', () => {
 			this.setExportMenuOpen(false);

package/src/styles.ts

@@ -281,6 +281,9 @@ const FRAME_GRAPH_DEBUG_PANEL_CSS = `
 }
 .zenfg-inspector-export-menu[hidden] { display: none; }
 .zenfg-inspector-export-menu > button {
+	display: flex;
+	align-items: center;
+	gap: 7px;
 	padding: 7px 9px;
 	border: 0;
 	border-radius: 4px;
@@ -288,6 +291,7 @@ const FRAME_GRAPH_DEBUG_PANEL_CSS = `
 	background: transparent;
 	font: 600 11px/1.2 var(--fgd-font-ui);
 	text-align: left;
+	white-space: nowrap;
 	cursor: pointer;
 }
 .zenfg-inspector-export-menu > button:hover:not(:disabled) {
@@ -593,7 +597,7 @@ button[aria-busy='true'] > .zenfg-inspector-control-icon {
 .zenfg-inspector-graph-view { display: flex; flex-direction: column; }
 .zenfg-inspector-graph-toolbar {
 	display: grid;
-	grid-template-columns: auto minmax(0, 1fr) auto;
+	grid-template-columns: minmax(0, 1fr) auto;
 	align-items: center;
 	gap: 10px;
 	min-width: 0;
@@ -602,18 +606,8 @@ button[aria-busy='true'] > .zenfg-inspector-control-icon {
 	border-bottom: 1px solid var(--fgd-border-subtle);
 	background: var(--fgd-surface);
 }
-.zenfg-inspector-graph-mode-controls,
 .zenfg-inspector-graph-action-controls { display: flex; align-items: center; min-width: 0; }
 .zenfg-inspector-graph-action-controls { gap: 4px; }
-.zenfg-inspector-graph-toolbar .zenfg-inspector-mode-button {
-	margin-right: -1px;
-	border-radius: 0;
-}
-.zenfg-inspector-graph-toolbar .zenfg-inspector-mode-button:first-child { border-radius: 5px 0 0 5px; }
-.zenfg-inspector-graph-toolbar .zenfg-inspector-mode-button:last-child {
-	margin-right: 0;
-	border-radius: 0 5px 5px 0;
-}
 .zenfg-inspector-graph-toolbar button.active,
 .zenfg-inspector-graph-toolbar button[aria-pressed='true'] {
 	z-index: 1;
@@ -636,6 +630,9 @@ button[aria-busy='true'] > .zenfg-inspector-control-icon {
 	white-space: nowrap;
 }
 .zenfg-inspector-legend-item { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
+.zenfg-inspector-legend-group { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
+.zenfg-inspector-legend-group + .zenfg-inspector-legend-group { border-left: 1px solid var(--fgd-border-subtle); padding-left: 10px; }
+.zenfg-inspector-legend-heading { color: var(--fgd-text-secondary); font-weight: 600; }
 .zenfg-inspector-legend-swatch {
 	position: relative;
 	display: inline-block;
@@ -646,7 +643,15 @@ button[aria-busy='true'] > .zenfg-inspector-control-icon {
 	background: color-mix(in srgb, var(--zenfg-inspector-legend-color) 20%, var(--fgd-canvas));
 }
 .zenfg-inspector-legend-swatch[data-shape='ellipse'] { border-radius: 50%; }
-.zenfg-inspector-legend-swatch[data-shape='group'] { border-style: double; background: transparent; }
+.zenfg-inspector-legend-swatch[data-shape='group'] { background: transparent; }
+.zenfg-inspector-legend-swatch[data-shape='cut-rectangle'],
+.zenfg-inspector-legend-swatch[data-shape='tag'] { width: 14px; height: 10px; border: 0; background: transparent; }
+.zenfg-inspector-legend-swatch > svg { display: block; width: 100%; height: 100%; overflow: visible; }
+.zenfg-inspector-legend-swatch > svg polygon {
+	fill: color-mix(in srgb, var(--zenfg-inspector-legend-color) 20%, var(--fgd-canvas));
+	stroke: var(--zenfg-inspector-legend-color);
+	stroke-width: 1.4;
+}
 .zenfg-inspector-legend-swatch[data-shape='line'] {
 	width: 16px;
 	height: 0;
@@ -739,6 +744,7 @@ button[aria-busy='true'] > .zenfg-inspector-control-icon {
 .zenfg-inspector-graph-tooltip {
 	position: absolute;
 	z-index: 3;
+	width: max-content;
 	max-width: min(380px, calc(100% - 16px));
 	padding: 8px 10px;
 	border: 1px solid var(--fgd-border-strong);
@@ -830,6 +836,8 @@ button[aria-busy='true'] > .zenfg-inspector-control-icon {
 	overflow-wrap: anywhere;
 	white-space: normal;
 }
+.zenfg-inspector-relation-entry { display: grid; justify-items: start; gap: 2px; }
+.zenfg-inspector-relation-entry > span { font: 11px/1.5 var(--fgd-font-mono); overflow-wrap: anywhere; }
 .zenfg-inspector-inspector .zenfg-inspector-raw-detail {
 	min-width: 100%;
 	margin: 0;