@zenfg/inspector 0.1.0-beta.3 → 0.1.0

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: 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"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,gBAAgB,GAAG,8BAA8B,CAAC;AAGxD,MAAM,2BAA2B,GAAG;;;GAGjC,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA++BlB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,UAAU,+BAA+B;IAC9C,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,CAAC;QAClF,OAAO;IACR,CAAC;IAED,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,gBAAgB,CAAC;IAC5B,KAAK,CAAC,WAAW,GAAG,2BAA2B,GAAG,mBAAmB,GAAG,cAAc,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;IAC7H,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAClC,CAAC","sourcesContent":["import { themeDefaultsCss } from './themeDefinitions.ts';\nimport { PANEL_WORKBENCH_CSS } from './panelWorkbenchStyles.ts';\nimport { PANEL_LIST_CSS } from './panelListStyles.ts';\nimport { PANEL_DETAIL_CSS } from './panelDetailStyles.ts';\nimport { PANEL_MEMORY_CSS } from './panelMemoryStyles.ts';\n\nconst STYLE_ELEMENT_ID = 'zenfg-inspector-panel-styles';\n\n\nconst FRAME_GRAPH_DEBUG_PANEL_CSS = `\n/* Tokens and workbench root */\n.zenfg-inspector {\n\t${themeDefaultsCss}\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\tline-height: 1.45;\n\tcolor-scheme: var(--zfgi-color-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(--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(--fgd-radius-md);\n\tcolor: var(--fgd-accent);\n\tbackground: color-mix(in srgb, var(--fgd-canvas) 90%, transparent);\n\tfont: 600 var(--fgd-font-size)/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: var(--fgd-font-size-small); }\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: var(--fgd-font-size-small)/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: var(--fgd-border) transparent;\n}\n\n/* Common control states apply consistently across all workbench views. */\n.zenfg-inspector :is(button, input, select, textarea) { font-family: var(--fgd-font-ui); }\n.zenfg-inspector :is(button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--fgd-accent); outline-offset: 2px; }\n/* The modal dismiss button must retain its translucent scrim while pressed. */\n.zenfg-inspector button:active:not(:disabled):not(.zenfg-inspector-detail-backdrop) { background: var(--fgd-accent-soft); }\n.zenfg-inspector :is(button, input, select):disabled { cursor: default; opacity: .5; }\n.zenfg-inspector ::selection { color: var(--fgd-text); background: var(--fgd-accent-soft); }\n/* Workbench and summary */\n.zenfg-inspector-workbench {\n\tgrid-template-rows: auto minmax(0, 1fr);\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\talign-content: start;\n\tmin-width: 0;\n\tbackground: transparent;\n}\n\n.zenfg-inspector-capture-summary > section {\n\tmin-width: 0;\n\tborder: 1px solid var(--fgd-border-subtle);\n\tborder-radius: var(--fgd-radius-sm);\n}\n\n.zenfg-inspector-capture-summary h2 {\n\tmargin: 0 0 5px;\n\tcolor: var(--fgd-text-secondary);\n\tfont-weight: 700;\n\tline-height: 1.2;\n}\n\n.zenfg-inspector-capture-summary section > div {\n\tdisplay: grid;\n\tgap: var(--fgd-space-2);\n\tmin-width: 0;\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 var(--fgd-font-size-small)/1.5 var(--fgd-font-mono);\n\ttext-align: right;\n\ttext-overflow: ellipsis;\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: var(--fgd-control-height);\n\tpadding: 0 var(--fgd-space-3) 0 var(--fgd-space-1);\n\toverflow: hidden;\n\tcolor: var(--fgd-text);\n\tfont: 700 var(--fgd-font-size-small)/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\talign-self: stretch;\n\talign-items: stretch;\n\toverflow-x: auto;\n\tborder-bottom: 0;\n}\n\n.zenfg-inspector-workbench-tabs > button {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.zenfg-inspector-workbench-tabs > button,\n.zenfg-inspector-subtabs > button,\n.zenfg-inspector-inspector-tabs > button {\n\tmin-height: var(--fgd-control-height);\n\tpadding: 6px 10px;\n\tborder: 0;\n\tborder-bottom: 2px solid transparent;\n\tcolor: var(--fgd-muted);\n\tbackground: transparent;\n\tfont: 600 var(--fgd-font-size)/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: var(--fgd-surface-hover);\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: var(--fgd-space-1) 0 var(--fgd-space-1) var(--fgd-space-2);\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: var(--fgd-space-1);\n\tborder: 1px solid var(--fgd-border-strong);\n\tborder-radius: var(--fgd-radius-sm);\n\tbackground: var(--fgd-surface-raised);\n\tbox-shadow: var(--fgd-shadow);\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: var(--fgd-radius-sm);\n\tcolor: var(--fgd-text-secondary);\n\tbackground: transparent;\n\tfont: 600 var(--fgd-font-size)/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: var(--fgd-control-height);\n\tmin-height: var(--fgd-control-height);\n\tpadding: 0 9px;\n\tborder: 1px solid var(--fgd-border);\n\tborder-radius: var(--fgd-radius-sm);\n\tcolor: var(--fgd-text-secondary);\n\tbackground: var(--fgd-surface);\n\tfont: 600 var(--fgd-font-size)/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: var(--fgd-accent);\n\tcolor: var(--fgd-accent);\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: var(--fgd-accent);\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: var(--fgd-success);\n\tcolor: var(--fgd-success);\n\tbackground: color-mix(in srgb, var(--fgd-success) 10%, var(--fgd-panel));\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: var(--fgd-font-size-small)/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: var(--fgd-space-3);\n\tbackground: var(--fgd-canvas);\n}\n.zenfg-inspector-view.zenfg-inspector-overview-view { overflow: auto; }\n\n.zenfg-inspector-workspace {\n\tposition: relative;\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\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: var(--fgd-space-2);\n\tmin-width: 0;\n\tmin-height: 0;\n\tpadding: 24px;\n\tcolor: var(--fgd-muted);\n\tfont: var(--fgd-font-size-small)/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: var(--fgd-font-size-small); }\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: var(--fgd-radius-sm);\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 var(--fgd-space-2);\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\tpadding: var(--fgd-space-1) var(--fgd-space-2);\n\tborder: 1px solid var(--fgd-border);\n\tborder-radius: var(--fgd-radius-sm);\n\tcolor: var(--fgd-text);\n\tbackground: var(--fgd-panel);\n\tfont: var(--fgd-font-size)/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 var(--fgd-space-1);\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\tborder-collapse: collapse;\n}\n.zenfg-inspector-workbench-table th,\n.zenfg-inspector-workbench-table td {\n\theight: var(--fgd-control-height);\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 var(--fgd-font-size-small)/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: var(--fgd-surface-hover); }\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: var(--fgd-font-size-small)/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: var(--fgd-graph-render-stroke); }\n.zenfg-inspector-kind-label[data-kind='compute'] { --fgd-kind-color: var(--fgd-graph-compute-stroke); }\n.zenfg-inspector-kind-label[data-kind='copy'] { --fgd-kind-color: var(--fgd-graph-copy-stroke); }\n.zenfg-inspector-kind-label[data-kind='clear-buffer'] { --fgd-kind-color: var(--fgd-graph-clear-stroke); }\n.zenfg-inspector-kind-label[data-kind='command'] { --fgd-kind-color: var(--fgd-graph-command-stroke); }\n.zenfg-inspector-kind-label[data-kind='external-submission'] { --fgd-kind-color: var(--fgd-graph-external-stroke); }\n.zenfg-inspector-kind-label[data-kind='opaque'] { --fgd-kind-color: var(--fgd-graph-external-stroke); }\n.zenfg-inspector-kind-label[data-kind='texture'] { --fgd-kind-color: var(--fgd-graph-texture-stroke); }\n.zenfg-inspector-kind-label[data-kind='buffer'] { --fgd-kind-color: var(--fgd-graph-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: var(--fgd-accent);\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: var(--fgd-accent);\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\tmin-width: 0;\n}\n.zenfg-inspector-graph-action-controls { display: flex; align-items: center; min-width: 0; }\n.zenfg-inspector-graph-action-controls { gap: var(--fgd-space-1); }\n.zenfg-inspector-graph-toolbar button.active,\n.zenfg-inspector-graph-toolbar button[aria-pressed='true'] {\n\tz-index: 1;\n\tborder-color: var(--fgd-accent);\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\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: var(--fgd-font-size-small)/1 var(--fgd-font-ui);\n\twhite-space: nowrap;\n}\n.zenfg-inspector-legend-item { display: inline-flex; align-items: center; gap: var(--fgd-space-1); 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: var(--fgd-font-size-small);\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: var(--fgd-space-2);\n\tpadding: var(--fgd-space-4);\n\tcolor: var(--fgd-muted);\n\tbackground: color-mix(in srgb, var(--fgd-canvas) 82%, transparent);\n\tfont: var(--fgd-font-size-small)/1.45 var(--fgd-font-ui);\n\ttext-align: center;\n\tpointer-events: none;\n}\n.zenfg-inspector-graph-status[data-state='layout'] { background: color-mix(in srgb, var(--fgd-canvas) 50%, transparent); }\n.zenfg-inspector-graph-status[data-state='error'] {\n\tcolor: var(--fgd-text);\n\tbackground: color-mix(in srgb, var(--fgd-canvas) 94%, transparent);\n}\n.zenfg-inspector-graph-status > span { max-width: min(560px, 80%); }\n.zenfg-inspector-graph-status button {\n\theight: var(--fgd-control-height);\n\tpadding: 0 9px;\n\tborder: 1px solid var(--fgd-accent);\n\tborder-radius: var(--fgd-radius-sm);\n\tcolor: var(--fgd-accent);\n\tbackground: var(--fgd-accent-soft);\n\tfont: 600 var(--fgd-font-size)/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: var(--fgd-space-2) 10px;\n\tborder: 1px solid var(--fgd-border-strong);\n\tborder-radius: var(--fgd-radius-sm);\n\tcolor: var(--fgd-text);\n\tbackground: var(--fgd-surface-raised);\n\tbox-shadow: var(--fgd-shadow);\n\tfont: var(--fgd-font-size-small)/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: var(--fgd-radius-sm);\n\tbackground: var(--fgd-surface-raised);\n\tbox-shadow: var(--fgd-shadow);\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: var(--fgd-row-height);\n\tpadding: 0 var(--fgd-space-2) 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 var(--fgd-font-size-small)/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\tgap: 3px var(--fgd-space-3);\n\tmargin: 0;\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\toverflow-wrap: anywhere;\n}\n.zenfg-inspector-inspector-relations { display: grid; gap: var(--fgd-space-2); }\n.zenfg-inspector-inspector-relations section {\n\tdisplay: grid;\n\tgap: 6px;\n\tpadding: var(--fgd-space-2);\n\tborder: 1px solid var(--fgd-border-subtle);\n\tborder-radius: var(--fgd-radius-sm);\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 var(--fgd-font-size-small)/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: var(--fgd-font-size)/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: var(--fgd-font-size-small)/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\tcolor: var(--fgd-text-secondary);\n}\n\n/* Memory */\n.zenfg-inspector-memory-view {\n\tdisplay: grid;\n}\n.zenfg-inspector-memory-summary {\n\tdisplay: grid;\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 var(--fgd-space-2);\n\tborder-radius: var(--fgd-radius-sm);\n}\n.zenfg-inspector-memory-summary strong {\n\toverflow: hidden;\n\tfont: 600 var(--fgd-font-size-small)/1.35 var(--fgd-font-mono);\n\ttext-overflow: ellipsis;\n}\n.zenfg-inspector-memory-scroller { min-height: 0; overflow: auto; }\n.zenfg-inspector-memory-timeline {\n\tdisplay: grid;\n\tpadding: var(--fgd-space-2);\n\tfont: var(--fgd-font-size-small)/1.4 var(--fgd-font-mono);\n}\n.zenfg-inspector-memory-axis,\n.zenfg-inspector-memory-resource {\n\tdisplay: grid;\n\tgap: 10px;\n\talign-items: center;\n\tmin-height: var(--fgd-control-height);\n}\n.zenfg-inspector-memory-axis {\n\tposition: sticky;\n\ttop: 0;\n\tpadding: 0 var(--fgd-space-2) 6px;\n\tcolor: var(--fgd-muted);\n\tbackground: var(--fgd-canvas);\n\tfont: var(--fgd-font-size-small)/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\tfont: var(--fgd-font-size-small)/1 var(--fgd-font-mono);\n}\n.zenfg-inspector-memory-allocation {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tgap: var(--fgd-space-3);\n\tmargin-top: 6px;\n\tpadding: 7px var(--fgd-space-2);\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: var(--fgd-font-size-small)/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 var(--fgd-space-2); 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\tborder-radius: var(--fgd-radius-sm);\n\tbackground: color-mix(in srgb, var(--fgd-graph-texture-stroke) 76%, transparent);\n\tbox-shadow: 0 0 0 1px color-mix(in srgb, var(--fgd-graph-texture-stroke) 36%, transparent);\n}\n.zenfg-inspector-memory-bar.buffer {\n\tbackground: color-mix(in srgb, var(--fgd-graph-buffer-stroke) 72%, transparent);\n\tbox-shadow: 0 0 0 1px color-mix(in srgb, var(--fgd-graph-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: var(--fgd-space-2);\n\tpadding: var(--fgd-space-2);\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: var(--fgd-radius-sm);\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 var(--fgd-font-size-small)/1.35 var(--fgd-font-ui);\n}\n.zenfg-inspector-diagnostic-card > p {\n\tmargin: 0;\n\tpadding: 0 10px var(--fgd-space-2);\n\tcolor: var(--fgd-muted);\n\tfont: var(--fgd-font-size-small)/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 var(--fgd-space-2);\n\tborder-radius: var(--fgd-radius-sm);\n\tcolor: var(--fgd-text-secondary);\n\tfont: var(--fgd-font-size)/1.45 var(--fgd-font-mono);\n}\n.zenfg-inspector-diagnostic-list .zenfg-inspector-relation-button:hover {\n\tbackground: var(--fgd-surface-hover);\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: var(--fgd-backdrop);\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: var(--fgd-shadow);\n\t}\n\t.zenfg-inspector-graph-toolbar {\n\t\tgrid-template-columns: minmax(0, 1fr) auto;\n\t\tgap: 6px var(--fgd-space-2);\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: var(--fgd-row-height); 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: var(--fgd-space-2); }\n\t.zenfg-inspector-overview-view { padding: var(--fgd-space-2); }\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: var(--fgd-space-2); }\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 + PANEL_WORKBENCH_CSS + PANEL_LIST_CSS + PANEL_DETAIL_CSS + PANEL_MEMORY_CSS;\n\tdocument.head.appendChild(style);\n}\n"]}

package/dist/theme.d.ts

@@ -0,0 +1,22 @@
+/** Pure theme data for CSS and JavaScript hosts; safe to import without a DOM.
+ * @packageDocumentation
+ */
+import { stormVariables } from './themeDefinitions.ts';
+export { visualThemes, visualMetrics } from './themePalette.ts';
+export type { ThemeMode, VisualPalette } from './themePalette.ts';
+/** Public CSS custom properties. Missing values inherit from the host or use Storm defaults. */
+export type InspectorThemeVariables = {
+    readonly [Key in keyof typeof stormVariables]: string;
+};
+/** A partial or complete theme; no name, registration, or base preset is required. */
+export interface InspectorTheme {
+    /** Browser appearance for native controls; mapped to `--zfgi-color-scheme`. Does not select a palette. */
+    readonly colorScheme?: 'dark' | 'light';
+    /** CSS values keyed by the documented `--zfgi-*` custom property names. */
+    readonly variables?: Readonly<Partial<InspectorThemeVariables>>;
+}
+/** Complete Tokyo Night Storm preset; also the component's CSS fallback appearance. */
+export declare const tokyoNightStorm: InspectorTheme;
+/** Complete Tokyo Night Light preset, including the graph and native control appearance. */
+export declare const tokyoNightLight: InspectorTheme;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,cAAc,EAAkB,MAAM,uBAAuB,CAAC;AAEvE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAChE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElE,gGAAgG;AAChG,MAAM,MAAM,uBAAuB,GAAG;IAAE,QAAQ,EAAE,GAAG,IAAI,MAAM,OAAO,cAAc,GAAG,MAAM;CAAE,CAAC;AAEhG,sFAAsF;AACtF,MAAM,WAAW,cAAc;IAC3B,0GAA0G;IAC1G,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxC,2EAA2E;IAC3E,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC;CACnE;AAED,uFAAuF;AACvF,eAAO,MAAM,eAAe,EAAE,cAAiG,CAAC;AAEhI,4FAA4F;AAC5F,eAAO,MAAM,eAAe,EAAE,cAAkG,CAAC"}

package/dist/theme.js

@@ -0,0 +1,10 @@
+/** Pure theme data for CSS and JavaScript hosts; safe to import without a DOM.
+ * @packageDocumentation
+ */
+import { stormVariables, lightVariables } from "./themeDefinitions.js";
+export { visualThemes, visualMetrics } from "./themePalette.js";
+/** Complete Tokyo Night Storm preset; also the component's CSS fallback appearance. */
+export const tokyoNightStorm = Object.freeze({ colorScheme: 'dark', variables: Object.freeze(stormVariables) });
+/** Complete Tokyo Night Light preset, including the graph and native control appearance. */
+export const tokyoNightLight = Object.freeze({ colorScheme: 'light', variables: Object.freeze(lightVariables) });
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAchE,uFAAuF;AACvF,MAAM,CAAC,MAAM,eAAe,GAAmB,MAAM,CAAC,MAAM,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;AAEhI,4FAA4F;AAC5F,MAAM,CAAC,MAAM,eAAe,GAAmB,MAAM,CAAC,MAAM,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC","sourcesContent":["/** Pure theme data for CSS and JavaScript hosts; safe to import without a DOM.\n * @packageDocumentation\n */\nimport { stormVariables, lightVariables } from './themeDefinitions.ts';\n\nexport { visualThemes, visualMetrics } from './themePalette.ts';\nexport type { ThemeMode, VisualPalette } from './themePalette.ts';\n\n/** Public CSS custom properties. Missing values inherit from the host or use Storm defaults. */\nexport type InspectorThemeVariables = { readonly [Key in keyof typeof stormVariables]: string };\n\n/** A partial or complete theme; no name, registration, or base preset is required. */\nexport interface InspectorTheme {\n    /** Browser appearance for native controls; mapped to `--zfgi-color-scheme`. Does not select a palette. */\n    readonly colorScheme?: 'dark' | 'light';\n    /** CSS values keyed by the documented `--zfgi-*` custom property names. */\n    readonly variables?: Readonly<Partial<InspectorThemeVariables>>;\n}\n\n/** Complete Tokyo Night Storm preset; also the component's CSS fallback appearance. */\nexport const tokyoNightStorm: InspectorTheme = Object.freeze({ colorScheme: 'dark', variables: Object.freeze(stormVariables) });\n\n/** Complete Tokyo Night Light preset, including the graph and native control appearance. */\nexport const tokyoNightLight: InspectorTheme = Object.freeze({ colorScheme: 'light', variables: Object.freeze(lightVariables) });\n"]}

package/dist/themeDefinitions.d.ts

@@ -0,0 +1,251 @@
+import { type ThemeMode } from './themePalette.ts';
+export declare const graphCategories: readonly ["render", "compute", "copy", "clear", "command", "external", "declaration", "output", "texture", "buffer"];
+export declare function createThemeVariables(mode: ThemeMode): {
+    "--zfgi-graph-render-stroke": string;
+    "--zfgi-graph-render-fill": string;
+    "--zfgi-graph-compute-stroke": string;
+    "--zfgi-graph-compute-fill": string;
+    "--zfgi-graph-copy-stroke": string;
+    "--zfgi-graph-copy-fill": string;
+    "--zfgi-graph-clear-stroke": string;
+    "--zfgi-graph-clear-fill": string;
+    "--zfgi-graph-command-stroke": string;
+    "--zfgi-graph-command-fill": string;
+    "--zfgi-graph-external-stroke": string;
+    "--zfgi-graph-external-fill": string;
+    "--zfgi-graph-declaration-stroke": string;
+    "--zfgi-graph-declaration-fill": string;
+    "--zfgi-graph-output-stroke": string;
+    "--zfgi-graph-output-fill": string;
+    "--zfgi-graph-texture-stroke": string;
+    "--zfgi-graph-texture-fill": string;
+    "--zfgi-graph-buffer-stroke": string;
+    "--zfgi-graph-buffer-fill": string;
+    '--zfgi-canvas': string;
+    '--zfgi-background': string;
+    '--zfgi-surface': string;
+    '--zfgi-surface-raised': string;
+    '--zfgi-surface-hover': string;
+    '--zfgi-border': string;
+    '--zfgi-border-subtle': string;
+    '--zfgi-border-strong': string;
+    '--zfgi-text': string;
+    '--zfgi-text-secondary': string;
+    '--zfgi-muted': string;
+    '--zfgi-accent': string;
+    '--zfgi-accent-soft': string;
+    '--zfgi-accent-hover': string;
+    '--zfgi-success': string;
+    '--zfgi-warning': string;
+    '--zfgi-danger': string;
+    '--zfgi-shadow': string;
+    '--zfgi-backdrop': string;
+    '--zfgi-font-ui': "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Microsoft YaHei\", sans-serif";
+    '--zfgi-font-mono': "ui-monospace, SFMono-Regular, Consolas, \"Liberation Mono\", \"Microsoft YaHei\", monospace";
+    '--zfgi-font-size': string;
+    '--zfgi-font-size-small': string;
+    '--zfgi-control-height': string;
+    '--zfgi-row-height': string;
+    '--zfgi-radius-sm': string;
+    '--zfgi-radius-md': string;
+    '--zfgi-space-1': string;
+    '--zfgi-space-2': string;
+    '--zfgi-space-3': string;
+    '--zfgi-space-4': string;
+    '--zfgi-graph-tint': string;
+    '--zfgi-graph-text': string;
+    '--zfgi-graph-muted': string;
+    '--zfgi-graph-font-family': string;
+    '--zfgi-graph-font-size': string;
+    '--zfgi-graph-node-border-width': string;
+    '--zfgi-graph-group-border-width': string;
+    '--zfgi-graph-edge-width': string;
+    '--zfgi-graph-edge-opacity': string;
+    '--zfgi-graph-ordering-opacity': string;
+    '--zfgi-graph-group-opacity': string;
+    '--zfgi-graph-arrow-scale': string;
+    '--zfgi-graph-hover-width': string;
+    '--zfgi-graph-selected-width': string;
+    '--zfgi-graph-selected': string;
+    '--zfgi-graph-hover': string;
+    '--zfgi-graph-active-bg': string;
+    '--zfgi-graph-active-bg-opacity': string;
+    '--zfgi-graph-active-bg-size': string;
+    '--zfgi-graph-group-stroke': string;
+    '--zfgi-graph-group-fill': string;
+    '--zfgi-graph-group-alternate-fill': string;
+    '--zfgi-graph-value': string;
+    '--zfgi-graph-ordering': string;
+    '--zfgi-graph-read': string;
+    '--zfgi-graph-write': string;
+    '--zfgi-graph-culled-stroke': string;
+    '--zfgi-graph-culled-fill': string;
+};
+export declare const stormVariables: {
+    "--zfgi-graph-render-stroke": string;
+    "--zfgi-graph-render-fill": string;
+    "--zfgi-graph-compute-stroke": string;
+    "--zfgi-graph-compute-fill": string;
+    "--zfgi-graph-copy-stroke": string;
+    "--zfgi-graph-copy-fill": string;
+    "--zfgi-graph-clear-stroke": string;
+    "--zfgi-graph-clear-fill": string;
+    "--zfgi-graph-command-stroke": string;
+    "--zfgi-graph-command-fill": string;
+    "--zfgi-graph-external-stroke": string;
+    "--zfgi-graph-external-fill": string;
+    "--zfgi-graph-declaration-stroke": string;
+    "--zfgi-graph-declaration-fill": string;
+    "--zfgi-graph-output-stroke": string;
+    "--zfgi-graph-output-fill": string;
+    "--zfgi-graph-texture-stroke": string;
+    "--zfgi-graph-texture-fill": string;
+    "--zfgi-graph-buffer-stroke": string;
+    "--zfgi-graph-buffer-fill": string;
+    '--zfgi-canvas': string;
+    '--zfgi-background': string;
+    '--zfgi-surface': string;
+    '--zfgi-surface-raised': string;
+    '--zfgi-surface-hover': string;
+    '--zfgi-border': string;
+    '--zfgi-border-subtle': string;
+    '--zfgi-border-strong': string;
+    '--zfgi-text': string;
+    '--zfgi-text-secondary': string;
+    '--zfgi-muted': string;
+    '--zfgi-accent': string;
+    '--zfgi-accent-soft': string;
+    '--zfgi-accent-hover': string;
+    '--zfgi-success': string;
+    '--zfgi-warning': string;
+    '--zfgi-danger': string;
+    '--zfgi-shadow': string;
+    '--zfgi-backdrop': string;
+    '--zfgi-font-ui': "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Microsoft YaHei\", sans-serif";
+    '--zfgi-font-mono': "ui-monospace, SFMono-Regular, Consolas, \"Liberation Mono\", \"Microsoft YaHei\", monospace";
+    '--zfgi-font-size': string;
+    '--zfgi-font-size-small': string;
+    '--zfgi-control-height': string;
+    '--zfgi-row-height': string;
+    '--zfgi-radius-sm': string;
+    '--zfgi-radius-md': string;
+    '--zfgi-space-1': string;
+    '--zfgi-space-2': string;
+    '--zfgi-space-3': string;
+    '--zfgi-space-4': string;
+    '--zfgi-graph-tint': string;
+    '--zfgi-graph-text': string;
+    '--zfgi-graph-muted': string;
+    '--zfgi-graph-font-family': string;
+    '--zfgi-graph-font-size': string;
+    '--zfgi-graph-node-border-width': string;
+    '--zfgi-graph-group-border-width': string;
+    '--zfgi-graph-edge-width': string;
+    '--zfgi-graph-edge-opacity': string;
+    '--zfgi-graph-ordering-opacity': string;
+    '--zfgi-graph-group-opacity': string;
+    '--zfgi-graph-arrow-scale': string;
+    '--zfgi-graph-hover-width': string;
+    '--zfgi-graph-selected-width': string;
+    '--zfgi-graph-selected': string;
+    '--zfgi-graph-hover': string;
+    '--zfgi-graph-active-bg': string;
+    '--zfgi-graph-active-bg-opacity': string;
+    '--zfgi-graph-active-bg-size': string;
+    '--zfgi-graph-group-stroke': string;
+    '--zfgi-graph-group-fill': string;
+    '--zfgi-graph-group-alternate-fill': string;
+    '--zfgi-graph-value': string;
+    '--zfgi-graph-ordering': string;
+    '--zfgi-graph-read': string;
+    '--zfgi-graph-write': string;
+    '--zfgi-graph-culled-stroke': string;
+    '--zfgi-graph-culled-fill': string;
+};
+export declare const lightVariables: {
+    "--zfgi-graph-render-stroke": string;
+    "--zfgi-graph-render-fill": string;
+    "--zfgi-graph-compute-stroke": string;
+    "--zfgi-graph-compute-fill": string;
+    "--zfgi-graph-copy-stroke": string;
+    "--zfgi-graph-copy-fill": string;
+    "--zfgi-graph-clear-stroke": string;
+    "--zfgi-graph-clear-fill": string;
+    "--zfgi-graph-command-stroke": string;
+    "--zfgi-graph-command-fill": string;
+    "--zfgi-graph-external-stroke": string;
+    "--zfgi-graph-external-fill": string;
+    "--zfgi-graph-declaration-stroke": string;
+    "--zfgi-graph-declaration-fill": string;
+    "--zfgi-graph-output-stroke": string;
+    "--zfgi-graph-output-fill": string;
+    "--zfgi-graph-texture-stroke": string;
+    "--zfgi-graph-texture-fill": string;
+    "--zfgi-graph-buffer-stroke": string;
+    "--zfgi-graph-buffer-fill": string;
+    '--zfgi-canvas': string;
+    '--zfgi-background': string;
+    '--zfgi-surface': string;
+    '--zfgi-surface-raised': string;
+    '--zfgi-surface-hover': string;
+    '--zfgi-border': string;
+    '--zfgi-border-subtle': string;
+    '--zfgi-border-strong': string;
+    '--zfgi-text': string;
+    '--zfgi-text-secondary': string;
+    '--zfgi-muted': string;
+    '--zfgi-accent': string;
+    '--zfgi-accent-soft': string;
+    '--zfgi-accent-hover': string;
+    '--zfgi-success': string;
+    '--zfgi-warning': string;
+    '--zfgi-danger': string;
+    '--zfgi-shadow': string;
+    '--zfgi-backdrop': string;
+    '--zfgi-font-ui': "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Microsoft YaHei\", sans-serif";
+    '--zfgi-font-mono': "ui-monospace, SFMono-Regular, Consolas, \"Liberation Mono\", \"Microsoft YaHei\", monospace";
+    '--zfgi-font-size': string;
+    '--zfgi-font-size-small': string;
+    '--zfgi-control-height': string;
+    '--zfgi-row-height': string;
+    '--zfgi-radius-sm': string;
+    '--zfgi-radius-md': string;
+    '--zfgi-space-1': string;
+    '--zfgi-space-2': string;
+    '--zfgi-space-3': string;
+    '--zfgi-space-4': string;
+    '--zfgi-graph-tint': string;
+    '--zfgi-graph-text': string;
+    '--zfgi-graph-muted': string;
+    '--zfgi-graph-font-family': string;
+    '--zfgi-graph-font-size': string;
+    '--zfgi-graph-node-border-width': string;
+    '--zfgi-graph-group-border-width': string;
+    '--zfgi-graph-edge-width': string;
+    '--zfgi-graph-edge-opacity': string;
+    '--zfgi-graph-ordering-opacity': string;
+    '--zfgi-graph-group-opacity': string;
+    '--zfgi-graph-arrow-scale': string;
+    '--zfgi-graph-hover-width': string;
+    '--zfgi-graph-selected-width': string;
+    '--zfgi-graph-selected': string;
+    '--zfgi-graph-hover': string;
+    '--zfgi-graph-active-bg': string;
+    '--zfgi-graph-active-bg-opacity': string;
+    '--zfgi-graph-active-bg-size': string;
+    '--zfgi-graph-group-stroke': string;
+    '--zfgi-graph-group-fill': string;
+    '--zfgi-graph-group-alternate-fill': string;
+    '--zfgi-graph-value': string;
+    '--zfgi-graph-ordering': string;
+    '--zfgi-graph-read': string;
+    '--zfgi-graph-write': string;
+    '--zfgi-graph-culled-stroke': string;
+    '--zfgi-graph-culled-fill': string;
+};
+export declare const legacyThemeAliases: Record<string, string>;
+export declare function internalThemeProperty(property: string): string;
+export declare function themeFallback(property: string, value: string): string;
+export declare const themeDefaultsCss: string;
+export declare function themePresetCss(): string;
+//# sourceMappingURL=themeDefinitions.d.ts.map

package/dist/themeDefinitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeDefinitions.d.ts","sourceRoot":"","sources":["../src/themeDefinitions.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEhF,eAAO,MAAM,eAAe,sHAAuH,CAAC;AAEpJ,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsEnD;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+B,CAAC;AAC3D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAgC,CAAC;AAG5D,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAIS,CAAC;AAEhE,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGrE;AAED,eAAO,MAAM,gBAAgB,QACuF,CAAC;AAErH,wBAAgB,cAAc,IAAI,MAAM,CAIvC"}

package/dist/themeDefinitions.js

@@ -0,0 +1,96 @@
+import { visualThemes, visualMetrics } from "./themePalette.js";
+export const graphCategories = ['render', 'compute', 'copy', 'clear', 'command', 'external', 'declaration', 'output', 'texture', 'buffer'];
+export function createThemeVariables(mode) {
+    const p = visualThemes[mode];
+    const dark = mode === 'dark';
+    const tint = dark ? '18%' : '8%';
+    const categoryVariables = Object.fromEntries(graphCategories.flatMap(kind => [
+        [`--zfgi-graph-${kind}-stroke`, p[kind]],
+        [`--zfgi-graph-${kind}-fill`, `color-mix(in srgb, var(--zfgi-graph-${kind}-stroke, ${p[kind]}) var(--zfgi-graph-tint, ${tint}), var(--zfgi-canvas, ${p.canvas}))`],
+    ]));
+    return {
+        '--zfgi-canvas': p.canvas,
+        '--zfgi-background': p.panel,
+        '--zfgi-surface': p.inset,
+        '--zfgi-surface-raised': p.panel,
+        '--zfgi-surface-hover': p.hover,
+        '--zfgi-border': p.border,
+        '--zfgi-border-subtle': p.divider,
+        '--zfgi-border-strong': p.border,
+        '--zfgi-text': p.text,
+        '--zfgi-text-secondary': p.secondary,
+        '--zfgi-muted': p.muted,
+        '--zfgi-accent': p.accent,
+        '--zfgi-accent-soft': p.accentSoft,
+        '--zfgi-accent-hover': p.hover,
+        '--zfgi-success': p.success,
+        '--zfgi-warning': p.warning,
+        '--zfgi-danger': p.danger,
+        '--zfgi-shadow': dark ? '0 8px 24px #0006' : '0 8px 24px #343b5826',
+        '--zfgi-backdrop': dark ? '#13172899' : '#343b5840',
+        '--zfgi-font-ui': visualMetrics.fontUi,
+        '--zfgi-font-mono': visualMetrics.fontMono,
+        '--zfgi-font-size': '13px',
+        '--zfgi-font-size-small': '12px',
+        '--zfgi-control-height': '32px',
+        '--zfgi-row-height': '36px',
+        '--zfgi-radius-sm': '6px',
+        '--zfgi-radius-md': '10px',
+        '--zfgi-space-1': '4px',
+        '--zfgi-space-2': '8px',
+        '--zfgi-space-3': '12px',
+        '--zfgi-space-4': '16px',
+        '--zfgi-graph-tint': tint,
+        '--zfgi-graph-text': dark ? '#d5ddff' : p.text,
+        '--zfgi-graph-muted': p.muted,
+        '--zfgi-graph-font-family': `var(--zfgi-font-mono, ${visualMetrics.fontMono})`,
+        '--zfgi-graph-font-size': '13px',
+        '--zfgi-graph-node-border-width': '1.25px',
+        '--zfgi-graph-group-border-width': '1.5px',
+        '--zfgi-graph-edge-width': '1.5px',
+        '--zfgi-graph-edge-opacity': '1',
+        '--zfgi-graph-ordering-opacity': '1',
+        '--zfgi-graph-group-opacity': '1',
+        '--zfgi-graph-arrow-scale': '0.8',
+        '--zfgi-graph-hover-width': '2.5px',
+        '--zfgi-graph-selected-width': '3px',
+        '--zfgi-graph-selected': `var(--zfgi-accent, ${p.accent})`,
+        '--zfgi-graph-hover': dark ? '#d5ddff' : '#343b58',
+        '--zfgi-graph-active-bg': `var(--zfgi-graph-text, ${dark ? '#d5ddff' : p.text})`,
+        '--zfgi-graph-active-bg-opacity': '0.08',
+        '--zfgi-graph-active-bg-size': '12px',
+        '--zfgi-graph-group-stroke': p.group,
+        '--zfgi-graph-group-fill': dark ? '#292e42' : '#eceef5',
+        '--zfgi-graph-group-alternate-fill': dark ? '#30364b' : '#e5e9f3',
+        '--zfgi-graph-value': p.edge,
+        '--zfgi-graph-ordering': p.edge,
+        '--zfgi-graph-read': p.buffer,
+        '--zfgi-graph-write': p.warning,
+        '--zfgi-graph-culled-stroke': p.muted,
+        '--zfgi-graph-culled-fill': p.inset,
+        ...categoryVariables,
+    };
+}
+export const stormVariables = createThemeVariables('dark');
+export const lightVariables = createThemeVariables('light');
+// Existing public aliases only. Internal layout variables are deliberately excluded.
+export const legacyThemeAliases = Object.fromEntries([
+    'background', 'surface', 'surface-raised', 'surface-hover', 'border', 'border-subtle',
+    'border-strong', 'text', 'text-secondary', 'muted', 'accent', 'accent-soft', 'accent-hover',
+    'success', 'warning', 'danger', 'font-ui', 'font-mono', 'radius-sm', 'radius-md',
+].map(name => [`--zfgi-${name}`, `--zenfg-inspector-${name}`]));
+export function internalThemeProperty(property) {
+    return property === '--zfgi-background' ? '--fgd-panel' : property.replace('--zfgi-', '--fgd-');
+}
+export function themeFallback(property, value) {
+    const legacy = legacyThemeAliases[property];
+    return `var(${property}, ${legacy ? `var(${legacy}, ${value})` : value})`;
+}
+export const themeDefaultsCss = Object.entries(stormVariables)
+    .map(([property, value]) => `${internalThemeProperty(property)}: ${themeFallback(property, value)};`).join('\n');
+export function themePresetCss() {
+    return '/* Generated from Inspector theme definitions. */\n' + [
+        ['tokyo-night-storm', 'dark', stormVariables], ['tokyo-night-light', 'light', lightVariables],
+    ].map(([name, scheme, variables]) => `[data-zfgi-theme="${name}"] {\n  --zfgi-color-scheme: ${scheme};\n${Object.entries(variables).map(([key, value]) => `  ${key}: ${value};`).join('\n')}\n}`).join('\n');
+}
+//# sourceMappingURL=themeDefinitions.js.map

package/dist/themeDefinitions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeDefinitions.js","sourceRoot":"","sources":["../src/themeDefinitions.ts"],"names":[],"mappings":"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","sourcesContent":["import { visualThemes, visualMetrics, type ThemeMode } from './themePalette.ts';\n\nexport const graphCategories = ['render', 'compute', 'copy', 'clear', 'command', 'external', 'declaration', 'output', 'texture', 'buffer'] as const;\n\nexport function createThemeVariables(mode: ThemeMode) {\n    const p = visualThemes[mode];\n    const dark = mode === 'dark';\n    const tint = dark ? '18%' : '8%';\n    const categoryVariables = Object.fromEntries(graphCategories.flatMap(kind => [\n        [`--zfgi-graph-${kind}-stroke`, p[kind]],\n        [`--zfgi-graph-${kind}-fill`, `color-mix(in srgb, var(--zfgi-graph-${kind}-stroke, ${p[kind]}) var(--zfgi-graph-tint, ${tint}), var(--zfgi-canvas, ${p.canvas}))`],\n    ])) as Record<`--zfgi-graph-${typeof graphCategories[number]}-${'stroke' | 'fill'}`, string>;\n    return {\n        '--zfgi-canvas': p.canvas,\n        '--zfgi-background': p.panel,\n        '--zfgi-surface': p.inset,\n        '--zfgi-surface-raised': p.panel,\n        '--zfgi-surface-hover': p.hover,\n        '--zfgi-border': p.border,\n        '--zfgi-border-subtle': p.divider,\n        '--zfgi-border-strong': p.border,\n        '--zfgi-text': p.text,\n        '--zfgi-text-secondary': p.secondary,\n        '--zfgi-muted': p.muted,\n        '--zfgi-accent': p.accent,\n        '--zfgi-accent-soft': p.accentSoft,\n        '--zfgi-accent-hover': p.hover,\n        '--zfgi-success': p.success,\n        '--zfgi-warning': p.warning,\n        '--zfgi-danger': p.danger,\n        '--zfgi-shadow': dark ? '0 8px 24px #0006' : '0 8px 24px #343b5826',\n        '--zfgi-backdrop': dark ? '#13172899' : '#343b5840',\n        '--zfgi-font-ui': visualMetrics.fontUi,\n        '--zfgi-font-mono': visualMetrics.fontMono,\n        '--zfgi-font-size': '13px',\n        '--zfgi-font-size-small': '12px',\n        '--zfgi-control-height': '32px',\n        '--zfgi-row-height': '36px',\n        '--zfgi-radius-sm': '6px',\n        '--zfgi-radius-md': '10px',\n        '--zfgi-space-1': '4px',\n        '--zfgi-space-2': '8px',\n        '--zfgi-space-3': '12px',\n        '--zfgi-space-4': '16px',\n        '--zfgi-graph-tint': tint,\n        '--zfgi-graph-text': dark ? '#d5ddff' : p.text,\n        '--zfgi-graph-muted': p.muted,\n        '--zfgi-graph-font-family': `var(--zfgi-font-mono, ${visualMetrics.fontMono})`,\n        '--zfgi-graph-font-size': '13px',\n        '--zfgi-graph-node-border-width': '1.25px',\n        '--zfgi-graph-group-border-width': '1.5px',\n        '--zfgi-graph-edge-width': '1.5px',\n        '--zfgi-graph-edge-opacity': '1',\n        '--zfgi-graph-ordering-opacity': '1',\n        '--zfgi-graph-group-opacity': '1',\n        '--zfgi-graph-arrow-scale': '0.8',\n        '--zfgi-graph-hover-width': '2.5px',\n        '--zfgi-graph-selected-width': '3px',\n        '--zfgi-graph-selected': `var(--zfgi-accent, ${p.accent})`,\n        '--zfgi-graph-hover': dark ? '#d5ddff' : '#343b58',\n        '--zfgi-graph-active-bg': `var(--zfgi-graph-text, ${dark ? '#d5ddff' : p.text})`,\n        '--zfgi-graph-active-bg-opacity': '0.08',\n        '--zfgi-graph-active-bg-size': '12px',\n        '--zfgi-graph-group-stroke': p.group,\n        '--zfgi-graph-group-fill': dark ? '#292e42' : '#eceef5',\n        '--zfgi-graph-group-alternate-fill': dark ? '#30364b' : '#e5e9f3',\n        '--zfgi-graph-value': p.edge,\n        '--zfgi-graph-ordering': p.edge,\n        '--zfgi-graph-read': p.buffer,\n        '--zfgi-graph-write': p.warning,\n        '--zfgi-graph-culled-stroke': p.muted,\n        '--zfgi-graph-culled-fill': p.inset,\n        ...categoryVariables,\n    };\n}\n\nexport const stormVariables = createThemeVariables('dark');\nexport const lightVariables = createThemeVariables('light');\n\n// Existing public aliases only. Internal layout variables are deliberately excluded.\nexport const legacyThemeAliases: Record<string, string> = Object.fromEntries([\n    'background', 'surface', 'surface-raised', 'surface-hover', 'border', 'border-subtle',\n    'border-strong', 'text', 'text-secondary', 'muted', 'accent', 'accent-soft', 'accent-hover',\n    'success', 'warning', 'danger', 'font-ui', 'font-mono', 'radius-sm', 'radius-md',\n].map(name => [`--zfgi-${name}`, `--zenfg-inspector-${name}`]));\n\nexport function internalThemeProperty(property: string): string {\n    return property === '--zfgi-background' ? '--fgd-panel' : property.replace('--zfgi-', '--fgd-');\n}\n\nexport function themeFallback(property: string, value: string): string {\n    const legacy = legacyThemeAliases[property];\n    return `var(${property}, ${legacy ? `var(${legacy}, ${value})` : value})`;\n}\n\nexport const themeDefaultsCss = Object.entries(stormVariables)\n    .map(([property, value]) => `${internalThemeProperty(property)}: ${themeFallback(property, value)};`).join('\\n');\n\nexport function themePresetCss(): string {\n    return '/* Generated from Inspector theme definitions. */\\n' + ([\n        ['tokyo-night-storm', 'dark', stormVariables], ['tokyo-night-light', 'light', lightVariables],\n    ] as const).map(([name, scheme, variables]) => `[data-zfgi-theme=\"${name}\"] {\\n  --zfgi-color-scheme: ${scheme};\\n${Object.entries(variables).map(([key, value]) => `  ${key}: ${value};`).join('\\n')}\\n}`).join('\\n');\n}\n"]}