@jgengine/react 0.22.0 → 0.23.0

package/dist/modals.js

@@ -1,8 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useReducer, } from "react";
+import { useCallback, useEffect, useReducer, useRef, } from "react";
 import { MODAL_CANCEL, MODAL_CONFIRM, } from "@jgengine/core/ui/modalStack";
-import { HudFrame } from "./hudFrame.js";
+import { useReducedMotion } from "./accessibility.js";
 import { useDialogBehavior } from "./dialogBehavior.js";
+import { useEngineStyles } from "./engineStyles.js";
+import { HudButton } from "./hudButton.js";
+import { useHudInteract } from "./hudInteract.js";
+import { HudPanel } from "./hudPanel.js";
+import { hudType } from "./hudTokens.js";
+import { usePresence } from "./presence.js";
 /**
  * Subscribe to a modal stack and re-render on every change, returning the active modal and depth.
  *
@@ -13,6 +19,7 @@ export function useModalStack(stack) {
     useEffect(() => stack.subscribe(bump), [stack]);
     return { top: stack.top(), depth: stack.depth() };
 }
+const MODAL_EXIT_MS = 140;
 /**
  * Full-screen modal host: watches a stack, renders only the topmost modal centered over a dimmed
  * backdrop, and manages accessibility — the panel is a `role="dialog" aria-modal`, focus moves into
@@ -22,8 +29,27 @@ export function useModalStack(stack) {
  *
  * @capability modal-host full-screen modal/dialog host over a modal stack — dimmed backdrop, focus trap, Esc/backdrop-to-cancel, aria-modal dialog
  */
-export function ModalHost({ stack, children, showBackdrop = true, backdrop, closeOnBackdrop = true, closeOnEsc = true, zIndexBase = 80, className, style, }) {
-    const { top } = useModalStack(stack);
+export function ModalHost({ stack, children, showBackdrop = true, backdrop, closeOnBackdrop = true, closeOnEsc = true, zIndexBase = 80, onInteract, className, style, }) {
+    useEngineStyles();
+    const { top: live } = useModalStack(stack);
+    const last = useRef(live);
+    if (live !== null)
+        last.current = live;
+    const presence = usePresence(live !== null, useReducedMotion() ? 0 : MODAL_EXIT_MS);
+    const top = live ?? (presence === "closed" ? last.current : null);
+    const report = useHudInteract("modal", top?.kind, onInteract);
+    const reportedId = useRef(null);
+    useEffect(() => {
+        const id = live?.id ?? null;
+        if (id === reportedId.current)
+            return;
+        const wasOpen = reportedId.current !== null;
+        reportedId.current = id;
+        if (id !== null)
+            report("open");
+        else if (wasOpen)
+            report("close");
+    }, [live, report]);
     const controls = {
         resolve: useCallback((result, payload) => stack.resolve(result, payload !== undefined ? { payload } : undefined), [stack]),
         confirm: useCallback((payload) => stack.resolve(MODAL_CONFIRM, payload !== undefined ? { payload } : undefined), [stack]),
@@ -37,7 +63,7 @@ export function ModalHost({ stack, children, showBackdrop = true, backdrop, clos
     if (top === null)
         return null;
     const dim = backdrop ?? "var(--jg-backdrop, rgba(4,7,12,0.62))";
-    return (_jsxs("div", { "data-modal-host": "", className: className, style: {
+    return (_jsxs("div", { "data-modal-host": "", "data-state": live === null ? "closed" : "open", className: className, style: {
             position: "fixed",
             inset: 0,
             zIndex: zIndexBase,
@@ -46,37 +72,14 @@ export function ModalHost({ stack, children, showBackdrop = true, backdrop, clos
             justifyContent: "center",
             pointerEvents: "auto",
             ...style,
-        }, children: [showBackdrop ? (_jsx("div", { "data-modal-backdrop": "", onClick: closeOnBackdrop ? () => controls.cancel() : undefined, style: { position: "fixed", inset: 0, background: dim } })) : null, _jsx("div", { ref: panelRef, role: "dialog", "aria-modal": true, "aria-label": typeof top.payload === "object" && top.payload !== null && "title" in top.payload ? String(top.payload.title ?? top.kind) : top.kind, "data-modal": top.kind, "data-modal-id": top.id, tabIndex: -1, style: { position: "relative", pointerEvents: "auto", outline: "none", maxWidth: "calc(100vw - 32px)", maxHeight: "calc(100vh - 32px)" }, children: children(top, controls) })] }));
+        }, children: [showBackdrop ? (_jsx("div", { "data-modal-backdrop": "", onClick: closeOnBackdrop ? () => controls.cancel() : undefined, style: { position: "fixed", inset: 0, background: dim, pointerEvents: live === null ? "none" : undefined } })) : null, _jsx("div", { ref: panelRef, role: "dialog", "aria-modal": true, "aria-label": typeof top.payload === "object" && top.payload !== null && "title" in top.payload ? String(top.payload.title ?? top.kind) : top.kind, "data-modal": top.kind, "data-modal-id": top.id, tabIndex: -1, style: { position: "relative", pointerEvents: live === null ? "none" : "auto", outline: "none", maxWidth: "calc(100vw - 32px)", maxHeight: "calc(100vh - 32px)" }, children: children(top, controls) })] }));
 }
-const DIALOG_TITLE = { margin: 0, fontSize: 17, fontWeight: 700, letterSpacing: 0.2 };
-const DIALOG_BODY = { margin: "10px 0 0", fontSize: 13.5, lineHeight: 1.55, color: "rgba(226,232,240,0.82)" };
+const DIALOG_TITLE = { margin: 0, fontFamily: "var(--jg-font-display, inherit)", fontSize: hudType("lg"), fontWeight: 700, letterSpacing: 0.1, lineHeight: 1.3 };
+const DIALOG_BODY = { margin: "10px 0 0", fontSize: hudType("md"), lineHeight: 1.55, color: "var(--jg-text-dim, rgba(226,232,240,0.82))" };
 const BUTTON_ROW = { display: "flex", gap: 10, marginTop: 20, justifyContent: "flex-end" };
-const BUTTON_BASE = {
-    appearance: "none",
-    borderRadius: "var(--jg-slot-radius, 8px)",
-    border: "1px solid transparent",
-    fontSize: 13,
-    fontWeight: 600,
-    padding: "8px 16px",
-    cursor: "pointer",
-    font: "inherit",
-};
-function primaryButtonStyle(danger) {
-    return {
-        ...BUTTON_BASE,
-        background: danger ? "#e5484d" : "var(--jg-accent, #38bdf8)",
-        color: danger ? "#fff" : "#06121b",
-    };
-}
-const GHOST_BUTTON = {
-    ...BUTTON_BASE,
-    background: "var(--jg-slot-bg, rgba(148,163,184,0.12))",
-    color: "var(--jg-bar-text, #e2e8f0)",
-    border: "var(--jg-slot-border, 1px solid rgba(148,163,184,0.28))",
-};
 /**
  * A generic two-button confirmation dialog — title, optional body, and Cancel / Confirm buttons over
- * a `HudTheme`-token-driven {@link HudFrame}. Presentation-only: wire `onConfirm`/`onCancel` to a
+ * a `HudTheme`-token-driven {@link HudPanel}. Presentation-only: wire `onConfirm`/`onCancel` to a
  * modal stack's `resolve` (typically inside a {@link ModalHost} render callback) and reskin via
  * `HudTheme` tokens or `danger` for a destructive action. It interprets nothing — the game supplies
  * the copy.
@@ -84,28 +87,22 @@ const GHOST_BUTTON = {
  * @capability confirm-dialog generic themeable confirm/cancel dialog — title, body, two buttons, danger styling
  */
 export function ConfirmDialog({ title, body, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, danger = false, width = 360, className, style, }) {
-    return (_jsxs(HudFrame, { variation: "themed", width: width, padding: 20, interactive: true, className: className, style: style, children: [_jsx("h2", { "data-confirm-title": "", style: DIALOG_TITLE, children: title }), body !== undefined ? _jsx("p", { "data-confirm-body": "", style: DIALOG_BODY, children: body }) : null, _jsxs("div", { style: BUTTON_ROW, children: [_jsx("button", { type: "button", "data-confirm-cancel": "", onClick: onCancel, style: GHOST_BUTTON, children: cancelLabel }), _jsx("button", { type: "button", "data-confirm-accept": "", onClick: onConfirm, style: primaryButtonStyle(danger), children: confirmLabel })] })] }));
+    return (_jsxs(HudPanel, { elevation: "modal", width: width, padding: 20, className: className, style: style, children: [_jsx("h2", { "data-confirm-title": "", style: DIALOG_TITLE, children: title }), body !== undefined ? _jsx("p", { "data-confirm-body": "", style: DIALOG_BODY, children: body }) : null, _jsxs("div", { style: BUTTON_ROW, children: [_jsx(HudButton, { "data-confirm-cancel": "", cue: "cancel", onClick: onCancel, children: cancelLabel }), _jsx(HudButton, { "data-confirm-accept": "", cue: "confirm", variant: danger ? "danger" : "primary", onClick: onConfirm, children: confirmLabel })] })] }));
 }
 const PAUSE_TITLE = {
     margin: "0 0 14px",
-    fontSize: 12,
+    fontSize: hudType("xs"),
     fontWeight: 700,
-    letterSpacing: 2,
+    letterSpacing: "0.18em",
     textTransform: "uppercase",
     textAlign: "center",
     color: "var(--jg-accent, #38bdf8)",
 };
-const PAUSE_ITEM_BASE = {
-    ...BUTTON_BASE,
-    display: "block",
-    width: "100%",
-    textAlign: "center",
-    padding: "10px 16px",
-    marginTop: 8,
-};
+const PAUSE_ITEM = { marginTop: 8 };
+const PAUSE_DANGER_ITEM = { ...PAUSE_ITEM, color: "var(--jg-danger, #e5484d)", borderColor: "rgba(229,72,77,0.45)" };
 /**
  * A reskinnable pause-menu building block: a primary Resume button plus a game-filled list of slot
- * items (Settings, Save, Quit, …), stacked in a `HudTheme`-token-driven {@link HudFrame}. It ships
+ * items (Settings, Save, Quit, …), stacked in a `HudTheme`-token-driven {@link HudPanel}. It ships
  * the common shape every game's pause screen needs and nothing genre-specific — the game supplies the
  * title, item labels/order, and destructive styling, and reskins with `HudTheme` tokens. Drop it into
  * a {@link ModalHost} keyed on a `"pause"` modal, or render it standalone.
@@ -113,12 +110,5 @@ const PAUSE_ITEM_BASE = {
  * @capability pause-menu reskinnable pause-menu building block — Resume plus a game-filled Settings/Quit slot list, HudTheme-driven
  */
 export function PauseMenu({ title = "Paused", onResume, resumeLabel = "Resume", items = [], width = 300, className, style, }) {
-    return (_jsxs(HudFrame, { variation: "themed", width: width, padding: 20, interactive: true, className: className, style: style, children: [_jsx("div", { "data-pause-title": "", style: PAUSE_TITLE, children: title }), _jsx("button", { type: "button", "data-pause-resume": "", onClick: onResume, style: { ...PAUSE_ITEM_BASE, ...primaryButtonStyle(false), marginTop: 0 }, children: resumeLabel }), items.map((item) => (_jsx("button", { type: "button", "data-pause-item": item.id, onClick: item.onSelect, disabled: item.disabled, style: {
-                    ...PAUSE_ITEM_BASE,
-                    ...(item.danger
-                        ? { background: "transparent", color: "#f0787c", border: "1px solid rgba(229,72,77,0.5)" }
-                        : GHOST_BUTTON),
-                    opacity: item.disabled === true ? 0.5 : 1,
-                    cursor: item.disabled === true ? "not-allowed" : "pointer",
-                }, children: item.label }, item.id)))] }));
+    return (_jsxs(HudPanel, { elevation: "modal", width: width, padding: 20, className: className, style: style, children: [_jsx("div", { "data-pause-title": "", style: PAUSE_TITLE, children: title }), _jsx(HudButton, { "data-pause-resume": "", cue: "resume", variant: "primary", size: "lg", block: true, onClick: onResume, children: resumeLabel }), items.map((item) => (_jsx(HudButton, { "data-pause-item": item.id, cue: `pause:${item.id}`, size: "lg", block: true, onClick: item.onSelect, disabled: item.disabled, style: item.danger ? PAUSE_DANGER_ITEM : PAUSE_ITEM, children: item.label }, item.id)))] }));
 }

package/dist/notices.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+import type { Notice, NoticeFeed } from "@jgengine/core/game/notices";
+export type { Notice, NoticeTone } from "@jgengine/core/game/notices";
+/** Where {@link NoticeStack} sits: below top-edge HUD bars, over the play area, or above bottom action bars. */
+export type NoticePlacement = "top" | "center" | "bottom";
+type Shown = {
+    notice: Notice;
+    leaving: boolean;
+};
+/** Keeps removed notices on screen, in place, for the exit animation; new ones join the end. @internal */
+export declare function reconcileShown(previous: readonly Shown[], live: readonly Notice[]): Shown[];
+/** Live notices of `feed`, re-rendering on change and pruning each one when it expires. */
+export declare function useNoticeList(feed: NoticeFeed | null): readonly Notice[];
+/**
+ * Animated, toned notice stack for a {@link NoticeFeed} — the default renderer the shell mounts for
+ * `ctx.game.notices`. Uses `--jg-*` theme vars with fallbacks, 14px text, and never takes pointer input.
+ *
+ * @capability notice-feed render ctx.game.notices as an animated toned stack (enter/exit motion, ×N stacking)
+ */
+export declare function NoticeStack({ feed, placement, scale, renderNotice, }: {
+    /** Defaults to the surrounding game's `ctx.game.notices`. */
+    feed?: NoticeFeed;
+    placement?: NoticePlacement;
+    /** Multiplies text and spacing (the shell passes the player's UI scale). */
+    scale?: number;
+    renderNotice?: (notice: Notice) => ReactNode;
+}): import("react").JSX.Element | null;

package/dist/notices.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { useOptionalGameContext } from "./provider.js";
+const EXIT_MS = 200;
+const EMPTY = [];
+const NO_FEED_SUBSCRIBE = () => () => undefined;
+const TONE_COLOR = {
+    info: "var(--jg-accent, #7cc4ff)",
+    success: "var(--jg-success, #3ecf8e)",
+    warn: "var(--jg-warning, #f5b544)",
+    deny: "var(--jg-danger, #f26d6d)",
+};
+const TONE_LABEL = { info: "Info", success: "Done", warn: "Warning", deny: "Can't do that" };
+const PLACEMENT_STYLE = {
+    top: { top: "clamp(64px, 14%, 150px)" },
+    center: { top: "34%" },
+    bottom: { bottom: "clamp(120px, 22%, 230px)", flexDirection: "column-reverse" },
+};
+const KEYFRAMES = `
+@keyframes jg-notice-in { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: none; } }
+@keyframes jg-notice-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(0.98); } }
+@keyframes jg-notice-shake { 0%,100% { transform: none; } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
+@keyframes jg-notice-pop { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
+[data-jg-notice] { animation: jg-notice-in 180ms cubic-bezier(.2,.8,.2,1) both; }
+[data-jg-notice][data-leaving] { animation: jg-notice-out ${EXIT_MS}ms ease-in both; }
+[data-jg-notice-body][data-bump="deny"] { animation: jg-notice-shake 260ms ease-out; }
+[data-jg-notice-body][data-bump="other"] { animation: jg-notice-pop 220ms ease-out; }
+@media (prefers-reduced-motion: reduce) { [data-jg-notice], [data-jg-notice][data-leaving], [data-jg-notice-body][data-bump] { animation-duration: 1ms; } }
+`;
+function ToneGlyph({ tone }) {
+    const path = tone === "deny"
+        ? "M5 5l6 6M11 5l-6 6"
+        : tone === "success"
+            ? "M4.5 8.5l2.5 2.5 4.5-5"
+            : tone === "warn"
+                ? "M8 4.5v4.5M8 11.4v.1"
+                : "M8 7.2v4.3M8 4.6v.1";
+    return (_jsx("span", { "aria-hidden": true, style: {
+            flex: "none",
+            width: 20,
+            height: 20,
+            borderRadius: 999,
+            display: "grid",
+            placeItems: "center",
+            background: TONE_COLOR[tone],
+            color: "var(--jg-surface-deep, #0b1018)",
+        }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: path }) }) }));
+}
+/** Keeps removed notices on screen, in place, for the exit animation; new ones join the end. @internal */
+export function reconcileShown(previous, live) {
+    const byId = new Map(live.map((notice) => [notice.id, notice]));
+    const next = previous.map((entry) => {
+        const current = byId.get(entry.notice.id);
+        return current === undefined ? { notice: entry.notice, leaving: true } : { notice: current, leaving: false };
+    });
+    const known = new Set(previous.map((entry) => entry.notice.id));
+    for (const notice of live)
+        if (!known.has(notice.id))
+            next.push({ notice, leaving: false });
+    return next;
+}
+/** Live notices of `feed`, re-rendering on change and pruning each one when it expires. */
+export function useNoticeList(feed) {
+    const list = useSyncExternalStore(feed?.subscribe ?? NO_FEED_SUBSCRIBE, feed === null ? () => EMPTY : feed.list, feed === null ? () => EMPTY : feed.list);
+    const [, setRetry] = useState(0);
+    useEffect(() => {
+        if (feed === null || list.length === 0)
+            return;
+        const soonest = Math.min(...list.map((notice) => notice.expiresAt));
+        const timer = setTimeout(() => {
+            feed.prune();
+            // A feed on a non-wall clock may not have expired yet; poll gently until it does.
+            if (feed.list() === list)
+                setRetry((value) => value + 1);
+        }, Math.max(16, soonest - Date.now()));
+        return () => clearTimeout(timer);
+    });
+    return list;
+}
+/**
+ * Animated, toned notice stack for a {@link NoticeFeed} — the default renderer the shell mounts for
+ * `ctx.game.notices`. Uses `--jg-*` theme vars with fallbacks, 14px text, and never takes pointer input.
+ *
+ * @capability notice-feed render ctx.game.notices as an animated toned stack (enter/exit motion, ×N stacking)
+ */
+export function NoticeStack({ feed, placement = "top", scale = 1, renderNotice, }) {
+    const ctx = useOptionalGameContext();
+    const source = feed ?? ctx?.game.notices ?? null;
+    const live = useNoticeList(source);
+    const [shown, setShown] = useState(() => reconcileShown([], live));
+    const [seenLive, setSeenLive] = useState(live);
+    if (seenLive !== live) {
+        setSeenLive(live);
+        setShown(reconcileShown(shown, live));
+    }
+    const anyLeaving = shown.some((entry) => entry.leaving);
+    useEffect(() => {
+        if (!anyLeaving)
+            return;
+        const timer = setTimeout(() => setShown((previous) => previous.filter((entry) => !entry.leaving)), EXIT_MS);
+        return () => clearTimeout(timer);
+    }, [anyLeaving]);
+    if (shown.length === 0)
+        return null;
+    return (_jsxs("div", { "data-jg-notices": placement, role: "status", "aria-live": "polite", style: {
+            position: "absolute",
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: 45,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 6 * scale,
+            width: "min(460px, calc(100% - 32px))",
+            pointerEvents: "none",
+            ...PLACEMENT_STYLE[placement],
+        }, children: [_jsx("style", { children: KEYFRAMES }), shown.map(({ notice, leaving }) => (_jsx("div", { "data-jg-notice": notice.tone, "data-leaving": leaving ? "" : undefined, style: { maxWidth: "100%" }, children: renderNotice !== undefined ? renderNotice(notice) : (_jsxs("div", { "data-jg-notice-body": true, "data-bump": notice.count > 1 ? (notice.tone === "deny" ? "deny" : "other") : undefined, style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 10 * scale,
+                        padding: `${8 * scale}px ${14 * scale}px ${8 * scale}px ${10 * scale}px`,
+                        borderRadius: 10 * scale,
+                        background: "var(--jg-surface, rgba(13, 18, 27, 0.9))",
+                        border: "1px solid var(--jg-edge, rgba(255, 255, 255, 0.12))",
+                        boxShadow: `inset 3px 0 0 ${TONE_COLOR[notice.tone]}, 0 8px 24px rgba(0, 0, 0, 0.35)`,
+                        backdropFilter: "blur(8px)",
+                        WebkitBackdropFilter: "blur(8px)",
+                        color: "var(--jg-text, #f1f5f9)",
+                        fontFamily: "var(--jg-font-body, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif)",
+                        fontSize: 14 * scale,
+                        fontWeight: 600,
+                        lineHeight: 1.3,
+                        letterSpacing: "0.01em",
+                        textShadow: "0 1px 1px rgba(0, 0, 0, 0.35)",
+                    }, children: [_jsx(ToneGlyph, { tone: notice.tone }), _jsxs("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: [TONE_LABEL[notice.tone], ": "] }), _jsx("span", { children: notice.text }), notice.count > 1 ? (_jsxs("span", { style: {
+                                flex: "none",
+                                fontSize: 12 * scale,
+                                fontWeight: 700,
+                                fontVariantNumeric: "tabular-nums",
+                                padding: `${1 * scale}px ${6 * scale}px`,
+                                borderRadius: 999,
+                                background: "rgba(255, 255, 255, 0.12)",
+                                color: "var(--jg-text-dim, rgba(241, 245, 249, 0.8))",
+                            }, children: ["\u00D7", notice.count] })) : null] }, notice.count)) }, notice.id)))] }));
+}

package/dist/notifications.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSyncExternalStore } from "react";
+import { hudType } from "./hudTokens.js";
 /** Subscribe to a notification store's live list. */
 export function useNotifications(store) {
     return useSyncExternalStore(store.subscribe, store.list, store.list);
@@ -55,7 +56,7 @@ export function NotificationBell({ store, onClick, icon = "🔔", className, sty
                     borderRadius: 9999,
                     background: "#ef4444",
                     color: "#fff",
-                    fontSize: 11,
+                    fontSize: hudType("xs"),
                     fontWeight: 700,
                     display: "flex",
                     alignItems: "center",
@@ -80,7 +81,7 @@ export function NotificationCenter({ store, title = "Notifications", emptyLabel
         borderRadius: 6,
         background: "transparent",
         color: "rgba(226,232,240,0.85)",
-        fontSize: 11,
+        fontSize: hudType("xs"),
         padding: "3px 8px",
         cursor: "pointer",
     };
@@ -107,5 +108,5 @@ export function NotificationCenter({ store, title = "Notifications", emptyLabel
                             color: "#e2e8f0",
                             textAlign: "left",
                             cursor: "pointer",
-                        }, children: [_jsx("span", { style: { marginTop: 5, width: 8, height: 8, flexShrink: 0, borderRadius: 9999, background: kindColor(entry.kind) } }), _jsxs("span", { style: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0, flex: 1 }, children: [_jsxs("span", { style: { display: "flex", justifyContent: "space-between", gap: 8 }, children: [_jsx("span", { style: { fontSize: 13, fontWeight: entry.read ? 500 : 700 }, children: entry.title }), _jsx("span", { style: { fontSize: 10, color: "rgba(148,163,184,0.7)", whiteSpace: "nowrap" }, children: time(entry.at) })] }), entry.body !== undefined ? (_jsx("span", { style: { fontSize: 11, color: "rgba(203,213,225,0.75)" }, children: entry.body })) : null] })] }) }, entry.id))) }))] }));
+                        }, children: [_jsx("span", { style: { marginTop: 5, width: 8, height: 8, flexShrink: 0, borderRadius: 9999, background: kindColor(entry.kind) } }), _jsxs("span", { style: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0, flex: 1 }, children: [_jsxs("span", { style: { display: "flex", justifyContent: "space-between", gap: 8 }, children: [_jsx("span", { style: { fontSize: 13, fontWeight: entry.read ? 500 : 700 }, children: entry.title }), _jsx("span", { style: { fontSize: hudType("xs"), color: "rgba(148,163,184,0.7)", whiteSpace: "nowrap" }, children: time(entry.at) })] }), entry.body !== undefined ? (_jsx("span", { style: { fontSize: hudType("xs"), color: "rgba(203,213,225,0.75)" }, children: entry.body })) : null] })] }) }, entry.id))) }))] }));
 }

package/dist/panels.d.ts

@@ -1,6 +1,7 @@
 import { type CSSProperties, type ReactNode } from "react";
 import { type PanelDef, type PanelPosition, type PanelState } from "@jgengine/core/ui/panelModel";
 import { type HudFrameShape, type HudFrameVariation } from "./hudFrame.js";
+import { type HudInteractListener } from "./hudInteract.js";
 /**
  * React chrome over the headless panel/window model (`@jgengine/core/ui/panelModel`) — the toggleable,
  * draggable, z-stacked windows a WoW-style UI is made of (B for bag, C for character, ESC to close).
@@ -69,8 +70,10 @@ export declare function usePanels(defs: readonly PanelDef[], options?: UsePanels
  *
  * @capability panel-host render a manager's open windows as draggable, closable, z-stacked dialogs above the HUD
  */
-export declare function PanelHost({ manager, render, panels, variation, shape, width, zIndexBase, className, windowClassName, windowStyle, bodyStyle, }: {
+export declare function PanelHost({ manager, render, panels, variation, shape, width, zIndexBase, className, windowClassName, windowStyle, bodyStyle, onInteract, }: {
     manager: PanelsManager;
+    /** Called as windows open and close (`cue` is `panel:<id>`) — the seam a UI sound system hooks. */
+    onInteract?: HudInteractListener;
     /** Content for a panel by id. Takes precedence over `panels`. */
     render?: (id: string) => ReactNode;
     /** Static content map by panel id, used when `render` is omitted. */
@@ -94,10 +97,14 @@ export declare function PanelHost({ manager, render, panels, variation, shape, w
  *
  * @capability window standalone draggable, closable window primitive over HudFrame — no manager required
  */
-export declare function Window({ title, ariaLabel, closable, onClose, x, y, onMove, z, width, variation, shape, className, style, bodyStyle, children, }: {
+export declare function Window({ title, ariaLabel, closable, onClose, x, y, onMove, z, width, variation, shape, className, style, bodyStyle, cue, onInteract, children, }: {
     title: ReactNode;
     ariaLabel?: string;
     closable?: boolean;
+    /** Feedback cue name, rendered as `data-jg-cue` and passed to `onInteract`. */
+    cue?: string;
+    /** Called with `open` when the window mounts — the seam a UI sound system hooks. */
+    onInteract?: HudInteractListener;
     onClose?: () => void;
     /** Initial (uncontrolled) or current (controlled, with `onMove`) x position. Default 56. */
     x?: number;

package/dist/panels.js

@@ -1,8 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState, } from "react";
 import { closePanel, closeTopPanel, createPanelState, focusPanel, isOpen as isPanelOpen, movePanel, openPanel, orderedOpen, panelByHotkey, } from "@jgengine/core/ui/panelModel";
+import { useReducedMotion } from "./accessibility.js";
+import { HudButton } from "./hudButton.js";
 import { HudFrame } from "./hudFrame.js";
+import { useHudInteract } from "./hudInteract.js";
+import { HudPanel } from "./hudPanel.js";
+import { hudType } from "./hudTokens.js";
 import { observeBrowserSuspension } from "./browserLifecycle.js";
+import { usePresence } from "./presence.js";
 /**
  * Pure keybind resolver for a panel set: ESC resolves to `closeTop` when a closable window is open, and
  * any other key routes through {@link panelByHotkey} (trying `code` then `key`) to a `toggle`. Returns
@@ -168,43 +174,78 @@ const TITLEBAR_STYLE = {
     alignItems: "center",
     justifyContent: "space-between",
     gap: 8,
-    padding: "6px 8px 6px 10px",
+    padding: "8px 8px 8px 12px",
     cursor: "grab",
     touchAction: "none",
     userSelect: "none",
-    fontSize: 12,
-    fontWeight: 600,
-    letterSpacing: 0.3,
-    borderBottom: "var(--jg-frame-border, 1px solid rgba(255,255,255,0.10))",
-};
-const CLOSE_BUTTON_STYLE = {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 20,
-    height: 20,
-    padding: 0,
-    borderRadius: 6,
-    border: "1px solid transparent",
-    background: "transparent",
-    color: "inherit",
-    font: "inherit",
-    lineHeight: 1,
-    cursor: "pointer",
-    opacity: 0.75,
+    fontSize: hudType("sm"),
+    fontWeight: 650,
+    letterSpacing: 0.2,
+    borderBottom: "1px solid var(--jg-edge, rgba(255,255,255,0.10))",
 };
+const CLOSE_BUTTON_STYLE = { width: 24, height: 24, color: "inherit", opacity: 0.8 };
+/** Exit-transition length for windows; matches the stylesheet's `jg-panel-out` at `--jg-motion-fast`. */
+const WINDOW_EXIT_MS = 140;
 /** @internal Shared, fully-controlled window view — title bar (drag + close) plus a HudFrame body. */
-function WindowView({ title, ariaLabel, closable, onClose, onFocus, onMove, pos, z, width, variation, shape, className, style, bodyStyle, children, }) {
+function WindowView({ title, ariaLabel, open = true, closable, onClose, onFocus, onMove, pos, z, width, variation, shape, cue, onInteract, className, style, bodyStyle, children, }) {
     const retireDrag = useRef(null);
     useEffect(() => () => retireDrag.current?.(), []);
-    return (_jsx("div", { role: "dialog", "aria-label": ariaLabel, "data-jg-window": "", className: className, onPointerDown: () => onFocus?.(), style: { position: "absolute", left: pos.x, top: pos.y, zIndex: z, pointerEvents: "auto", ...style }, children: _jsxs(HudFrame, { variation: variation, shape: shape, width: width, padding: 0, interactive: true, children: [_jsxs("div", { "data-jg-window-titlebar": "", onPointerDown: (event) => {
-                        if (event.button !== 0 || !event.isPrimary || retireDrag.current !== null)
-                            return;
-                        onFocus?.();
-                        if (onMove !== undefined) {
-                            retireDrag.current = beginWindowDrag(event, pos, onMove, () => { retireDrag.current = null; });
-                        }
-                    }, style: TITLEBAR_STYLE, children: [_jsx("span", { "data-jg-window-title": "", children: title }), closable ? (_jsx("button", { type: "button", "data-jg-window-close": "", "aria-label": "Close", onClick: onClose, onPointerDown: (event) => event.stopPropagation(), style: CLOSE_BUTTON_STYLE, children: "\u2715" })) : null] }), _jsx("div", { "data-jg-window-body": "", style: { padding: 10, ...bodyStyle }, children: children })] }) }));
+    useEffect(() => {
+        if (!open)
+            retireDrag.current?.();
+    }, [open]);
+    const reduced = useReducedMotion();
+    const presence = usePresence(open, reduced ? 0 : WINDOW_EXIT_MS);
+    const report = useHudInteract("window", cue, onInteract);
+    const reported = useRef(null);
+    useEffect(() => {
+        if (reported.current === open)
+            return;
+        reported.current = open;
+        report(open ? "open" : "close");
+    }, [open, report]);
+    if (presence === "unmounted")
+        return null;
+    const frameBody = (_jsxs(_Fragment, { children: [_jsxs("div", { "data-jg-window-titlebar": "", onPointerDown: (event) => {
+                    if (event.button !== 0 || !event.isPrimary || retireDrag.current !== null)
+                        return;
+                    onFocus?.();
+                    if (onMove !== undefined) {
+                        retireDrag.current = beginWindowDrag(event, pos, onMove, () => { retireDrag.current = null; });
+                    }
+                }, style: TITLEBAR_STYLE, children: [_jsx("span", { "data-jg-window-title": "", children: title }), closable ? (_jsx(HudButton, { variant: "ghost", size: "icon", "data-jg-window-close": "", "aria-label": "Close", cue: "window-close", onClick: onClose, onPointerDown: (event) => event.stopPropagation(), style: CLOSE_BUTTON_STYLE, children: "\u2715" })) : null] }), _jsx("div", { "data-jg-window-body": "", style: { padding: 12, ...bodyStyle }, children: children })] }));
+    return (_jsx("div", { role: "dialog", "aria-label": ariaLabel, "data-jg-window": "", "data-state": presence, "data-jg-cue": cue, className: className, onPointerDown: () => onFocus?.(), style: { position: "absolute", left: pos.x, top: pos.y, zIndex: z, pointerEvents: "auto", ...style }, children: variation === undefined ? (_jsx(HudPanel, { elevation: "modal", padding: 0, width: width, style: shape === "square" ? { borderRadius: 0 } : undefined, children: frameBody })) : (_jsx(HudFrame, { variation: variation, shape: shape, width: width, padding: 0, interactive: true, children: frameBody })) }));
+}
+/** @internal Keeps just-closed panels rendered (closing) for `exitMs` so their exit transition plays. */
+function useLeavingPanels(open, exitMs) {
+    const previous = useRef(open);
+    const timers = useRef(new Map());
+    const [leaving, setLeaving] = useState([]);
+    const openKey = open.map((def) => def.id).join("\u0000");
+    useEffect(() => {
+        const openIds = new Set(open.map((def) => def.id));
+        const gone = exitMs <= 0 ? [] : previous.current.map((def, index) => ({ def, index })).filter(({ def }) => !openIds.has(def.id));
+        previous.current = open;
+        for (const id of openIds) {
+            clearTimeout(timers.current.get(id));
+            timers.current.delete(id);
+        }
+        for (const { def } of gone) {
+            timers.current.set(def.id, setTimeout(() => {
+                timers.current.delete(def.id);
+                setLeaving((current) => current.filter((entry) => entry.def.id !== def.id));
+            }, exitMs));
+        }
+        setLeaving((current) => {
+            const kept = current.filter(({ def }) => !openIds.has(def.id) && !gone.some((g) => g.def.id === def.id));
+            return kept.length === 0 && gone.length === 0 && current.length === 0 ? current : [...kept, ...gone];
+        });
+    }, [openKey, exitMs]);
+    useEffect(() => () => {
+        for (const timer of timers.current.values())
+            clearTimeout(timer);
+    }, []);
+    return leaving;
 }
 /** @internal Fallback cascade position for a window whose state has no override yet. */
 function cascade(index) {
@@ -225,10 +266,12 @@ function cascade(index) {
  *
  * @capability panel-host render a manager's open windows as draggable, closable, z-stacked dialogs above the HUD
  */
-export function PanelHost({ manager, render, panels, variation, shape, width, zIndexBase = 40, className, windowClassName, windowStyle, bodyStyle, }) {
+export function PanelHost({ manager, render, panels, variation, shape, width, zIndexBase = 40, className, windowClassName, windowStyle, bodyStyle, onInteract, }) {
     const open = orderedOpen(manager.state, manager.defs);
+    const leaving = useLeavingPanels(open, useReducedMotion() ? 0 : WINDOW_EXIT_MS);
     const content = (id) => render !== undefined ? render(id) : (panels?.[id] ?? null);
-    return (_jsx("div", { "data-jg-panel-host": "", className: className, style: { position: "absolute", inset: 0, zIndex: zIndexBase, pointerEvents: "none" }, children: open.map((def, index) => (_jsx(WindowView, { title: def.title ?? def.id, ariaLabel: def.title ?? def.id, closable: def.closable !== false, onClose: () => manager.close(def.id), onFocus: () => manager.focus(def.id), onMove: (pos) => manager.move(def.id, pos), pos: manager.state.pos[def.id] ?? cascade(index), z: manager.state.z[def.id] ?? 1, width: width, variation: variation, shape: shape, className: windowClassName, style: windowStyle, bodyStyle: bodyStyle, children: content(def.id) }, def.id))) }));
+    const windows = [...open.map((def, index) => ({ def, index, open: true })), ...leaving.map((entry) => ({ ...entry, open: false }))];
+    return (_jsx("div", { "data-jg-panel-host": "", className: className, style: { position: "absolute", inset: 0, zIndex: zIndexBase, pointerEvents: "none" }, children: windows.map(({ def, index, open: isOpenWindow }) => (_jsx(WindowView, { open: isOpenWindow, cue: `panel:${def.id}`, onInteract: onInteract, title: def.title ?? def.id, ariaLabel: def.title ?? def.id, closable: def.closable !== false, onClose: () => manager.close(def.id), onFocus: () => manager.focus(def.id), onMove: (pos) => manager.move(def.id, pos), pos: manager.state.pos[def.id] ?? cascade(index), z: manager.state.z[def.id] ?? 1, width: width, variation: variation, shape: shape, className: windowClassName, style: windowStyle, bodyStyle: bodyStyle, children: content(def.id) }, def.id))) }));
 }
 /**
  * A single standalone window — title bar, close button, and title-bar drag over {@link HudFrame} chrome —
@@ -238,7 +281,7 @@ export function PanelHost({ manager, render, panels, variation, shape, width, zI
  *
  * @capability window standalone draggable, closable window primitive over HudFrame — no manager required
  */
-export function Window({ title, ariaLabel, closable = true, onClose, x, y, onMove, z, width, variation, shape, className, style, bodyStyle, children, }) {
+export function Window({ title, ariaLabel, closable = true, onClose, x, y, onMove, z, width, variation, shape, className, style, bodyStyle, cue, onInteract, children, }) {
     const controlled = x !== undefined && y !== undefined && onMove !== undefined;
     const [localPos, setLocalPos] = useState({ x: x ?? 56, y: y ?? 56 });
     const pos = controlled ? { x: x, y: y } : localPos;
@@ -248,5 +291,5 @@ export function Window({ title, ariaLabel, closable = true, onClose, x, y, onMov
         onMove?.(next);
     }, [controlled, onMove]);
     const label = ariaLabel ?? (typeof title === "string" ? title : undefined);
-    return (_jsx(WindowView, { title: title, ariaLabel: label, closable: closable, onClose: onClose, onMove: handleMove, pos: pos, z: z, width: width, variation: variation, shape: shape, className: className, style: style, bodyStyle: bodyStyle, children: children }));
+    return (_jsx(WindowView, { title: title, ariaLabel: label, closable: closable, onClose: onClose, onMove: handleMove, pos: pos, z: z, width: width, variation: variation, shape: shape, className: className, style: style, bodyStyle: bodyStyle, cue: cue, onInteract: onInteract, children: children }));
 }

package/dist/photoMode.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSyncExternalStore } from "react";
+import { hudType } from "./hudTokens.js";
 /** Subscribe to a photo-mode store's live state. */
 export function usePhotoMode(store) {
     return useSyncExternalStore(store.subscribe, store.get, store.get);
@@ -35,5 +36,5 @@ export function PhotoModeControls({ store, onCapture, className, style }) {
             color: "#e2e8f0",
             fontFamily: "ui-sans-serif, system-ui, sans-serif",
             ...style,
-        }, children: [_jsx("span", { style: { fontSize: 11, letterSpacing: 1.4, textTransform: "uppercase", color: "rgba(203,213,225,0.75)", padding: "0 4px" }, children: "\uD83D\uDCF7 Photo" }), _jsx("button", { type: "button", "data-photo-hide-hud": true, "aria-pressed": state.hideHud, onClick: () => store.setHideHud(!state.hideHud), style: { ...BTN, ...(state.hideHud ? { borderColor: "rgba(56,189,248,0.6)", color: "#bae6fd" } : {}) }, children: state.hideHud ? "HUD hidden" : "HUD shown" }), onCapture !== undefined ? (_jsx("button", { type: "button", "data-photo-capture": true, onClick: onCapture, style: { ...BTN, borderColor: "rgba(74,222,128,0.6)", color: "#bbf7d0" }, children: "Capture" })) : null, _jsx("button", { type: "button", "data-photo-exit": true, onClick: () => store.exit(), style: BTN, children: "Exit" })] }));
+        }, children: [_jsx("span", { style: { fontSize: hudType("xs"), letterSpacing: 1.4, textTransform: "uppercase", color: "rgba(203,213,225,0.75)", padding: "0 4px" }, children: "\uD83D\uDCF7 Photo" }), _jsx("button", { type: "button", "data-photo-hide-hud": true, "aria-pressed": state.hideHud, onClick: () => store.setHideHud(!state.hideHud), style: { ...BTN, ...(state.hideHud ? { borderColor: "rgba(56,189,248,0.6)", color: "#bae6fd" } : {}) }, children: state.hideHud ? "HUD hidden" : "HUD shown" }), onCapture !== undefined ? (_jsx("button", { type: "button", "data-photo-capture": true, onClick: onCapture, style: { ...BTN, borderColor: "rgba(74,222,128,0.6)", color: "#bbf7d0" }, children: "Capture" })) : null, _jsx("button", { type: "button", "data-photo-exit": true, onClick: () => store.exit(), style: BTN, children: "Exit" })] }));
 }

package/dist/presence.d.ts

@@ -0,0 +1,9 @@
+/** Mount state for an element with an exit transition: `closed` keeps it mounted until the exit ends. */
+export type PresenceState = "open" | "closed" | "unmounted";
+/**
+ * Keeps an element mounted for `exitMs` after `open` turns false, so a `data-state="closed"` exit
+ * animation can play. Returns `"unmounted"` once the exit has finished (or at once when `exitMs` is 0).
+ *
+ * @capability presence keep a closing element mounted through its exit transition
+ */
+export declare function usePresence(open: boolean, exitMs: number): PresenceState;

package/dist/presence.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+/**
+ * Keeps an element mounted for `exitMs` after `open` turns false, so a `data-state="closed"` exit
+ * animation can play. Returns `"unmounted"` once the exit has finished (or at once when `exitMs` is 0).
+ *
+ * @capability presence keep a closing element mounted through its exit transition
+ */
+export function usePresence(open, exitMs) {
+    const [mounted, setMounted] = useState(open);
+    useEffect(() => {
+        if (open) {
+            setMounted(true);
+            return;
+        }
+        if (exitMs <= 0) {
+            setMounted(false);
+            return;
+        }
+        const timer = setTimeout(() => setMounted(false), exitMs);
+        return () => clearTimeout(timer);
+    }, [open, exitMs]);
+    if (open)
+        return "open";
+    return mounted ? "closed" : "unmounted";
+}

package/dist/previewFixtures.js

@@ -1,4 +1,5 @@
 import { BarsPreview } from "./barsPreview.js";
+import { HudChromePreview } from "./hudChromePreview.js";
 import { HudThemePreview } from "./hudThemePreview.js";
 import { IconsPreview } from "./iconsPreview.js";
 import { StreetGeometryPreview } from "./streetGeometryPreview.js";
@@ -20,6 +21,11 @@ import { ScrollRailPreview } from "./scrollRailPreview.js";
  */
 export const PREVIEW_FIXTURES = {
     ScrollRailPreview: { name: "ScrollRailPreview", description: "Reachable caller-owned settings categories in shared scrolling chrome.", component: ScrollRailPreview },
+    HudChromePreview: {
+        name: "HudChromePreview",
+        description: "Shared HUD chrome under the default root theme: frame, vitals, action bar, window, dialogs, buttons.",
+        component: HudChromePreview,
+    },
     HudThemePreview: {
         name: "HudThemePreview",
         description: "Every HudTheme genre preset × atomic bars + a themed frame + a slot row.",