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

package/dist/panelGraphView.js

@@ -1,10 +1,13 @@
+import { GRAPH_VISUAL_THEME } from "./panelVisualTheme.js";
 import { CytoscapeGraphRenderer } from "./panelCytoscapeGraphRenderer.js";
 import { createGraphScene } from "./panelGraphScene.js";
 import { createGraphLegend } from "./panelGraphVisuals.js";
 const graphSceneCache = new WeakMap();
 export function renderGraphView(graphView, snapshot, selected, hovered, onSelect, onHover, onToggleGroup) {
     const scene = resolveGraphScene(graphView, snapshot);
-    renderGraphLegend(graphView.legend, scene);
+    if (!graphView.theme)
+        graphView.refreshTheme?.();
+    renderGraphLegend(graphView.legend, snapshot, graphView.theme, graphView.showResourceDeclarations);
     const elementCount = scene.nodes.length + scene.edges.length;
     const layoutElementBudget = graphView.layoutElementBudget ?? Number.MAX_SAFE_INTEGER;
     if (elementCount > layoutElementBudget) {
@@ -21,29 +24,34 @@ export function renderGraphView(graphView, snapshot, selected, hovered, onSelect
     graphView.renderer ??= new CytoscapeGraphRenderer(graphView.host);
     graphView.renderer.render({
         scene,
+        theme: graphView.theme,
+        onVisible: graphView.refreshTheme,
         selected,
         hovered,
         fit: graphView.fitOnNextRender,
         anchorElementId: graphView.anchorElementIdOnNextRender,
+        reveal: graphView.revealOnNextRender,
+        captureRevision: graphView.captureRevision,
         onSelect,
         onHover,
         onToggleGroup,
     });
     graphView.fitOnNextRender = false;
     graphView.anchorElementIdOnNextRender = undefined;
+    graphView.revealOnNextRender = undefined;
 }
 export function resolveGraphScene(graphView, snapshot) {
     const optionsKey = JSON.stringify([
-        graphView.graphMode,
         graphView.groupsEnabled,
+        graphView.showResourceDeclarations ?? true,
         [...graphView.expandedGroupPaths].sort(),
     ]);
     const cached = graphSceneCache.get(graphView);
     if (cached?.snapshot === snapshot && cached.optionsKey === optionsKey)
         return cached.scene;
     const scene = createGraphScene(snapshot, {
-        mode: graphView.graphMode,
         groupsEnabled: graphView.groupsEnabled,
+        showResourceDeclarations: graphView.showResourceDeclarations,
         expandedGroupPaths: graphView.expandedGroupPaths,
     });
     graphSceneCache.set(graphView, { snapshot, optionsKey, scene });
@@ -53,6 +61,7 @@ export function fitGraph(graphView) {
     graphView.renderer?.fit();
 }
 export function resizeGraph(graphView) {
+    graphView.refreshTheme?.();
     graphView.renderer?.resize();
 }
 export function destroyGraph(graphView) {
@@ -60,15 +69,28 @@ export function destroyGraph(graphView) {
     graphView.renderer = undefined;
     graphSceneCache.delete(graphView);
 }
-function renderGraphLegend(host, scene) {
+export function renderGraphLegend(host, snapshot, theme = GRAPH_VISUAL_THEME, showResourceDeclarations = true) {
     if (!host)
         return;
-    const entries = createGraphLegend(scene);
-    const key = entries.map((entry) => entry.key).join('|');
+    const entries = createGraphLegend(snapshot, theme, showResourceDeclarations);
+    const key = JSON.stringify(entries);
     if (host.dataset.legendKey === key)
         return;
     host.dataset.legendKey = key;
-    host.replaceChildren(...entries.map((entry) => {
+    host.replaceChildren();
+    let group;
+    for (const entry of entries) {
+        if (group?.getAttribute('aria-label') !== entry.group) {
+            group = document.createElement('span');
+            group.className = 'zenfg-inspector-legend-group';
+            group.setAttribute('role', 'group');
+            group.setAttribute('aria-label', entry.group);
+            const heading = document.createElement('span');
+            heading.className = 'zenfg-inspector-legend-heading';
+            heading.textContent = entry.group;
+            group.appendChild(heading);
+            host.appendChild(group);
+        }
         const item = document.createElement('span');
         item.className = 'zenfg-inspector-legend-item';
         const swatch = document.createElement('span');
@@ -79,10 +101,21 @@ function renderGraphLegend(host, scene) {
         if (entry.hollowArrow)
             swatch.dataset.hollowArrow = 'true';
         swatch.style.setProperty('--zenfg-inspector-legend-color', entry.color);
+        if (entry.shape === 'cut-rectangle' || entry.shape === 'tag') {
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.setAttribute('viewBox', '0 0 20 14');
+            svg.setAttribute('aria-hidden', 'true');
+            const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+            polygon.setAttribute('points', entry.shape === 'tag'
+                ? '1,1 16,1 19,7 16,13 1,13'
+                : '4,1 16,1 19,4 19,10 16,13 4,13 1,10 1,4');
+            svg.appendChild(polygon);
+            swatch.appendChild(svg);
+        }
         const label = document.createElement('span');
         label.textContent = entry.label;
         item.append(swatch, label);
-        return item;
-    }));
+        group.appendChild(item);
+    }
 }
 //# sourceMappingURL=panelGraphView.js.map

package/dist/panelGraphView.js.map

@@ -1 +1 @@
-{"version":3,"file":"panelGraphView.js","sourceRoot":"","sources":["../src/panelGraphView.ts"],"names":[],"mappings":"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","sourcesContent":["import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';\nimport { CytoscapeGraphRenderer } from './panelCytoscapeGraphRenderer.ts';\nimport { createGraphScene, type GraphScene } from './panelGraphScene.ts';\nimport { createGraphLegend } from './panelGraphVisuals.ts';\nimport type { GraphViewState, Selection } from './panelTypes.ts';\n\ntype GraphSceneCacheEntry = {\n    readonly snapshot: FrameGraphDebugViewModel;\n    readonly optionsKey: string;\n    readonly scene: GraphScene;\n};\n\nconst graphSceneCache = new WeakMap<GraphViewState, GraphSceneCacheEntry>();\n\nexport function renderGraphView(\n    graphView: GraphViewState,\n    snapshot: FrameGraphDebugViewModel,\n    selected: Selection | undefined,\n    hovered: Selection | undefined,\n    onSelect: (selection: Selection) => void,\n    onHover: (selection: Selection | undefined) => void,\n    onToggleGroup: (pathKey: string) => void,\n): void {\n    const scene = resolveGraphScene(graphView, snapshot);\n    renderGraphLegend(graphView.legend, scene);\n\tconst elementCount = scene.nodes.length + scene.edges.length;\n\tconst layoutElementBudget = graphView.layoutElementBudget ?? Number.MAX_SAFE_INTEGER;\n\tif (elementCount > layoutElementBudget) {\n\t\tgraphView.renderer?.destroy();\n\t\tgraphView.renderer = undefined;\n\t\tconst notice = document.createElement('div');\n\t\tnotice.className = 'zenfg-inspector-graph-status';\n\t\tnotice.dataset.state = 'empty';\n\t\tnotice.setAttribute('role', 'status');\n\t\tnotice.textContent = `Automatic layout disabled: ${elementCount} graph elements exceed the ${layoutElementBudget} element budget. Passes, Resources, Memory, Diagnostics, and raw data remain available.`;\n\t\tgraphView.host.replaceChildren(notice);\n\t\treturn;\n\t}\n\tgraphView.renderer ??= new CytoscapeGraphRenderer(graphView.host);\n    graphView.renderer.render({\n        scene,\n        selected,\n        hovered,\n        fit: graphView.fitOnNextRender,\n        anchorElementId: graphView.anchorElementIdOnNextRender,\n        onSelect,\n        onHover,\n        onToggleGroup,\n    });\n    graphView.fitOnNextRender = false;\n    graphView.anchorElementIdOnNextRender = undefined;\n}\n\nexport function resolveGraphScene(\n    graphView: GraphViewState,\n    snapshot: FrameGraphDebugViewModel,\n): GraphScene {\n    const optionsKey = JSON.stringify([\n        graphView.graphMode,\n        graphView.groupsEnabled,\n        [...graphView.expandedGroupPaths].sort(),\n    ]);\n    const cached = graphSceneCache.get(graphView);\n    if (cached?.snapshot === snapshot && cached.optionsKey === optionsKey) return cached.scene;\n    const scene = createGraphScene(snapshot, {\n        mode: graphView.graphMode,\n        groupsEnabled: graphView.groupsEnabled,\n        expandedGroupPaths: graphView.expandedGroupPaths,\n    });\n    graphSceneCache.set(graphView, { snapshot, optionsKey, scene });\n    return scene;\n}\n\nexport function fitGraph(graphView: GraphViewState): void {\n    graphView.renderer?.fit();\n}\n\nexport function resizeGraph(graphView: GraphViewState): void {\n    graphView.renderer?.resize();\n}\n\nexport function destroyGraph(graphView: GraphViewState): void {\n    graphView.renderer?.destroy();\n    graphView.renderer = undefined;\n    graphSceneCache.delete(graphView);\n}\n\nfunction renderGraphLegend(host: HTMLElement | undefined, scene: GraphScene): void {\n    if (!host) return;\n    const entries = createGraphLegend(scene);\n    const key = entries.map((entry) => entry.key).join('|');\n    if (host.dataset.legendKey === key) return;\n    host.dataset.legendKey = key;\n    host.replaceChildren(...entries.map((entry) => {\n        const item = document.createElement('span');\n        item.className = 'zenfg-inspector-legend-item';\n        const swatch = document.createElement('span');\n        swatch.className = 'zenfg-inspector-legend-swatch';\n        swatch.dataset.shape = entry.shape;\n        if (entry.lineStyle) swatch.dataset.lineStyle = entry.lineStyle;\n        if (entry.hollowArrow) swatch.dataset.hollowArrow = 'true';\n        swatch.style.setProperty('--zenfg-inspector-legend-color', entry.color);\n        const label = document.createElement('span');\n        label.textContent = entry.label;\n        item.append(swatch, label);\n        return item;\n    }));\n}\n"]}
+{"version":3,"file":"panelGraphView.js","sourceRoot":"","sources":["../src/panelGraphView.ts"],"names":[],"mappings":"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","sourcesContent":["import { GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';\nimport type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';\nimport { CytoscapeGraphRenderer } from './panelCytoscapeGraphRenderer.ts';\nimport { createGraphScene, type GraphScene } from './panelGraphScene.ts';\nimport { createGraphLegend } from './panelGraphVisuals.ts';\nimport type { GraphViewState, Selection } from './panelTypes.ts';\n\ntype GraphSceneCacheEntry = {\n    readonly snapshot: FrameGraphDebugViewModel;\n    readonly optionsKey: string;\n    readonly scene: GraphScene;\n};\n\nconst graphSceneCache = new WeakMap<GraphViewState, GraphSceneCacheEntry>();\n\nexport function renderGraphView(\n    graphView: GraphViewState,\n    snapshot: FrameGraphDebugViewModel,\n    selected: Selection | undefined,\n    hovered: Selection | undefined,\n    onSelect: (selection: Selection) => void,\n    onHover: (selection: Selection | undefined) => void,\n    onToggleGroup: (pathKey: string) => void,\n): void {\n    const scene = resolveGraphScene(graphView, snapshot);\n    if (!graphView.theme) graphView.refreshTheme?.();\n    renderGraphLegend(graphView.legend, snapshot, graphView.theme, graphView.showResourceDeclarations);\n\tconst elementCount = scene.nodes.length + scene.edges.length;\n\tconst layoutElementBudget = graphView.layoutElementBudget ?? Number.MAX_SAFE_INTEGER;\n\tif (elementCount > layoutElementBudget) {\n\t\tgraphView.renderer?.destroy();\n\t\tgraphView.renderer = undefined;\n\t\tconst notice = document.createElement('div');\n\t\tnotice.className = 'zenfg-inspector-graph-status';\n\t\tnotice.dataset.state = 'empty';\n\t\tnotice.setAttribute('role', 'status');\n\t\tnotice.textContent = `Automatic layout disabled: ${elementCount} graph elements exceed the ${layoutElementBudget} element budget. Passes, Resources, Memory, Diagnostics, and raw data remain available.`;\n\t\tgraphView.host.replaceChildren(notice);\n\t\treturn;\n\t}\n\tgraphView.renderer ??= new CytoscapeGraphRenderer(graphView.host);\n    graphView.renderer.render({\n        scene,\n        theme: graphView.theme,\n        onVisible: graphView.refreshTheme,\n        selected,\n        hovered,\n        fit: graphView.fitOnNextRender,\n        anchorElementId: graphView.anchorElementIdOnNextRender,\n        reveal: graphView.revealOnNextRender,\n        captureRevision: graphView.captureRevision,\n        onSelect,\n        onHover,\n        onToggleGroup,\n    });\n    graphView.fitOnNextRender = false;\n    graphView.anchorElementIdOnNextRender = undefined;\n    graphView.revealOnNextRender = undefined;\n}\n\nexport function resolveGraphScene(\n    graphView: GraphViewState,\n    snapshot: FrameGraphDebugViewModel,\n): GraphScene {\n    const optionsKey = JSON.stringify([\n        graphView.groupsEnabled,\n        graphView.showResourceDeclarations ?? true,\n        [...graphView.expandedGroupPaths].sort(),\n    ]);\n    const cached = graphSceneCache.get(graphView);\n    if (cached?.snapshot === snapshot && cached.optionsKey === optionsKey) return cached.scene;\n    const scene = createGraphScene(snapshot, {\n        groupsEnabled: graphView.groupsEnabled,\n        showResourceDeclarations: graphView.showResourceDeclarations,\n        expandedGroupPaths: graphView.expandedGroupPaths,\n    });\n    graphSceneCache.set(graphView, { snapshot, optionsKey, scene });\n    return scene;\n}\n\nexport function fitGraph(graphView: GraphViewState): void {\n    graphView.renderer?.fit();\n}\n\nexport function resizeGraph(graphView: GraphViewState): void {\n    graphView.refreshTheme?.();\n    graphView.renderer?.resize();\n}\n\nexport function destroyGraph(graphView: GraphViewState): void {\n    graphView.renderer?.destroy();\n    graphView.renderer = undefined;\n    graphSceneCache.delete(graphView);\n}\n\nexport function renderGraphLegend(host: HTMLElement | undefined, snapshot: FrameGraphDebugViewModel, theme = GRAPH_VISUAL_THEME, showResourceDeclarations = true): void {\n    if (!host) return;\n    const entries = createGraphLegend(snapshot, theme, showResourceDeclarations);\n    const key = JSON.stringify(entries);\n    if (host.dataset.legendKey === key) return;\n    host.dataset.legendKey = key;\n    host.replaceChildren();\n    let group: HTMLElement | undefined;\n    for (const entry of entries) {\n        if (group?.getAttribute('aria-label') !== entry.group) {\n            group = document.createElement('span');\n            group.className = 'zenfg-inspector-legend-group';\n            group.setAttribute('role', 'group');\n            group.setAttribute('aria-label', entry.group);\n            const heading = document.createElement('span');\n            heading.className = 'zenfg-inspector-legend-heading';\n            heading.textContent = entry.group;\n            group.appendChild(heading);\n            host.appendChild(group);\n        }\n        const item = document.createElement('span');\n        item.className = 'zenfg-inspector-legend-item';\n        const swatch = document.createElement('span');\n        swatch.className = 'zenfg-inspector-legend-swatch';\n        swatch.dataset.shape = entry.shape;\n        if (entry.lineStyle) swatch.dataset.lineStyle = entry.lineStyle;\n        if (entry.hollowArrow) swatch.dataset.hollowArrow = 'true';\n        swatch.style.setProperty('--zenfg-inspector-legend-color', entry.color);\n        if (entry.shape === 'cut-rectangle' || entry.shape === 'tag') {\n            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n            svg.setAttribute('viewBox', '0 0 20 14');\n            svg.setAttribute('aria-hidden', 'true');\n            const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');\n            polygon.setAttribute('points', entry.shape === 'tag'\n                ? '1,1 16,1 19,7 16,13 1,13'\n                : '4,1 16,1 19,4 19,10 16,13 4,13 1,10 1,4');\n            svg.appendChild(polygon);\n            swatch.appendChild(svg);\n        }\n        const label = document.createElement('span');\n        label.textContent = entry.label;\n        item.append(swatch, label);\n        group!.appendChild(item);\n    }\n}\n"]}

package/dist/panelGraphVisuals.d.ts

@@ -1,5 +1,7 @@
 import type cytoscape from 'cytoscape';
 import type { GraphScene, GraphSceneEdge, GraphSceneNode } from './panelGraphScene.ts';
+import { type GraphVisualTheme } from './panelVisualTheme.ts';
+import { type FrameGraphDebugViewModel } from './debugCaptureModel.ts';
 export { GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';
 export declare const GRAPH_GEOMETRY: {
     readonly fitPadding: 28;
@@ -16,23 +18,33 @@ export declare const GRAPH_GEOMETRY: {
         readonly left: 24;
     };
     readonly edgeCornerRadius: 6;
+    readonly outputWidth: 208;
+    readonly outputTipWidth: 24;
+    readonly outputLabelWidth: 160;
 };
 export type GraphLegendEntry = {
+    readonly group: 'Execution' | 'Resources' | 'Relationships';
     readonly key: string;
     readonly label: string;
     readonly color: string;
-    readonly shape: 'box' | 'ellipse' | 'group' | 'line';
+    readonly shape: 'box' | 'cut-rectangle' | 'tag' | 'ellipse' | 'group' | 'line';
     readonly lineStyle?: 'solid' | 'dotted' | 'dashed';
     readonly hollowArrow?: boolean;
 };
-export declare function createGraphLegend(scene: GraphScene): readonly GraphLegendEntry[];
-export declare function createGraphStyles(): cytoscape.StylesheetJson;
-export declare function nodeDimensions(node: GraphSceneNode): {
+export declare function createGraphLegend(snapshot: FrameGraphDebugViewModel, theme?: GraphVisualTheme, showResourceDeclarations?: boolean): readonly GraphLegendEntry[];
+export declare function createGraphStyles(theme?: GraphVisualTheme): cytoscape.StylesheetJson;
+export declare function nodeDimensions(node: GraphSceneNode, theme?: GraphVisualTheme): {
     readonly width: number;
     readonly height: number;
 };
+/** Enlarge short labels within the existing box; retain the theme size for dense text. */
+export declare function graphLabelFontSize(label: string, width: number, height: number, theme: GraphVisualTheme): number;
+/** Wrap only the group name (up to two lines); keep the node-count row distinct. */
+export declare function fitCollapsedGroupLabel(label: string, width: number, theme: GraphVisualTheme): string;
+/** Fit the already semantic label to its available width after font changes. */
+export declare function fitGraphLabel(label: string, width: number, theme: GraphVisualTheme): string;
 export declare function graphLayoutGeometryKey(scene: GraphScene): string;
-export declare function graphEdgeDisplayLabel(edge: GraphSceneEdge): string;
+export declare function graphEdgeDisplayLabel(_edge: GraphSceneEdge): string;
 export declare function expandedGroupLabelMaxWidth(outerWidth: number): number;
-export declare function isOverviewGraphScale(zoom: number): boolean;
+export declare function isOverviewGraphScale(zoom: number, theme?: GraphVisualTheme): boolean;
 //# sourceMappingURL=panelGraphVisuals.d.ts.map

package/dist/panelGraphVisuals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panelGraphVisuals.d.ts","sourceRoot":"","sources":["../src/panelGraphVisuals.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGvF,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG3D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;CAUjB,CAAC;AAKX,MAAM,MAAM,gBAAgB,GAAG;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACrD,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACnD,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAWF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,gBAAgB,EAAE,CA0ChF;AAED,wBAAgB,iBAAiB,IAAI,SAAS,CAAC,cAAc,CAsM5D;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,cAAc,GAAG;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAWxG;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAQhE;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CAElE;AAED,wBAAgB,0BAA0B,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAErE;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAE1D"}
+{"version":3,"file":"panelGraphVisuals.d.ts","sourceRoot":"","sources":["../src/panelGraphVisuals.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACvF,OAAO,EAAsB,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAwB,KAAK,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAE7F,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG3D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAajB,CAAC;AAKX,MAAM,MAAM,gBAAgB,GAAG;IAC3B,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,WAAW,GAAG,eAAe,CAAC;IAC5D,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,eAAe,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/E,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACnD,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,wBAAwB,EAAE,KAAK,GAAE,gBAAqC,EAAE,wBAAwB,UAAO,GAAG,SAAS,gBAAgB,EAAE,CAsChL;AAED,wBAAgB,iBAAiB,CAAC,KAAK,GAAE,gBAAqC,GAAG,SAAS,CAAC,cAAc,CAqLxG;AAeD,wBAAgB,cAAc,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,GAAE,gBAAqC,GAAG;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAItJ;AAED,0FAA0F;AAC1F,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAQhH;AAED,oFAAoF;AACpF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAkBpG;AAED,gFAAgF;AAChF,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAU3F;AASD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAQhE;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAEnE;AAED,wBAAgB,0BAA0B,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAErE;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,GAAE,gBAAqC,GAAG,OAAO,CAExG"}