@buoy-gg/shared-ui 7.0.36 → 7.0.39

package/lib/module/ui/otto/ottoScenes.js

@@ -0,0 +1,942 @@
+"use strict";
+
+/**
+ * Otto × tools — pixel scenes.
+ *
+ * One scene per dev tool: Otto in an engine pose, holding / leaning on /
+ * pointing at a hand-drawn PIXEL prop that stands for the tool. Everything is
+ * on the same 1-cell grid as the sprite, so a scene is just a bigger frame:
+ *
+ *   renderOttoScene(scene, t) → W×H grid of palette keys (`.` = transparent)
+ *   ottoSceneRuns(grid)       → coloured horizontal runs for a renderer
+ *
+ * Props are ASCII art in `OTTO_SCENE_PALETTE` keys. A layer gets a one-cell
+ * black keyline around it (`outline`), sits over or under Otto (`over`), and
+ * can ride his hands (`follow` = bob with `OTTO_ANCHORS[state]`). Otto's own
+ * frame comes straight from `renderOttoFrame`, so the mascot is never
+ * redrawn here — only what he is doing with the tool.
+ *
+ * Pure, no React: the same module renders the website gallery, the export
+ * script and any RN still.
+ */
+import { OTTO_ANCHORS, OTTO_GRID, OTTO_PALETTE, renderOttoFrame } from "./ottoEngine.js";
+
+/** Sprite palette plus prop colours. `.` and space are transparent. */
+export const OTTO_SCENE_PALETTE = {
+  ...OTTO_PALETTE,
+  K: "#000000",
+  // prop keyline
+  c: "#22D3EE",
+  // cyan
+  C: "#0E7490",
+  // cyan deep
+  u: "#7DD3FC",
+  // sky (Ask Buoy)
+  b: "#3B82F6",
+  // blue
+  B: "#1E3A8A",
+  // blue deep
+  y: "#FDE047",
+  // yellow
+  Y: "#F59E0B",
+  // amber
+  o: "#FB923C",
+  // orange
+  v: "#C4B5FD",
+  // lavender
+  P: "#6D28D9",
+  // purple deep
+  e: "#FB7185",
+  // rose
+  E: "#BE123C",
+  // rose deep
+  i: "#F472B6",
+  // pink
+  t: "#B07D4F",
+  // tan (bear)
+  T: "#6B4423",
+  // brown deep
+  z: "#0B1220",
+  // screen navy
+  q: "#1F2937",
+  // slate
+  Q: "#374151",
+  // slate light
+  f: "#4ADE80",
+  // mint (screen text, checks)
+  F: "#166534",
+  // green deep
+  x: "#CBD5E1",
+  // steel
+  j: "#E7C9A0",
+  // light tan (bear muzzle)
+  G: "#F6C453",
+  // gold (sun)
+  D: "#EF5B4E",
+  // sunset red
+  L: "#5DBB63",
+  // leaf
+  M: "#3D8B4F" // leaf deep
+};
+export const OTTO_SCENE_W = 30;
+export const OTTO_SCENE_H = 24;
+/** Default sprite position: feet on row 17, lamp on row 7, prop room on both sides. */
+export const OTTO_SCENE_OTTO = {
+  x: 2,
+  y: 5
+};
+function blank(w, h) {
+  return Array.from({
+    length: h
+  }, () => Array(w).fill("."));
+}
+function filled(c) {
+  return !!c && c !== "." && c !== " ";
+}
+
+/** Art rows → cells, with the keyline dilation applied inside the layer. */
+function layerCells(layer) {
+  const rows = layer.art;
+  const cells = [];
+  const has = (x, y) => y >= 0 && y < rows.length && filled(rows[y][x]);
+  const outline = layer.outline ?? true;
+  let maxW = 0;
+  for (const r of rows) maxW = Math.max(maxW, r.length);
+  for (let y = -1; y <= rows.length; y++) {
+    for (let x = -1; x <= maxW; x++) {
+      if (has(x, y)) {
+        cells.push([x, y, rows[y][x]]);
+      } else if (outline && (has(x - 1, y) || has(x + 1, y) || has(x, y - 1) || has(x, y + 1))) {
+        cells.push([x, y, "K"]);
+      }
+    }
+  }
+  return cells;
+}
+function anchorBob(state, t) {
+  const a = OTTO_ANCHORS[state];
+  if (!a) return 0;
+  return a(t).y - a(0).y;
+}
+
+/** The dark checker under Otto's feet — the engine's water colours, as a floor. */
+function ground(x, y, t) {
+  return ((x - Math.floor(t / 2) + y * 5) % 7 + 7) % 7 < 2 ? "W" : "w";
+}
+
+/** One frame of a scene as a `OTTO_SCENE_W × OTTO_SCENE_H` grid of palette keys. */
+export function renderOttoScene(scene, t = 0) {
+  const W = OTTO_SCENE_W;
+  const H = OTTO_SCENE_H;
+  const g = blank(W, H);
+  const ox = scene.ottoX ?? OTTO_SCENE_OTTO.x;
+  const oy = scene.ottoY ?? OTTO_SCENE_OTTO.y;
+  const put = (x, y, c) => {
+    if (x >= 0 && x < W && y >= 0 && y < H) g[y][x] = c;
+  };
+
+  // Floor: three rows under the feet (sprite rows 13–15), fading out at the ends.
+  if (scene.ground !== false) {
+    const [gx0, gx1] = scene.ground ?? [ox + 1, ox + OTTO_GRID - 2];
+    for (let y = 13; y < 16; y++) {
+      for (let x = gx0; x <= gx1; x++) {
+        const edge = x === gx0 || x === gx1;
+        if (y === 15 && (x + y) % 2) continue;
+        if (edge && y !== 14) continue;
+        put(x, oy + y, ground(x, y, t));
+      }
+    }
+  }
+  const bob = anchorBob(scene.state, t);
+  const paint = layer => {
+    const dy = layer.follow ? bob : 0;
+    for (const [x, y, c] of layerCells(layer)) put(layer.x + x, layer.y + y + dy, c);
+  };
+  for (const layer of scene.layers) if (!layer.over) paint(layer);
+  const otto = renderOttoFrame(scene.state, t, {
+    water: false,
+    keyline: true
+  });
+  for (let y = 0; y < OTTO_GRID; y++) {
+    for (let x = 0; x < OTTO_GRID; x++) {
+      const c = otto[y][x];
+      if (c !== ".") put(ox + x, oy + y, c);
+    }
+  }
+  for (const layer of scene.layers) if (layer.over) paint(layer);
+  return g;
+}
+/** Run-length encode a scene frame into coloured spans, skipping transparency. */
+export function ottoSceneRuns(grid) {
+  const runs = [];
+  for (let y = 0; y < grid.length; y++) {
+    const row = grid[y];
+    let x = 0;
+    while (x < row.length) {
+      const key = row[x];
+      let w = 1;
+      while (x + w < row.length && row[x + w] === key) w++;
+      if (key !== ".") {
+        const color = OTTO_SCENE_PALETTE[key];
+        if (color) runs.push({
+          x,
+          y,
+          w,
+          color
+        });
+      }
+      x += w;
+    }
+  }
+  return runs;
+}
+
+/** Tight bounds of the filled cells: `[x0, y0, x1, y1]` inclusive, or null when empty. */
+export function ottoSceneBounds(grid) {
+  let x0 = Infinity;
+  let y0 = Infinity;
+  let x1 = -1;
+  let y1 = -1;
+  for (let y = 0; y < grid.length; y++) {
+    for (let x = 0; x < grid[y].length; x++) {
+      if (grid[y][x] === ".") continue;
+      if (x < x0) x0 = x;
+      if (x > x1) x1 = x;
+      if (y < y0) y0 = y;
+      if (y > y1) y1 = y;
+    }
+  }
+  return x1 < 0 ? null : [x0, y0, x1, y1];
+}
+
+// ------------------------------------------------------------------ props --
+//
+// Drawn on the sprite's cell grid, the size of a held object (7–13 cells).
+// The keyline pass draws the outline — never hand-draw `K` except for detail
+// INSIDE a prop (eyes, a keyhole, an exclamation mark).
+
+/** A `w×h` box: `fill` inside, `border` on the edge, corners cut when `round`. */
+function box(w, h, fill, border = fill, round = true) {
+  const rows = [];
+  for (let y = 0; y < h; y++) {
+    let r = "";
+    for (let x = 0; x < w; x++) {
+      const edge = x === 0 || y === 0 || x === w - 1 || y === h - 1;
+      const corner = (x === 0 || x === w - 1) && (y === 0 || y === h - 1);
+      r += round && corner ? "." : edge ? border : fill;
+    }
+    rows.push(r);
+  }
+  return rows;
+}
+
+/** Paint `art` onto `base` at (x, y); transparent cells leave the base alone. */
+function stamp(base, art, x, y) {
+  const out = base.map(r => r.split(""));
+  for (let j = 0; j < art.length; j++) {
+    for (let i = 0; i < art[j].length; i++) {
+      const c = art[j][i];
+      if (!filled(c)) continue;
+      const yy = y + j;
+      const xx = x + i;
+      if (yy < 0 || xx < 0) continue;
+      while (out.length <= yy) out.push([]);
+      while (out[yy].length <= xx) out[yy].push(".");
+      out[yy][xx] = c;
+    }
+  }
+  return out.map(r => r.join(""));
+}
+
+/** Four-point sparkle, 3×3. */
+function sparkle(c) {
+  return [`.${c}.`, `${c}${c}${c}`, `.${c}.`];
+}
+
+/** A big sparkle, 5×5, with a bright centre. */
+function star(c, centre = "l") {
+  return [`..${c}..`, `..${c}..`, `${c}${c}${centre}${c}${c}`, `..${c}..`, `..${c}..`];
+}
+
+/** A ring of thickness 2 on an odd `d`, in colour `c`, `fill` inside. */
+function ring(d, c, fill = ".") {
+  const r = (d - 1) / 2;
+  const rows = [];
+  for (let y = 0; y < d; y++) {
+    let s = "";
+    for (let x = 0; x < d; x++) {
+      const dd = Math.hypot(x - r, y - r);
+      s += dd > r + 0.4 ? "." : dd > r - 1.6 ? c : fill;
+    }
+    rows.push(s);
+  }
+  return rows;
+}
+const NETWORK_TILE = stamp(box(13, 13, "z", "C"), ["...ccccc...", ".cc.ccc.cc.", ".c.c...c.c.", "c..c...c..c", "c..c...c..c", "ccccccccccc", "c..c...c..c", "c..c...c..c", ".c.c...c.c.", ".cc.ccc.cc.", "...ccccc..."], 1, 1);
+const STORAGE_KEY = ["..yyy..", ".yYYYy.", ".yYKYy.", ".yYYYy.", "..yYy..", "..yYy..", "..yYyy.", "..yYy..", "..yYyy.", "..yYy..", "..yyy.."];
+const STORAGE_SAFE = stamp(stamp(box(11, 10, "Q", "q", false), ["yyy", "yKy", "yyy", ".y."], 4, 3), ["qq.....qq"], 1, 10);
+
+/** A filled disc of diameter `d`, one band colour per row, top to bottom. */
+function disc(d, bands) {
+  const r = (d - 1) / 2;
+  const rows = [];
+  for (let y = 0; y < d; y++) {
+    let s = "";
+    for (let x = 0; x < d; x++) s += Math.hypot(x - r, y - r) > r + 0.4 ? "." : bands[y] ?? bands[bands.length - 1];
+    rows.push(s);
+  }
+  return rows;
+}
+
+/** Shift each row right by `dx(row)` — a lid seen at an angle. */
+function skew(rows, dx) {
+  return rows.map((r, i) => ".".repeat(dx(i)) + r);
+}
+
+// Query: Otto on the beach — a palm, a sunset over the water, sunglasses and
+// a laptop running React. The disc has no keyline on purpose (it is sky).
+const QUERY_SUNSET = stamp(disc(13, "bppiieoDDbbbb"), [".GG.", "GGGG", "yyyy", ".GG."], 6, 2);
+const QUERY_PALM = ["..LLL.....", ".LLMLL....", "LLM.LL..LL", "LM..LL.LLM", "....LLLLM.", "LLL.LLLM..", "LLMLLLLLLL", "LMM.YYMMLL", "....YY..MM", "...YY.....", "...YY.....", "..YY......", "..YY......", "..YY......"];
+const QUERY_SAND = [".YYYY.....", "GGYYYYYY..", "GYYYYYYYYY", "YYYYYYYYYYY"];
+const QUERY_REACT = ["..cc.cc..", ".c..c..c.", "c.cc.cc.c", "c.c.l.c.c", "c.cc.cc.c", ".c..c..c.", "..cc.cc.."];
+const QUERY_LAPTOP_LID = skew(stamp(["mmmmmmmmmmm", ...Array(7).fill("11111111111")], QUERY_REACT, 1, 1), i => i < 3 ? 2 : i < 6 ? 1 : 0);
+const QUERY_LAPTOP_BASE = ["KmmmmmmmmmmmmmK"];
+const QUERY_SHADES = ["KKKKKKKKK", "..KKK.KKK", "..KKK.KKK"];
+const QUERY_SMILE = ["K..K", ".KK."];
+const QUERY_ARM = ["KK.", "ggK", "KK."];
+const ENV_PANEL = (() => {
+  let p = box(13, 11, "z", "q", false);
+  for (const [row, knob, col] of [[2, "f", 7], [5, "b", 3], [8, "o", 8]]) {
+    p = stamp(p, ["QQQQQQQQQ"], 2, row);
+    p = stamp(p, [knob + knob, knob + knob, knob + knob], col, row - 1);
+  }
+  return p;
+})();
+const REDUX_KNOT = stamp(ring(11, "p", "z"), ["...v...", "..v.v..", ".v...v.", "v..v..v", "v.v.v.v", ".vv.vv."], 2, 2);
+const ZUSTAND_BEAR = ["tt.....tt", "tTt...tTt", ".ttttttt.", "ttttttttt", "tKtttttKt", "ttttttttt", "ttjjjjjtt", "ttjjKjjtt", ".tjjjjjt."];
+const JOTAI_ATOM = ["....ccc....", "...c...c...", "...c...c...", ".ccc...ccc.", "c..c...c..c", "c....y....c", "c..c...c..c", ".ccc...ccc.", "...c...c...", "...c...c...", "....ccc...."];
+const TIME_MACHINE_REWIND = stamp(ring(13, "c", "z"), ["...c..c", "..cc.cc", ".ccc.ccc", "cccc.cccc", ".ccc.ccc", "..cc.cc", "...c..c"], 2, 3);
+const ROUTES_PIN = ["..eee..", ".eeeee.", "eeellee", "eeellee", ".eeeee.", "..eee..", "...e...", "...e..."];
+const HIGHLIGHT_ARROW = ["...y...", "..yyy..", ".yyyyy.", "yyyyyyy", "..yYy..", "..yYy..", "..yYy..", "..yYy.."];
+const DEBUG_BORDER = (() => {
+  const w = 13;
+  const h = 11;
+  const rows = [];
+  for (let y = 0; y < h; y++) {
+    let r = "";
+    for (let x = 0; x < w; x++) {
+      const edge = x === 0 || y === 0 || x === w - 1 || y === h - 1;
+      const corner = (x < 2 || x > w - 3) && (y < 2 || y > h - 3);
+      r += corner ? "i" : edge && (x + y) % 2 === 0 ? "i" : ".";
+    }
+    rows.push(r);
+  }
+  return rows;
+})();
+function plane(c) {
+  return ["....cccc....".replace(/c/g, c), "..cccccccc..".replace(/c/g, c), "cccccccccccc".replace(/c/g, c), "..cccccccc..".replace(/c/g, c), "....cccc....".replace(/c/g, c)];
+}
+const IMPERSONATE_HAT = ["...qqqqqqqq...", "...qqqqqqqq...", "...qqqaaqqq...", "qqqqqqqqqqqqqq"];
+const IMPERSONATE_GLASSES = ["KKKK.KKKK", "KllKKKllK", "KKKK.KKKK"];
+const IMPERSONATE_STACHE = ["KKK.KKK", ".KK.KK."];
+const IMPERSONATE_CARD = stamp(box(11, 8, "u", "x", false), ["zz.xxx", "zz.xx.", "...xxx"], 2, 2);
+const BENCH_WATCH = stamp(stamp(ring(11, "n", "z"), ["...nnn...", "....n...."].reverse(), 1, -2), ["l", ".r", "..r"], 5, 3);
+const JS_TOP_CHART = stamp(stamp(box(13, 11, "z", "q", false), [".....f.....", "....f.f....", "f..f...f..f", ".ff.....ff."], 1, 2), ["r.rr.r.rrr", "r.rr.rrrrr"], 2, 7);
+const IMAGES_CARD = stamp(stamp(box(13, 9, "u", "l", false), ["..f..", ".fff.", "fffff", "ffFffff", "fFFfFFff"], 3, 3), ["yy", "yy"], 8, 2);
+const ASSETS_CRATE = stamp(box(11, 9, "t", "T", false), ["llll.", "lxxll", "llll.l", "lxxxl", "llll.l", "lxxxl", "lllll"].map(r => r.slice(0, 5)), 3, 1);
+const CONSOLE_MONITOR = stamp(box(13, 10, "z", "Q", false), ["f.", "ff", "f.", "..", "f.ffff", "ff", "f."], 2, 2);
+const CONSOLE_STAND = ["..qq..", "..qq..", "qqqqqq"];
+const CONSOLE_KEYS = ["qqqqqqqq", "qQQQQQQq", "qqqqqqqq"];
+const EVENTS_LINE = (() => {
+  let p = ["...bbbbb...yyyyy", "...b.x.b...y.x.y", "...bx..b...yx..y", "...bbbbb...yyyyy", ".....n.......n..", ".....n.......n..", "nnnnnnnnnnnnnnnn"];
+  for (const [col, c] of [[0, "y"], [4, "c"], [8, "o"], [12, "p"]]) {
+    p = stamp(p, [c + c + c, c + c + c, c + c + c], col, 5);
+  }
+  return p;
+})();
+const SENTRY_SHIELD = stamp(["nnnnnnnnnnn", "nQQQQQQQQQn", "nQQQQQQQQQn", "nQQQQQQQQQn", "nQQQQQQQQQn", "nQQQQQQQQQn", "nQQQQQQQQQn", "nQQQQQQQQQn", ".nQQQQQQQn.", "..nQQQQQn..", "...nQQQn...", "....nQn....", ".....n....."], ["...r...", "..rrr..", "..rKr..", ".rrKrr.", ".rrrrr.", "rrrKrrr", "rrrrrrr"], 2, 1);
+const SCENARIOS_FLOW = (() => {
+  let p = [];
+  p = stamp(p, box(7, 4, "z", "f", false), 3, 0);
+  p = stamp(p, ["fff"], 5, 1);
+  p = stamp(p, ["fff"], 5, 2);
+  p = stamp(p, ["n"], 6, 4);
+  p = stamp(p, ["nnnnnnnnn"], 2, 5);
+  p = stamp(p, ["n"], 2, 6);
+  p = stamp(p, ["n"], 10, 6);
+  p = stamp(p, box(5, 3, "z", "p", false), 0, 7);
+  p = stamp(p, ["ppp"], 1, 8);
+  p = stamp(p, box(5, 3, "z", "b", false), 8, 7);
+  p = stamp(p, ["bbb"], 9, 8);
+  return p;
+})();
+const ASK_BUOY_BUBBLE = stamp(stamp(box(13, 8, "z", "u", false), ["uu.uu.uu"], 3, 3), ["uu", "u."], 2, 8);
+const TV_REMOTE_REMOTE = stamp(box(5, 9, "q", "Q", false), [".e.", "c.c", ".y.", "c.c"], 1, 1);
+const TV_REMOTE_WAVES = ["...ee", "..e..", ".e.ee", ".e.e.", ".e.ee", "..e..", "...ee"];
+const TV_REMOTE_SHADES = ["KKK.KKK", "KKKKKKK"];
+const FOCUS_GLASS = stamp(ring(9, "n", "c"), ["l"], 3, 3);
+const FOCUS_HANDLE = ["..mm", ".mm.", "mm.."];
+function bracket(c, corner) {
+  const h = c.repeat(4);
+  const v = `${c}...`;
+  const rows = [h, v, v, v];
+  const flipX = r => r.split("").reverse().join("");
+  let out = rows;
+  if (corner === "tr" || corner === "br") out = out.map(flipX);
+  if (corner === "bl" || corner === "br") out = [...out].reverse();
+  return out;
+}
+const CAMERA_BODY = stamp(stamp(stamp(["..QQQQ"], box(13, 9, "q", "Q", false), 0, 1), ring(7, "n", "c"), 3, 2), ["yy"], 9, 3);
+
+// ----------------------------------------------------------------- scenes --
+//
+// Otto sits at (2, 5): lamp on row 7, eyes on rows 11–12, palm (present) at
+// (15–17, 12), arm rest (lean) on row 10, feet on row 17, floor on rows 18–20.
+
+export const OTTO_SCENES = [{
+  id: "network",
+  name: "Network",
+  color: "#00D4FF",
+  line: "The first request, caught.",
+  state: "present",
+  layers: [{
+    art: NETWORK_TILE,
+    x: 16,
+    y: 1,
+    follow: true
+  }, {
+    art: sparkle("l"),
+    x: 27,
+    y: 1,
+    outline: false,
+    follow: true
+  }, {
+    art: ["l"],
+    x: 14,
+    y: 1,
+    outline: false,
+    follow: true
+  }]
+}, {
+  id: "storage",
+  name: "Storage",
+  color: "#FFB800",
+  line: "Keys in, keys out, nothing lost.",
+  state: "present",
+  layers: [{
+    art: STORAGE_SAFE,
+    x: 19,
+    y: 7
+  }, {
+    art: STORAGE_KEY,
+    x: 16,
+    y: 1,
+    follow: true,
+    over: true
+  }],
+  ground: [3, 29]
+}, {
+  id: "react-query",
+  name: "Query",
+  color: "#02CEE2",
+  line: "Ask anything, find everything.",
+  state: "static",
+  ottoX: 6,
+  ottoY: 3,
+  layers: [{
+    art: QUERY_SUNSET,
+    x: 11,
+    y: 0,
+    outline: false
+  }, {
+    art: QUERY_SAND,
+    x: 0,
+    y: 13
+  }, {
+    art: QUERY_PALM,
+    x: 0,
+    y: 0
+  }, {
+    art: QUERY_SHADES,
+    x: 9,
+    y: 8,
+    outline: false,
+    over: true
+  }, {
+    art: QUERY_SMILE,
+    x: 12,
+    y: 11,
+    outline: false,
+    over: true
+  }, {
+    art: QUERY_LAPTOP_LID,
+    x: 15,
+    y: 12,
+    over: true
+  }, {
+    art: QUERY_LAPTOP_BASE,
+    x: 13,
+    y: 20,
+    outline: false,
+    over: true
+  }, {
+    art: QUERY_ARM,
+    x: 19,
+    y: 10,
+    outline: false,
+    over: true
+  }],
+  ground: [2, 27]
+}, {
+  id: "env",
+  name: "Env",
+  color: "#4AFF9F",
+  line: "Every variable, checked.",
+  state: "lean",
+  layers: [{
+    art: ENV_PANEL,
+    x: 16,
+    y: 7
+  }],
+  ground: [3, 28]
+}, {
+  id: "redux",
+  name: "Redux",
+  color: "#764abc",
+  line: "One store, held close.",
+  state: "hug",
+  layers: [{
+    art: REDUX_KNOT,
+    x: 6,
+    y: 12,
+    over: true,
+    follow: true
+  }, {
+    art: ["e.e", "eee", ".e."],
+    x: 17,
+    y: 4,
+    outline: false
+  }, {
+    art: ["e.e", "eee", ".e."],
+    x: 21,
+    y: 1,
+    outline: false
+  }]
+}, {
+  id: "zustand",
+  name: "Zustand",
+  color: "#C08552",
+  line: "Small stores, big possibilities.",
+  state: "hug",
+  layers: [{
+    art: ZUSTAND_BEAR,
+    x: 6,
+    y: 12,
+    over: true,
+    follow: true
+  }, {
+    art: ["e.e", "eee", ".e."],
+    x: 18,
+    y: 3,
+    outline: false
+  }]
+}, {
+  id: "jotai",
+  name: "Jotai",
+  color: "#6C47FF",
+  line: "Atoms, one by one.",
+  state: "point",
+  layers: [{
+    art: JOTAI_ATOM,
+    x: 17,
+    y: 0,
+    follow: true
+  }, {
+    art: sparkle("y"),
+    x: 13,
+    y: 2,
+    outline: false
+  }, {
+    art: sparkle("y"),
+    x: 27,
+    y: 8,
+    outline: false
+  }]
+}, {
+  id: "time-machine",
+  name: "Time Machine",
+  color: "#06B6D4",
+  line: "Any moment, back again.",
+  state: "present",
+  layers: [{
+    art: TIME_MACHINE_REWIND,
+    x: 16,
+    y: -1,
+    follow: true
+  }, {
+    art: ["ccc", "", ".cccc", "", "ccc"],
+    x: 0,
+    y: 9,
+    outline: false
+  }]
+}, {
+  id: "routes",
+  name: "Routes",
+  color: "#FF9F1C",
+  line: "Knows where you are going.",
+  state: "point",
+  layers: [{
+    art: ROUTES_PIN,
+    x: 20,
+    y: 0,
+    follow: true
+  }, {
+    art: ["........ee", ".......e..", ".....ee...", "...ee.....", "ee........"],
+    x: 15,
+    y: 10,
+    outline: false
+  }]
+}, {
+  id: "highlight-updates",
+  name: "Highlight Updates",
+  color: "#10B981",
+  line: "See every render. Catch what changed.",
+  state: "lift",
+  layers: [{
+    art: HIGHLIGHT_ARROW,
+    x: 6,
+    y: -1,
+    follow: true
+  }, {
+    art: sparkle("y"),
+    x: 1,
+    y: 0,
+    outline: false
+  }, {
+    art: sparkle("y"),
+    x: 15,
+    y: 1,
+    outline: false
+  }, {
+    art: ["l"],
+    x: 3,
+    y: 4,
+    outline: false
+  }, {
+    art: ["l"],
+    x: 14,
+    y: 5,
+    outline: false
+  }]
+}, {
+  id: "debug-borders",
+  name: "Debug Borders",
+  color: "#10B981",
+  line: "Every box, outlined.",
+  state: "point",
+  layers: [{
+    art: DEBUG_BORDER,
+    x: 17,
+    y: 0,
+    outline: false,
+    follow: true
+  }]
+}, {
+  id: "image-overlay",
+  name: "Overlay",
+  color: "#A855F7",
+  line: "Design on top, pixel for pixel.",
+  state: "present",
+  layers: [{
+    art: plane("P"),
+    x: 16,
+    y: 8,
+    follow: true
+  }, {
+    art: plane("b"),
+    x: 16,
+    y: 5,
+    follow: true
+  }, {
+    art: plane("c"),
+    x: 16,
+    y: 2,
+    follow: true
+  }]
+}, {
+  id: "impersonate",
+  name: "Impersonate",
+  color: "#F59E0B",
+  line: "Be anyone, safely.",
+  state: "present",
+  layers: [{
+    art: IMPERSONATE_HAT,
+    x: 3,
+    y: 4,
+    over: true
+  }, {
+    art: IMPERSONATE_GLASSES,
+    x: 6,
+    y: 10,
+    over: true,
+    outline: false
+  }, {
+    art: IMPERSONATE_STACHE,
+    x: 7,
+    y: 13,
+    over: true,
+    outline: false
+  }, {
+    art: IMPERSONATE_CARD,
+    x: 17,
+    y: 3,
+    follow: true
+  }]
+}, {
+  id: "perf-monitor",
+  name: "Bench",
+  color: "#F59E0B",
+  line: "Frames, counted.",
+  state: "present",
+  layers: [{
+    art: BENCH_WATCH,
+    x: 17,
+    y: 0,
+    follow: true
+  }, {
+    art: ["ccc", "", ".cccc", "", "ccc"],
+    x: 0,
+    y: 9,
+    outline: false
+  }, {
+    art: ["KK", "..KK"],
+    x: 6,
+    y: 9,
+    over: true,
+    outline: false
+  }, {
+    art: [".KK", "KK"],
+    x: 10,
+    y: 9,
+    over: true,
+    outline: false
+  }]
+}, {
+  id: "js-top",
+  name: "JS Top",
+  color: "#F59E0B",
+  line: "Who is eating the thread.",
+  state: "debugging",
+  layers: [{
+    art: JS_TOP_CHART,
+    x: 18,
+    y: 6
+  }],
+  ground: [3, 29]
+}, {
+  id: "images",
+  name: "Images",
+  color: "#C084FC",
+  line: "Every image, weighed.",
+  state: "present",
+  layers: [{
+    art: IMAGES_CARD,
+    x: 16,
+    y: 2,
+    follow: true
+  }, {
+    art: sparkle("y"),
+    x: 26,
+    y: 0,
+    outline: false
+  }, {
+    art: sparkle("y"),
+    x: 14,
+    y: 0,
+    outline: false
+  }]
+}, {
+  id: "assets",
+  name: "Assets",
+  color: "#2DD4BF",
+  line: "What ships, and how big.",
+  state: "lean",
+  layers: [{
+    art: ASSETS_CRATE,
+    x: 16,
+    y: 9
+  }],
+  ground: [3, 28]
+}, {
+  id: "console",
+  name: "Console",
+  color: "#10B981",
+  line: "Logs, commands, and more.",
+  state: "present",
+  layers: [{
+    art: CONSOLE_MONITOR,
+    x: 18,
+    y: 1
+  }, {
+    art: CONSOLE_STAND,
+    x: 21,
+    y: 11
+  }, {
+    art: CONSOLE_KEYS,
+    x: 15,
+    y: 13,
+    over: true
+  }],
+  ground: [3, 28]
+}, {
+  id: "events",
+  name: "Events",
+  color: "#00D4FF",
+  line: "Everything in order.",
+  state: "present",
+  layers: [{
+    art: EVENTS_LINE,
+    x: 15,
+    y: 1,
+    follow: true
+  }]
+}, {
+  id: "sentry",
+  name: "Sentry",
+  color: "#FF3366",
+  line: "Catch issues before they ship.",
+  state: "present",
+  layers: [{
+    art: SENTRY_SHIELD,
+    x: 17,
+    y: -1,
+    follow: true
+  }, {
+    art: ["KK", "..KK"],
+    x: 6,
+    y: 9,
+    over: true,
+    outline: false
+  }, {
+    art: [".KK", "KK"],
+    x: 10,
+    y: 9,
+    over: true,
+    outline: false
+  }]
+}, {
+  id: "scenarios",
+  name: "Scenarios",
+  color: "#F43F5E",
+  line: "Set the stage, replay it.",
+  state: "present",
+  layers: [{
+    art: SCENARIOS_FLOW,
+    x: 16,
+    y: 0,
+    follow: true
+  }]
+}, {
+  id: "ask-buoy",
+  name: "Ask Buoy",
+  color: "#7DD3FC",
+  line: "Get answers. Move faster.",
+  state: "wave",
+  layers: [{
+    art: ASK_BUOY_BUBBLE,
+    x: 16,
+    y: 0
+  }, {
+    art: sparkle("u"),
+    x: 26,
+    y: 10,
+    outline: false
+  }, {
+    art: ["u"],
+    x: 14,
+    y: 3,
+    outline: false
+  }]
+}, {
+  id: "tv-remote",
+  name: "TV Remote",
+  color: "#FF3366",
+  line: "Control the app from here.",
+  state: "present",
+  layers: [{
+    art: TV_REMOTE_SHADES,
+    x: 6,
+    y: 11,
+    over: true,
+    outline: false
+  }, {
+    art: TV_REMOTE_REMOTE,
+    x: 16,
+    y: 5,
+    follow: true,
+    over: true
+  }, {
+    art: TV_REMOTE_WAVES,
+    x: 23,
+    y: 2,
+    outline: false,
+    follow: true
+  }]
+}, {
+  id: "focus-inspector",
+  name: "Focus Inspector",
+  color: "#4ADE80",
+  line: "See what's focused.",
+  state: "present",
+  layers: [{
+    art: bracket("f", "tl"),
+    x: 1,
+    y: 1,
+    outline: false
+  }, {
+    art: bracket("f", "tr"),
+    x: 26,
+    y: 1,
+    outline: false
+  }, {
+    art: bracket("f", "bl"),
+    x: 1,
+    y: 17,
+    outline: false
+  }, {
+    art: bracket("f", "br"),
+    x: 26,
+    y: 17,
+    outline: false
+  }, {
+    art: FOCUS_GLASS,
+    x: 18,
+    y: 2,
+    follow: true
+  }, {
+    art: FOCUS_HANDLE,
+    x: 15,
+    y: 9,
+    follow: true
+  }]
+}, {
+  id: "camera",
+  name: "Camera",
+  color: "#F472B6",
+  line: "A real feed, on the simulator.",
+  state: "present",
+  layers: [{
+    art: CAMERA_BODY,
+    x: 16,
+    y: 3,
+    follow: true
+  }, {
+    art: star("y"),
+    x: 25,
+    y: -1,
+    outline: false
+  }]
+}];
+
+/** Scene lookup by tool id. */
+export const OTTO_SCENE_BY_ID = Object.fromEntries(OTTO_SCENES.map(s => [s.id, s]));