@jgengine/shell 0.7.0 → 0.9.0

package/dist/pointer/PointerProbe.js

@@ -5,22 +5,39 @@ export function PointerProbe({ service }) {
     const scene = useThree((state) => state.scene);
     const gl = useThree((state) => state.gl);
     const size = useThree((state) => state.size);
-    service.bind({ camera, scene, width: size.width, height: size.height });
+    useEffect(() => {
+        service.bind({ camera, scene, width: size.width, height: size.height });
+        return () => {
+            service.bind(null);
+        };
+    }, [service, camera, scene, size.width, size.height]);
     useEffect(() => {
         const el = gl.domElement;
+        let locked = false;
         const onMove = (event) => {
+            if (locked)
+                return;
             const rect = el.getBoundingClientRect();
             const x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
             const y = -(((event.clientY - rect.top) / rect.height) * 2 - 1);
             service.setCursor(x, y, true);
         };
-        const onLeave = () => service.setCursor(0, 0, false);
+        const onLeave = () => {
+            if (!locked)
+                service.setCursor(0, 0, false);
+        };
+        const onLockChange = () => {
+            locked = document.pointerLockElement === el;
+            if (locked)
+                service.setCursor(0, 0, true);
+        };
         el.addEventListener("pointermove", onMove);
         el.addEventListener("pointerleave", onLeave);
+        document.addEventListener("pointerlockchange", onLockChange);
         return () => {
             el.removeEventListener("pointermove", onMove);
             el.removeEventListener("pointerleave", onLeave);
-            service.bind(null);
+            document.removeEventListener("pointerlockchange", onLockChange);
         };
     }, [gl, service]);
     return null;

package/dist/pointer/pointerService.d.ts

@@ -2,15 +2,20 @@ import * as THREE from "three";
 import type { PointerHit, PointerVec3 } from "@jgengine/core/input/pointer";
 export declare const POINTER_ENTITY_KEY = "jgEntityId";
 export declare const POINTER_OBJECT_KEY = "jgObjectId";
+export type PointerHitFilter = (object: THREE.Object3D) => boolean;
 interface PointerDeps {
     camera: THREE.Camera;
     scene: THREE.Scene;
     width: number;
     height: number;
+    layers?: THREE.Layers;
+    filter?: PointerHitFilter;
 }
 export interface PointerService {
     /** Cast the current cursor into the world; null when the cursor is off-canvas. */
     worldHit(): PointerHit | null;
+    /** Cast from the viewport center regardless of cursor presence (pointer-lock aim); null before the probe binds. */
+    worldHitCenter(): PointerHit | null;
     /** Project a world point to CSS pixels for the marquee / HUD; null before the probe binds. */
     screenOf(world: PointerVec3): {
         x: number;

package/dist/pointer/pointerService.js

@@ -11,14 +11,60 @@ function tagOf(object, key) {
     }
     return null;
 }
+function standardMaterialSample(material) {
+    const candidates = Array.isArray(material) ? material : [material];
+    const standard = candidates.find((entry) => entry instanceof THREE.MeshStandardMaterial);
+    if (standard === undefined)
+        return null;
+    return { color: `#${standard.color.getHexString()}`, metalness: standard.metalness, roughness: standard.roughness };
+}
 export function createPointerService() {
     const raycaster = new THREE.Raycaster();
     const ndc = new THREE.Vector2();
+    const centerNdc = new THREE.Vector2(0, 0);
     const scratch = new THREE.Vector3();
     const normalMatrix = new THREE.Matrix3();
     const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
     let deps = null;
     let cursorPresent = false;
+    function hitAtNdc(target) {
+        if (deps === null)
+            return null;
+        if (deps.layers !== undefined)
+            raycaster.layers.mask = deps.layers.mask;
+        else
+            raycaster.layers.enableAll();
+        raycaster.setFromCamera(target, deps.camera);
+        const intersects = raycaster.intersectObjects(deps.scene.children, true);
+        for (const hit of intersects) {
+            if (deps.filter !== undefined && !deps.filter(hit.object))
+                continue;
+            const mesh = hit.object;
+            if (!mesh.isMesh)
+                continue;
+            const point = [hit.point.x, hit.point.y, hit.point.z];
+            let normal = [0, 1, 0];
+            if (hit.face !== null && hit.face !== undefined) {
+                normalMatrix.getNormalMatrix(hit.object.matrixWorld);
+                scratch.copy(hit.face.normal).applyMatrix3(normalMatrix).normalize();
+                normal = [scratch.x, scratch.y, scratch.z];
+            }
+            const uv = hit.uv !== undefined ? { u: hit.uv.x, v: hit.uv.y } : undefined;
+            return {
+                point,
+                normal,
+                entity: tagOf(hit.object, POINTER_ENTITY_KEY),
+                object: tagOf(hit.object, POINTER_OBJECT_KEY),
+                ...(uv !== undefined ? { uv } : {}),
+                material: standardMaterialSample(mesh.material),
+                ...(hit.instanceId !== undefined ? { instanceId: hit.instanceId } : {}),
+            };
+        }
+        const grounded = raycaster.ray.intersectPlane(groundPlane, scratch);
+        if (grounded === null)
+            return null;
+        return { point: [grounded.x, grounded.y, grounded.z], normal: [0, 1, 0], entity: null, object: null };
+    }
     return {
         hasCursor: () => cursorPresent,
         bind: (next) => {
@@ -29,31 +75,12 @@ export function createPointerService() {
             cursorPresent = present;
         },
         worldHit() {
-            if (deps === null || !cursorPresent)
-                return null;
-            raycaster.setFromCamera(ndc, deps.camera);
-            const intersects = raycaster.intersectObjects(deps.scene.children, true);
-            for (const hit of intersects) {
-                if (!hit.object.isMesh)
-                    continue;
-                const point = [hit.point.x, hit.point.y, hit.point.z];
-                let normal = [0, 1, 0];
-                if (hit.face !== null && hit.face !== undefined) {
-                    normalMatrix.getNormalMatrix(hit.object.matrixWorld);
-                    scratch.copy(hit.face.normal).applyMatrix3(normalMatrix).normalize();
-                    normal = [scratch.x, scratch.y, scratch.z];
-                }
-                return {
-                    point,
-                    normal,
-                    entity: tagOf(hit.object, POINTER_ENTITY_KEY),
-                    object: tagOf(hit.object, POINTER_OBJECT_KEY),
-                };
-            }
-            const grounded = raycaster.ray.intersectPlane(groundPlane, scratch);
-            if (grounded === null)
+            if (!cursorPresent)
                 return null;
-            return { point: [grounded.x, grounded.y, grounded.z], normal: [0, 1, 0], entity: null, object: null };
+            return hitAtNdc(ndc);
+        },
+        worldHitCenter() {
+            return hitAtNdc(centerNdc);
         },
         screenOf(world) {
             if (deps === null)

package/dist/registry.d.ts

@@ -1,6 +1,9 @@
 import type { ComponentType, ReactNode } from "react";
 import type { PlayableGame as EnginePlayableGame } from "@jgengine/core/game/playableGame";
 import type { SceneEntity } from "@jgengine/core/scene/entityStore";
+import type { SceneObject } from "@jgengine/core/scene/objectStore";
 export type RenderEntity = (entity: SceneEntity) => ReactNode;
-export type PlayableGame = EnginePlayableGame<ComponentType, ComponentType, RenderEntity>;
+export type RenderObject = (object: SceneObject) => ReactNode;
+export type PlayableGame = EnginePlayableGame<ComponentType, ComponentType, RenderEntity, RenderObject>;
 export type GameRegistry = Record<string, () => Promise<PlayableGame>>;
+export declare function resolveGameLoader(registry: GameRegistry, gameId: string, fallbackGameId?: string): (() => Promise<PlayableGame>) | undefined;

package/dist/registry.js

@@ -1 +1,3 @@
-export {};
+export function resolveGameLoader(registry, gameId, fallbackGameId) {
+    return registry[gameId] ?? (fallbackGameId === undefined ? undefined : registry[fallbackGameId]);
+}

package/dist/render/modelRender.d.ts

@@ -0,0 +1,23 @@
+import * as THREE from "three";
+import type { PaintStroke } from "@jgengine/core/scene/paintLayer";
+export declare const PAINT_TEXTURE_SIZE = 512;
+export declare function cloneModelScene(source: THREE.Object3D, options?: {
+    cloneMaterials?: boolean;
+}): THREE.Object3D;
+export declare function disposeClonedMaterials(root: THREE.Object3D): void;
+export declare function standardMaterialsOf(root: THREE.Object3D): THREE.MeshStandardMaterial[];
+export interface MaterialCache {
+    materials: THREE.MeshStandardMaterial[];
+    seedColor: THREE.Color;
+}
+export declare function cacheStandardMaterials(root: THREE.Object3D, into?: MaterialCache | null): MaterialCache;
+export declare function applyPaintTextureToMaterials(materials: readonly THREE.MeshStandardMaterial[], paint: PaintCanvas): void;
+export interface PaintCanvas {
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+    texture: THREE.CanvasTexture;
+}
+export declare function createPaintCanvas(seed: THREE.MeshStandardMaterial, size?: number): PaintCanvas;
+export declare function drawPaintStrokes(paint: PaintCanvas, strokes: readonly PaintStroke[]): void;
+export declare function applyPaintTexture(root: THREE.Object3D, paint: PaintCanvas): void;
+export declare function syncPaintCanvas(paint: PaintCanvas, seedColor: THREE.Color, strokes: readonly PaintStroke[], drawnCount: number): number;

package/dist/render/modelRender.js

@@ -0,0 +1,106 @@
+import * as THREE from "three";
+import { clone as cloneSkinned } from "three/examples/jsm/utils/SkeletonUtils.js";
+export const PAINT_TEXTURE_SIZE = 512;
+export function cloneModelScene(source, options) {
+    const clone = cloneSkinned(source);
+    if (options?.cloneMaterials === false)
+        return clone;
+    clone.traverse((node) => {
+        const mesh = node;
+        if (!mesh.isMesh)
+            return;
+        mesh.material = Array.isArray(mesh.material)
+            ? mesh.material.map((material) => material.clone())
+            : mesh.material.clone();
+    });
+    return clone;
+}
+export function disposeClonedMaterials(root) {
+    const seen = new Set();
+    root.traverse((node) => {
+        const mesh = node;
+        if (!mesh.isMesh)
+            return;
+        const list = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+        for (const material of list) {
+            if (seen.has(material))
+                continue;
+            seen.add(material);
+            material.dispose();
+        }
+    });
+}
+function isMeshStandardMaterial(material) {
+    return material.isMeshStandardMaterial === true;
+}
+export function standardMaterialsOf(root) {
+    const materials = [];
+    root.traverse((node) => {
+        const mesh = node;
+        if (!mesh.isMesh)
+            return;
+        const list = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+        for (const material of list)
+            if (isMeshStandardMaterial(material))
+                materials.push(material);
+    });
+    return materials;
+}
+export function cacheStandardMaterials(root, into) {
+    if (into !== null && into !== undefined)
+        return into;
+    const materials = standardMaterialsOf(root);
+    const seedColor = materials[0]?.color.clone() ?? new THREE.Color("#ffffff");
+    return { materials, seedColor };
+}
+export function applyPaintTextureToMaterials(materials, paint) {
+    for (const material of materials) {
+        material.map = paint.texture;
+        material.needsUpdate = true;
+    }
+}
+export function createPaintCanvas(seed, size = PAINT_TEXTURE_SIZE) {
+    const canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    const context = canvas.getContext("2d");
+    const seedImage = seed.map?.image;
+    if (seedImage !== undefined && seedImage.width) {
+        context.drawImage(seedImage, 0, 0, size, size);
+    }
+    else {
+        context.fillStyle = `#${seed.color.getHexString()}`;
+        context.fillRect(0, 0, size, size);
+    }
+    const texture = new THREE.CanvasTexture(canvas);
+    texture.colorSpace = seed.map?.colorSpace ?? THREE.SRGBColorSpace;
+    return { canvas, context, texture };
+}
+export function drawPaintStrokes(paint, strokes) {
+    const { canvas, context, texture } = paint;
+    for (const stroke of strokes) {
+        context.fillStyle = stroke.color;
+        context.beginPath();
+        context.arc(stroke.u * canvas.width, (1 - stroke.v) * canvas.height, stroke.radius * canvas.width, 0, Math.PI * 2);
+        context.fill();
+    }
+    texture.needsUpdate = true;
+}
+export function applyPaintTexture(root, paint) {
+    applyPaintTextureToMaterials(standardMaterialsOf(root), paint);
+}
+export function syncPaintCanvas(paint, seedColor, strokes, drawnCount) {
+    if (strokes.length < drawnCount) {
+        const { canvas, context } = paint;
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.fillStyle = `#${seedColor.getHexString()}`;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        drawPaintStrokes(paint, strokes);
+        return strokes.length;
+    }
+    if (strokes.length > drawnCount) {
+        drawPaintStrokes(paint, strokes.slice(drawnCount));
+        return strokes.length;
+    }
+    return drawnCount;
+}

package/dist/render/resolveModel.d.ts

@@ -0,0 +1,14 @@
+import type { AssetCatalog } from "@jgengine/core/scene/assetCatalog";
+import type { ModelConfig } from "@jgengine/core/game/playableGame";
+export interface ModelResolveContext {
+    seam: "entityModels" | "objectModels";
+    key: string;
+}
+/**
+ * Resolve a string asset id or a direct ModelConfig. Missing/misspelled catalog
+ * ids throw — silent generic-primitive fallback only happens when the mapping
+ * omits the key entirely (or uses tryResolveCatalogModel for optional ids).
+ */
+export declare function resolveModel(value: string | ModelConfig | undefined, assets: AssetCatalog, context?: ModelResolveContext): ModelConfig | undefined;
+/** Soft lookup used when an object catalog id may double as a model asset id. */
+export declare function tryResolveCatalogModel(id: string, assets: AssetCatalog): ModelConfig | undefined;

package/dist/render/resolveModel.js

@@ -0,0 +1,24 @@
+/**
+ * Resolve a string asset id or a direct ModelConfig. Missing/misspelled catalog
+ * ids throw — silent generic-primitive fallback only happens when the mapping
+ * omits the key entirely (or uses tryResolveCatalogModel for optional ids).
+ */
+export function resolveModel(value, assets, context) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value !== "string")
+        return value;
+    const ref = assets.resolve(value);
+    if (ref === null) {
+        const where = context === undefined ? `model asset "${value}"` : `${context.seam}["${context.key}"] → "${value}"`;
+        throw new Error(`[jgengine] missing ${where} — not in the asset catalog. Fix the id, register it, or omit the mapping to keep the deliberate primitive/sprite fallback.`);
+    }
+    return ref.dims === undefined ? { url: ref.url } : { url: ref.url, dims: ref.dims };
+}
+/** Soft lookup used when an object catalog id may double as a model asset id. */
+export function tryResolveCatalogModel(id, assets) {
+    const ref = assets.resolve(id);
+    if (ref === null)
+        return undefined;
+    return ref.dims === undefined ? { url: ref.url } : { url: ref.url, dims: ref.dims };
+}

package/dist/settings/QuickControls.d.ts

@@ -0,0 +1,4 @@
+import type { SettingsController } from "./settingsController.js";
+export declare function QuickControls({ controller }: {
+    controller: SettingsController;
+}): import("react").JSX.Element | null;

package/dist/settings/QuickControls.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+function QuickSlider({ row }) {
+    const value = Number(row.value);
+    const readout = row.format?.(value) ?? String(value);
+    return (_jsxs("label", { className: "flex items-center gap-2 text-xs text-neutral-300", children: [_jsx("span", { className: "w-16 shrink-0 truncate", children: row.label }), _jsx("input", { type: "range", min: row.min, max: row.max, step: row.step, value: value, "aria-label": row.label, className: "h-1.5 flex-1 cursor-pointer accent-emerald-400", onChange: (event) => row.set(Number(event.target.value)) }), _jsx("span", { className: "w-9 shrink-0 text-right tabular-nums text-neutral-100", children: readout })] }));
+}
+function QuickToggle({ row }) {
+    const on = Boolean(row.value);
+    return (_jsxs("div", { className: "flex items-center justify-between gap-2 text-xs text-neutral-300", children: [_jsx("span", { className: "truncate", children: row.label }), _jsx("button", { type: "button", role: "switch", "aria-checked": on, "aria-label": row.label, onClick: () => row.set(!on), className: `relative h-6 w-11 shrink-0 rounded-full ring-1 transition ${on ? "bg-emerald-500 ring-emerald-400" : "bg-neutral-700 ring-white/10"}`, children: _jsx("span", { className: `absolute top-1 h-4 w-4 rounded-full bg-white shadow transition-all ${on ? "left-6" : "left-1"}` }) })] }));
+}
+function QuickSelect({ row }) {
+    const options = row.options ?? [];
+    const current = String(row.value);
+    return (_jsxs("div", { className: "flex items-center justify-between gap-2 text-xs text-neutral-300", children: [_jsx("span", { className: "truncate", children: row.label }), _jsx("div", { className: "flex shrink-0 gap-1 rounded-md bg-neutral-950/60 p-0.5 ring-1 ring-white/10", children: options.map((option) => {
+                    const selected = option.value === current;
+                    return (_jsx("button", { type: "button", onClick: () => row.set(option.value), className: `rounded px-2 py-1 font-medium transition ${selected ? "bg-emerald-500 text-neutral-950" : "text-neutral-300 hover:bg-neutral-800"}`, children: option.label }, option.value));
+                }) })] }));
+}
+function QuickRow({ row }) {
+    if (row.kind === "slider")
+        return _jsx(QuickSlider, { row: row });
+    if (row.kind === "toggle")
+        return _jsx(QuickToggle, { row: row });
+    return _jsx(QuickSelect, { row: row });
+}
+function Popover({ children }) {
+    return (_jsx("div", { className: "absolute bottom-12 left-0 w-64 space-y-2.5 rounded-lg bg-neutral-950/90 p-3 shadow-2xl ring-1 ring-white/10 backdrop-blur-sm", children: children }));
+}
+function QuickButton({ label, open, onToggle, children, }) {
+    return (_jsx("button", { type: "button", onClick: onToggle, "aria-label": label, "aria-pressed": open, className: `flex h-11 w-11 items-center justify-center rounded-md text-lg shadow-lg ring-1 backdrop-blur-sm transition ${open ? "bg-emerald-500/20 text-emerald-300 ring-emerald-400/50" : "bg-neutral-950/75 text-neutral-200 ring-white/10 hover:bg-neutral-900/80"}`, children: children }));
+}
+export function QuickControls({ controller }) {
+    const [open, setOpen] = useState(null);
+    const byId = (id) => controller.categories.find((category) => category.id === id);
+    const sound = byId("sound");
+    const graphics = byId("graphics");
+    if (sound === undefined && graphics === undefined)
+        return null;
+    const toggle = (which) => setOpen((current) => (current === which ? null : which));
+    return (_jsxs("div", { className: "pointer-events-auto absolute bottom-3 left-3 z-30 flex items-end gap-2", children: [sound !== undefined ? (_jsxs("div", { className: "relative", children: [open === "volume" ? (_jsx(Popover, { children: sound.rows.map((row) => (_jsx(QuickRow, { row: row }, row.id))) })) : null, _jsx(QuickButton, { label: "Volume", open: open === "volume", onToggle: () => toggle("volume"), children: _jsx("span", { "aria-hidden": true, children: "\uD83D\uDD0A" }) })] })) : null, graphics !== undefined ? (_jsxs("div", { className: "relative", children: [open === "graphics" ? (_jsx(Popover, { children: graphics.rows.map((row) => (_jsx(QuickRow, { row: row }, row.id))) })) : null, _jsx(QuickButton, { label: "Graphics", open: open === "graphics", onToggle: () => toggle("graphics"), children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", className: "h-5 w-5", "aria-hidden": true, children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 3a9 9 0 0 0 0 18M3 12h18M5 6c2 1.5 5 2.5 7 2.5S17 7.5 19 6M5 18c2-1.5 5-2.5 7-2.5s5 1 7 2.5" })] }) })] })) : null] }));
+}

package/dist/settings/SettingsChrome.d.ts

@@ -0,0 +1 @@
+export declare function SettingsChrome(): import("react").JSX.Element | null;

package/dist/settings/SettingsChrome.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSettings } from "@jgengine/react/settings";
+import { QuickControls } from "./QuickControls.js";
+import { SettingsMenu } from "./SettingsMenu.js";
+export function SettingsChrome() {
+    const settings = useSettings();
+    if (settings.categories.length === 0 && settings.actions.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [settings.surface === "quick" ? _jsx(QuickControls, { controller: settings }) : null, settings.isOpen ? _jsx(SettingsMenu, { controller: settings, onClose: settings.close }) : null] }));
+}

package/dist/settings/SettingsMenu.d.ts

@@ -0,0 +1,6 @@
+import { type SettingsController } from "./settingsController.js";
+export declare function SettingsMenu({ controller, onClose, initialTab, }: {
+    controller: SettingsController;
+    onClose: () => void;
+    initialTab?: string;
+}): import("react").JSX.Element | null;

package/dist/settings/SettingsMenu.js

@@ -0,0 +1,148 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import {} from "./settingsController.js";
+const surface = "var(--jg-surface, #16161d)";
+const surfaceDeep = "var(--jg-surface-deep, #0b0b11)";
+const edge = "var(--jg-edge, #2b2b35)";
+const text = "var(--jg-text, #ececef)";
+const textDim = "var(--jg-text-dim, #9494a0)";
+const accent = "var(--jg-accent, #6ee7a8)";
+const accentGlow = "var(--jg-accent-glow, rgba(110,231,168,0.35))";
+const onAccent = "var(--jg-surface-deep, #0b0b0f)";
+const danger = "var(--jg-danger, #e0574e)";
+const fontDisplay = "var(--jg-font-display, inherit)";
+const rowStyle = { background: "rgba(255,255,255,0.045)", border: "1px solid rgba(255,255,255,0.08)" };
+const badgeStyle = { background: surfaceDeep, border: "1px solid rgba(255,255,255,0.12)", color: text };
+function GlyphClose() {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", className: "h-4 w-4", "aria-hidden": true, children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) }));
+}
+function GlyphReset() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "h-3.5 w-3.5", "aria-hidden": true, children: [_jsx("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }), _jsx("path", { d: "M3 3v5h5" })] }));
+}
+function CloseButton({ onClose }) {
+    return (_jsx("button", { type: "button", onClick: onClose, "aria-label": "Close settings", className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition hover:bg-white/10", style: { color: textDim, border: "1px solid rgba(255,255,255,0.1)" }, children: _jsx(GlyphClose, {}) }));
+}
+function RowShell({ label, control }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4 rounded-xl px-3.5 py-3", style: rowStyle, children: [_jsx("span", { className: "text-sm", style: { color: text }, children: label }), control] }));
+}
+function SliderRow({ row }) {
+    const value = Number(row.value);
+    const readout = row.format?.(value) ?? String(value);
+    return (_jsx(RowShell, { label: row.label, control: _jsxs("div", { className: "flex flex-1 items-center gap-3 pl-4", children: [_jsx("input", { type: "range", min: row.min, max: row.max, step: row.step, value: value, "aria-label": row.label, className: "h-1.5 flex-1 cursor-pointer", style: { accentColor: accent }, onChange: (event) => row.set(Number(event.target.value)) }), _jsx("span", { className: "w-12 shrink-0 text-right text-sm tabular-nums", style: { color: text }, children: readout })] }) }));
+}
+function ToggleRow({ row }) {
+    const on = Boolean(row.value);
+    return (_jsx(RowShell, { label: row.label, control: _jsx("button", { type: "button", role: "switch", "aria-checked": on, "aria-label": row.label, onClick: () => row.set(!on), className: "relative h-7 w-12 shrink-0 rounded-full transition", style: { background: on ? accent : "rgba(255,255,255,0.16)", boxShadow: on ? `0 0 12px ${accentGlow}` : "none" }, children: _jsx("span", { className: `absolute top-1 h-5 w-5 rounded-full bg-white shadow transition-all ${on ? "left-6" : "left-1"}` }) }) }));
+}
+function SelectRow({ row }) {
+    const options = row.options ?? [];
+    const current = String(row.value);
+    return (_jsx(RowShell, { label: row.label, control: _jsx("div", { className: "flex shrink-0 gap-1 rounded-lg p-1", style: { background: surfaceDeep }, children: options.map((option) => {
+                const selected = option.value === current;
+                return (_jsx("button", { type: "button", onClick: () => row.set(option.value), className: "min-h-[34px] rounded-md px-3 text-sm font-medium transition", style: selected ? { background: accent, color: onAccent } : { color: textDim }, children: option.label }, option.value));
+            }) }) }));
+}
+function RowControl({ row }) {
+    if (row.kind === "slider")
+        return _jsx(SliderRow, { row: row });
+    if (row.kind === "toggle")
+        return _jsx(ToggleRow, { row: row });
+    return _jsx(SelectRow, { row: row });
+}
+function KeybindRowView({ row, capturing, onCapture, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-xl px-3.5 py-3", style: rowStyle, children: [_jsx("span", { className: "text-sm", style: { color: text }, children: row.label }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx("button", { type: "button", onClick: onCapture, disabled: capturing, title: "Click to rebind \u2014 Esc to cancel", className: "inline-flex min-h-[34px] min-w-[3.75rem] items-center justify-center rounded-lg px-3 font-mono text-sm transition hover:brightness-125", style: capturing
+                            ? { background: accentGlow, color: accent, border: `1px solid ${accent}` }
+                            : badgeStyle, children: capturing ? "Press…" : row.bindingLabel }), _jsx("button", { type: "button", onClick: () => row.reset(), "aria-label": `Reset ${row.label}`, title: "Reset to default", className: `flex h-8 w-8 items-center justify-center rounded-lg transition hover:bg-white/10 ${row.isDefault ? "invisible" : ""}`, style: { color: textDim }, children: _jsx(GlyphReset, {}) })] })] }));
+}
+function ActionRow({ action, onClose }) {
+    const isDanger = action.kind === "danger";
+    return (_jsxs("button", { type: "button", onClick: () => {
+            action.run();
+            onClose();
+        }, className: "flex w-full items-center justify-between gap-3 rounded-xl px-4 py-3.5 text-left transition hover:brightness-110", style: {
+            background: isDanger ? "rgba(224,87,78,0.12)" : "rgba(255,255,255,0.05)",
+            border: `1px solid ${isDanger ? danger : "rgba(255,255,255,0.1)"}`,
+        }, children: [_jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-semibold", style: { color: isDanger ? danger : text }, children: action.label }), action.description !== undefined ? (_jsx("span", { className: "text-xs", style: { color: textDim }, children: action.description })) : null] }), _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4 shrink-0", style: { color: isDanger ? danger : textDim }, "aria-hidden": true, children: _jsx("path", { d: "M9 6l6 6-6 6" }) })] }));
+}
+function TabButton({ tab, selected, orientation, onSelect }) {
+    return (_jsx("button", { type: "button", onClick: onSelect, className: `min-h-[40px] whitespace-nowrap rounded-lg px-4 text-sm font-medium transition ${orientation === "col" ? "w-full text-left" : ""} ${selected ? "" : "hover:bg-white/5"}`, style: selected ? { background: accent, color: onAccent } : { color: textDim }, children: tab.label }));
+}
+function Body({ tab, actions, capturing, setCapturing, onClose }) {
+    return (_jsx("div", { className: "jg-settings-scroll flex-1 space-y-2 overflow-y-auto p-4", children: tab.category === null
+            ? actions.map((action) => _jsx(ActionRow, { action: action, onClose: onClose }, action.id))
+            : (_jsxs(_Fragment, { children: [tab.category.rows.map((row) => (_jsx(RowControl, { row: row }, row.id))), tab.category.keybinds.map((row) => (_jsx(KeybindRowView, { row: row, capturing: capturing?.action === row.action, onCapture: () => setCapturing(row) }, row.action)))] })) }));
+}
+const panelStyle = {
+    background: surface,
+    color: text,
+    border: `1px solid ${edge}`,
+    fontFamily: fontDisplay,
+};
+function Backdrop({ children, onClose, align }) {
+    return (_jsx("div", { className: `pointer-events-auto absolute inset-0 z-40 flex justify-center bg-black/55 p-3 backdrop-blur-sm ${align}`, onClick: onClose, children: children }));
+}
+function stop(event) {
+    event.stopPropagation();
+}
+export function SettingsMenu({ controller, onClose, initialTab, }) {
+    const tabs = [
+        ...(controller.actions.length > 0 ? [{ id: "game", label: "Game", category: null }] : []),
+        ...controller.categories.map((category) => ({ id: category.id, label: category.label, category })),
+    ];
+    const [activeId, setActiveId] = useState(initialTab !== undefined && tabs.some((tab) => tab.id === initialTab) ? initialTab : (tabs[0]?.id ?? ""));
+    const [capturing, setCapturing] = useState(null);
+    const active = tabs.find((tab) => tab.id === activeId) ?? tabs[0] ?? null;
+    useEffect(() => {
+        if (capturing === null)
+            return;
+        const onKey = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.code === "Escape") {
+                setCapturing(null);
+                return;
+            }
+            capturing.rebind(event.code);
+            setCapturing(null);
+        };
+        const onPointer = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            capturing.rebind(`mouse${event.button}`);
+            setCapturing(null);
+        };
+        const onContext = (event) => event.preventDefault();
+        window.addEventListener("keydown", onKey, true);
+        window.addEventListener("pointerdown", onPointer, true);
+        window.addEventListener("contextmenu", onContext, true);
+        return () => {
+            window.removeEventListener("keydown", onKey, true);
+            window.removeEventListener("pointerdown", onPointer, true);
+            window.removeEventListener("contextmenu", onContext, true);
+        };
+    }, [capturing]);
+    useEffect(() => {
+        if (capturing !== null)
+            return;
+        const onKey = (event) => {
+            if (event.code === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [capturing, onClose]);
+    if (active === null)
+        return null;
+    const bodyProps = { tab: active, actions: controller.actions, capturing, setCapturing, onClose };
+    const title = (_jsx("h2", { className: "text-base font-semibold tracking-wide", style: { color: text }, children: "Settings" }));
+    if (controller.variant === "fullscreen") {
+        return (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-40 flex flex-col", style: { background: surface, color: text, fontFamily: fontDisplay }, children: _jsxs("div", { className: "mx-auto flex h-full w-full max-w-2xl flex-col px-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 pb-4 pt-6", children: [_jsx("h2", { className: "text-2xl font-bold tracking-wide", style: { color: text }, children: "Settings" }), _jsx(CloseButton, { onClose: onClose })] }), _jsx("div", { className: "flex gap-1.5 overflow-x-auto pb-4", children: tabs.map((tab) => (_jsx(TabButton, { tab: tab, selected: tab.id === active.id, orientation: "row", onSelect: () => setActiveId(tab.id) }, tab.id))) }), _jsx(Body, { ...bodyProps })] }) }));
+    }
+    if (controller.variant === "sidebar") {
+        return (_jsx(Backdrop, { onClose: onClose, align: "items-center", children: _jsxs("div", { onClick: stop, className: "flex overflow-hidden rounded-2xl shadow-2xl", style: { ...panelStyle, width: "min(94vw, 760px)", height: "min(84vh, 560px)" }, children: [_jsxs("nav", { className: "flex w-44 shrink-0 flex-col gap-1 p-3", style: { background: surfaceDeep, borderRight: `1px solid ${edge}` }, children: [_jsx("span", { className: "px-3 pb-2 pt-1 text-xs font-semibold uppercase tracking-widest", style: { color: textDim }, children: "Settings" }), tabs.map((tab) => (_jsx(TabButton, { tab: tab, selected: tab.id === active.id, orientation: "col", onSelect: () => setActiveId(tab.id) }, tab.id)))] }), _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-3", style: { borderBottom: `1px solid ${edge}` }, children: [_jsx("span", { className: "text-sm font-semibold", style: { color: text }, children: active.label }), _jsx(CloseButton, { onClose: onClose })] }), _jsx(Body, { ...bodyProps })] })] }) }));
+    }
+    if (controller.variant === "sheet") {
+        return (_jsx(Backdrop, { onClose: onClose, align: "items-end", children: _jsxs("div", { onClick: stop, className: "flex flex-col overflow-hidden rounded-t-3xl shadow-2xl", style: { ...panelStyle, width: "min(100%, 640px)", height: "min(84vh, 620px)" }, children: [_jsx("div", { className: "flex flex-col items-center pt-2.5", children: _jsx("span", { className: "h-1.5 w-10 rounded-full", style: { background: "rgba(255,255,255,0.25)" } }) }), _jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-3", children: [title, _jsx(CloseButton, { onClose: onClose })] }), _jsx("div", { className: "flex gap-1.5 overflow-x-auto px-4 pb-3", children: tabs.map((tab) => (_jsx(TabButton, { tab: tab, selected: tab.id === active.id, orientation: "row", onSelect: () => setActiveId(tab.id) }, tab.id))) }), _jsx("div", { style: { borderTop: `1px solid ${edge}` }, className: "flex flex-1 flex-col overflow-hidden", children: _jsx(Body, { ...bodyProps }) })] }) }));
+    }
+    return (_jsx(Backdrop, { onClose: onClose, align: "items-center", children: _jsxs("div", { onClick: stop, className: "flex flex-col overflow-hidden rounded-2xl shadow-2xl", style: { ...panelStyle, width: "min(92vw, 460px)", height: "min(86vh, 580px)" }, children: [_jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-3.5", style: { borderBottom: `1px solid ${edge}` }, children: [title, _jsx(CloseButton, { onClose: onClose })] }), _jsx("div", { className: "flex gap-1.5 overflow-x-auto px-4 py-3", style: { borderBottom: `1px solid ${edge}` }, children: tabs.map((tab) => (_jsx(TabButton, { tab: tab, selected: tab.id === active.id, orientation: "row", onSelect: () => setActiveId(tab.id) }, tab.id))) }), _jsx(Body, { ...bodyProps })] }) }));
+}

package/dist/settings/SettingsRuntime.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import type { SettingsSurface, SettingsVariant } from "@jgengine/core/settings/settingsModel";
+import { type SettingsActionView } from "@jgengine/react/settings";
+import { type SettingsControllerInput } from "./settingsController.js";
+export interface SettingsRuntimeProps extends SettingsControllerInput {
+    variant: SettingsVariant;
+    surface: SettingsSurface | false;
+    actions: readonly SettingsActionView[];
+    children: ReactNode;
+}
+export declare function SettingsRuntime({ variant, surface, actions, children, ...input }: SettingsRuntimeProps): import("react").JSX.Element;

package/dist/settings/SettingsRuntime.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { SettingsControllerProvider, } from "@jgengine/react/settings";
+import { useSettingsCategories } from "./settingsController.js";
+export function SettingsRuntime({ variant, surface, actions, children, ...input }) {
+    const categories = useSettingsCategories(input);
+    const [isOpen, setOpen] = useState(false);
+    const controller = useMemo(() => ({
+        categories,
+        actions: [...actions],
+        variant,
+        surface,
+        isOpen,
+        open: () => setOpen(true),
+        close: () => setOpen(false),
+        setOpen,
+    }), [categories, actions, variant, surface, isOpen]);
+    return _jsx(SettingsControllerProvider, { controller: controller, children: children });
+}

package/dist/settings/appliedSettings.d.ts

@@ -0,0 +1,14 @@
+import type { AudioBusDef } from "@jgengine/core/audio/audioFalloff";
+import { type SettingsStore } from "@jgengine/core/settings/settingsModel";
+import type { AudioEngine } from "../audio/audioEngine.js";
+export declare function useSettingsRevision(store: SettingsStore): number;
+export declare function useGraphicsSettings(store: SettingsStore, shadowsDefault: boolean): {
+    shadows: boolean;
+    dpr: number;
+    uiScale: number;
+};
+export declare function AudioSettingsBridge({ store, engine, buses, }: {
+    store: SettingsStore;
+    engine: AudioEngine;
+    buses: Record<string, AudioBusDef> | undefined;
+}): null;