@gtanczyk/diorama 0.0.0-stage → 0.1.0

package/app/studio/figure.tsx

@@ -0,0 +1,314 @@
+// What the runtime will move for a character, seen without opening the game: the 3D model turned by hand
+// (walking, standing or talking with the same posing as the page), the 2D cut-out rig walking, and the
+// sprite sheets Muse painted playing as loops. Everything loads only when the preview opens.
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { GESTURES } from '../src/play/gestures.ts';
+import { pose, sheetCell, type PartName, type Rig } from '../src/play/rig.ts';
+import type { Figure3D, ModelInfo } from '../web/hero3d.ts';
+import { fileUrl } from './api.ts';
+import { named } from './build.tsx';
+
+type Stamps = { rig: number | null; model: number | null; sprites: number | null };
+type Facing = { sheet: string; yaw: number; stand?: number; off?: number[]; gestures?: string[] };
+type SpriteInfo = { cols: number; rows: number; frames: number; facings: Record<string, Facing>; talk?: Record<string, Facing> };
+type Mode = 'walk' | 'stand' | 'talk';
+
+/** Seconds per walk cycle and per talking gesture: about what the game shows at a stroll. */
+const STRIDE = 1.1;
+const GESTURE = 1.4;
+const TALL = 320;
+
+const json = <T,>(url: string): Promise<T> => fetch(url).then((r) => (r.ok ? r.json() : Promise.reject(new Error(`${url}: ${r.status}`))));
+async function image(src: string) {
+  const img = new Image();
+  img.src = src;
+  await img.decode();
+  return img;
+}
+
+/** Calls `draw` every animation frame with the seconds since the preview opened, until it unmounts. */
+function useFrames(draw: (t: number) => void, deps: unknown[]) {
+  useEffect(() => {
+    const t0 = performance.now();
+    let raf = requestAnimationFrame(function tick(now) {
+      draw((now - t0) / 1000);
+      raf = requestAnimationFrame(tick);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, deps);
+}
+
+const FIGURE_TIPS = {
+  model: 'The model that supplies the animation poses. Drag to turn it',
+  rig: 'The painting itself, walking: bent by its bones as one piece, so clothes stretch and never tear',
+  sprites: 'The generated sprites for each facing, looping',
+};
+
+export function FigurePreview({ slug, who, stamps, sides = true }: { slug: string; who: string; stamps: Stamps; sides?: boolean }) {
+  const tabs = ([['sprites', 'Sprites'], ['rig', '2D walk'], ['model', '3D model']] as const).filter(([k]) => stamps[k]);
+  const [tab, setTab] = useState(tabs[0]?.[0]);
+  if (!tab) return <p class="detail">No animation yet. Build the character to generate its animation.</p>;
+  return (
+    <div class="figure-preview">
+      <div class="tabs">
+        {tabs.map(([k, label]) => <button type="button" class={`ghost small${tab === k ? ' on' : ''}`} title={FIGURE_TIPS[k]} onClick={() => setTab(k)}>{label}</button>)}
+      </div>
+      {tab === 'model' && <ModelView slug={slug} dir={`cast/${who}/model`} v={stamps.model} />}
+      {tab === 'rig' && stamps.sprites && <p class="detail">The game walks this character with its sprites; this walk is the fallback.</p>}
+      {tab === 'model' && <p class="detail">This model supplies the animation poses. The game uses its sprites when available.</p>}
+      {tab === 'model' && sides && <Sides slug={slug} dir={`cast/${who}/model`} v={stamps.model} />}
+      {tab === 'rig' && <RigView slug={slug} who={who} v={stamps.rig} />}
+      {tab === 'sprites' && <SpritesView slug={slug} dir={`cast/${who}/sprites`} v={stamps.sprites} />}
+    </div>
+  );
+}
+
+/** The four painted sides the 3D body was built from, kept after the build; a click opens them large. */
+export function Sides({ slug, dir, v }: { slug: string; dir: string; v: number | null }) {
+  const [gone, setGone] = useState<string[]>([]);
+  const sides = ['front', 'back', 'left', 'right'].filter((s) => !gone.includes(s));
+  if (!sides.length) return null;
+  return (
+    <div class="fig-sides" data-lightbox-group>
+      <span class="detail">{named('The 4 sides Muse Image painted for TRELLIS')}</span>
+      <div class="row">
+        {sides.map((s) => (
+          <figure>
+            <img src={fileUrl(slug, `${dir}/${s}.png`, v)} data-lightbox={fileUrl(slug, `${dir}/${s}.png`, v)} title="Click: large" alt={s} loading="lazy" onError={() => setGone((g) => [...g, s])} />
+            <figcaption>{s}</figcaption>
+          </figure>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function Modes({ modes, mode, set }: { modes: Mode[]; mode: Mode; set: (m: Mode) => void }) {
+  return (
+    <div class="tabs">
+      {modes.map((m) => <button type="button" class={`ghost small${mode === m ? ' on' : ''}`} title={`Show the ${m} animation`} onClick={() => set(m)}>{m}</button>)}
+    </div>
+  );
+}
+
+/** The rigged model in its own WebGL canvas; drag turns it (and tilts the camera), left alone it turns slowly. */
+function ModelView({ slug, dir, v }: { slug: string; dir: string; v: number | null }) {
+  const host = useRef<HTMLDivElement>(null);
+  const label = useRef<HTMLSpanElement>(null);
+  const [fig, setFig] = useState<Figure3D | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [mode, setMode] = useState<Mode>('walk');
+  const [spin, setSpin] = useState(true);
+  const view = useRef({ yaw: 0.6, elevation: 0.18, drag: null as { x: number; y: number } | null, last: 0 });
+  useEffect(() => {
+    let gone = false;
+    let loaded: Figure3D | undefined;
+    const url = (f: string) => fileUrl(slug, `${dir}/${f}`, v);
+    (async () => {
+      const info = await json<ModelInfo>(url('model.json'));
+      const { Figure3D } = await import('../web/hero3d.ts');
+      loaded = await Figure3D.load(info, url);
+      if (gone) return loaded.dispose();
+      host.current!.append(loaded.canvas);
+      setFig(loaded);
+    })().catch((e) => !gone && setError((e as Error).message));
+    return () => {
+      gone = true;
+      loaded?.canvas.remove();
+      loaded?.dispose();
+    };
+  }, [slug, dir, v]);
+  useFrames((t) => {
+    if (!fig) return;
+    const s = view.current;
+    if (spin && !s.drag) s.yaw += Math.max(0, t - s.last) * 0.5;
+    s.last = t;
+    const gesture = mode === 'talk' ? Math.floor(t / GESTURE) % GESTURES.length : undefined;
+    // A creature has no arms for gestures: it bounces on its words.
+    if (label.current) label.current.textContent = gesture === undefined || fig.creatureBody ? '' : GESTURES[gesture].name;
+    try {
+      const c = fig.draw({ phase: t / STRIDE, walking: mode === 'walk', gesture, yaw: s.yaw, elevation: s.elevation, px: TALL * devicePixelRatio, time: t });
+      c.style.height = `${(c.height / devicePixelRatio).toFixed(0)}px`;
+    } catch (e) {
+      fig.canvas.remove();
+      setError((e as Error).message);
+      setFig(null);
+    }
+  }, [fig, mode, spin]);
+  const drag = {
+    onPointerDown: (e: PointerEvent) => ((view.current.drag = { x: e.clientX, y: e.clientY }), (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)),
+    onPointerMove: (e: PointerEvent) => {
+      const s = view.current;
+      if (!s.drag) return;
+      s.yaw += (e.clientX - s.drag.x) * 0.012;
+      s.elevation = Math.max(-0.2, Math.min(1.2, s.elevation + (e.clientY - s.drag.y) * 0.006));
+      s.drag = { x: e.clientX, y: e.clientY };
+    },
+    onPointerUp: () => void (view.current.drag = null),
+  };
+  return (
+    <div class="moves">
+      <div class="row">
+        <Modes modes={['walk', 'stand', 'talk']} mode={mode} set={setMode} />
+        <label class="detail" title="Keep turning the model round by itself"><input type="checkbox" checked={spin} onChange={(e) => setSpin(e.currentTarget.checked)} /> turn</label>
+        <span class="grow" />
+        <span class="detail" ref={label} />
+      </div>
+      <div class="turntable" ref={host} {...drag} title="Drag to turn">
+        {!fig && <span class="detail">{error ?? 'Loading the model…'}</span>}
+      </div>
+    </div>
+  );
+}
+
+/** The cut-out rig (rig.json and its part images) posed by src/play/rig.ts, as the 2D page draws it. */
+function RigView({ slug, who, v }: { slug: string; who: string; v: number | null }) {
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const [rig, setRig] = useState<{ rig: Rig; parts: Map<PartName, HTMLImageElement>; sheet?: HTMLImageElement } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [mode, setMode] = useState<Mode>('walk');
+  useEffect(() => {
+    let gone = false;
+    (async () => {
+      const r = await json<Rig>(fileUrl(slug, `cast/${who}/rig.json`, v));
+      const parts = new Map<PartName, HTMLImageElement>();
+      await Promise.all(r.parts.map(async (p) => parts.set(p.name, await image(fileUrl(slug, `cast/${who}/${p.file}`, v)))));
+      const sheet = r.sheet ? await image(fileUrl(slug, `cast/${who}/${r.sheet.file}`, v)) : undefined;
+      if (!gone) setRig({ rig: r, parts, sheet });
+    })().catch((e) => !gone && setError((e as Error).message));
+    return () => void (gone = true);
+  }, [slug, who, v]);
+  useFrames((t) => {
+    const c = canvas.current?.getContext('2d');
+    if (!rig || !c) return;
+    [c.canvas.width, c.canvas.height] = rig.rig.size;
+    const sheet = rig.rig.sheet;
+    if (sheet && rig.sheet) {
+      const i = sheetCell(sheet, t / STRIDE, mode === 'walk');
+      const [cw, ch] = sheet.cell;
+      c.drawImage(rig.sheet, (i % sheet.cols) * cw, Math.floor(i / sheet.cols) * ch, cw, ch, 0, 0, c.canvas.width, c.canvas.height);
+    } else {
+      const at = pose(rig.rig, t / STRIDE, mode === 'walk');
+      for (const part of rig.rig.parts) {
+        const img = rig.parts.get(part.name);
+        const p = at[part.name];
+        if (!img || !p) continue;
+        c.save();
+        c.translate(p.to[0], p.to[1]);
+        c.rotate(p.turn);
+        c.translate(-p.from[0], -p.from[1]);
+        c.drawImage(img, part.at[0], part.at[1]);
+        c.restore();
+      }
+    }
+    c.fillStyle = 'rgba(255,255,255,0.25)';
+    c.fillRect(0, rig.rig.ground, c.canvas.width, 2);
+  }, [rig, mode]);
+  return (
+    <div class="moves">
+      <Modes modes={['walk', 'stand']} mode={mode} set={setMode} />
+      {rig?.rig.check && !rig.rig.check.ok && <p class="detail">This walk tore when it was made ({rig.rig.check.why}), so the game slides the painted figure as one piece.</p>}
+      {rig && !rig.rig.sheet && <p class="detail">An old cut-out rig: run `diorama rig {slug}` (no Muse calls) for a walk that does not tear.</p>}
+      {rig ? <canvas ref={canvas} class="rig" /> : <span class="detail">{error ?? 'Loading the rig…'}</span>}
+    </div>
+  );
+}
+
+/** Every painted sheet as a loop: the walk facings (left ones are these mirrored in the game) and the talking cells. */
+function SpritesView({ slug, dir, v }: { slug: string; dir: string; v: number | null }) {
+  const [sheets, setSheets] = useState<Array<{ name: string; talk: boolean; f: Facing; img: HTMLImageElement }> | null>(null);
+  const [info, setInfo] = useState<SpriteInfo | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  // Walk, stand or talk: each shows only its own sheets (an NPC who only speaks has talk sheets and no walk).
+  const [picked, setMode] = useState<Mode | null>(null);
+  useEffect(() => {
+    let gone = false;
+    (async () => {
+      const i = await json<SpriteInfo>(fileUrl(slug, `${dir}/sprites.json`, v));
+      const list = [...Object.entries(i.facings ?? {}).map(([name, f]) => ({ name, talk: false, f })), ...Object.entries(i.talk ?? {}).map(([name, f]) => ({ name: `talk ${name}`, talk: true, f }))];
+      const loaded = await Promise.all(list.map(async (s) => ({ ...s, img: await image(fileUrl(slug, `${dir}/${s.f.sheet}`, v)) })));
+      if (!gone) (setInfo(i), setSheets(loaded));
+    })().catch((e) => !gone && setError((e as Error).message));
+    return () => void (gone = true);
+  }, [slug, dir, v]);
+  const canvases = useRef<Array<HTMLCanvasElement | null>>([]);
+  const labels = useRef<Array<HTMLSpanElement | null>>([]);
+  const modes: Mode[] = sheets ? [...(sheets.some((s) => !s.talk) ? ['walk', 'stand'] as Mode[] : []), ...(sheets.some((s) => s.talk) ? ['talk'] as Mode[] : [])] : [];
+  const mode: Mode | undefined = picked && modes.includes(picked) ? picked : modes[0];
+  const walking = mode === 'walk';
+  const shown = (sheets ?? []).filter((s) => s.talk === (mode === 'talk'));
+  useFrames((t) => {
+    if (!info || !sheets) return;
+    shown.forEach((s, k) => {
+      const c = canvases.current[k]?.getContext('2d');
+      if (!c) return;
+      const [cw, ch] = [s.img.width / info.cols, s.img.height / info.rows];
+      [c.canvas.width, c.canvas.height] = [cw, ch];
+      let cell: number;
+      if (s.talk) {
+        const n = s.f.gestures?.length ?? 1;
+        cell = Math.floor(t / GESTURE) % n;
+        if (labels.current[k]) labels.current[k]!.textContent = s.f.gestures?.[cell] ?? '';
+      } else {
+        const steps = [...Array(info.frames).keys()].filter((i) => !s.f.off?.includes(i));
+        cell = walking ? steps[Math.floor(((t / STRIDE) % 1) * steps.length) % steps.length] : s.f.stand ?? 0;
+      }
+      c.drawImage(s.img, (cell % info.cols) * cw, Math.floor(cell / info.cols) * ch, cw, ch, 0, 0, cw, ch);
+    });
+  }, [info, sheets, mode]);
+  if (!sheets) return <span class="detail">{error ?? 'Loading the sheets…'}</span>;
+  return (
+    <div class="moves">
+      {mode && <Modes modes={modes} mode={mode} set={setMode} />}
+      {info && mode !== 'talk' && sheets.some((s) => !s.talk) && <p class="detail">{info.frames} frames per walking direction</p>}
+      {!sheets.some((s) => !s.talk) && <p class="detail">No walk sheets: this character only talks in the game, so only talking was drawn.</p>}
+      <ul class="sheets">
+        {shown.map((s, k) => (
+          <li key={s.name}>
+            <canvas ref={(el) => void (canvases.current[k] = el)} data-lightbox={fileUrl(slug, `${dir}/${s.f.sheet}`, v)} title="Click: the whole sheet, large" />
+            <span class="detail">{s.name} <span ref={(el) => void (labels.current[k] = el)} /></span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+const MOUTH_SAYS: Record<string, string> = { X: 'rest', A: 'M B P', B: 'teeth (S, K)', C: 'EH', D: 'AH', E: 'OH', F: 'OO', G: 'F V', H: 'L' };
+
+/** The mouth shapes a character speaks with (cast/<key>/face.json atlas), each cut out with what it says. */
+export function MouthShapes({ slug, who, v }: { slug: string; who: string; v?: number | null }) {
+  const [face, setFace] = useState<{ img: HTMLImageElement; views: Array<[string, Record<string, [number, number, number, number]>]>; file: string } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    let gone = false;
+    (async () => {
+      const info = await json<{ image: string; mouths: Record<string, [number, number, number, number]>; atlases?: Record<string, Record<string, [number, number, number, number]>> }>(fileUrl(slug, `cast/${who}/face.json`, v));
+      const file = `cast/${who}/${info.image}`;
+      const img = await image(fileUrl(slug, file, v));
+      // Mouth patches in atlas pixels: the painting's own (mouths), then one set per sprite view that has its own heads.
+      const views: Array<[string, Record<string, [number, number, number, number]>]> = [['painting', info.mouths], ...Object.entries(info.atlases ?? {}).filter(([, m]) => Object.keys(m).length)];
+      if (!gone) setFace({ img, file, views: views.filter(([, m]) => m && Object.keys(m).length) });
+    })().catch((e) => !gone && setError((e as Error).message));
+    return () => void (gone = true);
+  }, [slug, who, v]);
+  if (!face) return <span class="detail">{error ? `No mouth shapes to show: ${error}` : 'Loading the mouth shapes…'}</span>;
+  return (
+    <div class="mouths">
+      {face.views.map(([view, boxes]) => (
+        <div>
+          {face.views.length > 1 && <span class="detail">{view}</span>}
+          <ul class="sheets">
+            {Object.entries(boxes).map(([m, [x, y, w, h]]) => (
+              <li key={`${view}-${m}`}>
+                <canvas width={w} height={h} style={`width:${Math.min(120, w)}px;height:auto`} ref={(el) => el?.getContext('2d')?.drawImage(face.img, x, y, w, h, 0, 0, w, h)}
+                  data-lightbox={fileUrl(slug, face.file, v)} title={`${m}: ${MOUTH_SAYS[m] ?? ''}. Click: the whole atlas`} />
+                <span class="detail">{m} · {MOUTH_SAYS[m] ?? ''}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}

package/app/studio/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2018 The Fraunces Project Authors (https://github.com/undercasetype/Fraunces)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/app/studio/fonts/fonts.css

@@ -0,0 +1,7 @@
+/* Fraunces and Instrument Sans, SIL Open Font License 1.1 (OFL.txt), served by Studio itself: its CSP allows no other host. */
+@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url(/fonts/fraunces-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url(/fonts/fraunces-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/fraunces-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/fonts/fraunces-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/instrument-sans-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/instrument-sans-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

package/app/studio/icons.tsx

@@ -0,0 +1,42 @@
+// The Studio's signs: small line drawings in the logo's stroke, not emoji. Each takes the text colour; a title on
+// the element around it says what it means.
+import type { JSX } from 'preact';
+
+const PATHS = {
+  pin: 'M12 21s-6-5.6-6-10.5a6 6 0 0 1 12 0C18 15.4 12 21 12 21Z M12 12.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z',
+  zoom: 'M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Z M15.3 15.3L20 20 M10.5 8v5 M8 10.5h5',
+  pencil: 'M4 20l1-4L15.5 5.5a2.1 2.1 0 0 1 3 3L8 19l-4 1Z M13.5 7.5l3 3',
+  mic: 'M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3Z M6 11a6 6 0 0 0 12 0 M12 17v4',
+  camera: 'M4 8h3l2-3h6l2 3h3v11H4Z M12 16.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z',
+  undo: 'M9 7L4 12l5 5 M4 12h10a6 6 0 0 1 0 12',
+  repair: 'M20 12a8 8 0 1 1-2.3-5.6 M20 4v5h-5',
+  paw: 'M8 10.5a1.8 2.2 0 1 0 0-.1Z M16 10.5a1.8 2.2 0 1 0 0-.1Z M11 7.5a1.6 2 0 1 0 0-.1Z M13 7.5a1.6 2 0 1 0 0-.1Z M12 13c-2.5 0-4.5 2.6-4.5 4.4 0 1.4 1.2 2.1 2.5 1.8 1.3-.3 2.7-.3 4 0 1.3.3 2.5-.4 2.5-1.8 0-1.8-2-4.4-4.5-4.4Z',
+  figure: 'M4 5h16v14H4Z M4 16l5-5 4 4 2-2 5 5 M15.5 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z',
+  bone: 'M8 5.5a2 2 0 1 0-3 2.6 2 2 0 1 0 2.6 3L13 16.4a2 2 0 1 0 3 2.6 2 2 0 1 0-2.6-3L8 10.6',
+  cube: 'M12 3l8 4.5v9L12 21l-8-4.5v-9Z M4 7.5l8 4.5 8-4.5 M12 12v9',
+  film: 'M4 5h16v14H4Z M8 5v14 M16 5v14 M4 9h4 M4 15h4 M16 9h4 M16 15h4',
+  build: 'M4 20h16 M6 20V10l6-5 6 5v10 M10 20v-5h4v5',
+  person: 'M12 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z M8 21l1-7-2-1 2-4h6l2 4-2 1 1 7',
+  book: 'M4 5c3-1 6-1 8 1 2-2 5-2 8-1v14c-3-1-6-1-8 1-2-2-5-2-8-1Z M12 6v14',
+  brush: 'M14 4l6 6-7 7-6-6Z M7 11c-2 0-3 1.5-3 3.5 0 2.5-1 4.5-1 4.5s3.5 0 5.5-1.5C10 16 10 14 10 14',
+  scissors: 'M6 8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z M6 20.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z M8 7l12 10 M8 17L20 7',
+  ruler: 'M3 17L17 3l4 4L7 21Z M7 13l2 2 M10 10l2 2 M13 7l2 2',
+  sound: 'M4 9h4l5-4v14l-5-4H4Z M16.5 8.5a5 5 0 0 1 0 7 M19 6a8.5 8.5 0 0 1 0 12',
+  bag: 'M5 8h14l-1 12H6Z M9 8V6a3 3 0 0 1 6 0v2',
+  box: 'M3 7.5L12 3l9 4.5v9L12 21l-9-4.5Z M3 7.5L12 12l9-4.5 M12 12v9 M7.5 5.2l9 4.5',
+  gear: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z M12 2.5v3 M12 18.5v3 M2.5 12h3 M18.5 12h3 M5.3 5.3l2.1 2.1 M16.6 16.6l2.1 2.1 M5.3 18.7l2.1-2.1 M16.6 7.4l2.1-2.1',
+  warning: 'M12 4l9 16H3Z M12 10v4 M12 17v.5',
+  agent: 'M6 9h12v10H6Z M12 9V5 M12 4.5a1 1 0 1 0 0-.1Z M9.5 13.5v1 M14.5 13.5v1 M3 13v3 M21 13v3',
+  hand: 'M9 12V5.5a1.5 1.5 0 0 1 3 0V11 M12 10V4.5a1.5 1.5 0 0 1 3 0V11 M15 10.5V6a1.5 1.5 0 0 1 3 0v7c0 4-2.5 7-6 7-2.5 0-4-1-5.5-3L4 13.5a1.5 1.5 0 0 1 2.3-2L9 14',
+  play: 'M5 9a4 4 0 0 1 4-3h6a4 4 0 0 1 4 3l1.5 6.5a2 2 0 0 1-3.6 1.5L15 15H9l-1.9 2a2 2 0 0 1-3.6-1.5Z M8 9.5v3 M6.5 11h3 M15.5 10.5h.1 M17 12h.1',
+} as const;
+
+export type IconName = keyof typeof PATHS;
+
+export function Icon({ name, size = 16, ...rest }: { name: IconName; size?: number } & JSX.SVGAttributes<SVGSVGElement>) {
+  return (
+    <svg class="icon" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width={1.6} stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" {...rest}>
+      <path d={PATHS[name]} />
+    </svg>
+  );
+}

package/app/studio/idea-card.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'preact/hooks';
+import { call } from './api.ts';
+import { Icon } from './icons.tsx';
+import { ReviewSketch } from './review-sketch.tsx';
+
+const previews = new Map<string, { task: Promise<string>; image?: string }>();
+
+/** Reference drawings are immediate. New concepts paint in the background and never block a choice.
+ * The magnifier opens the picture in the shared Lightbox (its click is caught before the card's pick). */
+export function IdeaCard({ label, image, idea, scene, style, styleReference, references, disabled, selected, hidden, onPick }: {
+  label: string; image?: string; idea: string; scene: string; style?: string; styleReference?: string; references: string[];
+  disabled: boolean; selected?: boolean; hidden?: boolean; onPick: () => void;
+}) {
+  const request = JSON.stringify({ idea, scene, ...(style && { style }), ...(styleReference && { styleReference }), references });
+  const [preview, setPreview] = useState(image ?? previews.get(request)?.image ?? '');
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    let current = true;
+    setPreview(image ?? previews.get(request)?.image ?? ''); setFailed(false);
+    if (image) return;
+    let task = previews.get(request)?.task;
+    if (!task) {
+      task = call<{ image: string }>('idea_preview', JSON.parse(request)).then(r => r.image);
+      // A long Studio session must not retain every uploaded reference in these keys.
+      while (previews.size >= 12) previews.delete(previews.keys().next().value!);
+      previews.set(request, { task });
+      void task.then(src => { const entry = previews.get(request); if (entry && entry.task === task) entry.image = src; })
+        .catch(() => { if (previews.get(request)?.task === task) previews.delete(request); });
+    }
+    void task.then(src => { if (current) setPreview(src); }).catch(() => { if (current) setFailed(true); });
+    return () => { current = false; };
+  }, [request, image]);
+  return <button type="button" class={`idea-card${selected ? ' selected' : ''}`} aria-label={label} aria-pressed={selected} hidden={hidden} disabled={disabled} onClick={onPick}>
+    <span class={`idea-card-picture${!preview && !failed ? ' painting' : ''}`}>
+      {preview ? <img src={preview} alt="" /> : <span class="idea-card-placeholder">{failed ? <Icon name="brush" size={25} /> : <ReviewSketch compact />}<small>{failed ? 'Preview unavailable' : 'Sketching…'}</small></span>}
+      {preview && <span class="idea-card-zoom" role="button" tabIndex={0} data-lightbox={preview} aria-label={`Enlarge ${label}`} title="See it big. Free"
+        onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); e.currentTarget.click(); } }}><Icon name="zoom" size={18} /></span>}
+      {selected && <span class="idea-card-mark" aria-hidden="true">✓</span>}
+    </span>
+    <span class="idea-card-caption"><strong>{label}</strong><small>{selected ? 'Your choice' : image ? 'Your picture' : 'Concept sketch'}</small></span>
+  </button>;
+}