# you're about to build a plot on vibeout.lol

Paste this whole file into your LLM of choice and describe what you want. Or read it yourself — it's short. Either way, the machine at the other end needs everything below.

## the pitch, in three sentences

vibeout.lol is a 32×32 grid where every cell is one HTML file with a tiny key-value store, and every app can read what its eight neighbors publish. Build a weather station and the laundry line next door starts flapping; build a lighthouse and the moths come. Anything can be forked and voted out from under its owner — including the map itself — so build something worth defending.

## the rules (all of them)

- **One HTML file.** Inline your CSS and JS. ≤ 10 MB, but if you're over 200 KB you'd better be shipping a game.
- **No network.** Your app runs in a sandboxed iframe with `connect-src 'none'` — no fetch, no XHR, no WebSocket. External `<script>` only from cdn.jsdelivr.net or unpkg.com; Google Fonts allowed; `<img>` from anywhere. Everything else happens through `board.js`.
- **1,024 rows.** Keys ≤ 128 chars, values are JSON ≤ 8 KB, each row `public` or `private`. The 1,025th write fails with a friendly error. Writes are capped at 10/second.
- **Neighbors are the 8 cells around you.** You can read their *public* rows and message them. That's the whole social contract: publish generously, peek nosily.
- **You can be outvibed.** Anyone can fork your plot, improve it, and challenge your cell. Votes decide. Your data stays yours either way — private rows never leave your namespace.

## board.js — the entire API

Load it first: `<script src="/board.js"></script>`. Everything is promises.

```js
// Lifecycle — call this before anything else, it resolves fast
const { me, neighbors, viewer } = await board.ready();
// me        → { slug, x, y, reigning, forkedFrom?, owner: { x_handle? } }
// neighbors → [{ slug, x, y, edge }]   edge ∈ "N","NE","E","SE","S","SW","W","NW"
// viewer    → { id }                   stable anonymous id for whoever's looking
// me.reigning === false means you're a challenger being previewed in context:
// you can read everything, but your writes don't fan out and your sends are dropped.

// Your storage (your namespace only)
await board.kv.get("visits")                          // → value, or null
await board.kv.set("visits", 42, { public: true })    // public defaults to false
await board.kv.del("old-key")
await board.kv.list({ prefix: "pixel:" })             // → [{ key, value, public, version, updatedAt }]

// Neighbors (adjacent reigning plots only — the host enforces this)
await board.peek("weather", "wind")                   // → one public value, or null
await board.peekAll("weather")                        // → [{ key, value, version, updatedAt }]
board.send("marble-run-2", { marble: { vx: 2 } })     // fire-and-forget; delivered only if
                                                      // that app is live on someone's screen

// Events
board.on("change",    ({ slug, key, value }) => {})   // your rows + neighbors' public rows
board.on("message",   ({ from, data }) => {})         // somebody send()'d you something
board.on("neighbors", (neighbors) => {})              // someone moved in, out, or got outvibed

// Viewer settings — preferences each visitor can set FOR YOUR APP ONLY.
// Declare what you support with a public `settings_schema` row and the host
// renders a form for it next to your plot (and in the ⚙ menu):
await board.kv.set("settings_schema", [
  { key: "units",    label: "Temperature", type: "select", options: ["c","f"], default: "c" },
  { key: "location", label: "Location",    type: "text",   max: 40 },
], { public: true });
board.settings.get("units")                           // synchronous after ready()
board.settings.all()                                  // also in ready()'s viewer.settings
board.on("settings", (s) => {})                       // the viewer changed something — react live
// Settings are namespaced per app. You can't read another app's, and nobody
// can read or hijack yours.

// App manifest (optional). One public `manifest` row declares how your app
// behaves in the neighborhood — display, audio, and (reserved for later)
// category and thumbnail. Keys you don't set fall back to host defaults.
//
// edge_fit — in the zoomed neighborhood the centre plot is big and the
// neighbors sit in thin edge slots. Three ways to be an edge:
//   "squish"     (default) your whole app, scaled down to fit
//   "crop"       a natural-scale slice of your app
//   "responsive" you get the REAL slot size — your own CSS adapts, like
//                web vs mobile vs tablet. Pair it with positional awareness:
await board.kv.set("manifest", { edge_fit: "responsive" }, { public: true });
board.display()                    // → { role: "primary"|"edge", edge, width, height }
board.on("display", (d) => {})     // fired when you change roles or sides
// edge is which side of the neighborhood you're on: "N" = top, "S" = bottom,
// "W" = left, "E" = right, corners "NW"/"NE"/"SW"/"SE" — so a laundry line can
// hang along the bottom, and a lighthouse can point its beam inward.

// audio — sound is spatial. You play at full presence as the primary tile and
// bleed FAINTLY into adjacent cells (orthogonal neighbors louder than
// corners). Both sides get a say:
//   level        (0–1, default 1)  how loud you play at full presence — your
//                                  declaration to the neighborhood
//   neighbor_max (0–1, default ∅)  while YOU are the centre plot, a cap on
//                                  how loud any neighbor may bleed in
await board.kv.set("manifest", {
  edge_fit: "responsive",
  audio: { level: 0.9, neighbor_max: 0.2 },
}, { public: true });
board.audio()                      // → { gain } — how loud you may play NOW
board.on("audio", (a) => {})       // fired when your effective gain changes
// Multiply the gain into whatever you play (el.volume, GainNode) — the host
// can't reach inside your sandbox, so honoring it is part of being a good
// neighbor. Autoplay may be blocked until the viewer interacts; retry on a
// gesture, and never play louder than your gain.
```

A row you `set` without `{ public: true }` is private: neighbors can't see it, forks don't copy it (unless the forker holds *your* key), nobody but you.

## a complete, working plot

This is the reference app. It runs today. Yours should be more interesting.

```html
<!doctype html>
<meta charset="utf-8">
<title>hello plot</title>
<style>
  body{margin:0;display:grid;place-items:center;height:100vh;font:600 18px system-ui;background:#111;color:#fff}
</style>
<div id="out">…</div>
<script src="/board.js"></script>
<script>
  (async () => {
    const { me, neighbors } = await board.ready();
    const n = (await board.kv.get("visits")) ?? 0;
    await board.kv.set("visits", n + 1, { public: true });
    out.textContent = `${me.slug} @ ${me.x},${me.y} · ${n + 1} visits · ${neighbors.length} neighbors`;
    board.on("change", e => { if (e.slug !== me.slug) out.textContent = `${e.slug} changed ${e.key}`; });
  })();
</script>
```

## shipping it

```bash
# 1. create your app — the plot_key comes back ONCE. save it.
#    category is optional but puts you on the leaderboard filters:
#    games | toys | art | tools | social
curl -X POST https://vibeout.lol/api/apps \
  -H 'Content-Type: application/json' \
  -d '{"slug":"my-lighthouse","title":"The Lighthouse","category":"art","x_handle":"@you"}'

# 2. upload your file
curl -X POST https://vibeout.lol/api/apps/my-lighthouse/builds \
  -H 'X-Plot-Key: plot_…' -F 'file=@index.html'

# 3. stake a cell — empty means you reign, occupied means you're challenging
curl -X POST https://vibeout.lol/api/apps/my-lighthouse/claim \
  -H 'X-Plot-Key: plot_…' -H 'Content-Type: application/json' -d '{"x":14,"y":22}'

# 4. (optional) tune your neighborhood manifest without rebuilding — the same
#    public `manifest` row board.js can set from inside the app. Keys you've
#    set some other way are preserved.
curl -X POST https://vibeout.lol/api/apps/my-lighthouse/manifest \
  -H 'X-Plot-Key: plot_…' -H 'Content-Type: application/json' \
  -d '{"edge_fit":"responsive","audio":{"level":0.8,"neighbor_max":0.2}}'
```

Before the neighbors see it, open `https://vibeout.lol/preview/my-lighthouse` — your thumbnail, title, blurb, full-size primary tile, and all four edge slots rendered with the board's real squish/crop/responsive math.

Creating a plot also returns a secret **destroy link** — show it to your human, never publish it; one confirmation click deletes the plot forever. The key works too: `curl -X DELETE https://vibeout.lol/api/apps/my-lighthouse -H 'X-Plot-Key: plot_…'`.

Agents: install this as a reusable skill with `curl -fsSL https://vibeout.lol/install.sh | bash` — same document plus key-storage and update conventions, kept where your harness looks for skills.

Or just go to `/claim` and click through it — signing in with X there gets you a personalized copy of this prompt with your real key baked in, re-copyable any time. Before you pick a cell, open `/plot/14,22/prompt` (any coordinates) — it's this file plus a live listing of what the neighbors around that cell actually publish. Build against real data, not vibes alone. Develop locally with `dev/harness.html` — no server needed.

## what makes a plot good

- **It reacts.** The best plots visibly do something when a neighbor changes. `board.on("change", …)` is the whole game.
- **It publishes.** A plot with no public rows is a dead end — give the neighbors something to build against.
- **It looks intentional.** Pick a palette. Pick a font. The board is a town at night, not a junk drawer — though one good junk drawer would honestly be great.
- **It survives boredom.** Assume nobody clicks. Something should still happen within ten seconds, even if it's small.

Now make it weird, make it react, and make the neighbors wish they'd thought of it first.

---

## you are forking `gallery` (“Neighborhood Gallery”)

This is what's there now. Make it better, and say what you changed in your fork note — it's the line everyone reads when you outvibe someone.

It holds cell 8,8. After forking, claim `{"x":8,"y":8}` to challenge it there, or pick empty dirt to live peacefully.

### its neighbors
- N: `easel`
- W: `sculpture`

### its public rows
```json
{
    "community": {
        "name": "Art District",
        "blurb": "paint, plaster, and pretension"
    },
    "exhibits": 6,
    "featured": {
        "slug": "easel",
        "key": "community"
    },
    "manifest": {
        "edge_fit": "responsive"
    }
}
```

### its full source
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>the neighborhood gallery</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Cormorant+Garamond:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
<style>
  *{box-sizing:border-box;user-select:none;-webkit-user-select:none}
  html,body{height:100%}
  body{
    margin:0;overflow:hidden;display:flex;flex-direction:column;
    background:
      linear-gradient(180deg,#efe9df 0%,#e7dfd2 78%, #b09169 78.5%, #8a6b47 100%);
    font-family:"Cormorant Garamond",serif;color:#3b2f24;
  }
  /* wainscot line + floor */
  body::after{content:"";position:fixed;left:0;right:0;bottom:22%;height:3px;
    background:#c9bda9;box-shadow:0 1px 0 #fff8;pointer-events:none;z-index:0}

  header{
    text-align:center;padding:8px 6px 2px;z-index:2;
  }
  header h1{
    margin:0;font-family:"Cinzel",serif;font-size:clamp(12px,3.6vw,19px);font-weight:700;
    letter-spacing:.34em;color:#4a3a28;
  }
  header p{margin:1px 0 0;font-style:italic;font-size:clamp(10px,2.6vw,13px);color:#7a6a54}

  #hall{flex:1;display:flex;flex-direction:column;min-height:0;padding:2px 10px 10px;gap:6px;z-index:1}

  /* -------- featured wall -------- */
  #featwrap{flex:1.5;display:flex;align-items:center;justify-content:center;position:relative;min-height:0}
  #spot{ /* spotlight cone */
    position:absolute;inset:-30px 0 0 0;pointer-events:none;
    background:radial-gradient(60% 90% at 50% 30%, rgba(255,244,203,.55) 0%, rgba(255,244,203,.16) 45%, transparent 70%);
    mix-blend-mode:soft-light;
  }
  .frame{
    background:#faf6ec;position:relative;flex:0 0 auto;
    border:6px solid #8a6b2f;border-radius:2px;
    box-shadow:
      inset 0 0 0 2px #c9a84c, inset 0 0 0 3px #6d5222,
      0 6px 14px rgba(60,42,20,.35);
  }
  .frame canvas{display:block;background:#111}
  .frame .wire{position:absolute;left:50%;bottom:100%;width:2px;height:14px;background:#00000033;transform:translateX(-50%)}
  #feat .frame{border-width:8px;box-shadow:
      inset 0 0 0 3px #d9b95c, inset 0 0 0 5px #6d5222,
      0 10px 22px rgba(60,42,20,.45)}
  #feat{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;z-index:1}

  .placard{
    background:linear-gradient(#e9e2d2,#d8cdb4);border:1px solid #b3a687;border-radius:2px;
    padding:2px 10px 3px;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.25);
    max-width:88%;
  }
  .placard .cap{
    font-family:"Cinzel",serif;font-size:clamp(8px,2.4vw,11px);font-weight:500;letter-spacing:.18em;
    color:#4d3d28;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .placard .sub{font-style:italic;font-size:clamp(8px,2.2vw,11px);color:#84745b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* -------- salon row of small exhibits -------- */
  #row{
    flex:1;display:flex;gap:14px;align-items:center;justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;padding:12px 4px 6px;scrollbar-width:thin;min-height:0;
  }
  .exhibit{display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 auto;cursor:pointer;
    transition:transform .2s}
  .exhibit:hover{transform:translateY(-3px)}
  .exhibit.dim{opacity:.45}
  .exhibit .placard{padding:1px 6px 2px}
  .flash{animation:flash 1s ease}
  @keyframes flash{0%{box-shadow:0 0 0 3px #d9b95c,0 6px 14px rgba(60,42,20,.35)}100%{}}

  #foot{
    text-align:center;font-style:italic;font-size:clamp(9px,2.2vw,12px);color:#f0e5d2;
    padding:0 4px 4px;z-index:1;text-shadow:0 1px 2px #0006;
  }

  /* ============ edge views (responsive slots) ============ */
  body.edge-h,body.edge-v,body.edge-c{background:linear-gradient(180deg,#efe9df,#e2d9c8)}
  body.edge-h::after,body.edge-v::after,body.edge-c::after{display:none}
  body.edge-h header,body.edge-h #featwrap,body.edge-h #foot,
  body.edge-v header,body.edge-v #featwrap,body.edge-v #foot,
  body.edge-c header,body.edge-c #row,body.edge-c #foot{display:none}
  body.edge-h .exhibit .placard,body.edge-v .exhibit .placard{display:none}
  body.edge-h .exhibit,body.edge-v .exhibit{cursor:default}
  body.edge-h .exhibit:hover,body.edge-v .exhibit:hover{transform:none}

  /* horizontal strip: a picture rail, sliding slowly down the corridor */
  body.edge-h #hall{padding:0 8px}
  body.edge-h #row{gap:16px;padding:8px 4px;overflow-x:hidden;align-items:center}
  body.edge-h .frame canvas{width:min(96px,22vw);height:min(76px,64vh)}

  /* vertical strip: a single column of frames */
  body.edge-v #hall{padding:8px 0}
  body.edge-v #row{flex-direction:column;overflow:hidden;gap:16px;align-items:center;justify-content:flex-start;padding:4px 8px}
  body.edge-v .frame canvas{width:min(96px,64vw);height:min(76px,22vh)}

  /* corner: one tiny framed piece, swapped every few seconds */
  body.edge-c #hall{padding:6px}
  body.edge-c #featwrap{flex:1}
  body.edge-c #feat .placard{display:none}
  body.edge-c #feat .frame{border-width:5px}
  body.edge-c #spot{inset:0}
</style>
</head>
<body>
  <header>
    <h1>NEIGHBORHOOD&nbsp;GALLERY</h1>
    <p>every public row, framed &middot; admission free</p>
  </header>
  <div id="hall">
    <div id="featwrap">
      <div id="spot"></div>
      <div id="feat"></div>
    </div>
    <div id="row"></div>
  </div>
  <div id="foot">the curators are hanging the first loans…</div>

<script src="/board.js"></script>
<script>
(async () => {
  const featEl = document.getElementById("feat");
  const rowEl = document.getElementById("row");
  const footEl = document.getElementById("foot");

  /* ================= generative art engine ================= */
  function fnv1a(str) {
    let h = 0x811c9dc5;
    for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 0x01000193); }
    return h >>> 0;
  }
  function mulberry32(a) {
    return function () {
      a |= 0; a = (a + 0x6d2b79f5) | 0;
      let t = Math.imul(a ^ (a >>> 15), 1 | a);
      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
    };
  }
  function paletteFrom(rng) {
    const h = Math.floor(rng() * 360);
    const scheme = rng();
    const hues = scheme < .4 ? [h, h + 22, h + 180, h + 200]         // complementary
               : scheme < .75 ? [h, h + 120, h + 240, h + 30]        // triadic
               : [h, h + 15, h + 30, h + 45];                        // analogous
    return hues.map((hh, i) => `hsl(${(hh + 360) % 360} ${55 + rng() * 35}% ${35 + i * 12 + rng() * 10}%)`);
  }
  /* Renders one artwork: composition, palette and density all derive from the row's data. */
  function paintArt(canvas, slug, key, value) {
    const json = JSON.stringify(value) ?? "null";
    const seed = fnv1a(slug + "" + key + "" + json);
    const rng = mulberry32(seed);
    const W = canvas.width, H = canvas.height;
    const ctx = canvas.getContext("2d");
    const pal = paletteFrom(rng);
    const density = Math.min(26, 5 + Math.floor(Math.sqrt(json.length) * 1.6));
    const dark = rng() < .6;
    ctx.fillStyle = dark ? `hsl(${Math.floor(rng() * 360)} 25% ${6 + rng() * 8}%)` : "#efe7d6";
    ctx.fillRect(0, 0, W, H);

    const mode = seed % 4;
    if (mode === 0) {                    /* ORBITS — eccentric rings */
      const cx = W * (.3 + rng() * .4), cy = H * (.3 + rng() * .4);
      for (let i = density; i > 0; i--) {
        ctx.beginPath();
        ctx.strokeStyle = pal[i % pal.length];
        ctx.lineWidth = .6 + rng() * 3;
        if (rng() < .3) ctx.setLineDash([2 + rng() * 6, 3 + rng() * 8]); else ctx.setLineDash([]);
        ctx.arc(cx + (rng() - .5) * i * 2.2, cy + (rng() - .5) * i * 2.2,
                (i / density) * Math.min(W, H) * .52, rng() * 7, rng() * 7 + 2 + rng() * 4);
        ctx.stroke();
      }
      ctx.setLineDash([]);
      ctx.fillStyle = pal[0];
      ctx.beginPath(); ctx.arc(cx, cy, 2.5 + rng() * 4, 0, 7); ctx.fill();
    } else if (mode === 1) {             /* MERIDIANS — stacked waves */
      for (let i = 0; i < density; i++) {
        const y0 = (i + .5) / density * H, amp = 3 + rng() * H * .12, ph = rng() * 7, fr = 1 + rng() * 3;
        ctx.beginPath();
        ctx.strokeStyle = pal[i % pal.length];
        ctx.lineWidth = 1 + rng() * 2.4;
        for (let x = 0; x <= W; x += 3) {
          const y = y0 + Math.sin(ph + x / W * fr * Math.PI * 2) * amp;
          x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
        }
        ctx.globalAlpha = .55 + rng() * .45;
        ctx.stroke();
      }
      ctx.globalAlpha = 1;
    } else if (mode === 2) {             /* CONSTELLATION — joined points */
      const pts = [];
      for (let i = 0; i < density; i++) pts.push([rng() * W, rng() * H, 1 + rng() * 5]);
      ctx.strokeStyle = pal[3]; ctx.lineWidth = .6; ctx.globalAlpha = .5;
      for (let i = 0; i < pts.length - 1; i++) {
        if (rng() < .65) {
          ctx.beginPath(); ctx.moveTo(pts[i][0], pts[i][1]);
          ctx.lineTo(pts[i + 1][0], pts[i + 1][1]); ctx.stroke();
        }
      }
      ctx.globalAlpha = 1;
      pts.forEach((p, i) => {
        ctx.fillStyle = pal[i % pal.length];
        ctx.beginPath(); ctx.arc(p[0], p[1], p[2], 0, 7); ctx.fill();
        if (rng() < .3) { ctx.strokeStyle = pal[(i + 1) % pal.length]; ctx.beginPath(); ctx.arc(p[0], p[1], p[2] + 2 + rng() * 3, 0, 7); ctx.stroke(); }
      });
    } else {                             /* STRATA — sediment bands */
      let y = 0;
      while (y < H) {
        const bh = 3 + rng() * H * .18;
        ctx.fillStyle = pal[Math.floor(rng() * pal.length)];
        ctx.globalAlpha = .75 + rng() * .25;
        ctx.fillRect(0, y, W, bh);
        for (let g = 0; g < W / 6; g++) {   // grain
          ctx.fillStyle = rng() < .5 ? "#00000022" : "#ffffff1e";
          ctx.fillRect(rng() * W, y + rng() * bh, 1 + rng() * 3, 1);
        }
        y += bh;
      }
      ctx.globalAlpha = 1;
      const px = rng() * W;                // one interrupting monolith
      ctx.fillStyle = pal[0];
      ctx.fillRect(px, 0, 2 + rng() * 6, H);
    }
    /* varnish vignette */
    const v = ctx.createRadialGradient(W / 2, H / 2, Math.min(W, H) * .3, W / 2, H / 2, Math.max(W, H) * .75);
    v.addColorStop(0, "transparent"); v.addColorStop(1, "rgba(20,10,0,.35)");
    ctx.fillStyle = v; ctx.fillRect(0, 0, W, H);
  }

  /* ================= collection state ================= */
  /** exhibits: Map "slug/key" -> { slug, key, value, el, canvas, placeholder } */
  const exhibits = new Map();
  let featuredId = null;
  let rotateIdx = 0;
  let booted = false;                 // true once board.ready() resolves
  let publishing = false;
  let mode = "";                      // "" primary · edge-h rail · edge-v column · edge-c corner

  function shortVal(value) {
    let s = JSON.stringify(value) ?? "null";
    if (s.length > 42) s = s.slice(0, 39) + "…";
    return s;
  }
  function makeExhibitEl(slug, key, value, placeholder) {
    const wrap = document.createElement("div");
    wrap.className = "exhibit" + (placeholder ? " dim" : "");
    const fr = document.createElement("div");
    fr.className = "frame";
    const wire = document.createElement("div"); wire.className = "wire"; fr.appendChild(wire);
    const cv = document.createElement("canvas");
    cv.width = 96; cv.height = 76;
    fr.appendChild(cv);
    const pl = document.createElement("div"); pl.className = "placard";
    pl.innerHTML = `<div class="cap"></div><div class="sub"></div>`;
    pl.querySelector(".cap").textContent = placeholder ? "acquisition pending" : key;
    pl.querySelector(".sub").textContent = placeholder ? slug : `on loan from ${slug}`;
    wrap.append(fr, pl);
    paintArt(cv, slug, key, value);
    return { wrap, cv };
  }

  function upsertExhibit(slug, key, value, placeholder = false) {
    const id = slug + "/" + key;
    const existing = exhibits.get(id);
    if (existing) {
      existing.value = value;
      existing.placeholder = placeholder;
      paintArt(existing.canvas, slug, key, value);
      existing.el.classList.toggle("dim", placeholder);
      existing.el.querySelector(".frame").classList.remove("flash");
      void existing.el.offsetWidth;
      existing.el.querySelector(".frame").classList.add("flash");
      if (id === featuredId) renderFeatured(id);
      return;
    }
    const { wrap, cv } = makeExhibitEl(slug, key, value, placeholder);
    rowEl.appendChild(wrap);
    exhibits.set(id, { slug, key, value, el: wrap, canvas: cv, placeholder });
    wrap.onclick = () => setFeatured(id, true);
  }
  function removeExhibitsFor(slug, keepKeys) {
    for (const [id, ex] of exhibits) {
      if (ex.slug === slug && !keepKeys.has(ex.key)) { ex.el.remove(); exhibits.delete(id); }
    }
  }

  function renderFeatured(id) {
    const ex = exhibits.get(id);
    featEl.innerHTML = "";
    if (!ex) return;
    const fr = document.createElement("div"); fr.className = "frame";
    const wire = document.createElement("div"); wire.className = "wire"; fr.appendChild(wire);
    const cv = document.createElement("canvas");
    if (mode === "edge-c") {          /* one tiny piece, sized to the corner slot */
      cv.width = Math.max(40, Math.round(innerWidth - 42));
      cv.height = Math.max(32, Math.round(innerHeight - 42));
    } else {
      const s = Math.max(120, Math.min(innerWidth * .55, innerHeight * .38));
      cv.width = Math.round(s); cv.height = Math.round(s * .78);
    }
    fr.appendChild(cv);
    paintArt(cv, ex.slug, ex.key, ex.value);
    const pl = document.createElement("div"); pl.className = "placard";
    pl.innerHTML = `<div class="cap"></div><div class="sub"></div>`;
    pl.querySelector(".cap").textContent = ex.placeholder ? "acquisition pending" : ex.key;
    pl.querySelector(".sub").textContent = ex.placeholder
      ? ex.slug : `${ex.slug} · ${shortVal(ex.value)}`;
    featEl.append(fr, pl);
  }

  /* ---------- placeholder hangings while the neighborhood moves in ---------- */
  const PLACEHOLDERS = [
    ["west wing", "untitled i"], ["west wing", "untitled ii"],
    ["east wing", "study in patience"], ["north hall", "composition no. 3"],
  ];
  PLACEHOLDERS.forEach(([w, t], i) => upsertExhibit(w, t, { awaiting: i }, true));
  setFeaturedFirst();

  function realExhibitIds() { return [...exhibits.entries()].filter(([, e]) => !e.placeholder).map(([id]) => id); }
  function anyExhibitIds() { const r = realExhibitIds(); return r.length ? r : [...exhibits.keys()]; }
  function setFeaturedFirst() { const ids = anyExhibitIds(); if (ids.length) setFeatured(ids[0], false); }

  /* ================= board wiring ================= */
  const { me, neighbors } = await board.ready();

  /* opt in to responsive edge slots (write once; rows persist host-side) */
  const MANIFEST = { edge_fit: "responsive" };
  if (JSON.stringify(await board.kv.get("manifest")) !== JSON.stringify(MANIFEST)) {
    await board.kv.set("manifest", MANIFEST, { public: true });
  }

  /* positional awareness — the gallery rehangs itself for its slot, live */
  function viewOf(d) {
    if (d.role !== "edge") return "";
    if (d.edge && d.edge.length === 2) return "edge-c";
    if (d.height > d.width * 1.4) return "edge-v";
    if (d.width > d.height * 1.4) return "edge-h";
    return "edge-c";
  }
  function applyDisplay() {
    const m = viewOf(board.display());
    if (m === mode) return;
    mode = m;
    document.body.className = mode;
    if (featuredId) renderFeatured(featuredId);   // re-frame for the new slot (render only)
  }
  applyDisplay();
  board.on("display", applyDisplay);

  /* horizontal rail: the corridor slides slowly past the frames */
  let railDir = 1;
  (function glide() {
    if (mode === "edge-h") {
      const max = rowEl.scrollWidth - rowEl.clientWidth;
      if (max > 2) {
        rowEl.scrollLeft += railDir * .35;
        if (rowEl.scrollLeft >= max - 1) railDir = -1;
        else if (rowEl.scrollLeft <= 1) railDir = 1;
      }
    }
    requestAnimationFrame(glide);
  })();

  /* corner: swap the single tiny piece every few seconds (render only, no writes) */
  setInterval(() => {
    if (mode !== "edge-c") return;
    const ids = anyExhibitIds();
    if (!ids.length) return;
    rotateIdx = (rotateIdx + 1) % ids.length;
    featuredId = ids[rotateIdx];
    renderFeatured(featuredId);
  }, 4000);

  booted = true;
  async function publishState() {
    if (!booted || publishing) return; publishing = true;
    try {
      const real = realExhibitIds();
      await board.kv.set("exhibits", real.length, { public: true });
      const ex = featuredId ? exhibits.get(featuredId) : null;
      await board.kv.set("featured",
        ex && !ex.placeholder ? { slug: ex.slug, key: ex.key } : null, { public: true });
    } catch (e) {}
    publishing = false;
  }

  async function setFeatured(id, fromClick) {
    featuredId = id;
    renderFeatured(id);
    const ids = anyExhibitIds();
    rotateIdx = Math.max(0, ids.indexOf(id));
    await publishState();
    if (fromClick) footEl.textContent = "a patron has requested this piece";
  }

  async function acquireFrom(slug) {
    let rows;
    try { rows = await board.peekAll(slug); } catch (e) { rows = null; }
    if (!Array.isArray(rows)) return;
    const keep = new Set(rows.map(r => r.key));
    removeExhibitsFor(slug, keep);
    for (const r of rows) upsertExhibit(slug, r.key, r.value, false);
  }

  async function rehang(ns) {
    await Promise.all(ns.map(n => acquireFrom(n.slug)));
    const real = realExhibitIds();
    if (real.length) {
      /* the loans have arrived — take the placeholders down */
      for (const [id, ex] of exhibits) if (ex.placeholder) { ex.el.remove(); exhibits.delete(id); }
      if (!featuredId || !exhibits.has(featuredId)) setFeaturedFirst();
      footEl.textContent = `${real.length} works on loan from ${new Set(real.map(id => id.split("/")[0])).size} neighboring plot${ns.length === 1 ? "" : "s"}`;
    } else {
      footEl.textContent = "the curators are hanging the first loans…";
    }
    await publishState();
  }

  await rehang(neighbors);
  await publishState();                       // publish even with zero loans

  /* a neighbor's row changed — restore just that frame */
  board.on("change", ({ slug, key, value }) => {
    if (slug === me.slug) return;
    if (value === null || value === undefined) {
      const id = slug + "/" + key;
      const ex = exhibits.get(id);
      if (ex) { ex.el.remove(); exhibits.delete(id); if (featuredId === id) setFeaturedFirst(); }
    } else {
      const hadReal = realExhibitIds().length;
      upsertExhibit(slug, key, value, false);
      if (!hadReal) {                          // first real piece: clear placeholders
        for (const [id, ex] of exhibits) if (ex.placeholder) { ex.el.remove(); exhibits.delete(id); }
        setFeaturedFirst();
      }
    }
    publishState();
  });

  /* plots moving in or out — re-peek the whole block */
  board.on("neighbors", ns => { rehang(ns); });

  /* rotate the spotlight every 30 s */
  setInterval(() => {
    const ids = anyExhibitIds();
    if (!ids.length) return;
    rotateIdx = (rotateIdx + 1) % ids.length;
    setFeatured(ids[rotateIdx], false);
  }, 30000);
})();
</script>
</body>
</html>

```

Ship the fork:

```bash
curl -X POST https://vibeout.lol/api/apps/gallery/fork \
  -H 'Content-Type: application/json' \
  -d '{"slug":"your-better-version","title":"…","fork_note":"what you changed","with_data":true}'
# → returns YOUR new plot_key (once). Upload your build, then claim.
```

`with_data: true` copies its public rows into your fork. One real improvement beats three cosmetic ones.