@remix-gg/three 0.1.1

package/dist/game.js

@@ -0,0 +1,209 @@
+import { ACESFilmicToneMapping, Color, SRGBColorSpace, Scene, WebGLRenderer, } from 'three';
+import { createAssets } from './assets.js';
+import { createAudio } from './audio.js';
+import { portraitRig } from './camera.js';
+import { createHud } from './hud/index.js';
+import { createInput } from './input/index.js';
+import { stepClock } from './loop.js';
+import { awaitSdk, createPlatform } from './platform/index.js';
+import { DisposalScope } from './scene/dispose.js';
+import { createViewport } from './viewport.js';
+/**
+ * The one bootstrap call. A game never constructs a `WebGLRenderer` itself,
+ * because every one of the settings below is a decision that only looks
+ * cosmetic until it costs 30 fps on a phone.
+ */
+export async function createGame(options) {
+    const container = options.container ?? document.body;
+    const fixedStep = options.fixedStep ?? 1 / 60;
+    const maxStepsPerFrame = options.maxStepsPerFrame ?? 5;
+    prepareContainer(container);
+    const canvas = document.createElement('canvas');
+    canvas.style.display = 'block';
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    container.append(canvas);
+    const viewport = createViewport(canvas, {
+        design: options.design,
+        fit: options.fit,
+        maxPixelRatio: options.maxPixelRatio ?? 2,
+        host: container,
+    });
+    const renderer = new WebGLRenderer({
+        canvas,
+        // Antialiasing is redundant once the DPR is above 1 — the downsample
+        // already does it — and it costs a multisampled framebuffer.
+        antialias: viewport.pixelRatio < 2,
+        stencil: false,
+        powerPreference: 'high-performance',
+        alpha: false,
+    });
+    renderer.outputColorSpace = SRGBColorSpace;
+    // ACES is what carries the look without post-processing: it keeps emissives
+    // and bright lights from clipping to flat white.
+    renderer.toneMapping = ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1;
+    const scene = new Scene();
+    if (options.background !== null) {
+        scene.background =
+            options.background === undefined
+                ? new Color(0x060b0f)
+                : typeof options.background === 'object'
+                    ? options.background
+                    : new Color(options.background);
+    }
+    const rig = options.camera ?? portraitRig();
+    const audio = createAudio({ sound: (key) => assets.sound(key) });
+    const assets = createAssets({ decodeAudio: (data) => audio.decode(data) });
+    const hud = createHud(container, viewport);
+    const input = createInput(canvas, viewport, rig, scene);
+    const sdk = await awaitSdk();
+    const platform = createPlatform(sdk);
+    function applyViewport() {
+        renderer.setPixelRatio(viewport.pixelRatio);
+        renderer.setSize(viewport.width, viewport.height, false);
+        rig.resize(viewport);
+    }
+    const offResize = viewport.on('resize', applyViewport);
+    applyViewport();
+    const transient = new DisposalScope(assets.owned);
+    const time = { elapsed: 0, delta: 0, frame: 0 };
+    let accumulator = 0;
+    let lastTime = 0;
+    let running = false;
+    let disposed = false;
+    const game = {
+        renderer,
+        scene,
+        rig,
+        get camera() {
+            return rig.camera;
+        },
+        viewport,
+        input,
+        assets,
+        audio,
+        hud,
+        platform,
+        transient,
+        time,
+        get running() {
+            return running;
+        },
+        gameOver(score) {
+            platform.gameOver(score);
+            // The loop keeps rendering — a frozen canvas behind the host's game-over
+            // sheet looks broken — but simulation stops.
+            running = false;
+        },
+        restart() {
+            // Order matters: free the previous run's GPU resources BEFORE the game
+            // builds the next one, or peak memory is two levels wide.
+            transient.dispose();
+            // The HUD half of the same rule. `setup` built the score, the scene and
+            // the lights once, and a restart rebuilds a *run*, not the game — so it
+            // drops only what the run added. Clearing the whole HUD here is what left
+            // the flagship kit writing its score into a detached node from the first
+            // play-again onwards.
+            hud.resetRun();
+            platform.rearm();
+            accumulator = 0;
+            time.elapsed = 0;
+            time.frame = 0;
+            running = true;
+            options.restart?.(game);
+        },
+        pause() {
+            running = false;
+        },
+        resume() {
+            lastTime = performance.now();
+            running = true;
+        },
+        dispose() {
+            if (disposed)
+                return;
+            disposed = true;
+            renderer.setAnimationLoop(null);
+            offResize();
+            offPlayAgain();
+            offMute();
+            offInfo();
+            document.removeEventListener('visibilitychange', onVisibility);
+            transient.dispose();
+            input.dispose();
+            hud.dispose();
+            audio.dispose();
+            viewport.dispose();
+            renderer.dispose();
+            canvas.remove();
+        },
+    };
+    // The first press is the only moment a mobile browser will let us start
+    // audio, so it is wired here rather than left to every game to remember.
+    input.on('press', () => {
+        void audio.unlock();
+    });
+    const offPlayAgain = platform.onPlayAgain(() => game.restart());
+    const offMute = platform.onToggleMute((muted) => audio.setMuted(muted));
+    const offInfo = platform.onGameInfo((info) => viewport.setSafeArea(info.contentSafeAreaInset));
+    const onVisibility = () => {
+        if (document.visibilityState === 'hidden') {
+            running = false;
+        }
+        else {
+            // Reset the clock: without this the accumulator sees the whole
+            // backgrounded interval as one frame.
+            lastTime = performance.now();
+            running = true;
+        }
+    };
+    document.addEventListener('visibilitychange', onVisibility);
+    if (options.assets)
+        await assets.load(options.assets, options.onProgress);
+    const info = await platform.ready();
+    viewport.setSafeArea(info.contentSafeAreaInset);
+    await options.setup(game);
+    // Everything the game built during `setup` — HUD included — outlives a run.
+    hud.sealSetup();
+    lastTime = performance.now();
+    running = true;
+    renderer.setAnimationLoop((now) => {
+        const dt = Math.max((now - lastTime) / 1000, 0);
+        lastTime = now;
+        time.delta = dt;
+        let alpha = 1;
+        if (running) {
+            const result = stepClock(accumulator, dt, fixedStep, maxStepsPerFrame);
+            accumulator = result.accumulator;
+            alpha = result.alpha;
+            for (let i = 0; i < result.steps; i++) {
+                time.elapsed += fixedStep;
+                options.update?.(game, fixedStep);
+            }
+        }
+        rig.update(dt);
+        options.render?.(game, dt, alpha);
+        renderer.render(scene, rig.camera);
+        time.frame++;
+    });
+    return game;
+}
+/** Full-bleed, non-scrolling, non-selectable — the shape a game needs. */
+function prepareContainer(container) {
+    const style = document.documentElement.style;
+    style.setProperty('height', '100%');
+    document.body.style.margin = '0';
+    document.body.style.height = '100%';
+    document.body.style.overflow = 'hidden';
+    document.body.style.overscrollBehavior = 'none';
+    document.body.style.userSelect = 'none';
+    document.body.style.setProperty('-webkit-tap-highlight-color', 'transparent');
+    if (container === document.body) {
+        container.style.position = 'relative';
+        return;
+    }
+    container.style.position = 'relative';
+    container.style.width = '100%';
+    container.style.height = '100%';
+}

package/dist/hud/index.d.ts

@@ -0,0 +1,72 @@
+import type { Viewport } from '../viewport.js';
+export type HudAnchor = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
+export type HudLayerOptions = {
+    interactive?: boolean;
+};
+export type HudScore = {
+    el: HTMLDivElement;
+    set(value: number): void;
+};
+export type HudChip = {
+    el: HTMLDivElement;
+    set(text: string): void;
+};
+export type HudBanner = {
+    el: HTMLDivElement;
+    dismiss(): void;
+};
+/**
+ * DOM overlay HUD.
+ *
+ * DOM rather than canvas text: an SDF atlas is heavier, blurrier, and cannot
+ * use the design system. The overlay is anchored to the platform's content safe
+ * area, so nothing the player must read ever sits under a notch, a home
+ * indicator, or the Remix shell's own chrome.
+ */
+export type Hud = {
+    readonly root: HTMLDivElement;
+    layer(anchor: HudAnchor, options?: HudLayerOptions): HTMLDivElement;
+    score(options?: {
+        anchor?: HudAnchor;
+        format?: (value: number) => string;
+    }): HudScore;
+    chip(text: string, options?: {
+        anchor?: HudAnchor;
+    }): HudChip;
+    button(label: string, onTap: () => void, options?: {
+        anchor?: HudAnchor;
+        variant?: 'default' | 'cta' | 'ghost';
+    }): HTMLButtonElement;
+    banner(title: string, subtitle?: string): HudBanner;
+    /**
+     * Removes everything the game added, including the elements built in `setup`.
+     *
+     * `restart()` does NOT call this — it clears only what the run added. See
+     * `HudRuntime`.
+     */
+    clear(): void;
+    dispose(): void;
+};
+/**
+ * What `createGame` drives; a game only ever sees `Hud`.
+ *
+ * The HUD has the same persistent/transient split the scene has, and for the
+ * same reason. `restart()` used to call `clear()`, which detached everything —
+ * including the score built in `setup`, which is where every kit and every LLM
+ * following one builds it. The handle kept working, the writes kept landing,
+ * and they landed on a node that was no longer in the document: the second run
+ * of a game silently had no score, on the platform's most-pressed button.
+ *
+ * So `setup`-time elements are persistent, exactly like the meshes a game adds
+ * to the scene in `setup`, and anything created during a run is transient,
+ * exactly like the meshes a game registers in `game.transient`. One rule for
+ * both halves of a game means one thing to remember.
+ */
+export type HudRuntime = Hud & {
+    /** Everything created from here on belongs to the run, not to the game. */
+    sealSetup(): void;
+    /** Drops what the run added and leaves the `setup`-time HUD attached. */
+    resetRun(): void;
+};
+export declare function createHud(container: HTMLElement, viewport: Viewport): HudRuntime;
+//# sourceMappingURL=index.d.ts.map

package/dist/hud/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hud/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAG9C,MAAM,MAAM,SAAS,GACjB,UAAU,GACV,KAAK,GACL,WAAW,GACX,MAAM,GACN,QAAQ,GACR,OAAO,GACP,aAAa,GACb,QAAQ,GACR,cAAc,CAAA;AAElB,MAAM,MAAM,eAAe,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAEvD,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,cAAc,CAAC;IAAC,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAA;AACvE,MAAM,MAAM,OAAO,GAAG;IAAE,EAAE,EAAE,cAAc,CAAC;IAAC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAA;AACrE,MAAM,MAAM,SAAS,GAAG;IAAE,EAAE,EAAE,cAAc,CAAC;IAAC,OAAO,IAAI,IAAI,CAAA;CAAE,CAAA;AAE/D;;;;;;;GAOG;AACH,MAAM,MAAM,GAAG,GAAG;IAChB,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAA;IAC7B,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,cAAc,CAAA;IACnE,KAAK,CAAC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,SAAS,CAAC;QAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;KAAE,GAAG,QAAQ,CAAA;IACrF,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,SAAS,CAAA;KAAE,GAAG,OAAO,CAAA;IAC7D,MAAM,CACJ,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,IAAI,EACjB,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,OAAO,CAAA;KAAE,GACtE,iBAAiB,CAAA;IACpB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACnD;;;;;OAKG;IACH,KAAK,IAAI,IAAI,CAAA;IACb,OAAO,IAAI,IAAI,CAAA;CAChB,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG;IAC7B,2EAA2E;IAC3E,SAAS,IAAI,IAAI,CAAA;IACjB,yEAAyE;IACzE,QAAQ,IAAI,IAAI,CAAA;CACjB,CAAA;AAOD,wBAAgB,SAAS,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAG,UAAU,CAqJhF"}

package/dist/hud/index.js

@@ -0,0 +1,142 @@
+import { HUD_CSS } from './styles.js';
+const STYLE_ID = 'rx-hud-style';
+/** Marks a node as belonging to the current run rather than to `setup`. */
+const RUN_ATTRIBUTE = 'data-rx-run';
+export function createHud(container, viewport) {
+    if (!document.getElementById(STYLE_ID)) {
+        const style = document.createElement('style');
+        style.id = STYLE_ID;
+        style.textContent = HUD_CSS;
+        document.head.append(style);
+    }
+    const root = document.createElement('div');
+    root.className = 'rx-hud';
+    container.append(root);
+    const layers = new Map();
+    let sealed = false;
+    /**
+     * Ownership is an attribute on the node, not a list held here. A game removes
+     * HUD elements by hand (`banner.dismiss()`, `el.remove()`), and a list would
+     * keep every one of those detached nodes alive until the next restart.
+     */
+    function own(el) {
+        if (sealed)
+            el.setAttribute(RUN_ATTRIBUTE, '');
+        return el;
+    }
+    function sync() {
+        const { safeArea, hudScale } = viewport;
+        root.style.setProperty('--rx-safe-top', `${safeArea.top}px`);
+        root.style.setProperty('--rx-safe-right', `${safeArea.right}px`);
+        root.style.setProperty('--rx-safe-bottom', `${safeArea.bottom}px`);
+        root.style.setProperty('--rx-safe-left', `${safeArea.left}px`);
+        // The HUD scales with the rendered design box, so a 900px-wide desktop
+        // window and a 393px phone show the same layout at proportional size.
+        root.style.setProperty('--rx-hud-scale', hudScale.toFixed(4));
+    }
+    sync();
+    const offResize = viewport.on('resize', sync);
+    function layerFor(anchor, options = {}) {
+        const existing = layers.get(anchor);
+        if (existing) {
+            if (options.interactive)
+                existing.dataset.interactive = 'true';
+            return existing;
+        }
+        const layer = own(document.createElement('div'));
+        layer.className = 'rx-hud-layer';
+        layer.dataset.anchor = anchor;
+        layer.style.gridArea = anchor;
+        if (options.interactive)
+            layer.dataset.interactive = 'true';
+        root.append(layer);
+        layers.set(anchor, layer);
+        return layer;
+    }
+    return {
+        root,
+        layer: layerFor,
+        score(options = {}) {
+            const format = options.format ?? ((value) => String(Math.floor(value)));
+            const el = own(document.createElement('div'));
+            el.className = 'rx-hud-score';
+            el.textContent = format(0);
+            layerFor(options.anchor ?? 'top').append(el);
+            return {
+                el,
+                set(value) {
+                    const next = format(value);
+                    // Guard the write: assigning identical text still invalidates layout,
+                    // and this runs every frame in most games.
+                    if (el.textContent !== next)
+                        el.textContent = next;
+                },
+            };
+        },
+        chip(text, options = {}) {
+            const el = own(document.createElement('div'));
+            el.className = 'rx-hud-chip';
+            el.textContent = text;
+            layerFor(options.anchor ?? 'top-left').append(el);
+            return {
+                el,
+                set(next) {
+                    if (el.textContent !== next)
+                        el.textContent = next;
+                },
+            };
+        },
+        button(label, onTap, options = {}) {
+            const el = own(document.createElement('button'));
+            el.type = 'button';
+            el.className = 'rx-hud-button';
+            el.dataset.variant = options.variant ?? 'default';
+            el.textContent = label;
+            // pointerup, not click: a click fires ~300ms later on some mobile
+            // WebViews and after the game has already moved on.
+            el.addEventListener('pointerup', (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                onTap();
+            });
+            layerFor(options.anchor ?? 'bottom', { interactive: true }).append(el);
+            return el;
+        },
+        banner(title, subtitle) {
+            const el = own(document.createElement('div'));
+            el.className = 'rx-hud-banner';
+            const titleEl = document.createElement('div');
+            titleEl.className = 'rx-hud-banner-title';
+            titleEl.textContent = title;
+            el.append(titleEl);
+            if (subtitle) {
+                const subtitleEl = document.createElement('div');
+                subtitleEl.className = 'rx-hud-banner-subtitle';
+                subtitleEl.textContent = subtitle;
+                el.append(subtitleEl);
+            }
+            root.append(el);
+            return { el, dismiss: () => el.remove() };
+        },
+        sealSetup() {
+            sealed = true;
+        },
+        resetRun() {
+            for (const el of Array.from(root.querySelectorAll(`[${RUN_ATTRIBUTE}]`)))
+                el.remove();
+            for (const [anchor, layer] of layers) {
+                if (layer.hasAttribute(RUN_ATTRIBUTE))
+                    layers.delete(anchor);
+            }
+        },
+        clear() {
+            root.replaceChildren();
+            layers.clear();
+        },
+        dispose() {
+            offResize();
+            root.remove();
+            layers.clear();
+        },
+    };
+}

package/dist/hud/styles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The single stylesheet the HUD injects.
+ *
+ * The Remix tokens are literal values, not an import of
+ * `@farcade/design-tokens`: this package publishes to npm, and the repo rule is
+ * that a public package must not carry a `workspace:` dependency.
+ *
+ * Fonts are named, not embedded. Outfit is the design system's body face and
+ * resolves in the Remix shell and the desktop preview; the fallback stack keeps
+ * a bare-file build from rendering in a serif. Embedding a subset would remove
+ * the fallback risk entirely at ~55 KB — see AGENTS.md.
+ */
+export declare const HUD_CSS = "\n.rx-hud {\n  --rx-black: #060b0f;\n  --rx-white: #fafafa;\n  --rx-lime: #b6ff00;\n  --rx-section: #171717;\n  --rx-secondary: #27272a;\n  --rx-muted: #a1a1aa;\n  --rx-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n  --rx-hud-scale: 1;\n  --rx-safe-top: 0px;\n  --rx-safe-right: 0px;\n  --rx-safe-bottom: 0px;\n  --rx-safe-left: 0px;\n\n  position: absolute;\n  inset: 0;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  grid-template-columns: auto 1fr auto;\n  grid-template-areas:\n    'top-left top top-right'\n    'left center right'\n    'bottom-left bottom bottom-right';\n  /* env() first so the notch is respected from frame one, then the platform's\n     own contentSafeAreaInset lands ~a few frames later and transitions in. The\n     150ms makes the correction read as motion instead of a snap. */\n  padding-top: max(var(--rx-safe-top), env(safe-area-inset-top, 0px));\n  padding-right: max(var(--rx-safe-right), env(safe-area-inset-right, 0px));\n  padding-bottom: max(var(--rx-safe-bottom), env(safe-area-inset-bottom, 0px));\n  padding-left: max(var(--rx-safe-left), env(safe-area-inset-left, 0px));\n  transition: padding 150ms ease-out;\n  pointer-events: none;\n  user-select: none;\n  -webkit-user-select: none;\n  font-family: var(--rx-font);\n  color: var(--rx-white);\n  z-index: 10;\n}\n\n.rx-hud-layer {\n  display: flex;\n  flex-direction: column;\n  gap: calc(8px * var(--rx-hud-scale));\n  padding: calc(12px * var(--rx-hud-scale));\n  pointer-events: none;\n}\n.rx-hud-layer[data-interactive='true'] { pointer-events: auto; }\n\n.rx-hud-layer[data-anchor^='top'] { align-self: start; }\n.rx-hud-layer[data-anchor^='bottom'] { align-self: end; }\n.rx-hud-layer[data-anchor$='left'] { align-items: flex-start; justify-self: start; }\n.rx-hud-layer[data-anchor$='right'] { align-items: flex-end; justify-self: end; }\n.rx-hud-layer[data-anchor='top'],\n.rx-hud-layer[data-anchor='bottom'],\n.rx-hud-layer[data-anchor='center'] { align-items: center; justify-self: center; }\n.rx-hud-layer[data-anchor='left'] { align-items: flex-start; align-self: center; }\n.rx-hud-layer[data-anchor='right'] { align-items: flex-end; align-self: center; }\n.rx-hud-layer[data-anchor='center'] { align-self: center; }\n\n.rx-hud-score {\n  font-size: calc(40px * var(--rx-hud-scale));\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: -0.02em;\n  font-variant-numeric: tabular-nums;\n}\n\n.rx-hud-chip {\n  font-size: calc(14px * var(--rx-hud-scale));\n  font-weight: 500;\n  line-height: 1;\n  padding: calc(6px * var(--rx-hud-scale)) calc(10px * var(--rx-hud-scale));\n  border-radius: calc(6px * var(--rx-hud-scale));\n  background: color-mix(in srgb, var(--rx-black) 60%, transparent);\n  border: 1px solid var(--rx-secondary);\n  color: var(--rx-white);\n}\n\n.rx-hud-button {\n  font-family: var(--rx-font);\n  font-size: calc(16px * var(--rx-hud-scale));\n  font-weight: 600;\n  line-height: 1;\n  padding: calc(12px * var(--rx-hud-scale)) calc(20px * var(--rx-hud-scale));\n  border-radius: calc(6px * var(--rx-hud-scale));\n  border: none;\n  background: var(--rx-white);\n  color: var(--rx-black);\n  pointer-events: auto;\n  cursor: pointer;\n  touch-action: manipulation;\n  transition: transform 150ms ease-out, opacity 150ms ease-out;\n  /* 44px is the smallest reliable touch target; scaled type must not shrink\n     below it or the button becomes a coin flip on a phone. */\n  min-height: calc(44px * var(--rx-hud-scale));\n}\n.rx-hud-button:active { transform: scale(0.98); }\n.rx-hud-button[data-variant='cta'] { background: var(--rx-lime); color: var(--rx-black); }\n.rx-hud-button[data-variant='ghost'] {\n  background: transparent;\n  color: var(--rx-white);\n  border: 1px solid var(--rx-secondary);\n}\n\n.rx-hud-banner {\n  grid-area: center;\n  align-self: center;\n  justify-self: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: calc(8px * var(--rx-hud-scale));\n  padding: calc(24px * var(--rx-hud-scale));\n  border-radius: calc(16px * var(--rx-hud-scale));\n  background: color-mix(in srgb, var(--rx-section) 92%, transparent);\n  border: 1px solid var(--rx-secondary);\n  text-align: center;\n  pointer-events: auto;\n}\n.rx-hud-banner-title {\n  font-size: calc(30px * var(--rx-hud-scale));\n  font-weight: 600;\n  line-height: 1.25;\n}\n.rx-hud-banner-subtitle {\n  font-size: calc(16px * var(--rx-hud-scale));\n  color: var(--rx-muted);\n}\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/hud/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/hud/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,03IAiInB,CAAA"}

package/dist/hud/styles.js

@@ -0,0 +1,142 @@
+/**
+ * The single stylesheet the HUD injects.
+ *
+ * The Remix tokens are literal values, not an import of
+ * `@farcade/design-tokens`: this package publishes to npm, and the repo rule is
+ * that a public package must not carry a `workspace:` dependency.
+ *
+ * Fonts are named, not embedded. Outfit is the design system's body face and
+ * resolves in the Remix shell and the desktop preview; the fallback stack keeps
+ * a bare-file build from rendering in a serif. Embedding a subset would remove
+ * the fallback risk entirely at ~55 KB — see AGENTS.md.
+ */
+export const HUD_CSS = `
+.rx-hud {
+  --rx-black: #060b0f;
+  --rx-white: #fafafa;
+  --rx-lime: #b6ff00;
+  --rx-section: #171717;
+  --rx-secondary: #27272a;
+  --rx-muted: #a1a1aa;
+  --rx-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --rx-hud-scale: 1;
+  --rx-safe-top: 0px;
+  --rx-safe-right: 0px;
+  --rx-safe-bottom: 0px;
+  --rx-safe-left: 0px;
+
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas:
+    'top-left top top-right'
+    'left center right'
+    'bottom-left bottom bottom-right';
+  /* env() first so the notch is respected from frame one, then the platform's
+     own contentSafeAreaInset lands ~a few frames later and transitions in. The
+     150ms makes the correction read as motion instead of a snap. */
+  padding-top: max(var(--rx-safe-top), env(safe-area-inset-top, 0px));
+  padding-right: max(var(--rx-safe-right), env(safe-area-inset-right, 0px));
+  padding-bottom: max(var(--rx-safe-bottom), env(safe-area-inset-bottom, 0px));
+  padding-left: max(var(--rx-safe-left), env(safe-area-inset-left, 0px));
+  transition: padding 150ms ease-out;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+  font-family: var(--rx-font);
+  color: var(--rx-white);
+  z-index: 10;
+}
+
+.rx-hud-layer {
+  display: flex;
+  flex-direction: column;
+  gap: calc(8px * var(--rx-hud-scale));
+  padding: calc(12px * var(--rx-hud-scale));
+  pointer-events: none;
+}
+.rx-hud-layer[data-interactive='true'] { pointer-events: auto; }
+
+.rx-hud-layer[data-anchor^='top'] { align-self: start; }
+.rx-hud-layer[data-anchor^='bottom'] { align-self: end; }
+.rx-hud-layer[data-anchor$='left'] { align-items: flex-start; justify-self: start; }
+.rx-hud-layer[data-anchor$='right'] { align-items: flex-end; justify-self: end; }
+.rx-hud-layer[data-anchor='top'],
+.rx-hud-layer[data-anchor='bottom'],
+.rx-hud-layer[data-anchor='center'] { align-items: center; justify-self: center; }
+.rx-hud-layer[data-anchor='left'] { align-items: flex-start; align-self: center; }
+.rx-hud-layer[data-anchor='right'] { align-items: flex-end; align-self: center; }
+.rx-hud-layer[data-anchor='center'] { align-self: center; }
+
+.rx-hud-score {
+  font-size: calc(40px * var(--rx-hud-scale));
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+
+.rx-hud-chip {
+  font-size: calc(14px * var(--rx-hud-scale));
+  font-weight: 500;
+  line-height: 1;
+  padding: calc(6px * var(--rx-hud-scale)) calc(10px * var(--rx-hud-scale));
+  border-radius: calc(6px * var(--rx-hud-scale));
+  background: color-mix(in srgb, var(--rx-black) 60%, transparent);
+  border: 1px solid var(--rx-secondary);
+  color: var(--rx-white);
+}
+
+.rx-hud-button {
+  font-family: var(--rx-font);
+  font-size: calc(16px * var(--rx-hud-scale));
+  font-weight: 600;
+  line-height: 1;
+  padding: calc(12px * var(--rx-hud-scale)) calc(20px * var(--rx-hud-scale));
+  border-radius: calc(6px * var(--rx-hud-scale));
+  border: none;
+  background: var(--rx-white);
+  color: var(--rx-black);
+  pointer-events: auto;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: transform 150ms ease-out, opacity 150ms ease-out;
+  /* 44px is the smallest reliable touch target; scaled type must not shrink
+     below it or the button becomes a coin flip on a phone. */
+  min-height: calc(44px * var(--rx-hud-scale));
+}
+.rx-hud-button:active { transform: scale(0.98); }
+.rx-hud-button[data-variant='cta'] { background: var(--rx-lime); color: var(--rx-black); }
+.rx-hud-button[data-variant='ghost'] {
+  background: transparent;
+  color: var(--rx-white);
+  border: 1px solid var(--rx-secondary);
+}
+
+.rx-hud-banner {
+  grid-area: center;
+  align-self: center;
+  justify-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(8px * var(--rx-hud-scale));
+  padding: calc(24px * var(--rx-hud-scale));
+  border-radius: calc(16px * var(--rx-hud-scale));
+  background: color-mix(in srgb, var(--rx-section) 92%, transparent);
+  border: 1px solid var(--rx-secondary);
+  text-align: center;
+  pointer-events: auto;
+}
+.rx-hud-banner-title {
+  font-size: calc(30px * var(--rx-hud-scale));
+  font-weight: 600;
+  line-height: 1.25;
+}
+.rx-hud-banner-subtitle {
+  font-size: calc(16px * var(--rx-hud-scale));
+  color: var(--rx-muted);
+}
+`;

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `@remix-gg/three` — the Remix Three.js SDK for portrait mobile games.
+ *
+ * This barrel deliberately does NOT re-export the three namespace. Reach three
+ * only through the dedicated subpath:
+ *
+ *   import * as THREE from '@remix-gg/three/three'
+ *
+ * See `src/three.ts` for the measured reason.
+ */
+export { createGame, type RemixGame, type RemixGameOptions } from './game.js';
+export { stepClock, MAX_FRAME_DELTA, type StepResult } from './loop.js';
+export { createViewport, fitFrustum, safeRectOf, DEFAULT_DESIGN, type DesignBox, type FitMode, type FrustumFit, type Rect, type Viewport, } from './viewport.js';
+export { fitBounds, followRig, orthoRig, portraitRig, type CameraRig, type FollowRigOptions, type GameCamera, type OrthoRigOptions, type PortraitRigOptions, } from './camera.js';
+export { createGestureState, reduceGestures, DEFAULT_THRESHOLDS, type GestureEvent, type GestureEventMap, type GestureState, type GestureThresholds, type PointerSample, } from './input/gestures.js';
+export type { DragEvent, Input, PinchEvent, Pointer, SwipeDirection, SwipeEvent, TapEvent, } from './input/index.js';
+export { createAssets, type AssetManifest, type Assets } from './assets.js';
+export { createEscalatingChance, createPityTimer, createShuffleBag, seededRandom, type EscalatingChance, type EscalatingChanceOptions, type PityTimer, type PityTimerOptions, type ShuffleBag, type ShuffleBagEntry, type ShuffleBagOptions, } from './random.js';
+export { createHitStop, createTweens, easings, shakeRig, type Easing, type EasingName, type HitStop, type ShakeRig, type ShakeRigOptions, type TweenHandle, type TweenOptions, type Tweens, } from './juice.js';
+export { createRamp, type RampOptions } from './ramp.js';
+export { createGraceWindow, createInputBuffer, type GraceWindow, type InputBuffer, } from './forgiveness.js';
+export { createAudio, type AudioBus, type PlayMusicOptions, type PlaySfxOptions, } from './audio.js';
+export { destroy, disposeObject, DisposalScope, type Disposable, type DisposeOptions, } from './scene/dispose.js';
+export { Pool, type PoolOptions } from './scene/pool.js';
+export { applyLighting, blobShadow, type BlobShadow, type Lighting, type LightingOptions, type LightingPreset, } from './scene/lighting.js';
+export { createHud, type Hud, type HudAnchor, type HudBanner, type HudChip, type HudScore, } from './hud/index.js';
+export { HUD_CSS } from './hud/styles.js';
+export { awaitSdk, createPlatform, type Platform } from './platform/index.js';
+export type { FarcadeSDKGlobal, GameInfo, GameState, HapticFeedbackType, InventoryItem, Player, SafeAreaInset, ShopItem, ViewContext, } from './platform/sdk-contract.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,27 @@
+/**
+ * `@remix-gg/three` — the Remix Three.js SDK for portrait mobile games.
+ *
+ * This barrel deliberately does NOT re-export the three namespace. Reach three
+ * only through the dedicated subpath:
+ *
+ *   import * as THREE from '@remix-gg/three/three'
+ *
+ * See `src/three.ts` for the measured reason.
+ */
+export { createGame } from './game.js';
+export { stepClock, MAX_FRAME_DELTA } from './loop.js';
+export { createViewport, fitFrustum, safeRectOf, DEFAULT_DESIGN, } from './viewport.js';
+export { fitBounds, followRig, orthoRig, portraitRig, } from './camera.js';
+export { createGestureState, reduceGestures, DEFAULT_THRESHOLDS, } from './input/gestures.js';
+export { createAssets } from './assets.js';
+export { createEscalatingChance, createPityTimer, createShuffleBag, seededRandom, } from './random.js';
+export { createHitStop, createTweens, easings, shakeRig, } from './juice.js';
+export { createRamp } from './ramp.js';
+export { createGraceWindow, createInputBuffer, } from './forgiveness.js';
+export { createAudio, } from './audio.js';
+export { destroy, disposeObject, DisposalScope, } from './scene/dispose.js';
+export { Pool } from './scene/pool.js';
+export { applyLighting, blobShadow, } from './scene/lighting.js';
+export { createHud, } from './hud/index.js';
+export { HUD_CSS } from './hud/styles.js';
+export { awaitSdk, createPlatform } from './platform/index.js';