@jgengine/react 0.13.0 → 0.15.0-next.0

package/dist/hudTheme.js

@@ -1,15 +1,20 @@
 import {} from "react";
 /** Emits the CSS custom properties for a theme — spread onto any HUD ancestor to re-skin the subtree. */
 export function hudThemeVars(theme) {
-    const { palette, frame, bar, slot } = theme;
+    const { palette, surface, status, font, rarity, frame, bar, slot } = theme;
     return {
         // atomic-bar tokens (same names the bars read — #1033)
         "--jg-health": palette.health,
         "--jg-health-low": palette.healthLow,
+        "--jg-health-deep": palette.healthDeep,
         "--jg-mana": palette.mana,
+        "--jg-mana-deep": palette.manaDeep,
         "--jg-stamina": palette.stamina,
+        "--jg-stamina-deep": palette.staminaDeep,
         "--jg-shield": palette.shield,
+        "--jg-shield-deep": palette.shieldDeep,
         "--jg-xp": palette.xp,
+        "--jg-xp-deep": palette.xpDeep,
         "--jg-soul": palette.soul,
         "--jg-ammo": palette.ammo,
         "--jg-boss": palette.boss,
@@ -21,6 +26,30 @@ export function hudThemeVars(theme) {
         "--jg-bar-text": bar.text,
         // shared chrome tokens
         "--jg-accent": palette.accent,
+        "--jg-accent-deep": palette.accentDeep,
+        "--jg-accent-glow": palette.accentGlow,
+        "--jg-accent-dim": palette.accentDim,
+        "--jg-surface": surface.surface,
+        "--jg-surface-deep": surface.surfaceDeep,
+        "--jg-edge": surface.edge,
+        "--jg-edge-bright": surface.edgeBright,
+        "--jg-text": surface.text,
+        "--jg-text-dim": surface.textDim,
+        "--jg-backdrop": surface.backdrop,
+        "--jg-danger": status.danger,
+        "--jg-warning": status.warning,
+        "--jg-success": status.success,
+        "--jg-hostile": status.hostile,
+        "--jg-friendly": status.friendly,
+        "--jg-neutral": status.neutral,
+        "--jg-font-display": font.display,
+        "--jg-font-numeric": font.numeric,
+        "--jg-font-body": font.body,
+        "--jg-rarity-common": rarity.common,
+        "--jg-rarity-uncommon": rarity.uncommon,
+        "--jg-rarity-rare": rarity.rare,
+        "--jg-rarity-epic": rarity.epic,
+        "--jg-rarity-legendary": rarity.legendary,
         "--jg-frame-bg": frame.bg,
         "--jg-frame-border": frame.border,
         "--jg-frame-radius": frame.radius,
@@ -44,6 +73,43 @@ export const defaultHudTheme = {
         ammo: "#f8b84e",
         boss: "#ef4444",
         accent: "#38bdf8",
+        healthDeep: "#7f1d1f",
+        manaDeep: "#1d4ed8",
+        staminaDeep: "#3f6212",
+        shieldDeep: "#0e7490",
+        xpDeep: "#6b21a8",
+        accentDeep: "#0b5f88",
+        accentGlow: "rgba(56, 189, 248, 0.5)",
+        accentDim: "rgba(56, 189, 248, 0.18)",
+    },
+    surface: {
+        surface: "#141820",
+        surfaceDeep: "#0a0c10",
+        edge: "#2c3340",
+        edgeBright: "#4a5566",
+        text: "#f5f7fa",
+        textDim: "#94a3b8",
+        backdrop: "rgba(4,7,12,0.62)",
+    },
+    status: {
+        danger: "#e5484d",
+        warning: "#f8b84e",
+        success: "#3fa34d",
+        hostile: "#e5484d",
+        friendly: "#38bdf8",
+        neutral: "#c9b458",
+    },
+    font: {
+        display: '"Segoe UI", system-ui, sans-serif',
+        numeric: 'Consolas, "Cascadia Mono", "SF Mono", "Roboto Mono", monospace',
+        body: '"Segoe UI", system-ui, sans-serif',
+    },
+    rarity: {
+        common: "#b4b2a8",
+        uncommon: "#57c14f",
+        rare: "#4a86d8",
+        epic: "#a04fd0",
+        legendary: "#e0862e",
     },
     frame: {
         bg: "linear-gradient(180deg, rgba(20,24,32,0.86), rgba(10,12,16,0.9))",
@@ -62,15 +128,73 @@ export const defaultHudTheme = {
     slot: { bg: "rgba(12,14,20,0.7)", border: "1px solid rgba(255,255,255,0.12)", radius: "8px" },
     ring: "rgba(140,170,200,0.35)",
 };
-function theme(overrides) {
+/**
+ * Builds a full {@link HudTheme} from per-group partials, filling the rest from
+ * {@link defaultHudTheme}. Reach for this when a game wants to name exact values; use
+ * {@link deriveHudTheme} when a seed color pair is enough.
+ *
+ * @capability hud-theme-author fill a full HudTheme from per-group partial overrides
+ */
+export function hudTheme(overrides) {
     return {
         palette: { ...defaultHudTheme.palette, ...overrides.palette },
+        surface: { ...defaultHudTheme.surface, ...overrides.surface },
+        status: { ...defaultHudTheme.status, ...overrides.status },
+        font: { ...defaultHudTheme.font, ...overrides.font },
+        rarity: { ...defaultHudTheme.rarity, ...overrides.rarity },
         frame: { ...defaultHudTheme.frame, ...overrides.frame },
         bar: { ...defaultHudTheme.bar, ...overrides.bar },
         slot: { ...defaultHudTheme.slot, ...overrides.slot },
         ring: overrides.ring ?? defaultHudTheme.ring,
     };
 }
+const theme = hudTheme;
+/** Builds a chrome-led preset: the named surface/edge values drive frames, troughs, and slots. */
+function chrome(spec) {
+    return theme({
+        palette: {
+            health: spec.fills.health,
+            healthLow: spec.deeps.health,
+            healthDeep: spec.deeps.health,
+            mana: spec.fills.mana,
+            manaDeep: spec.deeps.mana,
+            stamina: spec.fills.stamina,
+            staminaDeep: spec.deeps.stamina,
+            shield: spec.fills.shield,
+            shieldDeep: spec.deeps.shield,
+            xp: spec.fills.xp,
+            xpDeep: spec.deeps.xp,
+            soul: mix(spec.fills.xp, "#ffffff", 0.25),
+            ammo: spec.status.warning,
+            boss: spec.status.danger,
+            accent: spec.accent,
+            accentDeep: spec.accentDeep,
+            accentGlow: spec.accentGlow,
+            accentDim: alpha(spec.accent, 0.18),
+        },
+        surface: {
+            surface: spec.surface,
+            surfaceDeep: spec.surfaceDeep,
+            edge: spec.edge,
+            edgeBright: spec.edgeBright,
+            text: spec.text,
+            textDim: spec.textDim,
+            backdrop: alpha(spec.surfaceDeep, 0.72),
+        },
+        status: spec.status,
+        font: { display: spec.display },
+        rarity: spec.rarity,
+        frame: {
+            bg: `linear-gradient(180deg, ${alpha(spec.surface, 0.92)}, ${alpha(spec.surfaceDeep, 0.94)})`,
+            border: `1px solid ${spec.edge}`,
+            radius: "6px",
+            glow: `0 6px 20px ${alpha(spec.surfaceDeep, 0.7)}`,
+        },
+        bar: { track: alpha(spec.surfaceDeep, 0.8), frame: spec.surfaceDeep, text: spec.text },
+        slot: { bg: alpha(spec.surface, 0.8), border: `1px solid ${spec.edge}`, radius: "6px" },
+        ring: alpha(spec.edgeBright, 0.55),
+    });
+}
 /** Built-in theme presets for demos/scaffold only — not product identity; games author their own theme. */
 export const HUD_THEME_PRESETS = {
     "arcane-stone": theme({
@@ -145,7 +269,181 @@ export const HUD_THEME_PRESETS = {
         slot: { bg: "#4a4a4a", border: "3px solid #2a2a2a", radius: "0px" },
         ring: "rgba(240,192,64,0.5)",
     }),
+    ember: chrome({
+        accent: "#e3b054",
+        accentGlow: "rgba(227, 176, 84, 0.55)",
+        accentDeep: "#8a6425",
+        surface: "#17120d",
+        surfaceDeep: "#0b0906",
+        edge: "#57452c",
+        edgeBright: "#93794c",
+        text: "#f2e7d0",
+        textDim: "#a3947a",
+        fills: { health: "#5cc35f", mana: "#4a86d8", stamina: "#d9c33f", xp: "#a566d9", shield: "#9fb9c9" },
+        deeps: { health: "#26662c", mana: "#20406f", stamina: "#6e621c", xp: "#4e2c6e", shield: "#48606e" },
+        status: {
+            danger: "#e0483e",
+            warning: "#e8a33d",
+            success: "#6fce6f",
+            hostile: "#d84a3a",
+            friendly: "#4fa9e0",
+            neutral: "#d9d04f",
+        },
+        display: '"Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif',
+        rarity: {
+            common: "#b4b2a8",
+            uncommon: "#57c14f",
+            rare: "#4a86d8",
+            epic: "#a04fd0",
+            legendary: "#e0862e",
+        },
+    }),
+    synthwave: chrome({
+        accent: "#41e6f0",
+        accentGlow: "rgba(65, 230, 240, 0.55)",
+        accentDeep: "#136b74",
+        surface: "#12101f",
+        surfaceDeep: "#080711",
+        edge: "#3c3467",
+        edgeBright: "#6a5daa",
+        text: "#e9ecff",
+        textDim: "#8d8bb3",
+        fills: { health: "#3ee08a", mana: "#5a7bff", stamina: "#f0e341", xp: "#e050d8", shield: "#8ad4f0" },
+        deeps: { health: "#136b44", mana: "#243487", stamina: "#77701a", xp: "#6e2069", shield: "#2f6d85" },
+        status: {
+            danger: "#ff4d6a",
+            warning: "#ffb347",
+            success: "#3ee08a",
+            hostile: "#ff4d6a",
+            friendly: "#41e6f0",
+            neutral: "#f0e341",
+        },
+        display: '"Segoe UI", system-ui, sans-serif',
+        rarity: {
+            common: "#9fa4bd",
+            uncommon: "#3ee08a",
+            rare: "#5a7bff",
+            epic: "#e050d8",
+            legendary: "#ffb347",
+        },
+    }),
+    fieldkit: chrome({
+        accent: "#d8c169",
+        accentGlow: "rgba(216, 193, 105, 0.45)",
+        accentDeep: "#6e6230",
+        surface: "#14160f",
+        surfaceDeep: "#0a0b07",
+        edge: "#454a35",
+        edgeBright: "#6f7657",
+        text: "#e6e8d8",
+        textDim: "#95997f",
+        fills: { health: "#7fb84a", mana: "#57a8b8", stamina: "#c9b73e", xp: "#b88f4a", shield: "#a8b4a0" },
+        deeps: { health: "#3d5c1f", mana: "#265059", stamina: "#645a1c", xp: "#5c451f", shield: "#4e594a" },
+        status: {
+            danger: "#d84f35",
+            warning: "#d8952f",
+            success: "#7fb84a",
+            hostile: "#d84f35",
+            friendly: "#57a8b8",
+            neutral: "#c9b73e",
+        },
+        display: '"Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif',
+        rarity: {
+            common: "#a8ab99",
+            uncommon: "#7fb84a",
+            rare: "#57a8b8",
+            epic: "#b06fc9",
+            legendary: "#d8952f",
+        },
+    }),
 };
+function hexToRgb(hex) {
+    const raw = hex.replace("#", "");
+    const full = raw.length === 3 ? raw.split("").map((c) => c + c).join("") : raw;
+    return {
+        r: parseInt(full.slice(0, 2), 16),
+        g: parseInt(full.slice(2, 4), 16),
+        b: parseInt(full.slice(4, 6), 16),
+    };
+}
+function rgbToHex({ r, g, b }) {
+    const channel = (v) => Math.round(Math.min(255, Math.max(0, v))).toString(16).padStart(2, "0");
+    return `#${channel(r)}${channel(g)}${channel(b)}`;
+}
+function mix(from, to, amount) {
+    const a = hexToRgb(from);
+    const b = hexToRgb(to);
+    return rgbToHex({
+        r: a.r + (b.r - a.r) * amount,
+        g: a.g + (b.g - a.g) * amount,
+        b: a.b + (b.b - a.b) * amount,
+    });
+}
+function alpha(hex, value) {
+    const { r, g, b } = hexToRgb(hex);
+    return `rgba(${r}, ${g}, ${b}, ${value})`;
+}
+/**
+ * Derives a coherent full theme from an accent/surface pair — shades, edges, dim text, frames,
+ * bar troughs, and slots all fall out of the seed, so a game gets one consistent look across the
+ * `packages/react` primitives and the `registry/jgengine` blocks without naming 50 tokens.
+ * Hex seeds only (`#rgb` or `#rrggbb`).
+ *
+ * @capability hud-theme-derive build a full HudTheme from an accent + surface seed pair
+ */
+export function deriveHudTheme(seed) {
+    const { accent, surface } = seed;
+    const text = seed.text ?? mix("#f4f4f0", accent, 0.12);
+    const health = seed.health ?? "#e0483e";
+    const mana = seed.mana ?? "#4a86d8";
+    const stamina = seed.stamina ?? "#d9c33f";
+    const xp = seed.xp ?? "#a566d9";
+    const shield = seed.shield ?? "#9fb9c9";
+    const danger = seed.danger ?? "#e0483e";
+    const surfaceDeep = mix(surface, "#000000", 0.5);
+    const edge = mix(surface, accent, 0.22);
+    const edgeBright = mix(surface, accent, 0.42);
+    return hudTheme({
+        palette: {
+            health,
+            healthLow: mix(health, "#000000", 0.3),
+            healthDeep: mix(health, "#000000", 0.5),
+            mana,
+            manaDeep: mix(mana, "#000000", 0.5),
+            stamina,
+            staminaDeep: mix(stamina, "#000000", 0.5),
+            shield,
+            shieldDeep: mix(shield, "#000000", 0.5),
+            xp,
+            xpDeep: mix(xp, "#000000", 0.5),
+            soul: mix(xp, "#ffffff", 0.25),
+            ammo: seed.warning ?? "#e8a33d",
+            boss: danger,
+            accent,
+            accentDeep: mix(accent, "#000000", 0.55),
+            accentGlow: alpha(accent, 0.5),
+            accentDim: alpha(accent, 0.18),
+        },
+        surface: { surface, surfaceDeep, edge, edgeBright, text, textDim: mix(text, surface, 0.42), backdrop: alpha(surfaceDeep, 0.72) },
+        status: {
+            danger,
+            warning: seed.warning ?? "#e8a33d",
+            success: accent,
+            hostile: danger,
+            friendly: seed.friendly ?? mana,
+            neutral: stamina,
+        },
+        font: { display: seed.fontDisplay ?? defaultHudTheme.font.display },
+        frame: {
+            bg: `linear-gradient(180deg, ${alpha(surface, 0.92)}, ${alpha(surfaceDeep, 0.94)})`,
+            border: `1px solid ${edge}`,
+            glow: `0 6px 20px ${alpha(surfaceDeep, 0.7)}`,
+        },
+        bar: { track: alpha(surfaceDeep, 0.8), frame: surfaceDeep, text },
+        slot: { bg: alpha(surface, 0.8), border: `1px solid ${edge}`, radius: "6px" },
+        ring: alpha(edgeBright, 0.55),
+    });
+}
 /** Resolves a preset name (or a full theme) to a `HudTheme`; falls back to the default theme. */
 export function resolveHudTheme(theme) {
     if (theme === undefined)

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;