@things-factory/figure-ui 10.1.162 → 10.1.164

package/client/modeller/figure-data-panel.ts

@@ -4,286 +4,750 @@ 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 type { FigureAsset, FigureDataConnection, FigureDataProperty, FigureDataValue } from '@hatiolab/figure-model'
+import { FIGURE_UNITS, figureDataExample, inferFigureDataSchema } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureDataBinding, FigureDataField, FigureDataNode, FigureDataRow, FigureDataValue, FigureStatusPort } from '@hatiolab/figure-model'
 
-import { connectionDraftOf, dataSampleOf, dataTargetsOf, domainOf, propertyDraftOf, sampleValueOf, targetKeyOf, type DataTargetChoice } from './data-interface.js'
+import {
+  accessorOfRow,
+  behaviorKeyOf,
+  behaviorsOf,
+  bindingDraftOf,
+  domainOf,
+  endlessJointsOf,
+  fieldAt,
+  fieldOfKind,
+  fitsField,
+  partsOf,
+  portDraftOf,
+  rotationStepsOf,
+  sampleOf,
+  schemaRowsOf,
+  type RotationChoice,
+  schemaWithField,
+  schemaWithFieldReplaced,
+  schemaWithoutField,
+  type BehaviorChoice
+} from './data-interface.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { HelpToggles } from './help.js'
 
+const KINDS: FigureDataNode['kind'][] = ['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`).
  */
 @customElement('figure-data-panel')
 export class FigureDataPanel extends localize(i18next)(LitElement) {
   private readonly help = new HelpToggles(this)
-  static 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 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;
+      }
+    `
+  ]
 
   @property({ attribute: false }) asset?: FigureAsset
   @property({ type: Boolean }) locked = false
 
-  @state() private adding = { label: '', kind: 'number' as FigureDataProperty['kind'] }
-  @state() private connecting = { property: '', target: '' }
-  /** The sample's values as typed, by property id; a property left out reads its default. */
-  @state() private sample: Record<string, FigureDataValue> = {}
+  /** The schema row chosen, by its path; its field is edited under it. */
+  @state() private chosen = ''
+  @state() private adding = { name: '', kind: 'number' as FigureDataNode['kind'] }
+  /** A site's data pasted to start the schema from; nothing is kept until the author says so. */
+  @state() private pasted = ''
+  @state() private connecting = { path: '', behavior: '' }
+  /** The binding opened to edit its rule, by id. */
+  @state() private opened = ''
+  @state() private porting = ''
+  /** The rotation card as filled in: the joint, and the fields for on, speed (and its most rpm) and direction. */
+  @state() private rotating = { input: '', on: '', speed: '', max: 0, direction: '', forward: '', reverse: '' }
+  /** The sample as typed, JSON; empty until edited, the schema's example shown until then. */
+  @state() private sample = ''
   @state() private sampling = false
 
   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}
     `
   }
 
-  private renderProperty(p: FigureDataProperty) {
-    const set = (patch: Partial<FigureDataProperty>) => this.edit({ kind: 'set-data-property', property: { ...p, ...patch } as FigureDataProperty })
+  /* ---------------------------------------------------------------- the schema */
+
+  private renderSchema(asset: FigureAsset, rows: FigureDataRow[]) {
+    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>`
+  }
+
+  private kindWord(node: FigureDataNode): string {
+    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. */
+  private renderField(asset: FigureAsset, schema: readonly FigureDataField[], row: FigureDataRow) {
+    const field = fieldAt(schema, row.path)
+    if (!field) return nothing
+    const replace = (next: FigureDataField) => this.edit({ kind: 'set-data-schema', schema: schemaWithFieldReplaced(schema, row.path, next) })
+    const set = (patch: Record<string, unknown>) => {
+      const next = { ...field, ...patch } as Record<string, unknown>
+      for (const [k, v] of Object.entries(patch)) if (v === undefined || (typeof v === 'number' && Number.isNaN(v))) delete next[k]
+      replace(next as FigureDataField)
+    }
     const value = (e: Event) => (e.target as HTMLInputElement | HTMLSelectElement).value
     const number = (e: Event) => (e.target as HTMLInputElement).valueAsNumber
+    const rename = (to: string) => {
+      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: FigureDataNode = 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: Event) => 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: Event) => 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: Event) => rename(value(e).trim())} />
+        <span>${i18next.t('figure.label.data-label')}</span>
+        <input .value=${field.label ?? ''} ?disabled=${this.locked} @change=${(e: Event) => set({ label: value(e).trim() || undefined })} />
+        <span>${i18next.t('figure.label.data-kind')}</span>
+        <select ?disabled=${this.locked} @change=${(e: Event) => replace(fieldOfKind(field, value(e) as FigureDataNode['kind']))}>
+          ${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: Event) => set({ unit: value(e) as never })}>
-                ${FIGURE_UNITS.map(u => html`<option value=${u} ?selected=${u === p.unit}>${u}</option>`)}
+              <select ?disabled=${this.locked} @change=${(e: Event) => 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: Event) => set({ min: number(e) })} />
+              <input type="number" step="any" .value=${field.min === undefined ? '' : String(field.min)} ?disabled=${this.locked} @change=${(e: Event) => 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: Event) => set({ max: number(e) })} />
+              <input type="number" step="any" .value=${field.max === undefined ? '' : String(field.max)} ?disabled=${this.locked} @change=${(e: Event) => 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: Event) => set({ default: number(e) })} />`
-          : p.kind === 'boolean'
+              <input type="number" step="any" .value=${field.default === undefined ? '' : String(field.default)} ?disabled=${this.locked} @change=${(e: Event) => set({ default: number(e) })} />`
+          : field.kind === 'boolean'
             ? html`<span>${i18next.t('figure.label.data-default')}</span>
-                <select ?disabled=${this.locked} @change=${(e: Event) => 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: Event) => 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: Event) => {
-                    const values = value(e).split(',').map(v => v.trim()).filter(Boolean)
-                    set({ values, default: values.includes(p.default) ? p.default : values[0]! } as never)
-                  }}
-                />
-                <span>${i18next.t('figure.label.data-default')}</span>
-                <select ?disabled=${this.locked} @change=${(e: Event) => 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: Event) => {
+                      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: Event) => 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: Event) => set({ default: value(e) || undefined })} />`}`
+              : html`<span></span>
+                  <label toggle>
+                    <input type="checkbox" .checked=${!!field.json} ?disabled=${this.locked} @change=${(e: Event) => set({ json: (e.target as HTMLInputElement).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: Event) => replace({ ...field, item: nodeOfKind(value(e) as FigureDataNode['kind']) })}>
+                ${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>`
   }
 
-  private renderAddProperty(asset: FigureAsset) {
+  private renderAddField(schema: readonly FigureDataField[], under: string) {
     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: Event) => (this.adding = { ...a, label: (e.target as HTMLInputElement).value })} />
+        <span>${i18next.t('figure.label.data-name')}</span>
+        <input .value=${a.name} @input=${(e: Event) => (this.adding = { ...a, name: (e.target as HTMLInputElement).value })} />
         <span>${i18next.t('figure.label.data-kind')}</span>
-        <select @change=${(e: Event) => (this.adding = { ...a, kind: (e.target as HTMLSelectElement).value as FigureDataProperty['kind'] })}>
-          ${(['number', 'boolean', 'enum'] as const).map(k => html`<option value=${k} ?selected=${k === a.kind}>${i18next.t('figure.label.data-kind-' + k)}</option>`)}
+        <select @change=${(e: Event) => (this.adding = { ...a, kind: (e.target as HTMLSelectElement).value as FigureDataNode['kind'] })}>
+          ${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) } as FigureDataField) })
+          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>`
   }
 
-  private targetName(asset: FigureAsset, c: FigureDataConnection, property?: FigureDataProperty): string {
-    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. */
+  private renderFromSample(schema: readonly FigureDataField[]) {
+    let guessed: FigureDataField[] | null = 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: Event) => (this.pasted = (e.target as HTMLTextAreaElement).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>`
   }
 
-  private renderConnection(asset: FigureAsset, c: FigureDataConnection, property?: FigureDataProperty) {
-    const set = (patch: Partial<FigureDataConnection>) => this.edit({ kind: 'set-data-connection', connection: { ...c, ...patch } })
-    const number = (e: Event) => (e.target as HTMLInputElement).valueAsNumber
-    const t = c.transform
+  /* ---------------------------------------------------------------- the bindings */
+
+  private behaviorName(asset: FigureAsset, choices: BehaviorChoice[], b: FigureDataBinding['behavior']): string {
+    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 })
+  }
+
+  private renderBindings(asset: FigureAsset, rows: FigureDataRow[]) {
+    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>`
+  }
+
+  private renderBinding(asset: FigureAsset, choices: BehaviorChoice[], b: FigureDataBinding) {
+    const open = this.opened === b.id
+    const set = (patch: Partial<FigureDataBinding>) => {
+      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>`
+  }
+
+  private renderBindingDetail(asset: FigureAsset, b: FigureDataBinding, set: (patch: Partial<FigureDataBinding>) => void) {
+    const node = fieldAt(asset.dataInterface?.schema ?? [], b.accessor.replace(/\[\d+\]/g, '[]'))
+    const value = (e: Event) => (e.target as HTMLInputElement | HTMLSelectElement).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: Event) => set({ rule: value(e) as FigureDataBinding['rule'], param: firstParamOf(value(e) as FigureDataBinding['rule'], node, b) })}>
+          ${(['value', 'map', 'range', 'scale'] as const).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: Event) => set({ target: { ...(c.target as { kind: 'state'; input: string }), sourceMode: (e.target as HTMLSelectElement).value as 'observed' | 'commanded' } })}>
-                ${(['observed', 'commanded'] as const).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: Event) => set({ behavior: { ...behavior, sourceMode: value(e) as 'observed' | 'commanded' } })}>
+                ${(['observed', 'commanded'] as const).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: Event) => set({ transform: (e.target as HTMLSelectElement).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: Event) => set({ behavior: { ...behavior, seconds: (e.target as HTMLInputElement).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: Event) => set({ transform: { ...t, scale: number(e) } })} />
+              <input type="number" step="any" .value=${String(b.param?.scale ?? 1)} ?disabled=${this.locked} @change=${(e: Event) => set({ param: { ...b.param, scale: (e.target as HTMLInputElement).valueAsNumber } })} />
               <span>${i18next.t('figure.label.data-offset')}</span>
-              <input type="number" step="any" .value=${String(t.offset)} ?disabled=${this.locked} @change=${(e: Event) => set({ transform: { ...t, offset: number(e) } })} />`
+              <input type="number" step="any" .value=${String(b.param?.offset ?? 0)} ?disabled=${this.locked} @change=${(e: Event) => set({ param: { ...b.param, offset: (e.target as HTMLInputElement).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 result editor fitting what the behavior takes: a colour, a clip of the group, true or false, a code, a number. */
+  private renderResult(asset: FigureAsset, b: FigureDataBinding, value: FigureDataValue | undefined, write: (v: FigureDataValue | undefined) => void) {
+    const behavior = b.behavior
+    const typed = (e: Event) => (e.target as HTMLInputElement | HTMLSelectElement).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: Event) => 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: Event) => 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: Event) => 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: Event) => write(typed(e))} />`
+    return html`<input type="number" step="any" .value=${value === undefined ? '' : String(value)} ?disabled=${this.locked} @change=${(e: Event) => write((e.target as HTMLInputElement).valueAsNumber)} />`
   }
 
-  /** A case per value of the property: what the target takes for it -- a number, a colour, or a clip of the group. */
-  private renderCases(asset: FigureAsset, c: FigureDataConnection, set: (patch: Partial<FigureDataConnection>) => void) {
-    if (c.transform.kind !== 'lookup') return nothing
-    const cases = c.transform.cases
-    const write = (i: number, value: FigureDataValue) => 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 per value of a closed field, and one for every other value. */
+  private renderCases(asset: FigureAsset, b: FigureDataBinding, node: FigureDataNode | undefined, set: (patch: Partial<FigureDataBinding>) => void) {
+    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: string) => (v: FigureDataValue | undefined) => {
+      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: string) => (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: Event) => write(i, (e.target as HTMLInputElement).value)} />`
-            : c.target.kind === 'motion-clip'
-              ? html`<select ?disabled=${this.locked} @change=${(e: Event) => write(i, (e.target as HTMLSelectElement).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: Event) => write(i, (e.target as HTMLInputElement).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>`
   }
 
-  private renderAddConnection(asset: FigureAsset, properties: FigureDataProperty[]) {
+  /** Intervals of a number, each from (inclusive) to (exclusive), either end left open, and one result for the rest. */
+  private renderRanges(asset: FigureAsset, b: FigureDataBinding, set: (patch: Partial<FigureDataBinding>) => void) {
+    const param = b.param ?? {}
+    const entries = Object.entries(param).filter(([k]) => k !== 'default')
+    const rebuild = (list: Array<[string, FigureDataValue]>) => set({ param: { ...Object.fromEntries(list), ...(param.default !== undefined ? { default: param.default } : {}) } })
+    const ends = (key: string) => {
+      const [from = '', to = ''] = key.split('~')
+      return { from, to }
+    }
+    const rekey = (i: number, end: 'from' | 'to', typed: string) =>
+      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: Event) => rekey(i, 'from', (ev.target as HTMLInputElement).value)} />
+            <input type="number" step="any" .value=${e.to} ?disabled=${this.locked} @change=${(ev: Event) => rekey(i, 'to', (ev.target as HTMLInputElement).value)} />
+            ${this.renderResult(asset, b, v, out => rebuild(entries.map(([kk, vv], j) => [kk, j === i ? (out as FigureDataValue) : 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. */
+  private renderItemFields(asset: FigureAsset, b: FigureDataBinding, node: FigureDataNode | undefined, set: (patch: Partial<FigureDataBinding>) => void) {
+    const behavior = b.behavior
+    if (behavior.kind !== 'items') return nothing
+    let element: FigureDataNode | undefined = 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: 'id' | 'type' | 'place' | 'stack' | 'status', typed: string) => {
+      const next: Record<string, unknown> = { ...behavior, [role]: typed }
+      if (!typed) delete next[role]
+      set({ behavior: next as FigureDataBinding['behavior'] })
+    }
+    return html`<div form>
+      ${node?.kind === 'list'
+        ? (['id', 'type', 'place', 'stack', 'status'] as const).map(
+            role => html`<span>${i18next.t('figure.label.data-item-' + role)}</span>
+              <select ?disabled=${this.locked} @change=${(e: Event) => pick(role, (e.target as HTMLSelectElement).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: Event) => {
+        const slot = (e.target as HTMLInputElement).value.trim()
+        const next: Record<string, unknown> = { ...behavior, slot }
+        if (!slot) delete next.slot
+        set({ behavior: next as FigureDataBinding['behavior'] })
+      }} />
+    </div>`
+  }
+
+  private renderAddBinding(asset: FigureAsset, rows: FigureDataRow[], choices: BehaviorChoice[]) {
+    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: Event) => (this.connecting = { ...a, property: (e.target as HTMLSelectElement).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: Event) => (this.connecting = { ...a, path: (e.target as HTMLSelectElement).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: Event) => (this.connecting = { ...a, target: (e.target as HTMLSelectElement).value })}>
-          ${targets.map((t: DataTargetChoice) => 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: Event) => (this.connecting = { ...a, behavior: (e.target as HTMLSelectElement).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. */
-  private renderSample(asset: FigureAsset, properties: FigureDataProperty[]) {
-    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.
+   */
+  private renderRotation(asset: FigureAsset, rows: FigureDataRow[]) {
+    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: FigureDataNode['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: Partial<typeof r>) => (this.rotating = { ...r, ...patch })
+    const typed = (e: Event) => (e.target as HTMLSelectElement | HTMLInputElement).value
+    const pick = (rows: FigureDataRow[], value: string, change: (v: string) => void) =>
+      html`<select ?disabled=${this.locked} @change=${(e: Event) => 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: RotationChoice = {
+      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: Event) => 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: Event) => set({ max: (e.target as HTMLInputElement).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: Event) => 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: Event) => 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 */
+
+  private renderPorts(asset: FigureAsset) {
+    const ports = asset.dataInterface?.ports ?? []
+    const tokens = Object.keys(asset.palette)
+    const parts = partsOf(asset)
+    const set = (port: FigureStatusPort, patch: Partial<FigureStatusPort>) => this.edit({ kind: 'set-status-port', port: { ...port, ...patch } })
+    const chosen = (e: Event) => [...(e.target as HTMLSelectElement).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: Event) => set(port, { label: (e.target as HTMLInputElement).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: Event) => 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: Event) => 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: Event) => this.try(p, (e.target as HTMLInputElement).value)} />`
-              : html`<select @change=${(e: Event) => this.try(p, (e.target as HTMLSelectElement).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: Event) => (this.porting = (e.target as HTMLInputElement).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. */
+  private renderSample(asset: FigureAsset) {
+    const text = this.sample || JSON.stringify(figureDataExample(asset.dataInterface!), null, 2)
+    let data: unknown
+    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: Event) => this.try((e.target as HTMLTextAreaElement).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: Event) => {
             this.sampling = (e.target as HTMLInputElement).checked
-            this.tell(values)
+            this.tell(unreadable ? null : data)
           }}
         />
         ${i18next.t('figure.label.data-sample-in-preview')}
@@ -291,18 +755,44 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
     </section>`
   }
 
-  private try(property: FigureDataProperty, typed: string) {
-    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])))
+  private try(typed: string) {
+    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. */
-  private tell(values: Record<string, FigureDataValue>) {
-    this.dispatchEvent(new CustomEvent('data-sample', { detail: { values: this.sampling ? values : null }, bubbles: true, composed: true }))
+  private tell(data: unknown) {
+    this.dispatchEvent(new CustomEvent('data-sample', { detail: { data: this.sampling ? data : null }, bubbles: true, composed: true }))
   }
 
   private edit(edit: unknown) {
     this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))
   }
 }
+
+/** A node of a kind, started empty. */
+function nodeOfKind(kind: FigureDataNode['kind']): FigureDataNode {
+  if (kind === 'object') return { kind, fields: [] }
+  if (kind === 'list') return { kind, item: { kind: 'object', fields: [] } }
+  return { kind } as FigureDataNode
+}
+
+/** 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: FigureDataBinding['rule'], node: FigureDataNode | undefined, b: FigureDataBinding): FigureDataBinding['param'] {
+  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: string[]): string {
+  const end = taken.at(-1)?.split('~')[1] ?? ''
+  return `${end}~`
+}