@namiml/cli 3.4.12-dev.202610051759 → 3.4.12-dev.202610060208

package/dist/render/surface.js

@@ -0,0 +1,377 @@
+/**
+ * A character grid to paint a page into.
+ *
+ * Ink has no z-order and an Ink `Box` carries exactly one background colour, so
+ * a paywall's background layer drew *above* the page, a gradient behind copy
+ * flattened to one colour, and an image could never sit under text. All three
+ * are the same limit. Painting into a grid where **every cell owns its own
+ * colours** removes it: the background is painted first, everything after lands
+ * on top, and each row of a box can take its own colour.
+ *
+ * This module is pure logic — no React, no Ink import. Ink stops being a layout
+ * engine and becomes a printer: `toRows()` hands it one row of like-styled spans
+ * per line.
+ *
+ * Two rules carry the whole thing:
+ *
+ * - `drawText` **keeps the background already in the cell** unless the style
+ *   names one. That is precisely what puts text *over* a fill rather than
+ *   punching a hole through it.
+ * - An image cell whose `fg` or `bg` is `""` means "leave what is underneath" —
+ *   which is what `image.ts` emits for a pixel that is absent or fully
+ *   transparent.
+ *
+ * Every write clips silently at every edge, including negative coordinates and
+ * rectangles that start off-grid: a painter that throws on an overhang would
+ * take the whole page render down with it.
+ */
+import { parseColor, toHex } from "./style.js";
+/**
+ * The marker for the right-hand half of a wide glyph.
+ *
+ * A wide glyph (an emoji, a CJK ideograph) takes **two** columns, so it occupies
+ * two cells: the lead cell carries the glyph and the next one is a continuation
+ * that `toRows()` prints nothing for. That keeps the printed width of a row
+ * exactly equal to `cols`, which is what stops one `👋` from misaligning every
+ * row after it. The alternative — refusing to place a wide glyph at all — would
+ * drop the real Penguin fixture's `👋 This is a list` on the floor.
+ */
+const CONTINUATION = "";
+const GRAPHEMES = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+/**
+ * East Asian Wide and Fullwidth ranges. The emoji test below covers the
+ * pictographic blocks, so this table only has to carry the CJK side; it is the
+ * conventional `wcwidth` set, trimmed to the ranges a paywall could plausibly
+ * contain.
+ */
+const WIDE_RANGES = [
+    [0x1100, 0x115f], // Hangul Jamo initial consonants
+    [0x2e80, 0x303e], // CJK radicals, Kangxi, CJK symbols and punctuation
+    [0x3041, 0x33ff], // Hiragana through CJK compatibility
+    [0x3400, 0x4dbf], // CJK unified ideographs extension A
+    [0x4e00, 0x9fff], // CJK unified ideographs
+    [0xa000, 0xa4cf], // Yi
+    [0xa960, 0xa97f], // Hangul Jamo extended-A
+    [0xac00, 0xd7a3], // Hangul syllables
+    [0xf900, 0xfaff], // CJK compatibility ideographs
+    [0xfe10, 0xfe19], // vertical forms
+    [0xfe30, 0xfe6f], // CJK compatibility forms, small form variants
+    [0xff00, 0xff60], // fullwidth forms
+    [0xffe0, 0xffe6], // fullwidth signs
+    [0x20000, 0x2fffd], // CJK extension B and beyond
+    [0x30000, 0x3fffd],
+];
+/** Text split into grapheme clusters — the unit a terminal cell actually holds. */
+export function graphemes(text) {
+    return Array.from(GRAPHEMES.segment(text), (part) => part.segment);
+}
+/**
+ * How many columns one grapheme occupies: 0 for a control character, 2 for an
+ * emoji with emoji presentation or an East Asian wide character, 1 otherwise.
+ *
+ * A control character is worth zero rather than one, so a stray `\n` in authored
+ * copy does not silently eat a cell.
+ */
+export function cellWidth(grapheme) {
+    const first = grapheme.codePointAt(0);
+    if (first === undefined)
+        return 0;
+    if (first < 0x20 || (first >= 0x7f && first <= 0x9f))
+        return 0;
+    if (first === 0x200b)
+        return 0;
+    // U+FE0F asks for the emoji presentation of an otherwise text-default glyph.
+    if (grapheme.includes("️"))
+        return 2;
+    if (/\p{Emoji_Presentation}/u.test(grapheme))
+        return 2;
+    return WIDE_RANGES.some(([from, to]) => first >= from && first <= to) ? 2 : 1;
+}
+/**
+ * The columns a whole string occupies on screen.
+ *
+ * The one width in the renderer. It used to be three: `layout.ts` counted code
+ * points, `paint.ts` counted columns, and the two disagreed by a factor of two
+ * on CJK — `日本語` was measured as 3 and drawn as 6, so a Japanese paywall was
+ * laid out into half the room its text needed. Measurement and paint agreeing
+ * on where copy wraps is the rule the layout is built on; this is what makes
+ * them agree.
+ */
+export function textColumns(value) {
+    return graphemes(value).reduce((total, glyph) => total + cellWidth(glyph), 0);
+}
+export class Surface {
+    cols;
+    rows;
+    cells;
+    constructor(cols, rows) {
+        this.cols = size(cols);
+        this.rows = size(rows);
+        this.cells = Array.from({ length: this.cols * this.rows }, () => ({ ch: " " }));
+    }
+    /** A copy of one cell, or `undefined` when the coordinates are off the grid. */
+    cellAt(x, y) {
+        const cell = this.at(x, y);
+        return cell ? { ...cell } : undefined;
+    }
+    /**
+     * Copy another surface onto this one at `(x, y)`, **skipping cells it never
+     * painted**.
+     *
+     * This is what lets a footer sit over the page the way an absolutely
+     * positioned one does on the web: where the footer has a fill it covers what
+     * is beneath, and where it has none the page shows through. Replacing whole
+     * rows instead would punch a hole in the page wherever the footer is
+     * transparent.
+     */
+    blit(other, x, y) {
+        for (let row = 0; row < other.rows; row += 1) {
+            for (let col = 0; col < other.cols; col += 1) {
+                const from = other.at(col, row);
+                if (!from || !painted(from))
+                    continue;
+                const to = this.at(x + col, y + row);
+                if (!to)
+                    continue;
+                Object.assign(to, from);
+            }
+        }
+    }
+    /**
+     * Empty a rectangle: no glyph, no colours, as if nothing had been painted.
+     *
+     * This exists for an image the terminal draws itself. Such an image is placed
+     * *below* cells that carry a background colour, so any fill left in its
+     * rectangle — the page's own, a section's — would hide it completely. Clearing
+     * is what lets the picture through, and it is why a button's fill painted
+     * afterwards still covers the picture, exactly as it should.
+     */
+    clearRect(x, y, w, h) {
+        for (let row = 0; row < h; row += 1) {
+            for (let col = 0; col < w; col += 1) {
+                const cell = this.at(x + col, y + row);
+                if (cell)
+                    for (const key of Object.keys(cell))
+                        delete cell[key];
+                if (cell)
+                    cell.ch = " ";
+            }
+        }
+    }
+    /**
+     * Paint a rectangle's background. Cells keep whatever glyph and foreground are
+     * already on them, which is how a fill drawn after its content still sits
+     * behind it.
+     */
+    fillRect(x, y, w, h, bg) {
+        this.fillRectRows(x, y, w, h, () => bg);
+    }
+    /**
+     * Per-row colour, for a gradient: `colorAt(t)` decides each row's background
+     * with `t` running 0 at the top of the rect to 1 at the bottom. A rect one row
+     * tall is sampled at 0. Returning `null` leaves that row untouched, which is
+     * what an unresolvable fill does.
+     *
+     * `t` is measured against the **whole** rect, so a rect whose top is off-grid
+     * keeps its gradient undistorted.
+     */
+    fillRectRows(x, y, w, h, colorAt) {
+        const width = size(w);
+        const height = size(h);
+        if (width === 0 || height === 0)
+            return;
+        for (let row = 0; row < height; row += 1) {
+            const gridY = y + row;
+            if (gridY < 0 || gridY >= this.rows)
+                continue;
+            const bg = colorAt(height === 1 ? 0 : row / (height - 1));
+            if (!bg)
+                continue;
+            for (let col = 0; col < width; col += 1) {
+                const cell = this.at(x + col, gridY);
+                if (cell)
+                    cell.bg = bg;
+            }
+        }
+    }
+    /**
+     * Write text over whatever is beneath it, keeping each cell's existing
+     * background unless `style.bg` names one. `maxWidth` caps the columns written
+     * from `x`; a wide glyph counts as two of them and is never split in half.
+     */
+    drawText(x, y, text, style = {}, maxWidth) {
+        if (y < 0 || y >= this.rows || this.cols === 0)
+            return;
+        const limit = typeof maxWidth === "number" && Number.isFinite(maxWidth) ? Math.max(0, Math.floor(maxWidth)) : null;
+        let used = 0;
+        let col = x;
+        for (const grapheme of graphemes(text)) {
+            const width = cellWidth(grapheme);
+            if (width === 0)
+                continue;
+            if (limit !== null && used + width > limit)
+                return;
+            if (col >= this.cols)
+                return;
+            // Never leave half a wide glyph against the right edge.
+            if (col + width > this.cols)
+                return;
+            if (col >= 0) {
+                this.breakWideAt(col, y);
+                if (width === 2)
+                    this.breakWideAt(col + 1, y);
+                this.write(col, y, grapheme, style);
+                if (width === 2)
+                    this.write(col + 1, y, CONTINUATION, style);
+            }
+            col += width;
+            used += width;
+        }
+    }
+    /**
+     * Half-block image cells, each carrying its own foreground and background. An
+     * empty `fg` or `bg` leaves what is already in the cell, and a cell that is a
+     * blank with neither is skipped entirely — that is `image.ts`'s way of saying
+     * the pixel was absent or fully transparent, so the page shows through.
+     */
+    drawCells(x, y, cells) {
+        cells.forEach((row, rowIndex) => {
+            const gridY = y + rowIndex;
+            if (gridY < 0 || gridY >= this.rows)
+                return;
+            row.forEach((image, colIndex) => {
+                const gridX = x + colIndex;
+                const cell = this.at(gridX, gridY);
+                if (!cell)
+                    return;
+                if (image.ch === " " && image.fg === "" && image.bg === "")
+                    return;
+                this.breakWideAt(gridX, gridY);
+                const fg = parseColor(image.fg);
+                const bg = parseColor(image.bg);
+                cell.ch = image.ch;
+                if (fg)
+                    cell.fg = fg;
+                if (bg)
+                    cell.bg = bg;
+                // An image has no text attributes; anything beneath it loses them.
+                delete cell.bold;
+                delete cell.italic;
+                delete cell.underline;
+                delete cell.dim;
+            });
+        });
+    }
+    /**
+     * One row per line, each a run of like-styled spans — what Ink prints. Adjacent
+     * cells with identical styling merge, so a 44-column row is a handful of spans
+     * rather than 44. A wide glyph's continuation cell contributes nothing, because
+     * the glyph itself already prints two columns wide.
+     */
+    toRows() {
+        const out = [];
+        for (let y = 0; y < this.rows; y += 1) {
+            const spans = [];
+            let current = null;
+            let currentKey = "";
+            for (let x = 0; x < this.cols; x += 1) {
+                const cell = this.cells[y * this.cols + x];
+                if (cell.ch === CONTINUATION)
+                    continue;
+                const key = styleKey(cell);
+                if (current && key === currentKey) {
+                    current.text += cell.ch;
+                    continue;
+                }
+                current = { ...spanStyle(cell), text: cell.ch };
+                currentKey = key;
+                spans.push(current);
+            }
+            out.push(spans);
+        }
+        return out;
+    }
+    at(x, y) {
+        if (!Number.isInteger(x) || !Number.isInteger(y))
+            return undefined;
+        if (x < 0 || y < 0 || x >= this.cols || y >= this.rows)
+            return undefined;
+        return this.cells[y * this.cols + x];
+    }
+    write(x, y, ch, style) {
+        const cell = this.at(x, y);
+        if (!cell)
+            return;
+        const bg = style.bg ?? cell.bg;
+        const next = { ch };
+        if (style.fg)
+            next.fg = style.fg;
+        if (bg)
+            next.bg = bg;
+        if (style.bold)
+            next.bold = true;
+        if (style.italic)
+            next.italic = true;
+        if (style.underline)
+            next.underline = true;
+        if (style.dim)
+            next.dim = true;
+        this.cells[y * this.cols + x] = next;
+    }
+    /**
+     * Clear the other half of any wide glyph that covers this cell, so a write
+     * never leaves an orphaned lead or continuation behind — either of which would
+     * change the row's printed width.
+     */
+    breakWideAt(x, y) {
+        const cell = this.at(x, y);
+        if (!cell)
+            return;
+        if (cell.ch === CONTINUATION) {
+            const lead = this.at(x - 1, y);
+            if (lead)
+                lead.ch = " ";
+            return;
+        }
+        const next = this.at(x + 1, y);
+        if (next && next.ch === CONTINUATION)
+            next.ch = " ";
+    }
+}
+/** A key that changes whenever anything about a cell's styling changes. */
+function styleKey(cell) {
+    return [
+        cell.fg ? toHex(cell.fg) : "",
+        cell.bg ? toHex(cell.bg) : "",
+        cell.bold ? "b" : "",
+        cell.italic ? "i" : "",
+        cell.underline ? "u" : "",
+        cell.dim ? "d" : "",
+    ].join("|");
+}
+/** A cell's styling as the span props Ink takes, with every absent key left off. */
+function spanStyle(cell) {
+    const style = {};
+    if (cell.fg)
+        style.fg = toHex(cell.fg);
+    if (cell.bg)
+        style.bg = toHex(cell.bg);
+    if (cell.bold)
+        style.bold = true;
+    if (cell.italic)
+        style.italic = true;
+    if (cell.underline)
+        style.underline = true;
+    if (cell.dim)
+        style.dim = true;
+    return style;
+}
+function size(value) {
+    if (!Number.isFinite(value) || value <= 0)
+        return 0;
+    return Math.floor(value);
+}
+/** A cell nothing has drawn on: a bare space with no colours of its own. */
+function painted(cell) {
+    return cell.ch !== " " || cell.bg !== undefined || cell.fg !== undefined;
+}

package/dist/render/text.js

@@ -0,0 +1,145 @@
+import { SKU_TEXT_REGEX, SMART_TEXT_PATTERN, VAR_REGEX, getSkuSmartTextValue, productDetail, } from "@namiml/sdk-core";
+const BOLD = "**";
+const ITALIC = "*";
+/**
+ * Core's regexes are module-level and global, and core calls `.exec()` on them,
+ * which leaves `lastIndex` behind. Clone before every use.
+ */
+function clone(pattern) {
+    return new RegExp(pattern.source, pattern.flags);
+}
+/** Splits authored copy into styled segments. `**bold**`, `*italic*`, `[label](url)`. */
+export function parseMarkdown(source) {
+    return merge(parseInline(source, {}));
+}
+/** Replaces the smart-text tokens a string carries, leaving any it cannot resolve in place. */
+export function resolveSmartText(source, deps = {}) {
+    if (!source.includes(SMART_TEXT_PATTERN))
+        return source;
+    let values;
+    const skuValues = () => (values ??= buildSkuValues(deps));
+    return source.replace(clone(VAR_REGEX), (match, token) => {
+        const injected = asText(deps.resolve?.(token));
+        if (injected !== undefined)
+            return injected;
+        const name = skuTokenName(match);
+        if (name === undefined)
+            return match;
+        return asText(skuValues()[name]) ?? match;
+    });
+}
+/** Resolves the smart text, then parses the markdown around it. */
+export function renderable(source, deps) {
+    return parseMarkdown(resolveSmartText(source, deps));
+}
+/**
+ * The `${sku.<name>}` variable name a match carries, or `undefined` when the
+ * token is not a sku token. A `${sku.<name>:<ref>}` token names another sku's
+ * value, which only core's per-sku resolution can answer, so it is reported as
+ * unresolvable and stays visible.
+ */
+function skuTokenName(match) {
+    const parsed = clone(SKU_TEXT_REGEX).exec(match);
+    if (!parsed || parsed[2])
+        return undefined;
+    return parsed[1];
+}
+function buildSkuValues(deps) {
+    const sku = deps.sku;
+    if (!sku)
+        return {};
+    const catalogue = Array.isArray(deps.productDetails) ? deps.productDetails : [];
+    const detail = productDetail(catalogue, sku.sku_ref_id ?? "");
+    // `getSkuSmartTextValue` writes resolved values back into `sku.variables`, so
+    // it gets a copy — a caller's sku must read the same on the second call.
+    const copy = { ...sku, variables: sku.variables ? { ...sku.variables } : undefined };
+    const skus = Array.isArray(deps.skus) ? deps.skus : undefined;
+    return getSkuSmartTextValue(detail, copy, skus);
+}
+/** A token value as display text, or `undefined` when there is nothing to show. */
+function asText(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    const text = Array.isArray(value) ? value.join(", ") : String(value);
+    return text === "" ? undefined : text;
+}
+function parseInline(source, style) {
+    const out = [];
+    let literal = "";
+    let index = 0;
+    const flush = () => {
+        if (literal !== "") {
+            out.push(styled(literal, style));
+            literal = "";
+        }
+    };
+    while (index < source.length) {
+        const link = matchLink(source, index);
+        if (link) {
+            flush();
+            out.push(...parseInline(link.label, { ...style, link: link.url }));
+            index = link.end;
+            continue;
+        }
+        const emphasis = matchEmphasis(source, index);
+        if (emphasis) {
+            flush();
+            out.push(...parseInline(emphasis.inner, { ...style, ...emphasis.style }));
+            index = emphasis.end;
+            continue;
+        }
+        literal += source[index];
+        index += 1;
+    }
+    flush();
+    return out;
+}
+function matchLink(source, index) {
+    if (source[index] !== "[")
+        return null;
+    const close = source.indexOf("]", index + 1);
+    if (close < 0 || source[close + 1] !== "(")
+        return null;
+    const end = source.indexOf(")", close + 2);
+    if (end < 0)
+        return null;
+    return { label: source.slice(index + 1, close), url: source.slice(close + 2, end), end: end + 1 };
+}
+function matchEmphasis(source, index) {
+    const marker = source.startsWith(BOLD, index) ? BOLD : source.startsWith(ITALIC, index) ? ITALIC : null;
+    if (!marker)
+        return null;
+    const from = index + marker.length;
+    const close = source.indexOf(marker, from);
+    // An unmatched — or empty — marker run is authored text, not emphasis.
+    if (close <= from)
+        return null;
+    return {
+        inner: source.slice(from, close),
+        style: marker === BOLD ? { bold: true } : { italic: true },
+        end: close + marker.length,
+    };
+}
+function styled(text, style) {
+    const segment = { text };
+    if (style.bold)
+        segment.bold = true;
+    if (style.italic)
+        segment.italic = true;
+    if (style.link !== undefined)
+        segment.link = style.link;
+    return segment;
+}
+function sameStyle(a, b) {
+    return a.bold === b.bold && a.italic === b.italic && a.link === b.link;
+}
+function merge(segments) {
+    return segments.reduce((out, segment) => {
+        const previous = out[out.length - 1];
+        if (previous && sameStyle(previous, segment))
+            previous.text += segment.text;
+        else
+            out.push(segment);
+        return out;
+    }, []);
+}

package/dist/screens/LaunchScreen.js

@@ -1,20 +1,38 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text, useInput } from "ink";
 import { palette } from "../theme.js";
 import { EventsPane } from "./EventsPane.js";
+import { APPROXIMATION_NOTE, DEFAULT_VIEWPORT, NO_PRODUCTS_NOTE, PageRender, focusablePageNodes, frameCols, hasProductCards, } from "./PageRender.js";
 /**
- * A launched placement: the page outline on one side, what the SDK reported on
- * the other.
+ * A launched placement: the page on one side, what the SDK reported on the
+ * other.
+ *
+ * Two views of the same page share one pane and `t` swaps them. The **render**
+ * (NAM-4548) draws the page the way the paywall looks — authored colours,
+ * authored layout, real images — and is what the screen opens on. The
+ * **outline** (NAM-4542) is the developer's tree: every authored node in source
+ * order, scaffolding and hidden subtrees included, which is what you want when
+ * a paywall renders wrong. Neither replaces the other.
  *
  * Pure presentation plus input — it renders the props it is handed and turns
- * keys into callbacks. The subscriptions, the bus and the focus index live in
- * `src/placements/launch.ts` and `Shell`, so this file can be rendered from a
- * test with nothing configured.
+ * keys into callbacks. The subscriptions, the bus, the view, the focus index
+ * and the scroll offset live in `src/placements/launch.ts` and `Shell`, so this
+ * file can be rendered from a test with nothing configured.
  */
 /** At or above this many columns the two panes sit side by side; below it they stack. */
 export const SIDE_BY_SIDE_MIN_WIDTH = 100;
 /** Columns between the two panes when they sit side by side. */
 const GUTTER = 2;
+/**
+ * Columns the Events pane keeps when the page asks for more.
+ *
+ * `EventRow` spends two on its marker and the rest on a timestamp, the event
+ * name and whatever of the payload fits, so below about this it stops being a
+ * readable log and becomes a column of ellipses.
+ */
+const EVENTS_MIN_WIDTH = 44;
+/** Rows one PgUp / PgDn moves the frame. */
+const SCROLL_STEP = 10;
 /**
  * What the arrows move between: a node the paywall gave an action to, that is
  * actually on screen. The walker already drops `onTap` from a hidden subtree;
@@ -24,6 +42,20 @@ const GUTTER = 2;
 export function focusableNodes(composite) {
     return composite.sections.flatMap((section) => section.nodes).filter((node) => node.onTap && !node.hidden);
 }
+/**
+ * The press the active view's focused node stands for.
+ *
+ * The render model and the outline are different node shapes, and `pressNode`
+ * speaks the outline's. A render node therefore presses as the `onTap` it
+ * carries — which is the only field `pressNode` reads — so both views report
+ * through exactly the same mapper.
+ */
+export function pressableFor(node) {
+    if (!node)
+        return undefined;
+    const onTap = "onTap" in node ? node.onTap : undefined;
+    return { depth: 0, kind: node.kind, onTap };
+}
 function clip(text, max) {
     if (max <= 1 || text.length <= max)
         return text;
@@ -41,23 +73,46 @@ function nodeLine(node) {
         parts.push("· hidden");
     return `${"  ".repeat(node.depth)}${parts.join(" ")}`;
 }
+/**
+ * Why the pane is empty, which both views need and neither may guess at: a flow
+ * has no one page, a paywall that resolved and served nothing is an authoring
+ * question, and a paywall that resolved at all is usually a device mismatch.
+ */
+function PaneNotice({ composite, placement, deviceName }) {
+    if (composite.sections.length > 0)
+        return null;
+    if (placement.kind === "flow") {
+        return _jsx(Text, { dimColor: true, children: "A flow has no one page to outline \u2014 its screens and steps report as flow events in the pane." });
+    }
+    if (composite.unresolved) {
+        return (_jsxs(Text, { dimColor: true, children: ["No paywall for this placement on ", deviceName ? `a ${deviceName}` : "the configured device", " \u2014 it is probably authored for another form factor. Switch device (d on the home screen, or --device) and launch again."] }));
+    }
+    return _jsx(Text, { dimColor: true, children: "Nothing to outline on this page \u2014 the paywall resolved but served no components." });
+}
 function CompositePane({ composite, placement, focused, width, deviceName }) {
-    const empty = composite.sections.length === 0;
-    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Page" }), " ", _jsx(Text, { children: composite.pageName || "—" })] }), empty && placement.kind === "flow" && (_jsx(Text, { dimColor: true, children: "A flow has no one page to outline \u2014 its screens and steps report as flow events in the pane." })), empty && placement.kind !== "flow" && composite.unresolved && (_jsxs(Text, { dimColor: true, children: ["No paywall for this placement on ", deviceName ? `a ${deviceName}` : "the configured device", " \u2014 it is probably authored for another form factor. Switch device (d on the home screen, or --device) and launch again."] })), empty && placement.kind !== "flow" && !composite.unresolved && (_jsx(Text, { dimColor: true, children: "Nothing to outline on this page \u2014 the paywall resolved but served no components." })), composite.sections.map((section) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: section.name }), section.nodes.map((node, index) => {
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Page" }), " ", _jsx(Text, { children: composite.pageName || "—" })] }), _jsx(PaneNotice, { composite: composite, placement: placement, deviceName: deviceName }), composite.sections.map((section) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: section.name }), section.nodes.map((node, index) => {
                         const isFocused = node === focused;
                         return (_jsxs(Text, { dimColor: node.hidden, children: [_jsx(Text, { color: palette.aqua, children: isFocused ? "›" : " " }), " ", _jsx(Text, { bold: isFocused, children: clip(nodeLine(node), Math.max(width - 2, 1)) })] }, `${section.name}-${index}`));
                     })] }, section.name))), composite.truncated > 0 && _jsxs(Text, { dimColor: true, children: ["+", composite.truncated, " more"] })] }));
 }
-export function LaunchScreen({ placement, composite, events, width, paused, expanded, selectedSeq, focusIndex, onPress, onMove, onTogglePause, onClear, onToggleExpand, onBack, notice, deviceName }) {
-    const focusable = focusableNodes(composite);
-    const focused = focusable[focusIndex];
+export function LaunchScreen({ placement, composite, page, caps, events, width, height, viewport, view, paused, expanded, selectedSeq, focusIndex, scrollTop, onPress, onMove, onScroll, onToggleView, onTogglePause, onClear, onToggleExpand, onBack, notice, deviceName }) {
+    const rendering = view === "render";
+    const outlineFocus = focusableNodes(composite)[focusIndex];
+    const renderFocus = focusablePageNodes(page)[focusIndex];
+    const pressable = rendering ? pressableFor(renderFocus) : outlineFocus;
     useInput((input, key) => {
+        if (key.pageUp)
+            return onScroll(-SCROLL_STEP);
+        if (key.pageDown)
+            return onScroll(SCROLL_STEP);
         if (key.upArrow || key.leftArrow)
             return onMove(-1);
         if (key.downArrow || key.rightArrow)
             return onMove(1);
         if (key.return)
-            return void (focused && onPress(focused));
+            return void (pressable && onPress(pressable));
+        if (input === "t")
+            return onToggleView();
         if (input === "p")
             return onTogglePause();
         if (input === "c")
@@ -68,7 +123,23 @@ export function LaunchScreen({ placement, composite, events, width, paused, expa
             return onBack();
     });
     const sideBySide = width >= SIDE_BY_SIDE_MIN_WIDTH;
-    const paneWidth = sideBySide ? Math.floor(width / 2) - 1 : width;
+    const empty = composite.sections.length === 0;
+    // Only a drawn device frame gets to size the pane. The outline and the
+    // empty-state notice are text: they want the columns, and a phone frame's
+    // width would crop their sentences for no reason.
+    const showingFrame = rendering && !empty;
+    // For a frame, ask for exactly what it can use and no more — an even split
+    // starves it on a 120-column terminal and wastes columns on a 200-column one.
+    // The frame is usually limited by its rows rather than its columns, so the
+    // same height budget goes in here, plus two for its own border. The Events
+    // pane keeps its floor either way.
+    const pageRoom = Math.max(1, width - GUTTER - EVENTS_MIN_WIDTH);
+    const evenSplit = Math.floor(width / 2) - 1;
+    const paneWidth = !sideBySide
+        ? width
+        : showingFrame
+            ? Math.min(frameCols(viewport ?? DEFAULT_VIEWPORT, pageRoom - 2, Math.max(height - 4, 1)) + 2, pageRoom)
+            : evenSplit;
     const eventsWidth = sideBySide ? width - paneWidth - GUTTER : width;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: placement.label }), " ", _jsxs(Text, { color: palette.secondaryBlue, children: ["[", placement.kind, "]"] }), placement.campaignName && _jsxs(Text, { dimColor: true, children: [" \u00B7 ", placement.campaignName] })] }), _jsxs(Box, { flexDirection: sideBySide ? "row" : "column", marginTop: 1, children: [_jsx(CompositePane, { composite: composite, placement: placement, focused: focused, width: paneWidth, deviceName: deviceName }), _jsx(Box, { flexDirection: "column", marginLeft: sideBySide ? GUTTER : 0, marginTop: sideBySide ? 0 : 1, children: _jsx(EventsPane, { events: events, selectedSeq: selectedSeq ?? null, paused: paused, expanded: expanded, width: eventsWidth }) })] }), notice && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: palette.coral, children: notice }) })), _jsx(Text, { dimColor: true, children: "\u2191\u2193 move \u00B7 enter press \u00B7 p pause \u00B7 c clear \u00B7 x expand \u00B7 q back" })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: placement.label }), " ", _jsxs(Text, { color: palette.secondaryBlue, children: ["[", placement.kind, "]"] }), placement.campaignName && _jsxs(Text, { dimColor: true, children: [" \u00B7 ", placement.campaignName] })] }), _jsxs(Box, { flexDirection: sideBySide ? "row" : "column", marginTop: 1, children: [rendering ? (_jsx(Box, { flexDirection: "column", width: paneWidth, children: empty ? (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Page" }), " ", _jsx(Text, { children: page.pageName || "—" })] }), _jsx(PaneNotice, { composite: composite, placement: placement, deviceName: deviceName })] })) : (_jsx(PageRender, { page: page, caps: caps, width: paneWidth, height: height, viewport: viewport, focused: renderFocus, scrollTop: scrollTop })) })) : (_jsx(CompositePane, { composite: composite, placement: placement, focused: outlineFocus, width: paneWidth, deviceName: deviceName })), _jsx(Box, { flexDirection: "column", marginLeft: sideBySide ? GUTTER : 0, marginTop: sideBySide ? 0 : 1, children: _jsx(EventsPane, { events: events, selectedSeq: selectedSeq ?? null, paused: paused, expanded: expanded, width: eventsWidth }) })] }), notice && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: palette.coral, children: notice }) })), rendering && !empty && _jsx(Text, { dimColor: true, children: APPROXIMATION_NOTE }), rendering && !empty && page && hasProductCards(page.root) && _jsx(Text, { dimColor: true, children: NO_PRODUCTS_NOTE }), _jsxs(Text, { dimColor: true, children: ["\u2191\u2193 move \u00B7 enter press \u00B7 t ", rendering ? "outline" : "render", rendering ? " · PgUp/PgDn scroll" : "", " \u00B7 p pause \u00B7 c clear \u00B7 x expand \u00B7 q back"] })] }));
 }