wizards 0.3.5 → 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/docs/user/test-and-share.md

@@ -15,18 +15,30 @@ measured from the latest runs after five of them.
 
 ## Publish
 
-"Publish" makes the draft the live version. The editor's top bar and the wizard's card on the
-start page say where it runs:
+A wizard goes live the first time you share it: "Share" publishes the draft as version 1 as the
+dialog opens (nobody has the link yet, and "Only you" under Access keeps it closed). A draft with
+issues is not published; the dialog lists what to fix first, with "Let the assistant fix it".
+
+After that the editor's top bar has "Make changes live" whenever the draft differs from the
+version people run. It opens a dialog that says:
+
+| Part | Says |
+|---|---|
+| What changed | The wizard's own settings, each step by its title (new, removed, or which of its parts: fields, instructions, result …), the steps' order, the files |
+| Tested | Whether a test run used exactly this draft: "Tested 4 minutes ago – with these changes" and "See the run", or "Not tested with these changes yet" with "Test now" |
+| Notes | Anyone in the middle of a run carries on with the version they started; what a run costs now where that changed; with an account, that the version goes to the cloud too |
+
+"Go live" makes the draft the next version; the link stays the same. Issues stop it, as on the
+first share. The editor's top bar and the wizard's card on the start page say where it runs:
 
 | It says | Means |
 |---|---|
-| Not published yet · Draft | Only you can run it, as a test |
+| Not published yet · Draft | Only you can run it, as a test. Sharing it publishes it |
 | Live · version 3 | The link runs this version. With a cloud icon: on engenty.ai, for everyone with the link |
 | Live · 1 note | It runs in the cloud, one step there with less (see "Share") |
 | Local | Published on an install without an account: the link answers only on this computer |
 | Being sent | The version did not reach engenty.ai yet; the studio tries again by itself |
 | Not in the cloud | engenty.ai does not run this version. "Share" says why and what helps |
-| Unpublished changes | You changed the draft since. The link still runs the published version |
 
 On a card, "Link" copies the address others can open, and the arrow opens it. A wizard that
 runs only on this computer has no address for others: its "Link" says so and how an account
@@ -34,8 +46,7 @@ gives it one, and the arrow opens it here.
 
 ## Share
 
-"Share" is its own step beside "Publish": it says who may open the wizard and how others reach
-it, and copies the link.
+"Share" says who may open the wizard and how others reach it, and copies the link.
 
 | Part | Does |
 |---|---|
@@ -46,8 +57,7 @@ it, and copies the link.
 | Copy link | The link people open. It opens the first browser channel, and the wizard offers the others on its first page |
 | The gear | Runs a day (50 unless you change it, with what that costs at most), each message channel's keyword, and "Create a new link": the old link and its QR code stop working, in the cloud too |
 
-Where the wizard is not published yet, or the draft has changes, the dialog says so on top and
-publishes from there.
+Where the draft has changes, the dialog says so on top and leads to "Make changes live".
 
 One visitor can start 6 runs an hour.
 
@@ -138,13 +148,13 @@ for anyone else. To let others run the wizard:
 
 | Way | How |
 |---|---|
-| The cloud | With an [account](./models.md#account) signed in, "Publish" also sends the version to engenty.ai. Its link there runs on the account's credits, also while your computer is off |
+| The cloud | With an [account](./models.md#account) signed in, every version that goes live (the first share, and each "Go live") also goes to engenty.ai. Its link there runs on the account's credits, also while your computer is off |
 | Your own server | [Run engenty wizards on a server](./server.md) with a public https address |
 
 ### In the cloud
 
-Once an account is signed in under Settings → Account, every "Publish" sends the published
-version to engenty.ai. The avatar then carries a small cloud, and its menu says "Connected to
+Once an account is signed in under Settings → Account, every version that goes live is sent to
+engenty.ai too. The avatar then carries a small cloud, and its menu says "Connected to
 engenty.ai" with the credits. The share dialog gives the wizard's address at engenty.ai, which
 stays the same when you publish again. Where the cloud does not run this version, the dialog
 says so on top:

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 "";
     }