@things-factory/figure-ui 10.1.223 → 10.1.224

package/dist-client/modeller/figure-data-panel.js

@@ -4,34 +4,42 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { FIGURE_UNITS, figureDataExample, inferFigureDataSchema } from '@hatiolab/figure-model';
-import { accessorOfRow, behaviorKeyOf, behaviorsOf, bindingDraftOf, domainOf, endlessJointsOf, fieldAt, fieldOfKind, fitsField, partsOf, portDraftOf, rotationStepsOf, sampleOf, schemaRowsOf, schemaWithField, schemaWithFieldReplaced, schemaWithoutField } from './data-interface.js';
+import { accessorOfRow, behaviorKeyOf, behaviorsOf, bindingDraftOf, domainOf, endlessJointsOf, fieldAt, fieldOfKind, fitsField, freeCodeOf, legendRoleOf, methodOf, methodsOf, partsOf, rotationStepsOf, sampleOf, schemaRowsOf, schemaWithField, schemaWithFieldReplaced, schemaWithoutField, schemaFollowingCodes, stateInputsOf, tableColumnsOf, tableDraftOf, tableWithKeys, tableWithLook, tableWithTargets } from './data-interface.js';
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
+import { figureBindingsTakenOver, figureCapabilityDescriptorOf } from '@hatiolab/things-scene';
+import { consumerDescriptors } from './consumer-capabilities.js';
 import { HelpToggles } from './help.js';
 const KINDS = ['number', 'boolean', 'text', 'object', 'list'];
 /**
  * 데이터 -- the data a site sends this figure, in its own names, and what each value moves (ADR-0051 §8, data binding
  * design decision 4). The schema is free: fields the author names, a tree of objects and lists. A binding reads one place
- * of it and moves one thing the figure can do -- a control, a colour, a motion group's clip, speed or pause, a status
- * port, its position, the items in its places -- by the board's rules (value, map, range, scale). Every change is one
- * part edit, and whether it holds is the kernel's check.
+ * of it and shows it in the figure (ADR-0166): as it is or scaled, it moves one thing -- a control, a colour, a motion
+ * group's clip, speed or pause, its position, the items in its places; by a code table or a range table, each value's
+ * look goes to several targets at once -- parts' colour and effect, controls' values, a motion group. The field's kind
+ * says which methods there are. Every change is one part edit, and whether it holds is the kernel's check.
  *
  * The sample is not saved: data tried here, read the one way a placed figure reads it, and -- in the preview -- the figure
- * running on it (`data-sample`).
+ * running on it (`data-sample`); a sample legend pasted for a table's role shows it as a board's legend would
+ * (`legend-sample`).
  */
 let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
         this.help = new HelpToggles(this);
         this.locked = false;
+        /** The part chosen in the modeller, put among a table's parts by one button. */
+        this.selected = '';
         /** The schema row chosen, by its path; its field is edited under it. */
         this.chosen = '';
         this.adding = { name: '', kind: 'number' };
         /** A site's data pasted to start the schema from; nothing is kept until the author says so. */
         this.pasted = '';
-        this.connecting = { path: '', behavior: '' };
+        /** A binding as it is being added: the field (or a new field's name), the method, the behavior or the table's targets. */
+        this.connecting = { path: '', name: '', method: '', behavior: '', parts: [], inputs: [], group: '' };
         /** The binding opened to edit its rule, by id. */
         this.opened = '';
-        this.porting = '';
+        /** Sample legends by role, as JSON typed; not saved. */
+        this.legendSample = {};
         /** The rotation card as filled in: the joint, and the fields for on, speed (and its most rpm) and direction. */
         this.rotating = { input: '', on: '', speed: '', max: 0, direction: '', forward: '', reverse: '' };
         /** The sample as typed, JSON; empty until edited, the schema's example shown until then. */
@@ -116,6 +124,17 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         gap: 4px 6px;
         align-items: center;
       }
+      div[codes] {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 30px;
+        gap: 4px 6px;
+        align-items: center;
+      }
+      div[codes] button[act] {
+        width: 30px;
+        margin: 0;
+        padding: 0;
+      }
       div[ranges] {
         display: grid;
         grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) 30px;
@@ -127,6 +146,54 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         margin: 0;
         padding: 0;
       }
+      /* A table's rows: the key (a code, or from and to), a cell per column, and a remove button. */
+      div[looks] {
+        display: grid;
+        gap: 4px 6px;
+        align-items: center;
+        overflow-x: auto;
+      }
+      div[looks] > small {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[looks] input,
+      div[looks] select {
+        min-width: 0;
+        width: 100%;
+        box-sizing: border-box;
+      }
+      div[looks] button[act] {
+        width: 30px;
+        margin: 0;
+        padding: 0;
+      }
+      /* A colour and the button that clears it, on one line at the height of the cells beside it. */
+      div[looks] span[colour] {
+        display: flex;
+        gap: 2px;
+        align-items: center;
+        min-width: 0;
+      }
+      div[looks] span[colour] input[type='color'] {
+        flex: 1;
+        height: var(--figure-control-height);
+        padding: 0 2px;
+      }
+      div[looks] span[colour] button[act] {
+        flex: none;
+        width: 24px;
+      }
+      div[chips] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px 10px;
+        align-items: center;
+      }
+      div[chips] label {
+        display: inline-flex;
+        gap: 4px;
+        align-items: center;
+      }
       textarea {
         width: 100%;
         min-height: 96px;
@@ -151,9 +218,19 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
             return nothing;
         const rows = schemaRowsOf(asset);
         return html `
-      ${this.renderSchema(asset, rows)} ${this.renderBindings(asset, rows)} ${this.renderPorts(asset)} ${rows.length ? this.renderSample(asset) : nothing}
+      ${this.renderCapabilityData(asset)} ${this.renderSchema(asset, rows)} ${this.renderBindings(asset, rows)} ${rows.length ? this.renderSample(asset) : nothing}
     `;
     }
+    /** The data a product's capability the figure wears reads itself (ADR-0167 14): said, read only. */
+    renderCapabilityData(asset) {
+        const names = asset.document.capabilities.names ?? [];
+        const reading = consumerDescriptors().filter(d => names.includes(d.name) && d.data?.length);
+        if (!reading.length)
+            return nothing;
+        return html `<section>
+      ${reading.map(d => html `<p hint>${i18next.t('figure.text.data-capability-fields', { name: d.label, fields: d.data.map(f => f.name).join(', ') })}</p>`)}
+    </section>`;
+    }
     /* ---------------------------------------------------------------- the schema */
     renderSchema(asset, rows) {
         const schema = asset.dataInterface?.schema ?? [];
@@ -346,141 +423,309 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         const name = b.kind === 'pose' ? i18next.t('figure.label.data-axis-' + b.axis) : (choice?.name ?? key.slice(key.indexOf(':') + 1));
         return i18next.t('figure.label.data-behavior-' + b.kind, { name });
     }
+    /** What a table shows on, as one line: its parts, the controls it sets, its motion group. */
+    targetsName(asset, b) {
+        const inputs = stateInputsOf(asset);
+        const group = (asset.motionGroups ?? []).find(g => g.id === b.targets.group);
+        return [
+            ...(b.targets.parts ?? []),
+            ...(b.targets.inputs ?? []).map(id => inputs.find(i => i.id === id)?.label ?? id),
+            ...(group ? [group.label] : [])
+        ].join(', ');
+    }
     renderBindings(asset, rows) {
         const bindings = asset.dataInterface?.bindings ?? [];
         const choices = behaviorsOf(asset);
+        const resting = figureBindingsTakenOver(asset);
         return html `<section>
       <h3>${i18next.t('figure.label.data-bindings')}${this.help.button('figure.text.data-bindings-explained')}</h3>
       ${this.help.hint('figure.text.data-bindings-explained')}
-      ${bindings.map(b => this.renderBinding(asset, choices, b))}
-      ${rows.length ? this.renderAddBinding(asset, rows, choices) : html `<p hint>${i18next.t('figure.text.data-no-fields')}</p>`}
+      ${bindings.map(b => this.renderBinding(asset, choices, b, resting))}
+      ${this.renderAddBinding(asset, rows, choices)}
       ${this.renderRotation(asset, rows)}
     </section>`;
     }
-    renderBinding(asset, choices, b) {
+    renderBinding(asset, choices, b, resting) {
         const open = this.opened === b.id;
-        const set = (patch) => {
-            const next = { ...b, ...patch };
-            if (patch.param === undefined && 'param' in patch)
-                delete next.param;
-            this.edit({ kind: 'set-data-binding', binding: next });
-        };
+        const set = (next) => this.edit({ kind: 'set-data-binding', binding: next });
+        const what = b.rule === 'table' ? this.targetsName(asset, b) : this.behaviorName(asset, choices, b.behavior);
         return html `<section item>
       <div head>
         <button line aria-expanded=${open ? 'true' : 'false'} @click=${() => (this.opened = open ? '' : b.id)}>
-          <strong>${b.accessor}</strong> → ${this.behaviorName(asset, choices, b.behavior)} <small>· ${i18next.t('figure.label.data-rule-' + b.rule)}</small>
+          <strong>${b.label ?? b.accessor}</strong> → ${what} <small>· ${i18next.t('figure.label.data-method-' + methodOf(b))}</small>
         </button>
         <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-binding')} @click=${() => this.edit({ kind: 'remove-data-binding', id: b.id })}>
           <md-icon>close</md-icon>
         </button>
       </div>
-      ${open ? this.renderBindingDetail(asset, b, set) : nothing}
+      ${resting.filter(r => r.id === b.id).map(r => this.renderResting(r))}
+      ${open ? (b.rule === 'table' ? this.renderTable(asset, b, set) : this.renderValueDetail(asset, b, set)) : nothing}
     </section>`;
     }
-    renderBindingDetail(asset, b, set) {
+    /**
+     * A binding a product's capability takes over where the product registers it (ADR-0167 17): there it rests, whole or for
+     * the targets named; elsewhere (a board without the product) it works.
+     */
+    renderResting(r) {
+        const where = r.capability.split('.')[0];
+        const name = figureCapabilityDescriptorOf(r.capability)?.label ?? r.capability;
+        const targets = [...r.parts, ...r.inputs].join(', ');
+        return html `<p hint>${r.whole ? i18next.t('figure.text.data-binding-rests', { where, name }) : i18next.t('figure.text.data-binding-rests-targets', { where, name, targets })}</p>`;
+    }
+    renderValueDetail(asset, b, set) {
         const node = fieldAt(asset.dataInterface?.schema ?? [], b.accessor.replace(/\[\d+\]/g, '[]'));
         const value = (e) => e.target.value;
         const behavior = b.behavior;
+        const patch = (p) => {
+            const next = { ...b, ...p };
+            if ('param' in p && p.param === undefined)
+                delete next.param;
+            set(next);
+        };
         if (behavior.kind === 'items')
-            return this.renderItemFields(asset, b, node, set);
+            return this.renderItemFields(asset, b, node, patch);
         return html `<div form>
-        <span>${i18next.t('figure.label.data-rule')}</span>
-        <select ?disabled=${this.locked} @change=${(e) => set({ rule: value(e), param: firstParamOf(value(e), node, b) })}>
-          ${['value', 'map', 'range', 'scale'].map(r => html `<option value=${r} ?selected=${r === b.rule}>${i18next.t('figure.label.data-rule-' + r)}</option>`)}
-        </select>
-        ${behavior.kind === 'state'
+      <span>${i18next.t('figure.label.data-method')}</span>
+      ${node?.kind === 'number'
+            ? html `<select ?disabled=${this.locked} @change=${(e) => patch({ rule: value(e), param: value(e) === 'scale' ? { scale: 1, offset: 0 } : undefined })}>
+            ${['value', 'scale'].map(r => html `<option value=${r} ?selected=${r === b.rule}>${i18next.t('figure.label.data-method-' + r)}</option>`)}
+          </select>`
+            : html `<span>${i18next.t('figure.label.data-method-value')}</span>`}
+      ${behavior.kind === 'state'
             ? html `<span>${i18next.t('figure.label.data-source-mode')}</span>
-              <select ?disabled=${this.locked} @change=${(e) => set({ behavior: { ...behavior, sourceMode: value(e) } })}>
-                ${['observed', 'commanded'].map(m => html `<option value=${m} ?selected=${behavior.sourceMode === m}>${i18next.t('figure.label.data-' + m)}</option>`)}
-              </select>`
+            <select ?disabled=${this.locked} @change=${(e) => patch({ behavior: { ...behavior, sourceMode: value(e) } })}>
+              ${['observed', 'commanded'].map(m => html `<option value=${m} ?selected=${behavior.sourceMode === m}>${i18next.t('figure.label.data-' + m)}</option>`)}
+            </select>`
             : nothing}
-        ${behavior.kind === 'pose'
+      ${behavior.kind === 'pose'
             ? html `<span>${i18next.t('figure.label.data-seconds')}</span>
-              <input type="number" min="0" step="any" .value=${String(behavior.seconds ?? 0)} ?disabled=${this.locked} @change=${(e) => set({ behavior: { ...behavior, seconds: e.target.valueAsNumber || 0 } })} />`
+            <input type="number" min="0" step="any" .value=${String(behavior.seconds ?? 0)} ?disabled=${this.locked} @change=${(e) => patch({ behavior: { ...behavior, seconds: e.target.valueAsNumber || 0 } })} />`
             : nothing}
-        ${b.rule === 'scale'
+      ${b.rule === 'scale'
             ? html `<span>${i18next.t('figure.label.data-scale')}</span>
-              <input type="number" step="any" .value=${String(b.param?.scale ?? 1)} ?disabled=${this.locked} @change=${(e) => set({ param: { ...b.param, scale: e.target.valueAsNumber } })} />
-              <span>${i18next.t('figure.label.data-offset')}</span>
-              <input type="number" step="any" .value=${String(b.param?.offset ?? 0)} ?disabled=${this.locked} @change=${(e) => set({ param: { ...b.param, offset: e.target.valueAsNumber } })} />`
+            <input type="number" step="any" .value=${String(b.param?.scale ?? 1)} ?disabled=${this.locked} @change=${(e) => patch({ param: { ...b.param, scale: e.target.valueAsNumber } })} />
+            <span>${i18next.t('figure.label.data-offset')}</span>
+            <input type="number" step="any" .value=${String(b.param?.offset ?? 0)} ?disabled=${this.locked} @change=${(e) => patch({ param: { ...b.param, offset: e.target.valueAsNumber } })} />`
             : nothing}
+    </div>`;
+    }
+    /**
+     * A table (ADR-0166 10): what it shows on -- parts, controls, a motion group -- its rows, a code or an interval each
+     * with a cell per column, the look of every other value, and whether a board may swap it for a legend.
+     */
+    renderTable(asset, b, set) {
+        const value = (e) => e.target.value;
+        const parts = partsOf(asset);
+        const inputs = stateInputsOf(asset);
+        const groups = asset.motionGroups ?? [];
+        const targets = b.targets;
+        const toggle = (list, id, on) => (on ? [...(list ?? []), id] : (list ?? []).filter(x => x !== id));
+        const retarget = (t) => set(tableWithTargets(b, t));
+        return html `<div form>
+        <span>${i18next.t('figure.label.data-label')}</span>
+        <input .value=${b.label ?? ''} placeholder=${b.accessor} ?disabled=${this.locked} @change=${(e) => {
+            const label = value(e).trim();
+            const next = { ...b, label };
+            if (!label)
+                delete next.label;
+            set(next);
+        }} />
       </div>
-      ${b.rule === 'map' ? this.renderCases(asset, b, node, set) : b.rule === 'range' ? this.renderRanges(asset, b, set) : nothing}`;
+      ${this.renderTargets(parts, inputs, groups, targets, {
+            part: (id, on) => retarget({ ...targets, parts: toggle(targets.parts, id, on) }),
+            input: (id, on) => retarget({ ...targets, inputs: toggle(targets.inputs, id, on) }),
+            group: id => retarget({ ...targets, group: id || undefined })
+        })}
+      ${b.lookup === 'code' ? this.renderCodeRows(asset, b, set) : this.renderRangeRows(asset, b, set)}
+      <label toggle>
+        <input type="checkbox" .checked=${!!b.legend} ?disabled=${this.locked} @change=${(e) => {
+            const next = { ...b };
+            if (e.target.checked)
+                next.legend = { role: legendRoleOf(b.id) };
+            else
+                delete next.legend;
+            set(next);
+        }} />
+        ${i18next.t('figure.label.data-legend-swappable')}
+      </label>
+      ${b.legend
+            ? html `<div form>
+            <span>${i18next.t('figure.label.data-legend-role')}</span>
+            <input .value=${b.legend.role} ?disabled=${this.locked} @change=${(e) => set({ ...b, legend: { role: value(e).trim() } })} />
+          </div>
+          <p hint>${i18next.t('figure.text.data-legend-explained')}</p>`
+            : nothing}`;
     }
-    /** A result editor fitting what the behavior takes: a colour, a clip of the group, true or false, a code, a number. */
-    renderResult(asset, b, value, write) {
-        const behavior = b.behavior;
+    /** Which parts, controls and motion group a table shows on: chips to tick, and the part chosen in the modeller by one button. */
+    renderTargets(parts, inputs, groups, t, on) {
+        const chosen = (e) => e.target.checked;
+        return html `<div form>
+      <span>${i18next.t('figure.label.data-target-parts')}</span>
+      <div chips>
+        ${parts.map(p => html `<label><input type="checkbox" .checked=${!!t.parts?.includes(p)} ?disabled=${this.locked} @change=${(e) => on.part(p, chosen(e))} />${p}</label>`)}
+        ${this.selected && parts.includes(this.selected) && !t.parts?.includes(this.selected)
+            ? html `<button act ?disabled=${this.locked} @click=${() => on.part(this.selected, true)}><md-icon>add</md-icon>${i18next.t('figure.button.data-add-selected-part', { part: this.selected })}</button>`
+            : nothing}
+      </div>
+      ${inputs.length
+            ? html `<span>${i18next.t('figure.label.data-target-inputs')}</span>
+            <div chips>
+              ${inputs.map(i => html `<label><input type="checkbox" .checked=${!!t.inputs?.includes(i.id)} ?disabled=${this.locked} @change=${(e) => on.input(i.id, chosen(e))} />${i.label}</label>`)}
+            </div>`
+            : nothing}
+      ${groups.length
+            ? html `<span>${i18next.t('figure.label.data-target-group')}</span>
+            <select ?disabled=${this.locked} @change=${(e) => on.group(e.target.value)}>
+              <option value="" ?selected=${!t.group}>${i18next.t('figure.label.data-none')}</option>
+              ${groups.map(g => html `<option value=${g.id} ?selected=${g.id === t.group}>${g.label}</option>`)}
+            </select>`
+            : nothing}
+    </div>`;
+    }
+    /** The column heads of a table's rows, after the key's own one or two. */
+    columnHeads(columns) {
+        return columns.map(c => c.kind === 'value'
+            ? html `<small>${c.label}${c.unit ? ` (${c.unit}${c.min !== undefined && c.max !== undefined ? ` ${c.min}~${c.max}` : ''})` : ''}</small>`
+            : html `<small>${i18next.t('figure.label.data-column-' + c.kind)}</small>`);
+    }
+    /** One look's cells, a column each: a colour, an effect, a control's value, a clip, a speed, a pause -- empty leaves the target as it is. */
+    lookCells(asset, columns, look, write) {
+        const without = (key) => {
+            const next = { ...look };
+            delete next[key];
+            return next;
+        };
         const typed = (e) => e.target.value;
-        if (behavior.kind === 'palette')
-            /* A colour not set is not black: it is offered, started at the colour the token has now. */
-            return value === undefined
-                ? html `<button act ?disabled=${this.locked} @click=${() => write(asset.palette[behavior.token] ?? '#000000')}>${i18next.t('figure.button.data-set-result')}</button>`
-                : html `<input type="color" .value=${String(value)} ?disabled=${this.locked} @change=${(e) => write(typed(e))} />`;
-        if (behavior.kind === 'motion-clip') {
-            const clips = (asset.motionGroups ?? []).find(g => g.id === behavior.group)?.clips ?? [];
-            return html `<select ?disabled=${this.locked} @change=${(e) => write(typed(e))}>
-        ${clips.map(clip => html `<option value=${clip} ?selected=${clip === value}>${clip}</option>`)}
-      </select>`;
-        }
-        if (behavior.kind === 'motion-paused')
-            return html `<select ?disabled=${this.locked} @change=${(e) => write(typed(e) === 'true')}>
-        ${[false, true].map(v => html `<option value=${String(v)} ?selected=${v === value}>${i18next.t(v ? 'figure.label.data-paused' : 'figure.label.data-playing')}</option>`)}
+        return columns.map(c => {
+            if (c.kind === 'color')
+                return look.color === undefined
+                    ? html `<button act ?disabled=${this.locked} @click=${() => write({ ...look, color: '#888888' })}>${i18next.t('figure.button.data-set-result')}</button>`
+                    : html `<span colour><input type="color" .value=${look.color} ?disabled=${this.locked} @change=${(e) => write({ ...look, color: typed(e) })} /><button act ?disabled=${this.locked} title=${i18next.t('figure.button.data-clear-result')} @click=${() => write(without('color'))}><md-icon>close</md-icon></button></span>`;
+            if (c.kind === 'effect')
+                return html `<select ?disabled=${this.locked} @change=${(e) => (typed(e) ? write({ ...look, effect: { kind: typed(e) } }) : write(without('effect')))}>
+          ${['', 'blink', 'glow'].map(k => html `<option value=${k} ?selected=${(look.effect?.kind ?? '') === k}>${i18next.t('figure.label.data-effect-' + (k || 'none'))}</option>`)}
+        </select>`;
+            if (c.kind === 'value') {
+                const v = look.values?.[c.id];
+                return html `<input type="number" step="any" min=${c.min ?? ''} max=${c.max ?? ''} .value=${v === undefined ? '' : String(v)} ?disabled=${this.locked} @change=${(e) => {
+                    const n = e.target.valueAsNumber;
+                    const values = { ...look.values };
+                    if (Number.isNaN(n))
+                        delete values[c.id];
+                    else
+                        values[c.id] = n;
+                    write(Object.keys(values).length ? { ...look, values } : without('values'));
+                }} />`;
+            }
+            if (c.kind === 'clip')
+                return html `<select ?disabled=${this.locked} @change=${(e) => (typed(e) ? write({ ...look, clip: typed(e) }) : write(without('clip')))}>
+          <option value="" ?selected=${look.clip === undefined}>-</option>
+          ${c.clips.map(clip => html `<option value=${clip} ?selected=${clip === look.clip}>${clip}</option>`)}
+        </select>`;
+            if (c.kind === 'speed')
+                return html `<input type="number" min="0" max="3" step="any" .value=${look.speed === undefined ? '' : String(look.speed)} ?disabled=${this.locked} @change=${(e) => {
+                    const n = e.target.valueAsNumber;
+                    write(Number.isNaN(n) ? without('speed') : { ...look, speed: n });
+                }} />`;
+            return html `<select ?disabled=${this.locked} @change=${(e) => (typed(e) ? write({ ...look, paused: typed(e) === 'true' }) : write(without('paused')))}>
+        <option value="" ?selected=${look.paused === undefined}>-</option>
+        ${[false, true].map(v => html `<option value=${String(v)} ?selected=${v === look.paused}>${i18next.t(v ? 'figure.label.data-paused' : 'figure.label.data-playing')}</option>`)}
       </select>`;
-        if (behavior.kind === 'status')
-            return html `<input .value=${String(value ?? '')} ?disabled=${this.locked} @change=${(e) => write(typed(e))} />`;
-        return html `<input type="number" step="any" .value=${value === undefined ? '' : String(value)} ?disabled=${this.locked} @change=${(e) => write(e.target.valueAsNumber)} />`;
+        });
+    }
+    /** The look of every other value: a row like the others, added or taken away; kept when a closed field's values are not all rows. */
+    renderOtherwise(asset, b, columns, needed, set, keyCells) {
+        const look = b.table.default;
+        if (look === undefined)
+            return html `<button act ?disabled=${this.locked} @click=${() => set(tableWithLook(b, 'default', {}))}><md-icon>add</md-icon>${i18next.t('figure.button.add-data-default')}</button>`;
+        const { default: _, ...rest } = b.table;
+        return html `<div looks style="grid-template-columns: ${gridOf(keyCells, columns.length)}">
+      <span style="grid-column: span ${keyCells}">${i18next.t('figure.label.data-otherwise')}</span>
+      ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, 'default', l)))}
+      ${needed ? html `<span></span>` : html `<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => set({ ...b, table: rest })}><md-icon>close</md-icon></button>`}
+    </div>`;
     }
-    /** A result per value of a closed field, and one for every other value. */
-    renderCases(asset, b, node, set) {
-        const param = b.param ?? {};
+    /**
+     * A code table's rows: a code each, typed, with its look. A closed text's values follow the codes (ADR-0166 risk 3):
+     * a code added, renamed or taken away is the field's value too; true and false are both rows.
+     */
+    renderCodeRows(asset, b, set) {
+        const columns = tableColumnsOf(asset, b);
+        const node = fieldAt(asset.dataInterface?.schema ?? [], b.accessor.replace(/\[\d+\]/g, '[]'));
+        const boolean = node?.kind === 'boolean';
+        const rows = Object.entries(b.table).filter(([k]) => k !== 'default');
         const domain = node ? domainOf(node).map(String) : [];
-        const keys = [...new Set([...domain, ...Object.keys(param).filter(k => k !== 'default')])];
-        const write = (key) => (v) => {
-            const next = { ...param };
-            if (v === undefined || (typeof v === 'number' && Number.isNaN(v)))
-                delete next[key];
-            else
-                next[key] = v;
-            set({ param: next });
+        const covered = domain.length > 0 && domain.every(v => b.table[v] !== undefined);
+        /* The binding and the field it reads, in one undo step. */
+        const rekeyed = (list) => {
+            const next = tableWithKeys(b, list);
+            const schema = boolean ? undefined : schemaFollowingCodes(asset, next, list.map(([k]) => k));
+            this.edit({ kind: 'set-data-binding', binding: next, ...(schema ? { schema } : {}) });
         };
-        const word = (k) => (node?.kind === 'boolean' ? i18next.t(k === 'true' ? 'figure.label.data-true' : 'figure.label.data-false') : k);
-        /* Every value of a closed field has its own result: no other value comes, unless one was set before. */
-        const covered = domain.length > 0 && domain.every(v => param[v] !== undefined);
-        return html `<div cases>
-      ${keys.map(k => html `<span>${word(k)}</span>${this.renderResult(asset, b, param[k], write(k))}`)}
-      ${covered && param.default === undefined ? nothing : html `<span>${i18next.t('figure.label.data-otherwise')}</span>${this.renderResult(asset, b, param.default, write('default'))}`}
-    </div>`;
+        const rekey = (i, typed) => {
+            const key = typed.trim();
+            if (!key || key === 'default' || rows.some(([k], j) => j !== i && k === key))
+                return this.requestUpdate();
+            rekeyed(rows.map(([k, v], j) => (j === i ? [key, v] : [k, v])));
+        };
+        const word = (k) => (boolean ? i18next.t(k === 'true' ? 'figure.label.data-true' : 'figure.label.data-false') : k);
+        return html `<div looks style="grid-template-columns: ${gridOf(1, columns.length)}">
+        <small>${i18next.t('figure.label.data-case-value')}</small>${this.columnHeads(columns)}<span></span>
+        ${rows.map(([k, look], i) => html `${boolean
+            ? html `<span>${word(k)}</span>`
+            : html `<input .value=${k} aria-label=${i18next.t('figure.label.data-case-value')} ?disabled=${this.locked} @change=${(e) => rekey(i, e.target.value)} />`}
+            ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, k, l)))}
+            ${boolean || rows.length < 2 && domain.length > 0
+            ? html `<span></span>`
+            : html `<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => rekeyed(rows.filter((_, j) => j !== i))}><md-icon>close</md-icon></button>`}`)}
+      </div>
+      ${this.renderOtherwise(asset, b, columns, domain.length > 0 && !covered, set, 1)}
+      ${boolean
+            ? nothing
+            : html `<button act ?disabled=${this.locked} @click=${() => rekeyed([...rows, [freeCodeOf(rows.map(([k]) => k)), {}]])}>
+            <md-icon>add</md-icon>${i18next.t('figure.button.add-data-case')}
+          </button>`}`;
     }
-    /** Intervals of a number, each from (inclusive) to (exclusive), either end left open, and one result for the rest. */
-    renderRanges(asset, b, set) {
-        const param = b.param ?? {};
-        const entries = Object.entries(param).filter(([k]) => k !== 'default');
-        const rebuild = (list) => set({ param: { ...Object.fromEntries(list), ...(param.default !== undefined ? { default: param.default } : {}) } });
+    /**
+     * A range table's rows: from (inclusive) and to (exclusive), either end open, with a look each. Giving the last row,
+     * open above, an end starts the next row there; a row open above is the last there can be.
+     */
+    renderRangeRows(asset, b, set) {
+        const columns = tableColumnsOf(asset, b);
+        const rows = Object.entries(b.table).filter(([k]) => k !== 'default');
         const ends = (key) => {
             const [from = '', to = ''] = key.split('~');
             return { from, to };
         };
-        const rekey = (i, end, typed) => rebuild(entries.map(([k, v], j) => {
-            if (j !== i)
-                return [k, v];
-            const e = ends(k);
-            const next = { ...e, [end]: typed.trim() };
-            return [`${next.from}~${next.to}`, v];
-        }));
-        return html `<div ranges>
-        <small>${i18next.t('figure.label.data-range-from')}</small><small>${i18next.t('figure.label.data-range-to')}</small><small></small><span></span>
-        ${entries.map(([k, v], i) => {
+        const rekey = (i, end, typed) => {
+            const was = ends(rows[i][0]);
+            const next = { ...was, [end]: typed.trim() };
+            const key = `${next.from}~${next.to}`;
+            /* A key another row has would take that row's place: not taken. */
+            if (rows.some(([k], j) => j !== i && k === key))
+                return this.requestUpdate();
+            const list = rows.map(([k, v], j) => (j === i ? [key, v] : [k, v]));
+            /* The last row, open above, given an end: the next row starts there, open above, so every value still has a row. */
+            if (i === rows.length - 1 && end === 'to' && was.to === '' && next.to !== '')
+                list.push([`${next.to}~`, {}]);
+            set(tableWithKeys(b, list));
+        };
+        const last = rows.at(-1);
+        const lastEnd = last ? ends(last[0]).to : '';
+        const open = !!last && lastEnd === '';
+        return html `<div looks style="grid-template-columns: ${gridOf(2, columns.length)}">
+        <small>${i18next.t('figure.label.data-range-from')}</small><small>${i18next.t('figure.label.data-range-to')}</small>${this.columnHeads(columns)}<span></span>
+        ${rows.map(([k, look], i) => {
             const e = ends(k);
             return html `<input type="number" step="any" .value=${e.from} ?disabled=${this.locked} @change=${(ev) => rekey(i, 'from', ev.target.value)} />
             <input type="number" step="any" .value=${e.to} ?disabled=${this.locked} @change=${(ev) => rekey(i, 'to', ev.target.value)} />
-            ${this.renderResult(asset, b, v, out => rebuild(entries.map(([kk, vv], j) => [kk, j === i ? out : vv])))}
-            <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-range')} @click=${() => rebuild(entries.filter((_, j) => j !== i))}><md-icon>close</md-icon></button>`;
+            ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, k, l)))}
+            <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-range')} @click=${() => set(tableWithKeys(b, rows.filter((_, j) => j !== i)))}><md-icon>close</md-icon></button>`;
         })}
       </div>
-      <div cases>
-        <span>${i18next.t('figure.label.data-otherwise')}</span>${this.renderResult(asset, b, param.default, v => set({ param: { ...param, ...(v === undefined ? {} : { default: v }) } }))}
-      </div>
-      <button act ?disabled=${this.locked} @click=${() => rebuild([...entries, [freeRangeKey(entries.map(([k]) => k)), entries.at(-1)?.[1] ?? param.default ?? 0]])}>
+      ${this.renderOtherwise(asset, b, columns, false, set, 2)}
+      ${open ? html `<p hint>${i18next.t('figure.text.data-range-close-last')}</p>` : nothing}
+      <button act ?disabled=${this.locked || open} @click=${() => set(tableWithKeys(b, [...rows, [`${lastEnd}~`, {}]]))}>
         <md-icon>add</md-icon>${i18next.t('figure.button.add-data-range')}
       </button>`;
     }
@@ -517,36 +762,74 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         }} />
     </div>`;
     }
+    /**
+     * 「연결 추가」 (ADR-0166 10): a field there or a new name, then a method the field's kind allows. As it is or scaled,
+     * the one thing it moves; a table, the parts, controls and motion group it shows on -- a new name makes the field.
+     */
     renderAddBinding(asset, rows, choices) {
         const bindable = rows.filter(r => r.node.kind !== 'object');
-        if (!bindable.length)
-            return nothing;
         const a = this.connecting;
-        const row = bindable.find(r => r.path === a.path) ?? bindable[0];
-        const fitting = choices.filter(c => fitsField(row.node, c));
+        /* 「새 필드」: a value no field path can have (a path is names and `[]`). */
+        const NEW = '+';
+        const row = a.path === NEW || !bindable.length ? null : (bindable.find(r => r.path === a.path) ?? bindable[0]);
+        const methods = methodsOf(row?.node ?? null, choices);
+        const method = methods.includes(a.method) ? a.method : methods[0];
+        const table = method === 'code' || method === 'ranges';
+        const fitting = row && !table ? choices.filter(c => fitsField(row.node, c)) : [];
         const choice = fitting.find(c => c.key === a.behavior) ?? fitting[0];
-        /* A list is read whole by items; one value of it, through its first element. */
-        const accessor = row.node.kind === 'list' && choice?.kind === 'items' ? row.path.replace(/\[\]$/, '') : accessorOfRow(row.path);
+        const set = (patch) => (this.connecting = { ...a, ...patch });
+        const typed = (e) => e.target.value;
+        const name = a.name.trim();
+        const targets = { parts: a.parts, inputs: a.inputs, ...(a.group ? { group: a.group } : {}) };
+        const aimed = a.parts.length > 0 || a.inputs.length > 0 || !!a.group;
+        const ready = table ? aimed && (row !== null || /^[A-Za-z_][\w-]*$/.test(name)) : !!choice && !!row;
+        const add = () => {
+            if (table) {
+                const { binding, schema } = tableDraftOf(asset, row ? { path: row.path, node: row.node } : { name }, method, targets);
+                this.edit({ kind: 'set-data-binding', binding, ...(schema ? { schema } : {}) });
+                this.opened = binding.id;
+            }
+            else {
+                /* A list is read whole by items; one value of it, through its first element. */
+                const accessor = row.node.kind === 'list' && choice.kind === 'items' ? row.path.replace(/\[\]$/, '') : accessorOfRow(row.path);
+                const binding = bindingDraftOf(asset, accessor, row.node, choice, method);
+                this.edit({ kind: 'set-data-binding', binding });
+                this.opened = binding.id;
+            }
+            this.connecting = { path: '', name: '', method: '', behavior: '', parts: [], inputs: [], group: '' };
+        };
+        const toggle = (list, id, on) => (on ? [...list, id] : list.filter(x => x !== id));
         return html `<div form>
         <span>${i18next.t('figure.label.data-field')}</span>
-        <select @change=${(e) => (this.connecting = { ...a, path: e.target.value })}>
+        <select @change=${(e) => set({ path: typed(e), name: '' })}>
           ${bindable.map(r => html `<option value=${r.path} ?selected=${r === row}>${r.path}</option>`)}
+          <option value=${NEW} ?selected=${row === null}>${i18next.t('figure.label.data-new-field')}</option>
         </select>
-        <span>${i18next.t('figure.label.data-behavior')}</span>
-        <select ?disabled=${!fitting.length} @change=${(e) => (this.connecting = { ...a, behavior: e.target.value })}>
-          ${fitting.map(c => html `<option value=${c.key} ?selected=${c === choice}>${this.behaviorName(asset, choices, c.behavior)}</option>`)}
+        ${row === null
+            ? html `<span>${i18next.t('figure.label.data-name')}</span>
+              <input .value=${a.name} @input=${(e) => set({ name: typed(e) })} />`
+            : nothing}
+        <span>${i18next.t('figure.label.data-method')}</span>
+        <select ?disabled=${!methods.length} @change=${(e) => set({ method: typed(e) })}>
+          ${methods.map(m => html `<option value=${m} ?selected=${m === method}>${i18next.t('figure.label.data-method-' + m)}</option>`)}
         </select>
+        ${!table && fitting.length
+            ? html `<span>${i18next.t('figure.label.data-behavior')}</span>
+              <select @change=${(e) => set({ behavior: typed(e) })}>
+                ${fitting.map(c => html `<option value=${c.key} ?selected=${c === choice}>${this.behaviorName(asset, choices, c.behavior)}</option>`)}
+              </select>`
+            : nothing}
       </div>
-      ${fitting.length ? nothing : html `<p hint>${i18next.t('figure.text.data-no-behavior')}</p>`}
-      <button
-        act
-        ?disabled=${this.locked || !choice}
-        @click=${() => {
-            const binding = bindingDraftOf(asset, accessor, row.node, choice);
-            this.edit({ kind: 'set-data-binding', binding });
-            this.opened = binding.id;
-        }}
-      >
+      ${table
+            ? this.renderTargets(partsOf(asset), stateInputsOf(asset), asset.motionGroups ?? [], targets, {
+                part: (id, on) => set({ parts: toggle(a.parts, id, on) }),
+                input: (id, on) => set({ inputs: toggle(a.inputs, id, on) }),
+                group: id => set({ group: id })
+            })
+            : nothing}
+      ${table && !aimed ? html `<p hint>${i18next.t('figure.text.data-table-needs-target')}</p>` : nothing}
+      ${methods.length ? nothing : html `<p hint>${i18next.t('figure.text.data-no-behavior')}</p>`}
+      <button act ?disabled=${this.locked || !ready} @click=${add}>
         <md-icon>add</md-icon>${i18next.t('figure.button.add-data-binding')}
       </button>`;
     }
@@ -624,52 +907,6 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
       </button>
     </details>`;
     }
-    /* ---------------------------------------------------------------- status ports */
-    renderPorts(asset) {
-        const ports = asset.dataInterface?.ports ?? [];
-        const tokens = Object.keys(asset.palette);
-        const parts = partsOf(asset);
-        const set = (port, patch) => this.edit({ kind: 'set-status-port', port: { ...port, ...patch } });
-        const chosen = (e) => [...e.target.selectedOptions].map(o => o.value);
-        return html `<section>
-      <h3>${i18next.t('figure.label.data-ports')}${this.help.button('figure.text.data-ports-explained')}</h3>
-      ${this.help.hint('figure.text.data-ports-explained')}
-      ${ports.map(port => html `<section item>
-          <div head>
-            <strong>${port.label}</strong>
-            <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-port')} @click=${() => this.edit({ kind: 'remove-status-port', id: port.id })}>
-              <md-icon>close</md-icon>
-            </button>
-          </div>
-          <div form>
-            <span>${i18next.t('figure.label.data-label')}</span>
-            <input .value=${port.label} ?disabled=${this.locked} @change=${(e) => set(port, { label: e.target.value.trim() })} />
-            <span>${i18next.t('figure.label.data-port-tokens')}</span>
-            <select multiple size=${Math.min(4, Math.max(tokens.length, 1))} ?disabled=${this.locked} @change=${(e) => set(port, { tokens: chosen(e) })}>
-              ${tokens.map(t => html `<option value=${t} ?selected=${port.tokens.includes(t)}>${t}</option>`)}
-            </select>
-            <span>${i18next.t('figure.label.data-port-parts')}</span>
-            <select multiple size=${Math.min(4, Math.max(parts.length, 1))} ?disabled=${this.locked} @change=${(e) => set(port, { parts: chosen(e) })}>
-              ${parts.map(p => html `<option value=${p} ?selected=${port.parts.includes(p)}>${p}</option>`)}
-            </select>
-          </div>
-        </section>`)}
-      <div form>
-        <span>${i18next.t('figure.label.data-label')}</span>
-        <input .value=${this.porting} @input=${(e) => (this.porting = e.target.value)} />
-      </div>
-      <button
-        act
-        ?disabled=${this.locked || !this.porting.trim()}
-        @click=${() => {
-            this.edit({ kind: 'set-status-port', port: portDraftOf(asset, this.porting) });
-            this.porting = '';
-        }}
-      >
-        <md-icon>add</md-icon>${i18next.t('figure.button.add-data-port')}
-      </button>
-    </section>`;
-    }
     /* ---------------------------------------------------------------- the sample */
     /** Data to try, read the way a placed figure reads it: what it moves, or why it is refused; in the preview, the figure running on it. */
     renderSample(asset) {
@@ -682,8 +919,10 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         catch {
             unreadable = true;
         }
-        const read = unreadable ? null : sampleOf(asset, data);
+        const legends = this.sampleLegends();
+        const read = unreadable ? null : sampleOf(asset, data, legends);
         const r = read?.result;
+        const tables = (asset.dataInterface?.bindings ?? []).filter((b) => b.rule === 'table');
         return html `<section>
       <h3>${i18next.t('figure.label.data-sample')}${this.help.button('figure.text.data-sample-explained')}</h3>
       ${this.help.hint('figure.text.data-sample-explained')}
@@ -699,11 +938,14 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
                     ${(asset.motionGroups ?? []).find(g => g.id === group)?.label ?? group}:
                     ${[m.clip, m.speed === undefined ? '' : `× ${m.speed}`, m.paused ? i18next.t('figure.label.data-paused') : ''].filter(Boolean).join(' ')}
                   </li>`)}
-              ${Object.entries(r.status).map(([port, code]) => html `<li>${(asset.dataInterface?.ports ?? []).find(p => p.id === port)?.label ?? port}: ${code}</li>`)}
+              ${tables.map(b => this.renderTableUse(asset, b, read.uses[b.id]))}
+              ${Object.entries(r.parts).map(([part, look]) => html `<li>${part}: ${[look.color, look.effect ? i18next.t('figure.label.data-effect-' + look.effect.kind) : ''].filter(Boolean).join(' ')}</li>`)}
               ${Object.entries(r.pose).map(([axis, p]) => html `<li>${i18next.t('figure.label.data-axis-' + axis)} = ${p.value}</li>`)}
               ${r.items.map(i => html `<li>${i18next.t('figure.label.data-items-count', { count: i.records.length })}${i.records.length ? `: ${i.records.map(x => x.id).join(', ')}` : ''}</li>`)}
             </ul>`}
+      ${read?.notes.length ? html `<p hint>${read.notes.map(n => i18next.t('figure.text.data-note-' + n.reason, { binding: n.binding ?? '', key: n.key ?? '', column: n.column ? i18next.t('figure.label.data-column-' + n.column) : '', value: shownValue(n.value) })).join(' · ')}</p>` : nothing}
       ${r && Object.keys(r.pose).length ? html `<p hint>${i18next.t('figure.text.data-sample-moves-all')}</p>` : nothing}
+      ${this.renderSampleLegends(tables)}
       <label toggle>
         <input
           type="checkbox"
@@ -717,6 +959,52 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
       </label>
     </section>`;
     }
+    /** Which row of a table the sample's value matched, and from which table: the figure's own or the sample legend of its role. */
+    renderTableUse(asset, b, use) {
+        if (!use || use.value === undefined)
+            return nothing;
+        const word = (v) => (typeof v === 'boolean' || v === 'true' || v === 'false' ? i18next.t(String(v) === 'true' ? 'figure.label.data-true' : 'figure.label.data-false') : String(v));
+        const row = use.key === null ? i18next.t('figure.label.data-none') : use.key === 'default' ? i18next.t('figure.label.data-otherwise') : word(use.key);
+        const from = use.source === 'figure' ? i18next.t('figure.label.data-table-own') : i18next.t('figure.label.data-table-legend', { name: use.legend ?? '' });
+        return html `<li>${b.label ?? b.accessor} = ${word(use.value)} → ${row} <small>(${from})</small></li>`;
+    }
+    /** The sample legends as read: by role, those that are JSON. */
+    sampleLegends() {
+        const out = {};
+        for (const [role, text] of Object.entries(this.legendSample)) {
+            if (!text.trim())
+                continue;
+            try {
+                out[role] = JSON.parse(text);
+            }
+            catch {
+                /* Not JSON yet: the figure's own table shows. */
+            }
+        }
+        return out;
+    }
+    /**
+     * A legend pasted for each table role, to see the figure as a board's legend of that role would show it -- not saved.
+     * The preview shows it too, as a scene's legend named as the role.
+     */
+    renderSampleLegends(tables) {
+        const roles = [...new Set(tables.flatMap(b => (b.legend ? [b.legend.role] : [])))];
+        if (!roles.length)
+            return nothing;
+        return html `<details>
+      <summary>${i18next.t('figure.label.data-sample-legend')}</summary>
+      <p hint>${i18next.t('figure.text.data-sample-legend-explained')}</p>
+      ${roles.map(role => html `<label>${role}</label>
+          <textarea
+            .value=${this.legendSample[role] ?? ''}
+            placeholder='{ "CODE": { "color": "#22c55e" }, "default": {} }'
+            @input=${(e) => {
+            this.legendSample = { ...this.legendSample, [role]: e.target.value };
+            this.dispatchEvent(new CustomEvent('legend-sample', { detail: { legends: this.sampleLegends() }, bubbles: true, composed: true }));
+        }}
+          ></textarea>`)}
+    </details>`;
+    }
     try(typed) {
         this.sample = typed;
         try {
@@ -742,6 +1030,10 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], FigureDataPanel.prototype, "locked", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FigureDataPanel.prototype, "selected", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -765,7 +1057,7 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], FigureDataPanel.prototype, "porting", void 0);
+], FigureDataPanel.prototype, "legendSample", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -790,21 +1082,10 @@ function nodeOfKind(kind) {
         return { kind, item: { kind: 'object', fields: [] } };
     return { kind };
 }
-/** The param a rule starts with when the author switches to it: one result per value, one open interval, a unit scale, or none. */
-function firstParamOf(rule, node, b) {
-    const keep = b.param?.default;
-    if (rule === 'value')
-        return undefined;
-    if (rule === 'scale')
-        return { scale: 1, offset: 0 };
-    if (rule === 'range')
-        return { [`${node?.kind === 'number' ? (node.min ?? '') : ''}~`]: keep ?? 0 };
-    const domain = node ? domainOf(node).map(String) : [];
-    return domain.length ? Object.fromEntries(domain.map(v => [v, keep ?? 0])) : { default: keep ?? 0 };
-}
-/** The next interval: from the last one's end, open above; open at both ends when there is none. */
-function freeRangeKey(taken) {
-    const end = taken.at(-1)?.split('~')[1] ?? '';
-    return `${end}~`;
+/** A value in a sentence: a text as it is, anything else as JSON. */
+const shownValue = (v) => (typeof v === 'string' ? v : JSON.stringify(v ?? ''));
+/** A table row's columns: the key's one or two, a cell per column, and the remove button. */
+function gridOf(keyCells, columns) {
+    return `${'minmax(64px, 1fr) '.repeat(keyCells)}${'minmax(72px, 1fr) '.repeat(columns)}30px`;
 }
 //# sourceMappingURL=figure-data-panel.js.map