@jgengine/react 0.6.0 → 0.8.0

package/dist/map.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { DEFAULT_MARKER_KINDS, markerKindStyle, } from "@jgengine/core/world/markers";
+import { bearingToCardinal, clampToMinimapEdge, compassBearing, projectToMinimap, relativeBearing, } from "@jgengine/core/world/minimap";
+export function useMarkers(markers) {
+    return useSyncExternalStore(markers.subscribe, markers.snapshot, markers.snapshot);
+}
+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.
+ */
+export function Minimap({ markers, center, worldRadius, fog, size = 176, heading = 0, rotate = false, kindStyles = DEFAULT_MARKER_KINDS, background, mapBounds, className, title = "Map", children, }) {
+    const markerList = useMarkers(markers);
+    const fogCells = useSyncExternalStore(fog?.subscribe ?? NO_SUBSCRIBE, fog?.cells ?? NULL_CELLS, fog?.cells ?? NULL_CELLS);
+    const view = {
+        center,
+        worldRadius,
+        size,
+        ...(rotate ? { rotate: -heading } : {}),
+    };
+    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 fogRects = [];
+    if (fogCells !== null) {
+        const cellPx = (fogCells.cellSize / worldRadius) * half;
+        for (let row = 0; row < fogCells.rows; row += 1) {
+            for (let col = 0; col < fogCells.cols; col += 1) {
+                if (fogCells.revealed[row * fogCells.cols + col])
+                    continue;
+                const worldX = fogCells.minX + (col + 0.5) * fogCells.cellSize;
+                const worldZ = fogCells.minZ + (row + 0.5) * fogCells.cellSize;
+                const projected = projectToMinimap([worldX, worldZ], view);
+                if (projected.distance > worldRadius + fogCells.cellSize)
+                    continue;
+                fogRects.push(_jsx("rect", { x: projected.x - cellPx / 2 - 0.5, y: projected.y - cellPx / 2 - 0.5, width: cellPx + 1, height: cellPx + 1, fill: "#0b0f14", opacity: 0.82 }, `fog-${col}-${row}`));
+            }
+        }
+    }
+    return (_jsxs("div", { className: className, "data-minimap": true, style: {
+            width: size,
+            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)",
+            boxShadow: "0 10px 30px rgba(0,0,0,0.45)",
+            color: "#e2e8f0",
+            fontFamily: "ui-sans-serif, system-ui, sans-serif",
+        }, children: [_jsxs("div", { style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBottom: 6,
+                    fontSize: 10,
+                    letterSpacing: 1.4,
+                    textTransform: "uppercase",
+                    color: "rgba(203,213,225,0.75)",
+                }, children: [_jsx("span", { children: title }), _jsx("span", { style: { color: "rgba(148,163,184,0.6)" }, children: bearingToCardinal(heading) })] }), _jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "data-minimap-canvas": true, children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("circle", { cx: half, cy: half, r: half - 1 }) }) }), _jsxs("g", { clipPath: `url(#${clipId})`, children: [_jsx("circle", { cx: half, cy: half, r: half - 1, fill: "#1c2733" }), background !== undefined
+                                ? (() => {
+                                    if (mapBounds === undefined) {
+                                        return (_jsx("image", { href: background, x: 0, y: 0, width: size, height: size, preserveAspectRatio: "xMidYMid slice", opacity: 0.9 }));
+                                    }
+                                    const pxPerWorld = half / worldRadius;
+                                    return (_jsx("image", { href: background, x: half + (mapBounds.minX - center[0]) * pxPerWorld, y: half + (mapBounds.minZ - center[1]) * pxPerWorld, width: (mapBounds.maxX - mapBounds.minX) * pxPerWorld, height: (mapBounds.maxZ - mapBounds.minZ) * pxPerWorld, preserveAspectRatio: "none", opacity: 0.92 }));
+                                })()
+                                : null, fogRects, _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 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));
+                            }), _jsx("g", { transform: `translate(${half} ${half}) rotate(${(rotate ? 0 : heading) * (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] }));
+}
+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 },
+    { cardinal: "E", bearing: Math.PI / 2 },
+    { cardinal: "SE", bearing: (3 * Math.PI) / 4 },
+    { cardinal: "S", bearing: Math.PI },
+    { cardinal: "SW", bearing: (5 * Math.PI) / 4 },
+    { cardinal: "W", bearing: (3 * Math.PI) / 2 },
+    { cardinal: "NW", bearing: (7 * Math.PI) / 4 },
+];
+/**
+ * Horizontal compass strip centered on the player's facing bearing, with the
+ * eight cardinals and optional marker pips (bearing to each `MarkerSet` entry).
+ */
+export function Compass({ heading, 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 half = fov / 2;
+    const toX = (bearing) => {
+        const delta = relativeBearing(bearing, heading);
+        if (Math.abs(delta) > half)
+            return null;
+        return width / 2 + (delta / half) * (width / 2);
+    };
+    return (_jsxs("div", { className: className, "data-compass": true, style: {
+            width,
+            height: 34,
+            position: "relative",
+            overflow: "hidden",
+            borderRadius: 8,
+            border: "1px solid rgba(148,163,184,0.28)",
+            background: "linear-gradient(180deg, rgba(18,22,30,0.92), rgba(10,13,18,0.92))",
+            color: "#e2e8f0",
+            fontFamily: "ui-sans-serif, system-ui, sans-serif",
+        }, children: [_jsx("div", { style: {
+                    position: "absolute",
+                    left: "50%",
+                    top: 0,
+                    bottom: 0,
+                    width: 1,
+                    background: "rgba(74,222,128,0.85)",
+                } }), COMPASS_TICKS.map((tick) => {
+                const x = toX(tick.bearing);
+                if (x === null)
+                    return null;
+                const major = tick.cardinal.length === 1;
+                return (_jsx("span", { style: {
+                        position: "absolute",
+                        left: x,
+                        top: major ? 7 : 11,
+                        transform: "translateX(-50%)",
+                        fontSize: major ? 13 : 9,
+                        fontWeight: major ? 700 : 500,
+                        color: major ? "#f8fafc" : "rgba(148,163,184,0.75)",
+                    }, children: tick.cardinal }, tick.cardinal));
+            }), center !== undefined
+                ? markerList.map((marker) => {
+                    const bearing = compassBearing(center, [marker.position[0], marker.position[2]]);
+                    const x = toX(bearing);
+                    if (x === null)
+                        return null;
+                    const style = markerKindStyle(marker.kind, kindStyles);
+                    return (_jsx("span", { "data-compass-marker": marker.kind, style: {
+                            position: "absolute",
+                            left: x,
+                            bottom: 2,
+                            transform: "translateX(-50%)",
+                            fontSize: 11,
+                            color: style.color,
+                            fontWeight: 700,
+                        }, children: style.glyph }, marker.id));
+                })
+                : null] }));
+}
+/**
+ * Full-bounds top-down world map (the "press M" overlay): baked terrain
+ * background, reveal-on-event fog, all markers with labels, and the player.
+ * Rectangular linear projection over the supplied world `bounds`.
+ */
+export function WorldMap({ markers, bounds, player, heading = 0, fog, background, width = 520, height, kindStyles = DEFAULT_MARKER_KINDS, className, title = "World Map", onClose, }) {
+    const markerList = useMarkers(markers);
+    const fogCells = useSyncExternalStore(fog?.subscribe ?? NO_SUBSCRIBE, fog?.cells ?? NULL_CELLS, fog?.cells ?? NULL_CELLS);
+    const worldW = bounds.maxX - bounds.minX;
+    const worldD = bounds.maxZ - bounds.minZ;
+    const mapH = height ?? Math.round((width * worldD) / worldW);
+    const project = (x, z) => ({
+        x: ((x - bounds.minX) / worldW) * width,
+        y: ((z - bounds.minZ) / worldD) * mapH,
+    });
+    return (_jsxs("div", { className: className, "data-world-map": true, style: {
+            borderRadius: 16,
+            padding: 14,
+            background: "linear-gradient(160deg, rgba(20,24,32,0.97), rgba(10,13,18,0.97))",
+            border: "1px solid rgba(148,163,184,0.35)",
+            boxShadow: "0 24px 60px rgba(0,0,0,0.6)",
+            color: "#e2e8f0",
+            fontFamily: "ui-sans-serif, system-ui, sans-serif",
+        }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }, children: [_jsx("span", { style: { fontSize: 13, fontWeight: 700, letterSpacing: 1.5, textTransform: "uppercase" }, children: title }), onClose !== undefined ? (_jsx("button", { type: "button", onClick: onClose, style: {
+                            border: "1px solid rgba(148,163,184,0.4)",
+                            borderRadius: 6,
+                            background: "transparent",
+                            color: "rgba(226,232,240,0.85)",
+                            fontSize: 11,
+                            padding: "3px 9px",
+                            cursor: "pointer",
+                        }, children: "Close" })) : null] }), _jsxs("svg", { width: width, height: mapH, viewBox: `0 0 ${width} ${mapH}`, "data-world-map-canvas": true, style: { borderRadius: 10 }, children: [_jsx("rect", { x: 0, y: 0, width: width, height: mapH, fill: "#16202b" }), background !== undefined ? (_jsx("image", { href: background, x: 0, y: 0, width: width, height: mapH, preserveAspectRatio: "none", opacity: 0.95 })) : null, fogCells !== null
+                        ? (() => {
+                            const cellW = (fogCells.cellSize / worldW) * width;
+                            const cellH = (fogCells.cellSize / worldD) * mapH;
+                            const rects = [];
+                            for (let row = 0; row < fogCells.rows; row += 1) {
+                                for (let col = 0; col < fogCells.cols; col += 1) {
+                                    if (fogCells.revealed[row * fogCells.cols + col])
+                                        continue;
+                                    const at = project(fogCells.minX + col * fogCells.cellSize, fogCells.minZ + row * fogCells.cellSize);
+                                    rects.push(_jsx("rect", { x: at.x, y: at.y, width: cellW + 0.5, height: cellH + 0.5, fill: "#0b0f14", opacity: 0.86 }, `wfog-${col}-${row}`));
+                                }
+                            }
+                            return rects;
+                        })()
+                        : null, 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));
+                    }), player !== undefined
+                        ? (() => {
+                            const at = project(player[0], player[1]);
+                            return (_jsx("g", { transform: `translate(${at.x} ${at.y}) rotate(${heading * (180 / Math.PI)})`, children: _jsx("path", { d: "M0,-11 L7,9 L0,4 L-7,9 Z", fill: "#4ade80", stroke: "#052e16", strokeWidth: 1 }) }));
+                        })()
+                        : null] })] }));
+}

package/dist/social.d.ts

@@ -0,0 +1,108 @@
+import { type ReactNode } from "react";
+import type { FriendEntry, FriendRequestEntry, PartyInviteEntry, PartyMemberEntry, WorldInvite, WorldInviteTarget } from "@jgengine/core/game/social";
+import { type MatchFilter, type SessionListing } from "@jgengine/core/multiplayer/matchmaking";
+export declare function PresenceDot({ userId, className }: {
+    userId: string;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function FriendRow({ friend, className, dotClassName, children, }: {
+    friend: FriendEntry;
+    className?: string;
+    dotClassName?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function FriendsList({ className, rowClassName, dotClassName, emptyState, renderFriend, }: {
+    className?: string;
+    rowClassName?: string;
+    dotClassName?: string;
+    emptyState?: ReactNode;
+    renderFriend?: (friend: FriendEntry) => ReactNode;
+}): import("react").JSX.Element;
+export declare function AddFriendButton({ toUserId, className, children, onRequested, onRejected, }: {
+    toUserId: string;
+    className?: string;
+    children?: ReactNode;
+    onRequested?: (requestId: string) => void;
+    onRejected?: (reason: string) => void;
+}): import("react").JSX.Element;
+export declare function FriendRequestsList({ className, rowClassName, acceptClassName, declineClassName, emptyState, renderRequest, }: {
+    className?: string;
+    rowClassName?: string;
+    acceptClassName?: string;
+    declineClassName?: string;
+    emptyState?: ReactNode;
+    renderRequest?: (request: FriendRequestEntry) => ReactNode;
+}): import("react").JSX.Element;
+export declare function PartyMemberRow({ member, className, dotClassName, children, }: {
+    member: PartyMemberEntry;
+    className?: string;
+    dotClassName?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function PartyFrame({ className, rowClassName, dotClassName, emptyState, renderMember, }: {
+    className?: string;
+    rowClassName?: string;
+    dotClassName?: string;
+    emptyState?: ReactNode;
+    renderMember?: (member: PartyMemberEntry) => ReactNode;
+}): import("react").JSX.Element;
+export declare function PartyInviteToast({ className, acceptClassName, declineClassName, renderInvite, }: {
+    className?: string;
+    acceptClassName?: string;
+    declineClassName?: string;
+    renderInvite?: (invite: PartyInviteEntry) => ReactNode;
+}): import("react").JSX.Element | null;
+export declare function LeavePartyButton({ className, children, }: {
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element | null;
+export declare function WorldInviteToast({ className, acceptClassName, declineClassName, onAccepted, renderInvite, }: {
+    className?: string;
+    acceptClassName?: string;
+    declineClassName?: string;
+    onAccepted: (target: WorldInviteTarget) => void;
+    renderInvite?: (invite: WorldInvite) => ReactNode;
+}): import("react").JSX.Element | null;
+export declare function InviteToWorldButton({ toUserId, target, className, children, onInvited, onRejected, }: {
+    toUserId: string;
+    target: WorldInviteTarget;
+    className?: string;
+    children?: ReactNode;
+    onInvited?: (inviteId: string) => void;
+    onRejected?: (reason: string) => void;
+}): import("react").JSX.Element;
+export declare function WorldBrowser({ listings, onJoin, className, rowClassName, joinClassName, emptyState, renderListing, }: {
+    listings: readonly SessionListing[];
+    onJoin: (listing: SessionListing) => void;
+    className?: string;
+    rowClassName?: string;
+    joinClassName?: string;
+    emptyState?: ReactNode;
+    renderListing?: (listing: SessionListing) => ReactNode;
+}): import("react").JSX.Element;
+export declare function JoinByCode({ onJoin, className, inputClassName, buttonClassName, placeholder, children, }: {
+    onJoin: (code: string) => void;
+    className?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    placeholder?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function QuickMatchButton({ listings, onJoin, onNoMatch, filter, className, children, }: {
+    listings: readonly SessionListing[];
+    onJoin: (listing: SessionListing) => void;
+    onNoMatch?: () => void;
+    filter?: MatchFilter;
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function EmoteWheel({ emotes, radius, open, className, emoteClassName, onPlayed, onRejected, renderEmote, }: {
+    emotes: readonly string[];
+    radius?: number;
+    open?: boolean;
+    className?: string;
+    emoteClassName?: string;
+    onPlayed?: (emoteId: string) => void;
+    onRejected?: (reason: string) => void;
+    renderEmote?: (emoteId: string) => ReactNode;
+}): import("react").JSX.Element | null;

package/dist/social.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { normalizeJoinCode, quickMatch, } from "@jgengine/core/multiplayer/matchmaking";
+import { useGameContext } from "./provider.js";
+import { useFriendRequests, useFriends, useParty, usePartyInvites, usePresence, useWorldInvites, } from "./hooks.js";
+export function PresenceDot({ userId, className }) {
+    const presence = usePresence(userId);
+    return (_jsx("span", { className: className, "data-presence-dot": true, "data-user": userId, "data-online": presence.online, "data-server": presence.serverId }));
+}
+export function FriendRow({ friend, className, dotClassName, children, }) {
+    return (_jsxs("div", { className: className, "data-friend": friend.userId, "data-online": friend.online, children: [_jsx(PresenceDot, { userId: friend.userId, className: dotClassName }), _jsx("span", { "data-friend-name": true, children: friend.userId }), children] }));
+}
+export function FriendsList({ className, rowClassName, dotClassName, emptyState, renderFriend, }) {
+    const friends = useFriends();
+    return (_jsx("div", { className: className, "data-friends-list": true, children: friends.length === 0
+            ? emptyState ?? null
+            : friends.map((friend) => renderFriend !== undefined ? (renderFriend(friend)) : (_jsx(FriendRow, { friend: friend, className: rowClassName, dotClassName: dotClassName }, friend.userId))) }));
+}
+export function AddFriendButton({ toUserId, className, children, onRequested, onRejected, }) {
+    const ctx = useGameContext();
+    const denied = ctx.game.social.friends.canRequest(ctx.player.userId, toUserId);
+    return (_jsx("button", { type: "button", className: className, "data-add-friend": toUserId, disabled: denied !== null, title: denied?.reason, onClick: () => {
+            const result = ctx.game.social.friends.request(ctx.player.userId, toUserId);
+            if ("reason" in result)
+                onRejected?.(result.reason);
+            else
+                onRequested?.(result.requestId);
+        }, children: children ?? "Add friend" }));
+}
+export function FriendRequestsList({ className, rowClassName, acceptClassName, declineClassName, emptyState, renderRequest, }) {
+    const ctx = useGameContext();
+    const requests = useFriendRequests();
+    return (_jsx("div", { className: className, "data-friend-requests": true, children: requests.length === 0
+            ? emptyState ?? null
+            : requests.map((request) => renderRequest !== undefined ? (renderRequest(request)) : (_jsxs("div", { className: rowClassName, "data-friend-request": request.requestId, children: [_jsx("span", { "data-request-from": true, children: request.fromUserId }), _jsx("button", { type: "button", className: acceptClassName, "data-accept": true, onClick: () => ctx.game.social.friends.accept(ctx.player.userId, request.requestId), children: "Accept" }), _jsx("button", { type: "button", className: declineClassName, "data-decline": true, onClick: () => ctx.game.social.friends.decline(ctx.player.userId, request.requestId), children: "Decline" })] }, request.requestId))) }));
+}
+export function PartyMemberRow({ member, className, dotClassName, children, }) {
+    return (_jsxs("div", { className: className, "data-party-member": member.userId, "data-role": member.role, children: [_jsx(PresenceDot, { userId: member.userId, className: dotClassName }), _jsx("span", { "data-member-name": true, children: member.userId }), children] }));
+}
+export function PartyFrame({ className, rowClassName, dotClassName, emptyState, renderMember, }) {
+    const members = useParty();
+    return (_jsx("div", { className: className, "data-party-frame": true, "data-party-size": members.length, children: members.length === 0
+            ? emptyState ?? null
+            : members.map((member) => renderMember !== undefined ? (renderMember(member)) : (_jsx(PartyMemberRow, { member: member, className: rowClassName, dotClassName: dotClassName }, member.userId))) }));
+}
+export function PartyInviteToast({ className, acceptClassName, declineClassName, renderInvite, }) {
+    const ctx = useGameContext();
+    const invites = usePartyInvites();
+    if (invites.length === 0)
+        return null;
+    return (_jsx("div", { className: className, "data-party-invites": true, children: invites.map((invite) => renderInvite !== undefined ? (renderInvite(invite)) : (_jsxs("div", { "data-party-invite": invite.inviteId, children: [_jsx("span", { "data-invite-from": true, children: invite.fromUserId }), _jsx("button", { type: "button", className: acceptClassName, "data-accept": true, onClick: () => ctx.game.social.party.accept(ctx.player.userId, invite.inviteId), children: "Join" }), _jsx("button", { type: "button", className: declineClassName, "data-decline": true, onClick: () => ctx.game.social.party.decline(ctx.player.userId, invite.inviteId), children: "Decline" })] }, invite.inviteId))) }));
+}
+export function LeavePartyButton({ className, children, }) {
+    const ctx = useGameContext();
+    const members = useParty();
+    if (members.length === 0)
+        return null;
+    return (_jsx("button", { type: "button", className: className, "data-leave-party": true, onClick: () => ctx.game.social.party.leave(ctx.player.userId), children: children ?? "Leave party" }));
+}
+export function WorldInviteToast({ className, acceptClassName, declineClassName, onAccepted, renderInvite, }) {
+    const ctx = useGameContext();
+    const invites = useWorldInvites();
+    if (invites.length === 0)
+        return null;
+    return (_jsx("div", { className: className, "data-world-invites": true, children: invites.map((invite) => renderInvite !== undefined ? (renderInvite(invite)) : (_jsxs("div", { "data-world-invite": invite.id, children: [_jsx("span", { "data-invite-from": true, children: invite.fromUserId }), _jsx("span", { "data-invite-server": true, children: invite.serverId }), _jsx("button", { type: "button", className: acceptClassName, "data-accept": true, onClick: () => {
+                        const result = ctx.game.social.worldInvites.accept(ctx.player.userId, invite.id);
+                        if ("target" in result)
+                            onAccepted(result.target);
+                    }, children: "Join" }), _jsx("button", { type: "button", className: declineClassName, "data-decline": true, onClick: () => ctx.game.social.worldInvites.decline(ctx.player.userId, invite.id), children: "Decline" })] }, invite.id))) }));
+}
+export function InviteToWorldButton({ toUserId, target, className, children, onInvited, onRejected, }) {
+    const ctx = useGameContext();
+    const denied = ctx.game.social.worldInvites.canInvite(ctx.player.userId, toUserId);
+    return (_jsx("button", { type: "button", className: className, "data-invite-to-world": toUserId, disabled: denied !== null, title: denied?.reason, onClick: () => {
+            const result = ctx.game.social.worldInvites.invite(ctx.player.userId, toUserId, target);
+            if ("reason" in result)
+                onRejected?.(result.reason);
+            else
+                onInvited?.(result.inviteId);
+        }, children: children ?? "Invite to world" }));
+}
+export function WorldBrowser({ listings, onJoin, className, rowClassName, joinClassName, emptyState, renderListing, }) {
+    return (_jsx("div", { className: className, "data-world-browser": true, children: listings.length === 0
+            ? emptyState ?? null
+            : listings.map((listing) => renderListing !== undefined ? (renderListing(listing)) : (_jsxs("div", { className: rowClassName, "data-world": listing.serverId, "data-mode": listing.mode, "data-full": listing.memberCount >= listing.slotsPerServer, children: [_jsx("span", { "data-world-label": true, children: listing.label ?? listing.serverId }), _jsxs("span", { "data-world-count": true, children: [listing.memberCount, "/", listing.slotsPerServer] }), _jsx("button", { type: "button", className: joinClassName, "data-join": true, disabled: listing.memberCount >= listing.slotsPerServer, onClick: () => onJoin(listing), children: "Join" })] }, listing.serverId))) }));
+}
+export function JoinByCode({ onJoin, className, inputClassName, buttonClassName, placeholder, children, }) {
+    const [code, setCode] = useState("");
+    function submit(event) {
+        event.preventDefault();
+        const normalized = normalizeJoinCode(code);
+        if (normalized.length === 0)
+            return;
+        onJoin(normalized);
+        setCode("");
+    }
+    return (_jsxs("form", { className: className, "data-join-by-code": true, onSubmit: submit, children: [_jsx("input", { className: inputClassName, type: "text", value: code, placeholder: placeholder ?? "Join code", onChange: (event) => setCode(event.target.value) }), _jsx("button", { type: "submit", className: buttonClassName, "data-join": true, children: children ?? "Join" })] }));
+}
+export function QuickMatchButton({ listings, onJoin, onNoMatch, filter, className, children, }) {
+    return (_jsx("button", { type: "button", className: className, "data-quick-match": true, onClick: () => {
+            const match = quickMatch(listings, filter);
+            if (match === null)
+                onNoMatch?.();
+            else
+                onJoin(match);
+        }, children: children ?? "Quick match" }));
+}
+export function EmoteWheel({ emotes, radius, open = true, className, emoteClassName, onPlayed, onRejected, renderEmote, }) {
+    const ctx = useGameContext();
+    if (!open)
+        return null;
+    return (_jsx("div", { className: className, role: "menu", "data-emote-wheel": true, "data-emote-count": emotes.length, children: emotes.map((emoteId, index) => (_jsx("button", { type: "button", role: "menuitem", className: emoteClassName, "data-emote": emoteId, "data-emote-index": index, onClick: () => {
+                const result = ctx.game.social.emotes.play(ctx.player.userId, emoteId, radius);
+                if ("reason" in result)
+                    onRejected?.(result.reason);
+                else
+                    onPlayed?.(emoteId);
+            }, children: renderEmote !== undefined ? renderEmote(emoteId) : emoteId }, emoteId))) }));
+}

package/dist/voice.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from "react";
+import { type PushToTalkMode, type PushToTalkStatus, type VoiceParticipant, type VoiceRoute, type VoiceTransport } from "@jgengine/core/multiplayer/voiceContract";
+export interface UseVoiceOptions {
+    transport?: VoiceTransport;
+    channelId?: string;
+    mode?: PushToTalkMode;
+    resolveRoutes?: () => readonly VoiceRoute[];
+    getUserMedia?: (constraints: MediaStreamConstraints) => Promise<MediaStream>;
+}
+export interface VoiceState {
+    supported: boolean;
+    micStream: MediaStream | null;
+    micError: string | null;
+    requestMic(): Promise<boolean>;
+    transmitting: boolean;
+    status: PushToTalkStatus;
+    mode: PushToTalkMode;
+    setMode(mode: PushToTalkMode): void;
+    muted: boolean;
+    setMuted(muted: boolean): void;
+    keyDown(): void;
+    keyUp(): void;
+    participants: readonly VoiceParticipant[];
+    routes: readonly VoiceRoute[];
+    gainFor(userId: string): number;
+}
+/**
+ * Mic capture + push-to-talk + channel roster over the VoiceTransport
+ * signaling seam. Transmission gates the captured tracks' `enabled` flag; the
+ * media plane that actually moves audio bytes (WebRTC/SFU) stays behind the
+ * transport, host-supplied. Call once per voice channel and hand the returned
+ * state to the voice components.
+ */
+export declare function useVoice(options?: UseVoiceOptions): VoiceState;
+export declare function PushToTalkButton({ voice, className, children, }: {
+    voice: VoiceState;
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function MicToggle({ voice, className, mutedLabel, unmutedLabel, }: {
+    voice: VoiceState;
+    className?: string;
+    mutedLabel?: ReactNode;
+    unmutedLabel?: ReactNode;
+}): import("react").JSX.Element;
+export declare function SpeakingIndicator({ voice, userId, className, threshold, children, }: {
+    voice: VoiceState;
+    userId: string;
+    className?: string;
+    threshold?: number;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function VoiceRoster({ voice, className, participantClassName, renderParticipant, }: {
+    voice: VoiceState;
+    className?: string;
+    participantClassName?: string;
+    renderParticipant?: (participant: VoiceParticipant, gain: number) => ReactNode;
+}): import("react").JSX.Element;

package/dist/voice.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPushToTalk, } from "@jgengine/core/multiplayer/voiceContract";
+/**
+ * Mic capture + push-to-talk + channel roster over the VoiceTransport
+ * signaling seam. Transmission gates the captured tracks' `enabled` flag; the
+ * media plane that actually moves audio bytes (WebRTC/SFU) stays behind the
+ * transport, host-supplied. Call once per voice channel and hand the returned
+ * state to the voice components.
+ */
+export function useVoice(options) {
+    const transport = options?.transport;
+    const channelId = options?.channelId ?? "voice";
+    const resolveRoutes = options?.resolveRoutes;
+    const requestedMode = options?.mode ?? "hold";
+    const [transmitting, setTransmitting] = useState(false);
+    const [version, setVersion] = useState(0);
+    const bump = useCallback(() => setVersion((current) => current + 1), []);
+    void version;
+    const pttRef = useRef(null);
+    if (pttRef.current === null) {
+        pttRef.current = createPushToTalk({ mode: requestedMode, onChange: setTransmitting });
+    }
+    const ptt = pttRef.current;
+    const [micStream, setMicStream] = useState(null);
+    const [micError, setMicError] = useState(null);
+    const micRef = useRef(null);
+    const getUserMedia = options?.getUserMedia ??
+        (typeof navigator !== "undefined" && navigator.mediaDevices !== undefined
+            ? (constraints) => navigator.mediaDevices.getUserMedia(constraints)
+            : undefined);
+    const supported = getUserMedia !== undefined;
+    const requestMic = useCallback(async () => {
+        if (getUserMedia === undefined) {
+            setMicError("microphone capture not supported");
+            return false;
+        }
+        try {
+            const stream = await getUserMedia({ audio: true });
+            micRef.current = stream;
+            setMicStream(stream);
+            setMicError(null);
+            void transport?.publish(channelId, stream.id);
+            return true;
+        }
+        catch (error) {
+            setMicError(error instanceof Error ? error.message : "microphone permission denied");
+            return false;
+        }
+    }, [getUserMedia, transport, channelId]);
+    useEffect(() => {
+        const stream = micRef.current;
+        if (stream === null)
+            return;
+        for (const track of stream.getAudioTracks())
+            track.enabled = transmitting;
+    }, [transmitting, micStream]);
+    useEffect(() => {
+        return () => {
+            const stream = micRef.current;
+            if (stream !== null)
+                for (const track of stream.getTracks())
+                    track.stop();
+        };
+    }, []);
+    const [participants, setParticipants] = useState([]);
+    useEffect(() => {
+        if (transport === undefined)
+            return undefined;
+        void transport.join(channelId, micRef.current?.id);
+        const unsubscribe = transport.subscribers(channelId, setParticipants);
+        return () => {
+            unsubscribe();
+            void transport.leave(channelId);
+        };
+    }, [transport, channelId]);
+    const routes = resolveRoutes?.() ?? [];
+    return useMemo(() => ({
+        supported,
+        micStream,
+        micError,
+        requestMic,
+        transmitting,
+        status: ptt.status(),
+        mode: ptt.mode(),
+        setMode(mode) {
+            ptt.setMode(mode);
+            bump();
+        },
+        muted: ptt.muted(),
+        setMuted(muted) {
+            ptt.setMuted(muted);
+            bump();
+        },
+        keyDown() {
+            ptt.keyDown();
+            bump();
+        },
+        keyUp() {
+            ptt.keyUp();
+            bump();
+        },
+        participants,
+        routes,
+        gainFor(userId) {
+            let gain = 0;
+            for (const route of routes) {
+                if (route.fromUserId === userId && route.gain > gain)
+                    gain = route.gain;
+            }
+            return gain;
+        },
+    }), [supported, micStream, micError, requestMic, transmitting, participants, routes, ptt, bump]);
+}
+export function PushToTalkButton({ voice, className, children, }) {
+    return (_jsx("button", { type: "button", className: className, "data-push-to-talk": true, "data-transmitting": voice.transmitting, "data-status": voice.status, onPointerDown: () => voice.keyDown(), onPointerUp: () => voice.keyUp(), onPointerLeave: () => voice.keyUp(), children: children ?? (voice.transmitting ? "Transmitting" : "Push to talk") }));
+}
+export function MicToggle({ voice, className, mutedLabel, unmutedLabel, }) {
+    return (_jsx("button", { type: "button", className: className, "data-mic-toggle": true, "data-muted": voice.muted, "aria-pressed": voice.muted, onClick: () => voice.setMuted(!voice.muted), children: voice.muted ? (mutedLabel ?? "Unmute") : (unmutedLabel ?? "Mute") }));
+}
+export function SpeakingIndicator({ voice, userId, className, threshold = 0.01, children, }) {
+    const gain = voice.gainFor(userId);
+    return (_jsx("span", { className: className, "data-speaking": gain > threshold, "data-gain": gain.toFixed(3), "data-user": userId, children: children }));
+}
+export function VoiceRoster({ voice, className, participantClassName, renderParticipant, }) {
+    return (_jsx("div", { className: className, "data-voice-roster": true, children: voice.participants.map((participant) => {
+            const gain = voice.gainFor(participant.userId);
+            return (_jsx("div", { className: participantClassName, "data-voice-participant": participant.userId, "data-published": participant.streamId !== undefined, "data-speaking": gain > 0.01, children: renderParticipant !== undefined ? renderParticipant(participant, gain) : participant.userId }, participant.userId));
+        }) }));
+}