@pluot/react 0.1.0

package/dist-tsc/dom-2d-camera.d.ts

@@ -0,0 +1,26 @@
+export default dom2dCamera;
+declare function dom2dCamera(element: any, { distance, target, rotation, isNdc, isFixed, isPan, isPanInverted, panSpeed, isRotate, rotateSpeed, defaultMouseDownMoveAction, mouseDownMoveModKey, isZoom, zoomSpeed, viewCenter, scaleBounds, translationBounds, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseMove, onWheel, aspectRatioMode, aspectRatioAlignmentMode, }?: {
+    distance?: number | undefined;
+    target?: number[] | undefined;
+    rotation?: number | undefined;
+    isNdc?: boolean | undefined;
+    isFixed?: boolean | undefined;
+    isPan?: boolean | undefined;
+    isPanInverted?: boolean[] | undefined;
+    panSpeed?: number | undefined;
+    isRotate?: boolean | undefined;
+    rotateSpeed?: number | undefined;
+    defaultMouseDownMoveAction?: string | undefined;
+    mouseDownMoveModKey?: string | undefined;
+    isZoom?: boolean | undefined;
+    zoomSpeed?: number | undefined;
+    onKeyDown?: (() => void) | undefined;
+    onKeyUp?: (() => void) | undefined;
+    onMouseDown?: (() => void) | undefined;
+    onMouseUp?: (() => void) | undefined;
+    onMouseMove?: (() => void) | undefined;
+    onWheel?: (() => void) | undefined;
+    aspectRatioMode?: string | undefined;
+    aspectRatioAlignmentMode?: string | undefined;
+}): any;
+//# sourceMappingURL=dom-2d-camera.d.ts.map

package/dist-tsc/dom-2d-camera.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-2d-camera.d.ts","sourceRoot":"","sources":["../src/dom-2d-camera.js"],"names":[],"mappings":";AAeA;;;;;;;;;;;;;;;;;;;;;;;QAkZC"}

package/dist-tsc/dom-2d-camera.js

@@ -0,0 +1,303 @@
+// Copied from https://github.com/flekschas/dom-2d-camera/blob/cd59ea035a0ea72c2c0535fa3721f8127946576c/src/index.js
+// TODO: fork and make PR if the changes are successful
+import { vec2 } from "gl-matrix";
+import createCamera from "camera-2d-simple";
+const MOUSE_DOWN_MOVE_ACTIONS = ["pan", "rotate"];
+const KEY_MAP = {
+    alt: "altKey",
+    cmd: "metaKey",
+    ctrl: "ctrlKey",
+    meta: "metaKey",
+    shift: "shiftKey"
+};
+const dom2dCamera = (element, { distance = 1.0, target = [0, 0], rotation = 0, isNdc = true, isFixed = false, isPan = true, isPanInverted = [false, true], panSpeed = 1, isRotate = true, rotateSpeed = 1, defaultMouseDownMoveAction = "pan", mouseDownMoveModKey = "alt", isZoom = true, zoomSpeed = 1, viewCenter, scaleBounds, translationBounds, onKeyDown = () => { }, onKeyUp = () => { }, onMouseDown = () => { }, onMouseUp = () => { }, onMouseMove = () => { }, onWheel = () => { }, aspectRatioMode = "Ignore", aspectRatioAlignmentMode = "Center", } = {}) => {
+    let camera = createCamera(target, distance, rotation, viewCenter, scaleBounds, translationBounds);
+    let mouseX = 0;
+    let mouseY = 0;
+    let mouseRelX = 0;
+    let mouseRelY = 0;
+    let prevMouseX = 0;
+    let prevMouseY = 0;
+    let isLeftMousePressed = false;
+    let scrollDist = 0;
+    let width = 1;
+    let height = 1;
+    let aspectRatio = 1;
+    let isInteractivelyChanged = false;
+    let isProgrammaticallyChanged = false;
+    let isMouseDownMoveModActive = false;
+    let panOnMouseDownMove = defaultMouseDownMoveAction === "pan";
+    let isPanX = isPan;
+    let isPanY = isPan;
+    let isPanXInverted = isPanInverted;
+    let isPanYInverted = isPanInverted;
+    let isZoomX = isZoom;
+    let isZoomY = isZoom;
+    const spreadXYSettings = () => {
+        isPanX = Array.isArray(isPan) ? Boolean(isPan[0]) : isPan;
+        isPanY = Array.isArray(isPan) ? Boolean(isPan[1]) : isPan;
+        isPanXInverted = Array.isArray(isPanInverted)
+            ? Boolean(isPanInverted[0])
+            : isPanInverted;
+        isPanYInverted = Array.isArray(isPanInverted)
+            ? Boolean(isPanInverted[1])
+            : isPanInverted;
+        isZoomX = Array.isArray(isZoom) ? Boolean(isZoom[0]) : isZoom;
+        isZoomY = Array.isArray(isZoom) ? Boolean(isZoom[1]) : isZoom;
+    };
+    spreadXYSettings();
+    let xAspectRatioModeFactor = 1.0;
+    let yAspectRatioModeFactor = 1.0;
+    let xAlignmentTranslation = 0.0;
+    let yAlignmentTranslation = 0.0;
+    /*
+      // Logic for aspect ratio handling in point_layer.wgsl
+      if (aspect_ratio_mode == 1u) {
+          // fit/contain
+          if (layer_aspect_ratio > 1.0) {
+              // Wide rectangle
+              // Show more than (0, 1) in x direction. Show exactly (0, 1) in y direction.
+              x_scale_for_aspect_ratio_mode = 1.0 / layer_aspect_ratio;
+          } else if(layer_aspect_ratio < 1.0) {
+              // Tall layer
+              // Show exactly (0, 1) in x direction. Show more than (0, 1) in y direction.
+              y_scale_for_aspect_ratio_mode = layer_aspect_ratio;
+          } else {
+              // Square layer; no change needed.
+              // Show exactly (0, 1) in both directions.
+          }
+      } else if (aspect_ratio_mode == 2u) {
+          // fill/cover
+          if(layer_aspect_ratio > 1.0) {
+              // Wide rectangle
+              // Show exactly (0, 1) in x direction. Show less than (0, 1) in y direction.
+              y_scale_for_aspect_ratio_mode = layer_aspect_ratio;
+          } else if(layer_aspect_ratio < 1.0) {
+              // Tall layer
+              // Show less than (0, 1) in x direction. Show exactly (0, 1) in y direction.
+              x_scale_for_aspect_ratio_mode = 1.0 / layer_aspect_ratio;
+          } else {
+              // Square layer; no change needed.
+              // Show exactly (0, 1) in both directions.
+          }
+      }
+    */
+    const updateAspectRatioModeFactors = () => {
+        xAspectRatioModeFactor = 1.0;
+        yAspectRatioModeFactor = 1.0;
+        if (aspectRatioMode === "Contain") {
+            if (aspectRatio > 1.0) {
+                xAspectRatioModeFactor = 1.0 / aspectRatio;
+            }
+            else if (aspectRatio < 1.0) {
+                yAspectRatioModeFactor = aspectRatio;
+            }
+        }
+        else if (aspectRatioMode === "Cover") {
+            if (aspectRatio > 1.0) {
+                yAspectRatioModeFactor = aspectRatio;
+            }
+            else if (aspectRatio < 1.0) {
+                xAspectRatioModeFactor = 1.0 / aspectRatio;
+            }
+        }
+        xAlignmentTranslation = 0.0;
+        yAlignmentTranslation = 0.0;
+        if (aspectRatioAlignmentMode === "Start") {
+            xAlignmentTranslation = xAspectRatioModeFactor - 1.0;
+            yAlignmentTranslation = yAspectRatioModeFactor - 1.0;
+        }
+        else if (aspectRatioAlignmentMode === "End") {
+            xAlignmentTranslation = 1.0 - xAspectRatioModeFactor;
+            yAlignmentTranslation = 1.0 - yAspectRatioModeFactor;
+        }
+    };
+    updateAspectRatioModeFactors();
+    const transformPanX = isNdc
+        ? dX => (dX / width) * 2 * (1.0 / xAspectRatioModeFactor) // to normalized device coords
+        : dX => dX;
+    const transformPanY = isNdc
+        ? dY => (dY / height) * 2 * (1.0 / yAspectRatioModeFactor) // to normalized device coords
+        : dY => -dY;
+    const transformScaleX = isNdc
+        ? x => ((-1 + (x / width) * 2) - xAlignmentTranslation) * (1.0 / xAspectRatioModeFactor)
+        : x => x;
+    const transformScaleY = isNdc
+        ? y => ((1 - (y / height) * 2) - yAlignmentTranslation) * (1.0 / yAspectRatioModeFactor)
+        : y => y;
+    const tick = () => {
+        if (isFixed) {
+            const isChanged = isProgrammaticallyChanged;
+            isProgrammaticallyChanged = false;
+            return isChanged;
+        }
+        isInteractivelyChanged = false;
+        const currentMouseX = mouseX;
+        const currentMouseY = mouseY;
+        if ((isPanX || isPanY) &&
+            isLeftMousePressed &&
+            ((panOnMouseDownMove && !isMouseDownMoveModActive) ||
+                (!panOnMouseDownMove && isMouseDownMoveModActive))) {
+            const dX = isPanXInverted
+                ? prevMouseX - currentMouseX
+                : currentMouseX - prevMouseX;
+            const transformedPanX = isPanX ? transformPanX(panSpeed * dX) : 0;
+            const dY = isPanYInverted
+                ? prevMouseY - currentMouseY
+                : currentMouseY - prevMouseY;
+            const transformedPanY = isPanY ? transformPanY(panSpeed * dY) : 0;
+            if (transformedPanX !== 0 || transformedPanY !== 0) {
+                camera.pan([transformedPanX, transformedPanY]);
+                isInteractivelyChanged = true;
+            }
+        }
+        if ((isZoomX || isZoomY) && scrollDist) {
+            const dZ = zoomSpeed * Math.exp(scrollDist / height);
+            const transformedX = transformScaleX(mouseRelX);
+            const transformedY = transformScaleY(mouseRelY);
+            camera.scale([isZoomX ? 1 / dZ : 1, isZoomY ? 1 / dZ : 1], [transformedX, transformedY]);
+            isInteractivelyChanged = true;
+        }
+        if (isRotate &&
+            isLeftMousePressed &&
+            ((panOnMouseDownMove && isMouseDownMoveModActive) ||
+                (!panOnMouseDownMove && !isMouseDownMoveModActive)) &&
+            Math.abs(prevMouseX - currentMouseX) +
+                Math.abs(prevMouseY - currentMouseY) >
+                0) {
+            const wh = width / 2;
+            const hh = height / 2;
+            const x1 = prevMouseX - wh;
+            const y1 = hh - prevMouseY;
+            const x2 = currentMouseX - wh;
+            const y2 = hh - currentMouseY;
+            // Angle between the start and end mouse position with respect to the
+            // viewport center
+            const radians = vec2.angle([x1, y1], [x2, y2]);
+            // Determine the orientation
+            const cross = x1 * y2 - x2 * y1;
+            camera.rotate(rotateSpeed * radians * Math.sign(cross));
+            isInteractivelyChanged = true;
+        }
+        // Reset scroll delta and mouse position
+        scrollDist = 0;
+        prevMouseX = currentMouseX;
+        prevMouseY = currentMouseY;
+        const isChanged = isInteractivelyChanged || isProgrammaticallyChanged;
+        isProgrammaticallyChanged = false;
+        return isChanged;
+    };
+    const config = ({ defaultMouseDownMoveAction: newDefaultMouseDownMoveAction = null, isFixed: newIsFixed = null, isPan: newIsPan = null, isPanInverted: newIsPanInverted = null, isRotate: newIsRotate = null, isZoom: newIsZoom = null, panSpeed: newPanSpeed = null, rotateSpeed: newRotateSpeed = null, zoomSpeed: newZoomSpeed = null, mouseDownMoveModKey: newMouseDownMoveModKey = null } = {}) => {
+        defaultMouseDownMoveAction =
+            newDefaultMouseDownMoveAction !== null &&
+                MOUSE_DOWN_MOVE_ACTIONS.includes(newDefaultMouseDownMoveAction)
+                ? newDefaultMouseDownMoveAction
+                : defaultMouseDownMoveAction;
+        panOnMouseDownMove = defaultMouseDownMoveAction === "pan";
+        isFixed = newIsFixed !== null ? newIsFixed : isFixed;
+        isPan = newIsPan !== null ? newIsPan : isPan;
+        isPanInverted =
+            newIsPanInverted !== null ? newIsPanInverted : isPanInverted;
+        isRotate = newIsRotate !== null ? newIsRotate : isRotate;
+        isZoom = newIsZoom !== null ? newIsZoom : isZoom;
+        panSpeed = +newPanSpeed > 0 ? newPanSpeed : panSpeed;
+        rotateSpeed = +newRotateSpeed > 0 ? newRotateSpeed : rotateSpeed;
+        zoomSpeed = +newZoomSpeed > 0 ? newZoomSpeed : zoomSpeed;
+        spreadXYSettings();
+        mouseDownMoveModKey =
+            newMouseDownMoveModKey !== null &&
+                Object.keys(KEY_MAP).includes(newMouseDownMoveModKey)
+                ? newMouseDownMoveModKey
+                : mouseDownMoveModKey;
+    };
+    const refresh = () => {
+        const bBox = element.getBoundingClientRect();
+        width = bBox.width;
+        height = bBox.height;
+        aspectRatio = width / height;
+        updateAspectRatioModeFactors();
+    };
+    const keyUpHandler = event => {
+        isMouseDownMoveModActive = false;
+        onKeyUp(event);
+    };
+    const keyDownHandler = event => {
+        isMouseDownMoveModActive = event[KEY_MAP[mouseDownMoveModKey]];
+        onKeyDown(event);
+    };
+    const mouseUpHandler = event => {
+        isLeftMousePressed = false;
+        onMouseUp(event);
+    };
+    const mouseDownHandler = event => {
+        isLeftMousePressed = event.buttons === 1;
+        onMouseDown(event);
+    };
+    const offsetXSupport = document.createEvent("MouseEvent").offsetX !== undefined;
+    const updateMouseRelXY = offsetXSupport
+        ? event => {
+            mouseRelX = event.offsetX;
+            mouseRelY = event.offsetY;
+        }
+        : event => {
+            const bBox = element.getBoundingClientRect();
+            mouseRelX = event.clientX - bBox.left;
+            mouseRelY = event.clientY - bBox.top;
+        };
+    const updateMouseXY = event => {
+        mouseX = event.clientX;
+        mouseY = event.clientY;
+    };
+    const mouseMoveHandler = event => {
+        updateMouseXY(event);
+        onMouseMove(event);
+    };
+    const wheelHandler = event => {
+        if ((isZoomX || isZoomY) && !isFixed) {
+            event.preventDefault();
+            updateMouseXY(event);
+            updateMouseRelXY(event);
+            const scale = event.deltaMode === 1 ? 12 : 1;
+            scrollDist += scale * (event.deltaY || event.deltaX || 0);
+        }
+        onWheel(event);
+    };
+    const dispose = () => {
+        camera = undefined;
+        element.removeEventListener("keydown", keyDownHandler);
+        element.removeEventListener("keyup", keyUpHandler);
+        element.removeEventListener("mousedown", mouseDownHandler);
+        element.removeEventListener("mouseup", mouseUpHandler);
+        element.removeEventListener("mousemove", mouseMoveHandler);
+        element.removeEventListener("wheel", wheelHandler);
+    };
+    element.addEventListener("keydown", keyDownHandler, { passive: true });
+    element.addEventListener("keyup", keyUpHandler, { passive: true });
+    element.addEventListener("mousedown", mouseDownHandler, { passive: true });
+    element.addEventListener("mouseup", mouseUpHandler, { passive: true });
+    element.addEventListener("mousemove", mouseMoveHandler, { passive: true });
+    element.addEventListener("wheel", wheelHandler, { passive: false });
+    camera.config = config;
+    camera.dispose = dispose;
+    camera.refresh = refresh;
+    camera.tick = tick;
+    const withProgrammaticChange = fn => function () {
+        fn.apply(null, arguments);
+        isProgrammaticallyChanged = true;
+    };
+    camera.lookAt = withProgrammaticChange(camera.lookAt);
+    camera.translate = withProgrammaticChange(camera.translate);
+    camera.pan = withProgrammaticChange(camera.pan);
+    camera.rotate = withProgrammaticChange(camera.rotate);
+    camera.scale = withProgrammaticChange(camera.scale);
+    camera.zoom = withProgrammaticChange(camera.zoom);
+    camera.reset = withProgrammaticChange(camera.reset);
+    camera.set = withProgrammaticChange(camera.set);
+    camera.setScaleBounds = withProgrammaticChange(camera.setScaleBounds);
+    camera.setTranslationBounds = withProgrammaticChange(camera.setTranslationBounds);
+    camera.setView = withProgrammaticChange(camera.setView);
+    camera.setViewCenter = withProgrammaticChange(camera.setViewCenter);
+    refresh();
+    return camera;
+};
+export default dom2dCamera;

package/dist-tsc/feature-detection.d.ts

@@ -0,0 +1,5 @@
+export function useWebGpuFeatureDetection(): {
+    supportsWebGpu: any;
+    supportsWebGpuMessage: any;
+};
+//# sourceMappingURL=feature-detection.d.ts.map

package/dist-tsc/feature-detection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-detection.d.ts","sourceRoot":"","sources":["../src/feature-detection.js"],"names":[],"mappings":"AAGA;;;EAGC"}

package/dist-tsc/feature-detection.js

@@ -0,0 +1,6 @@
+import { useMemo } from "react";
+import { checkWebGpuFeatureDetection } from "@pluot/core";
+export function useWebGpuFeatureDetection() {
+    const [supportsWebGpu, supportsWebGpuMessage] = useMemo(checkWebGpuFeatureDetection, []);
+    return { supportsWebGpu, supportsWebGpuMessage };
+}

package/dist-tsc/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@pluot/core";
+export { Pluot } from "./Pluot.js";
+//# sourceMappingURL=index.d.ts.map

package/dist-tsc/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":""}

package/dist-tsc/index.js

@@ -0,0 +1,2 @@
+export * from '@pluot/core'; // Re-export everything from the vanilla JS package.
+export { Pluot } from "./Pluot.js";

package/dist-tsc/lru-store.d.ts

@@ -0,0 +1,4 @@
+import type { AsyncReadable } from 'zarrita';
+export declare function createGetRange<S extends AsyncReadable>(store: S): (...args: Parameters<NonNullable<S["getRange"]>>) => Promise<Uint8Array | undefined>;
+export declare function lru(inner_store: AsyncReadable, maxSize?: number): AsyncReadable;
+//# sourceMappingURL=lru-store.d.ts.map

package/dist-tsc/lru-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lru-store.d.ts","sourceRoot":"","sources":["../src/lru-store.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,aAAa,EAAgB,MAAM,SAAS,CAAC;AAavE,wBAAgB,cAAc,CAAC,CAAC,SAAS,aAAa,EAAE,KAAK,EAAE,CAAC,IAEhD,GAAG,MAAM,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAG,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAmBhG;AAoHD,wBAAgB,GAAG,CAAC,WAAW,EAAE,aAAa,EAAE,OAAO,SAAM,GAAG,aAAa,CAE5E"}

package/dist-tsc/lru-store.js

@@ -0,0 +1,137 @@
+import QuickLRU from "quick-lru";
+function normalizeKey(key, range) {
+    if (!range)
+        return key;
+    if ("suffixLength" in range)
+        return `${key}:-${range.suffixLength}`;
+    return `${key}:${range.offset}:${range.offset + range.length - 1}`;
+}
+// Provides a blanket implementation of getRange that can be used with any AsyncReadable store,
+// even if it doesn't define a getRange method.
+// If the store does have a native getRange method, we use that instead.
+// Reference: https://github.com/vitessce/vitessce/blob/main/packages/utils/zarr-utils/src/base-getrange.ts
+export function createGetRange(store) {
+    // TODO: support options param for getRange?
+    return async (...args) => {
+        const [key, range, opts] = args;
+        if (typeof store.getRange === 'function') {
+            return store.getRange(key, range, opts);
+        }
+        // Store does not have a native getRange method; falling back to get. This may be inefficient for large data.
+        const arr = await store.get(key, opts);
+        if (!arr)
+            return undefined;
+        const { buffer } = arr;
+        if ('suffixLength' in range) {
+            const { suffixLength } = range;
+            return new Uint8Array(buffer, buffer.byteLength - suffixLength, suffixLength);
+        }
+        if ('offset' in range && 'length' in range) {
+            const { offset, length } = range;
+            return new Uint8Array(buffer, offset, length);
+        }
+        throw new Error('Invalid rangeQuery value.');
+    };
+}
+// A class-based version of the proxy-based lru() function from vizarr.
+// Reference: https://github.com/hms-dbmi/vizarr/blob/862745c1c7c095748bbe97475da61807d5b49189/src/lru-store.ts
+class LruStore {
+    #inner_store;
+    #cache;
+    // We need a way to synchronously peek at the promise state (a-la Bun's peek or Effect's Deferred.poll).
+    // We can probably do something more sophisticated but will try this first.
+    #promise_states;
+    constructor(store, maxSize = 100) {
+        this.#inner_store = store;
+        this.#promise_states = new Map();
+        this.#cache = new QuickLRU({
+            maxSize,
+            onEviction: (key, _value) => {
+                this.#promise_states.delete(key);
+            },
+        });
+    }
+    async get(...args) {
+        const [key, opts] = args;
+        // console.log(`LRU get: ${key}`);
+        const cacheKey = normalizeKey(key);
+        const cached = this.#cache.get(cacheKey);
+        if (cached) {
+            return cached[0];
+        }
+        const controller = new AbortController();
+        let getResult = this.#inner_store.get(key, {
+            signal: controller.signal,
+            ...(opts ?? {})
+        });
+        const getResultPromise = Promise.resolve(getResult);
+        this.#promise_states.set(cacheKey, 'pending');
+        const result = getResultPromise.then((val) => {
+            this.#promise_states.set(cacheKey, 'fulfilled');
+            return val;
+        }).catch((err) => {
+            this.#promise_states.set(cacheKey, 'rejected');
+            this.#cache.delete(cacheKey);
+            throw err;
+        });
+        this.#cache.set(cacheKey, [result, controller]);
+        return result;
+    }
+    // Synchronously peek at the promise state.
+    getPeek(...args) {
+        this.get(...args); // Kick off the promise but do not await. TODO: do we want to do this here?
+        const [key, opts] = args;
+        // console.log(`LRU getPeek: ${key}`);
+        const cacheKey = normalizeKey(key);
+        return this.#promise_states.get(cacheKey);
+    }
+    async getRange(...args) {
+        const [key, range, opts] = args;
+        const cacheKey = normalizeKey(key, range);
+        const cached = this.#cache.get(cacheKey);
+        if (cached) {
+            return cached[0];
+        }
+        const _getRange = typeof this.#inner_store.getRange === 'function'
+            ? this.#inner_store.getRange.bind(this.#inner_store)
+            : createGetRange(this.#inner_store);
+        const controller = new AbortController();
+        // @ts-expect-error
+        let getRangeResult = _getRange(key, range, {
+            signal: controller.signal,
+            ...(opts ?? {})
+        });
+        const getRangeResultPromise = Promise.resolve(getRangeResult);
+        this.#promise_states.set(cacheKey, 'pending');
+        const result = getRangeResultPromise.then((val) => {
+            this.#promise_states.set(cacheKey, 'fulfilled');
+            return val;
+        }).catch((err) => {
+            this.#promise_states.set(cacheKey, 'rejected');
+            this.#cache.delete(cacheKey);
+            throw err;
+        });
+        this.#cache.set(cacheKey, [result, controller]);
+        return result;
+    }
+    // Synchronously peek at the promise state.
+    getRangePeek(...args) {
+        this.getRange(...args); // Kick off the promise but do not await. TODO: do we want to do this here?
+        const [key, range, opts] = args;
+        const cacheKey = normalizeKey(key, range);
+        return this.#promise_states.get(cacheKey);
+    }
+    clearCache() {
+        // Use AbortSignal in clearCache for promises that have not yet been resolved.
+        this.#cache.forEach(([promise, controller]) => {
+            // TODO: check if promise is still pending before aborting? Or just always abort?
+            // TODO: verify that this aborting is actually working
+            controller.abort();
+        });
+        this.#cache.clear();
+        this.#promise_states = new Map();
+    }
+}
+export function lru(inner_store, maxSize = 100) {
+    return new LruStore(inner_store, maxSize);
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@pluot/react",
+  "private": false,
+  "version": "0.1.0",
+  "description": "",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "files": [
+    "src",
+    "dist",
+    "dist-tsc"
+  ],
+  "dependencies": {
+    "lightua": "0.1.0",
+    "zarrita": "^0.5.3",
+    "quick-lru": "^7.0.1",
+    "d3-zoom": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-scale": "^4.0.2",
+    "d3-drag": "^3.0.0",
+    "dom-2d-camera": "^2.2.6",
+    "camera-2d-simple": "^3.0.0",
+    "gl-matrix": "^3.4.4",
+    "3d-view-controls": "^2.2.2",
+    "3d-view": "^2.0.1",
+    "has-passive-events": "^1.0.0",
+    "mouse-change": "^1.1.1",
+    "mouse-event-offset": "^3.0.2",
+    "mouse-wheel": "^1.0.2",
+    "lz-string": "^1.5.0",
+    "lodash-es": "^4.17.23",
+    "@pluot/core": "0.1.0"
+  },
+  "devDependencies": {
+    "vitest": "^3.2.4",
+    "vite": "^6.1.1",
+    "@vitejs/plugin-react": "^5.0.0",
+    "jsdom": "^26.1.0",
+    "vitest-canvas-mock": "^0.3.3",
+    "typescript": "^5.9"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "scripts": {
+    "start": "pnpm -C ../../ run start-tsc",
+    "build": "pnpm -C ../../ run build-tsc",
+    "bundle": "pnpm exec vite build -c ./vite.config.js",
+    "test": "pnpm exec vitest --run -r ../../ --dir ."
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  }
+}