@appinternalleads/ui 0.3.0 → 0.4.1

package/src/motion/validate.ts

@@ -0,0 +1,101 @@
+/**
+ * **Content validation against a template's JSON Schema**, with no template code involved — what the
+ * runtime, the agent entry and the MCP server run before anything is bound. It understands the subset
+ * the exporter writes: objects (`required`, `additionalProperties: false`), arrays (`items`,
+ * `minItems`, `maxItems`), booleans, strings with `enum`, `minLength`, `maxLength`, the template
+ * keywords `maxWords` and `onlyWith`, and `format: 'hex-color'`.
+ *
+ * `onlyWith: { layout: ['stack'] }` on a property means it may only be set when its sibling `layout`
+ * is (or defaults to) one of those values. The exporter also writes the same rule as `if`/`then`, so
+ * a generic JSON Schema validator enforces it too.
+ */
+export type MotionContentError = { scene: string; path: string; message: string };
+
+type SchemaNode = {
+  type?: string;
+  properties?: Record<string, SchemaNode>;
+  required?: string[];
+  additionalProperties?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  maxWords?: number;
+  format?: string;
+  enum?: string[];
+  default?: unknown;
+  items?: SchemaNode;
+  minItems?: number;
+  maxItems?: number;
+  onlyWith?: Record<string, string[]>;
+};
+
+export const countWords = (text: string) => text.trim().split(/\s+/).filter(Boolean).length;
+const HEX = /^#[0-9a-fA-F]{6}$/;
+
+export function validateMotionContent(schema: object, content: unknown): { valid: boolean; errors: MotionContentError[] } {
+  const errors: MotionContentError[] = [];
+  const add = (path: string[], message: string) => errors.push({ scene: path[0] ?? '(root)', path: path.join('.'), message });
+
+  const walk = (node: SchemaNode, value: unknown, path: string[]) => {
+    const name = path.join('.') || 'content';
+    if (node.type === 'object') {
+      if (typeof value !== 'object' || value === null || Array.isArray(value)) return add(path, value === undefined ? `${name} is required.` : `${name} must be an object.`);
+      const obj = value as Record<string, unknown>;
+      if (node.additionalProperties === false) {
+        const extra = Object.keys(obj).filter((k) => !(k in (node.properties ?? {})));
+        if (extra.length) {
+          const choices = Object.entries(node.properties ?? {}).filter(([, p]) => p.enum || p.type === 'boolean').map(([k]) => k);
+          const allowed = path.length ? (choices.length ? `Only its text and the choices ${choices.join(', ')}` : 'Only text slots') : 'Only text slots, theme colours and optional scenes';
+          add(path.length ? path : extra, `${path.length ? `${name}: ` : ''}${extra.join(', ')} ${extra.length === 1 ? 'is' : 'are'} not configurable. ${allowed} may be set.`);
+        }
+      }
+      for (const [key, child] of Object.entries(node.properties ?? {})) {
+        /* An optional property may also be null: the explicit "leave it out" (Remotion merges props
+           over its defaults, so omitting a key there cannot switch an optional scene off). */
+        if (!(key in obj) || obj[key] === undefined || (obj[key] === null && !node.required?.includes(key))) {
+          if (node.required?.includes(key)) add([...path, key], `${[...path, key].join('.')} is required.`);
+          continue;
+        }
+        const only = Object.entries(child.onlyWith ?? {}).find(([field, allowed]) => {
+          const chosen = obj[field] ?? node.properties?.[field]?.default;
+          return !allowed.includes(String(chosen));
+        });
+        if (only) {
+          add([...path, key], `${[...path, key].join('.')} can only be set when ${only[0]} is ${only[1].map((v) => `"${v}"`).join(' or ')}.`);
+          continue;
+        }
+        walk(child, obj[key], [...path, key]);
+      }
+      return;
+    }
+    if (node.type === 'array') {
+      if (!Array.isArray(value)) return add(path, value === undefined ? `${name} is required.` : `${name} must be a list.`);
+      if (node.minItems !== undefined && value.length < node.minItems) add(path, `${name} needs at least ${node.minItems} item${node.minItems === 1 ? '' : 's'} (got ${value.length}).`);
+      if (node.maxItems !== undefined && value.length > node.maxItems) add(path, `${name} accepts at most ${node.maxItems} items (got ${value.length}).`);
+      if (node.items) value.forEach((item, i) => walk(node.items!, item, [...path, String(i)]));
+      return;
+    }
+    if (node.type === 'boolean') {
+      if (typeof value !== 'boolean') add(path, `${name} must be true or false.`);
+      return;
+    }
+    if (node.type === 'string') {
+      if (typeof value !== 'string') return add(path, `${name} must be a string.`);
+      if (node.enum) {
+        if (!node.enum.includes(value)) add(path, `${name} must be one of ${node.enum.map((v) => `"${v}"`).join(', ')} (got "${value}").`);
+        return;
+      }
+      if (node.format === 'hex-color') {
+        if (!HEX.test(value)) add(path, `${name} must be a hex colour in the form #rrggbb.`);
+        return;
+      }
+      const text = value.trim();
+      if (!text) return add(path, `${name} must not be empty.`);
+      // eslint-disable-next-line no-control-regex -- rejecting control characters is the point
+      if (/[\u0000-\u001f\u007f]/.test(value)) add(path, `${name} must be a single line of plain text.`);
+      if (node.maxWords !== undefined && countWords(text) > node.maxWords) add(path, `${name} accepts a maximum of ${node.maxWords} word${node.maxWords === 1 ? '' : 's'} (got ${countWords(text)}).`);
+      if (node.maxLength !== undefined && text.length > node.maxLength) add(path, `${name} accepts a maximum of ${node.maxLength} characters (got ${text.length}).`);
+    }
+  };
+  walk(schema as SchemaNode, content, []);
+  return { valid: errors.length === 0, errors };
+}

package/src/native/RiveReceiptStage.tsx

@@ -1,12 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
-import { Fit, RiveFileFactory, RiveView, type RiveFile, type RiveViewRef, type ViewModel, type ViewModelInstance } from '@rive-app/react-native';
-import { Box } from '../core';
-import { HUE, blockRadii } from '../tokens';
-import type { ReceiptLines } from '../components/onboarding/receipt-printer/engine';
-import { ReceiptPaper } from '../components/onboarding/receipt-printer/ReceiptPaper';
-import { RECEIPT_PRINTER_RIV } from '../components/onboarding/receipt-printer/riv';
-import { stageAspect, type ReceiptStageProps } from '../components/onboarding/receipt-printer/ReceiptStage.types';
+import { Fit, RiveFileFactory, RiveView } from '@rive-app/react-native';
 import { ReceiptPrinter, type ReceiptPrinterProps } from '../components/onboarding/receipt-printer/ReceiptPrinterView';
+import { createRiveReceiptStage } from './riveReceiptStageFactory';
 
 /**
  * **The Receipt Printer's Rive printer, on iOS and Android** — the same `.riv`, the same feed, the
@@ -22,159 +16,18 @@ import { ReceiptPrinter, type ReceiptPrinterProps } from '../components/onboardi
  * and trigger is followed by `playIfNeeded()`. Found on Android: without it, Print again after a
  * print fired the trigger into a paused view, and nothing moved.
  *
- * Its own entry point — importing it is the opt-in, and it pulls in nothing else native:
+ * **Since 29 Sep 2026 this is also the default** on native: the main entry point's `ReceiptPrinter`
+ * loads the runtime through an optional `require` and uses this printer whenever the app has
+ * installed `@rive-app/react-native`, falling back to the still when it has not. This entry point
+ * stays for apps that want to name the stage explicitly, or want a missing runtime to fail the
+ * build rather than fall back to the still:
  *
  *   import { NativeReceiptPrinter } from '@comppack/ui/native/receipt-printer';
  *   <NativeReceiptPrinter preset="case1" />
  *   // or: <ReceiptPrinter stage={RiveReceiptStage} />
  */
 
-const ARTBOARD = 'ReceiptPrinter';
-const MACHINE = 'ReceiptPrinterMachine';
-const LINE_KEYS = ['title', 'badge', 'total', 'meta', 'paymentMethod', 'message', 'paymentLabel', 'totalLabel'] as const;
-
-let bytes: ArrayBuffer | null = null;
-function rivBytes(): ArrayBuffer {
-  if (!bytes) {
-    const bin = atob(RECEIPT_PRINTER_RIV);
-    const out = new Uint8Array(bin.length);
-    for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
-    bytes = out.buffer;
-  }
-  return bytes;
-}
-/** One file per app: parsing 280 kB once is enough for every printer on every screen. */
-let filePromise: Promise<RiveFile> | null = null;
-const loadFile = () => (filePromise ??= RiveFileFactory.fromBytes(rivBytes(), undefined, false)
-  /* A load that failed is not kept: the next printer to mount tries again. */
-  .catch(e => { filePromise = null; throw e; }));
-
-type Loaded = { file: RiveFile; vm: ViewModelInstance; models: { detail?: ViewModel; item?: ViewModel } };
-
-async function syncList(vm: ViewModelInstance, path: string, model: ViewModel | undefined, rows: Record<string, string>[]) {
-  const list = vm.listProperty(path);
-  if (!list) return;
-  let length = await list.getLengthAsync();
-  while (length > rows.length) { await list.removeInstanceAtAsync(length - 1); length--; }
-  while (length < rows.length && model) {
-    const inst = await model.createBlankInstanceAsync();
-    if (!inst) break;
-    await list.addInstanceAsync(inst);
-    length++;
-  }
-  for (let i = 0; i < rows.length; i++) {
-    const inst = await list.getInstanceAtAsync(i);
-    for (const [k, v] of Object.entries(rows[i]!)) inst?.stringProperty(k)?.set(v);
-  }
-}
-
-async function writeLines(l: Loaded, lines: ReceiptLines) {
-  for (const k of LINE_KEYS) l.vm.stringProperty(k)?.set(lines[k]);
-  await syncList(l.vm, 'details', l.models.detail, lines.details);
-  await syncList(l.vm, 'items', l.models.item, lines.items);
-  l.vm.numberProperty('lineCount')?.set(Math.max(1, lines.items.length));
-  l.vm.numberProperty('detailCount')?.set(lines.details.length);
-}
-
-export function RiveReceiptStage({ lines, job, phase, reduceMotion, onPrinted, label, maxWidth, testID }: ReceiptStageProps) {
-  const [loaded, setLoaded] = useState<Loaded | null>(null);
-  const [failed, setFailed] = useState(false);
-  const [shown, setShown] = useState({ lines: Math.max(1, lines.items.length), fields: lines.details.length });
-  const view = useRef<RiveViewRef | null>(null);
-  const queue = useRef<Promise<void>>(Promise.resolve());
-  /* Every change to the view model, in order — then wake the view, which pauses once it settles. */
-  const enqueue = (work: () => Promise<void> | void) => {
-    queue.current = queue.current.then(work).then(() => view.current?.playIfNeeded()).catch(() => {});
-  };
-  const status = useRef('idle');
-  const started = useRef<number | null>(null);
-  const latest = useRef(lines);
-  latest.current = lines;
-  const printed = useRef(onPrinted);
-  printed.current = onPrinted;
-
-  const write = (l: Loaded, next: ReceiptLines) => enqueue(async () => {
-    await writeLines(l, next);
-    setShown({ lines: Math.max(1, next.items.length), fields: next.details.length });
-  });
-
-  /* Load the file, make the `Receipt` instance this view binds, and listen to where the paper is. */
-  useEffect(() => {
-    let alive = true;
-    let stop: (() => void) | undefined;
-    (async () => {
-      const file = await loadFile();
-      const model = await file.viewModelByNameAsync('Receipt');
-      const vm = await model?.createDefaultInstanceAsync();
-      if (!vm) throw new Error('The Receipt view model is missing.');
-      const l: Loaded = {
-        file, vm,
-        models: { detail: await file.viewModelByNameAsync('ReceiptDetail'), item: await file.viewModelByNameAsync('ReceiptItem') },
-      };
-      /* The first lines go on before the view mounts, so its first frame is this receipt's length. */
-      await writeLines(l, latest.current);
-      if (!alive) return;
-      setShown({ lines: Math.max(1, latest.current.items.length), fields: latest.current.details.length });
-      stop = vm.stringProperty('status')?.addListener(value => {
-        status.current = value;
-        /* Past a tear-off — a fresh feed, or the idle stub: the lines held back go on now. */
-        if (value === 'printing' || value === 'idle') write(l, latest.current);
-        if (value === 'printed' && started.current !== null) printed.current(started.current);
-      });
-      setLoaded(l);
-    })().catch(() => { if (alive) setFailed(true); });
-    return () => { alive = false; stop?.(); };
-  }, []);
-
-  /* 1 · The lines — never onto a receipt on its way out (a reprint or a reset, with motion). */
-  useEffect(() => {
-    if (!loaded) return;
-    loaded.vm.booleanProperty('reduceMotion')?.set(reduceMotion);
-    const leaving = status.current === 'tearing'
-      || (status.current === 'printed' && !reduceMotion && (phase === 'idle' || started.current !== job));
-    if (!leaving) write(loaded, lines);
-  }, [loaded, lines, phase, job, reduceMotion]);
-
-  /* 2 · The phase, as triggers — queued behind the lines. Each job is started once. */
-  useEffect(() => {
-    if (!loaded) return;
-    if (phase === 'idle') {
-      started.current = null;
-      enqueue(() => { if (status.current !== 'idle') loaded.vm.triggerProperty('reset')?.trigger(); });
-      return;
-    }
-    if (started.current === job) return;
-    started.current = job;
-    const reveal = reduceMotion || phase === 'printed';
-    enqueue(() => {
-      /* A reveal over a receipt already at rest changes no status: the new lines are this job's paper. */
-      if (reveal && status.current === 'printed') { printed.current(job); return; }
-      loaded.vm.triggerProperty(reveal ? 'reveal' : 'print')?.trigger();
-    });
-  }, [loaded, phase, job, reduceMotion]);
-
-  /* Without the runtime, the still — and a print completes at once. */
-  useEffect(() => { if (failed && phase === 'printing') onPrinted(job); }, [failed, phase, job]);
-
-  if (failed) return <ReceiptPaper lines={lines} phase={phase} maxWidth={maxWidth} label={label} testID={testID} />;
-  return (
-    <Box testID={testID} role="img" aria-label={label} style={{ width: '100%', maxWidth, aspectRatio: stageAspect(shown.lines, shown.fields), borderRadius: blockRadii.mid, overflow: 'hidden', backgroundColor: HUE.butter.hs }}>
-      {loaded ? (
-        <RiveView
-          file={loaded.file}
-          artboardName={ARTBOARD}
-          stateMachineName={MACHINE}
-          dataBind={loaded.vm}
-          autoPlay
-          fit={Fit.Contain}
-          onError={() => setFailed(true)}
-          hybridRef={{ f: (ref: RiveViewRef | null) => { view.current = ref; } }}
-          style={{ width: '100%', height: '100%' }}
-        />
-      ) : null}
-    </Box>
-  );
-}
+export const RiveReceiptStage = createRiveReceiptStage({ Fit, RiveFileFactory, RiveView });
 
 /** `ReceiptPrinter` with the animated Rive printer — for React Native apps that installed the runtime. */
 export function NativeReceiptPrinter(props: Omit<ReceiptPrinterProps, 'stage'> & Record<string, unknown>) {

package/src/native/riveReceiptStageFactory.tsx

@@ -0,0 +1,175 @@
+import { useEffect, useRef, useState, type ComponentType } from 'react';
+import type { Fit as RiveFit, RiveFile, RiveFileFactory as RiveFileFactoryT, RiveView as RiveViewT, RiveViewRef, ViewModel, ViewModelInstance } from '@rive-app/react-native';
+import { Box } from '../core';
+import { HUE, blockRadii } from '../tokens';
+import type { ReceiptLines } from '../components/onboarding/receipt-printer/engine';
+import { ReceiptPaper } from '../components/onboarding/receipt-printer/ReceiptPaper';
+import { RECEIPT_PRINTER_RIV } from '../components/onboarding/receipt-printer/riv';
+import { stageAspect, type ReceiptStageProps } from '../components/onboarding/receipt-printer/ReceiptStage.types';
+
+/**
+ * **The Receipt Printer's Rive printer on iOS and Android, as a factory over the runtime.**
+ *
+ * Everything about driving the printer is here: the view model, the ordered write queue,
+ * `playIfNeeded()` after every change, and the still when the runtime or file cannot load (see
+ * `RiveReceiptStage.tsx`). The runtime itself is passed in. That is why the default native stage
+ * (`components/onboarding/receipt-printer/ReceiptStage.tsx`) can animate with Rive whenever the
+ * app has installed it, without making every React Native app install it.
+ */
+export type RiveRuntime = { Fit: typeof RiveFit; RiveFileFactory: typeof RiveFileFactoryT; RiveView: typeof RiveViewT };
+
+const ARTBOARD = 'ReceiptPrinter';
+const MACHINE = 'ReceiptPrinterMachine';
+const LINE_KEYS = ['title', 'badge', 'total', 'meta', 'paymentMethod', 'message', 'paymentLabel', 'totalLabel'] as const;
+
+let bytes: ArrayBuffer | null = null;
+function rivBytes(): ArrayBuffer {
+  if (!bytes) {
+    const bin = atob(RECEIPT_PRINTER_RIV);
+    const out = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+    bytes = out.buffer;
+  }
+  return bytes;
+}
+type Loaded = { file: RiveFile; vm: ViewModelInstance; models: { detail?: ViewModel; item?: ViewModel } };
+
+async function syncList(vm: ViewModelInstance, path: string, model: ViewModel | undefined, rows: Record<string, string>[]) {
+  const list = vm.listProperty(path);
+  if (!list) return;
+  let length = await list.getLengthAsync();
+  while (length > rows.length) { await list.removeInstanceAtAsync(length - 1); length--; }
+  while (length < rows.length && model) {
+    const inst = await model.createBlankInstanceAsync();
+    if (!inst) break;
+    await list.addInstanceAsync(inst);
+    length++;
+  }
+  for (let i = 0; i < rows.length; i++) {
+    const inst = await list.getInstanceAtAsync(i);
+    for (const [k, v] of Object.entries(rows[i]!)) inst?.stringProperty(k)?.set(v);
+  }
+}
+
+async function writeLines(l: Loaded, lines: ReceiptLines) {
+  for (const k of LINE_KEYS) l.vm.stringProperty(k)?.set(lines[k]);
+  await syncList(l.vm, 'details', l.models.detail, lines.details);
+  await syncList(l.vm, 'items', l.models.item, lines.items);
+  l.vm.numberProperty('lineCount')?.set(Math.max(1, lines.items.length));
+  l.vm.numberProperty('detailCount')?.set(lines.details.length);
+}
+
+/**
+ * Build the stage around a Rive runtime module. Taking the runtime as an argument — rather than
+ * importing it — is what lets the MAIN entry point use this file: its only reference to
+ * `@rive-app/react-native` is a type import, erased at build, so nothing here makes Metro resolve
+ * the runtime. Whoever calls this has already loaded it (statically in the opt-in entry point,
+ * through an optional `require` in the default native stage).
+ */
+export function createRiveReceiptStage({ Fit, RiveFileFactory, RiveView }: RiveRuntime): ComponentType<ReceiptStageProps> {
+  /** One file per app: parsing 280 kB once is enough for every printer on every screen. */
+  let filePromise: Promise<RiveFile> | null = null;
+  const loadFile = () => (filePromise ??= RiveFileFactory.fromBytes(rivBytes(), undefined, false)
+    /* A load that failed is not kept: the next printer to mount tries again. */
+    .catch(e => { filePromise = null; throw e; }));
+
+  return function RiveReceiptStage({ lines, job, phase, reduceMotion, onPrinted, label, maxWidth, testID }: ReceiptStageProps) {
+    const [loaded, setLoaded] = useState<Loaded | null>(null);
+    const [failed, setFailed] = useState(false);
+    const [shown, setShown] = useState({ lines: Math.max(1, lines.items.length), fields: lines.details.length });
+    const view = useRef<RiveViewRef | null>(null);
+    const queue = useRef<Promise<void>>(Promise.resolve());
+    /* Every change to the view model, in order — then wake the view, which pauses once it settles. */
+    const enqueue = (work: () => Promise<void> | void) => {
+      queue.current = queue.current.then(work).then(() => view.current?.playIfNeeded()).catch(() => {});
+    };
+    const status = useRef('idle');
+    const started = useRef<number | null>(null);
+    const latest = useRef(lines);
+    latest.current = lines;
+    const printed = useRef(onPrinted);
+    printed.current = onPrinted;
+
+    const write = (l: Loaded, next: ReceiptLines) => enqueue(async () => {
+      await writeLines(l, next);
+      setShown({ lines: Math.max(1, next.items.length), fields: next.details.length });
+    });
+
+    /* Load the file, make the `Receipt` instance this view binds, and listen to where the paper is. */
+    useEffect(() => {
+      let alive = true;
+      let stop: (() => void) | undefined;
+      (async () => {
+        const file = await loadFile();
+        const model = await file.viewModelByNameAsync('Receipt');
+        const vm = await model?.createDefaultInstanceAsync();
+        if (!vm) throw new Error('The Receipt view model is missing.');
+        const l: Loaded = {
+          file, vm,
+          models: { detail: await file.viewModelByNameAsync('ReceiptDetail'), item: await file.viewModelByNameAsync('ReceiptItem') },
+        };
+        /* The first lines go on before the view mounts, so its first frame is this receipt's length. */
+        await writeLines(l, latest.current);
+        if (!alive) return;
+        setShown({ lines: Math.max(1, latest.current.items.length), fields: latest.current.details.length });
+        stop = vm.stringProperty('status')?.addListener(value => {
+          status.current = value;
+          /* Past a tear-off — a fresh feed, or the idle stub: the lines held back go on now. */
+          if (value === 'printing' || value === 'idle') write(l, latest.current);
+          if (value === 'printed' && started.current !== null) printed.current(started.current);
+        });
+        setLoaded(l);
+      })().catch(() => { if (alive) setFailed(true); });
+      return () => { alive = false; stop?.(); };
+    }, []);
+
+    /* 1 · The lines — never onto a receipt on its way out (a reprint or a reset, with motion). */
+    useEffect(() => {
+      if (!loaded) return;
+      loaded.vm.booleanProperty('reduceMotion')?.set(reduceMotion);
+      const leaving = status.current === 'tearing'
+        || (status.current === 'printed' && !reduceMotion && (phase === 'idle' || started.current !== job));
+      if (!leaving) write(loaded, lines);
+    }, [loaded, lines, phase, job, reduceMotion]);
+
+    /* 2 · The phase, as triggers — queued behind the lines. Each job is started once. */
+    useEffect(() => {
+      if (!loaded) return;
+      if (phase === 'idle') {
+        started.current = null;
+        enqueue(() => { if (status.current !== 'idle') loaded.vm.triggerProperty('reset')?.trigger(); });
+        return;
+      }
+      if (started.current === job) return;
+      started.current = job;
+      const reveal = reduceMotion || phase === 'printed';
+      enqueue(() => {
+        /* A reveal over a receipt already at rest changes no status: the new lines are this job's paper. */
+        if (reveal && status.current === 'printed') { printed.current(job); return; }
+        loaded.vm.triggerProperty(reveal ? 'reveal' : 'print')?.trigger();
+      });
+    }, [loaded, phase, job, reduceMotion]);
+
+    /* Without the runtime, the still — and a print completes at once. */
+    useEffect(() => { if (failed && phase === 'printing') onPrinted(job); }, [failed, phase, job]);
+
+    if (failed) return <ReceiptPaper lines={lines} phase={phase} maxWidth={maxWidth} label={label} testID={testID} />;
+    return (
+      <Box testID={testID} role="img" aria-label={label} style={{ width: '100%', maxWidth, aspectRatio: stageAspect(shown.lines, shown.fields), borderRadius: blockRadii.mid, overflow: 'hidden', backgroundColor: HUE.butter.hs }}>
+        {loaded ? (
+          <RiveView
+            file={loaded.file}
+            artboardName={ARTBOARD}
+            stateMachineName={MACHINE}
+            dataBind={loaded.vm}
+            autoPlay
+            fit={Fit.Contain}
+            onError={() => setFailed(true)}
+            hybridRef={{ f: (ref: RiveViewRef | null) => { view.current = ref; } }}
+            style={{ width: '100%', height: '100%' }}
+          />
+        ) : null}
+      </Box>
+    );
+  };
+}

package/src/tokens/stage.ts

@@ -0,0 +1,6 @@
+/**
+ * **The ground a Rive animation is drawn on.** Animated Status's artboard (`rive/animated-status`)
+ * paints its white scenes on pure white; the stage behind the canvas, and the still that stands in
+ * for it, use the same so no seam shows while the runtime loads. Fixed design, not a theme colour.
+ */
+export const ANIMATION_GROUND = '#FFFFFF';