@jgengine/react 0.10.0 → 0.12.0

package/dist/map.js

@@ -1,4 +1,4 @@
-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 { useMemo, useSyncExternalStore } from "react";
 import { DEFAULT_MARKER_KINDS, markerKindStyle, } from "@jgengine/core/world/markers";
 import { bearingToCardinal, clampToMinimapEdge, compassBearing, headingToBearing, projectToMinimap, relativeBearing, unprojectFromMinimap, } from "@jgengine/core/world/minimap";
@@ -68,18 +68,42 @@ function cellStateNodes(layers, project, scale, keyPrefix) {
     }
     return nodes;
 }
+function markerAccess(markers) {
+    if (Array.isArray(markers)) {
+        const snapshot = markers;
+        return { subscribe: NO_SUBSCRIBE, getSnapshot: () => snapshot, getServerSnapshot: () => snapshot };
+    }
+    if ("getSnapshot" in markers) {
+        const source = markers;
+        return {
+            subscribe: (listener) => source.subscribe(listener),
+            getSnapshot: () => source.getSnapshot(),
+            getServerSnapshot: () => (source.getServerSnapshot ?? source.getSnapshot).call(source),
+        };
+    }
+    const markerSet = markers;
+    return {
+        subscribe: (listener) => markerSet.subscribe(listener),
+        getSnapshot: () => markerSet.snapshot(),
+        getServerSnapshot: () => markerSet.snapshot(),
+    };
+}
 export function useMarkers(markers) {
-    return useSyncExternalStore(markers.subscribe, markers.snapshot, markers.snapshot);
+    const access = useMemo(() => markerAccess(markers), [markers]);
+    return useSyncExternalStore(access.subscribe, access.getSnapshot, access.getServerSnapshot);
 }
 export function useFog(fog) {
     return useSyncExternalStore(fog.subscribe, fog.cells, fog.cells);
 }
 /**
  * Framed circular minimap: optional baked terrain background, reveal-on-event
- * fog overlay, categorized marker icons, and a facing arrow. Reads a core
- * `MarkerSet` / `FogField`; supply your own `kindStyles` palette to reskin.
+ * fog overlay, categorized marker icons, and a facing arrow. Reads static
+ * marker views, an external marker source, or a native `MarkerSet`; supply
+ * your own `kindStyles` palette to reskin. Does not require `GameProvider`.
+ *
+ * @capability minimap framed circular minimap with terrain bake, fog, markers, and facing arrow
  */
-export function Minimap({ markers, center, worldRadius, fog, size = 176, facingYaw = 0, rotate = false, kindStyles = DEFAULT_MARKER_KINDS, background, mapBounds, routes, zones, cellStates, onWorldClick, className, title = "Map", children, }) {
+export function Minimap({ markers, center, worldRadius, fog, size = 176, facingYaw = 0, rotate = false, kindStyles = DEFAULT_MARKER_KINDS, background, mapBounds, routes, zones, cellStates, onWorldClick, className, style, title = "Map", children, }) {
     const markerList = useMarkers(markers);
     const fogCells = useSyncExternalStore(fog?.subscribe ?? NO_SUBSCRIBE, fog?.cells ?? NULL_CELLS, fog?.cells ?? NULL_CELLS);
     const bearing = headingToBearing(facingYaw);
@@ -91,7 +115,7 @@ export function Minimap({ markers, center, worldRadius, fog, size = 176, facingY
     };
     const half = size / 2;
     const clipId = `mm-clip-${size}`;
-    const sorted = [...markerList].sort((a, b) => markerKindStyle(a.kind, kindStyles).priority - markerKindStyle(b.kind, kindStyles).priority);
+    const sorted = useMemo(() => [...markerList].sort((a, b) => markerKindStyle(a.kind, kindStyles).priority - markerKindStyle(b.kind, kindStyles).priority), [markerList, kindStyles]);
     const fogImage = useMemo(() => {
         if (fogCells === null)
             return null;
@@ -115,10 +139,12 @@ export function Minimap({ markers, center, worldRadius, fog, size = 176, facingY
             borderRadius: 14,
             padding: 8,
             background: "linear-gradient(160deg, rgba(24,28,36,0.94), rgba(12,15,20,0.94))",
-            border: "1px solid rgba(148,163,184,0.28)",
+            // Ring color reads the shared HudTheme `--jg-ring` token (#1034); fallback = the built-in ring.
+            border: "1px solid var(--jg-ring, rgba(148,163,184,0.28))",
             boxShadow: "0 10px 30px rgba(0,0,0,0.45)",
             color: "#e2e8f0",
             fontFamily: "ui-sans-serif, system-ui, sans-serif",
+            ...style,
         }, children: [_jsxs("div", { style: {
                     display: "flex",
                     justifyContent: "space-between",
@@ -156,16 +182,46 @@ export function Minimap({ markers, center, worldRadius, fog, size = 176, facingY
                                     ...routeNodes(routes, projectXZ, "mm"),
                                 ];
                             })(), _jsx("circle", { cx: half, cy: half, r: half - 1, fill: "none", stroke: "rgba(148,163,184,0.12)" }), sorted.map((marker) => {
-                                const style = markerKindStyle(marker.kind, kindStyles);
+                                const kind = marker.kind ?? "marker";
+                                const style = markerKindStyle(kind, kindStyles);
                                 const projected = projectToMinimap(marker.position, view);
                                 const at = projected.inside ? projected : clampToMinimapEdge(projected, size);
-                                return (_jsxs("g", { "data-marker-kind": marker.kind, children: [_jsx("circle", { cx: at.x, cy: at.y, r: 7, fill: "rgba(2,6,12,0.55)" }), _jsx("text", { x: at.x, y: at.y + 3.5, textAnchor: "middle", fontSize: 10, fill: style.color, style: { fontWeight: 700 }, children: style.glyph })] }, marker.id));
+                                return (_jsxs("g", { "data-marker-kind": kind, children: [_jsx("circle", { cx: at.x, cy: at.y, r: 7, fill: "rgba(2,6,12,0.55)" }), _jsx("text", { x: at.x, y: at.y + 3.5, textAnchor: "middle", fontSize: 10, fill: style.color, style: { fontWeight: 700 }, children: style.glyph })] }, marker.id));
                             }), _jsx("g", { transform: `translate(${half} ${half}) rotate(${(rotate ? 0 : bearing) * (180 / Math.PI)})`, children: _jsx("path", { d: "M0,-9 L6,7 L0,3 L-6,7 Z", fill: "#4ade80", stroke: "#052e16", strokeWidth: 0.75 }) })] }), _jsx("circle", { cx: half, cy: half, r: half - 1, fill: "none", stroke: "rgba(148,163,184,0.4)", strokeWidth: 1.5 }), _jsx("text", { x: half, y: 13, textAnchor: "middle", fontSize: 11, fill: "rgba(226,232,240,0.9)", style: { fontWeight: 700 }, children: "N" })] }), children] }));
 }
+/**
+ * Headless minimap chrome — nests inside a game's own `<svg>`: an optional
+ * ring frame, and edge-clamped marker dots that draw as directional arrows
+ * when a marker carries a `heading` (the compass-arrow / player-blip layer
+ * ~8 games were re-drawing by hand over `projectToMinimap`/`clampToMinimapEdge`).
+ * Renders a bare `<g>` — no background, panel, or title; compose your own
+ * content layer (routes, zones, terrain) as sibling SVG nodes for full control
+ * of z-order, or call `MinimapChrome` twice (once for `frame`, again for
+ * `markers`) to sandwich custom content between the ring and the blips.
+ *
+ * @capability minimap-chrome ring frame plus edge-clamped, heading-aware marker dots to nest inside a game's own `<svg>`
+ */
+export function MinimapChrome({ view, frame = false, frameColor = "rgba(148,163,184,0.4)", frameStrokeWidth = 1.5, cardinalLabel = "N", markers = [], markerColor = "#e2e8f0", markerRadius = 5, className, }) {
+    const half = view.size / 2;
+    const rotate = view.rotate ?? 0;
+    return (_jsxs("g", { className: className, "data-minimap-chrome": true, children: [frame ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: half, cy: half, r: half - 1, fill: "none", stroke: frameColor, strokeWidth: frameStrokeWidth }), cardinalLabel !== false ? (_jsx("text", { x: half, y: 13, textAnchor: "middle", fontSize: 11, fill: frameColor, style: { fontWeight: 700 }, children: cardinalLabel })) : null] })) : null, markers.map((marker) => {
+                const projected = projectToMinimap(marker.position, view);
+                const clamp = marker.clampToEdge ?? true;
+                if (!projected.inside && !clamp)
+                    return null;
+                const at = projected.inside ? projected : clampToMinimapEdge(projected, view.size);
+                const color = marker.color ?? markerColor;
+                const radius = marker.radius ?? markerRadius;
+                if (marker.heading !== undefined) {
+                    const deg = (marker.heading - rotate) * (180 / Math.PI);
+                    return (_jsx("g", { "data-minimap-marker": marker.id, transform: `translate(${at.x} ${at.y}) rotate(${deg})`, children: _jsx("path", { d: `M0,${-radius} L${radius * 0.7},${radius * 0.8} L0,${radius * 0.35} L${-radius * 0.7},${radius * 0.8} Z`, fill: color, stroke: marker.strokeColor ?? "rgba(0,0,0,0.6)", strokeWidth: marker.strokeWidth ?? 0.75 }) }, marker.id));
+                }
+                return (_jsxs("g", { "data-minimap-marker": marker.id, children: [_jsx("circle", { cx: at.x, cy: at.y, r: radius, fill: color, stroke: marker.strokeColor, strokeWidth: marker.strokeWidth }), marker.glyph !== undefined ? (_jsx("text", { x: at.x, y: at.y + 3.5, textAnchor: "middle", fontSize: 10, fill: marker.glyphColor ?? "#0f172a", style: { fontWeight: 700 }, children: marker.glyph })) : null] }, marker.id));
+            })] }));
+}
 const NO_SUBSCRIBE = () => () => undefined;
 const NULL_CELLS = () => null;
 const EMPTY_MARKERS_VALUE = [];
-const EMPTY_MARKERS = () => EMPTY_MARKERS_VALUE;
 const COMPASS_TICKS = [
     { cardinal: "N", bearing: 0 },
     { cardinal: "NE", bearing: Math.PI / 4 },
@@ -178,10 +234,11 @@ const COMPASS_TICKS = [
 ];
 /**
  * Horizontal compass strip centered on the player's facing direction, with the
- * eight cardinals and optional marker pips (bearing to each `MarkerSet` entry).
+ * eight cardinals and optional marker pips from static views, an external
+ * source, or a native `MarkerSet`.
  */
 export function Compass({ facingYaw, center, markers, width = 340, fov = (Math.PI * 2) / 3, kindStyles = DEFAULT_MARKER_KINDS, className, }) {
-    const markerList = useSyncExternalStore(markers?.subscribe ?? NO_SUBSCRIBE, markers?.snapshot ?? EMPTY_MARKERS, markers?.snapshot ?? EMPTY_MARKERS);
+    const markerList = useMarkers(markers ?? EMPTY_MARKERS_VALUE);
     const facingBearing = headingToBearing(facingYaw);
     const half = fov / 2;
     const toX = (bearing) => {
@@ -227,8 +284,9 @@ export function Compass({ facingYaw, center, markers, width = 340, fov = (Math.P
                     const x = toX(bearing);
                     if (x === null)
                         return null;
-                    const style = markerKindStyle(marker.kind, kindStyles);
-                    return (_jsx("span", { "data-compass-marker": marker.kind, style: {
+                    const kind = marker.kind ?? "marker";
+                    const style = markerKindStyle(kind, kindStyles);
+                    return (_jsx("span", { "data-compass-marker": kind, style: {
                             position: "absolute",
                             left: x,
                             bottom: 2,
@@ -240,6 +298,69 @@ export function Compass({ facingYaw, center, markers, width = 340, fov = (Math.P
                 })
                 : null] }));
 }
+/**
+ * Composed circular-minimap chrome: optional zone-label + clock header above
+ * the `Minimap`, optional `Compass` strip below. Purely a wiring layer over
+ * the existing primitives — the game supplies the zone name and clock text,
+ * this only places them; omit either slot and the header disappears.
+ *
+ * @capability minimap-panel circular minimap with zone label, clock, and compass composed together
+ */
+export function MinimapPanel({ zoneLabel, clock, showCompass = true, compassProps, headerClassName, zoneLabelClassName, clockClassName, compassClassName, children, ...minimapProps }) {
+    const hasHeader = zoneLabel !== undefined || clock !== undefined;
+    return (_jsxs("div", { "data-minimap-chrome": true, children: [hasHeader ? (_jsxs("div", { className: headerClassName, "data-minimap-chrome-header": true, style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "baseline",
+                    gap: 8,
+                    marginBottom: 4,
+                    width: minimapProps.size ?? 176,
+                    color: "#e2e8f0",
+                    fontFamily: "ui-sans-serif, system-ui, sans-serif",
+                }, children: [zoneLabel !== undefined ? (_jsx("span", { className: zoneLabelClassName, "data-minimap-chrome-zone": true, style: { fontSize: 12, fontWeight: 700 }, children: zoneLabel })) : (_jsx("span", {})), clock !== undefined ? (_jsx("span", { className: clockClassName, "data-minimap-chrome-clock": true, style: { fontSize: 11, color: "rgba(226,232,240,0.75)" }, children: clock })) : null] })) : null, _jsx(Minimap, { ...minimapProps, children: children }), showCompass ? (_jsx("div", { className: compassClassName, "data-minimap-chrome-compass": true, style: { marginTop: 6 }, children: _jsx(Compass, { facingYaw: minimapProps.facingYaw ?? 0, center: minimapProps.center, markers: minimapProps.markers, width: minimapProps.size ?? 176, ...compassProps }) })) : null] }));
+}
+const TRACK_PIP_DIAMETER = {
+    dot: 6,
+    exit: 8,
+    player: 12,
+};
+/**
+ * Horizontal linear track minimap — a rounded progress rail with colored zone
+ * `spans` and gate/exit/player `pips` positioned by 0..1 fraction. The
+ * structural counterpart to the radial {@link Minimap} for corridor/route
+ * games: fractions are supplied by the caller (via core `trackFraction`), so it
+ * reads no store and stays presentation-only, sharing chrome with the radial
+ * minimap.
+ *
+ * @capability minimap-track-hud horizontal linear track minimap (corridor/route progress) — colored zone spans and gate/player pips positioned by 0..1 fraction, sharing chrome with the radial Minimap
+ */
+export function MinimapTrack({ spans = [], pips = [], width = "100%", height = 12, railColor = "rgba(255,255,255,0.10)", className, style, children, }) {
+    return (_jsxs("div", { className: className, "data-minimap-track": true, style: { position: "relative", width, height, borderRadius: 9999, background: railColor, ...style }, children: [spans.map((span) => (_jsx("div", { "data-track-span": span.id, title: span.label, style: {
+                    position: "absolute",
+                    top: 0,
+                    bottom: 0,
+                    left: `${span.start * 100}%`,
+                    width: `${(span.end - span.start) * 100}%`,
+                    background: span.color ?? "rgba(255,255,255,0.25)",
+                    opacity: 0.4,
+                    borderRadius: 9999,
+                } }, span.id))), pips.map((pip) => {
+                const shape = pip.shape ?? "dot";
+                const color = pip.color ?? "#f4f6fb";
+                const common = {
+                    position: "absolute",
+                    top: "50%",
+                    left: `${pip.at * 100}%`,
+                    transform: "translate(-50%, -50%)",
+                    background: color,
+                };
+                if (shape === "gate") {
+                    return (_jsx("div", { "data-track-pip": pip.id, "data-pip-shape": "gate", title: pip.title ?? pip.label, style: { ...common, width: 3, height: height + 6, borderRadius: 2 } }, pip.id));
+                }
+                const diameter = TRACK_PIP_DIAMETER[shape];
+                return (_jsx("div", { "data-track-pip": pip.id, "data-pip-shape": shape, title: pip.title ?? pip.label, style: { ...common, width: diameter, height: diameter, borderRadius: 9999, border: "1px solid rgba(0,0,0,0.6)" } }, pip.id));
+            }), children] }));
+}
 function WorldMapFogImage({ fogCells, project, worldW, worldD, width, mapH, }) {
     const fogImage = useMemo(() => {
         if (fogCells === null)
@@ -308,8 +429,9 @@ export function WorldMap({ markers, bounds, player, facingYaw = 0, fog, backgrou
                         ];
                     })(), markerList.map((marker) => {
                         const at = project(marker.position[0], marker.position[2]);
-                        const style = markerKindStyle(marker.kind, kindStyles);
-                        return (_jsxs("g", { "data-world-marker": marker.kind, children: [_jsx("circle", { cx: at.x, cy: at.y, r: 9, fill: "rgba(2,6,12,0.6)", stroke: style.color, strokeWidth: 1.2 }), _jsx("text", { x: at.x, y: at.y + 4, textAnchor: "middle", fontSize: 12, fill: style.color, style: { fontWeight: 700 }, children: style.glyph }), marker.label !== undefined ? (_jsx("text", { x: at.x + 12, y: at.y + 4, fontSize: 11, fill: "rgba(226,232,240,0.85)", children: marker.label })) : null] }, marker.id));
+                        const kind = marker.kind ?? "marker";
+                        const style = markerKindStyle(kind, kindStyles);
+                        return (_jsxs("g", { "data-world-marker": kind, children: [_jsx("circle", { cx: at.x, cy: at.y, r: 9, fill: "rgba(2,6,12,0.6)", stroke: style.color, strokeWidth: 1.2 }), _jsx("text", { x: at.x, y: at.y + 4, textAnchor: "middle", fontSize: 12, fill: style.color, style: { fontWeight: 700 }, children: style.glyph }), marker.label !== undefined ? (_jsx("text", { x: at.x + 12, y: at.y + 4, fontSize: 11, fill: "rgba(226,232,240,0.85)", children: marker.label })) : null] }, marker.id));
                     }), player !== undefined
                         ? (() => {
                             const at = project(player[0], player[1]);

package/dist/save.d.ts

@@ -0,0 +1,25 @@
+import type { SaveStatus, SaveStore } from "@jgengine/core/game/saveStore";
+/** The reactive slice of a {@link SaveStore} returned by {@link useSaveStore} — the live value plus bound save actions, all re-rendering on change. */
+export interface SaveStoreView<T> {
+    value: T;
+    status: SaveStatus;
+    slot: string;
+    /** True while the initial `load()` is in flight — gate a loading screen on it. */
+    loading: boolean;
+    /** True while a write is in flight — show a "Saving…" indicator. */
+    saving: boolean;
+    set: (value: T) => void;
+    patch: (mutate: (previous: T) => T) => void;
+    save: () => Promise<void>;
+    clear: () => Promise<void>;
+}
+/**
+ * Bind a {@link SaveStore} to React: returns the live `value` and `status` and
+ * re-renders whenever either changes. By default it calls `load()` once on
+ * mount (pass `{ load: false }` to hydrate yourself). The same hook works for
+ * offline (localStorage) and cloud (Convex/DB) saves — only the store's backend
+ * differs.
+ */
+export declare function useSaveStore<T>(store: SaveStore<T>, options?: {
+    load?: boolean;
+}): SaveStoreView<T>;

package/dist/save.js

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+/**
+ * Bind a {@link SaveStore} to React: returns the live `value` and `status` and
+ * re-renders whenever either changes. By default it calls `load()` once on
+ * mount (pass `{ load: false }` to hydrate yourself). The same hook works for
+ * offline (localStorage) and cloud (Convex/DB) saves — only the store's backend
+ * differs.
+ */
+export function useSaveStore(store, options) {
+    useSyncExternalStore(store.subscribe, store.revision, store.revision);
+    const shouldLoad = options?.load !== false;
+    const loadedFor = useRef(null);
+    useEffect(() => {
+        if (!shouldLoad)
+            return;
+        if (loadedFor.current === store)
+            return;
+        loadedFor.current = store;
+        void store.load();
+    }, [store, shouldLoad]);
+    const set = useCallback((value) => store.set(value), [store]);
+    const patch = useCallback((mutate) => void store.patch(mutate), [store]);
+    const save = useCallback(() => store.save(), [store]);
+    const clear = useCallback(() => store.clear(), [store]);
+    const status = store.status();
+    return {
+        value: store.value(),
+        status,
+        slot: store.slot(),
+        loading: status === "loading",
+        saving: status === "saving",
+        set,
+        patch,
+        save,
+        clear,
+    };
+}

package/dist/selectSnapshot.d.ts

@@ -3,5 +3,7 @@ export type SelectCache<TSnapshot, TSelected> = {
     snapshot: TSnapshot;
     value: TSelected;
 };
+/** @internal */
 export declare function createSelectCache<TSnapshot, TSelected>(): SelectCache<TSnapshot, TSelected>;
+/** @internal */
 export declare function readSelectSnapshot<TSnapshot, TSelected>(cache: SelectCache<TSnapshot, TSelected>, snapshot: TSnapshot, select: (snapshot: TSnapshot) => TSelected, isEqual?: (previous: TSelected, next: TSelected) => boolean): TSelected;

package/dist/selectSnapshot.js

@@ -1,6 +1,8 @@
+/** @internal */
 export function createSelectCache() {
     return { ready: false, snapshot: undefined, value: undefined };
 }
+/** @internal */
 export function readSelectSnapshot(cache, snapshot, select, isEqual = Object.is) {
     if (cache.ready && Object.is(cache.snapshot, snapshot))
         return cache.value;

package/dist/selectionHud.d.ts

@@ -0,0 +1,139 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { type EntitySummaryDef, type EntityVital, type SelectionGroup, type SelectionView, type SelectionWindow } from "@jgengine/core/ui/selectionModel";
+/** A minimal keyboard-event shape — a real `KeyboardEvent`/React synthetic satisfies it. */
+export interface SelectionKeyEvent {
+    key: string;
+    preventDefault(): void;
+}
+/** Options for {@link useSelectionView}. */
+export interface UseSelectionViewOptions {
+    /** Member count above which `grouped` flips true (default 12). */
+    groupThreshold?: number;
+    /** Map a member `kind` to a display label for its group. */
+    labelOf?: (kind: string) => string;
+    /** Fired when the focused (primary) member changes. */
+    onFocusChange?: (id: string) => void;
+}
+/** The live selection model returned by {@link useSelectionView}. */
+export interface SelectionModel {
+    view: SelectionView;
+    focusId: string | null;
+    setFocus: (id: string) => void;
+    onKeyDown: (event: SelectionKeyEvent) => void;
+    /** A virtualization window over the members, for a large selection strip. */
+    window: (scroll: number, size: number) => SelectionWindow;
+}
+/**
+ * The DATA/HOOK layer: summarize a selected-entity list into a live model with a focused primary,
+ * ordered members, same-kind groups, keyboard focus stepping, and a virtualization window.
+ * Rendering-agnostic — feed it to {@link SelectionPanel} or read the `view` directly.
+ *
+ * @capability selection-model headless multi-entity selection model with primary focus, grouping, and virtualization
+ */
+export declare function useSelectionView(members: readonly EntitySummaryDef[], options?: UseSelectionViewOptions): SelectionModel;
+/**
+ * A compact current/max vital meter for an entity summary; tone maps to a colour ramp. Reuse it as
+ * the vital row inside {@link EntitySummary} or any custom entity panel.
+ *
+ * @deprecated The `tone`/`vital`-API umbrella is retired (#1033). Use the atomic, purpose-named,
+ * token-themed bars from `@jgengine/react/bars` (`HealthBar`, `ShieldBar`, `ManaBar`, …) and compose
+ * your own panel — each does one readout and restyles globally via the shared `--jg-*` tokens.
+ * @capability vital-bar compact current/max vital meter for an entity summary
+ */
+export declare function VitalBar({ vital, width, showLabel, className, style, }: {
+    vital: EntityVital;
+    width?: number;
+    showLabel?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+/**
+ * A selectable entity portrait tile — icon/initials, an optional thin health strip, and complete
+ * selected/hover/focus states as a real `<button>` (`aria-pressed`). The unit-of-a-selection chrome;
+ * swap the face via `renderIcon`. Accessible and keyboard-focusable.
+ *
+ * @capability entity-portrait selectable entity portrait tile with vitals and selected/focus states
+ */
+export declare function EntityPortrait({ entity, selected, size, vitalId, tabIndex, onSelect, renderIcon, className, style, }: {
+    entity: EntitySummaryDef;
+    selected?: boolean;
+    size?: number;
+    vitalId?: string;
+    tabIndex?: number;
+    onSelect?: (id: string) => void;
+    renderIcon?: (entity: EntitySummaryDef) => ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+/**
+ * The primary-entity detail chrome — name, tags, and full vital bars for the focused member. The
+ * "who is selected" summary a single-selection or the head of a multi-selection shows. Swap the vital
+ * rows via `renderVital`.
+ *
+ * @deprecated Bundling a whole vitals array in one component is the combo anti-pattern #1033 retires.
+ * Compose your own summary — name/tags plus the atomic `@jgengine/react/bars` (`HealthBar`, …) you
+ * need — so no engine component packages multiple readouts by default. Kept during migration.
+ * @capability entity-summary primary selected-entity detail panel (name, tags, vitals)
+ */
+export declare function EntitySummary({ entity, renderVital, className, style, }: {
+    entity: EntitySummaryDef;
+    renderVital?: (vital: EntityVital) => ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+/**
+ * A same-kind selection chip — icon plus count — for the grouped large-selection view. The default
+ * chrome {@link SelectionCollectionChrome} renders per group; swap it via `renderGroup`.
+ *
+ * @capability selection-group-chip same-kind selection chip (icon + count) for a grouped selection
+ */
+export declare function SelectionGroupChip({ group, onSelect, renderIcon, className, style, }: {
+    group: SelectionGroup;
+    onSelect?: (group: SelectionGroup) => void;
+    renderIcon?: (group: SelectionGroup) => ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+/**
+ * The composable RENDERER for the member collection: a portrait strip for a small selection, or the
+ * same-kind group chips once the model is `grouped`. Roving tabindex + arrow-key focus. Swap
+ * `renderMember`/`renderGroup` for custom chrome, or read the model and lay it out yourself. No panel
+ * skin — a behavior/accessibility layer only.
+ *
+ * @capability selection-collection accessible portrait-strip / group-chip renderer over a selection model
+ */
+export declare function SelectionCollectionChrome({ model, itemSize, gap, windowSize, scroll, ariaLabel, renderMember, renderGroup, onGroupSelect, className, style, }: {
+    model: SelectionModel;
+    itemSize?: number;
+    gap?: number;
+    /** Cap the mounted portraits; the model virtualizes past this many members. */
+    windowSize?: number;
+    scroll?: number;
+    ariaLabel?: string;
+    renderMember?: (entity: EntitySummaryDef, selected: boolean) => ReactNode;
+    renderGroup?: (group: SelectionGroup) => ReactNode;
+    onGroupSelect?: (group: SelectionGroup) => void;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+/**
+ * Convenience composition: skinned glass panel with {@link EntitySummary} for the primary member
+ * beside {@link SelectionCollectionChrome} for the rest — demos/scaffold only, not a finished game
+ * face. Pass `members` (or a prebuilt `model`); swap sub-renderers or compose the headless pieces
+ * under game-owned chrome for product UI.
+ *
+ * @capability selection-panel optional selection-panel composition: summary + portrait strip / group chips
+ */
+export declare function SelectionPanel({ members, model: providedModel, groupThreshold, labelOf, windowSize, renderPrimary, renderMember, renderVital, onFocusChange, className, style, }: {
+    members?: readonly EntitySummaryDef[];
+    model?: SelectionModel;
+    groupThreshold?: number;
+    labelOf?: (kind: string) => string;
+    windowSize?: number;
+    renderPrimary?: (entity: EntitySummaryDef) => ReactNode;
+    renderMember?: (entity: EntitySummaryDef, selected: boolean) => ReactNode;
+    renderVital?: (vital: EntityVital) => ReactNode;
+    onFocusChange?: (id: string) => void;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element | null;