@things-factory/figure-ui 10.1.48 → 10.1.50

package/client/modeller/v3-canvas.ts

@@ -8,6 +8,7 @@ import type { V3RenderPart } from './v3-renderer.js'
 import { DEFAULT_VIEW, sceneLook, WORKBENCH, type ViewSettings } from './figure-view.js'
 import { boardFor, changedKeys, componentOf, gizmoResultOf, type Board } from './v3-stage-model.js'
 import { JOINT_FAN } from './v3-joint-fan.js'
+import { ownerOf } from './v3-fields.js'
 
 /*
  * The V3 modeller's canvas -- a things-scene board in editing mode, as the V2 modeller's was.
@@ -36,6 +37,7 @@ interface SceneLayer extends SceneComponent {
   removeComponent?: (component: SceneComponent) => void
   invalidate?: () => void
   fitCameraToModel?: () => void
+  setGizmoMode?: (mode: 'translate' | 'rotate' | 'scale') => void
   app?: unknown
 }
 interface SceneHandle {
@@ -152,6 +154,11 @@ export class FigureV3Canvas extends LitElement {
     this.scene?.root?.fitCameraToModel?.()
   }
 
+  /** The gizmo in a mode on the selected part, as W, E and R do with the canvas focused -- the scene's toggle. */
+  gizmo(mode: 'translate' | 'rotate' | 'scale') {
+    this.scene?.root?.setGizmoMode?.(mode)
+  }
+
   /**
    * Stand the board up for this figure, or bring the one standing up to date. A new board only for another figure or
    * one that has outgrown it -- standing up again loses the selection and the camera.
@@ -160,7 +167,12 @@ export class FigureV3Canvas extends LitElement {
     if (!this.stage) return
     const needed = boardFor(this.parts, this.board)
     const outgrown = !this.board || needed.width > this.board.width || needed.height > this.board.height || needed.depth > this.board.depth
-    if (this.scene && this.standingFor === this.context && !outgrown) {
+    if (this.scene && this.standingFor === this.context) {
+      /*
+        A part dragged past the board's edge grows the board where it stands. Standing it up again lost the selection,
+        the gizmo and the camera after every such drag -- the gizmo seemed not to work at all (user, 2026-09-24).
+      */
+      if (outgrown) this.grow(needed)
       this.sync()
       return
     }
@@ -214,6 +226,19 @@ export class FigureV3Canvas extends LitElement {
     return found
   }
 
+  /** A larger board under the same scene: its size, and the grid that suits it. Components are re-placed by `sync`. */
+  private grow(needed: Board & { depth: number }) {
+    const layer = this.scene?.root
+    this.board = needed
+    if (!layer) return
+    this.writing = true
+    try {
+      layer.set({ width: needed.width, height: needed.height, depth: needed.depth, gridStep: niceGridStep(Math.max(needed.width, needed.height)) })
+    } finally {
+      this.writing = false
+    }
+  }
+
   /** Bring the components to the evaluation: remove the gone, write only what differs, add the new. */
   private sync() {
     const layer = this.scene?.root
@@ -251,34 +276,78 @@ export class FigureV3Canvas extends LitElement {
     root.on('selected', (after: unknown) => {
       const name = (after as SceneComponent[] | undefined)?.[0]?.state?.name
       const id = typeof name === 'string' ? name : ''
-      if (id !== this.selected) this.dispatchEvent(new CustomEvent('part-selected', { detail: id, bubbles: true, composed: true }))
+      if (ownerOf(id) !== this.selected) this.dispatchEvent(new CustomEvent('part-selected', { detail: id, bubbles: true, composed: true }))
     })
     /*
       A change comes up to the board with the component in the last argument's `origin` (the scene appends
       { origin, name, deliverer } as it bubbles). Reading the first argument as the component does nothing (V2).
     */
+    /*
+      A drag is written once, when it ends. The scene's gizmo writes the component on every move -- a size anchored on
+      the opposite face, from the scale it captured when the drag began -- and writing each move back through the
+      editor (and the evaluation back onto the component) fought it: the scale gizmo did not work (user, 2026-09-24).
+      While a pointer is down the changes are only kept; on release the last one is told, and the board is brought to
+      the evaluation. A change with no pointer down (the arrow keys) is told after a short pause.
+    */
     layer.on?.('change', (...args: unknown[]) => {
       if (this.writing) return
       const origin = (args[args.length - 1] as { origin?: SceneComponent } | undefined)?.origin
       const name = origin?.state?.name
-      const part = typeof name === 'string' ? this.parts.find(p => p.id === name) : undefined
-      if (!part || !this.board) return
-      const result = gizmoResultOf(part, origin!.state, this.board)
-      if (!result.position && !result.rotation && !result.scale) return
-      this.dispatchEvent(new CustomEvent('part-transformed', { detail: { id: part.id, result }, bubbles: true, composed: true }))
-      /* After the editor has applied (or refused) it: a refused change springs back to where the inputs put it. */
-      setTimeout(() => this.sync())
+      if (typeof name !== 'string' || !this.parts.some(p => p.id === name)) return
+      this.pending.set(name, origin!)
+      if (!this.pointerDown) this.commitSoon(80)
     })
+    this.stage.addEventListener('pointerdown', this.onPointerDown, true)
+    window.addEventListener('pointerup', this.onPointerUp, true)
+    window.addEventListener('pointercancel', this.onPointerUp, true)
+  }
+
+  /** Components the gizmo changed since the last commit, by part name. */
+  private pending = new Map<string, SceneComponent>()
+  private pointerDown = false
+  private commitTimer?: ReturnType<typeof setTimeout>
+  private onPointerDown = () => {
+    this.pointerDown = true
+  }
+  private onPointerUp = () => {
+    if (!this.pointerDown) return
+    this.pointerDown = false
+    /* After the scene's own drag end (it settles the depth and rebuilds the geometry on release). */
+    this.commitSoon(0)
+  }
+  private commitSoon(delay: number) {
+    clearTimeout(this.commitTimer)
+    this.commitTimer = setTimeout(() => this.commit(), delay)
+  }
+  /** Tell each changed part once, in the inputs' terms; then put the board where the inputs say (a refusal springs back). */
+  private commit() {
+    /*
+      Not while a pointer is down: a pause set by a change just before the press (the arrow keys, the scene settling
+      the pick) fired in the middle of the drag and wrote where the part was then -- a drag on a converted part became
+      two steps, the first one a few millimetres in (browser check, 2026-09-25). What is pending waits for the release.
+    */
+    if (this.pointerDown || !this.board || !this.pending.size) return
+    const changed = [...this.pending]
+    this.pending.clear()
+    for (const [name, component] of changed) {
+      const part = this.parts.find(p => p.id === name)
+      if (!part) continue
+      const result = gizmoResultOf(part, component.state, this.board)
+      if (!result.position && !result.rotation && !result.scale) continue
+      this.dispatchEvent(new CustomEvent('part-transformed', { detail: { id: part.id, result }, bubbles: true, composed: true }))
+    }
+    setTimeout(() => this.sync())
   }
 
   private showSelected() {
     const layer = this.scene?.root
     const root = layer?.root
     if (!layer || !root) return
-    const component = this.selected ? this.standing().get(this.selected) : undefined
+    /* A repeat is selected whole: every copy of it (the editor selects the part the author made). */
+    const wanted = this.selected ? [...this.standing()].filter(([name]) => ownerOf(name) === this.selected).map(([, component]) => component) : []
     const now = root.selected ?? []
-    if ((now[0] ?? undefined) === component && now.length === (component ? 1 : 0)) return
-    root.selected = component ? [component] : []
+    if (now.length === wanted.length && wanted.every((one, i) => now[i] === one)) return
+    root.selected = wanted
     layer.invalidate?.()
   }
 
@@ -291,6 +360,11 @@ export class FigureV3Canvas extends LitElement {
   }
 
   private teardown() {
+    clearTimeout(this.commitTimer)
+    this.pending.clear()
+    this.stage?.removeEventListener('pointerdown', this.onPointerDown, true)
+    window.removeEventListener('pointerup', this.onPointerUp, true)
+    window.removeEventListener('pointercancel', this.onPointerUp, true)
     this.scene?.dispose?.()
     this.scene = undefined
     this.standingFor = undefined

package/client/modeller/v3-editor.ts

@@ -3,6 +3,7 @@ import { i18next } from '@operato/i18n'
 import type { OxThreePane } from '@operato/layout'
 import '@operato/layout'
 import { customElement, property, state } from 'lit/decorators.js'
+import { PART_LIMIT, v3PartCountOf } from '@hatiolab/figure-model'
 import type { V3Asset, V3AuthoringAction, V3InputChange, V3PartEdit, V3PrimitiveCreation } from '@hatiolab/figure-model'
 import type { V3ProductSession } from './v3-product-session.js'
 import { captureV3Thumbnail } from './v3-thumbnail.js'
@@ -19,16 +20,22 @@ import { DEFAULT_VIEW, type ViewSettings } from './figure-view.js'
 import './figure-v3-capability.js'
 import { gizmoChanges, gizmoReachOf, type GizmoReach, type GizmoResult } from './v3-gizmo.js'
 import { keyActionOf } from './v3-keys.js'
-import { groupFields, partLabelOf, repeatOf, type FieldLike, type FieldGroup } from './v3-fields.js'
+import { groupFields, ownerOf, partLabelOf, repeatOf, type FieldLike, type FieldGroup } from './v3-fields.js'
 import { SidePanelStyles } from './side-panel-styles.js'
+import { ScrollbarStyles } from '@operato/styles'
 import { alignChanges, boxOf, canMirror, mirrorChanges, type AlignTool } from './v3-align.js'
 import type { V3PaletteKind, V3PartRow } from './figure-v3-parts.js'
 import { paletteRecipe } from './v3-palette.js'
 import type { FigureV3Canvas } from './v3-canvas.js'
+import { nudgeOf } from './v3-stage-model.js'
+import { sizeRangeRefusalOf } from './v3-refusals.js'
+import type { V3RenderPart } from './v3-renderer.js'
 import type { V3BudgetLine } from './v3-maturity.js'
 import { instanceRangeOf, rangeDiffers, turnsAboutAJoint } from './v3-links.js'
 import { jointFanOf } from './v3-joint-fan.js'
-import { isLive, livePartsOf, NOTHING_LIVE, scrubbed, scrubStep, type LiveValues } from './v3-live.js'
+import { jointDragOf } from './v3-joint-drag.js'
+import type { FirstSave } from './v3-first-save.js'
+import { isLive, livePartsOf, liveOverSession, NOTHING_LIVE, scrubbed, scrubStep, type LiveValues } from './v3-live.js'
 
 
 /**
@@ -41,7 +48,8 @@ type SideTab = 'properties' | 'capability' | 'motion' | 'verdict' | 'view' | 'hi
 /** Product editor surface. The injected session is shared by page persistence and AI commands. */
 @customElement('figure-v3-editor')
 export class FigureV3Editor extends LitElement {
-  static styles = [SidePanelStyles, css`
+  /* The operato scrollbar, as every scrolling panel of the app has it -- the side panel scrolled with the browser's own. */
+  static styles = [ScrollbarStyles, SidePanelStyles, css`
     :host {
       display: flex;
       flex-direction: column;
@@ -223,6 +231,11 @@ export class FigureV3Editor extends LitElement {
   @property({ type: Number }) instances?: number
   /** The cost line the parts list shows, from the maturity report. */
   @property({ attribute: false }) budget?: V3BudgetLine
+  /**
+   * Asks the type and name of a figure saved for the first time (the host has the catalogue's names); undefined
+   * when the author cancels, and then nothing is saved. Without it a new figure is saved under a temporary type.
+   */
+  @property({ attribute: false }) firstSave?: (name: string) => Promise<FirstSave | undefined>
   @state() private selected = ''
   @state() private error = ''
   @state() private tab: SideTab = 'properties'
@@ -259,14 +272,26 @@ export class FigureV3Editor extends LitElement {
   /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
   @state() private live: LiveValues = NOTHING_LIVE
   private lastContext: string | null = null
-  /** The modeller's keys (`v3-keys.ts`): undo, redo, duplicate, remove, back to the whole figure. */
+  /** The modeller's keys (`v3-keys.ts`): undo, redo, duplicate, remove, back to the whole figure, the gizmo's modes. */
   private onKey = (e: KeyboardEvent) => {
     const view = this.session?.read()
     if (!view || view.loading || view.saving || !view.context || !this.isConnected) return
-    const action = keyActionOf({ key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey, target: e.composedPath()[0] as HTMLElement }, this.selected)
+    const canvas = this.renderRoot.querySelector<FigureV3Canvas>('figure-v3-canvas')
+    const path = e.composedPath()
+    const action = keyActionOf(
+      { key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey, target: path[0] as HTMLElement, inScene: !!canvas && path.includes(canvas) },
+      this.selected
+    )
     if (!action) return
     e.preventDefault()
-    if (action === 'undo') view.canUndo && this.run(() => this.session!.undo())
+    /*
+      The session's history is the only one. With the canvas focused the scene took Ctrl+Z as well, undoing on its own
+      board the last value the canvas had written -- which the canvas then told as a drag: an undo of a drag on a
+      converted part wrote the drag again (2026-09-25). Heard first (capture) and kept from the scene.
+    */
+    e.stopPropagation()
+    if (action === 'translate' || action === 'rotate' || action === 'scale') canvas?.gizmo(action)
+    else if (action === 'undo') view.canUndo && this.run(() => this.session!.undo())
     else if (action === 'redo') view.canRedo && this.run(() => this.session!.redo())
     else if (action === 'duplicate') this.duplicatePart(this.selected)
     else if (action === 'remove') this.removePart(this.selected)
@@ -274,10 +299,10 @@ export class FigureV3Editor extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback()
-    window.addEventListener('keydown', this.onKey)
+    window.addEventListener('keydown', this.onKey, true)
   }
   disconnectedCallback() {
-    window.removeEventListener('keydown', this.onKey)
+    window.removeEventListener('keydown', this.onKey, true)
     super.disconnectedCallback()
   }
   protected willUpdate(_changed: PropertyValues) {
@@ -288,7 +313,7 @@ export class FigureV3Editor extends LitElement {
       this.error = ''
       this.hiddenParts = new Set()
     }
-    if (view && !view.geometry.some(g => g.id === this.selected)) this.selected = ''
+    if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected)) this.selected = ''
   }
   private run(action: () => unknown) {
     try {
@@ -296,7 +321,7 @@ export class FigureV3Editor extends LitElement {
       this.error = ''
       this.changed()
     } catch (error) {
-      this.error = error instanceof Error ? error.message : String(error)
+      this.error = sizeRangeRefusalOf(error, (key, params) => i18next.t(key, params)) ?? (error instanceof Error ? error.message : String(error))
     } finally {
       /* Committed or refused, the value in hand is gone: the figure as it stands is drawn again. */
       this.live = NOTHING_LIVE
@@ -304,8 +329,8 @@ export class FigureV3Editor extends LitElement {
   }
   /** What the canvas draws: the figure with the value in hand when there is one, and without the parts hidden on the workbench. */
   private drawnParts(geometry: Parameters<typeof drawableV3Parts>[0] | undefined, asset: unknown) {
-    const parts = (isLive(this.live) && asset ? livePartsOf(asset as V3Asset, this.live) : null) ?? drawableV3Parts(geometry ?? [])
-    return parts.filter(body => !this.hiddenParts.has((body as { id: string }).id))
+    const parts = (asset ? liveOverSession(asset as V3Asset, this.currentInputs(), this.live) : null) ?? drawableV3Parts(geometry ?? [])
+    return parts.filter(body => !this.hiddenParts.has(ownerOf((body as { id: string }).id)))
   }
   /**
    * Where the selected part turns and how far, with the pose as it is drawn now -- a value in hand included, so the
@@ -314,11 +339,20 @@ export class FigureV3Editor extends LitElement {
   private fanOf(asset: V3Asset | undefined) {
     if (!asset || !this.selected || this.hiddenParts.has(this.selected)) return null
     try {
-      return jointFanOf(asset, this.selected, this.live.values)
+      return jointFanOf(asset, this.selected, { ...this.currentInputs(), ...this.live.values })
     } catch {
       return null
     }
   }
+  /**
+   * Every input as the session holds it now -- the pose the author has set with the controls, and design values. The
+   * asset's source carries only the saved defaults, so drawing a value in hand over it put every other joint back to its
+   * saved angle while one slider moved, and the arm jumped when released (user, 2026-09-24).
+   */
+  private currentInputs(): Record<string, number> {
+    const view = this.session?.read()
+    return view ? Object.fromEntries(view.fields.map(field => [field.id, field.value as number])) : {}
+  }
   /** A value in hand: an input's value (design or pose) or a part edit. Nothing is recorded. */
   private hold(values: Record<string, number>, edit?: V3PartEdit) {
     this.live = { values: { ...this.live.values, ...values }, ...(edit ? { edit } : this.live.edit ? { edit: this.live.edit } : {}) }
@@ -335,9 +369,20 @@ export class FigureV3Editor extends LitElement {
         not from the one on screen, which stands wherever the author left it turned. A picture that cannot
         be taken is not an error: the save goes on without it (see `v3-thumbnail.ts`).
       */
+      let type: string | undefined
+      if (!this.session.read().id && this.firstSave) {
+        const answer = await this.firstSave(this.session.read().name ?? '')
+        if (!answer) return
+        /* The name is the figure's own, in the asset: one step of the history, like typing it in the properties. */
+        if (answer.name !== this.session.read().name) {
+          this.session.command({ kind: 'rename', name: answer.name })
+          this.changed()
+        }
+        type = answer.type
+      }
       const view = this.session.read()
       const thumbnail = await captureV3Thumbnail(drawableV3Parts(view.geometry ?? []), view.palette ?? {})
-      const promise = this.session.save({ thumbnail })
+      const promise = this.session.save({ thumbnail, type })
       this.changed()
       await promise
       this.error = ''
@@ -397,7 +442,8 @@ export class FigureV3Editor extends LitElement {
   /** What the gizmo may write for the selected part — read off the asset being edited. */
   private reachOf(id: string): GizmoReach {
     const none = { translate: false, rotate: false, scale: false }
-    if (!id || !this.session) return none
+    /* A repeat is moved and sized through its row, not by a gizmo on one copy. */
+    if (!id || !this.session || !this.session.read().geometry.some(g => g.id === id)) return none
     try {
       return gizmoReachOf(JSON.parse(this.session.source()), id)
     } catch {
@@ -407,10 +453,68 @@ export class FigureV3Editor extends LitElement {
   /** A drag, written back as the part's own inputs — one step of the history, like typing the numbers. */
   private transformed(id: string, result: GizmoResult) {
     const view = this.session!.read()
+    /* A part hanging from a joint: the drag edits the joint -- its value, or where it sits (ADR-0093). */
+    const asset = JSON.parse(this.session!.source()) as V3Asset
+    const drawn = view.geometry.find(g => g.id === id) as unknown as V3RenderPart | undefined
+    const drag = drawn ? jointDragOf(asset, ownerOf(id), drawn, result, this.currentInputs()) : null
+    if (drag) {
+      if (drag.kind === 'value') this.run(() => this.session!.apply([{ kind: 'set-state', input: drag.input, unit: drag.unit, value: drag.value }]))
+      else if (drag.kind === 'joint') this.run(() => this.session!.command({ kind: 'set-joint', joint: drag.joint }))
+      else {
+        this.error = i18next.t(`figure.text.gizmo-joint-${drag.reason}`, { joint: drag.joint, leader: drag.leader ?? '', axis: drag.axis ?? '' })
+        this.requestUpdate()
+      }
+      return
+    }
     const sizes = Object.fromEntries(view.fields.map(field => [field.id, field.value as number]))
-    const changes = gizmoChanges(id, this.reachOf(id), result, sizes)
-    if (changes.length) this.run(() => this.session!.apply(changes))
-    else this.requestUpdate()
+    /*
+      A part a joint places, scaled: only its measures change. The shift of its centre that an anchored scale makes is
+      the joint's to give -- the face on the joint stays there by itself (user, 2026-09-25: 「'R'모드에서 크기가 변하지 않는다」;
+      the shift had been taken for a move of the joint, and the size was dropped).
+    */
+    const jointed = !!asset.joints?.some(j => j.body1.part === ownerOf(id))
+    const changes = gizmoChanges(id, this.reachOf(id), jointed && result.scale ? { scale: result.scale } : result, sizes)
+    if (changes.length) {
+      this.run(() => this.session!.apply(changes))
+      return
+    }
+    if (jointed && result.scale) {
+      /* Only measures that follow another were pulled: the relation says their size, and it is not broken here. */
+      const axes = (['x', 'y', 'z'] as const).filter((_, i) => Math.abs(result.scale![i]! - 1) > 1e-4)
+      this.error = i18next.t('figure.text.gizmo-size-follows', { part: partLabelOf(id), axis: axes.join(', ').toUpperCase() })
+      return this.requestUpdate()
+    }
+    /*
+      A part whose place is worked out (a converted one) has no numbers for the gizmo to write: the drag is added beside
+      its rule (`nudge-part`). A part a joint or a fastening places, or a size that is worked out, is refused -- said in
+      words, not by the part silently springing back (user, 2026-09-24: 「기즈모 컨트롤도 전혀 작동이 안되는군」).
+    */
+    const body = view.geometry.find(g => g.id === id) as unknown as V3RenderPart | undefined
+    if (!body) return this.requestUpdate()
+    const { by, turn } = nudgeOf(body, result)
+    /* A size worked out from the figure's: the drag's factor beside its rule, so it still follows (V2 scaled any part). */
+    const grow: Partial<Record<'x' | 'y' | 'z', number>> = {}
+    if (result.scale) (['x', 'y', 'z'] as const).forEach((axis, i) => Math.abs(result.scale![i]! - 1) > 1e-6 && (grow[axis] = Math.round(result.scale![i]! * 1e6) / 1e6))
+    if (!Object.keys(by).length && !Object.keys(turn).length && !Object.keys(grow).length) return this.requestUpdate()
+    try {
+      this.session!.command({
+        kind: 'nudge-part',
+        part: id,
+        ...(Object.keys(by).length ? { by } : {}),
+        ...(Object.keys(turn).length ? { turn } : {}),
+        ...(Object.keys(grow).length ? { grow } : {})
+      })
+      this.error = ''
+      this.changed()
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      this.error = /carried by a joint/.test(message)
+        ? i18next.t('figure.text.gizmo-joint-places', { part: partLabelOf(id) })
+        : /is fastened to/.test(message)
+          ? i18next.t('figure.text.gizmo-fastening-places', { part: partLabelOf(id) })
+          : message
+      this.requestUpdate()
+    }
   }
   /** 맞추기 — one tool, one step of the history, through the same inputs as the gizmo. */
   private align(tool: AlignTool) {
@@ -473,7 +577,7 @@ export class FigureV3Editor extends LitElement {
    */
   private renderRepeatNote(geometry: readonly unknown[] | undefined) {
     const repeat = repeatOf(this.selected, geometry)
-    return repeat ? html`<p hint>${i18next.t('figure.text.repeat-member', { name: repeat.name, count: repeat.count, index: repeat.index })}</p>` : nothing
+    return repeat?.index ? html`<p hint>${i18next.t('figure.text.repeat-member', { name: repeat.name, count: repeat.count, index: repeat.index })}</p>` : nothing
   }
   private renamePart(input: HTMLInputElement) {
     const name = input.value.trim()
@@ -561,9 +665,7 @@ export class FigureV3Editor extends LitElement {
           ? i18next.t('figure.text.follow-would-loop')
           : code === 'FASTEN_CYCLE' || code === 'ATTACH_CYCLE'
             ? i18next.t('figure.text.fasten-would-loop')
-            : error instanceof Error
-              ? error.message
-              : String(error)
+            : sizeRangeRefusalOf(error, (key, params) => i18next.t(key, params)) ?? (error instanceof Error ? error.message : String(error))
     }
   }
   private changeField(field: { id: string; unit: V3InputChange['unit']; role?: string }, event: Event) {
@@ -672,9 +774,117 @@ export class FigureV3Editor extends LitElement {
         <md-icon>aspect_ratio</md-icon>${i18next.t('figure.button.scale-uniformly')}
       </button>`
   }
+  /**
+   * The parts list, one row per part the author made: a repeat is one row with how many copies it makes now (V2 listed
+   * its parts the same way; user, 2026-09-24: the conveyor's sixteen rollers were sixteen rows).
+   */
+  private partRows(geometry: readonly { id: string }[]): V3PartRow[] {
+    const rows = new Map<string, V3PartRow>()
+    for (const g of geometry) {
+      const id = ownerOf(g.id)
+      const row = rows.get(id)
+      if (row) {
+        row.copies = (row.copies ?? 1) + 1
+        continue
+      }
+      rows.set(id, {
+        id,
+        provider: (g as { shape?: { provider?: string } }).shape?.provider ?? '',
+        hidden: this.hiddenParts.has(id),
+        invisible: (g as { visible?: boolean }).visible === false,
+        ...(id !== g.id ? { copies: 1 } : {})
+      })
+    }
+    return [...rows.values()]
+  }
+  /** The detail level's part budget for the list's head, from figure-model's count (a repeat once). */
+  private partBudgetOf(asset: V3Asset | undefined) {
+    if (!asset) return undefined
+    try {
+      return { level: asset.detailLevel ?? null, used: v3PartCountOf(asset), limit: asset.detailLevel ? PART_LIMIT[asset.detailLevel] : null }
+    } catch {
+      return undefined
+    }
+  }
+  /**
+   * A repeat: which way its copies run, how many there are now, and how far apart -- V2's `repeat: { axis, pitch }`.
+   * The pitch of a row that fills its length is edited as a number (`set-repeat` makes it the part's own the first
+   * time); a row of a fixed count says its pitch cannot be set yet (figure-model refuses it the same way).
+   */
+  private renderRepeat(asset: V3Asset | undefined, geometry: readonly { id: string }[], unavailable: boolean) {
+    const repeat = repeatOf(this.selected, geometry)
+    if (!asset || !repeat || repeat.index) return nothing
+    const model = asset.document.model as unknown as {
+      nodes: { id: string; op: string; args: string[]; params?: Record<string, string> }[]
+      constants: { id: string; value: number }[]
+      inputs: { id: string; max?: number }[]
+    }
+    const layout = model.nodes.find(n => n.id === `${this.selected}.layout`)
+    const axis = model.nodes.find(n => n.id === `${this.selected}.repeat`)?.params?.axis ?? '?'
+    const own = `${this.selected}.repeat.pitch`
+    const pitch = asset.designInputs[own] ?? model.constants.find(c => c.id === layout?.args[4])?.value
+    const fits = layout?.op === 'fit-pitch@1'
+    /* What the pitch gives, in numbers: this many copies at the length it is authored, and how long it may be placed. */
+    const lengthRef = layout?.args[0] ?? ''
+    const length = asset.designInputs[lengthRef]
+    const longest = model.inputs.find(i => i.id === lengthRef)?.max
+    const limit = model.constants.find(c => c.id === layout?.args[6])?.value
+    const field = { id: own, unit: 'mm' as const, role: 'design', value: pitch ?? 0 }
+    return html`<section>
+      <h3>${i18next.t('figure.label.repeat')}</h3>
+      <div inline-field><label>${i18next.t('figure.label.repeat-axis')}</label><span value>${axis.toUpperCase()}</span></div>
+      <div inline-field><label>${i18next.t('figure.label.repeat-count')}</label><span value>${repeat.count}</span></div>
+      <div inline-field>
+        <label>${i18next.t('figure.label.repeat-gap')} <span unit>mm</span></label>
+        <input
+          type="number"
+          step="any"
+          aria-label=${own}
+          .value=${String(pitch ?? '')}
+          ?disabled=${unavailable || !fits}
+          @change=${(e: Event) => this.setPitch(field, e)}
+        />
+      </div>
+      <p hint>
+        ${fits && length !== undefined && longest !== undefined && limit !== undefined
+          ? i18next.t('figure.text.repeat-what-pitch-gives', {
+              length: length.toLocaleString(),
+              count: repeat.count,
+              longest: longest.toLocaleString(),
+              limit
+            })
+          : i18next.t(fits ? 'figure.text.repeat-fits-length' : 'figure.text.repeat-fixed-count')}
+      </p>
+    </section>`
+  }
+  /**
+   * A pitch always goes through `set-repeat`: the command moves the longest length with it (at most `limit` copies),
+   * which a plain input edit would not. Refused only when the authored length would already hold more copies than
+   * that -- said with the numbers.
+   */
+  private setPitch(field: { id: string; value: number }, event: Event) {
+    const input = event.target as HTMLInputElement
+    const pitch = input.valueAsNumber
+    if (!Number.isFinite(pitch) || pitch === field.value) return
+    try {
+      this.session!.command({ kind: 'set-repeat', part: this.selected, pitch })
+      this.error = ''
+      this.changed()
+    } catch (error) {
+      input.value = String(field.value)
+      const code = (error as { code?: string })?.code
+      const message = error instanceof Error ? error.message : String(error)
+      const found = /\((\d[\d.]*) mm\) a pitch under ([\d.]+) mm makes more than (\d+)/.exec(message)
+      this.error =
+        code === 'INPUT_RANGE' && found
+          ? i18next.t('figure.text.repeat-pitch-too-small', { length: Number(found[1]).toLocaleString(), min: found[2], limit: found[3] })
+          : message
+    }
+  }
   /** Choose a part, from the list, the canvas or a place row. A figure-level tab gives way to the part's properties. */
   private choose(id: string) {
-    this.selected = id
+    /* A copy on the canvas selects its repeat: the part the author made. */
+    this.selected = id ? ownerOf(id) : id
     if (id && (this.tab === 'verdict' || this.tab === 'view' || this.tab === 'history')) this.tab = 'properties'
   }
   private asset(): unknown {
@@ -707,11 +917,12 @@ export class FigureV3Editor extends LitElement {
     const view = this.session?.read()
     if (!view) return html`<p>${i18next.t('figure.text.opening-model')}</p>`
     const unavailable = view.loading || !!view.error || view.saving || !view.context
-    const part = view.geometry.find(g => g.id === this.selected)
+    const part = view.geometry.find(g => ownerOf(g.id) === this.selected)
     /* The controls (state inputs) have their own place in the motion tab; these are the design values. */
     const design = view.fields.filter(i => i.role !== 'state')
-    const own = design.filter(i => this.selected && i.id.startsWith(this.selected + '.'))
-    const common = design.filter(i => !view.geometry.some(g => i.id.startsWith(g.id + '.')))
+    /* A repeat's own row values (its pitch) have their own section, not the shape's. */
+    const own = design.filter(i => this.selected && i.id.startsWith(this.selected + '.') && !i.id.startsWith(this.selected + '.repeat.'))
+    const common = design.filter(i => !view.geometry.some(g => i.id.startsWith(ownerOf(g.id) + '.')))
     const status = view.loading
       ? 'figure.text.loading-figure'
       : view.saving
@@ -747,21 +958,16 @@ export class FigureV3Editor extends LitElement {
           slot="start"
           .budget=${this.budget}
           @show-maturity=${() => (this.tab = 'verdict')}
-          .parts=${view.geometry.map(
-            (g): V3PartRow => ({
-              id: g.id,
-              provider: (g as { shape?: { provider?: string } }).shape?.provider ?? '',
-              hidden: this.hiddenParts.has(g.id),
-              invisible: (g as { visible?: boolean }).visible === false
-            })
-          )}
+          .parts=${this.partRows(view.geometry)}
+          .partBudget=${this.partBudgetOf(asset as V3Asset | undefined)}
+          @set-detail-level=${(e: CustomEvent) => this.linkCommand({ kind: 'set-detail-level', level: e.detail.level })}
           .selected=${this.selected}
           ?locked=${unavailable}
           @add-part=${(e: CustomEvent) => this.add(e.detail.kind)}
           @select-part=${(e: CustomEvent) => this.choose(e.detail.id)}
           @toggle-part-hidden=${(e: CustomEvent) => this.toggleHiddenPart(e.detail.id)}
           @set-all-parts-hidden=${(e: CustomEvent) =>
-            (this.hiddenParts = e.detail.hidden ? new Set(view.geometry.map(g => g.id)) : new Set())}
+            (this.hiddenParts = e.detail.hidden ? new Set(view.geometry.map(g => ownerOf(g.id))) : new Set())}
           @move-part-up=${(e: CustomEvent) => this.movePart(e.detail.id, e.detail.to)}
           @move-part-down=${(e: CustomEvent) => this.movePart(e.detail.id, e.detail.to)}
           @duplicate-part=${(e: CustomEvent) => this.duplicatePart(e.detail.id)}
@@ -815,10 +1021,11 @@ export class FigureV3Editor extends LitElement {
                     </div>
                     ${this.renderRepeatNote(view.geometry)}
                   </section>
-                  ${this.renderGroups(groupFields(design, this.selected), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable))}
+                  ${this.renderRepeat(asset as V3Asset | undefined, view.geometry, unavailable)}
+                  ${this.renderGroups(groupFields(own, this.selected), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable))}
                   ${this.renderLinks(unavailable, 'shape')}
                   <figure-v3-material
-                    .body=${part}
+                    .body=${{ ...part, id: this.selected }}
                     .palette=${view.palette ?? {}}
                     ?locked=${unavailable}
                     @v3-part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}

package/client/modeller/v3-fields.ts

@@ -66,7 +66,11 @@ export function partLabelOf(id: string): string {
  */
 export function repeatOf(id: string, geometry: readonly unknown[] | undefined): { name: string; count: number; index: number } | null {
   const path = pathOf(id)
-  if (!path) return null
+  if (!path) {
+    /* The repeat itself, by its name: how many copies it makes now. */
+    const copies = (geometry ?? []).filter(g => pathOf((g as { id?: string }).id ?? '')?.[0] === `${id}.repeat`).length
+    return copies ? { name: id, count: copies, index: 0 } : null
+  }
   const count = (geometry ?? []).filter(g => pathOf((g as { id?: string }).id ?? '')?.[0] === path[0]).length
   const index = path.find((step): step is number => typeof step === 'number')
   return { name: String(path[0]).replace(/\.repeat$/, ''), count, index: (index ?? 0) + 1 }
@@ -82,3 +86,13 @@ function pathOf(id: string): unknown[] | null {
   }
 }
 
+/**
+ * The authored part a body belongs to: a repeat's copy belongs to its repeat (`roller`), any other body is its own. The
+ * editor selects, lists, hides and names parts by this -- what the author made, not every body the kernel draws
+ * (user, 2026-09-24: the conveyor's sixteen rollers were sixteen rows).
+ */
+export function ownerOf(id: string): string {
+  const path = pathOf(id)
+  return path ? String(path[0]).replace(/\.repeat$/, '') : id
+}
+