@jgengine/react 0.38.0 → 0.38.1

package/CHANGELOG.md

@@ -26,6 +26,25 @@ At publish, rename this heading to the new version and mirror the entries into
 `packages/core/src/meta/changelog.ts` (the typed `CHANGELOG` export).
 -->
 
+## 0.38.1
+
+### Migrate
+
+- **Bump lockstep SDK packages to `^0.38.1`:** `@jgengine/{core,rapier,react,ws,node,sql,convex,shell,editor,assets,navbake}`. CLI `jgengine` is `0.35.1`; `@jgengine/github` is `0.25.1`.
+- Nothing to migrate. `variantLevels()` was renamed to `ModelVariantConfig.shadows` before any release shipped it, so no published version ever exported it and no consumer can be holding one. A level that wants to stop paying the near level's shadow cost writes `{ url, shadows: "none" }`; leaving `shadows` out keeps the model's own answer.
+
+### Added
+
+- `ModelVariantConfig.shadows` (`@jgengine/core/world/modelLod`): a model variant level declares its own shadow participation as a plain field, `"inherit" | "cast" | "receive" | "both" | "none"`. `"inherit"`, the default, keeps the model's own `shadows`, so every existing model draws as before; a far level set to `"none"` leaves the shadow pass while still drawing its mesh.
+- `ModelShadowMode` (`@jgengine/core/world/modelLod`) names the four-value shadow vocabulary, and `ModelConfig.shadows` uses it.
+- `variantLevelModel` (`@jgengine/shell/render/singleVariantLod`) is the one place that resolves what a level draws and how it shadows; the single prop, batched prop and scatter paths all ask it, so a level's asset and its shadow answer cannot disagree.
+
+### Fixed
+
+- `SaveSlotsPane` cards are one box each: equal tracks, `grid-auto-rows: 1fr`, a card edge that reads over a bright scene, and a name that ellipsises instead of widening the card. A save with a long name and one with none produce the same card box.
+- `GameMenu` puts the primary verbs on their own scrim, so their labels stay legible over whatever the live scene is showing instead of relying on a text shadow.
+- The theme emits three menu tokens the slot card and the verb surface read: `--jg-menu-card-height` (`clamp(244px, 27vh, 300px)`), `--jg-menu-card-thumb` (`clamp(88px, 14vh, 160px)`) and `--jg-menu-surface-radius` (`8px`). A game overrides them in its own `HudTheme` instead of patching the menu components.
+
 ## 0.38.0
 
 ### Migrate

package/dist/gameMenu.js

@@ -266,7 +266,17 @@ export function GameMenu({ items, initialId, onSelect, onBack, onHighlight, deta
                         nav.containerProps.onKeyDown(event);
                         if (event.key === "ArrowDown" || event.key === "ArrowUp")
                             event.stopPropagation();
-                    }, children: [_jsx("div", { "data-jg-game-menu-rail": "", "aria-hidden": "true", style: {
+                    }, children: [_jsx("div", { "data-jg-game-menu-nav-surface": "", "aria-hidden": "true", style: {
+                                position: "absolute",
+                                inset: "-16px -22px",
+                                borderRadius: "var(--jg-menu-surface-radius, 8px)",
+                                background: "linear-gradient(96deg, rgba(4,7,11,0.6) 0%, rgba(4,7,11,0.34) 56%, rgba(4,7,11,0) 100%)",
+                                maskImage: "linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%)",
+                                WebkitMaskImage: "linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%)",
+                                backdropFilter: "blur(2px)",
+                                WebkitBackdropFilter: "blur(2px)",
+                                pointerEvents: "none",
+                            } }), _jsx("div", { "data-jg-game-menu-rail": "", "aria-hidden": "true", style: {
                                 position: "absolute",
                                 left: 0,
                                 right: 8,

package/dist/gameMenuSaves.js

@@ -14,15 +14,18 @@ export const SAVE_SLOT_CHARACTER_KEY = "character";
 const cardSurface = {
     position: "relative",
     width: "100%",
+    minWidth: 0,
+    height: "var(--jg-menu-card-height, clamp(244px, 27vh, 300px))",
     boxSizing: "border-box",
+    overflow: "hidden",
     display: "flex",
     flexDirection: "column",
     gap: 8,
-    minWidth: 0,
     padding: 10,
     borderRadius: "var(--jg-menu-card-radius, 12px)",
-    background: "linear-gradient(180deg, rgba(16,22,30,0.78), rgba(8,11,16,0.86))",
-    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.09), 0 14px 34px -18px rgba(0,0,0,0.9)",
+    background: "linear-gradient(180deg, rgba(16,22,30,0.9), rgba(8,11,16,0.94))",
+    border: "1px solid rgba(255,255,255,0.14)",
+    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.05), 0 14px 34px -18px rgba(0,0,0,0.9)",
     backdropFilter: "blur(6px)",
     color: "var(--jg-text, #f2f6fb)",
     fontFamily: hudFont.body,
@@ -67,9 +70,9 @@ export function SaveSlotCard({ slot, now = Date.now, recent = false, onSelect, o
                 cursor: onSelect === undefined ? "default" : "pointer",
                 alignItems: "flex-start",
                 justifyContent: "flex-end",
-                border: "none",
+                border: "1px solid rgba(255,255,255,0.1)",
                 boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), inset 0 0 40px -18px rgba(125,211,252,0.4), 0 10px 26px -20px rgba(0,0,0,0.9)",
-                background: "linear-gradient(180deg, rgba(12,17,24,0.6), rgba(6,9,13,0.72))",
+                background: "linear-gradient(180deg, rgba(12,17,24,0.82), rgba(6,9,13,0.9))",
                 ...style,
             }, children: [_jsx("div", { "data-save-slot-thumb": "", "data-empty": "", style: {
                         width: "100%",
@@ -94,7 +97,8 @@ export function SaveSlotCard({ slot, now = Date.now, recent = false, onSelect, o
         }, children: [_jsxs("div", { "data-save-slot-thumb": "", style: {
                     position: "relative",
                     width: "100%",
-                    aspectRatio: "16 / 9",
+                    flexShrink: 0,
+                    height: "var(--jg-menu-card-thumb, clamp(88px, 14vh, 160px))",
                     borderRadius: 8,
                     overflow: "hidden",
                     background: "radial-gradient(120% 120% at 30% 20%, rgba(125,211,252,0.22), rgba(8,12,18,0.9))",
@@ -124,6 +128,10 @@ export function SaveSlotCard({ slot, now = Date.now, recent = false, onSelect, o
                             fontWeight: 800,
                             letterSpacing: "0.01em",
                             textShadow: "0 2px 12px rgba(0,0,0,0.8)",
+                            maxWidth: "calc(100% - 16px)",
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
                         }, children: slot.name ?? slot.id }), recent ? (_jsx("span", { "data-save-slot-recent": "", style: {
                             position: "absolute",
                             top: 6,
@@ -231,6 +239,10 @@ export function SaveSlotsPane({ model, onContinue, onLoad, onNew, onDelete, head
                         }, children: ["Continue ", recent.name ?? recent.id] }))] }), _jsx("div", { ...nav.containerProps, "data-save-slots-grid": "", style: {
                     display: "grid",
                     gridTemplateColumns: columns === "auto" ? "repeat(auto-fill, minmax(230px, 1fr))" : `repeat(${columns}, minmax(0, 1fr))`,
+                    // Every card gets the same box: equal tracks, equal rows, and content that cannot widen it.
+                    gridAutoRows: "auto",
+                    alignItems: "stretch",
+                    flex: 1,
                     gap: hudSpace("md"),
                     minHeight: 0,
                     overflowY: "auto",
@@ -240,25 +252,25 @@ export function SaveSlotsPane({ model, onContinue, onLoad, onNew, onDelete, head
                     paddingBottom: 4,
                 }, children: slots.map((slot) => {
                     const active = nav.activeId === slot.id;
-                    return (_jsx("div", { style: { minWidth: 0, outline: active ? "none" : undefined }, children: _jsx(SaveSlotCard, { slot: slot, now: now, recent: recent !== null && recent.id === slot.id, ...(onLoad === undefined && onNew === undefined
-                                ? {}
-                                : {
-                                    onSelect: (chosen) => {
-                                        if (chosen.empty)
-                                            onNew?.(chosen);
-                                        else
-                                            onLoad?.(chosen);
-                                    },
-                                }), ...(onDelete === undefined ? {} : { onDelete }), style: {
-                                height: "100%",
-                                ...(active
-                                    ? {
-                                        boxShadow: "inset 0 0 0 1px var(--jg-accent, #7dd3fc), 0 0 0 1px rgba(125,211,252,0.5), 0 18px 40px -18px rgba(0,0,0,0.95)",
-                                        transform: "translateY(-2px)",
-                                        transition: `transform ${hudDuration("fast")} ${hudEase("spring")}`,
-                                    }
-                                    : {}),
-                            } }) }, slot.id));
+                    return (_jsx(SaveSlotCard, { slot: slot, now: now, recent: recent !== null && recent.id === slot.id, ...(onLoad === undefined && onNew === undefined
+                            ? {}
+                            : {
+                                onSelect: (chosen) => {
+                                    if (chosen.empty)
+                                        onNew?.(chosen);
+                                    else
+                                        onLoad?.(chosen);
+                                },
+                            }), ...(onDelete === undefined ? {} : { onDelete }), style: {
+                            minWidth: 0,
+                            ...(active
+                                ? {
+                                    boxShadow: "inset 0 0 0 1px var(--jg-accent, #7dd3fc), 0 0 0 1px rgba(125,211,252,0.5), 0 18px 40px -18px rgba(0,0,0,0.95)",
+                                    transform: "translateY(-2px)",
+                                    transition: `transform ${hudDuration("fast")} ${hudEase("spring")}`,
+                                }
+                                : {}),
+                        } }, slot.id));
                 }) })] }));
 }
 /**

package/dist/hudTheme.js

@@ -105,10 +105,14 @@ export function hudThemeVars(theme) {
         "--jg-frame-bg": frame.bg,
         "--jg-frame-border": frame.border,
         "--jg-frame-radius": frame.radius,
-        // The game menu's two design tokens: a logo sized off the display step and card corners that
-        // follow the frame radius, so a menu inherits the theme it is rendered under.
+        // The game menu's design tokens: a logo sized off the display step, card corners that follow the
+        // frame radius, and the card's fixed height and thumbnail band, so a slot card is the same box
+        // whatever it holds and a game can retune the menu from its theme.
         "--jg-menu-logo-size": "clamp(30px, 4.6vw, 66px)",
         "--jg-menu-card-radius": frame.radius,
+        "--jg-menu-card-height": "clamp(244px, 27vh, 300px)",
+        "--jg-menu-card-thumb": "clamp(88px, 14vh, 160px)",
+        "--jg-menu-surface-radius": "8px",
         "--jg-frame-glow": frame.glow,
         "--jg-slot-bg": slot.bg,
         "--jg-slot-border": slot.border,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jgengine/react",
-  "version": "0.38.0",
+  "version": "0.38.1",
   "description": "React UI layer for JGengine: GameProvider, hooks, and headless primitives over @jgengine/core.",
   "license": "Apache-2.0",
   "type": "module",
@@ -35,7 +35,7 @@
     "styles": "bun scripts/styles.ts"
   },
   "dependencies": {
-    "@jgengine/core": "^0.38.0"
+    "@jgengine/core": "^0.38.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/skills/jgengine/api.md

@@ -6,7 +6,7 @@
 
 - `CHANGELOG` (const): const CHANGELOG: Record<string, ChangelogEntry> — Per-version engine changelog keyed by semver string (e.g. `"0.10.0"`).
 - `ChangelogEntry` (interface): interface ChangelogEntry — One release's migrate steps plus added/changed/removed notes (typed mirror of CHANGELOG.md).
-- `VERSION` (const): const VERSION: "0.38.0" — Installed `@jgengine/core` semver — compare against {@link CHANGELOG} keys when migrating.
+- `VERSION` (const): const VERSION: "0.38.1" — Installed `@jgengine/core` semver — compare against {@link CHANGELOG} keys when migrating.
 
 ## @jgengine/core/authoring
 
@@ -285,7 +285,7 @@
 
 - `CHANGELOG` (const): const CHANGELOG: Record<string, ChangelogEntry> — Per-version engine changelog keyed by semver string (e.g. `"0.10.0"`).
 - `ChangelogEntry` (interface): interface ChangelogEntry — One release's migrate steps plus added/changed/removed notes (typed mirror of CHANGELOG.md).
-- `VERSION` (const): const VERSION: "0.38.0" — Installed `@jgengine/core` semver — compare against {@link CHANGELOG} keys when migrating.
+- `VERSION` (const): const VERSION: "0.38.1" — Installed `@jgengine/core` semver — compare against {@link CHANGELOG} keys when migrating.
 
 ## @jgengine/core/runtime/adapter