@things-factory/figure-ui 10.1.222 → 10.1.224

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

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