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

package/dist/lib/authoring/BoardElementsPanel.js

@@ -0,0 +1,49 @@
+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 { GROUP_STYLE } from '@iyulab/u-board/toolkit';
+const PROP_TYPES = ['number', 'string', 'boolean', 'list', 'object'];
+/** Whether a new element may take `name`: lowercase letters, digits and `-`, from a letter, not U-Board's, not taken. */
+const usable = (name, taken) => /^[a-z][a-z0-9-]*$/.test(name) && !name.startsWith('u-board-') && !Object.hasOwn(taken, name);
+/** The parts that draw element `name`. */
+const usesOf = (board, name) => Object.entries(board.parts).filter(([, part]) => part.as === 'element' && part.element === name).map(([id]) => id);
+/**
+ * The board's elements — drawings no built-in makes, each a template of markup with `{{prop}}` holes (or a script run in a
+ * sandboxed frame), its CSS, and the props it takes by name and type. An element is added by name — a template — and
+ * removed when no part draws it.
+ */
+export function BoardElementsPanel({ board, onChange, labels = DEFAULT_DESIGNER_LABELS }) {
+    const elements = board.elements ?? {};
+    const [name, setName] = useState('');
+    const write = (next) => onChange(Object.keys(next).length > 0 ? next : undefined);
+    const set = (key, change) => {
+        const next = { ...elements[key], ...change };
+        for (const [k, v] of Object.entries(change))
+            if (v === undefined || (v === '' && k !== 'script'))
+                delete next[k];
+        // A template element keeps its template while it is emptied; a script element has none.
+        if (typeof next.template !== 'string' && typeof next.script !== 'string')
+            next.template = '';
+        write({ ...elements, [key]: next });
+    };
+    return (_jsxs("div", { className: "ub-panel ub-panel--elements", children: [_jsx("h2", { className: "ub-panel__heading", children: labels.elementsHeading }), Object.entries(elements).map(([key, element]) => (_jsx(BoardElement, { name: key, element: element, uses: usesOf(board, key), labels: labels, set: change => set(key, change), remove: () => {
+                    const { [key]: _gone, ...rest } = elements;
+                    write(rest);
+                } }, key))), _jsxs("div", { className: "ub-panel__actions", style: GROUP_STYLE, children: [_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.elementName, _jsx("input", { type: "text", value: name, onChange: e => setName(e.target.value) })] }), _jsx("button", { type: "button", className: "ub-action", disabled: !usable(name.trim(), elements), onClick: () => {
+                            write({ ...elements, [name.trim()]: { template: '<div>{{value}}</div>', props: { value: 'string' } } });
+                            setName('');
+                        }, children: labels.addElement })] })] }));
+}
+function BoardElement({ name, element, uses, labels, set, remove }) {
+    const [prop, setProp] = useState('');
+    const props = element.props ?? {};
+    const setProps = (next) => set({ props: Object.keys(next).length > 0 ? next : undefined });
+    return (_jsxs("fieldset", { className: "ub-panel__group", style: { minWidth: 0 }, children: [_jsx("legend", { children: _jsx("code", { children: name }) }), element.script !== undefined ? (_jsxs(_Fragment, { children: [_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.elementScript, _jsx("textarea", { rows: 8, spellCheck: false, value: element.script, onChange: e => set({ script: e.target.value }) })] }), _jsx("p", { className: "ub-panel__hint", children: labels.elementScriptPreview })] })) : (_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.elementTemplate, _jsx("textarea", { rows: 5, spellCheck: false, value: element.template ?? '', onChange: e => set({ template: e.target.value }) })] })), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.elementStyle, _jsx("textarea", { rows: 3, spellCheck: false, value: element.style ?? '', onChange: e => set({ style: e.target.value }) })] }), _jsxs("fieldset", { className: "ub-panel__group", style: { minWidth: 0 }, children: [_jsx("legend", { children: labels.elementProps }), Object.entries(props).map(([key, type]) => (_jsxs("div", { className: "ub-panel__field", style: FIELD_STYLE, children: [_jsx("code", { "aria-hidden": "true", children: key }), _jsx("select", { "aria-label": key, value: type, onChange: e => setProps({ ...props, [key]: e.target.value }), children: PROP_TYPES.map(t => (_jsx("option", { value: t, children: t }, t))) }), _jsx("button", { type: "button", className: "ub-action", onClick: () => {
+                                    const { [key]: _gone, ...rest } = props;
+                                    setProps(rest);
+                                }, children: labels.elementPropRemove.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.elementPropNew, _jsx("input", { type: "text", value: prop, onChange: e => setProp(e.target.value) })] }), _jsx("button", { type: "button", className: "ub-action", disabled: !/^[\w-]+$/.test(prop.trim()) || Object.hasOwn(props, prop.trim()), onClick: () => {
+                                    setProps({ ...props, [prop.trim()]: 'string' });
+                                    setProp('');
+                                }, children: labels.elementPropAdd })] })] }), uses.length > 0 ? (_jsx("p", { className: "ub-panel__hint", children: labels.removeElementPlaced.replace('{count}', String(uses.length)) })) : (_jsx("button", { type: "button", className: "ub-action", onClick: remove, children: labels.removeElement }))] }));
+}

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

@@ -0,0 +1,40 @@
+import { type DesignerLabels } from '../labels.js';
+import type { BoardAppearance, ReferencePoint } from '@iyulab/u-board/picture';
+import { type TriggerEditing } from './TriggersEditor.js';
+export interface BoardPanelProps {
+    /** Whether the board has a background image (offers to remove it). */
+    hasBackground?: boolean;
+    appearance: BoardAppearance;
+    /** Where choosing and removing a background goes — a board that has one (a canvas view). Without them the panel
+     *  offers no background. */
+    onChooseBackground?: () => void;
+    onRemoveBackground?: () => void;
+    onAppearanceChange: (appearance: BoardAppearance) => void;
+    /** The board's accent colour (absent: the theme's), and where a change to it goes. */
+    accent?: string;
+    onAccentChange?: (accent: string | undefined) => void;
+    /** The background image's reference points, and where a change to them goes — offered while there is a
+     *  background. */
+    referencePoints?: [ReferencePoint, ReferencePoint];
+    onReferencePointsChange?: (points: [ReferencePoint, ReferencePoint] | undefined) => void;
+    /** Anchored nodes that the points' change left off their coordinates: whether the points are still to be
+     *  given again, how many nodes moved, and the two answers. */
+    anchors?: {
+        awaitingPoints: boolean;
+        moved: number;
+        onRelocate: () => void;
+        onKeep: () => void;
+    };
+    /** What to select to edit something — `labels.selectNode` by default. */
+    hint?: string;
+    /** The board's triggers, to edit those that run when it opens. */
+    triggers?: TriggerEditing;
+    labels?: DesignerLabels;
+}
+/**
+ * The panel shown while nothing is selected: the board's own settings — its background, its tone and its accent.
+ * They describe the whole document rather than an action on it, so they sit where a selection's
+ * properties do, as editors conventionally show the document's properties when nothing is selected,
+ * and leave the toolbar to adding, saving, the mode and the view.
+ */
+export declare function BoardPanel({ hasBackground, appearance, onChooseBackground, onRemoveBackground, onAppearanceChange, accent, onAccentChange, referencePoints, onReferencePointsChange, anchors, hint, triggers, labels, }: BoardPanelProps): import("react").JSX.Element;

package/dist/lib/authoring/BoardPanel.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_DESIGNER_LABELS } from '../labels.js';
+import { ReferencePointsFields } from './AnchorFields.js';
+import { GROUP_STYLE } from '@iyulab/u-board/toolkit';
+import { TriggersEditor } from './TriggersEditor.js';
+// The button row is spaced like the property panel's, and apart from the tone picker below it.
+const ACTIONS_STYLE = { ...GROUP_STYLE, marginBottom: 'var(--ub-space-3, 12px)' };
+/**
+ * The panel shown while nothing is selected: the board's own settings — its background, its tone and its accent.
+ * They describe the whole document rather than an action on it, so they sit where a selection's
+ * properties do, as editors conventionally show the document's properties when nothing is selected,
+ * and leave the toolbar to adding, saving, the mode and the view.
+ */
+export function BoardPanel({ hasBackground = false, appearance, onChooseBackground, onRemoveBackground, onAppearanceChange, accent, onAccentChange, referencePoints, onReferencePointsChange, anchors, hint, triggers, labels = DEFAULT_DESIGNER_LABELS, }) {
+    return (_jsxs("div", { className: "ub-panel ub-panel--board", children: [_jsx("h2", { className: "ub-panel__heading", children: labels.boardHeading }), onChooseBackground && (_jsxs("div", { className: "ub-panel__actions", style: ACTIONS_STYLE, children: [_jsx("button", { type: "button", className: "ub-action", onClick: onChooseBackground, children: labels.setBackground }), hasBackground && onRemoveBackground && (_jsx("button", { type: "button", className: "ub-action", onClick: onRemoveBackground, children: labels.removeBackground }))] })), hasBackground && onReferencePointsChange && (_jsx(ReferencePointsFields, { points: referencePoints, onChange: onReferencePointsChange, labels: labels })), hasBackground && anchors?.awaitingPoints && (_jsx("p", { className: "ub-panel__hint", role: "status", children: labels.referencePointsNeeded })), hasBackground && anchors && !anchors.awaitingPoints && anchors.moved > 0 && (_jsxs("div", { role: "status", className: "ub-panel__actions", style: ACTIONS_STYLE, children: [_jsx("p", { className: "ub-panel__hint", children: labels.anchorsMoved.replace('{count}', String(anchors.moved)) }), _jsx("button", { type: "button", className: "ub-action", onClick: anchors.onRelocate, children: labels.relocateAnchors }), _jsx("button", { type: "button", className: "ub-action", onClick: anchors.onKeep, children: labels.keepAnchors })] })), _jsxs("label", { className: "ub-panel__field ub-authoring__appearance", children: [labels.appearance, _jsxs("select", { value: appearance, onChange: e => onAppearanceChange(e.target.value), children: [_jsx("option", { value: "light", children: labels.appearanceLight }), _jsx("option", { value: "dark", children: labels.appearanceDark })] })] }), onAccentChange && (_jsxs("label", { className: "ub-panel__field", children: [labels.accent, _jsx("input", { defaultValue: accent ?? '', placeholder: labels.accentPlaceholder, 
+                        // Written when left, as the other fields are; cleared, the board takes the theme's again.
+                        onBlur: e => {
+                            const typed = e.currentTarget.value.trim();
+                            if (typed !== (accent ?? ''))
+                                onAccentChange(typed === '' ? undefined : typed);
+                        } }, accent ?? '')] })), triggers && _jsx(TriggersEditor, { ...triggers, labels: labels }), _jsx("p", { className: "ub-panel__hint", children: hint ?? labels.selectNode })] }));
+}

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

@@ -0,0 +1,13 @@
+import type { CanvasView } from '@iyulab/u-board/picture';
+import { type KindEditorProps } from './editor-parts.js';
+/**
+ * The canvas of a board being edited, drawn from its picture: in Edit, a canvas-kit `KonvaDesigner` moves, sizes,
+ * selects and deletes the parts — each widget, rendered through the same path a viewer uses (`resolveDocument` +
+ * `toCanvasKit`), laid over its footprint, display-only — and in View, the canvas-kit `Viewer` shows the board as a
+ * shared link does (docs/principles.md — editor/renderer separation; the designer never renders a widget itself, it
+ * only owns a part's footprint and selection). What a selected part is set to is the panel `parts.panel` draws.
+ *
+ * Both modes share one pan/zoom. The board opens fitted into view (shrunk to fit, never magnified) and stays fitted as
+ * it resizes until the author pans or zooms; "Fit to view" restores that.
+ */
+export declare function CanvasAuthoring({ doc, updateDoc, mode, onModeChange, documentActions, adapters, width, height, labels, clock, triggerHosting, parts, }: KindEditorProps<CanvasView>): import("react").JSX.Element;

package/dist/lib/authoring/CanvasAuthoring.js

@@ -0,0 +1,161 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react';
+import { KonvaDesigner } from '@canvas-kit/designer';
+import { Viewer } from '@canvas-kit/viewer';
+import { documentToScene, applySceneToDocument, partOf } from './scene-mapping.js';
+import { removeParts } from '../editing/part-removal.js';
+import { resolveDocument } from '@iyulab/u-board/toolkit';
+import { toCanvasKit } from '@iyulab/u-board/toolkit';
+import { focusPart, useTriggers } from '@iyulab/u-board/toolkit';
+import { widgetTypeName } from './widget-catalog.js';
+import { documentExtent } from '@iyulab/u-board/toolkit';
+import { sizedNodes } from '@iyulab/u-board/toolkit';
+import { useFittedView } from '@iyulab/u-board/toolkit';
+import { ViewControls } from '@iyulab/u-board/toolkit';
+import { TOOLBAR_STYLE, GROUP_STYLE, mayLoadBackground } from '@iyulab/u-board/toolkit';
+import { ModeSwitch } from './editor-parts.js';
+import { AttributionLine, boardAttributions, showsExampleData } from '@iyulab/u-board/toolkit';
+/** The note that a background picture is left out — in the warning colours, with or without the stylesheet. */
+const BACKGROUND_BLOCKED_STYLE = {
+    padding: '2px 8px',
+    borderRadius: 4,
+    background: 'var(--_ub-warning-bg, var(--ub-warning-bg, #fef3c7))',
+    color: 'var(--_ub-warning, var(--ub-warning, #92400e))',
+    fontWeight: 600,
+};
+/**
+ * The canvas of a board being edited, drawn from its picture: in Edit, a canvas-kit `KonvaDesigner` moves, sizes,
+ * selects and deletes the parts — each widget, rendered through the same path a viewer uses (`resolveDocument` +
+ * `toCanvasKit`), laid over its footprint, display-only — and in View, the canvas-kit `Viewer` shows the board as a
+ * shared link does (docs/principles.md — editor/renderer separation; the designer never renders a widget itself, it
+ * only owns a part's footprint and selection). What a selected part is set to is the panel `parts.panel` draws.
+ *
+ * Both modes share one pan/zoom. The board opens fitted into view (shrunk to fit, never magnified) and stays fitted as
+ * it resizes until the author pans or zooms; "Fit to view" restores that.
+ */
+export function CanvasAuthoring({ doc, updateDoc, mode, onModeChange, documentActions, adapters, width, height, labels, clock, triggerHosting, parts, }) {
+    // Read when a result is drawn, not watched: a new function on every render must not re-resolve.
+    const readClock = useEffectEvent(() => clock());
+    // The board as its bindings last resolved, and when — drawn below as a viewer draws it.
+    const [resolved, setResolved] = useState(null);
+    // The parts the editor has selected, in the order they were picked. With several (a box selection), they can be
+    // deleted together, and two joined, but no single part's panel applies.
+    const [selectedIds, setSelectedIds] = useState([]);
+    // A part just added, to be selected once the designer draws it — so its panel opens.
+    const [pendingSelect, setPendingSelect] = useState(null);
+    const designerRef = useRef(null);
+    const view = useFittedView();
+    const { fitTo, focusOn } = view;
+    // The board's triggers run in View only, as a shared link runs them; in Edit a click selects.
+    const shownDoc = mode === 'view' ? (resolved?.doc ?? null) : null;
+    const focus = useCallback((node) => focusPart(shownDoc, node, focusOn, null), [shownDoc, focusOn]);
+    const { activatable, activate, elementEvent } = useTriggers(doc, shownDoc, { ...triggerHosting, focus });
+    const preview = useMemo(() => resolved &&
+        toCanvasKit(resolved.doc, {
+            qualityText: labels.qualityText,
+            now: resolved.now,
+            locale: labels.locale,
+            ...(mode === 'view' && { activatable, onNodeActivate: activate, onElementEvent: elementEvent }),
+        }), [resolved, labels, mode, activatable, activate, elementEvent]);
+    // The picture as it was opened — this editor is mounted afresh for each board opened — which is what fits into view;
+    // not each edit.
+    const [openedDoc] = useState(doc);
+    const { movable, deletable } = parts;
+    const scene = useMemo(() => documentToScene(doc, movable, deletable), [doc, movable, deletable]);
+    const extent = useMemo(() => documentExtent(doc), [doc]);
+    // The widgets the viewer would draw, laid over the parts being edited — display-only, so a press on one reaches the
+    // part beneath — each with its widget type named above it. Where and how big each is comes from the picture as edited
+    // now; only what it shows waits for the bindings to resolve, so a moved or resized part does not leave its widget
+    // behind while a slow source answers.
+    const editorOverlays = useMemo(() => {
+        const widgets = new Map((preview?.overlays ?? []).map(overlay => [overlay.id, overlay.content]));
+        return sizedNodes(doc).map(node => ({
+            id: node.id,
+            x: node.x,
+            y: node.y,
+            width: node.width,
+            height: node.height,
+            content: _jsx(NodeInPlace, { widget: widgets.get(node.id) ?? null, name: widgetTypeName(node.widget.type, labels.locale) }),
+        }));
+    }, [preview, doc, labels.locale]);
+    useEffect(() => {
+        fitTo(documentExtent(openedDoc));
+    }, [fitTo, openedDoc]);
+    useEffect(() => {
+        let cancelled = false;
+        resolveDocument(doc, adapters).then(result => {
+            if (!cancelled)
+                setResolved({ doc: result, now: readClock() });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [doc, adapters]);
+    const attributions = useMemo(() => boardAttributions(doc, adapters), [doc, adapters]);
+    const example = useMemo(() => showsExampleData(doc, adapters), [doc, adapters]);
+    // A part that leaves the picture (undone) leaves the selection.
+    useEffect(() => {
+        const present = (id) => doc.nodes.some(n => n.id === id) || doc.connectors.some(c => c.id === id) || !!doc.decorations?.some(d => d.id === id);
+        setSelectedIds(ids => (ids.every(present) ? ids : ids.filter(present)));
+    }, [doc]);
+    useEffect(() => {
+        if (!pendingSelect || !scene.getObjects().some(o => o.id === pendingSelect))
+            return;
+        designerRef.current?.select([pendingSelect]);
+        setPendingSelect(null);
+    }, [scene, pendingSelect]);
+    const handleSceneChange = (newScene) => {
+        updateDoc(prev => applySceneToDocument(prev, newScene));
+    };
+    // Nothing is selected on a board being viewed — and the editor, mounted again on the way back, starts with no
+    // selection — so the panel lets go of the selected item rather than show one the board does not.
+    const handleViewMode = () => {
+        onModeChange('view');
+        setSelectedIds([]);
+    };
+    // A connector is drawn in pieces (its line, heads, label chip): any of them selects the connector.
+    const handleSelectionChange = (selection) => {
+        setSelectedIds([...new Set(selection.flatMap(object => (object.id ? [partOf(object.id)] : [])))]);
+    };
+    // Two of the board's own parts picked: they can be joined, first to second.
+    const pair = selectedIds.length === 2 && selectedIds.every(id => doc.nodes.some(n => n.id === id) && movable(id)) ? selectedIds : null;
+    const handleConnect = () => {
+        if (!pair || !parts.connect)
+            return;
+        setPendingSelect(parts.connect(pair[0], pair[1]));
+    };
+    const handleDelete = () => {
+        if (selectedIds.length === 0)
+            return;
+        const ids = selectedIds.filter(id => movable(id) || !!deletable?.(id));
+        updateDoc(prev => removeParts(prev, ids));
+        designerRef.current?.select([]);
+        setSelectedIds([]);
+    };
+    // Delete or Backspace on the editor deletes the selection — not while typing in a field.
+    const handleEditorKey = (e) => {
+        if (e.key !== 'Delete' && e.key !== 'Backspace')
+            return;
+        const target = e.target;
+        if (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName))
+            return;
+        if (selectedIds.length === 0)
+            return;
+        e.preventDefault();
+        handleDelete();
+    };
+    // Sized panes stay at their size; container-sized ones split the row and fill its height.
+    const followsContainer = width === undefined || height === undefined;
+    const paneStyle = followsContainer
+        ? { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }
+        : { display: 'flex', flexDirection: 'column' };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ub-authoring__toolbar", style: TOOLBAR_STYLE, children: [_jsxs("div", { className: "ub-authoring__group", style: GROUP_STYLE, children: [parts.connect && (_jsx("button", { type: "button", className: "ub-action", onClick: handleConnect, disabled: !pair, title: pair ? undefined : labels.connectHint, children: labels.addConnector })), _jsx("button", { type: "button", className: "ub-action", onClick: handleDelete, disabled: selectedIds.length === 0, children: labels.deleteSelected })] }), documentActions, _jsx(ModeSwitch, { mode: mode, onEdit: () => onModeChange('edit'), onView: handleViewMode, labels: labels }), _jsx("div", { className: "ub-authoring__group", style: GROUP_STYLE, children: _jsx(ViewControls, { view: view, onFit: extent ? () => fitTo(extent) : undefined, labels: labels }) }), doc.background.image && !mayLoadBackground(doc.background.image.src) && (_jsx("span", { role: "status", style: BACKGROUND_BLOCKED_STYLE, children: labels.backgroundBlocked }))] }), _jsxs("div", { className: "ub-authoring__panes", style: { display: 'flex', gap: 'var(--ub-space-4, 16px)', flex: 1, minHeight: 0 }, children: [_jsxs("div", { className: "ub-authoring__pane", style: paneStyle, children: [mode === 'edit' ? (_jsx("div", { className: "ub-authoring__surface", "data-appearance": doc.appearance ?? 'light', style: { flex: 1, minHeight: 0 }, role: "presentation", onKeyDown: handleEditorKey, children: _jsx(KonvaDesigner, { ref: designerRef, width: width, height: height, scene: scene, transform: view.transform, onTransformChange: view.onUserTransform, onViewportResize: view.onViewportResize, onSceneChange: handleSceneChange, onSelectionChange: handleSelectionChange, overlays: editorOverlays, ariaLabel: labels.editorRegion }) })) : preview ? (_jsx("div", { className: "ub-authoring__surface", "data-appearance": doc.appearance ?? 'light', style: { flex: 1, minHeight: 0 }, children: _jsx(Viewer, { width: width, height: height, scene: preview.scene, overlays: preview.overlays, transform: view.transform, onTransformChange: view.onUserTransform, onViewportResize: view.onViewportResize, ariaLabel: labels.previewRegion }) })) : (_jsx("p", { className: "ub-authoring__status", children: labels.resolving })), mode === 'view' && preview && _jsx(AttributionLine, { attributions: attributions, example: example, labels: labels })] }), _jsx("div", { className: "ub-authoring__panel", style: { flex: '0 0 var(--ub-panel-width, 320px)', minWidth: 0, overflowY: 'auto' }, children: selectedIds.length > 1 ? (_jsx("p", { className: "ub-panel__hint", children: labels.multipleSelected.replace('{count}', String(selectedIds.length)) })) : ((parts.panel(selectedIds[0] ?? null) ?? _jsx("p", { className: "ub-panel__hint", children: labels.layoutOnlyHint }))) })] })] }));
+}
+const NODE_IN_PLACE_STYLE = { position: 'relative', width: '100%', height: '100%' };
+// Above the node's box, so it never covers the widget; the tag is a hint, not part of the board.
+const NODE_TAG_STYLE = { position: 'absolute', left: 0, bottom: '100%', whiteSpace: 'nowrap' };
+/** A part's widget drawn where it is being edited, with the widget type named above it — what tells two parts apart,
+ * and what an unbound widget that draws nothing still shows. */
+function NodeInPlace({ widget, name }) {
+    return (_jsxs("div", { className: "ub-authoring__node", style: NODE_IN_PLACE_STYLE, children: [widget, _jsx("span", { className: "ub-authoring__node-tag", style: NODE_TAG_STYLE, children: name })] }));
+}

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

@@ -0,0 +1,29 @@
+import { type DesignerLabels } from '../labels.js';
+import type { Query } from '@iyulab/u-board/toolkit';
+/** A data source a board may read from, as its host names it — one of the adapters the host gives. */
+export interface DataSource {
+    id: string;
+    label?: string;
+}
+export interface DataPanelProps {
+    data: Readonly<Record<string, Query>> | undefined;
+    /** The board's data as the panel made them — none left: `undefined`. */
+    onChange: (data: Record<string, Query> | undefined) => void;
+    /** Where a read may come from — the host's sources. */
+    sources: readonly DataSource[];
+    /** Reads one of the board's data as the board reads it whole: the list, or the one item. Omitted, there is no looking. */
+    look?: (name: string) => Promise<unknown>;
+    /** The board's statuses, by name — what a field's status maps to. */
+    statuses?: readonly string[];
+    labels?: DesignerLabels;
+}
+/**
+ * The board's data — each read: where from (a source of the host's), what is asked, the list in the answer and the
+ * field naming its items, and the meaning of its fields (a name, a unit, decimal places, a format). Looking reads the
+ * data now and offers the fields it found. A field's value names and state are written as structures and shown, not
+ * edited, here.
+ */
+export declare function DataPanel({ data, onChange, sources, look, statuses, labels }: DataPanelProps): import("react").JSX.Element;
+/** Items picked by their fields, as written — `kind=PM10, site=north` — a number (not one with a leading zero, an id) or
+ *  `true`/`false` as one, the rest as text; `null` when it is not pairs, `undefined` when empty. */
+export declare function parseWhere(text: string): Record<string, string | number | boolean> | null | undefined;

package/dist/lib/authoring/DataPanel.js

@@ -0,0 +1,98 @@
+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, GROUP_STYLE, isRelativeRule } from '@iyulab/u-board/toolkit';
+import { MappingEditor } from './MappingEditor.js';
+/** Whether new data may take `name`: a name parts can address (`<data>[<key>]`), not one taken. */
+const usable = (name, taken) => /^[\w-]+$/.test(name.trim()) && !Object.hasOwn(taken, name.trim());
+/** Whether a new field may take `name`: any name an item's field has, not an empty one or one taken. */
+const usableField = (name, taken) => name.trim() !== '' && !Object.hasOwn(taken, name.trim());
+/** The fields an item read has: an object's own names, or those of a list's first item. */
+function fieldsIn(value) {
+    const item = Array.isArray(value) ? value[0] : value;
+    return typeof item === 'object' && item !== null && !Array.isArray(item) ? Object.keys(item) : [];
+}
+/** A query without the settings emptied in the panel. */
+function tidy(value) {
+    return Object.fromEntries(Object.entries(value).filter(([, v]) => v !== undefined && v !== ''));
+}
+/**
+ * The board's data — each read: where from (a source of the host's), what is asked, the list in the answer and the
+ * field naming its items, and the meaning of its fields (a name, a unit, decimal places, a format). Looking reads the
+ * data now and offers the fields it found. A field's value names and state are written as structures and shown, not
+ * edited, here.
+ */
+export function DataPanel({ data = {}, onChange, sources, look, statuses = [], labels = DEFAULT_DESIGNER_LABELS }) {
+    const [name, setName] = useState('');
+    const write = (next) => onChange(Object.keys(next).length > 0 ? next : undefined);
+    const set = (key, change) => write({ ...data, [key]: tidy({ ...data[key], ...change }) });
+    const setField = (key, field, change) => {
+        const { [field]: before, ...others } = data[key].fields ?? {};
+        const fields = change === null ? others : { ...data[key].fields, [field]: tidy({ ...before, ...change }) };
+        set(key, { fields: Object.keys(fields).length > 0 ? fields : undefined });
+    };
+    const remove = (key) => {
+        const { [key]: _gone, ...rest } = data;
+        write(rest);
+    };
+    return (_jsxs("div", { className: "ub-panel ub-panel--data", children: [_jsx("h2", { className: "ub-panel__heading", children: labels.dataHeading }), Object.entries(data).map(([key, query]) => (_jsx(DataRead, { name: key, query: query, sources: sources, look: look, statuses: statuses, labels: labels, set: change => set(key, change), setField: (field, change) => setField(key, field, change), remove: () => remove(key) }, key))), _jsxs("div", { className: "ub-panel__actions", style: GROUP_STYLE, children: [_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.dataNew, _jsx("input", { type: "text", value: name, onChange: e => setName(e.target.value) })] }), _jsx("button", { type: "button", className: "ub-action", disabled: !usable(name, data) || sources.length === 0, onClick: () => {
+                            write({ ...data, [name.trim()]: { from: sources[0].id, path: '/' } });
+                            setName('');
+                        }, children: labels.dataAdd })] }), sources.length === 0 && _jsx("p", { className: "ub-panel__hint", children: labels.noDataSources })] }));
+}
+/** Items picked by their fields, as written — `kind=PM10, site=north` — a number (not one with a leading zero, an id) or
+ *  `true`/`false` as one, the rest as text; `null` when it is not pairs, `undefined` when empty. */
+export function parseWhere(text) {
+    if (text.trim() === '')
+        return undefined;
+    const where = {};
+    for (const pair of text.split(',')) {
+        const at = pair.indexOf('=');
+        const field = pair.slice(0, at).trim();
+        const value = pair.slice(at + 1).trim();
+        if (at < 0 || field === '' || value === '')
+            return null;
+        where[field] = /^-?(0|[1-9]\d*)(\.\d+)?$/.test(value) ? Number(value) : value === 'true' ? true : value === 'false' ? false : value;
+    }
+    return where;
+}
+const whereText = (where) => (where ? Object.entries(where).map(([field, value]) => `${field}=${value}`).join(', ') : '');
+/** The finer points of a request read, folded: which items, when they were observed, how long a value stays current, the
+ *  source's time zone, the time its request asks for, and a long answer read as one item. */
+function ReadDetails({ query, labels, set }) {
+    const [where, setWhere] = useState(() => whereText(query.where));
+    const whereRead = parseWhere(where);
+    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) })] }));
+    const seconds = (label, value, change) => (_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [label, _jsx("input", { type: "number", min: 0, value: value ?? '', onChange: e => change(e.target.value === '' ? undefined : Number(e.target.value)) })] }));
+    const setNow = (change) => {
+        const now = Object.fromEntries(Object.entries({ ...query.now, ...change }).filter(([, v]) => v !== undefined));
+        set({ now: Object.keys(now).length > 0 ? now : undefined });
+    };
+    const setPivot = (change) => {
+        const pivot = { key: query.pivot?.key ?? '', value: query.pivot?.value ?? '', ...change };
+        set({ pivot: pivot.key.trim() === '' && pivot.value.trim() === '' ? undefined : pivot });
+    };
+    const open = [query.where, query.time, query.answerTime, query.fresh, query.zone, query.now, query.pivot].some(v => v !== undefined);
+    return (_jsxs("details", { className: "ub-panel__details", open: open, children: [_jsx("summary", { children: labels.dataDetails }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.dataWhere, _jsx("input", { type: "text", value: where, "aria-invalid": whereRead === null, onChange: e => {
+                            setWhere(e.target.value);
+                            const read = parseWhere(e.target.value);
+                            if (read !== null)
+                                set({ where: read });
+                        } }), whereRead === null && (_jsx("span", { role: "alert", style: ERROR_STYLE, children: labels.dataWhereInvalid }))] }), text(labels.dataTime, query.time, time => set({ time })), text(labels.dataAnswerTime, query.answerTime, answerTime => set({ answerTime })), seconds(labels.dataFresh, query.fresh, fresh => set({ fresh })), text(labels.dataZone, query.zone, zone => set({ zone })), seconds(labels.dataNowDelay, query.now?.delay, delay => setNow({ delay })), seconds(labels.dataNowStep, query.now?.step, step => setNow({ step })), text(labels.dataPivotKey, query.pivot?.key, key => setPivot({ key })), text(labels.dataPivotValue, query.pivot?.value, value => setPivot({ value }))] }));
+}
+function DataRead({ name, query, sources, look, statuses, labels, set, setField, remove }) {
+    const [field, setFieldName] = useState('');
+    const [found, setFound] = useState(null);
+    const fields = query.fields ?? {};
+    const known = sources.some(s => s.id === query.from) ? sources : [...sources, { id: query.from }];
+    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("fieldset", { className: "ub-panel__group", style: { minWidth: 0 }, children: [_jsx("legend", { children: _jsx("code", { children: name }) }), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.dataFrom, _jsx("select", { value: query.from, onChange: e => set({ from: e.target.value }), children: known.map(source => (_jsx("option", { value: source.id, children: source.label ?? source.id }, source.id))) })] }), query.ref !== undefined ? (_jsx("p", { className: "ub-panel__hint", children: labels.dataByRef })) : (_jsxs(_Fragment, { children: [text(labels.dataPath, query.path, path => set({ path })), text(labels.dataList, query.list, list => set({ list })), text(labels.dataKey, query.key, key => set({ key })), _jsx(ReadDetails, { query: query, labels: labels, set: set })] })), _jsxs("fieldset", { className: "ub-panel__group", style: { minWidth: 0 }, children: [_jsx("legend", { children: labels.dataFields }), Object.entries(fields).map(([fieldName, f]) => (_jsxs("fieldset", { className: "ub-panel__group", style: { minWidth: 0 }, children: [_jsx("legend", { children: _jsx("code", { children: fieldName }) }), text(labels.dataFieldLabel, f.label, label => setField(fieldName, { label })), text(labels.dataFieldUnit, f.unit, unit => setField(fieldName, { unit })), _jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.dataFieldDigits, _jsx("input", { type: "number", min: 0, step: 1, value: f.digits ?? '', onChange: e => setField(fieldName, { digits: e.target.value === '' ? undefined : Number(e.target.value) }) })] }), text(labels.dataFieldFormat, f.format, format => setField(fieldName, { format })), isRelativeRule(f.state) ? (_jsxs("p", { className: "ub-panel__hint", children: [labels.dataFieldStateRelative, ": ", _jsx("code", { children: JSON.stringify(f.state.relative) })] })) : (_jsx(MappingEditor, { legend: labels.dataFieldState, value: f.state, raw: true, names: statuses, onChange: state => setField(fieldName, { state }), labels: labels })), _jsx(MappingEditor, { legend: labels.dataFieldNames, value: f.names, onChange: names => setField(fieldName, { names: names === 'raw' ? undefined : names }), labels: labels }), _jsx("button", { type: "button", className: "ub-action", onClick: () => setField(fieldName, null), children: labels.dataFieldRemove.replace('{name}', fieldName) })] }, fieldName))), _jsxs("div", { className: "ub-panel__actions", style: GROUP_STYLE, children: [_jsxs("label", { className: "ub-panel__field", style: FIELD_STYLE, children: [labels.dataFieldNew, _jsx("input", { type: "text", value: field, onChange: e => setFieldName(e.target.value) })] }), _jsx("button", { type: "button", className: "ub-action", disabled: !usableField(field, fields), onClick: () => {
+                                    setField(field.trim(), {});
+                                    setFieldName('');
+                                }, children: labels.dataFieldAdd })] })] }), look && (_jsxs("div", { className: "ub-panel__actions", style: GROUP_STYLE, children: [_jsx("button", { type: "button", className: "ub-action", disabled: found === 'reading', onClick: () => {
+                            setFound('reading');
+                            look(name).then(value => setFound(fieldsIn(value)), () => setFound([]));
+                        }, children: found === 'reading' ? labels.dataLooking : labels.dataLook }), Array.isArray(found) &&
+                        (found.length === 0 ? (_jsx("p", { role: "status", children: labels.dataFoundNone })) : (_jsx("div", { role: "group", "aria-label": labels.dataFound, children: found.filter(f => !Object.hasOwn(fields, f)).map(f => (_jsx("button", { type: "button", className: "ub-action", onClick: () => setField(f, {}), children: labels.dataFoundAdd.replace('{name}', f) }, f))) })))] })), _jsx("button", { type: "button", className: "ub-action", onClick: remove, children: labels.dataRemove.replace('{name}', name) })] }));
+}

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

@@ -0,0 +1,13 @@
+import { type GridView } from '@iyulab/u-board/picture';
+import { type KindEditorProps } from './editor-parts.js';
+/**
+ * The grid of a board being edited, drawn from its picture: its items in order, laid out as the viewer lays them out,
+ * beside a panel for the selected item — its room and place, then what `parts.panel` draws for it — or, with nothing
+ * selected, what `parts.panel` draws for the board. The layout width lays the grid out as a medium or a narrow screen
+ * will, so the author sees each.
+ */
+export interface GridAuthoringProps extends KindEditorProps<GridView> {
+    /** Opens a canvas cell's canvas in the canvas editor. */
+    onEditCanvas?: (id: string) => void;
+}
+export declare function GridAuthoring({ doc, updateDoc, mode, onModeChange, documentActions, adapters, width, height, labels, clock, triggerHosting, onEditCanvas, parts }: GridAuthoringProps): import("react").JSX.Element;

package/dist/lib/authoring/GridAuthoring.js

@@ -0,0 +1,135 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react';
+import { resolveDocument } from '@iyulab/u-board/toolkit';
+import { isCanvasItem } from '@iyulab/u-board/picture';
+import { GridBoard, GRID_MEDIUM_MIN_WIDTH, GRID_WIDE_MIN_WIDTH } from '@iyulab/u-board/toolkit';
+import { AttributionLine, boardAttributions, showsExampleData } from '@iyulab/u-board/toolkit';
+import { focusPart, useTriggers } from '@iyulab/u-board/toolkit';
+import { TOOLBAR_STYLE, GROUP_STYLE } from '@iyulab/u-board/toolkit';
+import { GridItemPanel } from './GridItemPanel.js';
+import { widgetTypeName } from './widget-catalog.js';
+import { gridItemIndex, moveGridItem, removeGridItem, updateGridItem } from '../editing/grid-editing.js';
+import { ModeSwitch } from './editor-parts.js';
+const LAYOUT_MAX_WIDTH = {
+    wide: undefined,
+    medium: GRID_WIDE_MIN_WIDTH - 1,
+    narrow: GRID_MEDIUM_MIN_WIDTH - 1,
+};
+const CELL_STYLE = { position: 'relative', width: '100%', height: '100%' };
+// The item's widget is shown, not used, while editing: a press anywhere on the cell selects the item.
+const FRAME_STYLE = { width: '100%', height: '100%', pointerEvents: 'none' };
+const PICK_STYLE = {
+    position: 'absolute',
+    inset: -4,
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    borderRadius: 10,
+    background: 'transparent',
+    cursor: 'pointer',
+    padding: 0,
+};
+const PICKED_STYLE = { ...PICK_STYLE, borderColor: 'var(--_ub-brand-solid, var(--ub-brand-solid, #2563eb))' };
+// Where a dragged item would go: the item it is held over, whose place it takes.
+const DROP_STYLE = { ...PICK_STYLE, borderStyle: 'dashed', borderColor: 'var(--_ub-brand-solid, var(--ub-brand-solid, #2563eb))' };
+// Above the cell's top-right corner — the quality mark takes the top-left one.
+const TAG_STYLE = { position: 'absolute', right: 0, bottom: '100%', marginBottom: 6, whiteSpace: 'nowrap' };
+/** A widget not resolved yet — its own props, no quality — so a new or changed item shows at once. */
+const unresolved = (widget) => ({ type: widget.type, props: widget.props ?? {}, quality: {} });
+/** A canvas cell as edited now, each node showing what its widget read when it was last resolved — as a widget item
+ *  does — and its connectors as written. */
+function shownCanvas(canvas, resolved) {
+    const read = new Map(resolved?.nodes.map(node => [node.id, node.widget]));
+    return {
+        ...canvas,
+        nodes: canvas.nodes.map(node => {
+            const widget = read.get(node.id);
+            return { ...node, widget: widget && widget.type === node.widget.type ? widget : unresolved(node.widget) };
+        }),
+        connectors: canvas.connectors.map(connector => ({ ...connector, quality: {} })),
+    };
+}
+export function GridAuthoring({ doc, updateDoc, mode, onModeChange, documentActions, adapters, width, height, labels, clock, triggerHosting, onEditCanvas, parts }) {
+    const { movable } = parts;
+    const readClock = useEffectEvent(() => clock());
+    const [preview, setPreview] = useState(null);
+    const [selectedId, setSelectedId] = useState(null);
+    // An item being dragged to another place, and the item it is held over.
+    const [dragged, setDragged] = useState(null);
+    const [dropOn, setDropOn] = useState(null);
+    const [layoutWidth, setLayoutWidth] = useState('wide');
+    useEffect(() => {
+        let cancelled = false;
+        resolveDocument(doc, adapters).then(resolved => {
+            if (!cancelled)
+                setPreview({ doc: resolved, now: readClock() });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [doc, adapters]);
+    const attributions = useMemo(() => boardAttributions(doc, adapters), [doc, adapters]);
+    const example = useMemo(() => showsExampleData(doc, adapters), [doc, adapters]);
+    // The board's triggers run in View only, as a shared link runs them; in Edit a click selects.
+    const surface = useRef(null);
+    const shownDoc = mode === 'view' ? (preview?.doc ?? null) : null;
+    const focus = useCallback((node) => focusPart(shownDoc, node, () => { }, surface.current), [shownDoc]);
+    const { activatable, activate, elementEvent } = useTriggers(doc, shownDoc, { ...triggerHosting, focus });
+    // Where each item is, how much room it takes and which widget it is come from the document as edited now; only
+    // what a widget shows waits for its bindings, so a moved or resized item does not lag behind a slow source.
+    const shown = useMemo(() => {
+        const resolved = new Map(preview?.doc.items.map(item => [item.id, item]));
+        return {
+            ...doc,
+            items: doc.items.map(item => {
+                const before = resolved.get(item.id);
+                if (isCanvasItem(item))
+                    return { ...item, canvas: shownCanvas(item.canvas, before && isCanvasItem(before) ? before.canvas : undefined) };
+                const widget = before && !isCanvasItem(before) ? before.widget : undefined;
+                return { ...item, widget: widget && widget.type === item.widget.type ? widget : unresolved(item.widget) };
+            }),
+        };
+    }, [doc, preview]);
+    const selectedIndex = doc.items.findIndex(item => item.id === selectedId);
+    const selected = selectedIndex >= 0 ? doc.items[selectedIndex] : null;
+    const handleRemove = () => {
+        if (!selected)
+            return;
+        updateDoc(current => removeGridItem(current, selected.id));
+        setSelectedId(null);
+    };
+    const handleViewMode = () => {
+        onModeChange('view');
+        setSelectedId(null);
+    };
+    const followsContainer = width === undefined || height === undefined;
+    const paneStyle = followsContainer ? { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' } : { display: 'flex', flexDirection: 'column' };
+    const surfaceStyle = { flex: 1, minHeight: 0, width, height, maxWidth: mode === 'edit' ? LAYOUT_MAX_WIDTH[layoutWidth] : undefined };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ub-authoring__toolbar", style: TOOLBAR_STYLE, children: [documentActions, _jsx(ModeSwitch, { mode: mode, onEdit: () => onModeChange('edit'), onView: handleViewMode, labels: labels }), mode === 'edit' && (_jsx("div", { className: "ub-authoring__group ub-authoring__layout-width", style: GROUP_STYLE, role: "group", "aria-label": labels.layoutWidth, children: ['wide', 'medium', 'narrow'].map(choice => (_jsx("button", { type: "button", className: "ub-action", "aria-pressed": layoutWidth === choice, onClick: () => setLayoutWidth(choice), children: choice === 'wide' ? labels.layoutWide : choice === 'medium' ? labels.layoutMedium : labels.layoutNarrow }, choice))) }))] }), _jsxs("div", { className: "ub-authoring__panes", style: { display: 'flex', gap: 'var(--ub-space-4, 16px)', flex: 1, minHeight: 0 }, children: [_jsxs("div", { className: "ub-authoring__pane", style: paneStyle, children: [mode === 'edit' ? (_jsx("div", { className: "ub-authoring__surface", "data-appearance": doc.appearance ?? 'light', style: surfaceStyle, children: _jsx(GridBoard, { doc: shown, ariaLabel: labels.editorRegion, qualityText: labels.qualityText, now: preview?.now ?? 0, locale: labels.locale, labels: labels, canvasControls: false, renderCell: (item, frame, index) => {
+                                        const name = isCanvasItem(item) ? labels.canvasCell : widgetTypeName(item.widget.type, labels.locale);
+                                        const picked = item.id === selectedId;
+                                        return (_jsxs("div", { className: "ub-authoring__node", style: CELL_STYLE, children: [_jsx("div", { style: FRAME_STYLE, children: frame }), _jsx("span", { className: "ub-authoring__node-tag", style: TAG_STYLE, children: name }), _jsx("button", { type: "button", className: "ub-authoring__pick", "aria-label": `${index + 1}. ${name}`, "aria-pressed": picked, style: dropOn === item.id ? DROP_STYLE : picked ? PICKED_STYLE : PICK_STYLE, onClick: () => setSelectedId(picked ? null : item.id), draggable: movable(item.id), onDragStart: e => {
+                                                        e.dataTransfer.effectAllowed = 'move';
+                                                        e.dataTransfer.setData('text/plain', item.id);
+                                                        setDragged(item.id);
+                                                    }, onDragOver: e => {
+                                                        if (!dragged || dragged === item.id || !movable(item.id))
+                                                            return;
+                                                        e.preventDefault();
+                                                        e.dataTransfer.dropEffect = 'move';
+                                                        setDropOn(item.id);
+                                                    }, onDragLeave: () => setDropOn(on => (on === item.id ? null : on)), onDrop: e => {
+                                                        e.preventDefault();
+                                                        if (dragged) {
+                                                            const moving = dragged;
+                                                            updateDoc(current => moveGridItem(current, moving, gridItemIndex(current, item.id)));
+                                                            setSelectedId(moving);
+                                                        }
+                                                        setDragged(null);
+                                                        setDropOn(null);
+                                                    }, onDragEnd: () => {
+                                                        setDragged(null);
+                                                        setDropOn(null);
+                                                    } })] }));
+                                    } }) })) : preview ? (_jsx("div", { ref: surface, className: "ub-authoring__surface", "data-appearance": doc.appearance ?? 'light', style: surfaceStyle, children: _jsx(GridBoard, { doc: preview.doc, ariaLabel: labels.previewRegion, qualityText: labels.qualityText, now: preview.now, locale: labels.locale, labels: labels, activatable: activatable, onItemActivate: activate, onElementEvent: elementEvent }) })) : (_jsx("p", { className: "ub-authoring__status", children: labels.resolving })), mode === 'view' && preview && _jsx(AttributionLine, { attributions: attributions, example: example, labels: labels })] }), _jsx("div", { className: "ub-authoring__panel", style: { flex: '0 0 var(--ub-panel-width, 320px)', minWidth: 0, overflowY: 'auto' }, children: selected ? (_jsxs(_Fragment, { children: [movable(selected.id) && (_jsx(GridItemPanel, { item: selected, isFirst: selectedIndex === 0, isLast: selectedIndex === doc.items.length - 1, onChange: change => updateDoc(current => updateGridItem(current, selected.id, change)), onMove: by => updateDoc(current => moveGridItem(current, selected.id, gridItemIndex(current, selected.id) + by)), onRemove: handleRemove, spanOnly: true, labels: labels })), (parts.panel(selected.id) ?? _jsx("p", { className: "ub-panel__hint", children: labels.layoutOnlyHint })), isCanvasItem(selected) && onEditCanvas && (_jsx("button", { type: "button", className: "ub-action ub-action--primary", onClick: () => onEditCanvas(selected.id), children: labels.editCanvas }))] })) : ((parts.panel(null) ?? _jsx("p", { className: "ub-panel__hint", children: labels.layoutOnlyHint }))) })] })] }));
+}

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

@@ -0,0 +1,22 @@
+import { type DesignerLabels } from '../labels.js';
+import type { GridItem } from '@iyulab/u-board/picture';
+export interface GridItemPanelProps {
+    item: GridItem;
+    /** Whether it can move earlier or later — not at the start or the end of the order. */
+    isFirst: boolean;
+    isLast: boolean;
+    onChange: (change: Partial<Pick<GridItem, 'span' | 'spanMedium' | 'rowSpan' | 'height'>>) => void;
+    onMove: (by: -1 | 1) => void;
+    /** Left out, there is no Duplicate (an editor that adds nothing). */
+    onDuplicate?: () => void;
+    onRemove: () => void;
+    /** Only the columns it spans — what a board lays out. */
+    spanOnly?: boolean;
+    labels?: DesignerLabels;
+}
+/**
+ * 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 declare function GridItemPanel({ item, isFirst, isLast, onChange, onMove, onDuplicate, onRemove, spanOnly, labels }: GridItemPanelProps): import("react").JSX.Element;