@woosh/meep-engine 3.15.0 → 3.17.0

package/editor/view/particles/effect/ParticleGradientEditorView.js

@@ -0,0 +1,472 @@
+import { hex_to_rgb } from "../../../../src/core/color/hex/hex_to_rgb.js";
+import { rgb_to_hex } from "../../../../src/core/color/hex/rgb_to_hex.js";
+import { clamp01 } from "../../../../src/core/math/clamp01.js";
+import { particle_gradient_sample } from "../../../../src/shade/renderer/particles/graph/particle_ramp.js";
+import View from "../../../../src/view/View.js";
+
+/**
+ * A colour gradient, edited the way everybody edits one: a strip of the colour it produces, with the
+ * stops that make it sitting under it.
+ *
+ * Drag a stop to move it. Click the lane under the strip where there is no stop and one is added
+ * there, in the colour the gradient already is at that point — so adding a stop never changes the
+ * gradient, it only gives you somewhere to change it *from*. Middle-click a stop, or press the
+ * remove button, and it goes. The swatch and the fields below edit whichever stop is selected.
+ *
+ * There is nothing clever here and that is deliberate: this control exists in Photoshop, in every
+ * game engine and in every vector editor, it works the same way in all of them, and an author should
+ * not have to find out how this one is different.
+ *
+ * ## When an edit is committed
+ *
+ * On pointer *up*, not on every move. Each commit is one entry on the editor's undo timeline, and a
+ * stop dragged across the strip is one edit an author means to undo once — not the ninety pointer
+ * events it was made of. The strip redraws continuously while the drag is happening, so it looks
+ * live; it is only the timeline that waits.
+ */
+
+/** How wide the strip is drawn, in CSS pixels. @type {number} */
+const WIDTH = 208;
+
+/** How tall the colour strip is. @type {number} */
+const STRIP_HEIGHT = 24;
+
+/** How tall the lane of stop markers under it is. @type {number} */
+const LANE_HEIGHT = 13;
+
+/** How near a stop marker a press has to be to take hold of it rather than make a new one. */
+const GRAB_RADIUS = 7;
+
+/** Squares of the checkerboard drawn behind the strip, so alpha reads as transparency. */
+const CHECKER = 6;
+
+/**
+ * @param {number} channel `0..1`
+ * @returns {number} `0..255`
+ */
+function byte_of(channel) {
+    return Math.round(clamp01(channel) * 255);
+}
+
+export class ParticleGradientEditorView extends View {
+    /**
+     * The stops being edited. A working copy: it is what is drawn, and it becomes the parameter when
+     * an edit is committed.
+     * @type {import("../../../../src/shade/renderer/particles/graph/particle_ramp.js").ParticleGradientStop[]}
+     */
+    #stops = [];
+
+    /** @type {HTMLCanvasElement} */
+    #canvas;
+
+    /** @type {CanvasRenderingContext2D|null} */
+    #context = null;
+
+    /** @type {number} which stop the swatch and the fields below are about */
+    #selected = 0;
+
+    /** @type {boolean} */
+    #dragging = false;
+
+    /** @type {function(Array):void} */
+    #write;
+
+    /** @type {function():Array} */
+    #read;
+
+    /** @type {boolean} whether this gradient's alpha is read by the node it belongs to */
+    #has_alpha;
+
+    /** @type {HTMLInputElement} */
+    #swatch;
+
+    /** @type {HTMLInputElement} */
+    #alpha;
+
+    /** @type {HTMLInputElement} */
+    #position;
+
+    /**
+     * @param {object} options
+     * @param {function():Array} options.read the parameter's current value
+     * @param {function(Array):void} options.write commit a new value
+     * @param {boolean} [options.alpha] whether the node reads the alpha channel; an RGB gradient
+     *        still *stores* one — see {@link ./particle_ramp.js} — but does not offer it for editing
+     */
+    constructor({ read, write, alpha = true }) {
+        super();
+
+        this.#read = read;
+        this.#write = write;
+        this.#has_alpha = alpha;
+
+        this.el = document.createElement('div');
+
+        this.addClass('ui-particle-gradient');
+
+        const canvas = this.#canvas = document.createElement('canvas');
+
+        canvas.width = WIDTH;
+        canvas.height = STRIP_HEIGHT + LANE_HEIGHT;
+        canvas.classList.add('strip');
+
+        this.el.appendChild(canvas);
+
+        const fields = document.createElement('div');
+
+        fields.classList.add('stop-fields');
+
+        this.el.appendChild(fields);
+
+        this.#swatch = field(fields, 'color', 'swatch');
+        this.#alpha = field(fields, 'number', 'alpha');
+        this.#position = field(fields, 'number', 'position');
+
+        for (const input of [this.#alpha, this.#position]) {
+            input.setAttribute('min', '0');
+            input.setAttribute('max', '1');
+            input.setAttribute('step', 'any');
+        }
+
+        this.#alpha.hidden = !alpha;
+
+        const remove = document.createElement('button');
+
+        remove.type = 'button';
+        remove.classList.add('remove');
+        remove.textContent = '−';
+        remove.title = "Remove the selected stop (or middle-click it)";
+
+        fields.appendChild(remove);
+
+        this.#swatch.title = "The selected stop's colour";
+        this.#alpha.title = "The selected stop's alpha";
+        this.#position.title = "Where the selected stop sits along t";
+
+        canvas.addEventListener('pointerdown', event => this.#press(event));
+        canvas.addEventListener('pointermove', event => this.#move(event));
+        canvas.addEventListener('pointerup', event => this.#release(event));
+        canvas.addEventListener('pointercancel', event => this.#release(event));
+
+        this.#swatch.addEventListener('change', () => this.#editSelected(stop => {
+            const rgb = hex_to_rgb(this.#swatch.value);
+
+            stop.color = [rgb.r / 255, rgb.g / 255, rgb.b / 255, stop.color[3] ?? 1];
+        }));
+
+        this.#alpha.addEventListener('change', () => this.#editSelected(stop => {
+            const [r = 0, g = 0, b = 0, a = 1] = stop.color;
+
+            stop.color = [r, g, b, clamp01(number_in(this.#alpha, a))];
+        }));
+
+        this.#position.addEventListener('change', () => this.#editSelected(stop => {
+            stop.position = number_in(this.#position, stop.position);
+        }));
+
+        remove.addEventListener('click', () => this.#removeSelected());
+
+        this.on.linked.add(() => {
+            if (this.#context === null) {
+                this.#context = canvas.getContext('2d');
+            }
+
+            this.refresh();
+        });
+
+        this.refresh();
+    }
+
+    /**
+     * Hand the working stops to the parameter, as a copy.
+     *
+     * A copy because this view goes on mutating its own array — the next drag writes straight into
+     * it — and what the node holds has to be what was committed rather than whatever this is doing
+     * next. It is also what makes each commit a distinct value, which is how the node knows anything
+     * changed at all.
+     */
+    #commit() {
+        this.#write(structuredClone(this.#stops));
+    }
+
+    /**
+     * Re-read the parameter and redraw. Called when the value changed somewhere else — an undo, the
+     * code layer, a script.
+     */
+    refresh() {
+        const value = this.#read();
+
+        this.#stops = Array.isArray(value)
+            ? value.map(stop => ({ position: stop.position, color: (stop.color ?? []).slice() }))
+            : [];
+
+        this.#selected = Math.min(this.#selected, Math.max(0, this.#stops.length - 1));
+
+        this.#writeFields();
+        this.render();
+    }
+
+    /**
+     * The stops in the order they are drawn and committed in, paired with where they were.
+     *
+     * Sorted for drawing and for the rollout, but the *selection* is an index into the unsorted
+     * array — so dragging a stop past its neighbour does not hand the selection to the neighbour,
+     * which is what makes a stop draggable all the way across the strip in one gesture.
+     *
+     * @returns {Array<{stop: object, index: number}>}
+     */
+    #ordered() {
+        return this.#stops
+            .map((stop, index) => ({ stop, index }))
+            .sort((a, b) => a.stop.position - b.stop.position);
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @returns {number} where along the strip the pointer is, `0..1`
+     */
+    #positionOf(event) {
+        const rect = this.#canvas.getBoundingClientRect();
+
+        return clamp01((event.clientX - rect.left) / rect.width);
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @returns {number} the index of the stop under the pointer, or -1
+     */
+    #stopUnder(event) {
+        const rect = this.#canvas.getBoundingClientRect();
+
+        const x = event.clientX - rect.left;
+
+        // in CSS pixels, so the grab radius is the same however far the graph is zoomed out
+        const radius = GRAB_RADIUS * (rect.width / WIDTH);
+
+        let nearest = -1;
+        let distance = Infinity;
+
+        this.#stops.forEach((stop, index) => {
+            const away = Math.abs(stop.position * rect.width - x);
+
+            if (away <= radius && away < distance) {
+                nearest = index;
+                distance = away;
+            }
+        });
+
+        return nearest;
+    }
+
+    /**
+     * @param {PointerEvent} event
+     */
+    #press(event) {
+        const stop = this.#stopUnder(event);
+
+        if (event.button === 1) {
+            // the power-user path to the remove button beside the fields
+            if (stop !== -1) {
+                this.#selected = stop;
+                this.#removeSelected();
+            }
+
+            event.preventDefault();
+            return;
+        }
+
+        if (event.button !== 0) {
+            return;
+        }
+
+        if (stop !== -1) {
+            this.#selected = stop;
+        } else {
+            const position = this.#positionOf(event);
+
+            // in the colour the gradient already is here, so adding a stop is not itself an edit to
+            // the gradient — it is somewhere to make one from
+            this.#stops.push({
+                position,
+                color: particle_gradient_sample(this.#stops, position),
+            });
+
+            this.#selected = this.#stops.length - 1;
+
+            this.#commit();
+        }
+
+        this.#dragging = true;
+
+        if (typeof this.#canvas.setPointerCapture === "function") {
+            this.#canvas.setPointerCapture(event.pointerId);
+        }
+
+        this.#writeFields();
+        this.render();
+    }
+
+    /**
+     * @param {PointerEvent} event
+     */
+    #move(event) {
+        if (!this.#dragging) {
+            return;
+        }
+
+        this.#stops[this.#selected].position = this.#positionOf(event);
+
+        this.#writeFields();
+        this.render();
+    }
+
+    /**
+     * @param {PointerEvent} event
+     */
+    #release(event) {
+        if (!this.#dragging) {
+            return;
+        }
+
+        this.#dragging = false;
+
+        if (typeof this.#canvas.releasePointerCapture === "function" && this.#canvas.hasPointerCapture?.(event.pointerId)) {
+            this.#canvas.releasePointerCapture(event.pointerId);
+        }
+
+        // one entry on the timeline for the whole drag; see the note at the top of this file
+        this.#commit();
+    }
+
+    /**
+     * @param {function(object):void} edit applied to the selected stop
+     */
+    #editSelected(edit) {
+        const stop = this.#stops[this.#selected];
+
+        if (stop === undefined) {
+            return;
+        }
+
+        edit(stop);
+
+        this.#commit();
+        this.#writeFields();
+        this.render();
+    }
+
+    #removeSelected() {
+        // A gradient with no stops has no colour to be, and the validator says so. Rather than let
+        // an author reach that state by clicking one button too many, the last stop stays.
+        if (this.#stops.length <= 1) {
+            return;
+        }
+
+        this.#stops.splice(this.#selected, 1);
+
+        this.#selected = Math.min(this.#selected, this.#stops.length - 1);
+
+        this.#commit();
+        this.#writeFields();
+        this.render();
+    }
+
+    /**
+     * Put the selected stop into the fields under the strip.
+     */
+    #writeFields() {
+        const stop = this.#stops[this.#selected];
+
+        const colour = stop === undefined ? [0, 0, 0, 1] : stop.color;
+
+        this.#swatch.value = `#${rgb_to_hex(byte_of(colour[0]), byte_of(colour[1]), byte_of(colour[2]))}`;
+        this.#alpha.value = String(colour[3] ?? 1);
+        this.#position.value = String(stop === undefined ? 0 : stop.position);
+    }
+
+    render() {
+        const context = this.#context;
+
+        if (context === null) {
+            return;
+        }
+
+        const canvas = this.#canvas;
+
+        context.clearRect(0, 0, canvas.width, canvas.height);
+
+        // A checkerboard behind the strip, so that a stop's alpha is visible as transparency rather
+        // than as a colour that happens to look like the panel behind it.
+        if (this.#has_alpha) {
+            for (let x = 0; x < canvas.width; x += CHECKER) {
+                for (let y = 0; y < STRIP_HEIGHT; y += CHECKER) {
+                    context.fillStyle = ((x + y) / CHECKER) % 2 === 0 ? '#4c4f54' : '#6a6e74';
+                    context.fillRect(x, y, CHECKER, CHECKER);
+                }
+            }
+        }
+
+        // The strip is drawn by sampling the same function the node compiles to, so what is on
+        // screen is what the effect will do — including a hard edge where two stops share a place.
+        for (let x = 0; x < canvas.width; x++) {
+            const colour = particle_gradient_sample(this.#stops, x / (canvas.width - 1));
+
+            const alpha = this.#has_alpha ? clamp01(colour[3] ?? 1) : 1;
+
+            context.fillStyle = `rgba(${byte_of(colour[0])}, ${byte_of(colour[1])}, ${byte_of(colour[2])}, ${alpha})`;
+            context.fillRect(x, 0, 1, STRIP_HEIGHT);
+        }
+
+        for (const { stop, index } of this.#ordered()) {
+            const x = clamp01(stop.position) * canvas.width;
+            const selected = index === this.#selected;
+
+            context.beginPath();
+            context.moveTo(x, STRIP_HEIGHT + 1);
+            context.lineTo(x - 5, STRIP_HEIGHT + LANE_HEIGHT - 1);
+            context.lineTo(x + 5, STRIP_HEIGHT + LANE_HEIGHT - 1);
+            context.closePath();
+
+            // the marker carries the stop's own colour, so the lane reads as the stops rather than
+            // as a row of identical arrows
+            context.fillStyle = `rgb(${byte_of(stop.color[0])}, ${byte_of(stop.color[1])}, ${byte_of(stop.color[2])})`;
+            context.fill();
+
+            context.lineWidth = selected ? 2 : 1;
+            context.strokeStyle = selected ? '#ffd35c' : '#20242a';
+            context.stroke();
+        }
+    }
+}
+
+/**
+ * @param {HTMLElement} parent
+ * @param {string} type
+ * @param {string} className
+ * @returns {HTMLInputElement}
+ */
+function field(parent, type, className) {
+    const input = document.createElement('input');
+
+    input.setAttribute('type', type);
+    input.classList.add(className);
+
+    parent.appendChild(input);
+
+    return input;
+}
+
+/**
+ * What a number field holds, or `fallback` where it holds nothing a number can be made of — a
+ * half-typed value should snap back rather than become zero.
+ *
+ * @param {HTMLInputElement} input
+ * @param {number} fallback
+ * @returns {number}
+ */
+function number_in(input, fallback) {
+    const parsed = Number.parseFloat(input.value);
+
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+

package/editor/view/particles/effect/ParticleGraphEditorView.d.ts

@@ -0,0 +1,161 @@
+export class ParticleGraphEditorView extends View {
+    /**
+     * @param {object} options
+     * @param {import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument} options.effect
+     * @param {ActionProcessor} [options.actionProcessor] shared with a host editor for a single undo
+     *        timeline across the whole application
+     */
+    constructor({ effect, actionProcessor }: {
+        effect: import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument;
+        actionProcessor?: ActionProcessor<any, any>;
+    });
+    el: HTMLDivElement;
+    /**
+     * @type {import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument}
+     */
+    effect: import("../../../particles/effect/ParticleEffectDocument.js").ParticleEffectDocument;
+    /**
+     * @type {ActionProcessor}
+     */
+    actionProcessor: ActionProcessor<any, any>;
+    /**
+     * Turn what is selected into a group, and put the group where the selection was.
+     *
+     * The one gesture that makes a graph smaller. Which wires become ports, what they are called and
+     * what type they are is worked out from the selection — see
+     * {@link ../../../../src/shade/renderer/particles/graph/make_particle_group.js} — so a group
+     * arrives finished rather than as a form to fill in, and its face is the author's to change
+     * afterwards.
+     *
+     * Everything it does is one step on the timeline: the nodes leaving, the group type appearing,
+     * the node that replaces them, and every wire re-made around it. An undo that left a type behind
+     * in the add-node menu would be an undo that did not undo.
+     *
+     * @returns {Promise<NodeInstance|null>} the node that replaced the selection, or null when there
+     *   was nothing selected to group
+     */
+    groupSelection(): Promise<NodeInstance | null>;
+    /**
+     * Replace every selected group node with the nodes it is made of.
+     *
+     * The way out of a grouping made by mistake, and the way in to a library group an author wants to
+     * change one use of: the definition is not touched, only this instance. What lands in the graph
+     * is what compilation would have inlined anyway.
+     *
+     * @returns {Promise<NodeInstance[]>} the nodes that replaced them; empty when nothing applied
+     */
+    ungroupSelection(): Promise<NodeInstance[]>;
+    /**
+     * Show the body of a group instead of the graph that holds it.
+     *
+     * Every instance of a group shares one body, so this is the group's own graph and not a copy of
+     * it — which is the point, and is why the ones shipped with the editor are locked: an edit inside
+     * an unlocked group is an edit to every instance of it in every effect. A locked one opens
+     * read-only, and is worth opening anyway to read.
+     *
+     * Groups nest, so this stacks: opening one from inside another pushes onto the trail rather than
+     * replacing it.
+     *
+     * @param {import("../../../../src/shade/renderer/particles/graph/ParticleNodeGroup.js").ParticleNodeGroup} group
+     * @returns {void}
+     */
+    openGroup(group: import("../../../../src/shade/renderer/particles/graph/ParticleNodeGroup.js").ParticleNodeGroup): void;
+    /**
+     * Leave the innermost open group. Harmless when none is open.
+     * @returns {void}
+     */
+    closeGroup(): void;
+    /**
+     * Go back to a particular depth in the trail: 0 is the phase graph, 1 the outermost group.
+     *
+     * @param {number} depth
+     * @returns {void}
+     */
+    openGroupDepth(depth: number): void;
+    /**
+     * The groups currently open, outermost first.
+     *
+     * @returns {import("../../../../src/shade/renderer/particles/graph/ParticleNodeGroup.js").ParticleNodeGroup[]}
+     */
+    openGroups(): import("../../../../src/shade/renderer/particles/graph/ParticleNodeGroup.js").ParticleNodeGroup[];
+    /**
+     * Re-run the automatic layout over the graph on screen, as one undoable step.
+     *
+     * It moves every node in the graph, which makes it the most destructive thing on the toolbar:
+     * an author who does not like the result has lost an arrangement they may have spent a while on.
+     * So the positions before and after are recorded and pushed as a {@link NodesMoveAction}, the
+     * same action a drag lands on the timeline.
+     *
+     * Inside a locked group it does nothing: an arrangement is a change to the group's definition
+     * like any other, and a locked group's definition is not the author's to change.
+     */
+    arrange(): void;
+    /**
+     * Add a node of the given type to the phase being edited, seeded with the defaults its type
+     * declares — so what lands in the graph is a node that compiles rather than one to repair.
+     *
+     * @param {ParticleNodeDescription} description
+     * @param {object} [options] position, see {@link NodeGraphEditorView#addNode}
+     * @returns {Promise<NodeInstance>} the new node, once the action timeline has applied the add
+     */
+    addNode(description: ParticleNodeDescription, options?: object): Promise<NodeInstance>;
+    /**
+     * The canvas an edit would land on: the innermost open group, or the phase being edited.
+     *
+     * @returns {NodeGraphEditorView}
+     */
+    activeEditor(): NodeGraphEditorView;
+    /**
+     * @returns {string} `"init"` or `"update"`
+     */
+    activePhase(): string;
+    /**
+     * Show one phase. Both stay built, so the one being left keeps its camera and its selection.
+     * @param {string} id `"init"` or `"update"`
+     */
+    setPhase(id: string): void;
+    /**
+     * Call a group something else.
+     *
+     * Reaches every node already on screen that is an instance of it: a canvas is not rebuilt for a
+     * word, and one left showing the old name would be the only stale thing in the window.
+     *
+     * @param {import("../../../../src/shade/renderer/particles/graph/ParticleNodeGroup.js").ParticleNodeGroup} group
+     * @param {string} label
+     * @returns {void}
+     */
+    renameGroup(group: import("../../../../src/shade/renderer/particles/graph/ParticleNodeGroup.js").ParticleNodeGroup, label: string): void;
+    /**
+     * Rebuild the problems strip from a fresh compile of the effect.
+     *
+     * Everything is listed, whichever phase it belongs to, because a problem in the phase an author
+     * is not looking at is exactly the one they would otherwise hunt for. Nodes carrying a problem
+     * are marked in the graph as well.
+     *
+     * Loudest first, so a strip too short to show everything shows what matters. What is left over
+     * at the bottom is the notes — a node nothing reads, most of all — and a graph with nothing but
+     * those still says it has no problems, because it has none: they are things worth knowing about
+     * an effect that compiles.
+     */
+    refreshProblems(): void;
+    /**
+     * Switch to the phase a node is in and centre the view on it.
+     *
+     * @param {string} phase_id `"init"` or `"update"`
+     * @param {number} node_id
+     */
+    revealNode(phase_id: string, node_id: number): void;
+    /**
+     * The add-node menu of the canvas currently on screen — a test's way in, and a host's way to
+     * open it from a menu of its own.
+     *
+     * @returns {import("../../node-graph/NodeGraphSearchMenuView.js").NodeGraphSearchMenuView|null}
+     */
+    searchMenu(): import("../../node-graph/NodeGraphSearchMenuView.js").NodeGraphSearchMenuView | null;
+    layout(): void;
+    #private;
+}
+import View from "../../../../src/view/View.js";
+import { ActionProcessor } from "../../../../src/core/process/undo/ActionProcessor.js";
+import { NodeGraphEditorView } from "../../node-graph/NodeGraphEditorView.js";
+//# sourceMappingURL=ParticleGraphEditorView.d.ts.map

package/editor/view/particles/effect/ParticleGraphEditorView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticleGraphEditorView.d.ts","sourceRoot":"","sources":["../../../../../editor/view/particles/effect/ParticleGraphEditorView.js"],"names":[],"mappings":"AA0LA;IA6FI;;;;;OAKG;IACH;QAJyG,MAAM,EAApG,OAAO,qDAAqD,EAAE,sBAAsB;QAC1D,eAAe;OAsDnD;IAhDG,mBAAuC;IAIvC;;OAEG;IACH,QAFU,OAAO,qDAAqD,EAAE,sBAAsB,CAE1E;IAEpB;;OAEG;IACH,2CAAsC;IA4X1C;;;;;;;;;;;;;;;OAeG;IACH,kBAHa,QAAQ,eAAa,IAAI,CAAC,CAwEtC;IAED;;;;;;;;OAQG;IACH,oBAFa,QAAQ,cAAc,CAAC,CAgCnC;IA+ID;;;;;;;;;;;;;OAaG;IACH,iBAHW,OAAO,qEAAqE,EAAE,iBAAiB,GAC7F,IAAI,CAsDhB;IAED;;;OAGG;IACH,cAFa,IAAI,CAIhB;IAED;;;;;OAKG;IACH,sBAHW,MAAM,GACJ,IAAI,CAWhB;IAED;;;;OAIG;IACH,cAFa,OAAO,qEAAqE,EAAE,iBAAiB,EAAE,CAI7G;IAED;;;;;;;;;;OAUG;IACH,gBAuCC;IAwBD;;;;;;;OAOG;IACH,wDAHW,MAAM,GACJ,qBAAqB,CAiBjC;IAiED;;;;OAIG;IACH,gBAFa,mBAAmB,CAQ/B;IAED;;OAEG;IACH,eAFa,MAAM,CAIlB;IAED;;;OAGG;IACH,aAFW,MAAM,QAmBhB;IAoGD;;;;;;;;;OASG;IACH,mBAJW,OAAO,qEAAqE,EAAE,iBAAiB,SAC/F,MAAM,GACJ,IAAI,CAqBhB;IAED;;;;;;;;;;;OAWG;IACH,wBAoCC;IAoDD;;;;;OAKG;IACH,qBAHW,MAAM,WACN,MAAM,QA2BhB;IAED;;;;;OAKG;IACH,cAFa,OAAO,6CAA6C,EAAE,uBAAuB,GAAC,IAAI,CAI9F;IAED,eAuBC;;CAgCJ;iBAtgDgB,8BAA8B;gCAvCf,sDAAsD;oCA0ClD,yCAAyC"}