@cardanvil/frame-kit 0.5.0 → 0.7.0

package/dist/cli/watch.js

@@ -1,30 +1,9 @@
-import { watch } from "node:fs";
 import path from "node:path";
 import { buildFrames } from "./build.js";
-import { discoverFrames, relativePosix } from "./discover.js";
+import { discoverFrames } from "./discover.js";
 import { invalidateFrameModules, startFrameServer } from "./loadFrame.js";
 import { Reporter, formatProblem } from "./report.js";
-/** Directories never worth watching. Mirrors discovery's own skip list. */
-const SKIP_DIRS = new Set([
-    "node_modules",
-    "dist",
-    ".git",
-    ".pnpm-store",
-    "__fixtures__",
-]);
-/** Files a rebuild produces, or an editor leaves lying around. */
-const IGNORED_FILE = /(\.cardframe|frame-index\.json|\.preview\.[a-z]+|~|\.swp|\.tmp)$/i;
-/**
- * How long to wait for changes to stop before rebuilding.
- *
- * One save can produce several events — a write, a rename, an attribute
- * change — and a tool upstream may rewrite a whole directory.
- */
-const DEBOUNCE_MS = 200;
-function isIgnored(file) {
-    const segments = file.split(path.sep);
-    return (segments.some((segment) => SKIP_DIRS.has(segment) || segment.startsWith(".")) || IGNORED_FILE.test(file));
-}
+import { startSourceWatcher } from "./sourceWatcher.js";
 const plural = (n) => `${String(n)} frame${n === 1 ? "" : "s"}`;
 /**
  * Rebuilds frames as their sources change, until the process is interrupted.
@@ -32,6 +11,9 @@ const plural = (n) => `${String(n)} frame${n === 1 ? "" : "s"}`;
  * One Vite server stays alive for the whole session — starting one costs a
  * second or two — and its module graph is dropped before each rebuild so an
  * edit is actually seen. See `invalidateFrameModules`.
+ *
+ * Debouncing, ignore rules and the non-overlapping drain live in
+ * `startSourceWatcher`, shared with `frame-kit studio`.
  */
 export async function watchFrames(options) {
     const root = path.resolve(options.root);
@@ -41,10 +23,7 @@ export async function watchFrames(options) {
             console.log(summary);
         });
     const frameServer = await startFrameServer(root);
-    const watchers = [];
-    const pending = new Set();
-    let timer;
-    let building = false;
+    let watcher;
     function runBuild(only) {
         invalidateFrameModules(frameServer);
         const reporter = new Reporter();
@@ -56,66 +35,23 @@ export async function watchFrames(options) {
             report(`${plural(frames.length)} rebuilt in ${String(Date.now() - started)}ms`);
         });
     }
-    async function drain() {
-        if (building) {
-            // Two builds would race on the same output file. Whatever arrived is
-            // already in `pending`, and the loop below will pick it up.
-            return;
-        }
-        building = true;
-        try {
-            // Keyed off `pending` rather than a flag: anything that arrived during a
-            // build is still queued when it finishes.
-            while (pending.size > 0) {
-                const changed = [...pending];
-                pending.clear();
-                const slugs = await slugsFor(root, changed, options.only);
-                if (slugs?.length === 0) {
-                    continue; // nothing we build was touched
-                }
-                await runBuild(slugs);
-            }
-        }
-        catch (cause) {
-            // A failed rebuild must not end the session: the author is mid-edit and
-            // the next save is probably the fix.
-            console.error(cause instanceof Error ? cause.message : String(cause));
-        }
-        finally {
-            building = false;
-        }
-    }
-    function onChange(file) {
-        if (isIgnored(file) || file.startsWith(outDir)) {
-            return;
-        }
-        pending.add(file);
-        if (timer) {
-            clearTimeout(timer);
-        }
-        timer = setTimeout(() => void drain(), DEBOUNCE_MS);
-    }
-    function watchDir(dir) {
-        try {
-            watchers.push(watch(dir, { recursive: true }, (_event, name) => {
-                if (name !== null) {
-                    onChange(path.join(dir, name));
-                }
-            }));
-        }
-        catch {
-            console.error(`Could not watch ${relativePosix(root, dir)}. Recursive watching is ` +
-                `not supported on this filesystem; rebuild with \`frame-kit build\`.`);
-        }
-    }
     try {
         await runBuild(undefined);
         // Each frame's own directory, plus the root, so a frame added or removed
         // while watching is noticed.
-        for (const frame of await discoverFrames(root, new Reporter())) {
-            watchDir(frame.dir);
-        }
-        watchDir(root);
+        const frames = await discoverFrames(root, new Reporter());
+        watcher = startSourceWatcher({
+            root,
+            dirs: [...frames.map((frame) => frame.dir), root],
+            ignore: (file) => file.startsWith(outDir),
+            onChange: async (changed) => {
+                const slugs = await slugsFor(root, changed, options.only);
+                if (slugs?.length === 0) {
+                    return; // nothing we build was touched
+                }
+                await runBuild(slugs);
+            },
+        });
         report("Watching for changes. Press Ctrl+C to stop.");
         await new Promise((resolve) => {
             const stop = () => {
@@ -126,12 +62,7 @@ export async function watchFrames(options) {
         });
     }
     finally {
-        if (timer) {
-            clearTimeout(timer);
-        }
-        for (const watcher of watchers) {
-            watcher.close();
-        }
+        watcher?.close();
         await frameServer.close();
     }
 }

package/dist/layout/assetPlacement.d.ts

@@ -0,0 +1,71 @@
+import type { CrownRenderConfig, NicknameRenderConfig } from "../schema/frame.js";
+/** Where the PT plate sits when a layout does not say. */
+export declare const DEFAULT_PT_IMAGE: {
+    readonly x: 2441;
+    readonly y: 3847;
+};
+/** The crown's black bar is fixed art at a fixed place. */
+export declare const CROWN_BLACK_BAR: {
+    readonly x: 220;
+    readonly y: 200;
+    readonly width: 2815;
+    readonly height: 140;
+};
+/** Horizontal fallback for the nyx insert when the crown's width is unknown. */
+export declare const NYX_INSERT_FALLBACK_X = 611;
+export interface PlacementConfig {
+    readonly crownConfig?: CrownRenderConfig | undefined;
+    readonly nicknameConfig?: NicknameRenderConfig | undefined;
+    readonly ptImage?: {
+        readonly x: number;
+        readonly y: number;
+    } | undefined;
+    /** Whether the card being previewed has a nickname; moves the crown. */
+    readonly hasNickname?: boolean;
+}
+export interface Placed {
+    readonly x: number;
+    readonly y: number;
+}
+export type Placement = 
+/** Centred on the canvas — full-sheet art. */
+{
+    readonly kind: "center";
+}
+/** Drawn at a fixed point on the sheet. */
+ | {
+    readonly kind: "at";
+    readonly at: Placed;
+}
+/**
+ * Positioned by the renderer at draw time from measurements nothing static
+ * has — ability rows, saga chapters, the flipside plate.
+ */
+ | {
+    readonly kind: "dynamic";
+    readonly reason: string;
+};
+/**
+ * Where an asset is drawn on the sheet.
+ *
+ * Most frame art is full-sheet and simply centres, but several families do
+ * not: crowns, nicknames and the PT plate are placed from the layout's own
+ * render config, and drawing them centred — as a naive compositor does — puts
+ * a legendary crown in the middle of the card. The positions here mirror
+ * Card Anvil's `konva/nodes/imageNodes.ts`, which is the authority.
+ *
+ * `assetPath` is the dotted path within a `FrameAssets`, as `walkAssets`
+ * reports it: `base.w`, `crown.nickname`, `pt.u`, and so on.
+ */
+export declare function placeAsset(assetPath: string, config?: PlacementConfig, image?: {
+    readonly width: number;
+    readonly height: number;
+}): Placement;
+/** Resolves a placement to concrete coordinates for an image of known size. */
+export declare function placementOrigin(placement: Placement, image: {
+    readonly width: number;
+    readonly height: number;
+}, canvas: {
+    readonly width: number;
+    readonly height: number;
+}): Placed | undefined;

package/dist/layout/assetPlacement.js

@@ -0,0 +1,104 @@
+import { defaultCrownConfig, defaultNicknameConfig } from "../schema/frame.js";
+/** Where the PT plate sits when a layout does not say. */
+export const DEFAULT_PT_IMAGE = { x: 2441, y: 3847 };
+/** The crown's black bar is fixed art at a fixed place. */
+export const CROWN_BLACK_BAR = {
+    x: 220,
+    y: 200,
+    width: 2815,
+    height: 140,
+};
+/** Horizontal fallback for the nyx insert when the crown's width is unknown. */
+export const NYX_INSERT_FALLBACK_X = 611;
+/** First segment of a dotted asset path, e.g. `crown` in `crown.nickname`. */
+const familyOf = (assetPath) => assetPath.split(".")[0] ?? assetPath;
+/**
+ * Where an asset is drawn on the sheet.
+ *
+ * Most frame art is full-sheet and simply centres, but several families do
+ * not: crowns, nicknames and the PT plate are placed from the layout's own
+ * render config, and drawing them centred — as a naive compositor does — puts
+ * a legendary crown in the middle of the card. The positions here mirror
+ * Card Anvil's `konva/nodes/imageNodes.ts`, which is the authority.
+ *
+ * `assetPath` is the dotted path within a `FrameAssets`, as `walkAssets`
+ * reports it: `base.w`, `crown.nickname`, `pt.u`, and so on.
+ */
+export function placeAsset(assetPath, config = {}, image) {
+    const family = familyOf(assetPath);
+    const leaf = assetPath.split(".").slice(1).join(".");
+    switch (family) {
+        // Full-sheet art.
+        case "base":
+        case "land":
+        case "nyx":
+        case "tall":
+        case "creature":
+        case "tokenTitle":
+        case "extendedOverlay":
+            return { kind: "center" };
+        case "black":
+            return { kind: "at", at: { x: CROWN_BLACK_BAR.x, y: CROWN_BLACK_BAR.y } };
+        case "dfcIcon":
+        case "dfcIconSet":
+        case "dfcIconColorSet":
+            return { kind: "at", at: { x: 0, y: 0 } };
+        case "crown": {
+            const crown = config.crownConfig ?? defaultCrownConfig;
+            const nicknamed = config.hasNickname === true;
+            const x = (nicknamed ? crown.nicknameCrownX : undefined) ?? crown.x;
+            const y = (nicknamed ? crown.nicknameCrownY : undefined) ?? crown.y;
+            // The nyx insert sits just inside the crown it decorates.
+            if (leaf.startsWith("nyxInsert")) {
+                const insetX = crown.nyxInsertX ??
+                    (image
+                        ? x + (CROWN_BLACK_BAR.width - image.width) / 2
+                        : NYX_INSERT_FALLBACK_X);
+                const insetY = (nicknamed ? crown.nyxInsertNicknameY : undefined) ??
+                    crown.nyxInsertY ??
+                    y + 2;
+                return { kind: "at", at: { x: insetX, y: insetY } };
+            }
+            return { kind: "at", at: { x, y } };
+        }
+        case "nickname": {
+            const nickname = config.nicknameConfig ?? defaultNicknameConfig;
+            return { kind: "at", at: { x: nickname.x, y: nickname.y } };
+        }
+        case "pt": {
+            const pt = config.ptImage ?? DEFAULT_PT_IMAGE;
+            return { kind: "at", at: { x: pt.x, y: pt.y } };
+        }
+        case "planeswalker":
+            return {
+                kind: "dynamic",
+                reason: "ability rows are laid out from the card's ability count",
+            };
+        case "saga":
+            return {
+                kind: "dynamic",
+                reason: "chapter badges are laid out from the card's chapter count",
+            };
+        case "flipside":
+            return {
+                kind: "dynamic",
+                reason: "positioned from the other face's power/toughness",
+            };
+        default:
+            return { kind: "center" };
+    }
+}
+/** Resolves a placement to concrete coordinates for an image of known size. */
+export function placementOrigin(placement, image, canvas) {
+    switch (placement.kind) {
+        case "center":
+            return {
+                x: (canvas.width - image.width) / 2,
+                y: (canvas.height - image.height) / 2,
+            };
+        case "at":
+            return placement.at;
+        default:
+            return undefined;
+    }
+}

package/dist/layout/border.d.ts

@@ -0,0 +1,27 @@
+import type { BorderState } from "../schema/condition.js";
+import type { LayoutMasks } from "../schema/frameAssets.js";
+/**
+ * The mask a border color recolors the ring through: `borderFull` when
+ * "Color Entire Border" is on and the layout ships one, else the plain
+ * `border`. Undefined when the layout has no ring mask, so no border color
+ * can reach it.
+ */
+export declare function ringMaskFor(masks: LayoutMasks | undefined, useFullBorder: boolean): string | undefined;
+export interface BorderStateInput {
+    /** The border color setting, when one is picked. */
+    borderColor: string | null;
+    /** The mask set the face is drawn with. */
+    masks: LayoutMasks | undefined;
+    useNoBorder: boolean;
+    useFullBorder: boolean;
+}
+/**
+ * The border as it is about to be drawn, which text boxes' `overrides` match
+ * on (see `BorderStateSchema`).
+ *
+ * Only what the masks actually do counts: "No Border" without a `noBorder`
+ * mask cuts nothing away, and a border color without a ring mask recolors
+ * nothing — so a frame that cannot change its border always reads
+ * `"default"`.
+ */
+export declare function borderStateFor({ borderColor, masks, useNoBorder, useFullBorder, }: BorderStateInput): BorderState;

package/dist/layout/border.js

@@ -0,0 +1,31 @@
+import { getReadableTextColor, parseNormalizedCssColor } from "./color.js";
+/**
+ * The mask a border color recolors the ring through: `borderFull` when
+ * "Color Entire Border" is on and the layout ships one, else the plain
+ * `border`. Undefined when the layout has no ring mask, so no border color
+ * can reach it.
+ */
+export function ringMaskFor(masks, useFullBorder) {
+    return useFullBorder && masks?.borderFull ? masks.borderFull : masks?.border;
+}
+/**
+ * The border as it is about to be drawn, which text boxes' `overrides` match
+ * on (see `BorderStateSchema`).
+ *
+ * Only what the masks actually do counts: "No Border" without a `noBorder`
+ * mask cuts nothing away, and a border color without a ring mask recolors
+ * nothing — so a frame that cannot change its border always reads
+ * `"default"`.
+ */
+export function borderStateFor({ borderColor, masks, useNoBorder, useFullBorder, }) {
+    if (useNoBorder && masks?.noBorder) {
+        return "none";
+    }
+    const rgb = borderColor && ringMaskFor(masks, useFullBorder)
+        ? parseNormalizedCssColor(borderColor)
+        : undefined;
+    if (!rgb) {
+        return "default";
+    }
+    return getReadableTextColor(rgb) === "black" ? "light" : "dark";
+}

package/dist/layout/boxOverrides.d.ts

@@ -0,0 +1,28 @@
+import type { BorderState, RenderCondition } from "../schema/condition.js";
+import type { CardBoxes, SecondFaceBoxes } from "../schema/frame.js";
+import type { FrameColor } from "../schema/frameAssets.js";
+/** What text boxes' `overrides` are matched against, for one render. */
+export interface OverrideState {
+    /** The border as it is about to be drawn; see `BorderStateSchema`. */
+    border: BorderState;
+    /** The template settings in effect for the layout, defaults included. */
+    settings: Readonly<Record<string, unknown>>;
+    /**
+     * The card's frame color, when there is a card. A condition on it never
+     * matches without one.
+     */
+    frameColor?: FrameColor;
+}
+/**
+ * Whether every condition a `RenderCondition` names holds for one render — a
+ * text box override's, a gradient's or a tinted image's.
+ */
+export declare function overrideMatches(when: RenderCondition, state: OverrideState): boolean;
+/**
+ * A box set as the renderer draws it for one render: each text box with its
+ * matching `overrides` merged over it in order, and the list itself dropped.
+ * Bare bounds (`art`, `setSymbol`, `ptImage`) pass through untouched.
+ */
+export declare function resolveBoxOverrides(boxes: CardBoxes, state: OverrideState): CardBoxes;
+/** {@link resolveBoxOverrides} for the set a second face is drawn from. */
+export declare function resolveSecondFaceBoxOverrides(boxes: SecondFaceBoxes, state: OverrideState): SecondFaceBoxes;

package/dist/layout/boxOverrides.js

@@ -0,0 +1,95 @@
+/**
+ * The `CardBoxes` members that are text boxes, and so can carry `overrides`.
+ * `boxOverrides.test.ts` fails if the contract gains one this does not list.
+ */
+const TEXT_BOX_KEYS = [
+    "mana",
+    "title",
+    "type",
+    "rules",
+    "abilities",
+    "pt",
+    "power",
+    "toughness",
+    "collectorInfo",
+    "startingLoyalty",
+    "nicknameTitle",
+    "keyword",
+    "flipsidePt",
+    "flipsideType",
+    "flipsideManaCost",
+    "flipsideRules",
+    "insetTitle",
+    "insetMana",
+    "insetType",
+    "insetRules",
+    "defense",
+    "fuse",
+];
+/**
+ * The same for a second face's set. `boxOverrides.test.ts` holds this list to
+ * the contract too.
+ */
+const SECOND_FACE_TEXT_BOX_KEYS = [
+    "title",
+    "mana",
+    "type",
+    "rules",
+    "pt",
+    "power",
+    "toughness",
+];
+/**
+ * Whether every condition a `RenderCondition` names holds for one render — a
+ * text box override's, a gradient's or a tinted image's.
+ */
+export function overrideMatches(when, state) {
+    if (when.border !== undefined) {
+        const borders = typeof when.border === "string" ? [when.border] : when.border;
+        if (!borders.includes(state.border)) {
+            return false;
+        }
+    }
+    if (when.frameColor !== undefined) {
+        const colors = typeof when.frameColor === "string" ? [when.frameColor] : when.frameColor;
+        if (state.frameColor === undefined || !colors.includes(state.frameColor)) {
+            return false;
+        }
+    }
+    return Object.entries(when.settings ?? {}).every(([key, value]) => state.settings[key] === value);
+}
+function resolveTextBox(box, state) {
+    const { overrides = [], ...resolved } = box;
+    for (const override of overrides) {
+        if (overrideMatches(override.when, state)) {
+            Object.assign(resolved, override.style);
+        }
+    }
+    return resolved;
+}
+/**
+ * A box set as the renderer draws it for one render: each text box with its
+ * matching `overrides` merged over it in order, and the list itself dropped.
+ * Bare bounds (`art`, `setSymbol`, `ptImage`) pass through untouched.
+ */
+export function resolveBoxOverrides(boxes, state) {
+    const resolved = { ...boxes };
+    for (const key of TEXT_BOX_KEYS) {
+        const box = boxes[key];
+        if (box?.overrides) {
+            resolved[key] = resolveTextBox(box, state);
+        }
+    }
+    return resolved;
+}
+/** {@link resolveBoxOverrides} for the set a second face is drawn from. */
+export function resolveSecondFaceBoxOverrides(boxes, state) {
+    const resolved = { ...boxes };
+    for (const key of SECOND_FACE_TEXT_BOX_KEYS) {
+        const box = boxes[key];
+        if (box?.overrides) {
+            resolved[key] = resolveTextBox(box, state);
+        }
+    }
+    return resolved;
+}

package/dist/layout/color.d.ts

@@ -0,0 +1,23 @@
+export interface RgbColor {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Parses a browser-normalized color string — what a canvas 2D context's
+ * `fillStyle` getter returns after being assigned a valid CSS color, e.g.
+ * `"#ffffff"` or `"rgba(255, 0, 0, 0.5)"`. Hex and `rgb()`/`rgba()` only: a
+ * named color has to go through a canvas first.
+ */
+export declare function parseNormalizedCssColor(normalized: string): RgbColor | undefined;
+/**
+ * WCAG relative luminance of an sRGB color (0 = black, 1 = white).
+ * https://www.w3.org/TR/WCAG20/#relativeluminancedef
+ */
+export declare function relativeLuminance({ r, g, b }: RgbColor): number;
+/**
+ * Picks whichever of black or white text has the higher WCAG contrast ratio
+ * against `background` — the standard way to choose readable text color for
+ * an arbitrary, user-chosen background (e.g. the border-color setting).
+ */
+export declare function getReadableTextColor(background: RgbColor): "black" | "white";

package/dist/layout/color.js

@@ -0,0 +1,53 @@
+/**
+ * Parses a browser-normalized color string — what a canvas 2D context's
+ * `fillStyle` getter returns after being assigned a valid CSS color, e.g.
+ * `"#ffffff"` or `"rgba(255, 0, 0, 0.5)"`. Hex and `rgb()`/`rgba()` only: a
+ * named color has to go through a canvas first.
+ */
+export function parseNormalizedCssColor(normalized) {
+    const hex = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(normalized.trim());
+    const digits = hex?.[1];
+    if (digits) {
+        if (digits.length === 3) {
+            const [r = "0", g = "0", b = "0"] = digits;
+            return {
+                r: parseInt(r + r, 16),
+                g: parseInt(g + g, 16),
+                b: parseInt(b + b, 16),
+            };
+        }
+        return {
+            r: parseInt(digits.slice(0, 2), 16),
+            g: parseInt(digits.slice(2, 4), 16),
+            b: parseInt(digits.slice(4, 6), 16),
+        };
+    }
+    const fn = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/i.exec(normalized.trim());
+    const [, rStr, gStr, bStr] = fn ?? [];
+    if (rStr && gStr && bStr) {
+        return { r: Number(rStr), g: Number(gStr), b: Number(bStr) };
+    }
+    return undefined;
+}
+/**
+ * WCAG relative luminance of an sRGB color (0 = black, 1 = white).
+ * https://www.w3.org/TR/WCAG20/#relativeluminancedef
+ */
+export function relativeLuminance({ r, g, b }) {
+    const linear = (channel) => {
+        const c = channel / 255;
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+}
+/**
+ * Picks whichever of black or white text has the higher WCAG contrast ratio
+ * against `background` — the standard way to choose readable text color for
+ * an arbitrary, user-chosen background (e.g. the border-color setting).
+ */
+export function getReadableTextColor(background) {
+    const l = relativeLuminance(background);
+    const contrastWithWhite = 1.05 / (l + 0.05);
+    const contrastWithBlack = (l + 0.05) / 0.05;
+    return contrastWithWhite >= contrastWithBlack ? "white" : "black";
+}

package/dist/layout/cutouts.d.ts

@@ -0,0 +1,28 @@
+import type { BaseColor, FrameAssets, LayoutMasks } from "../schema/frameAssets.js";
+export interface FrameCutoutInput {
+    /** The mask set the face is drawn with. */
+    masks: LayoutMasks | undefined;
+    frameAssets: FrameAssets;
+    useNoBorder: boolean;
+    isLegendary: boolean;
+    hasNickname: boolean;
+    /** The base frame's color, after any fallback. */
+    frameColor: BaseColor;
+    /** The planeswalker 4+-ability ("tall") base frame is in use. */
+    isTallFrame: boolean;
+}
+/**
+ * The masks cut out of a face's combined frame — base art plus section
+ * overlays — in the order the renderer applies them as `destination-in`, each
+ * seeing the result of the one before:
+ *
+ * - `noBorder`, when "No Border" is on;
+ * - `legendary`, on a legendary card;
+ * - `extended`, whenever the layout ships it (the extended-art silhouette);
+ * - the planeswalker colorless-nickname banner cutout, on a nicknamed
+ *   colorless card.
+ *
+ * Crowns, nickname plates and PT boxes are drawn afterwards, over the result,
+ * so none of these cut them.
+ */
+export declare function frameCutoutMasks(input: FrameCutoutInput): string[];

package/dist/layout/cutouts.js

@@ -0,0 +1,29 @@
+/**
+ * The masks cut out of a face's combined frame — base art plus section
+ * overlays — in the order the renderer applies them as `destination-in`, each
+ * seeing the result of the one before:
+ *
+ * - `noBorder`, when "No Border" is on;
+ * - `legendary`, on a legendary card;
+ * - `extended`, whenever the layout ships it (the extended-art silhouette);
+ * - the planeswalker colorless-nickname banner cutout, on a nicknamed
+ *   colorless card.
+ *
+ * Crowns, nickname plates and PT boxes are drawn afterwards, over the result,
+ * so none of these cut them.
+ */
+export function frameCutoutMasks(input) {
+    const { masks, frameAssets, useNoBorder, isLegendary, hasNickname, frameColor, isTallFrame, } = input;
+    const nicknameMasks = frameAssets.planeswalker?.colorlessNicknameMasks;
+    const colorlessNickname = frameColor === "c" && hasNickname
+        ? isTallFrame
+            ? nicknameMasks?.tall
+            : nicknameMasks?.regular
+        : undefined;
+    return [
+        useNoBorder ? masks?.noBorder : undefined,
+        isLegendary ? masks?.legendary : undefined,
+        masks?.extended,
+        colorlessNickname,
+    ].filter((url) => Boolean(url));
+}