@things-factory/figure-ui 10.1.44 → 10.1.46

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

@@ -0,0 +1,394 @@
+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 { V3Asset, V3AuthoringAction, V3DimensionSource, V3Face } from '@hatiolab/figure-model'
+
+import {
+  acceptsOf,
+  AXES,
+  canFasten,
+  canFollow,
+  choiceOf,
+  fastenedTo,
+  followOf,
+  hasInstanceSize,
+  holdsThings,
+  motionOf,
+  placeFacesOf,
+  placeIdFor,
+  placesOn,
+  positionsWorkedOut,
+  type Axis,
+  type Follow
+} from './v3-links.js'
+
+const FACES = Object.keys(V3_FACES) as V3Face[]
+
+/**
+ * What a part is tied to — its size response, what it is fastened to, how it moves (parity rows ④ ⑤ ⑥).
+ *
+ * 「Build Once, Fit Anywhere」 lives here: a dimension that follows the instance size or another part is what lets
+ * a figure be placed at any size, and a part fastened to the face it rests on is what keeps it there when that
+ * happens. The release gate refuses a figure that falls apart when resized, and tells the author to fasten the
+ * parts that come away — this is where they do it. Motion is the V2 joint: a slide or a turn driven by a control.
+ *
+ * The V2 inspector has these as its dimensions, placement and joint sections, in that order; so does this. Every
+ * change is one figure-model authoring command, sent as `v3-command` and run by the editor through the session — one
+ * step of the undo history. Choices the command would refuse (a round body fastened, a size following an instance
+ * size the figure does not declare) are not offered, so the author is not sent into a refusal.
+ */
+@customElement('figure-v3-links')
+export class FigureV3Links 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[row] {
+      display: grid;
+      grid-template-columns: 24px minmax(0, 1fr);
+      gap: 6px;
+      align-items: center;
+    }
+    div[form] {
+      display: grid;
+      grid-template-columns: 96px minmax(0, 1fr);
+      gap: 6px;
+      align-items: center;
+    }
+    div[pair] {
+      display: flex;
+      gap: 6px;
+    }
+    div[pair] > * {
+      flex: 1;
+      min-width: 0;
+    }
+    select,
+    input,
+    button {
+      font: inherit;
+      min-width: 0;
+    }
+    button[act] {
+      justify-self: start;
+      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[act]:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+    button[act] md-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    small,
+    p[hint] {
+      margin: 0;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    b[bound] {
+      font-weight: 600;
+    }
+    label[toggle] {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+  `
+
+  /** The asset being edited. */
+  @property({ attribute: false }) asset?: V3Asset
+  /** The selected part. */
+  @property() partId = ''
+  /** The part's own extent along its axes now, in mm — what a dimension is fixed at when it stops following. */
+  @property({ attribute: false }) dims?: [number, number, number]
+  @property({ type: Boolean }) locked = false
+
+  @state() private fasten = { face: 'bottom' as V3Face, toPlane: false, target: '', targetFace: 'top' as V3Face, facing: 'meet' as 'meet' | 'flush', gap: 0 }
+  @state() private motion = { kind: 'slide' as 'slide' | 'turn', axis: 'x' as Axis, id: '', min: 0, max: 500 }
+  @state() private place = { role: 'grip' as 'seat' | 'grip', face: 'top' as V3Face, label: '', accepts: '', capacity: 1 }
+
+  render() {
+    const asset = this.asset
+    if (!asset || !this.partId) return nothing
+    return html`
+      <h3>${i18next.t('figure.label.dimensions')}</h3>
+      ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
+      <h3>${i18next.t('figure.label.placement')}</h3>
+      ${this.renderPositions(asset)}
+      ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
+      <h3>${i18next.t('figure.label.motion')}</h3>
+      ${this.renderMotion(asset)}
+      <h3>${i18next.t('figure.label.places')}</h3>
+      ${placeFacesOf(asset, this.partId).length ? this.renderPlaces(asset) : html`<p hint>${i18next.t('figure.text.places-need-a-box')}</p>`}
+    `
+  }
+
+  /** Where things are held on this part: a seat things rest on, or a grip things are held in (parity row ⑤). */
+  private renderPlaces(asset: V3Asset) {
+    const faces = placeFacesOf(asset, this.partId)
+    const p = this.place
+    const face = faces.includes(p.face) ? p.face : faces[0]!
+    const accepts = acceptsOf(p.accepts)
+    const capacityOk = Number.isSafeInteger(p.capacity) && p.capacity >= 1
+    const roleName = (role: string) => i18next.t('figure.label.place-' + role)
+    return html`
+      ${placesOn(asset, this.partId).map(
+        one => html`<div pair>
+          <span>
+            <b bound>${one.label}</b>
+            <small>${roleName(one.role)} · ${one.face ? i18next.t('figure.label.face-' + one.face) : ''} · ${one.accepts.join(', ')} · ${i18next.t('figure.label.place-holds', { count: one.capacity })}</small>
+          </span>
+          <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-binding', id: one.id })}>
+            <md-icon>close</md-icon>${i18next.t('figure.button.remove-place')}
+          </button>
+        </div>`
+      )}
+      <p hint>${i18next.t('figure.text.place-explained')}</p>
+      ${holdsThings(asset)
+        ? nothing
+        : html`<p hint>${i18next.t('figure.text.place-needs-holding')}</p>
+            <button act ?disabled=${this.locked} @click=${() => this.declareHolding(asset)}>
+              <md-icon>inventory_2</md-icon>${i18next.t('figure.button.declare-holding')}
+            </button>`}
+      <div pair>
+        <select @change=${(e: Event) => (this.place = { ...p, role: (e.target as HTMLSelectElement).value as 'seat' | 'grip' })}>
+          <option value="grip" ?selected=${p.role === 'grip'}>${roleName('grip')}</option>
+          <option value="seat" ?selected=${p.role === 'seat'}>${roleName('seat')}</option>
+        </select>
+        <select @change=${(e: Event) => (this.place = { ...p, face: (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 form>
+        <span>${i18next.t('figure.label.place-name')}</span>
+        <input .value=${p.label} placeholder=${roleName(p.role)} @change=${(e: Event) => (this.place = { ...p, label: (e.target as HTMLInputElement).value })} />
+        <span>${i18next.t('figure.label.place-accepts')}</span>
+        <input .value=${p.accepts} placeholder="BOX, TOTE" @input=${(e: Event) => (this.place = { ...p, accepts: (e.target as HTMLInputElement).value })} />
+        <span>${i18next.t('figure.label.place-capacity')}</span>
+        <input type="number" min="1" step="1" .value=${String(p.capacity)} @change=${(e: Event) => (this.place = { ...p, capacity: (e.target as HTMLInputElement).valueAsNumber })} />
+      </div>
+      ${accepts.length ? nothing : html`<small>${i18next.t('figure.text.place-accepts-needed')}</small>`}
+      <button
+        act
+        ?disabled=${this.locked || !accepts.length || !capacityOk}
+        @click=${() =>
+          this.command({
+            kind: 'add-binding',
+            id: placeIdFor(asset, this.partId, p.role),
+            label: p.label.trim() || roleName(p.role),
+            role: p.role,
+            part: this.partId,
+            face,
+            accepts,
+            capacity: p.capacity
+          })}
+      >
+        <md-icon>back_hand</md-icon>${i18next.t('figure.button.add-place')}
+      </button>
+    `
+  }
+
+  /** The figure holds things: `Capacity` and `Holdable`, the ladder's middle rung. One part edit, one undo step. */
+  private declareHolding(asset: V3Asset) {
+    const names = [...new Set([...(asset.document.capabilities.names ?? []), 'Capacity', 'Holdable'])]
+    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit: { kind: 'set-capabilities', names } }, bubbles: true, composed: true }))
+  }
+
+  private renderDimensions(asset: V3Asset) {
+    const others = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFollow(asset, one))
+    return AXES.map(axis => {
+      const now = followOf(asset, this.partId, axis)
+      const value = choiceOf(now)
+      return html`<div row>
+        <b>${axis.toUpperCase()}</b>
+        <select ?disabled=${this.locked || now.of === 'expression'} @change=${(e: Event) => this.follow(axis, (e.target as HTMLSelectElement).value, now)}>
+          <option value="own" ?selected=${value === 'own'}>${i18next.t('figure.label.follows-nothing')}</option>
+          ${AXES.filter(one => hasInstanceSize(asset, one)).map(
+            one => html`<option value=${`instance:${one}`} ?selected=${value === `instance:${one}`}>
+              ${i18next.t('figure.label.follows-instance')} · ${one.toUpperCase()}
+            </option>`
+          )}
+          ${others.flatMap(other =>
+            AXES.map(
+              one => html`<option value=${`part:${other}:${one}`} ?selected=${value === `part:${other}:${one}`}>${other} · ${one.toUpperCase()}</option>`
+            )
+          )}
+          ${now.of === 'expression' || now.of === 'input'
+            ? html`<option value=${value} selected>${now.of === 'input' ? now.input : i18next.t('figure.label.follows-expression')}</option>`
+            : nothing}
+        </select>
+      </div>`
+    })
+  }
+
+  private follow(axis: Axis, choice: string, now: Follow) {
+    const following = now.of !== 'own'
+    if (choice === 'own') {
+      if (!following) return
+      const mm = Math.max(1, Math.round(this.dims?.[AXES.indexOf(axis)] ?? 100))
+      this.command({ kind: 'unlink-dimension', part: this.partId, axis, mm })
+      return
+    }
+    const [of, a, b] = choice.split(':')
+    const source: V3DimensionSource = of === 'instance' ? { of: 'instance', axis: a as Axis } : { of: 'part', part: a!, axis: b as Axis }
+    this.command({ kind: 'link-dimension', part: this.partId, axis, source, replace: following })
+  }
+
+  /**
+   * Positions worked out from other values — V2's anchor rules, as the converter wrote them — each with the way to
+   * keep it where it is. This is the way out the release gate names when a resize leaves a part in the air.
+   */
+  private renderPositions(asset: V3Asset) {
+    return positionsWorkedOut(asset, this.partId).map(
+      axis => html`<div pair>
+        <span>${axis.toUpperCase()} · ${i18next.t('figure.label.position-worked-out')}</span>
+        <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'fix-position', part: this.partId, axis })}>
+          <md-icon>push_pin</md-icon>${i18next.t('figure.button.fix-position')}
+        </button>
+      </div>`
+    )
+  }
+
+  private renderFastening(asset: V3Asset) {
+    const to = fastenedTo(asset, this.partId)
+    const f = this.fasten
+    const targets = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFasten(asset, one))
+    return html`
+      ${to
+        ? html`<div pair>
+            <span>${i18next.t('figure.label.fastened-to')}: <b bound>${to}</b></span>
+            <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'detach', part: this.partId })}>
+              <md-icon>link_off</md-icon>${i18next.t('figure.button.detach')}
+            </button>
+          </div>`
+        : html`<p hint>${i18next.t('figure.text.fastening-explained')}</p>`}
+      <div form>
+        <span>${i18next.t('figure.label.my-face')}</span>
+        <select @change=${(e: Event) => (this.fasten = { ...f, face: (e.target as HTMLSelectElement).value as V3Face })}>
+          ${FACES.map(face => html`<option value=${face} ?selected=${face === f.face}>${i18next.t('figure.label.face-' + face)}</option>`)}
+        </select>
+      </div>
+      <label toggle>
+        <input type="checkbox" .checked=${f.toPlane} @change=${(e: Event) => (this.fasten = { ...f, toPlane: (e.target as HTMLInputElement).checked })} />
+        ${i18next.t('figure.label.stands-on-plane')}
+      </label>
+      ${f.toPlane
+        ? nothing
+        : html`<div form>
+            <span>${i18next.t('figure.label.target-part')}</span>
+            <select @change=${(e: Event) => (this.fasten = { ...f, target: (e.target as HTMLSelectElement).value })}>
+              <option value="" ?selected=${!f.target}>—</option>
+              ${targets.map(one => html`<option value=${one} ?selected=${one === f.target}>${one}</option>`)}
+            </select>
+            <span>${i18next.t('figure.label.target-face')}</span>
+            <select @change=${(e: Event) => (this.fasten = { ...f, targetFace: (e.target as HTMLSelectElement).value as V3Face })}>
+              ${FACES.map(face => html`<option value=${face} ?selected=${face === f.targetFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
+            </select>
+            <span>${i18next.t('figure.label.facing-meet')}</span>
+            <select @change=${(e: Event) => (this.fasten = { ...f, facing: (e.target as HTMLSelectElement).value as 'meet' | 'flush' })}>
+              <option value="meet" ?selected=${f.facing === 'meet'}>${i18next.t('figure.label.facing-meet')}</option>
+              <option value="flush" ?selected=${f.facing === 'flush'}>${i18next.t('figure.label.facing-flush')}</option>
+            </select>
+          </div>`}
+      <div form>
+        <span>${i18next.t('figure.label.gap')}</span>
+        <input type="number" step="any" .value=${String(f.gap)} @change=${(e: Event) => (this.fasten = { ...f, gap: Number((e.target as HTMLInputElement).value) || 0 })} />
+      </div>
+      <button
+        act
+        ?disabled=${this.locked || (!f.toPlane && !f.target)}
+        @click=${() =>
+          this.command({
+            kind: 'attach',
+            part: this.partId,
+            face: f.face,
+            to: f.toPlane ? { plane: 'mounting-plane' } : { part: f.target, face: f.targetFace },
+            ...(f.toPlane ? {} : { facing: f.facing }),
+            ...(f.gap ? { gap: f.gap } : {}),
+            replace: !!to
+          } as V3AuthoringAction)}
+      >
+        <md-icon>link</md-icon>${i18next.t('figure.button.fasten')}
+      </button>
+    `
+  }
+
+  private renderMotion(asset: V3Asset) {
+    const now = motionOf(asset, this.partId)
+    if (now) {
+      return html`<div pair>
+        <span>
+          ${i18next.t('figure.label.motion-' + now.kind)} · ${String(now.axis).toUpperCase()}
+          ${now.control ? html`<small>${now.control.id} (${now.control.unit}) ${now.control.min} … ${now.control.max}</small>` : nothing}
+        </span>
+        <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-motion', part: this.partId })}>
+          <md-icon>close</md-icon>${i18next.t('figure.button.remove-motion')}
+        </button>
+      </div>`
+    }
+    const m = this.motion
+    const unit = m.kind === 'turn' ? 'deg' : 'mm'
+    return html`
+      <p hint>${i18next.t('figure.text.motion-explained')}</p>
+      <div pair>
+        <select @change=${(e: Event) => this.setKind((e.target as HTMLSelectElement).value as 'slide' | 'turn')}>
+          <option value="slide" ?selected=${m.kind === 'slide'}>${i18next.t('figure.label.motion-slide')}</option>
+          <option value="turn" ?selected=${m.kind === 'turn'}>${i18next.t('figure.label.motion-turn')}</option>
+        </select>
+        <select @change=${(e: Event) => (this.motion = { ...m, axis: (e.target as HTMLSelectElement).value as Axis })}>
+          ${AXES.map(a => html`<option value=${a} ?selected=${a === m.axis}>${i18next.t('figure.label.motion-axis')} ${a.toUpperCase()}</option>`)}
+        </select>
+      </div>
+      <div form>
+        <span>${i18next.t('figure.label.control-id')}</span>
+        <input .value=${m.id} placeholder=${`${this.partId}-${m.kind}`} @change=${(e: Event) => (this.motion = { ...m, id: (e.target as HTMLInputElement).value.trim() })} />
+        <span>${i18next.t('figure.label.control-range')} (${unit})</span>
+        <div pair>
+          <input type="number" step="any" .value=${String(m.min)} @change=${(e: Event) => (this.motion = { ...m, min: Number((e.target as HTMLInputElement).value) })} />
+          <input type="number" step="any" .value=${String(m.max)} @change=${(e: Event) => (this.motion = { ...m, max: Number((e.target as HTMLInputElement).value) })} />
+        </div>
+      </div>
+      <button
+        act
+        ?disabled=${this.locked || !(m.max > m.min)}
+        @click=${() =>
+          this.command({
+            kind: 'add-motion',
+            part: this.partId,
+            motion: { kind: m.kind, axis: m.axis },
+            state: { id: m.id || `${this.partId}-${m.kind}`, unit, min: m.min, max: m.max, start: m.min }
+          })}
+      >
+        <md-icon>animation</md-icon>${i18next.t('figure.button.add-motion')}
+      </button>
+    `
+  }
+
+  private setKind(kind: 'slide' | 'turn') {
+    this.motion = kind === 'turn' ? { ...this.motion, kind, min: -90, max: 90 } : { ...this.motion, kind, min: 0, max: 500 }
+  }
+
+  private command(action: V3AuthoringAction) {
+    this.dispatchEvent(new CustomEvent('v3-command', { detail: { action }, bubbles: true, composed: true }))
+  }
+}
+

package/client/modeller/modeller-route.ts

@@ -1,25 +1,10 @@
 /**
- * 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.
+ * The one modeller. Every figure is V3 since ADR-0087 step 5 (2026-09-24, user decision: V2 is not kept), so the
+ * catalogue, a new figure and an old address all open the same page. `figure-v3-modeller` stays as an alias so a
+ * link written before the switch still lands.
  */
-export const V3_MODELLER = 'figure-v3-modeller'
-export const V2_MODELLER = 'figure-modeller'
+export const 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
-  }
+export function modellerPathOf(figure?: { id?: string }): string {
+  return figure?.id ? `${MODELLER}/${figure.id}` : MODELLER
 }

package/client/modeller/v3-editor.ts

@@ -1,15 +1,16 @@
 import { LitElement, html, css, type PropertyValues } from 'lit'
 import { i18next } from '@operato/i18n'
 import { customElement, property, state } from 'lit/decorators.js'
-import type { V3InputChange, V3PrimitiveCreation } from '@hatiolab/figure-model'
+import type { V3AuthoringAction, V3InputChange, V3PrimitiveCreation } from '@hatiolab/figure-model'
 import type { V3ProductSession } from './v3-product-session.js'
 import { captureV3Thumbnail } from './v3-thumbnail.js'
 import { drawableV3Parts } from './v3-renderer.js'
 import './v3-canvas.js'
 import './figure-v3-parts.js'
 import './figure-v3-material.js'
+import './figure-v3-links.js'
 import { gizmoChanges, gizmoReachOf, type GizmoReach, type GizmoResult } from './v3-gizmo.js'
-import { alignChanges, canMirror, mirrorChanges, type AlignTool } from './v3-align.js'
+import { alignChanges, boxOf, canMirror, mirrorChanges, type AlignTool } from './v3-align.js'
 import type { V3PartRow } from './figure-v3-parts.js'
 import type { FigureV3Canvas } from './v3-canvas.js'
 
@@ -420,6 +421,47 @@ export class FigureV3Editor extends LitElement {
             : String(error)
     }
   }
+  /** Size response, fastening and motion for the selected part (parity ④ ⑤ ⑥), as authoring commands. */
+  private renderLinks(unavailable: boolean) {
+    let asset
+    try {
+      asset = JSON.parse(this.session!.source())
+    } catch {
+      return null
+    }
+    let dims: [number, number, number] | undefined
+    try {
+      dims = boxOf(asset, this.selected)?.dims
+    } catch {
+      dims = undefined
+    }
+    return html`<figure-v3-links
+      .asset=${asset}
+      .partId=${this.selected}
+      .dims=${dims}
+      ?locked=${unavailable}
+      @v3-command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+      @v3-part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
+    ></figure-v3-links>`
+  }
+  /** One command, one step of the history. A refusal a person can meet here is said in their words. */
+  private linkCommand(action: V3AuthoringAction) {
+    try {
+      this.session!.command(action)
+      this.error = ''
+      this.changed()
+    } catch (error) {
+      const code = (error as { code?: string })?.code
+      this.error =
+        code === 'DIMENSION_CYCLE'
+          ? 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)
+    }
+  }
   private changeField(field: { id: string; unit: V3InputChange['unit']; role?: string }, event: Event) {
     const input = event.target as HTMLInputElement,
       value = input.valueAsNumber
@@ -508,7 +550,7 @@ export class FigureV3Editor extends LitElement {
           ${fields.map(field => html`<label><span>${fieldLabel(field.id)} (${field.unit})${field.role === 'state' ? ' · 동작' : ''}</span><input aria-label=${field.id} type="number" step="any" .value=${String(field.value)} ?disabled=${unavailable} @change=${(e: Event) => this.changeField(field, e)} /></label>`)}
           ${
             part
-              ? html`<figure-v3-material
+              ? html`${this.renderLinks(unavailable)}<figure-v3-material
                   .body=${part}
                   .palette=${view.palette ?? {}}
                   ?locked=${unavailable}
@@ -518,8 +560,8 @@ export class FigureV3Editor extends LitElement {
           }
           ${
             view.bindings.length
-              ? html`<h3>배치 연결점</h3>
-                  ${view.bindings.map(b => html`<p>${b.label} · ${b.role}</p>`)}`
+              ? html`<h3>${i18next.t('figure.label.places')}</h3>
+                  ${view.bindings.map(b => html`<p>${b.label} · ${i18next.t('figure.label.place-' + b.role)}</p>`)}`
               : null
           }
         </aside>

package/client/modeller/v3-gizmo.ts

@@ -1,4 +1,5 @@
-import type { V3InputChange } from '@hatiolab/figure-model'
+import { v3AttachmentsOf } from '@hatiolab/figure-model'
+import type { V3Asset, V3InputChange } from '@hatiolab/figure-model'
 
 /**
  * What the gizmo may write for a part — the V2 gizmo's move · turn · size, on a V3 asset (parity row ③).
@@ -40,7 +41,17 @@ export function gizmoReachOf(asset: AssetLike, part: string): GizmoReach {
   const allDesign = (ids: string[]) => ids.every(id => design.has(id))
   const pose = nodes.find(node => node.id === `${part}.pose`)
   const placed = nodes.find(node => node.id === part && node.op === 'place@1')
-  const posed = !!pose && pose.op === 'rigid@1' && pose.params?.to === 'asset' && placed?.args[1] === `${part}.poseValue`
+  const direct = !!pose && pose.op === 'rigid@1' && pose.params?.to === 'asset' && placed?.args[1] === `${part}.poseValue`
+  /*
+    A part taken off another (detach) stands on a seat into the asset frame with its own position numbers back. It
+    can be moved like a part never fastened — unless it moves by itself, when where it is drawn is not its position.
+  */
+  const reseated =
+    !!pose &&
+    pose.op === 'rigid@1' &&
+    !nodes.some(node => node.id === `${part}.motion`) &&
+    v3AttachmentsOf(asset as unknown as V3Asset)[part] === null
+  const posed = direct || reseated
   const shape = nodes.find(node => node.id === `${part}.shape`)
   const extent = shape && BOXES.has(shape.op) ? shape.args.slice(0, 3) : []
   const sizes =