@iyulab/u-board-designer 0.0.0-stage → 0.2.0

package/dist/lib/authoring/board-layout.js

@@ -0,0 +1,326 @@
+// Where the parts of a board are, written back from its picture. The editor draws the
+// picture and the author moves, sizes, orders and deletes what it draws; a node's or an item's id is its part's
+// (`<part>/<key>` for one of an `each` part's items), so what changed is said again in the board's layout — and nothing
+// else of the board changes.
+import { DEFAULT_NODE_HEIGHT, DEFAULT_NODE_WIDTH } from '@iyulab/u-board/toolkit';
+import { GRID_DEFAULT_SPAN } from '@iyulab/u-board/picture';
+import { isDataPlace, isFlowPlace } from '@iyulab/u-board/toolkit';
+/**
+ * Whether the editor lays this board out: a canvas, or a grid — of parts, canvases, and grids of parts and canvases in
+ * its cells (one level, as the picture draws them). A grid in a cell is laid out on its own (`cellBoard`): the picture
+ * flattens it into the outer grid's rows, which the editor does not say back item by item.
+ */
+export function layoutEditable(board) {
+    if (board.layout.kind === 'canvas')
+        return true;
+    return board.layout.items.every(entry => !isGridCell(entry) || entry.grid.every(inner => !isGridCell(inner)));
+}
+/** The id the picture draws a grid's canvas cell — entry `i` of its items — with; what it draws in the cell is named
+ *  past `<id>:`. */
+export function cellId(i) {
+    return `cell-${i}`;
+}
+/** The grid entry a canvas cell's id names, if the board has a canvas there. */
+export function cellIndex(board, id) {
+    const match = /^cell-(\d+)$/.exec(id);
+    if (board.layout.kind !== 'grid' || match === null)
+        return undefined;
+    return isCanvasCell(board.layout.items[Number(match[1])]) ? Number(match[1]) : undefined;
+}
+/** The grid entry holding a grid that the picture's item `id` is drawn from — one of its parts (or their items), or a
+ *  canvas in it (`cell-<i>-<j>`) — if it is one. */
+export function gridCellOf(board, id) {
+    if (board.layout.kind !== 'grid')
+        return undefined;
+    const canvas = /^cell-(\d+)-\d+$/.exec(id);
+    if (canvas !== null)
+        return isGridCell(board.layout.items[Number(canvas[1])]) ? Number(canvas[1]) : undefined;
+    const part = id.split('/')[0];
+    const i = board.layout.items.findIndex(entry => isGridCell(entry) && entry.grid.some(inner => entryId(inner) === part));
+    return i === -1 ? undefined : i;
+}
+/** The cell of grid entry `i` — a canvas, or a grid — as a board of its own: the board, that cell its layout. */
+export function cellBoard(board, i) {
+    if (board.layout.kind !== 'grid')
+        return undefined;
+    const entry = board.layout.items[i];
+    if (isCanvasCell(entry))
+        return { ...board, layout: { kind: 'canvas', ...entry.canvas } };
+    if (isGridCell(entry))
+        return { ...board, layout: { kind: 'grid', items: entry.grid } };
+    return undefined;
+}
+/** The board with grid entry `i`'s cell — and its parts, triggers and all the rest — as `cell` (one `cellBoard` gave,
+ *  edited) has them. */
+export function withCell(board, i, cell) {
+    if (board.layout.kind !== 'grid')
+        return board;
+    const entry = board.layout.items[i];
+    let next;
+    if (isCanvasCell(entry) && cell.layout.kind === 'canvas') {
+        const { kind: _kind, ...canvas } = cell.layout;
+        next = { ...entry, canvas };
+    }
+    else if (isGridCell(entry) && cell.layout.kind === 'grid')
+        next = { ...entry, grid: cell.layout.items };
+    else
+        return board;
+    return { ...cell, layout: { ...board.layout, items: board.layout.items.map((e, j) => (j === i ? next : e)) } };
+}
+function isCanvasCell(entry) {
+    return typeof entry === 'object' && !Array.isArray(entry) && entry.canvas !== undefined;
+}
+function isGridCell(entry) {
+    return typeof entry === 'object' && !Array.isArray(entry) && entry.grid !== undefined;
+}
+/** The id the picture draws a board's own link with — `link.<id>`. */
+export const LINK = 'link.';
+/** The link of a canvas board a picture connector `id` draws, if it is one of the board's own (not a group's). */
+export function linkOf(board, id) {
+    if (board.layout.kind !== 'canvas' || !id.startsWith(LINK))
+        return undefined;
+    const link = id.slice(LINK.length);
+    return board.layout.links?.[link] !== undefined ? link : undefined;
+}
+/** The id the picture draws a board's own shape with — `shape.<id>`. */
+export const SHAPE = 'shape.';
+/** The shape of a canvas board a picture piece `id` draws, if it is one of the board's own — a box or a text (drawn as a
+ *  decoration), or a line or a path (drawn as a node of its own). */
+export function shapeOf(board, id) {
+    if (board.layout.kind !== 'canvas' || !id.startsWith(SHAPE))
+        return undefined;
+    return board.layout.shapes?.[id.slice(SHAPE.length)] !== undefined ? id.slice(SHAPE.length) : undefined;
+}
+/** The line or path of a canvas board a picture node `id` draws, if it is one. */
+export function lineOf(board, id) {
+    const shape = shapeOf(board, id);
+    const drawn = shape !== undefined && board.layout.kind === 'canvas' ? board.layout.shapes[shape] : undefined;
+    return drawn && (drawn.line !== undefined || drawn.path !== undefined) ? shape : undefined;
+}
+/** A line or path moved and sized as its node was, from box `from` to box `to`: each point where it stands in the box. */
+export function shapeIn(shape, from, to) {
+    const sx = from.width === 0 ? 1 : to.width / from.width;
+    const sy = from.height === 0 ? 1 : to.height / from.height;
+    const px = (x) => Math.round(to.x + (x - from.x) * sx);
+    const py = (y) => Math.round(to.y + (y - from.y) * sy);
+    let k = 0;
+    if (shape.line !== undefined)
+        return { ...shape, line: shape.line.map(([x, y]) => [px(x), py(y)]) };
+    if (shape.path !== undefined)
+        return { ...shape, path: shape.path.replace(/-?\d*\.?\d+/g, n => String(k++ % 2 === 0 ? px(Number(n)) : py(Number(n)))) };
+    return shape;
+}
+/** The board with a new shape — a box, a text, or a line — at the canvas's top left, stepped from the shapes it has, and its
+ *  id. */
+export function withNewShape(board, kind, text) {
+    if (board.layout.kind !== 'canvas')
+        return { board, id: '' };
+    const shapes = board.layout.shapes ?? {};
+    let n = Object.keys(shapes).length + 1;
+    while (`shape-${n}` in shapes)
+        n++;
+    const id = `shape-${n}`;
+    const step = 24 * (n - 1);
+    const shape = kind === 'box' ? { box: [20 + step, 20 + step, 240, 160] } : kind === 'line' ? { line: [[20 + step, 20 + step], [220 + step, 20 + step]] } : { text, at: [20 + step, 20 + step] };
+    return { board: { ...board, layout: { ...board.layout, shapes: { ...shapes, [id]: shape } } }, id };
+}
+/** The board with a new link from part `from` to part `to` — drawn with an arrowhead, as a flow is — and its id. */
+export function withNewLink(board, from, to) {
+    if (board.layout.kind !== 'canvas')
+        return { board, id: '' };
+    const links = board.layout.links ?? {};
+    let n = Object.keys(links).length + 1;
+    while (`link-${n}` in links)
+        n++;
+    const id = `link-${n}`;
+    return { board: { ...board, layout: { ...board.layout, links: { ...links, [id]: { from, to, arrow: 'end' } } } }, id };
+}
+/** Whether the picture node or item `id` is one the board places itself: a part, or an item of an `each` part — not a
+ *  part inside a group, which moves with its group. */
+export function placesItself(board, id) {
+    if (!layoutEditable(board))
+        return false;
+    if (lineOf(board, id) !== undefined)
+        return true;
+    const [part, key, ...rest] = id.split('/');
+    if (board.layout.kind === 'grid') {
+        if (cellIndex(board, id) !== undefined)
+            return true;
+        // A part in a grid cell is laid out in that cell's own grid.
+        if (gridCellOf(board, id) !== undefined)
+            return false;
+        const each = board.parts[part]?.each !== undefined;
+        return rest.length === 0 && (key === undefined ? !each : each) && board.layout.items.some(entry => entryId(entry) === part);
+    }
+    const placed = board.layout.place[part];
+    if (placed === undefined || rest.length > 0)
+        return false;
+    // Items placed by their own fields, or by a rule, are not dragged: the fields and the rule say where they are.
+    return key === undefined ? Array.isArray(placed) : board.parts[part]?.each !== undefined && !Array.isArray(placed) && !isDataPlace(placed) && !isFlowPlace(placed);
+}
+/**
+ * The board with its canvas layout as the picture `after` shows it, the picture having been `before`: each part (or
+ * item) that moved or was sized placed where it is now, each part deleted gone — with the links and triggers that
+ * named it. An item of an `each` part is there while its data has it, so deleting one deletes nothing.
+ */
+export function withPictureLayout(board, before, after) {
+    if (board.layout.kind === 'grid')
+        return before.kind === 'grid' && after.kind === 'grid' ? withGridLayout(board, before, after) : board;
+    if (before.kind !== 'canvas' || after.kind !== 'canvas')
+        return board;
+    const layout = { ...board.layout, place: { ...board.layout.place } };
+    const parts = { ...board.parts };
+    const was = new Map(before.nodes.map(node => [node.id, node]));
+    const now = new Map(after.nodes.map(node => [node.id, node]));
+    let changed = false;
+    for (const [id, node] of now) {
+        const old = was.get(id);
+        if (!old || !placesItself(board, id) || sameBox(old, node))
+            continue;
+        const line = lineOf(board, id);
+        if (line !== undefined) {
+            const box = (n) => ({ x: n.x, y: n.y, width: n.width ?? old.width ?? 0, height: n.height ?? old.height ?? 0 });
+            layout.shapes = { ...layout.shapes, [line]: shapeIn(layout.shapes[line], box(old), box(node)) };
+            changed = true;
+            continue;
+        }
+        const [part, key] = id.split('/');
+        const at = placeOf(old, node);
+        layout.place[part] = key === undefined ? at : { ...layout.place[part], [key]: at };
+        changed = true;
+    }
+    // A shape of the board's own moved, sized or deleted on the canvas: its decoration (`shape.<id>`).
+    const shapesNow = new Map((after.decorations ?? []).map(d => [d.id, d]));
+    for (const old of before.decorations ?? []) {
+        const id = shapeOf(board, old.id);
+        if (id === undefined)
+            continue;
+        const now = shapesNow.get(old.id);
+        const shapes = { ...layout.shapes };
+        const size = (d) => (d.type === 'rect' ? `${d.width}x${d.height}` : '');
+        if (now === undefined)
+            delete shapes[id];
+        else if (now.x === old.x && now.y === old.y && size(now) === size(old))
+            continue;
+        else if (now.type === 'rect' && shapes[id].box !== undefined)
+            shapes[id] = { ...shapes[id], box: [Math.round(now.x), Math.round(now.y), Math.round(now.width), Math.round(now.height)] };
+        else
+            shapes[id] = { ...shapes[id], at: [Math.round(now.x), Math.round(now.y)] };
+        layout.shapes = shapes;
+        changed = true;
+    }
+    // A link deleted on the canvas: its connector (`link.<id>`, the board's own links) gone from the picture.
+    const nowLinks = new Set(after.connectors.map(c => c.id));
+    const linksGone = before.connectors.map(c => c.id).filter(id => !nowLinks.has(id) && id.startsWith(LINK) && layout.links?.[id.slice(LINK.length)] !== undefined);
+    if (linksGone.length > 0) {
+        layout.links = Object.fromEntries(Object.entries(layout.links).filter(([id]) => !linksGone.includes(`${LINK}${id}`)));
+        changed = true;
+    }
+    const removed = [...was.keys()].filter(id => !now.has(id) && placesItself(board, id));
+    for (const line of removed.flatMap(id => lineOf(board, id) ?? [])) {
+        const { [line]: _gone, ...rest } = layout.shapes;
+        layout.shapes = rest;
+        changed = true;
+    }
+    const gone = removed.filter(id => !id.includes('/') && lineOf(board, id) === undefined);
+    for (const part of gone) {
+        delete parts[part];
+        delete layout.place[part];
+        changed = true;
+    }
+    if (!changed)
+        return board;
+    const names = named(gone);
+    if (gone.length > 0 && layout.links) {
+        layout.links = Object.fromEntries(Object.entries(layout.links).filter(([, link]) => !names(link.from) && !names(link.to)));
+    }
+    const triggers = gone.length > 0 ? board.triggers?.filter(t => !mentions(t, names)) : board.triggers;
+    return { ...board, parts, layout, ...(triggers !== undefined ? { triggers } : {}) };
+}
+/**
+ * A grid of parts and canvases as its picture `after` lays it out: the entries in the order they now come (an `each`
+ * part where its first item is), each taking the columns its item was given — one of an `each` part's items setting
+ * them all — and an entry deleted gone: a part with the triggers that named it, a canvas with the parts placed on it.
+ * A part the picture did not draw (an `each` part whose data has no items now) keeps its place.
+ */
+function withGridLayout(board, before, after) {
+    if (board.layout.kind !== 'grid' || !layoutEditable(board))
+        return board;
+    // An entry by the id its item is drawn with: a part's (an `each` part's, its items'), a canvas's `cell-<i>`; a grid
+    // in a cell by `grid-<i>`, which every item drawn from it stands for — it keeps its own layout, coming where its first
+    // item does.
+    const entries = board.layout.items;
+    const keyOf = (entry, i) => (isCanvasCell(entry) ? cellId(i) : isGridCell(entry) ? `grid-${i}` : entryId(entry));
+    const byKey = new Map(entries.map((entry, i) => [keyOf(entry, i), entry]));
+    const partOf = (id) => {
+        const nested = gridCellOf(board, id);
+        return nested !== undefined ? `grid-${nested}` : id.split('/')[0];
+    };
+    const spanWas = new Map(before.items.map(item => [item.id, item.span ?? GRID_DEFAULT_SPAN]));
+    const span = new Map();
+    for (const item of after.items) {
+        const part = partOf(item.id);
+        const now = item.span ?? GRID_DEFAULT_SPAN;
+        if (!span.has(part) || now !== spanWas.get(item.id))
+            span.set(part, now);
+    }
+    const drawn = new Set(before.items.map(item => partOf(item.id)));
+    const order = [...new Set(after.items.map(item => partOf(item.id)))];
+    const gone = [...drawn].filter(part => !span.has(part));
+    // A part not drawn now keeps its place among the others: it goes back after the drawn part it followed, or first.
+    // An entry keeps its form — a part with a height, a canvas — taking only its columns from the picture.
+    const entryOf = (key) => {
+        const entry = byKey.get(key);
+        if (isGridCell(entry))
+            return entry;
+        const columns = span.get(key);
+        if (typeof entry === 'string' || Array.isArray(entry))
+            return columns === GRID_DEFAULT_SPAN ? key : [key, columns];
+        const { span: _span, ...rest } = entry;
+        return columns === GRID_DEFAULT_SPAN && entry.span === undefined ? rest : { ...rest, span: columns };
+    };
+    /** The entries of parts not drawn that come straight after entry `at` (-1: before the first). */
+    const following = (at) => {
+        const out = [];
+        for (let i = at + 1; i < entries.length && !drawn.has(keyOf(entries[i], i)); i++)
+            out.push(entries[i]);
+        return out;
+    };
+    const items = [...following(-1)];
+    for (const key of order)
+        items.push(entryOf(key), ...following(entries.findIndex((entry, i) => keyOf(entry, i) === key)));
+    if (gone.length === 0 && JSON.stringify(items) === JSON.stringify(board.layout.items))
+        return board;
+    // A canvas deleted takes the parts placed on it.
+    const goneParts = gone.flatMap(key => {
+        const entry = byKey.get(key);
+        return isCanvasCell(entry) ? Object.keys(entry.canvas.place) : [key];
+    });
+    const parts = { ...board.parts };
+    for (const part of goneParts)
+        delete parts[part];
+    const triggers = goneParts.length > 0 ? board.triggers?.filter(t => !mentions(t, named(goneParts))) : board.triggers;
+    return { ...board, parts, layout: { ...board.layout, items }, ...(triggers !== undefined ? { triggers } : {}) };
+}
+/** The part a grid entry places. */
+function entryId(entry) {
+    return typeof entry === 'string' ? entry : Array.isArray(entry) ? entry[0] : (entry.id ?? '');
+}
+/** Whether an id names one of `gone` — the part, or something in it. */
+function named(gone) {
+    return id => id !== undefined && gone.some(part => id === part || id.startsWith(`${part}/`));
+}
+/** Where a node is now, as a place: with its size when it was sized, or is now another size than it was drawn. */
+function placeOf(old, node) {
+    const width = node.width ?? old.width ?? DEFAULT_NODE_WIDTH;
+    const height = node.height ?? old.height ?? DEFAULT_NODE_HEIGHT;
+    const sized = old.width !== undefined || old.height !== undefined || width !== DEFAULT_NODE_WIDTH || height !== DEFAULT_NODE_HEIGHT;
+    return sized ? [node.x, node.y, width, height] : [node.x, node.y];
+}
+function sameBox(a, b) {
+    return a.x === b.x && a.y === b.y && (b.width === undefined || b.width === (a.width ?? DEFAULT_NODE_WIDTH)) && (b.height === undefined || b.height === (a.height ?? DEFAULT_NODE_HEIGHT));
+}
+/** Whether a trigger names a part `names` says is gone — what it reacts to, waits on or acts on. */
+function mentions(t, names) {
+    return ('part' in t.on && names(t.on.part)) || names(t.when?.part) || t.do.some(a => a.action === 'focus' && names(a.part));
+}

package/dist/lib/authoring/board-triggers.d.ts

@@ -0,0 +1,5 @@
+import type { Board } from '@iyulab/u-board/toolkit';
+import type { TriggerEditing } from './TriggersEditor.js';
+/** What the triggers editor needs to edit `board`'s triggers: them in its words, the parts and statuses it offers, and
+ *  how each change is written back (`edit`). `parts` are the ids a trigger may name — a part made per item by item. */
+export declare function boardTriggerEditing(board: Board, parts: readonly string[], edit: (update: (current: Board) => Board) => void): TriggerEditing;

package/dist/lib/authoring/board-triggers.js

@@ -0,0 +1,55 @@
+// The triggers of a board, edited with the triggers editor of its picture: each trigger
+// shown in the picture's words (a part is a node, a status a state, a link fills in `{{node}}` and `{{state}}`) and
+// written back in the board's — keeping the `field` a trigger reads a status of while it still names the same part.
+/** What the triggers editor needs to edit `board`'s triggers: them in its words, the parts and statuses it offers, and
+ *  how each change is written back (`edit`). `parts` are the ids a trigger may name — a part made per item by item. */
+export function boardTriggerEditing(board, parts, edit) {
+    const statuses = Object.keys(board.statuses ?? {});
+    const write = (update) => edit(current => {
+        const triggers = update([...(current.triggers ?? [])]);
+        const { triggers: _gone, ...rest } = current;
+        return triggers.length > 0 ? { ...rest, triggers } : rest;
+    });
+    return {
+        triggers: board.triggers?.map(shown),
+        parts,
+        // An item of an `each` part is a node `<part>/<key>`: a trigger on it may be for every item of the part.
+        eachOf: node => (node.includes('/') && board.parts[node.split('/')[0]]?.each !== undefined ? node.split('/')[0] : undefined),
+        stateNamesOf: () => statuses,
+        onAdd: trigger => write(triggers => [...triggers, written(trigger)]),
+        onReplace: (index, trigger) => write(triggers => triggers.map((t, i) => (i === index ? written(trigger, t) : t))),
+        onRemove: index => write(triggers => triggers.filter((_, i) => i !== index)),
+    };
+}
+/** A board's trigger in its picture's words. */
+function shown(t) {
+    const on = t.on.event === 'open' ? { event: 'open' }
+        : t.on.event === 'click' ? { event: 'click', node: t.on.part }
+            : t.on.event === 'element' ? { event: 'element', node: t.on.part, name: t.on.name }
+                : { event: t.on.event, node: t.on.part, state: t.on.status };
+    return {
+        on,
+        ...(t.when !== undefined ? { when: { node: t.when.part, state: t.when.status } } : {}),
+        do: t.do.map((a) => (a.action === 'focus' ? { action: 'focus', node: a.part }
+            : a.action === 'open-link' ? { action: 'open-link', url: a.url.replace(/\{\{\s*part\s*\}\}/g, '{{node}}').replace(/\{\{\s*status\s*\}\}/g, '{{state}}') }
+                : a)),
+    };
+}
+/** A trigger the editor wrote, in the board's words — the `field` of `was` kept where it still names the same part. */
+function written(t, was) {
+    const field = (part, before) => before?.field !== undefined && before.part === part ? { field: before.field } : {};
+    const before = was && 'part' in was.on ? was.on : undefined;
+    const on = t.on.event === 'open' ? { event: 'open' }
+        : t.on.event === 'click' ? { event: 'click', part: t.on.node }
+            : t.on.event === 'element' ? { event: 'element', part: t.on.node, name: t.on.name }
+                : { event: t.on.event, part: t.on.node, ...field(t.on.node, before), status: t.on.state };
+    return {
+        on,
+        ...(t.when !== undefined
+            ? { when: { part: t.when.node, ...field(t.when.node, was?.when), status: Array.isArray(t.when.state) && t.when.state.length === 1 ? t.when.state[0] : t.when.state } }
+            : {}),
+        do: t.do.map((a) => (a.action === 'focus' ? { action: 'focus', part: a.node }
+            : a.action === 'open-link' ? { action: 'open-link', url: a.url.replace(/\{\{\s*node\s*\}\}/g, '{{part}}').replace(/\{\{\s*state\s*\}\}/g, '{{status}}') }
+                : a)),
+    };
+}

package/dist/lib/authoring/document-history.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The document being edited with the steps before and after it — what Undo and Redo walk. Each change the editor
+ * makes is a step, except that typing on in the same field adds to the step the field's first keystroke began: a
+ * name typed is one step, not one per letter.
+ */
+export interface DocumentHistory<D> {
+    readonly present: D;
+    readonly past: readonly D[];
+    readonly future: readonly D[];
+    /** The field the last step was typed into, while typing there goes on. */
+    readonly typingIn: object | null;
+}
+/** How many steps back Undo reaches. */
+export declare const HISTORY_LIMIT = 100;
+export declare function startHistory<D>(doc: D): DocumentHistory<D>;
+/** `next` as the document now. `typingIn` is the text field the change was typed into, or null. */
+export declare function recordEdit<D>(history: DocumentHistory<D>, next: D, typingIn: object | null): DocumentHistory<D>;
+/** Focus has moved: what is typed next is a step of its own, even in the same field. */
+export declare function endTyping<D>(history: DocumentHistory<D>): DocumentHistory<D>;
+export declare function undo<D>(history: DocumentHistory<D>): DocumentHistory<D>;
+export declare function redo<D>(history: DocumentHistory<D>): DocumentHistory<D>;
+/** A field a person types into, one change per keystroke — not a checkbox, a button or a list to pick from. */
+export declare function textEntry(element: Element | null): HTMLElement | null;

package/dist/lib/authoring/document-history.js

@@ -0,0 +1,37 @@
+/** How many steps back Undo reaches. */
+export const HISTORY_LIMIT = 100;
+export function startHistory(doc) {
+    return { present: doc, past: [], future: [], typingIn: null };
+}
+/** `next` as the document now. `typingIn` is the text field the change was typed into, or null. */
+export function recordEdit(history, next, typingIn) {
+    if (next === history.present)
+        return history;
+    if (typingIn && typingIn === history.typingIn)
+        return { ...history, present: next, future: [] };
+    return { present: next, past: [...history.past, history.present].slice(-HISTORY_LIMIT), future: [], typingIn };
+}
+/** Focus has moved: what is typed next is a step of its own, even in the same field. */
+export function endTyping(history) {
+    return history.typingIn ? { ...history, typingIn: null } : history;
+}
+export function undo(history) {
+    if (history.past.length === 0)
+        return history;
+    return { present: history.past[history.past.length - 1], past: history.past.slice(0, -1), future: [history.present, ...history.future], typingIn: null };
+}
+export function redo(history) {
+    if (history.future.length === 0)
+        return history;
+    return { present: history.future[0], past: [...history.past, history.present], future: history.future.slice(1), typingIn: null };
+}
+/** A field a person types into, one change per keystroke — not a checkbox, a button or a list to pick from. */
+export function textEntry(element) {
+    if (!(element instanceof HTMLElement))
+        return null;
+    if (element.isContentEditable || element instanceof HTMLTextAreaElement)
+        return element;
+    if (element instanceof HTMLInputElement && !['checkbox', 'radio', 'button', 'submit', 'reset', 'file', 'image'].includes(element.type))
+        return element;
+    return null;
+}

package/dist/lib/authoring/editor-parts.d.ts

@@ -0,0 +1,46 @@
+import { type DesignerLabels } from '../labels.js';
+import type { ReactNode } from 'react';
+import type { Adapter } from '@iyulab/u-board/toolkit';
+import type { ViewDocument } from '@iyulab/u-board/picture';
+import type { TriggerHandlers } from '@iyulab/u-board/toolkit';
+export type AuthoringMode = 'edit' | 'view';
+/** What `BoardAuthoring` hands the editor of the picture's kind: the picture and the one way to change it, the mode,
+ *  the toolbar's shared actions, and what the host gave the view. The editor owns its surface, its selection and its
+ *  own toolbar actions. */
+export interface KindEditorProps<D extends ViewDocument> {
+    doc: D;
+    /** Replaces the document with what `update` makes of the current one. */
+    updateDoc: (update: (current: D) => D) => void;
+    mode: AuthoringMode;
+    onModeChange: (mode: AuthoringMode) => void;
+    /** Undo and Redo, Save and Export — the same for every kind. */
+    documentActions: ReactNode;
+    adapters: readonly Adapter[];
+    width?: number;
+    height?: number;
+    labels: DesignerLabels;
+    clock: () => number;
+    /** What the board's triggers hand the host in View — Edit runs none (a click there selects). */
+    triggerHosting: TriggerHosting;
+    /**
+     * The board the picture is drawn from, which keeps everything but where its parts are: parts are moved, sized and
+     * deleted here, and `panel` draws the panel for what is selected (`null`: nothing, or more than one) — or nothing, for
+     * a hint. `movable` says which parts the board places itself; `connect`, when given, joins two of them, first to
+     * second, and answers the id the connector is drawn with — what may be deleted besides is `deletable`.
+     */
+    parts: {
+        movable: (id: string) => boolean;
+        panel: (selected: string | null) => ReactNode;
+        connect?: (from: string, to: string) => string;
+        deletable?: (id: string) => boolean;
+    };
+}
+/** The host's side of a board's triggers — `ViewerPage`'s props of the same names. */
+export type TriggerHosting = Pick<TriggerHandlers, 'boardId' | 'onTrigger' | 'onNavigate' | 'linkOrigins'>;
+/** The Edit / View switch. */
+export declare function ModeSwitch({ mode, onEdit, onView, labels }: {
+    mode: AuthoringMode;
+    onEdit: () => void;
+    onView: () => void;
+    labels: DesignerLabels;
+}): import("react").JSX.Element;

package/dist/lib/authoring/editor-parts.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GROUP_STYLE } from '@iyulab/u-board/toolkit';
+/** The Edit / View switch. */
+export function ModeSwitch({ mode, onEdit, onView, labels }) {
+    return (_jsxs("div", { className: "ub-authoring__group ub-authoring__mode", style: GROUP_STYLE, role: "group", "aria-label": labels.mode, children: [_jsx("button", { type: "button", className: "ub-action", "aria-pressed": mode === 'edit', onClick: onEdit, children: labels.editMode }), _jsx("button", { type: "button", className: "ub-action", "aria-pressed": mode === 'view', onClick: onView, children: labels.viewMode })] }));
+}

package/dist/lib/authoring/field-style.d.ts

@@ -0,0 +1,3 @@
+import type { CSSProperties } from 'react';
+/** One field per line, its label above it — without the stylesheet as well. */
+export declare const FIELD_STYLE: CSSProperties;

package/dist/lib/authoring/field-style.js

@@ -0,0 +1,2 @@
+/** One field per line, its label above it — without the stylesheet as well. */
+export const FIELD_STYLE = { display: 'flex', flexDirection: 'column' };

package/dist/lib/authoring/part-names.d.ts

@@ -0,0 +1,6 @@
+import type { CanvasView } from '@iyulab/u-board/picture';
+/**
+ * How the editor names a node of `doc` to an author — by its caption, else by its widget's type and its place among the
+ * board's nodes ("Status 2"). Anything else by its id.
+ */
+export declare function partNamer(doc: CanvasView, locale?: string): (id: string) => string;

package/dist/lib/authoring/part-names.js

@@ -0,0 +1,9 @@
+import { widgetTypeName } from './widget-catalog.js';
+/**
+ * How the editor names a node of `doc` to an author — by its caption, else by its widget's type and its place among the
+ * board's nodes ("Status 2"). Anything else by its id.
+ */
+export function partNamer(doc, locale) {
+    const named = new Map(doc.nodes.map((node, i) => [node.id, node.caption || `${widgetTypeName(node.widget.type, locale)} ${i + 1}`]));
+    return id => named.get(id) ?? id;
+}

package/dist/lib/authoring/scene-mapping.d.ts

@@ -0,0 +1,22 @@
+import { Scene } from '@canvas-kit/core';
+import type { CanvasView } from '@iyulab/u-board/picture';
+/**
+ * Projects a ViewDocument into a canvas-kit Scene the designer can render and let the author
+ * drag: the background image (locked, drawn but not editable), the connectors (fixed: selected to edit
+ * them, never dragged — they follow their nodes), and one `rect` per node, id'd by node id, standing in
+ * for its widget's footprint. A scene object's id names its document part, after a `#` for a part's
+ * pieces (`partOf`).
+ */
+export declare function documentToScene(doc: CanvasView, movable?: (id: string) => boolean, selectable?: (id: string) => boolean): Scene;
+/**
+ * Folds a designer Scene's node-rect and decoration-shape positions back into a ViewDocument.
+ * Reads every scene object whose id matches a node or decoration — not just the one the author
+ * just dragged — so it stays correct regardless of how the designer reports the change (single
+ * move, batched drag, resize). A node and a decoration can both be scene `rect`s with the same
+ * shape; they're told apart by id membership in `doc.nodes`/`doc.decorations`, not by scanning
+ * order, so a decoration id never gets folded onto a node or vice versa.
+ */
+export declare function applySceneToDocument(doc: CanvasView, scene: Scene): CanvasView;
+/** The document part a scene object draws: its id, or a part's own id before the `#` of one of its pieces (a
+ * connector's `#chip`, `#arrow0`). */
+export declare function partOf(objectId: string): string;