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

package/dist/render/style.js

@@ -0,0 +1,413 @@
+/**
+ * Authored paywall styling → Ink props.
+ *
+ * Every value this module reads is authored in the Control Center and arrives
+ * verbatim in the paywall template: `fillColor`, `fontColor`, `borderColor`,
+ * `width`, `height`, `horizontalAlignment` / `verticalAlignment`. The shapes
+ * handled here are the shapes the two committed real staging templates in
+ * `tests/fixtures/` actually contain — notably the **space-separated**
+ * `rgba(1 25 50 / 0.05)` CSS form, which a comma-only parser gets wrong on real
+ * data, and `linear-gradient(…)` fills with two or three positioned stops.
+ *
+ * This file is pure logic: no React, no Ink import. It names the vocabularies
+ * Ink accepts (`Text` takes `color` / `backgroundColor` as hex strings; `Box`
+ * takes `width` / `height` as `number | string`, `justifyContent` of
+ * `flex-start|flex-end|center|space-between|space-around|space-evenly` and
+ * `alignItems` of `flex-start|center|flex-end|stretch`) so the screen layer can
+ * spread the result straight onto a component.
+ *
+ * Known limit, stated rather than papered over: a fill whose stops are liquid
+ * tokens (`${block.homeTeam.primaryColorLight}`, authored on the NFL templates)
+ * cannot be resolved here — those are resolved live against block data. Such a
+ * fill parses to `null`, which callers render as "no fill" rather than as a
+ * wrong colour.
+ */
+/**
+ * The named colours worth carrying: `transparent` is authored in the real
+ * templates, and the CSS basic keywords cost nothing to accept. Anything else
+ * parses to `null` rather than being guessed at.
+ */
+const NAMED_COLORS = {
+    transparent: [0, 0, 0, 0],
+    black: [0, 0, 0, 1],
+    silver: [192, 192, 192, 1],
+    gray: [128, 128, 128, 1],
+    grey: [128, 128, 128, 1],
+    white: [255, 255, 255, 1],
+    maroon: [128, 0, 0, 1],
+    red: [255, 0, 0, 1],
+    purple: [128, 0, 128, 1],
+    fuchsia: [255, 0, 255, 1],
+    green: [0, 128, 0, 1],
+    lime: [0, 255, 0, 1],
+    olive: [128, 128, 0, 1],
+    yellow: [255, 255, 0, 1],
+    navy: [0, 0, 128, 1],
+    blue: [0, 0, 255, 1],
+    teal: [0, 128, 128, 1],
+    aqua: [0, 255, 255, 1],
+    cyan: [0, 255, 255, 1],
+    orange: [255, 165, 0, 1],
+};
+/**
+ * Parse one authored colour.
+ *
+ * Accepts `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()` / `rgba()` in both
+ * the comma form and the modern space form with a `/ alpha`, and the named
+ * colours above. Channels are clamped to 0..255 and alpha to 0..1, so a
+ * mis-authored value renders as something rather than as `NaN`.
+ *
+ * Returns `null` for anything else — including an unresolved `${…}` liquid
+ * token, which is a value we genuinely do not know yet, not a parse failure.
+ */
+export function parseColor(value) {
+    if (typeof value !== "string")
+        return null;
+    const raw = value.trim();
+    if (raw === "")
+        return null;
+    const named = NAMED_COLORS[raw.toLowerCase()];
+    if (named)
+        return rgb(named[0], named[1], named[2], named[3]);
+    if (raw.startsWith("#"))
+        return parseHex(raw.slice(1));
+    const fn = /^rgba?\(([^)]*)\)$/i.exec(raw);
+    if (fn)
+        return parseRgbBody(fn[1]);
+    return null;
+}
+/**
+ * Parse an authored fill: a solid colour, or a `linear-gradient(…)`.
+ *
+ * A gradient's angle follows CSS — `180deg` runs top to bottom, `0deg` bottom
+ * to top — and defaults to `180deg` when the declaration omits it. Stops
+ * without a position are distributed evenly. If any stop's colour cannot be
+ * parsed the whole fill is `null`: half a gradient is worse than none.
+ */
+export function parseFill(value) {
+    if (typeof value !== "string")
+        return null;
+    const raw = value.trim();
+    if (raw === "")
+        return null;
+    const gradient = /^linear-gradient\(([\s\S]*)\)$/i.exec(raw);
+    if (gradient)
+        return parseLinearGradient(gradient[1]);
+    const color = parseColor(raw);
+    return color ? { kind: "solid", color } : null;
+}
+/** The `#rrggbb` string Ink's `color` / `backgroundColor` props want. Alpha is dropped — a terminal cell has none. */
+export function toHex(c) {
+    return `#${channelHex(c.r)}${channelHex(c.g)}${channelHex(c.b)}`;
+}
+/**
+ * Flatten `fg` over `bg` (source-over compositing), which is how a translucent
+ * authored fill becomes the single opaque colour a terminal cell can show.
+ */
+export function blend(fg, bg) {
+    const fa = clamp(fg.a, 0, 1);
+    const ba = clamp(bg.a, 0, 1);
+    const a = fa + ba * (1 - fa);
+    if (a === 0)
+        return rgb(0, 0, 0, 0);
+    const mix = (f, b) => (f * fa + b * ba * (1 - fa)) / a;
+    return rgb(mix(fg.r, bg.r), mix(fg.g, bg.g), mix(fg.b, bg.b), a);
+}
+/**
+ * Sample a fill at `t`, 0 at the top of the box and 1 at the bottom.
+ *
+ * A solid fill answers with its colour at any `t`, so a caller can treat every
+ * fill the same way. A gradient is projected onto the vertical axis by its
+ * angle — `180deg` maps straight onto `t`, `0deg` reverses it, and a purely
+ * horizontal gradient collapses to its midpoint, because one terminal row has
+ * exactly one background colour.
+ */
+export function sampleGradient(fill, t) {
+    if (!fill)
+        return null;
+    if (fill.kind === "solid")
+        return fill.color;
+    if (fill.stops.length === 0)
+        return null;
+    const along = clamp(project(clamp(t, 0, 1), fill.angle), 0, 1);
+    const stops = [...fill.stops].sort((a, b) => a.at - b.at);
+    const first = stops[0];
+    const last = stops[stops.length - 1];
+    if (along <= first.at)
+        return first.color;
+    if (along >= last.at)
+        return last.color;
+    for (let i = 1; i < stops.length; i += 1) {
+        const prev = stops[i - 1];
+        const next = stops[i];
+        if (along > next.at)
+            continue;
+        const span = next.at - prev.at;
+        const f = span === 0 ? 0 : (along - prev.at) / span;
+        return rgb(lerp(prev.color.r, next.color.r, f), lerp(prev.color.g, next.color.g, f), lerp(prev.color.b, next.color.b, f), lerp(prev.color.a, next.color.a, f));
+    }
+    return last.color;
+}
+/**
+ * A terminal cell is roughly twice as tall as it is wide, so a row is worth
+ * twice the device pixels of a column. That single constant is what makes a
+ * 393×852 phone at 44 columns come out about 48 rows — close enough to the
+ * real 2.17:1 aspect that a page reads as the right shape.
+ */
+export const CELL_ASPECT = 2;
+/**
+ * Build the scale for a device viewport rendered into `columns` terminal
+ * columns. `devicePx.height` is not needed for the scale itself — callers pass
+ * it through `toCells` to get the row count — but it belongs in the viewport
+ * the caller already holds, so the signature takes the whole thing.
+ */
+export function cellScale(devicePx, columns) {
+    const cols = Number.isFinite(columns) && columns > 0 ? columns : 1;
+    const width = Number.isFinite(devicePx?.width) && devicePx.width > 0 ? devicePx.width : cols;
+    const pxPerCol = width / cols;
+    return { pxPerCol, pxPerRow: pxPerCol * CELL_ASPECT };
+}
+/**
+ * Device pixels → whole cells on one axis. A size the author meant to be
+ * visible never rounds away to nothing: anything above zero is at least one
+ * cell. Zero and below are zero.
+ */
+export function toCells(px, axis, scale) {
+    if (!Number.isFinite(px) || px <= 0)
+        return 0;
+    const per = axis === "width" ? scale.pxPerCol : scale.pxPerRow;
+    if (!Number.isFinite(per) || per <= 0)
+        return 0;
+    return Math.max(1, Math.round(px / per));
+}
+/**
+ * Parse an authored `width` / `height`: `"100%"`, `"fitContent"`, or a number
+ * of device pixels. Anything else — a missing value, a form we do not know —
+ * is content sizing, which is what Ink does when the prop is absent.
+ */
+export function parseSize(value, axis, scale) {
+    if (typeof value === "number") {
+        return Number.isFinite(value) ? { kind: "cells", value: toCells(value, axis, scale) } : { kind: "content" };
+    }
+    if (typeof value !== "string")
+        return { kind: "content" };
+    const raw = value.trim();
+    if (raw === "")
+        return { kind: "content" };
+    if (raw.toLowerCase() === "fitcontent")
+        return { kind: "content" };
+    const percent = /^(-?\d+(?:\.\d+)?)%$/.exec(raw);
+    if (percent)
+        return { kind: "percent", value: Math.max(0, Number(percent[1])) };
+    const pixels = /^(-?\d+(?:\.\d+)?)(?:px)?$/i.exec(raw);
+    if (pixels)
+        return { kind: "cells", value: toCells(Number(pixels[1]), axis, scale) };
+    return { kind: "content" };
+}
+/** A `Size` as Ink's `width` / `height` prop: a percent string, a cell count, or absent. */
+export function toInkSize(size) {
+    switch (size.kind) {
+        case "percent":
+            return `${size.value}%`;
+        case "cells":
+            return size.value;
+        default:
+            return undefined;
+    }
+}
+/**
+ * Authored alignment words → the flex edge they mean. Every value here is one
+ * Ink accepts on both `justifyContent` and `alignItems`, which is why one table
+ * serves both axes.
+ */
+const EDGE = {
+    left: "flex-start",
+    start: "flex-start",
+    top: "flex-start",
+    center: "center",
+    middle: "center",
+    right: "flex-end",
+    end: "flex-end",
+    bottom: "flex-end",
+};
+/**
+ * Authored `horizontalAlignment` / `verticalAlignment` → Ink's `justifyContent`
+ * and `alignItems`, which axis is which depending on the container's
+ * `flexDirection`. An axis the template did not author is left off entirely so
+ * Ink keeps its own default; a word we do not know is treated the same way.
+ */
+export function alignmentProps(horizontal, vertical, direction) {
+    const main = edge(direction === "row" ? horizontal : vertical);
+    const cross = edge(direction === "row" ? vertical : horizontal);
+    const props = {};
+    if (main)
+        props.justifyContent = main;
+    if (cross)
+        props.alignItems = cross;
+    return props;
+}
+/**
+ * Where something narrower than its box sits in it: 0 at the near edge, 0.5
+ * centred, 1 at the far edge.
+ *
+ * Yoga positions a *node* from `alignmentProps`, but an image is smaller than
+ * the node it was given — it keeps its own shape — so the picture has to be
+ * placed inside that box by hand, and this is the same authored word read the
+ * same way. Anything unrecognised centres, which is what both renderers did
+ * unconditionally before: the NFL+ logo is authored `alignment: left` and sat
+ * in the middle of its box.
+ */
+export function alignmentFraction(value) {
+    switch (edge(value)) {
+        case "flex-start":
+            return 0;
+        case "flex-end":
+            return 1;
+        default:
+            return 0.5;
+    }
+}
+function edge(value) {
+    if (typeof value !== "string")
+        return undefined;
+    return EDGE[value.trim().toLowerCase()];
+}
+function parseHex(digits) {
+    if (!/^[0-9a-f]+$/i.test(digits))
+        return null;
+    const expand = (pair) => parseInt(pair.length === 1 ? pair + pair : pair, 16);
+    switch (digits.length) {
+        case 3:
+        case 4: {
+            const parts = digits.split("");
+            return rgb(expand(parts[0]), expand(parts[1]), expand(parts[2]), parts[3] === undefined ? 1 : expand(parts[3]) / 255);
+        }
+        case 6:
+        case 8: {
+            const pairs = digits.match(/.{2}/g);
+            return rgb(expand(pairs[0]), expand(pairs[1]), expand(pairs[2]), pairs[3] === undefined ? 1 : expand(pairs[3]) / 255);
+        }
+        default:
+            return null;
+    }
+}
+/** The inside of an `rgb()` / `rgba()`, in either the comma form or the space + `/ alpha` form. */
+function parseRgbBody(body) {
+    const [channelPart, alphaPart] = body.includes("/") ? splitOnce(body, "/") : [body, undefined];
+    const channels = channelPart.split(/[\s,]+/).filter((part) => part !== "");
+    const alphaTokens = alphaPart === undefined ? [] : alphaPart.split(/[\s,]+/).filter((part) => part !== "");
+    if (channels.length === 4 && alphaTokens.length === 0)
+        alphaTokens.push(channels.pop());
+    if (channels.length !== 3)
+        return null;
+    if (alphaTokens.length > 1)
+        return null;
+    const numbers = channels.map((part) => channelValue(part, 255));
+    if (numbers.some((value) => value === null))
+        return null;
+    const alpha = alphaTokens.length === 1 ? channelValue(alphaTokens[0], 1) : 1;
+    if (alpha === null)
+        return null;
+    return rgb(numbers[0], numbers[1], numbers[2], alpha);
+}
+/** One `rgb()` argument: a number, or a percentage of `full`. */
+function channelValue(token, full) {
+    const match = /^(-?\d+(?:\.\d+)?)(%?)$/.exec(token);
+    if (!match)
+        return null;
+    const value = Number(match[1]);
+    if (!Number.isFinite(value))
+        return null;
+    return match[2] === "%" ? (value / 100) * full : value;
+}
+function parseLinearGradient(body) {
+    const parts = splitTopLevel(body);
+    if (parts.length === 0)
+        return null;
+    let angle = 180;
+    const first = parts[0].trim();
+    const degrees = /^(-?\d+(?:\.\d+)?)deg$/i.exec(first);
+    if (degrees) {
+        angle = Number(degrees[1]);
+        parts.shift();
+    }
+    else if (/^to\s+/i.test(first)) {
+        // `to bottom` and friends are valid CSS but are not authored by the Control
+        // Center, so they are not translated — refuse rather than guess.
+        return null;
+    }
+    if (parts.length < 2)
+        return null;
+    const raw = [];
+    for (const part of parts) {
+        const stop = parseStop(part);
+        if (!stop)
+            return null;
+        raw.push(stop);
+    }
+    const stops = raw.map((stop, index) => ({
+        color: stop.color,
+        at: stop.at ?? (raw.length === 1 ? 0 : index / (raw.length - 1)),
+    }));
+    return { kind: "gradient", angle, stops };
+}
+/** One gradient stop: a colour, optionally followed by a position. */
+function parseStop(part) {
+    const raw = part.trim();
+    if (raw === "")
+        return null;
+    const positioned = /^([\s\S]*?)\s+(-?\d+(?:\.\d+)?)%$/.exec(raw);
+    const colorText = positioned ? positioned[1] : raw;
+    const color = parseColor(colorText);
+    if (!color)
+        return null;
+    return { color, at: positioned ? clamp(Number(positioned[2]) / 100, 0, 1) : null };
+}
+/** Split on commas that are not inside parentheses, so `rgb(1, 25, 50)` survives. */
+function splitTopLevel(body) {
+    const parts = [];
+    let depth = 0;
+    let current = "";
+    for (const char of body) {
+        if (char === "(")
+            depth += 1;
+        if (char === ")")
+            depth -= 1;
+        if (char === "," && depth === 0) {
+            parts.push(current);
+            current = "";
+            continue;
+        }
+        current += char;
+    }
+    parts.push(current);
+    return parts.map((part) => part.trim()).filter((part) => part !== "");
+}
+function splitOnce(value, separator) {
+    const index = value.indexOf(separator);
+    return [value.slice(0, index), value.slice(index + separator.length)];
+}
+/**
+ * How much of a gradient's run shows along the vertical axis, given its CSS
+ * angle. `180deg` (top to bottom) is 1, `0deg` is -1, and horizontal is 0 —
+ * snapped exactly, since `Math.cos` of a right angle is not quite zero.
+ */
+function project(t, angle) {
+    const vertical = -Math.cos((angle * Math.PI) / 180);
+    const snapped = Math.abs(vertical) < 1e-9 ? 0 : vertical;
+    return 0.5 + (t - 0.5) * snapped;
+}
+function lerp(from, to, f) {
+    return from + (to - from) * f;
+}
+function channelHex(value) {
+    return Math.round(clamp(value, 0, 255)).toString(16).padStart(2, "0");
+}
+function clamp(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.min(max, Math.max(min, value));
+}
+function rgb(r, g, b, a) {
+    return { r: clamp(r, 0, 255), g: clamp(g, 0, 255), b: clamp(b, 0, 255), a: clamp(a, 0, 1) };
+}