motion-start 0.0.1

package/src/render/svg/UseSVGProps.svelte

@@ -0,0 +1,34 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { copyRawValuesOnly } from "../html/use-props.js";
+  import { buildSVGAttrs } from "./utils/build-attrs.js";
+  import { createSvgRenderState } from "./utils/create-render-state.js";
+
+  export let visualState, props;
+  let memo = () => {
+    const state = createSvgRenderState();
+    buildSVGAttrs(
+      state,
+      visualState,
+      undefined,
+      undefined,
+      { enableHardwareAcceleration: false },
+      props.transformTemplate
+    );
+    return {
+      ...state.attrs,
+      style: { ...state.style },
+    };
+  };
+  $: visualProps = memo(visualState);
+
+  $: if (props.style) {
+    const rawStyles = {};
+    copyRawValuesOnly(rawStyles, props.style, props);
+    visualProps.style = { ...rawStyles, ...visualProps.style };
+  }
+</script>
+
+<slot {visualProps} />

package/src/render/svg/config-motion.ts

@@ -0,0 +1,51 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionComponentConfig } from "../../motion";
+import type { SVGRenderState } from "./types";
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { buildSVGAttrs } from './utils/build-attrs.js';
+import { createSvgRenderState } from './utils/create-render-state.js';
+import { renderSVG } from './utils/render.js';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.js';
+
+var svgMotionConfig = {
+        scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+        createRenderState: createSvgRenderState,
+        onMount: function (props, instance, _a) {
+            var renderState = _a.renderState, latestValues = _a.latestValues;
+            try {
+                renderState.dimensions =
+                    typeof instance.getBBox ===
+                        "function"
+                        ? instance.getBBox()
+                        : instance.getBoundingClientRect();
+            }
+            catch (e) {
+                // Most likely trying to measure an unrendered element under Firefox
+                renderState.dimensions = {
+                    x: 0,
+                    y: 0,
+                    width: 0,
+                    height: 0,
+                };
+            }
+            if (isPath(instance)) {
+                renderState.totalPathLength = instance.getTotalLength();
+            }
+            buildSVGAttrs(renderState, latestValues, undefined, undefined, { enableHardwareAcceleration: false }, props.transformTemplate);
+            // TODO: Replace with direct assignment
+            renderSVG(instance, renderState);
+        },
+    } satisfies Partial<MotionComponentConfig<SVGElement, SVGRenderState>>
+function isPath(element) {
+    return element.tagName === "path";
+}
+
+export { svgMotionConfig };
+

package/src/render/svg/lowercase-elements.ts

@@ -0,0 +1,35 @@
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * We keep these listed seperately as we use the lowercase tag names as part
+ * of the runtime bundle to detect SVG components
+ */
+export const lowercaseSVGElements = [
+    "animate",
+    "circle",
+    "defs",
+    "desc",
+    "ellipse",
+    "g",
+    "image",
+    "line",
+    "filter",
+    "marker",
+    "mask",
+    "metadata",
+    "path",
+    "pattern",
+    "polygon",
+    "polyline",
+    "rect",
+    "stop",
+    "svg",
+    "switch",
+    "symbol",
+    "text",
+    "tspan",
+    "use",
+    "view",
+];

package/src/render/svg/supported-elements.ts

@@ -0,0 +1,10 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+type UnionStringArray<T extends Readonly<string[]>> = T[number];
+/**
+ * @internal
+ */
+export const svgElements = ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"] as const;
+export type SVGElements = UnionStringArray<typeof svgElements>;

package/src/render/svg/types.ts

@@ -0,0 +1,51 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { SVGAttributes } from "react";
+import type { MakeMotion, MotionProps } from "../../motion/types";
+import type { ForwardRefComponent, HTMLRenderState } from "../html/types";
+import type { ResolvedValues } from "../types";
+import type { SVGElements } from "./supported-elements";
+export interface SVGRenderState extends HTMLRenderState {
+    /**
+     * Measured dimensions of the SVG element to be used to calculate a transform-origin.
+     */
+    dimensions?: SVGDimensions;
+    /**
+     * A mutable record of attributes we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
+     */
+    attrs: ResolvedValues;
+    /**
+     * Measured path length if this is a SVGPathElement
+     */
+    totalPathLength?: number;
+}
+export type SVGDimensions = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+interface SVGAttributesWithoutMotionProps<T> extends Pick<SVGAttributes<T>, Exclude<keyof SVGAttributes<T>, keyof MotionProps>> {
+}
+/**
+ * Blanket-accept any SVG attribute as a `MotionValue`
+ * @public
+ */
+export type SVGAttributesAsMotionValues<T> = MakeMotion<SVGAttributesWithoutMotionProps<T>>;
+type UnwrapSVGFactoryElement<F> = F extends React.SVGProps<infer P> ? P : never;
+/**
+ * @public
+ */
+export interface SVGMotionProps<T> extends SVGAttributesAsMotionValues<T>, MotionProps {
+}
+/**
+ * Motion-optimised versions of React's SVG components.
+ *
+ * @public
+ */
+export type SVGMotionComponents = {
+    [K in SVGElements]: ForwardRefComponent<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>, SVGMotionProps<UnwrapSVGFactoryElement<JSX.IntrinsicElements[K]>>>;
+};

package/src/render/svg/use-props.ts

@@ -0,0 +1,14 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../../motion/types";
+import type { ResolvedValues } from "../types";
+export type useSVGProps = (props: MotionProps, visualState: ResolvedValues) => {
+    style: {
+        [x: string]: string | number;
+    };
+};
+
+export { default as UseSVGProps } from './UseSVGProps.svelte';
+

package/src/render/svg/utils/build-attrs.ts

@@ -0,0 +1,58 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { DOMVisualElementOptions } from "../../dom/types";
+import type { ResolvedValues } from "../../types";
+import type { MotionProps } from "../../../motion/types";
+import type { LayoutState, TargetProjection } from "../../utils/state";
+import type { SVGRenderState } from "../types";
+import type { BuildProjectionTransform, BuildProjectionTransformOrigin } from "../../html/utils/build-projection-transform";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { __rest } from 'tslib';
+import { buildHTMLStyles } from '../../html/utils/build-styles.js';
+import { calcSVGTransformOrigin } from './transform-origin.js';
+import { buildSVGPath } from './path.js';
+
+/**
+ * Build SVG visual attrbutes, like cx and style.transform
+ */
+function buildSVGAttrs(state: SVGRenderState, { attrX, attrY, originX, originY, pathLength, pathSpacing, pathOffset, ...latest }: ResolvedValues, projection: TargetProjection | undefined, layoutState: LayoutState | undefined, options: DOMVisualElementOptions, transformTemplate?: MotionProps["transformTemplate"], buildProjectionTransform?: BuildProjectionTransform, buildProjectionTransformOrigin?: BuildProjectionTransformOrigin) {
+    // var attrX = _a.attrX, attrY = _a.attrY, originX = _a.originX, originY = _a.originY, pathLength = _a.pathLength, _b = _a.pathSpacing, pathSpacing = _b === void 0 ? 1 : _b, _c = _a.pathOffset, pathOffset = _c === void 0 ? 0 : _c, 
+    // // This is object creation, which we try to avoid per-frame.
+    // latest = __rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
+    buildHTMLStyles(state, latest, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin);
+    state.attrs = state.style;
+    state.style = {};
+    var attrs = state.attrs, style = state.style, dimensions = state.dimensions, totalPathLength = state.totalPathLength;
+    /**
+     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
+     * and copy it into style.
+     */
+    if (attrs.transform) {
+        if (dimensions)
+            style.transform = attrs.transform;
+        delete attrs.transform;
+    }
+    // Parse transformOrigin
+    if (dimensions &&
+        (originX !== undefined || originY !== undefined || style.transform)) {
+        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+    }
+    // Treat x/y not as shortcuts but as actual attributes
+    if (attrX !== undefined)
+        attrs.x = attrX;
+    if (attrY !== undefined)
+        attrs.y = attrY;
+    // Build SVG path if one has been measured
+    if (totalPathLength !== undefined && pathLength !== undefined) {
+        buildSVGPath(attrs, totalPathLength, pathLength, pathSpacing, pathOffset, false);
+    }
+}
+
+export { buildSVGAttrs };

package/src/render/svg/utils/camel-case-attrs.ts

@@ -0,0 +1,27 @@
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * A set of attribute names that are always read/written as camel case.
+ */
+export const camelCaseAttributes = new Set([
+    "baseFrequency",
+    "diffuseConstant",
+    "kernelMatrix",
+    "kernelUnitLength",
+    "keySplines",
+    "keyTimes",
+    "limitingConeAngle",
+    "markerHeight",
+    "markerWidth",
+    "numOctaves",
+    "targetX",
+    "targetY",
+    "surfaceScale",
+    "specularConstant",
+    "specularExponent",
+    "stdDeviation",
+    "tableValues",
+    "viewBox",
+]);

package/src/render/svg/utils/create-render-state.ts

@@ -0,0 +1,17 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { SVGRenderState } from "../types";
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { __assign } from 'tslib';
+import { createHtmlRenderState } from '../../html/utils/create-render-state.js';
+
+var createSvgRenderState = function () { return (__assign(__assign({}, createHtmlRenderState()), { attrs: {} })) satisfies SVGRenderState; };
+
+export { createSvgRenderState };
+

package/src/render/svg/utils/path.ts

@@ -0,0 +1,49 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ResolvedValues } from "../../types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../../utils/fix-process-env';
+import { px } from 'style-value-types';
+
+// Convert a progress 0-1 to a pixels value based on the provided length
+var progressToPixels = function (progress, length) {
+    return px.transform(progress * length);
+};
+var dashKeys = {
+    offset: "stroke-dashoffset",
+    array: "stroke-dasharray",
+};
+var camelKeys = {
+    offset: "strokeDashoffset",
+    array: "strokeDasharray",
+};
+/**
+ * Build SVG path properties. Uses the path's measured length to convert
+ * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
+ * and stroke-dasharray attributes.
+ *
+ * This function is mutative to reduce per-frame GC.
+ */
+function buildSVGPath(attrs: ResolvedValues, totalLength: number, length: number, spacing?: number, offset?: number, useDashCase?: boolean) {
+    if (spacing === void 0) { spacing = 1; }
+    if (offset === void 0) { offset = 0; }
+    if (useDashCase === void 0) { useDashCase = true; }
+    // We use dash case when setting attributes directly to the DOM node and camel case
+    // when defining props on a React component.
+    var keys = useDashCase ? dashKeys : camelKeys;
+    // Build the dash offset
+    attrs[keys.offset] = progressToPixels(-offset, totalLength);
+    // Build the dash array
+    var pathLength = progressToPixels(length, totalLength);
+    var pathSpacing = progressToPixels(spacing, totalLength);
+    attrs[keys.array] = pathLength + " " + pathSpacing;
+}
+
+export { buildSVGPath };

package/src/render/svg/utils/render.ts

@@ -0,0 +1,22 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { SVGRenderState } from "../types";
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { camelToDash } from '../../dom/utils/camel-to-dash.js';
+import { renderHTML } from '../../html/utils/render.js';
+import { camelCaseAttributes } from './camel-case-attrs.js';
+
+function renderSVG(element: SVGElement, renderState: SVGRenderState) {
+    renderHTML(element, renderState);
+    for (var key in renderState.attrs) {
+        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
+    }
+}
+
+export { renderSVG };

package/src/render/svg/utils/scrape-motion-values.ts

@@ -0,0 +1,26 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../../../motion/types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { isMotionValue } from '../../../value/utils/is-motion-value.js';
+import { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.js';
+
+function scrapeMotionValuesFromProps(props: MotionProps) {
+    var newValues = scrapeMotionValuesFromProps$1(props);
+    for (var key in props) {
+        if (isMotionValue(props[key])) {
+            var targetKey = key === "x" || key === "y" ? "attr" + key.toUpperCase() : key;
+            newValues[targetKey] = props[key];
+        }
+    }
+    return newValues;
+}
+
+export { scrapeMotionValuesFromProps };

package/src/render/svg/utils/transform-origin.ts

@@ -0,0 +1,30 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { SVGDimensions } from "../types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../../utils/fix-process-env';
+import { px } from 'style-value-types';
+
+function calcOrigin(origin, offset, size) {
+    return typeof origin === "string"
+        ? origin
+        : px.transform(offset + size * origin);
+}
+/**
+ * The SVG transform origin defaults are different to CSS and is less intuitive,
+ * so we use the measured dimensions of the SVG to reconcile these.
+ */
+function calcSVGTransformOrigin(dimensions: SVGDimensions, originX: number | string, originY: number | string) {
+    var pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
+    var pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
+    return pxOriginX + " " + pxOriginY;
+}
+
+export { calcSVGTransformOrigin };

package/src/render/svg/visual-element.ts

@@ -0,0 +1,44 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+// export declare const svgVisualElement: ({ parent, props, presenceId, blockInitialAnimation, visualState, }: import("../types").VisualElementOptions<SVGElement, any>, options?: DOMVisualElementOptions) => import("../types").VisualElement<SVGElement, any>;
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { __assign } from 'tslib';
+import { camelToDash } from '../dom/utils/camel-to-dash.js';
+import { getDefaultValueType } from '../dom/value-types/defaults.js';
+import { buildLayoutProjectionTransform, buildLayoutProjectionTransformOrigin } from '../html/utils/build-projection-transform.js';
+import { isTransformProp } from '../html/utils/transform.js';
+import { htmlConfig } from '../html/visual-element.js';
+import { visualElement } from '../index.js';
+import { buildSVGAttrs } from './utils/build-attrs.js';
+import { camelCaseAttributes } from './utils/camel-case-attrs.js';
+import { renderSVG } from './utils/render.js';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.js';
+
+var svgVisualElement = visualElement<SVGElement>(__assign(__assign({}, htmlConfig), { getBaseTarget: function (props, key) {
+        return props[key];
+    },
+    readValueFromInstance: function (domElement, key) {
+        var _a;
+        if (isTransformProp(key)) {
+            return ((_a = getDefaultValueType(key)) === null || _a === void 0 ? void 0 : _a.default) || 0;
+        }
+        key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
+        return domElement.getAttribute(key);
+    },
+    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+    build: function (_element, renderState, latestValues, projection, layoutState, options, props) {
+        var isProjectionTranform = projection.isEnabled && layoutState.isHydrated;
+        buildSVGAttrs(renderState, latestValues, projection, layoutState, options, props.transformTemplate, isProjectionTranform ? buildLayoutProjectionTransform : undefined, isProjectionTranform
+            ? buildLayoutProjectionTransformOrigin
+            : undefined);
+    }, render: renderSVG }));
+
+export { svgVisualElement };
+

package/src/render/types.ts

@@ -0,0 +1,148 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Component } from "svelte";
+import { startAnimation } from "../animation/utils/transitions";
+import { Presence, type SharedLayoutAnimationConfig } from "../components/AnimateSharedLayout/types";
+import type { Crossfader } from "../components/AnimateSharedLayout/utils/crossfader";
+import type { MotionProps } from "../motion/types";
+import type { VisualState } from "../motion/utils/use-visual-state";
+import type { TargetAndTransition, Transition, Variant } from "../types";
+import type { AxisBox2D, Point2D } from "../types/geometry";
+import { MotionValue } from "../value";
+import type { AnimationState } from "./utils/animation-state";
+import { FlatTree } from "./utils/flat-tree";
+import type { LifecycleManager } from "./utils/lifecycles";
+import type { LayoutState, TargetProjection } from "./utils/state";
+
+export interface MotionPoint {
+    x: MotionValue<number>;
+    y: MotionValue<number>;
+}
+export interface VisualElement<Instance = any, RenderState = any> extends LifecycleManager {
+    treeType: string;
+    depth: number;
+    parent?: VisualElement;
+    children: Set<VisualElement>;
+    variantChildren?: Set<VisualElement>;
+    current: Instance | null;
+    layoutTree: FlatTree;
+    manuallyAnimateOnMount: boolean;
+    blockInitialAnimation?: boolean;
+    presenceId: number | undefined;
+    projection: TargetProjection;
+    isProjectionReady: () => boolean;
+    isMounted(): boolean;
+    mount(instance: Instance): void;
+    unmount(): void;
+    isStatic?: boolean;
+    getInstance(): Instance | null;
+    path: VisualElement[];
+    sortNodePosition(element: VisualElement): number;
+    addVariantChild(child: VisualElement): undefined | (() => void);
+    getClosestVariantNode(): VisualElement | undefined;
+    setCrossfader(crossfader: Crossfader): void;
+    layoutSafeToRemove?: () => void;
+    animateMotionValue?: typeof startAnimation;
+    /**
+     * Visibility
+     */
+    isVisible?: boolean;
+    setVisibility(visibility: boolean): void;
+    hasValue(key: string): boolean;
+    addValue(key: string, value: MotionValue<any>): void;
+    removeValue(key: string): void;
+    getValue(key: string): undefined | MotionValue;
+    getValue(key: string, defaultValue: string | number): MotionValue;
+    getValue(key: string, defaultValue?: string | number): undefined | MotionValue;
+    forEachValue(callback: (value: MotionValue, key: string) => void): void;
+    readValue(key: string): string | number | undefined | null;
+    setBaseTarget(key: string, value: string | number | null): void;
+    getBaseTarget(key: string): number | string | undefined | null;
+    getStaticValue(key: string): number | string | undefined;
+    setStaticValue(key: string, value: number | string): void;
+    getLatestValues(): ResolvedValues;
+    scheduleRender(): void;
+    setProps(props: MotionProps): void;
+    getProps(): MotionProps;
+    getVariant(name: string): Variant | undefined;
+    getDefaultTransition(): Transition | undefined;
+    getVariantContext(startAtParent?: boolean): undefined | {
+        initial?: string | string[];
+        animate?: string | string[];
+        exit?: string | string[];
+        whileHover?: string | string[];
+        whileDrag?: string | string[];
+        whileFocus?: string | string[];
+        whileTap?: string | string[];
+    };
+    build(): RenderState;
+    syncRender(): void;
+    /**
+     * Layout projection - perhaps a candidate for lazy-loading
+     * or an external interface. Move into Projection?
+     */
+    enableLayoutProjection(): void;
+    lockProjectionTarget(): void;
+    unlockProjectionTarget(): void;
+    rebaseProjectionTarget(force?: boolean, sourceBox?: AxisBox2D): void;
+    measureViewportBox(withTransform?: boolean): AxisBox2D;
+    getLayoutState: () => LayoutState;
+    getProjectionParent: () => VisualElement | false;
+    getProjectionAnimationProgress(): MotionPoint;
+    setProjectionTargetAxis(axis: "x" | "y", min: number, max: number, isRelative?: boolean): void;
+    startLayoutAnimation(axis: "x" | "y", transition: Transition, isRelative: boolean): Promise<any>;
+    stopLayoutAnimation(): void;
+    updateLayoutProjection(): void;
+    updateTreeLayoutProjection(): void;
+    resolveRelativeTargetBox(): void;
+    makeTargetAnimatable(target: TargetAndTransition, isLive?: boolean): TargetAndTransition;
+    scheduleUpdateLayoutProjection(): void;
+    notifyLayoutReady(config?: SharedLayoutAnimationConfig): void;
+    pointTo(element: VisualElement): void;
+    resetTransform(): void;
+    restoreTransform(): void;
+    shouldResetTransform(): boolean;
+    isPresent: boolean;
+    presence: Presence;
+    isPresenceRoot?: boolean;
+    prevDragCursor?: Point2D;
+    prevViewportBox?: AxisBox2D;
+    getLayoutId(): string | undefined;
+    animationState?: AnimationState;
+}
+export interface VisualElementConfig<Instance, RenderState, Options> {
+    treeType?: string;
+    getBaseTarget?(props: MotionProps, key: string): string | number | undefined | MotionValue;
+    build(visualElement: VisualElement<Instance>, renderState: RenderState, latestValues: ResolvedValues, projection: TargetProjection, layoutState: LayoutState, options: Options, props: MotionProps): void;
+    sortNodePosition?: (a: Instance, b: Instance) => number;
+    makeTargetAnimatable(element: VisualElement<Instance>, target: TargetAndTransition, props: MotionProps, isLive: boolean): TargetAndTransition;
+    measureViewportBox(instance: Instance, options: Options): AxisBox2D;
+    readValueFromInstance(instance: Instance, key: string, options: Options): string | number | null | undefined;
+    resetTransform(element: VisualElement<Instance>, instance: Instance, props: MotionProps): void;
+    restoreTransform(instance: Instance, renderState: RenderState): void;
+    render(instance: Instance, renderState: RenderState): void;
+    removeValueFromRenderState(key: string, renderState: RenderState): void;
+    scrapeMotionValuesFromProps: ScrapeMotionValuesFromProps;
+}
+export type ScrapeMotionValuesFromProps = (props: MotionProps) => {
+    [key: string]: MotionValue | string | number;
+};
+export type UseRenderState<RenderState = any> = () => RenderState;
+export type VisualElementOptions<Instance, RenderState = any> = {
+    visualState: VisualState<Instance, RenderState>;
+    parent?: VisualElement<unknown>;
+    variantParent?: VisualElement<unknown>;
+    snapshot?: ResolvedValues;
+    presenceId?: number | undefined;
+    props: MotionProps;
+    blockInitialAnimation?: boolean;
+};
+export type CreateVisualElement<Instance> = (Component: string | Component, options?: VisualElementOptions<Instance>) => VisualElement<Instance>;
+/**
+ * A generic set of string/number values
+ */
+export interface ResolvedValues {
+    [key: string]: string | number;
+}