@things-factory/figure-ui 10.1.272 → 10.1.273

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

@@ -1,14 +1,16 @@
 import { __decorate, __metadata } from "tslib";
 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';
 import { unitWord } from './unit-words.js';
 import { FIGURE_UNITS, figureDataExample, inferFigureDataSchema } from '@hatiolab/figure-model';
-import { accessorOfRow, behaviorsOf, bindingDraftOf, domainOf, endlessJointsOf, fieldAt, fieldOfKind, fitsField, freeCodeOf, legendRoleOf, methodOf, methodsOf, partsOf, rotationStepsOf, sampleOf, schemaRowsOf, schemaWithField, schemaWithFieldReplaced, schemaWithoutField, schemaFollowingCodes, stateInputsOf, tableColumnsOf, tableDraftOf, tableWithKeys, tableWithLook, tableWithTargets } from './data-interface.js';
+import { accessorOfRow, behaviorsOf, bindingDraftOf, domainOf, endlessJointsOf, fieldAt, fieldOfKind, fitsField, freeCodeOf, legendRoleOf, methodOf, methodsOf, freeNumberCodeOf, tableWithKeep, partsOf, rotationStepsOf, sampleOf, schemaRowsOf, schemaWithField, schemaWithFieldReplaced, schemaWithoutField, schemaFollowingCodes, stateInputsOf, tableColumnsOf, tableDraftOf, tableWithKeys, tableWithLook, tableWithTargets } from './data-interface.js';
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
 import { 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 } from '@hatiolab/things-scene';
 import { consumerDescriptors } from './consumer-capabilities.js';
 import { HelpToggles } from './help.js';
@@ -25,6 +27,8 @@ const KINDS = ['number', 'boolean', 'text', 'object', 'list'];
  * 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: '', behavior: '', parts: [], inputs: [], group: '' };
 let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
@@ -32,13 +36,15 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         this.locked = false;
         /** The part chosen in the modeller, put among a table's parts by one button. */
         this.selected = '';
+        /** Whether the editor shows the preview: the sample shows there only, the edit canvas keeping the figure as made. */
+        this.previewing = false;
         /** The schema row chosen, by its path; its field is edited under it. */
         this.chosen = '';
         this.adding = { name: '', kind: 'number' };
         /** A site's data pasted to start the schema from; nothing is kept until the author says so. */
         this.pasted = '';
         /** A binding as it is being added: the field (or a new field's name), the method, the behavior or the table's targets. */
-        this.connecting = { path: '', name: '', method: '', behavior: '', parts: [], inputs: [], group: '' };
+        this.connecting = { ...NO_CONNECTING };
         /** The binding opened to edit its rule, by id. */
         this.opened = '';
         /** Sample legends by role, as JSON typed; not saved. */
@@ -50,45 +56,87 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         this.sampling = false;
     }
     static { this.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;
@@ -132,18 +180,6 @@ let FigureDataPanel = 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;
@@ -161,52 +197,132 @@ let FigureDataPanel = 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%;
@@ -214,10 +330,11 @@ let FigureDataPanel = 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;
@@ -232,7 +349,7 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
             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}
     `;
     }
     /** The data a product's capability the figure wears reads itself (ADR-0167 14): said, read only. */
@@ -248,27 +365,43 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
     /* ---------------------------------------------------------------- the schema */
     renderSchema(asset, rows) {
         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).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). */
-    kindWord(node) {
-        return kindWords(node);
-    }
     /** The chosen field's own settings, and a field added under it when it holds fields. */
     renderField(asset, schema, row) {
         const field = fieldAt(schema, row.path);
@@ -379,7 +512,14 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
             this.edit({ kind: 'set-data-schema', schema: schemaWithField(schema, under, { name: named, ...nodeOfKind(a.kind) }) });
             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')}
@@ -393,8 +533,9 @@ let FigureDataPanel = 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. */
     renderFromSample(schema) {
@@ -402,7 +543,7 @@ let FigureDataPanel = 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;
@@ -427,32 +568,51 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
     </details>`;
     }
     /* ---------------------------------------------------------------- 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. */
+    bindingWhat(asset, b) {
+        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). */
     behaviorName(asset, b) {
         return moveWords(dataMoveOf(asset, b));
     }
-    renderBindings(asset, rows) {
-        const bindings = asset.dataInterface?.bindings ?? [];
-        const choices = behaviorsOf(asset);
-        const resting = figureBindingsTakenOver(asset);
-        return html `<section>
-      <h3>${i18next.t('figure.label.data-bindings')}${this.help.button('figure.text.data-bindings-explained')}</h3>
+    /*
+      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).
+    */
+    renderFieldBindings(asset, row, choices, resting) {
+        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. */
+    renderStrayBindings(asset, rows, choices, resting) {
+        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>`;
     }
     renderBinding(asset, choices, b, resting) {
         const open = this.opened === b.id;
         const set = (next) => 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>
@@ -556,36 +716,61 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
           <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. */
+    /*
+      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).
+    */
     renderTargets(parts, inputs, groups, t, on) {
-        const chosen = (e) => e.target.checked;
-        return html `<div form>
-      <span>${i18next.t('figure.label.data-target-parts')}</span>
-      <div chips>
-        ${parts.map(p => html `<label><input type="checkbox" .checked=${!!t.parts?.includes(p)} ?disabled=${this.locked} @change=${(e) => on.part(p, chosen(e))} />${p}</label>`)}
-        ${this.selected && parts.includes(this.selected) && !t.parts?.includes(this.selected)
-            ? html `<button act ?disabled=${this.locked} @click=${() => on.part(this.selected, true)}><md-icon>add</md-icon>${i18next.t('figure.button.data-add-selected-part', { part: this.selected })}</button>`
-            : nothing}
+        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) => inputs.find(i => i.id === id)?.label ?? id;
+        const row = (kind, name, remove) => 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) => {
+            const select = e.target;
+            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) => on.input(i.id, chosen(e))} />${i.label}</label>`)}
-            </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
+        ${groups.length
             ? html `<span>${i18next.t('figure.label.data-target-group')}</span>
-            <select ?disabled=${this.locked} @change=${(e) => on.group(e.target.value)}>
-              <option value="" ?selected=${!t.group}>${i18next.t('figure.label.data-none')}</option>
-              ${groups.map(g => html `<option value=${g.id} ?selected=${g.id === t.group}>${g.label}</option>`)}
-            </select>`
+              <select ?disabled=${this.locked} @change=${(e) => on.group(e.target.value)}>
+                <option value="" ?selected=${!t.group}>${i18next.t('figure.label.data-none')}</option>
+                ${groups.map(g => html `<option value=${g.id} ?selected=${g.id === t.group}>${g.label}</option>`)}
+              </select>`
             : nothing}
-    </div>`;
+      </div>`;
     }
     /** The column heads of a table's rows, after the key's own one or two. */
     columnHeads(columns) {
         return columns.map(c => c.kind === 'value'
-            ? html `<small>${c.label}${c.unit ? ` (${c.unit}${c.min !== undefined && c.max !== undefined ? ` ${c.min}~${c.max}` : ''})` : ''}</small>`
+            ? html `<small>${c.label}</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. */
@@ -607,7 +792,9 @@ let FigureDataPanel = 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) => {
+                /* 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) => {
                     const n = e.target.valueAsNumber;
                     const values = { ...look.values };
                     if (Number.isNaN(n))
@@ -633,16 +820,32 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
       </select>`;
         });
     }
+    /*
+      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).
+    */
+    renderLook(asset, columns, look, write) {
+        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. */
-    renderOtherwise(asset, b, columns, needed, set, keyCells) {
+    renderOtherwise(asset, b, columns, needed, set) {
         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) => set(tableWithKeep(b, e.target.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>`;
     }
     /**
@@ -653,6 +856,8 @@ let FigureDataPanel = 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);
@@ -664,25 +869,30 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         };
         const rekey = (i, typed) => {
             const key = typed.trim();
-            if (!key || key === 'default' || rows.some(([k], j) => j !== i && k === key))
+            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) => (boolean ? i18next.t(k === 'true' ? 'figure.label.data-true' : 'figure.label.data-false') : k);
-        return html `<div looks style="grid-template-columns: ${gridOf(1, columns.length)}">
-        <small>${i18next.t('figure.label.data-case-value')}</small>${this.columnHeads(columns)}<span></span>
-        ${rows.map(([k, look], i) => html `${boolean
-            ? html `<span>${word(k)}</span>`
-            : html `<input .value=${k} aria-label=${i18next.t('figure.label.data-case-value')} ?disabled=${this.locked} @change=${(e) => rekey(i, e.target.value)} />`}
-            ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, k, l)))}
-            ${boolean || rows.length < 2 && domain.length > 0
-            ? html `<span></span>`
-            : html `<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => rekeyed(rows.filter((_, j) => j !== i))}><md-icon>delete</md-icon></button>`}`)}
+        /* 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 `<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) => rekey(i, e.target.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>`}`;
     }
@@ -713,17 +923,21 @@ let FigureDataPanel = 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) => rekey(i, 'from', ev.target.value)} />
-            <input type="number" step="any" .value=${e.to} ?disabled=${this.locked} @change=${(ev) => rekey(i, 'to', ev.target.value)} />
-            ${this.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) => rekey(i, 'from', ev.target.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) => rekey(i, 'to', ev.target.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')}
@@ -766,27 +980,23 @@ let FigureDataPanel = 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.
      */
-    renderAddBinding(asset, rows, choices) {
-        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. */
+    renderAddBinding(asset, row, choices) {
         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) ? a.method : 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) => (this.connecting = { ...a, ...patch });
         const typed = (e) => e.target.value;
-        const name = a.name.trim();
         const targets = { parts: a.parts, inputs: a.inputs, ...(a.group ? { group: a.group } : {}) };
         const aimed = a.parts.length > 0 || a.inputs.length > 0 || !!a.group;
-        const ready = table ? aimed && (row !== null || /^[A-Za-z_][\w-]*$/.test(name)) : !!choice && !!row;
+        const ready = table ? aimed : !!choice;
         const add = () => {
             if (table) {
-                const { binding, schema } = tableDraftOf(asset, row ? { path: row.path, node: row.node } : { name }, method, targets);
-                this.edit({ kind: 'set-data-binding', binding, ...(schema ? { schema } : {}) });
+                const { binding } = tableDraftOf(asset, { path: row.path, node: row.node }, method, targets);
+                this.edit({ kind: 'set-data-binding', binding });
                 this.opened = binding.id;
             }
             else {
@@ -796,19 +1006,13 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
                 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, id, on) => (on ? [...list, id] : list.filter(x => x !== id));
-        return html `<div form>
-        <span>${i18next.t('figure.label.data-field')}</span>
-        <select @change=${(e) => 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) => 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). */
@@ -833,8 +1037,9 @@ let FigureDataPanel = 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>`;
     }
     /**
      * 「＋ 회전」: a joint that turns without end, turned by the data -- on, speed in rpm, direction -- in one step. The
@@ -913,41 +1118,29 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
     /* ---------------------------------------------------------------- the sample */
     /** Data to try, read the way a placed figure reads it: what it moves, or why it is refused; in the preview, the figure running on it. */
     renderSample(asset) {
-        const text = this.sample || JSON.stringify(figureDataExample(asset.dataInterface), null, 2);
+        /* 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;
         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.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) => this.try(e.target.value)}></textarea>
+      <textarea sample .value=${text} @input=${(e) => this.try(e.target.value)}></textarea>
       ${unreadable
             ? html `<p hint>${i18next.t('figure.text.data-not-json')}</p>`
             : read.issues.length
                 ? html `<p hint>${read.issues.map(i => i18next.t('figure.text.data-value-' + i.reason, { path: i.path || '-' })).join(' · ')}</p>`
-                : html `<ul result>
-              ${Object.entries(r.states).map(([input, s]) => html `<li>${asset.stateInputs?.[input]?.label ?? input} = ${s.value}</li>`)}
-              ${Object.entries(r.palette).map(([token, colour]) => html `<li>${token} = ${colour}</li>`)}
-              ${Object.entries(r.motion).map(([group, m]) => html `<li>
-                    ${(asset.motionGroups ?? []).find(g => g.id === group)?.label ?? group}:
-                    ${[m.clip, m.speed === undefined ? '' : `× ${m.speed}`, m.paused ? i18next.t('figure.label.data-paused') : ''].filter(Boolean).join(' ')}
-                  </li>`)}
-              ${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
@@ -960,17 +1153,16 @@ let FigureDataPanel = 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. */
-    renderTableUse(asset, b, use) {
-        if (!use || use.value === undefined)
-            return nothing;
-        const word = (v) => (typeof v === 'boolean' || v === 'true' || v === 'false' ? i18next.t(String(v) === 'true' ? 'figure.label.data-true' : 'figure.label.data-false') : String(v));
-        const row = use.key === null ? i18next.t('figure.label.data-none') : use.key === 'default' ? i18next.t('figure.label.data-otherwise') : word(use.key);
-        const from = use.source === 'figure' ? i18next.t('figure.label.data-table-own') : i18next.t('figure.label.data-table-legend', { name: use.legend ?? '' });
-        return html `<li>${b.label ?? b.accessor} = ${word(use.value)} → ${row} <small>(${from})</small></li>`;
-    }
     /** The sample legends as read: by role, those that are JSON. */
     sampleLegends() {
         const out = {};
@@ -978,7 +1170,7 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
             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. */
@@ -1011,7 +1203,7 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
     try(typed) {
         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. */
@@ -1037,6 +1229,10 @@ __decorate([
     property(),
     __metadata("design:type", Object)
 ], FigureDataPanel.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureDataPanel.prototype, "previewing", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -1087,8 +1283,4 @@ function nodeOfKind(kind) {
 }
 /** A value in a sentence: a text as it is, anything else as JSON. */
 const shownValue = (v) => (typeof v === 'string' ? v : JSON.stringify(v ?? ''));
-/** A table row's columns: the key's one or two, a cell per column, and the remove button. */
-function gridOf(keyCells, columns) {
-    return `${'minmax(64px, 1fr) '.repeat(keyCells)}${'minmax(72px, 1fr) '.repeat(columns)}30px`;
-}
 //# sourceMappingURL=figure-data-panel.js.map