@jgengine/react 0.7.0 → 0.8.0

package/dist/hooks.d.ts

@@ -1,10 +1,13 @@
+import { AxisChannel, type AxisChannelConfig } from "@jgengine/core/input/axisInput";
 import type { GameContext } from "@jgengine/core/runtime/gameContext";
 import type { AbilityKit, AbilitySlotSnapshot } from "@jgengine/core/combat/abilityKit";
 import type { EventMeter } from "@jgengine/core/stats/eventMeter";
 import type { GameEvents } from "@jgengine/core/game/events";
 import type { FeedEntry } from "@jgengine/core/game/feed";
 import type { QuestInstance } from "@jgengine/core/game/quest";
-import type { FriendEntry, PartyMemberEntry, PresenceInfo } from "@jgengine/core/game/social";
+import type { ChatMessage } from "@jgengine/core/game/chat";
+import type { FriendEntry, FriendRequestEntry, PartyInviteEntry, PartyMemberEntry, PresenceInfo, WorldInvite } from "@jgengine/core/game/social";
+import { type MatchFilter, type SessionListing } from "@jgengine/core/multiplayer/matchmaking";
 import type { LeaderboardScope } from "@jgengine/core/game/leaderboard";
 import type { InventorySlot } from "@jgengine/core/inventory/inventoryModel";
 import type { StatValue } from "@jgengine/core/scene/entityStats";
@@ -40,6 +43,30 @@ export declare function useQuestJournal(): QuestInstance[];
 export declare function useFriends(): FriendEntry[];
 export declare function useParty(): PartyMemberEntry[];
 export declare function usePresence(userId: string): PresenceInfo;
+export declare function useWorldInvites(): WorldInvite[];
+export declare function useChat(channelId: string, options?: {
+    limit?: number;
+}): ChatMessage[];
+export declare function useFriendRequests(): FriendRequestEntry[];
+export declare function usePartyInvites(): PartyInviteEntry[];
+export interface WorldBrowserState {
+    listings: SessionListing[];
+    loading: boolean;
+    error: string | null;
+    refresh(): void;
+}
+/**
+ * Polls a host-supplied session fetcher (e.g. createWsBackend().browse) and
+ * filters through matchmaking's browseSessions. fetchSessions must be
+ * identity-stable (wrap in useCallback at the call site) or every render
+ * refetches.
+ */
+export declare function useWorldBrowser(options: {
+    fetchSessions: () => Promise<readonly SessionListing[]>;
+    filter?: MatchFilter;
+    limit?: number;
+    refreshMs?: number;
+}): WorldBrowserState;
 export declare function useRoster(userId?: string): readonly RosterEntry[];
 export declare function useLeaderboard(stat: string, options: {
     scope: LeaderboardScope;
@@ -66,3 +93,25 @@ export interface EventMeterView {
     ready: boolean;
 }
 export declare function useEventMeter(meter: EventMeter, options?: AbilitySlotBindingOptions): EventMeterView;
+type HeldKeyEventTarget = Pick<Window, "addEventListener" | "removeEventListener">;
+export declare function createHeldKeyTracker(target: HeldKeyEventTarget): {
+    isDown: (code: string) => boolean;
+    dispose: () => void;
+};
+/**
+ * Held-key predicate backed by window keydown/keyup/blur listeners (blur clears held state so a
+ * released-off-window key doesn't stick). SSR-safe: listeners attach in an effect, never at module
+ * scope. The returned predicate is stable across renders.
+ */
+export declare function useHeldKeys(): (code: string) => boolean;
+export interface UseAxisChannelResult {
+    channel: AxisChannel;
+    isDown: (code: string) => boolean;
+}
+/**
+ * Wires useHeldKeys into a fresh AxisChannel, ready for a per-frame `channel.sample(dt, isDown)`.
+ * The channel is recreated when `config` identity changes, so pass a stable config (useMemo/module
+ * constant at the call site) unless a rebind is intended.
+ */
+export declare function useAxisChannel(config: AxisChannelConfig): UseAxisChannelResult;
+export {};

package/dist/hooks.js

@@ -1,4 +1,6 @@
-import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { AxisChannel } from "@jgengine/core/input/axisInput";
+import { browseSessions, } from "@jgengine/core/multiplayer/matchmaking";
 import { resolveActivePrompt, } from "@jgengine/core/interaction/proximityPrompt";
 import { useGameContext } from "./provider.js";
 export function useGameStore(selector) {
@@ -60,6 +62,63 @@ export function useParty() {
 export function usePresence(userId) {
     return useGameStore((ctx) => ctx.game.social.presence.get(userId));
 }
+export function useWorldInvites() {
+    return useGameStore((ctx) => ctx.game.social.worldInvites.listFor(ctx.player.userId));
+}
+export function useChat(channelId, options) {
+    const limit = options?.limit ?? 50;
+    return useGameStore((ctx) => ctx.game.chat.history(channelId, { limit, viewerUserId: ctx.player.userId }));
+}
+export function useFriendRequests() {
+    return useGameStore((ctx) => ctx.game.social.friends.requestsFor(ctx.player.userId));
+}
+export function usePartyInvites() {
+    return useGameStore((ctx) => ctx.game.social.party.invitesFor(ctx.player.userId));
+}
+/**
+ * Polls a host-supplied session fetcher (e.g. createWsBackend().browse) and
+ * filters through matchmaking's browseSessions. fetchSessions must be
+ * identity-stable (wrap in useCallback at the call site) or every render
+ * refetches.
+ */
+export function useWorldBrowser(options) {
+    const { fetchSessions, refreshMs } = options;
+    const [raw, setRaw] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [refreshTick, setRefreshTick] = useState(0);
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        fetchSessions()
+            .then((listings) => {
+            if (cancelled)
+                return;
+            setRaw(listings);
+            setError(null);
+            setLoading(false);
+        })
+            .catch((cause) => {
+            if (cancelled)
+                return;
+            setError(cause instanceof Error ? cause.message : "failed to browse sessions");
+            setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [fetchSessions, refreshTick]);
+    useEffect(() => {
+        if (refreshMs === undefined || refreshMs <= 0)
+            return undefined;
+        const id = setInterval(() => setRefreshTick((tick) => tick + 1), refreshMs);
+        return () => clearInterval(id);
+    }, [refreshMs]);
+    const filter = options.filter;
+    const limit = options.limit;
+    const listings = useMemo(() => browseSessions(raw, filter, limit === undefined ? {} : { limit }), [raw, filter, limit]);
+    return useMemo(() => ({ listings, loading, error, refresh: () => setRefreshTick((tick) => tick + 1) }), [listings, loading, error]);
+}
 export function useRoster(userId) {
     return useGameStore((ctx) => ctx.game.roster.list(userId ?? ctx.player.userId));
 }
@@ -118,3 +177,50 @@ export function useEventMeter(meter, options) {
     useEngineHeartbeat(options?.intervalMs ?? 80);
     return { value: meter.value(), fraction: meter.fraction(), tier: meter.tier(), ready: meter.ready() };
 }
+export function createHeldKeyTracker(target) {
+    const held = new Set();
+    const onKeyDown = (event) => held.add(event.code);
+    const onKeyUp = (event) => held.delete(event.code);
+    const onBlur = () => held.clear();
+    target.addEventListener("keydown", onKeyDown);
+    target.addEventListener("keyup", onKeyUp);
+    target.addEventListener("blur", onBlur);
+    return {
+        isDown: (code) => held.has(code),
+        dispose: () => {
+            target.removeEventListener("keydown", onKeyDown);
+            target.removeEventListener("keyup", onKeyUp);
+            target.removeEventListener("blur", onBlur);
+            held.clear();
+        },
+    };
+}
+/**
+ * Held-key predicate backed by window keydown/keyup/blur listeners (blur clears held state so a
+ * released-off-window key doesn't stick). SSR-safe: listeners attach in an effect, never at module
+ * scope. The returned predicate is stable across renders.
+ */
+export function useHeldKeys() {
+    const trackerRef = useRef(null);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return undefined;
+        const tracker = createHeldKeyTracker(window);
+        trackerRef.current = tracker;
+        return () => {
+            tracker.dispose();
+            trackerRef.current = null;
+        };
+    }, []);
+    return useCallback((code) => trackerRef.current?.isDown(code) ?? false, []);
+}
+/**
+ * Wires useHeldKeys into a fresh AxisChannel, ready for a per-frame `channel.sample(dt, isDown)`.
+ * The channel is recreated when `config` identity changes, so pass a stable config (useMemo/module
+ * constant at the call site) unless a rebind is intended.
+ */
+export function useAxisChannel(config) {
+    const isDown = useHeldKeys();
+    const channel = useMemo(() => new AxisChannel(config), [config]);
+    return { channel, isDown };
+}

package/dist/identity.d.ts

@@ -0,0 +1,65 @@
+import { type ReactNode } from "react";
+import { type AuthSession, type PlayerIdentity } from "@jgengine/core/multiplayer/identity";
+export interface IdentitySource {
+    session: AuthSession | null;
+    isLoading: boolean;
+    signOut?: () => void;
+}
+export interface ClerkUserShape {
+    id: string;
+    fullName?: string | null;
+    username?: string | null;
+    imageUrl?: string | null;
+    primaryEmailAddress?: {
+        emailAddress: string;
+    } | null;
+    createdAt?: Date | null;
+    lastSignInAt?: Date | null;
+}
+export interface ClerkUserState {
+    isLoaded: boolean;
+    isSignedIn: boolean | undefined;
+    user: ClerkUserShape | null | undefined;
+}
+export declare function clerkIdentity(state: ClerkUserState, options?: {
+    signOut?: () => void;
+}): IdentitySource;
+export interface BetterAuthUserShape {
+    id: string;
+    name?: string | null;
+    email?: string | null;
+    image?: string | null;
+}
+export interface BetterAuthSessionState {
+    data: {
+        user: BetterAuthUserShape;
+    } | null | undefined;
+    isPending: boolean;
+}
+export declare function betterAuthIdentity(state: BetterAuthSessionState, options?: {
+    signOut?: () => void;
+}): IdentitySource;
+export declare function guestIdentity(seed?: string): IdentitySource;
+export declare function GameIdentityProvider({ source, children, }: {
+    source: IdentitySource;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function useSession(): IdentitySource;
+export declare function useAuthedPlayer(options?: {
+    guestSeed?: string;
+}): PlayerIdentity | null;
+export declare function RequireSession({ fallback, loading, children, }: {
+    fallback?: ReactNode;
+    loading?: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function UserBadge({ className, avatarClassName, nameClassName, renderBadge, }: {
+    className?: string;
+    avatarClassName?: string;
+    nameClassName?: string;
+    renderBadge?: (session: AuthSession) => ReactNode;
+}): import("react").JSX.Element | null;
+export declare function SignOutButton({ className, children, }: {
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element | null;

package/dist/identity.js

@@ -0,0 +1,94 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { resolveGuestSession, sessionPlayer, } from "@jgengine/core/multiplayer/identity";
+export function clerkIdentity(state, options) {
+    if (!state.isLoaded)
+        return { session: null, isLoading: true };
+    const user = state.user;
+    if (state.isSignedIn !== true || user === null || user === undefined) {
+        return { session: null, isLoading: false };
+    }
+    const displayName = user.fullName ?? user.username ?? undefined;
+    const session = { userId: user.id };
+    if (displayName !== undefined)
+        session.displayName = displayName;
+    if (user.imageUrl !== null && user.imageUrl !== undefined)
+        session.avatarUrl = user.imageUrl;
+    const email = user.primaryEmailAddress?.emailAddress;
+    if (email !== undefined)
+        session.email = email;
+    if (user.createdAt !== null && user.createdAt !== undefined) {
+        session.isNew =
+            user.lastSignInAt === null ||
+                user.lastSignInAt === undefined ||
+                user.lastSignInAt.getTime() <= user.createdAt.getTime();
+    }
+    const source = { session, isLoading: false };
+    if (options?.signOut !== undefined)
+        source.signOut = options.signOut;
+    return source;
+}
+export function betterAuthIdentity(state, options) {
+    if (state.isPending)
+        return { session: null, isLoading: true };
+    const user = state.data?.user;
+    if (user === undefined)
+        return { session: null, isLoading: false };
+    const session = { userId: user.id };
+    if (user.name !== null && user.name !== undefined)
+        session.displayName = user.name;
+    if (user.image !== null && user.image !== undefined)
+        session.avatarUrl = user.image;
+    if (user.email !== null && user.email !== undefined)
+        session.email = user.email;
+    const source = { session, isLoading: false };
+    if (options?.signOut !== undefined)
+        source.signOut = options.signOut;
+    return source;
+}
+export function guestIdentity(seed) {
+    return { session: resolveGuestSession(seed), isLoading: false };
+}
+const IdentityReactContext = createContext(null);
+export function GameIdentityProvider({ source, children, }) {
+    return _jsx(IdentityReactContext.Provider, { value: source, children: children });
+}
+export function useSession() {
+    const source = useContext(IdentityReactContext);
+    if (source === null)
+        throw new Error("useSession must be used within <GameIdentityProvider>");
+    return source;
+}
+export function useAuthedPlayer(options) {
+    const { session, isLoading } = useSession();
+    const guestSeed = options?.guestSeed;
+    return useMemo(() => {
+        if (session !== null)
+            return sessionPlayer(session);
+        if (isLoading || guestSeed === undefined)
+            return null;
+        return sessionPlayer(resolveGuestSession(guestSeed));
+    }, [session, isLoading, guestSeed]);
+}
+export function RequireSession({ fallback, loading, children, }) {
+    const { session, isLoading } = useSession();
+    if (isLoading)
+        return _jsx(_Fragment, { children: loading ?? null });
+    if (session === null)
+        return _jsx(_Fragment, { children: fallback ?? null });
+    return _jsx(_Fragment, { children: children });
+}
+export function UserBadge({ className, avatarClassName, nameClassName, renderBadge, }) {
+    const { session } = useSession();
+    if (session === null)
+        return null;
+    if (renderBadge !== undefined)
+        return _jsx(_Fragment, { children: renderBadge(session) });
+    return (_jsxs("span", { className: className, "data-user": session.userId, children: [session.avatarUrl !== undefined && (_jsx("img", { className: avatarClassName, src: session.avatarUrl, alt: "", "data-avatar": true })), _jsx("span", { className: nameClassName, "data-display-name": true, children: session.displayName ?? session.userId })] }));
+}
+export function SignOutButton({ className, children, }) {
+    const { session, signOut } = useSession();
+    if (session === null || signOut === undefined)
+        return null;
+    return (_jsx("button", { type: "button", className: className, "data-sign-out": true, onClick: () => signOut(), children: children ?? "Sign out" }));
+}

package/dist/index.d.ts

@@ -1,6 +1,11 @@
 export * from "./provider.js";
+export * from "./identity.js";
+export * from "./chat.js";
+export * from "./voice.js";
+export * from "./social.js";
 export * from "./hooks.js";
 export * from "./components.js";
 export * from "./engineStore.js";
 export * from "./dragLayer.js";
+export * from "./display.js";
 export * from "./map.js";

package/dist/index.js

@@ -1,6 +1,11 @@
 export * from "./provider.js";
+export * from "./identity.js";
+export * from "./chat.js";
+export * from "./voice.js";
+export * from "./social.js";
 export * from "./hooks.js";
 export * from "./components.js";
 export * from "./engineStore.js";
 export * from "./dragLayer.js";
+export * from "./display.js";
 export * from "./map.js";

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;