@gtanczyk/diorama 0.3.0 → 0.4.1

package/app/src/world/drawings.ts

@@ -1,5 +1,5 @@
-// Children's drawings as the world: photos of drawings on paper, each read by Spark into the hero, an NPC,
-// an item, a prop or a place, kept with the world (drawings/) and used by world, paint, cast and icons.
+// Drawings as the world: photos of drawings on paper (a child's, or a grown-up's sketch), each read by Spark into the
+// hero, an NPC, an item, a prop or a place, kept with the world (drawings/) and used by world, paint, cast and icons.
 import fs from 'node:fs';
 import path from 'node:path';
 import sharp from 'sharp';
@@ -17,6 +17,10 @@ export const Drawn = z.object({
   kind: z.enum(['hero', 'npc', 'player', 'item', 'prop', 'place']),
   key: Slug,
   looks: z.string().min(3),
+  /** Who drew it, as Spark sees it: a grown-up's sketch makes no kids' game and keeps its own medium (absent = a child). */
+  by: z.enum(['child', 'grown-up']).optional(),
+  /** A grown-up's sketch: its medium and hand, as the world's style ("fountain-pen ink hatching, grey watercolour wash"). */
+  medium: z.string().optional(),
 });
 export type Drawn = z.infer<typeof Drawn>;
 
@@ -59,7 +63,24 @@ export function readDrawn(files: WorldFiles): Drawn[] {
   return parsed.success ? parsed.data : [];
 }
 
-/** The drawing a character, item or place was made from, if a child drew it. */
+/** True when every drawing is a grown-up's sketch: then the world is no kids' game and keeps the sketches' own medium. */
+export const grownUpDrawings = (drawn: Drawn[]) => drawn.length > 0 && drawn.every((d) => d.by === 'grown-up');
+
+/** A world for children: said so, or made from drawings and not every one of them a grown-up's sketch. */
+export const kidsWorld = (files: WorldFiles, world: World) => world.audience === 'kids' || (fs.existsSync(files.path('drawings')) && !grownUpDrawings(readDrawn(files)));
+
+/** Whose drawings the painters are shown, by the world's audience. */
+export const drawers = (world: Pick<World, 'audience'>) => world.audience === 'kids'
+  ? { one: "a child's drawing", many: "children's drawings", who: 'the child who drew it', whoAll: 'the children' }
+  : { one: "an artist's sketch", many: "the artist's sketches", who: 'the artist who drew it', whoAll: 'the artist' };
+
+/** The style of a world made from grown-ups' sketches: their own medium and line, finished into a game. */
+export function sketchStyle(drawn: Drawn[]): string {
+  const media = [...new Set(drawn.map((d) => d.medium?.trim()).filter((m): m is string => !!m))];
+  return `the artist's own sketchbook drawings come alive as finished game art: ${media[0] ?? 'confident pen and ink lines with a light wash'}, the same hand, line weight and palette as the sketches, drawn loose but with clear readable shapes, depth and soft light, paper texture showing through the colour`;
+}
+
+/** The drawing a character, item or place was made from, if one was drawn. */
 export function drawingFor(files: WorldFiles, key: string): Buffer | undefined {
   const drawn = readDrawn(files).find((d) => d.key === key);
   return drawn && fs.existsSync(files.path('drawings', drawn.file)) ? fs.readFileSync(files.path('drawings', drawn.file)) : undefined;
@@ -78,21 +99,25 @@ export function readKinds(files: WorldFiles): Record<string, Kind> {
 /** A kids' world looks like this, so a character painted from a drawing before the world exists is the one the game uses. */
 export const KIDS_STYLE = "the children's own drawings come alive: wax crayon and felt-tip texture, solidly coloured, bold simple rounded shapes with thick dark outlines, bright clean colours, soft sunny light, friendly and readable at a glance";
 
-const KIND_TEXT = `- kind: "character" (someone: a person, an animal, a creature), "item" (a small thing to pick up and carry), "prop" (a big thing that stays in a place) or "place" (a whole scene: a landscape, a room, a house with its surroundings)
+const KIND_TEXT = `- by: "child" when a young child drew it (crayon, felt-tip, simple flat shapes) or "grown-up" for a sketch by a teen or an adult (confident pen, pencil, ink, marker, watercolour or digital lines, perspective, hatching, notes)
+- medium: for a grown-up's sketch, its medium and look in a dozen words, as a painter's style ("fountain-pen ink hatching with a grey and ochre watercolour wash on cream paper"); "" for a child's
+- kind: "character" (someone: a person, an animal, a creature), "item" (a small thing to pick up and carry), "prop" (a big thing that stays in a place) or "place" (a whole scene: a landscape, a room, a house with its surroundings)
 - key: a kebab-case English name for it ("green-dragon", "blue-hat", "mushroom-forest")
-- looks: what the child drew, as a description a painter can follow: shape, every colour, clothes, face, what it holds. Describe the drawing kindly as the real thing it shows (a "green dragon with orange wings and a round light-green belly", not "scribbles"). For a character or a thing, only it, not the sun, sky or ground drawn around it. For a place: what it shows front to back.
+- looks: what was drawn, as a description a painter can follow: shape, every colour, clothes, face, what it holds. Describe the drawing kindly as the real thing it shows (a "green dragon with orange wings and a round light-green belly", not "scribbles"). For a character or a thing, only it, not the sun, sky or ground drawn around it. For a place: what it shows front to back.
 Ignore any name written on the paper, the paper itself and the table.`;
 
 /** Spark says what one drawing is, as soon as its photo arrives (no story needed yet). */
 export async function readDrawing(memo: Memo, image: Buffer, file: string, taken: string[] = []): Promise<Drawn> {
-  const prompt = `A child of 5 or 6 drew this picture for a 2D point-and-click adventure game the class is making together. Say what it is in the game:
+  const prompt = `Someone drew this picture for a 2D point-and-click adventure game: a child (often 5 or 6, for a game the class makes together) or a grown-up sketching their own world. Say who drew it and what it is in the game:
 ${KIND_TEXT}${taken.length ? `\nKeys already used by other drawings: ${taken.join(', ')}. Use one of them only when this drawing shows that same thing again.` : ''}
 
-Reply with JSON only: {"kind": "...", "key": "...", "looks": "..."}`;
+Reply with JSON only: {"by": "child | grown-up", "medium": "...", "kind": "...", "key": "...", "looks": "..."}`;
   let ask = prompt;
   for (let attempt = 1; attempt <= 3; attempt++) {
-    const answer = await askSparkJson<{ kind?: string; key?: string; looks?: string }>(memo, { label: `drawing:${file}#${attempt}`, prompt: ask, images: [image], personal: true });
-    const parsed = Drawn.safeParse({ file, kind: answer?.kind === 'character' ? 'npc' : answer?.kind, key: answer?.key, looks: answer?.looks });
+    const answer = await askSparkJson<{ by?: string; medium?: string; kind?: string; key?: string; looks?: string }>(memo, { label: `drawing:${file}#${attempt}`, prompt: ask, images: [image], personal: true });
+    const by = answer?.by === 'grown-up' || answer?.by === 'adult' ? 'grown-up' as const : 'child' as const;
+    const medium = by === 'grown-up' && answer?.medium?.trim() ? answer.medium.trim() : undefined;
+    const parsed = Drawn.safeParse({ file, kind: answer?.kind === 'character' ? 'npc' : answer?.kind, key: answer?.key, looks: answer?.looks, by, ...(medium && { medium }) });
     if (parsed.success) return parsed.data;
     ask = `${prompt}\n\nYour last answer was:\n${JSON.stringify(answer)}\n\nFix: ${parsed.error.issues.map((i) => `${i.path.join('.')}: ${i.message}`).join('; ')}`;
   }
@@ -132,7 +157,7 @@ export function fitPlaces(drawn: Drawn[], places: number): Drawn[] {
   let kept = 0;
   return drawn.map((d) => {
     if (d.kind !== 'place' || ++kept <= places) return d;
-    return { ...d, kind: 'prop', looks: `${d.looks} (a child drew it as a whole place; here it is one big thing in a place: a picture, a model, a view through a window)` };
+    return { ...d, kind: 'prop', looks: `${d.looks} (drawn as a whole place; here it is one big thing in a place: a picture, a model, a view through a window)` };
   });
 }
 
@@ -156,6 +181,7 @@ export function players(files: WorldFiles): Array<{ key: string; looks: string }
 
 /** What the world designer is told: every drawing is in the world, under its key, as drawn. */
 export function drawingsBrief(drawn: Drawn[], style = KIDS_STYLE, chooseHero = false): string {
+  const who = grownUpDrawings(drawn) ? 'The artist sketched' : 'The children drew';
   const once = [...new Map(drawn.map((d) => [d.key, d])).values()];
   const line = (d: Drawn) => chooseHero && (d.kind === 'hero' || d.kind === 'npc')
     ? `- a character, key "${d.key}": ${d.looks} (hero or npc according to the creator's idea and clarifications)` : ({
@@ -166,7 +192,7 @@ export function drawingsBrief(drawn: Drawn[], style = KIDS_STYLE, chooseHero = f
     place: `- a place, key "${d.key}": ${d.looks}`,
     player: '',
   })[d.kind];
-  return `The children drew these, and every one of them must be in the world, under exactly this key, looking as drawn:
+  return `${who} these, and every one of them must be in the world, under exactly this key, looking as drawn:
 ${once.filter((d) => d.kind !== 'player').map(line).join('\n')}
 ${chooseHero ? 'Choose exactly one of these drawn characters as the hero according to the creator\'s idea and answers; the other characters are NPCs. Do not choose the first drawing just because it came first.' : ''}
 The style is exactly: "${style}".`;
@@ -177,17 +203,24 @@ export function drawnIssues(world: World, drawn: Drawn[]): string[] {
   const things = new Map(world.places.flatMap((p) => p.things.map((t) => [t.key, t.role] as const)));
   const places = new Set(world.places.map((p) => p.key));
   return [...new Map(drawn.map((d) => [d.key, d])).values()].flatMap((d) => {
-    if (d.kind === 'hero') return world.hero.key === d.key ? [] : [`the hero's key must be "${d.key}" (a child drew the hero)`];
+    if (d.kind === 'hero') return world.hero.key === d.key ? [] : [`the hero's key must be "${d.key}" (the hero was drawn)`];
     if (d.kind === 'player') return [];
-    if (d.kind === 'place') return places.has(d.key) ? [] : [`a child drew the place "${d.key}": it must be one of the places, with that key`];
+    if (d.kind === 'place') return places.has(d.key) ? [] : [`the place "${d.key}" was drawn: it must be one of the places, with that key`];
     const role = things.get(d.key);
-    if (!role) return [`a child drew "${d.key}": it must be a thing with role "${d.kind}" in one of the places`];
+    if (!role) return [`"${d.key}" was drawn: it must be a thing with role "${d.kind}" in one of the places`];
     // A drawn house or cave may well be the way into the next place.
     if (role === d.kind || (d.kind === 'prop' && role === 'exit')) return [];
     return [`"${d.key}" was drawn as ${d.kind === 'item' ? 'an item' : `a ${d.kind}`}: its role must be "${d.kind}"`];
   });
 }
 
+/** A grown-up's sketch of the whole place: drawn in perspective, it sets the camera Muse paints with, so the
+ * layout starts from it like an approved concept (a child's flat drawing leaves the composition to the layout). */
+export function placeSketch(files: WorldFiles, key: string): Buffer | undefined {
+  const drawn = readDrawn(files).find((d) => d.key === key && d.kind === 'place' && d.by === 'grown-up');
+  return drawn ? drawingFor(files, key) : undefined;
+}
+
 /** The drawings a place's painting follows: the place itself first, then what was drawn of the props and items in it (three at most). */
 export function drawingsIn(files: WorldFiles, place: Place): Array<{ key: string; image: Buffer }> {
   const keys = [place.key, ...place.things.filter((t) => t.role !== 'npc').map((t) => t.key)];

package/app/src/world/schema.ts

@@ -11,6 +11,11 @@ export const Thing = z.object({
 
 export const Place = z.object({
   key: Slug,
+  /**
+   * "drive": the hero rides along a road, seen from the side. The road is the floor, the scenery streams past in
+   * depth bands that loop, the hero sits in the car (unseen) and things are used where they are, without walking.
+   */
+  kind: z.enum(['drive']).optional(),
   shows: z.string().min(10),
   mood: z.string().min(3),
   things: z.array(Thing).min(1).max(10),

package/app/studio/agent.tsx

@@ -19,7 +19,7 @@ export const SAYS: Record<string, string> = {
   corrections_get: 'Read fixes', corrections_clear: 'Take fixes back', mask_fix: 'Fix a mask', thing_remove: 'Remove a thing', thing_add: 'Add a thing', mask_brush: 'Brush a mask',
   floor_cells: 'Fix floor cells', stand_set: 'Move a stand spot', repaint_region: 'Repaint a region', water_flow: 'Set water flow', water_area: 'Fix where water moves', fog_drift: 'Set fog drift', weather_set: 'Set weather', reactions_set: 'Set reactions', reactions_status: 'Scene reactions',
   feedback_pending: 'Read open notes', feedback_list: 'Read notes', feedback_done: 'Close a note', feedback_add: 'Leave a note', feedback_reopen: 'Reopen a note',
-  history_list: 'Read history', history_undo: 'Undo a job', history_redo: 'Redo', lock_set: 'Change a lock', ui_focus: 'Show a place', ask_person: 'Ask you', budget: 'Check budget', setup_status: 'Check Setup',
+  history_list: 'Read history', history_undo: 'Undo a job', history_redo: 'Redo', lock_set: 'Change a lock', ui_focus: 'Show a place', ask_person: 'Ask you', budget: 'Check budget', setup_status: 'Check Setup', setup_cli: 'Read the terminal command', setup_browsers: 'Download Chromium',
   cast_status: 'Look at the cast', cast_redo: 'Repaint a character', voice_list: 'List voices', voice_set: 'Change a voice',
   story_status: 'Read the story', story_text: 'Reword a line', story_redo: 'Rewrite the story', place_view: 'Look at the floor', play_reload: 'Reload the game', npc_move: 'Move an NPC',
 };

package/app/studio/main.tsx

@@ -224,7 +224,9 @@ function Setup() {
   const [checks, setChecks] = useState<Check[] | null>(null);
   const [busy, setBusy] = useState('');
   const [error, setError] = useState('');
-  const run = async (name: 'setup_status' | 'setup_check') => {
+  const [setupCommand, setSetupCommand] = useState('diorama setup');
+  useEffect(() => void call<{ setup: string }>('setup_cli').then((c) => setSetupCommand(c.setup)).catch(() => {}), []);
+  const run = async (name: 'setup_status' | 'setup_check' | 'setup_browsers') => {
     setBusy(name);
     setError('');
     try {
@@ -250,7 +252,7 @@ function Setup() {
           <h1>Setup</h1>
         </div>
         <p class="lead">{!checks ? 'Checking this machine…' : blocking.length ? `${blocking.map((c) => c.label).join(' and ')} still ${blocking.length > 1 ? 'need' : 'needs'} you. Everything else is ready or optional.` : `Everything diorama needs is here.${ok < checks.length ? ' The unticked ones are optional.' : ''}`}</p>
-        <p class="note">Keys are typed only in your terminal with <code>diorama setup</code>, hidden, and kept in your system keychain. This page never sees them.</p>
+        <p class="note">Keys are typed only in your terminal with <code>{setupCommand}</code>, hidden, and kept in your system keychain. This page never sees them.</p>
         {error && <p class="error">{error}</p>}
         <div class="row">
           <button type="button" class="primary" disabled={!!busy} title="Look at this computer again: keys, tools, the agent. Free" onClick={() => run('setup_status')}>{busy === 'setup_status' ? 'Checking…' : 'Check again'}</button>
@@ -273,6 +275,7 @@ function Setup() {
                   <div class="fix">
                     <pre>{c.fix.join('\n')}</pre>
                     <Copy text={c.fix.join('\n')} />
+                    {c.id === 'chromium' && <button type="button" class="primary small" disabled={!!busy} title="Download Playwright's Chromium now (~150 MB, once), then check again. Free" onClick={() => run('setup_browsers')}>{busy === 'setup_browsers' ? 'Downloading…' : 'Download'}</button>}
                   </div>
                 )}
               </div>

package/app/web/main.ts

@@ -12,6 +12,7 @@ import { CYCLE, pose, sheetCell, type PartName, type Rig } from '../src/play/rig
 import { actions, activeChanges, apply, hiddenThings, hintFor, holds, lockOn, pickDialogue, pickInteraction, speakerOf, startState, useFor, type Action, type State } from '../src/story/engine.ts';
 import type { Story } from '../src/story/schema.ts';
 import type { Place as PlaceSpec, World } from '../src/world/schema.ts';
+import { CAR } from '../src/play/car.ts';
 import { Mixer, type Listened } from './audio.ts';
 import { PLAYER_COLOURS, readEachPad, readPads, Turns, type PadButton, type PadFrame } from './pad.ts';
 import { Answers, Bag, displayName, fitHud, showEnding, type ItemLook } from './ui.ts';
@@ -76,6 +77,7 @@ type Figure = { img: HTMLImageElement; face?: PaintedFace; faceInfo?: FaceDefini
 const FLOATS = /\b(boat|rowboat|dinghy|skiff|canoe|kayak|raft|ship|barge|punt|gondola|sampan|junk|ferry|trawler|yacht|sailboat)s?\b/i;
 
 /** canvas: the card as the place looks now (story changes on it); base: as painted, whose alpha is the card's shape. */
+
 type Cut = { occ: Occluder; canvas: HTMLCanvasElement; base: HTMLCanvasElement; x0: number; y0: number; y: number };
 
 type Place = {
@@ -670,7 +672,10 @@ class Game {
     [this.hero.x, this.hero.y] = arrive ?? place.g.start;
     // Coming over a bridge or up the steps, the hero walks in from the exit's far end (by the frame's edge) to
     // where one stands at it, instead of popping up in the middle of the place.
-    const edge = back && arrive ? this.exitEdge(back.via) : undefined;
+    const edge = back && arrive && place.spec.kind !== 'drive' ? this.exitEdge(back.via) : undefined;
+    // In a drive the hero is painted at the wheel (the car's card): unseen as a figure, they speak from the car.
+    const car = place.spec.kind === 'drive' ? this.carOf(place) : undefined;
+    if (car) [this.hero.x, this.hero.y] = [(car.occ.box[0] + car.occ.box[2]) / 2 - (car.occ.box[2] - car.occ.box[0]) * 0.15, car.occ.box[1] + (car.occ.box[3] - car.occ.box[1]) * 0.45];
     if (edge) {
       [this.hero.x, this.hero.y] = edge;
       this.hero.path = this.place.grid.route(edge, arrive!);
@@ -844,12 +849,16 @@ class Game {
     try {
       const placeKey = this.place.key;
       const [sx, sy] = this.approach(hot);
-      if (!(await this.walkTo(sx, sy)) && Math.hypot(this.hero.x - sx, this.hero.y - sy) > this.place.g.cell * 2) return;
+      // In a drive things are used from the car, where they are.
+      if (this.place.spec.kind !== 'drive' && !(await this.walkTo(sx, sy)) && Math.hypot(this.hero.x - sx, this.hero.y - sy) > this.place.g.cell * 2) return;
       if (this.place.key !== placeKey) return;
       const [x0, , x1] = hot.thing.box;
-      this.hero.facing = (hot.npc?.body.x ?? (x0 + x1) / 2) >= this.hero.x ? 1 : -1;
-      // Three-quarter towards it, the way a painted figure talks to someone.
-      this.hero.yaw = this.hero.facing * Math.PI / 3;
+      // In a drive the hero keeps their eyes on the road.
+      if (this.place.spec.kind !== 'drive') {
+        this.hero.facing = (hot.npc?.body.x ?? (x0 + x1) / 2) >= this.hero.x ? 1 : -1;
+        // Three-quarter towards it, the way a painted figure talks to someone.
+        this.hero.yaw = this.hero.facing * Math.PI / 3;
+      }
       this.emit('use', { thing: key, verb });
       document.body.classList.add('played');
       await this.act(this.actionFor(key, hot, verb));
@@ -891,6 +900,8 @@ class Game {
   /** What a click on a thing means: the exit, the talk, the held item, or the first verb the story answers. */
   private actionFor(key: string, hot: Hot, verb?: Verb): Action {
     if (verb === 'look') return { kind: 'do', thing: key, verb: 'look' };
+    // A car that drives to several places is driven from its board; a click on it looks at it.
+    if (this.place.spec.exits.filter((e) => e.via === key).length > 1) return { kind: 'do', thing: key, verb: 'look' };
     if (this.place.spec.exits.some((e) => e.via === key)) return { kind: 'go', via: key };
     const role = hot.spec?.role ?? hot.thing.role;
     // A person talks: in a conversation when the story has one for them now, else in their own talk lines.
@@ -961,7 +972,7 @@ class Game {
       if (nudge && this.hinted?.key === nudge.thing) this.hinted = { key: nudge.thing, until: this.time + 6 };
       if (after.place !== from) {
         // Out the same way: along the bridge or down the steps toward the frame's edge before the picture fades.
-        const edge = action.kind === 'go' ? this.exitEdge(action.via) : undefined;
+        const edge = action.kind === 'go' && this.place.spec.kind !== 'drive' ? this.exitEdge(action.via) : undefined;
         if (edge) await Promise.race([this.walkTo(...edge), this.wait(2500)]);
         this.emit('exit', { from, to: after.place });
         await this.fadeOut();
@@ -1476,6 +1487,12 @@ class Game {
     return this.shift(y);
   }
 
+  /** The car of a drive place: the card named as a car, else the biggest card standing on the road. */
+  private carOf(place: Place): Cut | undefined {
+    const named = (c: Cut) => { const k = c.occ.thing ?? c.occ.key; return `${k} ${place.spec.things.find((t) => t.key === k)?.looks ?? ''}`; };
+    return place.cuts.find((c) => CAR.test(named(c))) ?? [...place.cuts].sort((a, b) => b.canvas.width * b.canvas.height - a.canvas.width * a.canvas.height)[0];
+  }
+
   /** Draws the card's columns [xa, xb) (frame x) in strips, each slid by the floor under it. */
   private drawCard(cut: Cut, xa = cut.x0, xb = cut.x0 + cut.canvas.width, ya = cut.y0, yb = cut.y0 + cut.canvas.height) {
     ctx.save();
@@ -1491,6 +1508,17 @@ class Game {
    * card (its outline, its story change) goes through here, so it moves exactly as the card does.
    */
   private poseCard(cut: Cut) {
+    if (this.place.spec.kind === 'drive' && cut === this.carOf(this.place) && !params.has('still')) {
+      // The engine idles: the body trembles on its springs, harder while it revs to leave.
+      const t = this.time;
+      const rev = this.revving > t ? 3 : 1;
+      const shake = (Math.sin(t * 61) * 0.5 + Math.sin(t * 37 + 1) * 0.35) * rev;
+      const [cx, cy] = [(cut.occ.box[0] + cut.occ.box[2]) / 2, cut.occ.box[3]];
+      ctx.translate(cx, cy + shake);
+      ctx.rotate(Math.sin(t * 23) * 0.0012 * rev);
+      ctx.translate(-cx, -cy);
+      return;
+    }
     const float = this.afloat(cut);
     if (float && !params.has('still')) {
       const t = this.time + (hashSeed(cut.occ.key) % 1000) / 160;
@@ -1939,7 +1967,9 @@ class Game {
     const gone = this.gone();
     this.recut();
     const npcs = this.hots().filter((h) => (h.spec?.role ?? h.thing.role) === 'npc' && !h.mask);
-    const people: Who[] = [...npcs.map((h) => ({ npc: h, y: h.npc?.body.y ?? h.thing.box[3] })), ...[this.hero, ...this.party].map((body) => ({ body, y: body.y }))].sort((a, b) => a.y - b.y);
+    // In a drive the hero is the one painted at the wheel.
+    const riding = this.place.spec.kind === 'drive';
+    const people: Who[] = [...npcs.map((h) => ({ npc: h, y: h.npc?.body.y ?? h.thing.box[3] })), ...(riding ? [] : [this.hero, ...this.party]).map((body) => ({ body, y: body.y }))].sort((a, b) => a.y - b.y);
     const fire = this.fireOf(gone);
     this.climbs.length = 0;
     if (p && backdrop) {
@@ -2052,6 +2082,7 @@ class Game {
       this.drawClimbs();
     }
     this.place.glows?.draw(ctx, (y) => this.shift(y));
+    if (this.place.spec.kind === 'drive') this.drawIdle();
     this.place.weather?.drawDrips(ctx, (y) => this.shift(y));
     this.drawFocus();
     // The place as drawn so far, without anyone: what the depth map puts back over a person (occludeDepth).
@@ -2692,6 +2723,108 @@ class Game {
   }
 
   /** Shadows that land on things standing behind their person (a tent wall): drawn over the cards. */
+  /** Until when a drive's engine revs (it shakes harder) before it leaves. */
+  revving = 0;
+  /** The destination board of a drive place, as drawn this frame: each place it leads to and its box. */
+  private board: Array<{ to: string; via: string; box: [number, number, number, number] }> = [];
+  /** The destination under the pointer. */
+  boardHover: string | undefined;
+
+  /** Where a drive place's car leads: every exit through a thing that leads to more than one place. */
+  destinations(): Array<{ to: string; via: string }> {
+    if (this.place?.spec.kind !== 'drive') return [];
+    const exits = this.place.spec.exits;
+    return exits.filter((e) => exits.filter((o) => o.via === e.via).length > 1).map((e) => ({ to: e.to, via: e.via }));
+  }
+
+  destinationAt(x: number, y: number): string | undefined {
+    return this.board.find((b) => x >= b.box[0] && x <= b.box[2] && y >= b.box[1] && y <= b.box[3])?.to;
+  }
+
+  /** The middle of a destination's row on the board, in page pixels (for scripts and recorders). */
+  destinationPoint(to: string): { x: number; y: number } | null {
+    const b = this.board.find((d) => d.to === to);
+    if (!b) return null;
+    const z = this.zoom();
+    const { width: W, height: H } = this.place.g.frame;
+    const [fx, fy] = [((b.box[0] + b.box[2]) / 2 - (this.viewX || W / 2)) * z + W / 2, ((b.box[1] + b.box[3]) / 2 - (this.viewY || H / 2)) * z + H / 2];
+    const r = canvas.getBoundingClientRect();
+    return { x: r.left + (fx * r.width) / W, y: r.top + (fy * r.height) / H };
+  }
+
+  /** Drives off to a destination: the engine revs, the picture fades, the car is parked there and the hero gets out. */
+  async driveTo(to: string) {
+    const d = this.destinations().find((e) => e.to === to);
+    if (!d || this.busy) return;
+    this.busy = true;
+    try {
+      this.emit('use', { thing: d.via, verb: 'go' });
+      this.revving = this.time + 1;
+      await this.wait(800);
+      await this.act({ kind: 'go', via: d.via, to });
+    } finally {
+      this.busy = false;
+    }
+  }
+
+  /** A drive place's engine running (exhaust puffing from behind the car) and its board of destinations. */
+  private drawIdle() {
+    const car = this.carOf(this.place);
+    const t = this.time;
+    if (car && !params.has('still')) {
+      const [x0, y0, x1, y1] = car.occ.box;
+      const [w, h] = [x1 - x0, y1 - y0];
+      const rev = this.revving > t ? 2.2 : 1;
+      ctx.save();
+      for (let i = 0; i < 10; i++) {
+        const age = (t * 0.8 * rev + i / 10) % 1;
+        const r = w * (0.02 + age * 0.08);
+        ctx.fillStyle = `rgba(210,210,215,${(0.32 * (1 - age) * Math.min(1, age * 6)).toFixed(3)})`;
+        ctx.beginPath();
+        ctx.arc(x0 + w * 0.12 - age * w * 0.22 + Math.sin(t * 2 + i) * 4, y1 - h * 0.12 - age * h * 0.35, r, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.restore();
+    }
+    const where = this.destinations();
+    this.board = [];
+    if (!where.length) return;
+    const W = this.place.g.frame.width;
+    // With ?fill=1 the painting can run past the page's edges: the board sits at the page's own top right corner.
+    const r = canvas.getBoundingClientRect();
+    const [visRight, visTop] = fill ? this.unzoom(((Math.min(innerWidth, r.right) - r.left) / r.width) * W, (Math.max(0, -r.top) / r.height) * this.place.g.frame.height) : [W, 0];
+    const [rowH, bw, x1, top] = [52, 330, Math.min(W, visRight) - 28, Math.max(0, visTop) + 36];
+    const x0 = x1 - bw;
+    ctx.save();
+    ctx.fillStyle = 'rgba(12,10,18,0.78)';
+    ctx.strokeStyle = 'rgba(255,60,170,0.9)';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.roundRect(x0, top, bw, 54 + where.length * rowH, 12);
+    ctx.fill();
+    ctx.stroke();
+    ctx.fillStyle = '#ffd34d';
+    ctx.font = '700 22px system-ui, sans-serif';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('Where to?', x0 + 18, top + 28);
+    where.forEach((d, i) => {
+      const y = top + 54 + i * rowH;
+      const box: [number, number, number, number] = [x0 + 8, y + 3, x1 - 8, y + rowH - 3];
+      this.board.push({ ...d, box });
+      const lit = this.boardHover === d.to;
+      ctx.fillStyle = lit ? 'rgba(255,60,170,0.85)' : 'rgba(255,255,255,0.07)';
+      ctx.beginPath();
+      ctx.roundRect(box[0], box[1], box[2] - box[0], box[3] - box[1], 8);
+      ctx.fill();
+      ctx.fillStyle = lit ? '#fff' : '#e8e4f0';
+      ctx.font = '600 21px system-ui, sans-serif';
+      ctx.fillText(displayName(d.to, this.data.world.names), box[0] + 14, (box[1] + box[3]) / 2);
+      ctx.fillStyle = '#5ee6ff';
+      ctx.fillText('›', box[2] - 26, (box[1] + box[3]) / 2);
+    });
+    ctx.restore();
+  }
+
   private climbs: Array<{ canvas: HTMLCanvasElement; box: [number, number, number, number]; dark: number; blur: string; shift: [number, number] }> = [];
   private climbPool: HTMLCanvasElement[] = [];
   private climbMask = document.createElement('canvas');
@@ -3124,9 +3257,12 @@ class Game {
     const width = Math.max(...lines.map((l) => ctx.measureText(l).width)) + 40;
     const height = lines.length * 28 + (name ? 30 : 22);
     const head = (left + right) / 2;
-    const cx = Math.min(canvas.width - width / 2 - 12, Math.max(width / 2 + 12, head));
+    // With ?fill=1 the canvas can run past the page's edges: the bubble stays on the page's own part of it.
+    const r = canvas.getBoundingClientRect();
+    const [visL, visR, visT] = fill && r.width ? [(Math.max(0, -r.left) / r.width) * canvas.width, ((Math.min(innerWidth, r.right) - r.left) / r.width) * canvas.width, (Math.max(0, -r.top) / r.height) * canvas.height] : [0, canvas.width, 0];
+    const cx = Math.min(visR - width / 2 - 12, Math.max(visL + width / 2 + 12, head));
     const tail = 22;
-    const y = Math.max(name ? 24 : 10, top - height - tail - 6);
+    const y = Math.max(visT + (name ? 24 : 10), top - height - tail - 6);
     const ink = '#2b2118';
     ctx.lineJoin = 'round';
     ctx.lineWidth = 2.5;
@@ -3404,10 +3540,11 @@ canvas.addEventListener('pointermove', (e) => {
   usePad(false);
   const r = canvas.getBoundingClientRect();
   pointer = { x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height };
-  game.hover = game.thingAt(...toFrame(e));
+  game.boardHover = game.destinationAt(...toFrame(e));
+  game.hover = game.boardHover ? undefined : game.thingAt(...toFrame(e));
   // Off the floor (a wall, the sky, the water) the cursor says no, so nobody clicks blind.
-  const off = !game.hover && !game.place.grid.walkable(...game.floorAt(...toFrame(e)));
-  canvas.style.cursor = hideCursor || game.holding ? 'none' : game.hover ? 'pointer' : off ? 'not-allowed' : 'default';
+  const off = !game.hover && !game.boardHover && !game.place.grid.walkable(...game.floorAt(...toFrame(e)));
+  canvas.style.cursor = hideCursor || game.holding ? 'none' : game.hover || game.boardHover ? 'pointer' : off ? 'not-allowed' : 'default';
   game.bag.point(e.clientX, e.clientY, game.hover?.thing.key.replace(/-/g, ' '));
   document.getElementById('hover')!.textContent = game.hover ? game.hover.thing.key.replace(/-/g, ' ') : '';
 });
@@ -3439,6 +3576,8 @@ canvas.addEventListener('click', (e) => {
   if (e.detail >= 2 && game.hero.path.length) return void (game.hero.run = true);
   game.hero.run = false;
   const [x, y] = toFrame(e);
+  const to = game.destinationAt(x, y);
+  if (to) return void game.driveTo(to);
   const hot = game.thingAt(x, y);
   if (hot) void game.use(hot.thing.key);
   else void game.walkTo(...game.floorAt(x, y));

package/docs/scenes.md

@@ -29,6 +29,15 @@ Walk geometry still comes from the accepted painting, not the rough plan. The bu
 - **Rim light.** Each person gets a thin warm edge on the side the light comes from (against the way shadows fall; a place with no measured light gets none), as illustrators separate a figure from a busy background. `?rim=0` off, `?rim=1.5` wider.
 - **Focus** (off by default). `?focus=1` softens and pales what is behind the hero with its depth, like a close-up camera. It only separates far things, so it stays opt-in.
 
+## Drive: the hero's car
+
+A place with `"kind": "drive"` in world.json is the hero's car: it stands at the kerb with the engine running and the hero at the wheel, and from it the player picks where to drive. Its one thing is the car (role exit) with an exit through it to every place it drives to; each of those places has the car parked in it (a thing with role exit) leading back. The world designer makes one only when the idea gives the hero a car.
+
+- **Layout and paint.** The car stands in the middle, seen from behind at three-quarters, the hero painted at the wheel (the critic and the composition check let that one person stay); the top right quarter stays calm for the board. Masks, derive and verify run as anywhere: the street is the floor, and every thing there is a card of its own.
+- **One car everywhere.** Each place is painted on its own, so the car as painted in the drive place (cut out by its mask, `scene/vehicle.ts`) goes to every place it is parked in as the last image of its painting, and Muse parks that same car there. A place painted before the drive place keeps its car until it is painted again.
+- **In the page.** The car's card trembles with the idling engine and exhaust puffs from behind it; its lights glow as the painting's lights do. A board in the top right lists the places it drives to (their names). Picking one revs the engine (harder shaking, more smoke), the picture fades and the hero steps out beside the car where it is parked there. Clicking the car in a place walks the hero to it and in. There is no driving animation. The hero is the one painted at the wheel, so no figure is drawn and their lines come from the car.
+- **The story.** One thing that leads to several places makes `go` actions with `to` (the destination); `playthrough` and `clip` click the board's row for it (`window.diorama.destinationPoint(to)`).
+
 ## Weather: rain, snow and drips
 
 `diorama weather <slug>` (a build step, after `backdrop`) reads what falls on each place and where water drips, into `places/<key>/weather.json`; the page animates it all, so nothing in the painting is a frozen streak:

package/docs/setup.md

@@ -8,7 +8,7 @@ Without a checkout, from npm. Run it in an empty folder: worlds are written to `
 
 ```sh
 mkdir my-worlds && cd my-worlds
-npx -y @gtanczyk/diorama setup     # what this machine still needs; asks for keys, hidden
+npx -y @gtanczyk/diorama setup     # what this machine still needs; asks for keys, hidden, and offers to download Chromium
 npx -y @gtanczyk/diorama doctor    # one live call to each model
 npx -y @gtanczyk/diorama studio    # the GUI
 ```

package/docs/studio.md

@@ -34,7 +34,7 @@ The agent can use `job_inspect` to see a job's timestamped recent activity, how
 
 Every fix is kept in a file next to what it fixes and applied again by every later build, so a rebuild never loses it: `places/<place>/corrections.json` (rebuilding only that place from the step it feeds), `story-fixes.json`, `cast/fixes.json`. A place's thing list is edited the same way: Remove takes a prop off it (kept in the picture, or painted out with one Muse edit) and Add makes something painted a thing of its own (`removed` and `added` in `corrections.json`, which every step reads with world.json); exits, items and people belong to the story. A small repaint rebuilds only what it reaches (`app/src/scene/carry.ts`): each place step keeps the painting it last ran on (`places/<place>/.ran/`), compares the new one with it tile by tile, and asks again only about what the changed tiles reach (a thing's or floor's mask, a plate, the backdrop's cards, the light, the stairs); everything else is asked about the old painting, which the memo answers for nothing, and the place keeps its scale. Lighting the lanterns of a harbour takes about 100 s instead of 270 s, and a rebuild on the same painting asks nothing new. A change over a third of the painting rebuilds everything. A place whose steps have not kept their painting (built before this, or put back by an Undo) takes the painting on disk as theirs before a repaint, so that repaint carries too. **History** lists the jobs the world went through, the agent's included, each with who ran it, when and which places it changed, and puts the world back as it was before any of them (Redo takes that back right after); a locked world or place is left alone by the agent.
 
-The conversation is genaicode's chat with Muse Code (default), Claude Code or Codex, picked in its header before the first message (Setup's **Default agent**, or a pick here, is remembered in `~/.config/diorama/studio.json` for new worlds; a world keeps the agent it last talked with, and `DIORAMA_AGENT=codex` overrides both); after it, "Hand over…" passes the conversation to another agent and a line marks where it changed hands. After a Studio restart the earlier turns come back on screen from `studio/sessions/`. The conversation is also kept in words in `studio/conversation.md`: a new agent session (another agent, or after the Studio restarts) is told to read it first, so nothing agreed is lost. The agent works through the same actions as the page, so its steps show live and its changes survive rebuilds; when a build leaves places unplayable it is woken to repair them, three tries a place. Every conversation is recorded in `studio/sessions/`: open one from "Recorded sessions", or `/w/<slug>?replay=<file>&speed=2`, to play it back for a film.
+The conversation is genaicode's chat with Muse Code (default), Claude Code or Codex, picked in its header before the first message (Setup's **Default agent**, or a pick here, is remembered in `~/.config/diorama/studio.json` for new worlds; a world keeps the agent it last talked with, and `DIORAMA_AGENT=codex` overrides both; `DIORAMA_AGY_MODEL=gemini-4-argon-high`, `DIORAMA_CODEX_MODEL`, `DIORAMA_MUSE_MODEL`, `DIORAMA_AGENT_CLAUDE_MODEL` or `DIORAMA_AGENT_MODEL` picks the agent's model); after it, "Hand over…" passes the conversation to another agent and a line marks where it changed hands. After a Studio restart the earlier turns come back on screen from `studio/sessions/`. The conversation is also kept in words in `studio/conversation.md`: a new agent session (another agent, or after the Studio restarts) is told to read it first, so nothing agreed is lost. The agent works through the same actions as the page, so its steps show live and its changes survive rebuilds; when a build leaves places unplayable it is woken to repair them, three tries a place. Every conversation is recorded in `studio/sessions/`: open one from "Recorded sessions", or `/w/<slug>?replay=<file>&speed=2`, to play it back for a film.
 
 **Setup** shows what this machine still needs, which agents it found, and the model calls sent across all worlds, priced once you enter the per-call prices from your billing pages. Keys are only ever typed in the terminal (`diorama setup`).
 
@@ -50,6 +50,8 @@ The Story view shows conditional dialogue, optional walks and departure effects.
 
 A world can be made from what children drew and said: `diorama build <slug> --drawings photos/ --told recordings/ --places 3`, with no idea, or an idea of your own instead of the recordings. In the Studio, photograph the drawings on the home screen (📷 Camera keeps taking them; Spark tells drawings from a room or a person) and build, or add them to a world's conversation (**＋ Picture** or **Camera**) and ask the agent; it uses the same workshop actions. Each drawing is kept in `drawings/`, each clip in `told/` with what Muse Voice Transcribe heard. The world keeps every drawing under its key (`drawings.json`): characters are painted from their drawing (`cast`), places and the things drawn in them follow theirs (`paint`), and the style is their crayons come alive. A world with drawings or recordings is for kids (`audience: kids` in world.json): the story is gentle and simple, every line is voiced since the players cannot read, and the text is in the language they spoke (`language`).
 
+A grown-up's sketches work the same way: Spark tells a teen's or adult's sketch (pen, pencil, ink, watercolour, perspective, notes) from a child's drawing (`by` and `medium` in `drawings.json`). When every drawing is a grown-up's, the world is not for kids and its style is the sketches' own medium and hand come alive, not crayons; the painters are told it is the artist's sketch.
+
 To add new drawings to an existing game, the agent saves chat pictures with `kids_from_picture` and starts `world_extend` with the resulting `drawings/` paths and the person's wish. It keeps the existing script and places, adds new places and characters, and rebuilds the connecting place (its painting changes) and the new places. It checks the combined story and builds in a private copy, installing it only on success; the job costs model calls and can be undone in History. A drawing identified as something already in the world cannot yet replace or update that existing thing.
 
 On the start screen, **Video** sits beside **Photo**, **Camera** and **Say it** inside the prompt. Its button opens the native picker; the raw file input and technical instructions are hidden. After selection, the filename, player, progress and **Video tips** appear under the toolbar. It uploads an MP4, MOV, WebM, MKV, M4V or AVI brief (up to 2 GB / 4 hours). Show a drawing or object and explain its role. Uploads use 2 MB chunks; analysis works through 30-second intervals, samples a frame at the start of each 10-second window and pairs it with overlapping speech turns returned by Meta Muse Voice Transcribe’s file endpoint (`POST /v1/asr/transcribe`, DIARIZATION). Each 30-second audio clip is uploaded as mono 24 kHz PCM WAV, with a short silent tail to let the last utterance finish. Movies without audio use pictures alone; silent audio windows skip transcription. Hold each drawing steady for at least ten seconds: quick gestures or drawings between samples can be missed. Ambiguous references are marked for review, not guaranteed to be resolved.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtanczyk/diorama",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Turn a story prompt into playable painted point-and-click scenes with Meta Muse and SAM 3.1",
   "license": "Apache-2.0",
   "repository": {