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

package/dist/lib/authoring/GridItemPanel.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_DESIGNER_LABELS } from '../labels.js';
+import { GRID_COLUMNS, GRID_COLUMNS_MEDIUM, GRID_DEFAULT_SPAN, GRID_MAX_ROW_SPAN, isCanvasItem } from '@iyulab/u-board/picture';
+import { GROUP_STYLE } from '@iyulab/u-board/toolkit';
+const ACTIONS_STYLE = { ...GROUP_STYLE, marginBottom: 'var(--ub-space-3, 12px)' };
+const columns = (count) => Array.from({ length: count }, (_, i) => i + 1);
+/**
+ * A grid item's room and place: how many columns it spans at full and at medium width, its height, and where it
+ * is in the order. Moving and removing are buttons, so they are a key press as well as a click. A choice left at
+ * its default leaves its field out of the document.
+ */
+export function GridItemPanel({ item, isFirst, isLast, onChange, onMove, onDuplicate, onRemove, spanOnly = false, labels = DEFAULT_DESIGNER_LABELS }) {
+    const span = item.span ?? GRID_DEFAULT_SPAN;
+    return (_jsxs("div", { className: "ub-panel ub-panel--item", children: [_jsx("h2", { className: "ub-panel__heading", children: labels.itemLayout }), _jsxs("div", { className: "ub-panel__actions", style: ACTIONS_STYLE, children: [_jsx("button", { type: "button", className: "ub-action", disabled: isFirst, onClick: () => onMove(-1), children: labels.moveEarlier }), _jsx("button", { type: "button", className: "ub-action", disabled: isLast, onClick: () => onMove(1), children: labels.moveLater }), onDuplicate && (_jsx("button", { type: "button", className: "ub-action", onClick: onDuplicate, children: labels.duplicateItem })), _jsx("button", { type: "button", className: "ub-action", onClick: onRemove, children: labels.removeItem })] }), _jsxs("label", { className: "ub-panel__field", children: [labels.itemSpan.replace('{columns}', String(GRID_COLUMNS)), _jsx("select", { value: span, onChange: e => {
+                            const value = Number(e.target.value);
+                            onChange({ span: value === GRID_DEFAULT_SPAN ? undefined : value });
+                        }, children: columns(GRID_COLUMNS).map(n => (_jsx("option", { value: n, children: n }, n))) })] }), !spanOnly && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "ub-panel__field", children: [labels.itemSpanMedium.replace('{columns}', String(GRID_COLUMNS_MEDIUM)), _jsxs("select", { value: item.spanMedium ?? '', onChange: e => onChange({ spanMedium: e.target.value === '' ? undefined : Number(e.target.value) }), children: [_jsx("option", { value: "", children: labels.itemSpanMediumAuto }), columns(GRID_COLUMNS_MEDIUM).map(n => (_jsx("option", { value: n, children: n }, n)))] })] }), _jsxs("label", { className: "ub-panel__field", children: [labels.itemRowSpan, _jsx("select", { value: item.rowSpan ?? 1, onChange: e => onChange({ rowSpan: Number(e.target.value) === 1 ? undefined : Number(e.target.value) }), children: columns(GRID_MAX_ROW_SPAN).map(n => (_jsx("option", { value: n, children: n }, n))) })] }), _jsxs("label", { className: "ub-panel__field", children: [labels.itemHeight, _jsx("input", { type: "number", min: 1, step: 1, inputMode: "numeric", placeholder: isCanvasItem(item) ? labels.canvasHeightAuto : labels.itemHeightAuto, value: item.height ?? '', onChange: e => {
+                                    const value = e.target.valueAsNumber;
+                                    onChange({ height: Number.isFinite(value) && value > 0 ? value : undefined });
+                                } })] })] }))] }));
+}

package/dist/lib/authoring/LinkPanel.d.ts

@@ -0,0 +1,19 @@
+import { type DesignerLabels } from '../labels.js';
+import { type Board, type Link } from '@iyulab/u-board/toolkit';
+import type { BoardFinding } from '../board/check.js';
+export interface LinkPanelProps {
+    id: string;
+    board: Board;
+    /** The link as the panel made it. */
+    onChange: (link: Link) => void;
+    findings?: readonly BoardFinding[];
+    labels?: DesignerLabels;
+}
+/**
+ * The panel of a link of a canvas board: the parts it joins (set by joining them on
+ * the canvas), its label, the item it reads and the field whose status it takes — its colour the status's tone, its line
+ * the status's emphasis — and, fixed, its tone without a status, its route, arrowheads and dash. A setting left empty
+ * goes from the link. Arrowheads read from a field (a direction that reverses) are written in the board's source; the
+ * panel names the field and replaces them only when a fixed choice is made.
+ */
+export declare function LinkPanel({ id, board, onChange, findings, labels }: LinkPanelProps): import("react").JSX.Element;

package/dist/lib/authoring/LinkPanel.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FIELD_STYLE } from './field-style.js';
+import { DEFAULT_DESIGNER_LABELS } from '../labels.js';
+import { TONES } from '@iyulab/u-board/toolkit';
+const ROUTES = ['straight', 'orthogonal', 'curved'];
+/**
+ * The panel of a link of a canvas board: the parts it joins (set by joining them on
+ * the canvas), its label, the item it reads and the field whose status it takes — its colour the status's tone, its line
+ * the status's emphasis — and, fixed, its tone without a status, its route, arrowheads and dash. A setting left empty
+ * goes from the link. Arrowheads read from a field (a direction that reverses) are written in the board's source; the
+ * panel names the field and replaces them only when a fixed choice is made.
+ */
+export function LinkPanel({ id, board, onChange, findings = [], labels = DEFAULT_DESIGNER_LABELS }) {
+    const link = (board.layout.kind === 'canvas' ? board.layout.links?.[id] : undefined) ?? { from: '', to: '' };
+    const set = (change) => {
+        const next = { ...link, ...change };
+        for (const [key, value] of Object.entries(change))
+            if (value === undefined || value === '' || value === false)
+                delete next[key];
+        onChange(next);
+    };
+    const text = (label, value, change) => (_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [label, _jsx("input", { type: "text", value: value ?? '', onChange: e => change(e.target.value) })] }));
+    return (_jsxs("div", { className: "ub-panel ub-panel--link", children: [_jsx("h2", { className: "ub-panel__heading", children: labels.linkHeading.replace('{from}', link.from).replace('{to}', link.to) }), text(labels.linkLabel, link.label, label => set({ label })), text(labels.linkReads, link.of, of => set({ of })), text(labels.linkShows, link.show, show => set({ show })), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.linkTone, _jsxs("select", { value: link.tone ?? '', onChange: e => set({ tone: (e.target.value || undefined) }), children: [_jsx("option", { value: "", children: labels.linkToneNone }), TONES.map(tone => (_jsx("option", { value: tone, children: tone }, tone)))] })] }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.linkRoute, _jsx("select", { value: link.route ?? 'straight', onChange: e => set({ route: e.target.value === 'straight' ? undefined : e.target.value }), children: ROUTES.map(route => (_jsx("option", { value: route, children: route }, route))) })] }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.linkArrow, _jsxs("select", { value: typeof link.arrow === 'object' ? 'field' : (link.arrow ?? ''), onChange: e => e.target.value !== 'field' && set({ arrow: (e.target.value || undefined) }), children: [_jsx("option", { value: "", children: labels.arrowNone }), _jsx("option", { value: "end", children: labels.arrowEnd.replace('{to}', link.to) }), _jsx("option", { value: "start", children: labels.arrowStart.replace('{from}', link.from) }), _jsx("option", { value: "both", children: labels.arrowBoth }), typeof link.arrow === 'object' && _jsx("option", { value: "field", children: labels.arrowFromField.replace('{field}', link.arrow.field) })] })] }), _jsxs("label", { className: "ub-panel__field ub-panel__field--check", children: [_jsx("input", { type: "checkbox", checked: link.dash === true, onChange: e => set({ dash: e.target.checked }) }), labels.linkDash] }), findings.length > 0 && (_jsx("ul", { className: "ub-panel__findings", role: "alert", children: findings.map(finding => (_jsx("li", { children: finding.message }, `${finding.path}:${finding.message}`))) }))] }));
+}

package/dist/lib/authoring/MappingEditor.d.ts

@@ -0,0 +1,23 @@
+import { type DesignerLabels } from '../labels.js';
+import type { ValueMapping } from '@iyulab/u-board/toolkit';
+/** Bands as written — `ok, 1, warn, 5, alarm`: names and rising numbers in turn, from a name — or `undefined` when they
+ *  are not. */
+export declare function parseBands(text: string): (string | number)[] | undefined;
+export interface MappingEditorProps {
+    /** What the mapping is for, as its legend says it: a field's status, or its words. */
+    legend: string;
+    value: ValueMapping | 'raw' | undefined;
+    /** The mapping as the editor made it — none: `undefined`. */
+    onChange: (value: ValueMapping | 'raw' | undefined) => void;
+    /** Offer «the value already is a status name» (`raw`) — a status, not words. */
+    raw?: boolean;
+    /** The names a mapping may map to, to choose from — the board's statuses. */
+    names?: readonly string[];
+    labels?: DesignerLabels;
+}
+/**
+ * A mapping of a field's raw value to a name — its status, or the words it is shown as — in the language's two forms: by
+ * value (`{ "down": "alarm", "*": "off" }`) or by number bands (`["ok", 1, "warn", 5, "alarm"]`); for a status, also
+ * «the value already is one» (`raw`). A row with no value, and bands that do not read, are not written.
+ */
+export declare function MappingEditor({ legend, value, onChange, raw, names, labels }: MappingEditorProps): import("react").JSX.Element;

package/dist/lib/authoring/MappingEditor.js

@@ -0,0 +1,83 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FIELD_STYLE } from './field-style.js';
+import { DEFAULT_DESIGNER_LABELS } from '../labels.js';
+import { useId, useState } from 'react';
+import { ERROR_STYLE, GROUP_STYLE } from '@iyulab/u-board/toolkit';
+const formOf = (value) => (Array.isArray(value) ? 'bands' : 'map');
+const rowsOf = (value) => value && !Array.isArray(value) ? Object.entries(value).filter(([from]) => from !== '*').map(([from, to]) => ({ from, to })) : [];
+const bandsText = (value) => (Array.isArray(value) ? value.join(', ') : '');
+/** Bands as written — `ok, 1, warn, 5, alarm`: names and rising numbers in turn, from a name — or `undefined` when they
+ *  are not. */
+export function parseBands(text) {
+    const parts = text.split(',').map(part => part.trim());
+    if (parts.length < 3 || parts.length % 2 === 0)
+        return undefined;
+    const bands = [];
+    for (const [i, part] of parts.entries()) {
+        if (i % 2 === 0) {
+            if (part === '')
+                return undefined;
+            bands.push(part);
+        }
+        else {
+            const bound = Number(part);
+            if (part === '' || !Number.isFinite(bound) || (i > 1 && bound <= bands[i - 2]))
+                return undefined;
+            bands.push(bound);
+        }
+    }
+    return bands;
+}
+/**
+ * A mapping of a field's raw value to a name — its status, or the words it is shown as — in the language's two forms: by
+ * value (`{ "down": "alarm", "*": "off" }`) or by number bands (`["ok", 1, "warn", 5, "alarm"]`); for a status, also
+ * «the value already is one» (`raw`). A row with no value, and bands that do not read, are not written.
+ */
+export function MappingEditor({ legend, value, onChange, raw = false, names = [], labels = DEFAULT_DESIGNER_LABELS }) {
+    const list = useId();
+    // A form chosen before it holds anything to write: shown while the mapping is still none.
+    const [drafting, setDrafting] = useState(null);
+    const kind = value === undefined ? (drafting ?? 'none') : value === 'raw' ? 'raw' : formOf(value);
+    const [rows, setRows] = useState(() => rowsOf(value === 'raw' ? undefined : value));
+    const [otherwise, setOtherwise] = useState(() => (value && value !== 'raw' && !Array.isArray(value) ? (value['*'] ?? '') : ''));
+    const [bands, setBands] = useState(() => bandsText(value === 'raw' ? undefined : value));
+    const writeMap = (nextRows, nextOtherwise) => {
+        const map = {};
+        for (const row of nextRows)
+            if (row.from.trim() !== '' && row.to.trim() !== '')
+                map[row.from.trim()] = row.to.trim();
+        if (nextOtherwise.trim() !== '')
+            map['*'] = nextOtherwise.trim();
+        setDrafting('map');
+        onChange(Object.keys(map).length > 0 ? map : undefined);
+    };
+    const setRow = (i, change) => {
+        const next = rows.map((row, j) => (j === i ? { ...row, ...change } : row));
+        setRows(next);
+        writeMap(next, otherwise);
+    };
+    const choose = (next) => {
+        setDrafting(null);
+        if (next === 'none')
+            onChange(undefined);
+        else if (next === 'raw')
+            onChange('raw');
+        else if (next === 'map')
+            writeMap(rows, otherwise);
+        else {
+            setDrafting('bands');
+            onChange(parseBands(bands));
+        }
+    };
+    const nameInput = (text, label, change) => (_jsx("input", { type: "text", "aria-label": label, list: names.length > 0 ? list : undefined, value: text, onChange: e => change(e.target.value) }));
+    const bandsRead = parseBands(bands);
+    return (_jsxs("fieldset", { className: "ub-panel__group", style: { minWidth: 0 }, children: [_jsx("legend", { children: legend }), _jsxs("select", { "aria-label": legend, value: kind, onChange: e => choose(e.target.value), children: [_jsx("option", { value: "none", children: labels.mappingNone }), raw && _jsx("option", { value: "raw", children: labels.mappingRaw }), _jsx("option", { value: "map", children: labels.mappingMap }), _jsx("option", { value: "bands", children: labels.mappingBands })] }), names.length > 0 && (_jsx("datalist", { id: list, children: names.map(name => (_jsx("option", { value: name, children: name }, name))) })), kind === 'map' && (_jsxs(_Fragment, { children: [rows.map((row, i) => (_jsxs("div", { className: "ub-panel__field", style: GROUP_STYLE, children: [_jsx("input", { type: "text", "aria-label": labels.mappingFrom.replace('{n}', String(i + 1)), value: row.from, onChange: e => setRow(i, { from: e.target.value }) }), nameInput(row.to, labels.mappingTo.replace('{n}', String(i + 1)), to => setRow(i, { to }))] }, i))), _jsx("button", { type: "button", className: "ub-action", onClick: () => setRows([...rows, { from: '', to: '' }]), children: labels.mappingAddRow }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.mappingOtherwise, nameInput(otherwise, labels.mappingOtherwise, text => {
+                                setOtherwise(text);
+                                writeMap(rows, text);
+                            })] })] })), kind === 'bands' && (_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.mappingBandsText, _jsx("input", { type: "text", value: bands, "aria-invalid": bands.trim() !== '' && !bandsRead, onChange: e => {
+                            setBands(e.target.value);
+                            const read = parseBands(e.target.value);
+                            if (read)
+                                onChange(read);
+                        } }), bands.trim() !== '' && !bandsRead && (_jsx("span", { role: "alert", style: ERROR_STYLE, children: labels.mappingBandsInvalid }))] }))] }));
+}

package/dist/lib/authoring/PartPanel.d.ts

@@ -0,0 +1,24 @@
+import { type DesignerLabels } from '../labels.js';
+import { type ReactNode } from 'react';
+import type { BoardFinding } from '../board/check.js';
+import type { Board, Part } from '@iyulab/u-board/toolkit';
+export interface PartPanelProps {
+    /** The part's id in the board's `parts`. */
+    id: string;
+    board: Board;
+    /** Replaces the part with what the panel made of it. */
+    onChange: (part: Part) => void;
+    /** What the board's check finds at this part — shown under it, where it is fixed. */
+    findings?: readonly BoardFinding[];
+    /** The part's triggers' editor, shown under its settings. */
+    triggers?: ReactNode;
+    labels?: DesignerLabels;
+}
+/**
+ * The panel of a part of a board: its title, its kind, what it reads (a data read,
+ * and one item of it by key), which fields it shows, then its kind's options — those the board reads itself (a field's
+ * name, offered from what the part reads; one written as a structure is shown, and set by the assistant or the JSON),
+ * and the widget's, with the controls the widget library describes. A setting left empty goes from the part, so the
+ * board keeps only what was set. A part made per item reads the items its `each` names, shown and not changed here.
+ */
+export declare function PartPanel({ id, board, onChange, findings, triggers, labels }: PartPanelProps): import("react").JSX.Element;

package/dist/lib/authoring/PartPanel.js

@@ -0,0 +1,78 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FIELD_STYLE } from './field-style.js';
+import { DEFAULT_DESIGNER_LABELS } from '../labels.js';
+import { useId, useMemo } from 'react';
+import { PART_KINDS, partKind } from '@iyulab/u-board/toolkit';
+import { widgetFields } from './widget-fields.js';
+import { FieldControl } from './WidgetPropsForm.js';
+/** `<data>` or `<data>[<key>]`, as a part names what it reads. */
+const OF = /^([\w-]+)(?:\[([^\]]+)\])?$/;
+/**
+ * The panel of a part of a board: its title, its kind, what it reads (a data read,
+ * and one item of it by key), which fields it shows, then its kind's options — those the board reads itself (a field's
+ * name, offered from what the part reads; one written as a structure is shown, and set by the assistant or the JSON),
+ * and the widget's, with the controls the widget library describes. A setting left empty goes from the part, so the
+ * board keeps only what was set. A part made per item reads the items its `each` names, shown and not changed here.
+ */
+export function PartPanel({ id, board, onChange, findings = [], triggers, labels = DEFAULT_DESIGNER_LABELS }) {
+    const part = board.parts[id] ?? {};
+    const fieldList = useId();
+    const set = (key, value) => {
+        const { [key]: _gone, ...rest } = part;
+        onChange(value === undefined || value === '' ? rest : { ...rest, [key]: value });
+    };
+    const of = typeof part.of === 'string' ? OF.exec(part.of) : null;
+    const data = of?.[1] ?? '';
+    const key = of?.[2] ?? '';
+    const reads = typeof part.each === 'string' ? part.each : data;
+    const fields = Object.keys(board.data?.[reads]?.fields ?? {});
+    const show = part.show === undefined ? '' : Array.isArray(part.show) ? part.show.join(', ') : part.show;
+    const kind = partKind(part.as ?? (part.use !== undefined ? board.presets?.[part.use]?.as : undefined) ?? '');
+    const widgetOptions = useMemo(() => (kind?.widget === undefined ? [] : widgetFields({ type: kind.widget, props: {} }, labels.locale).fields.filter(f => f.section === 'options' && kind.options.includes(f.key))), [kind, labels.locale]);
+    const own = (kind?.own ?? []).filter(key => !['size', 'parts', 'place'].includes(key) && !(kind?.kind === 'element' && ['element', 'props', 'bind'].includes(key)));
+    const writeOf = (nextData, nextKey) => set('of', nextData === '' ? undefined : nextKey.trim() === '' ? nextData : `${nextData}[${nextKey.trim()}]`);
+    return (_jsxs("div", { className: "ub-panel ub-panel--part", children: [_jsx("h2", { className: "ub-panel__heading", children: labels.partHeading.replace('{id}', id) }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.partTitle, _jsx("input", { type: "text", value: part.title ?? '', onChange: e => set('title', e.target.value) })] }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.partKind, _jsxs("select", { value: part.as ?? '', onChange: e => set('as', e.target.value), children: [part.as === undefined && _jsx("option", { value: "", children: labels.partFromPreset }), PART_KINDS.map(kind => (_jsx("option", { value: kind.kind, children: kind.kind }, kind.kind)))] })] }), typeof part.each === 'string' ? (_jsx("p", { className: "ub-panel__hint", children: labels.partEach.replace('{data}', part.each) })) : (_jsxs(_Fragment, { children: [_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.partOf, _jsxs("select", { value: data, onChange: e => writeOf(e.target.value, key), children: [_jsx("option", { value: "", children: labels.partOfNone }), Object.keys(board.data ?? {}).map(name => (_jsx("option", { value: name, children: name }, name)))] })] }), data !== '' && board.data?.[data]?.list !== undefined && (_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.partItem, _jsx("input", { type: "text", value: key, placeholder: labels.partItemAll, onChange: e => writeOf(data, e.target.value) })] }))] })), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.partShow, _jsx("input", { type: "text", list: fields.length > 0 ? fieldList : undefined, value: show, onChange: e => {
+                            const names = e.target.value.split(',').map(name => name.trim()).filter(name => name !== '');
+                            set('show', names.length === 0 ? undefined : names.length === 1 && !e.target.value.includes(',') ? names[0] : names);
+                        } })] }), fields.length > 0 && (_jsx("datalist", { id: fieldList, children: fields.map(name => (_jsx("option", { value: name, children: name }, name))) })), kind?.kind === 'element' && _jsx(ElementPartFields, { part: part, board: board, onChange: onChange, labels: labels, fieldList: fields.length > 0 ? fieldList : undefined }), own.length > 0 && (_jsxs("fieldset", { className: "ub-panel__group", style: { minWidth: 0 }, children: [_jsx("legend", { children: labels.partOwnOptions }), own.map(key => {
+                        const value = part[key];
+                        const structured = value !== undefined && typeof value !== 'string' && typeof value !== 'number';
+                        return (_jsxs("div", { className: "ub-panel__field", style: FIELD_STYLE, children: [_jsx("code", { "aria-hidden": "true", children: key }), _jsx("input", { type: "text", "aria-label": key, list: fields.length > 0 ? fieldList : undefined, value: structured ? JSON.stringify(value) : value === undefined ? '' : String(value), readOnly: structured, title: structured ? labels.partStructured : undefined, onChange: e => {
+                                        const text = e.target.value.trim();
+                                        set(key, text !== '' && /^-?\d+(\.\d+)?$/.test(text) && key === 'max' ? Number(text) : text);
+                                    } })] }, key));
+                    })] })), widgetOptions.length > 0 && (_jsxs("fieldset", { className: "ub-panel__group", style: { minWidth: 0 }, children: [_jsx("legend", { children: labels.partWidgetOptions }), widgetOptions.map(field => (_jsx(FieldControl, { field: field, value: part[field.key], write: value => set(field.key, value), labels: labels }, field.key)))] })), triggers, findings.length > 0 && (_jsx("ul", { className: "ub-panel__findings", role: "alert", children: findings.map(finding => (_jsx("li", { children: finding.message }, `${finding.path}:${finding.message}`))) }))] }));
+}
+/**
+ * An element part's drawing: which of the board's elements, and each prop it takes — bound to a field of what the
+ * part reads (`<field>`, or its status `<field>.status` or tone `<field>.tone`), or fixed. A prop that takes a list or
+ * a record is fixed only in the board's JSON.
+ */
+function ElementPartFields({ part, board, onChange, labels, fieldList }) {
+    const name = typeof part.element === 'string' ? part.element : '';
+    const props = board.elements?.[name]?.props ?? {};
+    const bind = (part.bind ?? {});
+    const fixed = (part.props ?? {});
+    /** The part with its bound and fixed props as given — an empty set of either left out. */
+    const write = (nextBind, nextFixed) => {
+        const { bind: _b, props: _p, ...rest } = part;
+        onChange({ ...rest, ...(Object.keys(nextFixed).length > 0 ? { props: nextFixed } : {}), ...(Object.keys(nextBind).length > 0 ? { bind: nextBind } : {}) });
+    };
+    return (_jsxs("fieldset", { className: "ub-panel__group", style: { minWidth: 0 }, children: [_jsx("legend", { children: labels.elementProps }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.boardElements, _jsxs("select", { value: name, onChange: e => onChange({ ...part, element: e.target.value }), children: [name === '' && _jsx("option", { value: "", children: "\u2014" }), Object.keys(board.elements ?? {}).map(element => (_jsx("option", { value: element, children: element }, element)))] })] }), Object.entries(props).map(([prop, type]) => {
+                const structured = type === 'list' || type === 'object';
+                const value = bind[prop] ?? (fixed[prop] === undefined ? '' : String(fixed[prop]));
+                return (_jsxs("div", { className: "ub-panel__field", style: FIELD_STYLE, children: [_jsxs("code", { "aria-hidden": "true", children: [prop, " \u00B7 ", type] }), _jsx("input", { type: "text", "aria-label": prop, list: fieldList, value: structured && prop in fixed ? JSON.stringify(fixed[prop]) : value, readOnly: structured && prop in fixed, onChange: e => {
+                                const text = e.target.value.trim();
+                                const { [prop]: _b, ...restBind } = bind;
+                                const { [prop]: _f, ...restFixed } = fixed;
+                                // A field's name (or its status, its tone) binds the prop; a value of the prop's type fixes it.
+                                const asFixed = type === 'number' && /^-?\d+(\.\d+)?$/.test(text) ? Number(text) : type === 'boolean' && /^(true|false)$/.test(text) ? text === 'true' : undefined;
+                                if (text === '')
+                                    write(restBind, restFixed);
+                                else if (asFixed !== undefined || (type === 'string' && text.startsWith('"')))
+                                    write(restBind, { ...restFixed, [prop]: asFixed ?? text.replace(/^"|"$/g, '') });
+                                else
+                                    write({ ...restBind, [prop]: text }, restFixed);
+                            } })] }, prop));
+            })] }));
+}

package/dist/lib/authoring/ShapePanel.d.ts

@@ -0,0 +1,20 @@
+import { type DesignerLabels } from '../labels.js';
+import { type Board, type Shape } from '@iyulab/u-board/toolkit';
+import type { BoardFinding } from '../board/check.js';
+export interface ShapePanelProps {
+    id: string;
+    board: Board;
+    /** The shape as the panel made it. */
+    onChange: (shape: Shape) => void;
+    findings?: readonly BoardFinding[];
+    labels?: DesignerLabels;
+}
+/** A line's points as written — `20,20 220,20`: two or more `x,y` by spaces — or `undefined` when they are not. */
+export declare function parsePoints(text: string): [number, number][] | undefined;
+/**
+ * The panel of a shape of a canvas board — a frame (a box, with a label at its top),
+ * a text, or a line or a path: its words (a line's points, a path's drawing), its tone, and a frame's or a line's line or
+ * a text's size. Where it is and how large is set on the canvas. A
+ * setting left empty goes from the shape.
+ */
+export declare function ShapePanel({ id, board, onChange, findings, labels }: ShapePanelProps): import("react").JSX.Element;

package/dist/lib/authoring/ShapePanel.js

@@ -0,0 +1,54 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FIELD_STYLE } from './field-style.js';
+import { DEFAULT_DESIGNER_LABELS } from '../labels.js';
+import { useState } from 'react';
+import { ERROR_STYLE } from '@iyulab/u-board/toolkit';
+import { TONES } from '@iyulab/u-board/toolkit';
+/** A line's points as written — `20,20 220,20`: two or more `x,y` by spaces — or `undefined` when they are not. */
+export function parsePoints(text) {
+    const pairs = text.trim().split(/\s+/).filter(pair => pair !== '');
+    if (pairs.length < 2)
+        return undefined;
+    const points = [];
+    for (const pair of pairs) {
+        const [x, y, ...rest] = pair.split(',').map(Number);
+        if (rest.length > 0 || !Number.isFinite(x) || !Number.isFinite(y))
+            return undefined;
+        points.push([x, y]);
+    }
+    return points;
+}
+/** A line's points, or a path's drawing, as its panel edits them — a line's written only once they read. */
+function LineFields({ shape, onChange, labels }) {
+    const [points, setPoints] = useState(() => (shape.line ?? []).map(([x, y]) => `${x},${y}`).join(' '));
+    if (shape.path !== undefined) {
+        return (_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.shapePath, _jsx("textarea", { rows: 3, spellCheck: false, value: shape.path, onChange: e => onChange({ ...shape, path: e.target.value }) })] }));
+    }
+    const read = parsePoints(points);
+    return (_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.shapePoints, _jsx("input", { type: "text", value: points, "aria-invalid": !read, onChange: e => {
+                    setPoints(e.target.value);
+                    const next = parsePoints(e.target.value);
+                    if (next)
+                        onChange({ ...shape, line: next });
+                } }), !read && (_jsx("span", { role: "alert", style: ERROR_STYLE, children: labels.shapePointsInvalid }))] }));
+}
+/**
+ * The panel of a shape of a canvas board — a frame (a box, with a label at its top),
+ * a text, or a line or a path: its words (a line's points, a path's drawing), its tone, and a frame's or a line's line or
+ * a text's size. Where it is and how large is set on the canvas. A
+ * setting left empty goes from the shape.
+ */
+export function ShapePanel({ id, board, onChange, findings = [], labels = DEFAULT_DESIGNER_LABELS }) {
+    const shape = (board.layout.kind === 'canvas' ? board.layout.shapes?.[id] : undefined) ?? {};
+    const set = (change) => {
+        const next = { ...shape, ...change };
+        for (const [key, value] of Object.entries(change))
+            if (value === undefined || value === '' || value === false)
+                delete next[key];
+        onChange(next);
+    };
+    const number = (label, value, change) => (_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [label, _jsx("input", { type: "number", min: 1, value: value ?? '', onChange: e => change(e.target.value === '' ? undefined : Number(e.target.value)) })] }));
+    const box = shape.box !== undefined;
+    const drawn = shape.line !== undefined || shape.path !== undefined;
+    return (_jsxs("div", { className: "ub-panel ub-panel--shape", children: [_jsx("h2", { className: "ub-panel__heading", children: labels.shapeHeading.replace('{id}', id) }), drawn ? (_jsx(LineFields, { shape: shape, onChange: onChange, labels: labels })) : (_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [box ? labels.shapeLabel : labels.shapeText, _jsx("input", { type: "text", value: (box ? shape.label : shape.text) ?? '', onChange: e => (box ? set({ label: e.target.value }) : onChange({ ...shape, text: e.target.value })) })] })), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.shapeTone, _jsxs("select", { value: shape.tone ?? '', onChange: e => set({ tone: (e.target.value || undefined) }), children: [_jsx("option", { value: "", children: "\u2014" }), TONES.map(tone => (_jsx("option", { value: tone, children: tone }, tone)))] })] }), box || drawn ? (_jsxs(_Fragment, { children: [number(labels.shapeWidth, shape.width, width => set({ width })), _jsxs("label", { className: "ub-panel__field ub-panel__field--check", children: [_jsx("input", { type: "checkbox", checked: shape.dash === true, onChange: e => set({ dash: e.target.checked }) }), labels.linkDash] })] })) : (number(labels.shapeSize, shape.size, size => set({ size }))), findings.length > 0 && (_jsx("ul", { className: "ub-panel__findings", role: "alert", children: findings.map(finding => (_jsx("li", { children: finding.message }, `${finding.path}:${finding.message}`))) }))] }));
+}

package/dist/lib/authoring/StatesEditor.d.ts

@@ -0,0 +1,18 @@
+import { type DesignerLabels } from '../labels.js';
+import type { StateRule, ValueMap, Widget } from '@iyulab/u-board/picture';
+export interface StatesEditorProps {
+    /** The part's widget — its bindings are what a state can be read from. */
+    widget: Widget;
+    states: StateRule | undefined;
+    /** A new rule, or `undefined` to take the part's states away. */
+    onChange: (states: StateRule | undefined) => void;
+    labels: DesignerLabels;
+}
+/** The state names a map gives, each once, in the order the map tries them: values, ranges, then anything else. */
+export declare function stateNames(map: ValueMap<unknown> | undefined): string[];
+/**
+ * A part's states: which of its widget's bindings they are read from, the map from that value to a state's name — the
+ * same rows a binding's value map has — and how each named state is shown (a ring, blinking, hidden). Written as the
+ * author edits; a draft that names no state yet, or has a range that is not one, is held here until it does.
+ */
+export declare function StatesEditor({ widget, states, onChange, labels }: StatesEditorProps): import("react").JSX.Element;

package/dist/lib/authoring/StatesEditor.js

@@ -0,0 +1,79 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FIELD_STYLE } from './field-style.js';
+import { useId, useState } from 'react';
+import { GROUP_STYLE } from '@iyulab/u-board/toolkit';
+import { ValueMapFields, draftMap, invalidRanges, mapFromDraft } from './ValueMapFields.js';
+import { THEME_COLORS } from '@iyulab/u-board/toolkit';
+/** The state names a map gives, each once, in the order the map tries them: values, ranges, then anything else. */
+export function stateNames(map) {
+    if (!map)
+        return [];
+    const names = [...Object.values(map.values ?? {}), ...(map.ranges ?? []).map(r => r.value), ...('otherwise' in map ? [map.otherwise] : [])];
+    return [...new Set(names.filter((name) => typeof name === 'string' && name !== ''))];
+}
+/** `looks` kept to the names the map still gives — and, when one name was replaced by one other, carried to it. */
+function followNames(looks, before, after) {
+    const gone = before.filter(name => !after.includes(name));
+    const added = after.filter(name => !before.includes(name));
+    const kept = Object.fromEntries(Object.entries(looks).filter(([name]) => after.includes(name)));
+    if (gone.length === 1 && added.length === 1 && looks[gone[0]] && !kept[added[0]])
+        kept[added[0]] = looks[gone[0]];
+    return kept;
+}
+/** A look with nothing in it is no look. */
+const isEmptyLook = (look) => !look.outline && !look.blink && !look.hidden;
+/**
+ * A part's states: which of its widget's bindings they are read from, the map from that value to a state's name — the
+ * same rows a binding's value map has — and how each named state is shown (a ring, blinking, hidden). Written as the
+ * author edits; a draft that names no state yet, or has a range that is not one, is held here until it does.
+ */
+export function StatesEditor({ widget, states, onChange, labels }) {
+    const keys = Object.keys(widget.bindings ?? {});
+    const themeColorsId = useId();
+    const [from, setFrom] = useState(states?.from ?? '');
+    const [draft, setDraft] = useState(() => draftMap(states?.map));
+    const [looks, setLooks] = useState(states?.looks ?? {});
+    // The rule last seen, and the one this editor last wrote: a rule arriving that is not what it wrote came from
+    // elsewhere (Undo, another panel) and replaces the draft; its own leaves the draft alone, empty rows included.
+    const [seen, setSeen] = useState(states);
+    const [written, setWritten] = useState(states);
+    if (states !== seen) {
+        setSeen(states);
+        if (states !== written) {
+            setFrom(states?.from ?? '');
+            setDraft(draftMap(states?.map));
+            setLooks(states?.looks ?? {});
+        }
+    }
+    const write = (nextFrom, nextDraft, nextLooks) => {
+        const map = invalidRanges(nextDraft).length === 0 ? mapFromDraft(nextDraft) : undefined;
+        const names = stateNames(map);
+        if (!nextFrom || !map || names.length === 0)
+            return;
+        const kept = Object.fromEntries(Object.entries(nextLooks).filter(([name, look]) => names.includes(name) && !isEmptyLook(look)));
+        const rule = { from: nextFrom, map: map, ...(Object.keys(kept).length > 0 && { looks: kept }) };
+        setWritten(rule);
+        onChange(rule);
+    };
+    if (keys.length === 0 && !states) {
+        return (_jsxs("section", { className: "ub-panel__section", children: [_jsx("h3", { className: "ub-panel__subheading", children: labels.statesHeading }), _jsx("p", { className: "ub-panel__hint", children: labels.statesNeedBinding })] }));
+    }
+    const names = stateNames(invalidRanges(draft).length === 0 ? mapFromDraft(draft) : undefined);
+    const setLook = (name, change) => {
+        const next = { ...looks, [name]: { ...looks[name], ...change } };
+        setLooks(next);
+        write(from, draft, next);
+    };
+    return (_jsxs("section", { className: "ub-panel__section", children: [_jsx("h3", { className: "ub-panel__subheading", children: labels.statesHeading }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.statesFrom, _jsxs("select", { value: from, onChange: e => {
+                            setFrom(e.target.value);
+                            write(e.target.value, draft, looks);
+                        }, children: [_jsx("option", { value: "", children: labels.statesNone }), [...new Set([...keys, ...(from ? [from] : [])])].map(key => (_jsx("option", { value: key, children: key }, key)))] })] }), from !== '' && (_jsxs(_Fragment, { children: [_jsx(ValueMapFields, { draft: draft, onChange: update => {
+                            const next = update(draft);
+                            const before = stateNames(invalidRanges(draft).length === 0 ? mapFromDraft(draft) : undefined);
+                            const after = stateNames(invalidRanges(next).length === 0 ? mapFromDraft(next) : undefined);
+                            const nextLooks = followNames(looks, before, after);
+                            setDraft(next);
+                            setLooks(nextLooks);
+                            write(from, next, nextLooks);
+                        }, labels: labels, heading: labels.statesMapHeading, toLabel: { mapping: labels.stateForValue, range: labels.stateForRange }, placeholders: { from: 'Fault', to: 'fault' } }), names.length > 0 && (_jsxs("fieldset", { className: "ub-panel__state-looks", style: { minWidth: 0 }, children: [_jsx("legend", { children: labels.statesLooks }), _jsx("datalist", { id: themeColorsId, children: THEME_COLORS.map(name => (_jsx("option", { value: name, children: name }, name))) }), names.map(name => (_jsxs("div", { className: "ub-panel__state-look", style: GROUP_STYLE, children: [_jsxs("label", { style: FIELD_STYLE, children: [labels.stateOutline.replace('{state}', name), _jsx("input", { value: looks[name]?.outline ?? '', onChange: e => setLook(name, { outline: e.target.value || undefined }), placeholder: "negative, #dc2626", list: themeColorsId })] }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: !!looks[name]?.blink, onChange: e => setLook(name, { blink: e.target.checked || undefined }) }), labels.stateBlink.replace('{state}', name)] }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: !!looks[name]?.hidden, onChange: e => setLook(name, { hidden: e.target.checked || undefined }) }), labels.stateHidden.replace('{state}', name)] })] }, name)))] }))] })), states && (_jsx("button", { type: "button", className: "ub-action", onClick: () => onChange(undefined), children: labels.removeStates }))] }));
+}

package/dist/lib/authoring/StatusesPanel.d.ts

@@ -0,0 +1,14 @@
+import { type DesignerLabels } from '../labels.js';
+import { type Status } from '@iyulab/u-board/toolkit';
+export interface StatusesPanelProps {
+    statuses: Readonly<Record<string, Status>> | undefined;
+    /** The board's statuses as the panel made them — none left: `undefined`. */
+    onChange: (statuses: Record<string, Status> | undefined) => void;
+    labels?: DesignerLabels;
+}
+/**
+ * The board's statuses — each name a field's state gives, with the tone it is drawn in, its words, its mark and a second
+ * channel besides colour. A status is added by name and removed; its name is not changed here, since the states of
+ * the board's fields name it.
+ */
+export declare function StatusesPanel({ statuses, onChange, labels }: StatusesPanelProps): import("react").JSX.Element;

package/dist/lib/authoring/StatusesPanel.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FIELD_STYLE } from './field-style.js';
+import { DEFAULT_DESIGNER_LABELS } from '../labels.js';
+import { useState } from 'react';
+import { GROUP_STYLE } from '@iyulab/u-board/toolkit';
+import { EMPHASES, TONES } from '@iyulab/u-board/toolkit';
+/** Whether a new status may take `name`: any word a field's state may give, but not an empty one or one taken. */
+const usable = (name, taken) => name.trim() !== '' && !Object.hasOwn(taken, name.trim());
+/**
+ * The board's statuses — each name a field's state gives, with the tone it is drawn in, its words, its mark and a second
+ * channel besides colour. A status is added by name and removed; its name is not changed here, since the states of
+ * the board's fields name it.
+ */
+export function StatusesPanel({ statuses = {}, onChange, labels = DEFAULT_DESIGNER_LABELS }) {
+    const [name, setName] = useState('');
+    const write = (next) => onChange(Object.keys(next).length > 0 ? next : undefined);
+    const set = (key, change) => {
+        const status = { ...statuses[key], ...change };
+        for (const field of ['label', 'glyph', 'emphasis'])
+            if (status[field] === undefined || status[field] === '')
+                delete status[field];
+        write({ ...statuses, [key]: status });
+    };
+    const remove = (key) => {
+        const { [key]: _gone, ...rest } = statuses;
+        write(rest);
+    };
+    return (_jsxs("div", { className: "ub-panel ub-panel--statuses", children: [_jsx("h2", { className: "ub-panel__heading", children: labels.statusesHeading }), Object.entries(statuses).map(([key, status]) => (_jsxs("fieldset", { className: "ub-panel__group", style: { minWidth: 0 }, children: [_jsx("legend", { children: _jsx("code", { children: key }) }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.statusTone, _jsx("select", { value: status.tone, onChange: e => set(key, { tone: e.target.value }), children: TONES.map(tone => (_jsx("option", { value: tone, children: tone }, tone))) })] }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.statusLabel, _jsx("input", { type: "text", value: status.label ?? '', onChange: e => set(key, { label: e.target.value }) })] }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.statusGlyph, _jsx("input", { type: "text", value: status.glyph ?? '', onChange: e => set(key, { glyph: e.target.value }) })] }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.statusEmphasis, _jsxs("select", { value: status.emphasis ?? '', onChange: e => set(key, { emphasis: (e.target.value || undefined) }), children: [_jsx("option", { value: "", children: labels.statusEmphasisNone }), EMPHASES.map(emphasis => (_jsx("option", { value: emphasis, children: emphasis }, emphasis)))] })] }), _jsx("button", { type: "button", className: "ub-action", onClick: () => remove(key), children: labels.statusRemove.replace('{name}', key) })] }, key))), _jsxs("div", { className: "ub-panel__actions", style: GROUP_STYLE, children: [_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.statusNew, _jsx("input", { type: "text", value: name, onChange: e => setName(e.target.value) })] }), _jsx("button", { type: "button", className: "ub-action", disabled: !usable(name, statuses), onClick: () => {
+                            write({ ...statuses, [name.trim()]: { tone: 'info' } });
+                            setName('');
+                        }, children: labels.statusAdd })] })] }));
+}

package/dist/lib/authoring/TriggersEditor.d.ts

@@ -0,0 +1,30 @@
+import { type DesignerLabels } from '../labels.js';
+import { type Trigger, type ViewDocument } from '@iyulab/u-board/picture';
+export interface TriggersEditorProps {
+    /** The part whose triggers are edited — or none, for the board's own: those that run when it opens. */
+    node?: string;
+    /** The board's whole list; the editor shows the ones on `node` (or the `open` ones) and changes them by index. */
+    triggers: readonly Trigger[] | undefined;
+    /** The board's parts, by id — what a trigger may wait on or bring into view. */
+    parts: readonly string[];
+    /** The state names a part's states give — offered for «enters», «leaves» and «only when». */
+    stateNamesOf: (part: string) => readonly string[];
+    /** How a part is named to the author; its id when left out. */
+    nameOf?: (part: string) => string;
+    /** The `each` part an item node belongs to — a trigger may then be for every item of it. */
+    eachOf?: (node: string) => string | undefined;
+    onAdd: (trigger: Trigger) => void;
+    onReplace: (index: number, trigger: Trigger) => void;
+    onRemove: (index: number) => void;
+    labels: DesignerLabels;
+}
+/**
+ * A board's triggers, edited where an author thinks of them: on a part — clicked, an event of its element, a state
+ * entered or left — or, without a part, when the board opens. Each trigger is written as soon as it is complete and
+ * one a board may hold; until then the form says what is missing, and the document keeps what it had.
+ */
+export declare function TriggersEditor({ node, triggers, parts, stateNamesOf, nameOf, eachOf, onAdd, onReplace, onRemove, labels }: TriggersEditorProps): import("react").JSX.Element;
+/** What a panel needs to edit `doc`'s triggers — its list, its parts and their states, and edits through `updateDoc`. */
+export type TriggerEditing = Omit<TriggersEditorProps, 'node' | 'labels'>;
+/** The parts a trigger may name are the parts the board places. */
+export declare function triggerEditing<D extends ViewDocument>(doc: D, updateDoc: (update: (current: D) => D) => void, locale?: string): TriggerEditing;