@zenfg/inspector 0.1.0-beta.1

package/dist/styles.js.map

@@ -0,0 +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\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\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"]}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@zenfg/inspector",
+  "version": "0.1.0-beta.1",
+  "description": "Embeddable Inspector for ZenFG Snapshot files and live captures",
+  "type": "module",
+  "sideEffects": false,
+  "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" } },
+  "types": "./dist/index.d.ts",
+  "files": ["dist", "src", "README.md", "LICENSE"],
+  "dependencies": {
+    "@zenfg/snapshot": "0.1.0-beta.1",
+    "cytoscape": "^3.34.1",
+    "elkjs": "^0.12.0"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-package.mjs",
+    "build:watch": "node ../../scripts/build-package.mjs --watch",
+    "prepack": "npm run build --workspace @zenfg/snapshot && npm run build",
+    "pack:dry-run": "npm pack --dry-run --json",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "node ../../scripts/run-tests.mjs packages/inspector/tests"
+  },
+  "publishConfig": { "access": "public", "registry": "https://registry.npmjs.org/" },
+  "license": "MIT",
+  "repository": { "type": "git", "url": "git+https://github.com/uinosoft/zenfg.git", "directory": "packages/inspector" },
+  "homepage": "https://github.com/uinosoft/zenfg/tree/main/packages/inspector",
+  "bugs": { "url": "https://github.com/uinosoft/zenfg/issues" },
+  "keywords": ["framegraph", "inspector", "webgpu", "wgpu", "diagnostics"]
+}