@rydr/game-sdk 8.2.0 → 8.3.0

package/dist/ui/action-marker.js

@@ -0,0 +1,726 @@
+/**
+ * ACTION MARKER — "there is something to do THERE": a big screen-space card pinned to a point in the
+ * world, the A/B/Y/Z keycap joining it once the rider can act, and an arrow at the screen's edge while
+ * the point is off screen (PLAT-1283).
+ *
+ * Grown in the platform's tutorial, where it could be tuned against a real arena, and moved here
+ * unchanged (PLAT-1367) — it was written for this from the start, which is why nothing in it reaches for
+ * a host: the only dependency is the keycap, and even that comes in through
+ * {@link ActionMarkerOptions.keycap} so a host with its own lettering rules (the shell's `shellKeycap`)
+ * can supply one. Keep it that way.
+ *
+ * ## Screen space, not world space
+ *
+ * The prompt this replaces was painted into the arena's own canvas, in WORLD units — so the 3D arena's
+ * floor squash (`GROUND_TILT`) squashed the lettering with it, and the camera zoom decided how big the
+ * type was. A prompt is chrome: it is drawn at a fixed size, upright, in CSS pixels, and only its
+ * ANCHOR comes from the world (`game.worldToScreen`). Hence DOM rather than canvas — which also buys
+ * the real SDK keycap, real text rendering and CSS animation instead of a hand-rolled blink.
+ *
+ * ## Three states, one component (and the consumer only feeds it a point)
+ *
+ * 1. **Far** — the card alone. "There's a thing over there, and this is what it is."
+ * 2. **Near** — the same card plus the keycap, and the card SETTLES: it eases out of its pulse and
+ *    comes to rest half way up its own swell, lit and ringed ({@link ActionMarker.setNear}). The whole
+ *    arrival crossfades on one interpolated number (`--rydr-marker-near`), never a class snap.
+ * 3. **Off screen** — the card CLAMPS to the border with a caret pointing at the anchor, so the rider
+ *    is never told to do something they can't see the location of. When the anchor comes back into
+ *    view the card doesn't jump: it glides to its exact point (the follow smoothing below).
+ *
+ * The consumer calls {@link ActionMarker.place} every frame with the anchor projected to screen pixels
+ * and the marker decides which of the three it is. It never reads the camera, the world or the player.
+ *
+ * ## The card never moves to get out of the way
+ *
+ * A card sits where its anchor is, full stop: a prompt that slides about to dodge the character is a
+ * prompt whose position stops meaning anything, and it moves at the worst possible moment — as the
+ * rider walks up to press the button. That was tried and it is wrong.
+ *
+ * The overlap it exists in — the rider walks INTO the thing they're told to take, so the two share the
+ * same few hundred pixels — is a LAYERING question, and it belongs to the game, not to this component.
+ * Mount the layer over the drawing surface (the tutorial does) and markers are chrome that nothing can
+ * hide. Mount it under a surface that clears TRANSPARENT and the world covers them instead, so the
+ * character walks in front of a card. The marker behaves identically either way; a game picks the one
+ * its own scene wants. The cheap half-measure for whichever is chosen: anchor in WORLD space above the
+ * object (a metre over a chest, not a fixed pixel lift), and most of the overlap goes away by itself.
+ *
+ * ## Two axes: how LOUD it is, and what it's ABOUT
+ *
+ * {@link ActionMarkerTone} is the volume — a standing possibility (`hint`, still), the thing the game
+ * is asking for (`action`, breathing), something demanded right now (`urgent`, hammering). It is
+ * MOTION, nothing else.
+ *
+ * {@link ActionMarkerColor} is the subject — go/take (`green`), mind this (`orange`), danger
+ * (`red`), objective (`cyan`), special (`purple`), or the chrome default (`steel`). It is PALETTE,
+ * nothing else.
+ *
+ * The two are free of each other on purpose: any colour pairs with any tone, because a game routinely
+ * needs to say "danger, calmly" and "the good thing, NOW", and a component that bundles the two makes
+ * it pick one. A marker that never names a colour keeps the tone's own historic paint, so the default
+ * look is unchanged.
+ *
+ * Both axes are only CSS custom properties (`--rydr-marker-*`) underneath — the palettes above are a
+ * vocabulary for the common cases, not a wall: a game with its own colours sets those properties from
+ * its own stylesheet through {@link ActionMarkerOptions.className} and never touches this file.
+ */
+import { createKeycap } from "./keycap.js";
+/** Every role → the colour it paints. The one place the two vocabularies are tied together. */
+export const MARKER_ROLE_COLORS = {
+    default: "white",
+    success: "green",
+    warningLight: "yellow",
+    warning: "orange",
+    danger: "red",
+    accent: "cyan",
+    accent2: "purple",
+    accentLight: "steel",
+};
+/**
+ * ...and the way back, plus the one-line brief for each — what a palette page prints under the swatch,
+ * and what a reviewer argues with. In severity order (neutral → success → the warning ladder) and then
+ * the three accents, because that order IS part of the vocabulary: two colours next to each other in
+ * this list are two things a rider is meant to be able to tell apart.
+ */
+export const MARKER_COLORS = [
+    { color: "white", role: "default", use: "A plain prompt: there is something here, and nothing more is claimed." },
+    { color: "green", role: "success", use: "A gain, a safe direction, the thing that went right." },
+    { color: "yellow", role: "warningLight", use: "A soft caution — notice this; nothing has gone wrong yet." },
+    { color: "orange", role: "warning", use: "A real warning: a cost, a timer running down, act or lose it." },
+    { color: "red", role: "danger", use: "Damage, a hazard, a refusal." },
+    { color: "cyan", role: "accent", use: "The game's own highlight: objectives, waypoints, what the beat is asking for." },
+    { color: "purple", role: "accent2", use: "A second highlight for a different kind of special: rare, secret, boss." },
+    { color: "steel", role: "accentLight", use: "The RYDR chrome blue — quiet emphasis, the shell's own colour." },
+];
+/**
+ * A colour or a role → the colour to paint. Roles first, so a name in both vocabularies (there is none
+ * today, and this keeps it true if one is ever added) can't resolve two ways depending on the caller.
+ */
+function resolveColor(color) {
+    return MARKER_ROLE_COLORS[color] ?? color;
+}
+/** Default distance kept between the clamped card and the edge of the view, in CSS pixels. */
+const EDGE_INSET = 28;
+/**
+ * How fast the card catches up with its anchor, per second (as an exponential decay rate).
+ *
+ * High enough that following a moving anchor reads as pinned rather than dragged, low enough that the
+ * unclamp — the anchor coming back on screen, which can be half a screen away — is a glide the eye can
+ * follow instead of a teleport. Both behaviours want the same smoothing, so there is only one.
+ */
+const FOLLOW_RATE = 14;
+/** Below this, the card is simply put on its anchor: smoothing a sub-pixel gap only smears the text. */
+const SNAP_PX = 0.4;
+/**
+ * The caret's geometry, in CSS pixels — the numbers the placement maths and the drawing must agree on,
+ * so they live HERE and reach the stylesheet as custom properties rather than being written twice.
+ *
+ * `GAP` is measured to the arrow's BASE, which is what sits against the card: at rest the arrow all
+ * but touches it, and the attract animation is what carries it out and back. That reads as one object
+ * leaning towards the thing it points at; a caret parked in open space beside the card reads as two.
+ */
+const CARET_GAP = 4;
+const CARET_LEN = 32;
+const CARET_HALF = 19;
+const CARET_NUDGE = 20;
+/** How much the arrow swells at the top of the beat — the card's own pulse, read at arrow scale. */
+const CARET_SCALE = 1.2;
+/**
+ * Extra room kept between the clamped card and the edge while the caret is out, in CSS pixels.
+ *
+ * The caret rides OUTSIDE the card, in the direction of the anchor — which, when the card is clamped,
+ * is the direction of the nearest edge. Clamp to the same inset either way and the arrow is the one
+ * part that lands past it and gets cut off by the layer's own overflow. So the card sits further in
+ * exactly while it's carrying one. Covers the gap, the triangle at full swell, and its nudge.
+ */
+const CARET_ROOM = CARET_GAP + CARET_LEN * CARET_SCALE + CARET_NUDGE;
+/** Mount an action marker into `host` (which must be a positioned element covering the play area). */
+export function createActionMarker(host, opts) {
+    const el = document.createElement("div");
+    el.className = `rydr-marker${opts.className ? ` ${opts.className}` : ""}`;
+    el.dataset.tone = opts.tone ?? "action";
+    el.dataset.color = opts.color ? resolveColor(opts.color) : "white";
+    const caret = document.createElement("div");
+    caret.className = "rydr-marker-caret";
+    // The triangle is a CHILD of the rotated wrapper, so its attract nudge (a plain translateX) runs
+    // along whatever direction the caret is pointing rather than always sideways on screen.
+    const caretTip = document.createElement("div");
+    caretTip.className = "rydr-marker-caret-tip";
+    caret.appendChild(caretTip);
+    el.style.setProperty("--caret-len", `${CARET_LEN}px`);
+    el.style.setProperty("--caret-half", `${CARET_HALF}px`);
+    el.style.setProperty("--caret-nudge", `${CARET_NUDGE}px`);
+    el.style.setProperty("--caret-scale", `${CARET_SCALE}`);
+    const row = document.createElement("div");
+    row.className = "rydr-marker-row";
+    const card = document.createElement("div");
+    card.className = "rydr-marker-card";
+    if (opts.content)
+        opts.content(card);
+    else
+        card.textContent = opts.label;
+    const capSlot = document.createElement("div");
+    capSlot.className = "rydr-marker-cap";
+    const build = opts.keycap ?? ((b) => createKeycap(b, { variant: "full", animate: true }));
+    const cap = opts.button ? build(opts.button) : null;
+    if (cap)
+        capSlot.appendChild(cap.el);
+    row.append(card, capSlot);
+    el.append(caret, row);
+    host.appendChild(el);
+    ensureStyles(el);
+    let visible = !opts.hidden;
+    el.classList.toggle("is-hidden", !visible);
+    let offScreen = false;
+    /** Where the card actually is, in host pixels — the smoothed position, not the anchor. */
+    let current = null;
+    let lastFrame = 0;
+    // The card's own box and the host's, both read from observers rather than per frame: `place` runs
+    // every frame and an `offsetWidth` in there is a forced layout on each one of them.
+    let boxW = 0;
+    let boxH = 0;
+    let hostW = host.clientWidth;
+    let hostH = host.clientHeight;
+    const boxObserver = new ResizeObserver(() => {
+        boxW = row.offsetWidth;
+        boxH = row.offsetHeight;
+    });
+    boxObserver.observe(row);
+    const hostObserver = new ResizeObserver(() => {
+        hostW = host.clientWidth;
+        hostH = host.clientHeight;
+    });
+    hostObserver.observe(host);
+    const marker = {
+        el,
+        card,
+        get offScreen() {
+            return offScreen;
+        },
+        place(x, y) {
+            // The caret means one thing only: "the place this is about is not on your screen". So it keys off
+            // the ANCHOR leaving the view, never off the card having been clamped — a marker resting quietly
+            // near an edge would otherwise sprout an arrow pointing at an item three centimetres away.
+            const anchorVisible = x >= 0 && x <= hostW && y >= 0 && y <= hostH;
+            if (anchorVisible === offScreen) {
+                offScreen = !anchorVisible;
+                el.classList.toggle("is-offscreen", offScreen);
+            }
+            // The card must stay WHOLLY inside the view — plus the caret's own room while it's out, since the
+            // arrow is outside the card and on the side of the very edge being clamped to. A card wider than
+            // the view (a long label on a phone) would invert the range, hence the `Math.max`, which centres
+            // it instead of flipping it to the far edge.
+            const inset = (opts.edgeInset ?? EDGE_INSET) + (offScreen ? CARET_ROOM : 0);
+            const halfW = Math.min(boxW / 2, Math.max(0, hostW / 2 - inset));
+            const halfH = Math.min(boxH / 2, Math.max(0, hostH / 2 - inset));
+            const minY = inset + halfH;
+            const maxY = hostH - inset - halfH;
+            const cx = clamp(x, inset + halfW, hostW - inset - halfW);
+            let cy = clamp(y, minY, maxY);
+            const now = performance.now();
+            // The caret points from the card at the anchor it stands in for, and rides just outside the
+            // card's box in that direction — an ellipse, so it hugs a wide card's corner the way the
+            // mock-up does rather than floating off the end of it.
+            if (offScreen) {
+                const angle = Math.atan2(y - cy, x - cx);
+                // The wrapper's origin IS the arrow's base (the triangle is drawn outward from it), so these
+                // radii put the base against the card and the arrow points away from it.
+                const rx = boxW / 2 + CARET_GAP;
+                const ry = boxH / 2 + CARET_GAP;
+                caret.style.transform =
+                    `translate(-50%, -50%) translate(${Math.cos(angle) * rx}px, ${Math.sin(angle) * ry}px) rotate(${angle}rad)`;
+            }
+            // Follow smoothing, frame-rate independent. The first placement snaps: a marker appearing has no
+            // previous position to glide from, and sliding in from the corner would read as a mistake.
+            const dt = current ? Math.min(0.1, Math.max(0, (now - lastFrame) / 1000)) : 0;
+            lastFrame = now;
+            if (!current)
+                current = { x: cx, y: cy };
+            else {
+                const k = 1 - Math.exp(-FOLLOW_RATE * dt);
+                current.x += (cx - current.x) * k;
+                current.y += (cy - current.y) * k;
+                if (Math.abs(cx - current.x) < SNAP_PX)
+                    current.x = cx;
+                if (Math.abs(cy - current.y) < SNAP_PX)
+                    current.y = cy;
+            }
+            el.style.transform = `translate(${Math.round(current.x)}px, ${Math.round(current.y)}px) translate(-50%, -50%)`;
+        },
+        setLabel(text) {
+            card.textContent = text;
+        },
+        setTone(tone) {
+            el.dataset.tone = tone;
+        },
+        setColor(color) {
+            el.dataset.color = color ? resolveColor(color) : "white";
+        },
+        setNear(on) {
+            el.classList.toggle("is-near", on);
+            cap?.setVisible(on);
+        },
+        setPressed(on) {
+            cap?.setPressed(on);
+        },
+        setVisible(on) {
+            if (visible === on)
+                return;
+            visible = on;
+            el.classList.toggle("is-hidden", !on);
+        },
+        dispose() {
+            boxObserver.disconnect();
+            hostObserver.disconnect();
+            cap?.dispose();
+            el.remove();
+        },
+    };
+    marker.setNear(false);
+    return marker;
+}
+function clamp(v, lo, hi) {
+    return Math.min(hi, Math.max(lo, v));
+}
+// ── Styles ───────────────────────────────────────────────────────────────────────────────────────
+/**
+ * One stylesheet, adopted by every root a marker is mounted in — a shadow root gets it through
+ * `adoptedStyleSheets`, a light-DOM host through a `<style>` in `<head>`. The SDK's own components
+ * inject into `<head>` only and leave shadow hosts to mirror the blob themselves; a marker is mounted
+ * INSIDE a view's shadow root (the arena's HUD layer is part of the view), so it does its own.
+ */
+const STYLE_ID = "rydr-action-marker-css";
+let sheet = null;
+const adopted = new WeakSet();
+function ensureStyles(el) {
+    const root = el.getRootNode();
+    if (root instanceof ShadowRoot) {
+        if (adopted.has(root))
+            return;
+        if (!sheet) {
+            sheet = new CSSStyleSheet();
+            sheet.replaceSync(CSS);
+        }
+        root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+        adopted.add(root);
+        return;
+    }
+    if (document.getElementById(STYLE_ID))
+        return;
+    const tag = document.createElement("style");
+    tag.id = STYLE_ID;
+    tag.textContent = CSS;
+    document.head.appendChild(tag);
+}
+/**
+ * Everything paintable is a custom property on `.rydr-marker`, so a consumer restyles a marker (or all
+ * of them) from its own CSS without touching this file — that is the contract. The tones below only
+ * re-point those properties and add motion.
+ */
+const CSS = `
+/* HOW FAR INTO REACH the marker is: 0 far, 1 in reach — and every part of the near state (the card's
+   lift, its lit fill, the ready ring, the keycap) is a calc off this ONE number. Registered with
+   @property, which is the whole trick: an unregistered custom property is a string and jumps between
+   values, a <number> INTERPOLATES, so a plain transition on it eases the entire state across at once
+   instead of each piece snapping on its own clock. It is also the only knob a consumer needs to cancel
+   the near look wholesale (a disabled card pins it to 0 — see the showcase's refused state). */
+@property --rydr-marker-near {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+.rydr-marker {
+  --rydr-marker-bg: rgba(9, 13, 20, 0.82);
+  --rydr-marker-fg: #f2f6ff;
+  --rydr-marker-accent: #7aa2e6;
+  --rydr-marker-border: rgba(122, 162, 230, 0.5);
+  --rydr-marker-radius: 14px;
+  --rydr-marker-font-size: clamp(1rem, 2.1vw, 1.45rem);
+  --rydr-marker-pulse-ms: 1500ms;
+  --rydr-marker-near: 0;
+  /* How long arriving takes, and on what curve. Slightly springy on purpose: the card is answering the
+     rider, and a touch of overshoot reads as the prompt leaning towards them. */
+  --rydr-marker-near-ms: 260ms;
+  --rydr-marker-near-ease: cubic-bezier(0.3, 1.35, 0.6, 1);
+  /* The settled size: HALF the pulse's own swell (0.14), so a marker in reach sits between its resting
+     and its fully-expanded size — bigger than the far card, never as big as the peak it just left. */
+  --rydr-marker-near-lift: 0.07;
+  /* ...and the settled FILL: the pulse's peak warmth (26%) held, rather than flashed. */
+  --rydr-marker-near-fill: 20%;
+  /* Whether this tone pulses at all (hint: no). The live amplitude below is that, minus however far
+     into reach we are — which is what makes a card EASE out of its pulse instead of dropping it. */
+  --rydr-marker-pulse-strength: 1;
+  --rydr-marker-pulse-amp: calc(var(--rydr-marker-pulse-strength) * (1 - var(--rydr-marker-near)));
+  /* HOW LIT THE CARD'S HALO IS, at the two ends of the beat — the drop shadow's reach, the accent ring
+     and the outer glow are all one factor times these, so "the glow" is a single number in two places.
+     Far, it swings 0 → 1 → 0: the pulse's whole point. In reach it is pinned at 1 at BOTH ends, so the
+     card simply keeps the lit halo of the peak it was playing rather than breathing at rest — which is
+     what makes arriving read as the beat landing instead of the beat stopping. And since the far peak
+     is 'amp' and amp is '1 - near', "peak" is just amp + near: the two ends meet at 1 with nothing to
+     clamp, whichever way the rider is walking. */
+  --rydr-marker-glow-rest: var(--rydr-marker-near);
+  --rydr-marker-glow-peak: calc(var(--rydr-marker-pulse-amp) + var(--rydr-marker-near));
+  /* How far the cap tucks over the card's right edge, in pixels — deliberately less than the card's
+     own 0.9em side padding, so the cap sits against the corner and never over the lettering. A FIXED
+     length, not a fraction of the cap: a host with a bigger keycap (the shell's shellKeycap) would
+     otherwise eat further into the text the bigger its cap got. */
+  --cap-overlap: 10px;
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  pointer-events: none;
+  transition: opacity 180ms ease,
+    --rydr-marker-near var(--rydr-marker-near-ms) var(--rydr-marker-near-ease);
+  /* The whole marker is chrome over a moving arena: it must never take part in its layout. */
+  will-change: transform;
+}
+
+.rydr-marker.is-hidden {
+  opacity: 0;
+}
+
+/* The row is only an anchor for the keycap. It has exactly the card's box, because the keycap is taken
+   OUT of the flow (below) — that's what makes the card the thing centred on the world point, and what
+   stops the prompt twitching sideways the moment the rider walks into range. */
+.rydr-marker-row {
+  position: relative;
+  display: inline-block;
+  /* The settle lift lives HERE, not on the card, for two reasons. It has to scale the card and the
+     keycap together — in reach they are one control, and a card growing out from under a cap that
+     stayed put is the thing that reads as two objects. And it has to be a plain transform driven by
+     --rydr-marker-near rather than a keyframe: the card's own transform is owned by the pulse
+     animation, and CSS gives you no way to ease OUT of an animation you removed. Two elements, two
+     mechanisms, one number moving them both. */
+  transform: scale(calc(1 + var(--rydr-marker-near-lift) * var(--rydr-marker-near)));
+}
+
+.rydr-marker-card {
+  padding: 0.55em 0.9em;
+  border-radius: var(--rydr-marker-radius);
+  position: relative;
+  /* The lit fill is part of the RESTING style of a card in reach, not a frame of an animation: the
+     pulse's peak flashes this colour, arriving HOLDS it. Reduced motion, which drops every animation,
+     still gets it for the same reason. */
+  background: color-mix(in srgb,
+    var(--rydr-marker-accent) calc(var(--rydr-marker-near-fill) * var(--rydr-marker-near)),
+    var(--rydr-marker-bg));
+  border: 2px solid var(--rydr-marker-border);
+  color: var(--rydr-marker-fg);
+  font: 800 var(--rydr-marker-font-size) / 1.15 system-ui, -apple-system, "Segoe UI", sans-serif;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  /* Whatever is in the card is CENTRED on it — the card is centred on its world point, so anything
+     ranged left inside it would read as leaning off the thing it names. Costs nothing on the one-line
+     default (the card hugs its text), and is what makes a title with a subtitle under it look pinned. */
+  text-align: center;
+  text-shadow: 0 2px 10px rgba(4, 8, 14, 0.9);
+  /* The RESTING halo — dark-only far, the peak's full accent glow in reach. Written out here as well
+     as in the keyframes so the near state survives reduced motion, which drops the animation entirely. */
+  box-shadow:
+    0 calc(10px + 6px * var(--rydr-marker-glow-rest))
+      calc(30px + 14px * var(--rydr-marker-glow-rest))
+      rgba(4, 8, 14, calc(0.55 + 0.1 * var(--rydr-marker-glow-rest))),
+    0 0 0 calc(12px * var(--rydr-marker-glow-rest))
+      color-mix(in srgb, var(--rydr-marker-accent) calc(34% * var(--rydr-marker-glow-rest)), transparent),
+    0 0 calc(26px * var(--rydr-marker-glow-rest))
+      color-mix(in srgb, var(--rydr-marker-accent) calc(45% * var(--rydr-marker-glow-rest)), transparent);
+  backdrop-filter: blur(6px);
+  /* The border warms to the accent on arrival — on the near clock, like everything else. */
+  transition: border-color var(--rydr-marker-near-ms) var(--rydr-marker-near-ease);
+}
+
+/* The shapes a consumer's own card content usually wants, all sized off the marker's one font size so
+   a subtitle stays a subtitle at every viewport. Nothing in the component emits these — they exist for
+   whatever {@link ActionMarkerOptions.content} builds, which is the point: the inside of the card is
+   the game's, the box around it is ours. */
+.rydr-marker-title {
+  display: block;
+}
+
+.rydr-marker-sub {
+  display: block;
+  margin-top: 0.15em;
+  /* Only ~10% off the title: the second line names what the thing IS or COSTS, which is half the
+     reason to read the card at all — shrunk to caption size it stopped carrying its weight. */
+  font-size: 0.9em;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--rydr-marker-accent);
+  opacity: 0.95;
+}
+
+.rydr-marker-meta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  margin-top: 0.3em;
+  font-size: 0.55em;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  opacity: 0.72;
+}
+
+/* ABSOLUTE, straddling the card's right edge: the keycap appearing must not move a single pixel of the
+   card. In flow it would — the marker is centred on its anchor, so a cap joining the row pushes the
+   text left exactly when the rider is reading it and reaching for the button. Out of flow it simply
+   fades in over the corner it always occupied.
+
+   Centred on the DIAMOND's own box, not on its lit pip. Lining the big pip up with the text was the
+   first try and it reads wrong: it lifts the three small siblings above the card's top edge, so the
+   cluster looks like it slipped upwards rather than like a button sitting beside a label. Centring the
+   whole cluster is what looks centred. */
+.rydr-marker-cap {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translate(calc(-1 * var(--cap-overlap)), -50%)
+    scale(calc(0.86 + 0.14 * var(--rydr-marker-near)));
+  /* Fades and grows in on the near clock — one arrival, not a cap appearing on a timer of its own. */
+  opacity: var(--rydr-marker-near);
+  /* Never a hit target, and never in the way of the text it sits beside. */
+  pointer-events: none;
+}
+
+
+.rydr-marker-caret {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  transition: opacity 140ms ease;
+}
+
+/* A triangle pointing along +x — the axis the wrapper is rotated to — drawn OUTWARD from the wrapper's
+   origin, which is why the placement maths can treat that origin as the arrow's base. Sized from the
+   custom properties the component sets, so the geometry has one home.
+
+   ONE CLOCK for the whole marker. The arrow's travel and the card's pulse are the same heartbeat, so
+   they run off the same --rydr-marker-pulse-ms with the same easing — and, crucially, the arrow's
+   animation runs from the moment the marker is built rather than starting when it goes off screen.
+   Two animations of equal duration are only in phase if they STARTED together; a caret whose animation
+   began the moment the anchor left the view would beat against a card that had been breathing since
+   the beat opened, and the pair reads as two separate things twitching. Hidden, it costs a compositor
+   transform on a zero-size element and nothing else. (Pausing it while hidden would desync it again on
+   resume, which is the whole thing this avoids.) */
+.rydr-marker-caret-tip {
+  animation: rydr-marker-caret-nudge var(--rydr-marker-pulse-ms) ease-in-out infinite;
+  position: absolute;
+  left: 0;
+  top: calc(-1 * var(--caret-half));
+  width: 0;
+  height: 0;
+  border-left: var(--caret-len) solid var(--rydr-marker-accent);
+  border-top: var(--caret-half) solid transparent;
+  border-bottom: var(--caret-half) solid transparent;
+  filter: drop-shadow(0 3px 8px rgba(4, 8, 14, 0.85));
+  /* Swell from the BASE, not the middle: the base is the end resting against the card, so growing
+     about it reaches the arrow out towards what it points at. About the centre it would grow backwards
+     into the card by half of whatever it gained. */
+  transform-origin: 0 50%;
+}
+
+.rydr-marker.is-offscreen .rydr-marker-caret {
+  opacity: 1;
+}
+
+/* "You can do this here": the standing possibility. The CARD is still — the arrow keeps its travel,
+   since a marker pointing off screen has to be findable whatever its tone, and it beats on the same
+   clock as everything else. */
+.rydr-marker[data-tone="hint"] {
+  /* Nothing. A hint is the STILLEST tone, not a grey one — the rule is kept as a marker of that: what
+     used to live here (a grey palette) is the white/default colour's job now, and a hint wearing
+     danger red has to come out red. */
+}
+
+/* "This is the thing on offer" (action) and "do it NOW" (urgent) are the SAME MOVEMENT — one keyframe,
+   the same scale and the same blink. What separates them is the CLOCK and the colour, nothing else:
+   urgent re-points --rydr-marker-pulse-ms and the accent below. Two different pulse shapes was the
+   first try and it reads as two unrelated widgets; one shape at two speeds reads as one vocabulary
+   with a volume knob, which is what a tone IS. */
+/* The animation is on EVERY card, including hint's — hint just runs it at zero amplitude, where its
+   keyframes collapse to the resting style and nothing moves. One always-running animation per card is
+   what lets the near state fade the pulse out (amplitude → 0) rather than tear it off: swapping or
+   removing an animation is instant by definition, and instant is what this used to look like. */
+.rydr-marker-card {
+  animation: rydr-marker-pulse var(--rydr-marker-pulse-ms) ease-in-out infinite;
+}
+
+.rydr-marker[data-tone="hint"] {
+  --rydr-marker-pulse-strength: 0;
+}
+
+/* "Do it NOW": the same pulse, much faster. The CLOCK belongs to the tone and holds whatever colour the
+   marker is wearing — a green urgent marker is still a marker hammering at 620 ms. */
+.rydr-marker[data-tone="urgent"] {
+  --rydr-marker-pulse-ms: 620ms;
+}
+
+/* The amber it used to come in is GONE, deliberately: it made every urgent prompt look like a warning
+   whether or not the thing at the other end was one, which is the confusion the colour axis exists to
+   end. An urgent warning now says so — tone: "urgent" + color: "warning". */
+
+/* ── The colour axis ─────────────────────────────────────────────────────────────────────────────
+   Six palettes, each one nothing but the same four custom properties re-pointed — exactly what a
+   consumer's own className skin does, offered as a vocabulary so the common cases don't need a
+   stylesheet. Which means they carry no motion and no layout: whatever the card was doing, it keeps
+   doing in the new colour.
+
+   Every one is built the same way, which is what makes the six read as ONE set rather than six
+   decisions: a bright accent that has to survive being blown up to a 12 px glow ring in the pulse, a
+   near-black background carrying just enough of the hue that the card looks lit from inside rather
+   than tinted, an off-white text colour pulled the same way (pure white beside a saturated accent
+   reads colder than the accent), and a border at the accent's own 0.6 alpha. Alpha on the background,
+   not a solid: the marker sits over a moving arena and blurs it (backdrop-filter), and that blur is
+   half of why a card reads as glass on top of the world instead of a hole cut in it. */
+/* THE DEFAULT. A true neutral — no hue anywhere, not even in the glass — because it has to be able to
+   sit beside any of the other seven without joining in: the moment the default carries a tint, a card
+   that means nothing in particular reads as meaning whatever that tint means. Which is why steel, the
+   chrome blue, can't be the default even though it is the RYDR colour: beside cyan it reads as a third
+   accent. The accent here is a dimmed white rather than pure #fff, so the pulse's 12 px glow ring
+   doesn't blow out. */
+.rydr-marker[data-color="white"] {
+  --rydr-marker-bg: rgba(10, 12, 16, 0.84);
+  --rydr-marker-fg: #f7f9fd;
+  --rydr-marker-accent: #e8edf7;
+  --rydr-marker-border: rgba(232, 237, 247, 0.55);
+}
+
+/* Yellow and orange are the same message at two strengths, so they are the two nearest palettes in the
+   set — and that is a RISK, not a nicety: a rider glancing at one has to be able to tell it is not the
+   other. Yellow keeps a green bias (#ffd93d) against orange's red one (#ffa23a), which is the widest
+   the two can be pulled apart while both still read as "caution". */
+.rydr-marker[data-color="yellow"] {
+  --rydr-marker-bg: rgba(24, 20, 4, 0.84);
+  --rydr-marker-fg: #fff9e0;
+  --rydr-marker-accent: #ffd93d;
+  --rydr-marker-border: rgba(255, 217, 61, 0.62);
+}
+
+.rydr-marker[data-color="steel"] {
+  --rydr-marker-bg: rgba(9, 13, 20, 0.82);
+  --rydr-marker-fg: #f2f6ff;
+  --rydr-marker-accent: #7aa2e6;
+  --rydr-marker-border: rgba(122, 162, 230, 0.6);
+}
+
+.rydr-marker[data-color="green"] {
+  --rydr-marker-bg: rgba(6, 20, 13, 0.84);
+  --rydr-marker-fg: #ecfff4;
+  --rydr-marker-accent: #4ade80;
+  --rydr-marker-border: rgba(74, 222, 128, 0.6);
+}
+
+.rydr-marker[data-color="orange"] {
+  --rydr-marker-bg: rgba(24, 14, 4, 0.84);
+  --rydr-marker-fg: #fff4e6;
+  --rydr-marker-accent: #ffa23a;
+  --rydr-marker-border: rgba(255, 162, 58, 0.62);
+}
+
+.rydr-marker[data-color="red"] {
+  --rydr-marker-bg: rgba(26, 8, 8, 0.84);
+  --rydr-marker-fg: #ffecec;
+  --rydr-marker-accent: #ff5a52;
+  --rydr-marker-border: rgba(255, 90, 82, 0.64);
+}
+
+.rydr-marker[data-color="cyan"] {
+  --rydr-marker-bg: rgba(4, 20, 25, 0.84);
+  --rydr-marker-fg: #e6fbff;
+  --rydr-marker-accent: #38e1f0;
+  --rydr-marker-border: rgba(56, 225, 240, 0.6);
+}
+
+.rydr-marker[data-color="purple"] {
+  --rydr-marker-bg: rgba(16, 8, 30, 0.84);
+  --rydr-marker-fg: #f4ecff;
+  --rydr-marker-accent: #b07cff;
+  --rydr-marker-border: rgba(176, 124, 255, 0.62);
+}
+
+/* IN REACH — the marker stops calling and starts answering.
+   Every tone's attention-getting motion is a TRANSFORM on the card (the pulse's scale), and the
+   keycap is not part of that transform: it's parked out of flow against the card's edge. So a card
+   still scaling at 1.07 slides its own lettering under a cap that isn't moving, and the pair reads as
+   two objects that happen to be near each other rather than one control. Which is exactly wrong at
+   the moment it matters — the rider is in range, the button is the point, and the prompt's job has
+   changed from "look over here" to "press this".
+   So arriving SETTLES it: the pulse eases out and the card comes to rest HALF WAY UP its own swell,
+   holding the peak's fill and its whole accent HALO — lit and ringed, fixed, at the size between
+   resting and fully expanded. Nothing at rest breathes: a second, slower beat in reach is still a card
+   asking to be looked at, when the rider is already there and the only thing left to say is "press
+   this". All of it is one number, --rydr-marker-near, so the class only has to flip it and the border
+   it can't express as a calc; the transition on the root eases the rest. This comes after every tone
+   rule on purpose. */
+.rydr-marker.is-near {
+  --rydr-marker-near: 1;
+}
+
+.rydr-marker.is-near .rydr-marker-card {
+  border-color: var(--rydr-marker-accent);
+}
+
+/* The ONE pulse both calling tones use — action and urgent differ only in how fast it is played.
+   Everything that swells does so on the same beat: the card's SIZE, the ring around it, and the card's
+   own FILL, which warms towards the tone's accent at the peak and falls back to the flat background.
+   The fill is why the pulse reads across a busy arena at all — scale alone is easy to miss against a
+   moving scene, a card that lights up isn't. All three are painted from --rydr-marker-accent / -bg, so
+   a reskin gets its own pulse for free. */
+@keyframes rydr-marker-pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: calc(1 - 0.28 * var(--rydr-marker-pulse-amp));
+    background: color-mix(in srgb,
+      var(--rydr-marker-accent) calc(var(--rydr-marker-near-fill) * var(--rydr-marker-near)),
+      var(--rydr-marker-bg));
+    box-shadow:
+      0 calc(10px + 6px * var(--rydr-marker-glow-rest))
+        calc(30px + 14px * var(--rydr-marker-glow-rest))
+        rgba(4, 8, 14, calc(0.55 + 0.1 * var(--rydr-marker-glow-rest))),
+      0 0 0 calc(12px * var(--rydr-marker-glow-rest))
+        color-mix(in srgb, var(--rydr-marker-accent) calc(34% * var(--rydr-marker-glow-rest)), transparent),
+      0 0 calc(26px * var(--rydr-marker-glow-rest))
+        color-mix(in srgb, var(--rydr-marker-accent) calc(45% * var(--rydr-marker-glow-rest)), transparent);
+  }
+  50% {
+    transform: scale(calc(1 + 0.14 * var(--rydr-marker-pulse-amp)));
+    opacity: 1;
+    background: color-mix(in srgb,
+      var(--rydr-marker-accent)
+        calc(var(--rydr-marker-near-fill) * var(--rydr-marker-near) + 26% * var(--rydr-marker-pulse-amp)),
+      var(--rydr-marker-bg));
+    box-shadow:
+      0 calc(10px + 6px * var(--rydr-marker-glow-peak))
+        calc(30px + 14px * var(--rydr-marker-glow-peak))
+        rgba(4, 8, 14, calc(0.55 + 0.1 * var(--rydr-marker-glow-peak))),
+      0 0 0 calc(12px * var(--rydr-marker-glow-peak))
+        color-mix(in srgb, var(--rydr-marker-accent) calc(34% * var(--rydr-marker-glow-peak)), transparent),
+      0 0 calc(26px * var(--rydr-marker-glow-peak))
+        color-mix(in srgb, var(--rydr-marker-accent) calc(45% * var(--rydr-marker-glow-peak)), transparent);
+  }
+}
+
+/* Out and back along its own axis, starting from against the card: the arrow travels most of its own
+   length and swells as it goes — the card's pulse, on the card's clock, in the arrow's own vocabulary.
+   Both extremes land at 50%, so the two peak on the same beat. */
+@keyframes rydr-marker-caret-nudge {
+  0%, 100% { transform: translateX(0) scale(1); }
+  50% { transform: translateX(var(--caret-nudge)) scale(var(--caret-scale)); }
+}
+
+/* A rider who asked the OS for less motion gets the colours and none of the movement — the tone is
+   still legible, it just stops moving. */
+@media (prefers-reduced-motion: reduce) {
+  .rydr-marker .rydr-marker-card,
+  .rydr-marker .rydr-marker-caret-tip {
+    animation: none !important;
+  }
+}
+`;
+//# sourceMappingURL=action-marker.js.map