@things-factory/figure-ui 10.1.271 → 10.1.273

package/dist-client/modeller/figure-preview.js

@@ -1,8 +1,10 @@
 import { __decorate, __metadata } from "tslib";
+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 { create, figureLegendSourcesChanged, registerFigure, unregisterFigure } from '@hatiolab/things-scene';
@@ -14,6 +16,7 @@ import { dataValueAt, domainOf, motionWrittenByData, sampledStatesOf, typedValue
 import { derivedOf } from './revision.js';
 import { authoredSizeOf, bodyAtSize, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewOneInstance, previewTypeOf, setupPartOf, sizeSpanOf, sizeWithinRange } from '@things-factory/figure-viewer/dist-client/preview-model.js';
 import { previewSizeWordsOf } from './preview-size.js';
+import { playedControlsOf } from './clips.js';
 const PREVIEW_VIEWS = ['perspective', 'front', 'right', 'top'];
 let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
     constructor() {
@@ -92,21 +95,43 @@ let FigurePreview = 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 {
@@ -129,9 +154,8 @@ let FigurePreview = 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;
@@ -176,13 +200,10 @@ let FigurePreview = 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);
@@ -203,8 +224,12 @@ let FigurePreview = 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;
     }
@@ -219,8 +244,12 @@ let FigurePreview = 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;
@@ -237,6 +266,10 @@ let FigurePreview = 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;
@@ -247,6 +280,28 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
       border: 1px solid rgba(255, 255, 255, 0.22);
       border-radius: 5px;
     }
+    /* A motion group's clips as buttons: a list the system draws is not seen in a recording of the preview. */
+    div[clips] span[clip-choices] {
+      grid-column: 2 / -1;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      min-width: 0;
+    }
+    div[clips] span[clip-choices] button {
+      font: inherit;
+      color: inherit;
+      padding: 1px 8px;
+      background-color: rgba(255, 255, 255, 0.08);
+      border: 1px solid rgba(255, 255, 255, 0.22);
+      border-radius: 10px;
+      cursor: pointer;
+    }
+    div[clips] span[clip-choices] button[aria-pressed='true'] {
+      background-color: rgba(255, 255, 255, 0.3);
+      border-color: rgba(255, 255, 255, 0.6);
+      font-weight: 600;
+    }
     div[clips] svg[dial] {
       width: 20px;
       height: 20px;
@@ -277,9 +332,65 @@ let FigurePreview = 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);
@@ -288,7 +399,13 @@ let FigurePreview = 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] {
@@ -300,7 +417,20 @@ let FigurePreview = 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;
@@ -309,9 +439,15 @@ let FigurePreview = 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] {
@@ -321,7 +457,7 @@ let FigurePreview = 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 {
@@ -375,7 +511,7 @@ let FigurePreview = 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'].map(way => html `<button way=${way} aria-pressed=${String(this.way === way)} @click=${() => this.chooseWay(way)}>${i18next.t(`figure.label.preview-way-${way}`)}</button>`)}
               <span views>
                 ${PREVIEW_VIEWS.map(view => html `<button view=${view} aria-pressed=${String(this.looking === view)} @click=${() => this.lookFrom(view)}>${i18next.t(`figure.label.preview-view-${view}`)}</button>`)}
@@ -389,16 +525,29 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
                     : nothing}
                 </span>`;
             })}
+              ${this.way === 'one' && asset && this.trying
+                ? html `<span said>${previewSizeWordsOf(asset, this.trying, (key, params) => 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) => this.setupPart = e.target.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).
+    */
+    renderSetup(asset, setupPart) {
+        if (!asset?.appearance.length || !['x', 'y', 'z'].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) => (this.setupPart = e.target.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>`;
     }
     lookFrom(view) {
         this.scene?.root?.setCameraView?.(view);
@@ -406,7 +555,8 @@ let FigurePreview = 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. */
     renderSizes(asset, size) {
-        const say = (key, params) => i18next.t(key, params);
+        if (!['x', 'y', 'z'].some(axis => sizeSpanOf(asset, axis)))
+            return nothing;
         return html `<div sizes>
       ${['x', 'y', 'z'].map(axis => {
             const range = sizeSpanOf(asset, axis);
@@ -420,7 +570,6 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
           <output>${Math.round(size[axis]).toLocaleString()}</output>
         </label>`;
         })}
-      <p said>${previewSizeWordsOf(asset, size, say)}</p>
     </div>`;
     }
     /*
@@ -495,27 +644,38 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
         this.scene?.fit?.('ratio');
         this.scene?.root?.fitCameraToModel?.();
     }
-    renderDrivers(asset, controls, clips) {
+    renderDrivers(asset, controls, clips, setup) {
         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>`;
+        /* 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>${fold}</div>`;
+            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];
@@ -528,8 +688,20 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
             /* The step the editor's controls take (\`controlsOf\`): a degree for an angle, a hundredth of the range otherwise. */
             const step = steps.get(control.id) ?? (control.max - control.min) / 100;
             const label = asset.stateInputs?.[control.id]?.label ?? control.id;
+            /*
+              A control a playing clip drives moves on the figure while its row stood still at its last number -- 0 under a
+              walking leg (review 2026-11-11). The row says the clip has it, and is not given a value until the clip stops.
+            */
+            const by = played.get(control.id);
+            if (by)
+                return html `<label played title=${i18next.t('figure.text.control-played-explained', { clip: by })}>
+            <span>${label} <span drive>${unitWord(control.unit)}</span></span>
+            <span></span>
+            <input type="range" min=${control.min} max=${control.max} .value=${String(value)} disabled />
+            <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"
@@ -539,20 +711,7 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
             .value=${String(value)}
             @input=${(e) => this.give(control.id, Number(e.target.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) => {
-                const typed = e.target.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 => {
@@ -562,10 +721,10 @@ let FigurePreview = 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) => this.drive(clip, Number(e.target.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))}
@@ -577,21 +736,63 @@ let FigurePreview = class FigurePreview extends localize(i18next)(LitElement) {
                 ? nothing
                 : html `<label>
                 <span>${group.label} <span drive>${i18next.t('figure.label.clip')}</span></span>
-                <select aria-label=${group.label} @change=${(e) => this.move(group.id, { ...playing, clip: e.target.value })}>
-                  ${group.clips.map(c => html `<option value=${c} ?selected=${c === playing.clip}>${c}</option>`)}
-                </select>
+                <span clip-choices role="group" aria-label=${group.label}>
+                  ${group.clips.map(c => html `<button type="button" aria-pressed=${String(c === playing.clip)} @click=${() => this.move(group.id, { ...playing, clip: c })}>${c}</button>`)}
+                </span>
               </label>`}
           ${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) => this.move(group.id, { ...playing, speed: Number(e.target.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).
+     */
+    scrubName(name, unit, value, min, max, set) {
+        const held = (v) => Math.min(Math.max(v, min), max);
+        return html `<span
+      scrub
+      @pointerdown=${(down) => {
+            /* 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).
+     */
+    typedBox(label, value, min, max, set) {
+        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) => {
+            const typed = e.target.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. */
     renderDataValue(row) {
         const node = row.node;
@@ -604,22 +805,37 @@ let FigurePreview = 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) => this.value(row, e.target.value)} />
-              <output>${value === undefined ? '' : Number(value).toFixed(2)}</output>`
-                : html `<input type="number" step="any" .value=${value === undefined ? '' : String(value)} @change=${(e) => this.value(row, e.target.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) => this.value(row, e.target.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) => this.value(row, e.target.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) => this.value(row, String(e.target.checked))} />
+      </label>`;
         const domain = domainOf(node);
         if (!domain.length)
             return html `<label>