@efxlab/motion-canvas-2d 4.0.0

package/lib/components/Txt.js

@@ -0,0 +1,172 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var Txt_1;
+import { DEFAULT, all, capitalize, threadable, } from '@efxlab/motion-canvas-core';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { is } from '../utils';
+import { Shape } from './Shape';
+import { TxtLeaf } from './TxtLeaf';
+let Txt = Txt_1 = class Txt extends Shape {
+    /**
+     * Create a bold text node.
+     *
+     * @remarks
+     * This is a shortcut for
+     * ```tsx
+     * <Txt fontWeight={700} />
+     * ```
+     *
+     * @param props - Additional text properties.
+     */
+    static b(props) {
+        return new Txt_1({ ...props, fontWeight: 700 });
+    }
+    /**
+     * Create an italic text node.
+     *
+     * @remarks
+     * This is a shortcut for
+     * ```tsx
+     * <Txt fontStyle={'italic'} />
+     * ```
+     *
+     * @param props - Additional text properties.
+     */
+    static i(props) {
+        return new Txt_1({ ...props, fontStyle: 'italic' });
+    }
+    getText() {
+        return this.innerText();
+    }
+    setText(value) {
+        const children = this.children();
+        let leaf = null;
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            if (leaf === null && child instanceof TxtLeaf) {
+                leaf = child;
+            }
+            else {
+                child.parent(null);
+            }
+        }
+        if (leaf === null) {
+            leaf = new TxtLeaf({ text: value });
+            leaf.parent(this);
+        }
+        else {
+            leaf.text(value);
+        }
+        this.setParsedChildren([leaf]);
+    }
+    setChildren(value) {
+        if (this.children.context.raw() === value) {
+            return;
+        }
+        if (typeof value === 'string') {
+            this.text(value);
+        }
+        else {
+            super.setChildren(value);
+        }
+    }
+    *tweenText(value, time, timingFunction, interpolationFunction) {
+        const children = this.children();
+        if (children.length !== 1 || !(children[0] instanceof TxtLeaf)) {
+            this.text.save();
+        }
+        const leaf = this.childAs(0);
+        const oldText = leaf.text.context.raw();
+        const oldSize = this.size.context.raw();
+        leaf.text(value);
+        const newSize = this.size();
+        leaf.text(oldText ?? DEFAULT);
+        const oldHeight = this.height();
+        if (oldHeight === 0) {
+            this.height(newSize.height);
+        }
+        else if (newSize.height === 0) {
+            newSize.height = oldHeight;
+        }
+        yield* all(this.size(newSize, time, timingFunction), leaf.text(value, time, timingFunction, interpolationFunction));
+        this.children.context.setter(value);
+        this.size(oldSize);
+    }
+    getLayout() {
+        return true;
+    }
+    constructor({ children, text, ...props }) {
+        super(props);
+        this.children(text ?? children);
+    }
+    innerText() {
+        const children = this.childrenAs();
+        let text = '';
+        for (const child of children) {
+            text += child.text();
+        }
+        return text;
+    }
+    parentTxt() {
+        const parent = this.parent();
+        return parent instanceof Txt_1 ? parent : null;
+    }
+    parseChildren(children) {
+        const result = [];
+        const array = Array.isArray(children) ? children : [children];
+        for (const child of array) {
+            if (child instanceof Txt_1 || child instanceof TxtLeaf) {
+                result.push(child);
+            }
+            else if (typeof child === 'string') {
+                result.push(new TxtLeaf({ text: child }));
+            }
+        }
+        return result;
+    }
+    applyFlex() {
+        super.applyFlex();
+        this.element.style.display = this.findAncestor(is(Txt_1))
+            ? 'inline'
+            : 'block';
+    }
+    draw(context) {
+        this.drawChildren(context);
+    }
+};
+__decorate([
+    initial(''),
+    signal()
+], Txt.prototype, "text", void 0);
+__decorate([
+    threadable()
+], Txt.prototype, "tweenText", null);
+__decorate([
+    computed()
+], Txt.prototype, "innerText", null);
+__decorate([
+    computed()
+], Txt.prototype, "parentTxt", null);
+Txt = Txt_1 = __decorate([
+    nodeName('Txt')
+], Txt);
+export { Txt };
+[
+    'fill',
+    'stroke',
+    'lineWidth',
+    'strokeFirst',
+    'lineCap',
+    'lineJoin',
+    'lineDash',
+    'lineDashOffset',
+].forEach(prop => {
+    Txt.prototype[`getDefault${capitalize(prop)}`] = function (initial) {
+        return this.parentTxt()?.[prop]() ?? initial;
+    };
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVHh0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL1R4dC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUEsT0FBTyxFQUNMLE9BQU8sRUFNUCxHQUFHLEVBQ0gsVUFBVSxFQUNWLFVBQVUsR0FDWCxNQUFNLDRCQUE0QixDQUFDO0FBQ3BDLE9BQU8sRUFBQyxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDbEUsT0FBTyxFQUFDLEVBQUUsRUFBQyxNQUFNLFVBQVUsQ0FBQztBQUU1QixPQUFPLEVBQUMsS0FBSyxFQUFhLE1BQU0sU0FBUyxDQUFDO0FBQzFDLE9BQU8sRUFBQyxPQUFPLEVBQUMsTUFBTSxXQUFXLENBQUM7QUFZM0IsSUFBTSxHQUFHLFdBQVQsTUFBTSxHQUFJLFNBQVEsS0FBSztJQUM1Qjs7Ozs7Ozs7OztPQVVHO0lBQ0ksTUFBTSxDQUFDLENBQUMsQ0FBQyxLQUFlO1FBQzdCLE9BQU8sSUFBSSxLQUFHLENBQUMsRUFBQyxHQUFHLEtBQUssRUFBRSxVQUFVLEVBQUUsR0FBRyxFQUFDLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRUQ7Ozs7Ozs7Ozs7T0FVRztJQUNJLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBZTtRQUM3QixPQUFPLElBQUksS0FBRyxDQUFDLEVBQUMsR0FBRyxLQUFLLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBQyxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQU1TLE9BQU87UUFDZixPQUFPLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRVMsT0FBTyxDQUFDLEtBQTBCO1FBQzFDLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNqQyxJQUFJLElBQUksR0FBbUIsSUFBSSxDQUFDO1FBQ2hDLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FB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

package/lib/components/TxtLeaf.d.ts

@@ -0,0 +1,20 @@
+import { BBox, SignalValue, SimpleSignal } from '@efxlab/motion-canvas-core';
+import { Shape, ShapeProps } from './Shape';
+import { Txt } from './Txt';
+export interface TxtLeafProps extends ShapeProps {
+    children?: string;
+    text?: SignalValue<string>;
+}
+export declare class TxtLeaf extends Shape {
+    protected static formatter: HTMLDivElement;
+    protected static readonly segmenter: any;
+    readonly text: SimpleSignal<string, this>;
+    constructor({ children, ...rest }: TxtLeafProps);
+    protected parentTxt(): Txt | null;
+    protected draw(context: CanvasRenderingContext2D): void;
+    protected drawText(context: CanvasRenderingContext2D, text: string, box: BBox): void;
+    protected getCacheBBox(): BBox;
+    protected applyFlex(): void;
+    protected updateLayout(): void;
+}
+//# sourceMappingURL=TxtLeaf.d.ts.map

package/lib/components/TxtLeaf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TxtLeaf.d.ts","sourceRoot":"","sources":["../../src/lib/components/TxtLeaf.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,WAAW,EACX,YAAY,EAIb,MAAM,4BAA4B,CAAC;AAQpC,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,qBACa,OAAQ,SAAQ,KAAK;IAMhC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC;IAW3C,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAC;IAEzC,SAGwB,IAAI,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBAEtC,EAAC,QAAQ,EAAE,GAAG,IAAI,EAAC,EAAE,YAAY;IAQpD,SAAS,CAAC,SAAS;cAKA,IAAI,CAAC,OAAO,EAAE,wBAAwB;IAmDzD,SAAS,CAAC,QAAQ,CAChB,OAAO,EAAE,wBAAwB,EACjC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,IAAI;cAkBQ,YAAY,IAAI,IAAI;cAepB,SAAS;cAKT,YAAY;CAmChC"}

package/lib/components/TxtLeaf.js

@@ -0,0 +1,185 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var TxtLeaf_1;
+import { BBox, capitalize, lazy, textLerp, } from '@efxlab/motion-canvas-core';
+import { computed, initial, interpolation, nodeName, signal, } from '../decorators';
+import { Shape } from './Shape';
+import { Txt } from './Txt';
+import { View2D } from './View2D';
+let TxtLeaf = class TxtLeaf extends Shape {
+    static { TxtLeaf_1 = this; }
+    static formatter;
+    static segmenter;
+    constructor({ children, ...rest }) {
+        super(rest);
+        if (children) {
+            this.text(children);
+        }
+    }
+    parentTxt() {
+        const parent = this.parent();
+        return parent instanceof Txt ? parent : null;
+    }
+    draw(context) {
+        this.requestFontUpdate();
+        this.applyStyle(context);
+        this.applyText(context);
+        context.font = this.styles.font;
+        context.textBaseline = 'bottom';
+        if ('letterSpacing' in context) {
+            context.letterSpacing = `${this.letterSpacing()}px`;
+        }
+        const fontOffset = context.measureText('').fontBoundingBoxAscent;
+        const parentRect = this.element.getBoundingClientRect();
+        const { width, height } = this.size();
+        const range = document.createRange();
+        let line = '';
+        let lineRect = null;
+        for (const childNode of this.element.childNodes) {
+            if (!childNode.textContent) {
+                continue;
+            }
+            range.selectNodeContents(childNode);
+            const rangeRect = range.getBoundingClientRect();
+            const x = width / -2 + rangeRect.left - parentRect.left;
+            const y = height / -2 + rangeRect.top - parentRect.top + fontOffset;
+            if (!lineRect) {
+                lineRect = new BBox(x, y, rangeRect.width, rangeRect.height);
+                line = childNode.textContent;
+                continue;
+            }
+            if (lineRect.y === y) {
+                lineRect.width += rangeRect.width;
+                line += childNode.textContent;
+            }
+            else {
+                this.drawText(context, line, lineRect);
+                lineRect.x = x;
+                lineRect.y = y;
+                lineRect.width = rangeRect.width;
+                lineRect.height = rangeRect.height;
+                line = childNode.textContent;
+            }
+        }
+        if (lineRect) {
+            this.drawText(context, line, lineRect);
+        }
+    }
+    drawText(context, text, box) {
+        const y = box.y;
+        if (this.styles.whiteSpace !== 'pre') {
+            text = text.replace(/\s+/g, ' ');
+        }
+        if (this.lineWidth() <= 0) {
+            context.fillText(text, box.x, y);
+        }
+        else if (this.strokeFirst()) {
+            context.strokeText(text, box.x, y);
+            context.fillText(text, box.x, y);
+        }
+        else {
+            context.fillText(text, box.x, y);
+            context.strokeText(text, box.x, y);
+        }
+    }
+    getCacheBBox() {
+        const size = this.computedSize();
+        const range = document.createRange();
+        range.selectNodeContents(this.element);
+        const bbox = range.getBoundingClientRect();
+        const lineWidth = this.lineWidth();
+        // We take the default value of the miterLimit as 10.
+        const miterLimitCoefficient = this.lineJoin() === 'miter' ? 0.5 * 10 : 0.5;
+        return new BBox(-size.width / 2, -size.height / 2, bbox.width, bbox.height)
+            .expand([0, this.fontSize() * 0.5])
+            .expand(lineWidth * miterLimitCoefficient);
+    }
+    applyFlex() {
+        super.applyFlex();
+        this.element.style.display = 'inline';
+    }
+    updateLayout() {
+        this.applyFont();
+        this.applyFlex();
+        // Make sure the text is aligned correctly even if the text is smaller than
+        // the container.
+        if (this.justifyContent.isInitial()) {
+            this.element.style.justifyContent =
+                this.styles.getPropertyValue('text-align');
+        }
+        const wrap = this.styles.whiteSpace !== 'nowrap' && this.styles.whiteSpace !== 'pre';
+        if (wrap) {
+            this.element.innerText = '';
+            if (TxtLeaf_1.segmenter) {
+                for (const word of TxtLeaf_1.segmenter.segment(this.text())) {
+                    this.element.appendChild(document.createTextNode(word.segment));
+                }
+            }
+            else {
+                for (const word of this.text().split('')) {
+                    this.element.appendChild(document.createTextNode(word));
+                }
+            }
+        }
+        else if (this.styles.whiteSpace === 'pre') {
+            this.element.innerText = '';
+            for (const line of this.text().split('\n')) {
+                this.element.appendChild(document.createTextNode(line + '\n'));
+            }
+        }
+        else {
+            this.element.innerText = this.text();
+        }
+    }
+};
+__decorate([
+    initial(''),
+    interpolation(textLerp),
+    signal()
+], TxtLeaf.prototype, "text", void 0);
+__decorate([
+    computed()
+], TxtLeaf.prototype, "parentTxt", null);
+__decorate([
+    lazy(() => {
+        const formatter = document.createElement('span');
+        View2D.shadowRoot.append(formatter);
+        return formatter;
+    })
+], TxtLeaf, "formatter", void 0);
+__decorate([
+    lazy(() => {
+        try {
+            return new Intl.Segmenter(undefined, {
+                granularity: 'grapheme',
+            });
+        }
+        catch (e) {
+            return null;
+        }
+    })
+], TxtLeaf, "segmenter", void 0);
+TxtLeaf = TxtLeaf_1 = __decorate([
+    nodeName('TxtLeaf')
+], TxtLeaf);
+export { TxtLeaf };
+[
+    'fill',
+    'stroke',
+    'lineWidth',
+    'strokeFirst',
+    'lineCap',
+    'lineJoin',
+    'lineDash',
+    'lineDashOffset',
+].forEach(prop => {
+    TxtLeaf.prototype[`get${capitalize(prop)}`] = function () {
+        return (this.parentTxt()?.[prop]() ??
+            this[prop].context.getInitial());
+    };
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVHh0TGVhZi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9UeHRMZWFmLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsSUFBSSxFQUdKLFVBQVUsRUFDVixJQUFJLEVBQ0osUUFBUSxHQUNULE1BQU0sNEJBQTRCLENBQUM7QUFDcEMsT0FBTyxFQUNMLFFBQVEsRUFDUixPQUFPLEVBQ1AsYUFBYSxFQUNiLFFBQVEsRUFDUixNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLEtBQUssRUFBYSxNQUFNLFNBQVMsQ0FBQztBQUMxQyxPQUFPLEVBQUMsR0FBRyxFQUFDLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBQyxNQUFNLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFRekIsSUFBTSxPQUFPLEdBQWIsTUFBTSxPQUFRLFNBQVEsS0FBSzs7SUFNZixBQUFQLE1BQU0sQ0FBQyxTQUFTLENBQWlCO0lBV2pCLEFBQWhCLE1BQU0sQ0FBVSxTQUFTLENBQU07SUFPekMsWUFBbUIsRUFBQyxRQUFRLEVBQUUsR0FBRyxJQUFJLEVBQWU7UUFDbEQsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ1osSUFBSSxRQUFRLEVBQUUsQ0FBQztZQUNiLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDdEIsQ0FBQztJQUNILENBQUM7SUFHUyxTQUFTO1FBQ2pCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUM3QixPQUFPLE1BQU0sWUFBWSxHQUFHLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO0lBQy9DLENBQUM7SUFFa0IsSUFBSSxDQUFDLE9BQWlDO1FBQ3ZELElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENB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

package/lib/components/Video.d.ts

@@ -0,0 +1,110 @@
+import { SerializedVector2, SignalValue, SimpleSignal } from '@efxlab/motion-canvas-core';
+import { DesiredLength } from '../partials';
+import { Rect, RectProps } from './Rect';
+export interface VideoProps extends RectProps {
+    /**
+     * {@inheritDoc Video.src}
+     */
+    src?: SignalValue<string>;
+    /**
+     * {@inheritDoc Video.alpha}
+     */
+    alpha?: SignalValue<number>;
+    /**
+     * {@inheritDoc Video.smoothing}
+     */
+    smoothing?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Video.loop}
+     */
+    loop?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Video.playbackRate}
+     */
+    playbackRate?: number;
+    /**
+     * The starting time for this video in seconds.
+     */
+    time?: SignalValue<number>;
+    play?: boolean;
+}
+export declare class Video extends Rect {
+    private static readonly pool;
+    /**
+     * The source of this video.
+     *
+     * @example
+     * Using a local video:
+     * ```tsx
+     * import video from './example.mp4';
+     * // ...
+     * view.add(<Video src={video} />)
+     * ```
+     * Loading an image from the internet:
+     * ```tsx
+     * view.add(<Video src="https://example.com/video.mp4" />)
+     * ```
+     */
+    readonly src: SimpleSignal<string, this>;
+    /**
+     * The alpha value of this video.
+     *
+     * @remarks
+     * Unlike opacity, the alpha value affects only the video itself, leaving the
+     * fill, stroke, and children intact.
+     */
+    readonly alpha: SimpleSignal<number, this>;
+    /**
+     * Whether the video should be smoothed.
+     *
+     * @remarks
+     * When disabled, the video will be scaled using the nearest neighbor
+     * interpolation with no smoothing. The resulting video will appear pixelated.
+     *
+     * @defaultValue true
+     */
+    readonly smoothing: SimpleSignal<boolean, this>;
+    /**
+     * Whether this video should loop upon reaching the end.
+     */
+    readonly loop: SimpleSignal<boolean, this>;
+    /**
+     * The rate at which the video plays, as multiples of the normal speed.
+     *
+     * @defaultValue 1
+     */
+    readonly playbackRate: SimpleSignal<number, this>;
+    protected readonly time: SimpleSignal<number, this>;
+    protected readonly playing: SimpleSignal<boolean, this>;
+    private lastTime;
+    constructor({ play, ...props }: VideoProps);
+    /**
+     * {@inheritDoc Curve.completion}
+     */
+    curveCompletion(): number;
+    isPlaying(): boolean;
+    getCurrentTime(): number;
+    getDuration(): number;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    /**
+     * The completion of this video in the range from 0 to 1.
+     *
+     * @remarks
+     * To get the percentage of the stroke that's currently visible, use
+     * {@link Video.curveCompletion} instead.
+     */
+    completion(): number;
+    protected video(): HTMLVideoElement;
+    protected seekedVideo(): HTMLVideoElement;
+    protected fastSeekedVideo(): HTMLVideoElement;
+    protected draw(context: CanvasRenderingContext2D): void;
+    protected applyFlex(): void;
+    protected setCurrentTime(value: number): void;
+    protected setPlaybackRate(playbackRate: number): void;
+    play(): void;
+    pause(): void;
+    seek(time: number): void;
+    clampTime(time: number): number;
+    protected collectAsyncResources(): void;
+}
+//# sourceMappingURL=Video.d.ts.map

package/lib/components/Video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.d.ts","sourceRoot":"","sources":["../../src/lib/components/Video.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EACjB,WAAW,EACX,YAAY,EAKb,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C;;OAEG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,qBACa,KAAM,SAAQ,IAAI;IAC7B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAwC;IAEpE;;;;;;;;;;;;;;OAcG;IACH,SACwB,GAAG,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAExD;;;;;;OAMG;IACH,SAEwB,KAAK,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE1D;;;;;;;;OAQG;IACH,SAEwB,SAAS,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAE/D;;OAEG;IACH,SAEwB,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAE1D;;;;OAIG;IACH,SAEwB,YAAY,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEjE,mBAE2B,IAAI,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE5D,mBAE2B,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAEhE,OAAO,CAAC,QAAQ,CAAM;gBAEH,EAAC,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU;IAO/C;;OAEG;IACI,eAAe,IAAI,MAAM;IAIzB,SAAS,IAAI,OAAO;IAIpB,cAAc,IAAI,MAAM;IAIxB,WAAW,IAAI,MAAM;cAIT,WAAW,IAAI,iBAAiB,CAAC,aAAa,CAAC;IAalE;;;;;;OAMG;IAEa,UAAU,IAAI,MAAM;IAKpC,SAAS,CAAC,KAAK,IAAI,gBAAgB;IA0BnC,SAAS,CAAC,WAAW,IAAI,gBAAgB;IAoBzC,SAAS,CAAC,eAAe,IAAI,gBAAgB;cA+B1B,IAAI,CAAC,OAAO,EAAE,wBAAwB;cA6BtC,SAAS;IAQ5B,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM;IAmBtC,SAAS,CAAC,eAAe,CAAC,YAAY,EAAE,MAAM;IA2BvC,IAAI;IASJ,KAAK;IAML,IAAI,CAAC,IAAI,EAAE,MAAM;IAUjB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;cAQnB,qBAAqB;CAIzC"}