@things-factory/figure-ui 10.1.270 → 10.1.272

package/client/modeller/figure-fasten-dialog.ts

@@ -89,7 +89,28 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
       }
       details[fasten-detail] > div[form] {
         margin-top: 8px;
-        max-width: 320px;
+        max-width: 420px;
+      }
+      /* Where across the face, as buttons: a list the system draws is not seen in a recording, nor reached by a key in every browser. */
+      div[align-choices] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+      }
+      div[align-choices] button {
+        font: inherit;
+        font-size: var(--ui-t-small, 11.5px);
+        padding: 3px 8px;
+        border-radius: 12px;
+        border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+      div[align-choices] button[aria-pressed='true'] {
+        border-color: var(--md-sys-color-primary, #0d8f86);
+        background: var(--md-sys-color-primary-container, #cdeeea);
+        font-weight: 600;
       }
       span[fasten-summary] {
         opacity: 0.8;
@@ -253,7 +274,7 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
                   <summary>
                     ${i18next.t('figure.label.fasten-detail')}${detail.length ? html` · <span fasten-summary>${detail.join(' · ')}</span>` : nothing}
                   </summary>
-                  ${plan.alignRows.length ? this.renderAlignment(plan.alignRows) : nothing}
+                  ${(plan.alignAxes ?? plan.alignRows).length ? this.renderAlignment(plan.alignAxes ?? plan.alignRows) : nothing}
                   <div form>
                     <span>${i18next.t('figure.label.gap')}</span>
                     <input
@@ -384,34 +405,24 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
               : 'centre'
             : (f.align[axis] ?? 'centre')
         return html`<span>${i18next.t('figure.label.align-' + axis)}</span>
-          <select @change=${(e: Event) => set(axis, (e.target as HTMLSelectElement).value as Alignment)}>
-            <option value="centre" ?selected=${how === 'centre'}>${i18next.t('figure.label.align-centre')}</option>
-            ${
-              edges
-                ? html`<option value="min" ?selected=${how === 'min'}>
-                      ${i18next.t(`figure.label.align-${axis}-min`)}
-                    </option>
-                    <option value="max" ?selected=${how === 'max'}>
-                      ${i18next.t(`figure.label.align-${axis}-max`)}
-                    </option>`
-                : nothing
-            }
-            ${
-              f.alignInput?.[axis]
-                ? html`<option value="input" ?selected=${how === 'input'}>
-                    ${i18next.t('figure.label.align-input', { field: fieldWordsOf(f.alignInput[axis]!, key => i18next.t(key)) })}
-                  </option>`
-                : nothing
-            }
-            <option value="mm" ?selected=${how === 'mm'}>${i18next.t('figure.label.align-mm')}</option>
-            ${
-              this.revision && hasInstanceSize(this.revision.asset, axis)
-                ? html`<option value="share" ?selected=${how === 'share'}>
-                    ${i18next.t('figure.label.align-share')}
-                  </option>`
-                : nothing
-            }
-          </select>
+          <div align-choices role="group" aria-label=${i18next.t('figure.label.align-' + axis)}>
+            ${[
+              { value: 'centre' as Alignment, words: i18next.t('figure.label.align-centre'), shown: true },
+              { value: 'min' as Alignment, words: i18next.t(`figure.label.align-${axis}-min`), shown: edges },
+              { value: 'max' as Alignment, words: i18next.t(`figure.label.align-${axis}-max`), shown: edges },
+              {
+                value: 'input' as Alignment,
+                words: f.alignInput?.[axis] ? i18next.t('figure.label.align-input', { field: fieldWordsOf(f.alignInput[axis]!, key => i18next.t(key)) }) : '',
+                shown: !!f.alignInput?.[axis]
+              },
+              { value: 'mm' as Alignment, words: i18next.t('figure.label.align-mm'), shown: true },
+              { value: 'share' as Alignment, words: i18next.t('figure.label.align-share'), shown: !!this.revision && hasInstanceSize(this.revision.asset, axis) }
+            ]
+              .filter(choice => choice.shown)
+              .map(
+                choice => html`<button type="button" aria-pressed=${String(how === choice.value)} @click=${() => set(axis, choice.value)}>${choice.words}</button>`
+              )}
+          </div>
           ${
             how === 'mm' || how === 'share'
               ? html`<span></span

package/client/modeller/figure-fasten-drawing.ts

@@ -6,7 +6,8 @@ import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-
 import { figureAroundNormalOf, figureAroundOf, figureCaughtAngleOf, figureSurfaceAnglesOf, figureSurfacePlaceOf } from '@hatiolab/figure-model'
 import type { FigureFace, FigureSurfacePlace } from '@hatiolab/figure-model'
 
-import { alignmentAt, fastenLabelsOf, offsetOf, overhangOf, screenOf, type FaceView, type FastenMode } from './fasten-geometry.js'
+import { focusOnRender } from './focus-on-render.js'
+import { alignmentAt, drawingSpanOf, fastenLabelsOf, offsetOf, overhangOf, screenOf, type FaceView, type FastenMode } from './fasten-geometry.js'
 import type { Alignment } from './links.js'
 
 type Axis = 'x' | 'y' | 'z'
@@ -332,8 +333,7 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     const { h, v, sign } = screenOf(view.axes)
     const W = WHERE_W,
       H = WHERE_H
-    /* Room around the face for the part to go past its edges by about half itself; a plane with no size, three parts wide. */
-    const span = (a: Axis) => (view.face[a] !== undefined ? view.face[a]! + view.part[a] : view.part[a] * 3)
+    const span = (a: Axis) => drawingSpanOf(view.face[a], view.part[a])
     const k = Math.min((W - 40) / span(h), (H - 40) / span(v))
     this.scale = k
     const cx = W / 2,
@@ -433,7 +433,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
         this.change({ axis: a, how: 'mm', mm: Math.round(value) })
         this.released()
       }}
-      @blur=${() => (this.typing = undefined)} />`
+      @blur=${() => (this.typing = undefined)}
+      ${focusOnRender()} />`
   }
 
   private grab(ev: PointerEvent, at: Record<Axis, number>, caught: Partial<Record<Axis, string>>) {

package/client/modeller/figure-first-save.ts

@@ -7,7 +7,7 @@ import { CommonPopupStyles, FormFieldStyles } from '@operato/styles'
 import '@material/web/button/filled-button.js'
 import '@material/web/button/text-button.js'
 
-import { firstSaveRefusalOf, offeredTypeOf, releasableType, typeOf, type FirstSave } from './first-save.js'
+import { firstSaveRefusalOf, offeredTypeOf, releasableType, typeOf, typingTypeOf, type FirstSave } from './first-save.js'
 
 /**
  * The first save of a new figure: its type and its name, asked once, in the suite's popup look.
@@ -97,13 +97,13 @@ export class FigureFirstSave extends LitElement {
           .value=${this.type}
           placeholder=${i18next.t('figure.text.figure-type-example')}
           @input=${(e: Event) => {
-            this.type = typeOf((e.target as HTMLInputElement).value)
+            this.type = typingTypeOf((e.target as HTMLInputElement).value)
             ;(e.target as HTMLInputElement).value = this.type
             this.refusal = null
           }}
           @keydown=${this.onKey}
         />
-        ${this.type && !releasableType(this.type)
+        ${typeOf(this.type) && !releasableType(typeOf(this.type))
           ? html`<div class="note">${i18next.t('figure.text.type-name-will-not-release')}</div>`
           : this.suggested && this.type === this.suggested
             ? html`<div class="note">${i18next.t('figure.text.identifier-suggested')}</div>`
@@ -132,6 +132,7 @@ export class FigureFirstSave extends LitElement {
   }
 
   private confirm = () => {
+    this.type = typeOf(this.type)
     this.refusal = firstSaveRefusalOf(this.type, this.taken)
     if (this.refusal) return
     const namespace = this.namespaces.length > 1 ? this.chosenNamespace : undefined

package/client/modeller/figure-links.ts

@@ -50,7 +50,7 @@ import {
   stateSizeFixedOf,
   type StateSizeForm
 } from './links.js'
-import { measureFactor } from './size-response.js'
+import { measureFactor, sizeAxisWord } from './size-response.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { insideAlignmentOf } from './fasten-geometry.js'
 import { fastenFormOf, fastenPlanOf, fastenSentenceOf } from './fasten-form.js'
@@ -58,9 +58,22 @@ import type { FigureRevision } from './revision.js'
 import { HelpToggles } from './help.js'
 import { groupMenu, GroupMenuStyles } from './group-menu.js'
 import { jointAxisWord } from './joint-axis.js'
+import { PIVOT_POINTS, pivotPointOf, pivotPointsOf, type PivotPoint } from './pivot.js'
 import { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js'
 
 const freshMotion = (): MotionForm => ({ kind: 'slide', axis: 'x', id: '', min: 0, max: 500, follow: '', multiplier: 1, offset: 0, travel: '', travelPlus: 0 })
+
+/**
+ * The motion a part's form starts from: a part hung on another part most often turns there -- a thigh at the hip, a door
+ * at its frame -- so it starts as a turn; a part on the plane, or on nothing, as a slide (review 2026-11-11: eight
+ * joints of a humanoid, each changed from slide to turn by hand).
+ */
+export function motionStartOf(revision: FigureRevision | undefined, part: string): MotionForm {
+  const own = revision ? fasteningOf(revision, part) : undefined
+  return own && !own.toPlane && own.target ? { ...freshMotion(), kind: 'turn', min: -90, max: 90 } : freshMotion()
+}
+
+const sameMotion = (a: MotionForm, b: MotionForm) => JSON.stringify(a) === JSON.stringify(b)
 const freshRow = () => ({ axis: '' as Axis | '', pitch: 200, fills: true, count: 5 })
 const freshPlace = () => ({ role: 'grip' as 'seat' | 'grip', face: 'top' as FigureFace, label: '', accepts: '', capacity: 1 })
 
@@ -85,6 +98,17 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     :host {
       display: block;
     }
+    /* The turn's axis through the part's top, middle or bottom, by name, under the numbers it fills in. */
+    div[pivot-points] {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 4px 0 8px;
+    }
+    div[pivot-points] > span {
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: var(--ui-t-small, 11.5px);
+    }
     /* A group's sub-question, under its title: quieter than the title, as a label is. */
     p[group-question] {
       margin: 4px 0 0;
@@ -216,7 +240,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     if (changed.has('asset') || changed.has('partId')) this.fixNote = ''
     if (this.asset && this.partId && this.partId !== this.loadedFor) {
       this.loadedFor = this.partId
-      this.motion = freshMotion()
+      this.motion = motionStartOf(this.revision, this.partId)
       this.place = freshPlace()
       this.placeEditing = null
       this.row = freshRow()
@@ -224,6 +248,10 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       this.rowCandidate = undefined
       this.editingMotion = false
       this.motionAxis = 0
+    } else if (changed.has('revision') && this.partId && !this.editingMotion) {
+      /* Fastened since the form was loaded, a form nobody has touched starts as that part's motion now does. */
+      const was = motionStartOf(changed.get('revision') as FigureRevision | undefined, this.partId)
+      if (sameMotion(this.motion, was)) this.motion = motionStartOf(this.revision, this.partId)
     }
   }
 
@@ -624,7 +652,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     const part = this.partId
     const axes = followableAxes(asset, part)
     if (!axes.length) return nothing
-    const word = (axis: Axis) => `${axis.toUpperCase()}${measureFactor(asset, part, axis) === 2 ? ' · ' + i18next.t('figure.label.size-diameter') : ''}`
+    const word = (axis: Axis) => sizeAxisWord(asset, part, axis, i18next.t('figure.label.size-diameter'))
     const sized = axes.flatMap(axis => {
       const f = followOf(asset, part, axis)
       return f.of === 'state' ? [{ axis, f }] : []
@@ -760,7 +788,33 @@ export class FigureLinks extends localize(i18next)(LitElement) {
                 </div>`
           )}
         </div>
-      </div>`
+      </div>
+      ${this.renderPivotPoints(m)}`
+  }
+
+  /*
+    The axis put through the part's top end, middle or bottom end by name: the numbers above are measured from the
+    joint's origin, which a person cannot see (tutorial run 2026-11-12: a shoulder given Y 120 "to reach the shoulder"
+    turned about a point above it). The button that matches what is typed stands pressed.
+  */
+  private pivotCache?: { key: string; points: ReturnType<typeof pivotPointsOf> }
+  private renderPivotPoints(m: MotionForm) {
+    if (!this.revision || m.throughFollows) return nothing
+    const key = `${this.revision.revision}:${this.partId}:${m.axis}`
+    if (this.pivotCache?.key !== key) this.pivotCache = { key, points: pivotPointsOf(this.revision, this.partId, m.axis as Axis) }
+    const points = this.pivotCache.points
+    if (!points) return nothing
+    return html`<div pivot-points>
+      <span>${i18next.t('figure.label.pivot-at')}</span>
+      <ox-input-select-buttons
+        .value=${pivotPointOf(points, m.through, m.axis as Axis) ?? ''}
+        .options=${PIVOT_POINTS.map(p => ({ value: p, display: i18next.t(`figure.label.pivot-${p}`) }))}
+        @change=${(e: CustomEvent) => {
+          const at = points[e.detail as PivotPoint]
+          if (at) this.motion = { ...m, through: { ...at } }
+        }}
+      ></ox-input-select-buttons>
+    </div>`
   }
 
   private renderMotion(asset: FigureAsset) {
@@ -844,6 +898,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     const adding = k > 0 && k >= figureMotionsOf(joint).length
     const follow = leaders.some(j => j.id === m.follow) ? m.follow : ''
     const refusal = motionFormRefusalOf(m, follow)
+    /* Following another joint is offered after the part's own control: a row above it moved every field down a row, and
+       a name typed there chose a joint to follow (review 2026-11-11). */
     return html`
       ${k > 0 ? html`<p motion-axis-heading><b>${i18next.t('figure.label.motion-axis-n', { n: k + 1 })}</b></p>` : nothing}
       <div pair>
@@ -858,31 +914,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
               ${AXES.map(a => html`<option value=${a} ?selected=${a === m.axis}>${i18next.t('figure.label.motion-axis')} ${a.toUpperCase()}</option>`)}
             </select>`}
       </div>
-      ${m.followSum
-        ? html`<div form>
-            <span>${i18next.t('figure.label.motion-follow')}</span>
-            <span>${m.followSum.map(t => `${t.joint} × ${t.multiplier}`).join(' + ')}</span>
-            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
-            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
-          </div>`
-        : leaders.length
-        ? html`<div form>
-            <span>${i18next.t('figure.label.motion-follow')}</span>
-            <select @change=${(e: Event) => (this.motion = { ...m, follow: (e.target as HTMLSelectElement).value })}>
-              <option value="" ?selected=${!follow}>${i18next.t('figure.label.motion-own-control')}</option>
-              ${leaders.map(j => html`<option value=${j.id} ?selected=${j.id === follow}>${j.part}${j.state?.id ? ` · ${j.state.id}` : j.id !== j.part ? ` · ${j.id}` : ''}</option>`)}
-            </select>
-          </div>`
-        : nothing}
-      ${m.followSum
+      ${m.followSum || follow
         ? nothing
-        : follow
-        ? html`<div form>
-            <span>${i18next.t('figure.label.motion-multiplier')}</span>
-            <input type="number" step="any" .value=${String(m.multiplier)} @change=${(e: Event) => (this.motion = { ...m, multiplier: Number((e.target as HTMLInputElement).value) })} />
-            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
-            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
-          </div>`
         : html`<div form>
             ${m.kind === 'slide'
               ? html`<span>${i18next.t('figure.label.motion-travel')}</span>
@@ -910,6 +943,30 @@ export class FigureLinks extends localize(i18next)(LitElement) {
                     <input type="number" step="any" .value=${String(m.max)} @change=${(e: Event) => (this.motion = { ...m, max: Number((e.target as HTMLInputElement).value) })} />
                   </div>`}
           </div>`}
+      ${m.followSum
+        ? html`<div form>
+            <span>${i18next.t('figure.label.motion-follow')}</span>
+            <span>${m.followSum.map(t => `${t.joint} × ${t.multiplier}`).join(' + ')}</span>
+            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
+            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
+          </div>`
+        : leaders.length
+        ? html`<div form>
+            <span>${i18next.t('figure.label.motion-follow')}</span>
+            <select @change=${(e: Event) => (this.motion = { ...m, follow: (e.target as HTMLSelectElement).value })}>
+              <option value="" ?selected=${!follow}>${i18next.t('figure.label.motion-own-control')}</option>
+              ${leaders.map(j => html`<option value=${j.id} ?selected=${j.id === follow}>${j.part}${j.state?.id ? ` · ${j.state.id}` : j.id !== j.part ? ` · ${j.id}` : ''}</option>`)}
+            </select>
+          </div>`
+        : nothing}
+      ${!m.followSum && follow
+        ? html`<div form>
+            <span>${i18next.t('figure.label.motion-multiplier')}</span>
+            <input type="number" step="any" .value=${String(m.multiplier)} @change=${(e: Event) => (this.motion = { ...m, multiplier: Number((e.target as HTMLInputElement).value) })} />
+            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
+            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
+          </div>`
+        : nothing}
       ${m.kind === 'slide' ? nothing : this.renderThrough(m)}
       <button
         act

package/client/modeller/figure-preview.ts

@@ -12,10 +12,11 @@ import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH, type ViewSetting
 import { parametersForClip } from '@things-factory/figure-viewer/dist-client/detail-motion.js'
 import { controlsOf } from '@things-factory/figure-viewer/dist-client/controls.js'
 import { dialShape } from './angle-dial.js'
-import { dataValueAt, domainOf, motionWrittenByData, typedValueOf, valueRowsOf } from './data-interface.js'
+import { dataValueAt, domainOf, motionWrittenByData, sampledStatesOf, typedValueOf, valueRowsOf } from './data-interface.js'
 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.
@@ -250,6 +251,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;
@@ -550,11 +573,13 @@ export class FigurePreview extends localize(i18next)(LitElement) {
 
   private renderDrivers(asset: FigureAsset, controls: FigureGraphStateInput[], clips: string[]) {
     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')}
     </button>`
     if (this.controlsFolded) return html`<div clips folded>${fold}</div>`
+    const played = playedControlsOf(asset, this.driving, this.moving)
     return html`<div clips>
       ${fold}
       ${changed.length
@@ -568,10 +593,29 @@ export class FigurePreview extends localize(i18next)(LitElement) {
           </button>`
         : nothing}
       ${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]
+        if (fromSample !== undefined)
+          return html`<label sampled title=${i18next.t('figure.text.data-value-from-sample')}>
+            <span>${asset.stateInputs?.[control.id]?.label ?? control.id} <span drive>${i18next.t('figure.label.data-value-from-sample')}</span></span>
+            <output>${Math.round(fromSample * 100) / 100} ${unitWord(control.unit)}</output>
+          </label>`
         const value = this.giving[control.id] ?? asset.stateDefaults[control.id] ?? control.min
         /* 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.renderDial(control, value)}
@@ -620,9 +664,11 @@ 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

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()))

package/client/modeller/palette.ts

@@ -69,3 +69,30 @@ export function paletteRecipe(kind: FigurePaletteKind, id: string): FigurePrimit
       }
   }
 }
+
+/**
+ * Whether a part added now is the figure's base, added fastened to its mounting plane: the figure has no part yet and
+ * stands on a plane -- the floor (also when not said), the ceiling or a wall. A centred figure has no plane to stand on.
+ */
+export function firstPartFastensToPlane(drawn: readonly unknown[], placement: string | undefined): boolean {
+  return drawn.length === 0 && placement !== 'center'
+}
+
+const PALETTE_KINDS: FigurePaletteKind[] = ['box', 'cylinder', 'rounded-box', 'sphere', 'frustum', 'polygon', 'pyramid', 'pipe', 'plate', 'wall', 'hollow-box', 'portal']
+
+/**
+ * Whether a drawn part still stands where the palette put it -- unturned, at one of the places a part is added at. Such a
+ * part was not placed by the author: fastening it has no place of theirs to keep (tutorial 2026-11-11, a mast added
+ * inside the body was fastened 550 mm deep in it).
+ */
+export function standsWhereAdded(pose: { r: number[][]; t: number[] } | undefined): boolean {
+  if (!pose) return false
+  const unturned = pose.r.every((row, i) => row.every((v, j) => Math.abs(v - (i === j ? 1 : 0)) < 1e-9))
+  return (
+    unturned &&
+    PALETTE_KINDS.some(kind => {
+      const { x, y, z } = paletteRecipe(kind, 'p').position
+      return [x, y, z].every((v, i) => Math.abs(v - pose.t[i]!) < 1e-6)
+    })
+  )
+}

package/client/modeller/pivot.ts

@@ -0,0 +1,76 @@
+import { compileFigureGraph } from '@hatiolab/figure-model'
+
+import type { Axis } from './links.js'
+import type { FigureRevision } from './revision.js'
+
+/*
+ * Where a turn's axis may be put by name: the part's top end, its middle, its bottom end. The motion form's 「축이
+ * 지나는 점」 is measured from the joint's origin along the joint's own axes, which a person cannot see -- in the
+ * humanoid lesson the shoulder was given Y 120 to lift the pivot "to the shoulder" when the origin already stood at the
+ * arm's top end (attached level with the torso's top), and the arm turned about a point 120 mm above it (tutorial run
+ * 2026-11-12). A named point is worked out here from the part as it rests, so the number is right whatever the face,
+ * the alignment or the gap.
+ */
+
+export type PivotPoint = 'top' | 'middle' | 'bottom'
+export const PIVOT_POINTS: readonly PivotPoint[] = ['top', 'middle', 'bottom']
+
+type Pose = { r: number[][]; t: number[] }
+type Faces = Partial<Record<'left' | 'right' | 'bottom' | 'top' | 'back' | 'front', { at: number }>>
+
+/**
+ * The `through` that puts a turn's axis through each named point of `part`, in the joint's frame: null when the part
+ * has no joint to another part, or its shape has no faces to measure. A distance along the turn's own axis (`along`)
+ * moves nothing and is left out: the shoulder's points read Y alone, not an X the person would wonder about.
+ */
+export function pivotPointsOf(revision: FigureRevision, part: string, along?: Axis): Record<PivotPoint, Partial<Record<Axis, number>>> | null {
+  const joint = revision.asset.joints?.find(j => j.body1.part === part)
+  if (!joint || !('part' in joint.body0)) return null
+  const faces = (revision.geometry.find(g => (g as { id: string }).id === part) as { shape?: { faces?: Faces } } | undefined)?.shape?.faces
+  const mid = (lo: keyof Faces, hi: keyof Faces) => (faces?.[lo] && faces?.[hi] ? (faces[lo]!.at + faces[hi]!.at) / 2 : undefined)
+  const [x, z] = [mid('left', 'right'), mid('back', 'front')]
+  if (x === undefined || z === undefined || !faces?.top || !faces?.bottom) return null
+  const pose = restingPoseOf(revision, part)
+  if (!pose) return null
+  /* The pose carries the part's own frame into the joint's: a point of the part, said in the joint's frame. */
+  const inJoint = (p: number[]): Partial<Record<Axis, number>> => {
+    const v = [0, 1, 2].map(i => pose.r[i]![0]! * p[0]! + pose.r[i]![1]! * p[1]! + pose.r[i]![2]! * p[2]! + pose.t[i]!)
+    const out: Partial<Record<Axis, number>> = {}
+    ;(['x', 'y', 'z'] as const).forEach((a, i) => {
+      const mm = Math.round(v[i]! * 10) / 10
+      if (a !== along && Math.abs(mm) >= 0.05) out[a] = mm
+    })
+    return out
+  }
+  return {
+    top: inJoint([x, faces.top.at, z]),
+    middle: inJoint([x, (faces.top.at + faces.bottom.at) / 2, z]),
+    bottom: inJoint([x, faces.bottom.at, z])
+  }
+}
+
+/** The part's pose in its joint's frame with every control at its default: the joint at rest, not as the sliders left it. */
+function restingPoseOf(revision: FigureRevision, part: string): Pose | null {
+  const m = revision.asset.document.model as unknown as { nodes: { id: string; outputs: Record<string, string> }[] }
+  const node = m.nodes.find(n => n.id === `${part}.pose`)
+  if (!node) return null
+  try {
+    const values = compileFigureGraph(m as never).evaluate({ ...revision.inputs, ...(revision.asset.stateDefaults ?? {}) }).values as Record<string, unknown>
+    const pose = values[Object.values(node.outputs)[0]!] as Pose | undefined
+    return pose?.r && pose?.t ? pose : null
+  } catch {
+    return null
+  }
+}
+
+/** Which named point a `through` is, when it is one: the form marks the button it matches. */
+export function pivotPointOf(
+  points: Record<PivotPoint, Partial<Record<Axis, number>>> | null,
+  through: Partial<Record<Axis, number>> | undefined,
+  along?: Axis
+): PivotPoint | undefined {
+  if (!points) return undefined
+  const same = (a: Partial<Record<Axis, number>>, b: Partial<Record<Axis, number>> = {}) =>
+    (['x', 'y', 'z'] as const).every(k => k === along || Math.abs((a[k] ?? 0) - (b[k] ?? 0)) < 0.5)
+  return PIVOT_POINTS.find(p => same(points[p], through))
+}

package/client/modeller/product-session.ts

@@ -265,7 +265,11 @@ export function createFigureProductSession(store: FigureProductStore) {
      */
     detachAsCopy() {
       if (saving) throw refusal('SESSION_SAVING', '저장이 끝난 뒤 편집해 주세요.')
-      if (!conflict) throw refusal('SESSION_NO_CONFLICT', '충돌한 저장이 없습니다.')
+      /*
+        After a conflict, or to release edits that break the released contract as a new figure type (the release gate's
+        way out, tutorial 2026-11-11): either way the figure it came from stays as the server has it.
+      */
+      if (!conflict && !id) throw refusal('SESSION_NOT_SAVED', '저장된 피규어가 아닙니다.')
       id = undefined
       baseline = undefined
       creationId = crypto.randomUUID()