@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveSegmentEditor.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import clamp from 'lodash-es/clamp';
+import styled from 'styled-components';
+import { pointerEventsAutoInNormalMode } from '@tomorrowevening/theatre-studio/css';
+import { useFreezableMemo } from './useFreezableMemo';
+import { COLOR_BASE } from './colors';
+// Defines the dimensions of the SVG viewbox space
+const VIEWBOX_PADDING = 0.12;
+const VIEWBOX_SIZE = 1 + VIEWBOX_PADDING * 2;
+const PATTERN_DOT_SIZE = 0.01;
+const PATTERN_DOT_COUNT = 8;
+const PATTERN_GRID_SIZE = (1 - PATTERN_DOT_SIZE) / (PATTERN_DOT_COUNT - 1);
+// The curve supports a gradient but currently is solid cyan
+const CURVE_START_OVERSHOOT_COLOR = '#3EAAA4';
+const CURVE_START_COLOR = '#3EAAA4';
+const CURVE_MID_START_COLOR = '#3EAAA4';
+const CURVE_MID_COLOR = '#3EAAA4';
+const CURVE_MID_END_COLOR = '#3EAAA4';
+const CURVE_END_COLOR = '#3EAAA4';
+const CURVE_END_OVERSHOOT_COLOR = '#3EAAA4';
+const CONTROL_COLOR = '#B3B3B3';
+const HANDLE_COLOR = '#3eaaa4';
+const HANDLE_HOVER_COLOR = '#67dfd8';
+const BACKGROUND_CURVE_COLORS = [
+    'goldenrod',
+    'cornflowerblue',
+    'dodgerblue',
+    'lawngreen',
+];
+const Circle = styled.circle `
+  stroke-width: 0.1px;
+  vector-effect: non-scaling-stroke;
+  r: 0.04px;
+  pointer-events: none;
+  transition: r 0.15s;
+  fill: ${HANDLE_COLOR};
+`;
+const HitZone = styled.circle `
+  stroke-width: 0.1px;
+  vector-effect: non-scaling-stroke;
+  r: 0.09px;
+  cursor: move;
+  ${pointerEventsAutoInNormalMode};
+  &:hover {
+    opacity: 0.4;
+  }
+  &:hover + ${Circle} {
+    fill: ${HANDLE_HOVER_COLOR};
+  }
+`;
+const CurveSegmentEditor = (props) => {
+    const { curveConnection: { left, right }, backgroundConnections, } = props;
+    // Calculations towards keeping the handles in the viewbox. The extremum space
+    // of this editor vertically scales to keep the handles in the viewbox of the
+    // SVG. This produces a nice "stretching space" effect while you are dragging
+    // the handles.
+    // Demo: https://user-images.githubusercontent.com/11082236/164542544-f1f66de2-f62e-44dd-b4cb-05b5f6e73a52.mp4
+    const minY = Math.min(0, 1 - right.handles[1], 1 - left.handles[3]);
+    const maxY = Math.max(1, 1 - right.handles[1], 1 - left.handles[3]);
+    const h = Math.max(1, maxY - minY);
+    const toExtremumSpace = (y) => (y - minY) / h;
+    const [refSVG, nodeSVG] = useRefAndState(null);
+    const viewboxToElWidthRatio = VIEWBOX_SIZE / (nodeSVG?.clientWidth || 1);
+    const viewboxToElHeightRatio = VIEWBOX_SIZE / (nodeSVG?.clientHeight || 1);
+    const [refLeft, nodeLeft] = useRefAndState(null);
+    useKeyframeDrag(nodeSVG, nodeLeft, props, (dx, dy) => {
+        // TODO - document this
+        const handleX = clamp(left.handles[2] + dx * viewboxToElWidthRatio, 0, 1);
+        const handleY = left.handles[3] - dy * viewboxToElHeightRatio;
+        return [handleX, handleY, right.handles[0], right.handles[1]];
+    });
+    const [refRight, nodeRight] = useRefAndState(null);
+    useKeyframeDrag(nodeSVG, nodeRight, props, (dx, dy) => {
+        // TODO - document this
+        const handleX = clamp(right.handles[0] + dx * viewboxToElWidthRatio, 0, 1);
+        const handleY = right.handles[1] - dy * viewboxToElHeightRatio;
+        return [left.handles[2], left.handles[3], handleX, handleY];
+    });
+    const curvePathDAttrValue = (connection) => `M0 ${toExtremumSpace(1)} C${connection.left.handles[2]} ${toExtremumSpace(1 - connection.left.handles[3])} ${connection.right.handles[0]} ${toExtremumSpace(1 - connection.right.handles[1])} 1 ${toExtremumSpace(0)}`;
+    const holdPointsAttrValue = `0,100 100,100 100,0`;
+    return (React.createElement("svg", { height: "100%", width: "100%", ref: refSVG, viewBox: `${-VIEWBOX_PADDING} ${-VIEWBOX_PADDING} ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", fill: "none" },
+        React.createElement("linearGradient", { id: "myGradient", gradientTransform: "rotate(90)" },
+            React.createElement("stop", { offset: toExtremumSpace(-1), stopColor: CURVE_END_OVERSHOOT_COLOR }),
+            React.createElement("stop", { offset: toExtremumSpace(0), stopColor: CURVE_END_COLOR }),
+            React.createElement("stop", { offset: toExtremumSpace(0.3), stopColor: CURVE_MID_END_COLOR }),
+            React.createElement("stop", { offset: toExtremumSpace(0.5), stopColor: CURVE_MID_COLOR }),
+            React.createElement("stop", { offset: toExtremumSpace(0.7), stopColor: CURVE_MID_START_COLOR }),
+            React.createElement("stop", { offset: toExtremumSpace(1), stopColor: CURVE_START_COLOR }),
+            React.createElement("stop", { offset: toExtremumSpace(2), stopColor: CURVE_START_OVERSHOOT_COLOR })),
+        React.createElement("pattern", { id: "dot-background-pattern-1", width: PATTERN_GRID_SIZE, height: PATTERN_GRID_SIZE / h, y: -minY / h },
+            React.createElement("rect", { width: PATTERN_DOT_SIZE, height: PATTERN_DOT_SIZE, fill: CONTROL_COLOR, opacity: 0.3 })),
+        React.createElement("rect", { x: 0, y: 0, width: "1", height: 1, fill: "url(#dot-background-pattern-1)" }),
+        React.createElement("pattern", { id: "dot-background-pattern-2", width: PATTERN_GRID_SIZE, height: PATTERN_GRID_SIZE },
+            React.createElement("rect", { width: PATTERN_DOT_SIZE, height: PATTERN_DOT_SIZE, fill: CONTROL_COLOR })),
+        React.createElement("rect", { x: 0, y: toExtremumSpace(0), width: "1", height: toExtremumSpace(1) - toExtremumSpace(0), fill: "url(#dot-background-pattern-2)" }),
+        !left.type || left.type === 'bezier' ? (React.createElement(React.Fragment, null,
+            React.createElement("line", { x1: 0, y1: toExtremumSpace(1), x2: left.handles[2], y2: toExtremumSpace(1 - left.handles[3]), stroke: CONTROL_COLOR, strokeWidth: "0.01" }),
+            React.createElement("line", { x1: 1, y1: toExtremumSpace(0), x2: right.handles[0], y2: toExtremumSpace(1 - right.handles[1]), stroke: CONTROL_COLOR, strokeWidth: "0.01" }),
+            React.createElement("path", { d: curvePathDAttrValue(props.curveConnection), stroke: "none", fill: "url('#myGradient')", opacity: "0.1" }),
+            backgroundConnections.map((connection, i) => (React.createElement("path", { key: connection.objectKey + '/' + connection.left.id, d: curvePathDAttrValue(connection), stroke: BACKGROUND_CURVE_COLORS[i % BACKGROUND_CURVE_COLORS.length], opacity: 0.6, strokeWidth: "0.01" }))),
+            React.createElement("path", { d: curvePathDAttrValue(props.curveConnection), stroke: "url('#myGradient')", strokeWidth: "0.02" }),
+            React.createElement("circle", { cx: 0, cy: toExtremumSpace(1), r: "0.025", stroke: CURVE_START_COLOR, strokeWidth: "0.02", fill: COLOR_BASE }),
+            React.createElement("circle", { cx: 1, cy: toExtremumSpace(0), r: "0.025", stroke: CURVE_END_COLOR, strokeWidth: "0.02", fill: COLOR_BASE }),
+            React.createElement(HitZone, { ref: refLeft, cx: left.handles[2], cy: toExtremumSpace(1 - left.handles[3]), fill: CURVE_START_COLOR, opacity: 0.2 }),
+            React.createElement(Circle, { cx: left.handles[2], cy: toExtremumSpace(1 - left.handles[3]) }),
+            React.createElement(HitZone, { ref: refRight, cx: right.handles[0], cy: toExtremumSpace(1 - right.handles[1]), fill: CURVE_END_COLOR, opacity: 0.2 }),
+            React.createElement(Circle, { cx: right.handles[0], cy: toExtremumSpace(1 - right.handles[1]) }))) : (React.createElement(React.Fragment, null,
+            React.createElement("line", { x1: 0, y1: toExtremumSpace(1), x2: 1, y2: toExtremumSpace(1), stroke: CONTROL_COLOR, strokeWidth: "0.01" }),
+            React.createElement("line", { x1: 1, y1: toExtremumSpace(1), x2: 1, y2: 0, stroke: CONTROL_COLOR, strokeWidth: "0.01" }),
+            React.createElement("circle", { cx: 0, cy: 1, r: "0.025", stroke: CURVE_END_COLOR, strokeWidth: "0.02", fill: COLOR_BASE }),
+            React.createElement("circle", { cx: 1, cy: 0, r: "0.025", stroke: CURVE_END_COLOR, strokeWidth: "0.02", fill: COLOR_BASE })))));
+};
+export default CurveSegmentEditor;
+function useKeyframeDrag(svgNode, node, props, setHandles) {
+    const handlers = useFreezableMemo((setFrozen) => ({
+        debugName: 'CurveSegmentEditor/useKeyframeDrag',
+        lockCSSCursorTo: 'move',
+        onDragStart() {
+            setFrozen(true);
+            return {
+                onDrag(dx, dy) {
+                    if (!svgNode)
+                        return;
+                    props.onCurveChange(setHandles(dx, dy));
+                },
+                onDragEnd(dragHappened) {
+                    setFrozen(false);
+                    props.onCancelCurveChange();
+                },
+            };
+        },
+    }), [svgNode, props.onCurveChange, props.onCancelCurveChange]);
+    useDrag(node, handlers);
+}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+    isSelected: boolean;
+}, never>;
+type IProps = {
+    easing: {
+        label: string;
+        value: string;
+    };
+    tooltipPlacement: 'top' | 'bottom';
+    isSelected: boolean;
+} & Parameters<typeof Wrapper>[0];
+declare const EasingOption: React.FC<IProps>;
+export default EasingOption;
+//# sourceMappingURL=EasingOption.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EasingOption.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,QAAA,MAAM,OAAO;gBAA2B,OAAO;SA2B9C,CAAA;AAaD,KAAK,MAAM,GAAG;IACZ,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,gBAAgB,EAAE,KAAK,GAAG,QAAQ,CAAA;IAClC,UAAU,EAAE,OAAO,CAAA;CACpB,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;AAEjC,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAsBjC,CAAA;AAEF,eAAe,YAAY,CAAA"}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.js

@@ -0,0 +1,52 @@
+import useTooltip from '@tomorrowevening/theatre-studio/uiComponents/Popover/useTooltip';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { handlesFromCssCubicBezierArgs } from './shared';
+import SVGCurveSegment from './SVGCurveSegment';
+import { mergeRefs } from 'react-merge-refs';
+import { COLOR_BASE } from './colors';
+import BasicPopover from '@tomorrowevening/theatre-studio/uiComponents/Popover/BasicPopover';
+const Wrapper = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  aspect-ratio: 1;
+
+  transition: background-color 0.15s;
+  background-color: ${COLOR_BASE};
+  border-radius: 2px;
+  cursor: pointer;
+  outline: none;
+
+  ${({ isSelected }) => isSelected &&
+    css `
+      background-color: #383d42;
+    `}
+
+  &:hover {
+    background-color: #31353a;
+  }
+
+  &:focus {
+    background-color: #383d42;
+  }
+`;
+const EasingTooltip = styled(BasicPopover) `
+  padding: 0.5em;
+  color: white;
+  max-width: 240px;
+  pointer-events: none !important;
+  --popover-bg: black;
+  --popover-outer-stroke: transparent;
+  --popover-inner-stroke: transparent;
+  box-shadow: none;
+`;
+const EasingOption = React.forwardRef((props, ref) => {
+    const [tooltip, tooltipHostRef] = useTooltip({ enabled: true, verticalPlacement: props.tooltipPlacement, verticalGap: 0 }, () => (React.createElement(EasingTooltip, { showPopoverEdgeTriangle: false }, props.easing.label)));
+    return (React.createElement(Wrapper, { ref: mergeRefs([tooltipHostRef, ref]), ...props },
+        tooltip,
+        React.createElement(SVGCurveSegment, { easing: handlesFromCssCubicBezierArgs(props.easing.value), isSelected: props.isSelected })));
+});
+export default EasingOption;

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/SVGCurveSegment.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { CubicBezierHandles } from './shared';
+type IProps = {
+    easing: CubicBezierHandles | null;
+    isSelected: boolean;
+};
+declare const SVGCurveSegment: React.FC<IProps>;
+export default SVGCurveSegment;
+//# sourceMappingURL=SVGCurveSegment.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/SVGCurveSegment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SVGCurveSegment.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/SVGCurveSegment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,UAAU,CAAA;AAehD,KAAK,MAAM,GAAG;IACZ,MAAM,EAAE,kBAAkB,GAAG,IAAI,CAAA;IACjC,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA6GrC,CAAA;AACD,eAAe,eAAe,CAAA"}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/SVGCurveSegment.js

@@ -0,0 +1,43 @@
+import React from 'react';
+const VIEWBOX_PADDING = 0.75;
+const SVG_CIRCLE_RADIUS = 0.1;
+const VIEWBOX_SIZE = 1 + VIEWBOX_PADDING * 2;
+const SELECTED_CURVE_COLOR = '#F5F5F5';
+const CURVE_COLOR = '#888888';
+const CONTROL_COLOR = '#4f4f4f';
+const CONTROL_HITZONE_COLOR = 'rgba(255, 255, 255, 0.1)';
+// SVG's y coordinates go from top to bottom, e.g. 1 is vertically lower than 0,
+// but easing points go from bottom to top.
+const toVerticalSVGSpace = (y) => 1 - y;
+const SVGCurveSegment = (props) => {
+    const { easing, isSelected } = props;
+    const curveColor = isSelected ? SELECTED_CURVE_COLOR : CURVE_COLOR;
+    // With a padding of 0, this results in a "unit viewbox" i.e. `0 0 1 1`.
+    // With padding e.g. VIEWBOX_PADDING=0.1, this results in a viewbox of `-0.1 -0,1 1.2 1.2`,
+    // i.e. a viewbox with a top left coordinate of -0.1,-0.1 and a width and height of 1.2,
+    // resulting in bottom right coordinate of 1.1,1.1
+    const SVG_VIEWBOX_ATTR = `${-VIEWBOX_PADDING} ${-VIEWBOX_PADDING} ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`;
+    // Bezier SVG
+    if (easing) {
+        const leftControlPoint = [easing[0], toVerticalSVGSpace(easing[1])];
+        const rightControlPoint = [easing[2], toVerticalSVGSpace(easing[3])];
+        return (React.createElement("svg", { height: "100%", width: "100%", viewBox: SVG_VIEWBOX_ATTR, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("line", { x1: "0", y1: "1", x2: leftControlPoint[0], y2: leftControlPoint[1], stroke: CONTROL_COLOR, strokeWidth: "0.1" }),
+            React.createElement("line", { x1: "1", y1: "0", x2: rightControlPoint[0], y2: rightControlPoint[1], stroke: CONTROL_COLOR, strokeWidth: "0.1" }),
+            React.createElement("circle", { cx: leftControlPoint[0], cy: leftControlPoint[1], r: 0.1, fill: CONTROL_HITZONE_COLOR }),
+            React.createElement("circle", { cx: rightControlPoint[0], cy: rightControlPoint[1], r: 0.1, fill: CONTROL_HITZONE_COLOR }),
+            React.createElement("circle", { cx: leftControlPoint[0], cy: leftControlPoint[1], r: SVG_CIRCLE_RADIUS, fill: CONTROL_COLOR }),
+            React.createElement("circle", { cx: rightControlPoint[0], cy: rightControlPoint[1], r: SVG_CIRCLE_RADIUS, fill: CONTROL_COLOR }),
+            React.createElement("path", { d: `M0 1 C${leftControlPoint[0]} ${leftControlPoint[1]} ${rightControlPoint[0]} 
+        ${rightControlPoint[1]} 1 0`, stroke: curveColor, strokeWidth: "0.08" }),
+            React.createElement("circle", { cx: 0, cy: 1, r: SVG_CIRCLE_RADIUS, fill: curveColor }),
+            React.createElement("circle", { cx: 1, cy: 0, r: SVG_CIRCLE_RADIUS, fill: curveColor })));
+    }
+    // "Hold" SVG
+    return (React.createElement("svg", { height: "100%", width: "100%", viewBox: SVG_VIEWBOX_ATTR, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("line", { x1: "0", y1: "1", x2: 1, y2: 1, stroke: curveColor, strokeWidth: "0.08" }),
+        React.createElement("line", { x1: "1", y1: "0", x2: 1, y2: 1, stroke: curveColor, strokeWidth: "0.08" }),
+        React.createElement("circle", { cx: 0, cy: 1, r: SVG_CIRCLE_RADIUS, fill: curveColor }),
+        React.createElement("circle", { cx: 1, cy: 0, r: SVG_CIRCLE_RADIUS, fill: curveColor })));
+};
+export default SVGCurveSegment;

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.d.ts

@@ -0,0 +1,4 @@
+export declare const COLOR_POPOVER_BACK = "rgba(26, 28, 30, 0.97);";
+export declare const COLOR_BASE = "#272B2F";
+export declare const COLOR_FOCUS_OUTLINE = "#0A4540";
+//# sourceMappingURL=colors.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,4BAA4B,CAAA;AAE3D,eAAO,MAAM,UAAU,YAAY,CAAA;AAEnC,eAAO,MAAM,mBAAmB,YAAY,CAAA"}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.js

@@ -0,0 +1,3 @@
+export const COLOR_POPOVER_BACK = 'rgba(26, 28, 30, 0.97);';
+export const COLOR_BASE = '#272B2F';
+export const COLOR_FOCUS_OUTLINE = '#0A4540';

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/shared.d.ts

@@ -0,0 +1,43 @@
+/**
+ * This 4-tuple defines the start control point x1,y1 and the end control point x2,y2
+ * of a cubic bezier curve. It is assumed that the start of the curve is fixed at 0,0
+ * and the end is fixed at 1,1. X values must be constrained to `0 <= x1 <= 1 and 0 <= x2 <= 1`.
+ *
+ * to get a feel for it: https://cubic-bezier.com/
+ **/
+export type CubicBezierHandles = [
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number
+];
+/**
+ * A full CSS cubic bezier string looks like `cubic-bezier(0, 0, 1, 1)`.
+ * the "args" part of the name refers specifically to the comma separated substring
+ * inside the parentheses of the CSS cubic bezier string i.e. `0, 0, 1, 1`.
+ */
+export type CSSCubicBezierArgsString = string;
+/** Returns e.g. `"0, 0, 1, 1"`. See {@link CSSCubicBezierArgsString} docs for more context. */
+export declare function cssCubicBezierArgsFromHandles(points: CubicBezierHandles): CSSCubicBezierArgsString;
+export declare function handlesFromCssCubicBezierArgs(str: CSSCubicBezierArgsString | undefined | null): null | CubicBezierHandles;
+/**
+ * A collection of cubic-bezier approximations of common easing functions
+ * - ref: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
+ * - ref: [GitHub issue 28 comment "michaeltheory's suggested default easing presets"](https://github.com/theatre-js/theatre/issues/28#issuecomment-938752916)
+ **/
+export declare const EASING_PRESETS: {
+    label: string;
+    value: string;
+}[];
+/**
+ * Compares two easings and returns true iff they are similar up to a threshold
+ *
+ * @param easing1 - first easing to compare
+ * @param easing2 - second easing to compare
+ * @param options - optionally pass an object with a threshold that determines how similar the easings should be
+ * @returns boolean if the easings are similar
+ */
+export declare function areEasingsSimilar(easing1: CubicBezierHandles | null | undefined, easing2: CubicBezierHandles | null | undefined, options?: {
+    threshold: number;
+}): boolean;
+//# sourceMappingURL=shared.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/shared.ts"],"names":[],"mappings":"AAAA;;;;;;IAMI;AACJ,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;CACX,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAA;AAI7C,+FAA+F;AAC/F,wBAAgB,6BAA6B,CAC3C,MAAM,EAAE,kBAAkB,GACzB,wBAAwB,CAE1B;AAGD,wBAAgB,6BAA6B,CAC3C,GAAG,EAAE,wBAAwB,GAAG,SAAS,GAAG,IAAI,GAC/C,IAAI,GAAG,kBAAkB,CAY3B;AAED;;;;IAII;AACJ,eAAO,MAAM,cAAc;;;GAoD1B,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,EAC9C,OAAO,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,EAC9C,OAAO,GAAE;IACP,SAAS,EAAE,MAAM,CAAA;CACE,WAQtB"}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/shared.js

@@ -0,0 +1,84 @@
+const CSS_BEZIER_ARGS_DECIMAL_POINTS = 3; // Doesn't have to be 3, but it matches our preset data
+/** Returns e.g. `"0, 0, 1, 1"`. See {@link CSSCubicBezierArgsString} docs for more context. */
+export function cssCubicBezierArgsFromHandles(points) {
+    return points.map((p) => p.toFixed(CSS_BEZIER_ARGS_DECIMAL_POINTS)).join(', ');
+}
+const MAX_REASONABLE_BEZIER_STRING = 128;
+export function handlesFromCssCubicBezierArgs(str) {
+    if (!str || str?.length > MAX_REASONABLE_BEZIER_STRING)
+        return null;
+    const args = str.split(',');
+    if (args.length !== 4)
+        return null;
+    const nums = args.map((arg) => {
+        return Number(arg.trim());
+    });
+    if (!nums.every((v) => isFinite(v)))
+        return null;
+    if (nums[0] < 0 || nums[0] > 1 || nums[2] < 0 || nums[2] > 1)
+        return null;
+    return nums;
+}
+/**
+ * A collection of cubic-bezier approximations of common easing functions
+ * - ref: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
+ * - ref: [GitHub issue 28 comment "michaeltheory's suggested default easing presets"](https://github.com/theatre-js/theatre/issues/28#issuecomment-938752916)
+ **/
+export const EASING_PRESETS = [
+    { label: 'Quad Out', value: '0.250, 0.460, 0.450, 0.940' },
+    { label: 'Quad In Out', value: '0.455, 0.030, 0.515, 0.955' },
+    { label: 'Quad In', value: '0.550, 0.085, 0.680, 0.530' },
+    { label: 'Cubic Out', value: '0.215, 0.610, 0.355, 1.000' },
+    { label: 'Cubic In Out', value: '0.645, 0.045, 0.355, 1.000' },
+    { label: 'Cubic In', value: '0.550, 0.055, 0.675, 0.190' },
+    { label: 'Quart Out', value: '0.165, 0.840, 0.440, 1.000' },
+    { label: 'Quart In Out', value: '0.770, 0.000, 0.175, 1.000' },
+    { label: 'Quart In', value: '0.895, 0.030, 0.685, 0.220' },
+    { label: 'Quint Out', value: '0.230, 1.000, 0.320, 1.000' },
+    { label: 'Quint In Out', value: '0.860, 0.000, 0.070, 1.000' },
+    { label: 'Quint In', value: '0.755, 0.050, 0.855, 0.060' },
+    { label: 'Sine Out', value: '0.390, 0.575, 0.565, 1.000' },
+    { label: 'Sine In Out', value: '0.445, 0.050, 0.550, 0.950' },
+    { label: 'Sine In', value: '0.470, 0.000, 0.745, 0.715' },
+    { label: 'Expo Out', value: '0.190, 1.000, 0.220, 1.000' },
+    { label: 'Expo In Out', value: '1.000, 0.000, 0.000, 1.000' },
+    { label: 'Expo In', value: '0.780, 0.000, 0.810, 0.00' },
+    { label: 'Circ Out', value: '0.075, 0.820, 0.165, 1.000' },
+    { label: 'Circ In Out', value: '0.785, 0.135, 0.150, 0.860' },
+    { label: 'Circ In', value: '0.600, 0.040, 0.980, 0.335' },
+    { label: 'Back Out', value: '0.175, 0.885, 0.320, 1.275' },
+    { label: 'Back In Out', value: '0.680, -0.550, 0.265, 1.550' },
+    { label: 'Back In', value: '0.600, -0.280, 0.735, 0.045' },
+    { label: 'linear', value: '0.5, 0.5, 0.5, 0.5' },
+    { label: 'In Out', value: '0.42,0,0.58,1' },
+    { label: 'Hold', value: '0, 0, Infinity, Infinity' },
+    /* These easings are not being included initially in order to
+       simplify the choices */
+    // {label: 'Back In Out', value: '0.680, -0.550, 0.265, 1.550'},
+    // {label: 'Back In', value: '0.600, -0.280, 0.735, 0.045'},
+    // {label: 'Back Out', value: '0.175, 0.885, 0.320, 1.275'},
+    // {label: 'Circ In Out', value: '0.785, 0.135, 0.150, 0.860'},
+    // {label: 'Circ In', value: '0.600, 0.040, 0.980, 0.335'},
+    // {label: 'Circ Out', value: '0.075, 0.820, 0.165, 1'},
+    // {label: 'Quad In Out', value: '0.455, 0.030, 0.515, 0.955'},
+    // {label: 'Quad In', value: '0.550, 0.085, 0.680, 0.530'},
+    // {label: 'Quad Out', value: '0.250, 0.460, 0.450, 0.940'},
+    // {label: 'Ease Out In', value: '.42, 0, .58, 1'},
+];
+/**
+ * Compares two easings and returns true iff they are similar up to a threshold
+ *
+ * @param easing1 - first easing to compare
+ * @param easing2 - second easing to compare
+ * @param options - optionally pass an object with a threshold that determines how similar the easings should be
+ * @returns boolean if the easings are similar
+ */
+export function areEasingsSimilar(easing1, easing2, options = { threshold: 0.02 }) {
+    if (!easing1 || !easing2)
+        return false;
+    let totalDiff = 0;
+    for (let i = 0; i < 4; i++) {
+        totalDiff += Math.abs(easing1[i] - easing2[i]);
+    }
+    return totalDiff < options.threshold;
+}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/useFreezableMemo.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The same as useMemo except that it can be frozen so that
+ * the memoized function is not recomputed even if the dependencies
+ * change. It can also be unfrozen.
+ *
+ * An unfrozen useFreezableMemo is the same as useMemo.
+ *
+ */
+export declare function useFreezableMemo<T>(fn: (setFreeze: (isFrozen: boolean) => void) => T, deps: any[]): T;
+//# sourceMappingURL=useFreezableMemo.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/useFreezableMemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFreezableMemo.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/useFreezableMemo.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,EAAE,EAAE,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,KAAK,CAAC,EACjD,IAAI,EAAE,GAAG,EAAE,GACV,CAAC,CAOH"}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/useFreezableMemo.js

@@ -0,0 +1,16 @@
+import { useMemo, useRef, useState } from 'react';
+/**
+ * The same as useMemo except that it can be frozen so that
+ * the memoized function is not recomputed even if the dependencies
+ * change. It can also be unfrozen.
+ *
+ * An unfrozen useFreezableMemo is the same as useMemo.
+ *
+ */
+export function useFreezableMemo(fn, deps) {
+    const [isFrozen, setFreeze] = useState(false);
+    const freezableDeps = useRef(deps);
+    if (!isFrozen)
+        freezableDeps.current = deps;
+    return useMemo(() => fn(setFreeze), freezableDeps.current);
+}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/useUIOptionGrid.d.ts

@@ -0,0 +1,32 @@
+import type { KeyboardEvent } from 'react';
+import type React from 'react';
+export declare enum Outcome {
+    Handled = 1,
+    Passthrough = 0
+}
+type UIOptionGridOptions<Item> = {
+    /** affect behavior of keyboard navigation */
+    uiColumns: number;
+    /** each item in the grid */
+    items: Item[];
+    /** display of items */
+    renderItem: (value: {
+        select(e?: Event): void;
+        /** data item */
+        item: Item;
+        /** arrow key nav */
+        isSelected: boolean;
+    }) => React.ReactNode;
+    onSelectItem(item: Item): Outcome;
+    /** Set a callback for what to do if we try to leave the grid */
+    canVerticleExit?: (exitSide: 'top' | 'bottom') => Outcome;
+};
+type UIOptionGrid<Item> = {
+    focusFirstItem(): void;
+    onParentEltKeyDown(evt: KeyboardEvent): Outcome;
+    gridItems: React.ReactNode[];
+    currentSelection: Item | null;
+};
+export declare function useUIOptionGrid<T>(options: UIOptionGridOptions<T>): UIOptionGrid<T>;
+export {};
+//# sourceMappingURL=useUIOptionGrid.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/useUIOptionGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUIOptionGrid.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/useUIOptionGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAA;AACxC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,oBAAY,OAAO;IACjB,OAAO,IAAI;IACX,WAAW,IAAI;CAChB;AACD,KAAK,mBAAmB,CAAC,IAAI,IAAI;IAC/B,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAA;IACjB,4BAA4B;IAC5B,KAAK,EAAE,IAAI,EAAE,CAAA;IACb,uBAAuB;IACvB,UAAU,EAAE,CAAC,KAAK,EAAE;QAClB,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;QACvB,gBAAgB;QAChB,IAAI,EAAE,IAAI,CAAA;QACV,oBAAoB;QACpB,UAAU,EAAE,OAAO,CAAA;KACpB,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAA;IACjC,gEAAgE;IAChE,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,GAAG,QAAQ,KAAK,OAAO,CAAA;CAC1D,CAAA;AACD,KAAK,YAAY,CAAC,IAAI,IAAI;IACxB,cAAc,IAAI,IAAI,CAAA;IACtB,kBAAkB,CAAC,GAAG,EAAE,aAAa,GAAG,OAAO,CAAA;IAC/C,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC5B,gBAAgB,EAAE,IAAI,GAAG,IAAI,CAAA;CAC9B,CAAA;AACD,wBAAgB,eAAe,CAAC,CAAC,EAC/B,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAC9B,YAAY,CAAC,CAAC,CAAC,CA6EjB"}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/useUIOptionGrid.js

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { mod } from './CurveEditorPopover';
+export var Outcome;
+(function (Outcome) {
+    Outcome[Outcome["Handled"] = 1] = "Handled";
+    Outcome[Outcome["Passthrough"] = 0] = "Passthrough";
+})(Outcome || (Outcome = {}));
+export function useUIOptionGrid(options) {
+    // Helper functions for moving the highlight in the grid of presets
+    const [selectionIndex, setSelectionIndex] = useState(null);
+    const moveCursorVertical = (vdir) => {
+        if (selectionIndex === null) {
+            if (options.items.length > 0) {
+                // start at the top first one
+                setSelectionIndex(0);
+            }
+            else {
+                // no items
+            }
+            return;
+        }
+        const nextSelectionIndex = selectionIndex + vdir * options.uiColumns;
+        const exitsTop = nextSelectionIndex < 0;
+        const exitsBottom = nextSelectionIndex > options.items.length - 1;
+        if (exitsTop || exitsBottom) {
+            // up and out
+            if (options.canVerticleExit) {
+                if (options.canVerticleExit(exitsTop ? 'top' : 'bottom')) {
+                    // exited and handled
+                    setSelectionIndex(null);
+                    return;
+                }
+            }
+            // block the cursor from leaving (don't do anything)
+            return;
+        }
+        // we know this highlight is in bounds now
+        setSelectionIndex(nextSelectionIndex);
+    };
+    const moveCursorHorizontal = (hdir) => {
+        if (selectionIndex === null)
+            setSelectionIndex(mod(hdir, options.items.length));
+        else if (selectionIndex + hdir < 0) {
+            // Don't exit top on potentially a left arrow, bc that might feel like I should be able to exit right on right arrow.
+            // Also, maybe cursor selection management in inputs is *lame*.
+            setSelectionIndex(null);
+        }
+        else
+            setSelectionIndex(Math.min(selectionIndex + hdir, options.items.length - 1));
+    };
+    const onParentKeydown = (e) => {
+        if (e.key === 'ArrowRight')
+            moveCursorHorizontal(1);
+        else if (e.key === 'ArrowLeft')
+            moveCursorHorizontal(-1);
+        else if (e.key === 'ArrowUp')
+            moveCursorVertical(-1);
+        else if (e.key === 'ArrowDown')
+            moveCursorVertical(1);
+        else
+            return Outcome.Passthrough; // so sorry, plz make this not terrible
+        return Outcome.Handled;
+    };
+    return {
+        focusFirstItem() {
+            setSelectionIndex(0);
+        },
+        onParentEltKeyDown: onParentKeydown,
+        gridItems: options.items.map((item, idx) => options.renderItem({
+            isSelected: idx === selectionIndex,
+            item,
+            select(e) {
+                setSelectionIndex(idx);
+                if (options.onSelectItem(item) === Outcome.Handled) {
+                    e?.preventDefault();
+                    e?.stopPropagation();
+                }
+            },
+        })),
+        currentSelection: options.items[selectionIndex ?? -1] ?? null,
+    };
+}

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { EditingOptionsTree } from './useSingleKeyframeInlineEditorPopover';
+/**
+ * Given a propConfig, this function gives the corresponding prop editor for
+ * use in the dope sheet inline prop editor on a keyframe.
+ * {@link DeterminePropEditorForDetail} does the same thing for the details panel. The main difference
+ * between this function and {@link DeterminePropEditorForDetail} is that this
+ * one shows prop editors *without* keyframe navigation controls (that look
+ * like `< ・ >`).
+ *
+ * @param p - propConfig object for any type of prop.
+ */
+export declare function DeterminePropEditorForKeyframeTree(p: EditingOptionsTree & {
+    autoFocusInput?: boolean;
+    indent: number;
+}): React.JSX.Element;
+//# sourceMappingURL=DeterminePropEditorForSingleKeyframe.d.ts.map

package/dist/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeterminePropEditorForSingleKeyframe.d.ts","sourceRoot":"","sources":["../../../../../../../../../../studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EACV,kBAAkB,EAEnB,MAAM,wCAAwC,CAAA;AA+B/C;;;;;;;;;GASG;AACH,wBAAgB,kCAAkC,CAChD,CAAC,EAAE,kBAAkB,GAAG;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAC,qBAgDnE"}