@things-factory/figure-ui 10.1.162 → 10.1.164

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

@@ -3,284 +3,732 @@ import '@material/web/icon/icon.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { FIGURE_UNITS } from '@hatiolab/figure-model';
-import { connectionDraftOf, dataSampleOf, dataTargetsOf, domainOf, propertyDraftOf, sampleValueOf, targetKeyOf } from './data-interface.js';
+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 { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
 import { HelpToggles } from './help.js';
+const KINDS = ['number', 'boolean', 'text', 'object', 'list'];
 /**
- * 데이터 -- the figure's public data properties and what each moves inside it (ADR-0051 §2.2). A property is a value a
- * consumer maps its own data onto, by its id: a number with a unit and a range, a boolean, or an enum. A connection
- * makes a property move a control, a colour, or which clip of a motion group plays and how fast. Every change is one
+ * 데이터 -- 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.
  *
- * The sample is not saved: values tried here, what they would move (figure-model's evaluation), and -- in the preview --
- * the figure running on them (`data-sample`).
+ * 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`).
  */
 let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
         this.help = new HelpToggles(this);
         this.locked = false;
-        this.adding = { label: '', kind: 'number' };
-        this.connecting = { property: '', target: '' };
-        /** The sample's values as typed, by property id; a property left out reads its default. */
-        this.sample = {};
+        /** 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: '' };
+        /** The binding opened to edit its rule, by id. */
+        this.opened = '';
+        this.porting = '';
+        /** 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. */
+        this.sample = '';
         this.sampling = false;
     }
-    static { this.styles = [SidePanelStyles, css `
-    :host {
-      display: block;
-    }
-    section[item] {
-      display: grid;
-      gap: 8px;
-      padding: 8px;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 8px;
-    }
-    div[head] {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) 30px;
-      gap: 6px;
-      align-items: center;
-    }
-    div[head] strong {
-      min-width: 0;
-      overflow-wrap: anywhere;
-    }
-    div[head] button[act] {
-      width: 30px;
-      min-height: var(--figure-control-height);
-      margin: 0;
-      padding: 0;
-    }
-    div[cases] {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
-      gap: 4px 6px;
-      align-items: center;
-    }
-    ul[result] {
-      margin: 0;
-      padding-left: 16px;
-    }
-    md-icon {
-      font-size: 16px;
-      width: 16px;
-      height: 16px;
-    }
-  `]; }
+    static { this.styles = [
+        SidePanelStyles,
+        css `
+      :host {
+        display: block;
+      }
+      ul[tree] {
+        display: grid;
+        gap: 2px;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      ul[tree] > li > button[row] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0 6px;
+        width: 100%;
+        min-height: var(--figure-control-height);
+        margin: 0;
+        padding: 4px 6px;
+        border: 1px solid transparent;
+        border-radius: 6px;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: left;
+        align-items: center;
+        cursor: pointer;
+      }
+      ul[tree] > li > button[row][selected] {
+        border-color: var(--md-sys-color-primary);
+      }
+      ul[tree] > li > button[row] small {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      /* What the field is and what reads it: beside the name when it fits, under it when not. */
+      ul[tree] > li > button[row] small[meta] {
+        margin-left: auto;
+        text-align: right;
+      }
+      section[item] {
+        display: grid;
+        gap: 8px;
+        padding: 8px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 8px;
+      }
+      div[head] {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 30px;
+        gap: 6px;
+        align-items: center;
+      }
+      div[head] button[line] {
+        min-width: 0;
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: left;
+        overflow-wrap: anywhere;
+        cursor: pointer;
+      }
+      div[head] button[act] {
+        width: 30px;
+        min-height: var(--figure-control-height);
+        margin: 0;
+        padding: 0;
+      }
+      div[cases] {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
+        gap: 4px 6px;
+        align-items: center;
+      }
+      div[ranges] {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) 30px;
+        gap: 4px 6px;
+        align-items: center;
+      }
+      div[ranges] button[act] {
+        width: 30px;
+        margin: 0;
+        padding: 0;
+      }
+      textarea {
+        width: 100%;
+        min-height: 96px;
+        box-sizing: border-box;
+        font-family: var(--ui-font-mono, monospace);
+        font-size: inherit;
+      }
+      ul[result] {
+        margin: 0;
+        padding-left: 16px;
+      }
+      md-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+      }
+    `
+    ]; }
     render() {
         const asset = this.asset;
         if (!asset)
             return nothing;
-        const properties = asset.dataInterface?.properties ?? [];
-        const connections = asset.dataInterface?.connections ?? [];
+        const rows = schemaRowsOf(asset);
         return html `
-      <section>
-        <h3>${i18next.t('figure.label.data-properties')}${this.help.button('figure.text.data-properties-explained')}</h3>
-        ${this.help.hint('figure.text.data-properties-explained')}
-        ${properties.map(p => this.renderProperty(p))}
-        ${this.renderAddProperty(asset)}
-      </section>
-      <section>
-        <h3>${i18next.t('figure.label.data-connections')}${this.help.button('figure.text.data-connections-explained')}</h3>
-        ${this.help.hint('figure.text.data-connections-explained')}
-        ${connections.map(c => this.renderConnection(asset, c, properties.find(p => p.id === c.property)))}
-        ${properties.length ? this.renderAddConnection(asset, properties) : html `<p hint>${i18next.t('figure.text.data-no-properties')}</p>`}
-      </section>
-      ${properties.length ? this.renderSample(asset, properties) : nothing}
+      ${this.renderSchema(asset, rows)} ${this.renderBindings(asset, rows)} ${this.renderPorts(asset)} ${rows.length ? this.renderSample(asset) : nothing}
     `;
     }
-    renderProperty(p) {
-        const set = (patch) => this.edit({ kind: 'set-data-property', property: { ...p, ...patch } });
+    /* ---------------------------------------------------------------- the schema */
+    renderSchema(asset, rows) {
+        const schema = asset.dataInterface?.schema ?? [];
+        return html `<section>
+      <h3>${i18next.t('figure.label.data-schema')}${this.help.button('figure.text.data-schema-explained')}</h3>
+      ${this.help.hint('figure.text.data-schema-explained')}
+      ${rows.length
+            ? html `<ul tree>
+            ${rows.map(row => html `<li>
+                <button row ?selected=${row.path === this.chosen} style="padding-left: ${6 + row.depth * 14}px" @click=${() => (this.chosen = row.path === this.chosen ? '' : row.path)}>
+                  <span>${row.name}${row.label ? html ` <small>${row.label}</small>` : nothing}</span>
+                  <small meta>${this.kindWord(row.node)}${row.bindings.length ? ` · ${i18next.t('figure.label.data-bound', { count: row.bindings.length })}` : ''}</small>
+                </button>
+                ${row.path === this.chosen ? this.renderField(asset, schema, row) : nothing}
+              </li>`)}
+          </ul>`
+            : html `<p hint>${i18next.t('figure.text.data-no-fields')}</p>`}
+      ${this.renderAddField(schema, '')} ${this.renderFromSample(schema)}
+    </section>`;
+    }
+    kindWord(node) {
+        const kind = i18next.t('figure.label.data-kind-' + node.kind);
+        if (node.kind === 'number') {
+            const range = node.min !== undefined || node.max !== undefined ? ` ${node.min ?? ''}~${node.max ?? ''}` : '';
+            return `${kind}${node.unit ? ` ${node.unit}` : ''}${range}`;
+        }
+        if (node.kind === 'text' && node.values)
+            return `${kind} (${node.values.join(', ')})`;
+        if (node.kind === 'list')
+            return `${kind} · ${i18next.t('figure.label.data-kind-' + node.item.kind)}`;
+        return kind;
+    }
+    /** The chosen field's own settings, and a field added under it when it holds fields. */
+    renderField(asset, schema, row) {
+        const field = fieldAt(schema, row.path);
+        if (!field)
+            return nothing;
+        const replace = (next) => this.edit({ kind: 'set-data-schema', schema: schemaWithFieldReplaced(schema, row.path, next) });
+        const set = (patch) => {
+            const next = { ...field, ...patch };
+            for (const [k, v] of Object.entries(patch))
+                if (v === undefined || (typeof v === 'number' && Number.isNaN(v)))
+                    delete next[k];
+            replace(next);
+        };
         const value = (e) => e.target.value;
         const number = (e) => e.target.valueAsNumber;
+        const rename = (to) => {
+            if (!to || to === field.name)
+                return;
+            /* A field outside any list is renamed with what reads it; inside a list it is the schema alone. */
+            if (!row.path.includes('[]'))
+                this.edit({ kind: 'rename-data-field', accessor: row.path, to });
+            else
+                replace({ ...field, name: to });
+        };
+        let holder = field;
+        while (holder.kind === 'list')
+            holder = holder.item;
         return html `<section item>
       <div head>
-        <strong>${p.label} <small>(${i18next.t('figure.label.data-kind-' + p.kind)})</small></strong>
-        <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-property')} @click=${() => this.edit({ kind: 'remove-data-property', id: p.id })}>
+        <strong>${row.path}</strong>
+        <button
+          act
+          ?disabled=${this.locked}
+          title=${i18next.t('figure.button.remove-data-field')}
+          @click=${() => {
+            this.chosen = '';
+            this.edit({ kind: 'set-data-schema', schema: schemaWithoutField(schema, row.path) });
+        }}
+        >
           <md-icon>close</md-icon>
         </button>
       </div>
       <div form>
-        <span>${i18next.t('figure.label.data-id')}</span>
-        <input .value=${p.id} ?disabled=${this.locked} @change=${(e) => value(e).trim() !== p.id && this.edit({ kind: 'rename-data-property', id: p.id, to: value(e).trim() })} />
-        <span>${i18next.t('figure.label.name')}</span>
-        <input .value=${p.label} ?disabled=${this.locked} @change=${(e) => value(e).trim() && set({ label: value(e).trim() })} />
-        ${p.kind === 'number'
+        <span>${i18next.t('figure.label.data-name')}</span>
+        <input .value=${field.name} ?disabled=${this.locked} @change=${(e) => rename(value(e).trim())} />
+        <span>${i18next.t('figure.label.data-label')}</span>
+        <input .value=${field.label ?? ''} ?disabled=${this.locked} @change=${(e) => set({ label: value(e).trim() || undefined })} />
+        <span>${i18next.t('figure.label.data-kind')}</span>
+        <select ?disabled=${this.locked} @change=${(e) => replace(fieldOfKind(field, value(e)))}>
+          ${KINDS.map(k => html `<option value=${k} ?selected=${k === field.kind}>${i18next.t('figure.label.data-kind-' + k)}</option>`)}
+        </select>
+        ${field.kind === 'number'
             ? html `<span>${i18next.t('figure.label.data-unit')}</span>
-              <select ?disabled=${this.locked} @change=${(e) => set({ unit: value(e) })}>
-                ${FIGURE_UNITS.map(u => html `<option value=${u} ?selected=${u === p.unit}>${u}</option>`)}
+              <select ?disabled=${this.locked} @change=${(e) => set({ unit: value(e) || undefined })}>
+                <option value="" ?selected=${!field.unit}>-</option>
+                ${FIGURE_UNITS.map(u => html `<option value=${u} ?selected=${u === field.unit}>${u}</option>`)}
               </select>
               <span>${i18next.t('figure.label.data-min')}</span>
-              <input type="number" step="any" .value=${String(p.min)} ?disabled=${this.locked} @change=${(e) => set({ min: number(e) })} />
+              <input type="number" step="any" .value=${field.min === undefined ? '' : String(field.min)} ?disabled=${this.locked} @change=${(e) => set({ min: number(e) })} />
               <span>${i18next.t('figure.label.data-max')}</span>
-              <input type="number" step="any" .value=${String(p.max)} ?disabled=${this.locked} @change=${(e) => set({ max: number(e) })} />
+              <input type="number" step="any" .value=${field.max === undefined ? '' : String(field.max)} ?disabled=${this.locked} @change=${(e) => set({ max: number(e) })} />
               <span>${i18next.t('figure.label.data-default')}</span>
-              <input type="number" step="any" .value=${String(p.default)} ?disabled=${this.locked} @change=${(e) => set({ default: number(e) })} />`
-            : p.kind === 'boolean'
+              <input type="number" step="any" .value=${field.default === undefined ? '' : String(field.default)} ?disabled=${this.locked} @change=${(e) => set({ default: number(e) })} />`
+            : field.kind === 'boolean'
                 ? html `<span>${i18next.t('figure.label.data-default')}</span>
-                <select ?disabled=${this.locked} @change=${(e) => set({ default: value(e) === 'true' })}>
-                  ${[false, true].map(b => html `<option value=${String(b)} ?selected=${b === p.default}>${i18next.t(b ? 'figure.label.data-true' : 'figure.label.data-false')}</option>`)}
+                <select ?disabled=${this.locked} @change=${(e) => set({ default: value(e) === '' ? undefined : value(e) === 'true' })}>
+                  <option value="" ?selected=${field.default === undefined}>-</option>
+                  ${[false, true].map(b => html `<option value=${String(b)} ?selected=${b === field.default}>${i18next.t(b ? 'figure.label.data-true' : 'figure.label.data-false')}</option>`)}
                 </select>`
-                : html `<span>${i18next.t('figure.label.data-values')}</span>
-                <input
-                  .value=${p.values.join(', ')}
-                  ?disabled=${this.locked}
-                  @change=${(e) => {
-                    const values = value(e).split(',').map(v => v.trim()).filter(Boolean);
-                    set({ values, default: values.includes(p.default) ? p.default : values[0] });
-                }}
-                />
-                <span>${i18next.t('figure.label.data-default')}</span>
-                <select ?disabled=${this.locked} @change=${(e) => set({ default: value(e) })}>
-                  ${p.values.map(v => html `<option value=${v} ?selected=${v === p.default}>${v}</option>`)}
-                </select>`}
+                : field.kind === 'text'
+                    ? html `<span>${i18next.t('figure.label.data-values')}</span>
+                  <input
+                    .value=${(field.values ?? []).join(', ')}
+                    ?disabled=${this.locked}
+                    @change=${(e) => {
+                        const values = value(e).split(',').map(v => v.trim()).filter(Boolean);
+                        set({ values: values.length ? values : undefined, default: field.default !== undefined && (!values.length || values.includes(field.default)) ? field.default : undefined });
+                    }}
+                  />
+                  <span>${i18next.t('figure.label.data-default')}</span>
+                  ${field.values
+                        ? html `<select ?disabled=${this.locked} @change=${(e) => set({ default: value(e) || undefined })}>
+                        <option value="" ?selected=${field.default === undefined}>-</option>
+                        ${field.values.map(v => html `<option value=${v} ?selected=${v === field.default}>${v}</option>`)}
+                      </select>`
+                        : html `<input .value=${field.default ?? ''} ?disabled=${this.locked} @change=${(e) => set({ default: value(e) || undefined })} />`}`
+                    : html `<span></span>
+                  <label toggle>
+                    <input type="checkbox" .checked=${!!field.json} ?disabled=${this.locked} @change=${(e) => set({ json: e.target.checked ? true : undefined })} />
+                    ${i18next.t('figure.label.data-json')}
+                  </label>`}
+        ${field.kind === 'list'
+            ? html `<span>${i18next.t('figure.label.data-item-kind')}</span>
+              <select ?disabled=${this.locked} @change=${(e) => replace({ ...field, item: nodeOfKind(value(e)) })}>
+                ${KINDS.filter(k => k !== 'list').map(k => html `<option value=${k} ?selected=${k === field.item.kind}>${i18next.t('figure.label.data-kind-' + k)}</option>`)}
+              </select>`
+            : nothing}
       </div>
+      ${holder.kind === 'object' ? this.renderAddField(schema, row.path) : nothing}
     </section>`;
     }
-    renderAddProperty(asset) {
+    renderAddField(schema, under) {
         const a = this.adding;
+        const named = a.name.trim();
         return html `<div form>
-        <span>${i18next.t('figure.label.name')}</span>
-        <input .value=${a.label} @input=${(e) => (this.adding = { ...a, label: e.target.value })} />
+        <span>${i18next.t('figure.label.data-name')}</span>
+        <input .value=${a.name} @input=${(e) => (this.adding = { ...a, name: e.target.value })} />
         <span>${i18next.t('figure.label.data-kind')}</span>
         <select @change=${(e) => (this.adding = { ...a, kind: e.target.value })}>
-          ${['number', 'boolean', 'enum'].map(k => html `<option value=${k} ?selected=${k === a.kind}>${i18next.t('figure.label.data-kind-' + k)}</option>`)}
+          ${KINDS.map(k => html `<option value=${k} ?selected=${k === a.kind}>${i18next.t('figure.label.data-kind-' + k)}</option>`)}
         </select>
       </div>
       <button
         act
-        ?disabled=${this.locked || !a.label.trim()}
+        ?disabled=${this.locked || !named}
         @click=${() => {
-            this.edit({ kind: 'set-data-property', property: propertyDraftOf(asset, a.label.trim(), a.kind) });
-            this.adding = { ...a, label: '' };
+            this.edit({ kind: 'set-data-schema', schema: schemaWithField(schema, under, { name: named, ...nodeOfKind(a.kind) }) });
+            this.adding = { ...a, name: '' };
         }}
       >
-        <md-icon>add</md-icon>${i18next.t('figure.button.add-data-property')}
+        <md-icon>add</md-icon>${i18next.t(under ? 'figure.button.add-data-child' : 'figure.button.add-data-field', { parent: under })}
       </button>`;
     }
-    targetName(asset, c, property) {
-        const choice = property ? dataTargetsOf(asset, property.kind).find(t => t.key === targetKeyOf(c.target)) : undefined;
-        const name = choice?.name ?? targetKeyOf(c.target);
-        return i18next.t('figure.label.data-target-' + c.target.kind, { name });
+    /** A site's data pasted: the schema guessed from it, kept only when the author says so -- units, ranges and closed values are theirs to set. */
+    renderFromSample(schema) {
+        let guessed = null;
+        let unreadable = false;
+        if (this.pasted.trim()) {
+            try {
+                guessed = inferFigureDataSchema(JSON.parse(this.pasted));
+            }
+            catch {
+                unreadable = true;
+            }
+        }
+        return html `<details>
+      <summary>${i18next.t('figure.label.data-from-sample')}</summary>
+      <p hint>${i18next.t('figure.text.data-from-sample-explained')}</p>
+      <textarea .value=${this.pasted} ?disabled=${this.locked} @input=${(e) => (this.pasted = e.target.value)}></textarea>
+      ${unreadable ? html `<p hint>${i18next.t('figure.text.data-not-json')}</p>` : nothing}
+      ${guessed ? html `<p hint>${i18next.t(schema.length ? 'figure.text.data-guessed-replaces' : 'figure.text.data-guessed', { count: guessed.length })}</p>` : nothing}
+      <button
+        act
+        ?disabled=${this.locked || !guessed?.length}
+        @click=${() => {
+            this.edit({ kind: 'set-data-schema', schema: guessed });
+            this.pasted = '';
+        }}
+      >
+        ${i18next.t('figure.button.data-use-guessed')}
+      </button>
+    </details>`;
     }
-    renderConnection(asset, c, property) {
-        const set = (patch) => this.edit({ kind: 'set-data-connection', connection: { ...c, ...patch } });
-        const number = (e) => e.target.valueAsNumber;
-        const t = c.transform;
+    /* ---------------------------------------------------------------- the bindings */
+    behaviorName(asset, choices, b) {
+        const key = behaviorKeyOf(b);
+        const choice = choices.find(c => c.key === key);
+        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 });
+    }
+    renderBindings(asset, rows) {
+        const bindings = asset.dataInterface?.bindings ?? [];
+        const choices = behaviorsOf(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>`}
+      ${this.renderRotation(asset, rows)}
+    </section>`;
+    }
+    renderBinding(asset, choices, b) {
+        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 });
+        };
         return html `<section item>
       <div head>
-        <strong>${property?.label ?? c.property} → ${this.targetName(asset, c, property)}</strong>
-        <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-connection')} @click=${() => this.edit({ kind: 'remove-data-connection', id: c.id })}>
+        <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>
+        </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>
-      <div form>
-        ${c.target.kind === 'state'
+      ${open ? this.renderBindingDetail(asset, b, set) : nothing}
+    </section>`;
+    }
+    renderBindingDetail(asset, b, set) {
+        const node = fieldAt(asset.dataInterface?.schema ?? [], b.accessor.replace(/\[\d+\]/g, '[]'));
+        const value = (e) => e.target.value;
+        const behavior = b.behavior;
+        if (behavior.kind === 'items')
+            return this.renderItemFields(asset, b, node, set);
+        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'
             ? html `<span>${i18next.t('figure.label.data-source-mode')}</span>
-              <select ?disabled=${this.locked} @change=${(e) => set({ target: { ...c.target, sourceMode: e.target.value } })}>
-                ${['observed', 'commanded'].map(m => html `<option value=${m} ?selected=${c.target.kind === 'state' && c.target.sourceMode === m}>${i18next.t('figure.label.data-' + m)}</option>`)}
+              <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>`
             : nothing}
-        ${t.kind === 'lookup'
-            ? nothing
-            : html `<span>${i18next.t('figure.label.data-transform')}</span>
-              <select ?disabled=${this.locked} @change=${(e) => set({ transform: e.target.value === 'affine' ? { kind: 'affine', scale: 1, offset: 0 } : { kind: 'identity' } })}>
-                <option value="identity" ?selected=${t.kind === 'identity'}>${i18next.t('figure.label.data-identity')}</option>
-                <option value="affine" ?selected=${t.kind === 'affine'}>${i18next.t('figure.label.data-affine')}</option>
-              </select>`}
-        ${t.kind === 'affine'
+        ${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 } })} />`
+            : nothing}
+        ${b.rule === 'scale'
             ? html `<span>${i18next.t('figure.label.data-scale')}</span>
-              <input type="number" step="any" .value=${String(t.scale)} ?disabled=${this.locked} @change=${(e) => set({ transform: { ...t, scale: number(e) } })} />
+              <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(t.offset)} ?disabled=${this.locked} @change=${(e) => set({ transform: { ...t, offset: number(e) } })} />`
+              <input type="number" step="any" .value=${String(b.param?.offset ?? 0)} ?disabled=${this.locked} @change=${(e) => set({ param: { ...b.param, offset: e.target.valueAsNumber } })} />`
             : nothing}
       </div>
-      ${t.kind === 'lookup' ? this.renderCases(asset, c, set) : nothing}
-    </section>`;
+      ${b.rule === 'map' ? this.renderCases(asset, b, node, set) : b.rule === 'range' ? this.renderRanges(asset, b, set) : nothing}`;
     }
-    /** A case per value of the property: what the target takes for it -- a number, a colour, or a clip of the group. */
-    renderCases(asset, c, set) {
-        if (c.transform.kind !== 'lookup')
-            return nothing;
-        const cases = c.transform.cases;
-        const write = (i, value) => set({ transform: { kind: 'lookup', cases: cases.map((k, j) => (j === i ? { ...k, value } : k)) } });
-        const clips = c.target.kind === 'motion-clip' ? ((asset.motionGroups ?? []).find(g => c.target.kind === 'motion-clip' && g.id === c.target.group)?.clips ?? []) : [];
+    /** 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;
+        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>`)}
+      </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)} />`;
+    }
+    /** A result per value of a closed field, and one for every other value. */
+    renderCases(asset, b, node, set) {
+        const param = b.param ?? {};
+        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 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>
-      ${cases.map((k, i) => html `<span>${typeof k.when === 'boolean' ? i18next.t(k.when ? 'figure.label.data-true' : 'figure.label.data-false') : String(k.when)}</span>
-          ${c.target.kind === 'palette'
-            ? html `<input type="color" .value=${String(k.value)} ?disabled=${this.locked} @change=${(e) => write(i, e.target.value)} />`
-            : c.target.kind === 'motion-clip'
-                ? html `<select ?disabled=${this.locked} @change=${(e) => write(i, e.target.value)}>
-                  ${clips.map(clip => html `<option value=${clip} ?selected=${clip === k.value}>${clip}</option>`)}
-                </select>`
-                : html `<input type="number" step="any" .value=${String(k.value)} ?disabled=${this.locked} @change=${(e) => write(i, e.target.valueAsNumber)} />`}`)}
+      ${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>`;
+    }
+    /** 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 } : {}) } });
+        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 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>`;
+        })}
+      </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]])}>
+        <md-icon>add</md-icon>${i18next.t('figure.button.add-data-range')}
+      </button>`;
+    }
+    /** Which field of each element is its id, its type, its place, its height in the stack, its status. */
+    renderItemFields(asset, b, node, set) {
+        const behavior = b.behavior;
+        if (behavior.kind !== 'items')
+            return nothing;
+        let element = node;
+        while (element?.kind === 'list')
+            element = element.item;
+        const fields = element?.kind === 'object' ? element.fields.filter(f => f.kind === 'number' || f.kind === 'text' || f.kind === 'boolean').map(f => f.name) : [];
+        const pick = (role, typed) => {
+            const next = { ...behavior, [role]: typed };
+            if (!typed)
+                delete next[role];
+            set({ behavior: next });
+        };
+        return html `<div form>
+      ${node?.kind === 'list'
+            ? ['id', 'type', 'place', 'stack', 'status'].map(role => html `<span>${i18next.t('figure.label.data-item-' + role)}</span>
+              <select ?disabled=${this.locked} @change=${(e) => pick(role, e.target.value)}>
+                <option value="" ?selected=${!behavior[role]}>-</option>
+                ${fields.map(f => html `<option value=${f} ?selected=${f === behavior[role]}>${f}</option>`)}
+              </select>`)
+            : nothing}
+      <span>${i18next.t('figure.label.data-item-slot')}</span>
+      <input .value=${behavior.slot ?? ''} ?disabled=${this.locked} @change=${(e) => {
+            const slot = e.target.value.trim();
+            const next = { ...behavior, slot };
+            if (!slot)
+                delete next.slot;
+            set({ behavior: next });
+        }} />
     </div>`;
     }
-    renderAddConnection(asset, properties) {
+    renderAddBinding(asset, rows, choices) {
+        const bindable = rows.filter(r => r.node.kind !== 'object');
+        if (!bindable.length)
+            return nothing;
         const a = this.connecting;
-        const property = properties.find(p => p.id === a.property) ?? properties[0];
-        const targets = dataTargetsOf(asset, property.kind);
-        const choice = targets.find(t => t.key === a.target) ?? targets[0];
+        const row = bindable.find(r => r.path === a.path) ?? bindable[0];
+        const fitting = 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);
         return html `<div form>
-        <span>${i18next.t('figure.label.data-property')}</span>
-        <select @change=${(e) => (this.connecting = { ...a, property: e.target.value })}>
-          ${properties.map(p => html `<option value=${p.id} ?selected=${p === property}>${p.label}</option>`)}
+        <span>${i18next.t('figure.label.data-field')}</span>
+        <select @change=${(e) => (this.connecting = { ...a, path: e.target.value })}>
+          ${bindable.map(r => html `<option value=${r.path} ?selected=${r === row}>${r.path}</option>`)}
         </select>
-        <span>${i18next.t('figure.label.data-target')}</span>
-        <select ?disabled=${!targets.length} @change=${(e) => (this.connecting = { ...a, target: e.target.value })}>
-          ${targets.map((t) => html `<option value=${t.key} ?selected=${t === choice}>${i18next.t('figure.label.data-target-' + t.target.kind, { name: t.name })}</option>`)}
+        <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>`)}
         </select>
       </div>
-      <button act ?disabled=${this.locked || !choice} @click=${() => this.edit({ kind: 'set-data-connection', connection: connectionDraftOf(asset, property, choice) })}>
-        <md-icon>add</md-icon>${i18next.t('figure.button.add-data-connection')}
+      ${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;
+        }}
+      >
+        <md-icon>add</md-icon>${i18next.t('figure.button.add-data-binding')}
       </button>`;
     }
-    /** Values to try: what they move, by figure-model's evaluation; in the preview, the figure running on them. */
-    renderSample(asset, properties) {
-        const values = Object.fromEntries(properties.map(p => [p.id, this.sample[p.id] ?? p.default]));
-        const outcome = dataSampleOf(asset, values);
+    /**
+     * 「＋ 회전」: a joint that turns without end, turned by the data -- on, speed in rpm, direction -- in one step. The
+     * clips, the group and the bindings it writes are ordinary ones, edited one by one afterwards.
+     */
+    renderRotation(asset, rows) {
+        const joints = endlessJointsOf(asset);
+        if (!joints.length)
+            return nothing;
+        const r = this.rotating;
+        const joint = joints.find(j => j.input === r.input) ?? joints[0];
+        const values = rows.filter(row => !row.path.includes('[]'));
+        const of = (kind, closed = false) => values.filter(row => row.node.kind === kind && (!closed || domainOf(row.node).length > 0));
+        const speedRow = values.find(row => row.path === r.speed);
+        const speedMax = r.max || (speedRow?.node.kind === 'number' ? (speedRow.node.max ?? 0) : 0);
+        const directionRow = values.find(row => row.path === r.direction);
+        const directions = directionRow ? domainOf(directionRow.node).map(String) : [];
+        const forward = directions.includes(r.forward) ? r.forward : (directions[0] ?? '');
+        const reverse = directions.includes(r.reverse) ? r.reverse : (directions.find(v => v !== forward) ?? '');
+        const set = (patch) => (this.rotating = { ...r, ...patch });
+        const typed = (e) => e.target.value;
+        const pick = (rows, value, change) => html `<select ?disabled=${this.locked} @change=${(e) => change(typed(e))}>
+        <option value="" ?selected=${!value}>${i18next.t('figure.label.data-none')}</option>
+        ${rows.map(row => html `<option value=${row.path} ?selected=${row.path === value}>${row.path}</option>`)}
+      </select>`;
+        const choice = {
+            input: joint.input,
+            label: i18next.t('figure.label.data-rotation-of', { name: joint.label }),
+            ...(r.on ? { on: r.on } : {}),
+            ...(r.speed ? { speed: { path: r.speed, max: speedMax } } : {}),
+            ...(r.direction && forward && reverse ? { direction: { path: r.direction, forward, reverse } } : {})
+        };
+        const ready = !r.speed || speedMax > 0;
+        return html `<details>
+      <summary>${i18next.t('figure.label.data-rotation')}</summary>
+      <p hint>${i18next.t('figure.text.data-rotation-explained')}</p>
+      <div form>
+        <span>${i18next.t('figure.label.data-rotation-joint')}</span>
+        <select ?disabled=${this.locked} @change=${(e) => set({ input: typed(e) })}>
+          ${joints.map(j => html `<option value=${j.input} ?selected=${j === joint}>${j.label}</option>`)}
+        </select>
+        <span>${i18next.t('figure.label.data-rotation-on')}</span>
+        ${pick(of('boolean'), r.on, v => set({ on: v }))}
+        <span>${i18next.t('figure.label.data-rotation-speed')}</span>
+        ${pick(of('number'), r.speed, v => set({ speed: v, max: 0 }))}
+        ${r.speed
+            ? html `<span>${i18next.t('figure.label.data-rotation-max')}</span>
+              <input type="number" min="0" step="any" .value=${speedMax ? String(speedMax) : ''} ?disabled=${this.locked} @change=${(e) => set({ max: e.target.valueAsNumber || 0 })} />`
+            : nothing}
+        <span>${i18next.t('figure.label.data-rotation-direction')}</span>
+        ${pick(of('text', true), r.direction, v => set({ direction: v, forward: '', reverse: '' }))}
+        ${directions.length
+            ? html `<span>${i18next.t('figure.label.data-rotation-forward')}</span>
+              <select ?disabled=${this.locked} @change=${(e) => set({ forward: typed(e) })}>
+                ${directions.map(v => html `<option value=${v} ?selected=${v === forward}>${v}</option>`)}
+              </select>
+              <span>${i18next.t('figure.label.data-rotation-reverse')}</span>
+              <select ?disabled=${this.locked} @change=${(e) => set({ reverse: typed(e) })}>
+                ${directions.map(v => html `<option value=${v} ?selected=${v === reverse}>${v}</option>`)}
+              </select>`
+            : nothing}
+      </div>
+      ${ready ? nothing : html `<p hint>${i18next.t('figure.text.data-rotation-needs-max')}</p>`}
+      <button
+        act
+        ?disabled=${this.locked || !ready}
+        @click=${() => {
+            this.dispatchEvent(new CustomEvent('part-edits', { detail: { edits: rotationStepsOf(asset, choice) }, bubbles: true, composed: true }));
+            this.rotating = { input: '', on: '', speed: '', max: 0, direction: '', forward: '', reverse: '' };
+        }}
+      >
+        <md-icon>add</md-icon>${i18next.t('figure.button.data-add-rotation')}
+      </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-sample')}${this.help.button('figure.text.data-sample-explained')}</h3>
-      ${this.help.hint('figure.text.data-sample-explained')}
+      <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>
-        ${properties.map(p => html `<span>${p.label}</span>
-            ${p.kind === 'number'
-            ? html `<input type="number" step="any" .value=${String(values[p.id])} @change=${(e) => this.try(p, e.target.value)} />`
-            : html `<select @change=${(e) => this.try(p, e.target.value)}>
-                  ${domainOf(p).map(v => html `<option value=${String(v)} ?selected=${v === values[p.id]}>${typeof v === 'boolean' ? i18next.t(v ? 'figure.label.data-true' : 'figure.label.data-false') : v}</option>`)}
-                </select>`}`)}
+        <span>${i18next.t('figure.label.data-label')}</span>
+        <input .value=${this.porting} @input=${(e) => (this.porting = e.target.value)} />
       </div>
-      ${'issues' in outcome
-            ? html `<p hint>${outcome.issues.map(i => i18next.t('figure.text.data-value-' + i.reason, { property: i.property ?? '' })).join(' · ')}</p>`
-            : html `<ul result>
-            ${Object.entries(outcome.result.states).map(([input, s]) => html `<li>${asset.stateInputs?.[input]?.label ?? input} = ${s.value}</li>`)}
-            ${Object.entries(outcome.result.palette).map(([token, colour]) => html `<li>${token} = ${colour}</li>`)}
-            ${Object.entries(outcome.result.motion).map(([group, m]) => html `<li>${(asset.motionGroups ?? []).find(g => g.id === group)?.label ?? group}: ${[m.clip, m.speed === undefined ? '' : `× ${m.speed}`].filter(Boolean).join(' ')}</li>`)}
-          </ul>`}
+      <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) {
+        const text = this.sample || JSON.stringify(figureDataExample(asset.dataInterface), null, 2);
+        let data;
+        let unreadable = false;
+        try {
+            data = JSON.parse(text);
+        }
+        catch {
+            unreadable = true;
+        }
+        const read = unreadable ? null : sampleOf(asset, data);
+        const r = read?.result;
+        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')}
+      <textarea .value=${text} @input=${(e) => this.try(e.target.value)}></textarea>
+      ${unreadable
+            ? html `<p hint>${i18next.t('figure.text.data-not-json')}</p>`
+            : read.issues.length
+                ? html `<p hint>${read.issues.map(i => i18next.t('figure.text.data-value-' + i.reason, { path: i.path || '-' })).join(' · ')}</p>`
+                : html `<ul result>
+              ${Object.entries(r.states).map(([input, s]) => html `<li>${asset.stateInputs?.[input]?.label ?? input} = ${s.value}</li>`)}
+              ${Object.entries(r.palette).map(([token, colour]) => html `<li>${token} = ${colour}</li>`)}
+              ${Object.entries(r.motion).map(([group, m]) => html `<li>
+                    ${(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>`)}
+              ${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>`}
+      ${r && Object.keys(r.pose).length ? html `<p hint>${i18next.t('figure.text.data-sample-moves-all')}</p>` : nothing}
       <label toggle>
         <input
           type="checkbox"
           .checked=${this.sampling}
           @change=${(e) => {
             this.sampling = e.target.checked;
-            this.tell(values);
+            this.tell(unreadable ? null : data);
         }}
         />
         ${i18next.t('figure.label.data-sample-in-preview')}
       </label>
     </section>`;
     }
-    try(property, typed) {
-        this.sample = { ...this.sample, [property.id]: sampleValueOf(property, typed) };
-        const properties = this.asset?.dataInterface?.properties ?? [];
-        this.tell(Object.fromEntries(properties.map(p => [p.id, this.sample[p.id] ?? p.default])));
+    try(typed) {
+        this.sample = typed;
+        try {
+            this.tell(JSON.parse(typed));
+        }
+        catch {
+            /* Not JSON yet: the preview keeps what it ran on. */
+        }
     }
     /** The sample to the preview while it is asked for; null lets the preview's figure go back to its own values. */
-    tell(values) {
-        this.dispatchEvent(new CustomEvent('data-sample', { detail: { values: this.sampling ? values : null }, bubbles: true, composed: true }));
+    tell(data) {
+        this.dispatchEvent(new CustomEvent('data-sample', { detail: { data: this.sampling ? data : null }, bubbles: true, composed: true }));
     }
     edit(edit) {
         this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }));
@@ -294,14 +742,34 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], FigureDataPanel.prototype, "locked", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureDataPanel.prototype, "chosen", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureDataPanel.prototype, "adding", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureDataPanel.prototype, "pasted", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureDataPanel.prototype, "connecting", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureDataPanel.prototype, "opened", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureDataPanel.prototype, "porting", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureDataPanel.prototype, "rotating", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -314,4 +782,29 @@ FigureDataPanel = __decorate([
     customElement('figure-data-panel')
 ], FigureDataPanel);
 export { FigureDataPanel };
+/** A node of a kind, started empty. */
+function nodeOfKind(kind) {
+    if (kind === 'object')
+        return { kind, fields: [] };
+    if (kind === 'list')
+        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}~`;
+}
 //# sourceMappingURL=figure-data-panel.js.map