@motion.page/sdk 0.1.0

package/dist/types/index.d.ts

@@ -0,0 +1,355 @@
+/**
+ * Motion.page SDK - Type Definitions
+ */
+export type { TimelineAction } from '../utils/executeTimelineAction';
+/**
+ * Easing function type
+ */
+export type EasingFunction = (t: number) => number;
+/**
+ * Text split types for character/word/line animations
+ */
+export type SplitType = 'chars' | 'words' | 'lines' | 'chars,words' | 'words,lines' | 'chars,words,lines';
+/**
+ * Configuration for repeat behavior
+ */
+export interface RepeatConfig {
+    times: number;
+    delay?: number;
+    yoyo?: boolean;
+}
+/**
+ * Stagger configuration for multiple elements
+ */
+export interface StaggerVars {
+    each?: number;
+    amount?: number;
+    from?: 'start' | 'center' | 'edges' | 'random' | 'end' | number;
+    grid?: 'auto' | [number, number];
+    axis?: 'x' | 'y';
+    ease?: string;
+}
+/**
+ * Animatable properties
+ */
+export interface AnimationVars {
+    x?: number | string;
+    y?: number | string;
+    z?: number | string;
+    rotate?: number | string;
+    rotateX?: number | string;
+    rotateY?: number | string;
+    rotateZ?: number | string;
+    scale?: number | string;
+    scaleX?: number | string;
+    scaleY?: number | string;
+    scaleZ?: number;
+    skewX?: number | string;
+    skewY?: number | string;
+    perspective?: number | string;
+    opacity?: number;
+    backgroundColor?: string;
+    color?: string;
+    width?: number | string;
+    height?: number | string;
+    top?: number | string;
+    left?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    margin?: number | string;
+    marginTop?: number | string;
+    marginRight?: number | string;
+    marginBottom?: number | string;
+    marginLeft?: number | string;
+    padding?: number | string;
+    paddingTop?: number | string;
+    paddingRight?: number | string;
+    paddingBottom?: number | string;
+    paddingLeft?: number | string;
+    borderRadius?: number | string;
+    fontSize?: number | string;
+    lineHeight?: number | string;
+    letterSpacing?: number | string;
+    zIndex?: number;
+    filter?: string;
+    transformOrigin?: string;
+    backgroundPosition?: string;
+    borderColor?: string;
+    borderTopColor?: string;
+    borderRightColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    outlineColor?: string;
+    textDecorationColor?: string;
+    caretColor?: string;
+    drawSVG?: string | {
+        start?: number;
+        end?: number;
+    };
+    fill?: string;
+    stroke?: string;
+    path?: PathConfig;
+    [key: string]: string | number | boolean | undefined | null | object;
+}
+/**
+ * Path configuration for motion along SVG path
+ */
+export interface PathConfig {
+    /** SVG path - CSS selector, Element, or raw path data (starting with M/m) */
+    target: string | Element;
+    /** Element to align to (CSS selector or Element) */
+    align?: string | Element;
+    /** Origin point on element [x%, y%], default [50, 50] */
+    alignAt?: [number, number];
+    /** Start position on path 0-1 (default: 0) */
+    start?: number;
+    /** End position on path 0-1 (default: 1) */
+    end?: number;
+    /** Auto-rotate element along path tangent */
+    rotate?: boolean;
+}
+/**
+ * Configuration for Fit animations.
+ * Morphs one element's geometry to match another's — captures source and target
+ * element bounding rects at play time and animates the visual delta.
+ */
+export interface FitConfig {
+    /** CSS selector for the target element to morph toward. Measured at animation play time via getBoundingClientRect() */
+    target: string;
+    /** Convert elements to absolute positioning during animation to prevent layout flow disruption. Default: false. Animates CSS left/top/width/height instead of transforms */
+    absolute?: boolean;
+    /** Include scale (scaleX/scaleY transform) changes in the animation. Default: true. Distorts content (text, borders). Use `resize` for undistorted dimension changes. */
+    scale?: boolean;
+    /** Animate actual width/height CSS properties instead of scaleX/scaleY transforms. Default: false. No content distortion but triggers layout reflow. Mutually exclusive with `scale`. */
+    resize?: boolean;
+}
+/**
+ * Animation configuration for Motion(name, target, config)
+ */
+export interface AnimationConfig {
+    from?: AnimationVars;
+    to?: AnimationVars;
+    duration?: number;
+    delay?: number;
+    ease?: string;
+    stagger?: number | StaggerVars;
+    /**
+     * Number of times to repeat the animation.
+     * Use a number for simple repeats, or RepeatConfig for advanced options.
+     * Use -1 for infinite repeat.
+     * @example
+     * repeat: 3
+     * repeat: { times: -1, delay: 0.2, yoyo: true }
+     */
+    repeat?: number | RepeatConfig;
+    split?: SplitType;
+    /**
+     * When true (used with `split`), each split element is wrapped in a parent
+     * with `overflow: hidden` so animated content is clipped to its natural bounds.
+     * Creates a "reveal" effect when animating `y: '100%'` — text slides up from
+     * behind an invisible edge.
+     * @example
+     * Motion('reveal', 'h1', { split: 'lines', mask: true, from: { y: '100%' }, to: { y: 0 }, stagger: 0.1 })
+     */
+    mask?: boolean;
+    /**
+     * Fit animation configuration.
+     * Morphs the source element's geometry toward the target element's geometry.
+     * When set, `from` and `to` are ignored.
+     * @example
+     * Motion('reorder', '.container', { fit: { target: '.item' }, duration: 0.5 })
+     */
+    fit?: FitConfig;
+    /** Axis binding for onMouseMove trigger (x or y) */
+    axis?: 'x' | 'y';
+    /**
+     * Called when the animation starts (first frame with progress > 0).
+     * @example
+     * Motion('fade', '#box', { to: { opacity: 0 }, onStart: () => console.log('started') })
+     */
+    onStart?: () => void;
+    /**
+     * Called every frame with the current progress value (0–1).
+     * @param progress - Current playback progress from 0 (start) to 1 (end)
+     * @example
+     * Motion('fade', '#box', { to: { opacity: 0 }, onUpdate: (p) => console.log(p) })
+     */
+    onUpdate?: (progress: number) => void;
+    /**
+     * Called when the animation completes (after the final repeat, forward direction).
+     * @example
+     * Motion('fade', '#box', { to: { opacity: 0 }, onComplete: () => console.log('done') })
+     */
+    onComplete?: () => void;
+    /**
+     * Called at the end of each repeat cycle.
+     * @param repeatCount - Number of repeats completed so far
+     * @example
+     * Motion('pulse', '#box', { to: { scale: 1.2 }, repeat: { times: 3 }, onRepeat: (n) => console.log('repeat', n) })
+     */
+    onRepeat?: (repeatCount: number) => void;
+    /**
+     * Called when the animation completes in the reverse direction (after the final yoyo repeat).
+     * @example
+     * Motion('pulse', '#box', { to: { scale: 1.2 }, repeat: { times: 1, yoyo: true }, onReverseComplete: () => console.log('reversed') })
+     */
+    onReverseComplete?: () => void;
+}
+/**
+ * Animation entry for Motion(name, [entries])
+ */
+export interface AnimationEntry extends AnimationConfig {
+    target: TargetInput;
+    position?: number | string;
+}
+/**
+ * Plain object target for non-DOM animation
+ */
+export type ObjectTarget = Record<string, number>;
+/**
+ * Valid animation targets
+ */
+export type AnimationTarget = Element | ObjectTarget;
+/**
+ * Input types accepted by Motion()
+ */
+export type TargetInput = string | string[] | Element | NodeList | Element[] | ObjectTarget | ObjectTarget[];
+export interface MarkerConfig {
+    startColor?: string;
+    endColor?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    indent?: number;
+}
+export interface HoverConfig {
+    target?: string | Element;
+    each?: boolean;
+    onLeave?: 'reverse' | 'pause' | 'stop' | 'restart' | 'none';
+    leaveDelay?: number;
+}
+export interface ClickConfig {
+    target?: string | Element;
+    each?: boolean;
+    secondTarget?: string | Element;
+    toggle?: 'reverse' | 'restart' | 'play';
+    preventDefault?: boolean;
+}
+export interface ScrollConfig {
+    target?: string | Element;
+    start?: string;
+    end?: string;
+    scrub?: boolean | number;
+    markers?: boolean | MarkerConfig;
+    scroller?: string | Element;
+    pin?: boolean | string;
+    pinSpacing?: boolean | 'margin' | 'padding';
+    each?: boolean;
+    /** Toggle actions for non-scrub mode: "onEnter onLeave onEnterBack onLeaveBack" */
+    toggleActions?: string;
+    /**
+     * Snap scroll progress to fixed points.
+     * - `number`: snap to evenly-spaced increments (e.g., 0.25 → 0, 0.25, 0.5, 0.75, 1)
+     * - `number[]`: snap to specific progress values (e.g., [0, 0.33, 0.66, 1])
+     * - `function`: custom snap function receiving raw progress, returning snapped progress
+     *
+     * @example Horizontal scroll with 4 sections
+     * snap: 1 / (document.querySelectorAll('.section').length - 1)
+     */
+    snap?: number | number[] | ((progress: number) => number);
+}
+export interface MouseMoveConfig {
+    type?: 'distance' | 'axis';
+    target?: string | Element;
+    each?: boolean;
+    smooth?: number;
+    startProgress?: number;
+    leaveProgress?: number;
+}
+export interface PageExitConfig {
+    /** Link selection mode: 'all' (default), 'include', or 'exclude' */
+    mode?: 'all' | 'include' | 'exclude';
+    /** CSS selector(s) for links — required for 'include'/'exclude' modes */
+    selectors?: string;
+    /** Href patterns to skip (never intercept) */
+    skipHref?: ('anchor' | 'javascript' | 'mailto')[];
+}
+export type GestureInputType = 'pointer' | 'touch' | 'wheel' | 'scroll';
+export type GestureEvent = 'Up' | 'Down' | 'Left' | 'Right' | 'UpComplete' | 'DownComplete' | 'LeftComplete' | 'RightComplete' | 'Change' | 'ChangeX' | 'ChangeY' | 'ToggleX' | 'ToggleY' | 'Press' | 'Release' | 'PressInit' | 'Drag' | 'DragEnd' | 'Stop' | 'Hover' | 'HoverEnd';
+export type GestureAction = 'play' | 'pause' | 'reverse' | 'restart' | 'toggle' | 'reset' | 'complete' | 'kill' | 'playReverse' | 'progressUp' | 'progressDown' | 'playNext' | 'playPrevious';
+export interface GestureConfig {
+    target?: string | Element;
+    types: GestureInputType[];
+    events: Partial<Record<GestureEvent, GestureAction>>;
+    tolerance?: number;
+    dragMinimum?: number;
+    wheelSpeed?: number;
+    scrollSpeed?: number;
+    preventDefault?: boolean;
+    lockAxis?: boolean;
+    each?: boolean;
+    stopDelay?: number;
+    animationStep?: number | Partial<Record<GestureEvent, number>>;
+    smooth?: number;
+}
+/**
+ * Extended GestureConfig with internal fields used by GestureTrigger.
+ * @internal - Not part of the public API. Used by the builder when setting up each-mode animations.
+ */
+export interface GestureConfigInternal extends GestureConfig {
+    /** @internal */
+    _siblings?: unknown[];
+    /** @internal */
+    _index?: number;
+}
+/**
+ * CSS properties as object (like GSAP/React style)
+ * duration and ease are extracted for transitions
+ */
+export interface CursorStateVars {
+    /** CSS selectors that trigger this state (hover only) */
+    targets?: string[];
+    /** Transition duration in seconds. Default: 0.15 */
+    duration?: number;
+    /** Easing function. Default: 'power3.inOut' */
+    ease?: string;
+    /** Whether state is enabled. Default: true */
+    enabled?: boolean;
+    /** Additional CSS properties to apply (e.g., width, height, backgroundColor) */
+    [key: string]: string | number | string[] | boolean | undefined;
+}
+/**
+ * Squeeze effect configuration
+ */
+export interface CursorSqueezeConfig {
+    /** Minimum scale when moving fast. Default: 0.55 */
+    min?: number;
+    /** Maximum scale when stationary. Default: 1.2 */
+    max?: number;
+    /** Velocity sensitivity multiplier. Default: 150 */
+    multiplier?: number;
+}
+/**
+ * Main cursor configuration
+ */
+export interface CursorConfig {
+    /** Target element selector or element for the cursor container */
+    target?: string | Element;
+    /** Cursor type. Default: 'basic' */
+    type?: 'basic' | 'text' | 'media';
+    /** Smoothing factor (0 = most delay/smoothing, 1 = instant). Default: 0.25 */
+    smooth?: number;
+    /** Enable velocity-based squeeze effect */
+    squeeze?: boolean | CursorSqueezeConfig;
+    /** Hide native browser cursor. Default: false */
+    hideNative?: boolean;
+    /** Default state configuration (required) */
+    default: CursorStateVars;
+    /** Hover state configuration */
+    hover?: CursorStateVars;
+    /** Click/pressed state configuration */
+    click?: CursorStateVars;
+    /** Text element styles (for type: 'text') */
+    text?: Record<string, string | number>;
+    /** Media element styles (for type: 'media') */
+    media?: Record<string, string | number>;
+}

package/dist/types/public.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Public types for SDK consumers
+ *
+ * This file re-exports only the public types intended for SDK users.
+ * Internal types are co-located with their implementations.
+ */
+export type { EasingFunction, SplitType, RepeatConfig, StaggerVars, AnimationVars, PathConfig, FitConfig, AnimationConfig, AnimationEntry, ObjectTarget, AnimationTarget, TargetInput, MarkerConfig, HoverConfig, ClickConfig, ScrollConfig, MouseMoveConfig, PageExitConfig, GestureInputType, GestureEvent, GestureAction, GestureConfig, CursorStateVars, CursorSqueezeConfig, CursorConfig, } from './index';

package/dist/utils/ColorParser.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ColorParser - Parse any color format to RGBA
+ *
+ * Supports:
+ * - Hex: #ff0000, #f00, #ff0000ff, #f00f
+ * - RGB/RGBA: rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
+ * - HSL/HSLA: hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5)
+ * - Named colors: red, coral, transparent
+ * - CSS variables: var(--color)
+ */
+/**
+ * Parse any color format to RGBA Float32Array
+ * Returns [R, G, B, A] where RGB is 0-255 and A is 0-1
+ */
+export declare function parseColor(color: string, element?: Element): Float32Array | null;
+/**
+ * Convert RGBA Float32Array to CSS rgba() string
+ */
+export declare function rgbaToString(rgba: Float32Array): string;
+/**
+ * Get current color value from element's computed style
+ */
+export declare function getCurrentColor(element: Element, property: string): Float32Array;

package/dist/utils/DrawSVGParser.d.ts

@@ -0,0 +1,62 @@
+/**
+ * DrawSVGParser - Parse and animate SVG stroke drawing
+ *
+ * Handles:
+ * - Percentage values: "0% 100%", "20% 80%"
+ * - Pixel values: "100px 500px"
+ * - Object format: { start: 0, end: 100 }
+ * - Single values: "50%" (draws from 0 to 50%)
+ *
+ * Uses stroke-dasharray and stroke-dashoffset for performant rendering.
+ */
+/**
+ * Parsed DrawSVG values (normalized to 0-1 range)
+ */
+export interface ParsedDrawSVG {
+    start: number;
+    end: number;
+}
+/**
+ * DrawSVG input value types
+ */
+type DrawSVGValue = string | {
+    start?: number;
+    end?: number;
+};
+/**
+ * Get the total length of an SVG element's stroke path.
+ * Cached per element for performance.
+ */
+export declare function getPathLength(element: Element): number;
+/**
+ * Clear cached path length for an element.
+ * Call when SVG path data changes.
+ */
+export declare function clearPathLengthCache(element: Element): void;
+/**
+ * Parse a DrawSVG value string or object into normalized 0-1 values.
+ *
+ * Supported formats:
+ * - "0% 100%" - percentage range
+ * - "100px 500px" - pixel range (requires element for length)
+ * - "50%" - single percentage (0 to value)
+ * - "50" - single number treated as percentage
+ * - { start: 0, end: 100 } - object with percentages
+ */
+export declare function parseDrawSVG(value: DrawSVGValue, element?: Element): ParsedDrawSVG | null;
+/**
+ * Get the current DrawSVG state from an element's computed style.
+ * Parses existing stroke-dasharray and stroke-dashoffset.
+ */
+export declare function getCurrentDrawSVG(element: Element): ParsedDrawSVG;
+/**
+ * Apply DrawSVG values to an element's style.
+ * Sets stroke-dasharray and stroke-dashoffset for the draw effect.
+ *
+ * @param element - Target SVG element
+ * @param start - Start position (0-1)
+ * @param end - End position (0-1)
+ * @param length - Pre-calculated path length
+ */
+export declare function applyDrawSVG(element: Element, start: number, end: number, length: number): void;
+export {};

package/dist/utils/FilterParser.d.ts

@@ -0,0 +1,49 @@
+/**
+ * FilterParser - Parse CSS filter strings for animation
+ *
+ * Supports:
+ * - blur(px)
+ * - brightness(ratio)
+ * - contrast(ratio)
+ * - saturate(ratio)
+ * - grayscale(ratio or %)
+ * - sepia(ratio or %)
+ * - hue-rotate(deg)
+ * - invert(ratio or %)
+ * - opacity(ratio or %)
+ */
+/**
+ * Parsed filter function with name, value, and unit
+ */
+export interface ParsedFilterFunction {
+    name: string;
+    value: number;
+    unit: string;
+}
+/**
+ * Parse a complete filter string into an array of filter functions
+ * Example: "blur(10px) brightness(1.5)" -> [{name: 'blur', value: 10, unit: 'px'}, ...]
+ */
+export declare function parseFilter(filter: string): ParsedFilterFunction[] | null;
+/**
+ * Convert parsed filter functions back to CSS filter string
+ */
+export declare function filterToString(filters: ParsedFilterFunction[]): string;
+/**
+ * Get current filter value from element's computed style
+ */
+export declare function getCurrentFilter(element: Element): ParsedFilterFunction[];
+/**
+ * Merge two filter arrays, ensuring all functions from both are present
+ * Missing functions get their default values
+ */
+export declare function mergeFilterArrays(start: ParsedFilterFunction[], end: ParsedFilterFunction[]): {
+    start: ParsedFilterFunction[];
+    end: ParsedFilterFunction[];
+};
+/**
+ * Interpolate between two filter arrays at given progress.
+ * Reuses a module-level buffer to avoid allocating a new array every frame.
+ * NOTE: The returned array is reused on the next call — consume it immediately.
+ */
+export declare function interpolateFilters(start: ParsedFilterFunction[], end: ParsedFilterFunction[], progress: number): ParsedFilterFunction[];

package/dist/utils/MotionUtils.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Motion.utils — GSAP-compatible utility functions
+ *
+ * Drop-in replacements for common gsap.utils.* helpers.
+ * Enables migration from GSAP custom code to the Motion SDK.
+ *
+ * @example Migration from GSAP
+ * // Before: gsap.utils.toArray(".section").length
+ * // After:  Motion.utils.toArray(".section").length
+ */
+/**
+ * Convert a selector, NodeList, or value into a flat Array of Elements.
+ * Drop-in replacement for gsap.utils.toArray().
+ *
+ * @param target - CSS selector string, NodeList, HTMLCollection, Element, or array
+ * @param scope  - Optional parent element to scope selector queries
+ * @returns Flat array of matched elements
+ *
+ * @example
+ * Motion.utils.toArray(".h-scroll-section")          // all matching elements
+ * Motion.utils.toArray(".item", containerEl)          // scoped to container
+ * Motion.utils.toArray(document.querySelectorAll("p")) // NodeList → Array
+ */
+export declare function toArray<T extends Element = Element>(target: string | NodeList | HTMLCollection | Element | T[] | ArrayLike<T>, scope?: Element | Document): T[];
+/**
+ * Clamp a value between min and max.
+ * Drop-in replacement for gsap.utils.clamp().
+ *
+ * Can be called with 3 args or curried with 2:
+ * - `clamp(0, 100, 150)` → `100`
+ * - `const c = clamp(0, 1); c(1.5)` → `1`
+ *
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @param value - Value to clamp (optional — returns curried function if omitted)
+ */
+export declare function clamp(min: number, max: number, value: number): number;
+export declare function clamp(min: number, max: number): (value: number) => number;
+/**
+ * Generate a random number between min and max (inclusive).
+ * Drop-in replacement for gsap.utils.random().
+ *
+ * @param min - Minimum value
+ * @param max - Maximum value
+ * @param snapIncrement - Optional increment to snap to (e.g., 5 → multiples of 5)
+ * @returns Random number in the given range
+ *
+ * @example
+ * Motion.utils.random(0, 100)       // 0–100 (float)
+ * Motion.utils.random(0, 100, 10)   // 0, 10, 20, ... 100
+ * Motion.utils.random(-1, 1)        // -1 to 1
+ */
+export declare function random(min: number, max: number, snapIncrement?: number): number;
+/**
+ * Snap a number to the nearest increment.
+ * Drop-in replacement for gsap.utils.snap().
+ *
+ * @param snapTo - Increment value or array of values to snap to
+ * @param value  - Value to snap (optional — returns curried function if omitted)
+ *
+ * @example
+ * Motion.utils.snap(5, 13)        // 15
+ * Motion.utils.snap([0, 25, 50, 100], 30)  // 25
+ * const s = Motion.utils.snap(10); s(27)   // 30
+ */
+export declare function snap(snapTo: number | number[], value: number): number;
+export declare function snap(snapTo: number | number[]): (value: number) => number;
+/**
+ * Linear interpolation between two values.
+ * Drop-in replacement for gsap.utils.interpolate() (simple 2-value case).
+ *
+ * @param start - Start value
+ * @param end   - End value
+ * @param progress - Interpolation factor (0–1)
+ * @returns Interpolated value
+ *
+ * @example
+ * Motion.utils.interpolate(0, 100, 0.5)  // 50
+ */
+export declare function interpolate(start: number, end: number, progress: number): number;
+/**
+ * Map a value from one range to another.
+ * Drop-in replacement for gsap.utils.mapRange().
+ *
+ * @param inMin  - Input range minimum
+ * @param inMax  - Input range maximum
+ * @param outMin - Output range minimum
+ * @param outMax - Output range maximum
+ * @param value  - Value to map (optional — returns curried function if omitted)
+ *
+ * @example
+ * Motion.utils.mapRange(0, 100, 0, 1, 50)  // 0.5
+ * const map = Motion.utils.mapRange(0, 1, -100, 100); map(0.75) // 50
+ */
+export declare function mapRange(inMin: number, inMax: number, outMin: number, outMax: number, value: number): number;
+export declare function mapRange(inMin: number, inMax: number, outMin: number, outMax: number): (value: number) => number;
+/**
+ * Normalize a value from a range to 0–1.
+ * Drop-in replacement for gsap.utils.normalize().
+ *
+ * @param min   - Range minimum
+ * @param max   - Range maximum
+ * @param value - Value to normalize (optional — returns curried function if omitted)
+ *
+ * @example
+ * Motion.utils.normalize(0, 100, 25)  // 0.25
+ */
+export declare function normalize(min: number, max: number, value: number): number;
+export declare function normalize(min: number, max: number): (value: number) => number;
+/**
+ * Wrap a value within a range (modular arithmetic).
+ * Drop-in replacement for gsap.utils.wrap().
+ *
+ * @param min   - Range minimum
+ * @param max   - Range maximum
+ * @param value - Value to wrap (optional — returns curried function if omitted)
+ *
+ * @example
+ * Motion.utils.wrap(0, 100, 150)  // 50
+ * Motion.utils.wrap(0, 360, -90)  // 270
+ */
+export declare function wrap(min: number, max: number, value: number): number;
+export declare function wrap(min: number, max: number): (value: number) => number;
+/**
+ * The complete utils namespace, attached to Motion.utils
+ */
+export declare const MotionUtils: {
+    readonly toArray: typeof toArray;
+    readonly clamp: typeof clamp;
+    readonly random: typeof random;
+    readonly snap: typeof snap;
+    readonly interpolate: typeof interpolate;
+    readonly mapRange: typeof mapRange;
+    readonly normalize: typeof normalize;
+    readonly wrap: typeof wrap;
+};