@heyramzi/review 0.0.0-stage → 1.0.2

package/dist/node/core/types.d.ts

@@ -0,0 +1,435 @@
+/** The review contract: one model the page draws, one action union it sends, one adapter a tool implements. */
+/** Where a pass is. `review` means the machine finished and beats are waiting on a person. */
+export type PassState = "todo" | "started" | "review" | "done" | "blocked";
+/**
+ * What clicking a pass opens in the main pane. `none` makes the row a status line, not a button.
+ */
+export type PassView = "transcript" | "beats" | "music" | "handoff" | "none";
+/** How a transcript view marks the words a pass touched. */
+export type TranscriptLens = "read" | "cut" | "moved" | "pace";
+export type Pass = {
+    id: string;
+    label: string;
+    /** A group id from `ReviewModel.groups`. The rail draws one small heading per group. */
+    group: string;
+    state: PassState;
+    view: PassView;
+    /** For `view: "transcript"`: which marks to light up. */
+    lens?: TranscriptLens;
+    /** For `view: "beats"`: which beat kinds this pass owns. Also filters the feedback panel. */
+    kinds?: string[];
+    /** Beats still undecided. Shown as "3 left". */
+    open?: number;
+};
+export type PassGroup = {
+    id: string;
+    label: string;
+};
+/** What a pass did to a stretch of words, drawn by the matching lens. */
+export type LineMark = "cut" | "moved" | "pause";
+export type TranscriptLine = {
+    /** Clock label, "0:18". */
+    at: string;
+    seconds: number;
+    text: string;
+    /** When each word of `text` starts, so a beat pin sits at its own word instead of after the line. */
+    wordSeconds?: number[];
+    marks?: LineMark[];
+};
+export type Paragraph = {
+    at: string;
+    chapter?: string;
+    lines: TranscriptLine[];
+};
+export type BeatState = "proposed" | "changed" | "approved" | "skipped";
+/**
+ * A kind of beat and how it looks. The adapter names them; `tone` picks a theme colour token.
+ */
+export type BeatKind = {
+    id: string;
+    label: string;
+    icon: IconName;
+    tone: Tone;
+};
+/** `radius` is the layer's own corner radius, in the same units as the box. */
+export type LayoutBox = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    role: string;
+    radius?: number;
+    /** A text layer's name, such as "Caption" or "Text 1". */
+    text?: string;
+    /** How far a picture layer zooms into its media, 1 being none. */
+    zoom?: number;
+};
+/** The boxes a layout diagram is drawn from, in the card's own frame. */
+export type LayoutPreview = {
+    w: number;
+    h: number;
+    boxes: LayoutBox[];
+};
+/** One card of a layout pack, as the library draws it. */
+export type LibraryCard = {
+    name: string;
+    group?: string;
+    job?: string;
+    preview: LayoutPreview;
+    /** The plain text the card's spark button copies for an agent. No button without it. */
+    agent?: string;
+    /** A clip (webm with alpha) that fills the card's Media slot, shown as its thumbnail instead of the empty frame. */
+    clip?: string;
+};
+/** One sound of a roster, as the sound library draws it. */
+export type SoundCard = {
+    /** The key everything else uses. The page never shows it. */
+    id: string;
+    /** The plain name the card shows. Equal to `id` when the roster named none, and the card then words the id itself. */
+    name: string;
+    group?: string;
+    /** What the sound is for, in one plain line with no ids or video codes. The roster's own words; none is invented. */
+    job?: string;
+    /** The audio's URL. Absent when no file of the sound exists on this machine. */
+    src?: string;
+    seconds: number;
+    /** The pin's gain times the clip's own level, as the renderer plays it. Null while the level is unmeasured. */
+    gain: number | null;
+    /** The plain text the card's spark button copies for an agent. No button without it. */
+    agent?: string;
+};
+export type BeatOption = {
+    id: string;
+    name: string;
+    kind: "video" | "audio" | "layout" | "image";
+    /** A URL the page can load as is. Adapters resolve paths to URLs, never the page. */
+    src?: string;
+    /** For `kind: "layout"`: the boxes a layout diagram is drawn from. */
+    preview?: LayoutPreview;
+    meta?: string;
+    /** A transparent-background render. The card wears an Alpha tag. */
+    alpha?: boolean;
+};
+export type Beat = {
+    id: string;
+    kind: string;
+    seconds: number;
+    at: string;
+    /** The spoken line the beat sits on. */
+    line: string;
+    options: BeatOption[];
+    state: BeatState;
+    pick?: string;
+    /** Its line is no longer in the cut. Reported, never dropped. */
+    orphaned?: boolean;
+    chat?: boolean;
+    /** Why it has nothing to show yet, e.g. "Rendering". */
+    pending?: string;
+};
+export type Music = {
+    decision: "undecided" | "kept" | "skipped";
+    keep?: string;
+    /** More tracks were asked for and haven't arrived. */
+    more: boolean;
+    options: {
+        id: string;
+        title: string;
+        mood: string;
+        seconds: number;
+        src?: string;
+    }[];
+};
+export type Lane = {
+    id: string;
+    label: string;
+    spans: {
+        from: number;
+        to: number;
+        label?: string;
+        tone?: Tone;
+    }[];
+};
+/** One piece of a take as edit.json holds it, in source seconds. The cut plays the kept ones in this order. */
+export type LiveRange = {
+    source: string;
+    start: number;
+    end: number;
+    kept: boolean;
+};
+/** What the cut pass plays on its own: the edit's ranges and each take's proxy, so a note moves the cut with no render. */
+export type LivePlan = {
+    fps: number;
+    ranges: LiveRange[];
+    sources: Record<string, string>;
+};
+export type Player = {
+    /** The rendered preview. Absent until the first one is made; the cut pass doesn't need it. */
+    src?: string;
+    duration: number;
+    poster?: string;
+    lanes?: Lane[];
+    /** Present for a local edit. The cut pass plays this; every other pass plays `src`. */
+    live?: LivePlan;
+};
+/** Where a point or an area sits on the frame, 0 to 1 from the top left. */
+export type Frame = {
+    x: number;
+    y: number;
+    w?: number;
+    h?: number;
+};
+/**
+ * What a note is about: a beat, a transcript range, a moment of the cut, or the whole video.
+ */
+export type NoteTarget = {
+    kind: "video";
+} | {
+    kind: "beat";
+    beat: string;
+} | {
+    kind: "text";
+    from: string;
+    to: string;
+    quote: string;
+} | {
+    kind: "time";
+    at: number;
+    span?: number;
+    frame?: Frame;
+    anchor?: {
+        source: string;
+        at: number;
+    };
+};
+/**
+ * open → queued → working → answered, then the person ticks it `done`.
+ */
+export type NoteStatus = "open" | "queued" | "working" | "answered" | "done" | "proposal" | "dismissed";
+export type Note = {
+    id: string;
+    target: NoteTarget;
+    text: string;
+    status: NoteStatus;
+    by: "person" | "agent";
+    reply?: string;
+    thread?: {
+        by: "person" | "agent";
+        text: string;
+    }[];
+    /** What the agent that took it says it's doing now. A reply clears it. */
+    working?: {
+        text: string;
+        at: string;
+        agent?: string;
+    };
+    /** The pass this note belongs to, so selecting a pass narrows the panel. Adapters set it. */
+    pass?: string;
+    /** Its moment was cut out of the edit. */
+    orphaned?: boolean;
+    /** Marked true if the note was added from the CLI (chat). */
+    chat?: boolean;
+    /** A failing cut check the studio shows as a note. Only the check clears it, so the page offers no verbs on it. `png` is the filmstrip of its cut, when the check made one. */
+    check?: {
+        png: string | null;
+    };
+    createdAt: string;
+};
+export type Tone = "neutral" | "accent" | "ok" | "warn" | "bad";
+/** Whether an agent is on the other end. Drives the agent dock. */
+export type Session = "offline" | "idle" | "listening";
+/**
+ * Which tool owns the edit. `openscreen` is the experimental backend, and it turns on the
+ * project page's Preview, Sync and Export actions.
+ */
+export type ReviewBackend = "descript" | "local" | "openscreen";
+/** What the renderer says it's doing while it draws a preview or a final. */
+export type RenderProgress = {
+    stage: "preparing";
+} | {
+    stage: "matting";
+    done: number;
+    total: number;
+} | {
+    stage: "rendering";
+    done: number;
+    total: number;
+} | {
+    stage: "encoding";
+    done: number;
+    total: number;
+} | {
+    stage: "finishing";
+};
+/**
+ * Where one render of a video stands. `current` matches the video's inputs, `none` was never made.
+ * `outdated` is a final whose inputs moved since it was made. A preview never sits outdated: it joins the line.
+ * `queued` and `rendering` carry `outdated` when a file already on disk is the one they replace.
+ */
+export type JobStatus = {
+    state: "current";
+} | {
+    state: "none";
+} | {
+    state: "outdated";
+} | {
+    state: "queued";
+    ahead: number;
+    outdated: boolean;
+} | {
+    state: "rendering";
+    elapsedMs: number;
+    expectedMs?: number;
+    progress?: RenderProgress;
+    outdated: boolean;
+} | {
+    state: "failed";
+    stage: "probe" | "render";
+    error: string;
+};
+/** The cut check that follows a preview. Its failing cuts arrive as notes, so the page keeps only the count. */
+export type CheckStatus = {
+    state: "none";
+} | {
+    state: "waiting";
+} | {
+    state: "checking";
+} | {
+    state: "done";
+    checkedAt: string;
+    cuts: number;
+    failing: number;
+} | {
+    state: "error";
+    error: string;
+};
+/** Everything a video is rendering: its preview, its final, the check on the preview and the clips of its beats. */
+export type RenderStatus = {
+    preview: JobStatus;
+    final: JobStatus;
+    /** The take proxies the cut pass plays. Never `current` until every take has one. */
+    live: JobStatus;
+    check: CheckStatus;
+    /** Beat clips not on disk yet, by beat id. */
+    clips: Record<string, "queued" | "rendering" | "failed">;
+};
+/**
+ * Speech the transcript check heard and no model could put words to. The page shows it where it
+ * plays and takes the line a person types; `seconds` is on the cut's clock, `start` and `end` in the take.
+ */
+export type SpeechGap = {
+    source: string;
+    start: number;
+    end: number;
+    /** Where it plays in the cut. A stretch the cut removed sits at the next kept line. */
+    seconds: number;
+    cut?: boolean;
+};
+export type ReviewModel = {
+    id: string;
+    title: string;
+    /** "In Descript", "On this computer". */
+    route: string;
+    /** The tool behind the edit, carried from the edit by the shared model. Absent means the page shows nothing extra. */
+    backend?: ReviewBackend;
+    /** Where "Open in Descript" goes: the project on the web, and the same project through the desktop app's link. Absent for a project that isn't a Descript one. */
+    descript?: {
+        web: string;
+        app: string;
+    };
+    /** The one line the header says about where the video is, e.g. "Reviewing inserts". */
+    status: {
+        tone: Tone;
+        text: string;
+    };
+    groups: PassGroup[];
+    passes: Pass[];
+    kinds: BeatKind[];
+    paragraphs: Paragraph[];
+    beats: Beat[];
+    music?: Music;
+    player?: Player;
+    /** Where the video's preview, final, cut check and clips stand. Absent for tools that don't render. The checks that failed arrive as notes with `check` set. */
+    render?: RenderStatus;
+    /** Speech with no words yet, from the last transcript check. Absent when there is none. */
+    speechGaps?: SpeechGap[];
+    notes: Note[];
+    session: Session;
+    /** The prompt the agent dock copies: pasted into your agent, it plugs that session into this page. */
+    connect?: string;
+    /** The file the model was read from failed its schema. The page shows it with a fix action. */
+    error?: string;
+};
+export type NoteAct = "tick" | "reopen" | "accept" | "dismiss" | "remove";
+export type ReviewAction = {
+    type: "decide";
+    beat: string;
+    state: BeatState;
+    pick?: string;
+} | {
+    type: "music";
+    keep: string;
+} | {
+    type: "music";
+    skip: true;
+} | {
+    type: "music";
+    more: true;
+} | {
+    type: "note";
+    target: NoteTarget;
+    text: string;
+    chat?: boolean;
+    reply?: string;
+} | {
+    type: "note.act";
+    note: string;
+    act: NoteAct;
+} | {
+    type: "note.reply";
+    note: string;
+    text: string;
+} | {
+    type: "speech";
+    source: string;
+    start: number;
+    end: number;
+    text: string;
+} | {
+    type: "refresh";
+};
+export type ActionResult = {
+    ok: true;
+    id?: string;
+} | {
+    ok: false;
+    error: string;
+};
+/**
+ * A tool plugs into the review by implementing this on the server, so it never touches a route.
+ */
+export interface ReviewAdapter {
+    /** Build the model for one video. Throw a `ReviewError` for a missing video. */
+    load(id: string): Promise<ReviewModel>;
+    /** Apply one action. Validation of the action's shape has already happened. */
+    act(id: string, action: ReviewAction): Promise<ActionResult>;
+    /** The file on disk behind a media URL the model handed out, or null to refuse it. */
+    media(id: string, file: string): string | null;
+    /** Call `changed` whenever the video's files change. Return the unsubscribe. */
+    watch(id: string, changed: () => void): () => void;
+    /** The shelves the note box's @ picker offers. A pick is written into the note as `[shelf: item id]`. */
+    library?(id: string): Promise<Shelf[]>;
+}
+/** One shelf of reusable media: motion templates, layouts, b-roll, sounds. `src` is a preview URL. */
+export type Shelf = {
+    id: string;
+    label: string;
+    items: {
+        id: string;
+        name: string;
+        src?: string;
+        meta?: string;
+        preview?: LayoutPreview;
+    }[];
+};
+/** Every icon the package draws. One sprite, one stroke weight. */
+export type IconName = "layout" | "motion" | "broll" | "sound" | "music" | "caption" | "zoom" | "note" | "check" | "refresh" | "keys" | "plug" | "panel-left" | "panel-right" | "back" | "x" | "play" | "pause" | "clock" | "span" | "frame" | "quote" | "video" | "trash" | "undo" | "send" | "chevron" | "plus" | "expand" | "minus" | "alert" | "bot" | "sun" | "moon" | "spark" | "info" | "skip-back" | "skip-fwd" | "external";

package/dist/node/core/types.js

@@ -0,0 +1,2 @@
+/** The review contract: one model the page draws, one action union it sends, one adapter a tool implements. */
+export {};

package/dist/node/diagrams/figure.d.ts

@@ -0,0 +1,22 @@
+import type { LayoutBox } from "../core/types.js";
+/**
+ * A bust in head radii: a round head on a short neck, broad rounded shoulders and a torso that
+ * widens to the bottom edge. Head centre at 42% height, grown by the zoom.
+ * Every layer, a cut-out included, draws its figure from its own rect: the keyed person in the render
+ * stands in the cut-out layer's box, so a taller cut-out puts the head above a shorter camera panel.
+ */
+export declare function person(box: LayoutBox): {
+    r: number;
+    cx: number;
+    cy: number;
+    top: number;
+    head: string;
+    body: string;
+    neck: string;
+    chin: {
+        cx: number;
+        cy: number;
+        rx: number;
+        ry: number;
+    };
+};

package/dist/node/diagrams/figure.js

@@ -0,0 +1,29 @@
+/**
+ * A bust in head radii: a round head on a short neck, broad rounded shoulders and a torso that
+ * widens to the bottom edge. Head centre at 42% height, grown by the zoom.
+ * Every layer, a cut-out included, draws its figure from its own rect: the keyed person in the render
+ * stands in the cut-out layer's box, so a taller cut-out puts the head above a shorter camera panel.
+ */
+export function person(box) {
+    const zoom = box.zoom ?? 1;
+    const r = Math.min(box.w * 0.18, box.h * 0.15) * zoom;
+    const cx = box.x + box.w / 2;
+    const cy = box.y + box.h * (0.42 + (zoom - 1) * 0.2);
+    const bottom = box.y + box.h + r;
+    // One point, dx and dy in head radii from the head centre, k = -1 for the left side.
+    const at = (k, dx, dy) => `${cx + k * dx * r} ${cy + dy * r}`;
+    const head = `M${at(1, 0, -1.1)}` +
+        `C${at(1, 0.64, -1.1)} ${at(1, 1.12, -0.62)} ${at(1, 1.12, -0.05)}` +
+        `C${at(1, 1.12, 0.52)} ${at(1, 0.72, 1.12)} ${at(1, 0, 1.12)}` +
+        `C${at(-1, 0.72, 1.12)} ${at(-1, 1.12, 0.52)} ${at(-1, 1.12, -0.05)}` +
+        `C${at(-1, 1.12, -0.62)} ${at(-1, 0.64, -1.1)} ${at(1, 0, -1.1)}Z`;
+    const neck = `M${at(-1, 0.5, 0.6)}L${at(-1, 0.56, 1.6)}H${cx + 0.56 * r}L${at(1, 0.5, 0.6)}Z`;
+    // Neck base, a gentle slope out to a rounded shoulder, then down and out to the bottom edge.
+    const side = (k) => `C${at(k, 1.1, 1.5)} ${at(k, 1.8, 1.6)} ${at(k, 2.2, 1.95)}` +
+        `C${at(k, 2.5, 2.2)} ${at(k, 2.6, 2.6)} ${at(k, 2.65, 3.2)}`;
+    const body = `M${at(-1, 0.56, 1.45)}${side(-1)}L${cx - 2.85 * r} ${bottom}H${cx + 2.85 * r}` +
+        `L${at(1, 2.65, 3.2)}C${at(1, 2.6, 2.6)} ${at(1, 2.5, 2.2)} ${at(1, 2.2, 1.95)}` +
+        `C${at(1, 1.8, 1.6)} ${at(1, 1.1, 1.5)} ${at(1, 0.56, 1.45)}Q${at(1, 0, 1.75)} ${at(-1, 0.56, 1.45)}Z`;
+    const chin = { cx, cy: cy + r * 1.0, rx: r * 0.5, ry: r * 0.12 };
+    return { r, cx, cy, top: cy - 1.1 * r, head, body, neck, chin };
+}

package/dist/node/diagrams/placeholder.d.ts

@@ -0,0 +1,21 @@
+/** Descript's empty picture box (fill #0b0b0b, ink #818181, icon 36px, label 23px on a 703px card), sized as fractions of FRAME width. No imports, so Node can load it. */
+export declare const PLACEHOLDER: {
+    readonly fill: "#0b0b0b";
+    readonly ink: "#818181";
+};
+type Placeholder = {
+    /** Where the box sits when it is nested in a bigger SVG. Omit both for a standalone SVG. */
+    x?: number;
+    y?: number;
+    w: number;
+    h: number;
+    /** The box's own corner radius, in the same units as w and h. */
+    radius?: number;
+    /** The card's picker name. Left off, only the icon draws. */
+    label?: string;
+    /** The frame's width in the same units, which everything scales from. */
+    frameW: number;
+};
+/** The SVG markup for one placeholder box. */
+export declare function placeholderSvg({ x, y, w, h, radius, label, frameW }: Placeholder): string;
+export {};

package/dist/node/diagrams/placeholder.js

@@ -0,0 +1,42 @@
+/** Descript's empty picture box (fill #0b0b0b, ink #818181, icon 36px, label 23px on a 703px card), sized as fractions of FRAME width. No imports, so Node can load it. */
+export const PLACEHOLDER = { fill: "#0b0b0b", ink: "#818181" };
+/** Descript's 703px card, measured: icon 36px, label 23px, stroke 2.5px, 32px between them. */
+const ICON = 36 / 703;
+const FONT = 23 / 703;
+const STROKE = 2.5 / 703;
+const GAP = 14 / 703;
+const esc = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+const num = (n) => Math.round(n * 100) / 100;
+/** The SVG markup for one placeholder box. */
+export function placeholderSvg({ x, y, w, h, radius = 0, label, frameW }) {
+    // A small box (the bubble) shrinks the icon to fit; a big one keeps Descript's proportion.
+    const fit = Math.min(1, (Math.min(w, h) * 0.42) / (ICON * frameW));
+    const icon = ICON * frameW * fit;
+    const font = FONT * frameW * fit;
+    const gap = GAP * frameW * fit;
+    const words = label?.trim() ?? "";
+    const textW = words.length * font * 0.56;
+    const showText = words !== "" && textW < w * 0.9 && icon + gap + font * 1.2 < h * 0.8;
+    const showIcon = icon * 1.5 < Math.min(w, h);
+    const rx = Math.min(radius, w / 2, h / 2);
+    const total = showText ? icon + gap + font : icon;
+    const top = (h - total) / 2;
+    const stroke = Math.max(STROKE * frameW * fit, 0.5);
+    // A 24-unit layout icon: a rounded square, a tall left pane, two stacked right panes.
+    const k = icon / 24;
+    const at = `translate(${num((w - icon) / 2)} ${num(top)}) scale(${k.toFixed(5)})`;
+    const line = `fill="none" stroke="${PLACEHOLDER.ink}" stroke-width="${num(stroke / k)}" stroke-linecap="round" stroke-linejoin="round"`;
+    const pos = x === undefined || y === undefined ? "" : ` x="${num(x)}" y="${num(y)}"`;
+    const size = x === undefined
+        ? ` width="100%" height="100%" preserveAspectRatio="none"`
+        : ` width="${num(w)}" height="${num(h)}"`;
+    return (`<svg class="ph"${pos}${size} viewBox="0 0 ${num(w)} ${num(h)}" overflow="hidden">` +
+        `<rect width="${num(w)}" height="${num(h)}" rx="${num(rx)}" fill="${PLACEHOLDER.fill}"/>` +
+        (showIcon
+            ? `<g transform="${at}" ${line}><rect x="2" y="3" width="20" height="18" rx="3.5"/><path d="M10.5 3v18M10.5 12H22"/></g>`
+            : "") +
+        (showIcon && showText
+            ? `<text x="${num(w / 2)}" y="${num(top + icon + gap + font * 0.78)}" text-anchor="middle" font-size="${num(font)}" font-weight="300" font-style="normal" font-family="'DM Sans','Inter',ui-sans-serif,system-ui,sans-serif" fill="${PLACEHOLDER.ink}">${esc(words)}</text>`
+            : "") +
+        `</svg>`);
+}

package/dist/node/index.d.ts

@@ -0,0 +1,4 @@
+export { mountLabs, mountLayoutLibrary, mountReview, mountSoundLibrary, mountStartChoice, type MountOptions, type MountedHost, type MountedReview, type StartChoiceOptions, } from "./mount.js";
+export type * from "./core/types.js";
+export { FEATURES_OFF, hostPost, OPENSCREEN_RELEASES, OPENSCREEN_ROUTES, OPENSCREEN_TESTED_VERSION, gateOpen, isOpenScreen, readFeatures, secondsToMs, type Features, type HostResult, } from "./core/openscreen.js";
+export { progressOf, renderEstimate, type RenderEstimate } from "./core/draft.js";

package/dist/node/index.js

@@ -0,0 +1,3 @@
+export { mountLabs, mountLayoutLibrary, mountReview, mountSoundLibrary, mountStartChoice, } from "./mount.js";
+export { FEATURES_OFF, hostPost, OPENSCREEN_RELEASES, OPENSCREEN_ROUTES, OPENSCREEN_TESTED_VERSION, gateOpen, isOpenScreen, readFeatures, secondsToMs, } from "./core/openscreen.js";
+export { progressOf, renderEstimate } from "./core/draft.js";

package/dist/node/mount.d.ts

@@ -0,0 +1,49 @@
+import { type ReviewClient } from "./client/http.js";
+import type { Features } from "./core/openscreen.js";
+import type { LibraryCard, SoundCard } from "./core/types.js";
+import "../../src/theme/tokens.css";
+import "../../src/theme/base.css";
+export type MountOptions = {
+    /** URL prefix the server handler was created with, e.g. "/review". */
+    base: string;
+    /** The video id. */
+    id: string;
+    /** Where the Back button goes. */
+    backHref?: string;
+    /** The video's width over its height, when the host knows it before anything loads. The skeleton and the players start in that shape, not 16:9. */
+    ratio?: number;
+    /** Swap the HTTP client, for tests. */
+    client?: ReviewClient;
+};
+export type MountedReview = {
+    destroy(): void;
+};
+/** A component a host page mounts on its own, out of the review page's way. */
+export type MountedHost = {
+    destroy(): void;
+};
+/** Draw the review page into `target`. The target should have a height, the page fills it. */
+export declare function mountReview(target: HTMLElement, opts: MountOptions): MountedReview;
+export type StartChoiceOptions = {
+    /** The Descript prompt the card offers, the same line the shelf already says to the agent. */
+    say?: string;
+    /** Read the gate before mounting, so a test can stand in for `/features`. */
+    features?: Features;
+    /** Told the gate, so the host can hide a duplicate prompt when it is on. */
+    onFeatures?: (features: Features) => void;
+};
+/** Draw the "Start with" choice into `target`. The gate off draws nothing at all. */
+export declare function mountStartChoice(target: HTMLElement, opts?: StartChoiceOptions): MountedHost;
+/** Draw every card of a layout pack into `target`, grouped and searchable. */
+export declare function mountLayoutLibrary(target: HTMLElement, opts: {
+    layouts: LibraryCard[];
+}): MountedHost;
+/** Draw every sound of a roster into `target`: playable, grouped and searchable. */
+export declare function mountSoundLibrary(target: HTMLElement, opts: {
+    sounds: SoundCard[];
+}): MountedHost;
+/** Draw the setup page's Labs toggle into `target`. */
+export declare function mountLabs(target: HTMLElement, opts?: {
+    features?: Features;
+    onFeatures?: (features: Features) => void;
+}): MountedHost;

package/dist/node/mount.js

@@ -0,0 +1,63 @@
+import { mount, unmount } from "svelte";
+import { createHttpClient } from "./client/http.js";
+import App from "./ui/App.svelte";
+import Labs from "./ui/Labs.svelte";
+import LayoutLibrary from "./ui/LayoutLibrary.svelte";
+import SoundLibrary from "./ui/SoundLibrary.svelte";
+import StartChoice from "./ui/StartChoice.svelte";
+import { ensureSprite } from "./ui/sprite.js";
+import "../../src/theme/tokens.css";
+import "../../src/theme/base.css";
+/** Draw the review page into `target`. The target should have a height, the page fills it. */
+export function mountReview(target, opts) {
+    ensureSprite();
+    target.replaceChildren();
+    const app = mount(App, {
+        target,
+        props: {
+            client: opts.client ?? createHttpClient({ base: opts.base, id: opts.id }),
+            backHref: opts.backHref ?? "/",
+            ratio: opts.ratio,
+        },
+    });
+    return { destroy: () => void unmount(app) };
+}
+/**
+ * A wrapper carrying `.rv`, because Svelte's mount writes the component's class onto the target, which can't be a host node with its own classes.
+ */
+function rvHost(target) {
+    const host = document.createElement("div");
+    host.className = "rv";
+    target.replaceChildren(host);
+    return host;
+}
+/** Draw the "Start with" choice into `target`. The gate off draws nothing at all. */
+export function mountStartChoice(target, opts = {}) {
+    ensureSprite();
+    const app = mount(StartChoice, {
+        target: rvHost(target),
+        props: { say: opts.say, features: opts.features, onFeatures: opts.onFeatures },
+    });
+    return { destroy: () => void unmount(app) };
+}
+/** Draw every card of a layout pack into `target`, grouped and searchable. */
+export function mountLayoutLibrary(target, opts) {
+    ensureSprite();
+    const app = mount(LayoutLibrary, { target: rvHost(target), props: { layouts: opts.layouts } });
+    return { destroy: () => void unmount(app) };
+}
+/** Draw every sound of a roster into `target`: playable, grouped and searchable. */
+export function mountSoundLibrary(target, opts) {
+    ensureSprite();
+    const app = mount(SoundLibrary, { target: rvHost(target), props: { sounds: opts.sounds } });
+    return { destroy: () => void unmount(app) };
+}
+/** Draw the setup page's Labs toggle into `target`. */
+export function mountLabs(target, opts = {}) {
+    ensureSprite();
+    const app = mount(Labs, {
+        target: rvHost(target),
+        props: { features: opts.features, onFeatures: opts.onFeatures },
+    });
+    return { destroy: () => void unmount(app) };
+}