@chatwarden/player-react 0.0.0-stage → 0.1.3

package/src/styles.css

@@ -0,0 +1,500 @@
+/*
+ * @chatwarden/player-react
+ *
+ * One small stylesheet. Every colour, size, radius and space is a --cw-* custom property with a light and a dark default
+ * (light-dark()); every rule is scoped under .cw-player. Nothing is injected at run time, so a strict Content-Security-Policy
+ * needs nothing more than permission to load this file.
+ *
+ * Theming: set any --cw-* token on any element above the components (body, a wrapper), on .cw-player, or on the className you
+ * pass. The stylesheet never declares a public --cw-* name itself: the defaults sit under private --cwd-* names (declared with
+ * :where(), so any rule of yours wins whatever its order) and every rule reads var(--cw-x, var(--cwd-x)): your value if there is
+ * one anywhere up the chain, the default if not. A custom property declared on an element beats the value it inherits, so
+ * declaring --cw-* on .cw-player here would have hidden whatever the page sets above it. A theme is chosen by the `theme` prop
+ * (data-cw-theme="light|dark" on .cw-player), by the same attribute on any ancestor, or, by default, by the player's
+ * prefers-color-scheme. --cw-font is the one token with no default: it is read as var(--cw-font, inherit), so the font is the
+ * game's own unless you set it.
+ *
+ * It is neutral on purpose: it sits inside a game, so it takes the game's font (inherit) and uses a quiet grey and white base.
+ * To make it look like your game, set three things: --cw-surface (the base), --cw-accent (your next action) and --cw-radius.
+ * Every other token has a default that works on them.
+ *
+ * Colour only where it means something:
+ *   accent  the one next action, a link, a choice you made, and the focus ring
+ *   red     a failure, and the red side of a referee card
+ *   yellow  the yellow side of a referee card
+ * The referee card is the one signature detail, the same as in the moderator hub: yellow for a warning, half yellow and half red
+ * for a restriction, red for a ban, a dashed outline for a note. A sanction looks the same to staff and to the player.
+ */
+
+/* ---- Tokens ------------------------------------------------------------------------------------------------------ */
+:where(.cw-player) {
+  /* The defaults, under private names: --cwd-x is what --cw-x falls back to (see the top of this file). */
+  color-scheme: light dark;
+
+  /* Neutral base: the panel, the sunken well, the lines, and the text */
+  --cwd-surface: light-dark(#ffffff, #151c28);
+  --cwd-surface-sunken: light-dark(#eef0f4, #111722);
+  --cwd-border: light-dark(#e0e3ea, #242d3c);
+  --cwd-border-strong: light-dark(#7a8397, #6b7893);
+  --cwd-ink: light-dark(#151b27, #e8ebf1);
+  --cwd-ink-muted: light-dark(#4f5a6e, #9ba4b6);
+
+  /* The one accent: your next action, a link, a choice, the focus ring */
+  --cwd-accent: light-dark(#2950d3, #7d9bff);
+  --cwd-accent-ink: light-dark(#ffffff, #0e131c);
+  --cwd-accent-soft: light-dark(#e7ecfb, #1d2847);
+
+  /* Red: a failure. Yellow: the yellow of a referee card. Both are also the card. */
+  --cwd-red: light-dark(#c42f3b, #ff6b74);
+  --cwd-red-soft: light-dark(#fbe4e6, #3a1a1f);
+  --cwd-yellow: light-dark(#e5ad00, #f2c84b);
+
+  /* The ink every shadow and backdrop is made from */
+  --cwd-shadow-ink: light-dark(#151b27, #000000);
+
+  /* Type: the font is the game's own (there is no --cwd-font: --cw-font is read with an inherit fallback; set it to use another) */
+  --cwd-text-s: 0.8125rem;
+  --cwd-text-m: 0.9375rem;
+  --cwd-text-l: 1.125rem;
+  --cwd-leading: 1.5;
+
+  /* Shape and space */
+  --cwd-radius: 10px;
+  --cwd-radius-s: 6px;
+  --cwd-border-width: 1px;
+  --cwd-space-1: 0.25rem;
+  --cwd-space-2: 0.5rem;
+  --cwd-space-3: 0.75rem;
+  --cwd-space-4: 1rem;
+  --cwd-space-5: 1.5rem;
+  --cwd-control-height: 2.5rem;
+
+  /* A dialog is at most this wide (and never wider than the screen), and sits above the game */
+  --cwd-dialog-width: 30rem;
+  --cwd-layer: 1000;
+}
+
+/* The theme prop, or the same attribute on any ancestor, picks one scheme. Without either, the player's setting decides. */
+[data-cw-theme='light'] .cw-player,
+.cw-player[data-cw-theme='light'] {
+  color-scheme: light;
+}
+[data-cw-theme='dark'] .cw-player,
+.cw-player[data-cw-theme='dark'] {
+  color-scheme: dark;
+}
+/* ---- End of tokens ----------------------------------------------------------------------------------------------- */
+
+/* ---- Fallback ---------------------------------------------------------------------------------------------------- */
+/* A browser without light-dark() (before 2024) would drop every colour token above. This gives it the light values; it follows
+   neither prefers-color-scheme nor the theme prop. */
+@supports not (color: light-dark(#000, #fff)) {
+  :where(.cw-player) {
+    --cwd-surface: #ffffff;
+    --cwd-surface-sunken: #eef0f4;
+    --cwd-border: #e0e3ea;
+    --cwd-border-strong: #7a8397;
+    --cwd-ink: #151b27;
+    --cwd-ink-muted: #4f5a6e;
+    --cwd-accent: #2950d3;
+    --cwd-accent-ink: #ffffff;
+    --cwd-accent-soft: #e7ecfb;
+    --cwd-red: #c42f3b;
+    --cwd-red-soft: #fbe4e6;
+    --cwd-yellow: #e5ad00;
+    --cwd-shadow-ink: #151b27;
+  }
+}
+/* ---- End of fallback --------------------------------------------------------------------------------------------- */
+
+/* ---- Base -------------------------------------------------------------------------------------------------------- */
+.cw-player {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  background: var(--cw-surface, var(--cwd-surface));
+  color: var(--cw-ink, var(--cwd-ink));
+  font-family: var(--cw-font, inherit);
+  font-size: var(--cw-text-m, var(--cwd-text-m));
+  line-height: var(--cw-leading, var(--cwd-leading));
+  overflow-wrap: anywhere;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+.cw-player *,
+.cw-player *::before,
+.cw-player *::after {
+  box-sizing: inherit;
+}
+.cw-player h2,
+.cw-player h3,
+.cw-player p,
+.cw-player ul,
+.cw-player ol,
+.cw-player dl,
+.cw-player dd,
+.cw-player fieldset {
+  margin: 0;
+  padding: 0;
+}
+.cw-player ul {
+  list-style: none;
+}
+.cw-player :is(a, button, input, textarea, [tabindex]):focus-visible {
+  outline: 2px solid var(--cw-accent, var(--cwd-accent));
+  outline-offset: 2px;
+  border-radius: var(--cw-radius-s, var(--cwd-radius-s));
+}
+/* The heading that takes focus is a place to start reading, not a control: no ring of its own. */
+.cw-player .cw-title:focus {
+  outline: none;
+}
+
+/* ---- The referee card: the same as the moderator hub's -------------------------------------------------------------- */
+.cw-player .cw-card {
+  display: inline-block;
+  flex: none;
+  width: 0.875rem;
+  height: 1.1875rem;
+  border-radius: 2.5px;
+  transform: rotate(-8deg);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--cw-shadow-ink, var(--cwd-shadow-ink)) 25%, transparent);
+}
+.cw-player .cw-card--warning {
+  background: var(--cw-yellow, var(--cwd-yellow));
+}
+.cw-player .cw-card--restriction {
+  background: linear-gradient(135deg, var(--cw-yellow, var(--cwd-yellow)) 50%, var(--cw-red, var(--cwd-red)) 50%);
+}
+.cw-player .cw-card--ban {
+  background: var(--cw-red, var(--cwd-red));
+}
+.cw-player .cw-card--note {
+  border: 1.5px dashed var(--cw-ink-muted, var(--cwd-ink-muted));
+  background: transparent;
+  box-shadow: none;
+}
+
+/* ---- Text -------------------------------------------------------------------------------------------------------- */
+.cw-player .cw-title {
+  font-size: var(--cw-text-l, var(--cwd-text-l));
+  font-weight: 600;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+.cw-player .cw-kind {
+  font-size: var(--cw-text-m, var(--cwd-text-m));
+  font-weight: 600;
+}
+.cw-player .cw-dialog > .cw-title {
+  margin-bottom: var(--cw-space-3, var(--cwd-space-3));
+}
+.cw-player .cw-head {
+  display: flex;
+  align-items: center;
+  gap: var(--cw-space-3, var(--cwd-space-3));
+  margin-bottom: var(--cw-space-3, var(--cwd-space-3));
+}
+.cw-player .cw-body,
+.cw-player .cw-summary {
+  margin-bottom: var(--cw-space-3, var(--cwd-space-3));
+}
+.cw-player .cw-position,
+.cw-player .cw-hint,
+.cw-player .cw-lines-label,
+.cw-player .cw-ref {
+  color: var(--cw-ink-muted, var(--cwd-ink-muted));
+  font-size: var(--cw-text-s, var(--cwd-text-s));
+}
+.cw-player .cw-position {
+  margin-bottom: var(--cw-space-2, var(--cwd-space-2));
+}
+/* Drawn even when empty (it is a live region): an empty one takes no room. */
+.cw-player .cw-position:empty {
+  margin: 0;
+}
+.cw-player .cw-hint {
+  margin-bottom: var(--cw-space-3, var(--cwd-space-3));
+}
+.cw-player .cw-state {
+  color: var(--cw-ink-muted, var(--cwd-ink-muted));
+}
+.cw-player .cw-section > * + * {
+  margin-top: var(--cw-space-3, var(--cwd-space-3));
+}
+
+.cw-player .cw-facts {
+  margin-bottom: var(--cw-space-3, var(--cwd-space-3));
+}
+.cw-player .cw-fact + .cw-fact {
+  margin-top: var(--cw-space-2, var(--cwd-space-2));
+}
+.cw-player .cw-facts dt {
+  color: var(--cw-ink-muted, var(--cwd-ink-muted));
+  font-size: var(--cw-text-s, var(--cwd-text-s));
+}
+.cw-player .cw-facts dd {
+  overflow-wrap: anywhere;
+}
+
+.cw-player .cw-lines {
+  display: grid;
+  gap: var(--cw-space-2, var(--cwd-space-2));
+  margin-bottom: var(--cw-space-3, var(--cwd-space-3));
+}
+.cw-player .cw-lines li {
+  padding: var(--cw-space-2, var(--cwd-space-2)) var(--cw-space-3, var(--cwd-space-3));
+  border-left: 3px solid var(--cw-border-strong, var(--cwd-border-strong));
+  border-radius: var(--cw-radius-s, var(--cwd-radius-s));
+  background: var(--cw-surface-sunken, var(--cwd-surface-sunken));
+}
+.cw-player .cw-line-day {
+  display: block;
+  color: var(--cw-ink-muted, var(--cwd-ink-muted));
+  font-size: var(--cw-text-s, var(--cwd-text-s));
+}
+.cw-player .cw-line-text {
+  overflow-wrap: anywhere;
+}
+
+.cw-player .cw-rules {
+  padding-left: var(--cw-space-5, var(--cwd-space-5));
+}
+.cw-player .cw-rules li + li {
+  margin-top: var(--cw-space-3, var(--cwd-space-3));
+}
+.cw-player .cw-rule-text {
+  overflow-wrap: anywhere;
+}
+
+.cw-player .cw-items {
+  display: grid;
+  gap: var(--cw-space-3, var(--cwd-space-3));
+}
+.cw-player .cw-item {
+  padding: var(--cw-space-4, var(--cwd-space-4));
+  border: var(--cw-border-width, var(--cwd-border-width)) solid var(--cw-border, var(--cwd-border));
+  border-radius: var(--cw-radius, var(--cwd-radius));
+  background: var(--cw-surface, var(--cwd-surface));
+}
+
+.cw-player .cw-restricted .cw-text {
+  flex: 1 1 10rem;
+  min-width: 0;
+}
+.cw-player .cw-restricted {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--cw-space-2, var(--cwd-space-2)) var(--cw-space-3, var(--cwd-space-3));
+  padding: var(--cw-space-2, var(--cwd-space-2)) var(--cw-space-3, var(--cwd-space-3));
+  border: var(--cw-border-width, var(--cwd-border-width)) solid var(--cw-border, var(--cwd-border));
+  border-radius: var(--cw-radius-s, var(--cwd-radius-s));
+  background: var(--cw-surface-sunken, var(--cwd-surface-sunken));
+}
+
+/* ---- Links and buttons ------------------------------------------------------------------------------------------- */
+.cw-player .cw-link {
+  color: var(--cw-accent, var(--cwd-accent));
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+.cw-player .cw-appeal {
+  margin-bottom: var(--cw-space-3, var(--cwd-space-3));
+}
+.cw-player .cw-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cw-space-2, var(--cwd-space-2));
+  margin-top: var(--cw-space-4, var(--cwd-space-4));
+}
+.cw-player .cw-btn {
+  min-height: var(--cw-control-height, var(--cwd-control-height));
+  padding: var(--cw-space-1, var(--cwd-space-1)) var(--cw-space-4, var(--cwd-space-4));
+  border: var(--cw-border-width, var(--cwd-border-width)) solid var(--cw-border-strong, var(--cwd-border-strong));
+  border-radius: var(--cw-radius-s, var(--cwd-radius-s));
+  background: var(--cw-surface, var(--cwd-surface));
+  color: var(--cw-ink, var(--cwd-ink));
+  font: inherit;
+  font-weight: 600;
+  white-space: normal;
+  cursor: pointer;
+}
+.cw-player .cw-btn:hover {
+  background: var(--cw-surface-sunken, var(--cwd-surface-sunken));
+}
+.cw-player .cw-btn--primary {
+  border-color: var(--cw-accent, var(--cwd-accent));
+  background: var(--cw-accent, var(--cwd-accent));
+  color: var(--cw-accent-ink, var(--cwd-accent-ink));
+}
+.cw-player .cw-btn--primary:hover {
+  background: var(--cw-accent, var(--cwd-accent));
+  filter: brightness(1.08);
+}
+/* A busy button is dimmed and ignores clicks but keeps focus (it is not :disabled, which would drop it). */
+.cw-player .cw-btn[aria-disabled='true'] {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* ---- Errors ------------------------------------------------------------------------------------------------------ */
+.cw-player .cw-error,
+.cw-player .cw-field-error {
+  margin-bottom: var(--cw-space-3, var(--cwd-space-3));
+  padding: var(--cw-space-3, var(--cwd-space-3));
+  border: var(--cw-border-width, var(--cwd-border-width)) solid var(--cw-red, var(--cwd-red));
+  border-radius: var(--cw-radius-s, var(--cwd-radius-s));
+  background: var(--cw-red-soft, var(--cwd-red-soft));
+  color: var(--cw-red, var(--cwd-red));
+  overflow-wrap: anywhere;
+}
+.cw-player .cw-error .cw-btn {
+  margin-top: var(--cw-space-2, var(--cwd-space-2));
+}
+
+/* ---- The dialog -------------------------------------------------------------------------------------------------- */
+.cw-player .cw-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: var(--cw-layer, var(--cwd-layer));
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  place-items: center;
+  padding: var(--cw-space-3, var(--cwd-space-3));
+  background: color-mix(in srgb, var(--cw-shadow-ink, var(--cwd-shadow-ink)) 55%, transparent);
+}
+.cw-player .cw-dialog {
+  width: min(var(--cw-dialog-width, var(--cwd-dialog-width)), 100%);
+  max-height: 100%;
+  overflow-y: auto;
+  padding: var(--cw-space-5, var(--cwd-space-5));
+  border: var(--cw-border-width, var(--cwd-border-width)) solid var(--cw-border, var(--cwd-border));
+  border-radius: var(--cw-radius, var(--cwd-radius));
+  background: var(--cw-surface, var(--cwd-surface));
+  color: var(--cw-ink, var(--cwd-ink));
+  box-shadow: 0 12px 32px color-mix(in srgb, var(--cw-shadow-ink, var(--cwd-shadow-ink)) 35%, transparent);
+  animation: cw-in 0.15s ease-out;
+}
+.cw-player .cw-dialog:focus {
+  outline: none;
+}
+@keyframes cw-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* ---- The report form --------------------------------------------------------------------------------------------- */
+.cw-player .cw-field {
+  min-width: 0;
+  margin-bottom: var(--cw-space-3, var(--cwd-space-3));
+}
+.cw-player .cw-field > .cw-hint {
+  margin: var(--cw-space-1, var(--cwd-space-1)) 0 0;
+}
+.cw-player .cw-extra {
+  min-width: 0;
+  margin-bottom: var(--cw-space-3, var(--cwd-space-3));
+}
+.cw-player .cw-field > .cw-field-error {
+  margin: var(--cw-space-2, var(--cwd-space-2)) 0 0;
+}
+.cw-player .cw-quote {
+  margin: 0 0 var(--cw-space-3, var(--cwd-space-3));
+  padding: var(--cw-space-2, var(--cwd-space-2)) var(--cw-space-3, var(--cwd-space-3));
+  border-left: 3px solid var(--cw-border-strong, var(--cwd-border-strong));
+  background: var(--cw-surface-sunken, var(--cwd-surface-sunken));
+  overflow-wrap: anywhere;
+}
+.cw-player .cw-live:not(:empty) {
+  display: grid;
+  gap: var(--cw-space-2, var(--cwd-space-2));
+  margin-bottom: var(--cw-space-3, var(--cwd-space-3));
+}
+.cw-player .cw-label {
+  display: block;
+  margin-bottom: var(--cw-space-1, var(--cwd-space-1));
+  font-weight: 600;
+}
+.cw-player textarea,
+.cw-player select {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  padding: var(--cw-space-2, var(--cwd-space-2)) var(--cw-space-3, var(--cwd-space-3));
+  border: var(--cw-border-width, var(--cwd-border-width)) solid var(--cw-border-strong, var(--cwd-border-strong));
+  border-radius: var(--cw-radius-s, var(--cwd-radius-s));
+  background: var(--cw-surface, var(--cwd-surface));
+  color: var(--cw-ink, var(--cwd-ink));
+  font: inherit;
+}
+.cw-player textarea {
+  resize: vertical;
+}
+.cw-player select {
+  min-height: var(--cw-control-height, var(--cwd-control-height));
+  text-overflow: ellipsis;
+}
+/* A reason chosen is a choice you made: the accent, as the old radio was. */
+.cw-player select:has(option:checked:not([value=''])) {
+  border-color: var(--cw-accent, var(--cwd-accent));
+  background: var(--cw-accent-soft, var(--cwd-accent-soft));
+}
+.cw-player select[aria-invalid='true'] {
+  border-color: var(--cw-red, var(--cwd-red));
+}
+/* The one door to the advanced part: a text button, small, in the accent (it is the next action). */
+.cw-player .cw-linkbtn {
+  min-height: 2rem;
+  margin: 0 0 var(--cw-space-3, var(--cwd-space-3));
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--cw-accent, var(--cwd-accent));
+  font: inherit;
+  font-size: var(--cw-text-s, var(--cwd-text-s));
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  cursor: pointer;
+}
+/* A thumb needs the same target as the other buttons. */
+@media (pointer: coarse) {
+  .cw-player .cw-linkbtn {
+    min-height: var(--cw-control-height, var(--cwd-control-height));
+  }
+}
+.cw-player textarea + .cw-hint {
+  margin-top: var(--cw-space-1, var(--cwd-space-1));
+}
+.cw-player .cw-result {
+  padding: var(--cw-space-3, var(--cwd-space-3));
+  border: var(--cw-border-width, var(--cwd-border-width)) solid var(--cw-border, var(--cwd-border));
+  border-radius: var(--cw-radius-s, var(--cwd-radius-s));
+  background: var(--cw-surface-sunken, var(--cwd-surface-sunken));
+}
+
+/* ---- Motion and forced colours ----------------------------------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .cw-player .cw-dialog {
+    animation: none;
+  }
+}
+@media (forced-colors: active) {
+  .cw-player .cw-card {
+    border: 1px solid CanvasText;
+  }
+  .cw-player .cw-btn,
+  .cw-player .cw-dialog,
+  .cw-player .cw-item {
+    border: 1px solid CanvasText;
+  }
+}

package/src/transport.ts

@@ -0,0 +1,134 @@
+/**
+ * One call to the player routes. `path` is the route path with no prefix (`/notices`); the transport adds whatever prefix its
+ * server uses. `query` values that are `undefined` are left out. `body` is sent as JSON.
+ *
+ * This is the same shape `@chatwarden/hub-react` uses for the staff routes. It is written out here so this package does not
+ * depend on that one; a test keeps the two assignable to each other.
+ */
+export interface TransportRequest {
+  method: string;
+  path: string;
+  query?: Record<string, string | number | undefined>;
+  body?: unknown;
+  /** Lets the caller abandon the call (fetch only; the in-page router answers at once). */
+  signal?: AbortSignal;
+  /** Lets the call finish after the page is gone (fetch `keepalive`). Ignored by the in-page router. */
+  keepalive?: boolean;
+}
+
+/**
+ * What came back: any HTTP status is an answer, not an error. `headers` are lower-case. `body` is the parsed JSON, a string
+ * for a text document, or null when there was none.
+ */
+export interface TransportResponse {
+  status: number;
+  headers: Record<string, string>;
+  body: unknown;
+}
+
+/**
+ * How the components reach the player routes. It resolves with the response whatever the status, and rejects only when no
+ * answer arrived (a dropped connection, a handler that threw); the client turns that into a `network` error.
+ */
+export type Transport = (req: TransportRequest) => Promise<TransportResponse>;
+
+/** What `routerTransport` sends to a `createRouter(...)` handler: the kit's `KitRequest`, written out structurally. */
+export interface RouterRequest {
+  method: string;
+  path: string;
+  query: Record<string, string>;
+  headers: Record<string, string>;
+  body: undefined;
+  rawBody?: string;
+}
+
+/** What a `createRouter(...)` handler answers: the kit's `KitResponse`, written out structurally. */
+export interface RouterResponse {
+  status: number;
+  headers?: Record<string, string>;
+  body: unknown;
+}
+
+/** The query as strings, with `undefined` values dropped. */
+function queryOf(query: TransportRequest['query']): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const [key, value] of Object.entries(query ?? {})) if (value !== undefined) out[key] = String(value);
+  return out;
+}
+
+function lowerCased(headers: Record<string, string> | undefined): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const [key, value] of Object.entries(headers ?? {})) out[key.toLowerCase()] = value;
+  return out;
+}
+
+export interface RouterTransportOptions {
+  /** Sent with every request, for an `identify` hook that reads a header. */
+  headers?: Record<string, string>;
+}
+
+/**
+ * A transport that calls `createRouter(playerRoutes(...))` directly, in the same process: no network. A demo and this
+ * package's tests use it, so the components run the real player routes. A response body goes through JSON on the way out, so
+ * the components see exactly what a fetch would deliver.
+ */
+export function routerTransport(handle: (req: RouterRequest) => Promise<RouterResponse>, options: RouterTransportOptions = {}): Transport {
+  return async (req) => {
+    const request: RouterRequest = {
+      method: req.method,
+      path: req.path,
+      query: queryOf(req.query),
+      headers: { ...options.headers },
+      body: undefined,
+    };
+    // The routes read `rawBody`, never `body` (a pre-parsed body would skip the size cap and the key check).
+    if (req.body !== undefined) request.rawBody = JSON.stringify(req.body);
+    const res = await handle(request);
+    const body: unknown = typeof res.body === 'string' ? res.body : res.body === undefined ? null : (JSON.parse(JSON.stringify(res.body)) as unknown);
+    return { status: res.status, headers: lowerCased(res.headers), body };
+  };
+}
+
+export interface FetchTransportOptions {
+  /** Where the player routes are mounted: `https://host/player` or `/player`. No trailing slash needed. */
+  baseUrl: string;
+  /** Sent with every request (a session token, for example). */
+  headers?: Record<string, string>;
+  /** `include` sends cookies to another origin. Default: the browser's (`same-origin`). */
+  credentials?: RequestCredentials;
+  /** For tests, or a polyfill. Default: the global `fetch`. */
+  fetch?: typeof fetch;
+}
+
+/** The default transport for a real game: `fetch` against the routes your server mounts. */
+export function fetchTransport(options: FetchTransportOptions): Transport {
+  if (typeof options?.baseUrl !== 'string') throw new TypeError('fetchTransport: baseUrl is required (for example "/player")');
+  // "/" and "" both mean the server root: routes are then "/notices", "/record", ...
+  const base = options.baseUrl.replace(/\/+$/, '');
+  return async (req) => {
+    const params = new URLSearchParams(queryOf(req.query)).toString();
+    const url = `${base}${req.path}${params === '' ? '' : `?${params}`}`;
+    const headers: Record<string, string> = { accept: 'application/json', ...options.headers };
+    const init: RequestInit = { method: req.method, headers };
+    if (req.body !== undefined) {
+      headers['content-type'] = 'application/json';
+      init.body = JSON.stringify(req.body);
+    }
+    if (options.credentials !== undefined) init.credentials = options.credentials;
+    if (req.signal !== undefined) init.signal = req.signal;
+    if (req.keepalive === true) init.keepalive = true;
+    const res = await (options.fetch ?? globalThis.fetch)(url, init);
+    const headersOut: Record<string, string> = {};
+    res.headers.forEach((value, key) => (headersOut[key.toLowerCase()] = value));
+    const text = await res.text();
+    let body: unknown = text === '' ? null : text;
+    if (text !== '' && /\bjson\b/i.test(headersOut['content-type'] ?? '')) {
+      try {
+        body = JSON.parse(text) as unknown;
+      } catch {
+        body = text;
+      }
+    }
+    return { status: res.status, headers: headersOut, body };
+  };
+}