motion-start 0.0.1

package/src/motion/features/gestures.ts

@@ -0,0 +1,24 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureComponents } from "./types";
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { UseFocusGesture } from '../../gestures/use-focus-gesture.js';
+import { UseHoverGesture } from '../../gestures/use-hover-gesture.js';
+import { UseTapGesture } from '../../gestures/use-tap-gesture.js';
+/**
+ * @public
+ */
+const gestureAnimations = {
+    tap: UseTapGesture,
+    focus: UseFocusGesture,
+    hover: UseHoverGesture,
+} satisfies FeatureComponents;
+
+export { gestureAnimations };

package/src/motion/features/layout/Animate.svelte

@@ -0,0 +1,314 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script module lang="ts">
+  const progressTarget = 1000;
+
+  function hasMoved(a, b) {
+    return (
+      !isZeroBox(a) &&
+      !isZeroBox(b) &&
+      (!axisIsEqual(a.x, b.x) || !axisIsEqual(a.y, b.y))
+    );
+  }
+
+  const zeroAxis = { min: 0, max: 0 };
+  function isZeroBox(a) {
+    return axisIsEqual(a.x, zeroAxis) && axisIsEqual(a.y, zeroAxis);
+  }
+
+  function axisIsEqual(a, b) {
+    return a.min === b.min && a.max === b.max;
+  }
+
+  const defaultLayoutTransition = {
+    duration: 0.45,
+    ease: [0.4, 0, 0.1, 1],
+  };
+</script>
+
+<script lang="ts">
+  import { onDestroy, onMount } from "svelte";
+  import {
+    getValueTransition,
+    startAnimation,
+  } from "../../../animation/utils/transitions.js";
+  import { defaultScaleCorrectors } from "../../../render/dom/projection/default-scale-correctors.js";
+  import { addScaleCorrection } from "../../../render/dom/projection/scale-correction.js";
+  import { eachAxis } from "../../../utils/each-axis.js";
+  import { axisBox } from "../../../utils/geometry/index.js";
+  import { tweenAxis } from "./utils";
+
+  export let visualElement,
+    //initial = undefined,
+    //style = undefined,
+    //transformTemplate = undefined,
+    //transformValues = undefined,
+    //AnimationProps
+    //animate = undefined,
+    //exit = undefined,
+    //variants = undefined,
+    //transition = undefined,
+    //VisualElementLifecycles
+    //onViewportBoxUpdate = undefined,
+    //onBeforeLayoutMeasure = undefined,
+    //onLayoutMeasure = undefined,
+    //onUpdate = undefined,
+    //onAnimationStart = undefined,
+    //onAnimationComplete = undefined,
+    //onLayoutAnimationComplete = undefined,
+    //GestureHandlers
+    // PanHandlers
+    //onPan = undefined,
+    //onPanStart = undefined,
+    //onPanSessionStart = undefined,
+    //onPanEnd = undefined,
+    // TapHandlers
+    //onTap = undefined,
+    //onTapStart = undefined,
+    //onTapCancel = undefined,
+    //whileTap = undefined,
+    //HoverHandlers
+    //whileHover = undefined,
+    //onHoverStart = undefined,
+    //onHoverEnd = undefined,
+    //FocusHandlers
+    //whileFocus = undefined,
+    //DraggableProps
+    //drag = undefined,
+    //whileDrag = undefined,
+    //dragDirectionLock = undefined,
+    //dragPropagation = undefined,
+    //dragConstraints = undefined,
+    //dragElastic = undefined,
+    //dragMomentum = undefined,
+    //dragTransition = undefined,
+    //dragControls = undefined,
+    //dragListener = undefined,
+    //onMeasureDragConstraints = undefined,
+    //_dragX = undefined,
+    //_dragY = undefined,
+    //DragHandlers
+    //onDragStart = undefined,
+    //onDragEnd = undefined,
+    //onDrag = undefined,
+    //onDirectionLock = undefined,
+    //onDragTransitionEnd = undefined,
+    // LayoutProps
+    layout = undefined,
+    //layoutId = undefined,
+    //MotionAdvancedProps
+    //custom = undefined,
+    //inherit = undefined,
+    safeToRemove;
+
+  /**
+   * A mutable object that tracks the target viewport box
+   * for the current animation frame.
+   */
+  let frameTarget = axisBox();
+  /**
+   * The current animation target, we use this to check whether to start
+   * a new animation or continue the existing one.
+   */
+  let currentAnimationTarget = axisBox();
+  /**
+   * Track whether we're animating this axis.
+   */
+  let isAnimating = {
+    x: false,
+    y: false,
+  };
+  let stopAxisAnimation = {
+    x: undefined,
+    y: undefined,
+  };
+
+  let unsubLayoutReady;
+
+  let isAnimatingTree = false;
+
+  onMount(() => {
+    visualElement.animateMotionValue = startAnimation;
+    visualElement.enableLayoutProjection();
+    unsubLayoutReady = visualElement.onLayoutUpdate(animateF);
+    visualElement.layoutSafeToRemove = function () {
+      safeToRemove();
+    };
+
+    addScaleCorrection(defaultScaleCorrectors);
+  });
+
+  onDestroy(() => {
+    unsubLayoutReady();
+    eachAxis((axis) => stopAxisAnimation[axis]?.());
+  });
+
+  const animateF = (
+    target,
+    origin,
+    {
+      originBox,
+      targetBox,
+      visibilityAction,
+      shouldStackAnimate,
+      onComplete,
+      ...config
+    } = {}
+  ) => {
+    /**
+     * Early return if we've been instructed not to animate this render.
+     */
+    if (shouldStackAnimate === false) {
+      isAnimatingTree = false;
+      return safeToRemove();
+    }
+
+    /**
+     * Prioritise tree animations
+     */
+    if (isAnimatingTree && shouldStackAnimate !== true) {
+      return;
+    } else if (shouldStackAnimate) {
+      isAnimatingTree = true;
+    }
+
+    /**
+     * Allow the measured origin (prev bounding box) and target (actual layout) to be
+     * overridden by the provided config.
+     */
+    origin = originBox || origin;
+    target = targetBox || target;
+
+    const boxHasMoved = hasMoved(origin, target);
+
+    const animations = eachAxis((axis) => {
+      /**
+       * If layout is set to "position", we can resize the origin box based on the target
+       * box and only animate its position.
+       */
+      if (layout === "position") {
+        const targetLength = target[axis].max - target[axis].min;
+        origin[axis].max = origin[axis].min + targetLength;
+      }
+
+      if (visualElement.projection.isTargetLocked) {
+        return;
+      } else if (visibilityAction !== undefined) {
+        visualElement.setVisibility(visibilityAction === VisibilityAction.Show);
+      } else if (boxHasMoved) {
+        // If the box has moved, animate between it's current visual state and its
+        // final state
+        return animateAxis(axis, target[axis], origin[axis], config);
+      } else {
+        // If the box has remained in the same place, immediately set the axis target
+        // to the final desired state
+        return visualElement.setProjectionTargetAxis(
+          axis,
+          target[axis].min,
+          target[axis].max
+        );
+      }
+    });
+
+    // Force a render to ensure there's no flash of uncorrected bounding box.
+    visualElement.syncRender();
+
+    /**
+     * If this visualElement isn't present (ie it's been removed from the tree by the user but
+     * kept in by the tree by AnimatePresence) then call safeToRemove when all axis animations
+     * have successfully finished.
+     */
+    return Promise.all(animations).then(() => {
+      isAnimatingTree = false;
+      onComplete && onComplete();
+      visualElement.notifyLayoutAnimationComplete();
+    });
+  };
+
+  /**
+   * TODO: This manually performs animations on the visualElement's layout progress
+   * values. It'd be preferable to amend the startLayoutAxisAnimation
+   * API to accept more custom animations like
+   */
+  const animateAxis = (
+    axis,
+    target,
+    origin,
+    { transition: _transition } = {}
+  ) => {
+    stopAxisAnimation[axis]?.();
+    /**
+     * If we're not animating to a new target, don't run this animation
+     */
+    if (
+      isAnimating[axis] &&
+      axisIsEqual(target, currentAnimationTarget[axis])
+    ) {
+      return;
+    }
+
+    stopAxisAnimation[axis]?.();
+    isAnimating[axis] = true;
+
+    const _frameTarget = frameTarget[axis];
+    const layoutProgress = visualElement.getProjectionAnimationProgress()[axis];
+
+    /**
+     * Set layout progress back to 0. We set it twice to hard-reset any velocity that might
+     * be re-incoporated into a subsequent spring animation.
+     */
+    layoutProgress.clearListeners();
+    layoutProgress.set(0);
+    layoutProgress.set(0);
+
+    /**
+     * Create an animation function to run once per frame. This will tween the visual bounding box from
+     * origin to target using the latest progress value.
+     */
+    const frame = () => {
+      // Convert the latest layoutProgress, which is a value from 0-1000, into a 0-1 progress
+      const p = layoutProgress.get() / progressTarget;
+
+      // Tween the axis and update the visualElement with the latest values
+      tweenAxis(_frameTarget, origin, target, p);
+      visualElement.setProjectionTargetAxis(
+        axis,
+        _frameTarget.min,
+        _frameTarget.max
+      );
+    };
+
+    // Synchronously run a frame to ensure there's no flash of the uncorrected bounding box.
+    frame();
+
+    // Ensure that the layout delta is updated for this frame.
+    //visualElement.updateLayoutProjection();
+
+    // Create a function to stop animation on this specific axis
+    const unsubscribeProgress = layoutProgress.onChange(frame);
+
+    stopAxisAnimation[axis] = () => {
+      isAnimating[axis] = false;
+      layoutProgress.stop();
+      unsubscribeProgress();
+    };
+
+    currentAnimationTarget[axis] = target;
+
+    const layoutTransition =
+      _transition ||
+      visualElement.getDefaultTransition() ||
+      defaultLayoutTransition;
+
+    // Start the animation on this axis
+    const animation = startAnimation(
+      axis === "x" ? "layoutX" : "layoutY",
+      layoutProgress,
+      progressTarget,
+      layoutTransition && getValueTransition(layoutTransition, "layout")
+    ).then(stopAxisAnimation[axis]);
+
+    return animation;
+  };
+</script>

package/src/motion/features/layout/Animate.ts

@@ -0,0 +1,9 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureProps } from "../types";
+// export declare function AnimateLayoutContextProvider(props: FeatureProps): JSX.Element;
+
+
+export {default as AnimateLayoutContextProvider} from './AnimateLayoutContextProvider.svelte'

package/src/motion/features/layout/AnimateLayoutContextProvider.svelte

@@ -0,0 +1,14 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { usePresence } from "../../../components/AnimatePresence/use-presence.js";
+  import Animate from "./Animate.svelte";
+  export let visualElement, props, isCustom;
+
+  let { layout } = props;
+  $: ({ layout } = props);
+  const presence = usePresence(isCustom);
+</script>
+
+<Animate {visualElement} {layout} safeToRemove={$presence[1]} />

package/src/motion/features/layout/Measure.svelte

@@ -0,0 +1,98 @@
+<!-- based on framer-motion@4.1.16,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { afterUpdate, beforeUpdate, getContext, onMount } from "svelte";
+  import { get } from "svelte/store";
+  import {
+    ScaleCorrectionContext,
+    ScaleCorrectionParentContext,
+  } from "../../../context/ScaleCorrectionProvider.svelte";
+  import { isSharedLayout } from "../../../context/SharedLayoutContext.js";
+  import { snapshotViewportBox } from "../../../render/dom/projection/utils.js";
+
+  export let visualElement, syncLayout, framerSyncLayout, update;
+
+  const scaleCorrectionContext: any = getContext(ScaleCorrectionContext);
+  const scaleCorrectionParentContext: any = getContext(
+    ScaleCorrectionParentContext
+  );
+
+  onMount(() => {
+    isSharedLayout(syncLayout) && syncLayout.register(visualElement);
+    isSharedLayout(framerSyncLayout) &&
+      framerSyncLayout.register(visualElement);
+
+    visualElement.onUnmount(() => {
+      if (isSharedLayout(syncLayout)) {
+        syncLayout.remove(visualElement);
+      }
+
+      if (isSharedLayout(framerSyncLayout)) {
+        framerSyncLayout.remove(visualElement);
+      }
+    });
+  });
+  /**
+   * If this is a child of a SyncContext, notify it that it needs to re-render. It will then
+   * handle the snapshotting.
+   *
+   * If it is stand-alone component, add it to the batcher.
+   */
+
+  let updated = false;
+  const updater = (nc = false) => {
+    if (updated) {
+      return null;
+    }
+    updated = true;
+
+    // in React the updater function is called on children first, in Svelte the child does not call it.
+    get(scaleCorrectionContext).forEach((v) => {
+      v.updater?.(true);
+    });
+
+    if (isSharedLayout(syncLayout)) {
+      syncLayout.syncUpdate();
+    } else {
+      snapshotViewportBox(visualElement, nc);
+      syncLayout.add(visualElement);
+    }
+
+    return null;
+  };
+
+  $: update !== undefined && updater(update);
+
+  if (update === undefined) {
+    beforeUpdate(updater);
+  }
+  const afterU = (nc = false) => {
+    updated = false;
+    /* Second part of the updater calling in child layouts first.*/
+    const scc = get(scaleCorrectionContext);
+
+    scc.forEach((v, i) => {
+      v.afterU?.(true);
+    });
+
+    if (!isSharedLayout(syncLayout)) {
+      syncLayout.flush();
+    }
+
+    /**
+     * If this axis isn't animating as a result of this render we want to reset the targetBox
+     * to the measured box
+     */
+    //setCurrentViewportBox(visualElement);
+  };
+  scaleCorrectionParentContext.update((v) =>
+    v.concat([
+      {
+        updater,
+        afterU,
+      },
+    ])
+  );
+  afterUpdate(afterU);
+</script>

package/src/motion/features/layout/Measure.ts

@@ -0,0 +1,9 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureProps } from "../types";
+// export declare function MeasureContextProvider(props: FeatureProps): JSX.Element;
+
+
+export {default as MeasureContextProvider} from './MeasureContextProvider.svelte'

package/src/motion/features/layout/MeasureContextProvider.svelte

@@ -0,0 +1,32 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import type {
+    SharedLayoutSyncMethods,
+    SyncLayoutBatcher,
+  } from "../../../components/AnimateSharedLayout/types.js";
+  import {
+    FramerTreeLayoutContext,
+    SharedLayoutContext,
+  } from "../../../context/SharedLayoutContext.js";
+  import Measure from "./Measure.svelte";
+
+  export let visualElement, props, isCustom;
+
+  $: ({ update } = props);
+  const syncLayout: Writable<SyncLayoutBatcher | SharedLayoutSyncMethods> =
+    getContext(SharedLayoutContext) || SharedLayoutContext(isCustom);
+
+  const framerSyncLayout: Writable<SyncLayoutBatcher> =
+    getContext(FramerTreeLayoutContext) || FramerTreeLayoutContext(isCustom);
+</script>
+
+<Measure
+  syncLayout={$syncLayout}
+  framerSyncLayout={$framerSyncLayout}
+  {visualElement}
+  {update}
+/>

package/src/motion/features/layout/index.ts

@@ -0,0 +1,20 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureComponents } from "../types";
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { AnimateLayoutContextProvider } from './Animate.js';
+import { MeasureContextProvider } from './Measure.js';
+
+var layoutAnimations = {
+    measureLayout: MeasureContextProvider,
+    layoutAnimation: AnimateLayoutContextProvider
+} satisfies FeatureComponents;
+
+export { layoutAnimations };

package/src/motion/features/layout/types.ts

@@ -0,0 +1,71 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * @public
+ */
+export interface LayoutProps {
+    /**
+     * If `true`, this component will automatically animate to its new position when
+     * its layout changes.
+     *
+     * ```jsx
+     * <MotionDiv layout />
+     * ```
+     *
+     * This will perform a layout animation using performant transforms. Part of this technique
+     * involved animating an element's scale. This can introduce visual distortions on children,
+     * `boxShadow` and `borderRadius`.
+     *
+     * To correct distortion on immediate children, add `layout` to those too.
+     *
+     * `boxShadow` and `borderRadius` will automatically be corrected if they are already being
+     * animated on this component. Otherwise, set them directly via the `initial` prop.
+     *
+     * If `layout` is set to `"position"`, the size of the component will change instantly and
+     * only its position will animate.
+     *
+     * @public
+     */
+    layout?: boolean | "position";
+    /**
+     * Enable shared layout transitions between components for children of `AnimateSharedLayout`.
+     *
+     * When a component with a layoutId is removed from the React tree, and then
+     * added elsewhere, it will visually animate from the previous component's bounding box
+     * and its latest animated values.
+     *
+     * ```jsx
+     * <AnimateSharedLayout>
+     *   {items.map(item => (
+     *      <motion.li layout>
+     *         {item.name}
+     *         {item.isSelected && <MotionDiv layoutId="underline" />}
+     *      </motion.li>
+     *   ))}
+     * </AnimateSharedLayout>
+     * ```
+     *
+     * If the previous component remains in the tree it will either get hidden immediately or,
+     * if `type="crossfade"` is set on `AnimateSharedLayout`, it will crossfade to the new component.
+     *
+     * @public
+     */
+    layoutId?: string;
+    /**
+     * This enables a component's transform to be reset during layout
+     * measurements. This is intended to be used independently of the
+     * layout prop, for instance if a parent component's transform is
+     * interfering with the measurement of a child.
+     *
+     * @internal
+     */
+    _layoutResetTransform?: boolean;
+    /**
+     * A callback that will fire when a layout animation on this component completes.
+     *
+     * @public
+     */
+    onLayoutAnimationComplete?(): void;
+}

package/src/motion/features/layout/utils.ts

@@ -0,0 +1,40 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Axis, AxisBox2D } from "../../../types/geometry";
+interface WithLayoutId {
+    getLayoutId: () => undefined | string;
+}
+
+/** 
+based on framer-motion@4.1.11,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../../utils/fix-process-env';
+import { mix } from 'popmotion';
+
+function tweenAxis(target: Axis, prev: Axis, next: Axis, p: number) {
+    target.min = mix(prev.min, next.min, p);
+    target.max = mix(prev.max, next.max, p);
+}
+function calcRelativeOffsetAxis(parent: Axis, child: Axis) {
+    return {
+        min: child.min - parent.min,
+        max: child.max - parent.min,
+    };
+}
+function calcRelativeOffset(parent: AxisBox2D, child: AxisBox2D) {
+    return {
+        x: calcRelativeOffsetAxis(parent.x, child.x),
+        y: calcRelativeOffsetAxis(parent.y, child.y),
+    };
+}
+function checkIfParentHasChanged(prev: WithLayoutId, next: WithLayoutId) {
+    var prevId = prev.getLayoutId();
+    var nextId = next.getLayoutId();
+    return prevId !== nextId || (nextId === undefined && prev !== next);
+}
+
+export { calcRelativeOffset, calcRelativeOffsetAxis, checkIfParentHasChanged, tweenAxis };
+

package/src/motion/features/types.ts

@@ -0,0 +1,53 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Component, SvelteComponent } from "svelte";
+import type { CreateVisualElement, VisualElement } from "../../render/types";
+import type { MotionProps } from "../types";
+import type { VisualState } from "../utils/use-visual-state";
+/**
+ * @public
+ */
+export interface FeatureProps {
+    props: MotionProps;
+    visualElement: VisualElement;
+}
+export type FeatureNames = {
+    animation: true;
+    exit: true;
+    drag: true;
+    tap: true;
+    focus: true;
+    hover: true;
+    pan: true;
+    layoutAnimation: true;
+    measureLayout: true;
+};
+export type FeatureComponent = Component<SvelteComponent<FeatureProps>>;
+/**
+ * @public
+ */
+export interface FeatureDefinition {
+    isEnabled: (props: MotionProps) => boolean;
+    Component?: FeatureComponent;
+}
+export interface FeatureComponents {
+    animation?: FeatureComponent;
+    exit?: FeatureComponent;
+    drag?: FeatureComponent;
+    tap?: FeatureComponent;
+    focus?: FeatureComponent;
+    hover?: FeatureComponent;
+    pan?: FeatureComponent;
+    layoutAnimation?: FeatureComponent;
+    measureLayout?: FeatureComponent;
+}
+export interface FeatureBundle extends FeatureComponents {
+    renderer: CreateVisualElement<any>;
+}
+export type LazyFeatureBundle = () => Promise<FeatureBundle>;
+export type FeatureDefinitions = {
+    [K in keyof FeatureNames]: FeatureDefinition;
+};
+export type RenderComponent<Instance, RenderState> = (Component: string | React.ComponentType, props: MotionProps, ref: React.Ref<Instance>, visualState: VisualState<Instance, RenderState>, isStatic: boolean) => any;