motion-start 0.0.1

package/src/motion/utils/use-motion-ref.ts

@@ -0,0 +1,41 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { VisualElement } from "../../render/types";
+import type { VisualState } from "./use-visual-state";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { isRefObject } from '../../utils/is-ref-object.js';
+
+/**
+ * Creates a ref function that, when called, hydrates the provided
+ * external ref and VisualElement.
+ */
+function useMotionRef<Instance, RenderState>(visualState: VisualState<Instance, RenderState>, visualElement?: VisualElement<Instance> | null, externalRef?: React.Ref<Instance>): React.Ref<Instance> {
+    return function (instance) {
+        var _a;
+        instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance));
+        if (visualElement) {
+            instance
+                ? visualElement.mount(instance)
+                : visualElement.unmount();
+        }
+        if (externalRef) {
+            if (typeof externalRef === "function") {
+                externalRef(instance);
+            }
+            else if (isRefObject(externalRef)) {
+                externalRef.current = instance;
+            }
+        }
+    }
+}
+
+export { useMotionRef };
+

package/src/motion/utils/use-visual-element.ts

@@ -0,0 +1,13 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../../motion/types";
+import type { CreateVisualElement, VisualElement } from "../../render/types";
+import type { VisualState } from "./use-visual-state";
+
+
+export type useVisualElement = <Instance, RenderState>(Component: string | React.ComponentType, visualState: VisualState<Instance, RenderState>, props: MotionProps, createVisualElement?: CreateVisualElement<Instance>) => VisualElement<Instance> | undefined;
+
+export { default as UseVisualElement } from './UseVisualElement.svelte';
+

package/src/motion/utils/use-visual-state.ts

@@ -0,0 +1,24 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ResolvedValues, ScrapeMotionValuesFromProps } from "../../render/types";
+import type { MotionProps } from "../types";
+import type UseVisualState from "./UseVisualState.svelte";
+
+export interface VisualState<Instance, RenderState> {
+    renderState: RenderState;
+    latestValues: ResolvedValues;
+    mount?: (instance: Instance) => void;
+}
+
+// type UseVisualState<Instance, RenderState> = (props: MotionProps, isStatic: boolean) => VisualState<Instance, RenderState>;
+export interface UseVisualStateConfig<Instance, RenderState> {
+    scrapeMotionValuesFromProps: ScrapeMotionValuesFromProps;
+    createRenderState: () => RenderState;
+    onMount?: (props: MotionProps, instance: Instance, visualState: VisualState<Instance, RenderState>) => void;
+}
+export type makeUseVisualState = <I, RS>(config: UseVisualStateConfig<I, RS>) => typeof UseVisualState<I, RS>;
+
+export { default as UseVisualState } from './UseVisualState.svelte';
+

package/src/motion/utils/valid-prop.ts

@@ -0,0 +1,80 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * A list of all valid MotionProps.
+ *
+ * @internalremarks
+ * This doesn't throw if a `MotionProp` name is missing - it should.
+ */
+var validMotionProps = new Set([
+    "initial",
+    "animate",
+    "exit",
+    "style",
+    "variants",
+    "transition",
+    "transformTemplate",
+    "transformValues",
+    "custom",
+    "inherit",
+    "layout",
+    "layoutId",
+    "onLayoutAnimationComplete",
+    "onViewportBoxUpdate",
+    "onLayoutMeasure",
+    "onBeforeLayoutMeasure",
+    "onAnimationStart",
+    "onAnimationComplete",
+    "onUpdate",
+    "onDragStart",
+    "onDrag",
+    "onDragEnd",
+    "onMeasureDragConstraints",
+    "onDirectionLock",
+    "onDragTransitionEnd",
+    "drag",
+    "dragControls",
+    "dragListener",
+    "dragConstraints",
+    "dragDirectionLock",
+    "_dragX",
+    "_dragY",
+    "dragElastic",
+    "dragMomentum",
+    "dragPropagation",
+    "dragTransition",
+    "whileDrag",
+    "onPan",
+    "onPanStart",
+    "onPanEnd",
+    "onPanSessionStart",
+    "onTap",
+    "onTapStart",
+    "onTapCancel",
+    "onHoverStart",
+    "onHoverEnd",
+    "whileFocus",
+    "whileTap",
+    "whileHover",
+]);
+/**
+ * Check whether a prop name is a valid `MotionProp` key.
+ *
+ * @param key - Name of the property to check
+ * @returns `true` is key is a valid `MotionProp`.
+ *
+ * @public
+ */
+function isValidMotionProp(key: string): boolean {
+    return validMotionProps.has(key);
+}
+
+export { isValidMotionProp };

package/src/render/dom/M.svelte

@@ -0,0 +1,16 @@
+<!-- <svelte:options runes={true}/> -->
+<script lang="ts">
+    import type { SvelteHTMLElements } from "svelte/elements";
+    import type { Snippet } from "svelte";
+    import type { MotionProps } from "../../motion";
+    import Motion from "../../motion/Motion.svelte";
+
+    // let {as, class: className, children, ...restProps}: {as: keyof SvelteHTMLElements, children: Snippet, class: string } & MotionProps = $props();
+    export let ___tag: keyof SvelteHTMLElements;
+</script>
+
+<Motion {...$$restProps} let:props let:motion>
+    <svelte:element this={___tag} class={props.class} use:motion {...props}>
+        <slot />
+    </svelte:element>
+</Motion>

package/src/render/dom/UseRender.svelte

@@ -0,0 +1,37 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { UseHTMLProps } from "../html/use-props.js";
+  import { UseSVGProps } from "../svg/use-props.js";
+  import { filterProps } from "./utils/filter-props.js";
+
+  export let props,
+    visualState,
+    Component,
+    forwardMotionProps = false,
+    isStatic,
+    ref,
+    targetEl = undefined;
+  const motion = (node) => {
+    ref(node);
+  };
+  $: filteredProps = filterProps(
+    props,
+    typeof Component === "string",
+    forwardMotionProps
+  );
+  $: if (targetEl) {
+    motion(targetEl);
+  }
+</script>
+
+<svelte:component
+  this={Component === "SVG" ? UseSVGProps : UseHTMLProps}
+  {visualState}
+  {isStatic}
+  {props}
+  let:visualProps
+>
+  <slot {motion} props={{ ...filteredProps, ...visualProps }} />
+</svelte:component>

package/src/render/dom/create-motion-class.ts

@@ -0,0 +1,12 @@
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import Motion from '../../motion/Motion.svelte';
+import { loadFeatures } from "../../motion/features/definitions"
+
+
+export const createMotionClass = (features)=>{
+    features && loadFeatures(features)
+    return Motion;           
+}

package/src/render/dom/create-visual-element.ts

@@ -0,0 +1,22 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { CreateVisualElement } from "../types";
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { htmlVisualElement } from '../html/visual-element.js';
+import { svgVisualElement } from '../svg/visual-element.js';
+
+
+var createDomVisualElement: CreateVisualElement<HTMLElement | SVGElement> = function (Component, options) {
+   
+    return Component === "SVG"
+        ? svgVisualElement(options, { enableHardwareAcceleration: false })
+        : htmlVisualElement(options, { enableHardwareAcceleration: true });
+};
+
+export { createDomVisualElement };

package/src/render/dom/featureBundle.ts

@@ -0,0 +1,22 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+// import type { FeatureBundle } from "../../motion/features/types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { animations } from "../../motion/features/animations";
+import { drag } from "../../motion/features/drag";
+import { gestureAnimations } from "../../motion/features/gestures";
+import { layoutAnimations } from "../../motion/features/layout";
+
+export const featureBundle = {
+    ...animations,
+    ...gestureAnimations,
+    ...drag,
+    ...layoutAnimations,
+}

package/src/render/dom/motion-minimal.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { layoutAnimations } from '../../motion/features/layout/index.js';
+//import { createMotionProxy } from './motion-proxy.js';
+import {createMotionClass} from './create-motion-class.js';
+
+/**
+ * @public
+ */
+var m = /*@__PURE__*/ //createMotionProxy([MeasureLayout]);
+    createMotionClass({...layoutAnimations}) as unknown as (<Props>(Component: string | import("react").ComponentType<Props>, customMotionComponentConfig?: import("./motion-proxy").CustomMotionComponentConfig) => import("./motion-proxy").CustomDomComponent<Props>) & import("../html/types").HTMLMotionComponents & import("../svg/types").SVGMotionComponents
+
+export { m as M };

package/src/render/dom/motion-proxy.ts

@@ -0,0 +1,107 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionComponentConfig } from "../../motion/index.js";
+import type { MotionProps } from "../../motion/types.js";
+/**
+ * I'd rather the return type of `custom` to be implicit but this throws
+ * incorrect relative paths in the exported types and API Extractor throws
+ * a wobbly.
+ *
+ * @internal
+ */
+export type CustomDomComponent<Props> = React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & MotionProps> & React.RefAttributes<SVGElement | HTMLElement>>;
+export interface CustomMotionComponentConfig {
+    forwardMotionProps?: boolean;
+}
+export type CreateConfig = <Instance, RenderState, Props>(Component: string | React.ComponentType<Props>, config: CustomMotionComponentConfig) => MotionComponentConfig<Instance, RenderState>;
+/**
+ * Convert any React component into a `motion` component. The provided component
+ * **must** use `React.forwardRef` to the underlying DOM component you want to animate.
+ *
+ * ```jsx
+ * const Component = React.forwardRef((props, ref) => {
+ *   return <div ref={ref} />
+ * })
+ *
+ * const MotionComponent = motion(Component)
+ * ```
+ *
+ * @public
+ */
+// export declare function createMotionProxy(createConfig: CreateConfig): (<Props>(Component: string | React.ComponentType<Props>, customMotionComponentConfig?: CustomMotionComponentConfig) => CustomDomComponent<Props>) & import("../html/types").HTMLMotionComponents & import("../svg/types").SVGMotionComponents;
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Component, Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import Mo from './M.svelte';
+import { isSVGComponent } from './utils/is-svg-component.js';
+
+type M<Element extends keyof SvelteHTMLElements> = MotionProps & {children: Snippet, class: string} & Omit<SvelteHTMLElements[Element], 'style'>;
+type motion<Element extends keyof SvelteHTMLElements> = Component<M<Element>>;
+/**
+ * Convert any React component into a `motion` component. The provided component
+ * **must** use `React.forwardRef` to the underlying DOM component you want to animate.
+ *
+ * ```jsx
+ * const Component = React.forwardRef((props, ref) => {
+ *   return <div ref={ref} />
+ * })
+ *
+ * const MotionComponent = motion(Component)
+ * ```
+ *
+ * @public
+ */
+function createMotionProxy(): { [P in keyof SvelteHTMLElements]: motion<P> } {
+	return new Proxy(
+		{},
+		{
+			get(_target, key: string) {
+				let type = false;
+				if (key.toString().slice(0, 1) === key.toString().slice(0, 1).toLowerCase()) {
+					type = isSVGComponent(key);
+				}
+
+				return new Proxy(Mo, {
+					construct(target, args) {
+						if (!args || !args[0]) {
+							args.push({});
+						}
+						if (!args[0]?.props) {
+							args[0].props = { ___tag: key, isSVG: type };
+						} else {
+							args[0].props.___tag = key;
+							args[0].props.isSVG = type;
+						}
+
+						console.log(target, args);
+
+						return new target(...args);
+					},
+                    // support svelte 5
+					apply(target, thisArg, args) {
+						if (!args[1]) {
+							args[1] = { ___tag: key, isSVG: type };
+						} else {
+							args[1].___tag = key;
+							args[1].isSVG = type;
+						}
+
+						return target(...args);
+					},
+				});
+			},
+		}
+	) as { [P in keyof SvelteHTMLElements]: motion<P> };
+}
+
+const M = createMotionProxy();
+
+export { M, createMotionProxy };
+

package/src/render/dom/motion.ts

@@ -0,0 +1,62 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+// import { SvelteComponent } from "svelte";
+import type { DOMMotionComponents } from "./types.js";
+// import type { CustomMotionComponentConfig} from './motion-proxy.js'
+// import type { MotionProps } from "../../motion/types.js";
+
+export interface IsSVG{
+    /** set to true if the component receiving the motion action is an svg-element like `circle` or `path`. Should not be set to true for `svg` tags. */
+    isSVG?:boolean
+}
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { createMotionComponent } from '../../motion/index.js';
+import { createMotionClass } from './create-motion-class.js';
+import { createDomVisualElement } from './create-visual-element.js';
+import { featureBundle } from './featureBundle.js';
+//import { createMotionProxy } from './motion-proxy.js';
+
+
+
+/**
+ * HTML & SVG components, optimised for use with gestures and animation. These can be used as
+ * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
+ *
+ * @public
+ */
+var motion = /*@__PURE__*/ //createMotionProxy(allMotionFeatures);
+    createMotionClass(featureBundle)
+/**
+ * Create a DOM `motion` component with the provided string. This is primarily intended
+ * as a full alternative to `motion` for consumers who have to support environments that don't
+ * support `Proxy`.
+ *
+ * ```javascript
+ * import { createDomMotionComponent } from "framer-motion"
+ *
+ * const motion = {
+ *   div: createDomMotionComponent('div')
+ * }
+ * ```
+ *
+ * @public
+ */
+function createDomMotionComponent<T extends keyof DOMMotionComponents>(key: T): DOMMotionComponents[T] {
+    var config = {
+        createVisualElement: createDomVisualElement(key),
+        //useRender: createUseRender(key, false),
+        forwardMotionProps:  key.forwardMotionProps,
+        Component: key.Component,
+        defaultFeatures: allMotionFeatures,
+    };
+    return createMotionComponent(config);
+}
+
+export { motion as Motion, createDomMotionComponent };
+

package/src/render/dom/projection/convert-to-relative.ts

@@ -0,0 +1,40 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { VisualElement } from "../../types";
+
+
+/** 
+based on framer-motion@4.1.11,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { calcRelativeOffset } from '../../../motion/features/layout/utils.js';
+import { eachAxis } from '../../../utils/each-axis.js';
+import { removeBoxTransforms } from '../../../utils/geometry/delta-apply.js';
+
+/**
+ * Returns a boolean stating whether or not we converted the projection
+ * to relative projection.
+ */
+function convertToRelativeProjection(visualElement: VisualElement, isLayoutDrag?: boolean) {
+    if (isLayoutDrag === void 0) { isLayoutDrag = true; }
+    var projectionParent = visualElement.getProjectionParent();
+    if (!projectionParent)
+        return false;
+    var offset;
+    if (isLayoutDrag) {
+        offset = calcRelativeOffset(projectionParent.projection.target, visualElement.projection.target);
+        removeBoxTransforms(offset, projectionParent.getLatestValues());
+    }
+    else {
+        offset = calcRelativeOffset(projectionParent.getLayoutState().layout, visualElement.getLayoutState().layout);
+    }
+    eachAxis(function (axis) {
+        return visualElement.setProjectionTargetAxis(axis, offset[axis].min, offset[axis].max, true);
+    });
+    return true;
+}
+
+export { convertToRelativeProjection };

package/src/render/dom/projection/default-scale-correctors.ts

@@ -0,0 +1,138 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Axis } from "../../../types/geometry";
+import type { LayoutState, TargetProjection } from "../../utils/state";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../../utils/fix-process-env.js';
+import { __assign } from 'tslib';
+import { complex, px } from 'style-value-types';
+import { mix } from 'popmotion';
+import { cssVariableRegex } from '../utils/css-variables-conversion.js';
+
+function pixelsToPercent(pixels: number, axis: Axis) {
+    return (pixels / (axis.max - axis.min)) * 100;
+}
+/**
+ * We always correct borderRadius as a percentage rather than pixels to reduce paints.
+ * For example, if you are projecting a box that is 100px wide with a 10px borderRadius
+ * into a box that is 200px wide with a 20px borderRadius, that is actually a 10%
+ * borderRadius in both states. If we animate between the two in pixels that will trigger
+ * a paint each time. If we animate between the two in percentage we'll avoid a paint.
+ */
+function correctBorderRadius(latest: string | number, _layoutState: LayoutState, { target }: TargetProjection) {
+    /**
+     * If latest is a string, if it's a percentage we can return immediately as it's
+     * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
+     */
+    if (typeof latest === "string") {
+        if (px.test(latest)) {
+            latest = parseFloat(latest);
+        }
+        else {
+            return latest;
+        }
+    }
+    /**
+     * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
+     * pixel value as a percentage of each axis
+     */
+    var x = pixelsToPercent(latest, target.x);
+    var y = pixelsToPercent(latest, target.y);
+    return x + "% " + y + "%";
+}
+var varToken = "_$css";
+function correctBoxShadow(latest: string, { delta, treeScale }: LayoutState) {
+    var original = latest;
+    /**
+     * We need to first strip and store CSS variables from the string.
+     */
+    var containsCSSVariables = latest.includes("var(");
+    var cssVariables = [];
+    if (containsCSSVariables) {
+        latest = latest.replace(cssVariableRegex, function (match) {
+            cssVariables.push(match);
+            return varToken;
+        });
+    }
+    var shadow = complex.parse(latest);
+    // TODO: Doesn't support multiple shadows
+    if (shadow.length > 5)
+        return original;
+    var template = complex.createTransformer(latest);
+    var offset = typeof shadow[0] !== "number" ? 1 : 0;
+    // Calculate the overall context scale
+    var xScale = delta.x.scale * treeScale.x;
+    var yScale = delta.y.scale * treeScale.y;
+    shadow[0 + offset] /= xScale;
+    shadow[1 + offset] /= yScale;
+    /**
+     * Ideally we'd correct x and y scales individually, but because blur and
+     * spread apply to both we have to take a scale average and apply that instead.
+     * We could potentially improve the outcome of this by incorporating the ratio between
+     * the two scales.
+     */
+    var averageScale = mix(xScale, yScale, 0.5);
+    // Blur
+    if (typeof shadow[2 + offset] === "number")
+        shadow[2 + offset] /= averageScale;
+    // Spread
+    if (typeof shadow[3 + offset] === "number")
+        shadow[3 + offset] /= averageScale;
+    var output = template(shadow);
+    if (containsCSSVariables) {
+        var i_1 = 0;
+        output = output.replace(varToken, function () {
+            var cssVariable = cssVariables[i_1];
+            i_1++;
+            return cssVariable;
+        });
+    }
+    return output;
+}
+var borderCorrectionDefinition = {
+    process: correctBorderRadius,
+};
+var defaultScaleCorrectors = {
+    borderRadius: __assign(__assign({}, borderCorrectionDefinition), { applyTo: [
+            "borderTopLeftRadius",
+            "borderTopRightRadius",
+            "borderBottomLeftRadius",
+            "borderBottomRightRadius",
+        ] }),
+    borderTopLeftRadius: borderCorrectionDefinition,
+    borderTopRightRadius: borderCorrectionDefinition,
+    borderBottomLeftRadius: borderCorrectionDefinition,
+    borderBottomRightRadius: borderCorrectionDefinition,
+    boxShadow: {
+        process: correctBoxShadow,
+    },
+} as {
+    borderRadius: {
+        applyTo: string[];
+        process: typeof correctBorderRadius;
+    };
+    borderTopLeftRadius: {
+        process: typeof correctBorderRadius;
+    };
+    borderTopRightRadius: {
+        process: typeof correctBorderRadius;
+    };
+    borderBottomLeftRadius: {
+        process: typeof correctBorderRadius;
+    };
+    borderBottomRightRadius: {
+        process: typeof correctBorderRadius;
+    };
+    boxShadow: {
+        process: typeof correctBoxShadow;
+    };
+};
+
+export { correctBorderRadius, correctBoxShadow, defaultScaleCorrectors, pixelsToPercent };

package/src/render/dom/projection/measure.ts

@@ -0,0 +1,28 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { TransformPoint2D, AxisBox2D } from "../../../types/geometry";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { convertBoundingBoxToAxisBox, transformBoundingBox } from '../../../utils/geometry/index.js';
+
+/**
+ * Measure and return the element bounding box.
+ *
+ * We convert the box into an AxisBox2D to make it easier to work with each axis
+ * individually and programmatically.
+ *
+ * This function optionally accepts a transformPagePoint function which allows us to compensate
+ * for, for instance, measuring the element within a scaled plane like a Framer devivce preview component.
+ */
+function getBoundingBox(element: Element, transformPagePoint?: TransformPoint2D) {
+    var box = element.getBoundingClientRect();
+    return convertBoundingBoxToAxisBox(transformBoundingBox(box, transformPagePoint));
+}
+
+export { getBoundingBox };