@things-factory/figure-ui 10.1.272 → 10.1.273

package/client/modeller/figure-preview.ts

@@ -1,8 +1,10 @@
+import '@material/web/icon/icon.js'
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { unitWord } from './unit-words.js'
+import { scrubLabel } from './live.js'
 import * as THREE from 'three'
 import { compileFigureAsset } from '@hatiolab/figure-model'
 import type { FigureAsset, FigureDataRow, FigureDataValue, FigureGraphStateInput } from '@hatiolab/figure-model'
@@ -96,21 +98,43 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       background-color: rgba(28, 28, 30, 0.72);
       border-radius: 4px;
     }
-    div[foot] {
+    /*
+      The legend, the size sliders and the controls in one column over the stage: the controls take what is left under
+      the two above and scroll inside it. A tall robot's rows in a short preview ran off the stage's top, the keep and
+      fold buttons with them, and nothing scrolled (2026-11-12); a legend on two lines in a narrow preview is room taken too.
+    */
+    div[over] {
       position: absolute;
-      left: 8px;
-      right: 8px;
-      bottom: 8px;
+      inset: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+      pointer-events: none;
+    }
+    div[over] > div[legend],
+    div[over] > div[sizes] {
+      pointer-events: auto;
+    }
+    div[foot] {
+      align-self: stretch;
+      flex: 1;
+      min-height: 0;
       display: flex;
       flex-wrap: wrap-reverse;
       justify-content: space-between;
       align-items: flex-end;
+      align-content: flex-start;
       gap: 8px;
       pointer-events: none;
     }
     div[foot] > * { pointer-events: auto; }
-    div[setup] { max-width: min(320px, 100%); padding: 12px; border-radius: 8px; background: rgba(28,28,30,.9); color: #fff; display: grid; gap: 8px; }
-    div[setup] p { margin: 0; line-height: 1.5; }
+    /* One line over the figure -- the part and the button -- its words in its title: three lines covered the figure (user 2026-11-12). */
+    div[setup] { max-width: min(320px, 100%); box-sizing: border-box; padding: 6px 8px; border-radius: 8px; background: rgba(28,28,30,.9); color: #fff; display: flex; align-items: center; gap: 6px; font-size: var(--ui-t-micro, 11px); }
+    div[setup] select { flex: 1 1 auto; }
+    div[setup] button { flex: none; white-space: nowrap; }
+    /* The controls' last row: as wide as they are, a line over it in place of a box of its own. */
+    div[clips] div[setup] { max-width: none; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0; color: inherit; }
     /* The help's choice and button in the look of the controls beside it, not the browser's grey (sweep 2026-10-27 U7). */
     div[setup] select,
     div[setup] button {
@@ -133,9 +157,8 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     }
     /* Which is which: side by side means nothing without a legend. */
     div[legend] {
-      position: absolute;
-      top: 8px;
-      left: 8px;
+      max-width: 100%;
+      box-sizing: border-box;
       display: flex;
       gap: 6px;
       padding: 4px 8px;
@@ -180,13 +203,10 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     }
     /* The one figure's size: under the legend, in the controls' look. */
     div[sizes] {
-      position: absolute;
-      top: 40px;
-      left: 8px;
       display: grid;
       gap: 6px;
       padding: 8px 10px;
-      max-width: calc(100% - 16px);
+      max-width: 100%;
       box-sizing: border-box;
       color: rgba(255, 255, 255, 0.92);
       background-color: rgba(28, 28, 30, 0.72);
@@ -207,8 +227,12 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       font-variant-numeric: tabular-nums;
       text-align: right;
     }
-    div[sizes] p[said] {
-      margin: 0;
+    /* The size said at the legend's end, on its line: a box of its own under the legend took a second line (user 2026-11-12). */
+    div[legend] span[said] {
+      padding-left: 6px;
+      border-left: 1px solid rgba(255, 255, 255, 0.22);
+      align-self: center;
+      white-space: nowrap;
       font-variant-numeric: tabular-nums;
       font-weight: 600;
     }
@@ -223,8 +247,12 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     */
     div[clips] {
       margin-left: auto;
+      max-height: 100%;
+      box-sizing: border-box;
+      overflow-y: auto;
+      overscroll-behavior: contain;
       display: grid;
-      grid-template-columns: auto 20px 96px 44px;
+      grid-template-columns: max-content 20px 96px 44px;
       gap: 6px 8px;
       align-items: center;
       padding: 8px 10px;
@@ -241,6 +269,10 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       grid-template-columns: subgrid;
       align-items: center;
     }
+    /* A name and its unit on one line: 「position.x」 put its 「mm」 on a second line with room beside it (user 2026-11-12). */
+    div[clips] label > span:first-child {
+      white-space: nowrap;
+    }
     /* A motion group's clip: as wide as the dial, slider and value together, so its name reads. */
     div[clips] select {
       grid-column: 2 / -1;
@@ -303,9 +335,65 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     div[clips] button[fold-controls]:hover {
       opacity: 1;
     }
-    div[clips] button[pose] {
-      align-self: stretch;
-      padding: 4px 8px;
+    /* The keep, clear and fold line, and the size help's, stay in sight while the rows between them scroll. */
+    div[clips] div[actions],
+    div[clips] div[setup] {
+      position: sticky;
+      z-index: 1;
+      margin-left: -10px;
+      margin-right: -10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      background-color: rgba(28, 28, 30, 0.96);
+    }
+    div[clips] div[actions] {
+      top: -8px;
+      margin-top: -8px;
+      padding-top: 8px;
+      padding-bottom: 4px;
+    }
+    div[clips] div[setup] {
+      bottom: -8px;
+      margin-bottom: -8px;
+      padding-bottom: 8px;
+    }
+    div[clips] div[actions] {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      min-width: 0;
+    }
+    /* Folded, the box is as wide as its button: the icon and the words that say it opens the controls. */
+    div[clips][folded] {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 6px;
+    }
+    div[clips][folded] button[fold-controls] {
+      gap: 4px;
+      padding: 2px 4px;
+      font-size: var(--ui-t-micro, 11px);
+    }
+    /* An icon as tall as the two buttons beside it, at the line's right end. */
+    div[clips] button[fold-controls] {
+      display: inline-flex;
+      align-items: center;
+    }
+    div[clips] button[fold-controls] md-icon {
+      --md-icon-size: 16px;
+    }
+    div[clips] div[actions] button[fold-controls] {
+      margin-left: auto;
+      padding: 2px 3px;
+      border: 1px solid transparent;
+    }
+    /* On one line with the fold, each word on one line: a label broken inside a word ("기본으 / 로") read badly (user 2026-11-12). */
+    div[clips] button[pose],
+    div[clips] button[clear-tried] {
+      flex: none;
+      white-space: nowrap;
+      padding: 3px 8px;
       font: inherit;
       font-size: var(--ui-t-micro, 11px);
       color: rgba(255, 255, 255, 0.92);
@@ -314,7 +402,13 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       border-radius: 5px;
       cursor: pointer;
     }
-    div[clips] button[pose]:hover {
+    div[clips] button[pose]:disabled,
+    div[clips] button[clear-tried]:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+    div[clips] button[pose]:not(:disabled):hover,
+    div[clips] button[clear-tried]:not(:disabled):hover {
       background-color: rgba(255, 255, 255, 0.24);
     }
     div[clips] span[drive] {
@@ -326,7 +420,20 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       accent-color: var(--md-sys-color-primary);
     }
     /* A value typed, not slid: in the look of the group's clip choice, starting where the sliders start. */
-    div[clips] input:not([type='range']) {
+    /* A name that scrubs its value, in the look the side panel gives it (figure-viewer side-panel-styles \`[scrub]\`). */
+    div[clips] label > span[scrub] {
+      cursor: ew-resize;
+      user-select: none;
+      touch-action: none;
+    }
+    /* A check box in the dial's column, where every field starts. */
+    div[clips] input[type='checkbox'] {
+      grid-column: 2 / -1;
+      justify-self: start;
+      width: auto;
+      margin: 0;
+    }
+    div[clips] input:not([type='range']):not([type='checkbox']) {
       box-sizing: border-box;
       min-width: 0;
       font: inherit;
@@ -335,9 +442,15 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       border: 1px solid rgba(255, 255, 255, 0.22);
       border-radius: 5px;
     }
-    div[clips] input:not([type='range']):not([type='number']) {
-      grid-column: 3 / -1;
+    /*
+      Three widths only: a slider, its value's box, and a field that is the whole row's -- a choice, a text, a number with
+      no range -- from where the dial starts to the right edge, as the choices are (user 2026-11-12: every width differed).
+    */
+    div[clips] input:not([type='range']):not([type='number']):not([type='checkbox']),
+    div[clips] input[wide] {
+      grid-column: 2 / -1;
       width: auto;
+      padding: 1px 4px;
     }
     /* A control's value, typed where the slider cannot land on it (a step of the range's hundredth, robot dog 2026-11-03). */
     div[clips] input[typed] {
@@ -347,7 +460,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       font-variant-numeric: tabular-nums;
     }
     div[clips] label[sampled] output {
-      grid-column: 3 / -1;
+      grid-column: 2 / -1;
       text-align: left;
     }
     div[clips] output {
@@ -449,7 +562,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       ${this.tags.length ? html`<div tags>${this.tags.map(t => html`<span style=${`left:${t.x}px;top:${t.y}px`}>${t.name}</span>`)}</div>` : nothing}
       ${this.cannot
         ? html`<div cannot>${this.cannot}</div>`
-        : html`<div legend>
+        : html`<div over><div legend>
               ${(['one', 'eight'] as const).map(
                 way => html`<button way=${way} aria-pressed=${String(this.way === way)} @click=${() => this.chooseWay(way)}>${i18next.t(`figure.label.preview-way-${way}`)}</button>`
               )}
@@ -467,16 +580,29 @@ export class FigurePreview extends localize(i18next)(LitElement) {
                     : nothing}
                 </span>`
               })}
+              ${this.way === 'one' && asset && this.trying
+                ? html`<span said>${previewSizeWordsOf(asset, this.trying, (key: string, params?: Record<string, string>) => i18next.t(key, params))}</span>`
+                : nothing}
             </div>
             ${this.way === 'one' && asset && this.trying ? this.renderSizes(asset, this.trying) : nothing}
-            <div foot>${asset?.appearance.length ? html`<div setup>
-              <p>${i18next.t('figure.text.preview-setup')}</p>
-              <select aria-label=${i18next.t('figure.label.resize-part')} @change=${(e: Event) => this.setupPart = (e.target as HTMLSelectElement).value}>
-                ${asset.appearance.map(p => html`<option value=${p.target} ?selected=${p.target === setupPart}>${p.target}</option>`)}
-              </select>
-              <button @click=${() => this.dispatchEvent(new CustomEvent('configure-size', { detail: { part: setupPart }, bubbles: true, composed: true }))}>${i18next.t('figure.button.configure-size')}</button>
-            </div>` : nothing}
-            ${controls.length + clips.length + (asset?.motionGroups?.length ?? 0) + (asset ? valueRowsOf(asset).length : 0) ? this.renderDrivers(asset!, controls, clips) : nothing}</div>`}`
+            <div foot>${controls.length + clips.length + (asset?.motionGroups?.length ?? 0) + (asset ? valueRowsOf(asset).length : 0)
+              ? this.renderDrivers(asset!, controls, clips, this.renderSetup(asset, setupPart))
+              : this.renderSetup(asset, setupPart)}</div></div>`}`
+  }
+
+  /*
+    The size help, shown only where the figure's size can change: the part and the button on one line, its words in its
+    title. With controls it is their last row, as wide as they are -- a box of its own left a gap at its right when the
+    two stood one over the other, and three lines of it covered the figure (user 2026-11-12).
+  */
+  private renderSetup(asset: FigureAsset | undefined, setupPart: string) {
+    if (!asset?.appearance.length || !(['x', 'y', 'z'] as const).some(axis => sizeSpanOf(asset, axis))) return nothing
+    return html`<div setup title=${i18next.t('figure.text.preview-setup')}>
+      <select aria-label=${i18next.t('figure.label.resize-part')} @change=${(e: Event) => (this.setupPart = (e.target as HTMLSelectElement).value)}>
+        ${asset.appearance.map(p => html`<option value=${p.target} ?selected=${p.target === setupPart}>${p.target}</option>`)}
+      </select>
+      <button @click=${() => this.dispatchEvent(new CustomEvent('configure-size', { detail: { part: setupPart }, bubbles: true, composed: true }))}>${i18next.t('figure.button.configure-size')}</button>
+    </div>`
   }
 
   private lookFrom(view: PreviewView) {
@@ -486,7 +612,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
 
   /** The one figure's size: a slider per axis the figure lets change, and what it is at the size tried. */
   private renderSizes(asset: FigureAsset, size: { x: number; y: number; z: number }) {
-    const say = (key: string, params?: Record<string, string>) => i18next.t(key, params)
+    if (!(['x', 'y', 'z'] as const).some(axis => sizeSpanOf(asset, axis))) return nothing
     return html`<div sizes>
       ${(['x', 'y', 'z'] as const).map(axis => {
         const range = sizeSpanOf(asset, axis)
@@ -499,7 +625,6 @@ export class FigurePreview extends localize(i18next)(LitElement) {
           <output>${Math.round(size[axis]).toLocaleString()}</output>
         </label>`
       })}
-      <p said>${previewSizeWordsOf(asset, size, say)}</p>
     </div>`
   }
 
@@ -571,27 +696,38 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     this.scene?.root?.fitCameraToModel?.()
   }
 
-  private renderDrivers(asset: FigureAsset, controls: FigureGraphStateInput[], clips: string[]) {
+  private renderDrivers(asset: FigureAsset, controls: FigureGraphStateInput[], clips: string[], setup: unknown) {
     const steps = new Map(controlsOf(asset).map(c => [c.id, c.step]))
     const sampledStates = sampledStatesOf(asset, this.sample)
     const changed = controls.filter(c => this.giving[c.id] !== undefined && this.giving[c.id] !== asset.stateDefaults[c.id])
-    const fold = html`<button fold-controls aria-expanded=${String(!this.controlsFolded)} @click=${() => (this.controlsFolded = !this.controlsFolded)}>
-      ${i18next.t(this.controlsFolded ? 'figure.button.controls-unfold' : 'figure.button.controls-fold')}
+    /* An icon, its words in its title: the words took the room of a button (user 2026-11-12). */
+    const foldWords = i18next.t(this.controlsFolded ? 'figure.button.controls-unfold' : 'figure.button.controls-fold')
+    const fold = html`<button fold-controls aria-expanded=${String(!this.controlsFolded)} title=${foldWords} aria-label=${foldWords} @click=${() => (this.controlsFolded = !this.controlsFolded)}>
+      <md-icon>${this.controlsFolded ? 'unfold_more' : 'unfold_less'}</md-icon>
     </button>`
-    if (this.controlsFolded) return html`<div clips folded>${fold}</div>`
+    /* Folded, the icon says what it opens: an icon alone in an empty box said nothing (user 2026-11-12). */
+    if (this.controlsFolded)
+      return html`<div clips folded>
+        <button fold-controls aria-expanded="false" @click=${() => (this.controlsFolded = false)}>
+          <md-icon>unfold_more</md-icon>${foldWords}
+        </button>
+        ${setup}
+      </div>`
     const played = playedControlsOf(asset, this.driving, this.moving)
+    /*
+      Keep, clear and fold on one line, there from the start: keep and clear unable until something is tried. Coming and
+      going, they moved the rows under them while a slider was being moved (user 2026-11-12).
+    */
     return html`<div clips>
-      ${fold}
-      ${changed.length
-        ? html`<button pose title=${i18next.t('figure.text.pose-as-default-explained')} @click=${() => this.poseAsDefault()}>
-            ${i18next.t('figure.button.pose-as-default')}
-          </button>`
-        : nothing}
-      ${Object.keys(this.giving).length
-        ? html`<button clear-tried title=${i18next.t('figure.text.clear-tried-explained')} @click=${() => this.clearTried()}>
-            ${i18next.t('figure.button.clear-tried')}
-          </button>`
-        : nothing}
+      <div actions>
+        <button pose ?disabled=${!changed.length} title=${i18next.t('figure.text.pose-as-default-explained')} @click=${() => this.poseAsDefault()}>
+          ${i18next.t('figure.button.pose-as-default')}
+        </button>
+        <button clear-tried ?disabled=${!Object.keys(this.giving).length} title=${i18next.t('figure.text.clear-tried-explained')} @click=${() => this.clearTried()}>
+          ${i18next.t('figure.button.clear-tried')}
+        </button>
+        ${fold}
+      </div>
       ${controls.map(control => {
         /* A control the data tab's sample sets is what the figure shows, as a value row the sample gives: said, not offered. */
         const fromSample = sampledStates[control.id]
@@ -617,7 +753,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
             <output>${i18next.t('figure.text.control-played', { clip: by })}</output>
           </label>`
         return html`<label>
-          <span>${label} <span drive>${unitWord(control.unit)}</span></span>
+          ${this.scrubName(html`${label} <span drive>${unitWord(control.unit)}</span>`, control.unit, value, control.min, control.max, v => this.give(control.id, v))}
           ${this.renderDial(control, value)}
           <input
             type="range"
@@ -627,19 +763,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
             .value=${String(value)}
             @input=${(e: Event) => this.give(control.id, Number((e.target as HTMLInputElement).value))}
           />
-          <input
-            typed
-            type="number"
-            step="any"
-            min=${control.min}
-            max=${control.max}
-            aria-label=${label}
-            .value=${String(Math.round(value * 100) / 100)}
-            @change=${(e: Event) => {
-              const typed = (e.target as HTMLInputElement).valueAsNumber
-              if (Number.isFinite(typed)) this.give(control.id, Math.min(Math.max(typed, control.min), control.max))
-            }}
-          />
+          ${this.typedBox(label, value, control.min, control.max, typed => this.give(control.id, typed))}
         </label>`
       })}
       ${clips.map(clip => {
@@ -649,10 +773,10 @@ export class FigurePreview extends localize(i18next)(LitElement) {
         */
         const value = this.driving[clip] ?? 0
         return html`<label>
-          <span>${clip} <span drive>${i18next.t('figure.label.playback-speed')}</span></span>
+          ${this.scrubName(html`${clip} <span drive>${i18next.t('figure.label.playback-speed')}</span>`, 'ratio', value, 0, 3, v => this.drive(clip, v))}
           <span></span>
           <input type="range" min="0" max="3" step="0.05" .value=${String(value)} @input=${(e: Event) => this.drive(clip, Number((e.target as HTMLInputElement).value))} />
-          <output>${value.toFixed(2)}</output>
+          ${this.typedBox(clip, value, 0, 3, typed => this.drive(clip, typed))}
         </label>`
       })}
       ${valueRowsOf(asset).map(row => this.renderDataValue(row))}
@@ -673,15 +797,58 @@ export class FigurePreview extends localize(i18next)(LitElement) {
           ${byData.speed
             ? nothing
             : html`<label>
-                <span>${group.label} <span drive>${i18next.t('figure.label.playback-speed')}</span></span>
+                ${this.scrubName(html`${group.label} <span drive>${i18next.t('figure.label.playback-speed')}</span>`, 'ratio', playing.speed, 0, 3, v => this.move(group.id, { ...playing, speed: v }))}
                 <span></span>
                 <input type="range" min="0" max="3" step="0.05" .value=${String(playing.speed)} @input=${(e: Event) => this.move(group.id, { ...playing, speed: Number((e.target as HTMLInputElement).value) })} />
-                <output>${playing.speed.toFixed(2)}</output>
+                ${this.typedBox(group.label, playing.speed, 0, 3, typed => this.move(group.id, { ...playing, speed: typed }))}
               </label>`}`
       })}
+      ${setup}
     </div>`
   }
 
+  /**
+   * A row's name that scrubs its value when dragged sideways, as the property panel's names do (\`scrubLabel\`): Shift for
+   * finer steps, held within the row's range. The preview's values are tried, not recorded, so each move is the value.
+   * The sliders ran 360 degrees over 96 pixels, too coarse to land an angle (user 2026-11-12).
+   */
+  private scrubName(name: unknown, unit: string, value: number, min: number, max: number, set: (value: number) => void) {
+    const held = (v: number) => Math.min(Math.max(v, min), max)
+    return html`<span
+      scrub
+      @pointerdown=${(down: PointerEvent) => {
+        /* A press that did not move gives nothing: an empty field is not given its slider's start by a click on its name. */
+        let moved = false
+        scrubLabel(down, { value, unit }, {
+          move: v => ((moved = true), set(held(v))),
+          release: v => set(held(v)),
+          cancel: () => moved && set(value)
+        })
+      }}
+      >${name}</span
+    >`
+  }
+
+  /**
+   * A slider's value as a box to type in, the same on every row: the value a slider cannot land on, typed (a step of the
+   * range's hundredth, robot dog 2026-11-03); one column of boxes, not boxes over plain numbers (user 2026-11-12).
+   */
+  private typedBox(label: string, value: number, min: number, max: number, set: (typed: number) => void) {
+    return html`<input
+      typed
+      type="number"
+      step="any"
+      min=${Number.isFinite(min) ? min : nothing}
+      max=${Number.isFinite(max) ? max : nothing}
+      aria-label=${label}
+      .value=${String(Math.round(value * 100) / 100)}
+      @change=${(e: Event) => {
+        const typed = (e.target as HTMLInputElement).valueAsNumber
+        if (Number.isFinite(typed)) set(Math.min(Math.max(typed, min), max))
+      }}
+    />`
+  }
+
   /** A value the data's bindings read, as the board's saved values give it: a number on a slider when it has a range, a choice when it is closed. */
   private renderDataValue(row: FigureDataRow) {
     const node = row.node
@@ -694,22 +861,37 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     if (sampled !== undefined)
       return html`<label sampled title=${i18next.t('figure.text.data-value-from-sample')}>
         <span>${label} <span drive>${i18next.t('figure.label.data-value-from-sample')}</span></span>
-        <output>${typeof sampled === 'object' ? JSON.stringify(sampled) : String(sampled)}</output>
+        <output>${typeof sampled === 'boolean' ? i18next.t(sampled ? 'figure.label.data-true' : 'figure.label.data-false') : typeof sampled === 'object' ? JSON.stringify(sampled) : String(sampled)}</output>
       </label>`
     const fallback = 'default' in node ? node.default : undefined
     const value = this.valuing[row.path] ?? fallback
     if (node.kind === 'number') {
       const ranged = node.min !== undefined && node.max !== undefined && node.max > node.min
+      /*
+        An angle is drawn as the controls' angles are -- dial, slider, box -- whether or not its field declares a range:
+        one with none slides over one turn, and any angle can still be typed. 「방향 deg」 was a bare number field under
+        「머리 각도 deg」 on a slider (user 2026-11-12).
+      */
+      const angle = node.unit === 'deg'
+      const slide = ranged ? { min: node.min!, max: node.max! } : angle ? { min: 0, max: 360 } : undefined
+      const scrubFrom = Number(value ?? slide?.min ?? 0)
       return html`<label>
-        <span>${label} <span drive>${unitWord(node.unit)}</span></span>
-        <span></span>
-        ${ranged
-          ? html`<input type="range" min=${node.min!} max=${node.max!} step=${Math.max((node.max! - node.min!) / 100, 0.01)} .value=${String(value ?? node.min)} @input=${(e: Event) => this.value(row, (e.target as HTMLInputElement).value)} />
-              <output>${value === undefined ? '' : Number(value).toFixed(2)}</output>`
-          : html`<input type="number" step="any" .value=${value === undefined ? '' : String(value)} @change=${(e: Event) => this.value(row, (e.target as HTMLInputElement).value)} />
-              <span></span>`}
+        ${this.scrubName(html`${label} <span drive>${unitWord(node.unit)}</span>`, node.unit ?? '', Number.isFinite(scrubFrom) ? scrubFrom : 0, ranged ? node.min! : -Infinity, ranged ? node.max! : Infinity, v => this.value(row, String(v)))}
+        ${slide
+          ? html`${this.renderDial({ unit: node.unit ?? '', ...slide }, Number(value ?? slide.min))}
+              <input type="range" min=${slide.min} max=${slide.max} step=${angle ? 1 : Math.max((slide.max - slide.min) / 100, 0.01)} .value=${String(value ?? slide.min)} @input=${(e: Event) => this.value(row, (e.target as HTMLInputElement).value)} />
+              ${ranged
+                ? this.typedBox(label, Number(value ?? slide.min), slide.min, slide.max, typed => this.value(row, String(typed)))
+                : this.typedBox(label, Number(value ?? slide.min), -Infinity, Infinity, typed => this.value(row, String(typed)))}`
+          : html`<input wide type="number" step="any" aria-label=${label} .value=${value === undefined ? '' : String(value)} @change=${(e: Event) => this.value(row, (e.target as HTMLInputElement).value)} />`}
       </label>`
     }
+    /* A yes or no is a check box, not a list of two words to open (user 2026-11-12). Unchecked is false, as the board reads it. */
+    if (node.kind === 'boolean')
+      return html`<label>
+        <span>${label}</span>
+        <input type="checkbox" aria-label=${label} .checked=${value === true} @change=${(e: Event) => this.value(row, String((e.target as HTMLInputElement).checked))} />
+      </label>`
     const domain = domainOf(node)
     if (!domain.length)
       return html`<label>

package/dist-client/modeller/clips.d.ts

@@ -96,10 +96,7 @@ export declare function copiedTrackEdit(asset: FigureAsset, clip: Clip, track: C
     kind: "set-driver";
     state: string;
     clip: string;
-    keys: {
-        seconds: number;
-        value: number;
-    }[];
+    keys: ClipKey[];
     loop: "hold" | "wrap";
     interpolation: "linear" | "step" | "smooth";
     accumulates: boolean;

package/dist-client/modeller/data-interface.d.ts

@@ -30,8 +30,9 @@ export declare function fitsField(node: FigureDataNode, choice: BehaviorChoice):
 import { methodOf, type DataMethod } from '@things-factory/figure-viewer/dist-client/data-connection.js';
 export { methodOf, type DataMethod };
 /**
- * The methods a field allows (ADR-0166 2): a number as it is, scaled or by a range table; a text or true/false by a code
- * table, or as it is where a behavior takes it so; a list as it is (its items). A new field is made by a table.
+ * The methods a field allows (ADR-0166 2, amendment 1): a number as it is, scaled, by a code table (status codes sent as
+ * numbers, 4002) or by a range table; a text or true/false by a code table, or as it is where a behavior takes it so; a
+ * list as it is (its items). A new field is made by a table.
  */
 export declare function methodsOf(node: FigureDataNode | null, choices: BehaviorChoice[]): DataMethod[];
 /** The method a binding is shown by. */
@@ -45,28 +46,30 @@ export declare const domainOf: (node: FigureDataNode) => FigureDataValue[];
  */
 export declare function bindingDraftOf(asset: FigureAsset, accessor: string, node: FigureDataNode, choice: BehaviorChoice, method?: 'value' | 'scale'): FigureDataValueBinding;
 /** The first code a new code table names, and the next ones: `CODE`, `CODE2`, … */
+/** A new code for a number field's code table: one past the largest taken, or 0 (ADR-0166 amendment 1). */
+export declare function freeNumberCodeOf(taken: string[]): string;
 export declare function freeCodeOf(taken: string[]): string;
 /** A legend role from a binding's id: lower case letters, digits and `-`. */
 export declare const legendRoleOf: (id: string) => string;
 /**
  * A first table on a field (ADR-0166 10): a row per value of a closed field, an open field's rows typed later, one
- * interval over the whole of a number. A new field is made by the table (P2): a code table's a text whose values are the
- * table's keys, starting with one code; a range table's a number. Returns the binding and, for a new field, the schema
- * with it.
+ * interval over the whole of a number. The field is one the schema has: the data tab adds a binding in the field's row.
  */
 export declare function tableDraftOf(asset: FigureAsset, field: {
     path: string;
     node: FigureDataNode;
-} | {
-    name: string;
 }, method: 'code' | 'ranges', targets: FigureDataTargets): {
     binding: FigureDataTableBinding;
-    schema?: FigureDataField[];
 };
 /** The table with these targets: each look keeps only the columns they take. */
 export declare function tableWithTargets(b: FigureDataTableBinding, targets: FigureDataTargets): FigureDataTableBinding;
 /** The table with one look set: the whole look given, a column left out cleared. */
 export declare const tableWithLook: (b: FigureDataTableBinding, key: string, look: FigureDataTableEntry) => FigureDataTableBinding;
+/**
+ * The table whose other values keep what it last showed, or go to the default look (an empty one): the 「그대로 둠」 of
+ * the 「그 밖의 값」 row (ADR-0166 amendment 1).
+ */
+export declare const tableWithKeep: (b: FigureDataTableBinding, keep: boolean) => FigureDataTableBinding;
 /** The table's rows renamed, added or taken away, in order; `default` kept last. */
 export declare function tableWithKeys(b: FigureDataTableBinding, rows: Array<[string, FigureDataTableEntry]>): FigureDataTableBinding;
 /**