@remix-gg/three 0.1.1

package/dist/scene/lighting.js

@@ -0,0 +1,118 @@
+import { CircleGeometry, Color, DirectionalLight, Fog, HemisphereLight, Mesh, MeshBasicMaterial, PCFSoftShadowMap, Vector3, } from 'three';
+const PRESETS = {
+    studio: {
+        background: 0x11161d,
+        hemiSky: 0xffffff,
+        hemiGround: 0x4a5568,
+        hemiIntensity: 1.1,
+        keyColor: 0xffffff,
+        keyIntensity: 2.2,
+        keyPosition: [5, 10, 7],
+        fog: null,
+    },
+    sunset: {
+        background: 0x2b1b33,
+        hemiSky: 0xffb98a,
+        hemiGround: 0x2a1a3a,
+        hemiIntensity: 1.0,
+        keyColor: 0xffd0a0,
+        keyIntensity: 2.6,
+        keyPosition: [-6, 6, 4],
+        fog: [0x2b1b33, 18, 60],
+    },
+    night: {
+        background: 0x060b0f,
+        hemiSky: 0xbfd4ff,
+        hemiGround: 0x0a0f14,
+        hemiIntensity: 0.9,
+        keyColor: 0xffffff,
+        keyIntensity: 1.2,
+        keyPosition: [4, 8, 6],
+        fog: [0x060b0f, 14, 40],
+    },
+};
+export function applyLighting(scene, preset, options = {}) {
+    const spec = PRESETS[preset];
+    scene.background = new Color(spec.background);
+    scene.fog = spec.fog ? new Fog(spec.fog[0], spec.fog[1], spec.fog[2]) : null;
+    const fill = new HemisphereLight(spec.hemiSky, spec.hemiGround, spec.hemiIntensity);
+    const key = new DirectionalLight(spec.keyColor, spec.keyIntensity);
+    key.position.set(...spec.keyPosition);
+    scene.add(fill, key);
+    if (options.shadows) {
+        // Exactly one shadow-casting light. A second one doubles the depth passes
+        // for a difference nobody sees on a 6-inch screen.
+        key.castShadow = true;
+        key.shadow.mapSize.set(1024, 1024);
+        if (options.renderer) {
+            options.renderer.shadowMap.enabled = true;
+            options.renderer.shadowMap.type = PCFSoftShadowMap;
+        }
+        const bounds = options.shadowBounds;
+        if (bounds) {
+            const size = bounds.getSize(new Vector3());
+            const radius = Math.max(size.x, size.z) / 2 + 1;
+            const camera = key.shadow.camera;
+            camera.left = -radius;
+            camera.right = radius;
+            camera.top = radius;
+            camera.bottom = -radius;
+            camera.near = 0.5;
+            camera.far = Math.max(size.y * 2 + radius * 4, 50);
+            camera.updateProjectionMatrix();
+            key.target.position.copy(bounds.getCenter(new Vector3()));
+            scene.add(key.target);
+        }
+    }
+    return {
+        key,
+        fill,
+        dispose() {
+            key.removeFromParent();
+            key.target.removeFromParent();
+            fill.removeFromParent();
+            key.dispose();
+            fill.dispose();
+            scene.fog = null;
+        },
+    };
+}
+/**
+ * A flat translucent disc that tracks an object's ground position.
+ *
+ * On a small screen this reads better than a real shadow map and costs one
+ * draw call instead of a depth pass — the same trick the Remix avatar already
+ * uses in `packages/ui/src/lib/avatar-three.ts`.
+ */
+export function blobShadow(target, options = {}) {
+    const radius = options.radius ?? 0.72;
+    const groundY = options.groundY ?? 0;
+    const geometry = new CircleGeometry(radius, 24);
+    const material = new MeshBasicMaterial({
+        color: 0x000000,
+        transparent: true,
+        opacity: options.opacity ?? 0.15,
+        depthWrite: false,
+    });
+    const mesh = new Mesh(geometry, material);
+    mesh.rotation.x = -Math.PI / 2;
+    mesh.renderOrder = -1;
+    const world = new Vector3();
+    return {
+        mesh,
+        update() {
+            target.getWorldPosition(world);
+            mesh.position.set(world.x, groundY + 0.01, world.z);
+            // Fade and shrink with height so a jump reads as a jump.
+            const height = Math.max(world.y - groundY, 0);
+            const falloff = Math.max(1 - height / 8, 0.15);
+            mesh.scale.setScalar(falloff);
+            material.opacity = (options.opacity ?? 0.15) * falloff;
+        },
+        dispose() {
+            mesh.removeFromParent();
+            geometry.dispose();
+            material.dispose();
+        },
+    };
+}

package/dist/scene/pool.d.ts

@@ -0,0 +1,36 @@
+import type { Object3D } from 'three';
+export type PoolOptions<T extends Object3D> = {
+    /** Hard capacity. `acquire()` returns null once it is reached. */
+    size?: number;
+    /** Where acquired items are parented. */
+    parent?: Object3D;
+    /** Called on release, to put an item back in a clean state. */
+    reset?: (item: T) => void;
+};
+/**
+ * Fixed-capacity object pool.
+ *
+ * Allocating a mesh mid-game is not the cost — the GC pause when a hundred of
+ * them die at once is, and on a phone that pause is a visible hitch. A pool
+ * built during `setup` means gameplay never allocates.
+ *
+ * The capacity is hard on purpose: `acquire()` returning null tells you the
+ * budget was wrong, where silent growth would just get slower.
+ */
+export declare class Pool<T extends Object3D> {
+    private readonly items;
+    private readonly idle;
+    private readonly live;
+    private readonly capacity;
+    private readonly parent?;
+    private readonly reset?;
+    constructor(factory: () => T, options?: PoolOptions<T>);
+    get active(): readonly T[];
+    get free(): number;
+    acquire(): T | null;
+    release(item: T): void;
+    releaseAll(): void;
+    /** Frees every item's GPU resources. The pool is unusable afterwards. */
+    dispose(): void;
+}
+//# sourceMappingURL=pool.d.ts.map

package/dist/scene/pool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pool.d.ts","sourceRoot":"","sources":["../../src/scene/pool.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGrC,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC5C,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yCAAyC;IACzC,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;CAC1B,CAAA;AAED;;;;;;;;;GASG;AACH,qBAAa,IAAI,CAAC,CAAC,SAAS,QAAQ;IAClC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAU;IAChC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAU;IAC/B,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAU;IAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAQ;IACjC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAU;IAClC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAmB;gBAE9B,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,GAAE,WAAW,CAAC,CAAC,CAAM;IAa1D,IAAI,MAAM,IAAI,SAAS,CAAC,EAAE,CAEzB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,OAAO,IAAI,CAAC,GAAG,IAAI;IASnB,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI;IAStB,UAAU,IAAI,IAAI;IAKlB,yEAAyE;IACzE,OAAO,IAAI,IAAI;CAShB"}

package/dist/scene/pool.js

@@ -0,0 +1,70 @@
+import { disposeObject } from './dispose.js';
+/**
+ * Fixed-capacity object pool.
+ *
+ * Allocating a mesh mid-game is not the cost — the GC pause when a hundred of
+ * them die at once is, and on a phone that pause is a visible hitch. A pool
+ * built during `setup` means gameplay never allocates.
+ *
+ * The capacity is hard on purpose: `acquire()` returning null tells you the
+ * budget was wrong, where silent growth would just get slower.
+ */
+export class Pool {
+    items = [];
+    idle = [];
+    live = [];
+    capacity;
+    parent;
+    reset;
+    constructor(factory, options = {}) {
+        this.capacity = Math.max(options.size ?? 32, 0);
+        this.parent = options.parent;
+        this.reset = options.reset;
+        for (let i = 0; i < this.capacity; i++) {
+            const item = factory();
+            item.visible = false;
+            this.items.push(item);
+            this.idle.push(item);
+        }
+    }
+    get active() {
+        return this.live;
+    }
+    get free() {
+        return this.idle.length;
+    }
+    acquire() {
+        const item = this.idle.pop();
+        if (!item)
+            return null;
+        item.visible = true;
+        this.live.push(item);
+        if (this.parent && item.parent !== this.parent)
+            this.parent.add(item);
+        return item;
+    }
+    release(item) {
+        const index = this.live.indexOf(item);
+        if (index < 0)
+            return;
+        this.live.splice(index, 1);
+        item.visible = false;
+        this.reset?.(item);
+        this.idle.push(item);
+    }
+    releaseAll() {
+        // Iterate a copy: `release` splices the live list.
+        for (const item of [...this.live])
+            this.release(item);
+    }
+    /** Frees every item's GPU resources. The pool is unusable afterwards. */
+    dispose() {
+        this.releaseAll();
+        for (const item of this.items) {
+            item.removeFromParent();
+            disposeObject(item);
+        }
+        this.items.length = 0;
+        this.idle.length = 0;
+    }
+}

package/dist/three.d.ts

@@ -0,0 +1,2 @@
+export * from 'three';
+//# sourceMappingURL=three.d.ts.map

package/dist/three.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"three.d.ts","sourceRoot":"","sources":["../src/three.ts"],"names":[],"mappings":"AAUA,cAAc,OAAO,CAAA"}

package/dist/three.js

@@ -0,0 +1,11 @@
+// The single pinned three (0.185.1), and the ONLY way a Remix game reaches it:
+//
+//   import * as THREE from '@remix-gg/three/three'
+//
+// This must stay a FLAT star re-export. `export * as THREE from 'three'` forces
+// the consumer's bundler to materialize the whole module object, which kills
+// tree-shaking: measured in this repo on an identical scene, the flat star
+// bundles to 623,623 B and the namespace re-export to 748,893 B. Wrapping the
+// same scene in `function build(THREE, ...)` is just as bad (752,384 B), which
+// is why nothing in this SDK ever takes THREE as a parameter.
+export * from 'three';

package/dist/viewport.d.ts

@@ -0,0 +1,86 @@
+import { Vector2 } from 'three';
+import { type SafeAreaInset } from './platform/sdk-contract.js';
+/**
+ * Portrait model: the canvas FILLS the viewport and the frustum expands along
+ * whichever axis has surplus, so the 720x1080 design box is always fully
+ * visible and backgrounds bleed into the overscan. This is the platform's own
+ * documented contract — letterboxing to a fixed 2:3 canvas wastes ~30% of a
+ * real phone screen (the dev dashboard previews at 390x844, aspect 0.462,
+ * against the box's 0.667).
+ */
+export type FitMode = 'expand' | 'crop';
+export type DesignBox = {
+    width: number;
+    height: number;
+};
+export declare const DEFAULT_DESIGN: DesignBox;
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type FrustumFit = {
+    /** Visible width as a multiple of the design width. >= 1 in `expand`. */
+    scaleX: number;
+    /** Visible height as a multiple of the design height. >= 1 in `expand`. */
+    scaleY: number;
+    /** Design units bleeding past each vertical edge of the design box. */
+    overscanX: number;
+    /** Design units bleeding past each horizontal edge of the design box. */
+    overscanY: number;
+};
+/**
+ * Pure: how far the frustum has to open to satisfy `mode` at `aspect`.
+ * Exactly one axis is unscaled; the other absorbs the mismatch.
+ */
+export declare function fitFrustum(design: DesignBox, aspect: number, mode: FitMode): FrustumFit;
+/**
+ * Pure: the rect, in design units, that is both on-screen and outside the
+ * platform's content safe-area inset — clipped to the guaranteed design box.
+ * Anything the player must see or tap belongs in here.
+ *
+ * @param inset in CSS pixels, as `contentSafeAreaInset` delivers it
+ */
+export declare function safeRectOf(design: DesignBox, fit: FrustumFit, clientWidth: number, clientHeight: number, inset: SafeAreaInset): Rect;
+export type Viewport = {
+    readonly design: DesignBox;
+    /** CSS pixels. */
+    readonly width: number;
+    /** CSS pixels. */
+    readonly height: number;
+    readonly aspect: number;
+    readonly pixelRatio: number;
+    readonly scale: {
+        readonly x: number;
+        readonly y: number;
+    };
+    readonly overscan: {
+        readonly x: number;
+        readonly y: number;
+    };
+    readonly safeArea: SafeAreaInset;
+    readonly safeRect: Rect;
+    /** Multiplier the DOM HUD uses so type tracks the rendered design box. */
+    readonly hudScale: number;
+    /** Viewport-relative CSS pixels -> design units. */
+    toDesign(clientX: number, clientY: number, out?: Vector2): Vector2;
+    /** Viewport-relative CSS pixels -> normalized device coords. */
+    toNdc(clientX: number, clientY: number, out?: Vector2): Vector2;
+    /** Design units -> normalized device coords (for picking). */
+    designToNdc(x: number, y: number, out?: Vector2): Vector2;
+    on(event: 'resize', cb: (viewport: Viewport) => void): () => void;
+    setSafeArea(inset: SafeAreaInset): void;
+    setPixelRatio(ratio: number): void;
+    refresh(): void;
+    dispose(): void;
+};
+export type ViewportOptions = {
+    design?: DesignBox;
+    fit?: FitMode;
+    maxPixelRatio?: number;
+    /** Element whose box the canvas fills. Defaults to the canvas's parent. */
+    host?: HTMLElement;
+};
+export declare function createViewport(canvas: HTMLCanvasElement, options?: ViewportOptions): Viewport;
+//# sourceMappingURL=viewport.d.ts.map

package/dist/viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.d.ts","sourceRoot":"","sources":["../src/viewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,KAAK,aAAa,EAAwB,MAAM,4BAA4B,CAAA;AAErF;;;;;;;GAOG;AACH,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEvC,MAAM,MAAM,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAEzD,eAAO,MAAM,cAAc,EAAE,SAAwC,CAAA;AASrE,MAAM,MAAM,IAAI,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1E,MAAM,MAAM,UAAU,GAAG;IACvB,yEAAyE;IACzE,MAAM,EAAE,MAAM,CAAA;IACd,2EAA2E;IAC3E,MAAM,EAAE,MAAM,CAAA;IACd,uEAAuE;IACvE,SAAS,EAAE,MAAM,CAAA;IACjB,yEAAyE;IACzE,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,UAAU,CAiBvF;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,SAAS,EACjB,GAAG,EAAE,UAAU,EACf,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,KAAK,EAAE,aAAa,GACnB,IAAI,CAmBN;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAA;IAC1B,kBAAkB;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,kBAAkB;IAClB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC1D,QAAQ,CAAC,QAAQ,EAAE;QAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7D,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAA;IAChC,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAA;IACvB,0EAA0E;IAC1E,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,oDAAoD;IACpD,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAClE,gEAAgE;IAChE,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAC/D,8DAA8D;IAC9D,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IACzD,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,GAAG,MAAM,IAAI,CAAA;IACjE,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAA;IACvC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,OAAO,IAAI,IAAI,CAAA;IACf,OAAO,IAAI,IAAI,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,iBAAiB,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAuIjG"}

package/dist/viewport.js

@@ -0,0 +1,174 @@
+import { Vector2 } from 'three';
+import { ZERO_SAFE_AREA_INSET } from './platform/sdk-contract.js';
+export const DEFAULT_DESIGN = { width: 720, height: 1080 };
+/**
+ * The reference density: the design box rendered on a 393 CSS-px-wide phone.
+ * The HUD scales against this so 16px reads as 16px on the target device and
+ * grows proportionally on a wider window.
+ */
+const REFERENCE_PX_PER_UNIT = 393 / 720;
+/**
+ * Pure: how far the frustum has to open to satisfy `mode` at `aspect`.
+ * Exactly one axis is unscaled; the other absorbs the mismatch.
+ */
+export function fitFrustum(design, aspect, mode) {
+    const designAspect = design.width / design.height;
+    const wider = aspect > designAspect;
+    // `crop` shrinks the visible region inside the design box instead of growing
+    // past it: nothing bleeds, but the edges of the box are cut off.
+    const scaleX = mode === 'crop' ? (wider ? 1 : aspect / designAspect) : wider ? aspect / designAspect : 1;
+    const scaleY = mode === 'crop' ? (wider ? designAspect / aspect : 1) : wider ? 1 : designAspect / aspect;
+    return {
+        scaleX,
+        scaleY,
+        overscanX: (design.width * scaleX - design.width) / 2,
+        overscanY: (design.height * scaleY - design.height) / 2,
+    };
+}
+/**
+ * Pure: the rect, in design units, that is both on-screen and outside the
+ * platform's content safe-area inset — clipped to the guaranteed design box.
+ * Anything the player must see or tap belongs in here.
+ *
+ * @param inset in CSS pixels, as `contentSafeAreaInset` delivers it
+ */
+export function safeRectOf(design, fit, clientWidth, clientHeight, inset) {
+    const visibleWidth = design.width * fit.scaleX;
+    const visibleHeight = design.height * fit.scaleY;
+    const originX = (design.width - visibleWidth) / 2;
+    const originY = (design.height - visibleHeight) / 2;
+    const unitsPerPxX = clientWidth > 0 ? visibleWidth / clientWidth : 0;
+    const unitsPerPxY = clientHeight > 0 ? visibleHeight / clientHeight : 0;
+    const left = Math.max(originX + inset.left * unitsPerPxX, 0);
+    const right = Math.min(originX + visibleWidth - inset.right * unitsPerPxX, design.width);
+    const top = Math.max(originY + inset.top * unitsPerPxY, 0);
+    const bottom = Math.min(originY + visibleHeight - inset.bottom * unitsPerPxY, design.height);
+    return {
+        x: left,
+        y: top,
+        width: Math.max(right - left, 0),
+        height: Math.max(bottom - top, 0),
+    };
+}
+export function createViewport(canvas, options = {}) {
+    const design = options.design ?? DEFAULT_DESIGN;
+    const mode = options.fit ?? 'expand';
+    const maxPixelRatio = options.maxPixelRatio ?? 2;
+    const host = options.host ?? canvas.parentElement;
+    const listeners = new Set();
+    let safeArea = ZERO_SAFE_AREA_INSET;
+    let width = 1;
+    let height = 1;
+    let fit = fitFrustum(design, 1, mode);
+    let safeRect = safeRectOf(design, fit, 1, 1, safeArea);
+    let hudScale = 1;
+    // DPR is capped, not honoured: an iPhone's DPR 3 means 9x the fragments of
+    // DPR 1 for a difference nobody can see at arm's length.
+    let pixelRatio = Math.min(devicePixelRatioOf(), maxPixelRatio);
+    function measure() {
+        const rect = host?.getBoundingClientRect();
+        width = Math.max(Math.round(rect?.width ?? window.innerWidth), 1);
+        height = Math.max(Math.round(rect?.height ?? window.innerHeight), 1);
+        fit = fitFrustum(design, width / height, mode);
+        safeRect = safeRectOf(design, fit, width, height, safeArea);
+        hudScale = width / (design.width * fit.scaleX) / REFERENCE_PX_PER_UNIT;
+    }
+    function emit() {
+        for (const cb of [...listeners])
+            cb(viewport);
+    }
+    function toFraction(clientX, clientY) {
+        const rect = canvas.getBoundingClientRect();
+        return {
+            fx: rect.width > 0 ? (clientX - rect.left) / rect.width : 0,
+            fy: rect.height > 0 ? (clientY - rect.top) / rect.height : 0,
+        };
+    }
+    const viewport = {
+        design,
+        get width() {
+            return width;
+        },
+        get height() {
+            return height;
+        },
+        get aspect() {
+            return width / height;
+        },
+        get pixelRatio() {
+            return pixelRatio;
+        },
+        get scale() {
+            return { x: fit.scaleX, y: fit.scaleY };
+        },
+        get overscan() {
+            return { x: fit.overscanX, y: fit.overscanY };
+        },
+        get safeArea() {
+            return safeArea;
+        },
+        get safeRect() {
+            return safeRect;
+        },
+        get hudScale() {
+            return hudScale;
+        },
+        toDesign(clientX, clientY, out = new Vector2()) {
+            const { fx, fy } = toFraction(clientX, clientY);
+            const visibleWidth = design.width * fit.scaleX;
+            const visibleHeight = design.height * fit.scaleY;
+            return out.set((design.width - visibleWidth) / 2 + fx * visibleWidth, (design.height - visibleHeight) / 2 + fy * visibleHeight);
+        },
+        toNdc(clientX, clientY, out = new Vector2()) {
+            const { fx, fy } = toFraction(clientX, clientY);
+            return out.set(fx * 2 - 1, -(fy * 2 - 1));
+        },
+        designToNdc(x, y, out = new Vector2()) {
+            const visibleWidth = design.width * fit.scaleX;
+            const visibleHeight = design.height * fit.scaleY;
+            const fx = (x - (design.width - visibleWidth) / 2) / visibleWidth;
+            const fy = (y - (design.height - visibleHeight) / 2) / visibleHeight;
+            return out.set(fx * 2 - 1, -(fy * 2 - 1));
+        },
+        on(_event, cb) {
+            listeners.add(cb);
+            return () => {
+                listeners.delete(cb);
+            };
+        },
+        setSafeArea(inset) {
+            safeArea = inset;
+            measure();
+            emit();
+        },
+        setPixelRatio(ratio) {
+            pixelRatio = Math.max(Math.min(ratio, maxPixelRatio), 1);
+            emit();
+        },
+        refresh() {
+            measure();
+            emit();
+        },
+        dispose() {
+            listeners.clear();
+            window.removeEventListener('resize', onResize);
+            window.removeEventListener('orientationchange', onResize);
+            window.visualViewport?.removeEventListener('resize', onResize);
+        },
+    };
+    const onResize = () => {
+        // DPR changes when the window moves between displays, so re-read it.
+        pixelRatio = Math.min(devicePixelRatioOf(), maxPixelRatio);
+        measure();
+        emit();
+    };
+    measure();
+    window.addEventListener('resize', onResize);
+    window.addEventListener('orientationchange', onResize);
+    window.visualViewport?.addEventListener('resize', onResize);
+    return viewport;
+}
+function devicePixelRatioOf() {
+    const ratio = typeof devicePixelRatio === 'number' ? devicePixelRatio : 1;
+    return ratio > 0 ? ratio : 1;
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@remix-gg/three",
+  "version": "0.1.1",
+  "description": "The Remix Three.js SDK for portrait mobile games.",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": ["dist/**"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./three": {
+      "types": "./dist/three.d.ts",
+      "import": "./dist/three.js"
+    },
+    "./collide": {
+      "types": "./dist/collide.d.ts",
+      "import": "./dist/collide.js"
+    }
+  },
+  "scripts": {
+    "build": "bun run tsc -p tsconfig.build.json && bun run build:flat-types",
+    "build:flat-types": "bun run scripts/build-flat-types.ts",
+    "test": "bun test --timeout 120000",
+    "typecheck": "bun run tsc --noEmit -p tsconfig.json",
+    "lint": "bun run biome check ."
+  },
+  "dependencies": {
+    "@types/three": "0.185.4",
+    "three": "0.185.1"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "15.7.4",
+    "dts-bundle-generator": "9.5.1",
+    "puppeteer": "24.22.0",
+    "typescript": "5.8.3"
+  }
+}