@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/carousel/engine/DragHandler.js

@@ -0,0 +1,141 @@
+import { EventStore } from "./EventStore.js";
+import { Limit } from "../../motion/Limit.js";
+import { DragRelease } from "../../motion/DragRelease.js";
+import { deltaAbs, isBoolean, isMouseEvent, mathAbs, mathSign } from "./utils.js";
+export function DragHandler(axis, rootNode, ownerDocument, ownerWindow, target, dragTracker, location, animation, scrollTo, scrollBody, scrollTarget, index, eventHandler, percentOfView, dragFree, dragThreshold, skipSnaps, baseFriction, watchDrag) {
+    const { cross: crossAxis, direction } = axis;
+    const focusNodes = ["INPUT", "SELECT", "TEXTAREA"];
+    const nonPassiveEvent = { passive: false };
+    const initEvents = EventStore();
+    const dragEvents = EventStore();
+    const goToNextThreshold = Limit(50, 225).constrain(percentOfView.measure(20));
+    const release = DragRelease(dragFree, baseFriction);
+    let isMoving = false;
+    let startScroll = 0;
+    let startCross = 0;
+    let pointerIsDown = false;
+    let preventScroll = false;
+    let preventClick = false;
+    let isMouse = false;
+    let downListener = null;
+    function init(emblaApi) {
+        if (!watchDrag)
+            return;
+        function downIfAllowed(evt) {
+            if (isBoolean(watchDrag) || watchDrag(emblaApi, evt))
+                down(evt);
+        }
+        downListener = downIfAllowed;
+        const node = rootNode;
+        initEvents
+            .add(node, "dragstart", (evt) => evt.preventDefault(), nonPassiveEvent)
+            .add(node, "touchmove", () => undefined, nonPassiveEvent)
+            .add(node, "touchend", () => undefined)
+            .add(node, "touchstart", downIfAllowed)
+            .add(node, "mousedown", downIfAllowed)
+            .add(node, "touchcancel", up)
+            .add(node, "contextmenu", up)
+            .add(node, "click", click, true);
+    }
+    function destroy() {
+        downListener = null;
+        initEvents.clear();
+        dragEvents.clear();
+    }
+    function addDragEvents() {
+        const node = isMouse ? ownerDocument : rootNode;
+        dragEvents.add(node, "touchmove", move, nonPassiveEvent).add(node, "touchend", up).add(node, "mousemove", move, nonPassiveEvent).add(node, "mouseup", up);
+    }
+    function isFocusNode(node) {
+        const nodeName = node.nodeName || "";
+        return focusNodes.includes(nodeName);
+    }
+    function forceBoost() {
+        return release.forceBoost(isMouse);
+    }
+    function allowedForce(force, targetChanged) {
+        const next = index.add(mathSign(force) * -1);
+        const baseForce = scrollTarget.byDistance(force, !dragFree).distance;
+        if (dragFree || mathAbs(force) < goToNextThreshold)
+            return baseForce;
+        if (skipSnaps && targetChanged)
+            return baseForce * 0.5;
+        return scrollTarget.byIndex(next.get(), 0).distance;
+    }
+    function down(evt) {
+        const isMouseEvt = isMouseEvent(evt, ownerWindow);
+        isMouse = isMouseEvt;
+        preventClick = dragFree && isMouseEvt && !evt.buttons && isMoving;
+        isMoving = deltaAbs(target.get(), location.get()) >= 2;
+        if (isMouseEvt && evt.button !== 0)
+            return;
+        if (isFocusNode(evt.target))
+            return;
+        pointerIsDown = true;
+        dragTracker.pointerDown(evt);
+        scrollBody.useFriction(0).useDuration(0);
+        target.set(location);
+        addDragEvents();
+        startScroll = dragTracker.readPoint(evt);
+        startCross = dragTracker.readPoint(evt, crossAxis);
+        eventHandler.emit("pointerDown");
+    }
+    function move(evt) {
+        const isTouchEvt = !isMouseEvent(evt, ownerWindow);
+        if (isTouchEvt && evt.touches.length >= 2)
+            return up(evt);
+        const lastScroll = dragTracker.readPoint(evt);
+        const lastCross = dragTracker.readPoint(evt, crossAxis);
+        const diffScroll = deltaAbs(lastScroll, startScroll);
+        const diffCross = deltaAbs(lastCross, startCross);
+        if (!preventScroll && !isMouse) {
+            if (!evt.cancelable)
+                return up(evt);
+            preventScroll = diffScroll > diffCross;
+            if (!preventScroll)
+                return up(evt);
+        }
+        const diff = dragTracker.pointerMove(evt);
+        if (diffScroll > dragThreshold)
+            preventClick = true;
+        scrollBody.useFriction(0.3).useDuration(0.75);
+        animation.start();
+        target.add(direction(diff));
+        evt.preventDefault();
+    }
+    function up(evt) {
+        const currentLocation = scrollTarget.byDistance(0, false);
+        const targetChanged = currentLocation.index !== index.get();
+        const rawForce = dragTracker.pointerUp(evt) * forceBoost();
+        const force = allowedForce(direction(rawForce), targetChanged);
+        const { duration: speed, friction } = release.settle(rawForce, force);
+        preventScroll = false;
+        pointerIsDown = false;
+        dragEvents.clear();
+        scrollBody.useDuration(speed).useFriction(friction);
+        scrollTo.distance(force, !dragFree);
+        isMouse = false;
+        eventHandler.emit("pointerUp");
+    }
+    function click(evt) {
+        if (preventClick) {
+            evt.stopPropagation();
+            evt.preventDefault();
+            preventClick = false;
+        }
+    }
+    function pointerDown() {
+        return pointerIsDown;
+    }
+    function pointerDownEvent(evt) {
+        if (downListener)
+            downListener(evt);
+    }
+    const self = {
+        init,
+        destroy,
+        pointerDown,
+        pointerDownEvent,
+    };
+    return self;
+}

package/carousel/engine/DragTracker.d.ts

@@ -0,0 +1,10 @@
+import type { AxisOptionType, AxisType } from "./Axis.js";
+import { type WindowType } from "./utils.js";
+export type PointerEventType = TouchEvent | MouseEvent;
+export type DragTrackerType = {
+    pointerDown: (evt: PointerEventType) => number;
+    pointerMove: (evt: PointerEventType) => number;
+    pointerUp: (evt: PointerEventType) => number;
+    readPoint: (evt: PointerEventType, evtAxis?: AxisOptionType) => number;
+};
+export declare function DragTracker(axis: AxisType, ownerWindow: WindowType): DragTrackerType;

package/carousel/engine/DragTracker.js

@@ -0,0 +1,29 @@
+import { isMouseEvent } from "./utils.js";
+import { VelocityTracker } from "../../motion/DragTracker.js";
+export function DragTracker(axis, ownerWindow) {
+    const tracker = VelocityTracker();
+    function readTime(evt) {
+        return evt.timeStamp;
+    }
+    function readPoint(evt, evtAxis) {
+        const property = evtAxis || axis.scroll;
+        const coord = `client${property === "x" ? "X" : "Y"}`;
+        return (isMouseEvent(evt, ownerWindow) ? evt : evt.touches[0])[coord];
+    }
+    function pointerDown(evt) {
+        return tracker.pointerDown(readPoint(evt), readTime(evt));
+    }
+    function pointerMove(evt) {
+        return tracker.pointerMove(readPoint(evt), readTime(evt));
+    }
+    function pointerUp(evt) {
+        return tracker.pointerUp(readTime(evt));
+    }
+    const self = {
+        pointerDown,
+        pointerMove,
+        pointerUp,
+        readPoint,
+    };
+    return self;
+}

package/carousel/engine/EmblaCarousel.d.ts

@@ -0,0 +1,32 @@
+import { type EngineType } from "./Engine.js";
+import { type EventHandlerType } from "./EventHandler.js";
+import { type EmblaOptionsType } from "./Options.js";
+import type { EmblaPluginsType, EmblaPluginType } from "./Plugins.js";
+export type EmblaCarouselType = {
+    canScrollNext: () => boolean;
+    canScrollPrev: () => boolean;
+    containerNode: () => HTMLElement;
+    internalEngine: () => EngineType;
+    destroy: () => void;
+    off: EventHandlerType["off"];
+    on: EventHandlerType["on"];
+    emit: EventHandlerType["emit"];
+    plugins: () => EmblaPluginsType;
+    previousScrollSnap: () => number;
+    reInit: (options?: EmblaOptionsType, plugins?: EmblaPluginType[]) => void;
+    rootNode: () => HTMLElement;
+    scrollNext: (jump?: boolean) => void;
+    scrollPrev: (jump?: boolean) => void;
+    scrollProgress: () => number;
+    scrollSnapList: () => number[];
+    scrollTo: (index: number, jump?: boolean) => void;
+    selectedScrollSnap: () => number;
+    slideNodes: () => HTMLElement[];
+    slidesInView: () => number[];
+    slidesNotInView: () => number[];
+};
+declare function EmblaCarousel(root: HTMLElement, userOptions?: EmblaOptionsType, userPlugins?: EmblaPluginType[]): EmblaCarouselType;
+declare namespace EmblaCarousel {
+    let globalOptions: EmblaOptionsType | undefined;
+}
+export default EmblaCarousel;

package/carousel/engine/EmblaCarousel.js

@@ -0,0 +1,177 @@
+// Ported from embla-carousel (packages/embla-carousel/src/components/EmblaCarousel.ts, v8.6.0), MIT, © David Jerleke.
+// Rivet: TypeScript module specifiers (`.ts`, `import type`), `as` casts (erasable syntax), formatting; otherwise verbatim.
+import { Engine } from "./Engine.js";
+import { EventStore } from "./EventStore.js";
+import { EventHandler } from "./EventHandler.js";
+import { defaultOptions } from "./Options.js";
+import { OptionsHandler } from "./OptionsHandler.js";
+import { PluginsHandler } from "./PluginsHandler.js";
+import { isString } from "./utils.js";
+function EmblaCarousel(root, userOptions, userPlugins) {
+    const ownerDocument = root.ownerDocument;
+    const ownerWindow = ownerDocument.defaultView;
+    const optionsHandler = OptionsHandler(ownerWindow);
+    const pluginsHandler = PluginsHandler(optionsHandler);
+    const mediaHandlers = EventStore();
+    const eventHandler = EventHandler();
+    const { mergeOptions, optionsAtMedia, optionsMediaQueries } = optionsHandler;
+    const { on, off, emit } = eventHandler;
+    const reInit = reActivate;
+    let destroyed = false;
+    let engine;
+    let optionsBase = mergeOptions(defaultOptions, EmblaCarousel.globalOptions);
+    let options = mergeOptions(optionsBase);
+    let pluginList = [];
+    let pluginApis;
+    let container;
+    let slides;
+    function storeElements() {
+        const { container: userContainer, slides: userSlides } = options;
+        const customContainer = isString(userContainer) ? root.querySelector(userContainer) : userContainer;
+        container = (customContainer || root.children[0]);
+        const customSlides = isString(userSlides) ? container.querySelectorAll(userSlides) : userSlides;
+        slides = [].slice.call(customSlides || container.children);
+    }
+    function createEngine(options) {
+        const engine = Engine(root, container, slides, ownerDocument, ownerWindow, options, eventHandler);
+        if (options.loop && !engine.slideLooper.canLoop()) {
+            const optionsWithoutLoop = Object.assign({}, options, { loop: false });
+            return createEngine(optionsWithoutLoop);
+        }
+        return engine;
+    }
+    function activate(withOptions, withPlugins) {
+        if (destroyed)
+            return;
+        optionsBase = mergeOptions(optionsBase, withOptions);
+        options = optionsAtMedia(optionsBase);
+        pluginList = withPlugins || pluginList;
+        storeElements();
+        engine = createEngine(options);
+        optionsMediaQueries([optionsBase, ...pluginList.map(({ options }) => options)]).forEach((query) => mediaHandlers.add(query, "change", reActivate));
+        if (!options.active)
+            return;
+        engine.translate.to(engine.location.get());
+        engine.animation.init();
+        engine.slidesInView.init();
+        engine.slideFocus.init(self);
+        engine.eventHandler.init(self);
+        engine.resizeHandler.init(self);
+        engine.slidesHandler.init(self);
+        if (engine.options.loop)
+            engine.slideLooper.loop();
+        if (container.offsetParent && slides.length)
+            engine.dragHandler.init(self);
+        pluginApis = pluginsHandler.init(self, pluginList);
+    }
+    function reActivate(withOptions, withPlugins) {
+        const startIndex = selectedScrollSnap();
+        deActivate();
+        activate(mergeOptions({ startIndex }, withOptions), withPlugins);
+        eventHandler.emit("reInit");
+    }
+    function deActivate() {
+        engine.dragHandler.destroy();
+        engine.eventStore.clear();
+        engine.translate.clear();
+        engine.slideLooper.clear();
+        engine.resizeHandler.destroy();
+        engine.slidesHandler.destroy();
+        engine.slidesInView.destroy();
+        engine.animation.destroy();
+        pluginsHandler.destroy();
+        mediaHandlers.clear();
+    }
+    function destroy() {
+        if (destroyed)
+            return;
+        destroyed = true;
+        mediaHandlers.clear();
+        deActivate();
+        eventHandler.emit("destroy");
+        eventHandler.clear();
+    }
+    function scrollTo(index, jump, direction) {
+        if (!options.active || destroyed)
+            return;
+        engine.scrollBody.useBaseFriction().useDuration(jump === true ? 0 : options.duration);
+        engine.scrollTo.index(index, direction || 0);
+    }
+    function scrollNext(jump) {
+        const next = engine.index.add(1).get();
+        scrollTo(next, jump, -1);
+    }
+    function scrollPrev(jump) {
+        const prev = engine.index.add(-1).get();
+        scrollTo(prev, jump, 1);
+    }
+    function canScrollNext() {
+        const next = engine.index.add(1).get();
+        return next !== selectedScrollSnap();
+    }
+    function canScrollPrev() {
+        const prev = engine.index.add(-1).get();
+        return prev !== selectedScrollSnap();
+    }
+    function scrollSnapList() {
+        return engine.scrollSnapList;
+    }
+    function scrollProgress() {
+        return engine.scrollProgress.get(engine.offsetLocation.get());
+    }
+    function selectedScrollSnap() {
+        return engine.index.get();
+    }
+    function previousScrollSnap() {
+        return engine.indexPrevious.get();
+    }
+    function slidesInView() {
+        return engine.slidesInView.get();
+    }
+    function slidesNotInView() {
+        return engine.slidesInView.get(false);
+    }
+    function plugins() {
+        return pluginApis;
+    }
+    function internalEngine() {
+        return engine;
+    }
+    function rootNode() {
+        return root;
+    }
+    function containerNode() {
+        return container;
+    }
+    function slideNodes() {
+        return slides;
+    }
+    const self = {
+        canScrollNext,
+        canScrollPrev,
+        containerNode,
+        internalEngine,
+        destroy,
+        off,
+        on,
+        emit,
+        plugins,
+        previousScrollSnap,
+        reInit,
+        rootNode,
+        scrollNext,
+        scrollPrev,
+        scrollProgress,
+        scrollSnapList,
+        scrollTo,
+        selectedScrollSnap,
+        slideNodes,
+        slidesInView,
+        slidesNotInView,
+    };
+    activate(userOptions, userPlugins);
+    setTimeout(() => eventHandler.emit("init"), 0);
+    return self;
+}
+EmblaCarousel.globalOptions = undefined;
+export default EmblaCarousel;

package/carousel/engine/Engine.d.ts

@@ -0,0 +1,64 @@
+import { type AnimationsType } from "./Animations.js";
+import { type AxisType } from "./Axis.js";
+import { type CounterType } from "./Counter.js";
+import { type DragHandlerType } from "./DragHandler.js";
+import type { EventHandlerType } from "./EventHandler.js";
+import { type EventStoreType } from "./EventStore.js";
+import type { LimitType } from "../../motion/Limit.js";
+import { type NodeRectType } from "./NodeRects.js";
+import type { OptionsType } from "./Options.js";
+import { type PercentOfViewType } from "./PercentOfView.js";
+import { type ResizeHandlerType } from "./ResizeHandler.js";
+import { type ScrollBodyType } from "../../motion/ScrollBody.js";
+import { type ScrollBoundsType } from "./ScrollBounds.js";
+import { type ScrollLooperType } from "./ScrollLooper.js";
+import { type ScrollProgressType } from "./ScrollProgress.js";
+import { type SlideRegistryType } from "./SlideRegistry.js";
+import { type ScrollTargetType } from "./ScrollTarget.js";
+import { type ScrollToType } from "./ScrollTo.js";
+import { type SlideFocusType } from "./SlideFocus.js";
+import { type SlideLooperType } from "./SlideLooper.js";
+import { type SlidesHandlerType } from "./SlidesHandler.js";
+import { type SlidesInViewType } from "./SlidesInView.js";
+import { type SlidesToScrollType } from "./SlidesToScroll.js";
+import { type TranslateType } from "./Translate.js";
+import { type WindowType } from "./utils.js";
+import { type Vector1DType } from "../../motion/Vector1d.js";
+export type EngineType = {
+    ownerDocument: Document;
+    ownerWindow: WindowType;
+    eventHandler: EventHandlerType;
+    axis: AxisType;
+    animation: AnimationsType;
+    scrollBounds: ScrollBoundsType;
+    scrollLooper: ScrollLooperType;
+    scrollProgress: ScrollProgressType;
+    index: CounterType;
+    indexPrevious: CounterType;
+    limit: LimitType;
+    location: Vector1DType;
+    offsetLocation: Vector1DType;
+    previousLocation: Vector1DType;
+    options: OptionsType;
+    percentOfView: PercentOfViewType;
+    scrollBody: ScrollBodyType;
+    dragHandler: DragHandlerType;
+    eventStore: EventStoreType;
+    slideLooper: SlideLooperType;
+    slidesInView: SlidesInViewType;
+    slidesToScroll: SlidesToScrollType;
+    target: Vector1DType;
+    translate: TranslateType;
+    resizeHandler: ResizeHandlerType;
+    slidesHandler: SlidesHandlerType;
+    scrollTo: ScrollToType;
+    scrollTarget: ScrollTargetType;
+    scrollSnapList: number[];
+    scrollSnaps: number[];
+    slideIndexes: number[];
+    slideFocus: SlideFocusType;
+    slideRegistry: SlideRegistryType["slideRegistry"];
+    containerRect: NodeRectType;
+    slideRects: NodeRectType[];
+};
+export declare function Engine(root: HTMLElement, container: HTMLElement, slides: HTMLElement[], ownerDocument: Document, ownerWindow: WindowType, options: OptionsType, eventHandler: EventHandlerType): EngineType;

package/carousel/engine/Engine.js

@@ -0,0 +1,137 @@
+// Ported from embla-carousel (packages/embla-carousel/src/components/Engine.ts, v8.6.0), MIT, © David Jerleke.
+// Rivet: TypeScript module specifiers (`.ts`, `import type`), `as` casts (erasable syntax), formatting; otherwise verbatim.
+import { Alignment } from "./Alignment.js";
+import { Animations } from "./Animations.js";
+import { Axis } from "./Axis.js";
+import { Counter } from "./Counter.js";
+import { DragHandler } from "./DragHandler.js";
+import { DragTracker } from "./DragTracker.js";
+import { EventStore } from "./EventStore.js";
+import { NodeRects } from "./NodeRects.js";
+import { PercentOfView } from "./PercentOfView.js";
+import { ResizeHandler } from "./ResizeHandler.js";
+import { ScrollBody } from "../../motion/ScrollBody.js";
+import { ScrollBounds } from "./ScrollBounds.js";
+import { ScrollContain } from "./ScrollContain.js";
+import { ScrollLimit } from "./ScrollLimit.js";
+import { ScrollLooper } from "./ScrollLooper.js";
+import { ScrollProgress } from "./ScrollProgress.js";
+import { ScrollSnaps } from "./ScrollSnaps.js";
+import { SlideRegistry } from "./SlideRegistry.js";
+import { ScrollTarget } from "./ScrollTarget.js";
+import { ScrollTo } from "./ScrollTo.js";
+import { SlideFocus } from "./SlideFocus.js";
+import { SlideLooper } from "./SlideLooper.js";
+import { SlidesHandler } from "./SlidesHandler.js";
+import { SlidesInView } from "./SlidesInView.js";
+import { SlideSizes } from "./SlideSizes.js";
+import { SlidesToScroll } from "./SlidesToScroll.js";
+import { Translate } from "./Translate.js";
+import { arrayKeys, arrayLast, arrayLastIndex } from "./utils.js";
+import { Vector1D } from "../../motion/Vector1d.js";
+export function Engine(root, container, slides, ownerDocument, ownerWindow, options, eventHandler) {
+    // Options
+    const { align, axis: scrollAxis, direction, startIndex, loop, duration, dragFree, dragThreshold, inViewThreshold, slidesToScroll: groupSlides, skipSnaps, containScroll, watchResize, watchSlides, watchDrag, watchFocus, } = options;
+    // Measurements
+    const pixelTolerance = 2;
+    const nodeRects = NodeRects();
+    const containerRect = nodeRects.measure(container);
+    const slideRects = slides.map(nodeRects.measure);
+    const axis = Axis(scrollAxis, direction);
+    const viewSize = axis.measureSize(containerRect);
+    const percentOfView = PercentOfView(viewSize);
+    const alignment = Alignment(align, viewSize);
+    const containSnaps = !loop && !!containScroll;
+    const readEdgeGap = loop || !!containScroll;
+    const { slideSizes, slideSizesWithGaps, startGap, endGap } = SlideSizes(axis, containerRect, slideRects, slides, readEdgeGap, ownerWindow);
+    const slidesToScroll = SlidesToScroll(axis, viewSize, groupSlides, loop, containerRect, slideRects, startGap, endGap, pixelTolerance);
+    const { snaps, snapsAligned } = ScrollSnaps(axis, alignment, containerRect, slideRects, slidesToScroll);
+    const contentSize = -arrayLast(snaps) + arrayLast(slideSizesWithGaps);
+    const { snapsContained, scrollContainLimit } = ScrollContain(viewSize, contentSize, snapsAligned, containScroll, pixelTolerance);
+    const scrollSnaps = containSnaps ? snapsContained : snapsAligned;
+    const { limit } = ScrollLimit(contentSize, scrollSnaps, loop);
+    // Indexes
+    const index = Counter(arrayLastIndex(scrollSnaps), startIndex, loop);
+    const indexPrevious = index.clone();
+    const slideIndexes = arrayKeys(slides);
+    // Animation
+    const update = ({ dragHandler, scrollBody, scrollBounds, options: { loop } }) => {
+        if (!loop)
+            scrollBounds.constrain(dragHandler.pointerDown());
+        scrollBody.seek();
+    };
+    const render = ({ scrollBody, translate, location, offsetLocation, previousLocation, scrollLooper, slideLooper, dragHandler, animation, eventHandler, scrollBounds, options: { loop }, }, alpha) => {
+        const shouldSettle = scrollBody.settled();
+        const withinBounds = !scrollBounds.shouldConstrain();
+        const hasSettled = loop ? shouldSettle : shouldSettle && withinBounds;
+        const hasSettledAndIdle = hasSettled && !dragHandler.pointerDown();
+        if (hasSettledAndIdle)
+            animation.stop();
+        const interpolatedLocation = location.get() * alpha + previousLocation.get() * (1 - alpha);
+        offsetLocation.set(interpolatedLocation);
+        if (loop) {
+            scrollLooper.loop(scrollBody.direction());
+            slideLooper.loop();
+        }
+        translate.to(offsetLocation.get());
+        if (hasSettledAndIdle)
+            eventHandler.emit("settle");
+        if (!hasSettled)
+            eventHandler.emit("scroll");
+    };
+    const animation = Animations(ownerDocument, ownerWindow, () => update(engine), (alpha) => render(engine, alpha));
+    // Shared
+    const friction = 0.68;
+    const startLocation = scrollSnaps[index.get()];
+    const location = Vector1D(startLocation);
+    const previousLocation = Vector1D(startLocation);
+    const offsetLocation = Vector1D(startLocation);
+    const target = Vector1D(startLocation);
+    const scrollBody = ScrollBody(location, offsetLocation, previousLocation, target, duration, friction);
+    const scrollTarget = ScrollTarget(loop, scrollSnaps, contentSize, limit, target);
+    const scrollTo = ScrollTo(animation, index, indexPrevious, scrollBody, scrollTarget, target, eventHandler);
+    const scrollProgress = ScrollProgress(limit);
+    const eventStore = EventStore();
+    const slidesInView = SlidesInView(container, slides, eventHandler, inViewThreshold);
+    const { slideRegistry } = SlideRegistry(containSnaps, containScroll, scrollSnaps, scrollContainLimit, slidesToScroll, slideIndexes);
+    const slideFocus = SlideFocus(root, slides, slideRegistry, scrollTo, scrollBody, eventStore, eventHandler, watchFocus);
+    // Engine
+    const engine = {
+        ownerDocument,
+        ownerWindow,
+        eventHandler,
+        containerRect,
+        slideRects,
+        animation,
+        axis,
+        dragHandler: DragHandler(axis, root, ownerDocument, ownerWindow, target, DragTracker(axis, ownerWindow), location, animation, scrollTo, scrollBody, scrollTarget, index, eventHandler, percentOfView, dragFree, dragThreshold, skipSnaps, friction, watchDrag),
+        eventStore,
+        percentOfView,
+        index,
+        indexPrevious,
+        limit,
+        location,
+        offsetLocation,
+        previousLocation,
+        options,
+        resizeHandler: ResizeHandler(container, eventHandler, ownerWindow, slides, axis, watchResize, nodeRects),
+        scrollBody,
+        scrollBounds: ScrollBounds(limit, offsetLocation, target, scrollBody, percentOfView),
+        scrollLooper: ScrollLooper(contentSize, limit, offsetLocation, [location, offsetLocation, previousLocation, target]),
+        scrollProgress,
+        scrollSnapList: scrollSnaps.map(scrollProgress.get),
+        scrollSnaps,
+        scrollTarget,
+        scrollTo,
+        slideLooper: SlideLooper(axis, viewSize, contentSize, slideSizes, slideSizesWithGaps, snaps, scrollSnaps, offsetLocation, slides),
+        slideFocus,
+        slidesHandler: SlidesHandler(container, eventHandler, watchSlides),
+        slidesInView,
+        slideIndexes,
+        slideRegistry,
+        slidesToScroll,
+        target,
+        translate: Translate(axis, container),
+    };
+    return engine;
+}

package/carousel/engine/EventHandler.d.ts

@@ -0,0 +1,27 @@
+import type { EmblaCarouselType } from "./EmblaCarousel.js";
+type CallbackType = (emblaApi: EmblaCarouselType, evt: EmblaEventType) => void;
+export type EmblaEventType = EmblaEventListType[keyof EmblaEventListType];
+export interface EmblaEventListType {
+    init: "init";
+    pointerDown: "pointerDown";
+    pointerUp: "pointerUp";
+    slidesChanged: "slidesChanged";
+    slidesInView: "slidesInView";
+    scroll: "scroll";
+    select: "select";
+    settle: "settle";
+    destroy: "destroy";
+    reInit: "reInit";
+    resize: "resize";
+    slideFocusStart: "slideFocusStart";
+    slideFocus: "slideFocus";
+}
+export type EventHandlerType = {
+    init: (emblaApi: EmblaCarouselType) => void;
+    emit: (evt: EmblaEventType) => EventHandlerType;
+    on: (evt: EmblaEventType, cb: CallbackType) => EventHandlerType;
+    off: (evt: EmblaEventType, cb: CallbackType) => EventHandlerType;
+    clear: () => void;
+};
+export declare function EventHandler(): EventHandlerType;
+export {};

package/carousel/engine/EventHandler.js

@@ -0,0 +1,33 @@
+export function EventHandler() {
+    let listeners = {};
+    let api;
+    function init(emblaApi) {
+        api = emblaApi;
+    }
+    function getListeners(evt) {
+        return listeners[evt] || [];
+    }
+    function emit(evt) {
+        getListeners(evt).forEach((e) => e(api, evt));
+        return self;
+    }
+    function on(evt, cb) {
+        listeners[evt] = getListeners(evt).concat([cb]);
+        return self;
+    }
+    function off(evt, cb) {
+        listeners[evt] = getListeners(evt).filter((e) => e !== cb);
+        return self;
+    }
+    function clear() {
+        listeners = {};
+    }
+    const self = {
+        init,
+        emit,
+        off,
+        on,
+        clear,
+    };
+    return self;
+}

package/carousel/engine/EventStore.d.ts

@@ -0,0 +1,9 @@
+type EventNameType = keyof DocumentEventMap | keyof WindowEventMap;
+type EventHandlerType = (evt: any) => void;
+type EventOptionsType = boolean | AddEventListenerOptions | undefined;
+export type EventStoreType = {
+    add: (node: EventTarget, type: EventNameType, handler: EventHandlerType, options?: EventOptionsType) => EventStoreType;
+    clear: () => void;
+};
+export declare function EventStore(): EventStoreType;
+export {};