@rydr/game-sdk 8.11.0 → 8.12.0

package/dist/three/controller/joycon-designs.js

@@ -0,0 +1,742 @@
+/**
+ * THREE ART DIRECTIONS for the 3D Joy-Con, to be chosen between by eye.
+ *
+ * All three are built from the same {@link joycon-spec} numbers — real hardware proportions, real
+ * control placement — so what differs between them is **only** the art direction: shape language,
+ * materials, lighting response, level of detail. Same model, three ways of drawing it.
+ *
+ *   {@link buildProductJoycon}   "Product" — what the hardware looks like. Neon red / neon blue,
+ *                                 domed buttons, dished stick caps, visible rail. Most faithful.
+ *   {@link buildToyJoycon}       "Toy" — chunkier, flatter colour, oversized controls, matte. Built to
+ *                                 be read from across a room, which is the actual use case.
+ *   {@link buildHoloJoycon}      "Holo" — translucent shell with lit edges and emissive controls, in
+ *                                 the SDK's own accent language. Reads as UI rather than as an object.
+ *
+ * Each returns a `JoyconBuild`: the group to add to a scene, plus the per-control nodes a driver would
+ * later need, plus everything to dispose. None of them is wired to input yet — that comes once one is
+ * picked.
+ */
+import * as THREE from "three";
+import { TUNING, D, SILHOUETTE, DEPTH_TOP, depthAtV, faceToLocal, GAP, H, LEFT_FACE, RIGHT_FACE, SHELL_RADIUS, SHOULDER, SIZES, W, } from "./joycon-spec.js";
+import { glyphTexture } from "./glyph-texture.js";
+import { JOYCON_LAYOUT } from "../../ui/controller/layouts/joycon.js";
+// ── shared geometry helpers ───────────────────────────────────────────────────────────────────────
+/** A rounded rectangle shape, centred on the origin. */
+function roundedRect(w, h, r) {
+    const s = new THREE.Shape();
+    const rr = Math.min(r, w / 2, h / 2);
+    const x = -w / 2;
+    const y = -h / 2;
+    s.moveTo(x + rr, y);
+    s.lineTo(x + w - rr, y);
+    s.quadraticCurveTo(x + w, y, x + w, y + rr);
+    s.lineTo(x + w, y + h - rr);
+    s.quadraticCurveTo(x + w, y + h, x + w - rr, y + h);
+    s.lineTo(x + rr, y + h);
+    s.quadraticCurveTo(x, y + h, x, y + h - rr);
+    s.lineTo(x, y + rr);
+    s.quadraticCurveTo(x, y, x + rr, y);
+    return s;
+}
+/**
+ * A box with genuinely rounded edges on all three axes.
+ *
+ * `ExtrudeGeometry`'s bevel is what rounds the front and back faces; making the bevel a real fraction
+ * of the depth is what stops the result reading as a flat plate with soft corners — which is exactly
+ * how the first attempt went wrong.
+ */
+function roundedBox(w, h, d, r, bevel = d * 0.22) {
+    // ⚠️ A bevel GROWS the shape: `bevelSize` is pushed outwards from the profile on every side, and
+    // `bevelThickness` is added to each end of the depth. So the profile has to be shrunk by it first,
+    // or the result is bigger than asked for on all three axes. Getting this wrong is what made the two
+    // shells overlap — they were built 0.70 wide and came out 0.95.
+    const b = Math.min(bevel, w / 2 - 1e-4, h / 2 - 1e-4, d / 2 - 1e-4);
+    const geo = new THREE.ExtrudeGeometry(roundedRect(w - b * 2, h - b * 2, Math.max(1e-4, r - b)), {
+        depth: d - b * 2,
+        bevelEnabled: true,
+        bevelThickness: b,
+        bevelSize: b,
+        bevelSegments: 5,
+        curveSegments: 16,
+    });
+    geo.translate(0, 0, -(d - b * 2) / 2);
+    return geo;
+}
+/**
+ * THE SHELL — a tapered wedge, not a slab.
+ *
+ * A Joy-Con is markedly thicker at the top than at the bottom: measured on the reference, the bottom is
+ * 58% of the top's depth. That bulge is what makes room for the triggers to sit behind the shoulders,
+ * so a constant-thickness box (which is what the first pass built) both looks wrong and leaves the
+ * triggers nowhere to live.
+ *
+ * Two things the profile has to get right, both measured:
+ *   - the taper is entirely on the BACK. The front face — where every button sits — is dead flat from
+ *     top to bottom, which is why `frontZ()` is a constant everywhere else in this file.
+ *   - it is a soft shoulder around v≈0.27, not a step.
+ *
+ * Built as a loft: horizontal contours stacked down the height, each a rounded rectangle in plan whose
+ * depth comes from {@link depthAtV}, with the front edge pinned. `ExtrudeGeometry` can't do this — its
+ * depth is a single number — which is exactly why the shell needed its own builder.
+ */
+function shellGeometry(w, h, frontZ, innerSign) {
+    const LEVELS = 26;
+    /**
+     * How far an edge is pulled IN at height `v`, following a corner of radius `rTop` / `rBottom`.
+     *
+     * Called separately for the two edges, which is what makes the silhouette asymmetric: the inner edge
+     * gets tiny radii (it is straight), the outer edge gets big ones.
+     */
+    const inset = (v, rTop, rBottom) => {
+        const y = h / 2 - v * h;
+        const top = h / 2 - rTop;
+        const bot = -h / 2 + rBottom;
+        if (y > top && rTop > 0) {
+            const t = Math.min(1, (y - top) / rTop);
+            return rTop * (1 - Math.sqrt(Math.max(0, 1 - t * t)));
+        }
+        if (y < bot && rBottom > 0) {
+            const t = Math.min(1, (bot - y) / rBottom);
+            return rBottom * (1 - Math.sqrt(Math.max(0, 1 - t * t)));
+        }
+        return 0;
+    };
+    /**
+     * One horizontal contour: a true ROUNDED RECTANGLE in the XZ plane, front edge pinned at `frontZ`.
+     *
+     * Built from four corner arcs rather than a superellipse. The superellipse this replaced bulged every
+     * face outwards, which turned the shell into a tube — and worse, it curved the FRONT, the one face
+     * that must stay dead flat because every button sits on it.
+     */
+    const CORNER = 6;
+    const ring = (v) => {
+        // Two edges, computed independently — the inner one barely moves, the outer one sweeps.
+        const xInner = innerSign * (w / 2 - inset(v, SILHOUETTE.innerTopR, SILHOUETTE.innerBottomR));
+        const xOuter = -innerSign * (w / 2 - inset(v, SILHOUETTE.outerTopR, SILHOUETTE.outerBottomR));
+        const xHi = Math.max(xInner, xOuter);
+        const xLo = Math.min(xInner, xOuter);
+        const d = depthAtV(v);
+        const zFront = frontZ;
+        const zBack = frontZ - d;
+        const r = Math.min((xHi - xLo) * 0.3, d * 0.34);
+        const y = h / 2 - v * h;
+        const corners = [
+            [xHi - r, zFront - r, 0],
+            [xLo + r, zFront - r, Math.PI / 2],
+            [xLo + r, zBack + r, Math.PI],
+            [xHi - r, zBack + r, (3 * Math.PI) / 2],
+        ];
+        const pts = [];
+        for (const [ccx, ccz, a0] of corners) {
+            for (let i = 0; i < CORNER; i++) {
+                const a = a0 + (i / (CORNER - 1)) * (Math.PI / 2);
+                pts.push(new THREE.Vector3(ccx + Math.cos(a) * r, y, ccz + Math.sin(a) * r));
+            }
+        }
+        return pts;
+    };
+    const RING = CORNER * 4;
+    const rings = [];
+    for (let i = 0; i <= LEVELS; i++)
+        rings.push(ring(i / LEVELS));
+    const pos = [];
+    /**
+     * Emit one triangle, oriented OUTWARD explicitly rather than trusting the ring's winding.
+     *
+     * Deriving the winding from the traversal order is what broke here: flipping it globally just swapped
+     * which 398 of the 1296 triangles faced the wrong way, because the top and bottom caps need the
+     * opposite sense from the side walls. Three.js culls back faces, so any triangle that ends up inward
+     * is a hole — and a shell full of holes reads as a transparent shell.
+     *
+     * `ref` is a point known to be INSIDE the solid near this triangle: the shell's own axis at that
+     * height for the walls, the centroid for the caps. If the normal points back towards it, swap two
+     * vertices.
+     */
+    const tri = (a, b, c, ref) => {
+        const n = new THREE.Vector3().subVectors(b, a).cross(new THREE.Vector3().subVectors(c, a));
+        const mid = new THREE.Vector3().addVectors(a, b).add(c).multiplyScalar(1 / 3).sub(ref);
+        const [p, q, r] = n.dot(mid) >= 0 ? [a, b, c] : [a, c, b];
+        pos.push(p.x, p.y, p.z, q.x, q.y, q.z, r.x, r.y, r.z);
+    };
+    const axisAt = (v) => new THREE.Vector3(0, h / 2 - v * h, frontZ - depthAtV(v) / 2);
+    for (let i = 0; i < LEVELS; i++) {
+        const A = rings[i];
+        const B = rings[i + 1];
+        // The axis midway between the two rings — inside the solid, whatever the taper is doing here.
+        const ref = axisAt((i + 0.5) / LEVELS);
+        for (let j = 0; j < RING; j++) {
+            const k = (j + 1) % RING;
+            tri(A[j], B[j], B[k], ref);
+            tri(A[j], B[k], A[k], ref);
+        }
+    }
+    // Caps: reference a point just INSIDE the shell along the axis, so the fan faces out of the end.
+    for (const [rIdx, inward] of [[0, 1], [LEVELS, -1]]) {
+        const R = rings[rIdx];
+        const c = new THREE.Vector3();
+        for (const q of R)
+            c.add(q);
+        c.multiplyScalar(1 / R.length);
+        const ref = c.clone();
+        ref.y -= inward * h * 0.02;
+        for (let j = 0; j < RING; j++)
+            tri(c, R[j], R[(j + 1) % RING], ref);
+    }
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute("position", new THREE.Float32BufferAttribute(pos, 3));
+    geo.computeVertexNormals();
+    return geo;
+}
+/**
+ * A button: a CYLINDER with a flat top and a filleted edge.
+ *
+ * Not a dome. On the hardware, A/B/X/Y and the four direction keys are short cylinders whose top is
+ * flat — which is what lets a letter be printed on them; on a dome the character would distort. The
+ * fillet rounds the top edge so the piece reads as moulded rather than cut out, and leaves a visible
+ * straight FLANK, which is what says "this stands off the face". The previous shape put 45% of its
+ * height into a spherical cap, so the flank was too short to see and every key read as a bulge.
+ *
+ * Built as a lathe: base → up the flank → around the fillet → in across the flat top.
+ */
+function domedButton(r, rise, segments = 24) {
+    // Fillet is capped by both dimensions so a very flat or very narrow key stays valid.
+    const fillet = Math.min(r * 0.34, rise * 0.55);
+    const pts = [];
+    pts.push(new THREE.Vector2(0, 0)); // centre of the base
+    pts.push(new THREE.Vector2(r, 0)); // out to the rim
+    pts.push(new THREE.Vector2(r, rise - fillet)); // straight flank — the part that reads as height
+    const STEPS = 5;
+    for (let i = 1; i <= STEPS; i++) {
+        const a = (i / STEPS) * (Math.PI / 2);
+        pts.push(new THREE.Vector2(r - fillet + Math.cos(a) * fillet, rise - fillet + Math.sin(a) * fillet));
+    }
+    pts.push(new THREE.Vector2(0, rise)); // flat top, in to the centre
+    const geo = new THREE.LatheGeometry(pts, segments);
+    // Lathe spins around +y; these keys face the viewer, so lay the axis down onto +z.
+    geo.rotateX(Math.PI / 2);
+    return geo;
+}
+/**
+ * Minimal geometry merge — enough for the handful of two-part shapes here.
+ *
+ * Written out rather than importing `three/examples/jsm/utils/BufferGeometryUtils.js`: the SDK's own
+ * `merge.ts` avoids that dependency too, and pulling an examples module into a published package is a
+ * resolution problem waiting to happen for consumers.
+ */
+function mergeGeometries(list) {
+    const out = new THREE.BufferGeometry();
+    const attrs = ["position", "normal"];
+    for (const name of attrs) {
+        const arrays = [];
+        for (const g of list) {
+            const src = g.getAttribute(name);
+            const idx = g.getIndex();
+            if (!src)
+                continue;
+            // Expand indexed geometry so the concatenation needs no index remapping.
+            if (idx) {
+                for (let i = 0; i < idx.count; i++) {
+                    const k = idx.getX(i);
+                    arrays.push(src.getX(k), src.getY(k), src.getZ(k));
+                }
+            }
+            else {
+                for (let i = 0; i < src.count; i++)
+                    arrays.push(src.getX(i), src.getY(i), src.getZ(i));
+            }
+        }
+        out.setAttribute(name, new THREE.Float32BufferAttribute(arrays, 3));
+    }
+    for (const g of list)
+        g.dispose();
+    return out;
+}
+/**
+ * The `−` and `+` keys, drawn as their SYMBOLS rather than as round pips.
+ *
+ * On the hardware these are not domed buttons: `−` is a flat bar and `+` a flat cross, both barely
+ * proud of the shell (measured at 0.005 against a 0.104-wide shell — essentially flush). Drawing them
+ * as generic round buttons, which is what the first pass did, loses the one cue that says which is
+ * which without any lettering.
+ */
+function symbolMinus(size, rise) {
+    const g = new THREE.BoxGeometry(size, size * 0.26, rise);
+    g.translate(0, 0, rise / 2);
+    return g;
+}
+function symbolPlus(size, rise) {
+    const bar = size * 0.26;
+    const a = new THREE.BoxGeometry(size, bar, rise);
+    const b = new THREE.BoxGeometry(bar, size, rise);
+    const merged = mergeGeometries([a, b]);
+    merged.translate(0, 0, rise / 2);
+    return merged;
+}
+/**
+ * A letter lying on a key's face.
+ *
+ * Drawn as a canvas texture on a small plane rather than as 3D text: this SDK ships no non-TS files,
+ * and real text geometry needs a font — a typeface JSON or an SDF atlas — which would be the first
+ * binary in the package. See `glyph-texture.ts`.
+ *
+ * `depthWrite: false` and a small offset keep it from z-fighting the dome it sits on.
+ */
+function glyphPlane(text, size, ink, track) {
+    const geo = track(new THREE.PlaneGeometry(size, size));
+    const mat = track(new THREE.MeshBasicMaterial({ map: glyphTexture(text, ink), transparent: true, depthWrite: false }));
+    return new THREE.Mesh(geo, mat);
+}
+/**
+ * `ZL` / `ZR` — generated, not copied, and deliberately so.
+ *
+ * The other keys come from the reference model verbatim. This one cannot: on that model the rear
+ * trigger is not a part at all, it is a region of the SHELL in a second colour. Every attempt to cut it
+ * out inherited the shell's own topology — filtering by material gave a scattered set of faces, by
+ * normal it lost the sideways ones and bit a notch out, and hole-filling the result still left open
+ * edges. All three showed as a hole.
+ *
+ * So it is built here as a closed slab that follows the crown, sized to the footprint MEASURED on the
+ * reference: 79% of the shell's width, from 44% to 100% of its depth — i.e. running back to the rear
+ * edge.
+ */
+function crownPadGeometry(widthFrac, depthFrom, depthTo, rise, crownY, 
+/**
+ * How far the piece will be RAISED after it is built.
+ *
+ * The underside has to reach below the crown by at least this much, or lifting the key detaches it
+ * from the body and it floats. The skirt was a fixed 90% of the key's own height, which the raise
+ * then more than cancelled: the bumper ended up 0.024 clear of the shell, visibly hovering.
+ */
+raise = 0) {
+    const SEG = 24;
+    const w = W * widthFrac;
+    const zFront = frontZ() - depthFrom * DEPTH_TOP;
+    const zBack = frontZ() - depthTo * DEPTH_TOP;
+    /** Taper to nothing at the two ends so the slab has rounded tips rather than sheared ones. */
+    const cap = 0.14;
+    const taper = (t) => {
+        const e = t < cap ? t / cap : t > 1 - cap ? (1 - t) / cap : 1;
+        return Math.max(0.05, Math.sqrt(Math.max(0, 1 - (1 - e) * (1 - e))));
+    };
+    // Each section is a closed quad in the (z, y) plane: top face domed slightly, bottom flat on the
+    // crown. Four points per ring keeps it simple and guarantees a closed solid.
+    const rings = [];
+    for (let i = 0; i <= SEG; i++) {
+        const t = i / SEG;
+        const k = taper(t);
+        const x = (t - 0.5) * w;
+        const base = crownY(x);
+        const zf = zFront * k + ((zFront + zBack) / 2) * (1 - k);
+        const zb = zBack * k + ((zFront + zBack) / 2) * (1 - k);
+        const h = rise * k;
+        // Underside: deep enough to stay buried in the shell once the piece is raised, with a margin so
+        // it bites rather than merely touching.
+        const under = h * 0.9 + raise * 1.6;
+        rings.push([
+            new THREE.Vector3(x, base + h, zf),
+            new THREE.Vector3(x, base + h * 0.75, zb),
+            new THREE.Vector3(x, base - under, zb),
+            new THREE.Vector3(x, base - under, zf),
+        ]);
+    }
+    const pos = [];
+    const centreOf = (R) => new THREE.Vector3().add(R[0]).add(R[1]).add(R[2]).add(R[3]).multiplyScalar(0.25);
+    const tri = (a, b, c, ref) => {
+        const n = new THREE.Vector3().subVectors(b, a).cross(new THREE.Vector3().subVectors(c, a));
+        const mid = new THREE.Vector3().addVectors(a, b).add(c).multiplyScalar(1 / 3).sub(ref);
+        const [p, q, r] = n.dot(mid) >= 0 ? [a, b, c] : [a, c, b];
+        pos.push(p.x, p.y, p.z, q.x, q.y, q.z, r.x, r.y, r.z);
+    };
+    for (let i = 0; i < SEG; i++) {
+        const A = rings[i];
+        const B = rings[i + 1];
+        const ref = centreOf(A).add(centreOf(B)).multiplyScalar(0.5);
+        for (let j = 0; j < 4; j++) {
+            const k2 = (j + 1) % 4;
+            tri(A[j], B[j], B[k2], ref);
+            tri(A[j], B[k2], A[k2], ref);
+        }
+    }
+    for (const idx of [0, SEG]) {
+        const R = rings[idx];
+        const c = centreOf(R);
+        const ref = c.clone();
+        ref.x += idx === 0 ? w * 0.05 : -w * 0.05;
+        for (let j = 0; j < 4; j++)
+            tri(c, R[j], R[(j + 1) % 4], ref);
+    }
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute("position", new THREE.Float32BufferAttribute(pos, 3));
+    geo.computeVertexNormals();
+    return geo;
+}
+/** A stick: a tapered post carrying a dished cap, on a pivot that leans. */
+function stickAssembly(capR, height, mat, capMat, track) {
+    const pivot = new THREE.Group();
+    const postGeo = track(new THREE.CylinderGeometry(capR * 0.44, capR * 0.6, height, 20));
+    postGeo.rotateX(Math.PI / 2);
+    postGeo.translate(0, 0, height / 2);
+    pivot.add(new THREE.Mesh(postGeo, mat));
+    // The cap reuses `domedButton`: a skirt with a domed top.
+    //
+    // A lathe with a dished top was tried first and read as a CRATER — from the usual viewing angle you
+    // see into the dish and the piece looks sunk into the shell rather than standing on it. The real cap
+    // is dished, but at this size that detail costs more than it buys: what has to read is that the
+    // stick is a body sitting proud of the face, and a convex cap says that unambiguously.
+    const capGeo = track(domedButton(capR, capR * TUNING.stickCapDepth, 28));
+    capGeo.translate(0, 0, height);
+    const cap = new THREE.Mesh(capGeo, capMat);
+    pivot.add(cap);
+    // The CAP is handed back alongside the pivot: the pivot is what leans, but the cap is what a driver
+    // paints and sinks. Returning only the pivot left the stick-click unpaintable — it is a Group, and a
+    // Group has no material.
+    return { pivot, cap };
+}
+/** Where a control sits in world space on a shell whose centre is `shellX`. */
+function place(node, shellX, p, z) {
+    const { x, y } = faceToLocal(p);
+    node.position.set(shellX + x, y, z);
+}
+/**
+ * The front face's z.
+ *
+ * The shell tapers on the back only, so the plane every button sits on never moves. Read through a
+ * function rather than a module constant, or it freezes at load and stops following `TUNING`.
+ */
+function frontZ() {
+    return DEPTH_TOP / 2;
+}
+/**
+ * Assemble a pair from a skin.
+ *
+ * The three designs differ ONLY in their skin, which is the point: if a direction wins, the arrangement
+ * and proportions it won with are the ones the other two were judged against.
+ */
+function buildPair(skin) {
+    const group = new THREE.Group();
+    const controls = new Map();
+    const sticks = {};
+    const disposables = [];
+    const track = (x) => {
+        disposables.push(x);
+        return x;
+    };
+    /**
+     * A material for ONE drivable part.
+     *
+     * Every control needs its own instance. The skins hand back a shared material per family — `const sh
+     * = flat(...)` then `shoulder: () => sh` — which is right for the shell and the decor but fatal for
+     * anything the driver paints: lighting `ZL` would recolour every shoulder on both halves at once,
+     * which is exactly what it did.
+     */
+    const own = (m) => track(m.clone());
+    const rise = SIZES.buttonRise * (skin.riseScale ?? 1);
+    const sz = skin.sizeScale ?? 1;
+    const halfX = (W + GAP) / 2;
+    for (const side of ["l", "r"]) {
+        const shellX = side === "l" ? -halfX : halfX;
+        // The shell — a tapered wedge: thick at the top for the triggers, slimmer at the bottom.
+        // Inner edge faces the OTHER half: +x for the left shell, -x for the right.
+        const shellGeo = track(shellGeometry(W, H, frontZ(), side === "l" ? 1 : -1));
+        const shell = new THREE.Mesh(shellGeo, skin.shell(side));
+        shell.position.x = shellX;
+        group.add(shell);
+        // Split cleanly per side rather than narrowing a union: the two halves genuinely carry different
+        // controls (four directions vs a face diamond), so one shape for both was always going to fight.
+        /** Look a control up on its half's face map. They are mutable now (the showcase can drag them). */
+        const face = (k) => (side === "l" ? LEFT_FACE : RIGHT_FACE)[k] ?? { u: 0.5, v: 0.5 };
+        const stickPos = face("stick");
+        const round = side === "l"
+            ? [
+                ["dpadUp", face("dpadUp"), SIZES.dpadR],
+                ["dpadDown", face("dpadDown"), SIZES.dpadR],
+                ["dpadLeft", face("dpadLeft"), SIZES.dpadR],
+                ["dpadRight", face("dpadRight"), SIZES.dpadR],
+            ]
+            : [
+                ["faceTop", face("faceTop"), SIZES.faceR],
+                ["faceRight", face("faceRight"), SIZES.faceR],
+                ["faceBottom", face("faceBottom"), SIZES.faceR],
+                ["faceLeft", face("faceLeft"), SIZES.faceR],
+            ];
+        /** What is printed on each key, straight from the flat layout so the two never disagree. */
+        const FACE_GLYPH = {
+            faceTop: JOYCON_LAYOUT.face.top.glyph,
+            faceRight: JOYCON_LAYOUT.face.right.glyph,
+            faceBottom: JOYCON_LAYOUT.face.bottom.glyph,
+            faceLeft: JOYCON_LAYOUT.face.left.glyph,
+        };
+        for (const [key, pos, r] of round) {
+            const geo = track(domedButton(r * sz, rise));
+            const mesh = new THREE.Mesh(geo, own(skin.button()));
+            place(mesh, shellX, pos, frontZ());
+            group.add(mesh);
+            controls.set(key, mesh);
+            // The d-pad carries no lettering — the arms are too small at this scale and the arrows are the
+            // same on every device. Same rule the flat pad follows.
+            const g = FACE_GLYPH[key];
+            if (g) {
+                const label = glyphPlane(g, r * sz * 1.9, skin.ink ?? "#eaf2ff", track);
+                label.position.set(mesh.position.x, mesh.position.y, mesh.position.z + rise + 0.004);
+                group.add(label);
+            }
+        }
+        // System buttons: `−` / `+` and Home. Flatter and smaller — they are on the hardware too.
+        // `−` and `+` are drawn as their symbols; Home stays a round pip, which is what it is.
+        const sys = side === "l"
+            ? [["select", face("select"), "minus"]]
+            : [["start", face("start"), "plus"], ["home", face("home"), "pip"]];
+        for (const [key, pos, kind] of sys) {
+            const symRise = SIZES.systemRise * (skin.riseScale ?? 1);
+            const symSize = SIZES.systemR * 2 * sz;
+            const geo = track(kind === "minus"
+                ? symbolMinus(symSize, symRise)
+                : kind === "plus"
+                    ? symbolPlus(symSize, symRise)
+                    // Home gets the FULL button relief, not a fraction of it.
+                    //
+                    // `−` and `+` are nearly flush on the hardware — they are printed marks, and the flat
+                    // symbols above match that. Home is not: it is a real key you press, and halving its
+                    // relief left it barely readable next to its neighbours. It stays smaller in radius,
+                    // which is true to the hardware, but it now stands as proud as any other button.
+                    : domedButton(SIZES.systemR * sz * 1.12, rise));
+            const mesh = new THREE.Mesh(geo, own(skin.system()));
+            place(mesh, shellX, pos, frontZ());
+            group.add(mesh);
+            controls.set(key, mesh);
+        }
+        // The stick, in its recess.
+        const wellGeo = track(new THREE.CylinderGeometry(SIZES.stickWellR, SIZES.stickWellR * 0.92, D * 0.06, 28));
+        wellGeo.rotateX(Math.PI / 2);
+        const well = new THREE.Mesh(wellGeo, skin.stickPost());
+        place(well, shellX, stickPos, frontZ() - D * 0.01);
+        group.add(well);
+        const { pivot, cap } = stickAssembly(SIZES.stickCapR * sz, SIZES.stickHeight, skin.stickPost(), own(skin.stickCap()), track);
+        place(pivot, shellX, stickPos, frontZ());
+        group.add(pivot);
+        sticks[side] = pivot;
+        controls.set(side === "l" ? "lstickPress" : "rstickPress", cap);
+        /**
+         * Height of the shell's TOP EDGE at horizontal position `x` — the curve the rear pad sits on.
+         *
+         * Same corner radii as the silhouette, so the two cannot disagree: it is the inverse of `inset`,
+         * answering "how high is the crown at this offset" instead of "how far in is the edge at this
+         * height". The outer corner is far larger than the inner one, so the crown is markedly asymmetric.
+         */
+        const crownY = (x) => {
+            const half = W / 2;
+            const arc = (d, r) => {
+                if (r <= 0 || d >= r)
+                    return H / 2;
+                return H / 2 - r + Math.sqrt(Math.max(0, r * r - (r - d) * (r - d)));
+            };
+            const innerX = (side === "l" ? 1 : -1) * half;
+            return Math.min(arc(Math.abs(x - -innerX), SILHOUETTE.outerTopR), arc(Math.abs(x - innerX), SILHOUETTE.innerTopR));
+        };
+        // ── the shoulder row ─────────────────────────────────────────────────────────────────────────
+        // Verbatim geometry, so there is nothing to place: the triangles already carry their position on
+        // the shell. Only the mirror for the right-hand half is applied.
+        // L / R — generated, like ZL/ZR, to the footprint measured on the reference: 96% of the width,
+        // from 13% to 32% of the depth (a thin band across the front of the crown).
+        //
+        // It WAS the reference's own triangles. That part is closed and consistently wound, yet it rendered
+        // with thin dark slits: read off a decimated copy of the model, its surfaces had been pinched
+        // together by the decimation. Re-reading the undecimated original was worse — 418 open edges, its
+        // vertices are split. Generating it sidesteps a source mesh that is simply not watertight enough to
+        // reuse, and makes both shoulder keys consistent with each other.
+        {
+            const raise = W * (TUNING.shoulderRaise + TUNING.shoulderLift);
+            const geo = track(crownPadGeometry(0.9, 0.13, 0.32, W * 0.03 * TUNING.shoulderScale, crownY, raise));
+            const mesh = new THREE.Mesh(geo, own(skin.shoulder()));
+            mesh.position.set(shellX, W * (TUNING.shoulderRaise + TUNING.shoulderLift), W * TUNING.shoulderLift * 0.4);
+            group.add(mesh);
+            controls.set(side === "l" ? "lb" : "rb", mesh);
+        }
+        // ZL / ZR: generated to the measured footprint — see crownPadGeometry for why it is not copied.
+        {
+            const raise = W * (TUNING.shoulderRaise + TUNING.shoulderLift);
+            const geo = track(crownPadGeometry(0.79, 0.44, 1.0, W * 0.055 * TUNING.shoulderScale, crownY, raise));
+            const mesh = new THREE.Mesh(geo, own(skin.shoulder()));
+            // `shoulderLift` applies here too. At 0 the pad sits exactly on the crown and the two surfaces
+            // fight for the same plane — z-fighting, which reads as a ragged hole in the key rather than as
+            // the coincident surfaces it is.
+            mesh.position.set(shellX, W * (TUNING.shoulderRaise + TUNING.shoulderLift), W * TUNING.shoulderLift * 0.4);
+            group.add(mesh);
+            controls.set(side === "l" ? "lt" : "rt", mesh);
+        }
+        // Shoulder lettering: L / R in front, ZL / ZR behind. Laid flat on the crown, facing up, since
+        // that is the face you actually see once the pad is tilted.
+        for (const [text, depthFrac, riseAt] of [
+            [side === "l" ? "L" : "R", 0.3, W * 0.03],
+            [side === "l" ? JOYCON_LAYOUT.triggers.l.glyph : JOYCON_LAYOUT.triggers.r.glyph, 0.7, W * 0.075],
+        ]) {
+            if (!text)
+                continue;
+            const label = glyphPlane(text, W * 0.2, skin.ink ?? "#eaf2ff", track);
+            label.rotation.x = -Math.PI / 2;
+            label.position.set(shellX, crownY(0) + riseAt + W * TUNING.shoulderRaise, frontZ() - depthFrac * DEPTH_TOP);
+            group.add(label);
+        }
+    }
+    skin.decorate?.(group, track);
+    return { group, controls, sticks, disposables };
+}
+// ── design 1 · "Product" ──────────────────────────────────────────────────────────────────────────
+const NEON_L = 0xff3c28;
+const NEON_R = 0x0ab9e6;
+export function buildProductJoycon() {
+    const shellL = new THREE.MeshStandardMaterial({ color: NEON_L, roughness: 0.42, metalness: 0.02 });
+    const shellR = new THREE.MeshStandardMaterial({ color: NEON_R, roughness: 0.42, metalness: 0.02 });
+    const dark = new THREE.MeshStandardMaterial({ color: 0x1b1d21, roughness: 0.5, metalness: 0.05 });
+    const btn = new THREE.MeshStandardMaterial({ color: 0x2b2e34, roughness: 0.36, metalness: 0.08 });
+    const build = buildPair({
+        shell: (s) => (s === "l" ? shellL : shellR),
+        button: () => btn,
+        system: () => dark,
+        stickPost: () => dark,
+        stickCap: () => new THREE.MeshStandardMaterial({ color: 0x25282d, roughness: 0.55 }),
+        shoulder: () => new THREE.MeshStandardMaterial({ color: 0x23262b, roughness: 0.55 }),
+        ink: "#e8eef8",
+    });
+    build.disposables.push(shellL, shellR, dark, btn);
+    return build;
+}
+// ── design 2 · "Toy" ──────────────────────────────────────────────────────────────────────────────
+export function buildToyJoycon() {
+    const flat = (c) => new THREE.MeshStandardMaterial({ color: c, roughness: 0.92, metalness: 0 });
+    const shellL = flat(0xef4a5a);
+    const shellR = flat(0x3aa9e0);
+    const btn = flat(0xf3f6fb);
+    const sys = flat(0xc9d3e2);
+    const post = flat(0x39414f);
+    const cap = flat(0xf3f6fb);
+    const sh = flat(0xdbe3ee);
+    const build = buildPair({
+        shell: (s) => (s === "l" ? shellL : shellR),
+        button: () => btn,
+        system: () => sys,
+        stickPost: () => post,
+        stickCap: () => cap,
+        shoulder: () => sh,
+        // Oversized, high-relief controls: this direction trades fidelity for being readable at distance,
+        // which is the actual job — a rider reads this while pedalling, metres from the screen.
+        riseScale: 2.4,
+        sizeScale: 1.28,
+        // Dark ink: the toy direction's keys are near-white, so light lettering would vanish.
+        ink: "#2b3444",
+    });
+    build.disposables.push(shellL, shellR, btn, sys, post, cap, sh);
+    return build;
+}
+// ── design 3 · "Holo" ─────────────────────────────────────────────────────────────────────────────
+const ACCENT = 0x38bdf8;
+export function buildHoloJoycon() {
+    const shell = new THREE.MeshStandardMaterial({
+        color: 0x0e1a26,
+        roughness: 0.28,
+        metalness: 0.5,
+        transparent: true,
+        opacity: 0.58,
+    });
+    const lit = new THREE.MeshStandardMaterial({
+        color: ACCENT,
+        emissive: ACCENT,
+        emissiveIntensity: 0.75,
+        roughness: 0.3,
+    });
+    const dim = new THREE.MeshStandardMaterial({
+        color: 0x1a2c3c,
+        emissive: ACCENT,
+        emissiveIntensity: 0.16,
+        roughness: 0.4,
+    });
+    const build = buildPair({
+        shell: () => shell,
+        button: () => lit,
+        system: () => dim,
+        stickPost: () => dim,
+        stickCap: () => lit,
+        shoulder: () => dim,
+        ink: "#04121c",
+        decorate(group, track) {
+            // Lit edges on the shells — what makes this read as UI rather than as an object. Only the two
+            // shells get them; edging every control would turn the pad into a wireframe mess.
+            const edgeMat = track(new THREE.LineBasicMaterial({ color: ACCENT, transparent: true, opacity: 0.85 }));
+            for (const child of [...group.children]) {
+                const mesh = child;
+                if (!(mesh instanceof THREE.Mesh) || mesh.material !== shell)
+                    continue;
+                const edges = track(new THREE.EdgesGeometry(mesh.geometry, 28));
+                const line = new THREE.LineSegments(edges, edgeMat);
+                line.position.copy(mesh.position);
+                group.add(line);
+            }
+        },
+    });
+    build.disposables.push(shell, lit, dim);
+    return build;
+}
+// ── the catalogue ─────────────────────────────────────────────────────────────────────────────────
+export const JOYCON_DESIGNS = [
+    {
+        id: "product",
+        name: "Product",
+        note: "Le plus fidèle au matériel : néon rouge / néon bleu, boutons bombés, capuchons de stick creusés, " +
+            "rail de glissière. Ce que le rider reconnaît comme « sa » manette.",
+        backdrop: "radial-gradient(circle at 50% 35%, #223047 0%, #0a0f18 70%)",
+        build: buildProductJoycon,
+        light(scene) {
+            // Studio three-point: a warm key high-left, a cool fill low-right, a rim behind to peel the
+            // silhouette off the backdrop.
+            // Total intensity kept near 1.6. The first pass ran at 4.5, which drove every mid-grey part —
+            // the buttons and the whole shoulder row — to pure white, flattening the volumes that are the
+            // entire reason for rendering in 3D.
+            scene.add(new THREE.AmbientLight(0xffffff, 0.3));
+            const k = new THREE.DirectionalLight(0xfff4e6, 0.85);
+            k.position.set(-2.4, 3.2, 3.4);
+            scene.add(k);
+            const f = new THREE.DirectionalLight(0xbcd6ff, 0.3);
+            f.position.set(2.6, -1.6, 2.2);
+            scene.add(f);
+            const r = new THREE.DirectionalLight(0xffffff, 0.35);
+            r.position.set(0.4, 1.4, -3);
+            scene.add(r);
+        },
+    },
+    {
+        id: "toy",
+        name: "Toy",
+        note: "Volumes épaissis, couleurs plates, commandes surdimensionnées et très en relief. Sacrifie la " +
+            "fidélité à la lisibilité — pensé pour être lu à deux mètres, en pédalant.",
+        backdrop: "radial-gradient(circle at 50% 35%, #2b3550 0%, #0b1020 70%)",
+        build: buildToyJoycon,
+        light(scene) {
+            // Flat and generous: a toy render wants shape, not drama. High ambient keeps every face legible.
+            scene.add(new THREE.AmbientLight(0xffffff, 0.45));
+            const k = new THREE.DirectionalLight(0xffffff, 0.75);
+            k.position.set(-1.4, 2.8, 3.2);
+            scene.add(k);
+            const f = new THREE.HemisphereLight(0xdfe9ff, 0x384056, 0.4);
+            scene.add(f);
+        },
+    },
+    {
+        id: "holo",
+        name: "Holo",
+        note: "Coque translucide, arêtes lumineuses, commandes émissives dans le bleu d'accent du SDK. Se lit " +
+            "comme un élément d'interface plutôt que comme un objet — cohérent avec le reste du kit.",
+        backdrop: "radial-gradient(circle at 50% 40%, #06202e 0%, #04070d 70%)",
+        build: buildHoloJoycon,
+        light(scene) {
+            // Low ambient so the emissive materials carry the image; two cool directionals for form.
+            scene.add(new THREE.AmbientLight(0x6fa8c8, 0.24));
+            const k = new THREE.DirectionalLight(0x9fd8ff, 0.7);
+            k.position.set(-2, 2.4, 3);
+            scene.add(k);
+            const r = new THREE.DirectionalLight(0x38bdf8, 0.45);
+            r.position.set(1.8, -1.2, -2.4);
+            scene.add(r);
+        },
+    },
+];
+//# sourceMappingURL=joycon-designs.js.map