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

package/dist/files/templates.js

@@ -0,0 +1,390 @@
+import { copyFor } from "./docs.js";
+/**
+ * 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 const TRANSPARENT = { hex: "#000000", alpha: 0 };
+const MM = 300 / 25.4; // px per mm at 300 dpi
+function scene(w, h, theme, layers, background, extra = {}) {
+    return {
+        v: 1,
+        size: { w: Math.round(w), h: Math.round(h) },
+        theme,
+        pages: [{ id: "p", background, layers, ...extra }],
+    };
+}
+/** Two soft color fields, drawn as radial gradients (never blur: render.md rule 9). */
+function blobs(w, h, first = "primary", second = "accent") {
+    const r1 = Math.max(w, h) * 0.55;
+    const r2 = Math.max(w, h) * 0.45;
+    const blob = (id, cx, cy, r, token, alpha) => ({
+        id,
+        type: "shape",
+        shape: "ellipse",
+        frame: { x: cx - r, y: cy - r, w: 2 * r, h: 2 * r },
+        fill: {
+            radial: {
+                cx: 0.5,
+                cy: 0.5,
+                r: 0.5,
+                stops: [
+                    { at: 0, paint: { token, alpha } },
+                    { at: 1, paint: { token, alpha: 0 } },
+                ],
+            },
+        },
+    });
+    return [
+        blob("glow-1", w * 0.92, h * 0.1, r1, first, 0.16),
+        blob("glow-2", w * 0.78, h * 1.02, r2, second, 0.18),
+    ];
+}
+/** The mark on the brand's tile, for favicons and app icons. */
+export function tileScene(brand, spec) {
+    const { size, padding } = spec;
+    const tile = brand.mark.tile;
+    const fill = { token: tile.fill };
+    const inset = size * padding;
+    const logo = {
+        id: "mark",
+        type: "logo",
+        variant: spec.variant,
+        tone: "color",
+        frame: { x: inset, y: inset, w: size - 2 * inset, h: size - 2 * inset },
+    };
+    if (spec.opaque)
+        return scene(size, size, spec.theme ?? "light", [
+            {
+                id: "tile",
+                type: "shape",
+                shape: "rect",
+                frame: { x: 0, y: 0, w: size, h: size },
+                fill,
+            },
+            logo,
+        ], fill);
+    const shape = tile.shape === "circle"
+        ? {
+            id: "tile",
+            type: "shape",
+            shape: "ellipse",
+            frame: { x: 0, y: 0, w: size, h: size },
+            fill,
+        }
+        : {
+            id: "tile",
+            type: "shape",
+            shape: "rect",
+            radius: tile.shape === "rounded" ? tile.radius * size : 0,
+            frame: { x: 0, y: 0, w: size, h: size },
+            fill,
+        };
+    return scene(size, size, spec.theme ?? "light", [shape, logo], TRANSPARENT);
+}
+/** A profile picture: the mark inside the circle every network crops to. */
+export function avatarScene(brand, size) {
+    // Inset 0.2 keeps the mark's box inside the inscribed circle (its diagonal is 0.85 of it).
+    return tileScene(brand, {
+        size,
+        padding: 0.2,
+        opaque: true,
+        variant: size < 64 ? "small" : "mark",
+    });
+}
+/** A logo version on its own: transparent, or on the brand color. */
+export function logoScene(variant, tone, w, h, theme = "light") {
+    if (tone === "brand") {
+        const pad = Math.round(h * 0.2);
+        return scene(w + 2 * pad, h + 2 * pad, theme, [{ id: "logo", type: "logo", variant, tone: "color", frame: { x: pad, y: pad, w, h } }], { token: "primary" });
+    }
+    // A see-through ground still tells the logo what it sits on, so it picks its dark version.
+    return scene(w, h, theme, [{ id: "logo", type: "logo", variant, tone, frame: { x: 0, y: 0, w, h } }], { token: "ground", alpha: 0 });
+}
+/** The 1200 by 630 share card, in one language. */
+export function ogScene(brand, locale, copy) {
+    const card = copy ?? copyFor(brand, locale).card;
+    const layers = [
+        ...blobs(1200, 630),
+        {
+            id: "logo",
+            type: "logo",
+            variant: "horizontal",
+            tone: "color",
+            align: "start",
+            frame: { x: 80, y: 72, w: 520, h: 72 },
+        },
+        {
+            id: "title",
+            type: "text",
+            slot: "title",
+            text: card.title,
+            frame: { x: 80, y: 196, w: 900, h: 250 },
+            style: {
+                font: { role: "display" },
+                size: 78,
+                lineHeight: 1.08,
+                valign: "bottom",
+                fill: { token: "ink" },
+            },
+            fit: { mode: "shrink", min: 44, maxLines: 3 },
+        },
+    ];
+    if (card.subtitle) {
+        layers.push({
+            id: "subtitle",
+            type: "text",
+            slot: "subtitle",
+            text: card.subtitle,
+            frame: { x: 80, y: 470, w: 960, h: 44 },
+            style: { font: { role: "text" }, size: 30, lineHeight: 1.25, fill: { token: "muted" } },
+            fit: { mode: "shrink", min: 22, maxLines: 1 },
+        });
+    }
+    if (brand.domain) {
+        layers.push({
+            id: "domain",
+            type: "text",
+            text: brand.domain,
+            frame: { x: 80, y: 548, w: 1040, h: 34 },
+            style: {
+                font: { role: "text", weight: 600 },
+                size: 24,
+                lineHeight: 1.2,
+                fill: { token: "primary" },
+            },
+            fit: { mode: "shrink", min: 16, maxLines: 1 },
+        });
+    }
+    // No grain on files: noise does not compress, and it took the card from 60 KB to 530 KB.
+    return { ...scene(1200, 630, "light", layers, { token: "ground" }), locale };
+}
+/** A cover or banner: the logo and the tagline centered inside the network's safe area. */
+export function bannerScene(brand, locale, w, h, safe) {
+    const copy = copyFor(brand, locale);
+    const logoHeight = Math.min(safe.h * 0.3, safe.w * 0.12);
+    const tagSize = Math.max(14, Math.min(safe.h * 0.13, 64));
+    // Centered for a one-line tagline; a longer one takes a second line below it, which every
+    // network's safe area has room for (a 60-character tagline, the copy limit, needs it on the
+    // Google and Facebook covers).
+    const block = logoHeight + tagSize * 1.9;
+    const top = safe.y + (safe.h - block) / 2;
+    const layers = [
+        ...blobs(w, h),
+        {
+            id: "logo",
+            type: "logo",
+            variant: "horizontal",
+            tone: "color",
+            frame: { x: safe.x, y: top, w: safe.w, h: logoHeight },
+        },
+        {
+            id: "tagline",
+            type: "text",
+            slot: "tagline",
+            text: copy.tagline,
+            frame: { x: safe.x, y: top + logoHeight + tagSize * 0.6, w: safe.w, h: tagSize * 2.5 },
+            style: {
+                font: { role: "display" },
+                size: tagSize,
+                lineHeight: 1.2,
+                align: "center",
+                valign: "top",
+                fill: { token: "ink" },
+            },
+            fit: { mode: "shrink", min: Math.max(12, tagSize * 0.6), maxLines: 2 },
+        },
+    ];
+    return { ...scene(w, h, "light", layers, { token: "surface" }), locale };
+}
+/** A soft branded background for posts, stories and status, with the mark in a corner. */
+export function backgroundScene(w, h, bottomSafe) {
+    const size = Math.round(w * 0.09);
+    const layers = [
+        ...blobs(w, h),
+        {
+            id: "mark",
+            type: "logo",
+            variant: "mark",
+            tone: "color",
+            frame: { x: w - size - w * 0.07, y: h - bottomSafe - size, w: size, h: size },
+        },
+    ];
+    return scene(w, h, "light", layers, { token: "surface" });
+}
+/** An Instagram highlight cover: one icon in the circle Instagram shows. */
+export function highlightScene(icon) {
+    const size = 360;
+    return scene(1080, 1920, "light", [
+        {
+            id: "icon",
+            type: "icon",
+            icon,
+            stroke: { token: "onPrimary" },
+            strokeWidth: 1.6,
+            frame: { x: (1080 - size) / 2, y: (1920 - size) / 2, w: size, h: size },
+        },
+    ], { token: "primary" });
+}
+/** A square catalog image: the stacked logo and the tagline. */
+export function catalogScene(brand, locale) {
+    const copy = copyFor(brand, locale);
+    return {
+        ...scene(1080, 1080, "light", [
+            ...blobs(1080, 1080),
+            {
+                id: "logo",
+                type: "logo",
+                variant: "stacked",
+                tone: "color",
+                frame: { x: 240, y: 300, w: 600, h: 340 },
+            },
+            {
+                id: "tagline",
+                type: "text",
+                slot: "tagline",
+                text: copy.tagline,
+                frame: { x: 120, y: 700, w: 840, h: 120 },
+                style: {
+                    font: { role: "display" },
+                    size: 54,
+                    lineHeight: 1.15,
+                    align: "center",
+                    fill: { token: "ink" },
+                },
+                fit: { mode: "shrink", min: 32, maxLines: 2 },
+            },
+        ], { token: "surface" }),
+        locale,
+    };
+}
+/** The email logo: an opaque bar at 2x, so Gmail's dark mode cannot invert a transparent logo. */
+export function emailLogoScene() {
+    return scene(600, 160, "light", [
+        {
+            id: "logo",
+            type: "logo",
+            variant: "horizontal",
+            tone: "color",
+            align: "start",
+            frame: { x: 24, y: 32, w: 552, h: 96 },
+        },
+    ], { token: "ground" });
+}
+export const CARD_SIZES = {
+    br: { w: 90, h: 50, label: "Brazil, 90 by 50 mm" },
+    us: { w: 88.9, h: 50.8, label: "US, 3.5 by 2 in" },
+    eu: { w: 85, h: 55, label: "Europe, 85 by 55 mm" },
+};
+export const BLEED_MM = 3;
+/** The canvas of a business card at 300 dpi, bleed included, and its safe box. */
+export function cardCanvas(size) {
+    const trim = CARD_SIZES[size];
+    const w = Math.round((trim.w + 2 * BLEED_MM) * MM);
+    const h = Math.round((trim.h + 2 * BLEED_MM) * MM);
+    const inset = 2 * BLEED_MM * MM; // bleed plus 3 mm of safe margin inside the trim
+    return { w, h, safe: { x: inset, y: inset, w: w - 2 * inset, h: h - 2 * inset } };
+}
+/** The front: the stacked logo on the brand color, to the bleed. */
+export function cardFrontScene(size) {
+    const { w, h, safe } = cardCanvas(size);
+    const logoH = safe.h * 0.62;
+    return scene(w, h, "light", [
+        {
+            id: "logo",
+            type: "logo",
+            variant: "stacked",
+            tone: "color",
+            frame: { x: safe.x, y: safe.y + (safe.h - logoH) / 2, w: safe.w, h: logoH },
+        },
+    ], { token: "primary" });
+}
+/** The back: the name, the tagline and the public contacts. */
+export function cardBackScene(brand, size, locale) {
+    const { w, h, safe } = cardCanvas(size);
+    const copy = copyFor(brand, locale);
+    const contacts = ["site", "email", "phone", "whatsapp", "instagram"]
+        .map((kind) => brand.links[kind])
+        .filter((link) => link?.public)
+        .map((link) => (link?.value ?? "").replace(/^https?:\/\//, "").replace(/\/$/, ""));
+    if (contacts.length === 0 && brand.domain)
+        contacts.push(brand.domain);
+    const layers = [
+        {
+            id: "mark",
+            type: "logo",
+            variant: "mark",
+            tone: "color",
+            frame: { x: safe.x, y: safe.y, w: safe.h * 0.28, h: safe.h * 0.28 },
+        },
+        {
+            id: "name",
+            type: "text",
+            text: brand.name,
+            frame: { x: safe.x, y: safe.y + safe.h * 0.34, w: safe.w, h: safe.h * 0.2 },
+            style: {
+                font: { role: "display" },
+                size: safe.h * 0.16,
+                lineHeight: 1.1,
+                fill: { token: "ink" },
+            },
+            fit: { mode: "shrink", min: 28, maxLines: 1 },
+        },
+        {
+            id: "tagline",
+            type: "text",
+            text: copy.tagline,
+            frame: { x: safe.x, y: safe.y + safe.h * 0.55, w: safe.w, h: safe.h * 0.12 },
+            style: {
+                font: { role: "text" },
+                size: safe.h * 0.085,
+                lineHeight: 1.2,
+                fill: { token: "muted" },
+            },
+            fit: { mode: "shrink", min: 22, maxLines: 1 },
+        },
+        {
+            id: "contacts",
+            type: "text",
+            text: contacts.slice(0, 3).join("\n"),
+            frame: { x: safe.x, y: safe.y + safe.h * 0.72, w: safe.w, h: safe.h * 0.28 },
+            style: {
+                font: { role: "text" },
+                size: safe.h * 0.07,
+                lineHeight: 1.3,
+                valign: "bottom",
+                fill: { token: "ink" },
+            },
+            fit: { mode: "shrink", min: 20, maxLines: 3 },
+        },
+    ];
+    return { ...scene(w, h, "light", layers, { token: "ground" }), locale };
+}
+/** Safe areas per network, in px of each canvas (research: brandgen, section 5). */
+export const BANNERS = {
+    "x/header-1500x500.png": { w: 1500, h: 500, safe: { x: 420, y: 70, w: 1020, h: 360 } },
+    "facebook/cover-851x315.png": { w: 851, h: 315, safe: { x: 146, y: 40, w: 560, h: 235 } },
+    "linkedin/cover-1512x256.png": { w: 1512, h: 256, safe: { x: 360, y: 40, w: 1092, h: 176 } },
+    "linkedin/personal-1584x396.png": { w: 1584, h: 396, safe: { x: 420, y: 60, w: 1104, h: 276 } },
+    "youtube/banner-2560x1440.png": { w: 2560, h: 1440, safe: { x: 507, y: 509, w: 1546, h: 423 } },
+    "google/cover-1024x576.png": { w: 1024, h: 576, safe: { x: 102, y: 58, w: 820, h: 460 } },
+};
+export const AVATARS = {
+    "avatar-1080.png": 1080,
+    "instagram/avatar-320.png": 320,
+    "whatsapp/avatar-640.png": 640,
+    "google/logo-720.png": 720,
+    "x/avatar-400.png": 400,
+    "facebook/profile-320.png": 320,
+    "linkedin/logo-400.png": 400,
+    "youtube/avatar-800.png": 800,
+    "tiktok/avatar-200.png": 200,
+};
+/** Instagram highlight covers: file name, icon. */
+export const HIGHLIGHTS = {
+    about: "info",
+    hours: "clock",
+    location: "map-pin",
+    offers: "tag",
+    contact: "message-circle",
+    reviews: "star",
+};

package/dist/files/tokens.d.ts

@@ -0,0 +1,22 @@
+import type { Brand } from "../brand/schema.ts";
+/** A value as a quoted CSS string. The schema already keeps quotes and braces out of a family
+ *  name; this is the second lock, in the writers themselves. */
+export declare function cssString(value: string, quote?: '"' | "'"): string;
+/** A font stack with a fallback that matches the family's shape. */
+export declare function fontStack(brand: Brand, role: "display" | "text"): string;
+/**
+ * tokens.css. `dark`: "auto" adds the dark block for `data-theme="dark"` and mirrors it for the
+ * system setting when no theme is chosen; "attribute" adds only the first; "none" ships light only
+ * (ideare's own UI, plan D19).
+ */
+export declare function tokensCss(brand: Brand, options?: {
+    dark?: "auto" | "attribute" | "none";
+}): string;
+/** tailwind.css: `@import` it after `tailwindcss`. Dark rebinds the same names under `.dark`. */
+export declare function tailwindCss(brand: Brand): string;
+/** brand.tokens.json in the DTCG 2025.10 format (application/design-tokens+json). */
+export declare function dtcgTokens(brand: Brand): Record<string, unknown>;
+/** One shadcn `registry:theme` item, so `npx shadcn add <url>` dresses an app in the brand. */
+export declare function registryTheme(brand: Brand): Record<string, unknown>;
+/** fonts.css for the font files `generate()` writes next to it (`fonts/<id>-<weight>.woff2`). */
+export declare function fontsCss(brand: Brand): string;

package/dist/files/tokens.js

@@ -0,0 +1,204 @@
+import { COLOR_ROLES } from "../brand/schema.js";
+import { onColor } from "../color/contrast.js";
+import { over, parseHex } from "../color/wcag.js";
+import { catalogFont } from "../fonts/pick.js";
+import { slugOf } from "./docs.js";
+/**
+ * The brand as code: plain CSS variables (enarro's format), a Tailwind 4 theme with
+ * @gusnips/tokens' role names, DTCG 2025.10 tokens and a shadcn registry theme. Every file says
+ * it is made, so nobody edits it by hand.
+ */
+const MADE = "Made by @ideare/kit from brand.json. Do not edit: change the brand and make the files again.";
+function kebab(role) {
+    return role.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+/** A value as a quoted CSS string. The schema already keeps quotes and braces out of a family
+ *  name; this is the second lock, in the writers themselves. */
+export function cssString(value, quote = '"') {
+    const body = value
+        .replaceAll("\\", "\\\\")
+        .replaceAll(quote, `\\${quote}`)
+        .replaceAll("\n", "\\a ")
+        .replaceAll("\r", "\\d ")
+        .replaceAll("\f", "\\c ");
+    return `${quote}${body}${quote}`;
+}
+/** A font stack with a fallback that matches the family's shape. */
+export function fontStack(brand, role) {
+    const font = brand.fonts[role];
+    // The catalog knows the shape; for other families the name usually says it.
+    const category = catalogFont(font.id)?.category ??
+        (/\bserif\b/i.test(font.family) && !/\bsans\b/i.test(font.family) ? "serif" : undefined);
+    const fallback = category === "serif"
+        ? "ui-serif, Georgia, serif"
+        : category === "handwriting"
+            ? "cursive"
+            : "ui-sans-serif, system-ui, sans-serif";
+    return `${cssString(font.family)}, ${fallback}`;
+}
+function block(selector, lines, indent = "") {
+    return `${indent}${selector} {\n${lines.map((line) => `${indent}    ${line}`).join("\n")}\n${indent}}`;
+}
+function colorLines(palette) {
+    return COLOR_ROLES.map((role) => `--${kebab(role)}: ${palette[role]};`);
+}
+/**
+ * tokens.css. `dark`: "auto" adds the dark block for `data-theme="dark"` and mirrors it for the
+ * system setting when no theme is chosen; "attribute" adds only the first; "none" ships light only
+ * (ideare's own UI, plan D19).
+ */
+export function tokensCss(brand, options = {}) {
+    const dark = options.dark ?? "auto";
+    const root = [
+        ...colorLines(brand.colors.light),
+        ...Object.entries(brand.paints).map(([name, hex]) => `--paint-${name}: ${hex};`),
+        `--font-display: ${fontStack(brand, "display")};`,
+        `--font-text: ${fontStack(brand, "text")};`,
+        `--radius-control: ${brand.radii.control}px;`,
+        `--radius-card: ${brand.radii.card}px;`,
+    ];
+    const parts = [`/* ${MADE} */`, block(":root", root)];
+    if (dark !== "none") {
+        parts.push(`@media screen {\n${block(':root[data-theme="dark"]', colorLines(brand.colors.dark), "    ")}\n}`);
+    }
+    if (dark === "auto") {
+        parts.push(`@media screen and (prefers-color-scheme: dark) {\n${block(":root:not([data-theme])", colorLines(brand.colors.dark), "    ")}\n}`);
+    }
+    return `${parts.join("\n\n")}\n`;
+}
+/** @gusnips/tokens' 20 names (their `accent` is the neutral highlight), plus the brand's own. */
+function shadcnColors(palette) {
+    return {
+        background: palette.ground,
+        foreground: palette.ink,
+        card: palette.surface,
+        "card-foreground": palette.ink,
+        popover: palette.ground,
+        "popover-foreground": palette.ink,
+        primary: palette.primary,
+        "primary-foreground": palette.onPrimary,
+        secondary: palette.surface,
+        "secondary-foreground": palette.ink,
+        muted: palette.surface,
+        "muted-foreground": palette.muted,
+        accent: palette.surface,
+        "accent-foreground": palette.ink,
+        destructive: palette.danger,
+        "destructive-foreground": onColor(palette.danger, palette.ink, "#ffffff").hex,
+        // A divider is softer than a field border; the field border keeps 3:1 (input).
+        border: over(palette.line, 0.4, palette.ground),
+        input: palette.line,
+        ring: palette.focus,
+        "brand-accent": palette.accent,
+        "brand-accent-foreground": palette.onAccent,
+        success: palette.success,
+        warning: palette.warning,
+    };
+}
+/** tailwind.css: `@import` it after `tailwindcss`. Dark rebinds the same names under `.dark`. */
+export function tailwindCss(brand) {
+    const light = Object.entries(shadcnColors(brand.colors.light)).map(([name, value]) => `--color-${name}: ${value};`);
+    const dark = Object.entries(shadcnColors(brand.colors.dark)).map(([name, value]) => `--color-${name}: ${value};`);
+    const theme = [
+        ...light,
+        ...Object.entries(brand.paints).map(([name, hex]) => `--color-paint-${name}: ${hex};`),
+        `--font-display: ${fontStack(brand, "display")};`,
+        `--font-sans: ${fontStack(brand, "text")};`,
+        `--radius-control: ${brand.radii.control}px;`,
+        `--radius-card: ${brand.radii.card}px;`,
+    ];
+    return `/* ${MADE} */\n/* Never wrap this in @theme inline: it would stop .dark from rebinding the colors. */\n${block("@theme", theme)}\n\n${block(".dark", dark)}\n`;
+}
+function dtcgColor(hex) {
+    const { r, g, b } = parseHex(hex);
+    const unit = (value) => Math.round((value / 255) * 10000) / 10000;
+    return { colorSpace: "srgb", components: [unit(r), unit(g), unit(b)], hex };
+}
+/** brand.tokens.json in the DTCG 2025.10 format (application/design-tokens+json). */
+export function dtcgTokens(brand) {
+    const theme = (palette) => Object.fromEntries(COLOR_ROLES.map((role) => [role, { $value: dtcgColor(palette[role]) }]));
+    return {
+        $description: `${brand.name}. ${MADE}`,
+        color: {
+            $type: "color",
+            light: theme(brand.colors.light),
+            dark: theme(brand.colors.dark),
+            paint: Object.fromEntries(Object.entries(brand.paints).map(([name, hex]) => [
+                name,
+                { $value: dtcgColor(hex) },
+            ])),
+        },
+        font: {
+            $type: "fontFamily",
+            display: {
+                $value: fontStack(brand, "display")
+                    .split(", ")
+                    .map((name) => name.replaceAll('"', "")),
+            },
+            text: {
+                $value: fontStack(brand, "text")
+                    .split(", ")
+                    .map((name) => name.replaceAll('"', "")),
+            },
+        },
+        radius: {
+            $type: "dimension",
+            control: { $value: { value: brand.radii.control, unit: "px" } },
+            card: { $value: { value: brand.radii.card, unit: "px" } },
+        },
+    };
+}
+/** One shadcn `registry:theme` item, so `npx shadcn add <url>` dresses an app in the brand. */
+export function registryTheme(brand) {
+    const slug = slugOf(brand);
+    const vars = (palette) => {
+        const colors = shadcnColors(palette);
+        return {
+            ...Object.fromEntries(Object.entries(colors).filter(([name]) => !name.startsWith("brand-") && name !== "success" && name !== "warning")),
+            "chart-1": palette.primary,
+            "chart-2": palette.accent,
+            "chart-3": palette.success,
+            "chart-4": palette.warning,
+            "chart-5": palette.focus,
+        };
+    };
+    return {
+        $schema: "https://ui.shadcn.com/schema/registry-item.json",
+        name: `${slug}-theme`,
+        type: "registry:theme",
+        title: `${brand.name} theme`,
+        description: `The colors, fonts and radius of ${brand.name}, from ideare.`,
+        cssVars: {
+            theme: {
+                "font-sans": fontStack(brand, "text"),
+                "font-heading": fontStack(brand, "display"),
+                radius: `${brand.radii.control / 16}rem`,
+            },
+            light: vars(brand.colors.light),
+            dark: vars(brand.colors.dark),
+        },
+    };
+}
+/** fonts.css for the font files `generate()` writes next to it (`fonts/<id>-<weight>.woff2`). */
+export function fontsCss(brand) {
+    const faces = [];
+    const seen = new Set();
+    for (const role of ["display", "text"]) {
+        const font = brand.fonts[role];
+        for (const weight of font.weights) {
+            const key = `${font.id}-${weight}`;
+            if (seen.has(key))
+                continue;
+            seen.add(key);
+            faces.push(block("@font-face", [
+                `font-family: ${cssString(font.family)};`,
+                "font-style: normal;",
+                `font-weight: ${weight};`,
+                "font-display: swap;",
+                `src: url("./fonts/${key}.woff2") format("woff2");`,
+                "unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;",
+            ]));
+        }
+    }
+    return `/* ${MADE} */\n/* The fonts are under the SIL Open Font License 1.1: keep OFL.txt next to them. */\n${faces.join("\n\n")}\n`;
+}

package/dist/fonts/catalog.d.ts

@@ -0,0 +1,3 @@
+import type { CatalogFont } from "./pick.ts";
+/** 37 OFL families from Google Fonts, each with a latin subset for pt-BR and es. */
+export declare const FONT_CATALOG: readonly CatalogFont[];