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

package/dist/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { FRAME_GRAPH_DEBUG_VISUAL_THEME, GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';\n\nconst STYLE_ELEMENT_ID = 'zenfg-inspector-panel-styles';\nconst theme = FRAME_GRAPH_DEBUG_VISUAL_THEME;\n\nconst FRAME_GRAPH_DEBUG_PANEL_CSS = `\n/* Tokens and workbench root */\n.zenfg-inspector {\n\t--fgd-canvas: ${theme.canvas};\n\t--fgd-panel: var(--zenfg-inspector-background, ${theme.panel});\n\t--fgd-surface: var(--zenfg-inspector-surface, ${theme.surface});\n\t--fgd-surface-raised: var(--zenfg-inspector-surface-raised, ${theme.surfaceRaised});\n\t--fgd-surface-hover: var(--zenfg-inspector-surface-hover, ${theme.surfaceHover});\n\t--fgd-border: var(--zenfg-inspector-border, ${theme.border});\n\t--fgd-border-subtle: var(--zenfg-inspector-border-subtle, rgba(180, 190, 202, 0.11));\n\t--fgd-border-strong: var(--zenfg-inspector-border-strong, rgba(180, 190, 202, 0.28));\n\t--fgd-text: var(--zenfg-inspector-text, ${theme.text});\n\t--fgd-text-secondary: var(--zenfg-inspector-text-secondary, ${theme.textSecondary});\n\t--fgd-muted: var(--zenfg-inspector-muted, ${theme.muted});\n\t--fgd-accent: var(--zenfg-inspector-accent, ${theme.accent});\n\t--fgd-accent-soft: var(--zenfg-inspector-accent-soft, rgba(56, 189, 248, 0.12));\n\t--fgd-accent-hover: var(--zenfg-inspector-accent-hover, rgba(56, 189, 248, 0.18));\n\t--fgd-success: var(--zenfg-inspector-success, ${theme.success});\n\t--fgd-warning: var(--zenfg-inspector-warning, ${theme.warning});\n\t--fgd-danger: var(--zenfg-inspector-danger, ${theme.danger});\n\t--fgd-font-ui: var(--zenfg-inspector-font-ui, ${theme.fontUi});\n\t--fgd-font-mono: var(--zenfg-inspector-font-mono, ${theme.fontMono});\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tcolor: var(--fgd-text);\n\tbackground: var(--fgd-canvas);\n\tfont-family: var(--fgd-font-ui);\n\tfont-size: 12px;\n\tline-height: 1.45;\n\tcolor-scheme: dark;\n\tcontainer-name: zenfg-inspector;\n\tcontainer-type: inline-size;\n}\n\n.zenfg-inspector,\n.zenfg-inspector * { box-sizing: border-box; }\n\n.zenfg-inspector-body {\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 0;\n\tpadding: 10px;\n\toverflow: hidden;\n\tborder: 0;\n\tborder-radius: 0;\n\tbackground: var(--zenfg-inspector-background, var(--fgd-panel));\n}\n\n.zenfg-inspector-content {\n\tmin-width: 0;\n\tmin-height: 0;\n\theight: 100%;\n\toverflow: hidden;\n}\n\n.zenfg-inspector-drop-overlay {\n\tposition: absolute;\n\tz-index: 40;\n\tinset: 10px;\n\tdisplay: grid;\n\tplace-content: center;\n\tgap: 6px;\n\tborder: 2px dashed var(--fgd-accent);\n\tborder-radius: var(--zenfg-inspector-radius-md, 6px);\n\tcolor: #bae6fd;\n\tbackground: color-mix(in srgb, var(--fgd-canvas) 90%, transparent);\n\tfont: 600 13px/1.4 var(--fgd-font-ui);\n\ttext-align: center;\n\tpointer-events: none;\n}\n.zenfg-inspector-drop-overlay[hidden] { display: none; }\n.zenfg-inspector-drop-overlay > span { color: var(--fgd-muted); font-size: 11px; }\n\n.zenfg-inspector-capture-summary[hidden],\n.zenfg-inspector-command-status[hidden],\n.zenfg-inspector-capture-action[hidden],\n.zenfg-inspector-workbench-empty[hidden],\n.zenfg-inspector-open-inspector[hidden],\n.zenfg-inspector-inspector.unavailable,\n.zenfg-inspector-view[hidden],\n.zenfg-inspector-graph-status[hidden] { display: none !important; }\n\n.zenfg-inspector-muted {\n\tmargin: 0;\n\tcolor: var(--fgd-muted);\n\tfont: 11px/1.5 var(--fgd-font-ui);\n}\n\n.zenfg-inspector-control-icon {\n\tdisplay: block;\n\tflex: 0 0 auto;\n\twidth: 14px;\n\theight: 14px;\n}\n\n.zenfg-inspector-table-scroller,\n.zenfg-inspector-memory-scroller,\n.zenfg-inspector-diagnostics-scroller,\n.zenfg-inspector-inspector-content,\n.zenfg-inspector-workbench-tabs,\n.zenfg-inspector-graph-legend {\n\tscrollbar-width: thin;\n\tscrollbar-color: rgba(180, 190, 202, 0.25) transparent;\n}\n\n/* Workbench and summary */\n.zenfg-inspector-workbench {\n\tdisplay: grid;\n\tgrid-template-rows: auto minmax(0, 1fr);\n\tgap: 8px;\n\theight: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\tfont-family: var(--fgd-font-ui);\n}\n\n.zenfg-inspector-capture-summary {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));\n\talign-content: start;\n\tgap: 8px;\n\tmin-width: 0;\n\tbackground: transparent;\n}\n\n.zenfg-inspector-capture-summary > section {\n\tmin-width: 0;\n\tpadding: 12px;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tborder-radius: 6px;\n\tbackground: var(--fgd-surface);\n}\n\n.zenfg-inspector-capture-summary h2 {\n\tmargin: 0 0 5px;\n\tcolor: var(--fgd-text-secondary);\n\tfont-size: 10px;\n\tfont-weight: 700;\n\tletter-spacing: 0.075em;\n\tline-height: 1.2;\n\ttext-transform: uppercase;\n}\n\n.zenfg-inspector-capture-summary section > div {\n\tdisplay: grid;\n\tgrid-template-columns: auto minmax(0, 1fr);\n\tgap: 8px;\n\tmin-width: 0;\n\tfont-size: 11px;\n\tline-height: 1.5;\n}\n\n.zenfg-inspector-capture-summary span { color: var(--fgd-muted); white-space: nowrap; }\n.zenfg-inspector-capture-summary strong {\n\tmin-width: 0;\n\toverflow: hidden;\n\tcolor: var(--fgd-text);\n\tfont: 600 11px/1.5 var(--fgd-font-mono);\n\ttext-align: right;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n/* Command bar, tabs, and controls */\n.zenfg-inspector-workbench-command-bar {\n\tposition: relative;\n\tdisplay: grid;\n\tgrid-template-columns: auto minmax(0, 1fr) auto;\n\talign-items: center;\n\tmin-width: 0;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n}\n.zenfg-inspector-workbench-command-bar.branding-hidden {\n\tgrid-template-columns: minmax(0, 1fr) auto;\n}\n\n.zenfg-inspector-brand {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tmin-width: 0;\n\tmin-height: 32px;\n\tpadding: 0 12px 0 4px;\n\toverflow: hidden;\n\tcolor: var(--fgd-text);\n\tfont: 700 12px/1 var(--fgd-font-ui);\n\tletter-spacing: 0.015em;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.zenfg-inspector-brand::after {\n\tposition: absolute;\n\ttop: 50%;\n\tright: 0;\n\twidth: 1px;\n\theight: 16px;\n\tbackground: var(--fgd-border);\n\tcontent: '';\n\ttransform: translateY(-50%);\n}\n\n.zenfg-inspector-workbench-tabs,\n.zenfg-inspector-subtabs,\n.zenfg-inspector-inspector-tabs {\n\tdisplay: flex;\n\talign-items: end;\n\tmin-width: 0;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n}\n\n.zenfg-inspector-workbench-tabs {\n\toverflow-x: auto;\n\tborder-bottom: 0;\n}\n\n.zenfg-inspector-workbench-tabs > button,\n.zenfg-inspector-subtabs > button,\n.zenfg-inspector-inspector-tabs > button {\n\tmin-height: 32px;\n\tpadding: 6px 10px;\n\tborder: 0;\n\tborder-bottom: 2px solid transparent;\n\tcolor: var(--fgd-muted);\n\tbackground: transparent;\n\tfont: 600 12px/1 var(--fgd-font-ui);\n\twhite-space: nowrap;\n\tcursor: pointer;\n\ttransition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;\n}\n\n.zenfg-inspector-workbench-tabs > button:hover:not(:disabled),\n.zenfg-inspector-subtabs > button:hover:not(:disabled),\n.zenfg-inspector-inspector-tabs > button:hover:not(:disabled) {\n\tcolor: var(--fgd-text-secondary);\n\tbackground: rgba(180, 190, 202, 0.055);\n}\n\n.zenfg-inspector-workbench-tabs > button.active,\n.zenfg-inspector-subtabs > button.active,\n.zenfg-inspector-inspector-tabs > button.active {\n\tborder-bottom-color: var(--fgd-accent);\n\tcolor: var(--fgd-text);\n\tbackground: linear-gradient(to top, var(--fgd-accent-soft), transparent 55%);\n}\n\n.zenfg-inspector-workbench-tabs > button:disabled,\n.zenfg-inspector-subtabs > button:disabled,\n.zenfg-inspector-inspector-tabs > button:disabled { cursor: default; opacity: 0.42; }\n\n.zenfg-inspector-workbench-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding-left: 8px;\n\toverflow-x: auto;\n\tscrollbar-width: thin;\n}\n\n.zenfg-inspector-export-menu {\n\tposition: absolute;\n\tz-index: 30;\n\ttop: calc(100% + 4px);\n\tright: 0;\n\tdisplay: grid;\n\tmin-width: 142px;\n\tpadding: 4px;\n\tborder: 1px solid var(--fgd-border-strong);\n\tborder-radius: 6px;\n\tbackground: var(--fgd-surface-raised);\n\tbox-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);\n}\n.zenfg-inspector-export-menu[hidden] { display: none; }\n.zenfg-inspector-export-menu > button {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 7px;\n\tpadding: 7px 9px;\n\tborder: 0;\n\tborder-radius: 4px;\n\tcolor: var(--fgd-text-secondary);\n\tbackground: transparent;\n\tfont: 600 11px/1.2 var(--fgd-font-ui);\n\ttext-align: left;\n\twhite-space: nowrap;\n\tcursor: pointer;\n}\n.zenfg-inspector-export-menu > button:hover:not(:disabled) {\n\tcolor: var(--fgd-text);\n\tbackground: var(--fgd-surface-hover);\n}\n.zenfg-inspector-export-menu > button:disabled { cursor: default; opacity: 0.46; }\n\n.zenfg-inspector-workbench-actions > button,\n.zenfg-inspector-graph-toolbar button,\n.zenfg-inspector-group-toggle,\n.zenfg-inspector-inspector-close {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 6px;\n\theight: 28px;\n\tmin-height: 28px;\n\tpadding: 0 9px;\n\tborder: 1px solid var(--fgd-border);\n\tborder-radius: 5px;\n\tcolor: var(--fgd-text-secondary);\n\tbackground: var(--fgd-surface);\n\tfont: 600 11px/1 var(--fgd-font-ui);\n\twhite-space: nowrap;\n\tcursor: pointer;\n\ttransition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;\n}\n\n.zenfg-inspector-workbench-actions > button:hover:not(:disabled),\n.zenfg-inspector-graph-toolbar button:hover:not(:disabled),\n.zenfg-inspector-group-toggle:hover:not(:disabled),\n.zenfg-inspector-inspector-close:hover:not(:disabled) {\n\tborder-color: var(--fgd-border-strong);\n\tcolor: var(--fgd-text);\n\tbackground: var(--fgd-surface-hover);\n}\n\n.zenfg-inspector-workbench-actions > button[data-tone='accent'] {\n\tborder-color: rgba(56, 189, 248, 0.5);\n\tcolor: #bae6fd;\n\tbackground: var(--fgd-accent-soft);\n}\n.zenfg-inspector-workbench-actions > button[data-tone='accent']:hover:not(:disabled) {\n\tborder-color: var(--fgd-accent);\n\tbackground: var(--fgd-accent-hover);\n}\n.zenfg-inspector-workbench-actions > button[data-tone='pending'] {\n\tborder-color: rgba(56, 189, 248, 0.42);\n\tcolor: var(--fgd-text-secondary);\n\tbackground: var(--fgd-accent-soft);\n}\n.zenfg-inspector-workbench-actions > button[data-tone='success'] {\n\tborder-color: rgba(52, 211, 153, 0.46);\n\tcolor: var(--fgd-success);\n\tbackground: rgba(52, 211, 153, 0.1);\n}\n.zenfg-inspector-workbench-actions > button:disabled { cursor: default; opacity: 0.46; }\n.zenfg-inspector-workbench-actions > button[aria-busy='true']:disabled { opacity: 0.72; }\n\n.zenfg-inspector-command-status {\n\tmax-width: 220px;\n\toverflow: hidden;\n\tcolor: var(--fgd-muted);\n\tfont: 11px/1.35 var(--fgd-font-ui);\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.zenfg-inspector-command-status[data-tone='error'] { color: var(--fgd-danger); }\n\n.zenfg-inspector-control-icon[data-icon='spinner'],\nbutton[aria-busy='true'] > .zenfg-inspector-control-icon {\n\tanimation: zenfg-inspector-spin 800ms linear infinite;\n}\n@keyframes zenfg-inspector-spin { to { transform: rotate(360deg); } }\n\n.zenfg-inspector-workbench-tabs > button:focus-visible,\n.zenfg-inspector-subtabs > button:focus-visible,\n.zenfg-inspector-inspector-tabs > button:focus-visible,\n.zenfg-inspector-workbench-actions > button:focus-visible,\n.zenfg-inspector-graph-toolbar button:focus-visible,\n.zenfg-inspector-group-toggle:focus-visible,\n.zenfg-inspector-inspector-close:focus-visible,\n.zenfg-inspector-relation-button:focus-visible,\n.zenfg-inspector-view-toolbar input:focus-visible,\n.zenfg-inspector-view-toolbar select:focus-visible {\n\toutline: 2px solid var(--fgd-accent);\n\toutline-offset: 1px;\n}\n\n/* Workspace and empty states */\n.zenfg-inspector-overview-view {\n\tpadding: 12px;\n\toverflow: auto;\n\tbackground: var(--fgd-canvas);\n}\n\n.zenfg-inspector-workspace {\n\tposition: relative;\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: 8px;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n}\n.zenfg-inspector-workspace.inspector-open {\n\tgrid-template-columns: minmax(0, 1fr) minmax(360px, 28vw);\n}\n\n.zenfg-inspector-main {\n\tdisplay: grid;\n\tgrid-template: minmax(0, 1fr) / minmax(0, 1fr);\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n}\n\n.zenfg-inspector-workbench-empty {\n\tgrid-area: 1 / 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tmin-width: 0;\n\tmin-height: 0;\n\tpadding: 24px;\n\tcolor: var(--fgd-muted);\n\tfont: 12px/1.5 var(--fgd-font-ui);\n\ttext-align: center;\n}\n.zenfg-inspector-workbench-empty > .zenfg-inspector-control-icon {\n\twidth: 22px;\n\theight: 22px;\n\tcolor: var(--fgd-text-secondary);\n}\n.zenfg-inspector-workbench-empty[data-state='error'] > .zenfg-inspector-control-icon { color: var(--fgd-danger); }\n.zenfg-inspector-workbench-empty[data-state='capturing'] > .zenfg-inspector-control-icon { color: var(--fgd-accent); }\n.zenfg-inspector-empty-message { max-width: 520px; }\n.zenfg-inspector-empty-detail { color: color-mix(in srgb, var(--fgd-muted) 78%, transparent); font-size: 11px; }\n\n.zenfg-inspector-view {\n\tgrid-area: 1 / 1;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tborder-radius: 6px;\n\tbackground: var(--fgd-canvas);\n}\n\n.zenfg-inspector-view-toolbar {\n\tdisplay: flex;\n\tflex: 0 0 auto;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 6px 8px;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n\tbackground: var(--fgd-surface);\n}\n\n.zenfg-inspector-view-toolbar input,\n.zenfg-inspector-view-toolbar select {\n\tmin-width: 0;\n\theight: 28px;\n\tpadding: 4px 8px;\n\tborder: 1px solid var(--fgd-border);\n\tborder-radius: 5px;\n\tcolor: var(--fgd-text);\n\tbackground: var(--fgd-panel);\n\tfont: 11px/1 var(--fgd-font-ui);\n}\n.zenfg-inspector-view-toolbar input { flex: 1 1 210px; }\n.zenfg-inspector-view-toolbar input::placeholder { color: var(--fgd-muted); opacity: 0.86; }\n.zenfg-inspector-view-toolbar select { flex: 0 1 auto; color-scheme: dark; }\n\n.zenfg-inspector-passes-view,\n.zenfg-inspector-resources-view { display: flex; flex-direction: column; }\n.zenfg-inspector-subtabs,\n.zenfg-inspector-inspector-tabs {\n\tflex: 0 0 auto;\n\tpadding: 0 4px;\n\tbackground: var(--fgd-panel);\n}\n.zenfg-inspector-subview { flex: 1 1 auto; min-height: 0; overflow: hidden; }\n\n/* Tables and relations */\n.zenfg-inspector-table-scroller {\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 0;\n\toverflow: auto;\n}\n.zenfg-inspector-workbench-table {\n\twidth: 100%;\n\tmin-width: 720px;\n\tborder-collapse: collapse;\n\tfont: 11px/1.45 var(--fgd-font-mono);\n}\n.zenfg-inspector-workbench-table th,\n.zenfg-inspector-workbench-table td {\n\theight: 30px;\n\tmax-width: 360px;\n\tpadding: 6px 10px;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n\toverflow: hidden;\n\ttext-align: left;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.zenfg-inspector-workbench-table th {\n\tposition: sticky;\n\tz-index: 2;\n\ttop: 0;\n\tcolor: var(--fgd-muted);\n\tbackground: var(--fgd-panel);\n\tfont: 650 10px/1.3 var(--fgd-font-ui);\n\tletter-spacing: 0.025em;\n}\n.zenfg-inspector-workbench-table [data-column='numeric'] {\n\tfont-variant-numeric: tabular-nums;\n\ttext-align: right;\n}\n.zenfg-inspector-workbench-table [data-column='code'] { font-family: var(--fgd-font-mono); }\n.zenfg-inspector-workbench-table tbody tr:hover td { background: rgba(180, 190, 202, 0.045); }\n\n.zenfg-inspector-workbench-table tr.selected td,\n.zenfg-inspector-diagnostic-list .selected,\n.zenfg-inspector-memory-allocation.selected,\n.zenfg-inspector-memory-resource.selected { background: var(--fgd-accent-soft); }\n.zenfg-inspector-workbench-table tr.selected td:first-child { box-shadow: inset 2px 0 var(--fgd-accent); }\n\n.zenfg-inspector-workbench-table td small {\n\tdisplay: block;\n\tmargin-top: 2px;\n\toverflow: hidden;\n\tcolor: var(--fgd-muted);\n\tfont: 10px/1.4 var(--fgd-font-ui);\n\ttext-overflow: ellipsis;\n}\n\n.zenfg-inspector-kind-label {\n\t--fgd-kind-color: var(--fgd-muted);\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tmax-width: 100%;\n\toverflow: hidden;\n\tcolor: var(--fgd-text-secondary);\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.zenfg-inspector-kind-label::before {\n\twidth: 6px;\n\theight: 6px;\n\tflex: 0 0 auto;\n\tborder: 1px solid color-mix(in srgb, var(--fgd-kind-color) 78%, white);\n\tborder-radius: 50%;\n\tbackground: color-mix(in srgb, var(--fgd-kind-color) 72%, transparent);\n\tcontent: '';\n}\n.zenfg-inspector-kind-label[data-kind='render'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.render.stroke}; }\n.zenfg-inspector-kind-label[data-kind='compute'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.compute.stroke}; }\n.zenfg-inspector-kind-label[data-kind='copy'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.copy.stroke}; }\n.zenfg-inspector-kind-label[data-kind='clear-buffer'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.clear.stroke}; }\n.zenfg-inspector-kind-label[data-kind='command'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.command.stroke}; }\n.zenfg-inspector-kind-label[data-kind='external-submission'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.external.stroke}; }\n.zenfg-inspector-kind-label[data-kind='opaque'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.external.stroke}; }\n.zenfg-inspector-kind-label[data-kind='texture'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.texture.stroke}; }\n.zenfg-inspector-kind-label[data-kind='buffer'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.buffer.stroke}; }\n.zenfg-inspector-kind-label[data-kind='frame-graph'] { --fgd-kind-color: var(--fgd-accent); }\n.zenfg-inspector-kind-label[data-kind='timed'] { --fgd-kind-color: var(--fgd-success); }\n.zenfg-inspector-kind-label[data-kind='not-timed'] { --fgd-kind-color: var(--fgd-muted); }\n\n.zenfg-inspector-relation-button {\n\tmax-width: 100%;\n\tpadding: 0;\n\tborder: 0;\n\tcolor: #a5def6;\n\tbackground: transparent;\n\tfont: inherit;\n\ttext-align: left;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tcursor: pointer;\n}\n.zenfg-inspector-relation-button:hover {\n\tcolor: #d5f3ff;\n\ttext-decoration: underline;\n\ttext-underline-offset: 2px;\n}\n.zenfg-inspector-group-toggle { width: 28px; padding: 0; color: var(--fgd-text-secondary); }\n.zenfg-inspector-empty-row {\n\theight: 60px !important;\n\tcolor: var(--fgd-muted);\n\tfont-family: var(--fgd-font-ui);\n\ttext-align: center !important;\n}\n\n/* Graph */\n.zenfg-inspector-graph-view { display: flex; flex-direction: column; }\n.zenfg-inspector-graph-toolbar {\n\tdisplay: grid;\n\tgrid-template-columns: auto minmax(0, 1fr) auto;\n\talign-items: center;\n\tgap: 10px;\n\tmin-width: 0;\n\tmin-height: 38px;\n\tpadding: 5px 6px;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n\tbackground: var(--fgd-surface);\n}\n.zenfg-inspector-graph-mode-controls,\n.zenfg-inspector-graph-action-controls { display: flex; align-items: center; min-width: 0; }\n.zenfg-inspector-graph-action-controls { gap: 4px; }\n.zenfg-inspector-graph-toolbar .zenfg-inspector-mode-button {\n\tmargin-right: -1px;\n\tborder-radius: 0;\n}\n.zenfg-inspector-graph-toolbar .zenfg-inspector-mode-button:first-child { border-radius: 5px 0 0 5px; }\n.zenfg-inspector-graph-toolbar .zenfg-inspector-mode-button:last-child {\n\tmargin-right: 0;\n\tborder-radius: 0 5px 5px 0;\n}\n.zenfg-inspector-graph-toolbar button.active,\n.zenfg-inspector-graph-toolbar button[aria-pressed='true'] {\n\tz-index: 1;\n\tborder-color: rgba(56, 189, 248, 0.6);\n\tcolor: var(--fgd-accent);\n\tbackground: var(--fgd-accent-soft);\n}\n.zenfg-inspector-graph-toolbar button:disabled { cursor: default; opacity: 0.42; }\n.zenfg-inspector-graph-toolbar .zenfg-inspector-icon-button { width: 28px; padding: 0; }\n\n.zenfg-inspector-graph-legend {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tmin-width: 0;\n\tpadding: 2px 0;\n\toverflow-x: auto;\n\tcolor: var(--fgd-muted);\n\tfont: 10px/1 var(--fgd-font-ui);\n\twhite-space: nowrap;\n}\n.zenfg-inspector-legend-item { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }\n.zenfg-inspector-legend-swatch {\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: 10px;\n\theight: 8px;\n\tborder: 1px solid var(--zenfg-inspector-legend-color);\n\tborder-radius: 2px;\n\tbackground: color-mix(in srgb, var(--zenfg-inspector-legend-color) 20%, var(--fgd-canvas));\n}\n.zenfg-inspector-legend-swatch[data-shape='ellipse'] { border-radius: 50%; }\n.zenfg-inspector-legend-swatch[data-shape='group'] { border-style: double; background: transparent; }\n.zenfg-inspector-legend-swatch[data-shape='line'] {\n\twidth: 16px;\n\theight: 0;\n\tborder: 0;\n\tborder-top: 1px solid var(--zenfg-inspector-legend-color);\n\tborder-radius: 0;\n\tbackground: transparent;\n}\n.zenfg-inspector-legend-swatch[data-shape='line'][data-line-style='dotted'] { border-top-style: dotted; }\n.zenfg-inspector-legend-swatch[data-shape='line'][data-line-style='dashed'] { border-top-style: dashed; }\n.zenfg-inspector-legend-swatch:not([data-shape='line'])[data-line-style='dashed'] { border-style: dashed; }\n.zenfg-inspector-legend-swatch[data-shape='line']::after {\n\tposition: absolute;\n\ttop: -2px;\n\tright: -1px;\n\twidth: 5px;\n\theight: 4px;\n\tbackground: var(--zenfg-inspector-legend-color);\n\tclip-path: polygon(0 0, 100% 50%, 0 100%);\n\tcontent: '';\n}\n.zenfg-inspector-legend-swatch[data-shape='line'][data-hollow-arrow='true']::after {\n\ttop: -3px;\n\twidth: 4px;\n\theight: 4px;\n\tborder-top: 1px solid var(--zenfg-inspector-legend-color);\n\tborder-right: 1px solid var(--zenfg-inspector-legend-color);\n\tbackground: transparent;\n\tclip-path: none;\n\ttransform: rotate(45deg);\n}\n\n.zenfg-inspector-graph-view .zenfg-inspector-graph {\n\tflex: 1 1 auto;\n\twidth: 100%;\n\theight: auto;\n\tmin-height: 0;\n\tborder: 0;\n}\n.zenfg-inspector-graph {\n\tposition: relative;\n\twidth: 100%;\n\theight: 260px;\n\tmin-height: 220px;\n\toverflow: hidden;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tbackground: var(--fgd-canvas);\n\tcolor: var(--fgd-muted);\n\tfont-size: 11px;\n}\n.zenfg-inspector-graph-canvas {\n\twidth: 100%;\n\theight: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\toutline: none;\n}\n.zenfg-inspector-graph-status {\n\tposition: absolute;\n\tinset: 0;\n\tz-index: 2;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tpadding: 16px;\n\tcolor: var(--fgd-muted);\n\tbackground: rgba(11, 15, 20, 0.82);\n\tfont: 12px/1.45 var(--fgd-font-ui);\n\ttext-align: center;\n\tpointer-events: none;\n}\n.zenfg-inspector-graph-status[data-state='layout'] { background: rgba(11, 15, 20, 0.5); }\n.zenfg-inspector-graph-status[data-state='error'] {\n\tcolor: var(--fgd-text);\n\tbackground: rgba(11, 15, 20, 0.94);\n}\n.zenfg-inspector-graph-status > span { max-width: min(560px, 80%); }\n.zenfg-inspector-graph-status button {\n\theight: 28px;\n\tpadding: 0 9px;\n\tborder: 1px solid rgba(56, 189, 248, 0.55);\n\tborder-radius: 5px;\n\tcolor: var(--fgd-accent);\n\tbackground: var(--fgd-accent-soft);\n\tfont: 600 11px/1 var(--fgd-font-ui);\n\tcursor: pointer;\n\tpointer-events: auto;\n}\n.zenfg-inspector-graph-tooltip {\n\tposition: absolute;\n\tz-index: 3;\n\tmax-width: min(380px, calc(100% - 16px));\n\tpadding: 8px 10px;\n\tborder: 1px solid var(--fgd-border-strong);\n\tborder-radius: 6px;\n\tcolor: var(--fgd-text);\n\tbackground: var(--fgd-surface-raised);\n\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);\n\tfont: 11px/1.5 var(--fgd-font-mono);\n\twhite-space: pre-wrap;\n\tpointer-events: none;\n}\n\n/* Inspector */\n.zenfg-inspector-inspector {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tborder: 1px solid var(--fgd-border);\n\tborder-radius: 6px;\n\tbackground: var(--fgd-surface-raised);\n\tbox-shadow: -8px 0 28px rgba(0, 0, 0, 0.2);\n}\n.zenfg-inspector-inspector[hidden] { display: none; }\n.zenfg-inspector-inspector > header {\n\tdisplay: flex;\n\tflex: 0 0 auto;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 36px;\n\tpadding: 0 8px 0 10px;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n\tbackground: var(--fgd-surface);\n}\n.zenfg-inspector-inspector > header strong {\n\tmin-width: 0;\n\toverflow: hidden;\n\tfont: 600 11px/1.3 var(--fgd-font-mono);\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.zenfg-inspector-inspector-close {\n\twidth: 28px;\n\tpadding: 0;\n\tborder-color: transparent;\n\tbackground: transparent;\n}\n.zenfg-inspector-inspector-content {\n\tflex: 1 1 auto;\n\tmin-height: 0;\n\tpadding: 10px;\n\toverflow: auto;\n}\n.zenfg-inspector-inspector-summary {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(96px, auto) minmax(0, 1fr);\n\tgap: 3px 12px;\n\tmargin: 0;\n\tfont-size: 11px;\n\tline-height: 1.6;\n}\n.zenfg-inspector-inspector-summary dt { color: var(--fgd-muted); font-family: var(--fgd-font-ui); }\n.zenfg-inspector-inspector-summary dd {\n\tmin-width: 0;\n\tmargin: 0;\n\tcolor: var(--fgd-text);\n\tfont-family: var(--fgd-font-mono);\n\toverflow-wrap: anywhere;\n}\n.zenfg-inspector-inspector-relations { display: grid; gap: 8px; }\n.zenfg-inspector-inspector-relations section {\n\tdisplay: grid;\n\tgap: 6px;\n\tpadding: 8px;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tborder-radius: 5px;\n\tbackground: var(--fgd-surface);\n}\n.zenfg-inspector-inspector-relations h3 {\n\tmargin: 0 0 2px;\n\tcolor: var(--fgd-muted);\n\tfont: 700 10px/1.3 var(--fgd-font-ui);\n\tletter-spacing: 0.055em;\n\ttext-transform: uppercase;\n}\n.zenfg-inspector-inspector-relations .zenfg-inspector-relation-button {\n\tfont: 11px/1.5 var(--fgd-font-mono);\n\toverflow-wrap: anywhere;\n\twhite-space: normal;\n}\n.zenfg-inspector-inspector .zenfg-inspector-raw-detail {\n\tmin-width: 100%;\n\tmargin: 0;\n\toverflow: auto;\n\tcolor: var(--fgd-text-secondary);\n\tfont: 11px/1.55 var(--fgd-font-mono);\n\twhite-space: pre;\n}\n\n/* Memory */\n.zenfg-inspector-memory-view {\n\tdisplay: grid;\n\tgrid-template-rows: auto minmax(0, 1fr);\n}\n.zenfg-inspector-memory-summary {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(4, minmax(0, 1fr));\n\tgap: 6px;\n\tpadding: 6px;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n\tbackground: var(--fgd-panel);\n}\n.zenfg-inspector-memory-summary > div {\n\tdisplay: grid;\n\tgap: 3px;\n\tmin-width: 0;\n\tpadding: 6px 8px;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tborder-radius: 5px;\n\tbackground: var(--fgd-surface);\n}\n.zenfg-inspector-memory-summary span { color: var(--fgd-muted); font: 10px/1.3 var(--fgd-font-ui); }\n.zenfg-inspector-memory-summary strong {\n\toverflow: hidden;\n\tfont: 600 11px/1.35 var(--fgd-font-mono);\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.zenfg-inspector-memory-scroller { min-height: 0; overflow: auto; }\n.zenfg-inspector-memory-timeline {\n\tdisplay: grid;\n\tmin-width: 760px;\n\tpadding: 8px;\n\tfont: 11px/1.4 var(--fgd-font-mono);\n}\n.zenfg-inspector-memory-axis,\n.zenfg-inspector-memory-resource {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(150px, 0.9fr) 72px minmax(320px, 2.4fr) 82px;\n\tgap: 10px;\n\talign-items: center;\n\tmin-height: 30px;\n}\n.zenfg-inspector-memory-axis {\n\tposition: sticky;\n\tz-index: 2;\n\ttop: 0;\n\tpadding: 0 8px 6px;\n\tcolor: var(--fgd-muted);\n\tbackground: var(--fgd-canvas);\n\tfont: 10px/1.3 var(--fgd-font-ui);\n}\n.zenfg-inspector-memory-axis-track,\n.zenfg-inspector-memory-track { position: relative; height: 16px; }\n.zenfg-inspector-memory-axis-track { border-bottom: 1px solid var(--fgd-border-strong); }\n.zenfg-inspector-memory-axis-track > span {\n\tposition: absolute;\n\tbottom: -1px;\n\tpadding-bottom: 5px;\n\tborder-left: 1px solid var(--fgd-border-strong);\n\tfont: 10px/1 var(--fgd-font-mono);\n\ttransform: translateX(-1px);\n}\n.zenfg-inspector-memory-allocation {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 12px;\n\tmargin-top: 6px;\n\tpadding: 7px 8px;\n\tborder-top: 1px solid var(--fgd-border-subtle);\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n\tbackground: var(--fgd-surface);\n}\n.zenfg-inspector-memory-allocation > span { color: var(--fgd-muted); font: 10px/1.35 var(--fgd-font-mono); }\n.zenfg-inspector-memory-allocation.muted { color: var(--fgd-muted); font-family: var(--fgd-font-ui); }\n.zenfg-inspector-memory-resource { padding: 0 8px; border-bottom: 1px solid var(--fgd-border-subtle); }\n.zenfg-inspector-memory-resource.selected,\n.zenfg-inspector-memory-allocation.selected { box-shadow: inset 2px 0 var(--fgd-accent); }\n.zenfg-inspector-memory-bar {\n\tposition: absolute;\n\ttop: 4px;\n\theight: 8px;\n\tmin-width: 2px;\n\tborder-radius: 4px;\n\tbackground: color-mix(in srgb, ${GRAPH_VISUAL_THEME.texture.stroke} 76%, transparent);\n\tbox-shadow: 0 0 0 1px color-mix(in srgb, ${GRAPH_VISUAL_THEME.texture.stroke} 36%, transparent);\n}\n.zenfg-inspector-memory-bar.buffer {\n\tbackground: color-mix(in srgb, ${GRAPH_VISUAL_THEME.buffer.stroke} 72%, transparent);\n\tbox-shadow: 0 0 0 1px color-mix(in srgb, ${GRAPH_VISUAL_THEME.buffer.stroke} 34%, transparent);\n}\n.zenfg-inspector-memory-bar.empty { display: none; }\n\n/* Diagnostics */\n.zenfg-inspector-diagnostics-scroller { width: 100%; height: 100%; overflow: auto; }\n.zenfg-inspector-diagnostics-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n\tgap: 8px;\n\tpadding: 8px;\n}\n.zenfg-inspector-diagnostic-card {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 0;\n\tmin-height: 164px;\n\toverflow: hidden;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tborder-radius: 6px;\n\tbackground: var(--fgd-surface);\n}\n.zenfg-inspector-diagnostic-card > h2 {\n\tmargin: 0;\n\tpadding: 9px 10px 3px;\n\tcolor: var(--fgd-text-secondary);\n\tfont: 650 12px/1.35 var(--fgd-font-ui);\n}\n.zenfg-inspector-diagnostic-card > p {\n\tmargin: 0;\n\tpadding: 0 10px 8px;\n\tcolor: var(--fgd-muted);\n\tfont: 11px/1.5 var(--fgd-font-ui);\n}\n.zenfg-inspector-diagnostic-card .zenfg-inspector-table-scroller { flex: 1 1 auto; max-height: 280px; }\n.zenfg-inspector-diagnostic-card .zenfg-inspector-workbench-table { min-width: 100%; table-layout: fixed; }\n.zenfg-inspector-diagnostic-card .zenfg-inspector-workbench-table td {\n\toverflow-wrap: anywhere;\n\twhite-space: normal;\n}\n.zenfg-inspector-diagnostic-list { display: grid; gap: 2px; padding: 6px; overflow: auto; }\n.zenfg-inspector-diagnostic-list .zenfg-inspector-relation-button {\n\tpadding: 6px 8px;\n\tborder-radius: 4px;\n\tcolor: var(--fgd-text-secondary);\n\tfont: 11px/1.45 var(--fgd-font-mono);\n}\n.zenfg-inspector-diagnostic-list .zenfg-inspector-relation-button:hover {\n\tbackground: rgba(180, 190, 202, 0.05);\n\ttext-decoration: none;\n}\n.zenfg-inspector-diagnostic-list .selected { box-shadow: inset 2px 0 var(--fgd-accent); }\n\n/* Responsive */\n@container zenfg-inspector (max-width: 960px) {\n\t.zenfg-inspector-workspace.inspector-open { grid-template-columns: minmax(0, 1fr); }\n\t.zenfg-inspector-workspace.inspector-open::after {\n\t\tposition: absolute;\n\t\tz-index: 10;\n\t\tinset: 0;\n\t\tbackground: rgba(3, 7, 12, 0.38);\n\t\tcontent: '';\n\t\tpointer-events: none;\n\t}\n\t.zenfg-inspector-inspector {\n\t\tposition: absolute;\n\t\tz-index: 20;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\twidth: min(380px, calc(100% - 24px));\n\t\tbox-shadow: -18px 0 42px rgba(0, 0, 0, 0.42);\n\t}\n\t.zenfg-inspector-graph-toolbar {\n\t\tgrid-template-columns: minmax(0, 1fr) auto;\n\t\tgap: 6px 8px;\n\t}\n\t.zenfg-inspector-graph-legend {\n\t\tgrid-column: 1 / -1;\n\t\tgrid-row: 2;\n\t\tpadding-top: 6px;\n\t\tborder-top: 1px solid var(--fgd-border-subtle);\n\t}\n\t.zenfg-inspector-graph-action-controls { justify-self: end; }\n}\n\n@container zenfg-inspector (max-width: 840px) {\n\t.zenfg-inspector-workbench-command-bar {\n\t\tgrid-template-columns: minmax(0, 1fr) auto;\n\t}\n\t.zenfg-inspector-brand { grid-column: 1; grid-row: 1; min-height: 36px; display: flex; align-items: center; }\n\t.zenfg-inspector-brand::after { display: none; }\n\t.zenfg-inspector-workbench-actions { grid-column: 2; grid-row: 1; }\n\t.zenfg-inspector-workbench-tabs { grid-column: 1 / -1; grid-row: 2; }\n\t.zenfg-inspector-workbench-command-bar.branding-hidden .zenfg-inspector-workbench-tabs {\n\t\tgrid-column: 1;\n\t\tgrid-row: 1;\n\t}\n\t.zenfg-inspector-diagnostics-grid { grid-template-columns: minmax(0, 1fr); }\n}\n\n@container zenfg-inspector (max-width: 720px) {\n\t.zenfg-inspector-body { padding: 8px; }\n\t.zenfg-inspector-overview-view { padding: 8px; }\n\t.zenfg-inspector-capture-summary > section { padding: 10px; }\n\t.zenfg-inspector-workbench-actions { padding-left: 6px; }\n\t.zenfg-inspector-command-status { max-width: 104px; }\n\t.zenfg-inspector-workbench-tabs > button { flex: 0 0 auto; padding-inline: 8px; }\n\t.zenfg-inspector-memory-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n\t.zenfg-inspector-view-toolbar input { flex-basis: 100%; }\n\t.zenfg-inspector-graph-toolbar { display: flex; flex-wrap: wrap; }\n\t.zenfg-inspector-graph-legend { order: 3; flex-basis: 100%; }\n\t.zenfg-inspector-graph-action-controls { margin-left: auto; }\n\t.zenfg-inspector-graph-view .zenfg-inspector-graph { height: auto; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.zenfg-inspector *,\n\t.zenfg-inspector *::before,\n\t.zenfg-inspector *::after {\n\t\tscroll-behavior: auto !important;\n\t\ttransition-duration: 0.01ms !important;\n\t\tanimation-duration: 0.01ms !important;\n\t\tanimation-iteration-count: 1 !important;\n\t}\n}\n`;\n\n/**\n * Installs the inspector's shared stylesheet in the current document once.\n *\n * @remarks This is safe to call repeatedly and is a no-op during server-side\n * rendering. `FrameGraphInspector` calls it automatically.\n */\nexport function ensureFrameGraphInspectorStyles(): void {\n\tif (typeof document === 'undefined' || document.getElementById(STYLE_ELEMENT_ID)) {\n\t\treturn;\n\t}\n\n\tconst style = document.createElement('style');\n\tstyle.id = STYLE_ELEMENT_ID;\n\tstyle.textContent = FRAME_GRAPH_DEBUG_PANEL_CSS;\n\tdocument.head.appendChild(style);\n}\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { FRAME_GRAPH_DEBUG_VISUAL_THEME, GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';\n\nconst STYLE_ELEMENT_ID = 'zenfg-inspector-panel-styles';\nconst theme = FRAME_GRAPH_DEBUG_VISUAL_THEME;\n\nconst FRAME_GRAPH_DEBUG_PANEL_CSS = `\n/* Tokens and workbench root */\n.zenfg-inspector {\n\t--fgd-canvas: ${theme.canvas};\n\t--fgd-panel: var(--zenfg-inspector-background, ${theme.panel});\n\t--fgd-surface: var(--zenfg-inspector-surface, ${theme.surface});\n\t--fgd-surface-raised: var(--zenfg-inspector-surface-raised, ${theme.surfaceRaised});\n\t--fgd-surface-hover: var(--zenfg-inspector-surface-hover, ${theme.surfaceHover});\n\t--fgd-border: var(--zenfg-inspector-border, ${theme.border});\n\t--fgd-border-subtle: var(--zenfg-inspector-border-subtle, rgba(180, 190, 202, 0.11));\n\t--fgd-border-strong: var(--zenfg-inspector-border-strong, rgba(180, 190, 202, 0.28));\n\t--fgd-text: var(--zenfg-inspector-text, ${theme.text});\n\t--fgd-text-secondary: var(--zenfg-inspector-text-secondary, ${theme.textSecondary});\n\t--fgd-muted: var(--zenfg-inspector-muted, ${theme.muted});\n\t--fgd-accent: var(--zenfg-inspector-accent, ${theme.accent});\n\t--fgd-accent-soft: var(--zenfg-inspector-accent-soft, rgba(56, 189, 248, 0.12));\n\t--fgd-accent-hover: var(--zenfg-inspector-accent-hover, rgba(56, 189, 248, 0.18));\n\t--fgd-success: var(--zenfg-inspector-success, ${theme.success});\n\t--fgd-warning: var(--zenfg-inspector-warning, ${theme.warning});\n\t--fgd-danger: var(--zenfg-inspector-danger, ${theme.danger});\n\t--fgd-font-ui: var(--zenfg-inspector-font-ui, ${theme.fontUi});\n\t--fgd-font-mono: var(--zenfg-inspector-font-mono, ${theme.fontMono});\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tcolor: var(--fgd-text);\n\tbackground: var(--fgd-canvas);\n\tfont-family: var(--fgd-font-ui);\n\tfont-size: 12px;\n\tline-height: 1.45;\n\tcolor-scheme: dark;\n\tcontainer-name: zenfg-inspector;\n\tcontainer-type: inline-size;\n}\n\n.zenfg-inspector,\n.zenfg-inspector * { box-sizing: border-box; }\n\n.zenfg-inspector-body {\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 0;\n\tpadding: 10px;\n\toverflow: hidden;\n\tborder: 0;\n\tborder-radius: 0;\n\tbackground: var(--zenfg-inspector-background, var(--fgd-panel));\n}\n\n.zenfg-inspector-content {\n\tmin-width: 0;\n\tmin-height: 0;\n\theight: 100%;\n\toverflow: hidden;\n}\n\n.zenfg-inspector-drop-overlay {\n\tposition: absolute;\n\tz-index: 40;\n\tinset: 10px;\n\tdisplay: grid;\n\tplace-content: center;\n\tgap: 6px;\n\tborder: 2px dashed var(--fgd-accent);\n\tborder-radius: var(--zenfg-inspector-radius-md, 6px);\n\tcolor: #bae6fd;\n\tbackground: color-mix(in srgb, var(--fgd-canvas) 90%, transparent);\n\tfont: 600 13px/1.4 var(--fgd-font-ui);\n\ttext-align: center;\n\tpointer-events: none;\n}\n.zenfg-inspector-drop-overlay[hidden] { display: none; }\n.zenfg-inspector-drop-overlay > span { color: var(--fgd-muted); font-size: 11px; }\n\n.zenfg-inspector-capture-summary[hidden],\n.zenfg-inspector-command-status[hidden],\n.zenfg-inspector-capture-action[hidden],\n.zenfg-inspector-workbench-empty[hidden],\n.zenfg-inspector-open-inspector[hidden],\n.zenfg-inspector-inspector.unavailable,\n.zenfg-inspector-view[hidden],\n.zenfg-inspector-graph-status[hidden] { display: none !important; }\n\n.zenfg-inspector-muted {\n\tmargin: 0;\n\tcolor: var(--fgd-muted);\n\tfont: 11px/1.5 var(--fgd-font-ui);\n}\n\n.zenfg-inspector-control-icon {\n\tdisplay: block;\n\tflex: 0 0 auto;\n\twidth: 14px;\n\theight: 14px;\n}\n\n.zenfg-inspector-table-scroller,\n.zenfg-inspector-memory-scroller,\n.zenfg-inspector-diagnostics-scroller,\n.zenfg-inspector-inspector-content,\n.zenfg-inspector-workbench-tabs,\n.zenfg-inspector-graph-legend {\n\tscrollbar-width: thin;\n\tscrollbar-color: rgba(180, 190, 202, 0.25) transparent;\n}\n\n/* Workbench and summary */\n.zenfg-inspector-workbench {\n\tdisplay: grid;\n\tgrid-template-rows: auto minmax(0, 1fr);\n\tgap: 8px;\n\theight: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\tfont-family: var(--fgd-font-ui);\n}\n\n.zenfg-inspector-capture-summary {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));\n\talign-content: start;\n\tgap: 8px;\n\tmin-width: 0;\n\tbackground: transparent;\n}\n\n.zenfg-inspector-capture-summary > section {\n\tmin-width: 0;\n\tpadding: 12px;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tborder-radius: 6px;\n\tbackground: var(--fgd-surface);\n}\n\n.zenfg-inspector-capture-summary h2 {\n\tmargin: 0 0 5px;\n\tcolor: var(--fgd-text-secondary);\n\tfont-size: 10px;\n\tfont-weight: 700;\n\tletter-spacing: 0.075em;\n\tline-height: 1.2;\n\ttext-transform: uppercase;\n}\n\n.zenfg-inspector-capture-summary section > div {\n\tdisplay: grid;\n\tgrid-template-columns: auto minmax(0, 1fr);\n\tgap: 8px;\n\tmin-width: 0;\n\tfont-size: 11px;\n\tline-height: 1.5;\n}\n\n.zenfg-inspector-capture-summary span { color: var(--fgd-muted); white-space: nowrap; }\n.zenfg-inspector-capture-summary strong {\n\tmin-width: 0;\n\toverflow: hidden;\n\tcolor: var(--fgd-text);\n\tfont: 600 11px/1.5 var(--fgd-font-mono);\n\ttext-align: right;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n/* Command bar, tabs, and controls */\n.zenfg-inspector-workbench-command-bar {\n\tposition: relative;\n\tdisplay: grid;\n\tgrid-template-columns: auto minmax(0, 1fr) auto;\n\talign-items: center;\n\tmin-width: 0;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n}\n.zenfg-inspector-workbench-command-bar.branding-hidden {\n\tgrid-template-columns: minmax(0, 1fr) auto;\n}\n\n.zenfg-inspector-brand {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tmin-width: 0;\n\tmin-height: 32px;\n\tpadding: 0 12px 0 4px;\n\toverflow: hidden;\n\tcolor: var(--fgd-text);\n\tfont: 700 12px/1 var(--fgd-font-ui);\n\tletter-spacing: 0.015em;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.zenfg-inspector-brand::after {\n\tposition: absolute;\n\ttop: 50%;\n\tright: 0;\n\twidth: 1px;\n\theight: 16px;\n\tbackground: var(--fgd-border);\n\tcontent: '';\n\ttransform: translateY(-50%);\n}\n\n.zenfg-inspector-workbench-tabs,\n.zenfg-inspector-subtabs,\n.zenfg-inspector-inspector-tabs {\n\tdisplay: flex;\n\talign-items: end;\n\tmin-width: 0;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n}\n\n.zenfg-inspector-workbench-tabs {\n\toverflow-x: auto;\n\tborder-bottom: 0;\n}\n\n.zenfg-inspector-workbench-tabs > button,\n.zenfg-inspector-subtabs > button,\n.zenfg-inspector-inspector-tabs > button {\n\tmin-height: 32px;\n\tpadding: 6px 10px;\n\tborder: 0;\n\tborder-bottom: 2px solid transparent;\n\tcolor: var(--fgd-muted);\n\tbackground: transparent;\n\tfont: 600 12px/1 var(--fgd-font-ui);\n\twhite-space: nowrap;\n\tcursor: pointer;\n\ttransition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;\n}\n\n.zenfg-inspector-workbench-tabs > button:hover:not(:disabled),\n.zenfg-inspector-subtabs > button:hover:not(:disabled),\n.zenfg-inspector-inspector-tabs > button:hover:not(:disabled) {\n\tcolor: var(--fgd-text-secondary);\n\tbackground: rgba(180, 190, 202, 0.055);\n}\n\n.zenfg-inspector-workbench-tabs > button.active,\n.zenfg-inspector-subtabs > button.active,\n.zenfg-inspector-inspector-tabs > button.active {\n\tborder-bottom-color: var(--fgd-accent);\n\tcolor: var(--fgd-text);\n\tbackground: linear-gradient(to top, var(--fgd-accent-soft), transparent 55%);\n}\n\n.zenfg-inspector-workbench-tabs > button:disabled,\n.zenfg-inspector-subtabs > button:disabled,\n.zenfg-inspector-inspector-tabs > button:disabled { cursor: default; opacity: 0.42; }\n\n.zenfg-inspector-workbench-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding-left: 8px;\n\toverflow-x: auto;\n\tscrollbar-width: thin;\n}\n\n.zenfg-inspector-export-menu {\n\tposition: absolute;\n\tz-index: 30;\n\ttop: calc(100% + 4px);\n\tright: 0;\n\tdisplay: grid;\n\tmin-width: 142px;\n\tpadding: 4px;\n\tborder: 1px solid var(--fgd-border-strong);\n\tborder-radius: 6px;\n\tbackground: var(--fgd-surface-raised);\n\tbox-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);\n}\n.zenfg-inspector-export-menu[hidden] { display: none; }\n.zenfg-inspector-export-menu > button {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 7px;\n\tpadding: 7px 9px;\n\tborder: 0;\n\tborder-radius: 4px;\n\tcolor: var(--fgd-text-secondary);\n\tbackground: transparent;\n\tfont: 600 11px/1.2 var(--fgd-font-ui);\n\ttext-align: left;\n\twhite-space: nowrap;\n\tcursor: pointer;\n}\n.zenfg-inspector-export-menu > button:hover:not(:disabled) {\n\tcolor: var(--fgd-text);\n\tbackground: var(--fgd-surface-hover);\n}\n.zenfg-inspector-export-menu > button:disabled { cursor: default; opacity: 0.46; }\n\n.zenfg-inspector-workbench-actions > button,\n.zenfg-inspector-graph-toolbar button,\n.zenfg-inspector-group-toggle,\n.zenfg-inspector-inspector-close {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 6px;\n\theight: 28px;\n\tmin-height: 28px;\n\tpadding: 0 9px;\n\tborder: 1px solid var(--fgd-border);\n\tborder-radius: 5px;\n\tcolor: var(--fgd-text-secondary);\n\tbackground: var(--fgd-surface);\n\tfont: 600 11px/1 var(--fgd-font-ui);\n\twhite-space: nowrap;\n\tcursor: pointer;\n\ttransition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;\n}\n\n.zenfg-inspector-workbench-actions > button:hover:not(:disabled),\n.zenfg-inspector-graph-toolbar button:hover:not(:disabled),\n.zenfg-inspector-group-toggle:hover:not(:disabled),\n.zenfg-inspector-inspector-close:hover:not(:disabled) {\n\tborder-color: var(--fgd-border-strong);\n\tcolor: var(--fgd-text);\n\tbackground: var(--fgd-surface-hover);\n}\n\n.zenfg-inspector-workbench-actions > button[data-tone='accent'] {\n\tborder-color: rgba(56, 189, 248, 0.5);\n\tcolor: #bae6fd;\n\tbackground: var(--fgd-accent-soft);\n}\n.zenfg-inspector-workbench-actions > button[data-tone='accent']:hover:not(:disabled) {\n\tborder-color: var(--fgd-accent);\n\tbackground: var(--fgd-accent-hover);\n}\n.zenfg-inspector-workbench-actions > button[data-tone='pending'] {\n\tborder-color: rgba(56, 189, 248, 0.42);\n\tcolor: var(--fgd-text-secondary);\n\tbackground: var(--fgd-accent-soft);\n}\n.zenfg-inspector-workbench-actions > button[data-tone='success'] {\n\tborder-color: rgba(52, 211, 153, 0.46);\n\tcolor: var(--fgd-success);\n\tbackground: rgba(52, 211, 153, 0.1);\n}\n.zenfg-inspector-workbench-actions > button:disabled { cursor: default; opacity: 0.46; }\n.zenfg-inspector-workbench-actions > button[aria-busy='true']:disabled { opacity: 0.72; }\n\n.zenfg-inspector-command-status {\n\tmax-width: 220px;\n\toverflow: hidden;\n\tcolor: var(--fgd-muted);\n\tfont: 11px/1.35 var(--fgd-font-ui);\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.zenfg-inspector-command-status[data-tone='error'] { color: var(--fgd-danger); }\n\n.zenfg-inspector-control-icon[data-icon='spinner'],\nbutton[aria-busy='true'] > .zenfg-inspector-control-icon {\n\tanimation: zenfg-inspector-spin 800ms linear infinite;\n}\n@keyframes zenfg-inspector-spin { to { transform: rotate(360deg); } }\n\n.zenfg-inspector-workbench-tabs > button:focus-visible,\n.zenfg-inspector-subtabs > button:focus-visible,\n.zenfg-inspector-inspector-tabs > button:focus-visible,\n.zenfg-inspector-workbench-actions > button:focus-visible,\n.zenfg-inspector-graph-toolbar button:focus-visible,\n.zenfg-inspector-group-toggle:focus-visible,\n.zenfg-inspector-inspector-close:focus-visible,\n.zenfg-inspector-relation-button:focus-visible,\n.zenfg-inspector-view-toolbar input:focus-visible,\n.zenfg-inspector-view-toolbar select:focus-visible {\n\toutline: 2px solid var(--fgd-accent);\n\toutline-offset: 1px;\n}\n\n/* Workspace and empty states */\n.zenfg-inspector-overview-view {\n\tpadding: 12px;\n\toverflow: auto;\n\tbackground: var(--fgd-canvas);\n}\n\n.zenfg-inspector-workspace {\n\tposition: relative;\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: 8px;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n}\n.zenfg-inspector-workspace.inspector-open {\n\tgrid-template-columns: minmax(0, 1fr) minmax(360px, 28vw);\n}\n\n.zenfg-inspector-main {\n\tdisplay: grid;\n\tgrid-template: minmax(0, 1fr) / minmax(0, 1fr);\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n}\n\n.zenfg-inspector-workbench-empty {\n\tgrid-area: 1 / 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tmin-width: 0;\n\tmin-height: 0;\n\tpadding: 24px;\n\tcolor: var(--fgd-muted);\n\tfont: 12px/1.5 var(--fgd-font-ui);\n\ttext-align: center;\n}\n.zenfg-inspector-workbench-empty > .zenfg-inspector-control-icon {\n\twidth: 22px;\n\theight: 22px;\n\tcolor: var(--fgd-text-secondary);\n}\n.zenfg-inspector-workbench-empty[data-state='error'] > .zenfg-inspector-control-icon { color: var(--fgd-danger); }\n.zenfg-inspector-workbench-empty[data-state='capturing'] > .zenfg-inspector-control-icon { color: var(--fgd-accent); }\n.zenfg-inspector-empty-message { max-width: 520px; }\n.zenfg-inspector-empty-detail { color: color-mix(in srgb, var(--fgd-muted) 78%, transparent); font-size: 11px; }\n\n.zenfg-inspector-view {\n\tgrid-area: 1 / 1;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tborder-radius: 6px;\n\tbackground: var(--fgd-canvas);\n}\n\n.zenfg-inspector-view-toolbar {\n\tdisplay: flex;\n\tflex: 0 0 auto;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 6px 8px;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n\tbackground: var(--fgd-surface);\n}\n\n.zenfg-inspector-view-toolbar input,\n.zenfg-inspector-view-toolbar select {\n\tmin-width: 0;\n\theight: 28px;\n\tpadding: 4px 8px;\n\tborder: 1px solid var(--fgd-border);\n\tborder-radius: 5px;\n\tcolor: var(--fgd-text);\n\tbackground: var(--fgd-panel);\n\tfont: 11px/1 var(--fgd-font-ui);\n}\n.zenfg-inspector-view-toolbar input { flex: 1 1 210px; }\n.zenfg-inspector-view-toolbar input::placeholder { color: var(--fgd-muted); opacity: 0.86; }\n.zenfg-inspector-view-toolbar select { flex: 0 1 auto; color-scheme: dark; }\n\n.zenfg-inspector-passes-view,\n.zenfg-inspector-resources-view { display: flex; flex-direction: column; }\n.zenfg-inspector-subtabs,\n.zenfg-inspector-inspector-tabs {\n\tflex: 0 0 auto;\n\tpadding: 0 4px;\n\tbackground: var(--fgd-panel);\n}\n.zenfg-inspector-subview { flex: 1 1 auto; min-height: 0; overflow: hidden; }\n\n/* Tables and relations */\n.zenfg-inspector-table-scroller {\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 0;\n\toverflow: auto;\n}\n.zenfg-inspector-workbench-table {\n\twidth: 100%;\n\tmin-width: 720px;\n\tborder-collapse: collapse;\n\tfont: 11px/1.45 var(--fgd-font-mono);\n}\n.zenfg-inspector-workbench-table th,\n.zenfg-inspector-workbench-table td {\n\theight: 30px;\n\tmax-width: 360px;\n\tpadding: 6px 10px;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n\toverflow: hidden;\n\ttext-align: left;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.zenfg-inspector-workbench-table th {\n\tposition: sticky;\n\tz-index: 2;\n\ttop: 0;\n\tcolor: var(--fgd-muted);\n\tbackground: var(--fgd-panel);\n\tfont: 650 10px/1.3 var(--fgd-font-ui);\n\tletter-spacing: 0.025em;\n}\n.zenfg-inspector-workbench-table [data-column='numeric'] {\n\tfont-variant-numeric: tabular-nums;\n\ttext-align: right;\n}\n.zenfg-inspector-workbench-table [data-column='code'] { font-family: var(--fgd-font-mono); }\n.zenfg-inspector-workbench-table tbody tr:hover td { background: rgba(180, 190, 202, 0.045); }\n\n.zenfg-inspector-workbench-table tr.selected td,\n.zenfg-inspector-diagnostic-list .selected,\n.zenfg-inspector-memory-allocation.selected,\n.zenfg-inspector-memory-resource.selected { background: var(--fgd-accent-soft); }\n.zenfg-inspector-workbench-table tr.selected td:first-child { box-shadow: inset 2px 0 var(--fgd-accent); }\n\n.zenfg-inspector-workbench-table td small {\n\tdisplay: block;\n\tmargin-top: 2px;\n\toverflow: hidden;\n\tcolor: var(--fgd-muted);\n\tfont: 10px/1.4 var(--fgd-font-ui);\n\ttext-overflow: ellipsis;\n}\n\n.zenfg-inspector-kind-label {\n\t--fgd-kind-color: var(--fgd-muted);\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tmax-width: 100%;\n\toverflow: hidden;\n\tcolor: var(--fgd-text-secondary);\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.zenfg-inspector-kind-label::before {\n\twidth: 6px;\n\theight: 6px;\n\tflex: 0 0 auto;\n\tborder: 1px solid color-mix(in srgb, var(--fgd-kind-color) 78%, white);\n\tborder-radius: 50%;\n\tbackground: color-mix(in srgb, var(--fgd-kind-color) 72%, transparent);\n\tcontent: '';\n}\n.zenfg-inspector-kind-label[data-kind='render'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.render.stroke}; }\n.zenfg-inspector-kind-label[data-kind='compute'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.compute.stroke}; }\n.zenfg-inspector-kind-label[data-kind='copy'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.copy.stroke}; }\n.zenfg-inspector-kind-label[data-kind='clear-buffer'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.clear.stroke}; }\n.zenfg-inspector-kind-label[data-kind='command'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.command.stroke}; }\n.zenfg-inspector-kind-label[data-kind='external-submission'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.external.stroke}; }\n.zenfg-inspector-kind-label[data-kind='opaque'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.external.stroke}; }\n.zenfg-inspector-kind-label[data-kind='texture'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.texture.stroke}; }\n.zenfg-inspector-kind-label[data-kind='buffer'] { --fgd-kind-color: ${GRAPH_VISUAL_THEME.buffer.stroke}; }\n.zenfg-inspector-kind-label[data-kind='frame-graph'] { --fgd-kind-color: var(--fgd-accent); }\n.zenfg-inspector-kind-label[data-kind='timed'] { --fgd-kind-color: var(--fgd-success); }\n.zenfg-inspector-kind-label[data-kind='not-timed'] { --fgd-kind-color: var(--fgd-muted); }\n\n.zenfg-inspector-relation-button {\n\tmax-width: 100%;\n\tpadding: 0;\n\tborder: 0;\n\tcolor: #a5def6;\n\tbackground: transparent;\n\tfont: inherit;\n\ttext-align: left;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tcursor: pointer;\n}\n.zenfg-inspector-relation-button:hover {\n\tcolor: #d5f3ff;\n\ttext-decoration: underline;\n\ttext-underline-offset: 2px;\n}\n.zenfg-inspector-group-toggle { width: 28px; padding: 0; color: var(--fgd-text-secondary); }\n.zenfg-inspector-empty-row {\n\theight: 60px !important;\n\tcolor: var(--fgd-muted);\n\tfont-family: var(--fgd-font-ui);\n\ttext-align: center !important;\n}\n\n/* Graph */\n.zenfg-inspector-graph-view { display: flex; flex-direction: column; }\n.zenfg-inspector-graph-toolbar {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) auto;\n\talign-items: center;\n\tgap: 10px;\n\tmin-width: 0;\n\tmin-height: 38px;\n\tpadding: 5px 6px;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n\tbackground: var(--fgd-surface);\n}\n.zenfg-inspector-graph-action-controls { display: flex; align-items: center; min-width: 0; }\n.zenfg-inspector-graph-action-controls { gap: 4px; }\n.zenfg-inspector-graph-toolbar button.active,\n.zenfg-inspector-graph-toolbar button[aria-pressed='true'] {\n\tz-index: 1;\n\tborder-color: rgba(56, 189, 248, 0.6);\n\tcolor: var(--fgd-accent);\n\tbackground: var(--fgd-accent-soft);\n}\n.zenfg-inspector-graph-toolbar button:disabled { cursor: default; opacity: 0.42; }\n.zenfg-inspector-graph-toolbar .zenfg-inspector-icon-button { width: 28px; padding: 0; }\n\n.zenfg-inspector-graph-legend {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tmin-width: 0;\n\tpadding: 2px 0;\n\toverflow-x: auto;\n\tcolor: var(--fgd-muted);\n\tfont: 10px/1 var(--fgd-font-ui);\n\twhite-space: nowrap;\n}\n.zenfg-inspector-legend-item { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }\n.zenfg-inspector-legend-group { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }\n.zenfg-inspector-legend-group + .zenfg-inspector-legend-group { border-left: 1px solid var(--fgd-border-subtle); padding-left: 10px; }\n.zenfg-inspector-legend-heading { color: var(--fgd-text-secondary); font-weight: 600; }\n.zenfg-inspector-legend-swatch {\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: 10px;\n\theight: 8px;\n\tborder: 1px solid var(--zenfg-inspector-legend-color);\n\tborder-radius: 2px;\n\tbackground: color-mix(in srgb, var(--zenfg-inspector-legend-color) 20%, var(--fgd-canvas));\n}\n.zenfg-inspector-legend-swatch[data-shape='ellipse'] { border-radius: 50%; }\n.zenfg-inspector-legend-swatch[data-shape='group'] { background: transparent; }\n.zenfg-inspector-legend-swatch[data-shape='cut-rectangle'],\n.zenfg-inspector-legend-swatch[data-shape='tag'] { width: 14px; height: 10px; border: 0; background: transparent; }\n.zenfg-inspector-legend-swatch > svg { display: block; width: 100%; height: 100%; overflow: visible; }\n.zenfg-inspector-legend-swatch > svg polygon {\n\tfill: color-mix(in srgb, var(--zenfg-inspector-legend-color) 20%, var(--fgd-canvas));\n\tstroke: var(--zenfg-inspector-legend-color);\n\tstroke-width: 1.4;\n}\n.zenfg-inspector-legend-swatch[data-shape='line'] {\n\twidth: 16px;\n\theight: 0;\n\tborder: 0;\n\tborder-top: 1px solid var(--zenfg-inspector-legend-color);\n\tborder-radius: 0;\n\tbackground: transparent;\n}\n.zenfg-inspector-legend-swatch[data-shape='line'][data-line-style='dotted'] { border-top-style: dotted; }\n.zenfg-inspector-legend-swatch[data-shape='line'][data-line-style='dashed'] { border-top-style: dashed; }\n.zenfg-inspector-legend-swatch:not([data-shape='line'])[data-line-style='dashed'] { border-style: dashed; }\n.zenfg-inspector-legend-swatch[data-shape='line']::after {\n\tposition: absolute;\n\ttop: -2px;\n\tright: -1px;\n\twidth: 5px;\n\theight: 4px;\n\tbackground: var(--zenfg-inspector-legend-color);\n\tclip-path: polygon(0 0, 100% 50%, 0 100%);\n\tcontent: '';\n}\n.zenfg-inspector-legend-swatch[data-shape='line'][data-hollow-arrow='true']::after {\n\ttop: -3px;\n\twidth: 4px;\n\theight: 4px;\n\tborder-top: 1px solid var(--zenfg-inspector-legend-color);\n\tborder-right: 1px solid var(--zenfg-inspector-legend-color);\n\tbackground: transparent;\n\tclip-path: none;\n\ttransform: rotate(45deg);\n}\n\n.zenfg-inspector-graph-view .zenfg-inspector-graph {\n\tflex: 1 1 auto;\n\twidth: 100%;\n\theight: auto;\n\tmin-height: 0;\n\tborder: 0;\n}\n.zenfg-inspector-graph {\n\tposition: relative;\n\twidth: 100%;\n\theight: 260px;\n\tmin-height: 220px;\n\toverflow: hidden;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tbackground: var(--fgd-canvas);\n\tcolor: var(--fgd-muted);\n\tfont-size: 11px;\n}\n.zenfg-inspector-graph-canvas {\n\twidth: 100%;\n\theight: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\toutline: none;\n}\n.zenfg-inspector-graph-status {\n\tposition: absolute;\n\tinset: 0;\n\tz-index: 2;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tpadding: 16px;\n\tcolor: var(--fgd-muted);\n\tbackground: rgba(11, 15, 20, 0.82);\n\tfont: 12px/1.45 var(--fgd-font-ui);\n\ttext-align: center;\n\tpointer-events: none;\n}\n.zenfg-inspector-graph-status[data-state='layout'] { background: rgba(11, 15, 20, 0.5); }\n.zenfg-inspector-graph-status[data-state='error'] {\n\tcolor: var(--fgd-text);\n\tbackground: rgba(11, 15, 20, 0.94);\n}\n.zenfg-inspector-graph-status > span { max-width: min(560px, 80%); }\n.zenfg-inspector-graph-status button {\n\theight: 28px;\n\tpadding: 0 9px;\n\tborder: 1px solid rgba(56, 189, 248, 0.55);\n\tborder-radius: 5px;\n\tcolor: var(--fgd-accent);\n\tbackground: var(--fgd-accent-soft);\n\tfont: 600 11px/1 var(--fgd-font-ui);\n\tcursor: pointer;\n\tpointer-events: auto;\n}\n.zenfg-inspector-graph-tooltip {\n\tposition: absolute;\n\tz-index: 3;\n\twidth: max-content;\n\tmax-width: min(380px, calc(100% - 16px));\n\tpadding: 8px 10px;\n\tborder: 1px solid var(--fgd-border-strong);\n\tborder-radius: 6px;\n\tcolor: var(--fgd-text);\n\tbackground: var(--fgd-surface-raised);\n\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);\n\tfont: 11px/1.5 var(--fgd-font-mono);\n\twhite-space: pre-wrap;\n\tpointer-events: none;\n}\n\n/* Inspector */\n.zenfg-inspector-inspector {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tborder: 1px solid var(--fgd-border);\n\tborder-radius: 6px;\n\tbackground: var(--fgd-surface-raised);\n\tbox-shadow: -8px 0 28px rgba(0, 0, 0, 0.2);\n}\n.zenfg-inspector-inspector[hidden] { display: none; }\n.zenfg-inspector-inspector > header {\n\tdisplay: flex;\n\tflex: 0 0 auto;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 36px;\n\tpadding: 0 8px 0 10px;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n\tbackground: var(--fgd-surface);\n}\n.zenfg-inspector-inspector > header strong {\n\tmin-width: 0;\n\toverflow: hidden;\n\tfont: 600 11px/1.3 var(--fgd-font-mono);\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.zenfg-inspector-inspector-close {\n\twidth: 28px;\n\tpadding: 0;\n\tborder-color: transparent;\n\tbackground: transparent;\n}\n.zenfg-inspector-inspector-content {\n\tflex: 1 1 auto;\n\tmin-height: 0;\n\tpadding: 10px;\n\toverflow: auto;\n}\n.zenfg-inspector-inspector-summary {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(96px, auto) minmax(0, 1fr);\n\tgap: 3px 12px;\n\tmargin: 0;\n\tfont-size: 11px;\n\tline-height: 1.6;\n}\n.zenfg-inspector-inspector-summary dt { color: var(--fgd-muted); font-family: var(--fgd-font-ui); }\n.zenfg-inspector-inspector-summary dd {\n\tmin-width: 0;\n\tmargin: 0;\n\tcolor: var(--fgd-text);\n\tfont-family: var(--fgd-font-mono);\n\toverflow-wrap: anywhere;\n}\n.zenfg-inspector-inspector-relations { display: grid; gap: 8px; }\n.zenfg-inspector-inspector-relations section {\n\tdisplay: grid;\n\tgap: 6px;\n\tpadding: 8px;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tborder-radius: 5px;\n\tbackground: var(--fgd-surface);\n}\n.zenfg-inspector-inspector-relations h3 {\n\tmargin: 0 0 2px;\n\tcolor: var(--fgd-muted);\n\tfont: 700 10px/1.3 var(--fgd-font-ui);\n\tletter-spacing: 0.055em;\n\ttext-transform: uppercase;\n}\n.zenfg-inspector-inspector-relations .zenfg-inspector-relation-button {\n\tfont: 11px/1.5 var(--fgd-font-mono);\n\toverflow-wrap: anywhere;\n\twhite-space: normal;\n}\n.zenfg-inspector-relation-entry { display: grid; justify-items: start; gap: 2px; }\n.zenfg-inspector-relation-entry > span { font: 11px/1.5 var(--fgd-font-mono); overflow-wrap: anywhere; }\n.zenfg-inspector-inspector .zenfg-inspector-raw-detail {\n\tmin-width: 100%;\n\tmargin: 0;\n\toverflow: auto;\n\tcolor: var(--fgd-text-secondary);\n\tfont: 11px/1.55 var(--fgd-font-mono);\n\twhite-space: pre;\n}\n\n/* Memory */\n.zenfg-inspector-memory-view {\n\tdisplay: grid;\n\tgrid-template-rows: auto minmax(0, 1fr);\n}\n.zenfg-inspector-memory-summary {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(4, minmax(0, 1fr));\n\tgap: 6px;\n\tpadding: 6px;\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n\tbackground: var(--fgd-panel);\n}\n.zenfg-inspector-memory-summary > div {\n\tdisplay: grid;\n\tgap: 3px;\n\tmin-width: 0;\n\tpadding: 6px 8px;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tborder-radius: 5px;\n\tbackground: var(--fgd-surface);\n}\n.zenfg-inspector-memory-summary span { color: var(--fgd-muted); font: 10px/1.3 var(--fgd-font-ui); }\n.zenfg-inspector-memory-summary strong {\n\toverflow: hidden;\n\tfont: 600 11px/1.35 var(--fgd-font-mono);\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.zenfg-inspector-memory-scroller { min-height: 0; overflow: auto; }\n.zenfg-inspector-memory-timeline {\n\tdisplay: grid;\n\tmin-width: 760px;\n\tpadding: 8px;\n\tfont: 11px/1.4 var(--fgd-font-mono);\n}\n.zenfg-inspector-memory-axis,\n.zenfg-inspector-memory-resource {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(150px, 0.9fr) 72px minmax(320px, 2.4fr) 82px;\n\tgap: 10px;\n\talign-items: center;\n\tmin-height: 30px;\n}\n.zenfg-inspector-memory-axis {\n\tposition: sticky;\n\tz-index: 2;\n\ttop: 0;\n\tpadding: 0 8px 6px;\n\tcolor: var(--fgd-muted);\n\tbackground: var(--fgd-canvas);\n\tfont: 10px/1.3 var(--fgd-font-ui);\n}\n.zenfg-inspector-memory-axis-track,\n.zenfg-inspector-memory-track { position: relative; height: 16px; }\n.zenfg-inspector-memory-axis-track { border-bottom: 1px solid var(--fgd-border-strong); }\n.zenfg-inspector-memory-axis-track > span {\n\tposition: absolute;\n\tbottom: -1px;\n\tpadding-bottom: 5px;\n\tborder-left: 1px solid var(--fgd-border-strong);\n\tfont: 10px/1 var(--fgd-font-mono);\n\ttransform: translateX(-1px);\n}\n.zenfg-inspector-memory-allocation {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 12px;\n\tmargin-top: 6px;\n\tpadding: 7px 8px;\n\tborder-top: 1px solid var(--fgd-border-subtle);\n\tborder-bottom: 1px solid var(--fgd-border-subtle);\n\tbackground: var(--fgd-surface);\n}\n.zenfg-inspector-memory-allocation > span { color: var(--fgd-muted); font: 10px/1.35 var(--fgd-font-mono); }\n.zenfg-inspector-memory-allocation.muted { color: var(--fgd-muted); font-family: var(--fgd-font-ui); }\n.zenfg-inspector-memory-resource { padding: 0 8px; border-bottom: 1px solid var(--fgd-border-subtle); }\n.zenfg-inspector-memory-resource.selected,\n.zenfg-inspector-memory-allocation.selected { box-shadow: inset 2px 0 var(--fgd-accent); }\n.zenfg-inspector-memory-bar {\n\tposition: absolute;\n\ttop: 4px;\n\theight: 8px;\n\tmin-width: 2px;\n\tborder-radius: 4px;\n\tbackground: color-mix(in srgb, ${GRAPH_VISUAL_THEME.texture.stroke} 76%, transparent);\n\tbox-shadow: 0 0 0 1px color-mix(in srgb, ${GRAPH_VISUAL_THEME.texture.stroke} 36%, transparent);\n}\n.zenfg-inspector-memory-bar.buffer {\n\tbackground: color-mix(in srgb, ${GRAPH_VISUAL_THEME.buffer.stroke} 72%, transparent);\n\tbox-shadow: 0 0 0 1px color-mix(in srgb, ${GRAPH_VISUAL_THEME.buffer.stroke} 34%, transparent);\n}\n.zenfg-inspector-memory-bar.empty { display: none; }\n\n/* Diagnostics */\n.zenfg-inspector-diagnostics-scroller { width: 100%; height: 100%; overflow: auto; }\n.zenfg-inspector-diagnostics-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n\tgap: 8px;\n\tpadding: 8px;\n}\n.zenfg-inspector-diagnostic-card {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 0;\n\tmin-height: 164px;\n\toverflow: hidden;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tborder-radius: 6px;\n\tbackground: var(--fgd-surface);\n}\n.zenfg-inspector-diagnostic-card > h2 {\n\tmargin: 0;\n\tpadding: 9px 10px 3px;\n\tcolor: var(--fgd-text-secondary);\n\tfont: 650 12px/1.35 var(--fgd-font-ui);\n}\n.zenfg-inspector-diagnostic-card > p {\n\tmargin: 0;\n\tpadding: 0 10px 8px;\n\tcolor: var(--fgd-muted);\n\tfont: 11px/1.5 var(--fgd-font-ui);\n}\n.zenfg-inspector-diagnostic-card .zenfg-inspector-table-scroller { flex: 1 1 auto; max-height: 280px; }\n.zenfg-inspector-diagnostic-card .zenfg-inspector-workbench-table { min-width: 100%; table-layout: fixed; }\n.zenfg-inspector-diagnostic-card .zenfg-inspector-workbench-table td {\n\toverflow-wrap: anywhere;\n\twhite-space: normal;\n}\n.zenfg-inspector-diagnostic-list { display: grid; gap: 2px; padding: 6px; overflow: auto; }\n.zenfg-inspector-diagnostic-list .zenfg-inspector-relation-button {\n\tpadding: 6px 8px;\n\tborder-radius: 4px;\n\tcolor: var(--fgd-text-secondary);\n\tfont: 11px/1.45 var(--fgd-font-mono);\n}\n.zenfg-inspector-diagnostic-list .zenfg-inspector-relation-button:hover {\n\tbackground: rgba(180, 190, 202, 0.05);\n\ttext-decoration: none;\n}\n.zenfg-inspector-diagnostic-list .selected { box-shadow: inset 2px 0 var(--fgd-accent); }\n\n/* Responsive */\n@container zenfg-inspector (max-width: 960px) {\n\t.zenfg-inspector-workspace.inspector-open { grid-template-columns: minmax(0, 1fr); }\n\t.zenfg-inspector-workspace.inspector-open::after {\n\t\tposition: absolute;\n\t\tz-index: 10;\n\t\tinset: 0;\n\t\tbackground: rgba(3, 7, 12, 0.38);\n\t\tcontent: '';\n\t\tpointer-events: none;\n\t}\n\t.zenfg-inspector-inspector {\n\t\tposition: absolute;\n\t\tz-index: 20;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\twidth: min(380px, calc(100% - 24px));\n\t\tbox-shadow: -18px 0 42px rgba(0, 0, 0, 0.42);\n\t}\n\t.zenfg-inspector-graph-toolbar {\n\t\tgrid-template-columns: minmax(0, 1fr) auto;\n\t\tgap: 6px 8px;\n\t}\n\t.zenfg-inspector-graph-legend {\n\t\tgrid-column: 1 / -1;\n\t\tgrid-row: 2;\n\t\tpadding-top: 6px;\n\t\tborder-top: 1px solid var(--fgd-border-subtle);\n\t}\n\t.zenfg-inspector-graph-action-controls { justify-self: end; }\n}\n\n@container zenfg-inspector (max-width: 840px) {\n\t.zenfg-inspector-workbench-command-bar {\n\t\tgrid-template-columns: minmax(0, 1fr) auto;\n\t}\n\t.zenfg-inspector-brand { grid-column: 1; grid-row: 1; min-height: 36px; display: flex; align-items: center; }\n\t.zenfg-inspector-brand::after { display: none; }\n\t.zenfg-inspector-workbench-actions { grid-column: 2; grid-row: 1; }\n\t.zenfg-inspector-workbench-tabs { grid-column: 1 / -1; grid-row: 2; }\n\t.zenfg-inspector-workbench-command-bar.branding-hidden .zenfg-inspector-workbench-tabs {\n\t\tgrid-column: 1;\n\t\tgrid-row: 1;\n\t}\n\t.zenfg-inspector-diagnostics-grid { grid-template-columns: minmax(0, 1fr); }\n}\n\n@container zenfg-inspector (max-width: 720px) {\n\t.zenfg-inspector-body { padding: 8px; }\n\t.zenfg-inspector-overview-view { padding: 8px; }\n\t.zenfg-inspector-capture-summary > section { padding: 10px; }\n\t.zenfg-inspector-workbench-actions { padding-left: 6px; }\n\t.zenfg-inspector-command-status { max-width: 104px; }\n\t.zenfg-inspector-workbench-tabs > button { flex: 0 0 auto; padding-inline: 8px; }\n\t.zenfg-inspector-memory-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n\t.zenfg-inspector-view-toolbar input { flex-basis: 100%; }\n\t.zenfg-inspector-graph-toolbar { display: flex; flex-wrap: wrap; }\n\t.zenfg-inspector-graph-legend { order: 3; flex-basis: 100%; }\n\t.zenfg-inspector-graph-action-controls { margin-left: auto; }\n\t.zenfg-inspector-graph-view .zenfg-inspector-graph { height: auto; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.zenfg-inspector *,\n\t.zenfg-inspector *::before,\n\t.zenfg-inspector *::after {\n\t\tscroll-behavior: auto !important;\n\t\ttransition-duration: 0.01ms !important;\n\t\tanimation-duration: 0.01ms !important;\n\t\tanimation-iteration-count: 1 !important;\n\t}\n}\n`;\n\n/**\n * Installs the inspector's shared stylesheet in the current document once.\n *\n * @remarks This is safe to call repeatedly and is a no-op during server-side\n * rendering. `FrameGraphInspector` calls it automatically.\n */\nexport function ensureFrameGraphInspectorStyles(): void {\n\tif (typeof document === 'undefined' || document.getElementById(STYLE_ELEMENT_ID)) {\n\t\treturn;\n\t}\n\n\tconst style = document.createElement('style');\n\tstyle.id = STYLE_ELEMENT_ID;\n\tstyle.textContent = FRAME_GRAPH_DEBUG_PANEL_CSS;\n\tdocument.head.appendChild(style);\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenfg/inspector",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.3",
   "description": "Embeddable Inspector for ZenFG Snapshot files and live captures",
   "type": "module",
   "sideEffects": false,
@@ -8,7 +8,7 @@
   "types": "./dist/index.d.ts",
   "files": ["dist", "src", "README.md", "LICENSE"],
   "dependencies": {
-    "@zenfg/snapshot": "0.1.0-beta.2",
+    "@zenfg/snapshot": "0.1.0-beta.3",
     "cytoscape": "^3.34.1",
     "elkjs": "^0.12.0"
   },

package/src/FrameGraphInspector.ts

@@ -78,8 +78,6 @@ export class FrameGraphInspector {
 	private readonly body = document.createElement('div');
 	private readonly content = document.createElement('div');
 	private readonly dropOverlay = document.createElement('div');
-	private readonly passesGraphModeButton: HTMLButtonElement;
-	private readonly resourcesGraphModeButton: HTMLButtonElement;
 	private readonly groupsButton: HTMLButtonElement;
 	private readonly collapseGroupsButton: HTMLButtonElement;
 	private readonly graphView: GraphViewState;
@@ -161,7 +159,6 @@ export class FrameGraphInspector {
 			toolbar: document.createElement('div'),
 			legend: graphLegend,
 			layoutElementBudget: normalizeLimit(options.maxGraphElements, DEFAULT_MAX_GRAPH_ELEMENTS, 'maxGraphElements'),
-			graphMode: 'passes',
 			groupsEnabled: true,
 			expandedGroupPaths: new Set(),
 			fitOnNextRender: true,
@@ -171,18 +168,9 @@ export class FrameGraphInspector {
 		this.graphView.toolbar.setAttribute('role', 'toolbar');
 		this.graphView.toolbar.setAttribute('aria-label', 'Frame graph view controls');
 
-		this.passesGraphModeButton = createToolbarButton('Pass dependency', 'Show pass dependency graph', () => this.setGraphMode('passes'));
-		this.resourcesGraphModeButton = createToolbarButton('Resource access', 'Show resource access graph', () => this.setGraphMode('resources'));
 		this.groupsButton = createToolbarButton('Groups', 'Toggle diagnostic group projection', () => this.toggleGroups());
 		this.collapseGroupsButton = createToolbarButton('Collapse All', 'Collapse every diagnostic group', () => this.collapseAllGroups());
-		this.passesGraphModeButton.classList.add('zenfg-inspector-mode-button');
-		this.resourcesGraphModeButton.classList.add('zenfg-inspector-mode-button');
-
-		const modeControls = document.createElement('div');
-		modeControls.className = 'zenfg-inspector-graph-mode-controls';
-		modeControls.setAttribute('role', 'group');
-		modeControls.setAttribute('aria-label', 'Graph mode');
-		modeControls.append(this.passesGraphModeButton, this.resourcesGraphModeButton);
+
 		const actionControls = document.createElement('div');
 		actionControls.className = 'zenfg-inspector-graph-action-controls';
 		actionControls.append(
@@ -190,7 +178,7 @@ export class FrameGraphInspector {
 			this.collapseGroupsButton,
 			createGraphIconButton('fit', 'Fit graph to view', () => fitGraph(this.graphView)),
 		);
-		this.graphView.toolbar.append(modeControls, graphLegend, actionControls);
+		this.graphView.toolbar.append(graphLegend, actionControls);
 
 		const callbacks: WorkbenchCallbacks = {
 			onSelect: (selection) => this.handleSelect(selection),
@@ -216,7 +204,7 @@ export class FrameGraphInspector {
 		this.dom.addEventListener('dragend', this.handleDragEnd);
 		this.dom.addEventListener('drop', this.handleDrop);
 		this.updateCaptureActions();
-		this.updateGraphModeButtonState();
+		this.updateGraphControls();
 		this.showEmptyState();
 		queueMicrotask(() => this.maybeAutoCapture());
 	}
@@ -282,7 +270,7 @@ export class FrameGraphInspector {
 	}
 
 	/**
-	 * Validates and synchronously displays a programmatic Snapshot 1.0 value.
+	 * Validates and synchronously displays a programmatic Snapshot 1.1 value.
 	 *
 	 * @throws {@link FrameGraphSnapshotValidationError} if `snapshot` is invalid.
 	 */
@@ -424,7 +412,7 @@ export class FrameGraphInspector {
 		}
 		this.workbench.setSnapshot(viewModel, this.selected);
 		this.updateCaptureActions();
-		this.updateGraphModeButtonState();
+		this.updateGraphControls();
 	}
 
 	/**
@@ -482,49 +470,39 @@ export class FrameGraphInspector {
 		this.workbench.setHovered(selection);
 	}
 
-	private setGraphMode(mode: GraphViewState['graphMode']): void {
-		if (this.graphView.graphMode === mode) return;
-		this.graphView.graphMode = mode;
-		this.graphView.fitOnNextRender = true;
-		this.updateGraphModeButtonState();
-		this.workbench.refreshGraphStructure();
-	}
-
-	private updateGraphModeButtonState(): void {
-		const passesActive = this.graphView.graphMode === 'passes';
+	private updateGraphControls(): void {
 		const hasGroups = (this.viewModel?.debugGroups.length ?? 0) > 0;
-		this.passesGraphModeButton.classList.toggle('active', passesActive);
-		this.resourcesGraphModeButton.classList.toggle('active', !passesActive);
-		this.passesGraphModeButton.setAttribute('aria-pressed', passesActive ? 'true' : 'false');
-		this.resourcesGraphModeButton.setAttribute('aria-pressed', passesActive ? 'false' : 'true');
-		this.groupsButton.disabled = !passesActive || !hasGroups;
-		this.groupsButton.classList.toggle('active', passesActive && hasGroups && this.graphView.groupsEnabled);
-		this.groupsButton.setAttribute('aria-pressed', passesActive && hasGroups && this.graphView.groupsEnabled ? 'true' : 'false');
+		this.groupsButton.disabled = !hasGroups;
+		this.groupsButton.classList.toggle('active', hasGroups && this.graphView.groupsEnabled);
+		this.groupsButton.setAttribute('aria-pressed', hasGroups && this.graphView.groupsEnabled ? 'true' : 'false');
 		const hasExpanded = this.viewModel?.debugGroups.some((group) => this.graphView.expandedGroupPaths.has(group.pathKey)) ?? false;
-		this.collapseGroupsButton.disabled = !passesActive || !hasGroups || !this.graphView.groupsEnabled || !hasExpanded;
+		this.collapseGroupsButton.disabled = !hasGroups || !this.graphView.groupsEnabled || !hasExpanded;
 	}
 
 	private toggleGroups(): void {
-		if (this.graphView.graphMode !== 'passes' || !this.viewModel?.debugGroups.length) return;
+		if (!this.viewModel?.debugGroups.length) return;
+		this.handleHover(undefined);
 		this.graphView.groupsEnabled = !this.graphView.groupsEnabled;
 		this.graphView.fitOnNextRender = true;
-		this.updateGraphModeButtonState();
+		this.updateGraphControls();
 		this.workbench.refreshGraphStructure();
 	}
 
 	private toggleGroup(pathKey: string): void {
+		this.handleHover(undefined);
 		if (this.graphView.expandedGroupPaths.has(pathKey)) this.graphView.expandedGroupPaths.delete(pathKey);
 		else this.graphView.expandedGroupPaths.add(pathKey);
 		this.graphView.anchorElementIdOnNextRender = graphGroupElementId(pathKey);
-		this.updateGraphModeButtonState();
+		this.updateGraphControls();
 		this.workbench.refreshGraphStructure();
 	}
 
 	private collapseAllGroups(): void {
 		if (this.graphView.expandedGroupPaths.size === 0) return;
+		this.handleHover(undefined);
 		this.graphView.expandedGroupPaths.clear();
 		this.graphView.fitOnNextRender = true;
-		this.updateGraphModeButtonState();
+		this.updateGraphControls();
 		this.workbench.refreshGraphStructure();
 	}
 

package/src/debugCaptureModel.ts

@@ -6,7 +6,7 @@ import type {
 	FrameGraphSnapshotNodeKind,
 	FrameGraphSnapshotResourceKind,
 	FrameGraphSnapshotResourceOrigin,
-	FrameGraphSnapshotRootReason,
+	FrameGraphSnapshotRoot,
 	FrameGraphSnapshotSegment,
 	FrameGraphSnapshotTextureRegion,
 	FrameGraphSnapshotWriteContents,
@@ -65,6 +65,7 @@ export type FrameGraphDebugNode = {
 
 export type FrameGraphDebugResource = FrameGraphDebugResourceRef & {
 	readonly origin: FrameGraphSnapshotResourceOrigin;
+	readonly initialContents?: 'defined' | 'undefined';
 	readonly debugGroupId?: string;
 	readonly usageFlags: readonly string[];
     readonly lifetime?: { readonly firstUse: number; readonly lastUse: number };
@@ -80,12 +81,19 @@ export type FrameGraphDebugEdge = {
     readonly kind: 'value' | 'ordering';
 };
 
-export type FrameGraphDebugRoot = {
-	readonly reason: FrameGraphSnapshotRootReason;
-	readonly nodeId?: string;
+export type FrameGraphDebugRoot = FrameGraphSnapshotRoot & {
+	readonly key: string;
     readonly resource?: FrameGraphDebugResourceRef;
 };
 
+/** Semantic identity within one recording, independent of root array order. */
+export function rootKey(root: FrameGraphSnapshotRoot): string {
+	return root.reason === 'side-effect' ? JSON.stringify([root.reason, root.nodeId])
+		: JSON.stringify([root.reason, root.resourceId, root.range?.kind === 'buffer'
+			? ['buffer', root.range.offset, root.range.size]
+			: root.range?.regions.map((r) => [r.baseMipLevel, r.mipLevelCount, r.aspect, r.baseArrayLayer, r.arrayLayerCount, r.baseDepthSlice, r.depthSliceCount]) ?? null]);
+}
+
 export type FrameGraphDebugCulledNode = {
     readonly node: Omit<FrameGraphDebugNode, 'order'>;
     readonly reason: string;
@@ -105,6 +113,7 @@ export type FrameGraphDebugGroupSummary = {
 	readonly nodeKindCounts: Readonly<Partial<Record<FrameGraphSnapshotNodeKind, number>>>;
 	readonly inputResources: readonly FrameGraphDebugResourceRef[];
 	readonly outputResources: readonly FrameGraphDebugResourceRef[];
+	readonly outputRoots: readonly FrameGraphDebugRoot[];
 	readonly registeredTransientResourceCount: number;
 	readonly accessedTransientResourceCount: number;
 	readonly physicalAllocationCount: number;
@@ -277,6 +286,7 @@ export function createDebugViewModel(
 		kind: resource.kind,
 		label: resource.label,
 		origin: resource.origin,
+		initialContents: resource.initialContents,
 		debugGroupId: resource.groupId,
 		usageFlags: resource.usageFlags,
 		lifetime: resource.lifetime,
@@ -289,8 +299,8 @@ export function createDebugViewModel(
 		resource: resourceRef(dependency.resourceId),
 	}));
 	const roots: FrameGraphDebugRoot[] = compilation.roots.map((root) => ({
-		reason: root.reason,
-		nodeId: root.nodeId,
+		...root,
+		key: rootKey(root),
 		resource: root.resourceId === undefined ? undefined : resourceRef(root.resourceId),
 	}));
 	const culledNodes: FrameGraphDebugCulledNode[] = compilation.nodes
@@ -492,6 +502,23 @@ function validateDebugGroupReferences(
 	}
 }
 
+/** Declaration boundaries are topological, not per-range initial-value provenance. */
+export function declarationEntrances(
+	nodes: readonly FrameGraphDebugNode[],
+	accesses: readonly FrameGraphDebugAccessEdge[],
+	edges: readonly FrameGraphDebugEdge[],
+): readonly FrameGraphDebugAccessEdge[] {
+	const retained = new Set(nodes.map((node) => node.id));
+	const incoming = new Set(edges.map((edge) => JSON.stringify([edge.resource.id, edge.toNodeId])));
+	const seen = new Set<string>();
+	return accesses.filter((access) => {
+		const key = JSON.stringify([access.resource.id, access.nodeId]);
+		if (!retained.has(access.nodeId) || incoming.has(key) || seen.has(key)) return false;
+		seen.add(key);
+		return true;
+	});
+}
+
 function buildDebugGroupSummaries(input: {
 	readonly groups: readonly NormalizedDebugGroup[];
 	readonly nodes: readonly FrameGraphDebugNode[];
@@ -504,6 +531,7 @@ function buildDebugGroupSummaries(input: {
 }): FrameGraphDebugGroup[] {
 	const groupsById = new Map(input.groups.map((group) => [group.id, group]));
 	const resourcesById = new Map(input.resources.map((resource) => [resource.id, resource]));
+	const entrances = declarationEntrances(input.nodes, input.accessEdges, input.edges);
 	const isInGroup = (candidateId: string | undefined, groupId: string) => (
 		candidateId !== undefined && groupsById.get(candidateId)?.ancestorIds.includes(groupId) === true
 	);
@@ -526,23 +554,19 @@ function buildDebugGroupSummaries(input: {
 			if (!fromInside && toInside) inputIds.add(edge.resource.id);
 			if (fromInside && !toInside) outputIds.add(edge.resource.id);
 		}
-		for (const access of input.accessEdges) {
-			if (!retainedIds.has(access.nodeId)) continue;
-			const resource = resourcesById.get(access.resource.id);
-			const hasRetainedValueProducer = input.edges.some((edge) => (
-				edge.toNodeId === access.nodeId
-				&& edge.resource.id === access.resource.id
-				&& edge.kind === 'value'
-			));
-			if (access.mode === 'read' && resource && resource.origin !== 'transient' && !hasRetainedValueProducer) {
-				inputIds.add(resource.id);
-			}
+		for (const access of entrances) {
+			const fromInside = isInGroup(resourcesById.get(access.resource.id)?.debugGroupId, group.id);
+			const toInside = retainedIds.has(access.nodeId);
+			if (!fromInside && toInside) inputIds.add(access.resource.id);
+			if (fromInside && !toInside) outputIds.add(access.resource.id);
 		}
+		const outputRoots: FrameGraphDebugRoot[] = [];
 		for (const root of input.roots) {
 			if (!root.resource) continue;
-			if (input.accessEdges.some((access) => retainedIds.has(access.nodeId)
-				&& access.resource.id === root.resource!.id && access.mode === 'write')) {
+			if (root.resolution?.producerNodeIds.some((id) => retainedIds.has(id))
+				|| root.resolution?.usesInitialContents && isInGroup(resourcesById.get(root.resource.id)?.debugGroupId, group.id)) {
 				outputIds.add(root.resource.id);
+				outputRoots.push(root);
 			}
 		}
 
@@ -569,6 +593,7 @@ function buildDebugGroupSummaries(input: {
 				nodeKindCounts,
 				inputResources: [...inputIds].map((id) => resourcesById.get(id)!).filter(Boolean),
 				outputResources: [...outputIds].map((id) => resourcesById.get(id)!).filter(Boolean),
+				outputRoots,
 				registeredTransientResourceCount: registeredTransient.length,
 				accessedTransientResourceCount: accessedTransientIds.size,
 				physicalAllocationCount: allocationIds.size,

package/src/panelCytoscapeGraphRenderer.ts

@@ -64,7 +64,7 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
     private anchorTargetContentKey: string | undefined;
     private failedSceneContentKey: string | undefined;
     private overview = false;
-    private lastTap: { readonly id: string; readonly at: number } | undefined;
+    private pendingGroupTap: { readonly id: string; readonly timer: ReturnType<typeof setTimeout> } | undefined;
 
     constructor(
         private readonly host: HTMLElement,
@@ -75,6 +75,8 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
         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.status = environment.createElement('div');
         this.status.className = 'zenfg-inspector-graph-status';
         this.status.hidden = true;
@@ -93,6 +95,14 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
 
     render(request: GraphRenderRequest): void {
         if (this.destroyed) return;
+        if (this.latestRequest?.scene !== request.scene
+            || (this.latestRequest?.selected && selectionKey(this.latestRequest.selected)) !== (request.selected && selectionKey(request.selected))) {
+            this.cancelGroupTap();
+        }
+        if ((!request.hovered && !this.tooltip.hidden) || this.latestRequest?.scene.contentKey !== request.scene.contentKey) {
+            this.hideTooltip();
+            this.core?.elements().removeClass('semantic-hover');
+        }
         this.latestRequest = request;
         if (request.fit) {
             this.fitTargetContentKey = request.scene.contentKey;
@@ -144,6 +154,7 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
 
     relayout(): void {
         if (!this.latestRequest || this.destroyed) return;
+        this.cancelGroupTap();
         this.failedSceneContentKey = undefined;
         this.forceRelayout = true;
         this.fitTargetContentKey = this.latestRequest.scene.contentKey;
@@ -157,6 +168,7 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
     destroy(): void {
         if (this.destroyed) return;
         this.destroyed = true;
+        this.cancelGroupTap();
         this.requestVersion++;
         this.resizeSubscription?.disconnect();
         this.hideTooltip();
@@ -319,19 +331,24 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
             if (!request) return;
             const id = event.target.id() as GraphSceneElementId;
             const selection = request.scene.interaction.selectionByElementId.get(id);
-            if (selection) request.onSelect(selection);
-            const now = performance.now();
-            if (this.lastTap?.id === id && now - this.lastTap.at <= 350 && selection?.kind === 'group') {
+            const doubleTap = this.pendingGroupTap?.id === id;
+            this.cancelGroupTap();
+            if (selection?.kind !== 'group') {
+                if (selection) request.onSelect(selection);
+            } else if (doubleTap) {
                 request.onToggleGroup(selection.pathKey);
-                this.lastTap = undefined;
             } else {
-                this.lastTap = { id, at: now };
+                // Defer group selection so expansion does not replace the inspected resource.
+                this.pendingGroupTap = { id, timer: setTimeout(() => {
+                    this.pendingGroupTap = undefined;
+                    this.interactiveRequest()?.onSelect(selection);
+                }, 350) };
             }
         };
         core.on('tap', 'node', selectElement);
         core.on('tap', 'edge', selectElement);
         core.on('tap', (event) => {
-            if (event.target === core) this.lastTap = undefined;
+            if (event.target === core) this.cancelGroupTap();
         });
         const hoverElement = (event: cytoscape.EventObject) => {
             const request = this.interactiveRequest();
@@ -351,10 +368,7 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
         const moveTooltip = (event: cytoscape.EventObject) => this.positionTooltip(event.renderedPosition);
         core.on('mousemove', 'node', moveTooltip);
         core.on('mousemove', 'edge', moveTooltip);
-        const clearHover = () => {
-            this.hideTooltip();
-            this.latestRequest?.onHover(undefined);
-        };
+        const clearHover = () => this.clearHover();
         core.on('mouseout', 'node', clearHover);
         core.on('mouseout', 'edge', clearHover);
         core.on('zoom', () => this.updateSemanticZoom());
@@ -371,7 +385,7 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
         core.batch(() => {
             core.elements().removeClass('semantic-selected semantic-hover');
             if (request.hovered) {
-                for (const id of request.scene.interaction.relatedElementIdsBySelection.get(selectionKey(request.hovered)) ?? []) {
+                for (const id of request.scene.interaction.hoverElementIdsBySelection.get(selectionKey(request.hovered)) ?? []) {
                     core.getElementById(id).addClass('semantic-hover');
                 }
             }
@@ -434,7 +448,16 @@ export class CytoscapeGraphRenderer implements GraphRenderer {
     private hideTooltip(): void {
         this.tooltip.hidden = true;
         this.tooltip.textContent = '';
-        this.lastTap = undefined;
+    }
+
+    private cancelGroupTap(): void {
+        if (this.pendingGroupTap) clearTimeout(this.pendingGroupTap.timer);
+        this.pendingGroupTap = undefined;
+    }
+
+    private clearHover(): void {
+        this.hideTooltip();
+        this.latestRequest?.onHover(undefined);
     }
 
     private showStatus(kind: 'loading' | 'layout' | 'empty' | 'error', message: string, retry = false): void {
@@ -544,8 +567,8 @@ function nodeRenderableData(node: GraphSceneNode): Record<string, unknown> {
         : 160;
     return {
         kind: node.kind,
-        passKind: node.kind === 'pass' || node.kind === 'culled-pass' ? node.passKind : undefined,
-        resourceKind: node.kind === 'resource' ? node.resourceKind : undefined,
+        passKind: node.kind === 'pass' ? node.passKind : undefined,
+        resourceKind: (node.kind === 'resource' || node.kind === 'root') ? node.resourceKind : undefined,
         collapsed: node.kind === 'group' && node.collapsed ? 1 : 0,
         hasCulled: node.kind === 'group' && node.culledNodeCount > 0 ? 1 : 0,
         depthBand: node.kind === 'group' ? node.depthBand : undefined,
@@ -575,9 +598,6 @@ function edgeRenderableData(edge: GraphSceneEdge): Record<string, unknown> {
     const detailLabel = graphEdgeDisplayLabel(edge);
     return {
         kind: edge.kind,
-        dependencyKind: edge.kind === 'dependency' ? edge.dependencyKind : undefined,
-        accessMode: edge.kind === 'access' ? edge.accessMode : undefined,
-        dashed: edge.kind === 'access' && edge.dashed ? 1 : 0,
         detailLabel,
         displayLabel: detailLabel,
         tooltip: edge.title,

package/src/panelDiagnosticsView.ts

@@ -71,8 +71,8 @@ export class DiagnosticsView {
 		const section = this.createSection('Retention roots', 'Roots explain why graph work survived dead-node elimination.');
 		const list = document.createElement('div');
 		list.className = 'zenfg-inspector-diagnostic-list';
-		snapshot.roots.forEach((root, index) => {
-			const selection: Selection = { kind: 'root', index };
+		snapshot.roots.forEach((root) => {
+			const selection: Selection = { kind: 'root', key: root.key };
 			const button = createRelationButton(
 				`${root.reason} · ${root.resource ? labelResource(root.resource) : root.nodeId === undefined ? '-' : `node-${root.nodeId}`}`,
 				selection,
@@ -149,7 +149,7 @@ export class DiagnosticsView {
 			row.append(
 				createSelectionCell(labelNode(node), selection, this.callbacks),
 				createKindCell(node.gpuDurationMicros === undefined ? 'not-timed' : 'timed', node.gpuDurationMicros === undefined ? 'Not timed' : 'Timed'),
-				createCell(node.gpuDurationMicros === undefined ? '-' : (node.gpuDurationMicros / 1000).toFixed(3), { column: 'numeric' }),
+				createCell(node.gpuDurationMicros === undefined ? '-' : (node.gpuDurationMicros / 1000).toFixed(3), { column: 'numeric' }),
 			);
 			table.body.appendChild(row);
 		}