@things-factory/figure-ui 10.1.245 → 10.1.246

package/client/modeller/figure-clips.ts

@@ -7,12 +7,14 @@ import { i18next, localize } from '@operato/i18n'
 import { unitWord } from './unit-words.js'
 import type { FigureAsset } from '@hatiolab/figure-model'
 
-import { clipGroupsOf, clipsOf, freeGroupIdOf, groupEdit, poseAt, trackEdit, undrivenOf, withKey, withoutKey, type Clip, type ClipGroup, type ClipTrack } from './clips.js'
+import { clipGroupsOf, withKeyChanged, clipsOf, copiedTrackEdit, copyTargetsOf, freeClipNameOf, freeGroupIdOf, groupEdit, poseAt, shiftable, trackEdit, undrivenOf, withKey, withoutKey, type Clip, type ClipGroup, type ClipTrack } from './clips.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { HelpToggles } from './help.js'
 
 /** A value as a person reads it: at most three decimals, the float's last digits (14.399999999999999) left out. */
 const shown = (value: number) => value.toLocaleString(undefined, { maximumFractionDigits: 3 })
+/* A number field's value: no grouping, to a thousandth. */
+const typed = (value: number) => String(Math.round(value * 1000) / 1000)
 
 /**
  * 클립 — controls played by keys over time. A clip is one clock; each track plays one
@@ -55,7 +57,7 @@ export class FigureClips extends localize(i18next)(LitElement) {
     */
     div[track-head] {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) 30px;
+      grid-template-columns: minmax(0, 1fr) 30px 30px;
       gap: 4px 6px;
       align-items: center;
     }
@@ -70,6 +72,19 @@ export class FigureClips extends localize(i18next)(LitElement) {
       margin: 0;
       padding: 0;
     }
+    /* A track copied onto a control, moved round its loop: under its head, in the panel's form look. */
+    div[copy-form] {
+      display: grid;
+      gap: 6px;
+      padding: 6px 8px;
+      border-radius: 6px;
+      background: var(--md-sys-color-surface-container);
+    }
+    div[copy-form] div[pair] {
+      display: flex;
+      gap: 6px;
+      justify-content: flex-end;
+    }
     div[keys] {
       display: flex;
       flex-wrap: wrap;
@@ -84,6 +99,34 @@ export class FigureClips extends localize(i18next)(LitElement) {
       background: var(--md-sys-color-surface-container);
       font-variant-numeric: tabular-nums;
     }
+    /* A key's moment and value, typed in the chip: as narrow as their numbers, on the chip's ground. */
+    span[key] input {
+      width: 44px;
+      min-width: 0;
+      height: 20px;
+      padding: 0 2px;
+      font: inherit;
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+      color: inherit;
+      background: transparent;
+      border: none;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+    span[key] input[readonly] {
+      border-bottom-color: transparent;
+    }
+    label[at] {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      font-variant-numeric: tabular-nums;
+    }
+    label[at] input {
+      width: 52px;
+      min-width: 0;
+      text-align: right;
+    }
     span[key] button {
       width: 22px;
       height: 22px;
@@ -107,6 +150,8 @@ export class FigureClips extends localize(i18next)(LitElement) {
   @state() private at: Record<string, number> = {}
   @state() private adding = { state: '', clip: '', name: '', duration: 2, group: '' }
   @state() private grouping = { clip: '', label: '' }
+  /** The track whose copy is being set up: onto which control, how many seconds later. */
+  @state() private copying?: { clip: string; state: string; target: string; seconds: number }
 
   render() {
     const asset = this.asset
@@ -128,6 +173,8 @@ export class FigureClips extends localize(i18next)(LitElement) {
   private renderClip(clip: Clip) {
     const at = Math.min(this.at[clip.name] ?? 0, clip.duration)
     const number = (e: Event) => (e.target as HTMLInputElement).valueAsNumber
+    /* A copy plays the same controls: only clips of one motion group may (ADR-0051 §3.2). */
+    const grouped = !!this.asset?.motionGroups?.some(g => g.clips.includes(clip.name))
     return html`<section clip>
       <div form>
         <span>${i18next.t('figure.label.clip-name')}</span>
@@ -135,6 +182,10 @@ export class FigureClips extends localize(i18next)(LitElement) {
         <span>${i18next.t('figure.label.clip-duration')}</span>
         <input type="number" min="0.1" step="any" .value=${String(clip.duration)} ?disabled=${this.locked} @change=${(e: Event) => this.edit({ kind: 'set-clip', clip: clip.name, duration: number(e) })} />
       </div>
+      <button act copy-clip ?disabled=${this.locked || !grouped} title=${i18next.t(grouped ? 'figure.text.copy-clip-explained' : 'figure.text.copy-clip-needs-group')}
+        @click=${() => this.edit({ kind: 'copy-clip', clip: clip.name, name: freeClipNameOf(this.asset!, clip.name) })}>
+        <md-icon>content_copy</md-icon>${i18next.t('figure.button.copy-clip')}
+      </button>
       <div row>
         <input
           type="range"
@@ -147,7 +198,18 @@ export class FigureClips extends localize(i18next)(LitElement) {
           @input=${(e: Event) => this.scrub(clip, number(e), true)}
           @change=${(e: Event) => this.scrub(clip, number(e))}
         />
-        <small>${at.toFixed(2)} s</small>
+        <label at>
+          <input
+            type="number"
+            min="0"
+            max=${clip.duration}
+            step="any"
+            .value=${String(Math.round(at * 1000) / 1000)}
+            ?disabled=${this.locked}
+            aria-label=${i18next.t('figure.label.clip-time')}
+            @change=${(e: Event) => this.scrub(clip, Math.min(Math.max(number(e), 0), clip.duration))}
+          />s
+        </label>
       </div>
       ${clip.tracks.map(track => this.renderTrack(clip, track, at))}
     </section>`
@@ -166,14 +228,38 @@ export class FigureClips extends localize(i18next)(LitElement) {
           <option value="wrap" ?selected=${track.loop === 'wrap'}>${i18next.t('figure.label.clip-loop-wrap')}</option>
           <option value="hold" ?selected=${track.loop === 'hold'}>${i18next.t('figure.label.clip-loop-hold')}</option>
         </select>
+        <button act copy-track ?disabled=${this.locked} title=${i18next.t('figure.button.copy-track')} aria-label=${i18next.t('figure.button.copy-track')}
+          @click=${() => (this.copying = this.copying?.clip === clip.name && this.copying.state === track.state ? undefined : { clip: clip.name, state: track.state, target: track.state, seconds: 0 })}>
+          <md-icon>content_copy</md-icon>
+        </button>
         <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-track')} @click=${() => this.edit({ kind: 'remove-driver', state: track.state, clip: clip.name })}>
           <md-icon>close</md-icon>
         </button>
       </div>
+      ${this.copying?.clip === clip.name && this.copying.state === track.state ? this.renderCopy(clip, track) : nothing}
       <div keys>
         ${track.keys.map(
           (key, i) => html`<span key
-            >${key.seconds}s → ${shown(key.value)}
+            ><input
+              type="number"
+              step="any"
+              min="0"
+              max=${clip.duration}
+              ?readonly=${i === 0}
+              ?disabled=${this.locked}
+              title=${i === 0 ? i18next.t('figure.text.key-starts-the-clip') : ''}
+              aria-label=${`${i18next.t('figure.label.key-seconds')} ${i + 1}`}
+              .value=${typed(key.seconds)}
+              @change=${(e: Event) => this.changeKey(clip, track, i, { seconds: (e.target as HTMLInputElement).valueAsNumber }, e)}
+            />s →
+            <input
+              type="number"
+              step="any"
+              ?disabled=${this.locked}
+              aria-label=${`${i18next.t('figure.label.key-value')} ${i + 1}`}
+              .value=${typed(key.value)}
+              @change=${(e: Event) => this.changeKey(clip, track, i, { value: (e.target as HTMLInputElement).valueAsNumber }, e)}
+            />
             <button
               ?disabled=${this.locked || !withoutKey(track.keys, i)}
               title=${i18next.t('figure.button.remove-key')}
@@ -195,6 +281,41 @@ export class FigureClips extends localize(i18next)(LitElement) {
     </div>`
   }
 
+  /**
+   * A track onto a control -- itself, or another -- moved round its loop by some seconds: one leg's curve given to the
+   * next on its own beat (robot dog 2026-11-03). Only a wrapping track moves round; any track is copied.
+   */
+  private renderCopy(clip: Clip, track: ClipTrack) {
+    const c = this.copying!
+    const asset = this.asset!
+    const targets = copyTargetsOf(asset, clip.name)
+    const moves = shiftable(track)
+    const seconds = moves && Number.isFinite(c.seconds) ? c.seconds : 0
+    const same = c.target === track.state && !seconds
+    return html`<div copy-form>
+      <div form>
+        <span>${i18next.t('figure.label.copy-track-onto')}</span>
+        <select aria-label=${i18next.t('figure.label.copy-track-onto')} @change=${(e: Event) => (this.copying = { ...c, target: (e.target as HTMLSelectElement).value })}>
+          ${targets.map(id => html`<option value=${id} ?selected=${id === c.target}>${id === track.state ? i18next.t('figure.label.copy-track-itself') : (asset.stateInputs?.[id]?.label ?? id)}</option>`)}
+        </select>
+        <span>${i18next.t('figure.label.copy-track-later')}</span>
+        <label at title=${moves ? '' : i18next.t('figure.text.copy-track-no-loop')}>
+          <input type="number" step="any" aria-label=${i18next.t('figure.label.copy-track-later')} ?disabled=${!moves} .value=${typed(seconds)}
+            @change=${(e: Event) => (this.copying = { ...c, seconds: (e.target as HTMLInputElement).valueAsNumber })} />s
+          <small>/ ${typed(clip.duration)}s</small>
+        </label>
+      </div>
+      <div pair>
+        <button act ?disabled=${this.locked || same}
+          @click=${() => {
+            this.edit(copiedTrackEdit(asset, clip, track, c.target, seconds))
+            this.copying = undefined
+          }}>${i18next.t(c.target === track.state ? 'figure.button.shift-track' : 'figure.button.copy-track-apply')}</button>
+        <button act @click=${() => (this.copying = undefined)}>${i18next.t('figure.button.cancel')}</button>
+      </div>
+    </div>`
+  }
+
   private renderAdd(asset: FigureAsset, clips: Clip[]) {
     const a = this.adding
     const joining = clips.find(c => c.name === a.clip)
@@ -370,6 +491,18 @@ export class FigureClips extends localize(i18next)(LitElement) {
     this.dispatchEvent(new CustomEvent('states', { detail: { changes }, bubbles: true, composed: true }))
   }
 
+  /** A key's moment or value typed: one edit of the track; a moment the track cannot take puts the field back. */
+  private changeKey(clip: Clip, track: ClipTrack, index: number, patch: Partial<{ seconds: number; value: number }>, e: Event) {
+    const keys = withKeyChanged(track.keys, index, patch, clip.duration)
+    if (!keys) {
+      const field = e.target as HTMLInputElement
+      const was = track.keys[index]!
+      field.value = 'seconds' in patch ? typed(was.seconds) : typed(was.value)
+      return
+    }
+    this.edit(trackEdit(clip, track, { keys }))
+  }
+
   private edit(edit: unknown) {
     this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))
   }

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

@@ -197,6 +197,7 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
         .target=${f.toPlane ? '' : f.target}
         .planeWord=${planeWord}
         .faces=${plan.theirFaces}
+        .drawnFaces=${plan.drawnFaces}
         .face=${plan.targetFace}
         .modes=${modes}
         .mode=${plan.mode}

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

@@ -161,6 +161,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
   /** The plane's name by the figure's placement: 바닥 · 천장 · 벽 · 중심. */
   @property() planeWord = ''
   @property({ attribute: false }) faces: string[] = []
+  /** The target's own face at each place of the box, as it is drawn: a turned target's faces where they are seen. */
+  @property({ attribute: false }) drawnFaces?: Partial<Record<FigureFace, FigureFace>>
   @property() face = ''
   @property({ attribute: false }) modes: FastenMode[] = ['meet', 'flush']
   @property() mode: FastenMode = 'meet'
@@ -213,22 +215,26 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
       this.change({ targetFace: f })
       this.released()
     }
-    const seen = SEEN.map(([f, d]) => {
+    /* The face at each place as the target is drawn: its own name, pressed as its own. */
+    const own = (place: FigureFace) => this.drawnFaces?.[place] ?? place
+    const seen = SEEN.map(([place, d]) => {
+      const f = own(place)
       const on = !this.surface && this.face === f
-      return svg`<path face=${f} d=${d} @click=${pick(f)}
+      return svg`<path face=${f} place=${place} d=${d} @click=${pick(f)}
         style=${`cursor:${has(f) ? 'pointer' : 'default'};fill:${on ? 'var(--md-sys-color-primary-container)' : 'var(--md-sys-color-surface-container)'};fill-opacity:${has(f) ? 1 : 0.4};stroke:${on ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-outline)'};stroke-width:${on ? 2 : 1}`}>
         <title>${i18next.t('figure.label.face-' + f)}</title></path>`
     })
-    const hidden = HIDDEN.map(([f, x, y]) => {
+    const hidden = HIDDEN.map(([place, x, y]) => {
+      const f = own(place)
       const on = !this.surface && this.face === f
-      return svg`<g face=${f} @click=${pick(f)} style=${`cursor:${has(f) ? 'pointer' : 'default'};opacity:${has(f) ? 1 : 0.35}`}>
+      return svg`<g face=${f} place=${place} @click=${pick(f)} style=${`cursor:${has(f) ? 'pointer' : 'default'};opacity:${has(f) ? 1 : 0.35}`}>
         <rect x=${x - 26} y=${y - 10} width="52" height="20" rx="10"
           style=${`fill:${on ? 'var(--md-sys-color-primary-container)' : 'transparent'};stroke:${on ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-outline)'};stroke-dasharray:${on ? '' : '3 2'}`} />
         <text x=${x} y=${y + 4} text-anchor="middle" font-size="11" style=${`fill:${on ? 'var(--md-sys-color-on-primary-container)' : 'var(--md-sys-color-on-surface-variant)'}`}>${i18next.t('figure.label.face-' + f)}</text>
       </g>`
     })
     /* A shape's faces beyond its six outer ones -- a door frame's opening -- are tags of their own under the box. */
-    const others = this.faces.filter(f => !SEEN.some(([s]) => s === f) && !HIDDEN.some(([h]) => h === f))
+    const others = this.faces.filter(f => !SEEN.some(([s]) => own(s) === f) && !HIDDEN.some(([h]) => own(h) === f))
     /* A sphere has no face: no box of faces it has not, only its surface. */
     return html`${this.faces.length
         ? svg`<svg viewBox="-20 0 ${PANEL_W} 126" role="img" aria-label=${this.target}>

package/client/modeller/figure-links.ts

@@ -739,6 +739,30 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       </div>`
   }
 
+  /**
+   * The point a turn passes (ADR-0159): the axis moved off the joint, the part left where it is -- a hip turning about
+   * the middle of its round cover, not its edge. Before, a hidden part stood in for the point (robot dog, 2026-11-03).
+   */
+  private renderThrough(m: MotionForm) {
+    const typed = (axis: Axis) => (e: Event) => (this.motion = { ...m, through: { ...m.through, [axis]: Number((e.target as HTMLInputElement).value) || 0 } })
+    return html`<div vector-row>
+        <label title=${i18next.t('figure.text.motion-through-explained')}>${i18next.t('figure.label.motion-through')} <span unit>(mm)</span></label>
+        <div triple>
+          ${AXES.map(axis =>
+            m.throughFollows?.[axis] !== undefined
+              ? html`<div cell held title=${i18next.t('figure.text.motion-through-follows')}>
+                  <span axis>${axis.toUpperCase()}</span>
+                  <input type="text" readonly .value=${'—'} aria-label=${`${i18next.t('figure.label.motion-through')} ${axis.toUpperCase()} · ${i18next.t('figure.text.motion-through-follows')}`} />
+                </div>`
+              : html`<div cell>
+                  <span axis>${axis.toUpperCase()}</span>
+                  <input type="number" step="any" aria-label=${`${i18next.t('figure.label.motion-through')} ${axis.toUpperCase()}`} .value=${String(m.through?.[axis] ?? 0)} @change=${typed(axis)} />
+                </div>`
+          )}
+        </div>
+      </div>`
+  }
+
   private renderMotion(asset: FigureAsset) {
     const now = motionOf(asset, this.partId)
     const joint = asset.joints?.find(j => j.body1.part === this.partId)
@@ -886,6 +910,7 @@ 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.kind === 'slide' ? nothing : this.renderThrough(m)}
       <button
         act
         ?disabled=${this.locked || !!refusal}

package/client/modeller/figure-material-panel.ts

@@ -7,7 +7,7 @@ import { activePalette } from '@hatiolab/things-scene'
 import type { FigureAssetGeometry, FigureMaterial, FigurePartEdit } from '@hatiolab/figure-model'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { isRoundBody } from './starting-shape.js'
-import { glowOf, materialEditOf, offeredPaletteOf } from './material-edit.js'
+import { glowOf, materialEditOf, offeredPaletteOf, ownColourOf } from './material-edit.js'
 
 /** The purpose each palette role is for, by its token. */
 const PURPOSE: Record<string, string> = {
@@ -80,6 +80,39 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
       background: var(--swatch);
       cursor: pointer;
     }
+    /*
+      The colour picked by its value: a swatch's size, told apart from the roles by a ring of every hue (the usual mark of
+      「any colour」). A colour picked joins the swatches before it, chosen there as any is. The browser's picker lies over
+      the ring, unseen.
+    */
+    label[own-colour] {
+      position: relative;
+      display: inline-grid;
+      place-items: center;
+      box-sizing: border-box;
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      background: conic-gradient(#f44336, #ffeb3b, #4caf50, #00bcd4, #3f51b5, #e91e63, #f44336);
+      cursor: pointer;
+    }
+    label[own-colour]::after {
+      content: '';
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--md-sys-color-surface);
+    }
+    label[own-colour] input {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      border: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
     button[swatch][on] {
       outline: 2px solid var(--md-sys-color-primary);
       outline-offset: 1px;
@@ -194,7 +227,18 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
       <h3>${i18next.t('figure.label.part-material')}</h3>
       <div field>
         <label>${i18next.t('figure.label.palette-role')}</label>
-        <div swatches>${this.swatches(painted, material.token, token => this.put({ token }))}</div>
+        <div swatches>
+          ${this.swatches(painted, material.token, token => this.put({ token }))}
+          <label own-colour title=${i18next.t('figure.text.own-colour-explained')}>
+            <input
+              type="color"
+              ?disabled=${this.locked}
+              aria-label=${i18next.t('figure.label.own-colour')}
+              .value=${this.offered()[material.token] ?? '#9a9a9a'}
+              @change=${(e: Event) => this.pickOwn((e.target as HTMLInputElement).value)}
+            />
+          </label>
+        </div>
         ${lit.length
           ? html`<small>${i18next.t('figure.label.status-colors')}</small>
               <div swatches>${this.swatches(lit, material.token, token => this.put({ token }))}</div>`
@@ -314,9 +358,15 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
     this.put(glowOf(this.body!.material, intensity), live)
   }
 
+  /** A colour picked by its value: the part takes it, and the asset's palette carries it in the same edit. */
+  private pickOwn(hex: string) {
+    const { token, colour } = ownColourOf(hex)
+    this.put({ token }, false, { [token]: colour })
+  }
+
   /** A material change: recorded, or -- while a slider is dragged -- only drawn (`part-live`). */
-  private put(patch: Partial<FigureMaterial>, live = false) {
-    const edit = materialEditOf(this.body!.id, this.body!.material, patch, this.palette, this.offered())
+  private put(patch: Partial<FigureMaterial>, live = false, more: Record<string, string> = {}) {
+    const edit = materialEditOf(this.body!.id, this.body!.material, patch, this.palette, { ...this.offered(), ...more })
     if (live) this.dispatchEvent(new CustomEvent('part-live', { detail: { edit }, bubbles: true, composed: true }))
     else this.edit(edit)
   }

package/client/modeller/figure-parts.ts

@@ -48,6 +48,9 @@ const KIND_ICON: Record<string, string> = {
   'hollow-box': 'check_box_outline_blank',
   polygon: 'pentagon',
   pyramid: 'details',
+  'tapered-box': 'change_history',
+  pipe: 'conversion_path',
+  duct: 'conversion_path',
   portal: 'door_front'
 }
 
@@ -58,7 +61,8 @@ const KIND_ICON: Record<string, string> = {
   corners rounded or an inside made, from the part's own 단면 section (§3.3), so the palette does not offer a second way.
 */
 /* A mesh part is made from a file (`import-mesh`), not from a starting size. */
-export type FigurePaletteKind = Exclude<FigurePrimitiveCreation['kind'], 'mesh'> | 'plate' | 'wall'
+/* A tapered box is a box with its top resized in the section editor, and a duct a pipe of a rectangle: no second way here. */
+export type FigurePaletteKind = Exclude<FigurePrimitiveCreation['kind'], 'mesh' | 'tapered-box' | 'duct'> | 'plate' | 'wall'
 const RECIPES: Array<{ kind: FigurePaletteKind; icon: string; label: string }> = [
   { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },
   { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },
@@ -66,6 +70,7 @@ const RECIPES: Array<{ kind: FigurePaletteKind; icon: string; label: string }> =
   { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },
   { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },
   { kind: 'pyramid', icon: 'details', label: 'figure.label.primitive-pyramid' },
+  { kind: 'pipe', icon: 'conversion_path', label: 'figure.label.primitive-pipe' },
   { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },
   { kind: 'wall', icon: 'crop_portrait', label: 'figure.label.primitive-wall' },
   { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
@@ -605,7 +610,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         <option value="" ?selected=${!b.level}>${i18next.t('figure.label.detail-none')}</option>
         ${DETAIL_LEVELS.map(
           one => html`<option value=${one} ?selected=${one === b.level}>
-            ${one} ${i18next.t('figure.label.detail-' + one)} · ${i18next.t('figure.text.n-parts-at-most', { limit: PART_LIMIT[one] })}
+            ${one === 'UNLIMITED' ? '' : `${one} `}${i18next.t('figure.label.detail-' + one)} · ${PART_LIMIT[one] === null ? i18next.t('figure.text.no-part-limit') : i18next.t('figure.text.n-parts-at-most', { limit: PART_LIMIT[one] })}
           </option>`
         )}
       </select>

package/client/modeller/figure-pipe-panel.ts

@@ -0,0 +1,215 @@
+import '@material/web/icon/icon.js'
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { live } from 'lit/directives/live.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { FIGURE_SWEEP_PIECE_LIMIT, type FigureEvaluatedShape, type FigurePipeRequest } from '@hatiolab/figure-model'
+import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
+import { bendWordOf, piecesOf, QUARTERS, type PanelPiece } from './pipe-path.js'
+
+type Body = { id: string; shape: FigureEvaluatedShape }
+/**
+ * 관 — a pipe's or a duct's section, wall and path (ADR-0100 §16.2), each change one `set-pipe` command, one step of the
+ * history. The path is its pieces in order: a straight run, so long; a bend, of a radius, so many degrees, toward one of
+ * four directions across the pipe -- each said as the figure's axis it turns to there. What the kernel refuses (a bend
+ * tighter than the section, a wall too thick, a path through itself) is said by the editor, with the number it takes.
+ */
+@customElement('figure-pipe-panel')
+export class FigurePipePanel extends localize(i18next)(LitElement) {
+  static styles = [
+    SidePanelStyles,
+    css`
+      :host {
+        display: block;
+      }
+      div[pipe] {
+        display: grid;
+        gap: 8px;
+      }
+      ol[pieces] {
+        display: grid;
+        gap: 6px;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      ol[pieces] li {
+        display: grid;
+        grid-template-columns: 20px minmax(0, 1fr) 30px;
+        gap: 4px 6px;
+        align-items: center;
+        padding: 6px 0;
+        border-top: 1px dashed var(--md-sys-color-outline-variant);
+      }
+      ol[pieces] li > b {
+        font-variant-numeric: tabular-nums;
+        opacity: 0.7;
+      }
+      ol[pieces] li div[form] {
+        grid-column: 2;
+      }
+      ol[pieces] li button[act] {
+        width: 30px;
+        min-height: var(--figure-control-height);
+        margin: 0;
+        padding: 0;
+      }
+      div[pair] {
+        display: flex;
+        gap: 6px;
+      }
+      div[pair] > button {
+        flex: 1;
+      }
+      md-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+      }
+    `
+  ]
+
+  @property({ attribute: false }) body?: Body
+  @property({ type: Boolean }) locked = false
+
+  private send(request: FigurePipeRequest) {
+    this.dispatchEvent(new CustomEvent('command', { detail: { action: { kind: 'set-pipe', part: this.body!.id, ...request } }, bubbles: true, composed: true }))
+  }
+
+  /** A number field: sent on change, put back when it is not a number. */
+  private number(label: string, now: number, set: (value: number) => void, options: { min?: number; step?: string; note?: string } = {}) {
+    return html`<span>${label}</span>
+      <div>
+        <input
+          type="number"
+          step=${options.step ?? 'any'}
+          min=${options.min ?? 0}
+          aria-label=${label}
+          ?disabled=${this.locked}
+          .value=${live(String(Math.round(now * 1000) / 1000))}
+          @change=${(e: Event) => {
+            const input = e.target as HTMLInputElement
+            const value = input.valueAsNumber
+            if (!Number.isFinite(value)) {
+              input.value = String(now)
+              return
+            }
+            set(value)
+          }}
+        />
+        ${options.note ? html`<small>${options.note}</small>` : nothing}
+      </div>`
+  }
+
+  /**
+   * Its end's size: the same as its start's until changed, when it narrows or widens to it evenly along its length
+   * (ADR-0100 §16.2.9) -- a bar thick below and thin above. 「한 굵기로」 makes it one size all along again.
+   */
+  private renderEnd(sweep: NonNullable<FigureEvaluatedShape['sweep']>, round: boolean) {
+    const s = sweep.section,
+      to = sweep.to
+    const same = html`<span></span>
+      <div>
+        <button act end-same ?disabled=${this.locked} @click=${() => this.send(round ? { endRadius: null } : { endWidth: null, endDepth: null })}>
+          ${i18next.t('figure.button.pipe-end-same')}
+        </button>
+      </div>`
+    if (round) {
+      const now = to?.kind === 'ellipse' ? 2 * to.radius.x! : s.kind === 'ellipse' ? 2 * s.radius.x! : 0
+      return html`${this.number(i18next.t('figure.label.pipe-end-diameter'), now, value => this.send({ endRadius: value / 2 }), { note: to ? '' : i18next.t('figure.text.pipe-end-same') })}
+        ${to ? same : nothing}`
+    }
+    if (s.kind !== 'rectangle') return nothing
+    const end = to?.kind === 'rectangle' ? to.size : s.size
+    return html`${this.number(i18next.t('figure.label.pipe-end-width'), end.x!, value => this.send({ endWidth: value }), { note: to ? '' : i18next.t('figure.text.pipe-end-same') })}
+      ${this.number(i18next.t('figure.label.pipe-end-depth'), end.z!, value => this.send({ endDepth: value }))}
+      ${to ? same : nothing}`
+  }
+
+  render() {
+    const sweep = this.body?.shape.sweep
+    if (!sweep) return nothing
+    const s = sweep.section
+    const round = s.kind === 'ellipse'
+    const pieces = piecesOf(sweep)
+    const withPiece = (i: number, piece: PanelPiece) => this.send({ path: pieces.map((p, j) => (j === i ? piece : p)) })
+    const radius = round ? s.radius.x ?? s.radius.z ?? 0 : 0
+    /* The group's heading is the part's properties' own, as a box's size group's is: here only what is in it. */
+    return html`<div pipe>
+      <div form>
+        <span>${i18next.t('figure.label.pipe-section')}</span>
+        <select
+          aria-label=${i18next.t('figure.label.pipe-section')}
+          ?disabled=${this.locked}
+          @change=${(e: Event) => {
+            const to = (e.target as HTMLSelectElement).value
+            if (to === 'round' && !round) this.send({ radius: Math.min(s.kind === 'rectangle' ? s.size.x! : 0, s.kind === 'rectangle' ? s.size.z! : 0) / 2 })
+            if (to === 'square' && round) this.send({ width: 2 * radius, depth: 2 * radius, round: 0 })
+          }}
+        >
+          <option value="round" ?selected=${round}>${i18next.t('figure.label.pipe-section-round')}</option>
+          <option value="square" ?selected=${!round}>${i18next.t('figure.label.pipe-section-square')}</option>
+        </select>
+        ${round
+          ? this.number(i18next.t('figure.label.pipe-diameter'), 2 * radius, value => this.send({ radius: value / 2 }))
+          : s.kind === 'rectangle'
+            ? html`${this.number(i18next.t('figure.label.pipe-width'), s.size.x!, value => this.send({ width: value }))}
+              ${this.number(i18next.t('figure.label.pipe-depth'), s.size.z!, value => this.send({ depth: value }))}
+              ${this.number(i18next.t('figure.label.pipe-round'), s.corner?.x ?? 0, value => this.send({ round: value }))}`
+            : nothing}
+        ${this.renderEnd(sweep, round)}
+        ${this.number(i18next.t('figure.label.pipe-wall'), sweep.wall ?? 0, value => this.send({ wall: value }), { note: i18next.t('figure.text.pipe-wall-zero') })}
+      </div>
+      <ol pieces aria-label=${i18next.t('figure.label.pipe-path')}>
+        ${pieces.map(
+          (p, i) => html`<li>
+            <b>${i + 1}</b>
+            <div form>
+              ${'line' in p
+                ? this.number(i18next.t('figure.label.pipe-line-length'), p.line, value => withPiece(i, { line: value }))
+                : html`${this.number(i18next.t('figure.label.pipe-bend-radius'), p.bend.radius, value => withPiece(i, { bend: { ...p.bend, radius: value } }))}
+                  ${this.number(i18next.t('figure.label.pipe-bend-angle'), p.bend.angle, value => withPiece(i, { bend: { ...p.bend, angle: Math.round(value) } }), { min: 1, step: '1' })}
+                  <span>${i18next.t('figure.label.pipe-bend-toward')}</span>
+                  <select
+                    aria-label=${i18next.t('figure.label.pipe-bend-toward')}
+                    ?disabled=${this.locked}
+                    @change=${(e: Event) => withPiece(i, { bend: { ...p.bend, toward: Number((e.target as HTMLSelectElement).value) } })}
+                  >
+                    ${[...new Set([...QUARTERS, p.bend.toward])].map(
+                      t => html`<option value=${t} ?selected=${t === p.bend.toward}>${bendWordOf(sweep, i, t) || `${t}°`}</option>`
+                    )}
+                  </select>`}
+            </div>
+            <button
+              act
+              ?disabled=${this.locked || pieces.length <= 1}
+              title=${i18next.t('figure.button.pipe-remove-piece')}
+              aria-label=${i18next.t('figure.button.pipe-remove-piece')}
+              @click=${() => this.send({ path: pieces.filter((_, j) => j !== i) })}
+            >
+              <md-icon>close</md-icon>
+            </button>
+          </li>`
+        )}
+      </ol>
+      <div pair>
+        <button act add-line ?disabled=${this.locked || pieces.length >= FIGURE_SWEEP_PIECE_LIMIT} @click=${() => this.send({ path: [...pieces, { line: 100 }] })}>
+          <md-icon>add</md-icon>${i18next.t('figure.button.pipe-add-line')}
+        </button>
+        <button
+          act
+          add-bend
+          ?disabled=${this.locked || pieces.length >= FIGURE_SWEEP_PIECE_LIMIT}
+          @click=${() => {
+            /* A bend wider than the section, toward its first quarter: 90° of twice the section's reach. */
+            const reach = round ? radius : Math.hypot(s.kind === 'rectangle' ? s.size.x! : 0, s.kind === 'rectangle' ? s.size.z! : 0) / 2
+            this.send({ path: [...pieces, { bend: { radius: Math.ceil(2 * reach), angle: 90, toward: 0 } }] })
+          }}
+        >
+          <md-icon>add</md-icon>${i18next.t('figure.button.pipe-add-bend')}
+        </button>
+      </div>
+    </div>`
+  }
+}