@ideare/kit 0.0.0-stage → 0.1.0-next.0

package/dist/files/generate.js

@@ -0,0 +1,254 @@
+import { OFL_TEXT } from "../fonts/ofl.js";
+import { VERSION } from "../version.js";
+import { brandArt, logoFragment } from "../scene/brand-art.js";
+import { RENDERER_VERSION, engineFor, renderScene } from "../scene/render.js";
+import { brandMd, headTags, ogAlt, promptMd, publicBrand, signatureHtml, slugOf, webManifest, } from "./docs.js";
+import { dpiChunk, packIco, sha256Hex, textChunk, withChunks } from "./png.js";
+import { AVATARS, BANNERS, CARD_SIZES, HIGHLIGHTS, avatarScene, backgroundScene, bannerScene, cardBackScene, cardFrontScene, catalogScene, emailLogoScene, highlightScene, logoScene, ogScene, tileScene, } from "./templates.js";
+import { dtcgTokens, fontsCss, registryTheme, tailwindCss, tokensCss } from "./tokens.js";
+/** The groups of files `generate()` can make. Each file's path starts with its group. */
+export const TARGETS = [
+    "web",
+    "logo",
+    "og",
+    "social",
+    "tokens",
+    "registry",
+    "docs",
+    "email",
+    "print",
+];
+/** A file that would cut or overflow text, or drop a character, is refused rather than made. */
+export class GenerateRefusal extends Error {
+    problems;
+    constructor(problems) {
+        super(`ideare did not make ${problems.length === 1 ? "1 file" : `${problems.length} files`}, because the text would not fit or show: ${problems
+            .slice(0, 3)
+            .map((problem) => `${problem.path} (${problem.check.message})`)
+            .join("; ")}. Run check() for the fixes.`);
+        this.name = "GenerateRefusal";
+        this.problems = problems;
+    }
+}
+const REFUSED_RULES = new Set(["text.fit", "fonts.glyphs", "filters.budget", "icon.unknown"]);
+const encoder = new TextEncoder();
+/**
+ * Every derived file of a brand, by path. Pure: nothing is written; the caller (the CLI, the
+ * worker, the browser zip) decides where bytes go. PNGs carry a tEXt provenance chunk; print
+ * files also say 300 dpi.
+ */
+export async function generate(brand, options) {
+    const targets = new Set(options.targets ?? TARGETS);
+    const files = new Map();
+    const refusals = [];
+    const engine = await engineFor(options.fonts);
+    const art = await brandArt(brand, engine);
+    const provenance = `${slugOf(brand)}${brand.version ? `@v${brand.version}` : " draft"}`;
+    const add = async (path, bytes, mime, size) => {
+        files.set(path, { bytes, mime, sha256: await sha256Hex(bytes), ...size });
+    };
+    const addText = (path, text, mime) => add(path, encoder.encode(text), mime);
+    const svgOf = async (path, scene) => {
+        const result = await renderScene(scene, brand, {
+            fonts: options.fonts,
+            idPrefix: path.replace(/[^a-z0-9]+/gi, "-"),
+        });
+        for (const check of result.checks)
+            if (REFUSED_RULES.has(check.rule))
+                refusals.push({ path, check });
+        return result.svg;
+    };
+    const png = async (path, scene, extra = []) => {
+        const svg = await svgOf(path, scene);
+        const raster = await options.rasterize(svg, { width: scene.size.w });
+        const bytes = withChunks(raster.png, [
+            textChunk("Software", `ideare kit ${VERSION}, renderer ${RENDERER_VERSION}`),
+            textChunk("Source", `ideare brand ${provenance}, file ${path}`),
+            ...extra,
+        ]);
+        await add(path, bytes, "image/png", { width: raster.width, height: raster.height });
+        return bytes;
+    };
+    const svgFile = async (path, scene) => {
+        await add(path, encoder.encode(await svgOf(path, scene)), "image/svg+xml", {
+            width: scene.size.w,
+            height: scene.size.h,
+        });
+    };
+    const tile = brand.mark.tile;
+    if (targets.has("web")) {
+        const small = (size) => tileScene(brand, {
+            size,
+            padding: Math.min(tile.padding, 0.12) / 2,
+            opaque: false,
+            variant: "small",
+        });
+        const ico = [];
+        for (const size of [16, 32, 48]) {
+            const svg = await svgOf(`web/favicon.ico#${size}`, small(size));
+            ico.push((await options.rasterize(svg, { width: size })).png);
+        }
+        await add("web/favicon.ico", packIco(ico), "image/x-icon", { width: 48, height: 48 });
+        // icon.svg follows the system theme inside the file: browsers read its media query.
+        const light = await svgOf("web/icon.svg", tileScene(brand, {
+            size: 64,
+            padding: tile.padding / 2,
+            opaque: false,
+            variant: "small",
+        }));
+        const dark = await svgOf("web/icon.svg#dark", tileScene(brand, {
+            size: 64,
+            padding: tile.padding / 2,
+            opaque: false,
+            variant: "small",
+            theme: "dark",
+        }));
+        const inner = (svg) => svg.slice(svg.indexOf(">") + 1, svg.lastIndexOf("</svg>"));
+        await addText("web/icon.svg", `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><style>.d{display:none}@media (prefers-color-scheme:dark){.l{display:none}.d{display:inline}}</style><g class="l">${inner(light)}</g><g class="d">${inner(dark)}</g></svg>`, "image/svg+xml");
+        await png("web/favicon-96x96.png", tileScene(brand, {
+            size: 96,
+            padding: tile.padding / 2,
+            opaque: false,
+            variant: "small",
+        }));
+        await png("web/apple-touch-icon.png", tileScene(brand, {
+            size: 180,
+            padding: Math.max(tile.padding * 0.8, 0.1),
+            opaque: true,
+            variant: "mark",
+        }));
+        await png("web/web-app-manifest-192x192.png", tileScene(brand, { size: 192, padding: tile.padding, opaque: false, variant: "mark" }));
+        await png("web/web-app-manifest-512x512.png", tileScene(brand, { size: 512, padding: tile.padding, opaque: false, variant: "mark" }));
+        await png("web/web-app-manifest-maskable-512x512.png", tileScene(brand, {
+            size: 512,
+            padding: Math.max(tile.padding, 0.22),
+            opaque: true,
+            variant: "mark",
+        }));
+        await addText("web/site.webmanifest", `${JSON.stringify(webManifest(brand), null, 2)}\n`, "application/manifest+json");
+    }
+    if (targets.has("logo")) {
+        const natural = (variant) => logoFragment(art, brand, variant, "color", brand.colors.light.ground);
+        const layouts = {
+            horizontal: "horizontal",
+            stacked: "stacked",
+            symbol: "mark",
+            name: "wordmark",
+        };
+        for (const [name, variant] of Object.entries(layouts)) {
+            const fragment = natural(variant);
+            const height = variant === "horizontal" || variant === "wordmark" ? 128 : 256;
+            const width = Math.round((height * fragment.w) / fragment.h);
+            // The big PNG is 4x, or as large as a scene may be (8192 px, with room for the
+            // brand-color padding) when a long name makes the lockup very wide.
+            const big = Math.min(4, 7680 / width);
+            for (const tone of ["color", "ink", "white", "brand"]) {
+                const base = `logo/${name}-${tone === "brand" ? "on-brand" : tone}`;
+                await svgFile(`${base}.svg`, logoScene(variant, tone, width, height));
+                await png(`${base}.png`, logoScene(variant, tone, width, height));
+                await png(`${base}@4x.png`, logoScene(variant, tone, Math.round(width * big), Math.round(height * big)));
+            }
+            if (name === "horizontal") {
+                await svgFile(`logo/${name}-color-dark.svg`, logoScene(variant, "color", width, height, "dark"));
+            }
+        }
+        const mark = natural("mark");
+        const markWidth = Math.round((256 * mark.w) / mark.h);
+        await svgFile("logo/mark.svg", logoScene("mark", "color", markWidth, 256));
+        await svgFile("logo/mark-dark.svg", logoScene("mark", "color", markWidth, 256, "dark"));
+        const horizontal = natural("horizontal");
+        const logoWidth = Math.round((128 * horizontal.w) / horizontal.h);
+        await svgFile("logo/logo.svg", logoScene("horizontal", "color", logoWidth, 128));
+        await svgFile("logo/logo-dark.svg", logoScene("horizontal", "color", logoWidth, 128, "dark"));
+        await svgFile("logo/small.svg", logoScene("small", "color", 32, 32));
+        await png("logo/small-16.png", logoScene("small", "color", 16, 16));
+        await png("logo/small-32.png", logoScene("small", "color", 32, 32));
+        await png("logo/icon-1024.png", tileScene(brand, { size: 1024, padding: tile.padding, opaque: true, variant: "mark" }));
+    }
+    if (targets.has("og")) {
+        // og.png is the default language's card (the fleet's name); each language also has its own.
+        const cards = [
+            ["og/og", brand.defaultLocale],
+            ...brand.locales.map((locale) => [`og/og.${locale}`, locale]),
+        ];
+        for (const [base, locale] of cards) {
+            await png(`${base}.png`, ogScene(brand, locale));
+            await addText(`${base}.alt.txt`, `${ogAlt(brand, locale)}\n`, "text/plain");
+        }
+        for (const page of options.pages ?? []) {
+            for (const locale of brand.locales) {
+                const copy = page.copy[locale];
+                if (!copy)
+                    continue;
+                const path = `og/${page.slug}.${locale}.png`;
+                await png(path, ogScene(brand, locale, copy));
+                await addText(path.replace(/\.png$/, ".alt.txt"), `${ogAlt(brand, locale, copy.title)}\n`, "text/plain");
+            }
+        }
+    }
+    if (targets.has("social")) {
+        const locale = brand.defaultLocale;
+        for (const [path, size] of Object.entries(AVATARS))
+            await png(`social/${path}`, avatarScene(brand, size));
+        for (const [path, banner] of Object.entries(BANNERS))
+            await png(`social/${path}`, bannerScene(brand, locale, banner.w, banner.h, banner.safe));
+        for (const [name, icon] of Object.entries(HIGHLIGHTS))
+            await png(`social/instagram/highlight-${name}.png`, highlightScene(icon));
+        await png("social/instagram/post-background.png", backgroundScene(1080, 1350, 80));
+        await png("social/instagram/story-background.png", backgroundScene(1080, 1920, 340));
+        await png("social/whatsapp/status-background.png", backgroundScene(1080, 1920, 340));
+        await png("social/whatsapp/catalog.png", catalogScene(brand, locale));
+    }
+    if (targets.has("tokens")) {
+        await addText("tokens/tokens.css", tokensCss(brand, { dark: options.dark }), "text/css");
+        await addText("tokens/tailwind.css", tailwindCss(brand), "text/css");
+        await addText("tokens/brand.tokens.json", `${JSON.stringify(dtcgTokens(brand), null, 2)}\n`, "application/design-tokens+json");
+        await addText("tokens/fonts.css", fontsCss(brand), "text/css");
+        const notices = new Set();
+        for (const role of ["display", "text"]) {
+            const font = brand.fonts[role];
+            for (const weight of font.weights) {
+                const path = `tokens/fonts/${font.id}-${weight}.woff2`;
+                if (files.has(path))
+                    continue;
+                await add(path, await options.fonts.load({ id: font.id, weight, format: "woff2" }), "font/woff2");
+                const loaded = await engine.font({ id: font.id, weight });
+                notices.add(`${font.family}: ${loaded.copyright || `the ${font.family} authors`}`);
+            }
+        }
+        const licenseText = brand.fonts.display.license === "Apache-2.0" ||
+            brand.fonts.text.license === "Apache-2.0"
+            ? `${OFL_TEXT}\nFonts marked Apache-2.0 are under the Apache License, Version 2.0: https://www.apache.org/licenses/LICENSE-2.0\n`
+            : OFL_TEXT;
+        await addText("tokens/OFL.txt", `${[...notices].join("\n")}\n\n${licenseText}`, "text/plain");
+    }
+    if (targets.has("registry")) {
+        await addText("registry/theme.json", `${JSON.stringify(registryTheme(brand), null, 2)}\n`, "application/json");
+    }
+    if (targets.has("docs")) {
+        await addText("docs/brand.md", brandMd(brand), "text/markdown");
+        await addText("docs/brand.json", `${JSON.stringify(publicBrand(brand), null, 4)}\n`, "application/json");
+        const ogImage = options.filesUrl
+            ? `${options.filesUrl.replace(/\/?$/, "/")}og/og.png`
+            : undefined;
+        await addText("docs/head.html", `${headTags(brand, { ogImage, dark: options.dark }).join("\n")}\n`, "text/html");
+        await addText("docs/prompt.md", promptMd(brand, { filesUrl: options.filesUrl }), "text/markdown");
+    }
+    if (targets.has("email")) {
+        await png("email/email-logo@2x.png", emailLogoScene());
+        const logoUrl = options.filesUrl
+            ? `${options.filesUrl.replace(/\/?$/, "/")}email/email-logo@2x.png`
+            : "email-logo@2x.png";
+        await addText("email/signature.html", signatureHtml(brand, { logoUrl }), "text/html");
+    }
+    if (targets.has("print")) {
+        const dpi = dpiChunk(300);
+        for (const size of Object.keys(CARD_SIZES)) {
+            await png(`print/business-card-${size}-front.png`, cardFrontScene(size), [dpi]);
+            await png(`print/business-card-${size}-back.png`, cardBackScene(brand, size, brand.defaultLocale), [dpi]);
+        }
+    }
+    if (refusals.length)
+        throw new GenerateRefusal(refusals);
+    return files;
+}

package/dist/files/png.d.ts

@@ -0,0 +1,40 @@
+/**
+ * PNG and ICO bytes in pure JS: read a PNG's size, add provenance chunks, pack an .ico. No
+ * Buffer, so it runs in the browser too.
+ */
+export declare function isPng(bytes: Uint8Array): boolean;
+/** Width and height from the IHDR chunk. */
+export declare function pngSize(bytes: Uint8Array): {
+    width: number;
+    height: number;
+};
+/** One PNG chunk: length, type, data and CRC. */
+export declare function pngChunk(type: string, data: Uint8Array): Uint8Array;
+/** A tEXt chunk: a Latin-1 keyword and text (PNG spec 11.3.4.3). */
+export declare function textChunk(keyword: string, text: string): Uint8Array;
+/** An uncompressed iTXt chunk with UTF-8 text, the home of XMP (`XML:com.adobe.xmp`). */
+export declare function itxtChunk(keyword: string, text: string): Uint8Array;
+/** A pHYs chunk: the pixel density, so print shops read 300 dpi instead of guessing. */
+export declare function dpiChunk(dpi: number): Uint8Array;
+/** Insert chunks right after IHDR, so they come before the image data. */
+export declare function withChunks(png: Uint8Array, chunks: Uint8Array[]): Uint8Array;
+/**
+ * The XMP packet that marks a picture as made by a generative model, with the IPTC digital
+ * source type the EU AI Act's Art. 50 labelling points at.
+ */
+export declare function aiProvenanceXmp(tool: string): string;
+/**
+ * Pack PNGs (16, 32 and 48 px, say) into one .ico. Each entry holds the PNG as it is, which every
+ * browser since IE9 reads: 2 KB where a BMP-entry packer writes 15 KB. Ported from enarro's
+ * gen-brand-assets.ts.
+ */
+export declare function packIco(pngs: readonly Uint8Array[]): Uint8Array;
+/** Read an .ico back into its entries (for checks and tests). */
+export declare function readIco(bytes: Uint8Array): {
+    width: number;
+    height: number;
+    png: Uint8Array;
+}[];
+/** sha256 of some bytes, as lowercase hex. */
+export declare function sha256Hex(bytes: Uint8Array | string): Promise<string>;
+export declare function base64(bytes: Uint8Array): string;

package/dist/files/png.js

@@ -0,0 +1,168 @@
+/**
+ * PNG and ICO bytes in pure JS: read a PNG's size, add provenance chunks, pack an .ico. No
+ * Buffer, so it runs in the browser too.
+ */
+const PNG_SIGNATURE = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
+const CRC_TABLE = (() => {
+    const table = new Uint32Array(256);
+    for (let n = 0; n < 256; n++) {
+        let c = n;
+        for (let k = 0; k < 8; k++)
+            c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+        table[n] = c >>> 0;
+    }
+    return table;
+})();
+function crc32(bytes) {
+    let crc = 0xffffffff;
+    for (const byte of bytes)
+        crc = (CRC_TABLE[(crc ^ byte) & 0xff] ?? 0) ^ (crc >>> 8);
+    return (crc ^ 0xffffffff) >>> 0;
+}
+export function isPng(bytes) {
+    return bytes.length >= 24 && PNG_SIGNATURE.every((value, index) => bytes[index] === value);
+}
+/** Width and height from the IHDR chunk. */
+export function pngSize(bytes) {
+    if (!isPng(bytes))
+        throw new TypeError("Not a PNG: the signature is missing");
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    return { width: view.getUint32(16), height: view.getUint32(20) };
+}
+/** One PNG chunk: length, type, data and CRC. */
+export function pngChunk(type, data) {
+    const out = new Uint8Array(12 + data.length);
+    const view = new DataView(out.buffer);
+    view.setUint32(0, data.length);
+    for (let i = 0; i < 4; i++)
+        out[4 + i] = type.charCodeAt(i);
+    out.set(data, 8);
+    view.setUint32(8 + data.length, crc32(out.subarray(4, 8 + data.length)));
+    return out;
+}
+function latin1(text) {
+    return Uint8Array.from(text, (char) => {
+        const code = char.charCodeAt(0);
+        return code < 256 ? code : 0x3f;
+    });
+}
+/** A tEXt chunk: a Latin-1 keyword and text (PNG spec 11.3.4.3). */
+export function textChunk(keyword, text) {
+    const key = latin1(keyword.slice(0, 79));
+    const value = latin1(text);
+    const data = new Uint8Array(key.length + 1 + value.length);
+    data.set(key, 0);
+    data.set(value, key.length + 1);
+    return pngChunk("tEXt", data);
+}
+/** An uncompressed iTXt chunk with UTF-8 text, the home of XMP (`XML:com.adobe.xmp`). */
+export function itxtChunk(keyword, text) {
+    const key = latin1(keyword);
+    const value = new TextEncoder().encode(text);
+    // keyword \0, compression flag 0, method 0, empty language \0, empty translated keyword \0.
+    const data = new Uint8Array(key.length + 5 + value.length);
+    data.set(key, 0);
+    data.set(value, key.length + 5);
+    return pngChunk("iTXt", data);
+}
+/** A pHYs chunk: the pixel density, so print shops read 300 dpi instead of guessing. */
+export function dpiChunk(dpi) {
+    const data = new Uint8Array(9);
+    const view = new DataView(data.buffer);
+    const perMeter = Math.round(dpi / 0.0254);
+    view.setUint32(0, perMeter);
+    view.setUint32(4, perMeter);
+    data[8] = 1; // the unit is the meter
+    return pngChunk("pHYs", data);
+}
+/** Insert chunks right after IHDR, so they come before the image data. */
+export function withChunks(png, chunks) {
+    if (!isPng(png))
+        throw new TypeError("Not a PNG: the signature is missing");
+    const afterHeader = 8 + 25; // signature + IHDR (4 length + 4 type + 13 data + 4 crc)
+    const extra = chunks.reduce((sum, item) => sum + item.length, 0);
+    const out = new Uint8Array(png.length + extra);
+    out.set(png.subarray(0, afterHeader), 0);
+    let offset = afterHeader;
+    for (const item of chunks) {
+        out.set(item, offset);
+        offset += item.length;
+    }
+    out.set(png.subarray(afterHeader), offset);
+    return out;
+}
+/**
+ * The XMP packet that marks a picture as made by a generative model, with the IPTC digital
+ * source type the EU AI Act's Art. 50 labelling points at.
+ */
+export function aiProvenanceXmp(tool) {
+    return (`<?xpacket begin="\uFEFF" id="W5M0MpCehiHzreSzNTczkc9d"?>` +
+        `<x:xmpmeta xmlns:x="adobe:ns:meta/"><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">` +
+        `<rdf:Description rdf:about="" xmlns:Iptc4xmpExt="http://iptc.org/std/Iptc4xmpExt/2008-02-29/" xmlns:xmp="http://ns.adobe.com/xap/1.0/" ` +
+        `Iptc4xmpExt:DigitalSourceType="http://cv.iptc.org/newscodes/digitalsourcetype/trainedAlgorithmicMedia" xmp:CreatorTool="${tool.replace(/[<>&"]/g, "")}"/>` +
+        `</rdf:RDF></x:xmpmeta><?xpacket end="r"?>`);
+}
+/**
+ * Pack PNGs (16, 32 and 48 px, say) into one .ico. Each entry holds the PNG as it is, which every
+ * browser since IE9 reads: 2 KB where a BMP-entry packer writes 15 KB. Ported from enarro's
+ * gen-brand-assets.ts.
+ */
+export function packIco(pngs) {
+    if (pngs.length === 0 || pngs.length > 255)
+        throw new RangeError("packIco takes 1 to 255 PNGs");
+    const headerSize = 6 + pngs.length * 16;
+    const total = headerSize + pngs.reduce((sum, png) => sum + png.byteLength, 0);
+    const out = new Uint8Array(total);
+    const view = new DataView(out.buffer);
+    view.setUint16(0, 0, true); // reserved
+    view.setUint16(2, 1, true); // type: icon
+    view.setUint16(4, pngs.length, true);
+    let dataOffset = headerSize;
+    pngs.forEach((png, index) => {
+        const { width, height } = pngSize(png);
+        if (width < 1 || height < 1 || width > 256 || height > 256) {
+            throw new RangeError(`An .ico entry is 1 to 256 px wide, not ${width}x${height}`);
+        }
+        const entry = 6 + index * 16;
+        out[entry] = width >= 256 ? 0 : width;
+        out[entry + 1] = height >= 256 ? 0 : height;
+        view.setUint16(entry + 4, 1, true); // color planes
+        view.setUint16(entry + 6, 32, true); // bits per pixel
+        view.setUint32(entry + 8, png.byteLength, true);
+        view.setUint32(entry + 12, dataOffset, true);
+        out.set(png, dataOffset);
+        dataOffset += png.byteLength;
+    });
+    return out;
+}
+/** Read an .ico back into its entries (for checks and tests). */
+export function readIco(bytes) {
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    if (view.getUint16(0, true) !== 0 || view.getUint16(2, true) !== 1) {
+        throw new TypeError("Not an .ico file");
+    }
+    const count = view.getUint16(4, true);
+    return Array.from({ length: count }, (_, index) => {
+        const entry = 6 + index * 16;
+        const size = view.getUint32(entry + 8, true);
+        const offset = view.getUint32(entry + 12, true);
+        return {
+            width: bytes[entry] || 256,
+            height: bytes[entry + 1] || 256,
+            png: bytes.subarray(offset, offset + size),
+        };
+    });
+}
+/** sha256 of some bytes, as lowercase hex. */
+export async function sha256Hex(bytes) {
+    const data = typeof bytes === "string" ? new TextEncoder().encode(bytes) : new Uint8Array(bytes);
+    const digest = new Uint8Array(await crypto.subtle.digest("SHA-256", data));
+    return Array.from(digest, (byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+export function base64(bytes) {
+    let binary = "";
+    for (let i = 0; i < bytes.length; i += 0x8000) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+    }
+    return btoa(binary);
+}

package/dist/files/raster.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Turning SVG into pixels is a plug-in, so the core stays pure: `@ideare/kit/resvg` on Node and
+ * Bun (native resvg-js), and `@ideare/kit/wasm` (resvg-wasm) in the browser and the CLI.
+ */
+export type Raster = {
+    png: Uint8Array;
+    /** Straight RGBA, row by row, for checks that read pixels. */
+    pixels: Uint8Array;
+    width: number;
+    height: number;
+};
+export type Rasterizer = (svg: string, size: {
+    width: number;
+}) => Promise<Raster>;

package/dist/files/templates.d.ts

@@ -0,0 +1,162 @@
+import type { Brand, Locale } from "../brand/schema.ts";
+import type { Scene, SolidPaint } from "../scene/schema.ts";
+/**
+ * The scenes behind every derived file. Each one is plain data, so the studio can show the same
+ * scene in the kit grid and the editor can open any of them as a starting design.
+ */
+export declare const TRANSPARENT: SolidPaint;
+type Theme = "light" | "dark";
+export type TileSpec = {
+    size: number;
+    /** Space around the mark, as a fraction of the side. */
+    padding: number;
+    /** Full-bleed and opaque (apple, maskable) or the brand's tile shape on transparent. */
+    opaque: boolean;
+    variant: "mark" | "small";
+    theme?: Theme;
+};
+/** The mark on the brand's tile, for favicons and app icons. */
+export declare function tileScene(brand: Brand, spec: TileSpec): Scene;
+/** A profile picture: the mark inside the circle every network crops to. */
+export declare function avatarScene(brand: Brand, size: number): Scene;
+/** A logo version on its own: transparent, or on the brand color. */
+export declare function logoScene(variant: "mark" | "small" | "wordmark" | "horizontal" | "stacked", tone: "color" | "ink" | "white" | "brand", w: number, h: number, theme?: Theme): Scene;
+export type CardCopy = {
+    title: string;
+    subtitle?: string;
+};
+/** The 1200 by 630 share card, in one language. */
+export declare function ogScene(brand: Brand, locale: Locale, copy?: CardCopy): Scene;
+/** A cover or banner: the logo and the tagline centered inside the network's safe area. */
+export declare function bannerScene(brand: Brand, locale: Locale, w: number, h: number, safe: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}): Scene;
+/** A soft branded background for posts, stories and status, with the mark in a corner. */
+export declare function backgroundScene(w: number, h: number, bottomSafe: number): Scene;
+/** An Instagram highlight cover: one icon in the circle Instagram shows. */
+export declare function highlightScene(icon: string): Scene;
+/** A square catalog image: the stacked logo and the tagline. */
+export declare function catalogScene(brand: Brand, locale: Locale): Scene;
+/** The email logo: an opaque bar at 2x, so Gmail's dark mode cannot invert a transparent logo. */
+export declare function emailLogoScene(): Scene;
+export declare const CARD_SIZES: {
+    readonly br: {
+        readonly w: 90;
+        readonly h: 50;
+        readonly label: "Brazil, 90 by 50 mm";
+    };
+    readonly us: {
+        readonly w: 88.9;
+        readonly h: 50.8;
+        readonly label: "US, 3.5 by 2 in";
+    };
+    readonly eu: {
+        readonly w: 85;
+        readonly h: 55;
+        readonly label: "Europe, 85 by 55 mm";
+    };
+};
+export type CardSize = keyof typeof CARD_SIZES;
+export declare const BLEED_MM = 3;
+/** The canvas of a business card at 300 dpi, bleed included, and its safe box. */
+export declare function cardCanvas(size: CardSize): {
+    w: number;
+    h: number;
+    safe: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+};
+/** The front: the stacked logo on the brand color, to the bleed. */
+export declare function cardFrontScene(size: CardSize): Scene;
+/** The back: the name, the tagline and the public contacts. */
+export declare function cardBackScene(brand: Brand, size: CardSize, locale: Locale): Scene;
+/** Safe areas per network, in px of each canvas (research: brandgen, section 5). */
+export declare const BANNERS: {
+    readonly "x/header-1500x500.png": {
+        readonly w: 1500;
+        readonly h: 500;
+        readonly safe: {
+            readonly x: 420;
+            readonly y: 70;
+            readonly w: 1020;
+            readonly h: 360;
+        };
+    };
+    readonly "facebook/cover-851x315.png": {
+        readonly w: 851;
+        readonly h: 315;
+        readonly safe: {
+            readonly x: 146;
+            readonly y: 40;
+            readonly w: 560;
+            readonly h: 235;
+        };
+    };
+    readonly "linkedin/cover-1512x256.png": {
+        readonly w: 1512;
+        readonly h: 256;
+        readonly safe: {
+            readonly x: 360;
+            readonly y: 40;
+            readonly w: 1092;
+            readonly h: 176;
+        };
+    };
+    readonly "linkedin/personal-1584x396.png": {
+        readonly w: 1584;
+        readonly h: 396;
+        readonly safe: {
+            readonly x: 420;
+            readonly y: 60;
+            readonly w: 1104;
+            readonly h: 276;
+        };
+    };
+    readonly "youtube/banner-2560x1440.png": {
+        readonly w: 2560;
+        readonly h: 1440;
+        readonly safe: {
+            readonly x: 507;
+            readonly y: 509;
+            readonly w: 1546;
+            readonly h: 423;
+        };
+    };
+    readonly "google/cover-1024x576.png": {
+        readonly w: 1024;
+        readonly h: 576;
+        readonly safe: {
+            readonly x: 102;
+            readonly y: 58;
+            readonly w: 820;
+            readonly h: 460;
+        };
+    };
+};
+export declare const AVATARS: {
+    readonly "avatar-1080.png": 1080;
+    readonly "instagram/avatar-320.png": 320;
+    readonly "whatsapp/avatar-640.png": 640;
+    readonly "google/logo-720.png": 720;
+    readonly "x/avatar-400.png": 400;
+    readonly "facebook/profile-320.png": 320;
+    readonly "linkedin/logo-400.png": 400;
+    readonly "youtube/avatar-800.png": 800;
+    readonly "tiktok/avatar-200.png": 200;
+};
+/** Instagram highlight covers: file name, icon. */
+export declare const HIGHLIGHTS: {
+    readonly about: "info";
+    readonly hours: "clock";
+    readonly location: "map-pin";
+    readonly offers: "tag";
+    readonly contact: "message-circle";
+    readonly reviews: "star";
+};
+export {};