@cardanvil/frame-kit 0.5.0 → 0.7.0

package/dist/layout/frameLayers.js

@@ -0,0 +1,433 @@
+/**
+ * The subset of Proxyshop's `LAYERS` enum the frame logic needs: canonical
+ * colour letters plus the identity labels. Mirrors Card Anvil's
+ * `utils/frameLogic.ts`, which is where the card-parsing half still lives.
+ */
+export const LAYERS = {
+    WHITE: "W",
+    BLUE: "U",
+    BLACK: "B",
+    RED: "R",
+    GREEN: "G",
+    ARTIFACT: "Artifact",
+    COLORLESS: "Colorless",
+    LAND: "Land",
+    GOLD: "Gold",
+    VEHICLE: "Vehicle",
+    HYBRID: "Hybrid",
+};
+/** WUBRG in canonical order, which every multi-colour string is sorted into. */
+export const COLOR_ORDER = ["W", "U", "B", "R", "G"];
+/** The five colour letters, for checking a string is made of them. */
+export const COLOR_LETTERS = new Set(COLOR_ORDER);
+/**
+ * Two- and three-colour combinations in the order cards print them: allied
+ * pairs then enemy pairs, shards then wedges. Mirrors Card Anvil's
+ * `frameLogic.ts` lookup.
+ */
+const PRINTED_ORDERS = [
+    "WU",
+    "UB",
+    "BR",
+    "RG",
+    "GW",
+    "WB",
+    "BG",
+    "GU",
+    "UR",
+    "RW",
+    "GWU",
+    "WUB",
+    "UBR",
+    "BRG",
+    "RGW",
+    "WBG",
+    "URW",
+    "BGU",
+    "RWB",
+    "GUR",
+];
+const sortedKey = (colors) => Array.from(colors).sort().join("");
+const PRINTED_ORDER_BY_KEY = new Map(PRINTED_ORDERS.map((combo) => [sortedKey(combo), combo]));
+/**
+ * Two or three colours in the order cards print them (`UW` → `WU`, `UGW` →
+ * `GWU`); anything else as it came.
+ */
+export function printedColorOrder(colors) {
+    return PRINTED_ORDER_BY_KEY.get(sortedKey(colors)) ?? colors;
+}
+/** Whether two refs point at the same family and colour. */
+function sameRef(a, b) {
+    return a.family === b.family && a.color === b.color;
+}
+/** Maps a `LAYERS` value to a single frame colour token. */
+export function colorToken(value) {
+    switch (value) {
+        case LAYERS.WHITE:
+            return "w";
+        case LAYERS.BLUE:
+            return "u";
+        case LAYERS.BLACK:
+            return "b";
+        case LAYERS.RED:
+            return "r";
+        case LAYERS.GREEN:
+            return "g";
+        case LAYERS.ARTIFACT:
+            return "a";
+        case LAYERS.COLORLESS:
+            return "c";
+        case LAYERS.LAND:
+            return "l";
+        case LAYERS.VEHICLE:
+            return "v";
+        case LAYERS.GOLD:
+            return "m";
+        case "":
+            return "c";
+        default:
+            // Three or more colours share the gold frame.
+            return "m";
+    }
+}
+/** Splits a two-colour combo like `WU`, or `null` if it is not one. */
+export function splitTwoColor(value) {
+    const [first, second] = value;
+    if (value.length === 2 &&
+        first !== undefined &&
+        second !== undefined &&
+        COLOR_LETTERS.has(first) &&
+        COLOR_LETTERS.has(second)) {
+        return [
+            first.toLowerCase(),
+            second.toLowerCase(),
+        ];
+    }
+    return null;
+}
+/**
+ * The ref for a colour within a family.
+ *
+ * Families do not all carry every colour, and the fallbacks are deliberate:
+ * nyx has no vehicle frame, and a land that is not one of WUBRG or gold falls
+ * back to the colourless land in the base family.
+ */
+export function makeFamilyRef(color, family) {
+    if (family === "normal") {
+        return { family: "base", color };
+    }
+    if (family === "nyx") {
+        switch (color) {
+            case "w":
+            case "u":
+            case "b":
+            case "r":
+            case "g":
+            case "m":
+            case "a":
+            case "c":
+            case "l":
+                return { family: "nyx", color };
+            case "v":
+                return { family: "nyx", color: "a" }; // there is no nyx vehicle frame
+            default:
+                return { family: "nyx", color: "c" };
+        }
+    }
+    switch (color) {
+        case "w":
+        case "u":
+        case "b":
+        case "r":
+        case "g":
+        case "m":
+            return { family: "land", color };
+        default:
+            // a / c / l / v / c2 → the colourless land, which lives in `base`.
+            return { family: "base", color: "l" };
+    }
+}
+/** The family a type line implies. */
+export function frameFamily(typeLine, useNyxBorder = true) {
+    const lower = typeLine.toLowerCase();
+    if (lower.includes("enchantment") && useNyxBorder) {
+        return "nyx";
+    }
+    return lower.includes("land") ? "land" : "normal";
+}
+/** Section overlays that recolour pinlines, text box and twins. */
+function buildSectionOverlays(details, family, baseRef) {
+    const overlays = [];
+    const pinlineSplit = splitTwoColor(details.pinlines);
+    if (pinlineSplit) {
+        // Two colours: the left colour runs full width, the right is masked to
+        // its half, for both the pinlines and the text box.
+        const first = makeFamilyRef(pinlineSplit[0], family);
+        const second = makeFamilyRef(pinlineSplit[1], family);
+        overlays.push({ frame: first, mask: "pinlines", preserveAlpha: true }, {
+            frame: second,
+            mask: "pinlines",
+            secondaryMask: "rightHalf",
+            preserveAlpha: true,
+        }, { frame: first, mask: "rules", preserveAlpha: true }, {
+            frame: second,
+            mask: "rules",
+            secondaryMask: "rightHalf",
+            preserveAlpha: true,
+        });
+    }
+    else {
+        const pinlines = makeFamilyRef(colorToken(details.pinlines), family);
+        if (!sameRef(pinlines, baseRef)) {
+            overlays.push({ frame: pinlines, mask: "pinlines", preserveAlpha: true }, { frame: pinlines, mask: "rules", preserveAlpha: true });
+        }
+    }
+    const twins = makeFamilyRef(colorToken(details.twins), family);
+    if (!sameRef(twins, baseRef)) {
+        overlays.push({ frame: twins, mask: "titleAndType", preserveAlpha: true });
+    }
+    // The border follows the background, which the base frame already supplies.
+    return overlays;
+}
+/**
+ * The art to composite for a set of frame details.
+ *
+ * The selection half of Card Anvil's `getFrameLayers`, with the card parsing
+ * lifted out: mono and three-plus-colour cards are a single base frame, gold
+ * two-colour cards get split pinlines, and two-colour hybrids render as two
+ * halves under a colourless wash.
+ */
+export function selectFrameLayers(details, options = {}) {
+    const { family = "normal", hybridTitleMask = "titleAndType", hasPinlineMask = true, } = options;
+    if (details.isHybrid) {
+        const split = splitTwoColor(details.pinlines);
+        if (split) {
+            return {
+                baseFrame: makeFamilyRef(split[0], family),
+                overlays: [
+                    {
+                        frame: makeFamilyRef(split[1], family),
+                        mask: "rightHalf",
+                        preserveAlpha: true,
+                    },
+                    {
+                        frame: makeFamilyRef("c2", family),
+                        mask: hybridTitleMask,
+                        preserveAlpha: true,
+                    },
+                ],
+            };
+        }
+    }
+    const usesArtifactFallback = family !== "land" &&
+        !hasPinlineMask &&
+        details.background === LAYERS.ARTIFACT &&
+        details.identity.length > 0;
+    // Without a pinlines mask the split pinline overlays can never draw, so a
+    // two-colour card would fall to the gold frame; halve the base instead.
+    if (family !== "land" &&
+        !hasPinlineMask &&
+        !details.isColorless &&
+        (details.background === LAYERS.GOLD || usesArtifactFallback)) {
+        const split = splitTwoColor(details.identity);
+        if (split) {
+            return {
+                baseFrame: makeFamilyRef(split[0], family),
+                overlays: [
+                    {
+                        frame: makeFamilyRef(split[1], family),
+                        mask: "rightHalf",
+                        preserveAlpha: true,
+                    },
+                ],
+            };
+        }
+    }
+    const baseColor = colorToken(family === "land" || usesArtifactFallback
+        ? details.identity
+        : details.background);
+    const baseRef = makeFamilyRef(baseColor, family);
+    const overlays = buildSectionOverlays(details, family, baseRef);
+    return {
+        baseFrame: baseRef,
+        ...(overlays.length > 0 ? { overlays } : {}),
+    };
+}
+/**
+ * Overlays colouring one page of a storybook: a colour on its own, two with
+ * the second faded in through the page's `Right` mask, gold at three or more.
+ * A one-colour page that matches the base frame needs nothing — unless the
+ * base was halved, which runs the second colour into the pages too.
+ */
+function pageOverlays(colors, mask, rightMask, family, baseRef, halved) {
+    const split = splitTwoColor(colors);
+    if (split) {
+        return [
+            { frame: makeFamilyRef(split[0], family), mask, preserveAlpha: true },
+            {
+                frame: makeFamilyRef(split[1], family),
+                mask: rightMask,
+                preserveAlpha: true,
+            },
+        ];
+    }
+    const page = makeFamilyRef(colorToken(colors), family);
+    return sameRef(page, baseRef) && !halved
+        ? []
+        : [{ frame: page, mask, preserveAlpha: true }];
+}
+/**
+ * The art to composite for a storybook Adventure, whose text box is an open
+ * book: the card's rules on the right page, its adventure on the left.
+ *
+ * Everything outside the book is selected as for any card, as though the
+ * layout had pinlines, with one exception: the book has no pinline art, so a
+ * two-colour gold card halves its base frame between its colours, which
+ * splits the frame's own pinlines, and lays gold over the title and type bars
+ * as the regular frame has them, and over the book's page edges (`wings`).
+ * Each page is then coloured on its own: the right by the card's pinline
+ * colours, the left by `adventureColors`, the adventure's colours in the
+ * order cards print them (see `printedColorOrder`). An adventure with no
+ * colours takes the card's.
+ */
+export function selectStorybookFrameLayers(details, adventureColors, options = {}) {
+    const family = options.family ?? "normal";
+    const goldSplit = details.background === LAYERS.GOLD &&
+        !details.isHybrid &&
+        !details.isColorless
+        ? splitTwoColor(details.pinlines)
+        : null;
+    const card = goldSplit
+        ? {
+            baseFrame: makeFamilyRef(goldSplit[0], family),
+            overlays: [
+                {
+                    frame: makeFamilyRef(goldSplit[1], family),
+                    mask: "rightHalf",
+                    preserveAlpha: true,
+                },
+                {
+                    frame: makeFamilyRef(colorToken(details.twins), family),
+                    mask: "titleAndType",
+                    preserveAlpha: true,
+                },
+                {
+                    frame: makeFamilyRef("m", family),
+                    mask: "wings",
+                    preserveAlpha: true,
+                },
+            ],
+        }
+        : selectFrameLayers(details, { ...options, hasPinlineMask: true });
+    // The book replaces the text box and has no pinlines, so the overlays meant
+    // for those are dropped and the pages coloured instead.
+    const kept = (card.overlays ?? []).filter((overlay) => overlay.mask !== "rules" && overlay.mask !== "pinlines");
+    const halved = kept.some((overlay) => overlay.mask === "rightHalf");
+    const overlays = [
+        ...kept,
+        ...pageOverlays(details.pinlines, "rules", "rulesRight", family, card.baseFrame, halved),
+        ...pageOverlays(adventureColors || details.pinlines, "adventureRules", "adventureRulesRight", family, card.baseFrame, halved),
+    ];
+    return {
+        baseFrame: card.baseFrame,
+        ...(overlays.length > 0 ? { overlays } : {}),
+    };
+}
+/**
+ * A card's colours as one string, in the order cards print them: `GW`, not
+ * `WG`. Card Anvil orders a card's identity the same way, and a two-colour
+ * split reads its left half from the first letter, so a plain WUBRG sort
+ * would swap the halves of GW, GU and RW cards. Four colours stay WUBRG.
+ */
+export function orderColors(colors) {
+    const wanted = new Set(colors.map((color) => color.toUpperCase()));
+    return printedColorOrder(COLOR_ORDER.filter((letter) => wanted.has(letter)).join(""));
+}
+/**
+ * The frame details a card shape implies.
+ *
+ * Mirrors the branch order of Card Anvil's `getFrameDetailsNonland` so the
+ * studio and the app agree on the awkward cases: devoid multicolour keeps gold
+ * plates over a colourless body, a colourless card goes colourless throughout,
+ * vehicles and artifacts override the background while their colours stay in
+ * the pinlines, and a hybrid pair takes land-coloured twins.
+ *
+ * Lands are simplified on purpose: the app reads basic-land types and fetch
+ * text to infer a land's colours, which a picker states outright.
+ */
+export function frameDetailsFor(shape) {
+    const identity = orderColors(shape.colors ?? []);
+    const details = {
+        background: identity,
+        pinlines: identity,
+        twins: identity,
+        identity,
+        isColorless: false,
+        isHybrid: false,
+    };
+    if (shape.isLand === true) {
+        // `selectFrameLayers` takes a land's base colour from `identity`; the
+        // background is always Land.
+        details.background = LAYERS.LAND;
+        if (identity.length === 0) {
+            details.pinlines = LAYERS.LAND;
+            details.twins = LAYERS.LAND;
+        }
+        else if (identity.length > 2) {
+            details.pinlines = LAYERS.GOLD;
+            details.twins = LAYERS.GOLD;
+        }
+        return details;
+    }
+    const devoid = shape.isDevoid === true && identity.length > 0;
+    const colorless = devoid ||
+        shape.isColorless === true ||
+        (identity.length === 0 && shape.isArtifact !== true);
+    if (colorless) {
+        if (devoid && identity.length > 1) {
+            details.twins = LAYERS.GOLD;
+            details.background = LAYERS.GOLD;
+        }
+        else if (!devoid) {
+            details.twins = LAYERS.COLORLESS;
+            details.background = LAYERS.COLORLESS;
+            details.pinlines = LAYERS.COLORLESS;
+        }
+        details.isColorless = true;
+        return details;
+    }
+    const hybrid = shape.isHybrid === true && identity.length === 2;
+    details.isHybrid = hybrid;
+    if (shape.isVehicle === true) {
+        details.background = LAYERS.VEHICLE;
+    }
+    else if (shape.isArtifact === true) {
+        details.background = LAYERS.ARTIFACT;
+    }
+    else if (identity.length >= 2 && !hybrid) {
+        details.background = LAYERS.GOLD;
+    }
+    if (identity.length === 0) {
+        details.pinlines = LAYERS.ARTIFACT;
+    }
+    else if (identity.length > 2) {
+        details.pinlines = LAYERS.GOLD;
+    }
+    if (identity.length === 0) {
+        details.twins = LAYERS.ARTIFACT;
+    }
+    else if (hybrid) {
+        details.twins = LAYERS.LAND;
+    }
+    else if (identity.length >= 2) {
+        details.twins = LAYERS.GOLD;
+    }
+    return details;
+}
+/** The frame family a card shape implies, without a type line to parse. */
+export function familyFor(shape, useNyxBorder = true) {
+    if (shape.isEnchantment === true && useNyxBorder) {
+        return "nyx";
+    }
+    return shape.isLand === true ? "land" : "normal";
+}

package/dist/layout/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * How a frame is drawn for one card: which art a card selects and where each
+ * piece goes, which cutouts and border recolor apply, which template settings
+ * are in effect, and how text boxes resolve and are styled.
+ *
+ * Card Anvil owns the card parsing — reading a Scryfall card into
+ * `FrameDetails` — and this owns everything downstream of it. It all used to
+ * live in the app; it moved here so the studio and the renderer cannot drift
+ * on it.
+ *
+ * A separate entry point from the main one: nothing on the packaging path
+ * needs it, and frames themselves never import it.
+ */
+export { CROWN_BLACK_BAR, DEFAULT_PT_IMAGE, NYX_INSERT_FALLBACK_X, type Placed, type Placement, type PlacementConfig, placeAsset, placementOrigin, } from "./assetPlacement.js";
+export { type BorderStateInput, borderStateFor, ringMaskFor, } from "./border.js";
+export { type OverrideState, overrideMatches, resolveBoxOverrides, resolveSecondFaceBoxOverrides, } from "./boxOverrides.js";
+export { type RgbColor, getReadableTextColor, parseNormalizedCssColor, relativeLuminance, } from "./color.js";
+export { type FrameCutoutInput, frameCutoutMasks } from "./cutouts.js";
+export { type BannerColors, type DecorationCard, type DecorationFacts, type DecorationState, crownColors, decorationsFor, identityColors, nicknameColors, ptBoxColor, resolveCrownAsset, resolveCrownNicknameAsset, resolveNicknameAsset, resolveNyxInsertAsset, resolvePtBoxAsset, } from "./decorations.js";
+export { COLOR_ORDER, type CardShape, type FrameDetails, type FrameFamily, type FrameLayers, type FrameOverlay, LAYERS, type OverlayMaskName, type SelectOptions, colorToken, familyFor, frameDetailsFor, frameFamily, makeFamilyRef, orderColors, printedColorOrder, selectFrameLayers, selectStorybookFrameLayers, splitTwoColor, } from "./frameLayers.js";
+export { type PaintStop, cardColorParts, gradientOffsetY, gradientStops, paintedFor, tintColor, } from "./paint.js";
+export { type ResolvedBaseFrame, hasFrameArt, resolveBaseFrame, resolveFrameAsset, } from "./resolveFrameAsset.js";
+export { type PowerToughnessRowPlacement, type PowerToughnessRowWidths, powerToughnessRow, } from "./powerToughnessRow.js";
+export { rulesSlideOffset, slideBoxes } from "./rulesSlide.js";
+export { type SettingValue, type TemplateSettingValues, layoutTemplateSettings, mergeTemplateSettings, templateSettingDefaults, } from "./settings.js";
+export { TEXT_SHADOW_COLOR, type TextOutline, type TextShadow, textOutlineFor, textShadowFor, } from "./textStyle.js";
+export { type Matrix, type Point, type Size, applyMatrix, sheetVectorInTurned, turnMatrix, turnPlacement, turnedBoundsOnSheet, turnedSheetSize, turnedVectorOnSheet, } from "./turn.js";

package/dist/layout/index.js

@@ -0,0 +1,27 @@
+/**
+ * How a frame is drawn for one card: which art a card selects and where each
+ * piece goes, which cutouts and border recolor apply, which template settings
+ * are in effect, and how text boxes resolve and are styled.
+ *
+ * Card Anvil owns the card parsing — reading a Scryfall card into
+ * `FrameDetails` — and this owns everything downstream of it. It all used to
+ * live in the app; it moved here so the studio and the renderer cannot drift
+ * on it.
+ *
+ * A separate entry point from the main one: nothing on the packaging path
+ * needs it, and frames themselves never import it.
+ */
+export { CROWN_BLACK_BAR, DEFAULT_PT_IMAGE, NYX_INSERT_FALLBACK_X, placeAsset, placementOrigin, } from "./assetPlacement.js";
+export { borderStateFor, ringMaskFor, } from "./border.js";
+export { overrideMatches, resolveBoxOverrides, resolveSecondFaceBoxOverrides, } from "./boxOverrides.js";
+export { getReadableTextColor, parseNormalizedCssColor, relativeLuminance, } from "./color.js";
+export { frameCutoutMasks } from "./cutouts.js";
+export { crownColors, decorationsFor, identityColors, nicknameColors, ptBoxColor, resolveCrownAsset, resolveCrownNicknameAsset, resolveNicknameAsset, resolveNyxInsertAsset, resolvePtBoxAsset, } from "./decorations.js";
+export { COLOR_ORDER, LAYERS, colorToken, familyFor, frameDetailsFor, frameFamily, makeFamilyRef, orderColors, printedColorOrder, selectFrameLayers, selectStorybookFrameLayers, splitTwoColor, } from "./frameLayers.js";
+export { cardColorParts, gradientOffsetY, gradientStops, paintedFor, tintColor, } from "./paint.js";
+export { hasFrameArt, resolveBaseFrame, resolveFrameAsset, } from "./resolveFrameAsset.js";
+export { powerToughnessRow, } from "./powerToughnessRow.js";
+export { rulesSlideOffset, slideBoxes } from "./rulesSlide.js";
+export { layoutTemplateSettings, mergeTemplateSettings, templateSettingDefaults, } from "./settings.js";
+export { TEXT_SHADOW_COLOR, textOutlineFor, textShadowFor, } from "./textStyle.js";
+export { applyMatrix, sheetVectorInTurned, turnMatrix, turnPlacement, turnedBoundsOnSheet, turnedSheetSize, turnedVectorOnSheet, } from "./turn.js";

package/dist/layout/paint.d.ts

@@ -0,0 +1,36 @@
+import type { CardBoxes, LayoutConfig } from "../schema/frame.js";
+import type { FrameColor } from "../schema/frameAssets.js";
+import type { Gradient, TintedImage } from "../schema/paint.js";
+import { type OverrideState } from "./boxOverrides.js";
+import { type FrameDetails } from "./frameLayers.js";
+/**
+ * The colors a card paints side by side, at most `maxParts` of them; see
+ * `CardColorsSchema`. Read from the pinlines, as Proxyshop's frames do, with
+ * one difference: a three-color card's pinlines are gold, so its three come
+ * from its identity.
+ */
+export declare function cardColorParts(details: FrameDetails, maxParts?: number): FrameColor[];
+/** A gradient stop as a canvas takes it: a position, and a CSS color. */
+export interface PaintStop {
+    readonly at: number;
+    readonly color: string;
+}
+/**
+ * A gradient's stops for one card, color and opacity merged into one list a
+ * canvas can draw — a stop wherever either changes — or `undefined` when it
+ * paints nothing (its palette has no color for the card).
+ */
+export declare function gradientStops(gradient: Gradient, details: FrameDetails): PaintStop[] | undefined;
+/**
+ * How far down from its own `y` a gradient is painted for a card drawn with
+ * `boxes`, which a `rulesSlide` has moved `slideOffset`: its anchor box's top
+ * if it has one, otherwise `slideOffset` if it `slides`, else 0.
+ */
+export declare function gradientOffsetY(gradient: Gradient, boxes: CardBoxes, slideOffset: number): number;
+/**
+ * A layout as one render paints it: only the gradients and tinted images
+ * whose `when` holds for `state`. Everything else passes through untouched.
+ */
+export declare function paintedFor<Config extends Pick<LayoutConfig, "gradients" | "tintedImages">>(config: Config, state: OverrideState): Config;
+/** The color a tinted image is painted for one card, if its palette has one. */
+export declare function tintColor(image: TintedImage, details: FrameDetails): string | undefined;

package/dist/layout/paint.js

@@ -0,0 +1,148 @@
+import { overrideMatches } from "./boxOverrides.js";
+import { parseNormalizedCssColor } from "./color.js";
+import { COLOR_LETTERS, LAYERS, colorToken, printedColorOrder, } from "./frameLayers.js";
+/** Whether `value` is two or three distinct mana colors, e.g. `UW`. */
+function isColorCombo(value) {
+    return ((value.length === 2 || value.length === 3) &&
+        new Set(value).size === value.length &&
+        Array.from(value).every((letter) => COLOR_LETTERS.has(letter)));
+}
+/**
+ * The colors a card paints side by side, at most `maxParts` of them; see
+ * `CardColorsSchema`. Read from the pinlines, as Proxyshop's frames do, with
+ * one difference: a three-color card's pinlines are gold, so its three come
+ * from its identity.
+ */
+export function cardColorParts(details, maxParts = 1) {
+    const combo = isColorCombo(details.pinlines)
+        ? details.pinlines
+        : details.pinlines === LAYERS.GOLD &&
+            details.identity.length === 3 &&
+            isColorCombo(details.identity)
+            ? details.identity
+            : undefined;
+    if (combo === undefined) {
+        return [colorToken(details.pinlines)];
+    }
+    if (combo.length > maxParts) {
+        return ["m"];
+    }
+    return Array.from(printedColorOrder(combo), (letter) => colorToken(letter));
+}
+/** The palette's color for each of the card's parts, or none if any is missing. */
+function paletteColors(colors, details) {
+    const hexes = cardColorParts(details, colors.maxParts).map((part) => colors.palette[part]);
+    return hexes.every((hex) => hex !== undefined) ? hexes : [];
+}
+function rgbOf(hex) {
+    return parseNormalizedCssColor(hex) ?? { r: 0, g: 0, b: 0 };
+}
+/** Linear interpolation over stops sorted by `at`, held flat past either end. */
+function interpolate(stops, at, mix) {
+    const first = stops[0];
+    const last = stops[stops.length - 1];
+    if (!first || !last) {
+        throw new Error("interpolate: no stops");
+    }
+    if (at <= first.at) {
+        return first.value;
+    }
+    for (let i = 1; i < stops.length; i++) {
+        const before = stops[i - 1];
+        const after = stops[i];
+        if (before && after && at <= after.at) {
+            const span = after.at - before.at;
+            return mix(before.value, after.value, span > 0 ? (at - before.at) / span : 1);
+        }
+    }
+    return last.value;
+}
+const mixNumber = (a, b, t) => a + (b - a) * t;
+const mixRgb = (a, b, t) => ({
+    r: mixNumber(a.r, b.r, t),
+    g: mixNumber(a.g, b.g, t),
+    b: mixNumber(a.b, b.b, t),
+});
+/**
+ * Where each color runs along a gradient split into equal parts, as color
+ * stops: flat across its part, blending into the next over `blend` (0–1 of
+ * the length) centered on where they meet.
+ */
+function partColorStops(colors, blend) {
+    const half = Math.min(blend, 1 / colors.length) / 2;
+    return colors.flatMap((value, i) => {
+        const start = i / colors.length + (i > 0 ? half : 0);
+        const end = (i + 1) / colors.length - (i < colors.length - 1 ? half : 0);
+        return [
+            { at: start, value },
+            { at: end, value },
+        ];
+    });
+}
+const round = (value, places) => Number(value.toFixed(places));
+/**
+ * A gradient's stops for one card, color and opacity merged into one list a
+ * canvas can draw — a stop wherever either changes — or `undefined` when it
+ * paints nothing (its palette has no color for the card).
+ */
+export function gradientStops(gradient, details) {
+    const hexes = typeof gradient.color === "string"
+        ? [gradient.color]
+        : paletteColors(gradient.color, details);
+    if (hexes.length === 0) {
+        return undefined;
+    }
+    const length = gradient.direction === "horizontal" ? gradient.width : gradient.height;
+    const blend = typeof gradient.color === "string" || length <= 0
+        ? 0
+        : (gradient.color.blend ?? 0) / length;
+    const colorStops = partColorStops(hexes.map(rgbOf), blend);
+    const opacityStops = [...gradient.opacity]
+        .sort((a, b) => a.at - b.at)
+        .map(({ at, opacity }) => ({ at, value: opacity }));
+    const positions = [
+        ...new Set([...colorStops, ...opacityStops].map(({ at }) => at)),
+    ].sort((a, b) => a - b);
+    return positions.map((at) => {
+        const { r, g, b } = interpolate(colorStops, at, mixRgb);
+        const opacity = interpolate(opacityStops, at, mixNumber);
+        const channels = [Math.round(r), Math.round(g), Math.round(b)];
+        return {
+            at,
+            color: `rgba(${channels.join(", ")}, ${String(round(opacity, 4))})`,
+        };
+    });
+}
+/**
+ * How far down from its own `y` a gradient is painted for a card drawn with
+ * `boxes`, which a `rulesSlide` has moved `slideOffset`: its anchor box's top
+ * if it has one, otherwise `slideOffset` if it `slides`, else 0.
+ */
+export function gradientOffsetY(gradient, boxes, slideOffset) {
+    if (gradient.anchor) {
+        return boxes[gradient.anchor].y;
+    }
+    return gradient.slides === true ? slideOffset : 0;
+}
+/**
+ * A layout as one render paints it: only the gradients and tinted images
+ * whose `when` holds for `state`. Everything else passes through untouched.
+ */
+export function paintedFor(config, state) {
+    const holds = ({ when }) => when === undefined || overrideMatches(when, state);
+    return {
+        ...config,
+        ...(config.gradients && { gradients: config.gradients.filter(holds) }),
+        ...(config.tintedImages && {
+            tintedImages: config.tintedImages.filter(holds),
+        }),
+    };
+}
+/** The color a tinted image is painted for one card, if its palette has one. */
+export function tintColor(image, details) {
+    if (typeof image.color === "string") {
+        return image.color;
+    }
+    const hexes = paletteColors(image.color, details);
+    return hexes[Math.min(image.color.part ?? 0, hexes.length - 1)];
+}