@motionscript/grids 0.0.0-stage → 0.1.0-alpha.10

package/dist/kit/item-effects.js

@@ -0,0 +1,76 @@
+/**
+ * What an item does on its way in (or out): grow from nothing, fade, fly out of
+ * the grid's centre, rise into place, flip up, or spin in.
+ */
+export const REVEAL_STYLES = ["scale", "fade", "center", "rise", "flip", "spin"];
+/** What a wave does to each item as it passes. */
+export const WAVE_STYLES = ["scale", "lift", "fade", "spin"];
+/** Layer item `i`'s reveal, wave and focus onto its slot, in place. */
+export function applyItemEffects(s, i, size, reveal, wave, focus) {
+    if (reveal)
+        applyReveal(s, reveal.style, reveal.values[i] ?? 1, size);
+    if (wave)
+        applyWave(s, wave, wave.values[i] ?? 0, size);
+    if (focus)
+        applyFocus(s, focus, focus.values[i] ?? 0);
+}
+function applyReveal(s, style, v, size) {
+    if (v === 1)
+        return;
+    const shown = clamp01(v);
+    switch (style) {
+        case "fade":
+            s.opacity *= shown;
+            break;
+        case "center":
+            s.x *= v;
+            s.y *= v;
+            s.depth *= v;
+            s.opacity *= clamp01(v * 4);
+            break;
+        case "rise":
+            s.y -= (1 - v) * Math.max(40, size.height);
+            s.opacity *= shown;
+            break;
+        case "flip":
+            s.rotationX += (1 - v) * 90;
+            break;
+        case "spin":
+            s.rotation -= (1 - v) * 180;
+            s.scale *= Math.max(0, v);
+            break;
+        default:
+            s.scale *= Math.max(0, v);
+    }
+}
+function applyWave(s, wave, w, size) {
+    if (w === 0)
+        return;
+    switch (wave.style) {
+        case "lift":
+            s.y += wave.amount * w * Math.max(40, size.height);
+            break;
+        case "fade":
+            s.opacity *= clamp01(1 - wave.amount * w);
+            break;
+        case "spin":
+            s.rotation += wave.amount * w * 360;
+            break;
+        default:
+            s.scale *= 1 + wave.amount * w;
+    }
+}
+function applyFocus(s, focus, f) {
+    if (f === 0)
+        return;
+    if (f > 0) {
+        s.scale *= 1 + focus.grow * f;
+        return;
+    }
+    s.opacity *= clamp01(1 - focus.dim * -f);
+    s.scale *= Math.max(0, 1 + focus.grow * 0.5 * f);
+}
+function clamp01(v) {
+    return v < 0 ? 0 : v > 1 ? 1 : v;
+}
+//# sourceMappingURL=item-effects.js.map

package/dist/kit/item-effects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-effects.js","sourceRoot":"","sources":["../../src/kit/item-effects.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Size2D } from \"@motionscript/sdk\"\n\nimport type { Slot } from \"./slots\"\n\n/**\n * What an item does on its way in (or out): grow from nothing, fade, fly out of\n * the grid's centre, rise into place, flip up, or spin in.\n */\nexport const REVEAL_STYLES = [\"scale\", \"fade\", \"center\", \"rise\", \"flip\", \"spin\"] as const\nexport type RevealStyle = (typeof REVEAL_STYLES)[number]\n\n/** What a wave does to each item as it passes. */\nexport const WAVE_STYLES = [\"scale\", \"lift\", \"fade\", \"spin\"] as const\nexport type WaveStyle = (typeof WAVE_STYLES)[number]\n\n/**\n * How far into view each item is, `1` shown and `0` gone — past `1` on the\n * way to it under an overshooting ease. Absent means every item is shown.\n */\nexport interface RevealState {\n  style: RevealStyle\n  values: readonly number[]\n}\n\n/** Each item's share of the wave passing through it, `0` at rest and `1` at the crest. */\nexport interface WaveState {\n  style: WaveStyle\n  /** How big the crest is — a share of the item's size, opacity or a turn, by style. */\n  amount: number\n  values: readonly number[]\n}\n\n/** Each item's emphasis: `1` the focus, `-1` pushed back, `0` untouched. */\nexport interface FocusState {\n  /** How far the others fade, `0..1`. */\n  dim: number\n  /** How much the focus grows, as a share of its size; the others shrink by half that. */\n  grow: number\n  values: readonly number[]\n}\n\n/** Layer item `i`'s reveal, wave and focus onto its slot, in place. */\nexport function applyItemEffects(\n  s: Slot,\n  i: number,\n  size: Size2D,\n  reveal: RevealState | null | undefined,\n  wave: WaveState | null | undefined,\n  focus: FocusState | null | undefined,\n): void {\n  if (reveal) applyReveal(s, reveal.style, reveal.values[i] ?? 1, size)\n  if (wave) applyWave(s, wave, wave.values[i] ?? 0, size)\n  if (focus) applyFocus(s, focus, focus.values[i] ?? 0)\n}\n\nfunction applyReveal(s: Slot, style: RevealStyle, v: number, size: Size2D): void {\n  if (v === 1) return\n  const shown = clamp01(v)\n  switch (style) {\n    case \"fade\":\n      s.opacity *= shown\n      break\n    case \"center\":\n      s.x *= v\n      s.y *= v\n      s.depth *= v\n      s.opacity *= clamp01(v * 4)\n      break\n    case \"rise\":\n      s.y -= (1 - v) * Math.max(40, size.height)\n      s.opacity *= shown\n      break\n    case \"flip\":\n      s.rotationX += (1 - v) * 90\n      break\n    case \"spin\":\n      s.rotation -= (1 - v) * 180\n      s.scale *= Math.max(0, v)\n      break\n    default:\n      s.scale *= Math.max(0, v)\n  }\n}\n\nfunction applyWave(s: Slot, wave: WaveState, w: number, size: Size2D): void {\n  if (w === 0) return\n  switch (wave.style) {\n    case \"lift\":\n      s.y += wave.amount * w * Math.max(40, size.height)\n      break\n    case \"fade\":\n      s.opacity *= clamp01(1 - wave.amount * w)\n      break\n    case \"spin\":\n      s.rotation += wave.amount * w * 360\n      break\n    default:\n      s.scale *= 1 + wave.amount * w\n  }\n}\n\nfunction applyFocus(s: Slot, focus: FocusState, f: number): void {\n  if (f === 0) return\n  if (f > 0) {\n    s.scale *= 1 + focus.grow * f\n    return\n  }\n  s.opacity *= clamp01(1 - focus.dim * -f)\n  s.scale *= Math.max(0, 1 + focus.grow * 0.5 * f)\n}\n\nfunction clamp01(v: number): number {\n  return v < 0 ? 0 : v > 1 ? 1 : v\n}\n"]}

package/dist/kit/item-grid.d.ts

@@ -0,0 +1,240 @@
+import { type ChildView, type InsetsResolved, type LayoutBox, type LayoutItem, type Measurer, type Node2D, type NodeView, type Piece, type Placement2D, type RenderContext, type Size2D, type Timeline, type Values } from "@motionscript/sdk";
+import { type FocusState, type RevealState, type WaveState } from "./item-effects.js";
+import { type Arrangement, type Slot } from "./slots/index.js";
+import { type StaggerOrder } from "./stagger.js";
+/**
+ * What every grid is built from: a container that places each of its children
+ * in a slot of an arrangement — a rectangular grid, a ring, a path, a sphere.
+ * Spread `state` and `commands` in, take `defaults`, hand `fields` the
+ * {@link Arranger} that makes this grid's arrangement from its state, and pass
+ * the finished component and its arranger through {@link define}.
+ *
+ * ## Children only
+ *
+ * The items are the children, in layer order. A child's slot is a parent
+ * transform on it, so its own `x`/`y`/`rotation`/`scale` — and any command on
+ * them — still work, relative to the slot. A group is one item; a grid of
+ * grids is a grid of items that happen to be grids.
+ *
+ * ## One pass
+ *
+ * Every frame: measure the children, ask the arrangement for its slots (a pure
+ * function of the state, the sizes and the clock), blend them from where a
+ * transition is leaving, and layer on the per-item effects — reveal, wave,
+ * focus. What is left is each child's box and slot, which the renderer,
+ * picking and `global` all read, so a selection outline lands on the pixels
+ * even on a sphere.
+ *
+ * ## Commands
+ *
+ * Every command is a pure function of time. The per-item ones stagger *inside*
+ * their duration — a one-second reveal takes one second for four children or
+ * four hundred — and write their per-item state into entries
+ * (`revealState` and its siblings), which is what keeps them seekable. The ones
+ * that change the arrangement itself (a reorder, a morph, a column count) keep
+ * the arrangement they are leaving as data and blend each item from its old
+ * slot to its new one.
+ */
+/** An arrangement a grid is leaving, kept as data so its slots can be worked out afresh every frame. */
+export interface GridSnapshot {
+    arrangement: Arrangement;
+    /** The grid the arrangement was borrowed from, or `""` for the grid's own. */
+    source: string;
+    order: readonly number[];
+    spread: number;
+}
+/** A change of arrangement under way: where the items are coming from, and how far each has come. */
+export interface GridTransition {
+    from: GridSnapshot;
+    /** Each item's eased, staggered progress, `0..1`. */
+    mix: readonly number[];
+}
+/** The stagger options every per-item command takes. */
+export interface StaggerArgs {
+    staggerOrder?: StaggerOrder;
+    /** `0..0.95`: how much of the command's length the items' offsets take up. */
+    stagger?: number;
+}
+/**
+ * Every grid's document key — what a reference to "another grid" may name. A
+ * `nodeRef` descriptor carries it as `nodeTypes`, for a host's picker to offer
+ * only those.
+ */
+export declare const ITEM_GRID_TYPES: readonly ["rectangularGrid", "radialGrid", "pathGrid", "sphereGrid"];
+/** The stagger a move to new slots takes when its command states none. */
+export declare const TRANSITION_STAGGER = 0.3;
+/** A reference to another node, a host's picker offering only `types`. Its fields read a view of it. */
+export declare function nodeRef(types: readonly string[]): import("@motionscript/sdk").Type<string, NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, false>;
+/** The stagger args every per-item command takes, `stagger` defaulting to `fallback`. */
+export declare function staggerArgs(fallback: number): {
+    staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+    stagger: import("@motionscript/sdk").Type<number, number, false>;
+};
+/**
+ * A command arg a host fills in with `hint`, which a row may leave out: the
+ * command then keeps what the grid has. A run arg's default is both what a
+ * host offers and what an omitted arg means, so the hint rides on the arg's
+ * description alone, and an omitted arg reads `undefined`.
+ */
+export declare function hinted<T extends number | string>(hint: T, options?: object): import("@motionscript/sdk").Type<T | undefined, T | undefined, false>;
+/** A command arg naming another node, a host's picker offering only `types`; left out, it reads `undefined`. */
+export declare function nodeRefArg(types: readonly string[]): import("@motionscript/sdk").Type<string | undefined, string | undefined, false>;
+/** The state every grid shares. */
+export declare const state: {
+    /** Items in slot order: slot `k` holds child `order[k]`. Empty is the children's own order. */
+    order: import("@motionscript/sdk").Type<number[], number[], false>;
+    /** `0` gathers every item at the centre, `1` is the arrangement, past `1` pushes them apart. */
+    spread: import("@motionscript/sdk").Type<number, number, false>;
+    /** Another grid whose arrangement this one takes on — what `morphInto` animates. */
+    arrangeLike: import("@motionscript/sdk").Type<string, NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, false>;
+    revealState: import("@motionscript/sdk").Type<RevealState | null | undefined, RevealState | null | undefined, false>;
+    waveState: import("@motionscript/sdk").Type<WaveState | null | undefined, WaveState | null | undefined, false>;
+    focusState: import("@motionscript/sdk").Type<FocusState | null | undefined, FocusState | null | undefined, false>;
+    transition: import("@motionscript/sdk").Type<GridTransition | null | undefined, GridTransition | null | undefined, false>;
+    /** The grid a transition's leaving arrangement was borrowed from, followed while the items travel. */
+    transitionSource: import("@motionscript/sdk").Type<string, NodeView<import("@motionscript/sdk").Element<string, unknown, unknown>> | null, true>;
+};
+/** A grid's size is what its items come to, whether it was built with children or they arrive after it. */
+export declare const defaults: {
+    readonly width: "hug";
+    readonly height: "hug";
+};
+/** What a grid's commands read of its state, beyond its own arrangement's entries. */
+export type GridValues = Values<typeof state> & {
+    readonly padding: InsetsResolved;
+};
+/** What a grid's measure, layout and render read of its state, beyond its own arrangement's entries. */
+export type GridState = GridValues & {
+    readonly width: LayoutItem["width"];
+    readonly height: LayoutItem["height"];
+    readonly children: readonly ChildView[];
+};
+/** What makes one grid's arrangement from its state: the rest of a grid is this module. */
+export interface Arranger<S = unknown> {
+    /** This grid's own arrangement, for a content box of `box`. */
+    arrangement(state: S, box: Size2D): Arrangement;
+    /** The room each item is measured in — the whole content box, unless the arrangement has cells. */
+    itemSpace?(state: S, count: number, space: Size2D): Size2D;
+}
+type GridComponent = {
+    readonly key: string;
+    readonly node: abstract new (...args: never[]) => object;
+};
+/**
+ * `component` as a grid: registers its `arranger`, which another grid borrowing
+ * its arrangement or morphing into it reads it by, and which {@link isGrid} knows it by.
+ */
+export declare function define<C extends GridComponent, S>(component: C, arranger: Arranger<S>): C;
+/** Whether `value` is a node of one of the grids {@link define} has seen. */
+export declare function isGrid(value: unknown): boolean;
+/** The grid's measure, layout and render, for `arranger`'s arrangement: spread them into the component. */
+export declare function fields<S>(arranger: Arranger<S>): {
+    measure: (measurer: Measurer, s: GridState & S, children: readonly ChildView[]) => Size2D;
+    layout: (box: LayoutBox, s: GridState & S, children: readonly ChildView[]) => readonly Placement2D[];
+    render: (ctx: RenderContext, s: GridState & S) => void;
+};
+export declare function measure<S>(measurer: Measurer, s: GridState & S, children: readonly ChildView[], arranger: Arranger<S>): Size2D;
+export declare function layout<S>(box: LayoutBox, s: GridState & S, children: readonly ChildView[], arranger: Arranger<S>): readonly Placement2D[];
+/**
+ * A grid whose arrangement has depth is seen through a camera of its own,
+ * which paints its items far to near — unless it already sits in a space (an
+ * orbit camera, a 3D stage), where its items join that one and its camera.
+ */
+export declare function render<S>(ctx: RenderContext, s: GridState & S, arranger: Arranger<S>): void;
+/** A node's content box: its laid-out size inside its padding. */
+export declare function contentBoxOf(grid: Node2D): Size2D;
+type GridTimeline = Timeline<StaggerArgs, never>;
+/**
+ * Each item's slot in its arrangement as it stands, for a command being built,
+ * at the clock commands are built against (the tree stands at time 0 while a
+ * timeline compiles): what its stagger is ranked by.
+ */
+export declare function itemSlots(timeline: Timeline<object, never>, s: GridValues, children: readonly ChildView[]): Slot[];
+/** Each item's start in a stagger. A random order is seeded by the node's id, so it never changes between builds. */
+export declare function ranks(timeline: Timeline<object, never>, s: GridValues, children: readonly ChildView[], order: StaggerOrder | undefined): number[];
+/**
+ * Write `changes` to the arrangement and move each item from its slot in the
+ * one being left to its slot in the new one, staggered.
+ */
+export declare function transitionTo(timeline: GridTimeline, s: GridValues, children: readonly ChildView[], changes: Record<string, unknown>, stagger?: number): Piece;
+/** Emphasise the items `isFocus` picks and push the rest back. */
+export declare function focusOn(timeline: Timeline<object, never>, s: GridValues, isFocus: (item: number) => boolean, count: number, dim: number, grow: number): Piece;
+export declare const commands: {
+    readonly reveal: {
+        readonly args: {
+            readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+            readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+            readonly style: import("@motionscript/sdk").Type<"center" | "scale" | "fade" | "rise" | "flip" | "spin", "center" | "scale" | "fade" | "rise" | "flip" | "spin", false>;
+        };
+        run(timeline: any, state: any, children: any): Piece;
+    };
+    readonly conceal: {
+        readonly args: {
+            readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+            readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+            readonly style: import("@motionscript/sdk").Type<"center" | "scale" | "fade" | "rise" | "flip" | "spin", "center" | "scale" | "fade" | "rise" | "flip" | "spin", false>;
+        };
+        run(timeline: any, state: any, children: any): Piece;
+    };
+    readonly wave: {
+        readonly args: {
+            readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+            readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+            readonly style: import("@motionscript/sdk").Type<"scale" | "fade" | "spin" | "lift", "scale" | "fade" | "spin" | "lift", false>;
+            readonly amount: import("@motionscript/sdk").Type<number, number, false>;
+        };
+        run(timeline: any, state: any, children: any): Piece;
+    };
+    readonly focus: {
+        readonly args: {
+            readonly item: import("@motionscript/sdk").Type<number, number, false>;
+            readonly dim: import("@motionscript/sdk").Type<number, number, false>;
+            readonly grow: import("@motionscript/sdk").Type<number, number, false>;
+        };
+        run(timeline: any, state: any, children: any): Piece;
+    };
+    readonly unfocus: (timeline: any, state: any, children: any) => Piece;
+    readonly spreadTo: {
+        readonly args: {
+            readonly spread: import("@motionscript/sdk").Type<number, number, false>;
+        };
+        run(timeline: any, state: any, children: any): Piece;
+    };
+    readonly shuffle: {
+        readonly args: {
+            readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+            readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+            readonly seed: import("@motionscript/sdk").Type<number, number, false>;
+        };
+        run(timeline: any, state: any, children: any): Piece;
+    };
+    readonly swap: {
+        readonly args: {
+            readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+            readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+            readonly first: import("@motionscript/sdk").Type<number, number, false>;
+            readonly second: import("@motionscript/sdk").Type<number, number, false>;
+        };
+        run(timeline: any, state: any, children: any): Piece;
+    };
+    readonly reorder: {
+        readonly args: {
+            readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+            readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+            readonly order: import("@motionscript/sdk").Type<string, string, false>;
+        };
+        run(timeline: any, state: any, children: any): Piece;
+    };
+    readonly morphInto: {
+        readonly args: {
+            readonly staggerOrder: import("@motionscript/sdk").Type<"path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", "path" | "row" | "column" | "angle" | "depth" | "index" | "reverse" | "random" | "centerOut" | "edgesIn", false>;
+            readonly stagger: import("@motionscript/sdk").Type<number, number, false>;
+            readonly target: import("@motionscript/sdk").Type<string | undefined, string | undefined, false>;
+        };
+        run(timeline: any, state: any, children: any): Piece;
+    };
+};
+/** A box of `size` inside `padding`: what a command reads as its grid's content box from `timeline.node.size`. */
+export declare function contentBox(size: Size2D, padding: InsetsResolved): Size2D;
+export {};
+//# sourceMappingURL=item-grid.d.ts.map

package/dist/kit/item-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-grid.d.ts","sourceRoot":"","sources":["../../src/kit/item-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,QAAQ,EACb,KAAK,MAAM,EAEX,KAAK,QAAQ,EACb,KAAK,KAAK,EACV,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,KAAK,QAAQ,EACb,KAAK,MAAM,EACZ,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,MAAM,gBAAgB,CAAA;AAGvB,OAAO,EAAiD,KAAK,WAAW,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAA;AACpG,OAAO,EAAiD,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAE5F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,wGAAwG;AACxG,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,WAAW,CAAA;IACxB,8EAA8E;IAC9E,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB,MAAM,EAAE,MAAM,CAAA;CACf;AAED,qGAAqG;AACrG,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,YAAY,CAAA;IAClB,qDAAqD;IACrD,GAAG,EAAE,SAAS,MAAM,EAAE,CAAA;CACvB;AAED,wDAAwD;AACxD,MAAM,WAAW,WAAW;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,sEAAuE,CAAA;AAEnG,0EAA0E;AAC1E,eAAO,MAAM,kBAAkB,MAAM,CAAA;AAErC,wGAAwG;AACxG,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,mIAG/C;AAED,yFAAyF;AACzF,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM;;;EAK3C;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,GAAE,MAAW,yEAG9E;AAED,gHAAgH;AAChH,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,mFAGlD;AAED,mCAAmC;AACnC,eAAO,MAAM,KAAK;IAChB,+FAA+F;;IAE/F,gGAAgG;;IAEhG,oFAAoF;;;;;;IASpF,sGAAsG;;CAEvG,CAAA;AAED,2GAA2G;AAC3G,eAAO,MAAM,QAAQ;;;CAA2C,CAAA;AAEhE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,KAAK,CAAC,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAA;CAAE,CAAA;AAEpF,wGAAwG;AACxG,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG;IACnC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAA;IACnC,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IACrC,QAAQ,CAAC,QAAQ,EAAE,SAAS,SAAS,EAAE,CAAA;CACxC,CAAA;AAED,2FAA2F;AAC3F,MAAM,WAAW,QAAQ,CAAC,CAAC,GAAG,OAAO;IACnC,+DAA+D;IAC/D,WAAW,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,WAAW,CAAA;IAC/C,mGAAmG;IACnG,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3D;AAED,KAAK,aAAa,GAAG;IAAE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,MAAM,CAAA;CAAE,CAAA;AAIvG;;;GAGG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAGzF;AAED,6EAA6E;AAC7E,wBAAgB,MAAM,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAG9C;AAED,2GAA2G;AAC3G,wBAAgB,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;wBAEvB,QAAQ,KAAK,SAAS,GAAG,CAAC,YAAY,SAAS,SAAS,EAAE;kBAChE,SAAS,KAAK,SAAS,GAAG,CAAC,YAAY,SAAS,SAAS,EAAE;kBAC3D,aAAa,KAAK,SAAS,GAAG,CAAC;EAEhD;AAQD,wBAAgB,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,CAa9H;AAED,wBAAgB,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,WAAW,EAAE,CAUzI;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAK3F;AAED,kEAAkE;AAClE,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAGjD;AAID,KAAK,YAAY,GAAG,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;AAEhD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,SAAS,EAAE,GAAG,IAAI,EAAE,CAIlH;AAED,qHAAqH;AACrH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,SAAS,EAAE,EAAE,KAAK,EAAE,YAAY,GAAG,SAAS,GAAG,MAAM,EAAE,CAEjJ;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,YAAY,EACtB,CAAC,EAAE,UAAU,EACb,QAAQ,EAAE,SAAS,SAAS,EAAE,EAC9B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,OAAO,SAAqB,GAC3B,KAAK,CAUP;AAED,kEAAkE;AAClE,wBAAgB,OAAO,CACrB,QAAQ,EAAE,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,EACjC,CAAC,EAAE,UAAU,EACb,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,EAClC,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,GACX,KAAK,CAcP;AAKD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HnB,CAAA;AA+JF,kHAAkH;AAClH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,MAAM,CAGxE"}