@things-factory/figure-ui 10.1.271 → 10.1.273

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

@@ -1,6 +1,8 @@
 import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, nothing } from 'lit'
+import JSON5 from 'json5'
+import { ScrollbarStyles } from '@operato/styles'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
@@ -30,6 +32,8 @@ import {
   legendRoleOf,
   methodOf,
   methodsOf,
+  freeNumberCodeOf,
+  tableWithKeep,
   partsOf,
   rotationStepsOf,
   sampleOf,
@@ -51,7 +55,7 @@ import {
 } from './data-interface.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { dataMoveOf } from '@things-factory/figure-viewer/dist-client/data-connection.js'
-import { kindWords, moveWords } from '@things-factory/figure-viewer/dist-client/data-words.js'
+import { kindName, kindWords, moveWords } from '@things-factory/figure-viewer/dist-client/data-words.js'
 import { figureBindingsTakenOver, figureCapabilityDescriptorOf, type FigureRestingBinding } from '@hatiolab/things-scene'
 import { consumerDescriptors } from './consumer-capabilities.js'
 import { HelpToggles } from './help.js'
@@ -70,49 +74,94 @@ const KINDS: FigureDataNode['kind'][] = ['number', 'boolean', 'text', 'object',
  * running on it (`data-sample`); a sample legend pasted for a table's role shows it as a board's legend would
  * (`legend-sample`).
  */
+/** A binding being added to the open field: nothing chosen yet. */
+const NO_CONNECTING = { method: '' as DataMethod | '', behavior: '', parts: [] as string[], inputs: [] as string[], group: '' }
+
 @customElement('figure-data-panel')
 export class FigureDataPanel extends localize(i18next)(LitElement) {
   private readonly help = new HelpToggles(this)
   static styles = [
+    /* The panel's scrollbars -- the sample's box among them -- in the shell's look, not the browser's. */
+    ScrollbarStyles,
     SidePanelStyles,
     css`
       :host {
         display: block;
       }
-      ul[tree] {
-        display: grid;
-        gap: 2px;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-      }
-      ul[tree] > li > button[row] {
+      /* Where the sample shows, said while editing, with the press that goes there. */
+      p[sample-where] {
         display: flex;
         flex-wrap: wrap;
-        gap: 0 6px;
-        width: 100%;
+        align-items: center;
+        gap: 4px 8px;
+        margin: 4px 0 0;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      /*
+        The fields as a table -- field, kind, what it moves -- a line between rows: a list of two-line names with their
+        kinds pushed right ran together, one field not told from the next (user 2026-11-12).
+      */
+      div[fields] {
+        display: grid;
+        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
+        border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+      }
+      div[fields] > div[head],
+      div[fields] > button[row] {
+        grid-column: 1 / -1;
+        display: grid;
+        grid-template-columns: subgrid;
+        column-gap: 8px;
+        align-items: center;
+        padding: 5px 6px;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+      }
+      div[fields] > div[head] {
+        font-size: var(--ui-t-micro, 11px);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[fields] > button[row] {
         min-height: var(--figure-control-height);
         margin: 0;
-        padding: 4px 6px;
-        border: 1px solid transparent;
-        border-radius: 6px;
+        border-top: none;
+        border-left: none;
+        border-right: none;
         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);
+      div[fields] > button[row]:hover {
+        background: var(--md-sys-color-surface-container-low, rgba(0, 0, 0, 0.03));
+      }
+      div[fields] > button[row][selected] {
+        background: var(--md-sys-color-secondary-container, rgba(0, 0, 0, 0.06));
+      }
+      div[fields] span[role='cell'] {
+        min-width: 0;
+        overflow-wrap: anywhere;
       }
-      ul[tree] > li > button[row] small {
+      div[fields] span[name] {
+        display: grid;
+      }
+      div[fields] span[name] small,
+      div[fields] span[none] {
         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;
+      div[fields] div[bindings] > h4 {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        margin: 12px 0 6px;
+        font-size: var(--ui-t-body, 13px);
+        font-weight: 600;
+      }
+      div[fields] > div[detail] {
+        grid-column: 1 / -1;
+        padding: 8px 6px;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
       }
       section[item] {
         display: grid;
@@ -156,18 +205,6 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
         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[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;
@@ -185,52 +222,132 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
         padding: 0;
       }
       /* A table's rows: the key (a code, or from and to), a cell per column, and a remove button. */
-      div[looks] {
+      /* A table's values, a box each: the value on the head line, its settings a property grid under it (user 2026-11-12). */
+      div[cases] {
         display: grid;
-        gap: 4px 6px;
+        gap: 8px;
+      }
+      div[case] {
+        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+        border-radius: 6px;
+        overflow: hidden;
+      }
+      div[case-head] {
+        display: flex;
         align-items: center;
-        overflow-x: auto;
+        gap: 6px;
+        min-height: var(--figure-control-height);
+        padding: 2px 6px;
+        background: var(--md-sys-color-surface-container-low, rgba(0, 0, 0, 0.03));
       }
-      div[looks] > small {
+      div[case-head] small {
         color: var(--md-sys-color-on-surface-variant);
       }
-      div[looks] input,
-      div[looks] select {
+      div[case-head] input {
+        flex: 1;
         min-width: 0;
-        width: 100%;
         box-sizing: border-box;
       }
-      div[looks] button[act] {
-        width: 30px;
+      div[case-head] button[act] {
+        margin-left: auto;
+      }
+      div[case] > p[hint] {
         margin: 0;
-        padding: 0;
+        padding: 6px;
+        border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+      }
+      /* The 「그대로 둠」 of the other-values box: a checkbox and its word beside the box's name. */
+      div[case-head] label[keep] {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[case-head] label[keep] input {
+        flex: none;
+        width: auto;
+        margin: 0;
+      }
+      /* A property grid: a line a setting, its name left, its field right, a line between and between the two. */
+      div[props] {
+        display: grid;
+        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+      }
+      div[props] > span {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+        min-height: var(--figure-control-height);
+        padding: 2px 6px;
+        border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+      }
+      div[props] > span:nth-child(odd) {
+        border-right: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+      }
+      div[props] > span:nth-child(odd) small {
+        overflow: hidden;
+        color: var(--md-sys-color-on-surface-variant);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      div[props] input,
+      div[props] select {
+        width: 100%;
+        min-width: 0;
+        box-sizing: border-box;
       }
       /* A colour and the button that clears it, on one line at the height of the cells beside it. */
-      div[looks] span[colour] {
+      div[props] span[colour] {
         display: flex;
+        flex: 1;
         gap: 2px;
         align-items: center;
         min-width: 0;
       }
-      div[looks] span[colour] input[type='color'] {
+      div[props] span[colour] input[type='color'] {
         flex: 1;
         height: var(--figure-control-height);
         padding: 0 2px;
       }
-      div[looks] span[colour] button[act] {
+      div[props] span[colour] button[act] {
         flex: none;
         width: 24px;
       }
-      div[chips] {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 4px 10px;
+      /* A table's targets as a property list: what each is, its name, its delete. */
+      div[targets] {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto;
         align-items: center;
+        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+        border-radius: 6px;
+        overflow: hidden;
       }
-      div[chips] label {
-        display: inline-flex;
-        gap: 4px;
-        align-items: center;
+      div[targets] > * {
+        min-width: 0;
+        padding: 2px 6px;
+        border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+      }
+      div[targets] > small[head] {
+        grid-column: 1 / -1;
+        border-top: none;
+        padding: 4px 6px;
+        color: var(--md-sys-color-on-surface-variant);
+        background: var(--md-sys-color-surface-container-low, rgba(0, 0, 0, 0.03));
+      }
+      div[targets] > span:not([none]):nth-of-type(odd) {
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: var(--ui-t-small, 11.5px);
+      }
+      div[targets] > span[none] {
+        grid-column: 1 / -1;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[targets] > button[act] {
+        margin: 0;
+        padding: 0 4px;
+        border: none;
+        border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
       }
       textarea {
         width: 100%;
@@ -238,10 +355,11 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
         box-sizing: border-box;
         font-family: var(--ui-mono, ui-monospace, monospace);
         font-size: inherit;
+        resize: vertical;
       }
-      ul[result] {
-        margin: 0;
-        padding-left: 16px;
+      /* The sample is read whole, a record of a dozen lines: room for it, not six lines of it (user 2026-11-12). */
+      textarea[sample] {
+        min-height: 240px;
       }
       md-icon {
         font-size: 16px;
@@ -255,6 +373,8 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
   @property({ type: Boolean }) locked = false
   /** The part chosen in the modeller, put among a table's parts by one button. */
   @property() selected = ''
+  /** Whether the editor shows the preview: the sample shows there only, the edit canvas keeping the figure as made. */
+  @property({ type: Boolean }) previewing = false
 
   /** The schema row chosen, by its path; its field is edited under it. */
   @state() private chosen = ''
@@ -262,7 +382,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
   /** A site's data pasted to start the schema from; nothing is kept until the author says so. */
   @state() private pasted = ''
   /** 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: '' }
+  @state() private connecting = { ...NO_CONNECTING }
   /** The binding opened to edit its rule, by id. */
   @state() private opened = ''
   /** Sample legends by role, as JSON typed; not saved. */
@@ -278,7 +398,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
     if (!asset) return nothing
     const rows = schemaRowsOf(asset)
     return html`
-      ${this.renderCapabilityData(asset)} ${this.renderSchema(asset, rows)} ${this.renderBindings(asset, rows)} ${rows.length ? this.renderSample(asset) : nothing}
+      ${this.renderCapabilityData(asset)} ${this.renderSchema(asset, rows)} ${rows.length ? this.renderSample(asset) : nothing}
     `
   }
 
@@ -296,31 +416,44 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
 
   private renderSchema(asset: FigureAsset, rows: FigureDataRow[]) {
     const schema = asset.dataInterface?.schema ?? []
+    const bindings = asset.dataInterface?.bindings ?? []
+    const choices = behaviorsOf(asset)
+    const resting = figureBindingsTakenOver(asset)
     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>
+        ? html`<div fields role="table">
+            <div head role="row">
+              <span role="columnheader">${i18next.t('figure.label.data-column-field')}</span>
+              <span role="columnheader">${i18next.t('figure.label.data-column-kind')}</span>
+              <span role="columnheader">${i18next.t('figure.label.data-column-moves')}</span>
+            </div>
+            ${rows.map(row => {
+              /* What the field moves, named, in place of a count of bindings (「작동 1개」 said nothing, user 2026-11-12). */
+              const moves = row.bindings.map(id => bindings.find(b => b.id === id)).filter((b): b is FigureDataBinding => !!b).map(b => this.bindingWhat(asset, b))
+              return html`<button
+                  row
+                  role="row"
+                  ?selected=${row.path === this.chosen}
+                  @click=${() => {
+                    this.chosen = row.path === this.chosen ? '' : row.path
+                    this.connecting = { ...NO_CONNECTING }
+                  }}
+                >
+                  <span name role="cell" style="padding-left: ${row.depth * 14}px"><span>${row.name}</span>${row.label ? html`<small>${row.label}</small>` : nothing}</span>
+                  <span role="cell" title=${kindWords(row.node)}>${kindName(row.node)}</span>
+                  <span role="cell" ?none=${!moves.length}>${moves.length ? moves.join(', ') : '—'}</span>
                 </button>
-                ${row.path === this.chosen ? this.renderField(asset, schema, row) : nothing}
-              </li>`
-            )}
-          </ul>`
+                ${row.path === this.chosen ? html`<div detail>${this.renderField(asset, schema, row)} ${this.renderFieldBindings(asset, row, choices, resting)}</div>` : nothing}`
+            })}
+          </div>`
         : html`<p hint>${i18next.t('figure.text.data-no-fields')}</p>`}
+      ${this.renderStrayBindings(asset, rows, choices, resting)} ${this.renderRotation(asset, rows)}
       ${this.renderAddField(schema, '')} ${this.renderFromSample(schema)}
     </section>`
   }
 
-  /** A field's kind in the words every screen says it in (figure-viewer kindWords). */
-  private kindWord(node: FigureDataNode): string {
-    return kindWords(node)
-  }
-
   /** 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)
@@ -424,7 +557,14 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
       this.edit({ kind: 'set-data-schema', schema: schemaWithField(schema, under, { name: named, ...nodeOfKind(a.kind) } as FigureDataField) })
       this.adding = { ...a, name: '' }
     }
-    return html`<div form>
+    const words = i18next.t(under ? 'figure.button.add-data-child' : 'figure.button.add-data-field', { parent: under })
+    /*
+      Folded under its summary, as a binding's form is: two fields always open under the table read as one more row of
+      it (user 2026-11-12). Open while the figure has no field yet: adding one is the only thing to do.
+    */
+    return html`<details add-field ?open=${!schema.length}>
+      <summary>${words}</summary>
+      <div form>
         <span>${i18next.t('figure.label.data-name')}</span>
         <input
           aria-label=${i18next.t('figure.label.data-name')}
@@ -438,8 +578,9 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
         </select>
       </div>
       <button act ?disabled=${this.locked || !named} @click=${add}>
-        <md-icon>add</md-icon>${i18next.t(under ? 'figure.button.add-data-child' : 'figure.button.add-data-field', { parent: under })}
-      </button>`
+        <md-icon>add</md-icon>${i18next.t('figure.button.add')}
+      </button>
+    </details>`
   }
 
   /** 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. */
@@ -448,7 +589,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
     let unreadable = false
     if (this.pasted.trim()) {
       try {
-        guessed = inferFigureDataSchema(JSON.parse(this.pasted))
+        guessed = inferFigureDataSchema(JSON5.parse(this.pasted))
       } catch {
         unreadable = true
       }
@@ -474,34 +615,53 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
 
   /* ---------------------------------------------------------------- the bindings */
 
+  /** What a binding moves: a table's parts, a value's behavior -- one wording for the binding's line and the field's row. */
+  private bindingWhat(asset: FigureAsset, b: FigureDataBinding): string {
+    return moveWords(dataMoveOf(asset, b.rule === 'table' ? { kind: 'table', targets: b.targets } : b.behavior))
+  }
+
   /** What a behavior moves, in the words every screen says it in (figure-viewer dataMoveOf · moveWords). */
   private behaviorName(asset: FigureAsset, b: FigureDataValueBinding['behavior']): string {
     return moveWords(dataMoveOf(asset, b))
   }
 
-  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>
+  /*
+    A field's bindings under the field, in its opened row: what the field moves and how, edited where the field is. A
+    list of bindings of its own below the fields said every field's name and move again (user 2026-11-12).
+  */
+  private renderFieldBindings(asset: FigureAsset, row: FigureDataRow, choices: BehaviorChoice[], resting: FigureRestingBinding[]) {
+    const bindings = (asset.dataInterface?.bindings ?? []).filter(b => row.bindings.includes(b.id))
+    const bindable = row.node.kind !== 'object'
+    if (!bindable && !bindings.length) return nothing
+    return html`<div bindings>
+      <h4>${i18next.t('figure.label.data-bindings-title')}${this.help.button('figure.text.data-bindings-explained')}</h4>
       ${this.help.hint('figure.text.data-bindings-explained')}
       ${bindings.map(b => this.renderBinding(asset, choices, b, resting))}
-      ${this.renderAddBinding(asset, rows, choices)}
-      ${this.renderRotation(asset, rows)}
-    </section>`
+      ${bindable ? this.renderAddBinding(asset, row, choices) : nothing}
+    </div>`
+  }
+
+  /** A binding no field reads -- its field renamed or taken out -- kept in sight below the fields, to delete or fix. */
+  private renderStrayBindings(asset: FigureAsset, rows: FigureDataRow[], choices: BehaviorChoice[], resting: FigureRestingBinding[]) {
+    const read = new Set(rows.flatMap(r => r.bindings))
+    const stray = (asset.dataInterface?.bindings ?? []).filter(b => !read.has(b.id))
+    if (!stray.length) return nothing
+    return html`<div bindings>
+      <h4>${i18next.t('figure.label.data-bindings-without-field')}</h4>
+      ${stray.map(b => this.renderBinding(asset, choices, b, resting))}
+    </div>`
   }
 
   private renderBinding(asset: FigureAsset, choices: BehaviorChoice[], b: FigureDataBinding, resting: FigureRestingBinding[]) {
     const open = this.opened === b.id
     const set = (next: FigureDataBinding) => this.edit({ kind: 'set-data-binding', binding: next })
-    const what = moveWords(dataMoveOf(asset, b.rule === 'table' ? { kind: 'table', targets: b.targets } : b.behavior))
+    const what = this.bindingWhat(asset, b)
     const rests = resting.some(r => r.id === b.id)
     return html`<section item>
       <div head>
         <button line aria-expanded=${open ? 'true' : 'false'} @click=${() => (this.opened = open ? '' : b.id)}>
           <strong>${b.label ?? b.accessor}</strong> → ${what}
-          <small>${i18next.t('figure.label.data-method-' + methodOf(b))}${rests ? html` <span rests>${i18next.t('figure.label.data-binding-resting')}</span>` : nothing}</small>
+          <small>${i18next.t('figure.text.data-method-does-' + methodOf(b))}${rests ? html` <span rests>${i18next.t('figure.label.data-binding-resting')}</span>` : nothing}</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>delete</md-icon>
@@ -604,7 +764,11 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
         : nothing}`
   }
 
-  /** Which parts, controls and motion group a table shows on: chips to tick, and the part chosen in the modeller by one button. */
+  /*
+    Which parts, controls and motion group a table shows on, as a property list: a row a target chosen -- what it is,
+    its name, its delete -- and one choice to add the next. Every part and control as a tick box in one heap took two
+    screens and hid which were chosen (user 2026-11-12).
+  */
   private renderTargets(
     parts: string[],
     inputs: Array<{ id: string; label: string }>,
@@ -612,36 +776,56 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
     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}
+    const chosenParts = t.parts ?? []
+    const chosenInputs = t.inputs ?? []
+    const freeParts = parts.filter(p => !chosenParts.includes(p))
+    const freeInputs = inputs.filter(i => !chosenInputs.includes(i.id))
+    const labelOf = (id: string) => inputs.find(i => i.id === id)?.label ?? id
+    const row = (kind: string, name: string, remove: () => void) =>
+      html`<span>${i18next.t(kind)}</span><span>${name}</span>
+        <button act ?disabled=${this.locked} title=${i18next.t('figure.button.data-remove-target')} @click=${remove}><md-icon>delete</md-icon></button>`
+    const add = (e: Event) => {
+      const select = e.target as HTMLSelectElement
+      const [kind, id] = [select.value.slice(0, select.value.indexOf(':')), select.value.slice(select.value.indexOf(':') + 1)]
+      select.value = ''
+      if (kind === 'part') on.part(id, true)
+      else if (kind === 'input') on.input(id, true)
+    }
+    return html`<div targets>
+        <small head>${i18next.t('figure.label.data-targets')}</small>
+        ${chosenParts.map(p => row('figure.label.data-target-parts', p, () => on.part(p, false)))}
+        ${chosenInputs.map(id => row('figure.label.data-target-inputs', labelOf(id), () => on.input(id, false)))}
+        ${chosenParts.length || chosenInputs.length ? nothing : html`<span none>${i18next.t('figure.text.data-no-targets')}</span>`}
       </div>
-      ${inputs.length
-        ? html`<span>${i18next.t('figure.label.data-target-inputs')}</span>
-            <div chips>
-              ${inputs.map(i => html`<label><input type="checkbox" .checked=${!!t.inputs?.includes(i.id)} ?disabled=${this.locked} @change=${(e: 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>`
+      <div form>
+        <span>${i18next.t('figure.label.data-target-add')}</span>
+        <select ?disabled=${this.locked || !(freeParts.length + freeInputs.length)} .value=${''} @change=${add}>
+          <option value="">${i18next.t('figure.label.data-target-choose')}</option>
+          ${freeParts.length
+            ? html`<optgroup label=${i18next.t('figure.label.data-target-parts')}>${freeParts.map(p => html`<option value=${'part:' + p}>${p}</option>`)}</optgroup>`
+            : nothing}
+          ${freeInputs.length
+            ? html`<optgroup label=${i18next.t('figure.label.data-target-inputs')}>${freeInputs.map(i => html`<option value=${'input:' + i.id}>${i.label}</option>`)}</optgroup>`
+            : nothing}
+        </select>
+        ${this.selected && freeParts.includes(this.selected)
+          ? html`<span></span><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}
+        ${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>`
   }
 
   /** 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>${c.label}</small>`
         : html`<small>${i18next.t('figure.label.data-column-' + c.kind)}</small>`
     )
   }
@@ -665,7 +849,9 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
         </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) => {
+        /* Its unit and range in the field, not beside the name: 「fl-hip (deg -30~30)」 took two lines (user 2026-11-12). */
+        const range = [c.min !== undefined && c.max !== undefined ? `${c.min}~${c.max}` : '', c.unit ?? ''].filter(Boolean).join(' ')
+        return html`<input type="number" step="any" min=${c.min ?? ''} max=${c.max ?? ''} placeholder=${range} title=${range} aria-label=${c.label} .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]
@@ -690,16 +876,32 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
     })
   }
 
+  /*
+    One value's settings as a property grid, a line a setting -- colour, effect, a control's value, clip, speed, pause --
+    its name left, its field right. A column a setting ran wider than the panel as controls were added (user 2026-11-12).
+  */
+  private renderLook(asset: FigureAsset, columns: TableColumn[], look: FigureDataTableEntry, write: (look: FigureDataTableEntry) => void) {
+    if (!columns.length) return html`<p hint>${i18next.t('figure.text.data-table-needs-target')}</p>`
+    const heads = this.columnHeads(columns)
+    const cells = this.lookCells(asset, columns, look, write)
+    return html`<div props>${columns.map((_, i) => html`<span>${heads[i]}</span><span>${cells[i]}</span>`)}</div>`
+  }
+
   /** 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) {
+  private renderOtherwise(asset: FigureAsset, b: FigureDataTableBinding, columns: TableColumn[], needed: boolean, set: (next: FigureDataBinding) => void) {
     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>delete</md-icon></button>`}
+    /* 「그대로 둠」 (ADR-0166 amendment 1): a value the table has no row for leaves the targets as it last showed them. */
+    const keep = look.keep === true
+    return html`<div case>
+      <div case-head>
+        <strong>${i18next.t('figure.label.data-otherwise')}</strong>
+        <label keep><input type="checkbox" .checked=${keep} ?disabled=${this.locked} @change=${(e: Event) => set(tableWithKeep(b, (e.target as HTMLInputElement).checked))} />${i18next.t('figure.label.data-keep')}</label>
+        ${needed ? nothing : html`<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => set({ ...b, table: rest })}><md-icon>delete</md-icon></button>`}
+      </div>
+      ${keep ? html`<p hint>${i18next.t('figure.text.data-keep')}</p>` : this.renderLook(asset, columns, look, l => set(tableWithLook(b, 'default', l)))}
     </div>`
   }
 
@@ -711,6 +913,8 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
     const columns = tableColumnsOf(asset, b)
     const node = fieldAt(asset.dataInterface?.schema ?? [], b.accessor.replace(/\[\d+\]/g, '[]'))
     const boolean = node?.kind === 'boolean'
+    /* A number's codes are numbers, as its data gives them (ADR-0166 amendment 1). */
+    const numeric = node?.kind === 'number'
     const rows = Object.entries(b.table).filter(([k]) => k !== 'default')
     const domain = node ? domainOf(node).map(String) : []
     const covered = domain.length > 0 && domain.every(v => b.table[v] !== undefined)
@@ -722,26 +926,31 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
     }
     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()
+      if (!key || key === 'default' || rows.some(([k], j) => j !== i && k === key) || (numeric && !Number.isFinite(Number(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>
+    /* A value a box: its code on the box's head line, its settings a property grid under it. */
+    return html`<div cases>
         ${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>delete</md-icon></button>`}`
+          ([k, look], i) => html`<div case>
+            <div case-head>
+              <small>${i18next.t('figure.label.data-case-value')}</small>
+              ${boolean
+                ? html`<strong>${word(k)}</strong>`
+                : html`<input .value=${k} inputmode=${numeric ? 'decimal' : 'text'} aria-label=${i18next.t('figure.label.data-case-value')} ?disabled=${this.locked} @change=${(e: Event) => rekey(i, (e.target as HTMLInputElement).value)} />`}
+              ${boolean || (rows.length < 2 && domain.length > 0)
+                ? nothing
+                : html`<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => rekeyed(rows.filter((_, j) => j !== i))}><md-icon>delete</md-icon></button>`}
+            </div>
+            ${this.renderLook(asset, columns, look, l => set(tableWithLook(b, k, l)))}
+          </div>`
         )}
+        ${this.renderOtherwise(asset, b, columns, domain.length > 0 && !covered, set)}
       </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)), {}]])}>
+        : html`<button act ?disabled=${this.locked} @click=${() => rekeyed([...rows, [(numeric ? freeNumberCodeOf : freeCodeOf)(rows.map(([k]) => k)), {}]])}>
             <md-icon>add</md-icon>${i18next.t('figure.button.add-data-case')}
           </button>`}`
   }
@@ -771,17 +980,21 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
     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>
+    return html`<div cases>
         ${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.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>delete</md-icon></button>`
+          return html`<div case>
+            <div case-head>
+              <input type="number" step="any" aria-label=${i18next.t('figure.label.data-range-from')} placeholder=${i18next.t('figure.label.data-range-from')} .value=${e.from} ?disabled=${this.locked} @change=${(ev: Event) => rekey(i, 'from', (ev.target as HTMLInputElement).value)} />
+              <span>~</span>
+              <input type="number" step="any" aria-label=${i18next.t('figure.label.data-range-to')} placeholder=${i18next.t('figure.label.data-range-to')} .value=${e.to} ?disabled=${this.locked} @change=${(ev: Event) => rekey(i, 'to', (ev.target as HTMLInputElement).value)} />
+              <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-range')} @click=${() => set(tableWithKeys(b, rows.filter((_, j) => j !== i)))}><md-icon>delete</md-icon></button>
+            </div>
+            ${this.renderLook(asset, columns, look, l => set(tableWithLook(b, k, l)))}
+          </div>`
         })}
+        ${this.renderOtherwise(asset, b, columns, false, set)}
       </div>
-      ${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')}
@@ -824,48 +1037,38 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
    * 「연결 추가」 (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')
+  /** A binding added to the field whose row is open: how it is read, and what it moves. */
+  private renderAddBinding(asset: FigureAsset, row: FigureDataRow, choices: BehaviorChoice[]) {
     const a = this.connecting
-    /* 「새 필드」: 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 methods = methodsOf(row.node, 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 fitting = !table ? choices.filter(c => fitsField(row.node, c)) : []
     const choice = fitting.find(c => c.key === a.behavior) ?? fitting[0]
     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 ready = table ? aimed : !!choice
     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 } : {}) })
+        const { binding } = tableDraftOf(asset, { path: row.path, node: row.node }, method as 'code' | 'ranges', targets)
+        this.edit({ kind: 'set-data-binding', binding })
         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')
+        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: '' }
+      this.connecting = { ...NO_CONNECTING }
     }
     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) => 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>
-        ${row === null
-          ? html`<span>${i18next.t('figure.label.data-name')}</span>
-              <input .value=${a.name} @input=${(e: Event) => set({ name: typed(e) })} />`
-          : nothing}
+    /* Folded until asked for: open under a field's binding, its fields read as that binding's own (user 2026-11-12). */
+    return html`<details add-binding>
+      <summary>${i18next.t('figure.button.add-data-binding')}</summary>
+      <div form>
         <span>${i18next.t('figure.label.data-method')}</span>
         ${methods.length === 1
           ? /* One way only (a text is read by a code table): said, not offered as a choice of one (sweep 2026-10-27 U10). */
@@ -890,8 +1093,9 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
       ${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>`
+        <md-icon>add</md-icon>${i18next.t('figure.button.add')}
+      </button>
+    </details>`
   }
 
   /**
@@ -973,43 +1177,28 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
 
   /** 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)
+    /* Written and read as JSON5: names without quotes, comments and a last comma are allowed when typed by hand (user 2026-11-12). */
+    const text = this.sample || JSON5.stringify(figureDataExample(asset.dataInterface!), null, 2)
     let data: unknown
     let unreadable = false
     try {
-      data = JSON.parse(text)
+      data = JSON5.parse(text)
     } catch {
       unreadable = true
     }
     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')}
-      <textarea .value=${text} @input=${(e: Event) => this.try((e.target as HTMLTextAreaElement).value)}></textarea>
+      <textarea sample .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>`
-              )}
-              ${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>`}
+          : nothing}
       ${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
@@ -1022,25 +1211,24 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
         />
         ${i18next.t('figure.label.data-sample-in-preview')}
       </label>
+      ${this.sampling && !this.previewing
+        ? html`<p hint sample-where>
+            ${i18next.t('figure.text.data-sample-shown-in-preview')}
+            <button quiet @click=${() => this.dispatchEvent(new CustomEvent('show-preview', { bubbles: true, composed: true }))}>
+              ${i18next.t('figure.button.data-sample-show-preview')}
+            </button>
+          </p>`
+        : nothing}
     </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)
+        out[role] = JSON5.parse(text)
       } catch {
         /* Not JSON yet: the figure's own table shows. */
       }
@@ -1075,7 +1263,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
   private try(typed: string) {
     this.sample = typed
     try {
-      this.tell(JSON.parse(typed))
+      this.tell(JSON5.parse(typed))
     } catch {
       /* Not JSON yet: the preview keeps what it ran on. */
     }
@@ -1101,7 +1289,3 @@ function nodeOfKind(kind: FigureDataNode['kind']): FigureDataNode {
 /** 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 ?? ''))
 
-/** 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`
-}