@iyulab/u-board-designer 0.1.0 → 0.2.0

package/dist/lib/authoring/CanvasAuthoring.js

@@ -12,9 +12,17 @@ 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 } 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` +
@@ -141,7 +149,7 @@ export function CanvasAuthoring({ doc, updateDoc, mode, onModeChange, documentAc
     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 }) })] }), _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 }))) })] })] }));
+    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.

package/dist/lib/authoring/DataPanel.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { FIELD_STYLE } from './field-style.js';
 import { DEFAULT_DESIGNER_LABELS } from '../labels.js';
 import { useState } from 'react';
-import { ERROR_STYLE, GROUP_STYLE } from '@iyulab/u-board/toolkit';
+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());
@@ -87,7 +87,7 @@ function DataRead({ name, query, sources, look, statuses, labels, set, setField,
     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 })), _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: () => {
+    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: () => {

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

@@ -4,7 +4,7 @@
 // else of the board changes.
 import { DEFAULT_NODE_HEIGHT, DEFAULT_NODE_WIDTH } from '@iyulab/u-board/toolkit';
 import { GRID_DEFAULT_SPAN } from '@iyulab/u-board/picture';
-import { isDataPlace } from '@iyulab/u-board/toolkit';
+import { isDataPlace, isFlowPlace } from '@iyulab/u-board/toolkit';
 /**
  * Whether the editor lays this board out: a canvas, or a grid — of parts, canvases, and grids of parts and canvases in
  * its cells (one level, as the picture draws them). A grid in a cell is laid out on its own (`cellBoard`): the picture
@@ -155,8 +155,8 @@ export function placesItself(board, id) {
     const placed = board.layout.place[part];
     if (placed === undefined || rest.length > 0)
         return false;
-    // Items placed by their own fields are not dragged: their fields say where they are.
-    return key === undefined ? Array.isArray(placed) : board.parts[part]?.each !== undefined && !Array.isArray(placed) && !isDataPlace(placed);
+    // Items placed by their own fields, or by a rule, are not dragged: the fields and the rule say where they are.
+    return key === undefined ? Array.isArray(placed) : board.parts[part]?.each !== undefined && !Array.isArray(placed) && !isDataPlace(placed) && !isFlowPlace(placed);
 }
 /**
  * The board with its canvas layout as the picture `after` shows it, the picture having been `before`: each part (or

package/dist/lib/authoring/scene-mapping.js

@@ -1,5 +1,5 @@
 import { Scene } from '@canvas-kit/core';
-import { sizedNodes } from '@iyulab/u-board/toolkit';
+import { mayLoadBackground, sizedNodes } from '@iyulab/u-board/toolkit';
 import { decorationObjects } from '@iyulab/u-board/toolkit';
 import { captionObjects, connectorObjects } from '@iyulab/u-board/toolkit';
 /** The stroke a rect decoration is drawn with in the designer when the document does not set its own — distinct
@@ -37,7 +37,8 @@ export function documentToScene(doc, movable, selectable) {
         : [...doc.nodes, ...doc.connectors, ...(doc.decorations ?? [])]).map(part => part.id));
     // A part not edited here, and every piece of it: drawn, never selected or moved.
     const add = (object) => scene.add(object.id && !own.has(partOf(object.id)) ? { ...object, locked: true } : object);
-    if (doc.background.image) {
+    // A picture outside the origins the host allowed is not requested here either: the board is drawn on an empty background.
+    if (doc.background.image && mayLoadBackground(doc.background.image.src)) {
         add({
             type: 'image',
             x: 0,

package/dist/lib/board/rulebook.d.ts

@@ -3,3 +3,5 @@ import { type Board } from '@iyulab/u-board/domain';
 export declare const RULEBOOK_EXAMPLE: Board;
 /** The rulebook, as Markdown. */
 export declare function boardRulebook(): string;
+/** The options every `chart.*` kind takes — the data columns and the like — said once under the table, not on each chart's row. */
+export declare function sharedChartOptions(): string[];

package/dist/lib/board/rulebook.js

@@ -49,14 +49,15 @@ ${['board', 'statuses', 'symbols', 'elements', 'data', 'presets', 'parts', 'layo
 A data read asks an HTTP connector a \`path\` — the usual read. Only an adapter the host names itself is given its own
 \`ref\` instead (one item, its \`fields\` only, never with \`path\`).
 Parts name a read (\`"pumps"\`, the whole list) or one item of it (\`"pumps[P1]"\`, by its \`key\`). Data stays raw —
-names, units, places and statuses live in \`fields\`, never in the data.
+names, units, places and statuses live in \`fields\`, never in the data. A field's \`at\` points into one item, so with a \`list\` what sits beside it (a count, a total) is out of reach: read that
+with a read of its own and no \`list\` — \`{ from: 'plant', path: '/plant/pumps?limit=1', fields: { total: { at: '/total' } } }\`. With a \`list\`, \`time\` is a field of each item (an item lacking it has no value); the answer's own is \`answerTime\`.
 
 ${keys('query')}
 
 A field is \`{ at?, label?, unit?, digits?, format?, names?, state? }\`; it reads \`/<its name>\` of the item unless \`at\`
 says where. \`state\` says how the value is doing, as a status: \`"raw"\` (the value is a status name), a map
 (\`{ "trip": "down", "*": "off" }\`, \`*\` for the rest) or bands (\`["ok", 1, "warn", 5, "alarm"]\` — the status below the
-first number, then from each number up). \`names\` takes the same two forms for the words a value is shown as.`,
+first number, then from each number up); a time's \`state\` can follow the clock: \`{ "relative": ["past", -2700, "now", 1, "next", 2700, "later"] }\` — bands over the seconds from now to it (negative: gone by). \`names\` takes the same two forms for what a value is shown as (a word, a count of marks). A field can also be computed from the items of the list: \`derive: { op: count | sum | min | max | avg, field?, where? }\` — a part that reads the list (no item) shows it, a \`state\` on it can raise a status. A field that holds a list of objects says what its items' fields mean with \`items\`.`,
         `## statuses — how each status looks
 
 Tones (always there): ${code(TONES)}. A board names its own statuses, each with a \`tone\`, a \`label\`, and optionally a
@@ -65,30 +66,32 @@ label, glyph. Never write colours for statuses.`,
         `## parts — what, of what, which fields
 
 \`{ "as": <kind>, "of": "<data>" | "<data>[<key>]", "show": "<field>" | ["<field>", …], "title"?, …options }\`. \`{{field}}\`
-in a title or a label reads a field of \`of\`; \`{{key}}\` is the item's key. \`presets\` hold shared settings a part takes
+in a title or a label reads a field of \`of\` (a status card's \`subtitle\` · \`note\` too; header \`kicker\` · \`subtitle\` are fixed text, \`clock\` is \`true\`); \`{{key}}\` is the item's key. \`presets\` hold shared settings a part takes
 with \`use\`; \`each: "<data>"\` makes one part per item (ids \`<part>/<key>\`) — it takes no \`of\`, and is placed once. A \`group\` is several parts on a small
 canvas of their own — its parts and links read the group's \`of\` unless they name their own.
 
 The board's own options take fields of what the part reads: a \`status-card\`'s \`meter\` is \`"<field>"\` or
-\`{ "field", "min"?, "max"?, "form"?: "bar" | "ring" }\`, its \`state\` (and a \`stat-list\`'s) the field whose status colours
+\`{ "field", "min"?, "max"? (a number, or a field of the item), "form"?: "bar" | "ring" }\`, its \`state\` (and a \`stat-list\`'s) the field whose status colours
 it, a \`stat\`'s \`trend\` a field holding its recent values, a \`list\`'s \`primary\` · \`secondary\` · \`trailing\` ·
-\`badge\` · \`time\` fields of each row. Any other option is the widget's own — only those listed.
+\`badge\` · \`time\` fields of each row. A part that reads one item takes \`highlight: "<boolean field>"\`: a ring while it is true, apart from the status. Any other option is the widget's own — only those listed.
 
 | kind | shows | reads data | options |
 |---|---|---|---|
-${PART_KINDS.map(kindRow).join('\n')}`,
+${PART_KINDS.map(kindRow).join('\n')}
+
+Every \`chart.*\` also takes ${code(sharedChartOptions())}.`,
         `## layout — where, per view kind
 
 - canvas: \`{ "kind": "canvas", "size": [w, h], "background"?, "place": { "<part>": [x, y, w?, h?] }, "shapes"?, "links"? }\` —
   an \`each\` part is placed item by item inside its own entry (\`{ "P1": [x, y, w, h], … }\`), or — when the items change and cannot be
   named — by their own fields: \`"quake": { "at": ["lon", "lat"], "frame": [-180, 90, 180, -90], "size": [14, 14] }\` puts each item
   at the point its two fields say; \`frame\` is the values at the canvas's left, top, right and bottom edges (the canvas's own
-  coordinates when left out), \`size\` the box centred on the point (give one for a marker). An item with no number in a field, or
-  outside the frame, is not drawn — \`look\` counts them. The data needs a \`key\`; the projection is linear (right for a plan or an
-  equirectangular map). A part is placed one way, not both. A shape is a \`box\` (with \`label\`), a \`text\` at a point,
+  coordinates when left out), \`size\` the box centred on the point (give one for a marker: a dot alone is [14, 14]; one with a name or note draws
+  it right of the dot — about [150, 40] — and it is the box, not the dot, that is centred). An item with no number in a field, or
+  outside the frame, is not drawn — \`look\` counts them. The data needs a \`key\`; the projection is linear (right for a plan or a flat map). A part is placed one way, not both. Or by a rule: \`"tile": { "flow": { "cell": [w, h], "columns": n, "gap"?, "at"? }, "by"?: "<field>", "boxes"?: { "columns": n, "label"?: "{{key}}" } }\` — items flow in columns, or with \`by\` are grouped into labelled boxes (\`flow.pad\` [sides, top] kept clear inside). A shape is a \`box\` (with \`label\`), a \`text\` at a point,
   a \`line\` through points or a \`path\` (absolute M · L · C · Q · Z).
 - grid: \`{ "kind": "grid", "items": ["<part>", ["<part>", span], { "grid": [ … ], "span": n }, { "canvas": { … }, "span": n }] }\` —
-  12 columns; a grid inside an item stacks what it holds.
+  12 columns; an \`each\` part's items are cells (\`["pumps", 2]\`: six to a row); a grid in an item stacks what it holds.
 
 A link joins two parts:
 
@@ -101,8 +104,10 @@ Use a built-in whenever one shows the thing — a title, a status and a few valu
 — every \`{{hole}}\` is a declared prop (\`number\` · \`string\` · \`boolean\` · \`list\` · \`object\`). A part places it with
 \`"as": "element", "element": "tank"\`, fixed \`props\` and \`bind\` (\`{ "level": "<field>", "tone": "<field>.tone" }\`). What markup cannot draw runs as a
 \`"script"\` in place of the template — in a sandboxed frame with no network, its props through \`ub.onProps\`, \`"resources"\` the
-https:// origins it loads from. The look is \`board.skin\` — fonts, a
-palette and a frame (${code(FRAMES)}) — once for the board; parts never set fonts or colours.`,
+https:// origins it loads from. The look is \`board.skin\`, once for the board; parts never set fonts or colours:
+\`{ "palette"?: { "paper", "ink", "muted", "rule" }, "font"? · "display"? · "mono"? (font stacks), "frame"?, "radius"? (px), "shadow"?: "none" | "soft" | "hard" }\`
+— a frame is ${code(FRAMES)}; paper is the ground the widgets sit on, ink their text, muted the quieter text, rule their lines; an element's CSS reads them as
+\`var(--u-widget-bg)\` · \`var(--u-widget-text)\` · \`var(--u-widget-text-secondary)\` · \`var(--u-widget-border)\`; a background picture follows the skin when it writes a colour as \`var(--u-widget-bg, #f6f4ef)\` (its own colour is the fallback).`,
         `## triggers — what the board does
 
 A trigger is \`{ "on", "when"?, "do": [ … ] }\`. \`on\` a part clicked (\`{ "event": "click", "part" }\`), an event its element
@@ -128,9 +133,16 @@ ${JSON.stringify(RULEBOOK_EXAMPLE, null, 1)}
 \`\`\``,
     ].join('\n\n');
 }
+const optionsOf = (k) => [...k.own, ...k.options];
+/** The options every `chart.*` kind takes — the data columns and the like — said once under the table, not on each chart's row. */
+export function sharedChartOptions() {
+    const charts = PART_KINDS.filter(k => k.kind.startsWith('chart.'));
+    return charts.length === 0 ? [] : optionsOf(charts[0]).filter(option => charts.every(k => optionsOf(k).includes(option)));
+}
 /** A kind's row: its name, what it shows, whether it reads data, and its options — the board's own, then the widget's. */
 function kindRow(k) {
     const reads = { needs: 'yes', may: 'may', no: 'no' }[k.of];
-    const options = [...k.own, ...k.options];
+    const shared = k.kind.startsWith('chart.') ? sharedChartOptions() : [];
+    const options = optionsOf(k).filter(option => !shared.includes(option));
     return `| \`${k.kind}\` | ${k.shows.replace(/\|/g, '/')} | ${reads} | ${options.length > 0 ? options.map(o => `\`${o}\``).join(' ') : '—'} |`;
 }

package/dist/lib/labels-ko.js

@@ -131,6 +131,7 @@ export const KO_AUTHORING_LABELS = {
     dataFieldFormat: '서식',
     dataFieldRemove: '필드 {name} 지우기',
     dataFieldState: '상태',
+    dataFieldStateRelative: '상태가 시계를 따름(지금부터 그 시각까지의 초에 대한 구간) — 보드 JSON에서 고친다',
     dataFieldNames: '낱말',
     mappingNone: '(없음)',
     mappingRaw: '값이 곧 상태 이름',

package/dist/lib/labels.d.ts

@@ -184,6 +184,8 @@ export interface AuthoringLabels {
     dataFieldRemove: string;
     /** A field's status — how its value is doing — and the words it is shown as, as the data panel sets them. */
     dataFieldState: string;
+    /** A status that follows the clock (`{ relative: bands }`) — shown as it is; it is written in the board's JSON. */
+    dataFieldStateRelative: string;
     dataFieldNames: string;
     mappingNone: string;
     mappingRaw: string;

package/dist/lib/labels.js

@@ -131,6 +131,7 @@ export const DEFAULT_AUTHORING_LABELS = {
     dataFieldFormat: 'Format',
     dataFieldRemove: 'Remove field {name}',
     dataFieldState: 'Status',
+    dataFieldStateRelative: 'Status follows the clock (bands over the seconds from now) — written in the board’s JSON',
     dataFieldNames: 'Words',
     mappingNone: '(none)',
     mappingRaw: 'The value is a status name',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/u-board-designer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "The authoring tool for U-Board boards, and the check and rulebook an assistant writes by",
   "type": "module",
   "license": "AGPL-3.0-or-later",
@@ -47,8 +47,8 @@
     "@canvas-kit/core": "^0.8.0",
     "@canvas-kit/designer": "^0.10.0",
     "@canvas-kit/viewer": "^0.6.1",
-    "@iyulab/u-board": "^0.36.0",
-    "@iyulab/u-widgets": "^0.42.0"
+    "@iyulab/u-board": "^0.39.0",
+    "@iyulab/u-widgets": "^0.45.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.62.1",