@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/KeyframeEditor.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import Curve from './Curve';
+import CurveHandle from './CurveHandle';
+import GraphEditorDotScalar from './GraphEditorDotScalar';
+import GraphEditorDotNonScalar from './GraphEditorDotNonScalar';
+import GraphEditorNonScalarDash from './GraphEditorNonScalarDash';
+const Container = styled.g `
+  /* position: absolute; */
+`;
+const noConnector = React.createElement(React.Fragment, null);
+const KeyframeEditor = (props) => {
+    const { index, trackData, isScalar } = props;
+    const cur = trackData.keyframes[index];
+    const next = trackData.keyframes[index + 1];
+    const connected = cur.connectedRight && !!next;
+    const shouldShowCurve = connected && next.value !== cur.value;
+    return (React.createElement(Container, null,
+        shouldShowCurve ? (React.createElement(React.Fragment, null,
+            React.createElement(Curve, { ...props }),
+            !cur.type ||
+                (cur.type === 'bezier' && (React.createElement(React.Fragment, null,
+                    React.createElement(CurveHandle, { ...props, which: "left" }),
+                    React.createElement(CurveHandle, { ...props, which: "right" })))))) : (noConnector),
+        isScalar ? (React.createElement(GraphEditorDotScalar, { ...props })) : (React.createElement(React.Fragment, null,
+            React.createElement(GraphEditorDotNonScalar, { ...props, which: "left" }),
+            React.createElement(GraphEditorDotNonScalar, { ...props, which: "right" }),
+            React.createElement(GraphEditorNonScalarDash, { ...props })))));
+};
+export default KeyframeEditor;

package/dist/panels/SequenceEditorPanel/GraphEditor/GraphEditor.d.ts

@@ -0,0 +1,28 @@
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+export declare const graphEditorColors: {
+    '1': {
+        iconColor: string;
+    };
+    '2': {
+        iconColor: string;
+    };
+    '3': {
+        iconColor: string;
+    };
+    '4': {
+        iconColor: string;
+    };
+    '5': {
+        iconColor: string;
+    };
+    '6': {
+        iconColor: string;
+    };
+};
+declare const GraphEditor: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+}>;
+export default GraphEditor;
+//# sourceMappingURL=GraphEditor.d.ts.map

package/dist/panels/SequenceEditorPanel/GraphEditor/GraphEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphEditor.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAOvH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAO7B,CAAA;AAiBD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAC5C,CAqFA,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/panels/SequenceEditorPanel/GraphEditor/GraphEditor.js

@@ -0,0 +1,73 @@
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { decodePathToProp } from '@tomorrowevening/theatre-shared/utils/addresses';
+import getDeep from '@tomorrowevening/theatre-shared/utils/getDeep';
+import { usePrism } from '@tomorrowevening/theatre-react';
+import { val } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import styled from 'styled-components';
+import { contentWidth } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/Right';
+import HorizontallyScrollableArea from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea';
+import PrimitivePropGraph from './PrimitivePropGraph';
+import FrameGrid from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid';
+import { transparentize } from 'polished';
+export const graphEditorColors = {
+    '1': { iconColor: '#b98b08' },
+    '2': { iconColor: '#70a904' },
+    '3': { iconColor: '#2e928a' },
+    '4': { iconColor: '#a943bb' },
+    '5': { iconColor: '#b90808' },
+    '6': { iconColor: '#b4bf0e' },
+};
+const Container = styled.div `
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background: ${transparentize(0.03, '#1a1c1e')};
+`;
+const SVGContainer = styled.svg `
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  pointer-events: none;
+`;
+const GraphEditor = ({ layoutP }) => {
+    return usePrism(() => {
+        const sheet = val(layoutP.sheet);
+        const selectedPropsByObject = val(getStudio().atomP.historic.projects.stateByProjectId[sheet.address.projectId].stateBySheetId[sheet.address.sheetId].sequenceEditor
+            .selectedPropsByObject);
+        const height = val(layoutP.graphEditorDims.height);
+        const unitSpaceToScaledSpaceMultiplier = val(layoutP.scaledSpace.fromUnitSpace)(1);
+        const graphs = [];
+        if (selectedPropsByObject) {
+            for (const [objectKey, props] of Object.entries(selectedPropsByObject)) {
+                const sheetObject = sheet.getObject(objectKey);
+                if (!sheetObject)
+                    continue;
+                const validSequenceTracks = val(sheetObject.template.getMapOfValidSequenceTracks_forStudio());
+                for (const [encodedPathToProp, graphEditorColor] of Object.entries(props)) {
+                    const pathToProp = decodePathToProp(encodedPathToProp);
+                    const possibleSequenceTrackId = getDeep(validSequenceTracks, pathToProp);
+                    if (!possibleSequenceTrackId)
+                        continue;
+                    graphs.push(React.createElement(PrimitivePropGraph, { key: `graph-${objectKey}-${encodedPathToProp}`, sheetObject: sheetObject, pathToProp: pathToProp, layoutP: layoutP, trackId: possibleSequenceTrackId, color: graphEditorColor }));
+                }
+            }
+        }
+        const width = val(layoutP.rightDims.width);
+        return (React.createElement(Container, { style: {
+                width: width + 'px',
+                height: height + 'px',
+                // @ts-expect-error
+                '--unitSpaceToScaledSpaceMultiplier': unitSpaceToScaledSpaceMultiplier,
+                '--graphEditorVerticalSpace': `${val(layoutP.graphEditorVerticalSpace.space)}`,
+            } },
+            React.createElement(FrameGrid, { layoutP: layoutP, width: width, height: height }),
+            React.createElement(HorizontallyScrollableArea, { layoutP: layoutP, height: height },
+                React.createElement(SVGContainer, { width: contentWidth, height: height, viewBox: `0 0 ${contentWidth} ${height}` },
+                    React.createElement("g", { style: {
+                            transform: `translate(${val(layoutP.scaledSpace.leftPadding)}px, ${val(layoutP.graphEditorDims.padding.top)}px)`,
+                        } }, graphs)))));
+    }, [layoutP]);
+};
+export default GraphEditor;

package/dist/panels/SequenceEditorPanel/GraphEditor/PrimitivePropGraph.d.ts

@@ -0,0 +1,16 @@
+import type SheetObject from '@tomorrowevening/theatre-core/sheetObjects/SheetObject';
+import type { PathToProp } from '@tomorrowevening/theatre-shared/utils/addresses';
+import type { SequenceTrackId } from '@tomorrowevening/theatre-shared/utils/ids';
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import type { graphEditorColors } from './GraphEditor';
+declare const PrimitivePropGraph: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+    sheetObject: SheetObject;
+    pathToProp: PathToProp;
+    trackId: SequenceTrackId;
+    color: keyof typeof graphEditorColors;
+}>;
+export default PrimitivePropGraph;
+//# sourceMappingURL=PrimitivePropGraph.d.ts.map

package/dist/panels/SequenceEditorPanel/GraphEditor/PrimitivePropGraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitivePropGraph.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/GraphEditor/PrimitivePropGraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,wDAAwD,CAAA;AAErF,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,iDAAiD,CAAA;AAC/E,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,2CAA2C,CAAA;AAE9E,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAEvH,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAA;AAEpD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;IAC3C,WAAW,EAAE,WAAW,CAAA;IACxB,UAAU,EAAE,UAAU,CAAA;IACtB,OAAO,EAAE,eAAe,CAAA;IACxB,KAAK,EAAE,MAAM,OAAO,iBAAiB,CAAA;CACtC,CAmBA,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/dist/panels/SequenceEditorPanel/GraphEditor/PrimitivePropGraph.js

@@ -0,0 +1,20 @@
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import { usePrism } from '@tomorrowevening/theatre-react';
+import { val } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import BasicKeyframedTrack from './BasicKeyframedTrack/BasicKeyframedTrack';
+const PrimitivePropGraph = (props) => {
+    return usePrism(() => {
+        const { sheetObject, trackId } = props;
+        const trackData = val(getStudio().atomP.historic.coreByProject[sheetObject.address.projectId]
+            .sheetsById[sheetObject.address.sheetId].sequence.tracksByObject[sheetObject.address.objectKey].trackData[trackId]);
+        if (trackData?.type !== 'BasicKeyframedTrack') {
+            console.error(`trackData type ${trackData?.type} is not yet supported on the graph editor`);
+            return React.createElement(React.Fragment, null);
+        }
+        else {
+            return React.createElement(BasicKeyframedTrack, { ...props, trackData: trackData });
+        }
+    }, [props.trackId, props.layoutP]);
+};
+export default PrimitivePropGraph;

package/dist/panels/SequenceEditorPanel/GraphEditorToggle.d.ts

@@ -0,0 +1,8 @@
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import React from 'react';
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+declare const GraphEditorToggle: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+}>;
+export default GraphEditorToggle;
+//# sourceMappingURL=GraphEditorToggle.d.ts.map

package/dist/panels/SequenceEditorPanel/GraphEditorToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphEditorToggle.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAI/D,OAAO,KAAoB,MAAM,OAAO,CAAA;AAExC,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AA2CvH,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAC5C,CAoBA,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/panels/SequenceEditorPanel/GraphEditorToggle.js

@@ -0,0 +1,59 @@
+import { val } from '@tomorrowevening/theatre-dataverse';
+import { useVal } from '@tomorrowevening/theatre-react';
+import getStudio from '@tomorrowevening/theatre-studio/getStudio';
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import { VscTriangleUp } from 'react-icons/all';
+import { includeLockFrameStampAttrs } from './FrameStampPositionProvider';
+const Container = styled.button `
+  outline: none;
+  background-color: #1c1d21;
+  border: 1px solid #191919;
+  border-radius: 2px;
+  display: flex;
+  bottom: 14px;
+  right: 8px;
+  z-index: 1;
+  position: absolute;
+
+  padding: 4px 8px;
+  display: flex;
+  color: #656d77;
+  line-height: 20px;
+  font-size: 10px;
+
+  &:hover {
+    color: white;
+  }
+
+  & > svg {
+    transition: transform 0.3s;
+    transform: rotateZ(0deg);
+  }
+
+  &:hover > svg {
+    transform: rotateZ(-20deg);
+  }
+
+  &.open > svg {
+    transform: rotateZ(-180deg);
+  }
+
+  &.open:hover > svg {
+    transform: rotateZ(-160deg);
+  }
+`;
+const GraphEditorToggle = ({ layoutP }) => {
+    const isOpen = useVal(layoutP.graphEditorDims.isOpen);
+    const toggle = useCallback(() => {
+        const isOpen = val(layoutP.graphEditorDims.isOpen);
+        getStudio().transaction(({ stateEditors }) => {
+            stateEditors.studio.historic.panels.sequenceEditor.graphEditor.setIsOpen({
+                isOpen: !isOpen,
+            });
+        });
+    }, [layoutP]);
+    return (React.createElement(Container, { onClick: toggle, title: 'Toggle graph editor', className: isOpen ? 'open' : '', ...includeLockFrameStampAttrs('hide') },
+        React.createElement(VscTriangleUp, null)));
+};
+export default GraphEditorToggle;

package/dist/panels/SequenceEditorPanel/RightOverlay/DopeSnap.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Uses `[data-pos]` attribute to understand potential snap targets.
+ */
+declare const DopeSnap: {
+    checkIfMouseEventSnapToPos(event: MouseEvent, options?: {
+        ignore?: Element | null;
+    }): number | null;
+    /**
+     * Use as a spread in a React element
+     *
+     * @example
+     * ```tsx
+     * <div {...DopeSnap.includePositionSnapAttrs(10)}/>
+     * ```
+     */
+    includePositionSnapAttrs(position: number): {
+        "data-pos": number;
+    };
+};
+export default DopeSnap;
+//# sourceMappingURL=DopeSnap.d.ts.map

package/dist/panels/SequenceEditorPanel/RightOverlay/DopeSnap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DopeSnap.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/DopeSnap.tsx"],"names":[],"mappings":"AAMA;;GAEG;AACH,QAAA,MAAM,QAAQ;sCAEH,UAAU,YACP;QAAC,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;KAAC,GAClC,MAAM,GAAG,IAAI;IAoBhB;;;;;;;OAOG;uCACgC,MAAM;;;CAG1C,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/panels/SequenceEditorPanel/RightOverlay/DopeSnap.js

@@ -0,0 +1,36 @@
+// Pretty much same code as for keyframe and similar for playhead.
+// Consider if we should unify the implementations.
+// - See "useLockFrameStampPosition"
+// - Also see "pointerPositionInUnitSpace" for a related impl (for different problem)
+const POSITION_SNAP_ATTR = 'data-pos';
+/**
+ * Uses `[data-pos]` attribute to understand potential snap targets.
+ */
+const DopeSnap = {
+    checkIfMouseEventSnapToPos(event, options) {
+        const snapTarget = event
+            .composedPath()
+            .find((el) => el instanceof Element &&
+            el !== options?.ignore &&
+            el.hasAttribute(POSITION_SNAP_ATTR));
+        if (snapTarget) {
+            const snapPos = parseFloat(snapTarget.getAttribute(POSITION_SNAP_ATTR));
+            if (isFinite(snapPos)) {
+                return snapPos;
+            }
+        }
+        return null;
+    },
+    /**
+     * Use as a spread in a React element
+     *
+     * @example
+     * ```tsx
+     * <div {...DopeSnap.includePositionSnapAttrs(10)}/>
+     * ```
+     */
+    includePositionSnapAttrs(position) {
+        return { [POSITION_SNAP_ATTR]: position };
+    },
+};
+export default DopeSnap;

package/dist/panels/SequenceEditorPanel/RightOverlay/DopeSnapHitZoneUI.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Helper CSS for consistent display of the `⸢⸤⸣⸥` thing
+ */
+export declare const DopeSnapHitZoneUI: {
+    BEING_DRAGGED_CLASS: string;
+    CSS: import("styled-components").FlattenSimpleInterpolation;
+    CSS_WHEN_SOMETHING_DRAGGING: import("styled-components").FlattenSimpleInterpolation;
+    /** Intrinsic element props for `<HitZone/>`s */
+    reactProps(config: {
+        position: number;
+        isDragging: boolean;
+    }): {
+        className: string;
+        "data-pos": number;
+        "data-theatre-lock-framestamp-to": string;
+    };
+};
+//# sourceMappingURL=DopeSnapHitZoneUI.d.ts.map

package/dist/panels/SequenceEditorPanel/RightOverlay/DopeSnapHitZoneUI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DopeSnapHitZoneUI.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/DopeSnapHitZoneUI.tsx"],"names":[],"mappings":"AAYA;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;IA8B5B,gDAAgD;uBAC7B;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAC;;;;;CAY3D,CAAA"}

package/dist/panels/SequenceEditorPanel/RightOverlay/DopeSnapHitZoneUI.js

@@ -0,0 +1,57 @@
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+import { lockedCursorCssVarName } from '@tomorrowevening/theatre-studio/uiComponents/PointerEventsHandler';
+import { css } from 'styled-components';
+import SnapCursor from './SnapCursor.svg';
+import { absoluteDims } from '@tomorrowevening/theatre-studio/utils/absoluteDims';
+import DopeSnap from './DopeSnap';
+import { includeLockFrameStampAttrs } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/FrameStampPositionProvider';
+const HIT_ZONE_SIZE_PX = 12;
+const SNAP_CURSOR_SIZE_PX = 34;
+const BEING_DRAGGED_CLASS = 'beingDragged';
+/**
+ * Helper CSS for consistent display of the `⸢⸤⸣⸥` thing
+ */
+export const DopeSnapHitZoneUI = {
+    BEING_DRAGGED_CLASS,
+    CSS: css `
+    position: absolute;
+    ${absoluteDims(HIT_ZONE_SIZE_PX)};
+    ${pointerEventsAutoInNormalMode};
+
+    &.${BEING_DRAGGED_CLASS} {
+      pointer-events: none !important;
+    }
+  `,
+    CSS_WHEN_SOMETHING_DRAGGING: css `
+    pointer-events: auto;
+    cursor: var(${lockedCursorCssVarName});
+
+    // ⸢⸤⸣⸥ thing
+    // This box extends the hitzone so the user does not
+    // accidentally leave the hitzone
+    &:hover:after {
+      position: absolute;
+      top: calc(50% - ${SNAP_CURSOR_SIZE_PX / 2}px);
+      left: calc(50% - ${SNAP_CURSOR_SIZE_PX / 2}px);
+      width: ${SNAP_CURSOR_SIZE_PX}px;
+      height: ${SNAP_CURSOR_SIZE_PX}px;
+      display: block;
+      content: ' ';
+      background: url(${SnapCursor}) no-repeat 100% 100%;
+      // This icon might also fit: GiConvergenceTarget
+    }
+  `,
+    /** Intrinsic element props for `<HitZone/>`s */
+    reactProps(config) {
+        return {
+            // `data-pos` and `includeLockFrameStampAttrs` are used by FrameStampPositionProvider
+            // in order to handle snapping the playhead. Adding these props effectively
+            // causes the playhead to "snap" to the marker on mouse over.
+            // `pointerEventsAutoInNormalMode` and `lockedCursorCssVarName` in the CSS above are also
+            // used to make this behave correctly.
+            ...includeLockFrameStampAttrs(config.position),
+            ...DopeSnap.includePositionSnapAttrs(config.position),
+            className: config.isDragging ? DopeSnapHitZoneUI.BEING_DRAGGED_CLASS : '',
+        };
+    },
+};

package/dist/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeStrip.d.ts

@@ -0,0 +1,32 @@
+import type { Pointer } from '@tomorrowevening/theatre-dataverse';
+import type { SequenceEditorPanelLayout } from '@tomorrowevening/theatre-studio/panels/SequenceEditorPanel/layout/layout';
+import React from 'react';
+export declare const focusRangeStripTheme: {
+    enabled: {
+        backgroundColor: string;
+        stroke: string;
+    };
+    disabled: {
+        backgroundColor: string;
+        stroke: string;
+    };
+    hover: {
+        backgroundColor: string;
+        stroke: string;
+    };
+    dragging: {
+        backgroundColor: string;
+        stroke: string;
+    };
+    thumbWidth: number;
+    hitZoneWidth: number;
+    rangeStripMinWidth: number;
+};
+export declare const RangeStrip: import("styled-components").StyledComponent<"div", any, {
+    enabled: boolean;
+}, never>;
+declare const FocusRangeStrip: React.FC<{
+    layoutP: Pointer<SequenceEditorPanelLayout>;
+}>;
+export default FocusRangeStrip;
+//# sourceMappingURL=FocusRangeStrip.d.ts.map

package/dist/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusRangeStrip.d.ts","sourceRoot":"","sources":["../../../../../../../../studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeStrip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,oCAAoC,CAAA;AAM/D,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,0EAA0E,CAAA;AAMvH,OAAO,KAAgB,MAAM,OAAO,CAAA;AAIpC,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;CAoBhC,CAAA;AAID,eAAO,MAAM,UAAU;aAAwB,OAAO;SAoCrD,CAAA;AAsCD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAA;CAC5C,CAqLA,CAAA;AAED,eAAe,eAAe,CAAA"}