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

package/dist/color/palette.js

@@ -0,0 +1,114 @@
+import { ensureContrast, fromOklch, onColor } from "./contrast.js";
+/**
+ * Every pair of roles a brand promises to keep readable, with its WCAG 2 floor: 4.5 for text,
+ * 3 for lines, fills and focus (non-text). check() measures these on every brand, and
+ * generatePalette() is built to pass them.
+ */
+export const CONTRAST_PAIRS = [
+    { fg: "ink", bg: "ground", min: 4.5, what: "text" },
+    { fg: "ink", bg: "surface", min: 4.5, what: "text on cards" },
+    { fg: "muted", bg: "ground", min: 4.5, what: "quiet text" },
+    { fg: "muted", bg: "surface", min: 4.5, what: "quiet text on cards" },
+    { fg: "line", bg: "ground", min: 3, what: "field borders" },
+    { fg: "line", bg: "surface", min: 3, what: "field borders on cards" },
+    { fg: "primary", bg: "ground", min: 3, what: "the brand color as a button" },
+    { fg: "onPrimary", bg: "primary", min: 4.5, what: "text on the brand color" },
+    { fg: "accent", bg: "ground", min: 3, what: "the accent as a fill" },
+    { fg: "onAccent", bg: "accent", min: 4.5, what: "text on the accent" },
+    { fg: "focus", bg: "ground", min: 3, what: "the focus ring" },
+    { fg: "danger", bg: "ground", min: 4.5, what: "error text" },
+    { fg: "success", bg: "ground", min: 4.5, what: "success text" },
+    { fg: "warning", bg: "ground", min: 4.5, what: "warning text" },
+];
+export const MOODS = ["calm", "bold", "warm", "fresh", "classic", "playful"];
+const MOOD = {
+    calm: { chroma: 0.09, accentShift: 150, accentChroma: 0.07, tint: 0.006 },
+    bold: { chroma: 0.2, accentShift: 180, accentChroma: 0.17, tint: 0.004 },
+    warm: { chroma: 0.14, accentShift: 40, accentChroma: 0.12, tint: 0.012 },
+    fresh: { chroma: 0.15, accentShift: 120, accentChroma: 0.13, tint: 0.008 },
+    classic: { chroma: 0.07, accentShift: 30, accentChroma: 0.05, tint: 0.004 },
+    playful: { chroma: 0.19, accentShift: 210, accentChroma: 0.16, tint: 0.01 },
+};
+const STATUS_HUE = { danger: 27, success: 150, warning: 70, focus: 255 };
+/**
+ * A light and a dark role set from one hue and a mood. Lightness and chroma come from the mood;
+ * every role is then pushed (in OKLCH lightness only) until each of CONTRAST_PAIRS passes, so the
+ * result is readable by construction and keeps the hue the owner picked.
+ */
+export function generatePalette({ hue, mood }) {
+    const spec = MOOD[mood];
+    const h = ((hue % 360) + 360) % 360;
+    const light = buildTheme("light", h, spec);
+    const dark = buildTheme("dark", h, spec);
+    // The fleet's retune rule: the brand color is never the same in both themes.
+    if (dark.primary === light.primary)
+        dark.primary = fromOklch({ l: 0.8, c: spec.chroma, h });
+    return { light, dark };
+}
+function buildTheme(theme, h, spec) {
+    const isLight = theme === "light";
+    const ground = isLight
+        ? fromOklch({ l: 0.993, c: spec.tint * 0.5, h })
+        : fromOklch({ l: 0.17, c: spec.tint * 1.5, h });
+    const surface = isLight
+        ? fromOklch({ l: 0.965, c: spec.tint * 1.5, h })
+        : fromOklch({ l: 0.22, c: spec.tint * 2, h });
+    const grounds = [ground, surface];
+    const ink = readable(fromOklch({ l: isLight ? 0.22 : 0.95, c: 0.02, h }), grounds, 4.5);
+    const muted = readable(fromOklch({ l: isLight ? 0.48 : 0.74, c: 0.025, h }), grounds, 4.5);
+    const line = readable(fromOklch({ l: isLight ? 0.64 : 0.52, c: 0.02, h }), grounds, 3);
+    // Text on a fill: ink or white in light themes; the dark ground or the ink in dark ones.
+    const darkText = isLight ? ink : ground;
+    const lightText = isLight ? "#ffffff" : ink;
+    const primaryPair = fill(fromOklch({ l: isLight ? 0.52 : 0.74, c: spec.chroma, h }), ground, {
+        dark: darkText,
+        light: lightText,
+        prefer: isLight ? lightText : darkText,
+    });
+    const accentPair = fill(fromOklch({
+        l: isLight ? 0.58 : 0.76,
+        c: spec.accentChroma,
+        h: (h + spec.accentShift) % 360,
+    }), ground, { dark: darkText, light: lightText, prefer: isLight ? lightText : darkText });
+    const status = (hueOf, l, c, min) => readable(fromOklch({ l, c, h: hueOf }), grounds, min);
+    return {
+        ground,
+        surface,
+        ink,
+        muted,
+        line,
+        primary: primaryPair.fill,
+        onPrimary: primaryPair.on,
+        accent: accentPair.fill,
+        onAccent: accentPair.on,
+        focus: status(STATUS_HUE.focus, isLight ? 0.55 : 0.72, 0.17, 3),
+        danger: status(STATUS_HUE.danger, isLight ? 0.52 : 0.72, 0.19, 4.5),
+        success: status(STATUS_HUE.success, isLight ? 0.5 : 0.75, 0.13, 4.5),
+        warning: status(STATUS_HUE.warning, isLight ? 0.52 : 0.8, 0.12, 4.5),
+    };
+}
+/** Push `color` until it reaches `min` against every background in `grounds`. */
+function readable(color, grounds, min) {
+    let hex = color;
+    // Two passes: fixing it against one ground can, rarely, bring it back under on another.
+    for (let pass = 0; pass < 2; pass++) {
+        for (const ground of grounds)
+            hex = ensureContrast(hex, ground, min).hex;
+    }
+    return hex;
+}
+/**
+ * A fill that reads as a control on the ground (3:1) and carries 4.5:1 text. The text is the
+ * dark or the light candidate, whichever reads; when neither does, the fill moves away from the
+ * preferred one (darker under white in light themes, lighter over the dark ground in dark ones).
+ */
+function fill(color, ground, text) {
+    let hex = ensureContrast(color, ground, 3).hex;
+    let on = onColor(hex, text.dark, text.light);
+    if (on.ratio < 4.5) {
+        hex = ensureContrast(hex, text.prefer, 4.5).hex;
+        hex = ensureContrast(hex, ground, 3).hex;
+        on = onColor(hex, text.dark, text.light);
+    }
+    return { fill: hex, on: on.hex };
+}

package/dist/color/wcag.d.ts

@@ -0,0 +1,22 @@
+/**
+ * WCAG 2 contrast on hex colors. The fleet's contrast gates measure the same way, so a brand
+ * that passes here passes there.
+ */
+export type Rgb = {
+    r: number;
+    g: number;
+    b: number;
+};
+/** `#rrggbb` (or `#rgb`) to 0..255 channels. Throws on anything else. */
+export declare function parseHex(hex: string): Rgb;
+export declare function toHex({ r, g, b }: Rgb): string;
+/** Lowercase `#rrggbb`. */
+export declare function normalizeHex(hex: string): string;
+/** WCAG 2 relative luminance, 0 (black) to 1 (white). */
+export declare function luminance(hex: string): number;
+/** WCAG 2 contrast ratio, 1 to 21. Order does not matter. */
+export declare function contrast(a: string, b: string): number;
+/** The ratio rounded down to 2 decimals, the way people should see it: 4.499 is not 4.5. */
+export declare function formatRatio(ratio: number): string;
+/** Composite a color with alpha over an opaque ground, for contrast on translucent paint. */
+export declare function over(hex: string, alpha: number, ground: string): string;

package/dist/color/wcag.js

@@ -0,0 +1,50 @@
+/**
+ * WCAG 2 contrast on hex colors. The fleet's contrast gates measure the same way, so a brand
+ * that passes here passes there.
+ */
+/** `#rrggbb` (or `#rgb`) to 0..255 channels. Throws on anything else. */
+export function parseHex(hex) {
+    const match = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+    if (!match?.[1])
+        throw new TypeError(`Not a hex color: ${hex}`);
+    const digits = match[1].length === 3 ? [...match[1]].map((digit) => digit + digit).join("") : match[1];
+    const value = Number.parseInt(digits, 16);
+    return { r: (value >> 16) & 255, g: (value >> 8) & 255, b: value & 255 };
+}
+export function toHex({ r, g, b }) {
+    const channel = (value) => Math.max(0, Math.min(255, Math.round(value)))
+        .toString(16)
+        .padStart(2, "0");
+    return `#${channel(r)}${channel(g)}${channel(b)}`;
+}
+/** Lowercase `#rrggbb`. */
+export function normalizeHex(hex) {
+    return toHex(parseHex(hex));
+}
+function linear(channel) {
+    const value = channel / 255;
+    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+}
+/** WCAG 2 relative luminance, 0 (black) to 1 (white). */
+export function luminance(hex) {
+    const { r, g, b } = parseHex(hex);
+    return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+}
+/** WCAG 2 contrast ratio, 1 to 21. Order does not matter. */
+export function contrast(a, b) {
+    const first = luminance(a);
+    const second = luminance(b);
+    const [light, dark] = first > second ? [first, second] : [second, first];
+    return (light + 0.05) / (dark + 0.05);
+}
+/** The ratio rounded down to 2 decimals, the way people should see it: 4.499 is not 4.5. */
+export function formatRatio(ratio) {
+    return `${(Math.floor(ratio * 100) / 100).toFixed(2)}:1`;
+}
+/** Composite a color with alpha over an opaque ground, for contrast on translucent paint. */
+export function over(hex, alpha, ground) {
+    const top = parseHex(hex);
+    const bottom = parseHex(ground);
+    const mix = (a, b) => a * alpha + b * (1 - alpha);
+    return toHex({ r: mix(top.r, bottom.r), g: mix(top.g, bottom.g), b: mix(top.b, bottom.b) });
+}

package/dist/draft/draft.d.ts

@@ -0,0 +1,61 @@
+import type { Brand, Locale } from "../brand/schema.ts";
+import { type Mood } from "../color/palette.ts";
+import type { FontResolver } from "../text/fonts.ts";
+/**
+ * A draft brand from a business's name and one line about it, drawn by code alone. The same
+ * input always draws the same brand, so a link that carries the input (`draftParams`) redraws it
+ * anywhere: the site's try-it makes one in the browser and the studio picks it up from the link.
+ *
+ * `seed` keeps the look steady while the name is typed: colors, fonts and the kind of logo come
+ * from the seed, and change only when a word says something about the business ("padaria",
+ * "salon"), so mostly the letters change as you type.
+ * `picks` count each "Try another" press, per part.
+ */
+export type DraftPicks = {
+    colors: number;
+    fonts: number;
+    logo: number;
+};
+export type DraftInput = {
+    name: string;
+    /** What the business does, in the owner's words. It becomes the tagline. */
+    idea: string;
+    locale: Locale;
+    seed: number;
+    picks: DraftPicks;
+};
+/** The longest name (the wordmark's limit) and line (the copy check's tagline limit) a draft
+ *  takes: every file the kit makes has room for them. */
+export declare const DRAFT_LIMITS: {
+    readonly name: 40;
+    readonly idea: 60;
+};
+/**
+ * The font pairs a draft picks from. Few on purpose: a browser carries every file
+ * (`draftFontFiles`), so the try-it draws with no font server. Each display face has one weight,
+ * and the text faces are sans or serif opposites of their display.
+ */
+export declare const DRAFT_FONT_PAIRS: readonly {
+    display: string;
+    weight: number;
+    text: string;
+    moods: readonly Mood[];
+}[];
+/** Every font file a draft can ask for, so a page can serve them from its own origin. */
+export declare function draftFontFiles(): {
+    id: string;
+    weight: number;
+}[];
+/** A fresh seed for a new draft. */
+export declare function newDraftSeed(): number;
+/**
+ * Draw the draft. The name and the line are trimmed and cut to DRAFT_LIMITS; an empty line makes
+ * the name the tagline. Loads the display font (for a monogram) through `fonts`.
+ */
+export declare function draftBrand(input: DraftInput, ctx: {
+    fonts: FontResolver;
+}): Promise<Brand>;
+/** The draft as link parameters: name, idea, locale, seed, colors, fonts and logo. */
+export declare function draftParams(input: DraftInput): URLSearchParams;
+/** A draft read back from link parameters, or null when any part is missing or out of range. */
+export declare function readDraftParams(params: URLSearchParams): DraftInput | null;

package/dist/draft/draft.js

@@ -0,0 +1,383 @@
+import { BRAND_SCHEMA_URL, LOCALES, parseBrand } from "../brand/schema.js";
+import { MOODS, generatePalette } from "../color/palette.js";
+import { catalogFont } from "../fonts/pick.js";
+import { iconMark, initials, matchIcons, monogramMark } from "../marks/draw.js";
+import { engineFor } from "../scene/render.js";
+/** The longest name (the wordmark's limit) and line (the copy check's tagline limit) a draft
+ *  takes: every file the kit makes has room for them. */
+export const DRAFT_LIMITS = { name: 40, idea: 60 };
+/**
+ * The font pairs a draft picks from. Few on purpose: a browser carries every file
+ * (`draftFontFiles`), so the try-it draws with no font server. Each display face has one weight,
+ * and the text faces are sans or serif opposites of their display.
+ */
+export const DRAFT_FONT_PAIRS = [
+    { display: "calistoga", weight: 400, text: "instrument-sans", moods: ["warm", "playful"] },
+    { display: "fraunces", weight: 600, text: "instrument-sans", moods: ["warm", "classic"] },
+    { display: "bodoni-moda", weight: 600, text: "karla", moods: ["classic", "calm"] },
+    { display: "pacifico", weight: 400, text: "karla", moods: ["playful", "warm"] },
+    { display: "syne", weight: 700, text: "instrument-sans", moods: ["bold", "fresh"] },
+    { display: "bebas-neue", weight: 400, text: "karla", moods: ["bold"] },
+    { display: "fredoka", weight: 600, text: "karla", moods: ["playful", "fresh"] },
+    { display: "eb-garamond", weight: 500, text: "instrument-sans", moods: ["classic", "calm"] },
+    { display: "outfit", weight: 700, text: "literata", moods: ["fresh", "calm"] },
+    { display: "caprasimo", weight: 400, text: "instrument-sans", moods: ["warm", "bold"] },
+];
+const TEXT_WEIGHT = 400;
+/** Every font file a draft can ask for, so a page can serve them from its own origin. */
+export function draftFontFiles() {
+    const files = new Map();
+    for (const pair of DRAFT_FONT_PAIRS) {
+        files.set(`${pair.display}-${pair.weight}`, { id: pair.display, weight: pair.weight });
+        files.set(`${pair.text}-${TEXT_WEIGHT}`, { id: pair.text, weight: TEXT_WEIGHT });
+    }
+    return [...files.values()];
+}
+/**
+ * What a line about the business says about its look: a mood and the hues that suit it. Words are
+ * matched without accents at the start of a word, in pt-BR, en and es. The first row that matches
+ * wins; a line with none of them leaves the mood to the seed.
+ */
+const MOOD_WORDS = [
+    {
+        mood: "warm",
+        hues: [15, 60],
+        words: [
+            "pao",
+            "paes",
+            "padar",
+            "bolo",
+            "doce",
+            "confeit",
+            "cafe",
+            "bread",
+            "bak",
+            "cake",
+            "pastr",
+            "coffee",
+            "sweet",
+            "pan ",
+            "panad",
+            "pastel",
+            "dulce",
+            "comida",
+            "food",
+            "restaur",
+            "pizza",
+            "lanche",
+        ],
+    },
+    {
+        mood: "fresh",
+        hues: [95, 175],
+        words: [
+            "planta",
+            "flor",
+            "jardi",
+            "horta",
+            "verde",
+            "organic",
+            "plant",
+            "flower",
+            "garden",
+            "green",
+            "vegan",
+            "natural",
+            "suco",
+            "juice",
+            "salad",
+        ],
+    },
+    {
+        mood: "calm",
+        hues: [185, 330],
+        words: [
+            "salao",
+            "salon",
+            "beleza",
+            "beauty",
+            "belleza",
+            "estetic",
+            "spa",
+            "massag",
+            "yoga",
+            "unha",
+            "nail",
+            "cabel",
+            "hair",
+            "pelo",
+            "cor ",
+            "escova",
+            "terapia",
+            "therap",
+            "saude",
+            "health",
+            "salud",
+        ],
+    },
+    {
+        mood: "bold",
+        hues: [0, 360],
+        words: [
+            "barb",
+            "academia",
+            "gym",
+            "gimnas",
+            "treino",
+            "fitness",
+            "oficina",
+            "reform",
+            "repair",
+            "repar",
+            "arreglo",
+            "conserto",
+            "pintura",
+            "paint",
+            "obra",
+            "constru",
+            "tattoo",
+            "tatu",
+        ],
+    },
+    {
+        mood: "classic",
+        hues: [200, 260],
+        words: [
+            "advoga",
+            "law ",
+            "lawyer",
+            "abogad",
+            "contab",
+            "account",
+            "contad",
+            "consult",
+            "foto",
+            "photo",
+            "imobili",
+            "real estate",
+            "inmobili",
+            "arquitet",
+            "architect",
+            "arquitect",
+        ],
+    },
+    {
+        mood: "playful",
+        hues: [0, 360],
+        words: [
+            "crianca",
+            "infant",
+            "kid",
+            "nino",
+            "pet ",
+            "cachorr",
+            "dog",
+            "perro",
+            "gato",
+            "cat ",
+            "festa",
+            "party",
+            "fiesta",
+            "brinqu",
+            "toy",
+            "juguet",
+            "brecho",
+            "thrift",
+            "bazar",
+        ],
+    },
+];
+/** Lowercase, without accents, padded with spaces, so words match at their starts. */
+function plain(text) {
+    return ` ${text
+        .normalize("NFD")
+        .replace(/\p{M}/gu, "")
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, " ")} `;
+}
+function lineMood(idea) {
+    const haystack = plain(idea);
+    return MOOD_WORDS.find((row) => row.words.some((word) => haystack.includes(` ${word}`)));
+}
+/** FNV-1a, 32 bits: a stable number for a string. */
+function hash(text) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < text.length; i++) {
+        h ^= text.charCodeAt(i);
+        h = Math.imul(h, 0x01000193);
+    }
+    return h >>> 0;
+}
+/** A number in [0, 1) from the seed and a label, so each part of the draft rolls its own die. */
+function roll(seed, label) {
+    let t = (seed ^ hash(label)) >>> 0;
+    // mulberry32, one step.
+    t = (t + 0x6d2b79f5) >>> 0;
+    let r = Math.imul(t ^ (t >>> 15), 1 | t);
+    r = (r + Math.imul(r ^ (r >>> 7), 61 | r)) ^ r;
+    return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
+}
+/** A fresh seed for a new draft. */
+export function newDraftSeed() {
+    const value = new Uint32Array(1);
+    crypto.getRandomValues(value);
+    return ((value[0] ?? 1) % 2147483646) + 1;
+}
+/** The golden angle: each "Try another" lands far from the colors before it. */
+const GOLDEN_ANGLE = 137.508;
+function draftColors(input) {
+    const fromLine = lineMood(`${input.name} ${input.idea}`);
+    const base = fromLine?.mood ?? MOODS[Math.floor(roll(input.seed, "mood") * MOODS.length)];
+    const mood = base ?? "calm";
+    const [from, to] = fromLine?.hues ?? [0, 360];
+    const firstHue = from + roll(input.seed, "hue") * (to - from);
+    const k = input.picks.colors;
+    // The business's own mood holds for two presses, then the moods take turns.
+    const moodNow = MOODS[(MOODS.indexOf(mood) + Math.floor(k / 2)) % MOODS.length] ?? mood;
+    const hue = (firstHue + k * GOLDEN_ANGLE) % 360;
+    return { mood, palette: generatePalette({ hue, mood: moodNow }) };
+}
+function draftFonts(input, mood) {
+    // Pairs that suit the mood first, then the rest, each group in a seed-picked order.
+    const order = [...DRAFT_FONT_PAIRS].sort((a, b) => {
+        const fit = Number(b.moods.includes(mood)) - Number(a.moods.includes(mood));
+        return fit || roll(input.seed, a.display) - roll(input.seed, b.display);
+    });
+    const pair = order[input.picks.fonts % order.length] ?? DRAFT_FONT_PAIRS[0];
+    if (!pair)
+        throw new Error("No draft fonts");
+    const font = (id, weight) => {
+        const found = catalogFont(id);
+        if (!found)
+            throw new Error(`${id} is not in the kit's font catalog`);
+        return {
+            family: found.family,
+            id,
+            weights: [weight],
+            license: "OFL-1.1",
+        };
+    };
+    return { pair, display: font(pair.display, pair.weight), text: font(pair.text, TEXT_WEIGHT) };
+}
+const BADGES = ["circle", "rounded", "hexagon", "square"];
+/** The logo for a pick: icon marks and monograms take turns, each in the next badge shape. */
+function draftLogo(input) {
+    const icons = matchIcons(`${input.name} ${input.idea}`, 4);
+    const matched = (icons[0]?.score ?? 0) > 0;
+    const k = input.picks.logo + (matched ? 0 : 1);
+    const turn = Math.floor(k / 2);
+    const badge = BADGES[(turn + Math.floor(roll(input.seed, "badge") * BADGES.length)) % 4];
+    const icon = icons[turn % Math.max(1, icons.length)]?.name ?? "sparkles";
+    return {
+        kind: k % 2 === 0 ? "icon" : "monogram",
+        badge: badge ?? "circle",
+        icon,
+    };
+}
+/** The short name under a home-screen icon: the name, or its first word, or its first letters. */
+function shortNameOf(name) {
+    if (name.length <= 12)
+        return name;
+    const first = name.split(/\s+/)[0] ?? name;
+    return (first.length <= 12 ? first : name.slice(0, 12)).trim();
+}
+/**
+ * Draw the draft. The name and the line are trimmed and cut to DRAFT_LIMITS; an empty line makes
+ * the name the tagline. Loads the display font (for a monogram) through `fonts`.
+ */
+export async function draftBrand(input, ctx) {
+    const name = input.name.trim().slice(0, DRAFT_LIMITS.name) || "?";
+    const idea = input.idea.trim().slice(0, DRAFT_LIMITS.idea);
+    const clean = { ...input, name, idea };
+    const { mood, palette } = draftColors(clean);
+    const fonts = draftFonts(clean, mood);
+    const logo = draftLogo(clean);
+    const light = palette.light;
+    let svg;
+    if (logo.kind === "icon") {
+        svg = iconMark(logo.icon, { badge: logo.badge, fill: light.primary, ink: light.onPrimary });
+    }
+    else {
+        const engine = await engineFor(ctx.fonts);
+        const font = await engine.font({ id: fonts.display.id, weight: fonts.pair.weight });
+        svg = monogramMark(engine, font, {
+            letters: initials(name),
+            badge: logo.badge,
+            fill: light.primary,
+            ink: light.onPrimary,
+        });
+    }
+    const tagline = idea || name;
+    const draft = {
+        $schema: BRAND_SCHEMA_URL,
+        schemaVersion: 1,
+        name,
+        shortName: shortNameOf(name),
+        locales: [input.locale],
+        defaultLocale: input.locale,
+        copy: {
+            [input.locale]: {
+                tagline,
+                description: tagline,
+                card: { title: name, ...(idea ? { subtitle: idea } : {}) },
+            },
+        },
+        mark: {
+            svg,
+            tile: {
+                fill: "ground",
+                shape: logo.badge === "circle" ? "circle" : "rounded",
+                padding: 0.04,
+            },
+            source: logo.kind === "icon"
+                ? { kind: "icon", ref: `lucide:${logo.icon}` }
+                : { kind: "monogram" },
+        },
+        wordmark: { text: name, font: "display", weight: fonts.pair.weight, tracking: -0.01 },
+        colors: palette,
+        fonts: { display: fonts.display, text: fonts.text },
+    };
+    const parsed = parseBrand(draft);
+    if (!parsed.ok) {
+        throw new Error(`The draft did not make a valid brand: ${parsed.issues.map((issue) => `${issue.path} ${issue.message}`).join("; ")}`);
+    }
+    return parsed.brand;
+}
+const PICK_KEYS = ["colors", "fonts", "logo"];
+/** The draft as link parameters: name, idea, locale, seed, colors, fonts and logo. */
+export function draftParams(input) {
+    const params = new URLSearchParams({
+        name: input.name.trim().slice(0, DRAFT_LIMITS.name),
+        idea: input.idea.trim().slice(0, DRAFT_LIMITS.idea),
+        locale: input.locale,
+        seed: String(input.seed),
+    });
+    for (const key of PICK_KEYS)
+        params.set(key, String(input.picks[key]));
+    return params;
+}
+function count(value, max) {
+    if (value === null || !/^\d{1,10}$/.test(value))
+        return null;
+    const number = Number(value);
+    return number <= max ? number : null;
+}
+/** A draft read back from link parameters, or null when any part is missing or out of range. */
+export function readDraftParams(params) {
+    const name = params.get("name")?.trim() ?? "";
+    const idea = params.get("idea")?.trim() ?? "";
+    const locale = LOCALES.find((code) => code === params.get("locale"));
+    const seed = count(params.get("seed"), 2147483647);
+    if (!name || name.length > DRAFT_LIMITS.name || idea.length > DRAFT_LIMITS.idea)
+        return null;
+    if (!locale || !seed)
+        return null;
+    const picks = { colors: 0, fonts: 0, logo: 0 };
+    for (const key of PICK_KEYS) {
+        const value = count(params.get(key) ?? "0", 9999);
+        if (value === null)
+            return null;
+        picks[key] = value;
+    }
+    return { name, idea, locale, seed, picks };
+}