@gtanczyk/diorama 0.0.0-stage → 0.2.0

package/app/studio/idea-review.tsx

@@ -0,0 +1,181 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
+import type { CreativeChoices, IdeaReview as Review } from '../src/world/idea-review.ts';
+import { call } from './api.ts';
+import { IdeaCard } from './idea-card.tsx';
+import { Logo } from './atelier.tsx';
+import { IdeaStoryboard } from './idea-storyboard.tsx';
+import type { SketchApproval } from '../src/world/sketch.ts';
+import { ReviewSketch } from './review-sketch.tsx';
+import { CustomLook, type Look } from './custom-look.tsx';
+import { Icon } from './icons.tsx';
+
+export type ReviewInput = { idea: string; photos: Array<{ name: string; data: string }>; videos: string[]; places?: number; language?: string };
+type Decision = { review: Review; answer: string; style: string; styleReference?: string };
+
+function ReviewOption({ textOnly, ...props }: Parameters<typeof IdeaCard>[0] & { textOnly: boolean }) {
+  if (!textOnly) return <IdeaCard {...props} />;
+  return <button type="button" class={`review-text-option${props.selected ? ' selected' : ''}`} aria-label={props.label} aria-pressed={props.selected} hidden={props.hidden} disabled={props.disabled} onClick={props.onPick}>
+    {props.selected && <span aria-hidden="true">✓</span>}<span>{props.label}</span>
+  </button>;
+}
+
+function AnsweredChoice({ decision, input, editing, busy, onEdit, onCancel, onChoose }: {
+  decision: Decision; input: ReviewInput; editing: boolean; busy: boolean;
+  onEdit: () => void; onCancel: () => void; onChoose: (answer: string) => void;
+}) {
+  const q = decision.review.questions[0];
+  const [draft, setDraft] = useState(decision.answer);
+  const [writing, setWriting] = useState(false);
+  useLayoutEffect(() => { setDraft(decision.answer); setWriting(!q.options.includes(decision.answer)); }, [editing, decision.answer]);
+  return <section class={`review-exchange${editing ? ' is-editing' : ' is-collapsed'}`} aria-label={`Decision: ${q.question}`}>
+    <div class="review-decision-heading"><p class="review-says">{q.question}</p><button type="button" class="ghost small" disabled={busy} aria-label={`${editing ? 'Cancel change' : 'Change answer'}: ${q.question}`} onClick={editing ? onCancel : onEdit}>{editing ? 'Cancel' : 'Change'}</button></div>
+    <div class={q.presentation === 'text' ? 'review-text-options' : 'review-cards'} data-lightbox-group>{q.options.map((option, i) => {
+      const visual = q.visuals?.[i];
+      return <ReviewOption key={i} textOnly={q.presentation === 'text'} label={option} image={visual?.photo !== undefined ? input.photos[visual.photo]?.data : undefined} idea={input.idea} scene={visual?.scene ?? `${q.question} — ${option}`} style={decision.style || undefined} styleReference={decision.styleReference} references={input.photos.slice(0, 4).map(p => p.data)} selected={option === decision.answer} hidden={!editing && option !== decision.answer} disabled={busy} onPick={() => editing ? onChoose(option) : onEdit()} />;
+    })}</div>
+    {!q.options.includes(decision.answer) && !editing && <button type="button" class="review-written-choice" disabled={busy} onClick={onEdit}>{decision.answer}</button>}
+    {editing && <>
+      {!writing && <button type="button" class="ghost small" disabled={busy} onClick={() => setWriting(true)}>Something else…</button>}
+      {writing && <form class="review-compose" onSubmit={e => { e.preventDefault(); if (draft.trim()) onChoose(draft.trim()); }}>
+        <input aria-label="Change your reply" maxLength={600} disabled={busy} value={draft} onInput={e => setDraft(e.currentTarget.value)} />
+        <button type="submit" class="ghost" disabled={busy || !draft.trim()}>Save change</button>
+      </form>}
+      <p class="detail">Changing this choice updates what comes after it.</p>
+    </>}
+  </section>;
+}
+
+export function IdeaReview({ input, busy, error, onBuild, onBack }: {
+  input: ReviewInput; busy: boolean; error: string;
+  onBuild: (choices?: CreativeChoices, sketch?: SketchApproval) => void; onBack: () => void;
+}) {
+  const section = useRef<HTMLElement>(null);
+  const latest = useRef<HTMLDivElement>(null);
+  const looks = useRef<HTMLElement>(null);
+  const [review, setReview] = useState<Review | null>(null);
+  const [failure, setFailure] = useState('');
+  const [attempt, setAttempt] = useState(0);
+  const [decisions, setDecisions] = useState<Decision[]>([]);
+  const answers = useMemo(() => decisions.map(d => ({ question: d.review.questions[0].question, answer: d.answer })), [decisions]);
+  const [editing, setEditing] = useState<number | null>(null);
+  const [style, setStyle] = useState('');
+  const [styleChoice, setStyleChoice] = useState<{ title: string; scene: string; options: Look[]; reference?: string } | null>(null);
+  const [showStyles, setShowStyles] = useState(false);
+  const [looksSeen, setLooksSeen] = useState(false);
+  const [customLook, setCustomLook] = useState(false);
+  const [draft, setDraft] = useState('');
+  const [writing, setWriting] = useState(false);
+  const [fullIdea, setFullIdea] = useState(false);
+  const [preview, setPreview] = useState<{ choices?: CreativeChoices } | null>(null);
+  const submitting = useRef(false);
+  const replying = useRef(false);
+  const generation = useRef(0);
+  useEffect(() => { section.current?.focus({ preventScroll: true }); section.current?.scrollIntoView({ block: 'start' }); }, []);
+  useEffect(() => { if (answers.length) latest.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); }, [review, answers.length]);
+  useEffect(() => {
+    // One useful follow-up is enough. No endlessly expanding interview.
+    if (answers.length >= 2 || preview) return;
+    let current = true;
+    const request = ++generation.current;
+    setFailure(''); setReview(null);
+    void call<Review>('idea_review', { ...input, ...(answers.length && { choices: { answers, ...(style && { style }) } }) })
+      .then(r => { if (current && generation.current === request) { setReview(r); replying.current = false; } })
+      .catch(e => { if (current && generation.current === request) { setFailure(e.message); replying.current = false; } });
+    return () => { current = false; };
+  }, [input, attempt, answers, preview]);
+  useEffect(() => { if (!busy) submitting.current = false; }, [busy]);
+  const question = answers.length < 2 ? review?.questions[0] : undefined;
+  const reply = (text: string, index?: number) => {
+    const source = index === undefined ? review : decisions[index]?.review;
+    if (!source?.questions[0] || !text.trim() || busy || replying.current) return;
+    if (index !== undefined && text.trim() === decisions[index].answer) { setEditing(null); return; }
+    generation.current++;
+    replying.current = true;
+    const at = index ?? decisions.length;
+    setDecisions(d => [...d.slice(0, at), { review: source, answer: text.trim(), style: index === undefined ? style : d[index].style, styleReference: index === undefined ? styleChoice?.reference : d[index].styleReference }]);
+    setEditing(null);
+    setPreview(null);
+    setFailure('');
+    if (at < 1) setReview(null);
+    setDraft('');
+    setWriting(false);
+    setShowStyles(false);
+  };
+  const chosen = () => answers.length || style ? { answers, ...(style && { style, ...(styleChoice?.reference && { styleReference: styleChoice.reference }) }) } : undefined;
+  const build = (sketch?: SketchApproval) => {
+    if (busy || submitting.current) return;
+    submitting.current = true;
+    // Skip the remaining conversation, not what the creator already told us.
+    onBuild(preview?.choices ?? chosen(), sketch);
+  };
+  const waiting = !review && !failure && answers.length < 2;
+  const readyToBuild = answers.length >= 2 || !!review && !review.questions.length;
+  const canPreview = readyToBuild && !busy && editing === null && !showStyles;
+  const references = input.photos.slice(0, 4).map(p => p.data);
+  const styleOptions: Look[] = styleChoice?.options ?? review?.styles ?? [];
+  const styleScene = styleChoice?.scene ?? review?.understanding ?? input.idea;
+  const offerLooks = readyToBuild && decisions.length > 0 && decisions.every(d => d.review.questions[0].presentation === 'text') && !looksSeen && !style && styleOptions.length > 0 && !preview && editing === null;
+  useEffect(() => { if (offerLooks) looks.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); }, [offerLooks]);
+  const chooseLook = (look: Look) => {
+    if (look.description !== style || look.reference !== styleChoice?.reference) setPreview(null);
+    setLooksSeen(true); setStyle(look.description);
+    setStyleChoice({ title: look.title, scene: styleScene, options: [...styleOptions.filter(s => s.description !== look.description), look], reference: look.reference });
+    setCustomLook(false); setShowStyles(false);
+  };
+  const openCustomLook = () => { setLooksSeen(true); setEditing(null); setShowStyles(true); setCustomLook(true); };
+  const edit = (index: number) => { if (!busy) { replying.current = false; setEditing(index); setShowStyles(false); } };
+  return <section ref={section} tabIndex={-1} class={`idea-review${waiting && !preview ? ' is-thinking' : ''}`} aria-label="Shape your world">
+    <header class="review-header"><button type="button" class="ghost small" disabled={busy} aria-label="Back to idea" onClick={onBack}>← Edit idea</button><Logo size={30} /><span>Let’s shape your world</span></header>
+    <div class="idea-review-body">
+      <div class="review-origin"><span class="review-kicker">Your idea</span><p class="review-reply">{!fullIdea && input.idea.length > 240 ? `${input.idea.slice(0, 240)}…` : input.idea}{input.idea.length > 240 && <button type="button" class="ghost small review-expand" aria-expanded={fullIdea} onClick={() => setFullIdea(v => !v)}>{fullIdea ? 'Show less' : 'Read full idea'}</button>}</p>{input.photos.length > 0 && <div class="review-attachments">{input.photos.map(p => <img src={p.data} alt={p.name} title={p.name} />)}</div>}</div>
+      {decisions.map((decision, i) => <AnsweredChoice key={i} decision={decision} input={input} editing={editing === i} busy={busy} onEdit={() => edit(i)} onCancel={() => setEditing(null)} onChoose={answer => reply(answer, i)} />)}
+      {style && styleChoice && <section class="review-exchange is-collapsed" aria-label="Chosen look">
+        <div class="review-decision-heading"><p class="review-says">The look of your world</p><button type="button" class="ghost small" disabled={busy} onClick={() => { setEditing(null); setShowStyles(true); }}>Change look</button></div>
+        <div class="review-cards" data-lightbox-group><IdeaCard label={styleChoice.title} idea={input.idea} scene={styleChoice.scene} style={style} styleReference={styleChoice.reference} references={references} selected disabled={busy} onPick={() => { setEditing(null); setShowStyles(true); }} /></div>
+      </section>}
+      {(showStyles || offerLooks) && <section ref={looks} class="review-current" aria-label="Looks for your world">
+        <p class="review-says">{offerLooks ? 'Let’s picture your world.' : 'Which look?'}</p>
+        {customLook ? <CustomLook input={input} scene={styleScene} busy={busy} onChoose={chooseLook} onClose={() => setCustomLook(false)} /> : <>
+        <div class="review-cards" data-lightbox-group>{styleOptions.map(s => <IdeaCard key={s.description} label={s.title} idea={input.idea} scene={styleScene} style={s.description} styleReference={s.reference} references={references} selected={s.description === style} disabled={busy} onPick={() => chooseLook(s)} />)}</div>
+        <button type="button" class="ghost small" disabled={busy} onClick={openCustomLook}><Icon name="pencil" /> My own style…</button>
+        </>}
+        {!customLook && <><p class="detail">Or let Diorama choose a style from your idea and pictures.</p>
+        <div class="review-style-actions">
+          <button type="button" class="amber small" disabled={busy} onClick={() => { if (style) setPreview(null); setLooksSeen(true); setStyle(''); setStyleChoice(null); setShowStyles(false); }}>Let Diorama choose</button>
+          <button type="button" class="ghost small review-style-cancel" disabled={busy} onClick={() => { setLooksSeen(true); setShowStyles(false); }}>{offerLooks ? 'Not now' : 'Cancel'}</button>
+        </div></>}
+      </section>}
+      {preview && <div hidden={editing !== null || showStyles}><IdeaStoryboard input={input} choices={preview.choices} busy={busy} error={error} onBuild={build} onSkip={() => build()} /></div>}
+      {!preview && <div hidden={editing !== null || showStyles || offerLooks}><div ref={latest} class="review-current" aria-live="polite">
+      {waiting && <div class="review-thinking"><ReviewSketch /><div class="review-thinking-copy"><span class="review-kicker">At the drawing table</span><p class="review-says" role="status">{answers.length ? 'Got it. One moment…' : 'Let me look at your idea…'}</p><p class="review-aside">A few sketches before the adventure.</p><span class="review-ink-trail" aria-hidden="true" /></div></div>}
+      {failure && <div role="alert"><p class="review-says">Let’s go with your idea. We can work out the details along the way.</p><button type="button" class="ghost small" disabled={busy} onClick={() => setAttempt(a => a + 1)}>Try asking again</button><details class="detail"><summary>Details</summary>{failure}</details></div>}
+      {!waiting && !failure && <>
+        <p class="review-says">{question?.question ?? 'Your story is ready for its first sketches.'}</p>
+        {!question && <p class="review-aside">Select <strong>Choose cast &amp; places</strong> below to see your characters and locations.</p>}
+        {question?.photo !== undefined && input.photos[question.photo] && <img class="review-reference" src={input.photos[question.photo].data} alt={input.photos[question.photo].name} />}
+        {question?.video && <p class="detail">Video {input.videos.indexOf(question.video.id) + 1} · {Math.floor(question.video.seconds / 60)}:{String(Math.floor(question.video.seconds % 60)).padStart(2, '0')}</p>}
+        {question && <>
+          <div class={question.presentation === 'text' ? 'review-text-options' : 'review-cards'} data-lightbox-group>{question.options.map((option, i) => {
+            const visual = question.visuals?.[i];
+            return <ReviewOption key={`${question.question}:${i}`} textOnly={question.presentation === 'text'} label={option} image={visual?.photo !== undefined ? input.photos[visual.photo]?.data : undefined} idea={input.idea} scene={visual?.scene ?? `${question.question} — ${option}`} style={style || undefined} styleReference={styleChoice?.reference} references={references} disabled={busy} onPick={() => reply(option)} />;
+          })}</div>
+          {(writing || !question.options.length) && <form class="review-compose" onSubmit={e => { e.preventDefault(); reply(draft); }}>
+            <input aria-label="Your reply" maxLength={600} disabled={busy} placeholder="Or tell me in your own words…" value={draft} onInput={e => setDraft(e.currentTarget.value)} />
+            <button type="submit" class="ghost" aria-label="Send reply" disabled={busy || !draft.trim()}>↑</button>
+          </form>}
+        </>}
+        <div class="review-question-actions">
+          {question && !writing && question.options.length > 0 && <button type="button" class="ghost small" disabled={busy} onClick={() => setWriting(true)}>Something else…</button>}
+          {!style && !!styleOptions.length && <button type="button" class="ghost small review-explore-looks" disabled={busy} onClick={() => { setLooksSeen(true); setShowStyles(true); }}><Icon name="brush" />Show me some looks</button>}
+          <button type="button" class="ghost small review-explore-looks" disabled={busy} onClick={openCustomLook}><Icon name="pencil" />My own style…</button>
+        </div>
+      </>}
+      {error && <p role="alert" class="error">{error}</p>}
+      </div></div>}
+    </div>
+    {(!preview || editing !== null || showStyles) && <footer>
+      <button type="button" class="ghost" aria-busy={busy} disabled={busy} onClick={() => build()}>{busy && <span class="review-spinner" aria-hidden="true" />}{busy ? 'Starting the build…' : readyToBuild ? 'Skip & build now' : 'Skip & build'}</button>
+      <button type="button" class="primary" disabled={!canPreview} aria-busy={waiting && !busy} title={!readyToBuild ? 'Finish the questions before choosing your cast and places.' : undefined} onClick={() => { if (canPreview) setPreview({ choices: chosen() }); }}>{waiting && !busy ? <><span class="review-spinner" aria-hidden="true" />Thinking…</> : 'Choose cast & places'}</button>
+    </footer>}
+  </section>;
+}

package/app/studio/idea-storyboard.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { Sketch, SketchApproval, SketchAsset } from '../src/world/sketch.ts';
+import type { CreativeChoices } from '../src/world/idea-review.ts';
+import type { ReviewInput } from './idea-review.tsx';
+import { call } from './api.ts';
+import { ReviewSketch } from './review-sketch.tsx';
+import { ConceptEdit, type ConceptChange } from './concept-edit.tsx';
+
+// Two paintings at a time. Leaving the preview prevents queued calls from starting.
+let painting = 0;
+const queue: Array<() => void> = [];
+async function turn<T>(work: () => Promise<T>): Promise<T> {
+  if (painting >= 2) await new Promise<void>(resolve => queue.push(resolve));
+  else painting++;
+  try { return await work(); } finally { const next = queue.shift(); if (next) next(); else painting--; }
+}
+
+function Concept({ sketch, asset, disabled, onSelect, onBusy }: {
+  sketch: string; asset: SketchAsset; disabled: boolean;
+  onSelect: (take: number) => void; onBusy: (busy: boolean, working: boolean) => void;
+}) {
+  const [versions, setVersions] = useState<Record<number, string>>({});
+  const [largeVersions, setLargeVersions] = useState<Record<number, string>>({});
+  const [directions, setDirections] = useState<Record<number, string>>({});
+  const [editing, setEditing] = useState(false);
+  const [revision, setRevision] = useState<ConceptChange & { baseTake?: number }>({});
+  const [nextTake, setNextTake] = useState(1);
+  const [selected, setSelected] = useState(0);
+  const [requested, setRequested] = useState(0);
+  const [attempt, setAttempt] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [paintingNow, setPaintingNow] = useState(false);
+  const [previousImage, setPreviousImage] = useState('');
+  const [error, setError] = useState('');
+  useEffect(() => {
+    let current = true;
+    setLoading(true); setPaintingNow(false); setError(''); onBusy(true, true);
+    void turn(async () => {
+      if (!current) return;
+      setPaintingNow(true);
+      const result = await call<{ image: string; largeImage?: string; nextTake?: number }>('idea_sketch_image', { id: sketch, kind: asset.kind, key: asset.key, take: requested, ...revision });
+      if (current) {
+        setPreviousImage(versions[selected] ?? ''); setVersions(v => ({ ...v, [requested]: result.image }));
+        setLargeVersions(v => ({ ...v, [requested]: result.largeImage ?? result.image }));
+        setDirections(v => ({ ...v, [requested]: revision.change || (revision.reference ? 'Your picture reference' : '') }));
+        setNextTake(result.nextTake ?? requested + 1); setEditing(false); setSelected(requested); onSelect(requested);
+      }
+    }).catch(e => { if (current) setError(e.message); }).finally(() => { if (current) setLoading(false); });
+    return () => { current = false; };
+  }, [sketch, asset.kind, asset.key, requested, attempt, revision]);
+  useEffect(() => { onBusy(loading || editing, loading); }, [loading, editing]);
+  const regenerate = (change: ConceptChange = {}) => {
+    if (disabled || loading || nextTake > 9) return;
+    setLoading(true); onBusy(true, true); setError('');
+    setRevision({ ...change, baseTake: selected }); setRequested(nextTake); setNextTake(nextTake + 1);
+  };
+  const progress = paintingNow ? 'Sketching…' : 'Waiting for a brush…';
+  return <article class={`concept-card ${asset.kind}${editing ? ' is-editing' : ''}${loading ? paintingNow ? ' is-painting' : ' is-queued' : ''}`} aria-label={asset.label} aria-busy={loading}>
+    <div class="concept-picture">
+      {versions[selected] ? <>
+        {previousImage && <img class="concept-previous" src={previousImage} alt="" aria-hidden="true" />}
+        <img key={selected} class="concept-art" src={versions[selected]} alt={asset.label} />
+      </> : <span class="concept-placeholder">{loading && (paintingNow ? <ReviewSketch compact /> : <span class="concept-paper-stack" aria-hidden="true"><i /><i /><i /></span>)}<span>{loading ? progress : 'Preview unavailable'}</span>{loading && <span class="concept-brush-trail" aria-hidden="true" />}</span>}
+      {versions[selected] && <span class="concept-watermark">PREVIEW</span>}
+      {versions[selected] && <button type="button" class="concept-zoom" data-lightbox={largeVersions[selected] ?? versions[selected]} aria-label={`Enlarge ${asset.label}`} title="See it big"><span aria-hidden="true">⤢</span></button>}
+      {loading && versions[selected] && <span class="concept-loading" role="status"><span class="concept-brush-trail" aria-hidden="true" />{paintingNow ? 'Sketching another version…' : 'Waiting for a brush…'}</span>}
+    </div>
+    <div class="concept-caption"><strong>{asset.label}</strong><span>{asset.role === 'hero' ? 'You play' : asset.role === 'npc' ? 'Someone you meet' : 'A place to explore'}</span></div>
+    {directions[selected] && <p class="concept-direction">“{directions[selected]}”</p>}
+    {Object.keys(versions).length > 1 && <div class="concept-versions" aria-label={`Versions of ${asset.label}`}>{Object.entries(versions).map(([take, image]) => <button type="button" disabled={disabled || loading} aria-label={`${asset.label}, version ${Number(take) + 1}`} aria-pressed={selected === Number(take)} onClick={() => { if (selected !== Number(take)) setPreviousImage(versions[selected]); setSelected(Number(take)); onSelect(Number(take)); }}><img src={image} alt="" /></button>)}</div>}
+    {error ? <div class="concept-error"><button type="button" class="ghost small" disabled={disabled || loading} onClick={() => setAttempt(n => n + 1)}>Retry preview</button><details class="detail"><summary>Details</summary>{error}</details></div>
+      : <button type="button" class="ghost small" disabled={disabled || loading || nextTake > 9} onClick={() => regenerate()}>{loading ? paintingNow ? 'Sketching…' : 'Queued' : nextTake > 9 ? 'Choose a version above' : 'Another version'}</button>}
+    {versions[selected] && !editing && <button type="button" class="ghost small concept-change" disabled={disabled || loading || nextTake > 9} onClick={() => setEditing(true)}>Change…</button>}
+    {editing && <ConceptEdit label={asset.label} disabled={disabled || loading || nextTake > 9} onGenerate={regenerate} onClose={() => setEditing(false)} />}
+  </article>;
+}
+
+export function IdeaStoryboard({ input, choices, busy, error, onBuild, onSkip }: {
+  input: ReviewInput; choices?: CreativeChoices; busy: boolean; error: string;
+  onBuild: (approval: SketchApproval) => void; onSkip: () => void;
+}) {
+  const [sketch, setSketch] = useState<Sketch | null>(null);
+  const [failure, setFailure] = useState('');
+  const [expanding, setExpanding] = useState(false);
+  const [expandOpen, setExpandOpen] = useState(false);
+  const [wish, setWish] = useState('');
+  const [expandError, setExpandError] = useState('');
+  const [attempt, setAttempt] = useState(0);
+  const [selections, setSelections] = useState<Record<string, number>>({});
+  const [pending, setPending] = useState<Record<string, boolean>>({});
+  const [working, setWorking] = useState<Record<string, boolean>>({});
+  const submitting = useRef(false);
+  useEffect(() => {
+    let current = true;
+    setFailure('');
+    void call<Sketch>('idea_sketch', { ...input, ...(choices && { choices }) }).then(s => { if (current) setSketch(s); }).catch(e => { if (current) setFailure(e.message); });
+    return () => { current = false; };
+  }, [input, choices, attempt]);
+  useEffect(() => { if (!busy) submitting.current = false; }, [busy]);
+  const ready = !expanding && !!sketch && sketch.assets.every(a => Number.isInteger(selections[`${a.kind}:${a.key}`]) && !pending[`${a.kind}:${a.key}`]);
+  const generating = expanding || !sketch && !failure || Object.values(working).some(Boolean);
+  const expand = async () => {
+    if (!sketch || !ready || wish.trim().length < 3) return;
+    setExpanding(true); setExpandError('');
+    try { const revised = await call<Sketch>('idea_sketch_expand', { id: sketch.id, wish: wish.trim() }); setSketch(revised); setExpandOpen(false); setWish(''); }
+    catch (error) { setExpandError((error as Error).message); }
+    finally { setExpanding(false); }
+  };
+  return <div class="idea-storyboard" data-lightbox-group>
+    {!sketch && !failure ? <div class="review-thinking"><ReviewSketch /><div class="review-thinking-copy"><span class="review-kicker">The first sketches</span><p class="review-says" role="status">Finding your characters and places…</p><p class="review-aside">Your cast. Your corners of the world.</p><span class="review-ink-trail" aria-hidden="true" /></div></div> : <p class="review-says">{sketch ? <>Meet <em>your world.</em></> : 'The preview needs another try.'}</p>}
+    {sketch && <>
+      <p class="storyboard-pitch">{sketch.pitch}</p>
+      <p class="detail">A first look. Try another version on any card. The game will use your picks as visual references.</p>
+      {(['character', 'place'] as const).map(kind => <section class="concept-group" aria-label={kind === 'character' ? 'Your cast' : 'Your places'}>
+        <h3>{kind === 'character' ? 'Who’s in the story' : 'Where you’ll go'}</h3>
+        <div class={`concept-grid ${kind}`}>{sketch.assets.filter(a => a.kind === kind).map(asset => {
+          const key = `${asset.kind}:${asset.key}`;
+          return <Concept key={key} sketch={sketch.id} asset={asset} disabled={busy} onSelect={take => setSelections(s => ({ ...s, [key]: take }))} onBusy={(value, active) => { setPending(p => ({ ...p, [key]: value })); setWorking(p => ({ ...p, [key]: active })); }} />;
+        })}</div>
+      </section>)}
+    </>}
+    {sketch && <section class="storyboard-expand">
+      {!expandOpen ? <button type="button" class="ghost" disabled={busy || !ready} onClick={() => setExpandOpen(true)}>Add characters or places…</button> : <form onSubmit={e => { e.preventDefault(); void expand(); }}>
+        <label>Who else, or where else?<textarea value={wish} maxLength={600} disabled={expanding} placeholder="For example: two more fans and a place beneath the stands" onInput={e => setWish(e.currentTarget.value)} /></label>
+        <p class="detail">Your current choices stay. New sketches use additional model calls; worlds can have up to eight places.</p>
+        <div class="concept-edit-tools"><button type="button" class="ghost small" disabled={expanding} onClick={() => { setExpandOpen(false); setExpandError(''); }}>Cancel</button><button type="submit" class="primary small" disabled={busy || !ready || wish.trim().length < 3}>{expanding ? 'Adding…' : 'Add to my world'}</button></div>
+        {expandError && <p role="alert" class="error">{expandError}</p>}
+      </form>}
+    </section>}
+    {failure && <div role="alert"><button type="button" class="ghost" disabled={busy} onClick={() => setAttempt(n => n + 1)}>Retry preview</button><details class="detail"><summary>Details</summary>{failure}</details></div>}
+    {error && <p class="error" role="alert">{error}</p>}
+    <footer><button type="button" class="ghost" disabled={busy} onClick={onSkip}>Skip & build</button><button type="button" class="primary" aria-busy={busy || generating} disabled={busy || !ready} onClick={() => { if (ready && sketch && !submitting.current) { submitting.current = true; onBuild({ id: sketch.id, selections }); } }}>{(busy || generating) && <span class="review-spinner" aria-hidden="true" />}{busy ? 'Starting the build…' : 'Build this version'}</button></footer>
+  </div>;
+}

package/app/studio/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="referrer" content="no-referrer">
+<title>Diorama Studio</title>
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<link rel="stylesheet" href="/app.css">
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/app.js"></script>
+</body>
+</html>

package/app/studio/job-words.ts

@@ -0,0 +1,33 @@
+// Jobs and build steps in plain words, with place and character names instead of slugs and step ids.
+const name = (key: string) => key.replace(/[-_]+/g, ' ').replace(/^./, (c) => c.toUpperCase());
+/** A build step as people say it. */
+const STEP_WORDS: Record<string, string> = {
+  world: 'writing the story', story: 'writing the story', layout: 'planning the places', paint: 'painting', masks: 'cutting out things',
+  plates: 'painting changed things', icons: 'drawing the items', derive: 'measuring depth and walk', backdrop: 'painting the far view',
+  weather: 'setting the weather', reactions: 'choosing scene reactions', cast: 'painting the cast', model: 'building 3D models', sprites: 'painting sprites',
+  sound: 'making sounds', voices: 'giving voices', faces: 'animating speaking faces', verify: 'play testing',
+};
+export const stepWords = (s: string) => STEP_WORDS[s] ?? name(s).toLowerCase();
+/** A job's label ("fix princess-castle from paint", "masks · tram-stop") in plain words with place names, no step ids. */
+export function jobWords(label: string): string {
+  let m: RegExpExecArray | null;
+  if ((m = /^fix (\S+) from (\S+)/.exec(label))) return `repairing ${name(m[1])}, starting again at ${stepWords(m[2])}`;
+  if (/^build\b/.test(label)) return 'building the world';
+  if ((m = /^(\S+) · (\S+)$/.exec(label))) return `${stepWords(m[1])} in ${name(m[2])}`;
+  if ((m = /^animate (\S+)/.exec(label))) return `moving ${name(m[1])} into 3D`;
+  if ((m = /^cast (\S+)/.exec(label))) return `repainting ${name(m[1])}`;
+  if ((m = /^voice (\S+)/.exec(label))) return `a new voice for ${name(m[1])}`;
+  if ((m = /^icon (\S+)/.exec(label))) return `redrawing ${name(m[1]).toLowerCase()}`;
+  if ((m = /^walk (\S+)/.exec(label))) return `the walk of ${name(m[1])}`;
+  if ((m = /^(fog|water area|water|weather) (\S+?):?(?: |$)/.exec(label))) return `the ${m[1]} in ${name(m[2])}`;
+  if (STEP_WORDS[label]) return STEP_WORDS[label];
+  return label.replace(/\b[a-z0-9]+(?:-[a-z0-9]+)+\b/g, (k) => name(k));
+}
+
+/** A finished job in the past tense, for the bell's "is ready": "Repaired Stand, rebuilt from painting", not what it was doing. */
+export function doneWords(label: string): string {
+  let m: RegExpExecArray | null;
+  if ((m = /^fix (\S+) from (\S+)/.exec(label))) return `Repaired ${name(m[1])}: rebuilt from ${stepWords(m[2]).replace(/^planning the places$/, 'the plan')}`;
+  if (/^build\b/.test(label)) return 'Built the world';
+  return `Finished: ${jobWords(label)}`;
+}

package/app/studio/lightbox.tsx

@@ -0,0 +1,49 @@
+// Pictures open over the Studio, not in a new tab: any element with data-lightbox="<url>" opens it full size.
+// Mounted once, like the tips; Esc, a click outside or ✕ closes it. ← and → go through the other pictures beside it
+// (the closest [data-lightbox-group], else the page).
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+export function Lightbox() {
+  const [shown, setShown] = useState<{ all: string[]; at: number } | null>(null);
+  const src = shown?.all[shown.at] ?? null;
+  const isOpen = useRef(false);
+  isOpen.current = !!src;
+  const setSrc = (s: null) => setShown(s);
+  const step = (by: number) => setShown((v) => (v && v.all.length > 1 ? { ...v, at: (v.at + by + v.all.length) % v.all.length } : v));
+  useEffect(() => {
+    const open = (e: MouseEvent) => {
+      const el = (e.target as Element | null)?.closest?.('[data-lightbox]');
+      if (!el) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const scope = el.closest('[data-lightbox-group]') ?? document;
+      const all = [...new Set([...scope.querySelectorAll('[data-lightbox]')].map((x) => x.getAttribute('data-lightbox')!))];
+      setShown({ all, at: Math.max(0, all.indexOf(el.getAttribute('data-lightbox')!)) });
+    };
+    // Captured first and kept to itself while a picture is open: Esc closes the picture only, never also the
+    // drawer, view or step it was opened from (their Esc handlers listen after this one).
+    const esc = (e: KeyboardEvent) => {
+      if (!isOpen.current || !['Escape', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      if (e.key === 'Escape') setSrc(null);
+      if (e.key === 'ArrowLeft') step(-1);
+      if (e.key === 'ArrowRight') step(1);
+    };
+    addEventListener('click', open, true);
+    addEventListener('keydown', esc, true);
+    return () => (removeEventListener('click', open, true), removeEventListener('keydown', esc, true));
+  }, []);
+  if (!src) return null;
+  return (
+    <div class="lightbox" role="dialog" aria-label="Picture" onClick={(e) => e.target === e.currentTarget && setSrc(null)}>
+      <img src={src} alt="" />
+      {shown!.all.length > 1 && <>
+        <button type="button" class="prev" aria-label="Previous" title="Previous (←)" onClick={() => step(-1)}>‹</button>
+        <button type="button" class="next" aria-label="Next" title="Next (→)" onClick={() => step(1)}>›</button>
+        <span class="count">{shown!.at + 1} / {shown!.all.length}</span>
+      </>}
+      <button type="button" class="close" aria-label="Close" title="Close (Esc)" onClick={() => setSrc(null)}>✕</button>
+    </div>
+  );
+}