wizards 0.3.6 → 0.3.7

package/apps/runtime/dist/agents/website.js

@@ -1,3 +1,4 @@
+import { FONT_WEIGHTS } from "@engenty-wizards/shared/projects";
 import { webContext } from "../render/chromium.js";
 import { htmlToMarkdown } from "../render/convert.js";
 import { safeFetch } from "../tools/net-guard.js";
@@ -29,28 +30,60 @@ function hex(value) {
     }
     const rgb = v.match(/^rgba?\(\s*(\d{1,3})[\s,]+(\d{1,3})[\s,]+(\d{1,3})/);
     if (rgb) {
-        return `#${rgb
-            .slice(1, 4)
-            .map((n) => Math.min(255, Number(n)).toString(16).padStart(2, "0"))
-            .join("")}`;
+        return toHex(rgb.slice(1, 4).map(Number));
+    }
+    const hsl = v.match(/^hsla?\(\s*([\d.]+)(?:deg)?[\s,]+([\d.]+)%[\s,]+([\d.]+)%/);
+    if (hsl) {
+        const [h, sat, l] = [Number(hsl[1]), Number(hsl[2]) / 100, Number(hsl[3]) / 100];
+        const f = (n) => {
+            const k = (n + h / 30) % 12;
+            return 255 * (l - sat * Math.min(l, 1 - l) * Math.max(-1, Math.min(k - 3, 9 - k, 1)));
+        };
+        return toHex([f(0), f(8), f(4)]);
+    }
+    const ok = v.match(/^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)/);
+    if (ok) {
+        return toHex(oklchToRgb(Number(ok[1]) / (ok[2] ? 100 : 1), Number(ok[3]), Number(ok[4])));
     }
     return null;
 }
+const toHex = (rgb) => `#${rgb
+    .map((n) => Math.round(Math.max(0, Math.min(255, n)))
+    .toString(16)
+    .padStart(2, "0"))
+    .join("")}`;
+/** OKLCH (as CSS writes it, Tailwind 4 among others) in sRGB, 0–255. */
+function oklchToRgb(l, c, h) {
+    const a = c * Math.cos((h * Math.PI) / 180);
+    const b = c * Math.sin((h * Math.PI) / 180);
+    const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+    const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+    const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+    const linear = [
+        4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,
+        -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,
+        -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_,
+    ];
+    return linear.map((x) => 255 * (x <= 0.0031308 ? 12.92 * x : 1.055 * Math.max(0, x) ** (1 / 2.4) - 0.055));
+}
 /** How far a colour is from grey, 0–255. */
 function chroma(color) {
     const [r, g, b] = [1, 3, 5].map((i) => Number.parseInt(color.slice(i, i + 2), 16));
     return Math.max(r, g, b) - Math.min(r, g, b);
 }
+/** A colour as CSS writes it: hex, rgb(), hsl() or oklch(). */
+const COLOUR = /#[0-9a-fA-F]{3,8}\b|rgba?\([^)]*\)|hsla?\([^)]*\)|oklch\([^)]*\)/;
 function coloursOf(css) {
     const variables = [];
-    for (const m of css.matchAll(/(--[\w-]+)\s*:\s*(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\))/g)) {
+    for (const m of css.matchAll(new RegExp(`(--[\\w-]+)\\s*:\\s*(${COLOUR.source})`, "g"))) {
         const value = hex(m[2]);
-        if (value && !variables.some((v) => v.name === m[1])) {
+        // Tailwind's own variables are its machinery, not the site's colours.
+        if (value && !m[1].startsWith("--tw-") && !variables.some((v) => v.name === m[1])) {
             variables.push({ name: m[1], value });
         }
     }
     const counts = new Map();
-    for (const m of css.matchAll(/#[0-9a-fA-F]{3,8}\b|rgba?\([^)]*\)/g)) {
+    for (const m of css.matchAll(new RegExp(COLOUR.source, "g"))) {
         const value = hex(m[0]);
         if (value) {
             counts.set(value, (counts.get(value) ?? 0) + 1);
@@ -173,59 +206,247 @@ export async function readPage(raw, signal) {
         jsonld: jsonLdOf(html),
     };
 }
-export async function readWebsite(raw, signal) {
-    const { res, base, html } = await loadPage(raw, signal);
-    const tags = (name) => tagsOf(html, name);
-    const meta = (key) => metaOf(html, key);
+const saysLogo = (tag) => /logo/i.test([
+    attr(tag, "src"),
+    attr(tag, "alt"),
+    attr(tag, "class"),
+    attr(tag, "id"),
+    attr(tag, "aria-label"),
+]
+    .filter(Boolean)
+    .join(" "));
+/**
+ * The logos a page shows, best first: the logo its structured data names, pictures that say
+ * "logo", what its home link in the header shows, and its icons. `inline`: SVGs drawn into the
+ * page count too, as `data:` addresses — for a person to pick from, too long for a model to read.
+ */
+function logosOf(html, base, inline = false) {
     const logos = [];
-    const addLogo = (href, hint) => {
-        const url = absolute(href, base);
+    const add = (href, hint) => {
+        const url = href.startsWith("data:image/svg+xml") ? href : absolute(href, base);
         if (url && !logos.some((l) => l.url === url)) {
             logos.push({ url, hint });
         }
     };
-    const images = [];
-    for (const tag of tags("img")) {
+    for (const item of jsonLdOf(html)) {
+        const logo = item?.logo;
+        const href = typeof logo === "string" ? logo : logo?.url;
+        if (typeof href === "string") {
+            add(href, "the logo the page names in its structured data");
+        }
+    }
+    for (const tag of tagsOf(html, "img")) {
         const src = attr(tag, "src") || attr(tag, "data-src");
-        const alt = attr(tag, "alt");
-        if (!src || src.startsWith("data:")) {
+        if (src && !src.startsWith("data:") && saysLogo(tag)) {
+            const alt = attr(tag, "alt");
+            add(src, `image on the page${alt ? `, alt "${alt}"` : ""}`);
+        }
+    }
+    // What the link home shows is the logo on most sites, said so or not.
+    for (const m of html.matchAll(/<a\b([^>]*)>([\s\S]*?)<\/a>/gi)) {
+        const href = absolute(attr(`<a ${m[1]}>`, "href"), base);
+        if (!href || new URL(href).pathname !== "/" || new URL(href).host !== new URL(base).host) {
             continue;
         }
-        if (/logo/i.test(`${src} ${alt} ${attr(tag, "class")} ${attr(tag, "id")}`)) {
-            addLogo(src, `image on the page${alt ? `, alt "${alt}"` : ""}`);
+        const img = tagsOf(m[2], "img")[0];
+        const src = img && (attr(img, "src") || attr(img, "data-src"));
+        if (src && !src.startsWith("data:")) {
+            add(src, "image in the link to the home page");
+        }
+        const svg = inline ? m[2].match(/<svg\b[\s\S]*?<\/svg>/i)?.[0] : undefined;
+        if (svg) {
+            add(svgUrl(svg), "drawing in the link to the home page");
         }
-        else {
-            const url = absolute(src, base);
-            if (url && images.length < 12 && !images.some((i) => i.url === url)) {
-                images.push({ url, alt });
+    }
+    if (inline) {
+        for (const m of html.matchAll(/<svg\b[^>]*>[\s\S]*?<\/svg>/gi)) {
+            const open = m[0].match(/^<svg\b[^>]*>/i)?.[0] ?? "";
+            const title = m[0].match(/<title[^>]*>([\s\S]*?)<\/title>/i)?.[1] ?? "";
+            if (saysLogo(open) || /logo/i.test(title)) {
+                add(svgUrl(m[0]), "drawing on the page");
             }
         }
     }
-    for (const tag of tags("link")) {
+    for (const tag of tagsOf(html, "link")) {
         const rel = attr(tag, "rel").toLowerCase();
         if (/apple-touch-icon|mask-icon|(^|\s)icon/.test(rel)) {
-            addLogo(attr(tag, "href"), `${rel} ${attr(tag, "sizes")}`.trim());
-        }
-    }
-    const og = meta("og:image");
-    if (og) {
-        const url = absolute(og, base);
-        if (url) {
-            images.unshift({ url, alt: "share image (og:image)" });
+            add(attr(tag, "href"), `${rel} ${attr(tag, "sizes")}`.trim());
         }
     }
-    const sheets = tags("link")
+    return logos;
+}
+/** An inline SVG as a picture of its own: with its namespace, as a `data:` address. */
+function svgUrl(svg) {
+    const own = /\bxmlns\s*=/.test(svg.match(/^<svg\b[^>]*>/i)?.[0] ?? "")
+        ? svg
+        : svg.replace(/^<svg\b/i, '<svg xmlns="http://www.w3.org/2000/svg"');
+    return `data:image/svg+xml;base64,${Buffer.from(own).toString("base64")}`;
+}
+/** The logos on a web page, for a person to pick from (Logos › from a web address). */
+export async function scanLogos(raw, signal) {
+    const { base, html } = await loadPage(raw, signal);
+    return logosOf(html, base, true)
+        .filter((l) => !l.url.startsWith("data:") || l.url.length < 400_000)
+        .slice(0, 16);
+}
+/** The CSS a page brings: its `<style>` blocks, style attributes and first stylesheets. */
+async function cssOf(html, base, signal) {
+    const sheets = tagsOf(html, "link")
         .filter((t) => /stylesheet/i.test(attr(t, "rel")))
         .map((t) => absolute(attr(t, "href"), base))
         .filter((u) => Boolean(u))
         .slice(0, 4);
     const inline = [...html.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)].map((m) => m[1]);
     const styled = [...html.matchAll(/\bstyle\s*=\s*"([^"]*)"/gi)].map((m) => m[1]);
-    const css = [
+    return [
         ...inline,
         ...styled,
         ...(await Promise.all(sheets.map((s) => stylesheet(s, signal)))),
     ].join("\n");
+}
+/** Family names that are no brand's own: generic and system faces. */
+const GENERIC_FONT = /^(serif|sans-serif|monospace|cursive|fantasy|system-ui|ui-[a-z-]+|-apple-system|blinkmacsystemfont|inherit|initial|unset|revert|emoji|math|fangsong|segoe ui( emoji| symbol)?|helvetica( neue)?|arial|roboto|noto (sans|color emoji)|apple color emoji|courier( new)?|times( new roman)?|georgia|menlo|monaco|consolas|var\(.*|liberation mono|sfmono-regular|sf mono|sf pro( text| display)?|dejavu sans( mono)?)$/i;
+/** "Geist Variable" is Geist: a variable font's file name, not another family. */
+const familyName = (raw) => raw
+    .replace(/^[\s"'(]+|[\s"')]+$/g, "")
+    .replace(/\s+variable$/i, "")
+    .trim();
+/**
+ * The typefaces a page uses, most used first, with the weights its `@font-face` rules or its
+ * Google / Bunny Fonts links name.
+ */
+function fontsOf(css, html) {
+    const counts = new Map();
+    const weights = new Map();
+    const count = (family, n = 1) => counts.set(family, (counts.get(family) ?? 0) + n);
+    const weigh = (family, list) => {
+        const set = weights.get(family) ?? new Set();
+        for (const w of list) {
+            set.add(w);
+        }
+        weights.set(family, set);
+    };
+    const first = (decl) => decl
+        .split(",")
+        .map(familyName)
+        .find((f) => /[a-z]/i.test(f) && !GENERIC_FONT.test(f));
+    // --font-weight-…, --font-size-… and the like are no families.
+    for (const m of css.matchAll(/(?:font-family|--font-(?!weight|size|feature|variation|style|stretch)[\w-]+)\s*:\s*([^;}]+)/gi)) {
+        const family = first(m[1]);
+        if (family) {
+            count(family);
+        }
+    }
+    for (const m of css.matchAll(/@font-face\s*\{([^}]*)\}/gi)) {
+        const family = first(m[1].match(/font-family\s*:\s*([^;]+)/i)?.[1] ?? "");
+        const range = (m[1].match(/font-weight\s*:\s*([^;]+)/i)?.[1] ?? "400")
+            .split(/\s+/)
+            .map(Number)
+            .filter((n) => n >= 100 && n <= 900);
+        if (family && range.length) {
+            const [lo, hi] = [Math.min(...range), Math.max(...range)];
+            weigh(family, FONT_WEIGHTS.filter((w) => w >= lo && w <= hi));
+        }
+    }
+    // fonts.googleapis.com/css2?family=Inter:wght@400;700 and fonts.bunny.net/css?family=inter:400,700
+    for (const m of html.matchAll(/fonts\.(?:googleapis\.com|bunny\.net)\/css2?\?([^"'\s>]+)/gi)) {
+        for (const part of m[1].replace(/&amp;/g, "&").split("&")) {
+            if (!part.startsWith("family=")) {
+                continue;
+            }
+            for (const one of decodeURIComponent(part.slice(7)).split("|")) {
+                const [name, spec = ""] = one.split(":");
+                const family = familyName(name.replace(/\+/g, " ").replace(/-/g, " ")).replace(/\b\w/g, (c) => c.toUpperCase());
+                count(family, 3);
+                weigh(family, (spec.match(/\d{3}/g) ?? []).map(Number).filter((w) => w >= 100 && w <= 900));
+            }
+        }
+    }
+    return [...counts.entries()]
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 6)
+        .map(([family]) => ({
+        family,
+        weights: [...(weights.get(family) ?? [])].sort((a, b) => a - b),
+    }));
+}
+/** The typefaces of a web page, for a person to pick from (Typography › from a web address). */
+export async function scanFonts(raw, signal) {
+    const { base, html } = await loadPage(raw, signal);
+    return fontsOf(await cssOf(html, base, signal), html);
+}
+/**
+ * The colours of a web page, for a person to pick from (Colours › from a web address): its
+ * theme colour, the colours its stylesheet names, then the ones it uses most. A named one is
+ * named after its variable ("--brand-primary" → "brand primary").
+ */
+export async function scanColors(raw, signal) {
+    const { base, html } = await loadPage(raw, signal);
+    const { variables, frequent } = coloursOf(await cssOf(html, base, signal));
+    const out = [];
+    const add = (name, value) => {
+        if (value && !out.some((c) => c.value === value)) {
+            out.push({ name, value });
+        }
+    };
+    add("theme color", hex(metaOf(html, "theme-color")));
+    for (const v of variables) {
+        add(v.name.replace(/^--/, "").replace(/[-_]+/g, " "), v.value);
+    }
+    for (const value of frequent) {
+        add("", value);
+    }
+    return out.slice(0, 24);
+}
+/**
+ * The pictures of a web page, for a person to pick assets from: its share image, then the
+ * images it shows, logos left out.
+ */
+export async function scanImages(raw, signal) {
+    const { base, html } = await loadPage(raw, signal);
+    const out = [];
+    const add = (href, hint) => {
+        const url = absolute(href, base);
+        if (url && !out.some((i) => i.url === url)) {
+            out.push({ url, hint });
+        }
+    };
+    const og = metaOf(html, "og:image");
+    if (og) {
+        add(og, "share image");
+    }
+    for (const tag of tagsOf(html, "img")) {
+        const src = attr(tag, "src") || attr(tag, "data-src");
+        if (src && !src.startsWith("data:") && !saysLogo(tag)) {
+            add(src, attr(tag, "alt"));
+        }
+    }
+    return out.slice(0, 24);
+}
+export async function readWebsite(raw, signal) {
+    const { res, base, html } = await loadPage(raw, signal);
+    const tags = (name) => tagsOf(html, name);
+    const meta = (key) => metaOf(html, key);
+    const logos = logosOf(html, base);
+    const images = [];
+    for (const tag of tags("img")) {
+        const src = attr(tag, "src") || attr(tag, "data-src");
+        if (!src || src.startsWith("data:") || saysLogo(tag)) {
+            continue;
+        }
+        const url = absolute(src, base);
+        if (url && images.length < 12 && !images.some((i) => i.url === url)) {
+            images.push({ url, alt: attr(tag, "alt") });
+        }
+    }
+    const og = meta("og:image");
+    if (og) {
+        const url = absolute(og, base);
+        if (url) {
+            images.unshift({ url, alt: "share image (og:image)" });
+        }
+    }
+    const css = await cssOf(html, base, signal);
     const host = new URL(base).hostname;
     const links = [];
     for (const m of html.matchAll(/<a\b([^>]*)>([\s\S]*?)<\/a>/gi)) {
@@ -252,6 +473,7 @@ export async function readWebsite(raw, signal) {
             ...coloursOf(css),
             logos: logos.slice(0, 10),
             images,
+            fonts: fontsOf(css, html),
         },
         links: links.slice(0, 10),
     };

package/apps/runtime/dist/db/schema.js

@@ -209,7 +209,7 @@ export const projectFile = sqliteTable("project_file", {
     projectId: text("project_id")
         .notNull()
         .references(() => project.id, { onDelete: "cascade" }),
-    kind: text("kind", { enum: ["logo", "asset", "document"] }).notNull(),
+    kind: text("kind", { enum: ["logo", "asset", "document", "pattern"] }).notNull(),
     name: text("name").notNull(),
     mime: text("mime").notNull(),
     size: integer("size").notNull(),

package/apps/runtime/dist/documents/parse.js

@@ -35,6 +35,20 @@ const MIME_BY_EXT = {
     jpeg: "image/jpeg",
     webp: "image/webp",
     gif: "image/gif",
+    svg: "image/svg+xml",
+    avif: "image/avif",
+    mp4: "video/mp4",
+    mov: "video/quicktime",
+    webm: "video/webm",
+    mp3: "audio/mpeg",
+    wav: "audio/wav",
+    m4a: "audio/mp4",
+    woff2: "font/woff2",
+    woff: "font/woff",
+    ttf: "font/ttf",
+    otf: "font/otf",
+    glb: "model/gltf-binary",
+    gltf: "model/gltf+json",
 };
 /** The type to read a file as: mail servers and browsers often only say "octet-stream". */
 export function documentMime(name, mime) {

package/apps/runtime/dist/engine/steps.js

@@ -1,5 +1,6 @@
 import { pOf } from "@engenty-wizards/shared/decision";
 import { allFields, dataRef, isDecisionStep, LOCALES, templateRefs, wizardLang, } from "@engenty-wizards/shared/definition";
+import { mainLogo, ruleLines } from "@engenty-wizards/shared/projects";
 import { SURFACE_GUIDE, validateSurface, } from "@engenty-wizards/shared/surface";
 import { Agent } from "@mastra/core/agent";
 import { generateText, Output } from "ai";
@@ -18,7 +19,7 @@ import { runWidgetStep } from "../widgets/step.js";
 import { decide } from "./decide.js";
 import { prepareInputs } from "./prepare.js";
 import { runSurfaceStep } from "./surface.js";
-import { answersAsText, colorLine, factLines, renderTemplate, resolveRef, } from "./template.js";
+import { answersAsText, assetSectionLine, colorLine, factLines, logoSectionLine, renderTemplate, resolveRef, typeLines, } from "./template.js";
 import { StepError } from "./types.js";
 /** Today's date as the wizard's people write it. */
 function today(ctx) {
@@ -28,13 +29,26 @@ function today(ctx) {
         day: "numeric",
     });
 }
+const sectionTitle = (s) => s.description ? `${s.title} – ${s.description}` : s.title;
 function brandBlock(ctx) {
     const b = ctx.scope.brand;
     const parts = [
         b.name,
         b.about,
         b.facts?.length ? `Facts:\n${factLines(b.facts)}` : "",
-        b.colors?.length ? `Colours (the first is the accent): ${colorLine(b.colors)}` : "",
+        b.colors?.length
+            ? `Colours (the first is the accent): ${colorLine(b.colors, b.colorSections, b.gradients)}`
+            : "",
+        b.colorRules?.length
+            ? `Rules for the colours, in the brand's words:\n${ruleLines(b.colorRules)}`
+            : "",
+        b.logoRules?.length
+            ? `Rules for the logo, in the brand's words:\n${ruleLines(b.logoRules)}`
+            : "",
+        b.fonts?.length || b.textStyles?.length
+            ? `Typography (set text in these fonts, with system fallbacks):\n${typeLines(b.fonts, b.textStyles)}`
+            : "",
+        b.typeRules?.length ? `Rules for type, in the brand's words:\n${ruleLines(b.typeRules)}` : "",
     ].filter(Boolean);
     return parts.length ? `# WHO THIS WIZARD BELONGS TO\n${parts.join("\n")}` : "";
 }
@@ -656,13 +670,35 @@ function placeableImages(step, ctx) {
         }
     }
     const logos = ctx.projectFiles.filter((f) => f.kind === "logo");
-    for (const [i, f] of logos.entries()) {
-        const note = f.description ? `: ${f.description}` : "";
-        out.push({ id: f.id, label: `${i === 0 ? "Company logo" : "Logo variant"}${note}` });
+    const main = mainLogo(logos, ctx.scope.brand.logoSections);
+    for (const f of logos) {
+        const section = logoSectionLine(ctx.scope.brand.logoSections, f.id);
+        out.push({
+            id: f.id,
+            label: [
+                f === main ? "Company logo" : "Logo variant",
+                section ? ` — section ${section}` : "",
+                f.description ? `: ${f.description}` : "",
+            ].join(""),
+        });
+    }
+    for (const p of ctx.scope.brand.patterns ?? []) {
+        const file = ctx.projectFiles.find((f) => f.id === p.file);
+        const section = ctx.scope.brand.colorSections?.find((s) => s.id === p.section);
+        if (file) {
+            out.push({
+                id: file.id,
+                label: `${p.tile ? "Pattern to tile" : "Background fill"}: ${p.name || file.name}${section ? ` (${sectionTitle(section)})` : ""}`,
+            });
+        }
     }
     for (const f of ctx.projectFiles) {
         if (f.kind === "asset" && f.mime.startsWith("image/")) {
-            out.push({ id: f.id, label: `${f.description || f.name} (from the project's assets)` });
+            const section = assetSectionLine(ctx.scope.brand.assetSections, f.id);
+            out.push({
+                id: f.id,
+                label: `${f.description || f.name} (from the project's assets${section ? `, section ${section}` : ""})`,
+            });
         }
     }
     return out;

package/apps/runtime/dist/engine/template.js

@@ -1,4 +1,5 @@
 import { allFields, isAudioValue, isLocationValue, itemsTotals, LOCALES, locationText, wizardLang, } from "@engenty-wizards/shared/definition";
+import { gradientCss, textStyleLine, } from "@engenty-wizards/shared/projects";
 import { listAsMarkdown } from "@engenty-wizards/shared/store";
 const TEMPLATE_RE = /\{\{\s*([^}]+?)\s*\}\}/g;
 function money(n, currency, locale) {
@@ -34,8 +35,52 @@ export function itemsAsMarkdown(field, value, values, lang = "de") {
 export function factLines(facts) {
     return facts.map((f) => `${f.label}: ${f.value}`).join("\n");
 }
-export function colorLine(colors) {
-    return colors.map((c) => (c.name ? `${c.name} ${c.value}` : c.value)).join(", ");
+/**
+ * The colours as a model reads them; a section's after the standard ones, with when to use them.
+ * A gradients section names its gradients as CSS.
+ */
+export function colorLine(colors, sections = [], gradients = []) {
+    const line = (list) => list.map((c) => (c.name ? `${c.name} ${c.value}` : c.value)).join(", ");
+    const known = (c) => sections.some((s) => s.id === c.section);
+    return [
+        line(colors.filter((c) => !known(c))),
+        ...sections.map((s) => {
+            const head = s.description ? `${s.title} (${s.description})` : s.title;
+            if (s.kind === "gradients") {
+                const own = gradients.filter((g) => g.section === s.id);
+                return own.length
+                    ? `${head}: ${own.map((g) => `${g.name || "gradient"} ${gradientCss(g)}`).join("; ")}`
+                    : "";
+            }
+            const own = colors.filter((c) => c.section === s.id);
+            return own.length ? `${head}: ${line(own)}` : "";
+        }),
+    ]
+        .filter(Boolean)
+        .join(" · ");
+}
+/** The brand's type as a model reads it: its fonts, then its text styles. */
+export function typeLines(fonts = [], styles = []) {
+    const families = fonts.map((f) => {
+        const weights = f.weights.length ? `, weights ${f.weights.join("/")}` : "";
+        return `- ${f.family}${f.role ? ` (${f.role})` : ""}${weights}`;
+    });
+    const scale = styles.map((s) => `- ${s.name}: ${textStyleLine(s, fonts)}`);
+    return [
+        families.length ? `Fonts:\n${families.join("\n")}` : "",
+        scale.length ? `Text styles:\n${scale.join("\n")}` : "",
+    ]
+        .filter(Boolean)
+        .join("\n");
+}
+const sectionWords = (s) => !s ? "" : s.description ? `${s.title} (${s.description})` : s.title;
+/** The logo's section in words — "Logomark (small spaces, app icons)" — or "" where it has none. */
+export function logoSectionLine(sections, fileId) {
+    return sectionWords(sections?.find((x) => x.logos.includes(fileId)));
+}
+/** The title of the asset's section — "Icons" — or "" where it has none. */
+export function assetSectionLine(sections, fileId) {
+    return sections?.find((x) => x.assets.includes(fileId))?.title ?? "";
 }
 function brandRef(brand, key) {
     switch (key) {
@@ -49,7 +94,9 @@ function brandRef(brand, key) {
         case "accent":
             return brand.colors?.[0]?.value ?? "";
         case "colors":
-            return colorLine(brand.colors ?? []);
+            return colorLine(brand.colors ?? [], brand.colorSections, brand.gradients);
+        case "fonts":
+            return typeLines(brand.fonts, brand.textStyles);
         default:
             return "";
     }

package/apps/runtime/dist/film/project.js

@@ -3,8 +3,9 @@ import { existsSync } from "node:fs";
 import { cp, mkdir, readFile, rm, writeFile } from "node:fs/promises";
 import { dirname, join, normalize } from "node:path";
 import { dataRef, FILM_SIZES } from "@engenty-wizards/shared/definition";
+import { gradientCss, ruleLines, textStyleLine } from "@engenty-wizards/shared/projects";
 import { unzipSync } from "fflate";
-import { renderTemplate, resolveRef } from "../engine/template.js";
+import { logoSectionLine, renderTemplate, resolveRef } from "../engine/template.js";
 import { env } from "../env.js";
 import { getBlob } from "../files/blobs.js";
 import { extFor, loadAsset } from "../files/storage.js";
@@ -128,23 +129,72 @@ export async function prepareFilmFolder(step, ctx) {
     // The space's brand.
     const b = ctx.scope.brand;
     const logos = [];
+    const patterns = [];
+    for (const p of b.patterns ?? []) {
+        const f = ctx.projectFiles.find((x) => x.id === p.file);
+        try {
+            if (f) {
+                const { data } = await projectFileContent(f.projectId, f.id);
+                const name = `patterns/${safeName(f.name.replace(/\.[^.]+$/, ""))}.${extFor(f.mime) === "bin" ? (f.name.split(".").pop() ?? "bin") : extFor(f.mime)}`;
+                await put(join(root, "brand"), name, data);
+                patterns.push({ file: name, name: p.name, tile: Boolean(p.tile) });
+            }
+        }
+        catch {
+            // a pattern less
+        }
+    }
     for (const f of ctx.projectFiles.filter((p) => p.kind === "logo")) {
         try {
             const { data } = await projectFileContent(f.projectId, f.id);
             const name = `logos/${safeName(f.name.replace(/\.[^.]+$/, ""))}.${extFor(f.mime) === "bin" ? (f.name.split(".").pop() ?? "bin") : extFor(f.mime)}`;
             await put(join(root, "brand"), name, data);
-            logos.push(name);
+            const section = logoSectionLine(b.logoSections, f.id);
+            logos.push({
+                file: name,
+                ...(section ? { section } : {}),
+                ...(f.description ? { description: f.description } : {}),
+            });
         }
         catch {
             // a logo less
         }
     }
     await put(join(root, "brand"), "brand.json", JSON.stringify({
-        note: "The space's brand. Colours are named by what they are for; the first is the accent.",
+        note: "The space's brand. Colours are named by what they are for; the first is the accent. A logo's or a colour's section says when to use it; colorRules, logoRules and typeRules, where there are any, say how colours, logos and type may be used; text is set in the fonts.",
         name: b.name ?? "",
         about: b.about ?? "",
-        colors: (b.colors ?? []).map((c) => ({ name: c.name, value: c.value })),
+        colors: (b.colors ?? []).map((c) => {
+            const s = b.colorSections?.find((x) => x.id === c.section);
+            return { name: c.name, value: c.value, ...(s ? { section: s.title } : {}) };
+        }),
+        ...(b.gradients?.length
+            ? {
+                gradients: b.gradients.map((g) => ({
+                    name: g.name,
+                    section: b.colorSections?.find((x) => x.id === g.section)?.title,
+                    css: gradientCss(g),
+                })),
+            }
+            : {}),
+        ...(patterns.length ? { patterns } : {}),
         logos,
+        ...(b.colorRules?.length ? { colorRules: ruleLines(b.colorRules).split("\n") } : {}),
+        ...(b.fonts?.length
+            ? {
+                fonts: b.fonts.map(({ family, role, weights }) => ({ family, role, weights })),
+            }
+            : {}),
+        ...(b.textStyles?.length
+            ? {
+                textStyles: b.textStyles.map((s) => ({
+                    name: s.name,
+                    style: textStyleLine(s, b.fonts ?? []),
+                })),
+            }
+            : {}),
+        ...(b.typeRules?.length ? { typeRules: ruleLines(b.typeRules).split("\n") } : {}),
+        ...(b.logoRules?.length ? { logoRules: ruleLines(b.logoRules).split("\n") } : {}),
         facts: (b.facts ?? []).map((f) => `${f.label}: ${f.value}`),
     }, null, 1));
     // What the run made before.