Image generation

'use client';
import { useCallback, useEffect, useRef, useState, type CSSProperties, type FormEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react';
import { cx } from '../lib/cx';
import { useControllable, useCopied, useReducedMotion } from '../lib/hooks';
import { Icon, type IconName } from '../lib/icons';
import { Seg, Tip } from '../lib/motion';
import { usePopover } from '../lib/popover';
import '../designme.css';
import './image-generation.css';

/** A picture: one made by your model, or an earlier one in the gallery */
export interface GeneratedImage {
  key: string;
  /** The picture. Without it, `placeholder` stands in */
  src?: string;
  /** What the picture shows, for screen readers */
  alt: string;
  /** A CSS background drawn under the picture while it loads (or instead of it), like a gradient of its colours. While a
      picture is made, the effect draws its dots, blur and scan from this and `src` */
  placeholder?: string;
  /** Its width over its height, like 0.75 for 3:4. The gallery and the larger view draw it in its own shape (1 by default) */
  ratio?: number;
  /** The prompt it was made from, shown in the larger view */
  prompt?: string;
  /** The styles it was made with */
  styles?: string[];
}

export type ImageShape = '1:1' | '3:4' | '16:9';

/** What Generate asks your model for */
export interface GenerateRequest {
  prompt: string;
  /** The style chips that are on */
  styles: string[];
  shape: ImageShape;
  /** How many pictures, 1 to 4 */
  count: number;
  /** The model's key */
  model: string;
  /** Pictures added with Use as reference */
  references: GeneratedImage[];
  /** Set for Vary: the picture to make a variation of (count is 1) */
  variationOf?: GeneratedImage;
  /** Set for Retry: which picture of the run is being made again (count is 1, and its updates go to slot 0) */
  retry?: number;
}

/** What your model reports for one picture. Send `progress` as it works (0 to 1), and `image` as soon as there is anything to
    show (an early preview, or only a `placeholder`): the effect plays over it. A picture is ready once progress reaches 1
    and it has an image; `error` fails it, with Retry */
export interface GenerationUpdate {
  progress?: number;
  image?: GeneratedImage;
  error?: string;
}

/** A style preset: a picture and the style chips it turns on */
export interface ImageStylePreset {
  key: string;
  label: string;
  description?: string;
  /** The style chips it turns on (the others go off) */
  styles: string[];
  image?: GeneratedImage;
}

export interface ImageModel {
  key: string;
  label: string;
  /** Like "Most detail, about 6s a picture" */
  description?: string;
  icon?: IconName;
}

export type ImageAction = 'upscale' | 'download' | 'reference' | 'like' | 'dislike' | 'copy';

export interface ImageGenerationProps {
  /** The project, shown after "Images" in the header, like "Spring lookbook" */
  title?: string;
  /** The first part of the header. Defaults to "Images" */
  section?: string;
  /** The prompt in the composer */
  prompt?: string;
  defaultPrompt?: string;
  onPromptChange?: (prompt: string) => void;
  /** The style chips under the prompt. Defaults to Editorial, Poster, Surreal and 35mm */
  styles?: string[];
  /** The chips that are on */
  selectedStyles?: string[];
  defaultSelectedStyles?: string[];
  onSelectedStylesChange?: (styles: string[]) => void;
  shape?: ImageShape;
  defaultShape?: ImageShape;
  onShapeChange?: (shape: ImageShape) => void;
  /** How many pictures Generate makes, 1 to 4 */
  count?: number;
  defaultCount?: number;
  onCountChange?: (count: number) => void;
  /** The models in the model menu. Leave it out to hide the menu */
  models?: ImageModel[];
  model?: string;
  defaultModel?: string;
  onModelChange?: (key: string) => void;
  /** Earlier pictures, newest first. Pictures made here join them at the top */
  gallery?: GeneratedImage[];
  /** The Styles tab. Picking one sets the style chips */
  presets?: ImageStylePreset[];
  /** Which side tab is showing */
  tab?: 'gallery' | 'styles';
  defaultTab?: 'gallery' | 'styles';
  onTabChange?: (tab: 'gallery' | 'styles') => void;
  /** Makes the pictures: call `update(slot, …)` for each one as it goes (slot 0 to count - 1). Also called for Retry and Vary
      with count 1 */
  onGenerate: (request: GenerateRequest, update: (slot: number, update: GenerationUpdate) => void) => void | Promise<void>;
  /** Called for each action on a picture. For 'upscale', return a promise: the sweep plays until it settles, and the picture is
      marked 2× after. Download saves `src` when it has one; anything else is yours to handle here */
  onAction?: (action: ImageAction, image: GeneratedImage) => void | Promise<unknown>;
  className?: string;
}

type Slot = { key: string; progress: number; image?: GeneratedImage; error?: string; up?: boolean; upping?: boolean };
type Run = { id: number; request: GenerateRequest; ratio: number; slots: Slot[]; t0: number; done?: number };

const STYLES = ['Editorial', 'Poster', 'Surreal', '35mm'];
const SHAPES: Record<ImageShape, number> = { '1:1': 1, '3:4': 3 / 4, '16:9': 16 / 9 };
const STAGES = ['Composing', 'Adding detail', 'Upscaling'];
const shapeName = (r: number) => ({ 1: '1:1', 0.75: '3:4', 0.8: '4:5', 0.667: '2:3', 1.333: '4:3', 1.5: '3:2', 1.778: '16:9' } as Record<number, string>)[Math.round(r * 1000) / 1000] || '';
const bg = (im?: GeneratedImage) => [im?.src && `url("${im.src}")`, im?.placeholder].filter(Boolean).join(', ') || undefined;
const statusOf = (s: Slot) => s.error ? 'fail' : s.progress >= 1 && s.image ? 'done' : s.image || s.progress > 0 ? 'gen' : 'wait';

/* the effect, from how far a picture has come: the dots of Composing, the blur and scan of Adding detail, the last softness
   and grain of Upscaling. Progress moves in the steps an image model takes (30 of them), and the CSS eases between them */
function look(s: Slot, ratio: number): CSSProperties {
  const st = statusOf(s), p = Math.floor(Math.min(1, s.progress) * 30) / 30;
  const v: Record<string, string | number> = { '--dm-ar': ratio, '--dm-art': s.image?.placeholder ?? 'none' };
  if (st === 'wait') Object.assign(v, { '--dm-sc': 0, '--dm-gr': 0.5 });
  if (st === 'gen' || st === 'fail') {
    const a = Math.min(1, p / 0.3), b = Math.max(0, Math.min(1, (p - 0.3) / 0.52)), sc = Math.max(0, Math.min(1, (p - 0.34) / 0.46)), u = Math.max(0, Math.min(1, (p - 0.8) / 0.2));
    Object.assign(v, { '--dm-cell': '12px', '--dm-dot': `${a >= 1 ? 12 : 1 + a * 7.5}px`, '--dm-sq': `${a >= 1 ? 12 : 2 + a * 9}px`, '--dm-bl': `${18 - b * 14}px`,
      '--dm-sc': sc, '--dm-lo': sc > 0 && sc < 1 ? 1 : 0, '--dm-sb': `${3 * (1 - u)}px`, '--dm-gr': 0.5 * (1 - p), '--dm-stp': '200ms' });
  }
  if (st === 'done') Object.assign(v, { '--dm-sc': 1, '--dm-sb': '0px', '--dm-gr': 0, '--dm-lo': 0, '--dm-stp': '450ms' });
  return v as CSSProperties;
}

/** A grain tile, drawn once on a canvas */
let grain = '';
function useGrain(off: boolean) {
  const [g, setG] = useState(grain);
  useEffect(() => {
    if (off || grain) return;
    try {
      const n = 96, cv = document.createElement('canvas'); cv.width = cv.height = n;
      const x = cv.getContext('2d'); if (!x) return;
      const d = x.createImageData(n, n);
      for (let i = 0; i < d.data.length; i += 4) { const c = Math.random() < 0.5 ? 20 : 245; d.data[i] = d.data[i + 1] = d.data[i + 2] = c; d.data[i + 3] = 40 + Math.random() * 150; }
      x.putImageData(d, 0, 0); grain = `url("${cv.toDataURL()}")`; setG(grain);
    } catch { /* no canvas: no grain */ }
  }, [off]);
  return off ? '' : g;
}

/** The layers a picture is drawn in: its colours (soft, seen through dots while it is composed), the detailed picture the
    scan uncovers, grain, and the scan line */
function Layers({ image, grainOn = true }: { image?: GeneratedImage; grainOn?: boolean }) {
  const b = { backgroundImage: bg(image) };
  return (
    <>
      <span className="dm-igx-ly dm-igx-b" style={b} />
      <span className="dm-igx-ly dm-igx-s" style={b} />
      {grainOn && <span className="dm-igx-n" />}
      <span className="dm-igx-l"><span /><span /></span>
    </>
  );
}

/** A prompt with style chips, a shape and how many pictures, and a model; the pictures it makes, each resolving from grain
    into dots, then detail under a sweeping scan line, then sharp (Blueprint: square cells and a hard scan, no blur); each can
    fail with Retry, and a finished one can be upscaled, varied, downloaded, opened larger or used as a reference. Beside it,
    a gallery of earlier pictures and style presets; narrower, they take the feed's place under a Create / Gallery / Styles
    switch. `onGenerate` makes the pictures and reports how far each has come. */
export function ImageGeneration(props: ImageGenerationProps) {
  const { title = 'Untitled', section = 'Images', styles = STYLES, models, presets = [], onGenerate, onAction, className } = props;
  const reduce = useReducedMotion();
  const noise = useGrain(reduce);
  const [prompt, setPrompt] = useControllable(props.prompt, props.defaultPrompt ?? '', props.onPromptChange);
  const [picked, setPicked] = useControllable(props.selectedStyles, props.defaultSelectedStyles ?? [], props.onSelectedStylesChange);
  const [shape, setShape] = useControllable(props.shape, props.defaultShape ?? '3:4', props.onShapeChange);
  const [count, setCount] = useControllable(props.count, props.defaultCount ?? 4, props.onCountChange);
  const [model, setModel] = useControllable(props.model, props.defaultModel ?? models?.[0]?.key ?? '', props.onModelChange);
  const [tab, setTab] = useControllable(props.tab, props.defaultTab ?? 'gallery', props.onTabChange);
  const [view, setView] = useState<'create' | 'gallery' | 'styles'>('create');
  const [run, setRun] = useState<Run | null>(null);
  const [made, setMade] = useState<GeneratedImage[]>([]);
  const [fresh, setFresh] = useState<Set<string>>(new Set());
  const [refs, setRefs] = useState<GeneratedImage[]>([]);
  const [rating, setRating] = useState<Record<string, 1 | -1>>({});
  const [upped, setUpped] = useState<Record<string, 'up' | 'upping'>>({});
  const [lb, setLb] = useState<{ list: GeneratedImage[]; key: string; from: HTMLElement | null; mine: boolean } | null>(null);
  const [said, setSaid] = useState('');
  const [runRate, setRunRate] = useState<0 | 1 | -1>(0);
  const [hl, setHl] = useState<string[]>([]);
  const [flash, setFlash] = useState<{ id: string; label: string } | null>(null);
  const [copied, copy] = useCopied();
  const runs = useRef(0), runRef = useRef<Run | null>(null), root = useRef<HTMLDivElement>(null), tiles = useRef<HTMLDivElement>(null), ta = useRef<HTMLTextAreaElement>(null), lbRef = useRef<HTMLDivElement>(null);
  const [grid, setGrid] = useState({ cols: 1, rows: 1 });
  const setMenu = usePopover({ side: 'up' }), modelMenu = usePopover({ side: 'up' });
  runRef.current = run;

  const busy = !!run && run.slots.some(s => { const st = statusOf(s); return st === 'wait' || st === 'gen'; });
  const all = [...made, ...(props.gallery ?? [])];

  // a picture's update, into its run (only the run still on show takes it)
  const updater = useCallback((id: number, map: (slot: number) => number) => (slot: number, u: GenerationUpdate) => {
    setRun(r => {
      if (!r || r.id !== id) return r;
      const i = map(slot); if (!r.slots[i]) return r;
      const slots = r.slots.slice(), s = { ...slots[i] };
      if (u.progress != null) s.progress = Math.max(0, Math.min(1, u.progress));
      if (u.image) s.image = u.image;
      if (u.error) s.error = u.error;
      slots[i] = s;
      return { ...r, slots };
    });
  }, []);
  // a picture that finishes joins the gallery, at the top
  useEffect(() => {
    if (!run) return;
    const ready = run.slots.filter(s => statusOf(s) === 'done' && s.image && !made.some(m => m.key === s.image!.key))
      .map(s => ({ ...s.image!, ratio: run.ratio, prompt: s.image!.prompt ?? run.request.prompt, styles: s.image!.styles ?? run.request.styles }));
    if (ready.length) { setMade(m => [...ready, ...m]); setFresh(new Set(ready.map(x => x.key))); }
    if (!busy && run.slots.length && !run.done) setRun(r => r && { ...r, done: performance.now() });
  }, [run]); // eslint-disable-line react-hooks/exhaustive-deps

  // said politely as each stage starts and once the run is through, never every step
  const live = run ? run.slots.filter(s => !s.error) : [];
  const total = live.length ? live.reduce((a, s) => a + Math.min(1, s.progress), 0) / live.length : 0;
  const stage = !busy ? 3 : total < 0.3 ? 0 : total < 0.8 ? 1 : 2;
  const n = run?.slots.length ?? 0, nDone = run?.slots.filter(s => statusOf(s) === 'done').length ?? 0, nBad = run?.slots.filter(s => s.error).length ?? 0;
  const pics = n === 1 ? 'picture' : `${n} pictures`;
  useEffect(() => {
    if (!run) return;
    setSaid(stage < 3 ? `${STAGES[stage]}, ${pics}` : nBad ? `${nDone} of ${n} ready, ${nBad} failed. Retry is on the failed one` : `${n === 1 ? 'Picture' : pics} ready`);
  }, [stage, run?.id, nBad]); // eslint-disable-line react-hooks/exhaustive-deps

  // the pictures share the room, as large as their shape and number allow
  useEffect(() => {
    const el = tiles.current; if (!el || !run) return;
    const fit = () => {
      const W = el.clientWidth, H = el.clientHeight, k = run.slots.length, g = 8; let best = { cols: 1, rows: 1, w: -1, gap: k };
      for (let cols = 1; cols <= k; cols++) {
        const rows = Math.ceil(k / cols), w = Math.min((W - (cols - 1) * g) / cols, (H - (rows - 1) * g) / rows * run.ratio), gap = cols * rows - k;
        if (w > best.w + 0.5 || (w > best.w - 0.5 && gap <= best.gap)) best = { cols, rows, w, gap };
      }
      setGrid(gr => gr.cols === best.cols && gr.rows === best.rows ? gr : { cols: best.cols, rows: best.rows });
    };
    fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect();
  }, [run?.id, run?.slots.length, run?.ratio]); // eslint-disable-line react-hooks/exhaustive-deps

  function start(request: GenerateRequest, ratio: number) {
    setMenuClosed(); setLb(null);
    const id = ++runs.current;
    setRun({ id, request, ratio, slots: Array.from({ length: request.count }, (_, i) => ({ key: `${id}-${i}`, progress: 0 })), t0: performance.now() });
    setRunRate(0);
    void Promise.resolve(onGenerate(request, updater(id, s => s))).catch(() => {});
  }
  const setMenuClosed = () => { setMenu.close(); modelMenu.close(); };
  const generate = () => {
    const text = prompt.trim(); if (!text || busy) return;
    start({ prompt: text, styles: picked, shape, count, model, references: refs }, SHAPES[shape]);
  };
  const retry = (i: number) => {
    const r = run; if (!r) return;
    setRun({ ...r, slots: r.slots.map((s, j) => j === i ? { key: s.key, progress: 0, image: s.image } : s) });
    setSaid(`Making picture ${i + 1} again`);
    void Promise.resolve(onGenerate({ ...r.request, count: 1, retry: i }, updater(r.id, () => i))).catch(() => {});
  };
  const vary = (im: GeneratedImage) => {
    setSaid('Making a variation');
    start({ prompt: im.prompt ?? prompt, styles: im.styles ?? picked, shape, count: 1, model, references: refs, variationOf: im }, im.ratio ?? SHAPES[shape]);
  };
  const upscale = (im: GeneratedImage) => {
    setUpped(u => ({ ...u, [im.key]: 'upping' })); setSaid('Upscaling');
    const min = new Promise(r => setTimeout(r, reduce ? 0 : 1700));
    void Promise.all([min, Promise.resolve(onAction?.('upscale', im)).catch(() => {})]).then(() => { setUpped(u => ({ ...u, [im.key]: 'up' })); setSaid('Upscaled to twice the size'); });
  };
  const note = (id: string, label: string) => { setFlash({ id, label }); setSaid(label); setTimeout(() => setFlash(f => f && f.id === id ? null : f), 1600); };
  const download = (im: GeneratedImage, id: string) => {
    if (im.src) { const a = document.createElement('a'); a.href = im.src; a.download = ''; document.body.appendChild(a); a.click(); a.remove(); }
    void onAction?.('download', im);
    note(id, im.src ? 'Downloading' : 'No file to download');
  };
  const reference = (im: GeneratedImage, mine: boolean) => {
    setRefs(r => r.includes(im) ? r : [...r.slice(-2), im]); setSaid('Added as a reference'); void onAction?.('reference', im);
    if (mine) setTimeout(() => ta.current?.focus({ preventScroll: true }), 0);
  };
  const rate = (im: GeneratedImage, v: 1 | -1) => {
    const on = rating[im.key] !== v;
    setRating(r => { const x = { ...r }; if (on) x[im.key] = v; else delete x[im.key]; return x; });
    setSaid(on ? (v === 1 ? 'Marked as good' : 'Marked as bad') : 'Rating removed');
    if (on) void onAction?.(v === 1 ? 'like' : 'dislike', im);
  };
  const toggleStyle = (s: string) => setPicked(picked.includes(s) ? picked.filter(x => x !== s) : [...picked, s]);
  const pickPreset = (p: ImageStylePreset) => {
    const changed = styles.filter(s => picked.includes(s) !== p.styles.includes(s));
    setPicked(styles.filter(s => p.styles.includes(s))); setHl(changed); setTimeout(() => setHl([]), 700);
    setSaid(`${p.label}: ${p.styles.join(' and ')}`);
    if (view !== 'create') setView('create');
  };
  const showTab = (t: 'gallery' | 'styles') => setTab(t);
  const showView = (v: 'create' | 'gallery' | 'styles') => { setView(v); if (v !== 'create') setTab(v); };
  const open = (list: GeneratedImage[], key: string, from: HTMLElement | null, mine: boolean) => { setMenuClosed(); setLb({ list, key, from, mine }); };

  // the larger view: the focus moves in when a person opened it, and back to where they were when it closes
  useEffect(() => { if (lb?.mine) lbRef.current?.querySelector<HTMLElement>('.dm-igx-lbx')?.focus({ preventScroll: true }); }, [lb?.key, lb?.mine]); // eslint-disable-line react-hooks/exhaustive-deps
  const closeLb = (back: boolean) => { const from = lb?.from; setLb(null); if (back && from?.isConnected) from.focus({ preventScroll: true }); };
  const lbAt = lb ? lb.list.findIndex(x => x.key === lb.key) : -1, lbImg = lb ? lb.list[lbAt] : undefined;
  const step = (d: number) => { if (!lb) return; const i = lbAt + d; if (i >= 0 && i < lb.list.length) setLb({ ...lb, key: lb.list[i].key }); };
  const lbKeys = (e: ReactKeyboardEvent) => {
    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeLb(true); return; }
    if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && !(e.target as HTMLElement).closest('.dm-igx-lbf')) { e.preventDefault(); step(e.key === 'ArrowLeft' ? -1 : 1); return; }
    if (e.key === 'Tab') {
      const f = Array.from(lbRef.current?.querySelectorAll<HTMLButtonElement>('button:not(:disabled)') ?? []), a = f[0], z = f[f.length - 1];
      if (e.shiftKey && document.activeElement === a) { e.preventDefault(); z?.focus(); } else if (!e.shiftKey && document.activeElement === z) { e.preventDefault(); a?.focus(); }
    }
  };

  // two columns for the gallery: each picture under the shorter one
  const cols: GeneratedImage[][] = [[], []], hgt = [0, 0];
  all.forEach(im => { const k = hgt[0] <= hgt[1] ? 0 : 1; cols[k].push(im); hgt[k] += 1 / (im.ratio ?? 1) + 0.06; });
  const metaOf = (im: GeneratedImage) => [shapeName(im.ratio ?? 1), (im.styles ?? []).join(', ') || 'No style', upped[im.key] === 'up' ? 'Upscaled 2×' : ''].filter(Boolean).join(' · ');
  const modelLabel = models?.find(m => m.key === model)?.label;
  const secs = run ? Math.max(1, Math.round(((run.done ?? performance.now()) - run.t0) / 1000)) : 0;
  const doneList = run ? run.slots.filter(s => statusOf(s) === 'done' && s.image).map(s => ({ ...s.image!, ratio: run.ratio, prompt: s.image!.prompt ?? run.request.prompt, styles: s.image!.styles ?? run.request.styles })) : [];
  const flashed = (id: string, icon: IconName) => flash?.id === id ? 'check' : icon;
  const submit = (e: FormEvent) => { e.preventDefault(); generate(); };

  return (
    <div ref={root} data-dm="" className={cx('dm-igx', className)} role="region" aria-label="Image generation" style={noise ? { '--dm-noise': noise } as CSSProperties : undefined}>
      <div className="dm-igx-in" data-view={view}>
        <div className="dm-igx-main" role="group" aria-label="Create">
          <div className="dm-igx-h">
            <span className="dm-igx-cr"><span>{section}</span><Icon name="chev-r" /><b>{title}</b></span>
            <Seg className="dm-igx-vw" label="Show" value={view} onChange={showView} options={[{ value: 'create', label: 'Create' }, { value: 'gallery', label: 'Gallery' }, { value: 'styles', label: 'Styles' }]} />
          </div>
          <div className="dm-igx-feed">
            {run && <div className="dm-bub dm-igx-ask">{run.request.prompt}</div>}
            {!run && <div className="dm-igx-empty"><div className="dm-igx-ef" aria-hidden="true"><span><Icon name="image" /></span><span><Icon name="image" /></span><span><Icon name="image" /></span></div><span>Describe a picture and press Generate</span></div>}
            {run && (
              <div className="dm-igx-run">
                <div className="dm-igx-rh">
                  <span className="dm-igx-rt">
                    {busy ? <><span className="dm-spin" aria-hidden="true" /><span>Generating {pics}</span></>
                      : nBad ? <><Icon name="alert" /><span>{nDone} of {n} ready, {nBad} failed</span></>
                      : <><Icon name="image" /><span>{n === 1 ? 'Picture' : pics[0].toUpperCase() + pics.slice(1)} ready in {secs}s</span></>}
                  </span>
                  <span className="dm-igx-steps" aria-hidden="true">
                    {STAGES.map((s, k) => <span key={s} className={k < stage ? 'dm-done' : k === stage ? 'dm-on' : undefined}><i /><Icon name="check" />{s}</span>)}
                  </span>
                  <span className="dm-igx-pc dm-num" aria-hidden="true">{busy ? `${Math.round(total * 100)}%` : ''}</span>
                </div>
                <div ref={tiles} className="dm-igx-tiles" role="group" aria-label="Pictures" style={{ '--dm-cols': grid.cols, '--dm-rows': grid.rows } as CSSProperties}>
                  {run.slots.map((s, i) => {
                    const st = statusOf(s), up = s.image ? upped[s.image.key] : undefined, im = doneList.find(x => x.key === s.image?.key);
                    return (
                      <figure key={s.key} className={cx('dm-igx-t', up === 'upping' && 'dm-up')} data-st={st} style={look(s, run.ratio)}>
                        <button type="button" className="dm-igx-o" aria-haspopup="dialog" disabled={st !== 'done'}
                          aria-label={st === 'done' ? `Open picture ${i + 1}: ${s.image?.alt}` : `Picture ${i + 1}, ${st === 'fail' ? 'failed' : 'being made'}`}
                          onClick={e => im && open(doneList, im.key, e.currentTarget, e.isTrusted)}>
                          <Layers image={s.image} />
                        </button>
                        {up === 'up' && <span className="dm-tag dm-igx-tg">2×</span>}
                        <span className="dm-igx-tp dm-num" aria-hidden="true">{Math.round(Math.floor(Math.min(1, s.progress) * 30) / 30 * 100)}%</span>
                        <div className="dm-igx-f"><Icon name="alert" /><b>Couldn&apos;t finish</b><span>{s.error}</span><button type="button" className="dm-pill dm-line dm-sm" aria-label={`Retry picture ${i + 1}`} onClick={() => retry(i)}><Icon name="refresh" size="xs" />Retry</button></div>
                        {im && (
                          <div className="dm-igx-q">
                            <Tip label="Vary"><button type="button" className="dm-ib" aria-label={`Vary picture ${i + 1}`} onClick={() => vary(im)}><Icon name="layers" /></button></Tip>
                            <Tip label="Upscale"><button type="button" className="dm-ib" aria-label={`Upscale picture ${i + 1}`} onClick={() => upscale(im)}><Icon name="max" /></button></Tip>
                            <Tip label={flash?.id === `t${i}` ? flash.label : 'Download'} open={flash?.id === `t${i}`}><button type="button" className="dm-ib" aria-label={`Download picture ${i + 1}`} onClick={() => download(im, `t${i}`)}><Icon name={flashed(`t${i}`, 'down')} /></button></Tip>
                          </div>
                        )}
                      </figure>
                    );
                  })}
                </div>
                <div className="dm-igx-acts" role="toolbar" aria-label="Rate and copy">
                  <Tip label="Good pictures"><button type="button" className="dm-ib" aria-label="Good pictures" aria-pressed={runRate === 1} onClick={() => { setRunRate(runRate === 1 ? 0 : 1); setSaid(runRate === 1 ? 'Rating removed' : 'Marked as good'); }}><Icon name="up-thumb" /></button></Tip>
                  <Tip label="Bad pictures"><button type="button" className="dm-ib" aria-label="Bad pictures" aria-pressed={runRate === -1} onClick={() => { setRunRate(runRate === -1 ? 0 : -1); setSaid(runRate === -1 ? 'Rating removed' : 'Marked as bad'); }}><Icon name="down-thumb" /></button></Tip>
                  <Tip label={copied ? 'Prompt copied' : 'Copy prompt'} open={copied}><button type="button" className="dm-ib" aria-label="Copy prompt" onClick={() => copy(run.request.prompt)}><Icon name={copied ? 'check' : 'copy'} /></button></Tip>
                  <span className="dm-igx-meta">{[modelLabel, shapeName(run.ratio), run.request.styles.join(', ') || 'No style'].filter(Boolean).join(' · ')}</span>
                </div>
              </div>
            )}
            <p className="dm-igx-sr" aria-live="polite">{said}</p>
          </div>
          <form className="dm-igx-cmp" onSubmit={submit}>
            {refs.length > 0 && (
              <div className="dm-igx-refs" role="group" aria-label="References">
                {refs.map((im, i) => (
                  <span key={im.key} className="dm-igx-ref"><span className="dm-igx-rp"><span className="dm-igx-ly" style={{ backgroundImage: bg(im) }} /></span>Reference {i + 1}
                    <Tip label="Remove"><button type="button" className="dm-ib" aria-label={`Remove reference ${i + 1}`} onClick={() => { setRefs(r => r.filter(x => x !== im)); setSaid('Reference removed'); }}><Icon name="x" size="xs" /></button></Tip>
                  </span>
                ))}
              </div>
            )}
            <textarea ref={ta} className="dm-igx-ta" rows={2} aria-label="Prompt" placeholder="Describe the picture you want" value={prompt}
              onChange={e => setPrompt(e.target.value)} onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); generate(); } }} />
            {styles.length > 0 && (
              <div className="dm-igx-sty" role="group" aria-label="Styles">
                {styles.map(s => <button key={s} type="button" className={cx('dm-igx-sc', hl.includes(s) && 'dm-hl')} aria-pressed={picked.includes(s)} onClick={() => toggleStyle(s)}><Icon name="check" />{s}</button>)}
              </div>
            )}
            <div className="dm-igx-bar">
              <Tip label="Shape and number" off={setMenu.open}>
                <button type="button" className="dm-chip dm-igx-set" {...setMenu.trigger} aria-haspopup="dialog" aria-label={`Shape ${shape}, ${count === 1 ? '1 picture' : `${count} pictures`}`}><Icon name="image" /><span>{shape} · {count}</span><Icon name="chev-d" /></button>
              </Tip>
              {models && models.length > 0 && (
                <Tip label="Image model" off={modelMenu.open}>
                  <button type="button" className="dm-chip dm-igx-mdl" {...modelMenu.trigger}><Icon name={models.find(m => m.key === model)?.icon ?? 'spark'} /><span>{modelLabel}</span><Icon name="chev-d" /></button>
                </Tip>
              )}
              <span className="dm-sp" />
              <Tip label={busy ? 'Generating' : 'Generate'} kbd="↵">
                <button type="submit" className="dm-pill dm-primary dm-igx-go" aria-label="Generate" disabled={!prompt.trim() || busy}><Icon name="wand" /><span>Generate</span></button>
              </Tip>
            </div>
            <div {...setMenu.pop} className={cx(setMenu.pop.className, 'dm-igx-pp-set')} role="dialog" aria-label="Shape and number">
              <div className="dm-ph">Shape</div>
              <Seg label="Shape" value={shape} onChange={setShape} options={(['1:1', '3:4', '16:9'] as const).map(v => ({ value: v, label: v }))} />
              <div className="dm-ph">Pictures</div>
              <Seg label="Pictures" value={String(count)} onChange={v => setCount(+v)} options={['1', '2', '3', '4'].map(v => ({ value: v, label: v }))} />
            </div>
            {models && models.length > 0 && (
              <div {...modelMenu.pop} className={cx(modelMenu.pop.className, 'dm-igx-pp-m')} role="menu" aria-label="Image model">
                <div className="dm-ph">Image model</div>
                {models.map(m => (
                  <button key={m.key} type="button" className="dm-mi" role="menuitemradio" aria-checked={m.key === model} onClick={() => { setModel(m.key); modelMenu.closeSoon(); }}>
                    <Icon name={m.icon ?? 'spark'} /><span>{m.label}{m.description && <span className="dm-d">{m.description}</span>}</span><span className="dm-ck"><Icon name="check" /></span>
                  </button>
                ))}
              </div>
            )}
          </form>
        </div>
        <div className="dm-igx-side" role="group" aria-label="Library">
          <div className="dm-igx-sh">
            <Seg className="dm-igx-tb" label="Show" value={tab} onChange={showTab} options={[{ value: 'gallery', label: 'Gallery' }, ...(presets.length ? [{ value: 'styles' as const, label: 'Styles' }] : [])]} />
            <span className="dm-sp" /><span className="dm-muted dm-num">{all.length}</span>
          </div>
          <div className="dm-igx-pane" role="group" aria-label="Gallery" hidden={tab !== 'gallery'}>
            <div className="dm-igx-gal">
              {cols.map((col, k) => (
                <div key={k} className="dm-igx-col">
                  {col.map(im => (
                    <button key={im.key} type="button" className={cx('dm-igx-g', fresh.has(im.key) && 'dm-new')} aria-haspopup="dialog" aria-label={im.alt} style={{ '--dm-ar': im.ratio ?? 1 } as CSSProperties}
                      onClick={e => open(all, im.key, e.currentTarget, true)}>
                      <span className="dm-igx-ly" style={{ backgroundImage: bg(im) }} />
                    </button>
                  ))}
                </div>
              ))}
            </div>
          </div>
          <div className="dm-igx-pane" role="group" aria-label="Style presets" hidden={tab !== 'styles'}>
            <div className="dm-igx-prs">
              {presets.map(p => (
                <button key={p.key} type="button" className="dm-igx-pr" aria-pressed={p.styles.length === picked.length && p.styles.every(s => picked.includes(s))} onClick={() => pickPreset(p)}>
                  <span className="dm-igx-prp"><span className="dm-igx-ly" style={{ backgroundImage: bg(p.image) }} /></span>
                  <span className="dm-igx-prt"><b>{p.label}</b>{p.description && <span className="dm-muted">{p.description}</span>}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
        {lb && lbImg && (
          <div ref={lbRef} className="dm-igx-lb dm-open" role="dialog" aria-modal="true" aria-label={`Picture ${lbAt + 1} of ${lb.list.length}`} onKeyDown={lbKeys}>
            <div className="dm-igx-lbh">
              <div className="dm-igx-lbt"><b>{lbImg.prompt ?? lbImg.alt}</b><span className="dm-muted">{metaOf(lbImg)}</span></div>
              <span className="dm-muted dm-num">{lbAt + 1} of {lb.list.length}</span>
              <Tip label="Close" kbd="Esc"><button type="button" className="dm-ib dm-igx-lbx" aria-label="Close" onClick={() => closeLb(true)}><Icon name="x" /></button></Tip>
            </div>
            <div className="dm-igx-lbb">
              <Tip label="Previous"><button type="button" className="dm-pill dm-line dm-igx-lbn" aria-label="Previous picture" disabled={lbAt <= 0} onClick={() => step(-1)}><Icon name="chev-l" /></button></Tip>
              <div className="dm-igx-lbs">
                <figure className={cx('dm-igx-t', upped[lbImg.key] === 'upping' && 'dm-up')} data-st="done" style={{ '--dm-ar': lbImg.ratio ?? 1, '--dm-art': lbImg.placeholder ?? 'none' } as CSSProperties}>
                  <span className="dm-igx-ly dm-igx-b" style={{ backgroundImage: bg(lbImg) }} />
                  <span className="dm-igx-ly dm-igx-s" role="img" aria-label={lbImg.alt} style={{ backgroundImage: bg(lbImg) }} />
                  <span className="dm-igx-l" aria-hidden="true"><span /><span /></span>
                  {upped[lbImg.key] === 'up' && <span className="dm-tag dm-igx-tg">2×</span>}
                </figure>
              </div>
              <Tip label="Next"><button type="button" className="dm-pill dm-line dm-igx-lbn" aria-label="Next picture" disabled={lbAt >= lb.list.length - 1} onClick={() => step(1)}><Icon name="chev-r" /></button></Tip>
            </div>
            <div className="dm-igx-lbf" role="toolbar" aria-label="Picture actions">
              <Tip label="Upscale to twice the size"><button type="button" className="dm-pill dm-line dm-sm" aria-label="Upscale" onClick={() => upscale(lbImg)}><Icon name="max" size="xs" /><span className="dm-igx-lbl">Upscale</span></button></Tip>
              <Tip label="Make a variation"><button type="button" className="dm-pill dm-line dm-sm" aria-label="Vary" onClick={() => vary(lbImg)}><Icon name="layers" size="xs" /><span className="dm-igx-lbl">Vary</span></button></Tip>
              <Tip label="Use as reference"><button type="button" className="dm-pill dm-line dm-sm" aria-label="Use as reference" onClick={e => { closeLb(false); reference(lbImg, e.isTrusted); }}><Icon name="clip" size="xs" /><span className="dm-igx-lbl">Use as reference</span></button></Tip>
              <Tip label={flash?.id === 'lb' ? flash.label : 'Download'} open={flash?.id === 'lb'}><button type="button" className="dm-pill dm-line dm-sm" aria-label="Download" onClick={() => download(lbImg, 'lb')}><Icon name={flashed('lb', 'down')} size="xs" /><span className="dm-igx-lbl">Download</span></button></Tip>
              <span className="dm-igx-sep" aria-hidden="true" />
              <Tip label="Good picture"><button type="button" className="dm-ib" aria-label="Good picture" aria-pressed={rating[lbImg.key] === 1} onClick={() => rate(lbImg, 1)}><Icon name="up-thumb" /></button></Tip>
              <Tip label="Bad picture"><button type="button" className="dm-ib" aria-label="Bad picture" aria-pressed={rating[lbImg.key] === -1} onClick={() => rate(lbImg, -1)}><Icon name="down-thumb" /></button></Tip>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* Generated from designme.dev by scripts/sync.mjs. Edit the site, then sync. */
/* ---------- Image generation ---------- */
/* a prompt and what it made on the left, earlier pictures and style presets on the right (owner, 5 Nov). Each picture is
   made in three stages, the way an image model works: Composing (a grid of dots in the picture's colours grows out of
   grain), Adding detail (the blur lifts step by step while a scan line sweeps down and leaves the detailed picture behind
   it) and Upscaling (the last softness and grain go). The steps are a model's denoising steps: the picture changes a step
   at a time and eases between them. Every picture moves at its own speed, and one can fail with Retry. Upscale sweeps the
   line down once more over a softened copy. Blueprint never blurs: its dots are square cells, the picture shows through
   them at half strength, and its scan line is the accent's mark. With reduced motion a picture fades in once it is done.
   --dm-ar is a picture's width over its height, --dm-art the gradient of its colours that stands in for it; on a picture being
   made, --dm-dot (Blueprint: --dm-sq) is the size of its dots, --dm-bl the blur, --dm-gr the grain, --dm-sc how far the scan has come and
   --dm-stp how long a step takes */
.dm-card.dm-wide .dm-stage-in:has(>.dm-igx){max-width:900px}
.dm-igx{width:100%;container:igx/inline-size;text-align:left}
.dm-igx-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:var(--dm-s-3);height:572px}
.dm-igx-main,.dm-igx-side{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--dm-surface);border-radius:var(--dm-r-card);box-shadow:var(--dm-shadow);overflow:hidden}
.dm-igx-h{flex:none;display:flex;align-items:center;gap:var(--dm-s-2);height:44px;padding:0 var(--dm-s-2) 0 var(--dm-s-4);border-bottom:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent);font-size:13px}
.dm-igx-cr{flex:1;min-width:0;display:flex;align-items:center;gap:2px;white-space:nowrap;color:var(--dm-muted)}
.dm-igx-cr .dm-i{color:var(--dm-faint);flex:none}
.dm-igx-cr b{min-width:0;font-weight:500;color:var(--dm-fg);overflow:hidden;text-overflow:ellipsis}
.dm-igx-vw{display:none}
/* the feed: the prompt as sent, then what it made */
.dm-igx-feed{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--dm-s-3);padding:var(--dm-s-4) var(--dm-s-4) var(--dm-s-2)}
.dm-igx-ask{flex:none;max-width:88%;font-size:13.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-igx-ask:empty{display:none}
.dm-igx-run{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.dm-igx-run[hidden]{display:none}
.dm-igx-rh{flex:none;display:flex;align-items:center;gap:var(--dm-s-3);min-height:20px;font-size:13px}
.dm-igx-rt{flex:1;min-width:0;display:flex;align-items:center;gap:var(--dm-s-2);white-space:nowrap}
.dm-igx-rt>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dm-igx-rt .dm-i{color:var(--dm-fg2)}
.dm-igx-rt .dm-spin{width:11px;height:11px;color:var(--dm-fg2)}
/* the three stages and how far the run has come: the stage in hand is ink, the ones done are ticked */
.dm-igx-steps{flex:none;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dm-muted);white-space:nowrap}
.dm-igx-steps span{display:inline-flex;align-items:center;gap:5px;transition:color var(--dm-t-fast)}
.dm-igx-steps i{width:6px;height:6px;border-radius:50%;background:var(--dm-rail);transition:background var(--dm-t-fast)}
.dm-igx-steps .dm-on{color:var(--dm-fg)}
.dm-igx-steps .dm-on i{background:var(--dm-fg2)}
.dm-igx-steps .dm-done{color:var(--dm-fg2)}
.dm-igx-steps .dm-done i{display:none}
.dm-igx-steps .dm-i{display:none;width:12px;height:12px}
.dm-igx-steps .dm-done .dm-i{display:inline-block}
.dm-igx-pc{flex:none;min-width:34px;font-size:12px;color:var(--dm-fg2);text-align:right}
/* the pictures share the room left, as large as their shape and number allow: --dm-cols and --dm-rows are the layout that
   gives each the most room, measured by the script */
.dm-igx-tiles{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:var(--dm-s-2);container-type:size}
.dm-igx-t{position:relative;flex:none;margin:0;width:min(calc((100cqw - (var(--dm-cols,1) - 1) * var(--dm-s-2)) / var(--dm-cols,1)),calc((100cqh - (var(--dm-rows,1) - 1) * var(--dm-s-2)) / var(--dm-rows,1) * var(--dm-ar,1)));aspect-ratio:var(--dm-ar,1);border-radius:var(--dm-r-in);overflow:hidden;isolation:isolate;background:var(--dm-row);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 50%,transparent)}
.dm-igx-o{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit;cursor:zoom-in}
.dm-igx-o:disabled{cursor:default}
.dm-igx-o:focus-visible{outline-offset:-2px}
.dm-igx-ly{position:absolute;inset:0;background-image:var(--dm-art);background-size:cover;background-position:center;pointer-events:none}
/* the base: the picture's colours, soft, seen through the dots while it is composed */
.dm-igx-b{transform:scale(calc(1.14 * var(--dm-vz,1)));transform-origin:var(--dm-vo,50% 50%);filter:blur(var(--dm-bl,18px)) saturate(1.3);opacity:0;transition:filter var(--dm-stp,.2s) linear,opacity .5s var(--dm-ease)}
.dm-igx-t:is([data-st="gen"],[data-st="fail"]) .dm-igx-b{opacity:1}
.dm-igx-t[data-st="gen"] .dm-igx-b{-webkit-mask:radial-gradient(circle,#000 var(--dm-dot,1px),transparent calc(var(--dm-dot,1px) + 1px)) 50% 50%/var(--dm-cell,12px) var(--dm-cell,12px);mask:radial-gradient(circle,#000 var(--dm-dot,1px),transparent calc(var(--dm-dot,1px) + 1px)) 50% 50%/var(--dm-cell,12px) var(--dm-cell,12px)}
.dm-igx-t[data-st="fail"] .dm-igx-b{filter:blur(var(--dm-bl,18px)) grayscale(1);opacity:.55}
/* the detailed picture, uncovered by the scan */
.dm-igx-s{transform:scale(var(--dm-vz,1));transform-origin:var(--dm-vo,50% 50%);clip-path:inset(0 0 calc(100% - var(--dm-sc,1) * 100%) 0);filter:blur(var(--dm-sb,0px));transition:clip-path var(--dm-stp,.2s) linear,filter var(--dm-stp,.2s) linear,opacity .5s var(--dm-ease)}
.dm-igx-t:is([data-st="wait"],[data-st="fail"]) .dm-igx-s{opacity:0}
/* grain, which fades as the picture settles */
.dm-igx-n{position:absolute;inset:0;pointer-events:none;background-image:var(--dm-noise,none);background-size:96px 96px;opacity:var(--dm-gr,0);transition:opacity var(--dm-stp,.2s) linear}
.dm-igx-t:is([data-st="wait"],[data-st="gen"]) .dm-igx-n{animation:dm-igxgr .48s steps(1,end) infinite}
.dm-igx-t[data-st="wait"] .dm-igx-n{opacity:.5}
@keyframes dm-igxgr{0%{background-position:0 0}25%{background-position:-31px 17px}50%{background-position:23px -41px}75%{background-position:-13px -29px}}
/* the scan line: a thin light with a faint wash above it */
.dm-igx-l{position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateY(calc(var(--dm-sc,0) * 100%));transition:transform var(--dm-stp,.2s) linear,opacity .3s}
.dm-igx-l>span{position:absolute;left:0;right:0}
.dm-igx-l>span:first-child{top:-1px;height:2px;background:rgba(255,255,255,.92)}
.dm-igx-l>span:last-child{bottom:100%;height:32px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.22))}
.dm-igx-t[data-st="gen"] .dm-igx-l{opacity:var(--dm-lo,0)}
/* Upscale: the picture softens, and the line sweeps down once leaving it sharp */
.dm-igx-t.dm-up .dm-igx-b{opacity:1;-webkit-mask:none;mask:none;filter:blur(3px);transition:none}
.dm-igx-t.dm-up .dm-igx-s{animation:dm-igxrv 1.6s var(--dm-ease-io) both}
.dm-igx-t.dm-up .dm-igx-l{animation:dm-igxsc 1.6s var(--dm-ease-io) both}
@keyframes dm-igxrv{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes dm-igxsc{from{opacity:1;transform:translateY(0)}88%{opacity:1}to{opacity:0;transform:translateY(100%)}}
/* how far a picture has come, until it is done */
.dm-igx-tp{position:absolute;left:var(--dm-s-2);bottom:var(--dm-s-2);height:20px;padding:0 7px;display:inline-flex;align-items:center;border-radius:var(--dm-r-tag);background:color-mix(in srgb,var(--dm-surface) 90%,transparent);color:var(--dm-fg);font-size:11.5px;font-weight:500;opacity:0;transition:opacity .3s;pointer-events:none}
.dm-igx-t:is([data-st="wait"],[data-st="gen"]) .dm-igx-tp{opacity:1}
.dm-igx-tg{position:absolute;left:6px;top:6px;background:color-mix(in srgb,var(--dm-surface) 90%,transparent);color:var(--dm-fg);pointer-events:none}
.dm-igx-tg:empty{display:none}
/* a picture that failed: what happened and Retry, over its faded colours */
.dm-igx-f{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--dm-s-1);padding:var(--dm-s-2);text-align:center;background:color-mix(in srgb,var(--dm-surface) 84%,transparent);font-size:12px;line-height:1.35;color:var(--dm-fg2)}
.dm-igx-t[data-st="fail"] .dm-igx-f{display:flex}
.dm-igx-f>.dm-i{color:var(--dm-bad)}
.dm-igx-f b{font-size:12.5px;font-weight:500;color:var(--dm-fg)}
.dm-igx-f .dm-pill{margin-top:var(--dm-s-1)}
/* quick actions on a finished picture, under the pointer or the keyboard */
.dm-igx-q{position:absolute;right:6px;bottom:6px;display:flex;gap:2px;padding:2px;border-radius:calc(11px * var(--dm-rk));background:color-mix(in srgb,var(--dm-surface) 94%,transparent);box-shadow:var(--dm-shadow);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity var(--dm-t-fast),transform var(--dm-t-fast) var(--dm-ease)}
.dm-igx-q .dm-ib{width:28px;height:28px}
@media (hover:hover) and (pointer:fine){.dm-igx-t[data-st="done"]:hover .dm-igx-q{opacity:1;transform:none;pointer-events:auto}}
.dm-igx-t[data-st="done"]:is(:focus-within,.dm-hov) .dm-igx-q{opacity:1;transform:none;pointer-events:auto}
/* under the pictures: rate them, copy the prompt, and what made them */
.dm-igx-acts{flex:none;display:flex;align-items:center;gap:2px;min-height:30px;margin-left:-6px}
.dm-igx-acts .dm-ib[aria-pressed="true"],.dm-igx-lb .dm-ib[aria-pressed="true"]{background:var(--dm-chip);color:var(--dm-fg)}
.dm-igx-sep{flex:none;width:1px;height:16px;margin:0 6px;background:color-mix(in srgb,var(--dm-line) 100%,transparent)}
.dm-igx-meta{flex:1;min-width:0;font-size:12px;color:var(--dm-muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* before anything is made */
.dm-igx-empty{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--dm-s-3);font-size:13px;color:var(--dm-muted);text-align:center}
.dm-igx-empty[hidden]{display:none}
.dm-igx-ef{display:flex;gap:var(--dm-s-2)}
.dm-igx-ef span{width:40px;aspect-ratio:3/4;display:grid;place-items:center;border-radius:var(--dm-r-sm);background:var(--dm-row);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 50%,transparent);color:var(--dm-faint)}
.dm-igx-ef span:nth-child(2){transform:translateY(-6px)}
/* the composer: references, the prompt, its styles, and the settings for the run */
.dm-igx-cmp{flex:none;margin:0 var(--dm-s-3) var(--dm-s-3);display:flex;flex-direction:column;border-radius:var(--dm-r-box);background:var(--dm-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-field-line) 50%,transparent);transition:box-shadow var(--dm-t-fast)}
.dm-igx-cmp:focus-within{box-shadow:inset 0 0 0 1px var(--dm-field-line-strong)}
.dm-igx-refs{display:flex;flex-wrap:wrap;gap:6px;padding:10px var(--dm-s-3) 0}
.dm-igx-refs:empty{display:none}
.dm-igx-ref{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 var(--dm-s-1) 0 3px;border-radius:var(--dm-r-tag);background:var(--dm-chip);font-size:12px;color:var(--dm-fg2);white-space:nowrap}
.dm-igx-ref .dm-igx-rp{position:relative;width:20px;height:20px;border-radius:calc(5px * var(--dm-rk));overflow:hidden;background:var(--dm-row)}
.dm-igx-ref .dm-ib{width:20px;height:20px}
.dm-igx-ta{display:block;width:100%;height:58px;border:0;outline:0;resize:none;background:none;color:var(--dm-fg);font:inherit;font-size:14px;line-height:1.45;padding:var(--dm-s-3) var(--dm-s-3) 2px}
.dm-igx-ta::placeholder{color:var(--dm-muted)}
.dm-igx-sty{display:flex;flex-wrap:wrap;gap:6px;padding:6px var(--dm-s-3) 0}
/* a style chip is a white tile with a dimmed edge; picked, its edge steps up and a tick slides in */
.dm-igx-sc{display:inline-flex;align-items:center;gap:0;height:26px;padding:0 10px;border-radius:var(--dm-r-tag);background:var(--dm-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 100%,transparent);font-size:12.5px;color:var(--dm-fg2);white-space:nowrap;transition:background var(--dm-t-fast),color var(--dm-t-fast),box-shadow var(--dm-t-fast),gap var(--dm-t) var(--dm-ease)}
.dm-igx-sc .dm-i{width:0;opacity:0;transition:width var(--dm-t) var(--dm-ease),opacity var(--dm-t-fast)}
@media (hover:hover) and (pointer:fine){.dm-igx-sc:hover{background:var(--dm-row);color:var(--dm-fg)}}
.dm-igx-sc[aria-pressed="true"]{gap:5px;color:var(--dm-fg);box-shadow:inset 0 0 0 1px var(--dm-faint)}
.dm-igx-sc[aria-pressed="true"] .dm-i{width:12px;opacity:1}
.dm-igx-sc.dm-hl{background:var(--dm-row)}
.dm-igx-bar{display:flex;align-items:center;gap:var(--dm-s-1);padding:var(--dm-s-2) var(--dm-s-2) var(--dm-s-2) 6px}
.dm-igx-bar .dm-chip{height:32px;padding:0 10px;gap:6px;background:none;min-width:0;font-size:13px;color:var(--dm-fg2)}
.dm-igx-bar .dm-chip[aria-expanded="true"]{background:var(--dm-row);color:var(--dm-fg)}
@media (hover:hover) and (pointer:fine){.dm-igx-bar .dm-chip:hover{background:var(--dm-row);color:var(--dm-fg)}}
.dm-igx-bar .dm-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-igx-bar .dm-chip>.dm-i:last-child{color:var(--dm-muted)}
.dm-igx-bar .dm-sp{flex:1}
.dm-igx-go{flex:none}
/* the settings: shape and how many, two switches in a small panel */
.dm-igx-pp-set{min-width:236px;padding:var(--dm-s-2) 10px 10px}
.dm-igx-pp-set .dm-ph{padding:var(--dm-s-1) 0 6px}
.dm-igx-pp-set .dm-seg2{display:flex;margin-bottom:var(--dm-s-1)}
.dm-igx-pp-set .dm-seg2 button{flex:1}
/* the side: earlier pictures and style presets */
.dm-igx-sh{flex:none;display:flex;align-items:center;gap:var(--dm-s-2);height:44px;padding:0 var(--dm-s-2);border-bottom:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent)}
.dm-igx-sh .dm-sp{flex:1}
.dm-igx-sh .dm-muted{font-size:12px;padding-right:6px}
.dm-igx-pane{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:var(--dm-s-2)}
.dm-igx-pane[hidden]{display:none}
.dm-igx-pane:focus-visible{outline-offset:-2px}
/* the gallery: two columns, each picture in its own shape, the newest first */
.dm-igx-gal{display:flex;gap:6px;align-items:flex-start}
.dm-igx-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.dm-igx-g{position:relative;display:block;width:100%;aspect-ratio:var(--dm-ar,1);border-radius:var(--dm-r-sm);overflow:hidden;background:var(--dm-row);cursor:zoom-in;transition:opacity var(--dm-t-fast)}
.dm-igx-g .dm-igx-ly{transform:scale(var(--dm-vz,1));transform-origin:var(--dm-vo,50% 50%);transition:transform .5s var(--dm-ease)}
@media (hover:hover) and (pointer:fine){.dm-igx-g:hover .dm-igx-ly{transform:scale(calc(var(--dm-vz,1) * 1.04))}}
.dm-igx-g:focus-visible{outline-offset:-2px}
.dm-igx-g.dm-new{animation:dm-igxnew .7s var(--dm-ease) both}
@keyframes dm-igxnew{from{opacity:0;filter:blur(8px);transform:translateY(-8px)}to{opacity:1;filter:none;transform:none}}
:root:not([data-style="soft"]) .dm-igx-g.dm-new:not(:where([data-style="soft"],[data-style="soft"] *)){animation:dm-igxwipe var(--dm-t-slow) var(--dm-ease) both}
@keyframes dm-igxwipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
/* the style presets: a picture and what it sets */
.dm-igx-prs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dm-igx-pr{display:flex;flex-direction:column;gap:6px;padding:4px 4px 8px;border-radius:var(--dm-r-in);background:var(--dm-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 100%,transparent);text-align:left;transition:background var(--dm-t-fast),box-shadow var(--dm-t-fast)}
@media (hover:hover) and (pointer:fine){.dm-igx-pr:hover{background:var(--dm-row)}}
.dm-igx-pr[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--dm-faint)}
.dm-igx-prp{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--dm-r-sm);overflow:hidden;background:var(--dm-row)}
.dm-igx-prt{display:flex;flex-direction:column;padding:0 4px;font-size:12.5px;line-height:1.35}
.dm-igx-prt b{font-weight:500;color:var(--dm-fg)}
.dm-igx-prt .dm-muted{font-size:11.5px}
/* the larger view: over the whole component, the picture as large as it fits, with every action */
.dm-igx-lb{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;border-radius:var(--dm-r-card);background:var(--dm-surface);box-shadow:var(--dm-shadow);overflow:hidden}
.dm-igx-lb[hidden]{display:none}
.dm-igx-lb.dm-open{animation:dm-igxlb .42s var(--dm-ease) both}
@keyframes dm-igxlb{from{opacity:0}to{opacity:1}}
.dm-igx-lb.dm-open .dm-igx-lbs>.dm-igx-t{animation:dm-igxlbp .6s var(--dm-ease) both}
@keyframes dm-igxlbp{from{opacity:0;transform:scale(.94);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
:root:not([data-style="soft"]) .dm-igx-lb.dm-open:not(:where([data-style="soft"],[data-style="soft"] *)){animation:dm-igxwipe var(--dm-t-slow) var(--dm-ease) both}
:root:not([data-style="soft"]) .dm-igx-lb.dm-open .dm-igx-lbs>.dm-igx-t:not(:where([data-style="soft"],[data-style="soft"] *)){animation:none}
.dm-igx-lbh{flex:none;display:flex;align-items:center;gap:var(--dm-s-2);min-height:48px;padding:6px var(--dm-s-2) 6px var(--dm-s-4);border-bottom:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent)}
.dm-igx-lbt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.35}
.dm-igx-lbt b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-igx-lbt .dm-muted{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-igx-lbb{flex:1;min-height:0;display:flex;align-items:center;gap:var(--dm-s-2);padding:var(--dm-s-3) var(--dm-s-2)}
.dm-igx-lbs{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;container-type:size}
.dm-igx-lbs>.dm-igx-t{width:min(100cqw,100cqh * var(--dm-ar,1));cursor:default}
.dm-igx-lbn{flex:none;width:32px;padding:0}
@media (hover:hover) and (pointer:fine){.dm-igx-lbn:not(:disabled):hover{background:var(--dm-row)}}
.dm-igx-lbf{flex:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--dm-s-1);padding:var(--dm-s-2) var(--dm-s-3) var(--dm-s-3)}
.dm-igx-lbf .dm-igx-sep{margin:0 var(--dm-s-1)}
.dm-igx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* a narrower feed keeps only the stage in hand beside the title */
@container igx (max-width:780px){.dm-igx-steps span:not(.dm-on){display:none}}
/* between the two, the side gives the pictures a little more room, and a failed picture keeps only its title and Retry */
@container igx (max-width:820px){.dm-igx-in{grid-template-columns:minmax(0,1fr) 212px}.dm-igx-f>span{display:none}}
/* narrower: the gallery and the styles take the feed's place, picked in the header */
@container igx (max-width:620px){
  .dm-igx-in{grid-template-columns:minmax(0,1fr);height:600px}
  .dm-igx-main,.dm-igx-side{grid-area:1/1}
  .dm-igx-side{margin-top:45px;border-radius:0 0 var(--dm-r-card) var(--dm-r-card);box-shadow:none;visibility:hidden}
  .dm-igx-sh{display:none}
  .dm-igx-vw{display:inline-flex}
  .dm-igx-cr{display:none}
  .dm-igx-h{justify-content:space-between;padding-left:var(--dm-s-2)}
  .dm-igx-in:is([data-view="gallery"],[data-view="styles"]) .dm-igx-side{visibility:visible;z-index:2}
  .dm-igx-in:is([data-view="gallery"],[data-view="styles"]) :is(.dm-igx-feed,.dm-igx-cmp){visibility:hidden}
  .dm-igx-steps span:not(.dm-on){display:none}
  .dm-igx-pane{padding:var(--dm-s-3)}
  .dm-igx-gal{gap:var(--dm-s-2)}.dm-igx-col{gap:var(--dm-s-2)}
  .dm-igx-prs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container igx (max-width:440px){
  .dm-igx-in{height:640px}
  .dm-igx-feed{padding:var(--dm-s-3) var(--dm-s-3) var(--dm-s-2)}
  .dm-igx-ask{display:block;white-space:nowrap;text-overflow:ellipsis}
  .dm-igx-sty{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:var(--dm-s-1)}
  .dm-igx-sty::-webkit-scrollbar{display:none}
  .dm-igx-sc{flex:none;padding:0 var(--dm-s-2)}
  .dm-igx-f>span{display:none}
  .dm-igx-cmp{margin:0 var(--dm-s-2) var(--dm-s-2)}
  .dm-igx-steps{display:none}
  .dm-igx-go{width:32px;padding:0}
  .dm-igx-go span{display:none}
  .dm-igx-meta{display:none}
  .dm-igx-prs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dm-igx-lbf .dm-igx-lbl{display:none}
  .dm-igx-lbn{display:none}
}
@container igx (max-width:340px){
  .dm-igx-bar .dm-chip>.dm-i:first-child{display:none}
  .dm-igx-bar .dm-chip{padding:0 var(--dm-s-2)}
}
/* Blueprint: square dots of the picture itself at half strength, a hard scan line in the accent's mark */
:root:not([data-style="soft"]) .dm-igx-t[data-st="gen"] .dm-igx-b:not(:where([data-style="soft"],[data-style="soft"] *)){opacity:.55;-webkit-mask:linear-gradient(90deg,#000 var(--dm-sq,2px),transparent 0) 0 0/var(--dm-cell,12px) var(--dm-cell,12px),linear-gradient(#000 var(--dm-sq,2px),transparent 0) 0 0/var(--dm-cell,12px) var(--dm-cell,12px);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,#000 var(--dm-sq,2px),transparent 0) 0 0/var(--dm-cell,12px) var(--dm-cell,12px),linear-gradient(#000 var(--dm-sq,2px),transparent 0) 0 0/var(--dm-cell,12px) var(--dm-cell,12px);mask-composite:intersect}
:root:not([data-style="soft"]) .dm-igx-t.dm-up .dm-igx-b:not(:where([data-style="soft"],[data-style="soft"] *)){opacity:.45}
:root:not([data-style="soft"]) .dm-igx-l>span:first-child:not(:where([data-style="soft"],[data-style="soft"] *)){height:1px;top:0;background:var(--dm-accent-mark)}
:root:not([data-style="soft"]) .dm-igx-l>span:last-child:not(:where([data-style="soft"],[data-style="soft"] *)){display:none}
:root:not([data-style="soft"]) .dm-igx-t.dm-up .dm-igx-l:not(:where([data-style="soft"],[data-style="soft"] *)),:root:not([data-style="soft"]) .dm-igx-t.dm-up .dm-igx-s:not(:where([data-style="soft"],[data-style="soft"] *)){animation-timing-function:steps(14,end)}
@media (prefers-reduced-motion:reduce){
  .dm-igx .dm-igx-t :is(.dm-igx-b,.dm-igx-n,.dm-igx-l){display:none}
  .dm-igx .dm-igx-t .dm-igx-s{clip-path:none;filter:none;animation:none;transition:opacity .4s}
  .dm-igx .dm-igx-t:is([data-st="wait"],[data-st="gen"],[data-st="fail"]) .dm-igx-s{opacity:0}
  .dm-igx-g.dm-new,.dm-igx-lb.dm-open,.dm-igx-lb.dm-open .dm-igx-lbs>.dm-igx-t{animation:none}
  .dm-igx-sc,.dm-igx-sc .dm-i{transition:none}
}

---
// Generated from designme.dev by scripts/sync.mjs. Edit the site, then sync.
// Image generation: A prompt with styles, shape and count, pictures that resolve out of grain, and a gallery of earlier ones.
// The markup, CSS and script are designme.dev's own, run by the shared core in ../core, which mounts the component when it scrolls
// into view and plays its demo. To show your own data, change image-generation.js. The markup is kept exactly as it is (is:raw).
import type { HTMLAttributes } from 'astro/types';
import '../core/designme.css';
import './image-generation.css';

export interface Props extends HTMLAttributes<'div'> {
  /** "soft" draws it in the Soft style. Leave it out for Blueprint, or for the style set on <html> (data-style="soft") */
  'data-style'?: 'soft';
}
const { class: className, ...rest } = Astro.props;
---
<div class:list={['card', 'wide', className]} data-c="image-generation" {...rest}>
  <div class="stage-in"><Fragment is:raw>
<div class="igx" role="region" aria-label="Image generation">
<div class="igx-in" data-view="create">
  <div class="igx-main" role="group" aria-label="Create">
    <div class="igx-h">
      <span class="igx-cr"><span>Images</span><svg class="i s"><use href="#i-chev-r"/></svg><b>Spring lookbook</b></span>
      <div class="seg2 igx-vw" role="group" aria-label="Show"><button type="button" aria-pressed="true" data-v="create">Create</button><button type="button" aria-pressed="false" data-v="gallery">Gallery</button><button type="button" aria-pressed="false" data-v="styles">Styles</button></div>
    </div>
    <div class="igx-feed">
      <div class="bub igx-ask"></div>
      <div class="igx-empty"><div class="igx-ef" aria-hidden="true"><span><svg class="i s"><use href="#i-image"/></svg></span><span><svg class="i s"><use href="#i-image"/></svg></span><span><svg class="i s"><use href="#i-image"/></svg></span></div><span>Describe a picture and press Generate</span></div>
      <div class="igx-run" hidden>
        <div class="igx-rh">
          <span class="igx-rt"></span>
          <span class="igx-steps" aria-hidden="true"><span data-k="0"><i></i><svg class="i s"><use href="#i-check"/></svg>Composing</span><span data-k="1"><i></i><svg class="i s"><use href="#i-check"/></svg>Adding detail</span><span data-k="2"><i></i><svg class="i s"><use href="#i-check"/></svg>Upscaling</span></span>
          <span class="igx-pc num" aria-hidden="true"></span>
        </div>
        <div class="igx-tiles" role="group" aria-label="Pictures"></div>
        <div class="igx-acts" role="toolbar" aria-label="Rate and copy">
          <button type="button" class="ib igx-up" aria-label="Good pictures" aria-pressed="false" data-tip="Good pictures"><svg class="i s"><use href="#i-up-thumb"/></svg></button>
          <button type="button" class="ib igx-dn" aria-label="Bad pictures" aria-pressed="false" data-tip="Bad pictures"><svg class="i s"><use href="#i-down-thumb"/></svg></button>
          <button type="button" class="ib igx-cp" aria-label="Copy prompt" data-tip="Copy prompt"><svg class="i s"><use href="#i-copy"/></svg></button>
          <span class="igx-meta"></span>
        </div>
      </div>
      <p class="igx-sr" aria-live="polite"></p>
    </div>
    <form class="igx-cmp">
      <div class="igx-refs" role="group" aria-label="References"></div>
      <textarea class="igx-ta" rows="2" aria-label="Prompt" placeholder="Describe the picture you want">Editorial portrait on a bold colour backdrop, studio light</textarea>
      <div class="igx-sty" role="group" aria-label="Styles">
        <button type="button" class="igx-sc" aria-pressed="true" data-s="Editorial"><svg class="i s"><use href="#i-check"/></svg>Editorial</button><button type="button" class="igx-sc" aria-pressed="false" data-s="Poster"><svg class="i s"><use href="#i-check"/></svg>Poster</button><button type="button" class="igx-sc" aria-pressed="false" data-s="Surreal"><svg class="i s"><use href="#i-check"/></svg>Surreal</button><button type="button" class="igx-sc" aria-pressed="false" data-s="35mm"><svg class="i s"><use href="#i-check"/></svg>35mm</button>
      </div>
      <div class="igx-bar">
        <button type="button" class="chip igx-set" aria-haspopup="dialog" aria-expanded="false" data-pop=".igx-pp-set" data-pop-pos="up" data-tip="Shape and number"><svg class="i s"><use href="#i-image"/></svg><span class="igx-set-n">3:4 · 4</span><svg class="i s"><use href="#i-chev-d"/></svg></button>
        <button type="button" class="chip igx-mdl" aria-haspopup="menu" aria-expanded="false" data-pop=".igx-pp-m" data-pop-pos="up" data-tip="Image model"><svg class="i s"><use href="#i-spark"/></svg><span class="igx-mdl-n">Studio 2</span><svg class="i s"><use href="#i-chev-d"/></svg></button>
        <span class="sp"></span>
        <button type="submit" class="pill primary igx-go" aria-label="Generate" data-tip="Generate" data-tip-k="↵"><svg class="i s"><use href="#i-wand"/></svg><span>Generate</span></button>
      </div>
      <div class="pop igx-pp-set" role="dialog" aria-label="Shape and number">
        <div class="ph">Shape</div>
        <div class="seg2 igx-ars" role="group" aria-label="Shape"><button type="button" aria-pressed="false" data-v="1:1">1:1</button><button type="button" aria-pressed="true" data-v="3:4">3:4</button><button type="button" aria-pressed="false" data-v="16:9">16:9</button></div>
        <div class="ph">Pictures</div>
        <div class="seg2 igx-cts" role="group" aria-label="Pictures"><button type="button" aria-pressed="false" data-v="1">1</button><button type="button" aria-pressed="false" data-v="2">2</button><button type="button" aria-pressed="false" data-v="3">3</button><button type="button" aria-pressed="true" data-v="4">4</button></div>
      </div>
      <div class="pop igx-pp-m" role="menu" aria-label="Image model">
        <div class="ph">Image model</div>
        <button type="button" class="mi" role="menuitemradio" aria-checked="true" data-close data-m="0"><svg class="i s"><use href="#i-spark"/></svg><span>Studio 2<span class="d">Most detail, about 6s a picture</span></span><span class="ck"><svg class="i s"><use href="#i-check"/></svg></span></button>
        <button type="button" class="mi" role="menuitemradio" aria-checked="false" data-close data-m="1"><svg class="i s"><use href="#i-bolt"/></svg><span>Studio 2 Fast<span class="d">Quick drafts, about 3s</span></span><span class="ck"><svg class="i s"><use href="#i-check"/></svg></span></button>
        <button type="button" class="mi" role="menuitemradio" aria-checked="false" data-close data-m="2"><svg class="i s"><use href="#i-layers"/></svg><span>Studio 2 HD<span class="d">Twice the size, about 9s</span></span><span class="ck"><svg class="i s"><use href="#i-check"/></svg></span></button>
      </div>
    </form>
  </div>
  <div class="igx-side" role="group" aria-label="Library">
    <div class="igx-sh">
      <div class="seg2 igx-tb" role="group" aria-label="Show"><button type="button" aria-pressed="true" data-v="gallery">Gallery</button><button type="button" aria-pressed="false" data-v="styles">Styles</button></div>
      <span class="sp"></span><span class="muted igx-cn num"></span>
    </div>
    <div class="igx-pane igx-gp" role="group" aria-label="Gallery"><div class="igx-gal"></div></div>
    <div class="igx-pane igx-sp" role="group" aria-label="Style presets" hidden><div class="igx-prs"></div></div>
  </div>
  <div class="igx-lb" role="dialog" aria-modal="true" aria-label="Picture" hidden></div>
</div>
</div>
  </Fragment></div>
</div>
<script>
  import './image-generation.js';
</script>

<div class="card wide" data-c="image-generation">
  <div class="stage-in">
    <div class="igx" role="region" aria-label="Image generation">
    <div class="igx-in" data-view="create">
      <div class="igx-main" role="group" aria-label="Create">
        <div class="igx-h">
          <span class="igx-cr"><span>Images</span><svg class="i s"><use href="#i-chev-r"/></svg><b>Spring lookbook</b></span>
          <div class="seg2 igx-vw" role="group" aria-label="Show"><button type="button" aria-pressed="true" data-v="create">Create</button><button type="button" aria-pressed="false" data-v="gallery">Gallery</button><button type="button" aria-pressed="false" data-v="styles">Styles</button></div>
        </div>
        <div class="igx-feed">
          <div class="bub igx-ask"></div>
          <div class="igx-empty"><div class="igx-ef" aria-hidden="true"><span><svg class="i s"><use href="#i-image"/></svg></span><span><svg class="i s"><use href="#i-image"/></svg></span><span><svg class="i s"><use href="#i-image"/></svg></span></div><span>Describe a picture and press Generate</span></div>
          <div class="igx-run" hidden>
            <div class="igx-rh">
              <span class="igx-rt"></span>
              <span class="igx-steps" aria-hidden="true"><span data-k="0"><i></i><svg class="i s"><use href="#i-check"/></svg>Composing</span><span data-k="1"><i></i><svg class="i s"><use href="#i-check"/></svg>Adding detail</span><span data-k="2"><i></i><svg class="i s"><use href="#i-check"/></svg>Upscaling</span></span>
              <span class="igx-pc num" aria-hidden="true"></span>
            </div>
            <div class="igx-tiles" role="group" aria-label="Pictures"></div>
            <div class="igx-acts" role="toolbar" aria-label="Rate and copy">
              <button type="button" class="ib igx-up" aria-label="Good pictures" aria-pressed="false" data-tip="Good pictures"><svg class="i s"><use href="#i-up-thumb"/></svg></button>
              <button type="button" class="ib igx-dn" aria-label="Bad pictures" aria-pressed="false" data-tip="Bad pictures"><svg class="i s"><use href="#i-down-thumb"/></svg></button>
              <button type="button" class="ib igx-cp" aria-label="Copy prompt" data-tip="Copy prompt"><svg class="i s"><use href="#i-copy"/></svg></button>
              <span class="igx-meta"></span>
            </div>
          </div>
          <p class="igx-sr" aria-live="polite"></p>
        </div>
        <form class="igx-cmp">
          <div class="igx-refs" role="group" aria-label="References"></div>
          <textarea class="igx-ta" rows="2" aria-label="Prompt" placeholder="Describe the picture you want">Editorial portrait on a bold colour backdrop, studio light</textarea>
          <div class="igx-sty" role="group" aria-label="Styles">
            <button type="button" class="igx-sc" aria-pressed="true" data-s="Editorial"><svg class="i s"><use href="#i-check"/></svg>Editorial</button><button type="button" class="igx-sc" aria-pressed="false" data-s="Poster"><svg class="i s"><use href="#i-check"/></svg>Poster</button><button type="button" class="igx-sc" aria-pressed="false" data-s="Surreal"><svg class="i s"><use href="#i-check"/></svg>Surreal</button><button type="button" class="igx-sc" aria-pressed="false" data-s="35mm"><svg class="i s"><use href="#i-check"/></svg>35mm</button>
          </div>
          <div class="igx-bar">
            <button type="button" class="chip igx-set" aria-haspopup="dialog" aria-expanded="false" data-pop=".igx-pp-set" data-pop-pos="up" data-tip="Shape and number"><svg class="i s"><use href="#i-image"/></svg><span class="igx-set-n">3:4 · 4</span><svg class="i s"><use href="#i-chev-d"/></svg></button>
            <button type="button" class="chip igx-mdl" aria-haspopup="menu" aria-expanded="false" data-pop=".igx-pp-m" data-pop-pos="up" data-tip="Image model"><svg class="i s"><use href="#i-spark"/></svg><span class="igx-mdl-n">Studio 2</span><svg class="i s"><use href="#i-chev-d"/></svg></button>
            <span class="sp"></span>
            <button type="submit" class="pill primary igx-go" aria-label="Generate" data-tip="Generate" data-tip-k="↵"><svg class="i s"><use href="#i-wand"/></svg><span>Generate</span></button>
          </div>
          <div class="pop igx-pp-set" role="dialog" aria-label="Shape and number">
            <div class="ph">Shape</div>
            <div class="seg2 igx-ars" role="group" aria-label="Shape"><button type="button" aria-pressed="false" data-v="1:1">1:1</button><button type="button" aria-pressed="true" data-v="3:4">3:4</button><button type="button" aria-pressed="false" data-v="16:9">16:9</button></div>
            <div class="ph">Pictures</div>
            <div class="seg2 igx-cts" role="group" aria-label="Pictures"><button type="button" aria-pressed="false" data-v="1">1</button><button type="button" aria-pressed="false" data-v="2">2</button><button type="button" aria-pressed="false" data-v="3">3</button><button type="button" aria-pressed="true" data-v="4">4</button></div>
          </div>
          <div class="pop igx-pp-m" role="menu" aria-label="Image model">
            <div class="ph">Image model</div>
            <button type="button" class="mi" role="menuitemradio" aria-checked="true" data-close data-m="0"><svg class="i s"><use href="#i-spark"/></svg><span>Studio 2<span class="d">Most detail, about 6s a picture</span></span><span class="ck"><svg class="i s"><use href="#i-check"/></svg></span></button>
            <button type="button" class="mi" role="menuitemradio" aria-checked="false" data-close data-m="1"><svg class="i s"><use href="#i-bolt"/></svg><span>Studio 2 Fast<span class="d">Quick drafts, about 3s</span></span><span class="ck"><svg class="i s"><use href="#i-check"/></svg></span></button>
            <button type="button" class="mi" role="menuitemradio" aria-checked="false" data-close data-m="2"><svg class="i s"><use href="#i-layers"/></svg><span>Studio 2 HD<span class="d">Twice the size, about 9s</span></span><span class="ck"><svg class="i s"><use href="#i-check"/></svg></span></button>
          </div>
        </form>
      </div>
      <div class="igx-side" role="group" aria-label="Library">
        <div class="igx-sh">
          <div class="seg2 igx-tb" role="group" aria-label="Show"><button type="button" aria-pressed="true" data-v="gallery">Gallery</button><button type="button" aria-pressed="false" data-v="styles">Styles</button></div>
          <span class="sp"></span><span class="muted igx-cn num"></span>
        </div>
        <div class="igx-pane igx-gp" role="group" aria-label="Gallery"><div class="igx-gal"></div></div>
        <div class="igx-pane igx-sp" role="group" aria-label="Style presets" hidden><div class="igx-prs"></div></div>
      </div>
      <div class="igx-lb" role="dialog" aria-modal="true" aria-label="Picture" hidden></div>
    </div>
    </div>
  </div>
</div>

/* ---------- Image generation ---------- */
/* a prompt and what it made on the left, earlier pictures and style presets on the right (owner, 5 Nov). Each picture is
   made in three stages, the way an image model works: Composing (a grid of dots in the picture's colours grows out of
   grain), Adding detail (the blur lifts step by step while a scan line sweeps down and leaves the detailed picture behind
   it) and Upscaling (the last softness and grain go). The steps are a model's denoising steps: the picture changes a step
   at a time and eases between them. Every picture moves at its own speed, and one can fail with Retry. Upscale sweeps the
   line down once more over a softened copy. Blueprint never blurs: its dots are square cells, the picture shows through
   them at half strength, and its scan line is the accent's mark. With reduced motion a picture fades in once it is done.
   --dm-ar is a picture's width over its height, --dm-art the gradient of its colours that stands in for it; on a picture being
   made, --dm-dot (Blueprint: --dm-sq) is the size of its dots, --dm-bl the blur, --dm-gr the grain, --dm-sc how far the scan has come and
   --dm-stp how long a step takes */
.card.wide .stage-in:has(>.igx){max-width:900px}
.igx{width:100%;container:igx/inline-size;text-align:left}
.igx-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:var(--dm-s-3);height:572px}
.igx-main,.igx-side{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--dm-surface);border-radius:var(--dm-r-card);box-shadow:var(--dm-shadow);overflow:hidden}
.igx-h{flex:none;display:flex;align-items:center;gap:var(--dm-s-2);height:44px;padding:0 var(--dm-s-2) 0 var(--dm-s-4);border-bottom:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent);font-size:13px}
.igx-cr{flex:1;min-width:0;display:flex;align-items:center;gap:2px;white-space:nowrap;color:var(--dm-muted)}
.igx-cr .i{color:var(--dm-faint);flex:none}
.igx-cr b{min-width:0;font-weight:500;color:var(--dm-fg);overflow:hidden;text-overflow:ellipsis}
.igx-vw{display:none}
/* the feed: the prompt as sent, then what it made */
.igx-feed{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--dm-s-3);padding:var(--dm-s-4) var(--dm-s-4) var(--dm-s-2)}
.igx-ask{flex:none;max-width:88%;font-size:13.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.igx-ask:empty{display:none}
.igx-run{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.igx-run[hidden]{display:none}
.igx-rh{flex:none;display:flex;align-items:center;gap:var(--dm-s-3);min-height:20px;font-size:13px}
.igx-rt{flex:1;min-width:0;display:flex;align-items:center;gap:var(--dm-s-2);white-space:nowrap}
.igx-rt>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.igx-rt .i{color:var(--dm-fg2)}
.igx-rt .spin{width:11px;height:11px;color:var(--dm-fg2)}
/* the three stages and how far the run has come: the stage in hand is ink, the ones done are ticked */
.igx-steps{flex:none;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dm-muted);white-space:nowrap}
.igx-steps span{display:inline-flex;align-items:center;gap:5px;transition:color var(--dm-t-fast)}
.igx-steps i{width:6px;height:6px;border-radius:50%;background:var(--dm-rail);transition:background var(--dm-t-fast)}
.igx-steps .on{color:var(--dm-fg)}
.igx-steps .on i{background:var(--dm-fg2)}
.igx-steps .done{color:var(--dm-fg2)}
.igx-steps .done i{display:none}
.igx-steps .i{display:none;width:12px;height:12px}
.igx-steps .done .i{display:inline-block}
.igx-pc{flex:none;min-width:34px;font-size:12px;color:var(--dm-fg2);text-align:right}
/* the pictures share the room left, as large as their shape and number allow: --dm-cols and --dm-rows are the layout that
   gives each the most room, measured by the script */
.igx-tiles{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:var(--dm-s-2);container-type:size}
.igx-t{position:relative;flex:none;margin:0;width:min(calc((100cqw - (var(--dm-cols,1) - 1) * var(--dm-s-2)) / var(--dm-cols,1)),calc((100cqh - (var(--dm-rows,1) - 1) * var(--dm-s-2)) / var(--dm-rows,1) * var(--dm-ar,1)));aspect-ratio:var(--dm-ar,1);border-radius:var(--dm-r-in);overflow:hidden;isolation:isolate;background:var(--dm-row);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 50%,transparent)}
.igx-o{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit;cursor:zoom-in}
.igx-o:disabled{cursor:default}
.igx-o:focus-visible{outline-offset:-2px}
.igx-ly{position:absolute;inset:0;background-image:var(--dm-art);background-size:cover;background-position:center;pointer-events:none}
/* the base: the picture's colours, soft, seen through the dots while it is composed */
.igx-b{transform:scale(calc(1.14 * var(--dm-vz,1)));transform-origin:var(--dm-vo,50% 50%);filter:blur(var(--dm-bl,18px)) saturate(1.3);opacity:0;transition:filter var(--dm-stp,.2s) linear,opacity .5s var(--dm-ease)}
.igx-t:is([data-st="gen"],[data-st="fail"]) .igx-b{opacity:1}
.igx-t[data-st="gen"] .igx-b{-webkit-mask:radial-gradient(circle,#000 var(--dm-dot,1px),transparent calc(var(--dm-dot,1px) + 1px)) 50% 50%/var(--dm-cell,12px) var(--dm-cell,12px);mask:radial-gradient(circle,#000 var(--dm-dot,1px),transparent calc(var(--dm-dot,1px) + 1px)) 50% 50%/var(--dm-cell,12px) var(--dm-cell,12px)}
.igx-t[data-st="fail"] .igx-b{filter:blur(var(--dm-bl,18px)) grayscale(1);opacity:.55}
/* the detailed picture, uncovered by the scan */
.igx-s{transform:scale(var(--dm-vz,1));transform-origin:var(--dm-vo,50% 50%);clip-path:inset(0 0 calc(100% - var(--dm-sc,1) * 100%) 0);filter:blur(var(--dm-sb,0px));transition:clip-path var(--dm-stp,.2s) linear,filter var(--dm-stp,.2s) linear,opacity .5s var(--dm-ease)}
.igx-t:is([data-st="wait"],[data-st="fail"]) .igx-s{opacity:0}
/* grain, which fades as the picture settles */
.igx-n{position:absolute;inset:0;pointer-events:none;background-image:var(--dm-noise,none);background-size:96px 96px;opacity:var(--dm-gr,0);transition:opacity var(--dm-stp,.2s) linear}
.igx-t:is([data-st="wait"],[data-st="gen"]) .igx-n{animation:igxgr .48s steps(1,end) infinite}
.igx-t[data-st="wait"] .igx-n{opacity:.5}
@keyframes igxgr{0%{background-position:0 0}25%{background-position:-31px 17px}50%{background-position:23px -41px}75%{background-position:-13px -29px}}
/* the scan line: a thin light with a faint wash above it */
.igx-l{position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateY(calc(var(--dm-sc,0) * 100%));transition:transform var(--dm-stp,.2s) linear,opacity .3s}
.igx-l>span{position:absolute;left:0;right:0}
.igx-l>span:first-child{top:-1px;height:2px;background:rgba(255,255,255,.92)}
.igx-l>span:last-child{bottom:100%;height:32px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.22))}
.igx-t[data-st="gen"] .igx-l{opacity:var(--dm-lo,0)}
/* Upscale: the picture softens, and the line sweeps down once leaving it sharp */
.igx-t.up .igx-b{opacity:1;-webkit-mask:none;mask:none;filter:blur(3px);transition:none}
.igx-t.up .igx-s{animation:igxrv 1.6s var(--dm-ease-io) both}
.igx-t.up .igx-l{animation:igxsc 1.6s var(--dm-ease-io) both}
@keyframes igxrv{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes igxsc{from{opacity:1;transform:translateY(0)}88%{opacity:1}to{opacity:0;transform:translateY(100%)}}
/* how far a picture has come, until it is done */
.igx-tp{position:absolute;left:var(--dm-s-2);bottom:var(--dm-s-2);height:20px;padding:0 7px;display:inline-flex;align-items:center;border-radius:var(--dm-r-tag);background:color-mix(in srgb,var(--dm-surface) 90%,transparent);color:var(--dm-fg);font-size:11.5px;font-weight:500;opacity:0;transition:opacity .3s;pointer-events:none}
.igx-t:is([data-st="wait"],[data-st="gen"]) .igx-tp{opacity:1}
.igx-tg{position:absolute;left:6px;top:6px;background:color-mix(in srgb,var(--dm-surface) 90%,transparent);color:var(--dm-fg);pointer-events:none}
.igx-tg:empty{display:none}
/* a picture that failed: what happened and Retry, over its faded colours */
.igx-f{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--dm-s-1);padding:var(--dm-s-2);text-align:center;background:color-mix(in srgb,var(--dm-surface) 84%,transparent);font-size:12px;line-height:1.35;color:var(--dm-fg2)}
.igx-t[data-st="fail"] .igx-f{display:flex}
.igx-f>.i{color:var(--dm-bad)}
.igx-f b{font-size:12.5px;font-weight:500;color:var(--dm-fg)}
.igx-f .pill{margin-top:var(--dm-s-1)}
/* quick actions on a finished picture, under the pointer or the keyboard */
.igx-q{position:absolute;right:6px;bottom:6px;display:flex;gap:2px;padding:2px;border-radius:calc(11px * var(--dm-rk));background:color-mix(in srgb,var(--dm-surface) 94%,transparent);box-shadow:var(--dm-shadow);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity var(--dm-t-fast),transform var(--dm-t-fast) var(--dm-ease)}
.igx-q .ib{width:28px;height:28px}
@media (hover:hover) and (pointer:fine){.igx-t[data-st="done"]:hover .igx-q{opacity:1;transform:none;pointer-events:auto}}
.igx-t[data-st="done"]:is(:focus-within,.hov) .igx-q{opacity:1;transform:none;pointer-events:auto}
/* under the pictures: rate them, copy the prompt, and what made them */
.igx-acts{flex:none;display:flex;align-items:center;gap:2px;min-height:30px;margin-left:-6px}
.igx-acts .ib[aria-pressed="true"],.igx-lb .ib[aria-pressed="true"]{background:var(--dm-chip);color:var(--dm-fg)}
.igx-sep{flex:none;width:1px;height:16px;margin:0 6px;background:color-mix(in srgb,var(--dm-line) 100%,transparent)}
.igx-meta{flex:1;min-width:0;font-size:12px;color:var(--dm-muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* before anything is made */
.igx-empty{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--dm-s-3);font-size:13px;color:var(--dm-muted);text-align:center}
.igx-empty[hidden]{display:none}
.igx-ef{display:flex;gap:var(--dm-s-2)}
.igx-ef span{width:40px;aspect-ratio:3/4;display:grid;place-items:center;border-radius:var(--dm-r-sm);background:var(--dm-row);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 50%,transparent);color:var(--dm-faint)}
.igx-ef span:nth-child(2){transform:translateY(-6px)}
/* the composer: references, the prompt, its styles, and the settings for the run */
.igx-cmp{flex:none;margin:0 var(--dm-s-3) var(--dm-s-3);display:flex;flex-direction:column;border-radius:var(--dm-r-box);background:var(--dm-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-field-line) 50%,transparent);transition:box-shadow var(--dm-t-fast)}
.igx-cmp:focus-within{box-shadow:inset 0 0 0 1px var(--dm-field-line-strong)}
.igx-refs{display:flex;flex-wrap:wrap;gap:6px;padding:10px var(--dm-s-3) 0}
.igx-refs:empty{display:none}
.igx-ref{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 var(--dm-s-1) 0 3px;border-radius:var(--dm-r-tag);background:var(--dm-chip);font-size:12px;color:var(--dm-fg2);white-space:nowrap}
.igx-ref .igx-rp{position:relative;width:20px;height:20px;border-radius:calc(5px * var(--dm-rk));overflow:hidden;background:var(--dm-row)}
.igx-ref .ib{width:20px;height:20px}
.igx-ta{display:block;width:100%;height:58px;border:0;outline:0;resize:none;background:none;color:var(--dm-fg);font:inherit;font-size:14px;line-height:1.45;padding:var(--dm-s-3) var(--dm-s-3) 2px}
.igx-ta::placeholder{color:var(--dm-muted)}
.igx-sty{display:flex;flex-wrap:wrap;gap:6px;padding:6px var(--dm-s-3) 0}
/* a style chip is a white tile with a dimmed edge; picked, its edge steps up and a tick slides in */
.igx-sc{display:inline-flex;align-items:center;gap:0;height:26px;padding:0 10px;border-radius:var(--dm-r-tag);background:var(--dm-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 100%,transparent);font-size:12.5px;color:var(--dm-fg2);white-space:nowrap;transition:background var(--dm-t-fast),color var(--dm-t-fast),box-shadow var(--dm-t-fast),gap var(--dm-t) var(--dm-ease)}
.igx-sc .i{width:0;opacity:0;transition:width var(--dm-t) var(--dm-ease),opacity var(--dm-t-fast)}
@media (hover:hover) and (pointer:fine){.igx-sc:hover{background:var(--dm-row);color:var(--dm-fg)}}
.igx-sc[aria-pressed="true"]{gap:5px;color:var(--dm-fg);box-shadow:inset 0 0 0 1px var(--dm-faint)}
.igx-sc[aria-pressed="true"] .i{width:12px;opacity:1}
.igx-sc.hl{background:var(--dm-row)}
.igx-bar{display:flex;align-items:center;gap:var(--dm-s-1);padding:var(--dm-s-2) var(--dm-s-2) var(--dm-s-2) 6px}
.igx-bar .chip{height:32px;padding:0 10px;gap:6px;background:none;min-width:0;font-size:13px;color:var(--dm-fg2)}
.igx-bar .chip[aria-expanded="true"]{background:var(--dm-row);color:var(--dm-fg)}
@media (hover:hover) and (pointer:fine){.igx-bar .chip:hover{background:var(--dm-row);color:var(--dm-fg)}}
.igx-bar .chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.igx-bar .chip>.i:last-child{color:var(--dm-muted)}
.igx-bar .sp{flex:1}
.igx-go{flex:none}
/* the settings: shape and how many, two switches in a small panel */
.igx-pp-set{min-width:236px;padding:var(--dm-s-2) 10px 10px}
.igx-pp-set .ph{padding:var(--dm-s-1) 0 6px}
.igx-pp-set .seg2{display:flex;margin-bottom:var(--dm-s-1)}
.igx-pp-set .seg2 button{flex:1}
/* the side: earlier pictures and style presets */
.igx-sh{flex:none;display:flex;align-items:center;gap:var(--dm-s-2);height:44px;padding:0 var(--dm-s-2);border-bottom:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent)}
.igx-sh .sp{flex:1}
.igx-sh .muted{font-size:12px;padding-right:6px}
.igx-pane{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:var(--dm-s-2)}
.igx-pane[hidden]{display:none}
.igx-pane:focus-visible{outline-offset:-2px}
/* the gallery: two columns, each picture in its own shape, the newest first */
.igx-gal{display:flex;gap:6px;align-items:flex-start}
.igx-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.igx-g{position:relative;display:block;width:100%;aspect-ratio:var(--dm-ar,1);border-radius:var(--dm-r-sm);overflow:hidden;background:var(--dm-row);cursor:zoom-in;transition:opacity var(--dm-t-fast)}
.igx-g .igx-ly{transform:scale(var(--dm-vz,1));transform-origin:var(--dm-vo,50% 50%);transition:transform .5s var(--dm-ease)}
@media (hover:hover) and (pointer:fine){.igx-g:hover .igx-ly{transform:scale(calc(var(--dm-vz,1) * 1.04))}}
.igx-g:focus-visible{outline-offset:-2px}
.igx-g.new{animation:igxnew .7s var(--dm-ease) both}
@keyframes igxnew{from{opacity:0;filter:blur(8px);transform:translateY(-8px)}to{opacity:1;filter:none;transform:none}}
:root:not([data-style="soft"]) .igx-g.new:not(:where([data-style="soft"],[data-style="soft"] *)){animation:igxwipe var(--dm-t-slow) var(--dm-ease) both}
@keyframes igxwipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
/* the style presets: a picture and what it sets */
.igx-prs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.igx-pr{display:flex;flex-direction:column;gap:6px;padding:4px 4px 8px;border-radius:var(--dm-r-in);background:var(--dm-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 100%,transparent);text-align:left;transition:background var(--dm-t-fast),box-shadow var(--dm-t-fast)}
@media (hover:hover) and (pointer:fine){.igx-pr:hover{background:var(--dm-row)}}
.igx-pr[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--dm-faint)}
.igx-prp{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--dm-r-sm);overflow:hidden;background:var(--dm-row)}
.igx-prt{display:flex;flex-direction:column;padding:0 4px;font-size:12.5px;line-height:1.35}
.igx-prt b{font-weight:500;color:var(--dm-fg)}
.igx-prt .muted{font-size:11.5px}
/* the larger view: over the whole component, the picture as large as it fits, with every action */
.igx-lb{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;border-radius:var(--dm-r-card);background:var(--dm-surface);box-shadow:var(--dm-shadow);overflow:hidden}
.igx-lb[hidden]{display:none}
.igx-lb.open{animation:igxlb .42s var(--dm-ease) both}
@keyframes igxlb{from{opacity:0}to{opacity:1}}
.igx-lb.open .igx-lbs>.igx-t{animation:igxlbp .6s var(--dm-ease) both}
@keyframes igxlbp{from{opacity:0;transform:scale(.94);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
:root:not([data-style="soft"]) .igx-lb.open:not(:where([data-style="soft"],[data-style="soft"] *)){animation:igxwipe var(--dm-t-slow) var(--dm-ease) both}
:root:not([data-style="soft"]) .igx-lb.open .igx-lbs>.igx-t:not(:where([data-style="soft"],[data-style="soft"] *)){animation:none}
.igx-lbh{flex:none;display:flex;align-items:center;gap:var(--dm-s-2);min-height:48px;padding:6px var(--dm-s-2) 6px var(--dm-s-4);border-bottom:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent)}
.igx-lbt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.35}
.igx-lbt b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.igx-lbt .muted{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.igx-lbb{flex:1;min-height:0;display:flex;align-items:center;gap:var(--dm-s-2);padding:var(--dm-s-3) var(--dm-s-2)}
.igx-lbs{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;container-type:size}
.igx-lbs>.igx-t{width:min(100cqw,100cqh * var(--dm-ar,1));cursor:default}
.igx-lbn{flex:none;width:32px;padding:0}
@media (hover:hover) and (pointer:fine){.igx-lbn:not(:disabled):hover{background:var(--dm-row)}}
.igx-lbf{flex:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--dm-s-1);padding:var(--dm-s-2) var(--dm-s-3) var(--dm-s-3)}
.igx-lbf .igx-sep{margin:0 var(--dm-s-1)}
.igx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* a narrower feed keeps only the stage in hand beside the title */
@container igx (max-width:780px){.igx-steps span:not(.on){display:none}}
/* between the two, the side gives the pictures a little more room, and a failed picture keeps only its title and Retry */
@container igx (max-width:820px){.igx-in{grid-template-columns:minmax(0,1fr) 212px}.igx-f>span{display:none}}
/* narrower: the gallery and the styles take the feed's place, picked in the header */
@container igx (max-width:620px){
  .igx-in{grid-template-columns:minmax(0,1fr);height:600px}
  .igx-main,.igx-side{grid-area:1/1}
  .igx-side{margin-top:45px;border-radius:0 0 var(--dm-r-card) var(--dm-r-card);box-shadow:none;visibility:hidden}
  .igx-sh{display:none}
  .igx-vw{display:inline-flex}
  .igx-cr{display:none}
  .igx-h{justify-content:space-between;padding-left:var(--dm-s-2)}
  .igx-in:is([data-view="gallery"],[data-view="styles"]) .igx-side{visibility:visible;z-index:2}
  .igx-in:is([data-view="gallery"],[data-view="styles"]) :is(.igx-feed,.igx-cmp){visibility:hidden}
  .igx-steps span:not(.on){display:none}
  .igx-pane{padding:var(--dm-s-3)}
  .igx-gal{gap:var(--dm-s-2)}.igx-col{gap:var(--dm-s-2)}
  .igx-prs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container igx (max-width:440px){
  .igx-in{height:640px}
  .igx-feed{padding:var(--dm-s-3) var(--dm-s-3) var(--dm-s-2)}
  .igx-ask{display:block;white-space:nowrap;text-overflow:ellipsis}
  .igx-sty{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:var(--dm-s-1)}
  .igx-sty::-webkit-scrollbar{display:none}
  .igx-sc{flex:none;padding:0 var(--dm-s-2)}
  .igx-f>span{display:none}
  .igx-cmp{margin:0 var(--dm-s-2) var(--dm-s-2)}
  .igx-steps{display:none}
  .igx-go{width:32px;padding:0}
  .igx-go span{display:none}
  .igx-meta{display:none}
  .igx-prs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .igx-lbf .igx-lbl{display:none}
  .igx-lbn{display:none}
}
@container igx (max-width:340px){
  .igx-bar .chip>.i:first-child{display:none}
  .igx-bar .chip{padding:0 var(--dm-s-2)}
}
/* Blueprint: square dots of the picture itself at half strength, a hard scan line in the accent's mark */
:root:not([data-style="soft"]) .igx-t[data-st="gen"] .igx-b:not(:where([data-style="soft"],[data-style="soft"] *)){opacity:.55;-webkit-mask:linear-gradient(90deg,#000 var(--dm-sq,2px),transparent 0) 0 0/var(--dm-cell,12px) var(--dm-cell,12px),linear-gradient(#000 var(--dm-sq,2px),transparent 0) 0 0/var(--dm-cell,12px) var(--dm-cell,12px);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,#000 var(--dm-sq,2px),transparent 0) 0 0/var(--dm-cell,12px) var(--dm-cell,12px),linear-gradient(#000 var(--dm-sq,2px),transparent 0) 0 0/var(--dm-cell,12px) var(--dm-cell,12px);mask-composite:intersect}
:root:not([data-style="soft"]) .igx-t.up .igx-b:not(:where([data-style="soft"],[data-style="soft"] *)){opacity:.45}
:root:not([data-style="soft"]) .igx-l>span:first-child:not(:where([data-style="soft"],[data-style="soft"] *)){height:1px;top:0;background:var(--dm-accent-mark)}
:root:not([data-style="soft"]) .igx-l>span:last-child:not(:where([data-style="soft"],[data-style="soft"] *)){display:none}
:root:not([data-style="soft"]) .igx-t.up .igx-l:not(:where([data-style="soft"],[data-style="soft"] *)),:root:not([data-style="soft"]) .igx-t.up .igx-s:not(:where([data-style="soft"],[data-style="soft"] *)){animation-timing-function:steps(14,end)}
@media (prefers-reduced-motion:reduce){
  .igx .igx-t :is(.igx-b,.igx-n,.igx-l){display:none}
  .igx .igx-t .igx-s{clip-path:none;filter:none;animation:none;transition:opacity .4s}
  .igx .igx-t:is([data-st="wait"],[data-st="gen"],[data-st="fail"]) .igx-s{opacity:0}
  .igx-g.new,.igx-lb.open,.igx-lb.open .igx-lbs>.igx-t{animation:none}
  .igx-sc,.igx-sc .i{transition:none}
}

/* the grain over a picture being made: grey specks of mixed strength on a clear square, drawn once and tiled */
let igxNoise = '';
function igxGrain(){
  if (igxNoise) return igxNoise;
  try {
    const n = 96, cv = document.createElement('canvas'); cv.width = cv.height = n;
    const x = cv.getContext('2d'), d = x.createImageData(n, n);
    for (let i = 0; i < d.data.length; i += 4){ const v = Math.random() < .5 ? 20 : 245; d.data[i] = d.data[i + 1] = d.data[i + 2] = v; d.data[i + 3] = 40 + Math.random() * 150; }
    x.putImageData(d, 0, 0); igxNoise = `url("${cv.toDataURL()}")`;
  } catch(e){ igxNoise = 'none'; }
  return igxNoise;
}
DM.def('image-generation', (r, c, card) => {
  r.innerHTML = r.innerHTML.replace(/\{i-([a-z-]+)\}/g, (m, n) => I(n));
  const box = $('.igx-in', r), feed = $('.igx-feed', r), ask = $('.igx-ask', r), empty = $('.igx-empty', r), runEl = $('.igx-run', r);
  const rt = $('.igx-rt', r), stepEls = $$('.igx-steps>span', r), pc = $('.igx-pc', r), tilesEl = $('.igx-tiles', r), meta = $('.igx-meta', r), sr = $('.igx-sr', r);
  const form = $('.igx-cmp', r), ta = $('.igx-ta', r), refsEl = $('.igx-refs', r), go = $('.igx-go', r), setBtn = $('.igx-set', r), mdlBtn = $('.igx-mdl', r);
  const galEl = $('.igx-gal', r), prsEl = $('.igx-prs', r), cn = $('.igx-cn', r), lbEl = $('.igx-lb', r);
  const panes = { gallery:$('.igx-gp', r), styles:$('.igx-sp', r) };
  if (!REDUCE) $('.igx', r).style.setProperty('--dm-noise', igxGrain());
  const esc = t => String(t).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  const say = t => { sr.textContent = t; };

  /* the pictures: words for a screen reader, a gradient of their colours (g) that stands in for each, and their shape (ar,
     width over height). On designme.dev, art/art.js lays the photo of the same name over the gradient: photos from Pexels,
     free under the Pexels License (https://www.pexels.com/license/), credited in art/README.md and never part of an install */
  const PIC = {
    'yellow-wall':{ ar:3/4, g:'linear-gradient(165deg,#ffec2e 0 55%,#f2c94a 70%,#5b80bd)', alt:'A laughing woman in a denim jacket and yellow sunglasses against a bright yellow wall' },
    'green-reach':{ ar:3/4, g:'radial-gradient(circle at 62% 40%,#e2cf3a 0 9%,transparent 17%),linear-gradient(#5aa34c,#3f9b50)', alt:'A man in a green T-shirt and yellow bucket hat reaching towards the camera in front of a green backdrop' },
    'magenta-pose':{ ar:3/4, g:'linear-gradient(140deg,#c534a8,#8a2399 50%,#2b102c)', alt:'A woman in a black strapless dress posing under pink light against a violet backdrop' },
    'white-blazer':{ ar:3/4, g:'radial-gradient(ellipse at 50% 72%,#f3efe8 0 20%,transparent 38%),linear-gradient(#ea6a38,#c9532f)', alt:'A man in a white blazer with black lapels standing against a rust orange wall' },
    'pink-dream':{ ar:4/5, g:'linear-gradient(#cdbbe8,#e6a9cb 55%,#b981c4)', alt:'A dreamlike digital landscape: a pink cloud floating over a lavender field beside a still pink lake' },
    'pink-tower':{ ar:2/3, g:'linear-gradient(90deg,#f6cdb7 0 34%,#3f95c9 34%)', alt:'The corner of a peach building with small windows against a clear blue sky' },
    'pink-window':{ ar:1, g:'radial-gradient(circle at 50% 56%,#5f7d4f 0 7%,transparent 8%),linear-gradient(#eba3ae,#df97a2)', alt:'A single small window with a green frame in a wide pink wall' },
    'clay-loops':{ ar:4/3, g:'radial-gradient(circle at 52% 50%,#e9bb5e 0 11%,transparent 21%),linear-gradient(135deg,#b56fd8,#e28bd2 50%,#7f93a4)', alt:'A 3D render of looping pink clay shapes around a yellow lump on a violet background' },
    'pastel-shapes':{ ar:4/3, g:'radial-gradient(circle at 62% 42%,#ff7f9d 0 11%,transparent 19%),linear-gradient(#e7e4e8,#d7d2de)', alt:'Pastel shapes stacked on light grey: a pink cylinder, a white cube, a lilac sphere and a violet cone' },
    'petal-face':{ ar:3/4, g:'radial-gradient(ellipse at 50% 50%,#e6b59c 0 24%,transparent 44%),linear-gradient(#2f6e6c,#1d4a4a)', alt:'A woman with her eyes closed, rose petals over one eye and green leaves over her mouth, against teal' },
    'retro-room':{ ar:2/3, g:'linear-gradient(#f68fc6,#4fb3f1 42%,#f6a43c 60%,#1b1b1b 82%)', alt:'A man in a sequinned jacket in a clear bubble chair, in a room painted with bright drips above a black and white checkerboard floor' },
    'ribbon-look':{ ar:3/4, g:'linear-gradient(135deg,#ececea,#9dbbdb 45%,#f4c431 68%,#ededeb)', alt:'A woman in pale denim sitting on a white block, wrapped in folded yellow, red and blue paper ribbons' },
    'light-leak':{ ar:4/3, g:'linear-gradient(120deg,#1f160a,#bd722c 45%,#ecc66b 60%,#3b2b17)', alt:'A close-up of a face in shadow with a rainbow of light falling across one eye' },
    'fruit-bowl':{ ar:1, g:'radial-gradient(circle at 50% 74%,#2aa8e2 0 17%,transparent 28%),radial-gradient(circle at 52% 46%,#a02e40 0 21%,transparent 38%),linear-gradient(#0d0d0d,#151515)', alt:'Red apples with green and red grapes in a bright blue bowl against black' },
    'framing-hands':{ ar:3/2, g:'linear-gradient(90deg,#2152c5,#ff6b4e 50%,#c9a8e8)', alt:'A woman in a coral suit framing the camera with her fingers, cobalt curtains and a lilac wall behind her' },
    'yellow-shapes':{ ar:3/2, g:'radial-gradient(ellipse at 50% 72%,#e2c34d 0 17%,transparent 33%),linear-gradient(#2c312e,#1f2321)', alt:'Mustard yellow cubes, cones and cylinders on the floor of a dark green-grey room' }
  };
  const SHAPE = { '1:1':1, '3:4':3 / 4, '16:9':16 / 9 };
  const shapeOf = ar => ({ 1:'1:1', .75:'3:4', .8:'4:5', .667:'2:3', 1.333:'4:3', 1.5:'3:2', 1.778:'16:9' })[Math.round(ar * 1000) / 1000] || '';
  // what each style draws from in this demo (a real model makes new pictures; these are the photos that suit the style)
  const SETS = { Editorial:['yellow-wall', 'green-reach', 'magenta-pose', 'white-blazer'], Poster:['pink-tower', 'pink-window', 'yellow-shapes', 'pastel-shapes'],
    Surreal:['pink-dream', 'petal-face', 'clay-loops', 'light-leak'], '35mm':['light-leak', 'framing-hands', 'fruit-bowl', 'ribbon-look'] };
  // a model's step, in ms: 30 steps make a picture, each picture at its own pace
  const MODELS = [{ n:'Studio 2', ms:200 }, { n:'Studio 2 Fast', ms:95 }, { n:'Studio 2 HD', ms:290 }];
  const PACE = [1, .8, 1.12, .9], STEPS = 30;
  // the style presets, each a picture and the styles it picks
  const PRESETS = [
    { n:'Studio editorial', d:'Bold backdrop, studio light', s:['Editorial'], pic:'framing-hands' },
    { n:'Colour block', d:'Flat colour, strong shapes', s:['Poster'], pic:'pink-tower' },
    { n:'Dreamscape', d:'Soft pastel, impossible places', s:['Surreal'], pic:'pink-dream' },
    { n:'Film portrait', d:'Grain and light leaks', s:['35mm', 'Editorial'], pic:'light-leak' },
    { n:'Soft 3D', d:'Clay forms in pastel light', s:['Surreal', 'Poster'], pic:'clay-loops' },
    { n:'Still life', d:'Objects on black, hard light', s:['35mm'], pic:'fruit-bowl' }
  ];
  let ids = 0;
  const made = (pic, prompt, styles, ar, o = {}) => ({ id:++ids, pic, prompt, styles, ar, vz:1, vo:'50% 50%', up:false, rate:0, ...o });
  // earlier pictures, newest first
  const gallery = [
    made('pink-dream', 'A pink cloud over a lavender field and a still lake', ['Surreal'], 4 / 5),
    made('framing-hands', 'Woman framing the camera with her hands, coral suit, cobalt curtains', ['Editorial'], 3 / 2),
    made('pink-tower', 'Peach building corner against a clear blue sky', ['Poster'], 2 / 3),
    made('petal-face', 'Portrait with rose petals and leaves on the face', ['Surreal'], 3 / 4),
    made('clay-loops', 'Soft clay loops in pink and lilac, 3D', ['Surreal', 'Poster'], 4 / 3),
    made('retro-room', 'A bubble chair in a candy-coloured room, checkerboard floor', ['Poster'], 2 / 3),
    made('pink-window', 'One small window in a pink wall, minimal', ['Poster'], 1),
    made('light-leak', 'Close-up with a rainbow light leak across the eye', ['35mm'], 4 / 3),
    made('ribbon-look', 'Denim look with paper ribbon sculptures, studio', ['Editorial'], 3 / 4),
    made('fruit-bowl', 'Apples and grapes in a blue bowl on black', ['35mm'], 1),
    made('pastel-shapes', 'Pastel geometric shapes stacked on grey', ['Poster'], 4 / 3),
    made('yellow-shapes', 'Yellow geometric solids in a dark room', ['Poster'], 3 / 2)
  ];
  const styles = new Set(['Editorial']), refs = [], used = {};
  let shape = '3:4', count = 4, model = 0, run = null, runs = 0, lb = null;
  // a picture's work goes on under the pointer, as an agent's does: these waits are never held
  const tick = ms => new Promise((res, rej) => { c.t.push(setTimeout(() => c.dead ? rej('stop') : res(), REDUCE ? Math.min(ms, 30) : ms)); });
  const metaOf = img => [shapeOf(img.ar), img.styles.join(', ') || 'No style', img.up ? 'Upscaled 2×' : ''].filter(Boolean).join(' · ');
  const layers = (img, size) => `<span class="igx-ly igx-b" data-pic="${img.pic}"${size}></span><span class="igx-ly igx-s" data-pic="${img.pic}"${size}></span>`;
  const look = img => `--dm-art:${PIC[img.pic].g};--dm-vz:${img.vz};--dm-vo:${img.vo}`;

  /* ---------- the run: the prompt as sent, its pictures, and how far they have come ---------- */
  const busy = () => !!run && run.items.some(t => t.st === 'wait' || t.st === 'gen');
  function paint(t){
    const s = t.el.style, p = t.k / STEPS;
    t.el.dataset.st = t.st;
    if (t.st === 'wait'){ s.setProperty('--dm-sc', 0); s.setProperty('--dm-gr', .5); $('.igx-tp', t.el).textContent = '0%'; }
    if (t.st === 'gen'){
      // Composing: dots of the picture's colours grow out of the grain, a step at a time
      const a = Math.min(1, p / .3), cell = 12;
      s.setProperty('--dm-cell', cell + 'px'); s.setProperty('--dm-dot', (a >= 1 ? cell : 1 + a * 7.5).toFixed(1) + 'px'); s.setProperty('--dm-sq', (a >= 1 ? cell : 2 + a * 9).toFixed(1) + 'px');
      // Adding detail: the blur lifts while the scan line comes down, leaving the detail behind it
      const b = Math.max(0, Math.min(1, (p - .3) / .52)), sc = Math.max(0, Math.min(1, (p - .34) / .46));
      s.setProperty('--dm-bl', (18 - b * 14).toFixed(1) + 'px'); s.setProperty('--dm-sc', sc.toFixed(3)); s.setProperty('--dm-lo', sc > 0 && sc < 1 ? 1 : 0);
      // Upscaling: the last softness and grain go
      const u = Math.max(0, Math.min(1, (p - .8) / .2));
      s.setProperty('--dm-sb', (3 * (1 - u)).toFixed(2) + 'px'); s.setProperty('--dm-gr', (.5 * (1 - p)).toFixed(3));
      $('.igx-tp', t.el).textContent = Math.round(p * 100) + '%';
    }
    if (t.st === 'done'){ s.setProperty('--dm-sc', 1); s.setProperty('--dm-sb', '0px'); s.setProperty('--dm-gr', 0); s.setProperty('--dm-lo', 0); }
    const o = $('.igx-o', t.el), n = run.items.indexOf(t) + 1;
    o.disabled = t.st !== 'done';
    o.setAttribute('aria-label', t.st === 'done' ? `Open picture ${n}: ${PIC[t.img.pic].alt}` : `Picture ${n}, ${t.st === 'fail' ? 'failed' : 'being made'}`);
  }
  let said = -1, headKey = '';
  function head(){
    const its = run.items, n = its.length, done = its.filter(t => t.st === 'done').length, bad = its.filter(t => t.st === 'fail').length, going = busy();
    const live = its.filter(t => t.st !== 'fail'), p = live.length ? live.reduce((a, t) => a + (t.st === 'done' ? 1 : t.k / STEPS), 0) / live.length : 0;
    const ph = !going ? 3 : p < .3 ? 0 : p < .8 ? 1 : 2;
    stepEls.forEach((el, k) => { el.className = k < ph ? 'done' : k === ph ? 'on' : ''; });
    pc.textContent = going ? Math.round(p * 100) + '%' : '';
    const pics = n === 1 ? 'picture' : `${n} pictures`;
    const key = going ? `g${n}` : bad ? `b${done}/${bad}` : `d${n}`;
    if (key !== headKey){
      headKey = key;
      rt.innerHTML = going ? `<span class="spin" aria-hidden="true"></span><span>Generating ${pics}</span>`
        : bad ? `${I('alert')}<span>${done} of ${n} ready, ${bad} failed</span>`
        : `${I('image')}<span>${n === 1 ? 'Picture' : pics[0].toUpperCase() + pics.slice(1)} ready in ${Math.max(1, Math.round((performance.now() - run.t0) / 1000))}s</span>`;
    }
    // said politely as each stage starts and once the run is through, never every step
    if (ph !== said){ said = ph; say(ph < 3 ? `${['Composing', 'Adding detail', 'Upscaling'][ph]}, ${pics}` : bad ? `${done} of ${n} ready, ${bad} failed. Retry is on the failed one` : `${n === 1 ? 'Picture' : pics} ready`); }
    go.dataset.tip = going ? 'Generating' : 'Generate'; canGo();
  }
  function fit(){
    if (!run) return;
    const W = tilesEl.clientWidth, H = tilesEl.clientHeight, n = run.items.length, g = 8; let best = [1, 1, -1, n];
    // the largest pictures win; between layouts that give the same size, the one with no gap in its last row, then the wider
    for (let cols = 1; cols <= n; cols++){
      const rows = Math.ceil(n / cols), w = Math.min((W - (cols - 1) * g) / cols, (H - (rows - 1) * g) / rows * run.ar), gap = cols * rows - n;
      if (w > best[2] + .5 || (w > best[2] - .5 && gap <= best[3])) best = [cols, rows, w, gap];
    }
    tilesEl.style.setProperty('--dm-cols', best[0]); tilesEl.style.setProperty('--dm-rows', best[1]);
  }
  const ro = new ResizeObserver(fit); ro.observe(tilesEl); c.offs.push(() => ro.disconnect());
  function draw(){
    ask.textContent = run.prompt; empty.hidden = true; runEl.hidden = false;
    meta.textContent = `${MODELS[run.model].n} · ${shapeOf(run.ar)} · ${run.styles.join(', ') || 'No style'}`;
    $$('.igx-acts [aria-pressed]', r).forEach(b => b.setAttribute('aria-pressed', 'false'));
    tilesEl.innerHTML = run.items.map((t, i) => `<figure class="igx-t" data-st="wait" style="--dm-ar:${run.ar};${look(t.img)}">
      <button type="button" class="igx-o" aria-haspopup="dialog" disabled>${layers(t.img, '')}<span class="igx-n"></span><span class="igx-l"><span></span><span></span></span></button>
      <span class="tag igx-tg"></span><span class="igx-tp num" aria-hidden="true">0%</span>
      <div class="igx-f">${I('alert')}<b>Couldn't finish</b><span>The model timed out</span><button type="button" class="pill line sm" data-a="retry" aria-label="Retry picture ${i + 1}">${I('refresh', 'xs')}Retry</button></div>
      <div class="igx-q"><button type="button" class="ib" data-a="vary" aria-label="Vary picture ${i + 1}" data-tip="Vary">${I('layers')}</button><button type="button" class="ib" data-a="upscale" aria-label="Upscale picture ${i + 1}" data-tip="Upscale">${I('max')}</button><button type="button" class="ib" data-a="download" aria-label="Download picture ${i + 1}" data-tip="Download">${I('down')}</button></div>
    </figure>`).join('');
    $$('.igx-t', tilesEl).forEach((el, i) => { run.items[i].el = el; paint(run.items[i]); });
    headKey = ''; said = -1; fit(); head();
  }
  async function make(t, rn){
    t.st = 'gen'; t.el.style.setProperty('--dm-stp', t.ms + 'ms'); paint(t); head();
    while (t.k < STEPS){
      await tick(t.ms); if (rn !== run) return;
      t.k++;
      if (t.failAt && t.k === t.failAt){ t.failAt = 0; t.st = 'fail'; paint(t); head(); return; }
      paint(t); head();
    }
    t.st = 'done'; t.el.style.setProperty('--dm-stp', '450ms'); paint(t); head();
    // a finished picture joins the gallery, at the top
    t.img.fresh = true; gallery.unshift(t.img); drawGallery();
  }
  function start(o){
    closePops(); closeLB(false);
    const st = o.styles, first = st[0] || 'Editorial', set = SETS[first];
    const off = used[first] || 0; if (!o.pics) used[first] = off + o.count;
    run = { id:++runs, prompt:o.prompt, styles:st, ar:o.ar, model, t0:performance.now(), items:[] };
    for (let i = 0; i < o.count; i++){
      const pic = o.pics ? o.pics[i] : set[(off + i) % set.length];
      // the demo's first run loses its third picture partway, to show Retry
      run.items.push({ img:made(pic, o.prompt, st, o.ar, o.look), st:'wait', k:0, ms:MODELS[model].ms * PACE[i % 4], failAt:run.id === 1 && i === 2 ? 17 : 0 });
    }
    draw();
    const rn = run;
    rn.items.forEach((t, i) => c.run(async () => { await tick(260 + i * 180); if (rn === run) await make(t, rn); }));
  }
  function generate(){
    const prompt = ta.value.trim(); if (!prompt || busy()) return;
    start({ prompt, styles:[...styles], ar:SHAPE[shape], count });
  }
  function retry(t){ t.k = 0; t.st = 'wait'; paint(t); head(); say(`Making picture ${run.items.indexOf(t) + 1} again`); const rn = run; c.run(async () => { await tick(200); if (rn === run) await make(t, rn); }); }
  // a variation keeps the picture and moves in on another part of it
  const CROPS = ['30% 35%', '70% 40%', '45% 70%', '60% 25%'];
  function vary(img){
    say('Making a variation');
    start({ prompt:img.prompt, styles:img.styles, ar:img.ar, count:1, pics:[img.pic], look:{ vz:1.22, vo:CROPS[(img.id + runs) % CROPS.length] } });
  }
  /* Upscale: wherever the picture shows (its tile, the larger view) the line sweeps down once and leaves it sharp */
  function upscale(img){
    const els = [...(run ? run.items.filter(t => t.img === img).map(t => t.el) : []), ...(lb && lb.img === img ? [$('.igx-lbs>.igx-t', lbEl)] : [])].filter(Boolean);
    els.forEach(el => { el.classList.remove('up'); void el.offsetWidth; el.classList.add('up'); });
    say('Upscaling');
    c.run(async () => {
      await tick(1700); img.up = true; els.forEach(el => { el.classList.remove('up'); const tg = $('.igx-tg', el); if (tg) tg.textContent = '2×'; });
      if (lb && lb.img === img) $('.igx-lbt .muted', lbEl).textContent = metaOf(img);
      say('Upscaled to twice the size');
    });
  }
  // on designme.dev a picture has a file to save (the photo art.js laid over it); an installed demo only has its gradient
  function download(img, btn, from){
    const lay = from && $('.igx-s', from), url = lay && (getComputedStyle(lay).backgroundImage.match(/url\("?([^")]+)"?\)/) || [])[1];
    if (url){ const a = document.createElement('a'); a.href = url; a.download = img.pic + '.webp'; document.body.appendChild(a); a.click(); a.remove(); }
    flash(btn, url ? 'Downloading' : 'No file in this demo');
  }
  function flash(btn, label){
    const use = $('use', btn), was = btn._fl || (btn._fl = { tip:btn.dataset.tip, href:use && use.getAttribute('href') });
    clearTimeout(was.t); if (use) use.setAttribute('href', was.href.replace(/-[a-z-]+$/, '-check')); btn.dataset.tip = label; showTip(btn); say(label);
    was.t = setTimeout(() => { if (use) use.setAttribute('href', was.href); if (was.tip === undefined) delete btn.dataset.tip; else btn.dataset.tip = was.tip; if (tipFor === btn) hideTip(true); }, 1600);
  }
  function reference(img, mine){
    if (!refs.includes(img)){ if (refs.length >= 3) refs.shift(); refs.push(img); }
    drawRefs(); say('Added as a reference'); if (mine) ta.focus({ preventScroll:true });
  }
  function drawRefs(){
    refsEl.innerHTML = refs.map((img, i) => `<span class="igx-ref" style="${look(img)}"><span class="igx-rp"><span class="igx-ly" data-pic="${img.pic}" data-pic-size="s"></span></span>Reference ${i + 1}<button type="button" class="ib" data-i="${i}" aria-label="Remove reference ${i + 1}" data-tip="Remove">${I('x', 'xs')}</button></span>`).join('');
  }
  c.on(refsEl, 'click', e => { const b = e.target.closest('[data-i]'); if (!b) return; refs.splice(+b.dataset.i, 1); drawRefs(); say('Reference removed'); if (e.isTrusted) ta.focus({ preventScroll:true }); });
  c.on(tilesEl, 'click', e => {
    const fig = e.target.closest('.igx-t'), t = run && run.items.find(x => x.el === fig); if (!t) return;
    const a = e.target.closest('[data-a]');
    if (!a){ if (e.target.closest('.igx-o') && t.st === 'done') openLB(run.items.filter(x => x.st === 'done').map(x => x.img), t.img, e.target.closest('.igx-o'), e.isTrusted); return; }
    ({ retry:() => retry(t), vary:() => vary(t.img), upscale:() => upscale(t.img), download:() => download(t.img, a, fig) })[a.dataset.a]();
  });
  const rateBtns = { up:$('.igx-acts .igx-up', r), dn:$('.igx-acts .igx-dn', r) };
  const rate = (k, btns, set) => { const on = btns[k].getAttribute('aria-pressed') !== 'true'; Object.entries(btns).forEach(([j, b]) => b.setAttribute('aria-pressed', j === k && on)); set(on ? (k === 'up' ? 1 : -1) : 0); say(on ? (k === 'up' ? 'Marked as good' : 'Marked as bad') : 'Rating removed'); };
  rateBtns.up.onclick = () => rate('up', rateBtns, v => { if (run) run.rate = v; });
  rateBtns.dn.onclick = () => rate('dn', rateBtns, v => { if (run) run.rate = v; });
  $('.igx-acts .igx-cp', r).onclick = e => run && copied(e.currentTarget, run.prompt, 'Prompt copied');

  /* ---------- the composer ---------- */
  const chips = $$('.igx-sc', r);
  function drawStyles(changed){
    chips.forEach(b => { const on = styles.has(b.dataset.s); b.setAttribute('aria-pressed', on); if (changed && changed.includes(b.dataset.s)){ b.classList.remove('hl'); void b.offsetWidth; b.classList.add('hl'); c.later(700, () => b.classList.remove('hl')); } });
    const same = p => p.s.length === styles.size && p.s.every(x => styles.has(x));
    $$('.igx-pr', prsEl).forEach((b, i) => b.setAttribute('aria-pressed', same(PRESETS[i])));
  }
  chips.forEach(b => b.onclick = () => { const s = b.dataset.s; styles.has(s) ? styles.delete(s) : styles.add(s); drawStyles(); });
  const setN = $('.igx-set-n', r), mdlN = $('.igx-mdl-n', r);
  const label = () => { setN.textContent = `${shape} · ${count}`; setBtn.setAttribute('aria-label', `Shape ${shape}, ${count === 1 ? '1 picture' : count + ' pictures'}`); };
  seg($('.igx-ars', r), v => { shape = v; label(); });
  seg($('.igx-cts', r), v => { count = +v; label(); });
  label();
  $$('.igx-pp-m .mi', r).forEach(b => b.addEventListener('click', () => { model = +b.dataset.m; $$('.igx-pp-m .mi', r).forEach(x => x.setAttribute('aria-checked', x === b)); mdlN.textContent = MODELS[model].n; }));
  const canGo = () => { go.disabled = !ta.value.trim() || busy(); };
  c.on(ta, 'input', canGo);
  c.on(ta, 'keydown', e => { if (e.key === 'Enter' && !e.shiftKey && !e.isComposing){ e.preventDefault(); generate(); } });
  c.on(form, 'submit', e => { e.preventDefault(); generate(); });

  /* ---------- the side: the gallery, newest first, and the style presets ---------- */
  function drawGallery(){
    const was = document.activeElement && galEl.contains(document.activeElement) ? document.activeElement.dataset.id : null;
    // two columns: each picture goes under the shorter one, so the columns end close together
    const cols = [[], []], h = [0, 0];
    gallery.forEach(img => { const k = h[0] <= h[1] ? 0 : 1; cols[k].push(img); h[k] += 1 / img.ar + .06; });
    galEl.innerHTML = cols.map(col => `<div class="igx-col">${col.map(img => `<button type="button" class="igx-g${img.fresh ? ' new' : ''}" data-id="${img.id}" aria-haspopup="dialog" aria-label="${esc(PIC[img.pic].alt)}" style="--dm-ar:${img.ar};${look(img)}"><span class="igx-ly" data-pic="${img.pic}" data-pic-size="s"></span></button>`).join('')}</div>`).join('');
    gallery.forEach(img => { img.fresh = false; });
    cn.textContent = gallery.length;
    if (was){ const b = $(`[data-id="${was}"]`, galEl); if (b) b.focus({ preventScroll:true }); }
  }
  c.on(galEl, 'click', e => { const b = e.target.closest('.igx-g'); if (!b) return; const img = gallery.find(x => x.id === +b.dataset.id); if (img) openLB([...gallery], img, b, e.isTrusted); });
  prsEl.innerHTML = PRESETS.map(p => `<button type="button" class="igx-pr" aria-pressed="false" style="--dm-art:${PIC[p.pic].g}"><span class="igx-prp"><span class="igx-ly" data-pic="${p.pic}" data-pic-size="s"></span></span><span class="igx-prt"><b>${p.n}</b><span class="muted">${p.d}</span></span></button>`).join('');
  $$('.igx-pr', prsEl).forEach((b, i) => b.onclick = () => {
    const p = PRESETS[i], before = new Set(styles);
    styles.clear(); p.s.forEach(x => styles.add(x));
    drawStyles(['Editorial', 'Poster', 'Surreal', '35mm'].filter(x => before.has(x) !== styles.has(x)));
    say(`${p.n}: ${p.s.join(' and ')}`);
    // where the side takes the feed's place, picking a preset goes back to the prompt it changed
    if (getComputedStyle(vw).display !== 'none') view('create');
  });
  const tb = $('.igx-tb', r), vw = $('.igx-vw', r);
  const tbSeg = seg(tb, v => tab(v)), vwSeg = seg(vw, v => view(v));
  function tab(v){ Object.entries(panes).forEach(([k, el]) => { el.hidden = k !== v; }); $$('button', tb).forEach(b => b.setAttribute('aria-pressed', b.dataset.v === v)); tbSeg.place(); }
  function view(v){ box.dataset.view = v; if (v !== 'create') tab(v); $$('button', vw).forEach(b => b.setAttribute('aria-pressed', b.dataset.v === v)); vwSeg.place(); }

  /* ---------- the larger view: the picture as large as it fits, every action, Left and Right for the others ---------- */
  function openLB(list, img, from, mine){
    closePops(); hideTip(true);
    lb = { list, img, from }; drawLB();
    lbEl.hidden = false; lbEl.classList.remove('open'); void lbEl.offsetWidth; lbEl.classList.add('open');
    // the focus moves in only when a person opened it, so the demo never takes it from the page
    if (mine) $('.igx-lbx', lbEl).focus({ preventScroll:true });
  }
  function drawLB(){
    const { list, img } = lb, i = list.indexOf(img), P = PIC[img.pic];
    lbEl.setAttribute('aria-label', `Picture ${i + 1} of ${list.length}`);
    lbEl.innerHTML = `<div class="igx-lbh"><div class="igx-lbt"><b>${esc(img.prompt)}</b><span class="muted">${metaOf(img)}</span></div><span class="muted num">${i + 1} of ${list.length}</span><button type="button" class="ib igx-lbx" aria-label="Close" data-tip="Close" data-tip-k="Esc">${I('x')}</button></div>
      <div class="igx-lbb"><button type="button" class="pill line igx-lbn" data-a="prev" aria-label="Previous picture" data-tip="Previous"${i > 0 ? '' : ' disabled'}>${I('chev-l')}</button>
      <div class="igx-lbs"><figure class="igx-t" data-st="done" style="--dm-ar:${img.ar};${look(img)}">${layers(img, '')}<span class="igx-l" aria-hidden="true"><span></span><span></span></span><span class="tag igx-tg">${img.up ? '2×' : ''}</span></figure></div>
      <button type="button" class="pill line igx-lbn" data-a="next" aria-label="Next picture" data-tip="Next"${i < list.length - 1 ? '' : ' disabled'}>${I('chev-r')}</button></div>
      <div class="igx-lbf" role="toolbar" aria-label="Picture actions">
        <button type="button" class="pill line sm" data-a="upscale" aria-label="Upscale" data-tip="Upscale to twice the size">${I('max', 'xs')}<span class="igx-lbl">Upscale</span></button>
        <button type="button" class="pill line sm" data-a="vary" aria-label="Vary" data-tip="Make a variation">${I('layers', 'xs')}<span class="igx-lbl">Vary</span></button>
        <button type="button" class="pill line sm" data-a="ref" aria-label="Use as reference" data-tip="Use as reference">${I('clip', 'xs')}<span class="igx-lbl">Use as reference</span></button>
        <button type="button" class="pill line sm" data-a="download" aria-label="Download" data-tip="Download">${I('down', 'xs')}<span class="igx-lbl">Download</span></button>
        <span class="igx-sep" aria-hidden="true"></span>
        <button type="button" class="ib" data-a="like" aria-label="Good picture" aria-pressed="${img.rate === 1}" data-tip="Good picture">${I('up-thumb')}</button>
        <button type="button" class="ib" data-a="dislike" aria-label="Bad picture" aria-pressed="${img.rate === -1}" data-tip="Bad picture">${I('down-thumb')}</button>
      </div>`;
    const ss = $('.igx-lbs>.igx-t .igx-s', lbEl); ss.setAttribute('role', 'img'); ss.setAttribute('aria-label', P.alt);
    $('.igx-lbs>.igx-t .igx-b', lbEl).setAttribute('aria-hidden', 'true');
  }
  function step(d){ const i = lb.list.indexOf(lb.img) + d; if (i < 0 || i >= lb.list.length) return; lb.img = lb.list[i]; const f = document.activeElement && document.activeElement.dataset.a; drawLB(); const b = f && $(`[data-a="${f}"]`, lbEl); if (b && !b.disabled) b.focus({ preventScroll:true }); else if (f) $('.igx-lbx', lbEl).focus({ preventScroll:true }); }
  function closeLB(back){
    if (!lb) return; const from = lb.from; lb = null; lbEl.hidden = true; lbEl.classList.remove('open'); lbEl.innerHTML = ''; hideTip(true);
    if (back && from && from.isConnected) from.focus({ preventScroll:true });
  }
  c.on(lbEl, 'click', e => {
    if (!lb) return;
    if (e.target.closest('.igx-lbx')) return closeLB(e.isTrusted);
    const a = e.target.closest('[data-a]'); if (!a) return;
    const img = lb.img, k = a.dataset.a;
    if (k === 'prev') step(-1); else if (k === 'next') step(1);
    else if (k === 'upscale') upscale(img);
    else if (k === 'vary') vary(img);
    else if (k === 'ref'){ closeLB(false); reference(img, e.isTrusted); }
    else if (k === 'download') download(img, a, $('.igx-lbs>.igx-t', lbEl));
    else { const up = k === 'like', on = img.rate !== (up ? 1 : -1); img.rate = on ? (up ? 1 : -1) : 0; $$('[data-a="like"],[data-a="dislike"]', lbEl).forEach(b => b.setAttribute('aria-pressed', b.dataset.a === k && on)); say(on ? (up ? 'Marked as good' : 'Marked as bad') : 'Rating removed'); }
  });
  c.on(lbEl, 'keydown', e => {
    if (!lb) return;
    if (e.key === 'Escape'){ e.preventDefault(); e.stopPropagation(); closeLB(true); return; }
    if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && !e.target.closest('.igx-lbf')){ e.preventDefault(); step(e.key === 'ArrowLeft' ? -1 : 1); return; }
    // the focus stays inside while it is open
    if (e.key === 'Tab'){ const f = $$('button:not(:disabled)', lbEl); const a = f[0], z = f[f.length - 1]; if (e.shiftKey && document.activeElement === a){ e.preventDefault(); z.focus(); } else if (!e.shiftKey && document.activeElement === z){ e.preventDefault(); a.focus(); } }
  });

  drawGallery(); drawStyles(); canGo();

  /* the preview's story: generate four portraits (one fails and is retried), upscale one, open another and use it as a
     reference, then pick a style preset */
  const shown = el => el && el.getClientRects().length && getComputedStyle(el).visibility !== 'hidden';
  c.story(async s => {
    await s.beat(2);
    await s.tap(go);
    await s.until(() => run && !busy()); await s.beat(1.5);
    const bad = run.items.find(t => t.st === 'fail');
    if (bad){ await s.tap($('[data-a="retry"]', bad.el)); await s.until(() => !busy()); await s.beat(1.5); }
    const t2 = run.items[1];
    if (t2){ t2.el.classList.add('hov'); c.taken(() => t2.el.classList.remove('hov')); await s.point($('[data-a="upscale"]', t2.el)); await s.beat(1); await s.tap($('[data-a="upscale"]', t2.el)); await s.beat(4); t2.el.classList.remove('hov'); }
    await s.tap($('.igx-o', run.items[0].el)); await s.beat(3);
    await s.tap($('[data-a="ref"]', lbEl)); await s.beat(2.5);
    const sb = [$('.igx-tb [data-v="styles"]', r), $('.igx-vw [data-v="styles"]', r)].find(shown);
    if (sb){ await s.tap(sb); await s.beat(2); await s.tap($$('.igx-pr', prsEl)[2]); await s.beat(3); }
  });
});