@jgengine/react 0.14.0 → 0.15.0

package/dist/i18n.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+import type { I18n, Locale, TParams } from "@jgengine/core/i18n/i18n";
+/** Provide an {@link I18n} instance to the tree so `useT`/`useLocale` can read it. */
+export declare function I18nProvider({ i18n, children }: {
+    i18n: I18n;
+    children: ReactNode;
+}): ReactNode;
+/** Read the current {@link I18n} from context; throws when no {@link I18nProvider} is above. */
+export declare function useI18n(): I18n;
+/** Subscribe to the active locale — re-renders on `setLocale`. */
+export declare function useLocale(): Locale;
+/**
+ * Return the translator bound to the current locale; the component re-renders
+ * when `setLocale` is called, so returned strings stay live.
+ *
+ * @capability use-translate live `t(key, params)` translator bound to the active locale, re-rendering on locale change
+ */
+export declare function useT(): (key: string, params?: TParams) => string;
+/** Return the plural-aware translator bound to the current locale. */
+export declare function usePlural(): (key: string, count: number, params?: TParams) => string;
+/**
+ * Render a translated message inline: `<Trans k="hud.score" params={{ value }} />`.
+ *
+ * @capability trans inline translated-message component bound to the active locale
+ */
+export declare function Trans({ k, params }: {
+    k: string;
+    params?: TParams;
+}): ReactNode;

package/dist/i18n.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useSyncExternalStore } from "react";
+const I18nContext = createContext(null);
+/** Provide an {@link I18n} instance to the tree so `useT`/`useLocale` can read it. */
+export function I18nProvider({ i18n, children }) {
+    return _jsx(I18nContext.Provider, { value: i18n, children: children });
+}
+/** Read the current {@link I18n} from context; throws when no {@link I18nProvider} is above. */
+export function useI18n() {
+    const i18n = useContext(I18nContext);
+    if (i18n === null)
+        throw new Error("useI18n must be used within an <I18nProvider>");
+    return i18n;
+}
+/** Subscribe to the active locale — re-renders on `setLocale`. */
+export function useLocale() {
+    const i18n = useI18n();
+    return useSyncExternalStore(i18n.subscribe, i18n.locale, i18n.locale);
+}
+/**
+ * Return the translator bound to the current locale; the component re-renders
+ * when `setLocale` is called, so returned strings stay live.
+ *
+ * @capability use-translate live `t(key, params)` translator bound to the active locale, re-rendering on locale change
+ */
+export function useT() {
+    const i18n = useI18n();
+    useLocale(); // re-render on locale change
+    return i18n.t;
+}
+/** Return the plural-aware translator bound to the current locale. */
+export function usePlural() {
+    const i18n = useI18n();
+    useLocale();
+    return i18n.plural;
+}
+/**
+ * Render a translated message inline: `<Trans k="hud.score" params={{ value }} />`.
+ *
+ * @capability trans inline translated-message component bound to the active locale
+ */
+export function Trans({ k, params }) {
+    return useT()(k, params);
+}

package/dist/index.d.ts

@@ -5,23 +5,53 @@ export * from "./chatBubbles.js";
 export * from "./voice.js";
 export * from "./social.js";
 export * from "./hooks.js";
+export * from "./useDebouncedCommit.js";
 export * from "./store.js";
 export * from "./settings.js";
 export * from "./save.js";
+export * from "./achievements.js";
+export * from "./i18n.js";
+export * from "./accessibility.js";
+export * from "./photoMode.js";
+export * from "./radialMenu.js";
+export * from "./quickMenu.js";
+export * from "./questTracker.js";
+export * from "./codex.js";
+export * from "./notifications.js";
+export * from "./coachMarks.js";
+export * from "./objectiveBanner.js";
+export * from "./keybindingMenu.js";
+export * from "./shopGrid.js";
+export * from "./killFeed.js";
+export * from "./waveHud.js";
+export * from "./comboMeter.js";
+export * from "./waypointMarkers.js";
+export * from "./scoreboard.js";
+export * from "./timerReadout.js";
+export * from "./dialogueView.js";
+export * from "./cutscene.js";
+export * from "./damageDirection.js";
+export * from "./modals.js";
+export * from "./fastTravel.js";
+export * from "./floatingText.js";
 export * from "./components.js";
 export * from "./hud.js";
 export * from "./bars.js";
+export * from "./entityFrames.js";
 export * from "./barsPreview.js";
 export * from "./iconTreatment.js";
+export * from "./statusEffectBar.js";
 export * from "./iconsPreview.js";
 export * from "./slots.js";
 export * from "./inventoryGrid.js";
 export * from "./panels.js";
 export * from "./characterSheet.js";
+export * from "./talentTree.js";
 export * from "./hudTheme.js";
 export * from "./hudThemePreview.js";
 export * from "./hudFrame.js";
 export * from "./keyHint.js";
+export * from "./interactionPrompt.js";
 export * from "./startScreen.js";
 export * from "./engineStore.js";
 export * from "./dragLayer.js";
@@ -36,3 +66,7 @@ export * from "./rotateDevice.js";
 export * from "./display.js";
 export * from "./map.js";
 export * from "./preview.js";
+export * from "./previewFixtures.js";
+export * from "./streetGeometryPreview.js";
+export * from "./saveSlots.js";
+export * from "./cameraShake.js";

package/dist/index.js

@@ -5,23 +5,53 @@ export * from "./chatBubbles.js";
 export * from "./voice.js";
 export * from "./social.js";
 export * from "./hooks.js";
+export * from "./useDebouncedCommit.js";
 export * from "./store.js";
 export * from "./settings.js";
 export * from "./save.js";
+export * from "./achievements.js";
+export * from "./i18n.js";
+export * from "./accessibility.js";
+export * from "./photoMode.js";
+export * from "./radialMenu.js";
+export * from "./quickMenu.js";
+export * from "./questTracker.js";
+export * from "./codex.js";
+export * from "./notifications.js";
+export * from "./coachMarks.js";
+export * from "./objectiveBanner.js";
+export * from "./keybindingMenu.js";
+export * from "./shopGrid.js";
+export * from "./killFeed.js";
+export * from "./waveHud.js";
+export * from "./comboMeter.js";
+export * from "./waypointMarkers.js";
+export * from "./scoreboard.js";
+export * from "./timerReadout.js";
+export * from "./dialogueView.js";
+export * from "./cutscene.js";
+export * from "./damageDirection.js";
+export * from "./modals.js";
+export * from "./fastTravel.js";
+export * from "./floatingText.js";
 export * from "./components.js";
 export * from "./hud.js";
 export * from "./bars.js";
+export * from "./entityFrames.js";
 export * from "./barsPreview.js";
 export * from "./iconTreatment.js";
+export * from "./statusEffectBar.js";
 export * from "./iconsPreview.js";
 export * from "./slots.js";
 export * from "./inventoryGrid.js";
 export * from "./panels.js";
 export * from "./characterSheet.js";
+export * from "./talentTree.js";
 export * from "./hudTheme.js";
 export * from "./hudThemePreview.js";
 export * from "./hudFrame.js";
 export * from "./keyHint.js";
+export * from "./interactionPrompt.js";
 export * from "./startScreen.js";
 export * from "./engineStore.js";
 export * from "./dragLayer.js";
@@ -36,3 +66,7 @@ export * from "./rotateDevice.js";
 export * from "./display.js";
 export * from "./map.js";
 export * from "./preview.js";
+export * from "./previewFixtures.js";
+export * from "./streetGeometryPreview.js";
+export * from "./saveSlots.js";
+export * from "./cameraShake.js";

package/dist/interactionPrompt.d.ts

@@ -0,0 +1,80 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { PositionedPrompt, PromptPoint } from "@jgengine/core/interaction/proximityPrompt";
+import type { PromptRegistry } from "@jgengine/core/interaction/promptRegistry";
+/**
+ * Subscribe to a {@link PromptRegistry} and re-`resolve` it whenever the player
+ * moves, returning the prompt to draw right now — or `null` when the player is
+ * out of range of every interactable. The registry notifies only on active-prompt
+ * *changes*, so this re-renders on transitions rather than every frame the hero
+ * moves. Feed it the player's `{ x, z }` position each frame; identical positions
+ * do no work.
+ *
+ * @capability use-interaction-prompt React hook binding a prompt registry to a moving player — resolves the nearest interactable prompt and returns the active one
+ */
+export declare function useInteractionPrompt(registry: PromptRegistry, playerPosition: PromptPoint): PositionedPrompt | null;
+/** Reskin tokens for {@link InteractionPrompt}. */
+export interface InteractionPromptTheme {
+    /** Accent for the key cap and glow. Default reads `--jg-accent`. */
+    accent?: string;
+    /** Callout background. */
+    background?: string;
+    /** Callout border color. */
+    border?: string;
+    /** Label text color. */
+    text?: string;
+    /** Font family. */
+    fontFamily?: string;
+}
+/** Where the callout sits over the scene. */
+export type InteractionPromptAnchor = "bottom-center" | "top-center" | "center";
+/** Props for {@link InteractionPrompt}. */
+export interface InteractionPromptProps {
+    /** The registry that owns the prompts and the active selection. */
+    registry: PromptRegistry;
+    /**
+     * The player's ground position. When supplied the host drives `resolve` on
+     * every position change; omit it if the game already calls `registry.resolve`
+     * from its own tick (the host still subscribes and renders the active prompt).
+     */
+    playerPosition?: PromptPoint;
+    /** Base reskin tokens. */
+    theme?: InteractionPromptTheme;
+    /**
+     * Per-prompt accent chooser. The registry never interprets a prompt's meaning,
+     * so the game decides the accent from the active prompt (its id, action id, or
+     * label) — e.g. a warm hue for a chest, cool for a door. Returning `undefined`
+     * falls back to the theme accent.
+     */
+    accentFor?: (prompt: PositionedPrompt) => string | undefined;
+    /**
+     * Key glyph shown on the cap for a `keybind` prompt, chosen from the prompt's
+     * free-string `actionId`. Default `"E"`.
+     */
+    keyFor?: (actionId: string) => string;
+    /**
+     * Hold progress `0..1` for a `gauge` prompt, by its free-string `gaugeId` —
+     * fills the ring/bar as the player holds. Default `0`.
+     */
+    gaugeProgress?: (gaugeId: string) => number;
+    /** Where the callout sits. Default `"bottom-center"`. */
+    anchor?: InteractionPromptAnchor;
+    /** Overlay `z-index`. Default `40`. */
+    zIndex?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A screen-anchored "Press E to …" interaction callout that renders the active
+ * prompt of a {@link PromptRegistry}. It subscribes to the registry and — when
+ * given `playerPosition` — re-resolves as the hero moves, showing the nearest
+ * in-range interactable and switching to a closer/higher-priority one as they
+ * cross radii. Each display kind renders as itself: a `keybind` shows a key cap
+ * plus its label ("Press [E] Open"), a `gauge` shows a hold bar filling with
+ * `gaugeProgress`, and a `label` shows plain text. Presentation only — the
+ * registry never branches on a prompt's meaning; the game colors each via
+ * `accentFor` and maps action ids to key glyphs via `keyFor`. HudTheme-skinnable
+ * through `--jg-accent` and {@link InteractionPromptTheme}.
+ *
+ * @capability interaction-prompt-host screen-anchored "press E to…" callout rendering a prompt registry's active interactable — keybind cap+label, gauge hold bar, or plain label, theme- and per-prompt-accent skinnable
+ */
+export declare function InteractionPrompt({ registry, playerPosition, theme, accentFor, keyFor, gaugeProgress, anchor, zIndex, className, style, }: InteractionPromptProps): ReactNode;

package/dist/interactionPrompt.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useReducer } from "react";
+import { StaminaBar } from "./bars.js";
+import { KeyHint, Keycap } from "./keyHint.js";
+/**
+ * Subscribe to a {@link PromptRegistry} and re-`resolve` it whenever the player
+ * moves, returning the prompt to draw right now — or `null` when the player is
+ * out of range of every interactable. The registry notifies only on active-prompt
+ * *changes*, so this re-renders on transitions rather than every frame the hero
+ * moves. Feed it the player's `{ x, z }` position each frame; identical positions
+ * do no work.
+ *
+ * @capability use-interaction-prompt React hook binding a prompt registry to a moving player — resolves the nearest interactable prompt and returns the active one
+ */
+export function useInteractionPrompt(registry, playerPosition) {
+    const [, bump] = useReducer((n) => n + 1, 0);
+    useEffect(() => registry.subscribe(bump), [registry]);
+    useEffect(() => {
+        registry.resolve(playerPosition);
+    }, [registry, playerPosition.x, playerPosition.z]);
+    return registry.active();
+}
+function resolveTheme(theme) {
+    return {
+        accent: theme?.accent ?? "var(--jg-accent, #38bdf8)",
+        background: theme?.background ?? "rgba(15,20,28,0.86)",
+        border: theme?.border ?? "rgba(148,163,184,0.28)",
+        text: theme?.text ?? "#e2e8f0",
+        fontFamily: theme?.fontFamily ?? "ui-sans-serif, system-ui, sans-serif",
+    };
+}
+const ANCHOR_STYLE = {
+    "bottom-center": { bottom: "12%", left: "50%", transform: "translateX(-50%)" },
+    "top-center": { top: "12%", left: "50%", transform: "translateX(-50%)" },
+    center: { top: "50%", left: "50%", transform: "translate(-50%, -50%)" },
+};
+/** Bind to the registry either through the moving player, or passively on the active id. */
+function useActive(registry, playerPosition) {
+    const [, bump] = useReducer((n) => n + 1, 0);
+    useEffect(() => registry.subscribe(bump), [registry]);
+    const px = playerPosition?.x;
+    const pz = playerPosition?.z;
+    useEffect(() => {
+        if (px !== undefined && pz !== undefined)
+            registry.resolve({ x: px, z: pz });
+    }, [registry, px, pz]);
+    return registry.active();
+}
+/**
+ * A screen-anchored "Press E to …" interaction callout that renders the active
+ * prompt of a {@link PromptRegistry}. It subscribes to the registry and — when
+ * given `playerPosition` — re-resolves as the hero moves, showing the nearest
+ * in-range interactable and switching to a closer/higher-priority one as they
+ * cross radii. Each display kind renders as itself: a `keybind` shows a key cap
+ * plus its label ("Press [E] Open"), a `gauge` shows a hold bar filling with
+ * `gaugeProgress`, and a `label` shows plain text. Presentation only — the
+ * registry never branches on a prompt's meaning; the game colors each via
+ * `accentFor` and maps action ids to key glyphs via `keyFor`. HudTheme-skinnable
+ * through `--jg-accent` and {@link InteractionPromptTheme}.
+ *
+ * @capability interaction-prompt-host screen-anchored "press E to…" callout rendering a prompt registry's active interactable — keybind cap+label, gauge hold bar, or plain label, theme- and per-prompt-accent skinnable
+ */
+export function InteractionPrompt({ registry, playerPosition, theme, accentFor, keyFor, gaugeProgress, anchor = "bottom-center", zIndex = 40, className, style, }) {
+    const prompt = useActive(registry, playerPosition);
+    if (prompt === null)
+        return null;
+    const t = resolveTheme(theme);
+    const accent = accentFor?.(prompt) ?? t.accent;
+    const display = prompt.prompt.display;
+    let body;
+    if (display.kind === "keybind") {
+        const glyph = keyFor?.(display.actionId) ?? "E";
+        body = (_jsxs(KeyHint, { style: { display: "inline-flex", alignItems: "center", gap: 10 }, children: [_jsx("span", { style: { fontSize: 13, fontWeight: 600, letterSpacing: 0.4, opacity: 0.85 }, children: "Press" }), _jsx(Keycap, { style: {
+                        display: "inline-flex",
+                        minWidth: 26,
+                        justifyContent: "center",
+                        padding: "3px 8px",
+                        borderRadius: 6,
+                        border: `1px solid ${accent}`,
+                        background: "rgba(0,0,0,0.35)",
+                        color: accent,
+                        fontWeight: 800,
+                        fontSize: 14,
+                        boxShadow: `0 0 10px -2px ${accent}`,
+                    }, children: glyph }), display.label !== undefined ? (_jsx("span", { style: { fontSize: 15, fontWeight: 700 }, children: display.label })) : null] }));
+    }
+    else if (display.kind === "gauge") {
+        const progress = Math.max(0, Math.min(1, gaugeProgress?.(display.gaugeId) ?? 0));
+        body = (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 10 }, children: [_jsx("span", { style: { fontSize: 13, fontWeight: 600, letterSpacing: 0.4, opacity: 0.85 }, children: "Hold" }), _jsx(StaminaBar, { value: progress * 100, showValue: false, width: 140, fill: accent })] }));
+    }
+    else {
+        body = _jsx("span", { style: { fontSize: 15, fontWeight: 700 }, children: display.text });
+    }
+    return (_jsx("div", { className: className, "data-interaction-prompt": prompt.id, "data-prompt-kind": display.kind, style: {
+            position: "absolute",
+            ...ANCHOR_STYLE[anchor],
+            display: "flex",
+            alignItems: "center",
+            pointerEvents: "none",
+            padding: "9px 16px",
+            borderRadius: 12,
+            border: `1px solid ${t.border}`,
+            background: t.background,
+            color: t.text,
+            fontFamily: t.fontFamily,
+            boxShadow: `0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px ${accent}22`,
+            backdropFilter: "blur(4px)",
+            whiteSpace: "nowrap",
+            zIndex,
+            ...style,
+        }, children: body }));
+}

package/dist/keybindingMenu.d.ts

@@ -0,0 +1,59 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { RebindSession } from "@jgengine/core/input/rebindSession";
+/**
+ * Subscribe to a rebind session and re-render on every change (capture, reset,
+ * arm/disarm, restore). Returns the session unchanged for convenient inline use.
+ *
+ * @capability use-rebind-session React hook that re-renders a component whenever a rebind session changes
+ */
+export declare function useRebindSession(session: RebindSession): RebindSession;
+/** Reskin tokens for {@link KeybindingMenu}. All fall back to HudTheme `--jg-*` vars. */
+export interface KeybindingMenuTheme {
+    /** Panel background. Default reads `--jg-frame-bg`. */
+    bg?: string;
+    /** Panel border. Default reads `--jg-frame-border`. */
+    border?: string;
+    /** Corner radius. Default reads `--jg-frame-radius`. */
+    radius?: string;
+    /** Row label text color. */
+    text?: string;
+    /** Muted text (hints, secondary). */
+    muted?: string;
+    /** Accent for the armed row + focus glow. Default reads `--jg-accent`. */
+    accent?: string;
+    /** Conflict highlight color. */
+    conflict?: string;
+    /** Font family. */
+    fontFamily?: string;
+}
+/** Props for {@link KeybindingMenu}. */
+export interface KeybindingMenuProps {
+    /** The rebind session to edit. */
+    session: RebindSession;
+    /** Reskin tokens (fall back to HudTheme). */
+    theme?: KeybindingMenuTheme;
+    /** Heading shown above the list. Default `"Controls"`. */
+    title?: ReactNode;
+    /** Label for the reset-all button. Default `"Reset All"`. */
+    resetAllLabel?: string;
+    /** Prompt shown in a row that is armed for capture. Default `"Press a key…"`. */
+    capturePrompt?: string;
+    /** Called after a successful rebind or reset — e.g. persist `session.overrides()`. */
+    onChange?: (session: RebindSession) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A drop-in controls-settings surface for a {@link RebindSession}: one row per
+ * action showing its label and current key glyph. Clicking a row arms capture
+ * ("Press a key…") and a window `keydown` listener feeds the pressed
+ * `event.code` to `session.capture`; rows that collide with another action show
+ * a conflict badge; each row has a Reset button and the panel has a Reset-all
+ * button. Presentation only — all conflict/capture/reset logic lives in the core
+ * session, and action ids/labels are the game's free strings. Reskin via
+ * {@link KeybindingMenuTheme} or ambient HudTheme tokens. A game owns its overall
+ * settings layout; this is the reusable controls block it drops in.
+ *
+ * @capability keybinding-menu drop-in controls-settings surface over a rebind session — click-to-capture rows with key glyphs, conflict badges, per-row and reset-all, HudTheme-skinnable
+ */
+export declare function KeybindingMenu({ session, theme, title, resetAllLabel, capturePrompt, onChange, className, style, }: KeybindingMenuProps): ReactNode;

package/dist/keybindingMenu.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useReducer } from "react";
+import { Keycap } from "./keyHint.js";
+/**
+ * Subscribe to a rebind session and re-render on every change (capture, reset,
+ * arm/disarm, restore). Returns the session unchanged for convenient inline use.
+ *
+ * @capability use-rebind-session React hook that re-renders a component whenever a rebind session changes
+ */
+export function useRebindSession(session) {
+    const [, bump] = useReducer((n) => n + 1, 0);
+    useEffect(() => session.subscribe(bump), [session]);
+    return session;
+}
+function resolveTheme(theme) {
+    return {
+        bg: theme?.bg ?? "var(--jg-frame-bg, linear-gradient(180deg, rgba(20,24,32,0.92), rgba(10,12,16,0.95)))",
+        border: theme?.border ?? "var(--jg-frame-border, 1px solid rgba(255,255,255,0.12))",
+        radius: theme?.radius ?? "var(--jg-frame-radius, 12px)",
+        text: theme?.text ?? "#e8edf5",
+        muted: theme?.muted ?? "rgba(148,163,184,0.85)",
+        accent: theme?.accent ?? "var(--jg-accent, #38bdf8)",
+        conflict: theme?.conflict ?? "#f87171",
+        fontFamily: theme?.fontFamily ?? "ui-sans-serif, system-ui, sans-serif",
+    };
+}
+/**
+ * A drop-in controls-settings surface for a {@link RebindSession}: one row per
+ * action showing its label and current key glyph. Clicking a row arms capture
+ * ("Press a key…") and a window `keydown` listener feeds the pressed
+ * `event.code` to `session.capture`; rows that collide with another action show
+ * a conflict badge; each row has a Reset button and the panel has a Reset-all
+ * button. Presentation only — all conflict/capture/reset logic lives in the core
+ * session, and action ids/labels are the game's free strings. Reskin via
+ * {@link KeybindingMenuTheme} or ambient HudTheme tokens. A game owns its overall
+ * settings layout; this is the reusable controls block it drops in.
+ *
+ * @capability keybinding-menu drop-in controls-settings surface over a rebind session — click-to-capture rows with key glyphs, conflict badges, per-row and reset-all, HudTheme-skinnable
+ */
+export function KeybindingMenu({ session, theme, title = "Controls", resetAllLabel = "Reset All", capturePrompt = "Press a key…", onChange, className, style, }) {
+    useRebindSession(session);
+    const t = resolveTheme(theme);
+    const rows = session.rows();
+    const capturing = session.capturingActionId();
+    // While armed, the next keydown anywhere reassigns the row (Escape cancels).
+    useEffect(() => {
+        if (capturing === null)
+            return;
+        const onKeyDown = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.code === "Escape") {
+                session.cancelCapture();
+                return;
+            }
+            session.capture(event.code);
+            onChange?.(session);
+        };
+        window.addEventListener("keydown", onKeyDown, { capture: true });
+        return () => window.removeEventListener("keydown", onKeyDown, { capture: true });
+    }, [capturing, session, onChange]);
+    const anyConflict = session.hasConflicts();
+    return (_jsxs("div", { "data-keybinding-menu": "", className: className, style: {
+            pointerEvents: "auto",
+            display: "flex",
+            flexDirection: "column",
+            gap: 10,
+            width: "min(420px, 92vw)",
+            padding: "16px 18px",
+            background: t.bg,
+            border: t.border,
+            borderRadius: t.radius,
+            color: t.text,
+            fontFamily: t.fontFamily,
+            boxShadow: "0 12px 40px rgba(0,0,0,0.5)",
+            ...style,
+        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }, children: [_jsx("div", { style: { fontSize: 15, fontWeight: 800, letterSpacing: "0.08em", textTransform: "uppercase" }, children: title }), _jsx("button", { type: "button", "data-keybinding-reset-all": "", onClick: () => {
+                            session.resetAll();
+                            onChange?.(session);
+                        }, style: buttonStyle(t.muted, t.border), children: resetAllLabel })] }), anyConflict ? (_jsx("div", { style: { fontSize: 12, color: t.conflict, fontWeight: 600 }, children: "\u26A0 Some keys are bound to more than one action." })) : null, _jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: rows.map((row) => (_jsx(KeybindingRow, { row: row, armed: capturing === row.actionId, capturePrompt: capturePrompt, theme: t, onArm: () => session.beginCapture(row.actionId), onReset: () => {
+                        session.reset(row.actionId);
+                        onChange?.(session);
+                    } }, row.actionId))) })] }));
+}
+function KeybindingRow({ row, armed, capturePrompt, theme, onArm, onReset, }) {
+    const conflicted = row.conflictWith.length > 0;
+    return (_jsxs("div", { "data-keybinding-row": row.actionId, "data-armed": armed ? "" : undefined, "data-conflict": conflicted ? "" : undefined, style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            padding: "8px 10px",
+            borderRadius: 8,
+            background: armed ? "rgba(56,189,248,0.14)" : "rgba(255,255,255,0.03)",
+            border: `1px solid ${armed ? theme.accent : conflicted ? theme.conflict : "transparent"}`,
+            boxShadow: armed ? `0 0 0 1px ${theme.accent}, 0 0 14px rgba(56,189,248,0.35)` : "none",
+            transition: "background 120ms, border-color 120ms",
+        }, children: [_jsxs("div", { style: { flex: 1, minWidth: 0, fontSize: 14, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [row.label, conflicted ? (_jsx("span", { "data-keybinding-conflict-badge": "", style: {
+                            marginLeft: 8,
+                            padding: "1px 7px",
+                            borderRadius: 999,
+                            fontSize: 10,
+                            fontWeight: 800,
+                            letterSpacing: "0.06em",
+                            textTransform: "uppercase",
+                            color: "#1a0808",
+                            background: theme.conflict,
+                        }, children: "Conflict" })) : null] }), _jsx("button", { type: "button", "data-keybinding-capture": "", onClick: onArm, style: {
+                    minWidth: 96,
+                    display: "flex",
+                    justifyContent: "center",
+                    cursor: "pointer",
+                    background: "transparent",
+                    border: "none",
+                    padding: 0,
+                }, children: armed ? (_jsx("span", { style: { fontSize: 12, fontWeight: 700, color: theme.accent }, children: capturePrompt })) : (_jsx(Keycap, { style: {
+                        minWidth: 34,
+                        padding: "3px 9px",
+                        borderRadius: 6,
+                        textAlign: "center",
+                        fontSize: 13,
+                        fontWeight: 700,
+                        color: conflicted ? theme.conflict : theme.text,
+                        background: "rgba(0,0,0,0.4)",
+                        border: `1px solid ${conflicted ? theme.conflict : "rgba(255,255,255,0.18)"}`,
+                        boxShadow: "inset 0 -2px 0 rgba(0,0,0,0.4)",
+                    }, children: row.bindingLabel || "—" })) }), _jsx("button", { type: "button", "data-keybinding-reset": "", onClick: onReset, disabled: row.isDefault, title: "Reset to default", style: {
+                    ...buttonStyle(theme.muted, theme.border),
+                    opacity: row.isDefault ? 0.35 : 1,
+                    cursor: row.isDefault ? "default" : "pointer",
+                    padding: "4px 8px",
+                    fontSize: 11,
+                }, children: "Reset" })] }));
+}
+function buttonStyle(color, border) {
+    return {
+        pointerEvents: "auto",
+        background: "rgba(255,255,255,0.05)",
+        border,
+        borderRadius: 8,
+        color,
+        fontSize: 12,
+        fontWeight: 600,
+        padding: "5px 10px",
+        cursor: "pointer",
+    };
+}

package/dist/killFeed.d.ts

@@ -0,0 +1,63 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { EventTicker, EventTickerView } from "@jgengine/core/game/eventTicker";
+/**
+ * Subscribe to an event ticker and re-render it on an animation frame (unless the game
+ * already ticks it), returning the live entries newest-first with `fade` applied. Driving
+ * the frame loop is what makes entries visibly fade and drop as they age out.
+ *
+ * @capability use-event-ticker React hook binding an event-ticker — re-renders per frame so entries fade and drop live, returning the current newest-first views
+ */
+export declare function useEventTicker(ticker: EventTicker, animate?: boolean): EventTickerView[];
+/** Per-`kind` styling for a kill-feed row — accent color and an optional icon. */
+export interface KillFeedKindStyle {
+    /** Accent color for the row's icon and left rule. */
+    accent?: string;
+    /** Free-string {@link GameIcon} name to show for this kind (overridden by an entry's own `icon`). */
+    icon?: string;
+    /** Text color for the row. Defaults to the theme text color. */
+    color?: string;
+}
+/** Reskin tokens for {@link KillFeed}. */
+export interface KillFeedTheme {
+    /** Row background. Default reads `--jg-frame-bg`. */
+    rowBg?: string;
+    /** Row text color. Default near-white. */
+    text?: string;
+    /** Fallback accent when a kind has none. Default reads `--jg-accent`. */
+    accent?: string;
+    /** Font family. */
+    fontFamily?: string;
+    /** Row corner radius. Default reads `--jg-frame-radius`. */
+    radius?: string;
+}
+/** Props for {@link KillFeed}. */
+export interface KillFeedProps {
+    /** The ticker to render. */
+    ticker: EventTicker;
+    /**
+     * Per-`kind` accent + icon, keyed by the free-string `kind` a game pushes with ("kill",
+     * "assist", "info", …). The matching entry styles that row; the model never interprets `kind`.
+     */
+    kindStyles?: Record<string, KillFeedKindStyle>;
+    /** Base reskin tokens. */
+    theme?: KillFeedTheme;
+    /** Icon size in px. Default `18`. */
+    iconSize?: number;
+    /** Drive re-render on an animation frame. Default `true`. Turn off if the game ticks it. */
+    animate?: boolean;
+    /** Extra `z-index` for the stack. Default `40`. */
+    zIndex?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A vertical event/kill-feed ticker: renders an {@link EventTicker}'s recent entries as a
+ * stack of rows, newest on top, each with its `fade` `0..1` mapped to opacity so entries dim
+ * and drop as they age out. Each row shows an optional per-kind (or per-entry) {@link GameIcon}
+ * and a per-kind accent color from `kindStyles`, styled with HudTheme tokens. Presentation
+ * only: all capping/timing lives in the core ticker, and the free-string `kind`/`text`/`icon`
+ * are never interpreted here — a game colors and icons each variant via `kindStyles`.
+ *
+ * @capability kill-feed vertical event/kill-feed ticker rendering a core event-ticker as a fading, newest-on-top stack of per-kind iconned, accent-colored rows over HudTheme tokens
+ */
+export declare function KillFeed({ ticker, kindStyles, theme, iconSize, animate, zIndex, className, style, }: KillFeedProps): ReactNode;