@things-factory/figure-ui 10.1.39 → 10.1.42

package/client/graphql/index.ts

@@ -59,6 +59,7 @@ const FIGURE_LIST_FIELDS = `
   score
   triangles
   groups
+  format
   thumbnailUpdatedAt
   updatedAt
   updater { id name }

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

@@ -0,0 +1,248 @@
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { MATERIAL_PRESETS, SEGMENT_PRESETS, v3TrianglesOf } from '@hatiolab/figure-model'
+import { activePalette } from '@hatiolab/things-scene'
+import type { V3AssetGeometry, V3Material, V3PartEdit } from '@hatiolab/figure-model'
+
+/** The purpose each palette role is for, by its token — the V2 inspector's words for the same roles. */
+const PURPOSE: Record<string, string> = {
+  'palette.primary': 'primary',
+  'palette.accent': 'accent',
+  'palette.neutral': 'neutral',
+  'palette.dark': 'dark',
+  'palette.light': 'light',
+  'palette.surface': 'surface',
+  'palette.status-danger': 'danger',
+  'palette.status-warning': 'warning',
+  'palette.status-info': 'info',
+  'palette.status-success': 'success'
+}
+export const purposeOf = (token?: string) => i18next.t(`figure.label.palette-purpose-${PURPOSE[token ?? ''] ?? 'registered'}`)
+
+/** Bodies with a rim — the ones `set-segments` accepts. */
+const ROUND = new Set(['cylinder', 'ellipticCylinder', 'sphere', 'frustum'])
+const DEFAULT_SEGMENTS = 12
+
+/**
+ * 재질 — a V3 part's material, drawn as the V2 inspector draws it (V3 parity row ③).
+ *
+ * The V3 editor showed the colour role as a raw token (`palette.dark`) in a select and nothing else. The V3 material
+ * holds the colour role, a preset, transparency and a glow; a round body also has how finely its rim is drawn. This
+ * shows those, with the V2 words: painted colours and lit colours as two groups of swatches, each named for what it
+ * is for.
+ *
+ * Not here, because a V3 material has no place for them: flat shading and casting shadows (V2 fields the converter
+ * does not carry). The glow's colour comes from the lit colours, as in V2.
+ *
+ * Every change leaves as one `v3-part-edit`; the editor runs it through the session, one step of the undo history.
+ */
+@customElement('figure-v3-material')
+export class FigureV3Material extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: grid;
+      gap: 10px;
+    }
+    h3 {
+      font-size: var(--ui-t-body, 13px);
+      margin: 12px 0 0;
+    }
+    div[field] {
+      display: grid;
+      gap: 4px;
+    }
+    div[field] > label {
+      font-weight: 600;
+    }
+    div[swatches] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    button[swatch] {
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      border-radius: 50%;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      background: var(--swatch);
+      cursor: pointer;
+    }
+    button[swatch][on] {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 1px;
+    }
+    small {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    select,
+    input[type='range'] {
+      font: inherit;
+      min-width: 0;
+    }
+    label[toggle] {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    div[segments] {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 4px;
+    }
+    div[segments] button {
+      display: grid;
+      padding: 4px;
+      font: inherit;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+      cursor: pointer;
+    }
+    div[segments] button[on] {
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+      border-color: var(--md-sys-color-primary);
+    }
+  `
+
+  /** The selected body as evaluated — its material, its segments and its shape. */
+  @property({ attribute: false }) body?: V3AssetGeometry & { id: string }
+  /** The asset's palette, token → colour. */
+  @property({ attribute: false }) palette: Record<string, string> = {}
+  @property({ type: Boolean }) locked = false
+
+  render() {
+    const part = this.body
+    if (!part) return nothing
+    const material = part.material
+    /*
+      The roles offered are the app's palette, as in V2, with any the asset carries beyond it. A new asset carries
+      only its primary colour; a role it lacks is sent with its colour and added in the same edit (`put`).
+    */
+    const entries = Object.entries(this.offered())
+    const painted = entries.filter(([token]) => !token.startsWith('palette.status-'))
+    const lit = entries.filter(([token]) => token.startsWith('palette.status-'))
+    const glow = material.emissive
+    return html`
+      <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>
+        ${lit.length
+          ? html`<small>${i18next.t('figure.label.status-colors')}</small>
+              <div swatches>${this.swatches(lit, material.token, token => this.put({ token }))}</div>`
+          : nothing}
+        <small><b>${purposeOf(material.token)}</b> — ${i18next.t('figure.text.palette-purpose-explained')}</small>
+      </div>
+      <div field>
+        <label>${i18next.t('figure.label.preset')}</label>
+        <select
+          ?disabled=${this.locked}
+          @change=${(e: Event) => this.put({ preset: ((e.target as HTMLSelectElement).value || undefined) as V3Material['preset'] })}
+        >
+          <option value="" ?selected=${!material.preset}>${i18next.t('figure.label.none')}</option>
+          ${MATERIAL_PRESETS.map(
+            preset => html`<option value=${preset} ?selected=${preset === material.preset}>${i18next.t('figure.label.preset-' + preset)}</option>`
+          )}
+        </select>
+      </div>
+      <label toggle>
+        <input
+          type="checkbox"
+          ?disabled=${this.locked}
+          .checked=${!!material.transparent}
+          @change=${(e: Event) => this.put({ transparent: (e.target as HTMLInputElement).checked || undefined })}
+        />
+        ${i18next.t('figure.label.transparent')}
+      </label>
+      <div field>
+        <label>${i18next.t('figure.label.emissive')}</label>
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.05"
+          ?disabled=${this.locked}
+          .value=${String(glow?.intensity ?? 0)}
+          @change=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value))}
+        />
+        <small>${(glow?.intensity ?? 0).toFixed(2)}</small>
+      </div>
+      ${glow
+        ? html`<div field>
+            <label>${i18next.t('figure.label.emissive-color')}</label>
+            <div swatches>${this.swatches(lit.length ? lit : painted, glow.token, token => this.put({ emissive: { ...glow, token } }))}</div>
+          </div>`
+        : nothing}
+      ${this.renderSegments(part)}
+    `
+  }
+
+  private renderSegments(part: V3AssetGeometry & { id: string }) {
+    const provider = (part as { shape?: { provider?: string } }).shape?.provider ?? ''
+    if (!ROUND.has(provider)) return nothing
+    const current = part.segments ?? DEFAULT_SEGMENTS
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.segments')}</label>
+        <div segments>
+          ${SEGMENT_PRESETS.map(
+            preset => html`<button
+              ?on=${preset === current}
+              ?disabled=${this.locked}
+              @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}
+            >
+              <b>${preset}</b>
+              <small>${i18next.t('figure.text.n-triangles', { count: v3TrianglesOf({ ...part, segments: preset }) })}</small>
+            </button>`
+          )}
+        </div>
+      </div>
+    `
+  }
+
+  private swatches(entries: [string, string][], chosen: string | undefined, pick: (token: string) => void) {
+    return entries.map(
+      ([token, colour]) => html`<button
+        swatch
+        ?on=${token === chosen}
+        ?disabled=${this.locked}
+        title=${purposeOf(token)}
+        aria-label=${purposeOf(token)}
+        style="--swatch:${colour}"
+        @click=${() => pick(token)}
+      ></button>`
+    )
+  }
+
+  private offered(): Record<string, string> {
+    return { ...(activePalette() as Record<string, string>), ...this.palette }
+  }
+
+  /** Intensity 0 is no glow at all, as in V2; a new glow takes the part's own colour until another is picked. */
+  private glow(intensity: number) {
+    const material = this.body!.material
+    this.put({ emissive: intensity > 0 ? { token: material.emissive?.token ?? material.token, intensity, on: true } : undefined })
+  }
+
+  private put(patch: Partial<V3Material>) {
+    const material: V3Material = { ...this.body!.material, ...patch }
+    for (const key of Object.keys(material) as (keyof V3Material)[]) if (material[key] === undefined) delete material[key]
+    /* The colours this material names that the asset does not carry yet. */
+    const offered = this.offered()
+    const palette = Object.fromEntries(
+      [material.token, material.emissive?.token]
+        .filter((token): token is string => !!token && this.palette[token] === undefined && offered[token] !== undefined)
+        .map(token => [token, offered[token]!])
+    )
+    this.edit({ kind: 'set-material', target: this.body!.id, material, ...(Object.keys(palette).length ? { palette } : {}) })
+  }
+
+  private edit(edit: V3PartEdit) {
+    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit }, bubbles: true, composed: true }))
+  }
+}

package/client/modeller/figure-v3-parts.ts

@@ -47,7 +47,7 @@ const PROVIDER_ICON: Record<string, string> = {
 const RECIPES: Array<{ kind: V3PrimitiveCreation['kind']; icon: string; label: string }> = [
   { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },
   { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },
-  { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rect' },
+  { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rounded-box' },
   { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
 ]
 
@@ -66,6 +66,8 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         color: var(--md-sys-color-on-surface);
         font: var(--label-font, inherit);
         font-size: 0.76rem;
+        /* Folds by its own width: the editor gives this column 140 px when it has two columns (UX, 2026-09-24). */
+        container-type: inline-size;
       }
       section {
         padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
@@ -232,6 +234,19 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         --md-icon-size: 15px;
         color: inherit;
       }
+      /*
+        Under 200 px the selected row's four buttons pushed its name out and the last one past the edge (seen at 140,
+        2026-09-24). They go to a line of their own under the name.
+      */
+      @container (max-width: 199px) {
+        li[selected] {
+          flex-wrap: wrap;
+        }
+        li[selected] div[ops] {
+          flex-basis: 100%;
+          justify-content: flex-end;
+        }
+      }
       p[quiet] {
         margin: 0;
         font-size: 0.76rem;

package/client/modeller/figure-v3-properties.ts

@@ -0,0 +1,254 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { V3_FACES } from '@hatiolab/figure-model'
+import type { V3AuthoringAction, V3Face } from '@hatiolab/figure-model'
+
+import { occupancyFromParts } from './v3-occupancy.js'
+import { tagsOf, v3FigureFacts, type Placement, type V3FigureFacts } from './v3-figure-facts.js'
+
+const PLACEMENTS: Placement[] = ['floor', 'ceiling', 'center']
+const FACES = Object.keys(V3_FACES) as V3Face[]
+
+/**
+ * 속성 — the V3 modeller's figure properties (parity row ②).
+ *
+ * The V2 inspector opens with what the figure is: its name, the face it is placed by, the room it takes up, where
+ * the catalogue files it. The V3 page had only the type. The same rows, in the same order, drawn the way the V2
+ * inspector draws them.
+ *
+ * Two kinds of change leave this tab, and it does neither itself:
+ *  - `v3-command` carries an authoring command (rename, declare the room, the mounting face). The page runs it
+ *    through the session, so it is one step of the same undo history as every other edit, and is saved with it.
+ *  - `v3-catalog` carries a change to the row (category, tags). Those are not in the asset; the page writes them
+ *    to the saved row at once, so they need a saved figure.
+ *
+ * Not here yet, because V3 has no place for them: editing the declared room by hand (V3 declares it from the
+ * parts, as graph expressions), and the detail level (the converter records it as lost). Both wait on a V3 ruling.
+ */
+@customElement('figure-v3-properties')
+export class FigureV3Properties extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 12px;
+      overflow: auto;
+      font-size: 0.76rem;
+      color: var(--md-sys-color-on-surface);
+    }
+    div[field] {
+      display: grid;
+      gap: 4px;
+    }
+    div[field] > label {
+      font-weight: 600;
+    }
+    div[row] {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+    }
+    input,
+    select,
+    button {
+      font: inherit;
+      min-width: 0;
+    }
+    input,
+    select {
+      padding: 5px 8px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 4px;
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+    }
+    div[row] > select {
+      flex: 1;
+    }
+    button {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      border: none;
+      border-radius: 999em;
+      cursor: pointer;
+      color: var(--md-sys-color-on-secondary-container);
+      background: var(--md-sys-color-secondary-container);
+    }
+    button:disabled,
+    input:disabled,
+    select:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+    button md-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    small {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  `
+
+  /** The source being edited. */
+  @property({ type: String }) source?: string
+  /** The saved row, if any. Category and tags live on it. */
+  @property({ type: String }) figureId?: string
+  @property({ type: String }) figureCategory?: string
+  @property({ type: Array }) figureTags?: string[]
+  /** The part and face picked for the mounting face, before 「이 면으로」 is pressed. */
+  @state() private pickedPart?: string
+  @state() private pickedFace?: V3Face
+
+  private facts(): V3FigureFacts | undefined {
+    try {
+      return this.source ? v3FigureFacts(this.source) : undefined
+    } catch {
+      /* A source the format refuses has no facts to show; the verdict tab says why. */
+      return undefined
+    }
+  }
+
+  render() {
+    const facts = this.facts()
+    if (!facts) return nothing
+    return html`${this.renderName(facts)} ${this.renderPlacement(facts)} ${this.renderSpace(facts)} ${this.renderMounting(facts)}
+    ${this.renderCatalog()}`
+  }
+
+  private renderName(facts: V3FigureFacts) {
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.name')}</label>
+        <input
+          .value=${facts.name}
+          placeholder=${i18next.t('figure.text.figure-display-name')}
+          @change=${(event: Event) => {
+            const input = event.target as HTMLInputElement
+            if (!input.value.trim()) {
+              /* The format refuses a blank name; put the old one back rather than send a command that fails. */
+              input.value = facts.name
+              return
+            }
+            if (input.value.trim() !== facts.name) this.command({ kind: 'rename', name: input.value })
+          }}
+        />
+      </div>
+    `
+  }
+
+  /**
+   * The face the figure is placed by. In V3 it is part of the room declaration, so choosing one declares the room
+   * again from the parts — the only way V3 declares it — with the new face. The hint says so.
+   */
+  private renderPlacement(facts: V3FigureFacts) {
+    const current = facts.placement ?? 'floor'
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.figure-placement')}</label>
+        <select
+          ?disabled=${!facts.parts.length}
+          @change=${(event: Event) => this.declare((event.target as HTMLSelectElement).value as Placement)}
+        >
+          ${PLACEMENTS.map(
+            one => html`<option value=${one} ?selected=${one === current}>${i18next.t('figure.label.placement-' + one)}</option>`
+          )}
+        </select>
+        <small>${i18next.t(facts.parts.length ? 'figure.text.placement-redeclares' : 'figure.text.fit-needs-parts')}</small>
+      </div>
+    `
+  }
+
+  private renderSpace(facts: V3FigureFacts) {
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.declared-space')}</label>
+        <div row>
+          <span>${i18next.t(facts.declared ? 'figure.text.declared-space-declared' : 'figure.text.declared-space-none')}</span>
+          <button fit ?disabled=${!facts.parts.length} @click=${() => this.declare(facts.placement ?? 'floor')}>
+            <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}
+          </button>
+        </div>
+      </div>
+    `
+  }
+
+  private renderMounting(facts: V3FigureFacts) {
+    const mounting = facts.mounting
+    const part = [this.pickedPart, mounting?.part, facts.parts[0]].find(one => one && facts.parts.includes(one))
+    const face: V3Face = this.pickedFace ?? mounting?.face ?? 'bottom'
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.mounting-face')}</label>
+        <div row>
+          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedPart = (e.target as HTMLSelectElement).value)}>
+            ${facts.parts.map(one => html`<option value=${one} ?selected=${one === part}>${one}</option>`)}
+          </select>
+          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedFace = (e.target as HTMLSelectElement).value as V3Face)}>
+            ${FACES.map(one => html`<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}
+          </select>
+        </div>
+        <div row>
+          <button ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part!, face })}>
+            ${i18next.t('figure.button.set-mounting-face')}
+          </button>
+          <button ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>
+            ${i18next.t('figure.button.clear-mounting-face')}
+          </button>
+        </div>
+        <small>
+          ${facts.declared
+            ? mounting
+              ? `${mounting.part} · ${i18next.t('figure.label.face-' + mounting.face)}`
+              : i18next.t('figure.label.mounting-face-none')
+            : i18next.t('figure.text.mounting-face-needs-space')}
+        </small>
+      </div>
+    `
+  }
+
+  private renderCatalog() {
+    const saved = !!this.figureId
+    return html`
+      <div field>
+        <label>${i18next.t('figure.label.category')}</label>
+        <input
+          .value=${this.figureCategory ?? ''}
+          ?disabled=${!saved}
+          placeholder=${i18next.t('figure.text.category-placeholder')}
+          @change=${(e: Event) => this.catalog({ category: (e.target as HTMLInputElement).value.trim() })}
+        />
+      </div>
+      <div field>
+        <label>${i18next.t('figure.label.tags')}</label>
+        <input
+          .value=${(this.figureTags ?? []).join(', ')}
+          ?disabled=${!saved}
+          placeholder=${i18next.t('figure.text.tags-placeholder')}
+          @change=${(e: Event) => this.catalog({ tags: tagsOf((e.target as HTMLInputElement).value) })}
+        />
+        ${saved ? nothing : html`<small>${i18next.t('figure.text.catalog-needs-a-save')}</small>`}
+      </div>
+    `
+  }
+
+  private declare(placement: Placement) {
+    if (!this.source) return
+    this.command(occupancyFromParts(this.source, placement))
+  }
+
+  private command(action: V3AuthoringAction) {
+    this.dispatchEvent(new CustomEvent('v3-command', { detail: { action }, bubbles: true, composed: true }))
+  }
+
+  private catalog(patch: { category?: string; tags?: string[] }) {
+    this.dispatchEvent(new CustomEvent('v3-catalog', { detail: patch, bubbles: true, composed: true }))
+  }
+}

package/client/modeller/modeller-route.ts

@@ -0,0 +1,25 @@
+/**
+ * Which modeller opens a figure — by the format of its source, which the server reports (`format`).
+ *
+ * The catalogue sent every figure to the V2 modeller, so a converted figure could only be opened by typing the V3
+ * page's address (2026-09-24). A new figure starts in V3: new V2 figures would only add to what the cutover has to
+ * convert (ADR-0087). A figure is opened in V3 only when the server says it is V3 — an unknown format goes to the
+ * V2 page, which reports what it could not read.
+ */
+export const V3_MODELLER = 'figure-v3-modeller'
+export const V2_MODELLER = 'figure-modeller'
+
+export function modellerPathOf(figure?: { id?: string; format?: string | null }): string {
+  if (!figure?.id) return V3_MODELLER
+  return figure.format === 'v3' ? `${V3_MODELLER}/${figure.id}` : `${V2_MODELLER}/${figure.id}`
+}
+
+/** The version a V3 asset stamps on itself. The V2 page forwards such a figure rather than failing on it. */
+export function isV3Source(source?: string | null): boolean {
+  if (!source) return false
+  try {
+    return (JSON.parse(source) as { version?: unknown })?.version === 'figure-v3-asset-1'
+  } catch {
+    return false
+  }
+}

package/client/modeller/v3-align.ts

@@ -0,0 +1,84 @@
+import { compileV3Asset, v3OccupiedBoxesOf, v3WritersOf } from '@hatiolab/figure-model'
+import type { V3Asset, V3InputChange, V3WorldBox } from '@hatiolab/figure-model'
+
+import { niceStep } from './part-edits.js'
+import type { GizmoReach } from './v3-gizmo.js'
+
+/**
+ * 맞추기 — the V2 inspector's align tools on a V3 part (parity row ③): centre on X, centre on Z, stand on the floor,
+ * mirror on X or Z, snap to the grid.
+ *
+ * V2 measured against its base box, which ran from 0 to its size on each axis. A V3 asset's frame has the floor at
+ * y 0 and X and Z centred on 0, so centring puts the part's box centre on 0 and the floor puts its lowest point on
+ * y 0. The part's box is its evaluated, rotated extent (`v3OccupiedBoxesOf`), so a turned part lands by what it
+ * actually covers, not by its unturned size.
+ *
+ * Every tool writes the part's own position (and, for snap, size) inputs — the same ones the gizmo writes, and only
+ * where the gizmo could (`GizmoReach`).
+ */
+export type AlignTool = 'centre-x' | 'centre-z' | 'floor' | 'snap'
+
+const AXES = ['x', 'y', 'z'] as const
+
+export function boxOf(asset: V3Asset, part: string): V3WorldBox | undefined {
+  const geometry = compileV3Asset(asset).evaluate().geometry
+  return v3OccupiedBoxesOf(geometry, v3WritersOf(asset)).find(box => box.part === part)
+}
+
+/** The grid V2 snaps to: about five steps across the figure, on 1 · 2 · 5 multiples. */
+export function gridStepOf(asset: V3Asset): number {
+  const geometry = compileV3Asset(asset).evaluate().geometry
+  const boxes = v3OccupiedBoxesOf(geometry, v3WritersOf(asset))
+  if (!boxes.length) return 1
+  const span = Math.max(
+    ...AXES.map(axis => {
+      const lo = Math.min(...boxes.map(b => b.centre[axis] - b.extent[axis] / 2))
+      const hi = Math.max(...boxes.map(b => b.centre[axis] + b.extent[axis] / 2))
+      return hi - lo
+    })
+  )
+  return niceStep(span)
+}
+
+export function alignChanges(asset: V3Asset, part: string, reach: GizmoReach, tool: AlignTool): V3InputChange[] {
+  if (!reach.translate) return []
+  const box = boxOf(asset, part)
+  if (!box) return []
+  const value = (id: string) => asset.designInputs[id] ?? 0
+  const set = (input: string, next: number): V3InputChange => ({ kind: 'set-design', input, unit: 'mm', value: Math.round(next) })
+  const at = (axis: 'x' | 'y' | 'z') => `${part}.position.${axis}`
+  switch (tool) {
+    case 'centre-x':
+      return [set(at('x'), value(at('x')) - box.centre.x)]
+    case 'centre-z':
+      return [set(at('z'), value(at('z')) - box.centre.z)]
+    case 'floor':
+      return [set(at('y'), value(at('y')) - (box.centre.y - box.extent.y / 2))]
+    case 'snap': {
+      const step = gridStepOf(asset)
+      const round = (n: number) => Math.round(n / step) * step
+      const changes = AXES.map(axis => set(at(axis), round(value(at(axis)))))
+      /* A size never snaps to 0 — the part would look gone. */
+      if (reach.scale && reach.sizes)
+        for (const id of reach.sizes) changes.push(set(id, Math.max(step, round(value(id)))))
+      return changes
+    }
+  }
+}
+
+/**
+ * Where a mirrored copy goes: the same distance on the other side of the centre plane. The copy is made by
+ * `duplicate-part` first; this is the position the copy is then given.
+ */
+export function mirrorChanges(asset: V3Asset, part: string, copy: string, axis: 'x' | 'z'): V3InputChange[] {
+  const box = boxOf(asset, part)
+  if (!box) return []
+  const id = `${part}.position.${axis}`
+  return [{ kind: 'set-design', input: `${copy}.position.${axis}`, unit: 'mm', value: Math.round((asset.designInputs[id] ?? 0) - 2 * box.centre[axis]) }]
+}
+
+/** Mirroring a part that already sits on the centre plane would put the copy inside it — V2 refuses it too. */
+export function canMirror(asset: V3Asset, part: string, axis: 'x' | 'z', reach: GizmoReach): boolean {
+  const box = reach.translate ? boxOf(asset, part) : undefined
+  return !!box && Math.abs(box.centre[axis]) >= 0.5
+}