@things-factory/figure-ui 10.1.271 → 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'
@@ -16,6 +18,7 @@ import { dataValueAt, domainOf, motionWrittenByData, sampledStatesOf, typedValue
 import { derivedOf, type FigureRevision } 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'
 
 /**
  * The figure placed on a board.
@@ -95,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 {
@@ -132,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;
@@ -179,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);
@@ -206,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;
     }
@@ -222,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;
@@ -240,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;
@@ -250,6 +283,28 @@ export 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;
@@ -280,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);
@@ -291,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] {
@@ -303,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;
@@ -312,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] {
@@ -324,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 {
@@ -426,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>`
               )}
@@ -444,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) {
@@ -463,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)
@@ -476,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>`
   }
 
@@ -548,26 +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]
@@ -580,8 +740,20 @@ export 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"
@@ -591,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 => {
@@ -613,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))}
@@ -628,22 +788,67 @@ export 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: Event) => this.move(group.id, { ...playing, clip: (e.target as HTMLSelectElement).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: 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
@@ -656,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/client/modeller/figure-size-editor.ts

@@ -10,6 +10,7 @@ import { scrubLabel } from './live.js'
 import {
   measureFactor,
   sameSizeSource,
+  sizeAxisWord,
   sizeInputOf,
   sizeRelationOf,
   sizeRelationSteps,
@@ -39,10 +40,13 @@ export class FigureSizeEditor extends localize(i18next)(LitElement) {
     :host { display: block; min-width: 0; }
     .heading, .fields {
       display: grid;
-      grid-template-columns: 24px minmax(55px, .85fr) 32px minmax(65px, 1fr) 42px;
+      grid-template-columns: var(--axis-column, 24px) minmax(55px, .85fr) 32px minmax(65px, 1fr) 42px;
       gap: 6px;
       align-items: center;
     }
+    /* A round body's rows name its diameter (「X·Z · 지름」): every row's first column widens alike, so the rows still line up. */
+    :host([named-axes]) { --axis-column: 76px; }
+    .fields > span:first-child { white-space: nowrap; }
     .heading { color: var(--md-sys-color-on-surface-variant); padding-bottom: 6px; }
     .dimension { padding: 3px 0; }
     .variable { display: flex; align-items: center; justify-content: center; min-height: var(--figure-control-height); }
@@ -98,6 +102,7 @@ export class FigureSizeEditor extends localize(i18next)(LitElement) {
     const axes = followableAxes(asset, this.partId)
     const targets = asset.appearance.map(a => a.target).filter(p => p !== this.partId && followableAxes(asset, p).length)
     const uniform = asset.sizing === 'uniform'
+    this.toggleAttribute('named-axes', axes.some(axis => measureFactor(asset, this.partId, axis) === 2))
     return html`
       <div class="heading" aria-hidden="true">
         <span>${i18next.t('figure.label.size-axis')}</span><span>${i18next.t('figure.label.size-measure')}</span><span>${i18next.t('figure.label.size-follows')}</span><span>${i18next.t('figure.label.size-source')}</span><span></span>
@@ -116,7 +121,7 @@ export class FigureSizeEditor extends localize(i18next)(LitElement) {
         }
         const currentMode = mode === 'custom' ? 'ratio' : mode
         const input = sizeInputOf(asset, this.partId, axis)
-        const label = `${axis.toUpperCase()}${measureFactor(asset, this.partId, axis) === 2 ? ' · ' + i18next.t('figure.label.size-diameter') : ''}`
+        const label = sizeAxisWord(asset, this.partId, axis, i18next.t('figure.label.size-diameter'))
         /* The selects show when asked for, or when what it follows is not what its fastening gives -- or nothing is. */
         const choosing = relation.variable && (this.choosing.has(key) || !sameSizeSource(source, suggested))
         const selectedSource = source ? (source.of === 'instance' ? '@figure' : source.part) : '@custom'

package/client/modeller/first-save.ts

@@ -11,6 +11,14 @@ export function typeOf(raw: string): string {
   return raw.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '')
 }
 
+/**
+ * The identifier as it is being typed: `typeOf`, but the hyphen just typed at the end stays, so the next word can follow
+ * it (tutorial 2026-11-11: `fork-agv` typed key by key came out `forkagv`). The save takes `typeOf` of it.
+ */
+export function typingTypeOf(raw: string): string {
+  return raw.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+/, '')
+}
+
 /**
  * Whether this name could be released, by the format's own rules (`type-not-identifier`, `type-is-placeholder`).
  * Saving under it is not blocked -- it can still change before release -- but the author hears it now.

package/client/modeller/focus-on-render.ts

@@ -0,0 +1,4 @@
+import { ref } from 'lit/directives/ref.js'
+
+/** A field opened by a press takes the keys at once, its value selected to be typed over. */
+export const focusOnRender = () => ref(el => el && requestAnimationFrame(() => (el as HTMLInputElement).select()))