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

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

package/dist/editor/history.d.ts

@@ -0,0 +1,78 @@
+import { type Scene } from "../scene/schema.ts";
+/**
+ * Undo and redo for the editor, and the merge with a newer copy from the server (the ideas of
+ * smartgenius's editor draft). A step is a list of patches, one per field it changed, never a
+ * whole scene: a change that came from the server stays when someone undoes their own edit, and
+ * a server write takes only the fields it changed out of the history.
+ *
+ * A patch's path names one field:
+ * - `["scene", prop]`: size, theme, locale, slots, meta...
+ * - `["pages"]`: the order of the page ids
+ * - `["page", pageId, prop]`: a page's background, grain or name
+ * - `["layers", pageId]` and `["layers", pageId, groupId]`: the order of a list of layer ids
+ * - `["layer", pageId, layerId, prop]`: one prop of one layer, like its frame or its text
+ *
+ * A gesture records once, at release, with the scene from the press (editor.md rule E4). Edits
+ * that share a group (a typing session, a held arrow key) become one step, until the code that
+ * owns the group ends it with endEditGroup.
+ */
+export declare const HISTORY_LIMIT = 50;
+/** One field before and after an edit. A side is missing when the field did not exist. */
+export type ScenePatch = {
+    path: readonly string[];
+    before?: unknown;
+    after?: unknown;
+};
+export type EditHistory = {
+    /** Oldest first. */
+    undo: ScenePatch[][];
+    /** The next step to redo first. */
+    redo: ScenePatch[][];
+    /** The run of edits the last step belongs to, while it is open. */
+    group: string | null;
+};
+export type SceneMerge = {
+    /** Your scene with their changes in it, ready to show and save. */
+    scene: Scene;
+    /** What to compare against from now on: theirs, with the colliding fields left as they were,
+     *  so your side of a collision still counts as unsaved. */
+    base: Scene;
+    /** Fields both sides changed in different ways: their change, which `scene` does not have. */
+    conflicts: ScenePatch[];
+};
+/** Every field that differs between two scenes. */
+export declare function diffScenes(before: Scene, after: Scene): ScenePatch[];
+/**
+ * The scene with each patch's `before` or `after` side set. If the result is no longer a valid
+ * scene, the scene comes back unchanged.
+ */
+export declare function applyPatches(scene: Scene, patches: readonly ScenePatch[], side: "before" | "after"): Scene;
+export declare function emptyHistory(): EditHistory;
+/**
+ * Record an edit from `before` to `after`. With a `group` equal to the open one, the edit joins
+ * the last step, so a typing session or a held arrow key is one Undo.
+ */
+export declare function recordEdit(history: EditHistory, before: Scene, after: Scene, group?: string | null): EditHistory;
+/** Close the open run: the next edit starts a new step, even in the same group. */
+export declare function endEditGroup(history: EditHistory): EditHistory;
+export declare function undoEdit(history: EditHistory, scene: Scene): {
+    history: EditHistory;
+    scene: Scene;
+};
+export declare function redoEdit(history: EditHistory, scene: Scene): {
+    history: EditHistory;
+    scene: Scene;
+};
+/**
+ * After the server's copy moved from `before` to `server`, keep the history for every field the
+ * server did not change, so an unrelated edit stays undoable after a picture lands.
+ */
+export declare function rebaseHistory(history: EditHistory, before: Scene, server: Scene): EditHistory;
+/**
+ * Bring a newer server copy into your unsaved scene. `base` is the copy your edits started from.
+ * A field only they changed comes in; a field only you changed stays yours; a field you both
+ * changed differently keeps yours and comes back in `conflicts`, so the editor can show their
+ * change and offer "Use theirs" (applyPatches with the conflict's `after`) or "Keep mine".
+ * Lists of layers and pages merge as a whole: when you both changed one, yours stays.
+ */
+export declare function mergeScenes(draft: Scene, base: Scene, server: Scene): SceneMerge;

package/dist/editor/history.js

@@ -0,0 +1,221 @@
+import { canonical } from "../scene/render.js";
+import { layerSchema, sceneSchema } from "../scene/schema.js";
+/**
+ * Undo and redo for the editor, and the merge with a newer copy from the server (the ideas of
+ * smartgenius's editor draft). A step is a list of patches, one per field it changed, never a
+ * whole scene: a change that came from the server stays when someone undoes their own edit, and
+ * a server write takes only the fields it changed out of the history.
+ *
+ * A patch's path names one field:
+ * - `["scene", prop]`: size, theme, locale, slots, meta...
+ * - `["pages"]`: the order of the page ids
+ * - `["page", pageId, prop]`: a page's background, grain or name
+ * - `["layers", pageId]` and `["layers", pageId, groupId]`: the order of a list of layer ids
+ * - `["layer", pageId, layerId, prop]`: one prop of one layer, like its frame or its text
+ *
+ * A gesture records once, at release, with the scene from the press (editor.md rule E4). Edits
+ * that share a group (a typing session, a held arrow key) become one step, until the code that
+ * owns the group ends it with endEditGroup.
+ */
+export const HISTORY_LIMIT = 50;
+const keyOf = (path) => JSON.stringify(path);
+function same(a, b) {
+    return a === b || canonical(a) === canonical(b);
+}
+function put(fields, path, value) {
+    if (value === undefined)
+        fields.delete(keyOf(path));
+    else
+        fields.set(keyOf(path), { path, value });
+}
+/** The scene as one entry per field. Values are the scene's own objects, never copies. */
+function flatten(scene) {
+    const fields = new Map();
+    const props = (prefix, object, skip) => {
+        for (const [prop, value] of Object.entries(object))
+            if (!skip.includes(prop))
+                put(fields, [...prefix, prop], value);
+    };
+    props(["scene"], scene, ["pages"]);
+    put(fields, ["pages"], scene.pages.map((page) => page.id));
+    for (const page of scene.pages) {
+        props(["page", page.id], page, ["id", "layers"]);
+        const walk = (layers, list) => {
+            put(fields, list, layers.map((layer) => layer.id));
+            for (const layer of layers) {
+                props(["layer", page.id, layer.id], layer, ["id", "layers"]);
+                if (layer.type === "group")
+                    walk(layer.layers, ["layers", page.id, layer.id]);
+            }
+        };
+        walk(page.layers, ["layers", page.id]);
+    }
+    return fields;
+}
+const idsIn = (value) => Array.isArray(value) ? value.filter((id) => typeof id === "string") : [];
+/**
+ * The scene the fields describe, or undefined when they no longer make one. A layer whose
+ * fields no longer make a valid layer is left out, and so is one that no list holds.
+ */
+function unflatten(fields) {
+    const scene = {};
+    const pages = new Map();
+    const layers = new Map();
+    const objectFor = (map, key) => {
+        let object = map.get(key);
+        if (!object) {
+            object = {};
+            map.set(key, object);
+        }
+        return object;
+    };
+    for (const { path, value } of fields.values()) {
+        const [kind, a, b, c] = path;
+        if (kind === "scene" && a)
+            scene[a] = value;
+        else if (kind === "page" && a && b)
+            objectFor(pages, a)[b] = value;
+        else if (kind === "layer" && a && b && c)
+            objectFor(layers, keyOf([a, b]))[c] = value;
+    }
+    const placed = new Set();
+    /** The layers a list of ids names, at `path` (as flatten wrote it). */
+    const list = (pageId, path) => idsIn(fields.get(keyOf(path))?.value).flatMap((id) => {
+        const key = keyOf([pageId, id]);
+        const props = layers.get(key);
+        if (!props || placed.has(key))
+            return [];
+        placed.add(key);
+        const layer = props.type === "group"
+            ? { ...props, id, layers: list(pageId, ["layers", pageId, id]) }
+            : { ...props, id };
+        const parsed = layerSchema.safeParse(layer);
+        return parsed.success ? [parsed.data] : [];
+    });
+    const parsed = sceneSchema.safeParse({
+        ...scene,
+        pages: idsIn(fields.get(keyOf(["pages"]))?.value).map((id) => ({
+            ...pages.get(id),
+            id,
+            layers: list(id, ["layers", id]),
+        })),
+    });
+    return parsed.success ? parsed.data : undefined;
+}
+function diffFields(before, after) {
+    const patches = [];
+    for (const [key, field] of before) {
+        const next = after.get(key);
+        if (!same(field.value, next?.value))
+            patches.push({ path: field.path, before: field.value, after: next?.value });
+    }
+    for (const [key, field] of after)
+        if (!before.has(key))
+            patches.push({ path: field.path, after: field.value });
+    return patches;
+}
+/** Every field that differs between two scenes. */
+export function diffScenes(before, after) {
+    return diffFields(flatten(before), flatten(after));
+}
+/**
+ * The scene with each patch's `before` or `after` side set. If the result is no longer a valid
+ * scene, the scene comes back unchanged.
+ */
+export function applyPatches(scene, patches, side) {
+    if (patches.length === 0)
+        return scene;
+    const fields = flatten(scene);
+    for (const patch of patches)
+        put(fields, patch.path, patch[side]);
+    return unflatten(fields) ?? scene;
+}
+export function emptyHistory() {
+    return { undo: [], redo: [], group: null };
+}
+/**
+ * Record an edit from `before` to `after`. With a `group` equal to the open one, the edit joins
+ * the last step, so a typing session or a held arrow key is one Undo.
+ */
+export function recordEdit(history, before, after, group = null) {
+    const previous = group !== null && group === history.group ? history.undo.at(-1) : undefined;
+    const start = flatten(before);
+    // Where the run began: this edit's start with the run's earlier changes taken back.
+    if (previous)
+        for (const patch of previous)
+            put(start, patch.path, patch.before);
+    const step = diffFields(start, flatten(after));
+    const undo = previous ? history.undo.slice(0, -1) : history.undo;
+    // A run that came back to where it began leaves no step.
+    if (step.length === 0)
+        return previous ? { undo, redo: [], group: null } : history;
+    return { undo: [...undo, step].slice(-HISTORY_LIMIT), redo: [], group };
+}
+/** Close the open run: the next edit starts a new step, even in the same group. */
+export function endEditGroup(history) {
+    return history.group === null ? history : { ...history, group: null };
+}
+export function undoEdit(history, scene) {
+    const step = history.undo.at(-1);
+    if (!step)
+        return { history, scene };
+    return {
+        history: { undo: history.undo.slice(0, -1), redo: [step, ...history.redo], group: null },
+        scene: applyPatches(scene, step, "before"),
+    };
+}
+export function redoEdit(history, scene) {
+    const [step, ...rest] = history.redo;
+    if (!step)
+        return { history, scene };
+    return {
+        history: { undo: [...history.undo, step], redo: rest, group: null },
+        scene: applyPatches(scene, step, "after"),
+    };
+}
+/**
+ * After the server's copy moved from `before` to `server`, keep the history for every field the
+ * server did not change, so an unrelated edit stays undoable after a picture lands.
+ */
+export function rebaseHistory(history, before, server) {
+    const changed = new Set(diffScenes(before, server).map((patch) => keyOf(patch.path)));
+    if (changed.size === 0)
+        return endEditGroup(history);
+    const keep = (steps) => steps
+        .map((step) => step.filter((patch) => !changed.has(keyOf(patch.path))))
+        .filter((step) => step.length > 0);
+    return { undo: keep(history.undo), redo: keep(history.redo), group: null };
+}
+/**
+ * Bring a newer server copy into your unsaved scene. `base` is the copy your edits started from.
+ * A field only they changed comes in; a field only you changed stays yours; a field you both
+ * changed differently keeps yours and comes back in `conflicts`, so the editor can show their
+ * change and offer "Use theirs" (applyPatches with the conflict's `after`) or "Keep mine".
+ * Lists of layers and pages merge as a whole: when you both changed one, yours stays.
+ */
+export function mergeScenes(draft, base, server) {
+    const mine = flatten(draft);
+    const was = flatten(base);
+    const theirs = flatten(server);
+    if (diffFields(was, mine).length === 0)
+        return { scene: server, base: server, conflicts: [] };
+    const merged = new Map(mine);
+    const nextBase = new Map(theirs);
+    const conflicts = [];
+    const remote = diffFields(was, theirs);
+    for (const patch of remote) {
+        const own = mine.get(keyOf(patch.path))?.value;
+        if (same(own, patch.before))
+            put(merged, patch.path, patch.after);
+        else if (!same(own, patch.after)) {
+            conflicts.push(patch);
+            put(nextBase, patch.path, patch.before);
+        }
+    }
+    const scene = unflatten(merged);
+    const sceneBase = unflatten(nextBase);
+    // ponytail: fields that no longer make a scene together keep yours whole, against theirs.
+    if (!scene || !sceneBase)
+        return { scene: draft, base: server, conflicts: remote };
+    return { scene, base: sceneBase, conflicts };
+}