@jgengine/react 0.9.0 → 0.10.0

package/dist/hudLayout.d.ts

@@ -1,5 +1,9 @@
 import { type CSSProperties, type ReactNode } from "react";
 import { type HudAnchor, type HudLayoutStore } from "@jgengine/core/ui/hudLayout";
+import { type HudPriority, type MobileHudBehavior } from "@jgengine/core/ui/gameLayout";
+import type { GamePhase } from "@jgengine/core/game/gamePhase";
+/** Whether a HUD element opted into `showDuring` is visible in the current phase; `undefined` = always visible (default). */
+export declare function hudVisibleInPhase(showDuring: readonly GamePhase[] | undefined, phase: GamePhase): boolean;
 /**
  * How a panel behaves on compact (phone-scale) displays. `keep` stays visible
  * at the global compact scale, `chip` collapses to a small tap-to-expand
@@ -22,15 +26,17 @@ export declare function useHudLayout(options?: {
  * (`--jg-hud-dock-clearance`), or device safe areas. On compact displays the
  * whole surface scales down and each panel applies its `compact` behavior.
  */
-export declare function HudCanvas({ layout, editChord, compactScale, className, style, children, }: {
+export declare function HudCanvas({ layout, editChord, compactScale, showDuring, className, style, children, }: {
     layout: HudLayoutStore;
     editChord?: HudEditChord | false;
     /** Zoom applied to the whole HUD on compact displays. Default 0.85. */
     compactScale?: number;
+    /** Opt-in play-phase gate: render the HUD only during these phases (e.g. `["playing"]`). Omit for always-visible (default). */
+    showDuring?: readonly GamePhase[];
     className?: string;
     style?: CSSProperties;
     children?: ReactNode;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 /**
  * A HUD block that lives in one of the nine anchor regions. Panels sharing a
  * region stack outward from the screen edge in ascending `order`. On fine
@@ -38,7 +44,7 @@ export declare function HudCanvas({ layout, editChord, compactScale, className,
  * leaves the flow and keeps its custom placement. On compact displays custom
  * placements are ignored and the `compact` behavior applies.
  */
-export declare function HudPanel({ id, anchor, order, compact: compactMode, chip, interactive, inset, locked, className, style, children, }: {
+export declare function HudPanel({ id, anchor, order, compact: compactMode, chip, interactive, inset, locked, showDuring, priority, mobileBehavior, allowOverlapWith, collisionGroup, region, className, style, children, }: {
     id: string;
     anchor?: HudAnchor;
     /** Stack position within the region, ascending outward from the screen edge. Default 0. */
@@ -55,6 +61,18 @@ export declare function HudPanel({ id, anchor, order, compact: compactMode, chip
         y: number;
     };
     locked?: boolean;
+    /** Opt-in play-phase gate: render this panel only during these phases. Omit for always-visible (default). */
+    showDuring?: readonly GamePhase[];
+    /** Gameplay-importance tier, surfaced to layout tooling. `critical` stays visible; `tertiary` is the first to fold away. */
+    priority?: HudPriority;
+    /** How the panel adapts on mobile. `"hidden"` unmounts on phones; `"transient"` softens its collision policy; others tag the element for game CSS. */
+    mobileBehavior?: MobileHudBehavior;
+    /** Region ids this panel may overlap without a forbidden-collision report. */
+    allowOverlapWith?: readonly string[];
+    /** Regions sharing a non-empty group never collide with each other. */
+    collisionGroup?: string;
+    /** Register this panel as a collision-tracked layout region. Default true. */
+    region?: boolean;
     className?: string;
     style?: CSSProperties;
     children?: ReactNode;

package/dist/hudLayout.js

@@ -3,9 +3,16 @@ import { createContext, useContext, useEffect, useMemo, useRef, useState, } from
 import { createPortal } from "react-dom";
 import { HUD_ANCHOR_FRACTIONS, anchoredPlacement, createHudLayout, isPanelDraggable, } from "@jgengine/core/ui/hudLayout";
 import { hudScaleForViewport, overflowingPanels, resolveHudFit } from "@jgengine/core/ui/hudScale";
+import { isMobileMode, } from "@jgengine/core/ui/gameLayout";
 import { useDisplayProfile } from "./display.js";
 import { useEngineState } from "./engineStore.js";
+import { useGameLayoutMode, useRegisterLayoutRegion } from "./gameViewport.js";
+import { useOptionalGamePhase } from "./hooks.js";
 import { useHudViewport } from "./hudViewport.js";
+/** Whether a HUD element opted into `showDuring` is visible in the current phase; `undefined` = always visible (default). */
+export function hudVisibleInPhase(showDuring, phase) {
+    return showDuring === undefined || showDuring.includes(phase);
+}
 const STORAGE_PREFIX = "jg:hud:";
 const DRAG_THRESHOLD_PX = 4;
 const PERSIST_DELAY_MS = 200;
@@ -125,8 +132,9 @@ function edgePad(envInset, extra, basePx, scale) {
  * (`--jg-hud-dock-clearance`), or device safe areas. On compact displays the
  * whole surface scales down and each panel applies its `compact` behavior.
  */
-export function HudCanvas({ layout, editChord, compactScale, className, style, children, }) {
+export function HudCanvas({ layout, editChord, compactScale, showDuring, className, style, children, }) {
     const canvasRef = useRef(null);
+    const phase = useOptionalGamePhase();
     const { compact } = useDisplayProfile();
     const hudViewport = useHudViewport();
     const fitEnabled = hudViewport?.fitEnabled === true;
@@ -286,6 +294,8 @@ export function HudCanvas({ layout, editChord, compactScale, className, style, c
         "--jg-hud-pad-right": edgePad("env(safe-area-inset-right, 0px)", null, basePad, scale),
         ...style,
     };
+    if (!hudVisibleInPhase(showDuring, phase))
+        return null;
     return (_jsx(HudCanvasContext.Provider, { value: value, children: _jsxs("div", { ref: canvasRef, "data-hud-canvas": "", "data-hud-editing": editing ? "" : undefined, className: className, style: canvasStyle, children: [HUD_ANCHORS.map((anchor) => (_jsx("div", { ref: regionRefs[anchor], "data-hud-region": anchor, style: {
                         position: "absolute",
                         display: "flex",
@@ -334,11 +344,14 @@ function HudChip({ label, anchor, children, }) {
  * leaves the flow and keeps its custom placement. On compact displays custom
  * placements are ignored and the `compact` behavior applies.
  */
-export function HudPanel({ id, anchor = "top-left", order, compact: compactMode = "keep", chip, interactive, inset, locked, className, style, children, }) {
+export function HudPanel({ id, anchor = "top-left", order, compact: compactMode = "keep", chip, interactive, inset, locked, showDuring, priority, mobileBehavior, allowOverlapWith, collisionGroup, region = true, className, style, children, }) {
     const ctx = useContext(HudCanvasContext);
+    const phase = useOptionalGamePhase();
+    const layoutMode = useGameLayoutMode();
     if (ctx === null)
         throw new Error("HudPanel must be rendered inside a HudCanvas");
     const { layout, canvasRef, regions, compact } = ctx;
+    const onMobile = isMobileMode(layoutMode);
     const registeredOnRef = useRef(null);
     if (registeredOnRef.current !== layout) {
         registeredOnRef.current = layout;
@@ -354,6 +367,19 @@ export function HudPanel({ id, anchor = "top-left", order, compact: compactMode
     const detachRef = useRef(null);
     const [dragging, setDragging] = useState(false);
     useEffect(() => () => detachRef.current?.(), []);
+    const regionHidden = panel === undefined ||
+        (compact && compactMode === "hide") ||
+        (onMobile && mobileBehavior === "hidden") ||
+        !hudVisibleInPhase(showDuring, phase);
+    const regionSpec = useMemo(() => ({
+        id,
+        kind: "hud",
+        collisionPolicy: (mobileBehavior === "transient" ? "warn" : "forbid"),
+        priority,
+        allowOverlapWith,
+        collisionGroup,
+    }), [id, mobileBehavior, priority, allowOverlapWith, collisionGroup]);
+    useRegisterLayoutRegion(regionSpec, rootRef, region && !regionHidden);
     const onPointerDown = (event) => {
         if (!draggable || event.button !== 0)
             return;
@@ -437,6 +463,10 @@ export function HudPanel({ id, anchor = "top-left", order, compact: compactMode
         return null;
     if (compact && compactMode === "hide")
         return null;
+    if (onMobile && mobileBehavior === "hidden")
+        return null;
+    if (!hudVisibleInPhase(showDuring, phase))
+        return null;
     const flow = compact || !panel.moved;
     if (flow) {
         const regionEl = regions[compact ? anchor : panel.placement.anchor];
@@ -444,7 +474,7 @@ export function HudPanel({ id, anchor = "top-left", order, compact: compactMode
             return null;
         const chipped = compact && compactMode === "chip";
         const passThrough = interactive === false && !editing && !chipped;
-        return createPortal(_jsxs("div", { ref: rootRef, "data-hud-panel": id, "data-dragging": dragging ? "" : undefined, className: className, onPointerDown: onPointerDown, onClickCapture: onClickCapture, style: {
+        return createPortal(_jsxs("div", { ref: rootRef, "data-hud-panel": id, "data-dragging": dragging ? "" : undefined, "data-hud-priority": priority, "data-hud-mobile-behavior": mobileBehavior, className: className, onPointerDown: onPointerDown, onClickCapture: onClickCapture, style: {
                 position: "relative",
                 order: order ?? 0,
                 pointerEvents: passThrough ? "none" : "auto",

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export * from "./engineStore.js";
 export * from "./dragLayer.js";
 export * from "./hudLayout.js";
 export * from "./hudViewport.js";
+export * from "./gameViewport.js";
+export * from "./rotateDevice.js";
 export * from "./display.js";
 export * from "./map.js";
 export * from "./preview.js";

package/dist/index.js

@@ -11,6 +11,8 @@ export * from "./engineStore.js";
 export * from "./dragLayer.js";
 export * from "./hudLayout.js";
 export * from "./hudViewport.js";
+export * from "./gameViewport.js";
+export * from "./rotateDevice.js";
 export * from "./display.js";
 export * from "./map.js";
 export * from "./preview.js";

package/dist/provider.d.ts

@@ -5,3 +5,5 @@ export declare function GameProvider({ context, children }: {
     children?: ReactNode;
 }): import("react").JSX.Element;
 export declare function useGameContext(): GameContext;
+/** The game context if a `GameProvider` is present, otherwise `null` — for chrome that may render outside a running game (showcases, previews). */
+export declare function useOptionalGameContext(): GameContext | null;

package/dist/provider.js

@@ -10,3 +10,7 @@ export function useGameContext() {
         throw new Error("useGameContext must be used within <GameProvider>");
     return ctx;
 }
+/** The game context if a `GameProvider` is present, otherwise `null` — for chrome that may render outside a running game (showcases, previews). */
+export function useOptionalGameContext() {
+    return useContext(GameReactContext);
+}

package/dist/rotateDevice.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Engine-owned rotate-device screen. A polished, non-dismissible full-viewport
+ * gate shown when a game requires an orientation the device isn't in. It owns
+ * the visible viewport (visualViewport-sized), respects safe areas, blocks all
+ * pointer/touch input to the game beneath, and is themeable through `--jg-*`
+ * tokens. Reduced-motion respected. This is game UI, not a website toast.
+ */
+import type { CSSProperties, ReactNode } from "react";
+import type { LayoutOrientation } from "@jgengine/core/ui/orientation";
+/** Full-viewport, non-dismissible rotate-device gate shown when a game requires an orientation the device isn't in. */
+export declare function RotateDeviceScreen({ title, description, requiredOrientation, accent, icon, className, style, }: {
+    /** Short headline. */
+    title?: string;
+    /** One concise explanatory line. Defaults from `requiredOrientation`. */
+    description?: string;
+    /** Orientation the game needs. Drives the rotation animation direction. */
+    requiredOrientation?: LayoutOrientation;
+    /** Illustration/token color. */
+    accent?: string;
+    /** Custom illustration; defaults to an animated phone glyph. */
+    icon?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;

package/dist/rotateDevice.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STYLE_ID = "jg-rotate-device-style";
+const ROTATE_CSS = `
+.jg-rotate-root {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--jg-visual-viewport-width, 100vw);
+  height: var(--jg-visual-viewport-height, 100dvh);
+  min-height: var(--jg-visual-viewport-height, 100vh);
+  padding: calc(env(safe-area-inset-top, 0px) + 24px) calc(env(safe-area-inset-right, 0px) + 24px)
+    calc(env(safe-area-inset-bottom, 0px) + 24px) calc(env(safe-area-inset-left, 0px) + 24px);
+  color: var(--jg-text, #f4f4f6);
+  background:
+    radial-gradient(120% 120% at 50% 0%, var(--jg-accent-dim, rgba(120, 130, 160, 0.18)), transparent 60%),
+    var(--jg-surface, #0b0d13);
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  overflow: hidden;
+}
+.jg-rotate-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 22px;
+  text-align: center;
+  max-width: 22rem;
+}
+.jg-rotate-phone {
+  transform-origin: 50% 50%;
+}
+.jg-rotate-title {
+  margin: 0;
+  font: 700 clamp(1.25rem, 5vw, 1.75rem) / 1.15 system-ui, -apple-system, "Segoe UI", sans-serif;
+  letter-spacing: -0.01em;
+}
+.jg-rotate-desc {
+  margin: 0;
+  font: 400 clamp(0.9rem, 3.4vw, 1.05rem) / 1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: var(--jg-text-dim, rgba(244, 244, 246, 0.66));
+}
+@media (prefers-reduced-motion: no-preference) {
+  .jg-rotate-phone--to-landscape { animation: jg-rotate-to-landscape 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
+  .jg-rotate-phone--to-portrait { animation: jg-rotate-to-portrait 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
+}
+@keyframes jg-rotate-to-landscape {
+  0%, 22% { transform: rotate(0deg); }
+  55%, 78% { transform: rotate(-90deg); }
+  100% { transform: rotate(-90deg); }
+}
+@keyframes jg-rotate-to-portrait {
+  0%, 22% { transform: rotate(-90deg); }
+  55%, 78% { transform: rotate(0deg); }
+  100% { transform: rotate(0deg); }
+}
+`;
+function ensureStyle() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(STYLE_ID) !== null)
+        return;
+    const el = document.createElement("style");
+    el.id = STYLE_ID;
+    el.textContent = ROTATE_CSS;
+    document.head.appendChild(el);
+}
+function PhoneGlyph({ accent }) {
+    return (_jsxs("svg", { width: "96", height: "96", viewBox: "0 0 96 96", fill: "none", "aria-hidden": true, focusable: "false", children: [_jsx("rect", { x: "34", y: "10", width: "28", height: "52", rx: "6", stroke: accent, strokeWidth: "3", fill: "none" }), _jsx("rect", { x: "39", y: "18", width: "18", height: "34", rx: "2", fill: accent, opacity: "0.22" }), _jsx("circle", { cx: "48", cy: "57.5", r: "1.8", fill: accent }), _jsx("path", { d: "M22 74a30 30 0 0 1 52 0", stroke: accent, strokeWidth: "3", strokeLinecap: "round", fill: "none", opacity: "0.5" }), _jsx("path", { d: "M70 68l6 8-10 1z", fill: accent, opacity: "0.5" })] }));
+}
+/** Full-viewport, non-dismissible rotate-device gate shown when a game requires an orientation the device isn't in. */
+export function RotateDeviceScreen({ title = "Turn your device", description, requiredOrientation = "landscape", accent = "var(--jg-accent, #8ea2ff)", icon, className, style, }) {
+    ensureStyle();
+    const line = description ??
+        (requiredOrientation === "landscape"
+            ? "Rotate to landscape to play."
+            : "Rotate to portrait to play.");
+    const spin = requiredOrientation === "landscape" ? "jg-rotate-phone--to-landscape" : "jg-rotate-phone--to-portrait";
+    return (_jsx("div", { className: className === undefined ? "jg-rotate-root" : `jg-rotate-root ${className}`, style: style, "data-jg-orientation-gate": requiredOrientation, role: "dialog", "aria-modal": "true", "aria-label": title, onPointerDownCapture: (e) => e.stopPropagation(), onTouchStartCapture: (e) => e.stopPropagation(), children: _jsxs("div", { className: "jg-rotate-inner", children: [_jsx("div", { className: `jg-rotate-phone ${spin}`, children: icon ?? _jsx(PhoneGlyph, { accent: accent }) }), _jsx("h2", { className: "jg-rotate-title", children: title }), _jsx("p", { className: "jg-rotate-desc", children: line })] }) }));
+}

package/dist/settings.d.ts

@@ -8,6 +8,7 @@ export declare function SettingsProvider({ store, children }: {
 export declare function useSettingsStore(): SettingsStore;
 /** Read + write one persisted setting; re-renders when the value changes anywhere. */
 export declare function useSetting<T extends SettingValue>(id: string, fallback: T): readonly [T, (value: SettingValue) => void];
+/** One editable setting rendered in a settings menu category. */
 export interface SettingsRow {
     id: string;
     label: string;
@@ -20,6 +21,7 @@ export interface SettingsRow {
     format?: (value: number) => string;
     set: (value: SettingValue) => void;
 }
+/** One rebindable action row rendered in the controls settings category. */
 export interface SettingsKeybindRow {
     action: string;
     label: string;
@@ -28,6 +30,7 @@ export interface SettingsKeybindRow {
     rebind: (code: string) => void;
     reset: () => void;
 }
+/** A settings menu category with its rows and keybinds, ready to render. */
 export interface SettingsCategoryView {
     id: SettingCategory;
     label: string;

package/dist/social.d.ts

@@ -24,7 +24,7 @@ export declare function AddFriendButton({ toUserId, className, children, onReque
     children?: ReactNode;
     onRequested?: (requestId: string) => void;
     onRejected?: (reason: string) => void;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 export declare function FriendRequestsList({ className, rowClassName, acceptClassName, declineClassName, emptyState, renderRequest, }: {
     className?: string;
     rowClassName?: string;
@@ -32,7 +32,7 @@ export declare function FriendRequestsList({ className, rowClassName, acceptClas
     declineClassName?: string;
     emptyState?: ReactNode;
     renderRequest?: (request: FriendRequestEntry) => ReactNode;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 export declare function PartyMemberRow({ member, className, dotClassName, children, }: {
     member: PartyMemberEntry;
     className?: string;
@@ -70,7 +70,7 @@ export declare function InviteToWorldButton({ toUserId, target, className, child
     children?: ReactNode;
     onInvited?: (inviteId: string) => void;
     onRejected?: (reason: string) => void;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
 export declare function WorldBrowser({ listings, onJoin, className, rowClassName, joinClassName, emptyState, renderListing, }: {
     listings: readonly SessionListing[];
     onJoin: (listing: SessionListing) => void;

package/dist/social.js

@@ -18,9 +18,12 @@ export function FriendsList({ className, rowClassName, dotClassName, emptyState,
 }
 export function AddFriendButton({ toUserId, className, children, onRequested, onRejected, }) {
     const ctx = useGameContext();
-    const denied = ctx.game.social.friends.canRequest(ctx.player.userId, toUserId);
+    const social = ctx.game.social;
+    if (social === undefined)
+        return null;
+    const denied = 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);
+            const result = social.friends.request(ctx.player.userId, toUserId);
             if ("reason" in result)
                 onRejected?.(result.reason);
             else
@@ -30,9 +33,12 @@ export function AddFriendButton({ toUserId, className, children, onRequested, on
 export function FriendRequestsList({ className, rowClassName, acceptClassName, declineClassName, emptyState, renderRequest, }) {
     const ctx = useGameContext();
     const requests = useFriendRequests();
+    const social = ctx.game.social;
+    if (social === undefined)
+        return null;
     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))) }));
+            : 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: () => social.friends.accept(ctx.player.userId, request.requestId), children: "Accept" }), _jsx("button", { type: "button", className: declineClassName, "data-decline": true, onClick: () => 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] }));
@@ -46,33 +52,45 @@ export function PartyFrame({ className, rowClassName, dotClassName, emptyState,
 export function PartyInviteToast({ className, acceptClassName, declineClassName, renderInvite, }) {
     const ctx = useGameContext();
     const invites = usePartyInvites();
+    const social = ctx.game.social;
+    if (social === undefined)
+        return null;
     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))) }));
+    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: () => social.party.accept(ctx.player.userId, invite.inviteId), children: "Join" }), _jsx("button", { type: "button", className: declineClassName, "data-decline": true, onClick: () => social.party.decline(ctx.player.userId, invite.inviteId), children: "Decline" })] }, invite.inviteId))) }));
 }
 export function LeavePartyButton({ className, children, }) {
     const ctx = useGameContext();
     const members = useParty();
+    const social = ctx.game.social;
+    if (social === undefined)
+        return null;
     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" }));
+    return (_jsx("button", { type: "button", className: className, "data-leave-party": true, onClick: () => social.party.leave(ctx.player.userId), children: children ?? "Leave party" }));
 }
 export function WorldInviteToast({ className, acceptClassName, declineClassName, onAccepted, renderInvite, }) {
     const ctx = useGameContext();
     const invites = useWorldInvites();
+    const social = ctx.game.social;
+    if (social === undefined)
+        return null;
     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);
+                        const result = 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))) }));
+                    }, children: "Join" }), _jsx("button", { type: "button", className: declineClassName, "data-decline": true, onClick: () => 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);
+    const social = ctx.game.social;
+    if (social === undefined)
+        return null;
+    const denied = 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);
+            const result = social.worldInvites.invite(ctx.player.userId, toUserId, target);
             if ("reason" in result)
                 onRejected?.(result.reason);
             else
@@ -107,10 +125,13 @@ export function QuickMatchButton({ listings, onJoin, onNoMatch, filter, classNam
 }
 export function EmoteWheel({ emotes, radius, open = true, className, emoteClassName, onPlayed, onRejected, renderEmote, }) {
     const ctx = useGameContext();
+    const social = ctx.game.social;
+    if (social === undefined)
+        return null;
     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);
+                const result = social.emotes.play(ctx.player.userId, emoteId, radius);
                 if ("reason" in result)
                     onRejected?.(result.reason);
                 else