@origingame/engine 0.0.0-stage → 0.1.0

package/shell/README.md

@@ -0,0 +1,22 @@
+# The player shell
+
+Everything in an exported game page that is not the game (docs/web-export.md
+is the full contract). `og build` inlines the boot markup, `brand.ts`'s
+marks and the page configuration into `index.html` and bundles these
+modules next to the engine Worker.
+
+| File | Role |
+|---|---|
+| `page.ts` | the main thread (`play.js`): boot splash and real progress, the play gate (audio unlock, fullscreen, wake lock), letterbox and safe area, the engine Worker, the audio worklet, the Player link and the platform bridge |
+| `player.ts` | Player protocol 2, game side: `hello`, `loading`, `ready` on the first drawn frame, `fail`, `crash`, `sample`, `event`; hears `hello`, `start`, `gesture`, `pause`, `resume`; `request(method, args)` sends a `call` and resolves with its `result` (matched by id) |
+| `platform.ts` | `og.platform` on the web: the Worker's platform calls answered through the Player (`save.get`/`save.set` hold the store, `leaderboard.submit`/`top`, telemetry as `event`s), held until the Player's `hello` when framed, and the browser's storage (`src/platform-local.ts`) where there is no Player or no such method; what protocol 2 lacks is `docs/platform-asks.md` |
+| `wire.ts` | the platform's `og-probe` wire (probe protocol 5) over the engine's in-page probe, origin-checked |
+| `sw.ts` | the publish build's service worker: the whole build precached under its content hash |
+| `brand.ts`, `brand/`, `shell.css` | the brand marks, motion and tokens (vendored from the platform's `packages/brand`) |
+
+Rules: post only to `window.parent` with this page's own origin, hear only
+`window.parent` at that origin; game code never reaches the DOM, a cookie
+or another origin (it asks the engine, and the shell answers). Tests:
+`tests/web/player.ts` (protocol 2 and the platform bridge in headless
+Chrome), `tests/web/wire.ts`, `tests/web/export.ts`, and
+`tests/platform.test.ts` for the local platform.

package/shell/brand/README.md

@@ -0,0 +1,23 @@
+# Vendored brand (do not edit)
+
+The platform's brand package (`origingame/origingame`, `packages/brand`) is
+the source of every file here; the engine introduces no second mark, palette
+or motion (design §9, AGENTS.md "Brand is one ink"). Copied at platform
+revision `ef1555b83`:
+
+| File | Source |
+|---|---|
+| `origin-mark.svg` | `packages/brand/motion/origin-mark.svg` (generated there from `source/origin-ai.svg`) |
+| `origin-motion.css` | `packages/brand/motion/origin-motion.css` |
+| `mark-on-paper.svg` | `packages/brand/app-icon/mark-on-paper.svg` (the app-icon tile) |
+| `icon-192.png`, `icon-512.png` | `mark-on-paper.svg` rendered with `rsvg-convert -w N -h N` (the PWA's fallback icons) |
+| `tokens.css` | the dark-theme values the shell reads, from `packages/tokens/dist/{tokens,theme-dark}.css` |
+
+To refresh after a brand change, copy the files again from the platform
+checkout, re-render the two PNGs, update the revision above and rebuild.
+`og build` derives the shell's marks from `origin-mark.svg` (`genesis` for
+the boot splash, `progress` with the real load value, `drift` for the error
+card; the `engine` product mark for "Made with Origin Engine" is the
+symbol's inner arms and core ring, as the platform's `product-marks.ts`
+composes it) and inlines only the rules of those motions
+(`shell/brand.ts`).

package/shell/brand/mark-on-paper.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-label="Origin AI">
+<!-- Generated by packages/brand/generate-icons.sh from source/origin-ai.svg. Do not edit. -->
+<rect width="1024" height="1024" rx="224" fill="#ffffff"/>
+<g fill="#14161b" transform="translate(293.10 298.80) scale(1.14011)"><g><g id="galaxy-arms" transform="translate(0 370) scale(.1 -.1)"><path id="arm-1" d="M1818 3603 c-86 -5 -89 -23 -4 -23 281 0 650 -159 895 -386 575 -535 625 -1345 114 -1871 -337 -347 -808 -454 -1160 -264 -77 42 -75 36 15 -37 632 -510 1601 -50 1778 845 24 120 25 394 1 513 -131 662 -677 1149 -1366 1219 -100 11 -130 11 -273 4z"/><path id="arm-2" d="M1445 3334 c-804 -124 -1392 -855 -1325 -1646 12 -145 20 -176 20 -78 0 262 122 610 294 837 465 613 1290 781 1884 383 422 -283 614 -819 432 -1208 -59 -126 52 22 123 164 130 259 129 570 -3 842 -253 523 -814 801 -1425 706z"/><path id="arm-3" d="M1370 2805 c-721 -136 -1161 -918 -929 -1652 202 -642 832 -1099 1504 -1092 l90 1 -109 19 c-848 148 -1428 1006 -1184 1754 210 645 958 1022 1467 739 55 -31 37 -8 -43 53 -205 155 -531 228 -796 178z"/><path id="arm-4" d="M1103 2033 c-559 -736 133 -1785 1147 -1740 879 39 1545 813 1465 1703 l-8 89 -13 -115 c-110 -1000 -1083 -1633 -1941 -1262 -553 239 -851 879 -622 1335 37 73 34 72 -28 -10z"/></g><path id="origin-core" fill-rule="evenodd" d="M249 189 A55 55 0 1 1 139 189 A55 55 0 1 1 249 189 Z M209 189 A15 15 0 1 1 179 189 A15 15 0 1 1 209 189 Z"/></g></g>
+</svg>

package/shell/brand/origin-mark.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" class="og-mark" viewBox="-184 -184 364 364" fill="currentColor" role="img" aria-label="Origin AI">
+<!-- Generated by packages/brand/generate-icons.sh from source/origin-ai.svg. Do not edit. -->
+<g data-part="arms"><g data-part="outer"><g transform="translate(-194 181) scale(.1 -.1)"><path d="M1445 3334 c-804 -124 -1392 -855 -1325 -1646 12 -145 20 -176 20 -78 0 262 122 610 294 837 465 613 1290 781 1884 383 422 -283 614 -819 432 -1208 -59 -126 52 22 123 164 130 259 129 570 -3 842 -253 523 -814 801 -1425 706z"/><path d="M1103 2033 c-559 -736 133 -1785 1147 -1740 879 39 1545 813 1465 1703 l-8 89 -13 -115 c-110 -1000 -1083 -1633 -1941 -1262 -553 239 -851 879 -622 1335 37 73 34 72 -28 -10z"/></g></g><g data-part="inner"><g transform="translate(-194 181) scale(.1 -.1)"><path d="M1818 3603 c-86 -5 -89 -23 -4 -23 281 0 650 -159 895 -386 575 -535 625 -1345 114 -1871 -337 -347 -808 -454 -1160 -264 -77 42 -75 36 15 -37 632 -510 1601 -50 1778 845 24 120 25 394 1 513 -131 662 -677 1149 -1366 1219 -100 11 -130 11 -273 4z"/><path d="M1370 2805 c-721 -136 -1161 -918 -929 -1652 202 -642 832 -1099 1504 -1092 l90 1 -109 19 c-848 148 -1428 1006 -1184 1754 210 645 958 1022 1467 739 55 -31 37 -8 -43 53 -205 155 -531 228 -796 178z"/></g></g></g><g data-part="hub"><path fill-rule="evenodd" transform="translate(-194 -189)" d="M249 189 A55 55 0 1 1 139 189 A55 55 0 1 1 249 189 Z M209 189 A15 15 0 1 1 179 189 A15 15 0 1 1 209 189 Z"/></g>
+</svg>

package/shell/brand/origin-motion.css

@@ -0,0 +1,251 @@
+/* Origin AI brand motion: the one source for animating the symbol on every
+   surface (Portal and Ops through @origingame/ui, Kit's GUI and any static
+   page through motion/origin-mark.svg). Framework-free and monochrome.
+
+   Markup contract (motion/origin-mark.svg and @origingame/ui OriginMark):
+
+     <svg class="og-mark" data-motion="orbit" viewBox="-184 -184 364 364">
+       <g data-part="arms">
+         <g data-part="outer">…two outer arms…</g>
+         <g data-part="inner">…two inner arms…</g>
+       </g>
+       <g data-part="hub">…core ring…</g>
+     </svg>
+
+   The core ring's centre is the user-space origin, so every part rotates and
+   scales about it with the default `transform-origin: 0 0`. Animated parts
+   never carry a transform attribute of their own (CSS would replace it);
+   geometry offsets live on their children. The arms are not
+   2-fold symmetric (opposite arms differ by ~2% of the mark), so a loop only
+   joins at a full turn: nothing here ever rests at 180°.
+
+   Loop periods are motion parameters; durations and easings of one-off moves
+   come from @origingame/tokens, with fallbacks for pages without tokens. */
+
+.og-mark,
+.og-logo {
+  --og-out: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+  --og-spring: var(--ease-spring, cubic-bezier(0.34, 1.4, 0.64, 1));
+  --og-bounce: var(--ease-bounce, cubic-bezier(0.34, 1.7, 0.64, 1));
+  --og-dur-spring: var(--dur-spring, 520ms);
+  --og-dur-bounce: var(--dur-bounce, 640ms);
+}
+.og-mark {
+  display: block;
+  overflow: visible;
+  fill: currentColor;
+}
+.og-mark [data-part="ring"] {
+  fill: none;
+  stroke: currentColor;
+  opacity: 0;
+}
+
+/* spin: the whole symbol turns at a constant rate. The only motion for 12–20 px
+   (buttons, rows, cells); it moves the <svg> itself, so many can run at once. */
+.og-mark[data-motion="spin"] {
+  animation: og-spin 0.9s linear infinite;
+}
+
+/* orbit: indeterminate loading from 24 px. A full turn per cycle in two eased
+   half-turns; the inner arms lead and tuck in, the outer arms ease out, so
+   the blades never touch. */
+.og-mark[data-motion="orbit"] [data-part="arms"] {
+  animation: og-turn 3s cubic-bezier(0.62, 0, 0.32, 1) infinite;
+}
+.og-mark[data-motion="orbit"] [data-part="inner"] {
+  animation: og-lead 3s ease-in-out infinite;
+}
+.og-mark[data-motion="orbit"] [data-part="outer"] {
+  animation: og-lag 3s ease-in-out infinite;
+}
+.og-mark[data-motion="orbit"] [data-part="hub"] {
+  animation: og-tick 3s ease-in-out infinite;
+}
+
+/* genesis: plays once. The ring pops, the inner then the outer arms unfurl
+   from the centre and spring into place (launch, splash, first screen). */
+.og-mark[data-motion="genesis"] [data-part="hub"] {
+  animation: og-pop var(--og-dur-bounce) var(--og-bounce) both;
+}
+.og-mark[data-motion="genesis"] [data-part="inner"] {
+  animation: og-unfurl-inner 760ms var(--og-spring) 120ms both;
+}
+.og-mark[data-motion="genesis"] [data-part="outer"] {
+  animation: og-unfurl-outer 900ms var(--og-spring) 200ms both;
+}
+
+/* breathe: running (Sophon thinking, an Agent run). A very slow turn with the
+   three layers contracting out of phase. */
+.og-mark[data-motion="breathe"] [data-part="arms"] {
+  animation: og-spin 18s linear infinite;
+}
+.og-mark[data-motion="breathe"] [data-part="outer"] {
+  animation: og-breathe-outer 2.6s ease-in-out infinite;
+}
+.og-mark[data-motion="breathe"] [data-part="inner"] {
+  animation: og-breathe-inner 2.6s ease-in-out -0.25s infinite;
+}
+.og-mark[data-motion="breathe"] [data-part="hub"] {
+  animation: og-breathe-hub 2.6s ease-in-out -0.4s infinite;
+}
+
+/* beacon: needs you. The ring beats and ripples leave from the outer edge;
+   the arms nudge once a cycle. */
+.og-mark[data-motion="beacon"] [data-part="ring"] {
+  animation: og-ripple 2.2s var(--og-out) infinite;
+}
+.og-mark[data-motion="beacon"] [data-part="ring"] + [data-part="ring"] {
+  animation-delay: 1.1s;
+}
+.og-mark[data-motion="beacon"] [data-part="hub"] {
+  animation: og-beat 2.2s ease-out infinite;
+}
+.og-mark[data-motion="beacon"] [data-part="arms"] {
+  animation: og-nudge 2.2s ease-in-out infinite;
+}
+
+/* sweep: plays once. A feathered wedge follows the arms round and inks the
+   symbol in (empty states, section entrances). */
+.og-mark[data-motion="sweep"] [data-part="hub"] {
+  animation: og-pop 400ms var(--og-bounce) both;
+}
+.og-mark[data-motion="sweep"] [data-part="wipe"] {
+  animation: og-sweep 950ms cubic-bezier(0.45, 0, 0.2, 1) 120ms both;
+}
+.og-mark[data-motion="sweep"] [data-part="arms"] {
+  animation: og-settle 1.2s var(--og-out) 120ms both;
+}
+
+/* progress: determinate. The same wedge; set the wipe's stroke-dashoffset to
+   100 − percent. The remaining arms stay as a faint ghost; add data-complete
+   at 100 and the ring pops. */
+.og-mark[data-motion="progress"] [data-part="ghost"] {
+  opacity: 0.14;
+}
+.og-mark[data-motion="progress"] [data-part="wipe"] {
+  transition: stroke-dashoffset 240ms var(--og-out);
+}
+.og-mark[data-motion="progress"][data-complete] [data-part="hub"] {
+  animation: og-done var(--og-dur-bounce) var(--og-bounce);
+}
+
+/* complete: plays once when something really happened (published). The arms
+   whirl into a tight knot, the ring swells with a burst, then all springs back. */
+.og-mark[data-motion="complete"] [data-part="arms"] {
+  animation: og-collapse 1.5s cubic-bezier(0.5, 0, 0.75, 0) both;
+}
+.og-mark[data-motion="complete"] [data-part="hub"] {
+  animation: og-swell 1.5s ease-out both;
+}
+.og-mark[data-motion="complete"] [data-part="ring"] {
+  animation: og-burst 1.5s var(--og-out) both;
+}
+
+/* drift: offline or unavailable. Dimmed; the layers sway apart and stall. */
+.og-mark[data-motion="drift"] {
+  opacity: 0.45;
+}
+.og-mark[data-motion="drift"] [data-part="outer"] {
+  animation: og-drift-outer 3.4s ease-in-out infinite;
+}
+.og-mark[data-motion="drift"] [data-part="inner"] {
+  animation: og-drift-inner 3.4s ease-in-out infinite;
+}
+
+/* answer: a brand link's hover. One full clockwise turn on enter and nothing
+   on leave, so it never rewinds; the ring tightens on press. */
+:is(a, button, [data-og-mark-host]):focus-visible .og-mark[data-motion="answer"] [data-part="arms"] {
+  animation: og-turn-once 900ms var(--og-spring);
+}
+@media (hover: hover) and (pointer: fine) {
+  :is(a, button, [data-og-mark-host]):hover .og-mark[data-motion="answer"] [data-part="arms"],
+  .og-mark[data-motion="answer"]:hover [data-part="arms"] {
+    animation: og-turn-once 900ms var(--og-spring);
+  }
+}
+.og-mark[data-motion="answer"] [data-part="hub"] {
+  transition: transform 180ms var(--og-out);
+}
+:is(a, button, [data-og-mark-host]):active .og-mark[data-motion="answer"] [data-part="hub"] {
+  transform: scale(0.8);
+}
+
+/* unfold: the lockup plays once. The symbol runs genesis, then the letters
+   rise from the baseline 45 ms apart (sign-in, first screen, title cards). */
+.og-logo[data-motion="unfold"] [data-part="letter"] {
+  animation: og-rise 620ms var(--og-out) calc(420ms + var(--og-letter, 0) * 45ms) both;
+}
+
+@keyframes og-spin { to { transform: rotate(360deg); } }
+@keyframes og-turn-once { from { transform: rotate(0); } to { transform: rotate(360deg); } }
+@keyframes og-turn {
+  0% { transform: rotate(0); }
+  50% { transform: rotate(180deg); }
+  100% { transform: rotate(360deg); }
+}
+@keyframes og-lead { 0%, 50%, 100% { transform: none; } 25%, 75% { transform: rotate(12deg) scale(0.95); } }
+@keyframes og-lag { 0%, 50%, 100% { transform: none; } 25%, 75% { transform: scale(1.02); } }
+@keyframes og-tick { 0%, 50%, 100% { transform: scale(1); } 25%, 75% { transform: scale(0.88); } }
+@keyframes og-pop { from { transform: scale(0); } to { transform: scale(1); } }
+@keyframes og-unfurl-inner {
+  0% { transform: rotate(-140deg) scale(0.3); opacity: 0; }
+  25% { opacity: 1; }
+  100% { transform: none; opacity: 1; }
+}
+@keyframes og-unfurl-outer {
+  0% { transform: rotate(-150deg) scale(0.5); opacity: 0; }
+  25% { opacity: 1; }
+  100% { transform: none; opacity: 1; }
+}
+@keyframes og-breathe-outer { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.93); } }
+@keyframes og-breathe-inner { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.9) rotate(14deg); } }
+@keyframes og-breathe-hub { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.82); } }
+@keyframes og-ripple {
+  0% { transform: scale(0.92); opacity: 0; stroke-width: 16; }
+  12% { opacity: 0.9; }
+  100% { transform: scale(1.42); opacity: 0; stroke-width: 1.5; }
+}
+@keyframes og-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.24); } 30% { transform: scale(0.95); } 44% { transform: scale(1); } }
+@keyframes og-nudge { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 88% { transform: rotate(6deg); } }
+@keyframes og-sweep { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
+@keyframes og-settle { from { transform: rotate(-40deg); } to { transform: none; } }
+@keyframes og-done { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
+@keyframes og-collapse {
+  0% { transform: none; }
+  38% { transform: rotate(360deg) scale(0.52); animation-timing-function: var(--og-spring); }
+  100% { transform: rotate(720deg) scale(1); }
+}
+@keyframes og-swell { 0%, 30% { transform: scale(1); } 44% { transform: scale(1.4); } 70%, 100% { transform: scale(1); } }
+@keyframes og-burst {
+  0%, 36% { transform: scale(0.5); opacity: 0; stroke-width: 22; }
+  40% { opacity: 1; }
+  100% { transform: scale(1.25); opacity: 0; stroke-width: 1.5; }
+}
+@keyframes og-drift-outer {
+  0%, 100% { transform: rotate(0) scale(1); }
+  35% { transform: rotate(26deg) scale(1.05); }
+  55% { transform: rotate(20deg) scale(1.05); }
+}
+@keyframes og-drift-inner {
+  0%, 100% { transform: rotate(0) scale(1); }
+  35% { transform: rotate(-18deg) scale(0.95); }
+  55% { transform: rotate(-12deg) scale(0.95); }
+}
+@keyframes og-rise { from { transform: translateY(120px); opacity: 0; } to { transform: none; opacity: 1; } }
+
+/* Reduced motion keeps the state and drops the movement: every part rests in
+   its final pose, a beacon keeps one still ring, progress still fills. */
+@media (prefers-reduced-motion: reduce) {
+  .og-mark,
+  .og-mark *,
+  .og-logo [data-part="letter"] {
+    animation: none !important;
+    transition: none !important;
+  }
+  .og-mark[data-motion="beacon"] [data-part="ring"]:first-of-type {
+    opacity: 0.6;
+    stroke-width: 8;
+    transform: scale(1.12);
+  }
+}

package/shell/brand/tokens.css

@@ -0,0 +1,20 @@
+/* From @origingame/tokens (packages/tokens/dist/tokens.css, theme-dark.css);
+   only the values the player shell reads. Brand ink is packages/brand's #14161b. */
+:root {
+  --og-ink: #14161b;
+  --og-paper: #ffffff;
+  --color-fg: #f5f5f7;
+  --color-fg-muted: #aeaeb2;
+  --color-surface: #1c1c1e;
+  --color-surface-raised: #2c2c2e;
+  --color-border: #38383a;
+  --color-danger: #ff5a4f;
+  --color-scrim: rgb(0 0 0 / 0.42);
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --radius-card: 14px;
+  --radius-button: 9999px;
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --dur-spring: 520ms;
+  --dur-bounce: 640ms;
+}

package/shell/brand.ts

@@ -0,0 +1,132 @@
+// Build-time brand for the player shell: the marks and the motion rules
+// `og build` inlines into index.html, derived from the vendored brand files
+// (shell/brand/, copied from the platform's packages/brand; README there).
+// Nothing here is drawn: every path comes from origin-mark.svg.
+
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const BRAND_DIR = join(dirname(fileURLToPath(import.meta.url)), "brand");
+
+/** The motions the shell uses: boot, real progress, error. */
+export const SHELL_MOTIONS = ["genesis", "progress", "drift"] as const;
+
+function brandFile(name: string): string {
+  return readFileSync(join(BRAND_DIR, name), "utf8");
+}
+
+interface Parts {
+  viewBox: string;
+  outer: { transform: string; paths: string };
+  inner: { transform: string; paths: string };
+  hub: string;
+}
+
+function parts(svg: string): Parts {
+  const arm = (name: string) => {
+    const m = new RegExp(`<g data-part="${name}"><g transform="([^"]+)">([\\s\\S]*?)</g></g>`).exec(svg);
+    if (!m) throw new Error(`origin-mark.svg lacks the ${name} arms`);
+    return { transform: m[1]!, paths: m[2]! };
+  };
+  const hub = /<g data-part="hub">([\s\S]*?)<\/g>/.exec(svg)?.[1];
+  const viewBox = /viewBox="([^"]+)"/.exec(svg)?.[1];
+  if (!hub || !viewBox) throw new Error("origin-mark.svg lacks the hub or the viewBox");
+  return { viewBox, outer: arm("outer"), inner: arm("inner"), hub };
+}
+
+/**
+ * The boot mark: one symbol that shows `genesis` (the layered arms and the
+ * hub), `progress` (a faint ghost and a wedge-masked copy whose wipe the
+ * shell moves to 100 − percent) and `drift`, by switching `data-motion`.
+ */
+export function bootMark(svg = brandFile("origin-mark.svg")): string {
+  const p = parts(svg);
+  const both = '<use href="#og-mo"/><use href="#og-mi"/>';
+  return `<svg class="og-mark og-boot-mark" data-motion="genesis" viewBox="${p.viewBox}" aria-hidden="true" focusable="false">`
+    + `<defs><g id="og-mo" transform="${p.outer.transform}">${p.outer.paths}</g><g id="og-mi" transform="${p.inner.transform}">${p.inner.paths}</g>`
+    + '<mask id="og-wipe" maskUnits="userSpaceOnUse" x="-270" y="-270" width="540" height="540">'
+    + '<circle data-part="wipe" r="100" fill="none" stroke="#fff" stroke-width="204" pathLength="100" stroke-dasharray="100 100" stroke-dashoffset="100" transform="rotate(-100)"/></mask></defs>'
+    + '<g data-part="arms"><g data-part="outer"><use href="#og-mo"/></g><g data-part="inner"><use href="#og-mi"/></g></g>'
+    + `<g data-part="ghost">${both}</g><g data-part="fill" mask="url(#og-wipe)">${both}</g>`
+    + `<g data-part="hub">${p.hub}</g></svg>`;
+}
+
+/** The `engine` product mark (the symbol's inner arms and core ring), still, for "Made with Origin Engine". */
+export function engineMark(svg = brandFile("origin-mark.svg")): string {
+  const p = parts(svg);
+  return `<svg class="og-engine-mark" viewBox="${p.viewBox}" fill="currentColor" aria-hidden="true" focusable="false">`
+    + `<g transform="${p.inner.transform}">${p.inner.paths}</g>${p.hub}</svg>`;
+}
+
+function splitTopLevel(text: string): string[] {
+  const out: string[] = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i];
+    if (c === "(" || c === "[") depth++;
+    else if (c === ")" || c === "]") depth--;
+    else if (c === "," && depth === 0) {
+      out.push(text.slice(start, i));
+      start = i + 1;
+    }
+  }
+  out.push(text.slice(start));
+  return out.map((s) => s.trim()).filter(Boolean);
+}
+
+function blocks(css: string): Array<{ prelude: string; body: string }> {
+  const out: Array<{ prelude: string; body: string }> = [];
+  let depth = 0;
+  let start = 0;
+  let open = -1;
+  for (let i = 0; i < css.length; i++) {
+    if (css[i] === "{") {
+      if (depth === 0) open = i;
+      depth++;
+    } else if (css[i] === "}") {
+      depth--;
+      if (depth === 0) {
+        out.push({ prelude: css.slice(start, open).trim(), body: css.slice(open + 1, i) });
+        start = i + 1;
+      }
+    }
+  }
+  return out;
+}
+
+/**
+ * The rules of origin-motion.css the given motions need: the base
+ * `.og-mark` rules, every rule naming only those motions, their keyframes
+ * and the reduced-motion block for the same selectors.
+ */
+export function motionSubset(motions: readonly string[], source = brandFile("origin-motion.css")): string {
+  const css = source.replace(/\/\*[\s\S]*?\*\//g, "");
+  const keep = (selector: string) => {
+    if (!selector.includes(".og-mark")) return false;
+    const named = [...selector.matchAll(/data-motion="([a-z]+)"/g)].map((m) => m[1]!);
+    return named.length ? named.every((n) => motions.includes(n)) : !/data-part="ring"/.test(selector);
+  };
+  const rules = (text: string): string[] =>
+    blocks(text).flatMap(({ prelude, body }) => {
+      if (prelude.startsWith("@keyframes")) return [];
+      if (prelude.startsWith("@media")) {
+        const inner = rules(body);
+        return inner.length ? [`${prelude}{${inner.join("")}}`] : [];
+      }
+      const selectors = splitTopLevel(prelude).filter(keep);
+      return selectors.length ? [`${selectors.join(",")}{${body.trim().replace(/\s+/g, " ")}}`] : [];
+    });
+  const kept = rules(css);
+  const used = new Set(kept.join("").match(/og-[a-z-]+(?=[\s;}])/g) ?? []);
+  const frames = blocks(css)
+    .filter(({ prelude }) => prelude.startsWith("@keyframes") && used.has(prelude.split(/\s+/)[1]!))
+    .map(({ prelude, body }) => `${prelude}{${body.trim().replace(/\s+/g, " ")}}`);
+  return [...kept, ...frames].join("\n");
+}
+
+/** The shell's token values (brand/tokens.css). */
+export function shellTokens(): string {
+  return brandFile("tokens.css").replace(/\/\*[\s\S]*?\*\//g, "").trim();
+}