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

package/dist/editor/operations.js

@@ -0,0 +1,621 @@
+import { fmt } from "../text/engine.js";
+import { boundsOf, centerOf, frameOf, isCorner, localFrame, pageFrame, resizeFrame, rotatePoint, snapGuides, unionOf, withHeight, } from "../scene/frame.js";
+/** How far a copy lands from its original, down and to the right, in design units. */
+export const DUPLICATE_OFFSET = 24;
+/** The most pages a scene holds, as its schema says. */
+export const MAX_PAGES = 20;
+const FULL_LOCK = { move: true, resize: true, edit: true, style: true, delete: true };
+/** The picked layers in drawing order. A layer inside a picked group is left to its group. */
+function pick(scene, page, ids) {
+    const wanted = new Set(ids);
+    const found = [];
+    const walk = (layers, groups) => {
+        for (const layer of layers) {
+            if (wanted.has(layer.id))
+                found.push({ layer, groups });
+            else if (layer.type === "group")
+                walk(layer.layers, [...groups, layer]);
+        }
+    };
+    walk(scene.pages[page]?.layers ?? [], []);
+    return found;
+}
+/** A lock on the layer or on any group around it. */
+function locked(found, action) {
+    return [found.layer, ...found.groups].some((layer) => layer.lock?.[action]);
+}
+const groupFrames = (found) => found.groups.map((group) => group.frame);
+const onPage = (found) => pageFrame(found.layer.frame, groupFrames(found));
+/** The layer with a frame given in the page's space. */
+const placed = (found, frame) => ({
+    ...found.layer,
+    frame: localFrame(frame, groupFrames(found)),
+});
+/** The layer moved by dx and dy on the page, whatever groups it sits in. */
+function shifted(found, dx, dy) {
+    const frame = onPage(found);
+    return placed(found, { ...frame, x: frame.x + dx, y: frame.y + dy });
+}
+/** The layers with some of them replaced by id, sharing every list that did not change. */
+function replaceLayers(layers, next) {
+    let changed = false;
+    const out = layers.map((layer) => {
+        const replaced = next.get(layer.id);
+        if (replaced) {
+            changed = true;
+            return replaced;
+        }
+        if (layer.type !== "group")
+            return layer;
+        const children = replaceLayers(layer.layers, next);
+        if (children === layer.layers)
+            return layer;
+        changed = true;
+        return { ...layer, layers: children };
+    });
+    return changed ? out : layers;
+}
+function withPage(scene, index, page) {
+    return { ...scene, pages: scene.pages.map((each, at) => (at === index ? page : each)) };
+}
+function withLayers(scene, page, layers) {
+    const current = scene.pages[page];
+    if (!current || layers === current.layers)
+        return scene;
+    return withPage(scene, page, { ...current, layers });
+}
+function commit(scene, page, next) {
+    const current = scene.pages[page];
+    if (!current || next.size === 0)
+        return scene;
+    return withLayers(scene, page, replaceLayers(current.layers, next));
+}
+const commitOne = (scene, page, layer) => commit(scene, page, new Map([[layer.id, layer]]));
+/** Every id on a page, groups and their layers included. */
+function idsOn(layers, into = new Set()) {
+    for (const layer of layers) {
+        into.add(layer.id);
+        if (layer.type === "group")
+            idsOn(layer.layers, into);
+    }
+    return into;
+}
+/** `base`, or `base-2`, `base-3`... whichever is free, and mark it taken. */
+function freeId(taken, base) {
+    const stem = base.replace(/-\d+$/, "").slice(0, 56) || "layer";
+    let id = taken.has(base) || base.length > 64 ? `${stem}-2` : base;
+    for (let n = 3; taken.has(id); n++)
+        id = `${stem}-${n}`;
+    taken.add(id);
+    return id;
+}
+/** The layer with ids that are free on its page, its group's layers included. */
+function withFreeIds(layer, taken) {
+    const id = freeId(taken, layer.id);
+    if (layer.type !== "group")
+        return { ...layer, id };
+    return { ...layer, id, layers: layer.layers.map((child) => withFreeIds(child, taken)) };
+}
+const SCALED_AXES = {
+    m: ["x", "y"],
+    l: ["x", "y"],
+    t: ["x", "y"],
+    h: ["x"],
+    v: ["y"],
+    c: ["x", "y", "x", "y", "x", "y"],
+    s: ["x", "y", "x", "y"],
+    q: ["x", "y", "x", "y"],
+    a: ["x", "y", "-", "-", "-", "x", "y"],
+    z: [],
+};
+/**
+ * Path data scaled by kx across and ky down. ponytail: an arc's radii scale with the axes, which
+ * is exact for upright arcs only, and data whose numbers do not split into whole commands (arc
+ * flags written with no space, like `a1 1 0 0110 10`) comes back unchanged.
+ */
+export function scalePath(d, kx, ky) {
+    const tokens = d.match(/[a-zA-Z]|[-+]?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/g) ?? [];
+    const parts = [];
+    let index = 0;
+    while (index < tokens.length) {
+        const command = tokens[index++] ?? "";
+        const axes = SCALED_AXES[command.toLowerCase()];
+        if (!axes)
+            return d;
+        const numbers = [];
+        while (index < tokens.length && !/[a-zA-Z]/.test(tokens[index] ?? "")) {
+            numbers.push(Number(tokens[index++]));
+        }
+        if (axes.length === 0 ? numbers.length > 0 : numbers.length % axes.length !== 0)
+            return d;
+        const scaled = numbers.map((value, at) => {
+            const axis = axes[at % axes.length];
+            return fmt(axis === "x" ? value * kx : axis === "y" ? value * ky : value);
+        });
+        parts.push(`${command}${scaled.join(" ")}`);
+    }
+    return parts.join("");
+}
+/**
+ * A layer's content scaled with its frame by `k`, as a corner drag does: type sizes, corner
+ * radii, strokes, shadows, path data and a group's layers. Its own frame is the caller's.
+ */
+function scaleContent(layer, k) {
+    if (k === 1)
+        return layer;
+    switch (layer.type) {
+        case "text":
+            return {
+                ...layer,
+                style: { ...layer.style, size: layer.style.size * k },
+                fit: layer.fit && { ...layer.fit, min: layer.fit.min * k },
+            };
+        case "shape":
+            return {
+                ...layer,
+                radius: layer.radius && layer.radius * k,
+                d: layer.d && scalePath(layer.d, k, k),
+                stroke: layer.stroke && {
+                    ...layer.stroke,
+                    width: layer.stroke.width * k,
+                    dash: layer.stroke.dash?.map((step) => step * k),
+                },
+                shadow: layer.shadow && {
+                    ...layer.shadow,
+                    x: layer.shadow.x * k,
+                    y: layer.shadow.y * k,
+                    blur: layer.shadow.blur * k,
+                },
+            };
+        case "image":
+        case "art":
+            return { ...layer, radius: layer.radius && layer.radius * k };
+        case "group":
+            return {
+                ...layer,
+                layers: layer.layers.map((child) => scaleContent({
+                    ...child,
+                    frame: {
+                        ...child.frame,
+                        x: child.frame.x * k,
+                        y: child.frame.y * k,
+                        w: child.frame.w * k,
+                        h: child.frame.h * k,
+                    },
+                }, k)),
+            };
+        default:
+            return layer;
+    }
+}
+/** The page-space frame of a layer and the layer itself, found by id anywhere on the page. */
+export function findLayer(scene, page, id) {
+    const found = pick(scene, page, [id])[0];
+    return found && { layer: found.layer, frame: onPage(found) };
+}
+/**
+ * The box the editor draws around the pick: one layer's own frame, turned with it, or the
+ * upright box around several. Its `rotate` is where a turn gesture starts.
+ */
+export function selectionFrame(scene, page, ids) {
+    const found = pick(scene, page, ids);
+    const first = found[0];
+    if (!first)
+        return undefined;
+    if (found.length === 1)
+        return onPage(first);
+    const box = unionOf(found.map((each) => boundsOf(onPage(each))));
+    return frameOf(box.x, box.y, box.w, box.h);
+}
+/**
+ * Where a moving pick can land: the page's edges and middle, and the edges and middles of the
+ * other visible layers on the page. Feed it to snapBox with the stage's scale.
+ */
+export function snapTargets(scene, page, ids) {
+    const moving = new Set(ids);
+    const holdsMoving = (layer) => moving.has(layer.id) || (layer.type === "group" && layer.layers.some(holdsMoving));
+    const others = (scene.pages[page]?.layers ?? [])
+        .filter((layer) => !layer.hidden && !holdsMoving(layer))
+        .map((layer) => boundsOf(layer.frame));
+    return snapGuides({ x: 0, y: 0, w: scene.size.w, h: scene.size.h }, others);
+}
+/** Put a layer on top of the page. Ids already taken on the page get a number. */
+export function addLayer(scene, page, layer) {
+    const current = scene.pages[page];
+    if (!current)
+        return { scene, selection: [] };
+    const added = withFreeIds(layer, idsOn(current.layers));
+    return { scene: withLayers(scene, page, [...current.layers, added]), selection: [added.id] };
+}
+/** Take layers off the page. Locked ones stay, and stay picked. */
+export function removeLayers(scene, page, ids) {
+    const current = scene.pages[page];
+    if (!current)
+        return { scene, selection: [] };
+    const kept = [];
+    const gone = new Set();
+    for (const found of pick(scene, page, ids)) {
+        if (locked(found, "delete"))
+            kept.push(found.layer.id);
+        else
+            gone.add(found.layer.id);
+    }
+    if (gone.size === 0)
+        return { scene, selection: kept };
+    const prune = (layers) => layers.flatMap((layer) => {
+        if (gone.has(layer.id))
+            return [];
+        if (layer.type !== "group")
+            return [layer];
+        const children = prune(layer.layers);
+        // A group with nothing left in it goes too.
+        if (children.length === 0)
+            return [];
+        return [
+            children.length === layer.layers.length ? layer : { ...layer, layers: children },
+        ];
+    });
+    return { scene: withLayers(scene, page, prune(current.layers)), selection: kept };
+}
+/** A copy of each picked layer right above it, moved by `offset` on the page. */
+export function duplicateLayers(scene, page, ids, offset = DUPLICATE_OFFSET) {
+    const current = scene.pages[page];
+    if (!current)
+        return { scene, selection: [] };
+    const taken = idsOn(current.layers);
+    const copies = new Map();
+    for (const found of pick(scene, page, ids))
+        copies.set(found.layer.id, withFreeIds(shifted(found, offset, offset), taken));
+    if (copies.size === 0)
+        return { scene, selection: [] };
+    const insert = (layers) => layers.flatMap((layer) => {
+        const copy = copies.get(layer.id);
+        if (copy)
+            return [layer, copy];
+        return layer.type === "group" ? [{ ...layer, layers: insert(layer.layers) }] : [layer];
+    });
+    return {
+        scene: withLayers(scene, page, insert(current.layers)),
+        selection: [...copies.values()].map((copy) => copy.id),
+    };
+}
+/** Move the picked layers by dx and dy on the page. Layers locked in place stay. */
+export function moveLayers(scene, page, ids, dx, dy) {
+    if (!dx && !dy)
+        return scene;
+    const next = new Map();
+    for (const found of pick(scene, page, ids))
+        if (!locked(found, "move"))
+            next.set(found.layer.id, shifted(found, dx, dy));
+    return commit(scene, page, next);
+}
+/**
+ * Pull a handle of the pick to `to`, a point on the page (the handle's start plus the pointer's
+ * travel), from the scene at the press. One layer resizes in its own turned frame with the
+ * opposite corner or side held still; a corner also scales its type, radii and strokes, and a
+ * group's layers. Several layers, and a group, resize from the corners only: the box around
+ * them scales, and every layer in it, about the opposite corner.
+ */
+export function resizeLayers(start, page, ids, handle, to, options = {}) {
+    const found = pick(start, page, ids).filter((each) => !locked(each, "resize"));
+    const only = found[0];
+    if (!only)
+        return start;
+    if (found.length === 1) {
+        // A group's layers cannot stretch one way only, so a group keeps its proportions.
+        const isGroup = only.layer.type === "group";
+        if (isGroup && !isCorner(handle))
+            return start;
+        const keepRatio = isGroup || options.keepRatio !== false;
+        const frame = onPage(only);
+        const resized = resizeFrame(frame, handle, to, { min: options.min, keepRatio });
+        let layer = placed(only, resized);
+        if (isCorner(handle) && keepRatio)
+            layer = scaleContent(layer, resized.w / frame.w);
+        else if (layer.type === "shape" && layer.d)
+            layer = { ...layer, d: scalePath(layer.d, resized.w / frame.w, resized.h / frame.h) };
+        return commitOne(start, page, layer);
+    }
+    if (!isCorner(handle))
+        return start;
+    const next = new Map();
+    const frames = found.map(onPage);
+    const box = unionOf(frames.map(boundsOf));
+    const resized = resizeFrame(frameOf(box.x, box.y, box.w, box.h), handle, to, {
+        min: options.min,
+    });
+    const k = resized.w / box.w;
+    const was = centerOf(box);
+    const now = centerOf(resized);
+    found.forEach((each, index) => {
+        const frame = frames[index];
+        if (!frame)
+            return;
+        // Scaling about the held corner moves every center k times as far from the box's center.
+        const center = centerOf(frame);
+        const w = frame.w * k;
+        const h = frame.h * k;
+        const x = now.x + (center.x - was.x) * k - w / 2;
+        const y = now.y + (center.y - was.y) * k - h / 2;
+        next.set(each.layer.id, scaleContent(placed(each, frameOf(x, y, w, h, frame.rotate)), k));
+    });
+    return commit(start, page, next);
+}
+/**
+ * Turn the pick to `angle` degrees, from the scene at the press. One layer turns about its own
+ * center to that angle. Several turn together by `angle` about the center of the box around
+ * them, which starts every gesture upright (selectionFrame's `rotate` is 0). Use turnAngle for
+ * the angle a handle gives.
+ */
+export function rotateLayers(start, page, ids, angle) {
+    const found = pick(start, page, ids).filter((each) => !locked(each, "resize"));
+    const only = found[0];
+    if (!only)
+        return start;
+    if (found.length === 1) {
+        const frame = onPage(only);
+        return commitOne(start, page, placed(only, frameOf(frame.x, frame.y, frame.w, frame.h, angle)));
+    }
+    const next = new Map();
+    const frames = found.map(onPage);
+    const pivot = centerOf(unionOf(frames.map(boundsOf)));
+    found.forEach((each, index) => {
+        const frame = frames[index];
+        if (!frame)
+            return;
+        const center = centerOf(frame);
+        const turned = rotatePoint({ x: center.x - pivot.x, y: center.y - pivot.y }, angle);
+        const x = pivot.x + turned.x - frame.w / 2;
+        const y = pivot.y + turned.y - frame.h / 2;
+        next.set(each.layer.id, placed(each, frameOf(x, y, frame.w, frame.h, (frame.rotate ?? 0) + angle)));
+    });
+    return commit(start, page, next);
+}
+/**
+ * Line the pick up: one layer with the page, several with the box around them. It uses each
+ * layer's upright box, so a turned layer lines up by what it covers.
+ */
+export function alignLayers(scene, page, ids, mode) {
+    const found = pick(scene, page, ids);
+    if (found.length === 0)
+        return scene;
+    const boxes = found.map((each) => boundsOf(onPage(each)));
+    const ref = found.length === 1 ? { x: 0, y: 0, w: scene.size.w, h: scene.size.h } : unionOf(boxes);
+    const next = new Map();
+    found.forEach((each, index) => {
+        const box = boxes[index];
+        if (!box || locked(each, "move"))
+            return;
+        const delta = alignDelta(box, ref, mode);
+        if (delta.x || delta.y)
+            next.set(each.layer.id, shifted(each, delta.x, delta.y));
+    });
+    return commit(scene, page, next);
+}
+function alignDelta(box, ref, mode) {
+    switch (mode) {
+        case "left":
+            return { x: ref.x - box.x, y: 0 };
+        case "center":
+            return { x: ref.x + ref.w / 2 - (box.x + box.w / 2), y: 0 };
+        case "right":
+            return { x: ref.x + ref.w - (box.x + box.w), y: 0 };
+        case "top":
+            return { x: 0, y: ref.y - box.y };
+        case "middle":
+            return { x: 0, y: ref.y + ref.h / 2 - (box.y + box.h / 2) };
+        case "bottom":
+            return { x: 0, y: ref.y + ref.h - (box.y + box.h) };
+    }
+}
+/**
+ * Space three or more layers evenly: the first and the last stay, and the gaps between the
+ * others' upright boxes become equal. Layers locked in place are left out.
+ */
+export function distributeLayers(scene, page, ids, direction) {
+    const found = pick(scene, page, ids).filter((each) => !locked(each, "move"));
+    if (found.length < 3)
+        return scene;
+    const start = direction === "horizontal" ? "x" : "y";
+    const size = direction === "horizontal" ? "w" : "h";
+    const items = found
+        .map((each) => ({ each, box: boundsOf(onPage(each)) }))
+        .sort((a, b) => a.box[start] - b.box[start]);
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (!first || !last)
+        return scene;
+    const span = last.box[start] + last.box[size] - first.box[start];
+    const filled = items.reduce((sum, item) => sum + item.box[size], 0);
+    const gap = (span - filled) / (items.length - 1);
+    const next = new Map();
+    let at = first.box[start];
+    for (const { each, box } of items) {
+        const delta = at - box[start];
+        at += box[size] + gap;
+        if (Math.abs(delta) < 1e-9)
+            continue;
+        const layer = direction === "horizontal" ? shifted(each, delta, 0) : shifted(each, 0, delta);
+        next.set(each.layer.id, layer);
+    }
+    return commit(scene, page, next);
+}
+/**
+ * Change the drawing order: to the front or the back of their list, or one step past the next
+ * layer that is not picked. Picked layers keep their order among themselves, and a layer inside
+ * a group moves within its group.
+ */
+export function reorderLayers(scene, page, ids, order) {
+    const picked = new Set(ids);
+    const isPicked = (layer) => picked.has(layer.id);
+    const reorder = (layers) => {
+        const nested = replaceGroups(layers, reorder);
+        let out;
+        if (order === "front")
+            out = [...nested.filter((l) => !isPicked(l)), ...nested.filter(isPicked)];
+        else if (order === "back")
+            out = [...nested.filter(isPicked), ...nested.filter((l) => !isPicked(l))];
+        else {
+            out = [...nested];
+            const swap = (i, j) => {
+                const a = out[i];
+                const b = out[j];
+                if (a && b)
+                    [out[i], out[j]] = [b, a];
+            };
+            if (order === "forward") {
+                for (let i = out.length - 2; i >= 0; i--) {
+                    const here = out[i];
+                    const above = out[i + 1];
+                    if (here && above && isPicked(here) && !isPicked(above))
+                        swap(i, i + 1);
+                }
+            }
+            else {
+                for (let i = 1; i < out.length; i++) {
+                    const here = out[i];
+                    const below = out[i - 1];
+                    if (here && below && isPicked(here) && !isPicked(below))
+                        swap(i, i - 1);
+                }
+            }
+        }
+        return out.every((layer, index) => layer === layers[index]) ? layers : out;
+    };
+    const current = scene.pages[page];
+    return current ? withLayers(scene, page, reorder(current.layers)) : scene;
+}
+/** Each group's list run through `fn`, keeping the objects of groups that did not change. */
+function replaceGroups(layers, fn) {
+    return layers.map((layer) => {
+        if (layer.type !== "group")
+            return layer;
+        const children = fn(layer.layers);
+        return children === layer.layers ? layer : { ...layer, layers: children };
+    });
+}
+/**
+ * Put two or more layers that share a list into one group, where the top one of them was. The
+ * group is the upright box around them, and they keep their place on the page.
+ */
+export function groupLayers(scene, page, ids, id = "group") {
+    const current = scene.pages[page];
+    const found = pick(scene, page, ids);
+    const parent = found[0]?.groups.at(-1);
+    const sameList = found.every((each) => each.groups.at(-1) === parent);
+    if (!current || found.length < 2 || !sameList)
+        return { scene, selection: [...ids] };
+    const members = new Set(found.map((each) => each.layer.id));
+    const box = unionOf(found.map((each) => boundsOf(each.layer.frame)));
+    const group = {
+        id: freeId(idsOn(current.layers), id),
+        type: "group",
+        frame: frameOf(box.x, box.y, box.w, box.h),
+        layers: found.map(({ layer }) => ({
+            ...layer,
+            frame: { ...layer.frame, x: layer.frame.x - box.x, y: layer.frame.y - box.y },
+        })),
+    };
+    const top = found[found.length - 1]?.layer.id;
+    const regroup = (layers) => layers.flatMap((layer) => {
+        if (layer.id === top)
+            return [group];
+        if (members.has(layer.id))
+            return [];
+        return layer.type === "group" ? [{ ...layer, layers: regroup(layer.layers) }] : [layer];
+    });
+    return { scene: withLayers(scene, page, regroup(current.layers)), selection: [group.id] };
+}
+/**
+ * Break picked groups apart: their layers take the group's place, keep their place on the page,
+ * and take on the group's opacity and hidden state. ponytail: a group's blend mode goes to each
+ * layer that has none, which blends them one by one instead of as one picture.
+ */
+export function ungroupLayers(scene, page, ids) {
+    const current = scene.pages[page];
+    const groups = new Set(pick(scene, page, ids)
+        .filter((each) => each.layer.type === "group")
+        .map((each) => each.layer.id));
+    if (!current || groups.size === 0)
+        return { scene, selection: [...ids] };
+    const freed = [];
+    const lift = (layers) => layers.flatMap((layer) => {
+        if (layer.type !== "group")
+            return [layer];
+        if (!groups.has(layer.id))
+            return [{ ...layer, layers: lift(layer.layers) }];
+        return layer.layers.map((child) => {
+            freed.push(child.id);
+            const opacity = (layer.opacity ?? 1) * (child.opacity ?? 1);
+            return {
+                ...child,
+                frame: pageFrame(child.frame, [layer.frame]),
+                opacity: opacity < 1 ? opacity : undefined,
+                hidden: child.hidden || layer.hidden || undefined,
+                blend: child.blend ?? layer.blend,
+            };
+        });
+    });
+    return { scene: withLayers(scene, page, lift(current.layers)), selection: freed };
+}
+/** Lock the picked layers (true: all five locks), unlock them (false), or set some locks. */
+export function lockLayers(scene, page, ids, lock) {
+    const next = new Map();
+    for (const { layer } of pick(scene, page, ids)) {
+        const { lock: _old, ...rest } = layer;
+        next.set(layer.id, lock === false ? rest : { ...rest, lock: lock === true ? FULL_LOCK : lock });
+    }
+    return commit(scene, page, next);
+}
+/**
+ * A text box's new height (from its lines, as someone types), with its turned top-left corner
+ * held still, so turned text never slides (rule E2).
+ */
+export function setTextHeight(scene, page, id, h) {
+    const found = pick(scene, page, [id])[0];
+    if (!found || found.layer.type !== "text" || found.layer.frame.h === h)
+        return scene;
+    return commitOne(scene, page, { ...found.layer, frame: withHeight(found.layer.frame, h) });
+}
+function freePageId(scene, base) {
+    return freeId(new Set(scene.pages.map((page) => page.id)), base);
+}
+/** A blank page at `at` (the end by default), on the same background as the page before it. */
+export function addPage(scene, at = scene.pages.length) {
+    if (scene.pages.length >= MAX_PAGES)
+        return scene;
+    const index = Math.max(0, Math.min(at, scene.pages.length));
+    const like = scene.pages[index - 1] ?? scene.pages[0];
+    const page = {
+        id: freePageId(scene, "page"),
+        background: like?.background ?? { token: "ground" },
+        layers: [],
+    };
+    return { ...scene, pages: [...scene.pages.slice(0, index), page, ...scene.pages.slice(index)] };
+}
+/** A copy of a page, right after it. */
+export function duplicatePage(scene, index) {
+    const page = scene.pages[index];
+    if (!page || scene.pages.length >= MAX_PAGES)
+        return scene;
+    const copy = { ...page, id: freePageId(scene, page.id) };
+    return {
+        ...scene,
+        pages: [...scene.pages.slice(0, index + 1), copy, ...scene.pages.slice(index + 1)],
+    };
+}
+/** Take a page out. The last page always stays. */
+export function removePage(scene, index) {
+    if (scene.pages.length <= 1 || !scene.pages[index])
+        return scene;
+    return { ...scene, pages: scene.pages.filter((_, at) => at !== index) };
+}
+/** Move a page from one place in the order to another. */
+export function movePage(scene, from, to) {
+    const page = scene.pages[from];
+    if (!page || from === to || to < 0 || to >= scene.pages.length)
+        return scene;
+    const pages = scene.pages.filter((_, at) => at !== from);
+    pages.splice(to, 0, page);
+    return { ...scene, pages };
+}

package/dist/files/docs.d.ts

@@ -0,0 +1,49 @@
+import type { Brand, Locale } from "../brand/schema.ts";
+/** The brand's slug, or one made from its name for a draft. */
+export declare function slugOf(brand: Brand): string;
+/** The brand's copy in a language, falling back to the default language. */
+export declare function copyFor(brand: Brand, locale?: Locale): {
+    tagline: string;
+    description: string;
+    card: {
+        title: string;
+        subtitle?: string | undefined;
+    };
+};
+/** brand.md: YAML tokens, then the design.md sections in their fixed order. */
+export declare function brandMd(brand: Brand): string;
+/**
+ * The public brand.json: what anyone may read from the CDN and the brand page (plan D5). Voice
+ * notes, art references and every link without a public tick are left out, and the marks are
+ * written again by the kit, so only clean SVG is ever published.
+ */
+export declare function publicBrand(brand: Brand): Brand;
+export type HeadOptions = {
+    /** Where the web files are served, like "/" or "/docs/". Default "/". */
+    base?: string;
+    /** The absolute URL of the share card, like https://acme.com/og.png. */
+    ogImage?: string;
+    locale?: Locale;
+    /** The page title, when it is not the brand's name. */
+    title?: string;
+    /** Like generate's `dark`: "none" is a light-only page, so it gets one light theme color. */
+    dark?: "auto" | "attribute" | "none";
+};
+/** The head tags for the icons, the manifest, the theme colors and the share card. */
+export declare function headTags(brand: Brand, options?: HeadOptions): string[];
+/** The share card's alt text, in the card's language. */
+export declare function ogAlt(brand: Brand, locale?: Locale, title?: string): string;
+/** site.webmanifest, with the fleet's icon names so a sibling can switch with no head edits. */
+export declare function webManifest(brand: Brand, options?: {
+    base?: string;
+}): Record<string, unknown>;
+/** prompt.md: one paste-ready prompt for an AI site builder (Lovable, v0, Bolt and the like). */
+export declare function promptMd(brand: Brand, options?: {
+    filesUrl?: string;
+}): string;
+/** signature.html: a table-based email signature with the opaque logo bar (Gmail's dark mode). */
+export declare function signatureHtml(brand: Brand, options: {
+    logoUrl: string;
+    person?: string;
+    role?: string;
+}): string;