@buoy-gg/shared-ui 7.0.40 → 7.0.42

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

@@ -1,942 +1 @@
-"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]));
+"use strict";import{OTTO_ANCHORS as _,OTTO_GRID as h,OTTO_PALETTE as d,renderOttoFrame as L}from"./ottoEngine.js";export const OTTO_SCENE_PALETTE={...d,K:"#000000",c:"#22D3EE",C:"#0E7490",u:"#7DD3FC",b:"#3B82F6",B:"#1E3A8A",y:"#FDE047",Y:"#F59E0B",o:"#FB923C",v:"#C4B5FD",P:"#6D28D9",e:"#FB7185",E:"#BE123C",i:"#F472B6",t:"#B07D4F",T:"#6B4423",z:"#0B1220",q:"#1F2937",Q:"#374151",f:"#4ADE80",F:"#166534",x:"#CBD5E1",j:"#E7C9A0",G:"#F6C453",D:"#EF5B4E",L:"#5DBB63",M:"#3D8B4F"};export const OTTO_SCENE_W=30;export const OTTO_SCENE_H=24;export const OTTO_SCENE_OTTO={x:2,y:5};function S(e,r){return Array.from({length:r},()=>Array(e).fill("."))}function g(e){return!!e&&e!=="."&&e!==" "}function A(e){const r=e.art;const o=[];const c=(t,a)=>a>=0&&a<r.length&&g(r[a][t]);const s=e.outline??true;let n=0;for(const t of r)n=Math.max(n,t.length);for(let t=-1;t<=r.length;t++){for(let a=-1;a<=n;a++){if(c(a,t)){o.push([a,t,r[t][a]])}else if(s&&(c(a-1,t)||c(a+1,t)||c(a,t-1)||c(a,t+1))){o.push([a,t,"K"])}}}return o}function O(e,r){const o=_[e];if(!o)return 0;return o(r).y-o(0).y}function v(e,r,o){return((e-Math.floor(o/2)+r*5)%7+7)%7<2?"W":"w"}export function renderOttoScene(e,r=0){const o=OTTO_SCENE_W;const c=OTTO_SCENE_H;const s=S(o,c);const n=e.ottoX??OTTO_SCENE_OTTO.x;const t=e.ottoY??OTTO_SCENE_OTTO.y;const a=(y,x,i)=>{if(y>=0&&y<o&&x>=0&&x<c)s[x][y]=i};if(e.ground!==false){const[y,x]=e.ground??[n+1,n+h-2];for(let i=13;i<16;i++){for(let Q=y;Q<=x;Q++){const q=Q===y||Q===x;if(i===15&&(Q+i)%2)continue;if(q&&i!==14)continue;a(Q,t+i,v(Q,i,r))}}}const f=O(e.state,r);const E=y=>{const x=y.follow?f:0;for(const[i,Q,q]of A(y))a(y.x+i,y.y+Q+x,q)};for(const y of e.layers)if(!y.over)E(y);const Y=L(e.state,r,{water:false,keyline:true});for(let y=0;y<h;y++){for(let x=0;x<h;x++){const i=Y[y][x];if(i!==".")a(n+x,t+y,i)}}for(const y of e.layers)if(y.over)E(y);return s}export function ottoSceneRuns(e){const r=[];for(let o=0;o<e.length;o++){const c=e[o];let s=0;while(s<c.length){const n=c[s];let t=1;while(s+t<c.length&&c[s+t]===n)t++;if(n!=="."){const a=OTTO_SCENE_PALETTE[n];if(a)r.push({x:s,y:o,w:t,color:a})}s+=t}}return r}export function ottoSceneBounds(e){let r=Infinity;let o=Infinity;let c=-1;let s=-1;for(let n=0;n<e.length;n++){for(let t=0;t<e[n].length;t++){if(e[n][t]===".")continue;if(t<r)r=t;if(t>c)c=t;if(n<o)o=n;if(n>s)s=n}}return c<0?null:[r,o,c,s]}function u(e,r,o,c=o,s=true){const n=[];for(let t=0;t<r;t++){let a="";for(let f=0;f<e;f++){const E=f===0||t===0||f===e-1||t===r-1;const Y=(f===0||f===e-1)&&(t===0||t===r-1);a+=s&&Y?".":E?c:o}n.push(a)}return n}function l(e,r,o,c){const s=e.map(n=>n.split(""));for(let n=0;n<r.length;n++){for(let t=0;t<r[n].length;t++){const a=r[n][t];if(!g(a))continue;const f=c+n;const E=o+t;if(f<0||E<0)continue;while(s.length<=f)s.push([]);while(s[f].length<=E)s[f].push(".");s[f][E]=a}}return s.map(n=>n.join(""))}function K(e){return[`.${e}.`,`${e}${e}${e}`,`.${e}.`]}function F(e,r="l"){return[`..${e}..`,`..${e}..`,`${e}${e}${r}${e}${e}`,`..${e}..`,`..${e}..`]}function m(e,r,o="."){const c=(e-1)/2;const s=[];for(let n=0;n<e;n++){let t="";for(let a=0;a<e;a++){const f=Math.hypot(a-c,n-c);t+=f>c+.4?".":f>c-1.6?r:o}s.push(t)}return s}const b=l(u(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 w=["..yyy..",".yYYYy.",".yYKYy.",".yYYYy.","..yYy..","..yYy..","..yYyy.","..yYy..","..yYyy.","..yYy..","..yyy.."];const C=l(l(u(11,10,"Q","q",false),["yyy","yKy","yyy",".y."],4,3),["qq.....qq"],1,10);function R(e,r){const o=(e-1)/2;const c=[];for(let s=0;s<e;s++){let n="";for(let t=0;t<e;t++)n+=Math.hypot(t-o,s-o)>o+.4?".":r[s]??r[r.length-1];c.push(n)}return c}function B(e,r){return e.map((o,c)=>".".repeat(r(c))+o)}const D=l(R(13,"bppiieoDDbbbb"),[".GG.","GGGG","yyyy",".GG."],6,2);const M=["..LLL.....",".LLMLL....","LLM.LL..LL","LM..LL.LLM","....LLLLM.","LLL.LLLM..","LLMLLLLLLL","LMM.YYMMLL","....YY..MM","...YY.....","...YY.....","..YY......","..YY......","..YY......"];const N=[".YYYY.....","GGYYYYYY..","GYYYYYYYYY","YYYYYYYYYYY"];const I=["..cc.cc..",".c..c..c.","c.cc.cc.c","c.c.l.c.c","c.cc.cc.c",".c..c..c.","..cc.cc.."];const G=B(l(["mmmmmmmmmmm",...Array(7).fill("11111111111")],I,1,1),e=>e<3?2:e<6?1:0);const j=["KmmmmmmmmmmmmmK"];const U=["KKKKKKKKK","..KKK.KKK","..KKK.KKK"];const z=["K..K",".KK."];const H=["KK.","ggK","KK."];const P=(()=>{let e=u(13,11,"z","q",false);for(const[r,o,c]of[[2,"f",7],[5,"b",3],[8,"o",8]]){e=l(e,["QQQQQQQQQ"],2,r);e=l(e,[o+o,o+o,o+o],c,r-1)}return e})();const k=l(m(11,"p","z"),["...v...","..v.v..",".v...v.","v..v..v","v.v.v.v",".vv.vv."],2,2);const $=["tt.....tt","tTt...tTt",".ttttttt.","ttttttttt","tKtttttKt","ttttttttt","ttjjjjjtt","ttjjKjjtt",".tjjjjjt."];const W=["....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 V=l(m(13,"c","z"),["...c..c","..cc.cc",".ccc.ccc","cccc.cccc",".ccc.ccc","..cc.cc","...c..c"],2,3);const J=["..eee..",".eeeee.","eeellee","eeellee",".eeeee.","..eee..","...e...","...e..."];const X=["...y...","..yyy..",".yyyyy.","yyyyyyy","..yYy..","..yYy..","..yYy..","..yYy.."];const Z=(()=>{const e=13;const r=11;const o=[];for(let c=0;c<r;c++){let s="";for(let n=0;n<e;n++){const t=n===0||c===0||n===e-1||c===r-1;const a=(n<2||n>e-3)&&(c<2||c>r-3);s+=a?"i":t&&(n+c)%2===0?"i":"."}o.push(s)}return o})();function T(e){return["....cccc....".replace(/c/g,e),"..cccccccc..".replace(/c/g,e),"cccccccccccc".replace(/c/g,e),"..cccccccc..".replace(/c/g,e),"....cccc....".replace(/c/g,e)]}const ee=["...qqqqqqqq...","...qqqqqqqq...","...qqqaaqqq...","qqqqqqqqqqqqqq"];const te=["KKKK.KKKK","KllKKKllK","KKKK.KKKK"];const oe=["KKK.KKK",".KK.KK."];const re=l(u(11,8,"u","x",false),["zz.xxx","zz.xx.","...xxx"],2,2);const ne=l(l(m(11,"n","z"),["...nnn...","....n...."].reverse(),1,-2),["l",".r","..r"],5,3);const ce=l(l(u(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 le=l(l(u(13,9,"u","l",false),["..f..",".fff.","fffff","ffFffff","fFFfFFff"],3,3),["yy","yy"],8,2);const se=l(u(11,9,"t","T",false),["llll.","lxxll","llll.l","lxxxl","llll.l","lxxxl","lllll"].map(e=>e.slice(0,5)),3,1);const ae=l(u(13,10,"z","Q",false),["f.","ff","f.","..","f.ffff","ff","f."],2,2);const ye=["..qq..","..qq..","qqqqqq"];const fe=["qqqqqqqq","qQQQQQQq","qqqqqqqq"];const ie=(()=>{let e=["...bbbbb...yyyyy","...b.x.b...y.x.y","...bx..b...yx..y","...bbbbb...yyyyy",".....n.......n..",".....n.......n..","nnnnnnnnnnnnnnnn"];for(const[r,o]of[[0,"y"],[4,"c"],[8,"o"],[12,"p"]]){e=l(e,[o+o+o,o+o+o,o+o+o],r,5)}return e})();const ue=l(["nnnnnnnnnnn","nQQQQQQQQQn","nQQQQQQQQQn","nQQQQQQQQQn","nQQQQQQQQQn","nQQQQQQQQQn","nQQQQQQQQQn","nQQQQQQQQQn",".nQQQQQQQn.","..nQQQQQn..","...nQQQn...","....nQn....",".....n....."],["...r...","..rrr..","..rKr..",".rrKrr.",".rrrrr.","rrrKrrr","rrrrrrr"],2,1);const xe=(()=>{let e=[];e=l(e,u(7,4,"z","f",false),3,0);e=l(e,["fff"],5,1);e=l(e,["fff"],5,2);e=l(e,["n"],6,4);e=l(e,["nnnnnnnnn"],2,5);e=l(e,["n"],2,6);e=l(e,["n"],10,6);e=l(e,u(5,3,"z","p",false),0,7);e=l(e,["ppp"],1,8);e=l(e,u(5,3,"z","b",false),8,7);e=l(e,["bbb"],9,8);return e})();const Qe=l(l(u(13,8,"z","u",false),["uu.uu.uu"],3,3),["uu","u."],2,8);const Ee=l(u(5,9,"q","Q",false),[".e.","c.c",".y.","c.c"],1,1);const Ke=["...ee","..e..",".e.ee",".e.e.",".e.ee","..e..","...ee"];const me=["KKK.KKK","KKKKKKK"];const pe=l(m(9,"n","c"),["l"],3,3);const Ye=["..mm",".mm.","mm.."];function p(e,r){const o=e.repeat(4);const c=`${e}...`;const s=[o,c,c,c];const n=a=>a.split("").reverse().join("");let t=s;if(r==="tr"||r==="br")t=t.map(n);if(r==="bl"||r==="br")t=[...t].reverse();return t}const qe=l(l(l(["..QQQQ"],u(13,9,"q","Q",false),0,1),m(7,"n","c"),3,2),["yy"],9,3);export const OTTO_SCENES=[{id:"network",name:"Network",color:"#00D4FF",line:"The first request, caught.",state:"present",layers:[{art:b,x:16,y:1,follow:true},{art:K("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:C,x:19,y:7},{art:w,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:D,x:11,y:0,outline:false},{art:N,x:0,y:13},{art:M,x:0,y:0},{art:U,x:9,y:8,outline:false,over:true},{art:z,x:12,y:11,outline:false,over:true},{art:G,x:15,y:12,over:true},{art:j,x:13,y:20,outline:false,over:true},{art:H,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:P,x:16,y:7}],ground:[3,28]},{id:"redux",name:"Redux",color:"#764abc",line:"One store, held close.",state:"hug",layers:[{art:k,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:$,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:W,x:17,y:0,follow:true},{art:K("y"),x:13,y:2,outline:false},{art:K("y"),x:27,y:8,outline:false}]},{id:"time-machine",name:"Time Machine",color:"#06B6D4",line:"Any moment, back again.",state:"present",layers:[{art:V,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:J,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:X,x:6,y:-1,follow:true},{art:K("y"),x:1,y:0,outline:false},{art:K("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:Z,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:T("P"),x:16,y:8,follow:true},{art:T("b"),x:16,y:5,follow:true},{art:T("c"),x:16,y:2,follow:true}]},{id:"impersonate",name:"Impersonate",color:"#F59E0B",line:"Be anyone, safely.",state:"present",layers:[{art:ee,x:3,y:4,over:true},{art:te,x:6,y:10,over:true,outline:false},{art:oe,x:7,y:13,over:true,outline:false},{art:re,x:17,y:3,follow:true}]},{id:"perf-monitor",name:"Bench",color:"#F59E0B",line:"Frames, counted.",state:"present",layers:[{art:ne,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:ce,x:18,y:6}],ground:[3,29]},{id:"images",name:"Images",color:"#C084FC",line:"Every image, weighed.",state:"present",layers:[{art:le,x:16,y:2,follow:true},{art:K("y"),x:26,y:0,outline:false},{art:K("y"),x:14,y:0,outline:false}]},{id:"assets",name:"Assets",color:"#2DD4BF",line:"What ships, and how big.",state:"lean",layers:[{art:se,x:16,y:9}],ground:[3,28]},{id:"console",name:"Console",color:"#10B981",line:"Logs, commands, and more.",state:"present",layers:[{art:ae,x:18,y:1},{art:ye,x:21,y:11},{art:fe,x:15,y:13,over:true}],ground:[3,28]},{id:"events",name:"Events",color:"#00D4FF",line:"Everything in order.",state:"present",layers:[{art:ie,x:15,y:1,follow:true}]},{id:"sentry",name:"Sentry",color:"#FF3366",line:"Catch issues before they ship.",state:"present",layers:[{art:ue,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:xe,x:16,y:0,follow:true}]},{id:"ask-buoy",name:"Ask Buoy",color:"#7DD3FC",line:"Get answers. Move faster.",state:"wave",layers:[{art:Qe,x:16,y:0},{art:K("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:me,x:6,y:11,over:true,outline:false},{art:Ee,x:16,y:5,follow:true,over:true},{art:Ke,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:p("f","tl"),x:1,y:1,outline:false},{art:p("f","tr"),x:26,y:1,outline:false},{art:p("f","bl"),x:1,y:17,outline:false},{art:p("f","br"),x:26,y:17,outline:false},{art:pe,x:18,y:2,follow:true},{art:Ye,x:15,y:9,follow:true}]},{id:"camera",name:"Camera",color:"#F472B6",line:"A real feed, on the simulator.",state:"present",layers:[{art:qe,x:16,y:3,follow:true},{art:F("y"),x:25,y:-1,outline:false}]}];export const OTTO_SCENE_BY_ID=Object.fromEntries(OTTO_SCENES.map(e=>[e.id,e]));