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

package/dist/render/page-model.js

@@ -0,0 +1,610 @@
+/**
+ * One page of a paywall template → the model a realistic render draws from.
+ *
+ * This is the counterpart of `src/render/composite.ts`, not a replacement for
+ * it. The composite is a **developer's outline**: every authored node in source
+ * order, including the scaffolding and the hidden subtrees, because that is
+ * what you need when a paywall renders wrong. This model is **what the paywall
+ * shows**: the scaffolding folds into layout, a button is one node with its
+ * label on it, a condition has already picked its branch, a product container
+ * has already become cards, and a hidden subtree is gone. The two views differ
+ * on purpose and the screen keeps both (`t` toggles them).
+ *
+ * Five rules it exists to enforce, each of which was a defect in what NAM-4542
+ * shipped — measured on the real staging paywall `penguin`, where nine of
+ * thirty printed lines were scaffolding:
+ *
+ *   1. `container`, `spacer` and `condition` never print their own name.
+ *   2. A `button`'s label lifts out of its child `text` node, so `button` +
+ *      `text Close` on two lines becomes one button labelled `Close`.
+ *   3. A `condition` resolves to its live branch instead of rendering as a node.
+ *   4. A `productContainer` becomes one `product` card per sku row.
+ *   5. A `hidden: true` subtree is dropped entirely.
+ *
+ * **Styling is carried through raw.** Every value on a node's `style` is the
+ * authored string or number exactly as the template holds it —
+ * `"linear-gradient(340deg, rgba(0 79 255 / 1) 0%, …)"`, `"100%"`,
+ * `"fitContent"`, `16`. Parsing them is `src/render/style.ts`'s job and
+ * applying them is the screen's; doing any of it twice is how the two drift.
+ *
+ * Text is the same split: this module decides *which* strings are on the page
+ * and in *what* context (which sku a card is for), and `src/render/text.ts`
+ * turns a string into `Segment`s. Its `resolve` hook is where the two meet —
+ * page state and launch context resolve here, `${sku.*}` resolves there,
+ * through core's own value map.
+ */
+import { renderable } from "./text.js";
+/** Page slots, in source order, paired with the section they become. */
+const SECTIONS = [
+    { name: "header", key: "header" },
+    { name: "content", key: "contentContainer" },
+    { name: "footer", key: "footer" },
+    { name: "background", key: "backgroundContainer" },
+];
+/** Child arrays, in the order the SDKs render them. */
+const CHILD_LIST_KEYS = [
+    "components",
+    "pausedComponents",
+    "playingComponents",
+    "mutedComponents",
+    "volumeComponents",
+];
+/** Single-child slots. */
+const CHILD_NODE_KEYS = ["collapseHeader", "groupHeaderTemplate"];
+/** Components that are one pressable unit with a lifted label. */
+const BUTTONS = new Set(["button", "playPauseButton", "volumeButton", "toggleButton"]);
+/** Leaves with no children and nothing to print — drawn from their style alone. */
+const STYLE_ONLY = new Set(["radio", "toggleSwitch", "progressIndicator", "progressBar", "qrCode", "textInput"]);
+/** How many passes a nested token (`${a.${b}}`) may take before we give up. */
+const MAX_TOKEN_PASSES = 5;
+/** A string still carrying an unresolved token. */
+const UNRESOLVED = /\$\{[^}]*\}/;
+/**
+ * Build the render model for one page.
+ *
+ * `opts.state` is the live paywall state: it is merged over the template's
+ * `initialState`, so `${launch.customAttributes.intent}` and
+ * `${state.currentGroupId}` resolve the way they do on a device. Leave it out
+ * and the page renders exactly as the template's own initial state says.
+ */
+export function pageModel(paywall, pageName, opts) {
+    const page = pagesOf(paywall).find((candidate) => candidate.name === pageName);
+    if (!page)
+        return { pageName, root: { kind: "box", style: {}, children: [] }, unresolved: true };
+    const ctx = rootContext(paywall, opts?.state);
+    const children = [];
+    for (const { name, key } of SECTIONS) {
+        const rendered = rootsOf(page[key]).flatMap((root) => render(root, ctx));
+        if (rendered.length === 0)
+            continue;
+        children.push(sectionNode(name, rendered));
+    }
+    return { pageName: text(page.name) ?? pageName, root: { kind: "box", style: {}, children } };
+}
+/** One slot's nodes under a box that names the slot. */
+function sectionNode(section, children) {
+    const only = children.length === 1 ? children[0] : undefined;
+    if (only && only.kind === "box" && only.section === undefined)
+        return { ...only, section };
+    return { kind: "box", style: {}, children, section };
+}
+/** The lookup scope and the selected sku the page starts from. */
+function rootContext(paywall, live) {
+    const initial = asNode(paywall?.template?.initialState) ?? {};
+    const scope = { ...initial, ...(asNode(live) ?? {}) };
+    scope.state = scope;
+    const groupId = text(scope.currentGroupId);
+    const menus = menusOf(paywall);
+    const menu = (groupId ? menus.find((entry) => entry.id === groupId || entry.ref === groupId) : undefined) ?? menus[0];
+    const selectedProducts = asNode(scope.selectedProducts) ?? {};
+    const selectedId = groupId ? text(selectedProducts[groupId]) : undefined;
+    const skus = menu?.products ?? [];
+    const sku = skus.find((candidate) => candidate.id === selectedId);
+    return { scope, sku, skus, menus };
+}
+function menusOf(paywall) {
+    const menus = Array.isArray(paywall?.sku_menus) ? paywall.sku_menus : [];
+    return menus.map((menu) => ({
+        id: text(menu.id),
+        ref: text(menu.ref),
+        products: Array.isArray(menu.products) ? menu.products : [],
+    }));
+}
+/**
+ * One authored node → the nodes it renders as: none when it is hidden or its
+ * condition is dead, several when it is a condition or a product container.
+ */
+function render(raw, ctx) {
+    if (raw.hidden === true)
+        return [];
+    const node = withOverrides(raw, ctx);
+    const component = text(node.component) ?? "";
+    switch (component) {
+        case "condition":
+            return conditionHolds(node, ctx) ? children(node, ctx) : [];
+        case "spacer":
+            return [{ kind: "spacer", size: sizeOf(node) }];
+        case "text":
+        case "countdownTimerText":
+            return [textNode(text(node.text) ?? "", node, ctx)];
+        case "text-list":
+            return [{ kind: "box", style: boxStyle(node), children: listItems(node, ctx) }];
+        case "symbol":
+            return [textNode(symbolLabel(node), node, ctx)];
+        case "image":
+        case "svgImage":
+            return [imageNode(text(node.url) ?? "", node, ctx)];
+        case "videoUrl":
+            return [videoNode(node, ctx)];
+        case "productContainer":
+        case "flexProductContainer":
+            return [{ kind: "box", style: boxStyle(node), children: productCards(node, ctx) }];
+        default:
+            break;
+    }
+    if (BUTTONS.has(component) && !ctx.inProductCard)
+        return [buttonNode(node, ctx)];
+    if (STYLE_ONLY.has(component))
+        return [{ kind: "box", style: boxStyle(node), children: [] }];
+    // Everything else is a container of some kind — `container`, `stack`,
+    // `carouselContainer`, `responsiveGrid`, `repeatingGrid`, `collapseContainer`,
+    // a segment picker, or a button inside a product card. It shapes layout and
+    // never prints its own name. A repeating list's rows are not expanded: the
+    // CLI has no block data to loop over, so its template renders once.
+    const box = { kind: "box", style: boxStyle(node), children: children(node, ctx) };
+    const onTap = userAction(node.onTap);
+    if (onTap)
+        return [{ ...box, onTap, focusable: true }];
+    return [box];
+}
+function children(node, ctx) {
+    const out = [];
+    for (const key of CHILD_LIST_KEYS) {
+        for (const child of rootsOf(node[key]))
+            out.push(...render(child, ctx));
+    }
+    for (const key of CHILD_NODE_KEYS) {
+        const child = asNode(node[key]);
+        if (child)
+            out.push(...render(child, ctx));
+    }
+    return out;
+}
+function textNode(source, node, ctx) {
+    return { kind: "text", segments: segments(source, ctx), style: textStyle(node) };
+}
+function listItems(node, ctx) {
+    const texts = Array.isArray(node.texts) ? node.texts : [];
+    return texts
+        .map(text)
+        .filter((item) => item !== undefined)
+        .map((item) => textNode(item, node, ctx));
+}
+function imageNode(url, node, ctx, alt) {
+    const image = {
+        kind: "image",
+        url: resolveText(url, ctx),
+        style: boxStyle(node),
+    };
+    const cropping = text(node.imageCropping);
+    if (cropping)
+        image.cropping = cropping;
+    const label = alt ?? text(node.alt);
+    if (label)
+        image.alt = label;
+    return image;
+}
+/**
+ * A video renders as its authored fallback image — the terminal has no video —
+ * and says so in the alt text. With no fallback there is nothing to draw, so it
+ * names the media instead, the way the outline does.
+ */
+function videoNode(node, ctx) {
+    const fallback = text(node.fallbackImage);
+    const name = mediaName(text(node.url));
+    if (fallback)
+        return imageNode(fallback, node, ctx, `video: ${name}`);
+    return { kind: "text", segments: [{ text: `[video: ${name}]` }], style: textStyle(node) };
+}
+/**
+ * A button is one node. Its label lifts out of the `text` descendants the
+ * template puts inside it — NAM-4542's walker confirmed labels live there and
+ * never on the button itself. A button with no text at all (a close button
+ * whose only child is a `symbol`) falls back to its screenreader label and then
+ * to the symbol, so it is never blank.
+ */
+function buttonNode(node, ctx) {
+    const inner = children(node, { ...ctx, inProductCard: false });
+    const label = joinLines(textLines(inner));
+    const spoken = text(node.screenreaderText);
+    const button = {
+        kind: "button",
+        label: label.length > 0 ? label : spoken ? segments(spoken, ctx) : [],
+        style: boxStyle(node),
+        focusable: true,
+    };
+    const onTap = userAction(node.onTap);
+    if (onTap)
+        button.onTap = onTap;
+    return button;
+}
+/** `[icon: xmark]` — the outline's own way of naming a symbol, kept in step. */
+function symbolLabel(node) {
+    return `[icon: ${text(node.name) ?? "symbol"}]`;
+}
+/**
+ * A product container becomes one card per sku in its menu, each rendered with
+ * that sku in context — which is what makes a `${sku.featured}` condition pick
+ * a different branch on the featured card than on its siblings.
+ */
+function productCards(node, ctx) {
+    const menu = skusFor(node, ctx);
+    return menu.map((sku) => productCard(node, sku, { ...ctx, sku, skus: menu, inProductCard: true }));
+}
+/**
+ * The sku rows a container shows: the group in context, or the menu a
+ * `products: "subset"` container names in `subsetGroup`.
+ */
+function skusFor(node, ctx) {
+    const subset = text(node.products) === "subset" ? text(node.subsetGroup) : undefined;
+    if (!subset)
+        return ctx.skus ?? [];
+    const named = (ctx.menus ?? []).find((menu) => menu.id === subset || menu.ref === subset);
+    return named?.products ?? ctx.skus ?? [];
+}
+function productCard(container, sku, ctx) {
+    const featured = sku.featured === true;
+    const template = (featured ? container.productFeaturedComponents : container.productBaseComponents) ?? container.components;
+    const rendered = rootsOf(template).flatMap((child) => render(child, ctx));
+    const card = {
+        kind: "product",
+        lines: textLines(rendered),
+        focusable: true,
+    };
+    const onTap = firstAction(rendered) ?? userAction(container.onTap);
+    if (onTap)
+        card.onTap = onTap;
+    const only = rendered.length === 1 ? rendered[0] : undefined;
+    if (only && only.kind === "box")
+        card.style = only.style;
+    // A card's outer box is usually a bare layout container; the fill that makes
+    // it look like a control is authored on the CTA nested inside it. On the real
+    // Penguin page that is the `namiBuySKU` button, `fillColor #ffffff` with a
+    // 2px border and an 8 radius — dropping it left the card as an empty outline.
+    const skin = cardSkin(rendered);
+    if (skin)
+        card.style = { ...(card.style ?? {}), ...skin };
+    return card;
+}
+/**
+ * The fill and border of the first styled control inside a card, which is what
+ * the card should wear. Layout values (width, spacing, direction) stay with the
+ * container; only the skin is lifted.
+ */
+function cardSkin(nodes) {
+    let found;
+    const visit = (node) => {
+        if (found)
+            return;
+        const style = "style" in node ? node.style : undefined;
+        if (style?.fill && (node.kind === "button" || node.kind === "box")) {
+            found = { fill: style.fill, ...(style.border ? { border: style.border } : {}) };
+            return;
+        }
+        if (node.kind === "box")
+            node.children.forEach(visit);
+    };
+    nodes.forEach(visit);
+    return found;
+}
+/** Every printed line under these nodes, in source order. */
+function textLines(nodes) {
+    const lines = [];
+    const visit = (node) => {
+        if (node.kind === "text")
+            lines.push(node.segments);
+        else if (node.kind === "button")
+            lines.push(node.label);
+        else if (node.kind === "product")
+            lines.push(...node.lines);
+        else if (node.kind === "box")
+            node.children.forEach(visit);
+    };
+    nodes.forEach(visit);
+    return lines.filter((line) => line.length > 0);
+}
+function firstAction(nodes) {
+    for (const node of nodes) {
+        if (node.kind === "box" || node.kind === "button" || node.kind === "product") {
+            if (node.onTap)
+                return node.onTap;
+        }
+        if (node.kind === "box") {
+            const nested = firstAction(node.children);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+}
+/** Several text nodes inside one button read as one label, spaced apart. */
+function joinLines(lines) {
+    return lines.flatMap((line, index) => (index === 0 ? line : [{ text: " " }, ...line]));
+}
+// ---------------------------------------------------------------------------
+// Conditions
+// ---------------------------------------------------------------------------
+/**
+ * Whether a `condition` (or one `conditionAttributes` entry) holds, following
+ * `sdk/web`'s `conditionComponentMatches`: `assertions` all have to hold,
+ * `orAssertions` any one of them (an empty list holds), and a condition with
+ * neither never renders.
+ */
+function conditionHolds(node, ctx) {
+    const all = node.assertions;
+    if (Array.isArray(all))
+        return all.every((assertion) => assertionHolds(assertion, ctx));
+    const any = node.orAssertions;
+    if (Array.isArray(any))
+        return any.length === 0 || any.some((assertion) => assertionHolds(assertion, ctx));
+    return false;
+}
+/** The operators, matching `sdk/web`'s `testObjectMatches`. */
+function assertionHolds(assertion, ctx) {
+    const test = asNode(assertion);
+    if (!test)
+        return false;
+    const left = resolveValue(test.value, ctx);
+    const right = resolveValue(test.expected, ctx);
+    switch (text(test.operator)) {
+        case "equals":
+            return left === right;
+        case "notEquals":
+            return left !== right;
+        case "contains":
+            return contains(left, right);
+        case "notContains":
+            return !contains(left, right);
+        case "set":
+            return typeof right === "boolean" ? isSet(left) === right : isSet(left);
+        case "notSet":
+            return !isSet(left);
+        case "gt":
+            return compare(left, right) > 0;
+        case "gte":
+            return compare(left, right) >= 0;
+        case "lt":
+            return compare(left, right) < 0;
+        case "lte":
+            return compare(left, right) <= 0;
+        default:
+            return false;
+    }
+}
+function contains(left, right) {
+    if (Array.isArray(left))
+        return left.some((item) => item === right);
+    return String(left ?? "").includes(String(right ?? ""));
+}
+/** A value counts as set when it is there and is not a token we could not resolve. */
+function isSet(value) {
+    if (value === undefined || value === null || value === "")
+        return false;
+    return !UNRESOLVED.test(String(value));
+}
+function compare(left, right) {
+    const a = Number(left);
+    const b = Number(right);
+    if (!Number.isNaN(a) && !Number.isNaN(b))
+        return a === b ? 0 : a < b ? -1 : 1;
+    const x = String(left ?? "");
+    const y = String(right ?? "");
+    return x === y ? 0 : x < y ? -1 : 1;
+}
+/**
+ * `conditionAttributes` are the same rule applied to one node's attributes
+ * rather than to a subtree: every entry whose assertions hold merges its
+ * `attributes` over the node. It is how a purchase button reads
+ * "Start 7-Day Free Trial" for a trial-eligible sku, and how the selected
+ * product's radio is the filled one.
+ */
+function withOverrides(node, ctx) {
+    const entries = node.conditionAttributes;
+    if (!Array.isArray(entries) || entries.length === 0)
+        return node;
+    let out = node;
+    for (const entry of entries) {
+        const rule = asNode(entry);
+        if (!rule || !conditionHolds(rule, ctx))
+            continue;
+        const attributes = asNode(rule.attributes);
+        if (attributes)
+            out = { ...out, ...attributes };
+    }
+    return out;
+}
+// ---------------------------------------------------------------------------
+// Tokens
+// ---------------------------------------------------------------------------
+/**
+ * A `${…}` token's value from the page's own state.
+ *
+ * A whole-string token keeps its type, so `${sku.featured}` compares as the
+ * boolean it is rather than as `"true"`. Innermost tokens resolve first, which
+ * is what makes the real `${state.selectedProducts.${state.currentGroupId}}`
+ * work. **A token we cannot answer stays as itself** — never a blank — so an
+ * authoring mistake stays visible and a dead condition stays dead.
+ */
+function resolveValue(value, ctx) {
+    if (typeof value !== "string" || !value.includes("${"))
+        return value;
+    let current = value;
+    for (let pass = 0; pass < MAX_TOKEN_PASSES; pass++) {
+        const whole = /^\$\{([^${}]*)\}$/.exec(current);
+        if (whole) {
+            const found = lookup(whole[1], ctx);
+            if (found === undefined || found === null)
+                return current;
+            if (typeof found !== "string" || !found.includes("${"))
+                return found;
+            current = found;
+            continue;
+        }
+        const next = current.replace(/\$\{([^${}]*)\}/g, (match, path) => {
+            const found = lookup(path, ctx);
+            return found === undefined || found === null ? match : String(found);
+        });
+        if (next === current)
+            return current;
+        current = next;
+    }
+    return current;
+}
+function resolveText(value, ctx) {
+    const resolved = resolveValue(value, ctx);
+    return typeof resolved === "string" ? resolved : String(resolved);
+}
+/** A dotted path against the page state, or against the sku in context. */
+function lookup(path, ctx) {
+    const parts = path.split(".").filter((part) => part !== "");
+    if (parts.length === 0)
+        return undefined;
+    if (parts[0] === "sku") {
+        if (!ctx.sku)
+            return undefined;
+        const variables = asNode(ctx.sku.variables);
+        const name = parts.slice(1).join(".");
+        if (variables && variables[name] !== undefined)
+            return variables[name];
+        return walk(ctx.sku, parts.slice(1));
+    }
+    return walk(ctx.scope, parts);
+}
+function walk(root, parts) {
+    let current = root;
+    for (const part of parts) {
+        const node = asNode(current);
+        if (!node)
+            return undefined;
+        current = node[part];
+    }
+    return current;
+}
+/**
+ * A string → the styled segments that draw it.
+ *
+ * `src/render/text.ts` owns markdown and the `${sku.*}` value map (core's own
+ * `getSkuSmartTextValue`); this module owns the page state, so it hands that
+ * over as `resolve` and leaves the sku tokens to core.
+ */
+function segments(source, ctx) {
+    if (source === "")
+        return [];
+    return renderable(source, {
+        sku: ctx.sku,
+        skus: ctx.skus,
+        resolve: (token) => {
+            if (token.startsWith("sku."))
+                return undefined;
+            const found = lookup(token, ctx);
+            if (found === undefined || found === null || typeof found === "object")
+                return undefined;
+            return String(found);
+        },
+    });
+}
+// ---------------------------------------------------------------------------
+// Style
+// ---------------------------------------------------------------------------
+function boxStyle(node) {
+    const style = {};
+    put(style, "fill", text(node.fillColor));
+    put(style, "width", size(node.width));
+    put(style, "height", size(node.height));
+    put(style, "padding", edges(node, "Padding"));
+    put(style, "margin", edges(node, "Margin"));
+    put(style, "spacing", number(node.spacing));
+    put(style, "direction", text(node.direction));
+    put(style, "alignment", text(node.alignment));
+    put(style, "horizontalAlignment", text(node.horizontalAlignment));
+    put(style, "verticalAlignment", text(node.verticalAlignment));
+    put(style, "border", border(node));
+    return style;
+}
+function textStyle(node) {
+    const style = boxStyle(node);
+    put(style, "fontColor", text(node.fontColor));
+    put(style, "fontSize", number(node.fontSize));
+    put(style, "fontName", text(node.fontName));
+    put(style, "textType", text(node.textType));
+    put(style, "linkColor", text(node.linkColor));
+    put(style, "capitalize", bool(node.capitalize));
+    put(style, "strikethrough", bool(node.strikethrough));
+    return style;
+}
+function edges(node, suffix) {
+    const edge = {};
+    put(edge, "top", size(node[`top${suffix}`]));
+    put(edge, "right", size(node[`right${suffix}`]));
+    put(edge, "bottom", size(node[`bottom${suffix}`]));
+    put(edge, "left", size(node[`left${suffix}`]));
+    return Object.keys(edge).length > 0 ? edge : undefined;
+}
+function border(node) {
+    const value = {};
+    put(value, "color", text(node.borderColor));
+    put(value, "width", number(node.borderWidth));
+    put(value, "radius", number(node.borderRadius));
+    return Object.keys(value).length > 0 ? value : undefined;
+}
+/** A spacer's authored extent; one cell when it is a percentage we cannot size here. */
+function sizeOf(node) {
+    return number(node.width) ?? number(node.height) ?? 1;
+}
+function put(target, key, value) {
+    if (value !== undefined)
+        target[key] = value;
+}
+// ---------------------------------------------------------------------------
+// Template reading
+// ---------------------------------------------------------------------------
+function pagesOf(paywall) {
+    const pages = paywall?.template?.pages;
+    return Array.isArray(pages) ? pages.filter((page) => asNode(page) !== undefined) : [];
+}
+/** A slot's roots: an array of components, a single container, or nothing. */
+function rootsOf(value) {
+    if (Array.isArray(value))
+        return value.map(asNode).filter((node) => node !== undefined);
+    const node = asNode(value);
+    return node ? [node] : [];
+}
+function userAction(value) {
+    const node = asNode(value);
+    if (!node)
+        return undefined;
+    return typeof node.function === "string" ? node : undefined;
+}
+/** The media's own name: the last segment of its url. */
+function mediaName(url) {
+    if (!url)
+        return "media";
+    const path = url.split(/[?#]/)[0];
+    return path.split("/").filter(Boolean).pop() ?? url;
+}
+function asNode(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value) ? value : undefined;
+}
+function text(value) {
+    return typeof value === "string" && value.trim() !== "" ? value : undefined;
+}
+function number(value) {
+    return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}
+function bool(value) {
+    return typeof value === "boolean" ? value : undefined;
+}
+/** A width or height, raw: `100`, `"100%"`, `"fitContent"`. */
+function size(value) {
+    return number(value) ?? text(value);
+}