@jgengine/react 0.21.0 → 0.23.0

package/dist/questTracker.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { hudType } from "./hudTokens.js";
 function ObjectiveRow({ label, progress, count, complete, accent }) {
     const fraction = count > 0 ? Math.min(1, progress / count) : complete ? 1 : 0;
     return (_jsxs("li", { "data-quest-objective": true, "data-complete": complete, style: { display: "flex", flexDirection: "column", gap: 3, listStyle: "none" }, children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8 }, children: [_jsxs("span", { style: { display: "flex", alignItems: "baseline", gap: 6, opacity: complete ? 0.65 : 1 }, children: [_jsx("span", { "aria-hidden": true, style: { color: complete ? accent : "rgba(148,163,184,0.7)" }, children: complete ? "✓" : "○" }), _jsx("span", { style: { textDecoration: complete ? "line-through" : "none" }, children: label })] }), count > 1 ? (_jsxs("span", { style: { fontVariantNumeric: "tabular-nums", color: "rgba(203,213,225,0.7)", fontSize: "0.9em" }, children: [Math.min(progress, count), "/", count] })) : null] }), count > 1 && !complete ? (_jsx("div", { style: { height: 3, borderRadius: 9999, background: "rgba(148,163,184,0.2)", overflow: "hidden" }, children: _jsx("div", { style: { width: `${Math.round(fraction * 100)}%`, height: "100%", background: accent } }) })) : null] }));
@@ -22,10 +23,10 @@ export function QuestTracker({ quests, title = "Quests", emptyLabel = "No active
             fontFamily: "ui-sans-serif, system-ui, sans-serif",
             fontSize: 12,
             ...style,
-        }, children: [title !== "" ? (_jsx("div", { style: { fontSize: 10, letterSpacing: 1.4, textTransform: "uppercase", color: "rgba(203,213,225,0.7)", marginBottom: 8 }, children: title })) : null, quests.length === 0 ? (_jsx("p", { style: { margin: 0, color: "rgba(148,163,184,0.8)" }, children: emptyLabel })) : (_jsx("ul", { style: { margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }, children: quests.map((quest) => {
+        }, children: [title !== "" ? (_jsx("div", { style: { fontSize: hudType("xs"), letterSpacing: 1.4, textTransform: "uppercase", color: "rgba(203,213,225,0.7)", marginBottom: 8 }, children: title })) : null, quests.length === 0 ? (_jsx("p", { style: { margin: 0, color: "rgba(148,163,184,0.8)" }, children: emptyLabel })) : (_jsx("ul", { style: { margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }, children: quests.map((quest) => {
                     const shown = maxObjectives === undefined ? quest.objectives : quest.objectives.slice(0, maxObjectives);
                     const hidden = quest.objectives.length - shown.length;
                     const done = quest.status === "completed";
-                    return (_jsxs("li", { "data-quest": quest.id, "data-status": quest.status, style: { listStyle: "none" }, children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 6, marginBottom: 4 }, children: [_jsx("span", { style: { fontWeight: 700, color: done ? accent : "#f8fafc" }, children: quest.title }), done ? _jsx("span", { style: { fontSize: 10, color: accent }, children: "DONE" }) : null] }), _jsx("ul", { style: { margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 5 }, children: shown.map((objective) => (_jsx(ObjectiveRow, { label: objective.label, progress: objective.progress, count: objective.count, complete: objective.complete, accent: accent }, objective.id))) }), hidden > 0 ? (_jsxs("div", { style: { marginTop: 4, fontSize: 11, color: "rgba(148,163,184,0.75)" }, children: ["+", hidden, " more"] })) : null] }, quest.id));
+                    return (_jsxs("li", { "data-quest": quest.id, "data-status": quest.status, style: { listStyle: "none" }, children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 6, marginBottom: 4 }, children: [_jsx("span", { style: { fontWeight: 700, color: done ? accent : "#f8fafc" }, children: quest.title }), done ? _jsx("span", { style: { fontSize: hudType("xs"), color: accent }, children: "DONE" }) : null] }), _jsx("ul", { style: { margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 5 }, children: shown.map((objective) => (_jsx(ObjectiveRow, { label: objective.label, progress: objective.progress, count: objective.count, complete: objective.complete, accent: accent }, objective.id))) }), hidden > 0 ? (_jsxs("div", { style: { marginTop: 4, fontSize: hudType("xs"), color: "rgba(148,163,184,0.75)" }, children: ["+", hidden, " more"] })) : null] }, quest.id));
                 }) }))] }));
 }

package/dist/quickMenu.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { RadialMenu } from "./radialMenu.js";
+import { hudType } from "./hudTokens.js";
 const PANEL = {
     borderRadius: 14,
     padding: 12,
@@ -21,7 +22,7 @@ function groupBySection(items) {
     return groups;
 }
 function Badges({ item, accent }) {
-    return (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [item.cooldown !== undefined && item.cooldown > 0 ? (_jsxs("span", { style: { fontSize: 10, color: "rgba(148,163,184,0.85)" }, children: [Math.ceil(item.cooldown * 100), "%"] })) : null, item.badge !== undefined ? (_jsx("span", { style: { fontSize: 11, fontWeight: 700, color: accent, fontVariantNumeric: "tabular-nums" }, children: item.badge })) : null, item.hotkey !== undefined ? (_jsx("kbd", { style: { fontSize: 10, padding: "1px 5px", borderRadius: 4, border: "1px solid rgba(148,163,184,0.4)", color: "rgba(226,232,240,0.85)" }, children: item.hotkey })) : null, item.children !== undefined ? _jsx("span", { style: { color: "rgba(226,232,240,0.7)" }, children: "\u25B8" }) : null] }));
+    return (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [item.cooldown !== undefined && item.cooldown > 0 ? (_jsxs("span", { style: { fontSize: hudType("xs"), color: "rgba(148,163,184,0.85)" }, children: [Math.ceil(item.cooldown * 100), "%"] })) : null, item.badge !== undefined ? (_jsx("span", { style: { fontSize: hudType("xs"), fontWeight: 700, color: accent, fontVariantNumeric: "tabular-nums" }, children: item.badge })) : null, item.hotkey !== undefined ? (_jsx("kbd", { style: { fontSize: hudType("xs"), padding: "1px 5px", borderRadius: 4, border: "1px solid rgba(148,163,184,0.4)", color: "rgba(226,232,240,0.85)" }, children: item.hotkey })) : null, item.children !== undefined ? _jsx("span", { style: { color: "rgba(226,232,240,0.7)" }, children: "\u25B8" }) : null] }));
 }
 /**
  * Versatile quick menu that takes many forms — a `radial` wheel, a partial
@@ -53,7 +54,7 @@ export function QuickMenu({ items, layout = "list", onSelect, onClose, title, co
             onSelect(item.id);
     };
     const back = () => setPath((p) => p.slice(0, -1));
-    const header = title !== undefined || path.length > 0 ? (_jsxs("div", { "data-quick-header": true, style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [path.length > 0 ? (_jsx("button", { type: "button", "data-quick-back": true, onClick: back, style: { border: "1px solid rgba(148,163,184,0.4)", borderRadius: 6, background: "transparent", color: "#e2e8f0", fontSize: 11, padding: "2px 8px", cursor: "pointer" }, children: "\u2039 Back" })) : null, title !== undefined ? (_jsx("span", { style: { fontSize: 11, letterSpacing: 1.2, textTransform: "uppercase", color: "rgba(203,213,225,0.75)" }, children: title })) : null] })) : null;
+    const header = title !== undefined || path.length > 0 ? (_jsxs("div", { "data-quick-header": true, style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [path.length > 0 ? (_jsx("button", { type: "button", "data-quick-back": true, onClick: back, style: { border: "1px solid rgba(148,163,184,0.4)", borderRadius: 6, background: "transparent", color: "#e2e8f0", fontSize: hudType("xs"), padding: "2px 8px", cursor: "pointer" }, children: "\u2039 Back" })) : null, title !== undefined ? (_jsx("span", { style: { fontSize: hudType("xs"), letterSpacing: 1.2, textTransform: "uppercase", color: "rgba(203,213,225,0.75)" }, children: title })) : null] })) : null;
     if (layout === "radial" || layout === "arc") {
         const options = current.map((item) => ({ ...item, hasSubmenu: item.children !== undefined && item.children.length > 0 }));
         return (_jsxs("div", { className: className, "data-quick-menu": true, "data-layout": layout, style: { position: "relative", ...style }, children: [header, _jsx(RadialMenu, { options: options, size: radialSize, accent: accent, ...(layout === "arc" ? { arc } : {}), onSelect: (id) => {
@@ -64,14 +65,14 @@ export function QuickMenu({ items, layout = "list", onSelect, onClose, title, co
     }
     const groups = groupBySection(current);
     if (layout === "grid") {
-        return (_jsxs("div", { className: className, "data-quick-menu": true, "data-layout": "grid", style: { ...PANEL, width: columns * 92 + 24, ...style }, children: [header, groups.map((group, gi) => (_jsxs("div", { "data-section": group.section, children: [group.section !== undefined ? (_jsx("div", { style: { fontSize: 10, textTransform: "uppercase", letterSpacing: 1.2, color: "rgba(148,163,184,0.75)", margin: "6px 0 4px" }, children: group.section })) : null, _jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 6 }, children: group.items.map((item) => (_jsxs("button", { type: "button", "data-quick-item": item.id, "data-disabled": item.disabled === true, onClick: () => activate(item), disabled: item.disabled === true, style: {
+        return (_jsxs("div", { className: className, "data-quick-menu": true, "data-layout": "grid", style: { ...PANEL, width: columns * 92 + 24, ...style }, children: [header, groups.map((group, gi) => (_jsxs("div", { "data-section": group.section, children: [group.section !== undefined ? (_jsx("div", { style: { fontSize: hudType("xs"), textTransform: "uppercase", letterSpacing: 1.2, color: "rgba(148,163,184,0.75)", margin: "6px 0 4px" }, children: group.section })) : null, _jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 6 }, children: group.items.map((item) => (_jsxs("button", { type: "button", "data-quick-item": item.id, "data-disabled": item.disabled === true, onClick: () => activate(item), disabled: item.disabled === true, style: {
                                     position: "relative", display: "flex", flexDirection: "column", alignItems: "center", gap: 3, padding: "10px 4px",
                                     borderRadius: 10, border: "1px solid rgba(148,163,184,0.25)", background: "rgba(17,22,30,0.7)", color: "#e2e8f0",
                                     cursor: item.disabled === true ? "default" : "pointer", opacity: item.disabled === true ? 0.4 : 1,
-                                }, children: [_jsx("span", { style: { fontSize: 22 }, children: item.icon }), item.label !== undefined ? _jsx("span", { style: { fontSize: 10 }, children: item.label }) : null, item.badge !== undefined ? (_jsx("span", { style: { position: "absolute", top: 3, right: 5, fontSize: 10, fontWeight: 700, color: accent }, children: item.badge })) : null, item.children !== undefined ? _jsx("span", { style: { position: "absolute", bottom: 3, right: 5, fontSize: 10 }, children: "\u25B8" }) : null] }, item.id))) })] }, group.section ?? gi)))] }));
+                                }, children: [_jsx("span", { style: { fontSize: 22 }, children: item.icon }), item.label !== undefined ? _jsx("span", { style: { fontSize: hudType("xs") }, children: item.label }) : null, item.badge !== undefined ? (_jsx("span", { style: { position: "absolute", top: 3, right: 5, fontSize: hudType("xs"), fontWeight: 700, color: accent }, children: item.badge })) : null, item.children !== undefined ? _jsx("span", { style: { position: "absolute", bottom: 3, right: 5, fontSize: hudType("xs") }, children: "\u25B8" }) : null] }, item.id))) })] }, group.section ?? gi)))] }));
     }
     // list
-    return (_jsxs("div", { className: className, "data-quick-menu": true, "data-layout": "list", style: { ...PANEL, width: 240, ...style }, children: [header, groups.map((group, gi) => (_jsxs("div", { "data-section": group.section, children: [group.section !== undefined ? (_jsx("div", { style: { fontSize: 10, textTransform: "uppercase", letterSpacing: 1.2, color: "rgba(148,163,184,0.75)", margin: "6px 0 4px" }, children: group.section })) : null, _jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 2 }, children: group.items.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", "data-quick-item": item.id, "data-disabled": item.disabled === true, onClick: () => activate(item), disabled: item.disabled === true, style: {
+    return (_jsxs("div", { className: className, "data-quick-menu": true, "data-layout": "list", style: { ...PANEL, width: 240, ...style }, children: [header, groups.map((group, gi) => (_jsxs("div", { "data-section": group.section, children: [group.section !== undefined ? (_jsx("div", { style: { fontSize: hudType("xs"), textTransform: "uppercase", letterSpacing: 1.2, color: "rgba(148,163,184,0.75)", margin: "6px 0 4px" }, children: group.section })) : null, _jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 2 }, children: group.items.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", "data-quick-item": item.id, "data-disabled": item.disabled === true, onClick: () => activate(item), disabled: item.disabled === true, style: {
                                     width: "100%", display: "flex", alignItems: "center", gap: 8, padding: "7px 9px", borderRadius: 8,
                                     border: "1px solid transparent", background: "transparent", color: "#e2e8f0", fontSize: 13, textAlign: "left",
                                     cursor: item.disabled === true ? "default" : "pointer", opacity: item.disabled === true ? 0.45 : 1,

package/dist/saveSlots.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useReducer, useEffect } from "react";
 import { GameIcon } from "./gameIcons.js";
 import { HudFrame } from "./hudFrame.js";
+import { hudType } from "./hudTokens.js";
 /**
  * Subscribe to a {@link SaveSlots} index and re-render on any change (write,
  * clear, rename, restore). Returns the live list of slots in menu order. Wire it
@@ -75,10 +76,10 @@ function MetaChips({ slot, t, metaIcons, }) {
                     color: t.muted,
                     borderRadius: 999,
                     padding: "3px 9px",
-                    fontSize: 11,
+                    fontSize: hudType("xs"),
                     fontWeight: 600,
                     lineHeight: 1.3,
-                }, children: [icon !== undefined ? _jsx(GameIcon, { name: icon, size: 12, color: t.accent }) : null, _jsx("span", { style: { opacity: 0.7, textTransform: "uppercase", letterSpacing: 0.6, fontSize: 9 }, children: key }), _jsx("span", { style: { color: t.text }, children: String(value) })] }, key));
+                }, children: [icon !== undefined ? _jsx(GameIcon, { name: icon, size: 12, color: t.accent }) : null, _jsx("span", { style: { opacity: 0.7, textTransform: "uppercase", letterSpacing: 0.6, fontSize: hudType("xs") }, children: key }), _jsx("span", { style: { color: t.text }, children: String(value) })] }, key));
         }) }));
 }
 /**
@@ -133,6 +134,6 @@ export function SaveSlotMenu({ model, onLoad, onNew, onDelete, onContinue, title
                                     height: 40,
                                     borderRadius: 10,
                                     border: `1px dashed ${t.muted}`,
-                                }, children: _jsx(GameIcon, { name: "star", size: 18, color: t.muted }) }), _jsxs("span", { children: [_jsx("span", { style: { display: "block", fontSize: 15, fontWeight: 700, color: t.text }, children: "New Game" }), _jsxs("span", { style: { fontSize: 11 }, children: ["Empty slot \u00B7 ", slot.id] })] })] })) : (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10 }, children: [_jsx("span", { "data-save-slot-name": "", style: { fontSize: 16, fontWeight: 800 }, children: slot.name ?? slot.id }), slot.savedAt !== undefined ? (_jsx("span", { style: { fontSize: 11, fontWeight: 600, color: t.accent, whiteSpace: "nowrap" }, children: relativeSavedAt(slot.savedAt, nowMs) })) : null] }), _jsx(MetaChips, { slot: slot, t: t, metaIcons: metaIcons }), _jsxs("div", { style: { display: "flex", gap: 8, marginTop: 12 }, children: [_jsxs("button", { type: "button", "data-save-slot-load": "", style: { ...rowButton(t.accent, true), flex: 1, justifyContent: "center" }, onClick: () => onLoad?.(slot), children: [_jsx(GameIcon, { name: "chest", size: 14, color: "#0b1220" }), "Load"] }), _jsxs("button", { type: "button", "data-save-slot-delete": "", style: rowButton(t.accent, false), onClick: () => onDelete?.(slot), "aria-label": `Delete ${slot.name ?? slot.id}`, children: [_jsx(GameIcon, { name: "cross", size: 14 }), "Delete"] })] })] })) }, slot.id));
+                                }, children: _jsx(GameIcon, { name: "star", size: 18, color: t.muted }) }), _jsxs("span", { children: [_jsx("span", { style: { display: "block", fontSize: 15, fontWeight: 700, color: t.text }, children: "New Game" }), _jsxs("span", { style: { fontSize: hudType("xs") }, children: ["Empty slot \u00B7 ", slot.id] })] })] })) : (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10 }, children: [_jsx("span", { "data-save-slot-name": "", style: { fontSize: 16, fontWeight: 800 }, children: slot.name ?? slot.id }), slot.savedAt !== undefined ? (_jsx("span", { style: { fontSize: hudType("xs"), fontWeight: 600, color: t.accent, whiteSpace: "nowrap" }, children: relativeSavedAt(slot.savedAt, nowMs) })) : null] }), _jsx(MetaChips, { slot: slot, t: t, metaIcons: metaIcons }), _jsxs("div", { style: { display: "flex", gap: 8, marginTop: 12 }, children: [_jsxs("button", { type: "button", "data-save-slot-load": "", style: { ...rowButton(t.accent, true), flex: 1, justifyContent: "center" }, onClick: () => onLoad?.(slot), children: [_jsx(GameIcon, { name: "chest", size: 14, color: "#0b1220" }), "Load"] }), _jsxs("button", { type: "button", "data-save-slot-delete": "", style: rowButton(t.accent, false), onClick: () => onDelete?.(slot), "aria-label": `Delete ${slot.name ?? slot.id}`, children: [_jsx(GameIcon, { name: "cross", size: 14 }), "Delete"] })] })] })) }, slot.id));
             })] }));
 }

package/dist/selectionHud.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState, } from "react";
 import { moveSelectionFocus, selectionWindow, summarizeSelection, } from "@jgengine/core/ui/selectionModel";
+import { hudType } from "./hudTokens.js";
 /**
  * Composable React renderers over the headless selection view model
  * (`@jgengine/core/ui/selectionModel`) — the data/renderer/chrome split for an RTS selection panel, a
@@ -74,7 +75,7 @@ export function VitalBar({ vital, width = 120, showLabel = true, className, styl
     const denom = vital.max <= 0 ? 1 : vital.max;
     const fraction = Math.max(0, Math.min(1, vital.current / denom));
     const [from, to] = VITAL_TONES[vital.tone ?? "neutral"] ?? VITAL_TONES.neutral;
-    return (_jsxs("div", { className: className, "data-vital": vital.id, style: { width, ...style }, children: [showLabel ? (_jsxs("div", { style: { display: "flex", fontSize: 10, opacity: 0.75, marginBottom: 2 }, children: [_jsx("span", { children: vital.label ?? vital.id }), _jsxs("span", { style: { marginLeft: "auto", fontVariantNumeric: "tabular-nums" }, children: [Math.round(vital.current), "/", Math.round(vital.max)] })] })) : null, _jsx("div", { style: { height: 6, borderRadius: 999, background: "rgba(255,255,255,0.12)", overflow: "hidden" }, children: _jsx("div", { style: { width: `${fraction * 100}%`, height: "100%", background: `linear-gradient(90deg, ${from}, ${to})` } }) })] }));
+    return (_jsxs("div", { className: className, "data-vital": vital.id, style: { width, ...style }, children: [showLabel ? (_jsxs("div", { style: { display: "flex", fontSize: hudType("xs"), opacity: 0.75, marginBottom: 2 }, children: [_jsx("span", { children: vital.label ?? vital.id }), _jsxs("span", { style: { marginLeft: "auto", fontVariantNumeric: "tabular-nums" }, children: [Math.round(vital.current), "/", Math.round(vital.max)] })] })) : null, _jsx("div", { style: { height: 6, borderRadius: 999, background: "rgba(255,255,255,0.12)", overflow: "hidden" }, children: _jsx("div", { style: { width: `${fraction * 100}%`, height: "100%", background: `linear-gradient(90deg, ${from}, ${to})` } }) })] }));
 }
 const PORTRAIT_BASE = {
     position: "relative",
@@ -124,7 +125,7 @@ export function EntityPortrait({ entity, selected = false, size = 44, vitalId =
  * @capability entity-summary primary selected-entity detail panel (name, tags, vitals)
  */
 export function EntitySummary({ entity, renderVital, className, style, }) {
-    return (_jsxs("div", { className: className, "data-entity-summary": entity.id, style: { display: "flex", flexDirection: "column", gap: 4, minWidth: 140, ...style }, children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 6 }, children: [_jsx("strong", { style: { fontSize: 14 }, children: entity.name ?? entity.id }), entity.kind !== undefined ? (_jsx("span", { style: { fontSize: 10, textTransform: "uppercase", letterSpacing: 0.4, opacity: 0.6 }, children: entity.kind })) : null] }), entity.tags !== undefined && entity.tags.length > 0 ? (_jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: entity.tags.map((tag) => (_jsx("span", { style: { fontSize: 9, padding: "1px 5px", borderRadius: 999, background: "rgba(255,255,255,0.1)" }, children: tag }, tag))) })) : null, (entity.vitals ?? []).map((vital) => (_jsx("div", { children: renderVital ? renderVital(vital) : _jsx(VitalBar, { vital: vital }) }, vital.id)))] }));
+    return (_jsxs("div", { className: className, "data-entity-summary": entity.id, style: { display: "flex", flexDirection: "column", gap: 4, minWidth: 140, ...style }, children: [_jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 6 }, children: [_jsx("strong", { style: { fontSize: 14 }, children: entity.name ?? entity.id }), entity.kind !== undefined ? (_jsx("span", { style: { fontSize: hudType("xs"), textTransform: "uppercase", letterSpacing: 0.4, opacity: 0.6 }, children: entity.kind })) : null] }), entity.tags !== undefined && entity.tags.length > 0 ? (_jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: entity.tags.map((tag) => (_jsx("span", { style: { fontSize: hudType("xs"), padding: "1px 5px", borderRadius: 999, background: "rgba(255,255,255,0.1)" }, children: tag }, tag))) })) : null, (entity.vitals ?? []).map((vital) => (_jsx("div", { children: renderVital ? renderVital(vital) : _jsx(VitalBar, { vital: vital }) }, vital.id)))] }));
 }
 /**
  * A same-kind selection chip — icon plus count — for the grouped large-selection view. The default
@@ -133,7 +134,7 @@ export function EntitySummary({ entity, renderVital, className, style, }) {
  * @capability selection-group-chip same-kind selection chip (icon + count) for a grouped selection
  */
 export function SelectionGroupChip({ group, onSelect, renderIcon, className, style, }) {
-    return (_jsxs("button", { type: "button", className: className, "data-selection-group": group.kind, "aria-label": `${group.count} ${group.label}`, title: `${group.count} ${group.label}`, onClick: () => onSelect?.(group), style: { ...PORTRAIT_BASE, width: 44, height: 44, ...style }, children: [_jsx("span", { "aria-hidden": true, style: { fontSize: 16 }, children: renderIcon ? renderIcon(group) : (group.icon ?? group.label.slice(0, 2)) }), _jsx("span", { style: { position: "absolute", right: 2, bottom: 1, fontSize: 10, fontWeight: 700 }, children: group.count })] }));
+    return (_jsxs("button", { type: "button", className: className, "data-selection-group": group.kind, "aria-label": `${group.count} ${group.label}`, title: `${group.count} ${group.label}`, onClick: () => onSelect?.(group), style: { ...PORTRAIT_BASE, width: 44, height: 44, ...style }, children: [_jsx("span", { "aria-hidden": true, style: { fontSize: 16 }, children: renderIcon ? renderIcon(group) : (group.icon ?? group.label.slice(0, 2)) }), _jsx("span", { style: { position: "absolute", right: 2, bottom: 1, fontSize: hudType("xs"), fontWeight: 700 }, children: group.count })] }));
 }
 /**
  * The composable RENDERER for the member collection: a portrait strip for a small selection, or the

package/dist/shopGrid.js

@@ -3,6 +3,7 @@ import { useEffect, useReducer } from "react";
 import { balance } from "@jgengine/core/economy/wallet";
 import { GameIcon, iconForItemId } from "./gameIcons.js";
 import { HudFrame } from "./hudFrame.js";
+import { hudType } from "./hudTokens.js";
 /**
  * Subscribe to a shop's stock and re-render whenever it changes (buy, sell, restock, price, add,
  * remove, restore). Returns the current entry list — a detached snapshot safe to map over.
@@ -104,7 +105,7 @@ export function ShopGrid({ shop, wallet, onWalletChange, theme, currencyIcons, i
                                         height: 40,
                                         borderRadius: 8,
                                         background: "rgba(0,0,0,0.28)",
-                                    }, children: _jsx(GameIcon, { name: entryIcon(entry, iconFor), size: 28, color: t.accent }) }), _jsx("span", { "data-shop-item-qty": true, style: { fontSize: 12, fontWeight: 700, color: t.muted, fontVariantNumeric: "tabular-nums" }, children: entry.qty === null ? "∞" : `x${entry.qty}` })] }), _jsx("div", { style: { fontSize: 13, fontWeight: 700, color: t.text, lineHeight: 1.2 }, children: labelFor?.(entry) ?? capitalize(entry.kind) }), _jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 6 }, children: [_jsx(PriceTag, { price: entry.price, icon: currencyIcon(entry.price.currency, currencyIcons), accent: t.accent, muted: t.text }), entry.sellPrice !== undefined ? (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 3, fontSize: 11, color: t.muted }, children: ["sell", _jsx(PriceTag, { price: entry.sellPrice, icon: currencyIcon(entry.sellPrice.currency, currencyIcons), accent: t.muted, muted: t.muted })] })) : null] }), _jsxs("div", { style: { display: "flex", gap: 6 }, children: [_jsx("button", { type: "button", "data-shop-buy": entry.id, disabled: buyDisabled, onClick: () => onBuy(entry), style: {
+                                    }, children: _jsx(GameIcon, { name: entryIcon(entry, iconFor), size: 28, color: t.accent }) }), _jsx("span", { "data-shop-item-qty": true, style: { fontSize: 12, fontWeight: 700, color: t.muted, fontVariantNumeric: "tabular-nums" }, children: entry.qty === null ? "∞" : `x${entry.qty}` })] }), _jsx("div", { style: { fontSize: 13, fontWeight: 700, color: t.text, lineHeight: 1.2 }, children: labelFor?.(entry) ?? capitalize(entry.kind) }), _jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 6 }, children: [_jsx(PriceTag, { price: entry.price, icon: currencyIcon(entry.price.currency, currencyIcons), accent: t.accent, muted: t.text }), entry.sellPrice !== undefined ? (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 3, fontSize: hudType("xs"), color: t.muted }, children: ["sell", _jsx(PriceTag, { price: entry.sellPrice, icon: currencyIcon(entry.sellPrice.currency, currencyIcons), accent: t.muted, muted: t.muted })] })) : null] }), _jsxs("div", { style: { display: "flex", gap: 6 }, children: [_jsx("button", { type: "button", "data-shop-buy": entry.id, disabled: buyDisabled, onClick: () => onBuy(entry), style: {
                                         flex: 1,
                                         padding: "7px 8px",
                                         borderRadius: 8,

package/dist/statusEffectBar.js

@@ -3,6 +3,7 @@ import {} from "react";
 import { statusEffectRemainingFraction } from "@jgengine/core/combat";
 import { iconForItemId, isGameIconName } from "./gameIcons.js";
 import { IconTreatment, schoolForItem } from "./iconTreatment.js";
+import { hudType } from "./hudTokens.js";
 const FALLBACK_ICON = "hourglass";
 function defaultIcon(kind) {
     return iconForItemId(kind) ?? FALLBACK_ICON;
@@ -33,7 +34,7 @@ function StatusEffectIcon({ effect, size, ringColor, school, glyph, label, showT
     const circumference = 2 * Math.PI * radius;
     const dashOffset = circumference * (1 - fraction);
     return (_jsxs("div", { "data-status-effect": effect.kind, "data-remaining-fraction": fraction.toFixed(4), title: label, "aria-label": label, style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 3 }, children: [_jsxs("div", { style: { position: "relative", width: size, height: size }, children: [_jsx(IconTreatment, { ...(glyph.node !== undefined ? { glyph: glyph.node } : glyph.icon !== undefined ? { icon: glyph.icon } : {}), school: school, size: size, count: effect.stacks }), _jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", style: { position: "absolute", inset: 0, transform: "rotate(-90deg)", pointerEvents: "none", overflow: "visible" }, children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "rgba(0,0,0,0.55)", strokeWidth: ringWidth }), _jsx("circle", { "data-countdown-ring": "", cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: ringColor, strokeWidth: ringWidth, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: dashOffset, style: { transition: "stroke-dashoffset 200ms linear" } })] })] }), showTimer ? (_jsx("span", { "data-status-timer": "", style: {
-                    fontSize: 10,
+                    fontSize: hudType("xs"),
                     fontWeight: 700,
                     fontVariantNumeric: "tabular-nums",
                     color: "var(--jg-bar-text, #f5f7fa)",

package/dist/streetGeometryPreview.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { buildIntersectionMarkings, buildTrimmedIntersections, } from "@jgengine/core/world/roads";
+import { hudType } from "./hudTokens.js";
 const armRoad = (angle, width) => ({
     path: [
         [0, 0],
@@ -108,12 +109,12 @@ export function StreetGeometryPreview({ className }) {
                             for (let i = 3; i < surface.positions.length; i += 3) {
                                 extent = Math.max(extent, Math.hypot(surface.positions[i], surface.positions[i + 2]));
                             }
-                            return (_jsxs("section", { style: { background: "#10263a", border: "1px solid #285174", borderRadius: 10, overflow: "hidden" }, children: [_jsxs("div", { style: { padding: "8px 12px 3px", display: "flex", justifyContent: "space-between", gap: 8 }, children: [_jsx("strong", { style: { fontSize: 14 }, children: entry.name }), _jsxs("span", { style: { color: "#67e8f9", fontSize: 11 }, children: ["extent ", extent.toFixed(1)] })] }), _jsxs("svg", { viewBox: "0 0 280 205", role: "img", "aria-label": `${entry.name} road mesh`, style: { display: "block", width: "100%", height: "auto" }, children: [_jsx("defs", { children: _jsxs("pattern", { id: patternId, width: "20", height: "20", patternUnits: "userSpaceOnUse", children: [_jsx("rect", { width: "20", height: "20", fill: "#0d2234" }), _jsx("path", { d: "M 20 0 L 0 0 0 20", fill: "none", stroke: "#1d4b68", strokeWidth: "0.8" })] }) }), _jsx("rect", { width: "280", height: "205", fill: `url(#${patternId})` }), geometry.sidewalks.flatMap((ribbon, ri) => triangles(ribbon, 2.65, 140, 102).map((points, ti) => (_jsx("polygon", { points: points, fill: "#d8c9aa", stroke: "#d8c9aa", strokeWidth: "0.35" }, `s-r-${ri}-${ti}`)))), geometry.sidewalkAprons.flatMap((junction, ji) => triangles(junction, 2.65, 140, 102).map((points, ti) => (_jsx("polygon", { points: points, fill: "#d8c9aa", stroke: "#d8c9aa", strokeWidth: "0.35" }, `s-j-${ji}-${ti}`)))), geometry.ribbons.flatMap((ribbon, ri) => triangles(ribbon, 2.65, 140, 102).map((points, ti) => (_jsx("polygon", { points: points, fill: "#52677d", stroke: "#52677d", strokeWidth: "0.35" }, `r-${ri}-${ti}`)))), triangles(surface, 2.65, 140, 102).map((points, ti) => (_jsx("polygon", { points: points, fill: "#2479a4", stroke: "#2479a4", strokeWidth: "0.35" }, `j-${ti}`))), markings.flatMap((marking, mi) => triangles(marking, 2.65, 140, 102).map((points, ti) => (_jsx("polygon", { points: points, fill: "#f8fafc" }, `m-${mi}-${ti}`))))] })] }, entry.name));
+                            return (_jsxs("section", { style: { background: "#10263a", border: "1px solid #285174", borderRadius: 10, overflow: "hidden" }, children: [_jsxs("div", { style: { padding: "8px 12px 3px", display: "flex", justifyContent: "space-between", gap: 8 }, children: [_jsx("strong", { style: { fontSize: 14 }, children: entry.name }), _jsxs("span", { style: { color: "#67e8f9", fontSize: hudType("xs") }, children: ["extent ", extent.toFixed(1)] })] }), _jsxs("svg", { viewBox: "0 0 280 205", role: "img", "aria-label": `${entry.name} road mesh`, style: { display: "block", width: "100%", height: "auto" }, children: [_jsx("defs", { children: _jsxs("pattern", { id: patternId, width: "20", height: "20", patternUnits: "userSpaceOnUse", children: [_jsx("rect", { width: "20", height: "20", fill: "#0d2234" }), _jsx("path", { d: "M 20 0 L 0 0 0 20", fill: "none", stroke: "#1d4b68", strokeWidth: "0.8" })] }) }), _jsx("rect", { width: "280", height: "205", fill: `url(#${patternId})` }), geometry.sidewalks.flatMap((ribbon, ri) => triangles(ribbon, 2.65, 140, 102).map((points, ti) => (_jsx("polygon", { points: points, fill: "#d8c9aa", stroke: "#d8c9aa", strokeWidth: "0.35" }, `s-r-${ri}-${ti}`)))), geometry.sidewalkAprons.flatMap((junction, ji) => triangles(junction, 2.65, 140, 102).map((points, ti) => (_jsx("polygon", { points: points, fill: "#d8c9aa", stroke: "#d8c9aa", strokeWidth: "0.35" }, `s-j-${ji}-${ti}`)))), geometry.ribbons.flatMap((ribbon, ri) => triangles(ribbon, 2.65, 140, 102).map((points, ti) => (_jsx("polygon", { points: points, fill: "#52677d", stroke: "#52677d", strokeWidth: "0.35" }, `r-${ri}-${ti}`)))), triangles(surface, 2.65, 140, 102).map((points, ti) => (_jsx("polygon", { points: points, fill: "#2479a4", stroke: "#2479a4", strokeWidth: "0.35" }, `j-${ti}`))), markings.flatMap((marking, mi) => triangles(marking, 2.65, 140, 102).map((points, ti) => (_jsx("polygon", { points: points, fill: "#f8fafc" }, `m-${mi}-${ti}`))))] })] }, entry.name));
                         }), _jsxs("section", { style: { minHeight: 238, background: "linear-gradient(145deg, #18354c, #10263a)", border: "1px solid #356487", borderRadius: 10, padding: 18 }, children: [_jsx("strong", { style: { display: "block", marginBottom: 8, fontSize: 15 }, children: "Shared geometry contract" }), _jsx("p", { style: { margin: "0 0 14px", color: "#8ed8ef", fontSize: 12, lineHeight: 1.5 }, children: "Every panel is built from the same renderer-neutral meshes consumed by the Three.js city." }), [
                                     ["#d8c9aa", "Sidewalk annulus", "No pavement overlap"],
                                     ["#2479a4", "Junction apron", "Bounded by road widths"],
                                     ["#f8fafc", "Lane guidance", "Mouth clearance + stop lines"],
                                     ["#4ade80", "Terrain drape", "Every vertex sampled"],
                                     ["#fbbf24", "Offset continuity", "Positive and negative"],
-                                ].map(([color, label, detail]) => (_jsxs("div", { style: { display: "grid", gridTemplateColumns: "12px 1fr auto", alignItems: "center", gap: 9, marginTop: 9, fontSize: 11 }, children: [_jsx("span", { style: { width: 10, height: 10, borderRadius: 2, background: color, boxShadow: `0 0 8px ${color}` } }), _jsx("span", { style: { color: "#e2edf5" }, children: label }), _jsx("span", { style: { color: "#82a9c2" }, children: detail })] }, label)))] })] })] }) }));
+                                ].map(([color, label, detail]) => (_jsxs("div", { style: { display: "grid", gridTemplateColumns: "12px 1fr auto", alignItems: "center", gap: 9, marginTop: 9, fontSize: hudType("xs") }, children: [_jsx("span", { style: { width: 10, height: 10, borderRadius: 2, background: color, boxShadow: `0 0 8px ${color}` } }), _jsx("span", { style: { color: "#e2edf5" }, children: label }), _jsx("span", { style: { color: "#82a9c2" }, children: detail })] }, label)))] })] })] }) }));
 }

package/dist/styles.css

@@ -0,0 +1,72 @@
+/* @jgengine/react engine stylesheet */
+:root { --jg-motion-scale: 1; }
+@media (prefers-reduced-motion: reduce) { :root { --jg-motion-scale: 0; } }
+[data-reduced-motion="true"] { --jg-motion-scale: 0; }
+@media (prefers-reduced-motion: reduce) {
+  [data-jg-hud] *, [data-jg-hud] *::before, [data-jg-hud] *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
+}
+[data-reduced-motion="true"] *, [data-reduced-motion="true"] *::before, [data-reduced-motion="true"] *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
+
+@keyframes jg-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes jg-fade-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes jg-panel-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
+@keyframes jg-panel-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(0.98); } }
+@keyframes jg-slide-up { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+@keyframes jg-slide-down { from { transform: translateY(-18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+@keyframes jg-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
+@keyframes jg-flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }
+@keyframes jg-sheen { from { background-position: -160px 0; } to { background-position: 260px 0; } }
+@keyframes jg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
+@keyframes jg-ready-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }
+@keyframes jg-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
+@keyframes jg-float-up { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-46px); opacity: 0; } }
+@keyframes jg-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+@keyframes jg-delta-up { 0% { color: var(--jg-success, #3fa34d); text-shadow: 0 0 10px var(--jg-success, #3fa34d); scale: 1.12; } 100% { scale: 1; } }
+@keyframes jg-delta-down { 0% { color: var(--jg-danger, #e5484d); text-shadow: 0 0 10px var(--jg-danger, #e5484d); scale: 0.94; } 100% { scale: 1; } }
+
+[data-jg-hud] { font-family: var(--jg-font-body, "Inter Variable", Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
+:where([data-jg-hud]) :where(button, [role="button"], a[href], summary, [data-jg-interactive]):focus-visible { outline: 2px solid var(--jg-accent, #38bdf8); outline-offset: 2px; }
+:where([data-jg-hud]) :where(button, [role="button"]) { transition: scale calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease, cubic-bezier(0.2, 0, 0, 1)), filter calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease, cubic-bezier(0.2, 0, 0, 1)); }
+@media (hover: hover) {
+  :where([data-jg-hud]) :where(button, [role="button"]):where(:not(:disabled, [aria-disabled="true"])):hover { filter: brightness(1.08); }
+}
+:where([data-jg-hud]) :where(button, [role="button"]):where(:not(:disabled, [aria-disabled="true"])):active { scale: var(--jg-press-scale, 0.97); }
+
+[data-jg-button] { appearance: none; box-sizing: border-box; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--jg-space-sm, 8px); min-height: 36px; padding: 0 var(--jg-space-lg, 16px); margin: 0; font-family: var(--jg-font-body, "Inter Variable", Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); font-size: var(--jg-type-md, 14px); font-weight: 600; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; color: var(--jg-text, #f5f7fa); background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)), var(--jg-slot-bg, rgba(12,15,21,0.78)); border: var(--jg-slot-border, 1px solid rgba(255,255,255,0.13)); border-radius: var(--jg-slot-radius, 8px); box-shadow: var(--jg-highlight, inset 0 1px 0 rgba(255,255,255,0.08)), var(--jg-elevation-raised, 0 1px 2px rgba(0,0,0,0.45), 0 4px 12px -2px rgba(0,0,0,0.4)); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: translate calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease, cubic-bezier(0.2, 0, 0, 1)), scale calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease, cubic-bezier(0.2, 0, 0, 1)), border-color calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease, cubic-bezier(0.2, 0, 0, 1)), background-color calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease, cubic-bezier(0.2, 0, 0, 1)); }
+[data-jg-button]::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--jg-hover-overlay, rgba(255,255,255,0.07)); opacity: 0; pointer-events: none; transition: opacity calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease, cubic-bezier(0.2, 0, 0, 1)); }
+@media (hover: hover) {
+  [data-jg-button]:not(:disabled, [aria-disabled="true"]):hover { translate: 0 var(--jg-hover-lift, -1px); box-shadow: var(--jg-highlight, inset 0 1px 0 rgba(255,255,255,0.08)), var(--jg-elevation-overlay, 0 2px 4px rgba(0,0,0,0.4), 0 10px 24px -4px rgba(0,0,0,0.5)); }
+  [data-jg-button]:not(:disabled, [aria-disabled="true"]):hover::after { opacity: 1; }
+}
+[data-jg-button]:not(:disabled, [aria-disabled="true"]):active { translate: 0 0; scale: var(--jg-press-scale, 0.97); box-shadow: var(--jg-highlight, inset 0 1px 0 rgba(255,255,255,0.08)), var(--jg-elevation-raised, 0 1px 2px rgba(0,0,0,0.45), 0 4px 12px -2px rgba(0,0,0,0.4)); transition-duration: calc(60ms * var(--jg-motion-scale, 1)); }
+[data-jg-button]:not(:disabled, [aria-disabled="true"]):active::after { opacity: 1; background: var(--jg-press-overlay, rgba(0,0,0,0.14)); }
+[data-jg-button]:focus-visible { outline: none; box-shadow: var(--jg-focus-ring, 0 0 0 2px #0a0c10, 0 0 0 4px var(--jg-accent, #38bdf8)), var(--jg-elevation-raised, 0 1px 2px rgba(0,0,0,0.45), 0 4px 12px -2px rgba(0,0,0,0.4)); }
+[data-jg-button]:is(:disabled, [aria-disabled="true"]) { opacity: var(--jg-disabled-opacity, 0.45); cursor: not-allowed; box-shadow: none; }
+[data-jg-button][data-variant="primary"] { color: var(--jg-surface-deep, #0a0c10); background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%), var(--jg-accent, #38bdf8); border: 1px solid rgba(255,255,255,0.28); }
+[data-jg-button][data-variant="danger"] { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 60%), var(--jg-danger, #e5484d); border: 1px solid rgba(255,255,255,0.22); }
+[data-jg-button][data-variant="ghost"] { background: transparent; border-color: transparent; box-shadow: none; }
+[data-jg-button][data-variant="ghost"]:not(:disabled, [aria-disabled="true"]):hover { box-shadow: none; }
+[data-jg-button][data-size="sm"] { min-height: 28px; padding: 0 var(--jg-space-md, 12px); font-size: var(--jg-type-sm, 13px); }
+[data-jg-button][data-size="lg"] { min-height: 44px; padding: 0 var(--jg-space-xl, 24px); font-size: var(--jg-type-lg, 16px); }
+[data-jg-button][data-size="icon"] { min-height: 0; width: 28px; height: 28px; padding: 0; font-size: var(--jg-type-sm, 13px); }
+[data-jg-button][data-block] { display: flex; width: 100%; }
+
+[data-jg-panel] { box-sizing: border-box; color: var(--jg-text, #f5f7fa); font-family: var(--jg-font-body, "Inter Variable", Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); background: var(--jg-frame-bg, rgba(12,15,21,0.9)); border: var(--jg-frame-border, 1px solid rgba(255,255,255,0.13)); border-radius: var(--jg-frame-radius, 10px); box-shadow: var(--jg-frame-glow, var(--jg-highlight, inset 0 1px 0 rgba(255,255,255,0.08)), var(--jg-elevation-raised, 0 1px 2px rgba(0,0,0,0.45), 0 4px 12px -2px rgba(0,0,0,0.4))); }
+[data-jg-panel][data-elevation="overlay"] { box-shadow: var(--jg-frame-glow, var(--jg-highlight, inset 0 1px 0 rgba(255,255,255,0.08))), var(--jg-elevation-overlay, 0 2px 4px rgba(0,0,0,0.4), 0 10px 24px -4px rgba(0,0,0,0.5)); }
+[data-jg-panel][data-elevation="modal"] { box-shadow: var(--jg-frame-glow, var(--jg-highlight, inset 0 1px 0 rgba(255,255,255,0.08))), var(--jg-elevation-modal, 0 4px 8px rgba(0,0,0,0.35), 0 24px 56px -12px rgba(0,0,0,0.7)); }
+[data-jg-panel][data-state="open"] { animation: jg-panel-in calc(var(--jg-motion-base, 180ms) * var(--jg-motion-scale, 1)) var(--jg-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; }
+[data-jg-panel][data-state="closed"] { animation: jg-panel-out calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease, cubic-bezier(0.2, 0, 0, 1)) both; pointer-events: none; }
+[data-jg-window][data-state="open"] { animation: jg-panel-in calc(var(--jg-motion-base, 180ms) * var(--jg-motion-scale, 1)) var(--jg-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; }
+[data-jg-window][data-state="closed"] { animation: jg-panel-out calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease, cubic-bezier(0.2, 0, 0, 1)) both; pointer-events: none !important; }
+[data-jg-panel-header] { display: flex; align-items: center; justify-content: space-between; gap: var(--jg-space-sm, 8px); font-size: var(--jg-type-xs, 12px); font-weight: 650; letter-spacing: var(--jg-tracking-label, 0.08em); text-transform: uppercase; color: var(--jg-text-dim, #94a3b8); }
+
+[data-modal-backdrop] { animation: jg-fade-in calc(var(--jg-motion-base, 180ms) * var(--jg-motion-scale, 1)) var(--jg-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
+[data-modal-host] > [role="dialog"] { animation: jg-panel-in calc(var(--jg-motion-base, 180ms) * var(--jg-motion-scale, 1)) var(--jg-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; }
+[data-toast] { animation: jg-slide-up calc(var(--jg-motion-base, 180ms) * var(--jg-motion-scale, 1)) var(--jg-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; }
+[data-levelup] { animation: jg-pop calc(var(--jg-motion-slow, 320ms) * var(--jg-motion-scale, 1)) var(--jg-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both; }
+[data-jg-delta="up"] { display: inline-block; animation: jg-delta-up calc(var(--jg-motion-slow, 320ms) * var(--jg-motion-scale, 1)) var(--jg-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
+[data-jg-delta="down"] { display: inline-block; animation: jg-delta-down calc(var(--jg-motion-slow, 320ms) * var(--jg-motion-scale, 1)) var(--jg-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
+[data-action-id] { transition: translate calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease, cubic-bezier(0.2, 0, 0, 1)), scale calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), border-color calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease, cubic-bezier(0.2, 0, 0, 1)), box-shadow calc(var(--jg-motion-fast, 120ms) * var(--jg-motion-scale, 1)) var(--jg-ease, cubic-bezier(0.2, 0, 0, 1)); }
+@media (hover: hover) { [data-action-id][data-enabled]:hover { translate: 0 var(--jg-hover-lift, -1px); } }
+[data-action-id][data-enabled]:active { translate: 0 0; scale: var(--jg-press-scale, 0.97); }
+[data-action-id]:focus-visible { outline: none; box-shadow: var(--jg-focus-ring, 0 0 0 2px #0a0c10, 0 0 0 4px var(--jg-accent, #38bdf8)); }

package/dist/talentTree.js

@@ -3,6 +3,7 @@ import {} from "react";
 import { talentTreeView, } from "@jgengine/core/game/talentTreeView";
 import { GameIcon, iconForAction, iconForItemId, isGameIconName } from "./gameIcons.js";
 import { HudFrame } from "./hudFrame.js";
+import { hudType } from "./hudTokens.js";
 const STATE_STYLE = {
     locked: {
         border: "1px solid rgba(148,163,184,0.28)",
@@ -127,7 +128,7 @@ function TalentNode({ node, cx, cy, size, glyph, label, onLearn, }) {
                     background: node.state === "maxed" ? "var(--jg-accent, #38bdf8)" : "rgba(6,10,16,0.92)",
                     color: node.state === "maxed" ? "#06121b" : "var(--jg-bar-text, #f4f6fb)",
                     border: "1px solid var(--jg-accent, #38bdf8)",
-                    fontSize: 10.5,
+                    fontSize: hudType("xs"),
                     fontWeight: 800,
                     fontVariantNumeric: "tabular-nums",
                     display: "flex",
@@ -183,7 +184,7 @@ export function TalentTree({ view: viewProp, nodes, tree, onLearn, icon, label,
                         left: header.cx,
                         top: header.top,
                         transform: "translateX(-50%)",
-                        fontSize: 10,
+                        fontSize: hudType("xs"),
                         fontWeight: 700,
                         letterSpacing: 1.4,
                         textTransform: "uppercase",

package/dist/tweenNumber.d.ts

@@ -0,0 +1,37 @@
+import { type CSSProperties, type ReactNode } from "react";
+/** Ease-out cubic, the default counter curve. */
+export declare function easeOutCubic(t: number): number;
+/** Value at progress `t` (0–1) between `from` and `to` under `ease`. */
+export declare function tweenAt(from: number, to: number, t: number, ease?: (t: number) => number): number;
+/** Options for {@link useTweenedValue}. */
+export interface TweenOptions {
+    /** Tween length in ms. Default 450. */
+    durationMs?: number;
+    ease?: (t: number) => number;
+}
+/**
+ * Animates toward `target` whenever it changes, starting from the currently displayed value, so a
+ * counter rolls instead of jumping. Snaps immediately under reduced motion or a non-finite target.
+ *
+ * @capability tweened-value animate a displayed number toward its target, honouring reduced motion
+ */
+export declare function useTweenedValue(target: number, options?: TweenOptions): number;
+/** Direction of the last change, for the delta flash. */
+export type TweenDelta = "up" | "down";
+/** Props for {@link TweenNumber}. */
+export interface TweenNumberProps extends TweenOptions {
+    value: number;
+    /** Formats the displayed (in-between) value. Default rounds to an integer with locale grouping. */
+    format?: (value: number) => ReactNode;
+    /** Flash the success/danger color when the value rises/falls. Default `true`. */
+    flash?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A counter that rolls to each new value and flashes the `--jg-success` / `--jg-danger` color with a
+ * small scale pop on the change (`data-jg-delta="up" | "down"`). Tabular digits keep its width stable.
+ *
+ * @capability tween-number rolling number readout with an up/down delta flash
+ */
+export declare function TweenNumber({ value, format, flash, durationMs, ease, className, style }: TweenNumberProps): ReactNode;

package/dist/tweenNumber.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useReducedMotion } from "./accessibility.js";
+import { useEngineStyles } from "./engineStyles.js";
+/** Ease-out cubic, the default counter curve. */
+export function easeOutCubic(t) {
+    const clamped = Math.min(1, Math.max(0, t));
+    return 1 - (1 - clamped) ** 3;
+}
+/** Value at progress `t` (0–1) between `from` and `to` under `ease`. */
+export function tweenAt(from, to, t, ease = easeOutCubic) {
+    return from + (to - from) * ease(t);
+}
+/**
+ * Animates toward `target` whenever it changes, starting from the currently displayed value, so a
+ * counter rolls instead of jumping. Snaps immediately under reduced motion or a non-finite target.
+ *
+ * @capability tweened-value animate a displayed number toward its target, honouring reduced motion
+ */
+export function useTweenedValue(target, options = {}) {
+    const { durationMs = 450, ease = easeOutCubic } = options;
+    const reduced = useReducedMotion();
+    const [shown, setShown] = useState(target);
+    const shownRef = useRef(target);
+    useEffect(() => {
+        const from = shownRef.current;
+        const instant = reduced || durationMs <= 0 || !Number.isFinite(target) || !Number.isFinite(from) || typeof requestAnimationFrame !== "function";
+        if (instant || from === target) {
+            shownRef.current = target;
+            setShown(target);
+            return;
+        }
+        const start = performance.now();
+        let frame = requestAnimationFrame(function step(now) {
+            const t = Math.min(1, (now - start) / durationMs);
+            const value = t >= 1 ? target : tweenAt(from, target, t, ease);
+            shownRef.current = value;
+            setShown(value);
+            if (t < 1)
+                frame = requestAnimationFrame(step);
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [target, durationMs, ease, reduced]);
+    return shown;
+}
+const defaultFormat = (value) => Math.round(value).toLocaleString();
+/**
+ * A counter that rolls to each new value and flashes the `--jg-success` / `--jg-danger` color with a
+ * small scale pop on the change (`data-jg-delta="up" | "down"`). Tabular digits keep its width stable.
+ *
+ * @capability tween-number rolling number readout with an up/down delta flash
+ */
+export function TweenNumber({ value, format = defaultFormat, flash = true, durationMs, ease, className, style }) {
+    useEngineStyles();
+    const shown = useTweenedValue(value, { durationMs, ease });
+    const previous = useRef(value);
+    const [delta, setDelta] = useState(null);
+    useEffect(() => {
+        const before = previous.current;
+        previous.current = value;
+        if (!flash || value === before)
+            return;
+        setDelta((current) => ({ dir: value > before ? "up" : "down", seq: (current?.seq ?? 0) + 1 }));
+    }, [value, flash]);
+    return (_jsx("span", { className: className, "data-jg-tween": "", style: { fontVariantNumeric: "tabular-nums", ...style }, children: _jsx("span", { "data-jg-delta": delta?.dir, children: format(shown) }, delta?.seq ?? 0) }));
+}

package/dist/uiCues.d.ts

@@ -0,0 +1,20 @@
+import { type UiCue } from "@jgengine/core/audio/uiCues";
+import type { GameContext } from "@jgengine/core/runtime/gameContext";
+import type { HudInteractEvent } from "./hudInteract.js";
+export type { UiCue } from "@jgengine/core/audio/uiCues";
+/** Play UI cue `cue` through the game's audio seam (`ui.<cue>` in the shell catalog). No-op outside a game. */
+export declare function playUiCue(ctx: Pick<GameContext, "game"> | null, cue: UiCue): void;
+/**
+ * Returns a stable `cue(name)` that plays a UI sound: click, hover, open, close, confirm, deny, notify.
+ * The shell ships soft procedural defaults on the "ui" bus (volume in Settings, muted with master);
+ * a game replaces one by declaring `audio.sounds["ui.click"]` or `audio.uiCues`. Safe outside a GameProvider.
+ *
+ * @capability ui-sound-cues play click/hover/open/close/confirm/deny/notify UI sounds from any component
+ */
+export declare function useUiCue(): (cue: UiCue) => void;
+/**
+ * The UI cue an engine HUD primitive interaction plays, or `null` for none: activating plays the
+ * primitive's `cue` when it names a {@link UiCue} (e.g. `cue="confirm"`), else `click`; hovering a
+ * button or action slot plays `hover`; panels and windows play `open`/`close`. Press and focus are silent.
+ */
+export declare function uiCueForInteraction(event: HudInteractEvent): UiCue | null;

package/dist/uiCues.js

@@ -0,0 +1,37 @@
+import { useCallback } from "react";
+import { UI_CUES, uiCueSoundId } from "@jgengine/core/audio/uiCues";
+import { useOptionalGameContext } from "./provider.js";
+/** Play UI cue `cue` through the game's audio seam (`ui.<cue>` in the shell catalog). No-op outside a game. */
+export function playUiCue(ctx, cue) {
+    ctx?.game.audio.play(uiCueSoundId(cue));
+}
+/**
+ * Returns a stable `cue(name)` that plays a UI sound: click, hover, open, close, confirm, deny, notify.
+ * The shell ships soft procedural defaults on the "ui" bus (volume in Settings, muted with master);
+ * a game replaces one by declaring `audio.sounds["ui.click"]` or `audio.uiCues`. Safe outside a GameProvider.
+ *
+ * @capability ui-sound-cues play click/hover/open/close/confirm/deny/notify UI sounds from any component
+ */
+export function useUiCue() {
+    const ctx = useOptionalGameContext();
+    return useCallback((cue) => playUiCue(ctx, cue), [ctx]);
+}
+/**
+ * The UI cue an engine HUD primitive interaction plays, or `null` for none: activating plays the
+ * primitive's `cue` when it names a {@link UiCue} (e.g. `cue="confirm"`), else `click`; hovering a
+ * button or action slot plays `hover`; panels and windows play `open`/`close`. Press and focus are silent.
+ */
+export function uiCueForInteraction(event) {
+    switch (event.kind) {
+        case "activate":
+            return event.cue !== undefined && UI_CUES.includes(event.cue) ? event.cue : "click";
+        case "hover":
+            return event.source === "button" || event.source === "action" ? "hover" : null;
+        case "open":
+            return "open";
+        case "close":
+            return "close";
+        default:
+            return null;
+    }
+}

package/dist/waveHud.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useReducer } from "react";
 import { ExperienceBar } from "./bars.js";
 import { HudFrame } from "./hudFrame.js";
+import { hudType } from "./hudTokens.js";
 /**
  * Subscribe to a {@link WaveRunner} and re-render whenever it notifies (wave,
  * budget, spawns, alert change). Returns the runner's pooled {@link WaveView}. The
@@ -24,7 +25,7 @@ function resolveTheme(theme) {
     };
 }
 function Stat({ caption, value, muted }) {
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [_jsx("span", { style: { fontSize: 9, letterSpacing: 1, textTransform: "uppercase", color: muted }, children: caption }), _jsx("span", { style: { fontSize: 15, fontWeight: 800, fontVariantNumeric: "tabular-nums" }, children: value })] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [_jsx("span", { style: { fontSize: hudType("xs"), letterSpacing: 1, textTransform: "uppercase", color: muted }, children: caption }), _jsx("span", { style: { fontSize: 15, fontWeight: 800, fontVariantNumeric: "tabular-nums" }, children: value })] }));
 }
 /**
  * A drop-in wave/spawn HUD panel over a {@link WaveRunner}: a big "WAVE N" label,

package/dist/waypointMarkers.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useReducer, useEffect } from "react";
 import { layoutScreenMarker, } from "@jgengine/core/ui/screenMarkers";
 import { formatDistance } from "@jgengine/core/format/distance";
+import { hudType } from "./hudTokens.js";
 /**
  * Subscribe to a {@link WaypointTracker} and re-render on every change, returning
  * its current waypoints. Pass a plain array instead and it is returned as-is
@@ -69,7 +70,7 @@ function chipStyle(theme, color) {
         border: `1px solid ${color}`,
         color: theme.text,
         fontFamily: theme.fontFamily,
-        fontSize: 11,
+        fontSize: hudType("xs"),
         fontWeight: 700,
         whiteSpace: "nowrap",
         textShadow: "0 1px 2px rgba(0,0,0,0.9)",

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@jgengine/react",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "React UI layer for JGengine: GameProvider, hooks, and headless primitives over @jgengine/core.",
   "license": "Apache-2.0",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Noisemaker111/jgengine.git",
@@ -20,18 +22,20 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./styles.css": "./dist/styles.css",
     "./*": {
       "types": "./dist/*.d.ts",
       "default": "./dist/*.js"
     }
   },
   "scripts": {
-    "build": "tsgo -p tsconfig.build.json && bun ../../scripts/fix-extensions.ts dist",
-    "check-types": "bun ../../scripts/check-types-preflight.ts && tsgo --noEmit -p tsconfig.json",
-    "test": "bun test src"
+    "build": "tsgo -p tsconfig.build.json && bun ../../scripts/fix-extensions.ts dist && bun scripts/styles.ts",
+    "check-types": "tsgo --noEmit -p tsconfig.json",
+    "test": "bun test src",
+    "styles": "bun scripts/styles.ts"
   },
   "dependencies": {
-    "@jgengine/core": "^0.21.0"
+    "@jgengine/core": "^0.23.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/skills/jgengine/SKILL.md

@@ -53,6 +53,7 @@ Load only rows the target needs. Do not preload every domain.
 | Need | Skill | Owner |
 | --- | --- | --- |
 | player promise, pillars, verbs, loops, economy, progression, balance | `game-design` | experience and rule intent |
+| substantial existing-game improvement across depth, world and presentation | `game-improvement` | ordered improvement plan and per-game completion |
 | metrics, topology, encounters, navigation, spatial pacing | `level-design` | playable space intent |
 | scene placement, terrain painting, paths, asset authoring | `jgengine-editor` | editor document and authoring tools |
 | runtime world, movement, input, interaction, AI, navigation, audio | `jgengine-world` | spatial simulation and world runtime |