@zenfg/inspector 0.1.0-beta.3 → 0.1.0

package/dist/panelTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelTheme.js","sourceRoot":"","sources":["../src/panelTheme.ts"],"names":[],"mappings":"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","sourcesContent":["import type { InspectorTheme, InspectorThemeVariables } from './theme.ts';\nimport { internalThemeProperty, stormVariables } from './themeDefinitions.ts';\nimport { createGraphVisualTheme, defaultThemeValue, type GraphVisualTheme } from './panelVisualTheme.ts';\n\n/** Own only declarations written by this API, restoring pre-existing inline styles on reset. */\nexport class InspectorThemeController {\n    private readonly owned = new Map<string, { previous: string; priority: string; applied: string }>();\n    constructor(private readonly root: HTMLElement) {}\n\n    apply(theme: InspectorTheme | null): void {\n        const style = this.root.style;\n        for (const [key, entry] of this.owned) {\n            if (style.getPropertyValue(key) !== entry.applied || style.getPropertyPriority(key)) continue;\n            if (entry.previous) style.setProperty(key, entry.previous, entry.priority);\n            else style.removeProperty(key);\n        }\n        this.owned.clear();\n        const entries = Object.entries(theme?.variables ?? {}).filter(([key]) => Object.hasOwn(stormVariables, key));\n        if (theme?.colorScheme) entries.push(['--zfgi-color-scheme', theme.colorScheme]);\n        for (const [key, value] of entries) {\n            if (typeof value !== 'string') continue;\n            const previous = style.getPropertyValue(key);\n            const priority = style.getPropertyPriority(key);\n            style.setProperty(key, value);\n            this.owned.set(key, { previous, priority, applied: style.getPropertyValue(key) });\n        }\n    }\n\n    destroy(): void { this.owned.clear(); }\n}\n\n/** Resolve through the DOM once per refresh, including var(), color-mix(), and CSS lengths. */\nexport function resolveGraphTheme(root: HTMLElement): GraphVisualTheme {\n    const document = root.ownerDocument;\n    const view = document?.defaultView;\n    if (!view || !root.isConnected) return createGraphVisualTheme();\n    const styles = view.getComputedStyle(root);\n    const probe = document.createElement('span');\n    probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;width:0;height:0;overflow:hidden;';\n    probe.setAttribute('aria-hidden', 'true');\n    root.appendChild(probe);\n    const cache = new Map<string, string>();\n    let context: CanvasRenderingContext2D | null | undefined;\n    const color = (value: string): string | undefined => {\n        probe.style.color = '';\n        probe.style.color = value;\n        if (!probe.style.color) return undefined;\n        const resolved = view.getComputedStyle(probe).color;\n        if (/^(#[\\da-f]{3,8}|rgba?\\([\\d.,\\s]+\\))$/i.test(resolved)) return resolved;\n        // Normalize newer CSS color spaces into sRGB supported by Cytoscape.\n        if (context === undefined) {\n            const canvas = document.createElement('canvas'); canvas.width = canvas.height = 1;\n            context = canvas.getContext('2d', { willReadFrequently: true });\n        }\n        if (!context) return undefined;\n        context.clearRect(0, 0, 1, 1);\n        context.fillStyle = resolved;\n        context.fillRect(0, 0, 1, 1);\n        const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;\n        return `rgba(${r}, ${g}, ${b}, ${a! / 255})`;\n    };\n    const read = (key: keyof InspectorThemeVariables): string => {\n        const cached = cache.get(key);\n        if (cached !== undefined) return cached;\n        const value = styles.getPropertyValue(internalThemeProperty(key)).trim() || defaultThemeValue(key);\n        let result = value;\n        if (key.endsWith('font-family')) {\n            probe.style.fontFamily = value;\n            result = view.getComputedStyle(probe).fontFamily;\n        } else if (key.endsWith('size') || key.endsWith('width')) {\n            probe.style.fontSize = ''; probe.style.fontSize = value;\n            result = probe.style.fontSize ? view.getComputedStyle(probe).fontSize : defaultThemeValue(key);\n            if (!(parseFloat(result) > 0)) result = defaultThemeValue(key);\n        } else if (key.endsWith('opacity') || key.endsWith('scale')) {\n            const n = Number(value);\n            result = Number.isFinite(n) && n >= 0 && (!key.endsWith('opacity') || n <= 1) ? value : defaultThemeValue(key);\n        } else {\n            result = color(value) ?? defaultThemeValue(key);\n        }\n        cache.set(key, result);\n        return result;\n    };\n    try { return createGraphVisualTheme(read); }\n    finally { probe.remove(); }\n}\n"]}

package/dist/panelTypes.d.ts

@@ -1,3 +1,4 @@
+import type { GraphVisualTheme } from './panelVisualTheme.ts';
 import type { GraphRenderer } from './panelGraphRenderer.ts';
 import type { FrameGraphDebugEdge } from './debugCaptureModel.ts';
 export type GraphFlowRelation = {
@@ -20,7 +21,7 @@ export type Selection = {
     key: string;
 } | {
     kind: 'culled';
-    index: number;
+    id: string;
 } | {
     kind: 'allocation';
     id: string;
@@ -32,14 +33,22 @@ export type WorkbenchTab = 'overview' | 'graph' | 'passes' | 'resources' | 'memo
 export type PassesSubview = 'list' | 'groups';
 export type InspectorTab = 'summary' | 'relations' | 'raw';
 export type GraphViewState = {
+    theme?: GraphVisualTheme;
+    readonly refreshTheme?: () => void;
     readonly host: HTMLElement;
     readonly toolbar: HTMLElement;
     readonly legend?: HTMLElement;
     readonly layoutElementBudget?: number;
     groupsEnabled: boolean;
+    showResourceDeclarations?: boolean;
     readonly expandedGroupPaths: Set<string>;
     renderer?: GraphRenderer;
     fitOnNextRender: boolean;
     anchorElementIdOnNextRender?: string;
+    revealOnNextRender?: {
+        readonly selection: Selection;
+        readonly revision: number;
+    };
+    captureRevision?: number;
 };
 //# sourceMappingURL=panelTypes.d.ts.map

package/dist/panelTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panelTypes.d.ts","sourceRoot":"","sources":["../src/panelTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,MAAM,MAAM,iBAAiB,GAAG;IAC5B,QAAQ,CAAC,IAAI,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAC3F,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,UAAU,CAAC,EAAE,mBAAmB,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,SAAS,GACf;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC5B;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAChC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC7B;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,CAAC;AACpG,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,KAAK,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG;IACzB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;IACjC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACnC,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACxC,CAAC"}
+{"version":3,"file":"panelTypes.d.ts","sourceRoot":"","sources":["../src/panelTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,MAAM,MAAM,iBAAiB,GAAG;IAC5B,QAAQ,CAAC,IAAI,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAC3F,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,UAAU,CAAC,EAAE,mBAAmB,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,SAAS,GACf;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC5B;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAChC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC7B;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC9B;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,CAAC;AACpG,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,KAAK,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;IACjC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACnC,aAAa,EAAE,OAAO,CAAC;IACvB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,kBAAkB,CAAC,EAAE;QAAE,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;QAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAClF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC"}

package/dist/panelTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"panelTypes.js","sourceRoot":"","sources":["../src/panelTypes.ts"],"names":[],"mappings":"","sourcesContent":["import type { GraphRenderer } from './panelGraphRenderer.ts';\nimport type { FrameGraphDebugEdge } from './debugCaptureModel.ts';\n\nexport type GraphFlowRelation = {\n    readonly role: 'declaration' | 'value' | 'ordering' | 'output-producer' | 'output-initial';\n    readonly nodeIds: readonly string[];\n    readonly rootKey?: string;\n    readonly dependency?: FrameGraphDebugEdge;\n};\n\nexport type Selection =\n    | { kind: 'node'; id: string }\n    | { kind: 'group'; pathKey: string }\n    | { kind: 'resource'; id: string }\n    | { kind: 'root'; key: string }\n    | { kind: 'culled'; index: number }\n    | { kind: 'allocation'; id: string }\n    | { kind: 'segment'; index: number };\n\nexport type WorkbenchTab = 'overview' | 'graph' | 'passes' | 'resources' | 'memory' | 'diagnostics';\nexport type PassesSubview = 'list' | 'groups';\nexport type InspectorTab = 'summary' | 'relations' | 'raw';\n\nexport type GraphViewState = {\n    readonly host: HTMLElement;\n    readonly toolbar: HTMLElement;\n    readonly legend?: HTMLElement;\n\treadonly layoutElementBudget?: number;\n    groupsEnabled: boolean;\n    readonly expandedGroupPaths: Set<string>;\n    renderer?: GraphRenderer;\n    fitOnNextRender: boolean;\n    anchorElementIdOnNextRender?: string;\n};\n"]}
+{"version":3,"file":"panelTypes.js","sourceRoot":"","sources":["../src/panelTypes.ts"],"names":[],"mappings":"","sourcesContent":["import type { GraphVisualTheme } from './panelVisualTheme.ts';\nimport type { GraphRenderer } from './panelGraphRenderer.ts';\nimport type { FrameGraphDebugEdge } from './debugCaptureModel.ts';\n\nexport type GraphFlowRelation = {\n    readonly role: 'declaration' | 'value' | 'ordering' | 'output-producer' | 'output-initial';\n    readonly nodeIds: readonly string[];\n    readonly rootKey?: string;\n    readonly dependency?: FrameGraphDebugEdge;\n};\n\nexport type Selection =\n    | { kind: 'node'; id: string }\n    | { kind: 'group'; pathKey: string }\n    | { kind: 'resource'; id: string }\n    | { kind: 'root'; key: string }\n    | { kind: 'culled'; id: string }\n    | { kind: 'allocation'; id: string }\n    | { kind: 'segment'; index: number };\n\nexport type WorkbenchTab = 'overview' | 'graph' | 'passes' | 'resources' | 'memory' | 'diagnostics';\nexport type PassesSubview = 'list' | 'groups';\nexport type InspectorTab = 'summary' | 'relations' | 'raw';\n\nexport type GraphViewState = {\n    theme?: GraphVisualTheme;\n    readonly refreshTheme?: () => void;\n    readonly host: HTMLElement;\n    readonly toolbar: HTMLElement;\n    readonly legend?: HTMLElement;\n\treadonly layoutElementBudget?: number;\n    groupsEnabled: boolean;\n    showResourceDeclarations?: boolean;\n    readonly expandedGroupPaths: Set<string>;\n    renderer?: GraphRenderer;\n    fitOnNextRender: boolean;\n    anchorElementIdOnNextRender?: string;\n    revealOnNextRender?: { readonly selection: Selection; readonly revision: number };\n    captureRevision?: number;\n};\n"]}

package/dist/panelVisualTheme.d.ts

@@ -1,84 +1,181 @@
-export declare const FRAME_GRAPH_DEBUG_VISUAL_THEME: {
-    readonly canvas: "#0b0f14";
-    readonly panel: "#0f151d";
-    readonly surface: "#131b24";
-    readonly surfaceRaised: "#18222d";
-    readonly surfaceHover: "#1d2935";
-    readonly border: "#263341";
-    readonly text: "#e6edf3";
-    readonly textSecondary: "#b4beca";
-    readonly muted: "#8b98a5";
-    readonly accent: "#38bdf8";
-    readonly success: "#34d399";
-    readonly warning: "#fbbf24";
-    readonly danger: "#fb7185";
-    readonly fontUi: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
-    readonly fontMono: "ui-monospace, SFMono-Regular, Consolas, \"Liberation Mono\", monospace";
+import type { InspectorThemeVariables } from './theme.ts';
+type Variable = keyof InspectorThemeVariables;
+export declare function mixHex(front: string, back: string, amount: number): string;
+export declare function defaultThemeValue(key: Variable, variables?: InspectorThemeVariables): string;
+export declare function createGraphVisualTheme(read?: (key: Variable) => string): {
+    canvas: string;
+    surface: string;
+    surfaceRaised: string;
+    text: string;
+    muted: string;
+    render: {
+        stroke: string;
+        fill: string;
+    };
+    compute: {
+        stroke: string;
+        fill: string;
+    };
+    copy: {
+        stroke: string;
+        fill: string;
+    };
+    clear: {
+        stroke: string;
+        fill: string;
+    };
+    command: {
+        stroke: string;
+        fill: string;
+    };
+    external: {
+        stroke: string;
+        fill: string;
+    };
+    declaration: {
+        stroke: string;
+        fill: string;
+    };
+    output: {
+        stroke: string;
+        fill: string;
+    };
+    texture: {
+        stroke: string;
+        fill: string;
+    };
+    buffer: {
+        stroke: string;
+        fill: string;
+    };
+    group: {
+        stroke: string;
+        fill: string;
+        alternateFill: string;
+    };
+    dependency: {
+        value: string;
+        ordering: string;
+    };
+    access: {
+        read: string;
+        write: string;
+    };
+    selected: string;
+    hover: string;
+    activeBackground: {
+        color: string;
+        opacity: number;
+        size: number;
+    };
+    culled: {
+        stroke: string;
+        fill: string;
+    };
+    fontFamily: string;
+    fontSize: number;
+    nodeBorderWidth: number;
+    groupBorderWidth: number;
+    edgeWidth: number;
+    edgeOpacity: number;
+    orderingOpacity: number;
+    groupOpacity: number;
+    arrowScale: number;
+    hoverWidth: number;
+    selectedWidth: number;
 };
+export type GraphVisualTheme = ReturnType<typeof createGraphVisualTheme>;
 export declare const GRAPH_VISUAL_THEME: {
-    readonly canvas: "#0b0f14";
-    readonly surface: "#131b24";
-    readonly surfaceRaised: "#18222d";
-    readonly text: "#e6edf3";
-    readonly muted: "#8b98a5";
-    readonly render: {
+    canvas: string;
+    surface: string;
+    surfaceRaised: string;
+    text: string;
+    muted: string;
+    render: {
+        stroke: string;
+        fill: string;
+    };
+    compute: {
         stroke: string;
         fill: string;
     };
-    readonly compute: {
+    copy: {
         stroke: string;
         fill: string;
     };
-    readonly copy: {
+    clear: {
         stroke: string;
         fill: string;
     };
-    readonly clear: {
+    command: {
         stroke: string;
         fill: string;
     };
-    readonly command: {
+    external: {
         stroke: string;
         fill: string;
     };
-    readonly external: {
+    declaration: {
         stroke: string;
         fill: string;
     };
-    readonly declaration: {
+    output: {
         stroke: string;
         fill: string;
     };
-    readonly output: {
+    texture: {
         stroke: string;
         fill: string;
     };
-    readonly texture: {
-        readonly stroke: "#f472b6";
-        readonly fill: "#3c1f32";
+    buffer: {
+        stroke: string;
+        fill: string;
     };
-    readonly buffer: {
-        readonly stroke: "#2dd4bf";
-        readonly fill: "#123632";
+    group: {
+        stroke: string;
+        fill: string;
+        alternateFill: string;
     };
-    readonly group: {
-        readonly stroke: "#64748b";
-        readonly fill: "#141c29";
-        readonly alternateFill: "#172033";
+    dependency: {
+        value: string;
+        ordering: string;
     };
-    readonly dependency: {
-        readonly value: "#94a3b8";
-        readonly ordering: "#8593a6";
+    access: {
+        read: string;
+        write: string;
     };
-    readonly access: {
-        readonly read: "#2dd4bf";
-        readonly write: "#f59e0b";
+    selected: string;
+    hover: string;
+    activeBackground: {
+        color: string;
+        opacity: number;
+        size: number;
     };
-    readonly selected: "#38bdf8";
-    readonly hover: "#cbd5e1";
-    readonly culled: {
-        readonly stroke: "#64748b";
-        readonly fill: "#171d24";
+    culled: {
+        stroke: string;
+        fill: string;
     };
+    fontFamily: string;
+    fontSize: number;
+    nodeBorderWidth: number;
+    groupBorderWidth: number;
+    edgeWidth: number;
+    edgeOpacity: number;
+    orderingOpacity: number;
+    groupOpacity: number;
+    arrowScale: number;
+    hoverWidth: number;
+    selectedWidth: number;
+};
+export declare const FRAME_GRAPH_DEBUG_VISUAL_THEME: {
+    canvas: string;
+    panel: string;
+    surface: string;
+    surfaceRaised: string;
+    surfaceHover: string;
+    text: string;
+    textSecondary: string;
+    muted: string;
 };
+export {};
 //# sourceMappingURL=panelVisualTheme.d.ts.map

package/dist/panelVisualTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panelVisualTheme.d.ts","sourceRoot":"","sources":["../src/panelVisualTheme.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;;;CAgBjC,CAAC;AAWX,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBrB,CAAC"}
+{"version":3,"file":"panelVisualTheme.d.ts","sourceRoot":"","sources":["../src/panelVisualTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,KAAK,QAAQ,GAAG,MAAM,uBAAuB,CAAC;AAC9C,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAE1E;AACD,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,GAAE,uBAAwC,GAAG,MAAM,CAK5G;AACD,wBAAgB,sBAAsB,CAAC,IAAI,GAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,MAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBzF;AACD,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACzE,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA2B,CAAC;AAC3D,eAAO,MAAM,8BAA8B;;;;;;;;;CAE1C,CAAC"}

package/dist/panelVisualTheme.js

@@ -1,47 +1,37 @@
-export const FRAME_GRAPH_DEBUG_VISUAL_THEME = {
-    canvas: '#0b0f14',
-    panel: '#0f151d',
-    surface: '#131b24',
-    surfaceRaised: '#18222d',
-    surfaceHover: '#1d2935',
-    border: '#263341',
-    text: '#e6edf3',
-    textSecondary: '#b4beca',
-    muted: '#8b98a5',
-    accent: '#38bdf8',
-    success: '#34d399',
-    warning: '#fbbf24',
-    danger: '#fb7185',
-    fontUi: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    fontMono: 'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace',
-};
-function category(stroke) {
-    const canvas = FRAME_GRAPH_DEBUG_VISUAL_THEME.canvas;
-    const fill = '#' + [1, 3, 5].map((offset) => Math.round(parseInt(stroke.slice(offset, offset + 2), 16) * 0.18
-        + parseInt(canvas.slice(offset, offset + 2), 16) * 0.82).toString(16).padStart(2, '0')).join('');
-    return { stroke, fill };
+import { stormVariables } from "./themeDefinitions.js";
+export function mixHex(front, back, amount) {
+    return '#' + [1, 3, 5].map(offset => Math.round(parseInt(front.slice(offset, offset + 2), 16) * amount + parseInt(back.slice(offset, offset + 2), 16) * (1 - amount)).toString(16).padStart(2, '0')).join('');
+}
+export function defaultThemeValue(key, variables = stormVariables) {
+    let value = variables[key];
+    value = value.replace(/var\((--zfgi-[\w-]+), ([^()]+)\)/g, (_match, name) => defaultThemeValue(name, variables));
+    const mix = /^color-mix\(in srgb, (#[\da-f]+) ([\d.]+)%, (#[\da-f]+)\)$/i.exec(value);
+    return mix ? mixHex(mix[1], mix[3], Number(mix[2]) / 100) : value;
 }
-export const GRAPH_VISUAL_THEME = {
-    canvas: FRAME_GRAPH_DEBUG_VISUAL_THEME.canvas,
-    surface: FRAME_GRAPH_DEBUG_VISUAL_THEME.surface,
-    surfaceRaised: FRAME_GRAPH_DEBUG_VISUAL_THEME.surfaceRaised,
-    text: FRAME_GRAPH_DEBUG_VISUAL_THEME.text,
-    muted: FRAME_GRAPH_DEBUG_VISUAL_THEME.muted,
-    render: category('#57C785'),
-    compute: category('#9AA5FF'),
-    copy: category('#F2CD60'),
-    clear: category('#C4CF89'),
-    command: category('#CF91E8'),
-    external: category('#F29A67'),
-    declaration: category('#B9AB94'),
-    output: category('#EC91AE'),
-    texture: { stroke: '#f472b6', fill: '#3c1f32' },
-    buffer: { stroke: '#2dd4bf', fill: '#123632' },
-    group: { stroke: '#64748b', fill: '#141c29', alternateFill: '#172033' },
-    dependency: { value: '#94a3b8', ordering: '#8593a6' },
-    access: { read: '#2dd4bf', write: '#f59e0b' },
-    selected: FRAME_GRAPH_DEBUG_VISUAL_THEME.accent,
-    hover: '#cbd5e1',
-    culled: { stroke: '#64748b', fill: '#171d24' },
+export function createGraphVisualTheme(read = defaultThemeValue) {
+    const category = (kind) => ({
+        stroke: read(('--zfgi-graph-' + kind + '-stroke')), fill: read(('--zfgi-graph-' + kind + '-fill')),
+    });
+    const number = (key) => parseFloat(read(key));
+    return {
+        canvas: read('--zfgi-canvas'), surface: read('--zfgi-surface'), surfaceRaised: read('--zfgi-surface-raised'),
+        text: read('--zfgi-graph-text'), muted: read('--zfgi-graph-muted'),
+        render: category('render'), compute: category('compute'), copy: category('copy'), clear: category('clear'),
+        command: category('command'), external: category('external'), declaration: category('declaration'), output: category('output'), texture: category('texture'), buffer: category('buffer'),
+        group: { stroke: read('--zfgi-graph-group-stroke'), fill: read('--zfgi-graph-group-fill'), alternateFill: read('--zfgi-graph-group-alternate-fill') },
+        dependency: { value: read('--zfgi-graph-value'), ordering: read('--zfgi-graph-ordering') },
+        access: { read: read('--zfgi-graph-read'), write: read('--zfgi-graph-write') },
+        selected: read('--zfgi-graph-selected'), hover: read('--zfgi-graph-hover'),
+        activeBackground: { color: read('--zfgi-graph-active-bg'), opacity: number('--zfgi-graph-active-bg-opacity'), size: number('--zfgi-graph-active-bg-size') },
+        culled: { stroke: read('--zfgi-graph-culled-stroke'), fill: read('--zfgi-graph-culled-fill') },
+        fontFamily: read('--zfgi-graph-font-family'), fontSize: number('--zfgi-graph-font-size'),
+        nodeBorderWidth: number('--zfgi-graph-node-border-width'), groupBorderWidth: number('--zfgi-graph-group-border-width'),
+        edgeWidth: number('--zfgi-graph-edge-width'), edgeOpacity: number('--zfgi-graph-edge-opacity'), orderingOpacity: number('--zfgi-graph-ordering-opacity'), groupOpacity: number('--zfgi-graph-group-opacity'),
+        arrowScale: number('--zfgi-graph-arrow-scale'), hoverWidth: number('--zfgi-graph-hover-width'), selectedWidth: number('--zfgi-graph-selected-width'),
+    };
+}
+export const GRAPH_VISUAL_THEME = createGraphVisualTheme();
+export const FRAME_GRAPH_DEBUG_VISUAL_THEME = {
+    canvas: defaultThemeValue('--zfgi-canvas'), panel: defaultThemeValue('--zfgi-background'), surface: defaultThemeValue('--zfgi-surface'), surfaceRaised: defaultThemeValue('--zfgi-surface-raised'), surfaceHover: defaultThemeValue('--zfgi-surface-hover'), text: defaultThemeValue('--zfgi-text'), textSecondary: defaultThemeValue('--zfgi-text-secondary'), muted: defaultThemeValue('--zfgi-muted'),
 };
 //# sourceMappingURL=panelVisualTheme.js.map

package/dist/panelVisualTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"panelVisualTheme.js","sourceRoot":"","sources":["../src/panelVisualTheme.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,8BAA8B,GAAG;IAC7C,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,SAAS;IACxB,YAAY,EAAE,SAAS;IACvB,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,aAAa,EAAE,SAAS;IACxB,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,sEAAsE;IAC9E,QAAQ,EAAE,sEAAsE;CACvE,CAAC;AAEX,SAAS,QAAQ,CAAC,MAAc;IAC/B,MAAM,MAAM,GAAG,8BAA8B,CAAC,MAAM,CAAC;IACrD,MAAM,IAAI,GAAG,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CACtD,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI;UACnD,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,CACvD,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC1C,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;AACzB,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG;IACjC,MAAM,EAAE,8BAA8B,CAAC,MAAM;IAC7C,OAAO,EAAE,8BAA8B,CAAC,OAAO;IAC/C,aAAa,EAAE,8BAA8B,CAAC,aAAa;IAC3D,IAAI,EAAE,8BAA8B,CAAC,IAAI;IACzC,KAAK,EAAE,8BAA8B,CAAC,KAAK;IAC3C,MAAM,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC5B,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC7B,WAAW,EAAE,QAAQ,CAAC,SAAS,CAAC;IAChC,MAAM,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAC/C,MAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAC9C,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE;IACvE,UAAU,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE;IACrD,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IAC7C,QAAQ,EAAE,8BAA8B,CAAC,MAAM;IAC/C,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;CACrC,CAAC","sourcesContent":["export const FRAME_GRAPH_DEBUG_VISUAL_THEME = {\n\tcanvas: '#0b0f14',\n\tpanel: '#0f151d',\n\tsurface: '#131b24',\n\tsurfaceRaised: '#18222d',\n\tsurfaceHover: '#1d2935',\n\tborder: '#263341',\n\ttext: '#e6edf3',\n\ttextSecondary: '#b4beca',\n\tmuted: '#8b98a5',\n\taccent: '#38bdf8',\n\tsuccess: '#34d399',\n\twarning: '#fbbf24',\n\tdanger: '#fb7185',\n\tfontUi: 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n\tfontMono: 'ui-monospace, SFMono-Regular, Consolas, \"Liberation Mono\", monospace',\n} as const;\n\nfunction category(stroke: string) {\n\tconst canvas = FRAME_GRAPH_DEBUG_VISUAL_THEME.canvas;\n\tconst fill = '#' + [1, 3, 5].map((offset) => Math.round(\n\t\tparseInt(stroke.slice(offset, offset + 2), 16) * 0.18\n\t\t+ parseInt(canvas.slice(offset, offset + 2), 16) * 0.82,\n\t).toString(16).padStart(2, '0')).join('');\n\treturn { stroke, fill };\n}\n\nexport const GRAPH_VISUAL_THEME = {\n\tcanvas: FRAME_GRAPH_DEBUG_VISUAL_THEME.canvas,\n\tsurface: FRAME_GRAPH_DEBUG_VISUAL_THEME.surface,\n\tsurfaceRaised: FRAME_GRAPH_DEBUG_VISUAL_THEME.surfaceRaised,\n\ttext: FRAME_GRAPH_DEBUG_VISUAL_THEME.text,\n\tmuted: FRAME_GRAPH_DEBUG_VISUAL_THEME.muted,\n\trender: category('#57C785'),\n\tcompute: category('#9AA5FF'),\n\tcopy: category('#F2CD60'),\n\tclear: category('#C4CF89'),\n\tcommand: category('#CF91E8'),\n\texternal: category('#F29A67'),\n\tdeclaration: category('#B9AB94'),\n\toutput: category('#EC91AE'),\n\ttexture: { stroke: '#f472b6', fill: '#3c1f32' },\n\tbuffer: { stroke: '#2dd4bf', fill: '#123632' },\n\tgroup: { stroke: '#64748b', fill: '#141c29', alternateFill: '#172033' },\n\tdependency: { value: '#94a3b8', ordering: '#8593a6' },\n\taccess: { read: '#2dd4bf', write: '#f59e0b' },\n\tselected: FRAME_GRAPH_DEBUG_VISUAL_THEME.accent,\n\thover: '#cbd5e1',\n\tculled: { stroke: '#64748b', fill: '#171d24' },\n} as const;\r\n"]}
+{"version":3,"file":"panelVisualTheme.js","sourceRoot":"","sources":["../src/panelVisualTheme.ts"],"names":[],"mappings":"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","sourcesContent":["import { stormVariables } from './themeDefinitions.ts';\nimport type { InspectorThemeVariables } from './theme.ts';\ntype Variable = keyof InspectorThemeVariables;\nexport function mixHex(front: string, back: string, amount: number): string {\n    return '#' + [1, 3, 5].map(offset => Math.round(parseInt(front.slice(offset, offset + 2), 16) * amount + parseInt(back.slice(offset, offset + 2), 16) * (1 - amount)).toString(16).padStart(2, '0')).join('');\n}\nexport function defaultThemeValue(key: Variable, variables: InspectorThemeVariables = stormVariables): string {\n    let value: string = variables[key];\n    value = value.replace(/var\\((--zfgi-[\\w-]+), ([^()]+)\\)/g, (_match, name: Variable) => defaultThemeValue(name, variables));\n    const mix = /^color-mix\\(in srgb, (#[\\da-f]+) ([\\d.]+)%, (#[\\da-f]+)\\)$/i.exec(value);\n    return mix ? mixHex(mix[1]!, mix[3]!, Number(mix[2]) / 100) : value;\n}\nexport function createGraphVisualTheme(read: (key: Variable) => string = defaultThemeValue) {\n    const category = (kind: 'render' | 'compute' | 'copy' | 'clear' | 'command' | 'external' | 'declaration' | 'output' | 'texture' | 'buffer') => ({\n        stroke: read(('--zfgi-graph-' + kind + '-stroke') as Variable), fill: read(('--zfgi-graph-' + kind + '-fill') as Variable),\n    });\n    const number = (key: Variable) => parseFloat(read(key));\n    return {\n        canvas: read('--zfgi-canvas'), surface: read('--zfgi-surface'), surfaceRaised: read('--zfgi-surface-raised'),\n        text: read('--zfgi-graph-text'), muted: read('--zfgi-graph-muted'),\n        render: category('render'), compute: category('compute'), copy: category('copy'), clear: category('clear'),\n        command: category('command'), external: category('external'), declaration: category('declaration'), output: category('output'), texture: category('texture'), buffer: category('buffer'),\n        group: { stroke: read('--zfgi-graph-group-stroke'), fill: read('--zfgi-graph-group-fill'), alternateFill: read('--zfgi-graph-group-alternate-fill') },\n        dependency: { value: read('--zfgi-graph-value'), ordering: read('--zfgi-graph-ordering') },\n        access: { read: read('--zfgi-graph-read'), write: read('--zfgi-graph-write') },\n        selected: read('--zfgi-graph-selected'), hover: read('--zfgi-graph-hover'),\n        activeBackground: { color: read('--zfgi-graph-active-bg'), opacity: number('--zfgi-graph-active-bg-opacity'), size: number('--zfgi-graph-active-bg-size') },\n        culled: { stroke: read('--zfgi-graph-culled-stroke'), fill: read('--zfgi-graph-culled-fill') },\n        fontFamily: read('--zfgi-graph-font-family'), fontSize: number('--zfgi-graph-font-size'),\n        nodeBorderWidth: number('--zfgi-graph-node-border-width'), groupBorderWidth: number('--zfgi-graph-group-border-width'),\n        edgeWidth: number('--zfgi-graph-edge-width'), edgeOpacity: number('--zfgi-graph-edge-opacity'), orderingOpacity: number('--zfgi-graph-ordering-opacity'), groupOpacity: number('--zfgi-graph-group-opacity'),\n        arrowScale: number('--zfgi-graph-arrow-scale'), hoverWidth: number('--zfgi-graph-hover-width'), selectedWidth: number('--zfgi-graph-selected-width'),\n    };\n}\nexport type GraphVisualTheme = ReturnType<typeof createGraphVisualTheme>;\nexport const GRAPH_VISUAL_THEME = createGraphVisualTheme();\nexport const FRAME_GRAPH_DEBUG_VISUAL_THEME = {\n    canvas: defaultThemeValue('--zfgi-canvas'), panel: defaultThemeValue('--zfgi-background'), surface: defaultThemeValue('--zfgi-surface'), surfaceRaised: defaultThemeValue('--zfgi-surface-raised'), surfaceHover: defaultThemeValue('--zfgi-surface-hover'), text: defaultThemeValue('--zfgi-text'), textSecondary: defaultThemeValue('--zfgi-text-secondary'), muted: defaultThemeValue('--zfgi-muted'),\n};\n"]}

package/dist/panelWorkbenchHelpers.d.ts

@@ -1,10 +1,12 @@
 import type { FrameGraphDebugResource, FrameGraphDebugViewModel } from './debugCaptureModel.ts';
-import type { Selection } from './panelTypes.ts';
+import type { Selection, WorkbenchTab } from './panelTypes.ts';
 export type WorkbenchCallbacks = {
     readonly onSelect: (selection: Selection) => void;
     readonly onHover: (selection: Selection | undefined) => void;
     readonly onGroupToggle: (pathKey: string) => void;
     readonly isGroupExpanded: (pathKey: string) => boolean;
+    readonly onReveal?: (selection: Selection, tab: WorkbenchTab) => void;
+    readonly onNavigate?: (tab: WorkbenchTab, filter?: 'culled') => void;
 };
 export type WorkbenchTableColumn = {
     readonly label: string;
@@ -31,4 +33,13 @@ export declare function formatResourceDescriptor(resource: FrameGraphDebugResour
 export declare function resourceAccessCounts(snapshot: FrameGraphDebugViewModel, resourceId: string): readonly [number, number];
 export declare function createEmptyTableRow(columnCount: number, text: string): HTMLTableRowElement;
 export declare function resourceLabel(snapshot: FrameGraphDebugViewModel, resourceId: string): string;
+/** All tablists use a single tab stop and automatic keyboard activation. */
+export declare function enableTabKeyboard(tabList: HTMLElement): void;
+export declare function formatTimingCoverage(timed: number, eligible: number): string;
+export declare function formatMeasuredGpuWork(micros: number, timed: number, eligible: number): string;
+export declare function formatEstimateCoverage(bytes: number | undefined, coverage: {
+    known: number;
+    total: number;
+}): string;
+export declare function writeClipboardText(text: string): Promise<void>;
 //# sourceMappingURL=panelWorkbenchHelpers.d.ts.map

package/dist/panelWorkbenchHelpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panelWorkbenchHelpers.d.ts","sourceRoot":"","sources":["../src/panelWorkbenchHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,uBAAuB,EACvB,wBAAwB,EACxB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAChC,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;CACvD,CAAC;AACF,MAAM,MAAM,oBAAoB,GAAG;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC9C,CAAC;AAGF,wBAAgB,YAAY,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,CAUzD;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAEzF;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAW3H;AAED,wBAAgB,kBAAkB,CACjC,IAAI,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,EAChC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,kBAAkB,GAC3B,IAAI,CAQN;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,CAM/D;AAED,wBAAgB,iBAAiB,CAChC,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAC9B,gBAAgB,CAQlB;AAED,wBAAgB,kBAAkB,CACjC,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,EAC7D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAC/B,iBAAiB,CAYnB;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,SAAS,oBAAoB,EAAE,GAAG;IAC9E,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,QAAQ,CAAC,IAAI,EAAE,uBAAuB,CAAC;CACvC,CAkBA;AAED,wBAAgB,mBAAmB,CAClC,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,kBAAkB,EAC7B,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,GACrC,oBAAoB,CAMtB;AAED,wBAAgB,oBAAoB,CACnC,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,GACtC,iBAAiB,CAOnB;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,SAAO,GAAG,oBAAoB,CAQ/E;AAED,wBAAgB,SAAS,CAAC,QAAQ,EAAE,wBAAwB,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAGjG;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAEtE;AAED,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,uBAAuB,GAAG,MAAM,CAkBlF;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,wBAAwB,EAAE,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAQtH;AAED,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAO1F;AAED,wBAAgB,aAAa,CAAC,QAAQ,EAAE,wBAAwB,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAG5F"}
+{"version":3,"file":"panelWorkbenchHelpers.d.ts","sourceRoot":"","sources":["../src/panelWorkbenchHelpers.ts"],"names":[],"mappings":"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"}

package/dist/panelWorkbenchHelpers.js

@@ -5,7 +5,7 @@ export function selectionKey(selection) {
         case 'group': return `group:${selection.pathKey}`;
         case 'resource': return `resource:${selection.id}`;
         case 'root': return `root:${selection.key}`;
-        case 'culled': return `culled:${selection.index}`;
+        case 'culled': return `culled:${selection.id}`;
         case 'allocation': return `allocation:${selection.id}`;
         case 'segment': return `segment:${selection.index}`;
     }
@@ -159,4 +159,65 @@ export function resourceLabel(snapshot, resourceId) {
     const resource = snapshot.resourceById.get(resourceId);
     return resource ? labelResource(resource) : `resource-${resourceId}`;
 }
+/** All tablists use a single tab stop and automatic keyboard activation. */
+export function enableTabKeyboard(tabList) {
+    const buttons = () => Array.from(tabList.querySelectorAll('[role="tab"]'));
+    const sync = () => {
+        for (const button of buttons())
+            button.tabIndex = button.getAttribute('aria-selected') === 'true' && !button.disabled ? 0 : -1;
+    };
+    tabList.addEventListener('click', sync);
+    tabList.addEventListener('keydown', (event) => {
+        if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+            return;
+        const available = buttons().filter((button) => !button.disabled && !button.hidden);
+        if (!available.length)
+            return;
+        const index = Math.max(0, available.indexOf(document.activeElement));
+        const next = event.key === 'Home' ? 0 : event.key === 'End' ? available.length - 1
+            : (index + (event.key === 'ArrowRight' ? 1 : -1) + available.length) % available.length;
+        event.preventDefault();
+        event.stopPropagation();
+        available[next].click();
+        available[next].focus();
+        sync();
+    });
+    sync();
+}
+export function formatTimingCoverage(timed, eligible) {
+    if (eligible === 0)
+        return 'Not applicable · no eligible passes';
+    if (timed === 0)
+        return `Not collected · 0/${eligible}`;
+    return `${timed === eligible ? 'Complete' : 'Partial'} · ${timed}/${eligible} timed`;
+}
+export function formatMeasuredGpuWork(micros, timed, eligible) {
+    if (eligible === 0)
+        return 'Not applicable';
+    if (timed === 0)
+        return 'Not collected';
+    return `${(micros / 1000).toFixed(3)} ms · ${formatTimingCoverage(timed, eligible)}`;
+}
+export function formatEstimateCoverage(bytes, coverage) {
+    return bytes === undefined ? `Unknown · ${coverage.known}/${coverage.total} sizes known` : formatBytes(bytes);
+}
+export async function writeClipboardText(text) {
+    if (navigator.clipboard?.writeText)
+        return navigator.clipboard.writeText(text);
+    const input = document.createElement('textarea');
+    input.value = text;
+    input.readOnly = true;
+    input.style.cssText = 'position:fixed;left:-9999px;top:0';
+    document.body.append(input);
+    const previous = document.activeElement;
+    input.select();
+    try {
+        if (!document.execCommand('copy'))
+            throw new Error('Clipboard is unavailable.');
+    }
+    finally {
+        input.remove();
+        previous?.focus();
+    }
+}
 //# sourceMappingURL=panelWorkbenchHelpers.js.map