@things-factory/figure-ui 10.1.81 → 10.1.82

package/client/modeller/editor.ts

@@ -6,16 +6,18 @@ import { notify } from '@operato/layout'
 import { OxPrompt } from '@operato/popup'
 import { customElement, property, state } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
-import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figureRecipeIdFor } from '@hatiolab/figure-model'
+import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figureRecipeIdFor, planFigureResize, parseFigureAsset, figureSizeEditChanges, figureScaleAnchorOf, figurePlaneAlignChanges, type FigurePlaneContact, type FigureClipLoss, figurePartFaceOf, type FigureFaceArea, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model'
 import type { RecipeTemplate } from './recipes.js'
 import './figure-recipe-catalog.js'
-import type { FigureAsset, FigureAuthoringAction, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureAuthoringAction, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigureResizeRequest, FigurePlacement } from '@hatiolab/figure-model'
 import type { FigureProductSession } from './product-session.js'
 import { captureFigureThumbnail } from './thumbnail.js'
 import { drawableFigureParts } from './renderer.js'
 import './canvas.js'
 import './figure-parts.js'
 import './figure-material-panel.js'
+import { faceHighlightOf, ghostPartsOf, previewWordsOf, rowWordsOf, type HeldPreview } from './command-preview.js'
+import { motionEndsOf, type MotionEnds } from './motion-ends.js'
 import './figure-links.js'
 import './figure-controls.js'
 import './figure-clips.js'
@@ -23,7 +25,7 @@ import './figure-preview.js'
 import './figure-settings.js'
 import { DEFAULT_VIEW, type ViewSettings } from './figure-view.js'
 import './figure-capability-panel.js'
-import { gizmoChanges, gizmoReachOf, keepBottomChanges, type GizmoReach, type GizmoResult } from './gizmo.js'
+import { gizmoChanges, gizmoReachOf, type GizmoReach, type GizmoResult } from './gizmo.js'
 import { keyActionOf } from './keys.js'
 import { groupFields, ownerOf, partLabelOf, repeatOf, type FieldLike, type FieldGroup } from './fields.js'
 import { SidePanelStyles } from './side-panel-styles.js'
@@ -32,11 +34,15 @@ import { alignChanges, boxOf, canMirror, mirrorChanges, type AlignTool } from '.
 import type { FigurePaletteKind, FigurePartRow } from './figure-parts.js'
 import { paletteRecipe } from './palette.js'
 import type { FigureCanvas } from './canvas.js'
-import { nudgeOf } from './stage-model.js'
-import { editRefusalOf, inDeclaredRoom, inputRangeRefusalOf, narrowingRetryOf, partRefusalOf, placementRefusalOf, recipeRefusalOf, removalNoticeOf, sizeRangeRefusalOf } from './refusals.js'
+import { nudgeOf, placementOf, type ScaleAnchor } from './stage-model.js'
+
+/** The numbers a rule gives a part's position, turn and size, per axis, for the cells that have no field. */
+type HeldValues = { position?: number[]; rotation?: number[]; size?: (number | undefined)[]; sizeRuled?: boolean }
+import { roomRefitRowsOf } from './occupancy.js'
+import { editRefusalOf, inDeclaredRoom, inputRangeRefusalOf, narrowingRetryOf, partRefusalOf, placementRefusalOf, recipeRefusalOf, removalNoticeOf, resizeRefusalOf, sizeRangeRefusalOf } from './refusals.js'
 import type { FigureRenderPart } from './renderer.js'
 import type { FigureBudgetLine } from './maturity.js'
-import { instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './links.js'
+import { fieldWordsOf, followOf, measureNow, partSummaryOf, instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './links.js'
 import { jointFanOf } from './joint-fan.js'
 import { jointDragOf } from './joint-drag.js'
 import type { FirstSave } from './first-save.js'
@@ -107,6 +113,17 @@ export class FigureEditor extends LitElement {
       opacity: 0.38;
       cursor: default;
     }
+    /*
+      Slotted into the bar from here, the tools do not get the bar's own icon size (20px, set inside its shadow): they
+      showed at md-icon's 24px, heavier than undo, redo and fit beside them. The same size, and the bar's focus ring.
+    */
+    ox-canvas-bar button[tool] md-icon {
+      --md-icon-size: 20px;
+    }
+    ox-canvas-bar button[tool]:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 1px;
+    }
     figure-preview {
       min-width: 0;
       min-height: 0;
@@ -137,9 +154,76 @@ export class FigureEditor extends LitElement {
       min-height: 0;
     }
     figure-canvas {
+      flex: 1;
+      min-width: 0;
+      min-height: 0;
+    }
+    div[middle] {
+      position: relative;
+      display: flex;
       min-width: 0;
       min-height: 0;
     }
+    /* A new figure's first question, over the empty canvas. */
+    div[start] {
+      position: absolute;
+      inset: 50% auto auto 50%;
+      z-index: 10;
+      color: var(--md-sys-color-on-surface);
+      transform: translate(-50%, -50%);
+      width: min(440px, calc(100% - 32px));
+      box-sizing: border-box;
+      padding: 20px;
+      border-radius: 12px;
+      background: var(--md-sys-color-surface, #fff);
+      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
+    }
+    div[start] button[start-button] {
+      width: auto;
+      margin: 0;
+      font-size: var(--ui-t-body);
+      height: 36px;
+      padding: 0 16px;
+      border: 1px solid var(--md-sys-color-outline);
+      border-radius: 999em;
+      color: var(--md-sys-color-primary);
+      background: var(--md-sys-color-surface, #fff);
+      cursor: pointer;
+    }
+    div[start] button[start-button]:hover:not(:disabled) {
+      background: var(--md-sys-color-primary-container);
+    }
+    div[start] button[start-button][pressed] {
+      color: var(--md-sys-color-on-primary);
+      background: var(--md-sys-color-primary);
+      border-color: var(--md-sys-color-primary);
+    }
+    div[start] button[start-button]:disabled {
+      opacity: 0.5;
+      cursor: default;
+    }
+    div[start] h2 {
+      margin: 0 0 12px;
+      font-size: var(--ui-t-title);
+    }
+    div[start-paths] {
+      display: grid;
+      gap: 14px;
+    }
+    div[start-paths] h3 {
+      margin: 0 0 6px;
+      font-size: var(--ui-t-body);
+    }
+    div[start-shapes] {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    div[start] small {
+      display: block;
+      margin-top: 4px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
     /* The side: tabs over one panel at a time, each using the whole height. */
     aside {
       display: flex;
@@ -156,9 +240,12 @@ export class FigureEditor extends LitElement {
       flex: 1;
       position: relative;
       display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
-      height: 38px;
+      gap: 1px;
+      min-width: 0;
+      height: 48px;
       padding: 0;
       border: none;
       border-radius: 0;
@@ -178,6 +265,14 @@ export class FigureEditor extends LitElement {
       width: 20px;
       height: 20px;
     }
+    button[tab] span[tab-label] {
+      max-width: 100%;
+      overflow: hidden;
+      font-size: 0.66rem;
+      line-height: 1.2;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
     span[badge] {
       position: absolute;
       top: 3px;
@@ -207,24 +302,60 @@ export class FigureEditor extends LitElement {
     }
     /* Which part the panel speaks of, and the way back to the whole figure. */
     div[subject] {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      display: grid;
+      gap: 4px;
+      padding: 8px 10px;
+      background: var(--md-sys-color-surface-container-lowest);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+    nav[path] {
       display: flex;
       align-items: center;
       gap: 6px;
-      padding: 6px 10px 0;
+      min-width: 0;
     }
-    div[subject] button[chip] {
-      display: inline-flex;
-      align-items: center;
-      gap: 2px;
-      height: 26px;
-      padding: 0 10px 0 6px;
+    nav[path] button[model-crumb] {
+      flex: none;
+      max-width: 55%;
+      height: 28px;
+      padding: 0 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      border: 1px solid var(--md-sys-color-outline-variant);
       border-radius: 999em;
+      background: none;
+      color: var(--md-sys-color-primary);
+      cursor: pointer;
+    }
+    nav[path] button[model-crumb][on] {
+      border-color: var(--md-sys-color-primary);
+      background: var(--md-sys-color-primary-container);
+    }
+    nav[path] button[model-crumb]:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 1px;
+    }
+    nav[path] span[current] {
+      min-width: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-weight: 600;
+    }
+    div[subject-summary] {
+      display: grid;
+      gap: 1px;
+    }
+    div[subject-summary] b span {
+      font-weight: 400;
       color: var(--md-sys-color-on-surface-variant);
     }
-    div[subject] md-icon {
-      font-size: 16px;
-      width: 16px;
-      height: 16px;
+    div[subject-summary] small {
+      color: var(--md-sys-color-on-surface-variant);
     }
     button {
       font: inherit;
@@ -255,6 +386,8 @@ export class FigureEditor extends LitElement {
     }
   `]
   @property({ attribute: false }) session?: FigureProductSession
+  /** The saved figure's state and version, as the server gave them (the page reads the row). */
+  @property({ attribute: false }) releaseState?: { state?: 'draft' | 'released'; version: number }
   /** The recipe templates (ADR-0095), read by the page from the server. */
   @property({ attribute: false }) templates: RecipeTemplate[] = []
   /** Reads a template's guide; given by the page. */
@@ -313,9 +446,17 @@ export class FigureEditor extends LitElement {
    * Parts hidden on the workbench — the author's view while working, not the asset's visibility. Not saved: a part
    * hidden here is still in the figure, still checked, still drawn on a board.
    */
+  /** The page offers an AI draft for a new figure (the modeller page, through the app's assistant dock). */
+  @property({ type: Boolean }) aiDraft = false
   @state() private hiddenParts = new Set<string>()
   /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
   @state() private live: LiveValues = NOTHING_LIVE
+  /**
+   * A command seen before it is done (ADR-0097 §5.5): worked out on a copy for the figure, version, part and command it
+   * names, and shown only while all four are still the ones on screen. Nothing of it is saved or undone.
+   */
+  @state() private preview?: HeldPreview & { part: string }
+  private previewDrawn?: { of: HeldPreview; ghost: FigureRenderPart[]; highlight: FigureRenderPart | null }
   private lastContext: string | null = null
   /**
    * Move, turn and size on the canvas, in the bar's tools: the gizmo the W · E · R keys give, found without knowing the
@@ -336,7 +477,7 @@ export class FigureEditor extends LitElement {
           aria-pressed=${String(this.gizmoMode === tool.mode)}
           ?disabled=${!tool.can}
           aria-label=${i18next.t('figure.button.gizmo-' + tool.mode)}
-          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + i18next.t('figure.text.gizmo-not-own')}`}
+          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + i18next.t(tool.mode === 'scale' && this.sizeDragUnsure(this.asset() as FigureAsset, this.selected) ? 'figure.text.gizmo-size-turned-fastening' : 'figure.text.gizmo-not-own', { part: partLabelOf(this.selected), extreme: this.keptExtremeWord() })}`}
           @click=${() => this.useGizmo(tool.mode)}
         >
           <md-icon>${tool.icon}</md-icon>
@@ -372,11 +513,38 @@ export class FigureEditor extends LitElement {
   connectedCallback() {
     super.connectedCallback()
     window.addEventListener('keydown', this.onKey, true)
+    this.widthWatch.observe(this)
   }
   disconnectedCallback() {
     window.removeEventListener('keydown', this.onKey, true)
+    this.widthWatch.disconnect()
     super.disconnectedCallback()
   }
+  /*
+    Narrow, the parts list gives way to the canvas rather than all three shrinking (designer 2026-09-27, U11): under
+    FOLD_START_UNDER px the canvas would be left under about 560 px beside both sides. The fold is said once, and the
+    bar's own toggle opens it again; opened by the author, it is not folded again until the screen has been wide.
+  */
+  private static readonly FOLD_START_UNDER = 1100
+  private foldedForWidth = false
+  private keptOpenByAuthor = false
+  private widthWatch = new ResizeObserver(([entry]) => this.fitPanesTo(entry!.contentRect.width))
+  private fitPanesTo(width: number) {
+    const panes = this.panes
+    if (!panes || !width) return
+    if (this.foldedForWidth && !panes.foldStart) this.keptOpenByAuthor = true
+    if (width < FigureEditor.FOLD_START_UNDER) {
+      if (!panes.foldStart && !this.keptOpenByAuthor) {
+        panes.foldStart = true
+        this.foldedForWidth = true
+        notify({ level: 'info', message: i18next.t('figure.text.parts-panel-folded-narrow') })
+      }
+    } else {
+      if (this.foldedForWidth && panes.foldStart) panes.foldStart = false
+      this.foldedForWidth = false
+      this.keptOpenByAuthor = false
+    }
+  }
   /**
    * Refusals and notices go to the app's shared surfaces, as every screen's do (user, 2026-09-27: 「왜 모두가 사용하는
    * notification 오류 표현 방법을 사용하지 않고」 · 「혹은 oxprompt 에서 확인하고 진행하던지」). A refusal with a way on --
@@ -395,6 +563,36 @@ export class FigureEditor extends LitElement {
     if (viewError && viewError !== this.toldViewError) notify({ level: 'error', message: viewError })
     this.toldViewError = viewError
   }
+  /*
+    An edit that would stop clips is refused by figure-model with the clips named (CLIPS_DROPPED). The person is told
+    which, and why, before anything is written; agreed, the same edit is made again letting exactly those go, as one
+    step undo brings back (designer 2026-09-27).
+  */
+  private askClipLoss(error: unknown, again: () => void): boolean {
+    if ((error as { code?: string })?.code !== 'CLIPS_DROPPED') return false
+    const clips = (error as { clips: FigureClipLoss[] }).clips
+    /* The consent is for this edit, on this figure as it is now: held with it while the person reads. */
+    const session = this.session!
+    const { context, revision } = session.read()
+    void this.confirmClipLoss(clips, again, { session, context: context!, revision: revision! })
+    return true
+  }
+  private async confirmClipLoss(clips: FigureClipLoss[], again: () => void, asked: { session: FigureProductSession; context: string; revision: number }) {
+    const agreed = await OxPrompt.open({
+      type: 'warning',
+      text: i18next.t('figure.text.clips-would-go', { clips: clips.map(c => i18next.t(`figure.text.clip-${c.why}`, { clip: c.clip })).join(', ') }),
+      confirmButton: { text: i18next.t('figure.button.let-clips-go') },
+      cancelButton: { text: i18next.t('figure.button.keep-editing') }
+    })
+    if (!agreed) return
+    /* Changed while the person read -- another figure, or an edit in between: the consent was not for this; nothing is applied. */
+    const now = this.session === asked.session ? asked.session.read() : undefined
+    if (!now || now.context !== asked.context || now.revision !== asked.revision) {
+      this.error = i18next.t('figure.text.clips-consent-stale')
+      return
+    }
+    asked.session.withConsent({ dropClips: clips.map(c => c.id), context: asked.context, revision: asked.revision }, again)
+  }
   private async ask(message: string, retry: { label: string; action?: FigureAuthoringAction; run?: () => void }) {
     const agreed = await OxPrompt.open({
       type: 'question',
@@ -406,6 +604,21 @@ export class FigureEditor extends LitElement {
     if (retry.run) retry.run()
     else this.linkCommand(retry.action!)
   }
+  /*
+    Per model and per part, how far its properties panel was scrolled and which of its folds were open, so going back
+    to one finds it as it was left (designer 2026-09-27, B.1). The path stays held at the top, so a scroll kept cannot
+    hide which part the panel speaks of. Another model starts clean.
+  */
+  private panelMemory = new Map<string, { top: number; open: boolean[] }>()
+  private restorePanelFor?: string
+  private propertiesPanel() {
+    return this.renderRoot.querySelector<HTMLElement>('div[panel]')
+  }
+  private foldsOf(panel: HTMLElement): HTMLDetailsElement[] {
+    const folds = [...panel.querySelectorAll('details')]
+    for (const inner of panel.querySelectorAll('figure-links')) folds.push(...(inner.shadowRoot?.querySelectorAll('details') ?? []))
+    return folds
+  }
   protected willUpdate(_changed: PropertyValues) {
     const view = this.session?.read()
     if (view?.context !== this.lastContext) {
@@ -413,12 +626,25 @@ export class FigureEditor extends LitElement {
       this.selected = ''
       this.error = ''
       this.hiddenParts = new Set()
+      this.panelMemory.clear()
+    } else if (_changed.has('selected')) {
+      const panel = this.propertiesPanel()
+      const was = (_changed.get('selected') as string | undefined) ?? ''
+      if (panel) this.panelMemory.set(was || '@model', { top: panel.scrollTop, open: this.foldsOf(panel).map(d => d.open) })
+      this.restorePanelFor = this.selected || '@model'
     }
     if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected)) this.selected = ''
     if (_changed.has('selected')) this.gizmoMode = undefined
   }
   /** The scene toggles: the mode already shown takes the gizmo away. */
   private useGizmo(mode: 'translate' | 'rotate' | 'scale') {
+    if (mode === 'scale' && this.selected && this.gizmoMode !== 'scale') {
+      const asset = this.asset() as FigureAsset | undefined
+      if (asset && this.sizeDragUnsure(asset, this.selected)) {
+        this.error = i18next.t('figure.text.gizmo-size-turned-fastening', { part: partLabelOf(this.selected), extreme: this.keptExtremeWord() })
+        return
+      }
+    }
     this.renderRoot.querySelector<FigureCanvas>('figure-canvas')?.gizmo(mode)
     this.gizmoMode = this.gizmoMode === mode ? undefined : mode
   }
@@ -437,6 +663,7 @@ export class FigureEditor extends LitElement {
       this.notice = ''
       this.changed()
     } catch (error) {
+      if (this.askClipLoss(error, () => this.run(action))) return
       const say = (key: string, params: Record<string, string>) => i18next.t(key, params)
       this.error = sizeRangeRefusalOf(error, say) ?? inputRangeRefusalOf(error, say) ?? this.said(error)
     } finally {
@@ -504,7 +731,8 @@ export class FigureEditor extends LitElement {
       await promise
       this.error = ''
     } catch (error) {
-      this.error = this.said(error)
+      /* Not reached: whether it was written is not known, and the edits are still here -- said so, not "not saved". */
+      this.error = (error as { code?: string })?.code === 'SAVE_UNREACHABLE' ? i18next.t('figure.text.save-unreachable') : this.said(error)
     } finally {
       this.changed()
     }
@@ -544,6 +772,7 @@ export class FigureEditor extends LitElement {
       if (this.selected === id) this.selected = ''
       this.changed()
     } catch (error) {
+      if (this.askClipLoss(error, () => this.removePart(id, refitRoom))) return
       /*
         A part in the declared space goes, and the space is fitted to the parts left, in the same click: every space
         this product declares is fitted to the parts (「부품에 맞추기」, the AI's fit-room -- no padding), so fitting it
@@ -601,11 +830,27 @@ export class FigureEditor extends LitElement {
     /* 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)
+      const asset = JSON.parse(this.session.source())
+      const reach = gizmoReachOf(asset, id)
+      /*
+        A size drag shows the face it keeps and the commit keeps the same (figureScaleAnchorOf). Where figure-model cannot
+        say which face that is -- a part fastened turned or twisted -- the drag would show one result and write another,
+        so sizing by the gizmo is not offered there; the fields still size it (designer 2026-09-27).
+      */
+      if (reach.scale && this.sizeDragUnsure(asset, id)) return { ...reach, scale: false }
+      return reach
     } catch {
       return none
     }
   }
+  /** Whether a size drag on this part could not show what is written: figure-model gives no face it keeps. */
+  private sizeDragUnsure(asset: FigureAsset, id: string): boolean {
+    try {
+      return !figureScaleAnchorOf(asset, ownerOf(id))
+    } catch {
+      return true
+    }
+  }
   /** 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()
@@ -629,7 +874,19 @@ export class FigureEditor extends LitElement {
       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)
+    /* A size drag this part cannot show truly is not written: it springs back, and the reason is said. */
+    if (result.scale && result.scale.some(k => Math.abs(k - 1) > 1e-4) && this.sizeDragUnsure(asset, id)) {
+      this.error = i18next.t('figure.text.gizmo-size-turned-fastening', { part: partLabelOf(id), extreme: this.keptExtremeWord() })
+      return this.requestUpdate()
+    }
+    /*
+      A size dragged keeps the face the figure's placement keeps, as a size typed does (figure-model's one rule): the
+      gizmo's own anchoring on the opposite face is what the drag shows, not what is written (designer 2026-09-27).
+    */
+    const scaled = !!result.scale && !result.rotation && result.scale.some(k => Math.abs(k - 1) > 1e-4)
+    const taken = jointed || scaled ? { scale: result.scale } : result
+    const written = gizmoChanges(id, this.reachOf(id), taken, sizes)
+    const changes = scaled && !jointed ? figureSizeEditChanges(asset, ownerOf(id), written) : written
     if (changes.length) {
       this.run(() => this.session!.apply(changes))
       return
@@ -692,6 +949,52 @@ export class FigureEditor extends LitElement {
       this.selected = copy
     })
   }
+  /**
+   * The one-off "put it on the plane", by the figure's placement (designer 2026-09-27): figure-model's rule
+   * (`figurePlaneAlignChanges`) -- a floor figure's part to the floor by its bottom, a ceiling one's to the ceiling by
+   * its top, a wall one's to the wall by its back, a centred one's centre to the origin's height. Once: nothing is
+   * fastened. Refused, it says why.
+   */
+  /* What a tilted part's typed size keeps, by the figure's placement: not the floor's lowest point everywhere (designer 2026-09-27). */
+  private keptExtremeWord(): string {
+    const placement = (this.asset() as FigureAsset | undefined)?.placement ?? 'floor'
+    return i18next.t(`figure.label.kept-extreme-${placement}`)
+  }
+  /* How the selected part would meet the plane, kept per source and part: working it out compiles the figure. */
+  private planeContact?: { source: string; part: string; contact?: FigurePlaneContact }
+  private planeContactOf(source: string, part: string): FigurePlaneContact | undefined {
+    if (this.planeContact?.source !== source || this.planeContact.part !== part) {
+      let contact: FigurePlaneContact | undefined
+      try {
+        contact = figurePlaneAlignChanges(parseFigureAsset(source), part).contact
+      } catch {
+        contact = undefined
+      }
+      this.planeContact = { source, part, contact }
+    }
+    return this.planeContact.contact
+  }
+  private renderPlaneAlign(asset: FigureAsset, unavailable: boolean) {
+    const placement = asset.placement ?? 'floor'
+    const icon = { floor: 'vertical_align_bottom', ceiling: 'vertical_align_top', wall: 'flip_to_back', center: 'vertical_align_center' }[placement]
+    /* A tilted part touches the plane at a point or an edge, a ball at its lowest; the tooltip says so rather than promise a face (designer 2026-09-27). */
+    const contact = this.planeContactOf(this.session!.source(), this.selected)
+    const told = contact === 'tilted' || contact === 'extreme' ? `-${contact}` : ''
+    return html`<button plane-align=${placement} ?disabled=${unavailable} aria-label=${i18next.t(`figure.button.align-to-${placement}`)}
+      title=${i18next.t(`figure.text.align-to-${placement}${told}`)} @click=${() => this.alignToPlane()}>
+      <md-icon>${icon}</md-icon>
+    </button>`
+  }
+  private alignToPlane() {
+    const asset = parseFigureAsset(this.session!.source())
+    const { changes, contact, refusal } = figurePlaneAlignChanges(asset, this.selected)
+    if (refusal) {
+      this.error = i18next.t(`figure.text.align-refused-${refusal.toLowerCase().replace(/_/g, '-')}`, { part: partLabelOf(this.selected) })
+      return
+    }
+    if (changes.length) this.run(() => this.session!.apply(changes))
+    if ((contact === 'tilted' || contact === 'extreme') && !this.error) this.notice = i18next.t(`figure.text.aligned-${contact}-${asset.placement ?? 'floor'}`)
+  }
   private renderTools(unavailable: boolean) {
     const reach = this.reachOf(this.selected)
     if (!this.selected || !reach.translate) return null
@@ -708,7 +1011,7 @@ export class FigureEditor extends LitElement {
     return html`<div tools title=${i18next.t('figure.text.tools-explained')}>
       ${tool('centre-x', 'horizontal_distribute', 'figure.button.center-x', 'figure.text.center-on-x')}
       ${tool('centre-z', 'vertical_align_center', 'figure.button.center-z', 'figure.text.center-on-z')}
-      ${tool('floor', 'vertical_align_bottom', 'figure.button.to-floor', 'figure.text.put-on-floor')}
+      ${this.renderPlaneAlign(asset as FigureAsset, unavailable)}
       ${(['x', 'z'] as const).map(axis => {
         const able = canMirror(asset as never, this.selected, axis, reach)
         return html`<button
@@ -779,9 +1082,35 @@ export class FigureEditor extends LitElement {
       .dims=${dims}
       ?locked=${unavailable}
       @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+      .previewWords=${previewWordsOf(this.currentPreview(), this.selected, (key, params) => i18next.t(key, params))}
+      .detachWords=${this.detachWords(asset as FigureAsset | undefined)}
+      .overhangWords=${section === 'shape' ? this.overhangWords(asset as FigureAsset | undefined) : []}
+      .overhangNote=${section === 'shape' ? this.overhangNote(asset as FigureAsset | undefined) : []}
+      .motionEnds=${section === 'motion' ? this.motionEnds() : null}
+      @go-fasten=${() => this.goFasten()}
+      @preview-command=${(e: CustomEvent) => this.previewCommand(e.detail)}
+      @resize-with-placement=${(e: CustomEvent) => this.resizeWithPlacement(e.detail.request)}
       @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
     ></figure-links>`
   }
+  /**
+   * The face a size drag keeps for the selected part, figure-model's rule (`figureScaleAnchorOf`): the gizmo shows it
+   * while dragging and the commit keeps it, so nothing jumps on release. A part whose fastening is turned has none the
+   * rule can say, and the gizmo keeps its own (the face across from the handle).
+   */
+  private anchorsOf(asset: FigureAsset | undefined): Record<string, ScaleAnchor> {
+    let next: Record<string, ScaleAnchor> = {}
+    try {
+      const anchor = asset && this.selected ? figureScaleAnchorOf(asset, this.selected) : undefined
+      if (anchor) next = { [this.selected]: anchor }
+    } catch {
+      next = {}
+    }
+    /* The same object while it says the same thing: the canvas stands its parts up again when this changes. */
+    if (JSON.stringify(next) !== JSON.stringify(this.lastAnchors)) this.lastAnchors = next
+    return this.lastAnchors
+  }
+  private lastAnchors: Record<string, ScaleAnchor> = {}
   /** The figure's controls: try a value, name it, set its range and travel time, keep the pose. */
   private renderControls(view: { fields: Array<{ id: string; role?: string; value: number }> }, unavailable: boolean) {
     let asset
@@ -808,6 +1137,30 @@ export class FigureEditor extends LitElement {
       @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
     ></figure-clips>`
   }
+  /**
+   * "Follow the size and keep where the figure is placed" (ADR-0097): figure-model plans it from the figure as it is now,
+   * and the whole plan is one step of the history. A refusal with a way on -- move the part onto the plane, replace how
+   * its position is worked out -- asks in the app's prompt and plans again with that choice; any other says why.
+   */
+  private resizeWithPlacement(request: FigureResizeRequest) {
+    this.retry = undefined
+    this.notice = ''
+    const plan = planFigureResize(parseFigureAsset(this.session!.source()), request)
+    const refusal = plan.refusal
+    if (refusal) {
+      const choice = refusal.choice
+      /* The gap is chosen on the screen beside the button, with its distance; only replacing a position rule is asked here. */
+      this.retry = choice === 'replacePosition' ? { label: i18next.t('figure.button.resize-choice-replace-position'), run: () => this.resizeWithPlacement({ ...request, replacePosition: true }) } : undefined
+      this.error = resizeRefusalOf(plan, request.part, (key, params) => i18next.t(key, params))
+      return
+    }
+    this.run(() => this.session!.applyRecipe(plan.steps))
+    /*
+      The declared room was measured from the part's old numbers and is not changed: said as a fact, not as a claim that
+      the part leaves it -- that is measured where the room is declared again (designer 2026-09-27).
+    */
+    if (!this.error && plan.roomReads.length) this.notice = i18next.t('figure.text.resize-room-unchanged')
+  }
   /** One command, one step of the history. A refusal a person can meet here is said in their words. */
   private linkCommand(action: FigureAuthoringAction) {
     this.retry = undefined
@@ -827,6 +1180,7 @@ export class FigureEditor extends LitElement {
       }
       this.changed()
     } catch (error) {
+      if (this.askClipLoss(error, () => this.linkCommand(action))) return
       const code = (error as { code?: string })?.code
       const narrowing = narrowingRetryOf(action, error, (key, params) => i18next.t(key, params))
       if (narrowing) {
@@ -847,15 +1201,10 @@ export class FigureEditor extends LitElement {
   private changeField(field: { id: string; unit: FigureInputChange['unit']; role?: string }, event: Event) {
     const input = event.target as HTMLInputElement,
       value = input.valueAsNumber
-    /* A height typed in keeps the part's bottom where it is, as the scale gizmo does. */
+    /* A size typed in keeps the face the figure's placement keeps -- figure-model's one rule, as the gizmo and "follow the size" do. */
     const part = this.selected
-    const kept = field.role !== 'state' && part ? keepBottomChanges(part, this.reachOf(part), field.id, value, this.designValues()) : []
-    this.run(() =>
-      this.session!.apply([
-        { kind: field.role === 'state' ? 'set-state' : 'set-design', input: field.id, unit: field.unit, value },
-        ...kept
-      ])
-    )
+    const change: FigureInputChange = { kind: field.role === 'state' ? 'set-state' : 'set-design', input: field.id, unit: field.unit, value }
+    this.run(() => this.session!.apply(field.role !== 'state' && part ? figureSizeEditChanges(parseFigureAsset(this.session!.source()), part, [change]) : [change]))
     // Rejected edits must also restore the displayed numeric value.
     input.value = String(this.session!.read().fields.find(i => i.id === field.id)!.value)
   }
@@ -1000,7 +1349,14 @@ export class FigureEditor extends LitElement {
    * The parts list, one row per part the author made: a repeat is one row with how many copies it makes now
    * (user, 2026-09-24: the conveyor's sixteen rollers were sixteen rows).
    */
-  private partRows(geometry: readonly { id: string }[]): FigurePartRow[] {
+  private partRows(geometry: readonly { id: string }[], asset?: FigureAsset): FigurePartRow[] {
+    /* Where each part is fastened, straight above it: `part · face`, or the mounting plane (ADR-0097 §5.5). */
+    const fastened = new Map(
+      (asset?.joints ?? []).map(j => [
+        j.body1.part,
+        'plane' in j.body0 ? i18next.t('figure.label.mounting-plane') : `${partLabelOf(j.body0.part)} · ${i18next.t(`figure.label.face-${j.body0.face}`)}`
+      ])
+    )
     const rows = new Map<string, FigurePartRow>()
     for (const g of geometry) {
       const id = ownerOf(g.id)
@@ -1014,7 +1370,8 @@ export class FigureEditor extends LitElement {
         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 } : {})
+        ...(id !== g.id ? { copies: 1 } : {}),
+        ...(fastened.has(id) ? { fastenedTo: fastened.get(id)! } : {})
       })
     }
     return [...rows.values()]
@@ -1070,6 +1427,7 @@ export class FigureEditor extends LitElement {
           @change=${(e: Event) => this.setPitch(field, e)}
         />
       </div>
+      <ul row-reading>${rowWordsOf(this.rowNow(asset), (key, params) => i18next.t(key, params)).map(line => html`<li>${line}</li>`)}</ul>
       <p hint>
         ${fits && length !== undefined && longest !== undefined && limit !== undefined
           ? i18next.t('figure.text.repeat-what-pitch-gives', {
@@ -1088,6 +1446,14 @@ export class FigureEditor extends LitElement {
         : nothing}
     </section>`
   }
+  /** The selected row as it is drawn now, read by figure-model: nothing when it cannot be read. */
+  private rowNow(asset: FigureAsset): FigureRowReading | undefined {
+    try {
+      return figureRowOf(asset, this.selected, this.currentInputs())
+    } catch {
+      return undefined
+    }
+  }
   /** The design input a row's pitch is read from, when it is read from one (ADR-0096). */
   private pitchInputOf(asset: FigureAsset, part: string): string | undefined {
     const pitch = asset.joints?.find(j => j.body1.part === part && j.repeat)?.repeat?.pitch as { from?: { of?: string; input?: string } } | number | undefined
@@ -1194,6 +1560,179 @@ export class FigureEditor extends LitElement {
     }
   }
   /** Choose a part, from the list, the canvas or a place row. A figure-level tab gives way to the part's properties. */
+  /*
+    Saving and releasing told apart, beside the save (ADR-0097 §5.6, Q-D2): what the saved figure is -- a draft never
+    released, a draft while boards use an earlier release, a release -- as the server said it. Edits not saved are the
+    status before it. Boards read a draft's latest release (figureBlueprint), so that is what is said.
+  */
+  private releaseWords(view: { id?: string | null }): string {
+    if (!view.id || !this.releaseState?.state) return ''
+    const { state, version } = this.releaseState
+    if (state === 'released') return i18next.t('figure.text.release-state-released', { version: String(version) })
+    return version > 0 ? i18next.t('figure.text.release-state-draft-over', { version: String(version) }) : i18next.t('figure.text.release-state-draft-new')
+  }
+  /** To the release that exists: the history tab's release section, not a second one here. */
+  private goRelease = async () => {
+    this.tab = 'history'
+    await this.updateComplete
+    await this.querySelector<HTMLElement & { showRelease?: () => Promise<void> }>('figure-history-panel')?.showRelease?.()
+  }
+  /** The fastening form's command, seen before it is done; null clears what was shown. */
+  private previewCommand(candidate: { action: FigureAuthoringAction; face?: { part: string; face: string } } | null) {
+    if (!candidate || !this.session || !this.selected) {
+      this.preview = undefined
+      return
+    }
+    const view = this.session.read()
+    const held = { context: view.context!, revision: view.revision!, key: JSON.stringify(candidate), part: this.selected }
+    try {
+      const seen = this.session.previewCommand(candidate.action)
+      let face: FigureFaceArea | undefined
+      if (candidate.face) {
+        try {
+          face = figurePartFaceOf(parseFigureAsset(this.session.source()), candidate.face.part, candidate.face.face, this.currentInputs())
+        } catch {
+          face = undefined
+        }
+      }
+      /* A row is read on the figure the command would make, by figure-model, as drawn. */
+      const row = candidate.action.kind === 'make-repeat' ? figureRowOf(seen.asset, this.selected, this.currentInputs()) : undefined
+      this.preview = {
+        ...held,
+        context: seen.context,
+        revision: seen.revision,
+        geometry: seen.geometry,
+        moves: seen.moves,
+        added: seen.added,
+        ...(row ? { row } : {}),
+        clipsWouldGo: seen.clipsWouldGo,
+        face,
+        faceUnknown: !!candidate.face && !face
+      }
+    } catch (error) {
+      /* Refused: nothing of an earlier result stays on screen, and the reason is said. */
+      this.preview = { ...held, refused: this.said(error) }
+    }
+  }
+  /** The preview, while it still speaks of what is on screen: this figure, this version, this part. */
+  private currentPreview(): (HeldPreview & { part: string }) | undefined {
+    const p = this.preview
+    const view = this.session?.read()
+    /* Only where its form is: the properties panel stays in the page on another tab, and did not clear it (2026-09-27, :3391). */
+    if (!p || !view || p.context !== view.context || p.revision !== view.revision || p.part !== this.selected || this.middle !== 'edit' || this.tab !== 'properties') return undefined
+    return p
+  }
+  /*
+    What taking the selected part off would do, worked out on a copy before the button is pressed (ADR-0097 §5.5): whether
+    it stays where it stands now, what stays fastened to it, which clips would go. "It stays where it is" is said only
+    when the copy shows it does.
+  */
+  private detachSaid?: { key: string; words: string[] }
+  private detachWords(asset: FigureAsset | undefined): string[] {
+    const view = this.session?.read()
+    const joint = asset?.joints?.find(j => j.body1.part === this.selected)
+    if (!asset || !view || !joint || !this.session) return []
+    const key = `${view.context}|${view.revision}|${this.selected}`
+    if (this.detachSaid?.key === key) return this.detachSaid.words
+    const say = (k: string, params?: Record<string, string>) => i18next.t(k, params)
+    const from = 'plane' in joint.body0 ? say('figure.label.mounting-plane') : partLabelOf(joint.body0.part)
+    let words: string[]
+    try {
+      const seen = this.session.previewCommand({ kind: 'detach', part: this.selected })
+      const own = seen.moves.some(m => m.body === this.selected)
+      words = own
+        ? [say('figure.text.detach-moves'), ...previewWordsOf({ context: seen.context, revision: seen.revision, key, moves: seen.moves }, this.selected, say)]
+        : [say('figure.text.detach-stays', { from })]
+      const children = (asset.joints ?? []).filter(j => 'part' in j.body0 && j.body0.part === this.selected).map(j => partLabelOf(j.body1.part))
+      if (children.length) words.push(say('figure.text.detach-keeps-children', { parts: children.join(', ') }))
+      if (seen.clipsWouldGo.length) words.push(say('figure.text.detach-clips', { clips: seen.clipsWouldGo.map(c => c.clip).join(', ') }))
+    } catch (error) {
+      words = [say('figure.text.detach-refused', { reason: this.said(error) })]
+    }
+    this.detachSaid = { key, words }
+    return words
+  }
+  /*
+    Past the edge of the face a part is fastened to (ADR-0097 §5.5, Q3): the selected part's own, and the parts fastened
+    to it -- said apart from the room, nothing moved. Read once per figure, version and part.
+  */
+  private overhangSaid?: { key: string; words: string[]; note: string[] }
+  /** Wider than its face: a fact of the relation, said in its details, not as a warning (designer 2026-09-27). */
+  private overhangNote(asset: FigureAsset | undefined): string[] {
+    this.overhangWords(asset)
+    return this.overhangSaid?.note ?? []
+  }
+  private overhangWords(asset: FigureAsset | undefined): string[] {
+    const view = this.session?.read()
+    if (!asset || !view || !this.selected) return []
+    const key = `${view.context}|${view.revision}|${this.selected}`
+    if (this.overhangSaid?.key === key) return this.overhangSaid.words
+    const say = (k: string, params?: Record<string, string>) => i18next.t(k, params)
+    const where = (o: FigureFaceOverhang) => ({ on: partLabelOf(o.on.part), face: say(`figure.label.face-${o.on.face}`) })
+    const sides = (o: FigureFaceOverhang) => o.sides.map(s => say(`figure.text.overhang-side-${s.side}`, { axis: s.axis.toUpperCase(), mm: String(s.mm) })).join(', ')
+    const words: string[] = []
+    const note: string[] = []
+    try {
+      const inputs = this.currentInputs()
+      const own = figureFaceOverhangOf(asset, this.selected, inputs)
+      if (own?.state === 'larger') {
+        note.push(say('figure.text.overhang-larger', { ...where(own), sides: sides(own) }))
+        if (own.lopsided.length) note.push(say('figure.text.overhang-lopsided', { axes: own.lopsided.map(a => a.toUpperCase()).join(', ') }))
+      }
+      if (own?.state === 'out') words.push(say('figure.text.overhang-out', { ...where(own), sides: sides(own) }))
+      else if (own?.state === 'possible') words.push(say('figure.text.overhang-possible', where(own)))
+      else if (own?.state === 'unknown') words.push(say('figure.text.overhang-unknown', where(own)))
+      const held = (asset.joints ?? []).filter(j => 'part' in j.body0 && j.body0.part === this.selected).map(j => figureFaceOverhangOf(asset, j.body1.part, inputs))
+      const past = held.filter((o): o is FigureFaceOverhang => o?.state === 'out' || o?.state === 'possible')
+      if (past.length) words.push(say('figure.text.overhang-held', { parts: past.map(o => partLabelOf(o.part)).join(', ') }))
+    } catch {
+      /* Not read: nothing said rather than a guess. */
+    }
+    this.overhangSaid = { key, words, note }
+    return words
+  }
+  /** The selected part's motion at both ends of its range, made once per figure, version and part. */
+  private motionEndsSaid?: { key: string; ends: MotionEnds | null }
+  private motionEnds(): MotionEnds | null {
+    const view = this.session?.read()
+    if (!view || !this.selected) return null
+    const key = `${view.context}|${view.revision}|${this.selected}`
+    if (this.motionEndsSaid?.key !== key) {
+      let ends: MotionEnds | null = null
+      try {
+        ends = motionEndsOf(parseFigureAsset(this.session!.source()), this.selected, this.currentInputs())
+      } catch {
+        ends = null
+      }
+      this.motionEndsSaid = { key, ends }
+    }
+    return this.motionEndsSaid.ends
+  }
+  /** "Fasten it first", from the motion tab: to the properties tab, the fastening form open on this part. */
+  private async goFasten() {
+    this.tab = 'properties'
+    await this.updateComplete
+    const links = [...this.renderRoot.querySelectorAll<HTMLElement & { section?: string; showFastening?: () => Promise<void> }>('figure-links')].find(l => l.section === 'shape')
+    await links?.showFastening?.()
+  }
+  /** What the canvas draws of it, made once per preview: a new list every render would stand the board up each time. */
+  private previewShown(): { ghost: FigureRenderPart[]; highlight: FigureRenderPart | null } {
+    const p = this.currentPreview()
+    /* On the motion tab, with nothing being tried: where the selected part's motion takes it, at both ends. */
+    if (!p && this.tab === 'motion' && this.middle === 'edit') return { ghost: this.motionEnds()?.ghost ?? [], highlight: null }
+    if (!p || p.refused) return { ghost: [], highlight: null }
+    if (this.previewDrawn?.of !== p) this.previewDrawn = { of: p, ghost: ghostPartsOf(p), highlight: faceHighlightOf(p.face) }
+    return this.previewDrawn
+  }
+  /**
+   * What the author has in view, for the AI dock to hear with a request (ADR-0097 §5.6 item 5): the part selected and
+   * what the preview is trying. Read at the moment of sending, never cached, and never a reason to start a new
+   * conversation -- selecting is not a new subject.
+   */
+  assistantFocus(): { part?: string; trying?: { clips?: Record<string, number>; controls?: Record<string, number> } } {
+    const trying = this.middle === 'preview' ? this.renderRoot.querySelector<HTMLElement & { tried?: () => { clips?: Record<string, number>; controls?: Record<string, number> } | undefined }>('figure-preview')?.tried?.() : undefined
+    return { ...(this.selected ? { part: this.selected } : {}), ...(trying ? { trying } : {}) }
+  }
   private choose(id: string) {
     /* A copy on the canvas selects its repeat: the part the author made. */
     this.selected = id ? ownerOf(id) : id
@@ -1206,26 +1745,126 @@ export class FigureEditor extends LitElement {
       return undefined
     }
   }
+  /** A side tab says what it is in words under its icon: the icons alone had to be learnt (designer 2026-09-27, U05). */
   private renderTab(tab: SideTab, icon: string, label: string, badge?: number) {
-    return html`<button tab ?on=${this.tab === tab} title=${label} aria-label=${label} @click=${() => (this.tab = tab)}>
-      <md-icon>${icon}</md-icon>${badge == null ? '' : html`<span badge>${badge.toLocaleString()}</span>`}
+    /* Its accessible name is the name it shows (designer 2026-09-27); the longer title stays as its tooltip. */
+    const name = i18next.t('figure.label.tab-short-' + tab)
+    return html`<button tab ?on=${this.tab === tab} title=${label} aria-label=${name} @click=${() => (this.tab = tab)}>
+      <md-icon>${icon}</md-icon><span tab-label aria-hidden="true">${name}</span>${badge == null ? '' : html`<span badge>${badge.toLocaleString()}</span>`}
     </button>`
   }
   updated(changed: PropertyValues<this>) {
     super.updated?.(changed)
     this.tell(changed)
+    if (this.restorePanelFor !== undefined) {
+      const key = this.restorePanelFor
+      this.restorePanelFor = undefined
+      requestAnimationFrame(async () => {
+        const panel = this.propertiesPanel()
+        if (!panel || (this.selected || '@model') !== key) return
+        await Promise.all([...panel.querySelectorAll<HTMLElement & { updateComplete?: Promise<unknown> }>('figure-links')].map(el => el.updateComplete))
+        const kept = this.panelMemory.get(key)
+        if (kept) this.foldsOf(panel).forEach((fold, i) => i < kept.open.length && (fold.open = kept.open[i]!))
+        panel.scrollTop = kept?.top ?? 0
+      })
+    }
     const panes = this.renderRoot.querySelector<OxThreePane>('ox-three-pane') ?? undefined
-    if (panes !== this.panes) this.panes = panes
+    if (panes !== this.panes) {
+      this.panes = panes
+      this.fitPanesTo(this.getBoundingClientRect().width)
+    }
+  }
+  /**
+   * A new figure's first question, on the canvas where the work will be (designer 2026-09-27, U04): a basic shape, a
+   * recipe, or an AI draft when the page offers one. Nothing is added until one is chosen; the type, the space, the
+   * mounting face and the tags are not asked for first.
+   */
+  private renderStart() {
+    const shapes: FigurePaletteKind[] = ['box', 'cylinder', 'plate']
+    /* Where it is authored from, chosen before any part (ADR-0097): the figure's own setting, no room made up for it. */
+    const placement = ((this.asset() as FigureAsset | undefined)?.placement ?? 'floor') as FigurePlacement
+    return html`<div start role="region" aria-label=${i18next.t('figure.text.start-question')}>
+      <h2>${i18next.t('figure.text.start-question')}</h2>
+      <div start-paths>
+        <section>
+          <h3>${i18next.t('figure.label.start-placement')}</h3>
+          <div start-shapes role="radiogroup" aria-label=${i18next.t('figure.label.start-placement')}>
+            ${(['floor', 'ceiling', 'wall', 'center'] as const).map(
+              one => html`<button start-button role="radio" aria-checked=${String(one === placement)} ?pressed=${one === placement}
+                @click=${() => one !== placement && this.linkCommand({ kind: 'set-placement', placement: one })}>
+                ${i18next.t(`figure.label.resize-place-${one}`)}
+              </button>`
+            )}
+          </div>
+          <small>${i18next.t('figure.text.placement-is-intent')}</small>
+        </section>
+        <section>
+          <h3>${i18next.t('figure.label.start-shape')}</h3>
+          <div start-shapes>
+            ${shapes.map(
+              kind => html`<button start-button start-shape=${kind} @click=${() => this.add(kind)}>
+                ${i18next.t(kind === 'box' ? 'figure.label.primitive-cube' : `figure.label.primitive-${kind}`)}
+              </button>`
+            )}
+          </div>
+          <small>${i18next.t('figure.text.start-shape-more')}</small>
+        </section>
+        <section>
+          <h3>${i18next.t('figure.label.start-recipe')}</h3>
+          <button start-button start-recipe ?disabled=${!this.templates.length} @click=${() => ((this.catalogOpen = true), (this.recipeError = ''))}>
+            ${i18next.t('figure.button.start-recipe')}
+          </button>
+          ${this.templates.length ? nothing : html`<small>${i18next.t('figure.text.start-no-recipes')}</small>`}
+        </section>
+        ${this.aiDraft
+          ? html`<section>
+              <h3>${i18next.t('figure.label.start-ai')}</h3>
+              <button start-button start-ai @click=${() => this.dispatchEvent(new CustomEvent('ask-ai-draft', { bubbles: true, composed: true }))}>
+                ${i18next.t('figure.button.start-ai')}
+              </button>
+              <small>${i18next.t('figure.text.start-ai-optional')}</small>
+            </section>`
+          : nothing}
+      </div>
+    </div>`
   }
-  /** Which part the panel speaks of, with the way back to the whole figure. */
+  /**
+   * Where the panel is, held at its top: the model by its name -- the way back to its settings -- and the part chosen,
+   * with the part's three lines: its kind, how its size answers, what holds it (designer 2026-09-27, B and B.1). The
+   * model name is the same move as the parts list's root; there is no separate "whole figure" link.
+   */
   private renderSubject() {
-    if (!this.selected) return null
+    const name = this.session?.read()?.name || i18next.t('figure.text.new-figure-name')
+    let summary: { kind: string; size: string; relation: string } | undefined
+    try {
+      summary = this.selected ? partSummaryOf(parseFigureAsset(this.session!.source()), ownerOf(this.selected), (key, params) => i18next.t(key, params)) : undefined
+    } catch {
+      summary = undefined
+    }
     return html`<div subject>
-      <button chip title=${i18next.t('figure.button.whole-figure')} @click=${() => (this.selected = '')}>
-        <md-icon>arrow_back</md-icon>${i18next.t('figure.button.whole-figure')}
-      </button>
+      <nav path aria-label=${i18next.t('figure.label.panel-path')}>
+        <button model-crumb ?on=${!this.selected} title=${`${i18next.t('figure.button.show-model-settings')} · ${name}`}
+          aria-label=${`${i18next.t('figure.button.show-model-settings')}: ${name}`} @click=${() => this.showModelSettings()}>${name}</button>
+        ${this.selected
+          ? html`<span aria-hidden="true">›</span><span current aria-current="location" title=${partLabelOf(this.selected)}>${partLabelOf(this.selected)}</span>`
+          : html`<span aria-hidden="true">·</span><span current aria-current="location">${i18next.t('figure.label.model-settings')}</span>`}
+      </nav>
+      ${summary
+        ? html`<div subject-summary>
+            ${summary.kind ? html`<b>${summary.kind}</b>` : nothing}
+            <small>${summary.size}</small><small>${summary.relation}</small>
+          </div>`
+        : nothing}
     </div>`
   }
+  /**
+   * The model's settings: the same move from the parts list's root and from the panel's path (B.1). It shows them on
+   * the properties tab whatever tab was open; it changes no data, no camera, no history and no AI conversation.
+   */
+  private showModelSettings() {
+    this.selected = ''
+    this.tab = 'properties'
+  }
   render() {
     const view = this.session?.read()
     if (!view) return html`<p>${i18next.t('figure.text.opening-model')}</p>`
@@ -1236,6 +1875,35 @@ export class FigureEditor extends LitElement {
     /* 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) + '.')))
+    /*
+      A part's field only the declared room still reads -- its old height position once the floor holds it -- moves
+      nothing; it is shown apart as what it is, not as a position (ADR-0097, designer 2026-09-27).
+    */
+    let roomOnly: string[] = []
+    try {
+      roomOnly = this.selected ? figureRoomOnlyInputsOf(parseFigureAsset(this.session!.source()), this.selected) : []
+    } catch {
+      roomOnly = []
+    }
+    const partFields = own.filter(i => !roomOnly.includes(i.id))
+    /* The numbers a rule gives the axes that have no field of their own -- shown read-only, never as a blank. */
+    let held: HeldValues | undefined
+    try {
+      const body = view.geometry.find(g => g.id === this.selected) as unknown as FigureRenderPart | undefined
+      const placed = body ? placementOf(body) : undefined
+      const parsed = this.selected ? parseFigureAsset(this.session!.source()) : undefined
+      if (placed && parsed)
+        held = {
+          position: placed.position,
+          rotation: placed.rotation,
+          size: (['x', 'y', 'z'] as const).map(axis => measureNow(parsed, ownerOf(this.selected), axis)),
+          /* Only a size a rule sets: a palette part's own numbers are its shape's fields, not a rule's (found in the browser). */
+          sizeRuled: (['x', 'y', 'z'] as const).every(axis => followOf(parsed, ownerOf(this.selected), axis).of !== 'own')
+        }
+    } catch {
+      held = undefined
+    }
+    const roomFields = own.filter(i => roomOnly.includes(i.id))
     const status = view.loading
       ? 'figure.text.loading-figure'
       : view.saving
@@ -1264,6 +1932,8 @@ export class FigureEditor extends LitElement {
           </button>`
         )}
         <span slot="status" class="status" role="status" ?dirty=${status === 'figure.text.unsaved-changes'}>${i18next.t(status)}</span>
+        <span slot="status" release-state>${this.releaseWords(view)}</span>
+        <button slot="commit" publish ?disabled=${!view.id} title=${view.id ? '' : i18next.t('figure.text.save-the-figure-before-releasing')} @click=${this.goRelease}>${i18next.t('figure.button.release')}</button>
         <button slot="commit" save ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}>${i18next.t('figure.button.save')}</button>
       </ox-canvas-bar>
       ${this.catalogOpen
@@ -1283,10 +1953,12 @@ export class FigureEditor extends LitElement {
           slot="start"
           .budget=${this.budget}
           @show-maturity=${() => (this.tab = 'verdict')}
-          .parts=${this.partRows(view.geometry)}
+          .parts=${this.partRows(view.geometry, asset as FigureAsset | undefined)}
           .partBudget=${this.partBudgetOf(asset as FigureAsset | undefined)}
           @set-detail-level=${(e: CustomEvent) => this.linkCommand({ kind: 'set-detail-level', level: e.detail.level })}
           .selected=${this.selected}
+          .modelName=${view.name ?? ''}
+          @show-model-settings=${() => this.showModelSettings()}
           ?locked=${unavailable}
           @add-part=${(e: CustomEvent) => this.add(e.detail.kind)}
           .recipeCount=${this.templates.length}
@@ -1305,12 +1977,25 @@ export class FigureEditor extends LitElement {
               .asset=${asset}
               .context=${view.context ?? ''}
               .view=${this.view}
+              @configure-size=${async (e: CustomEvent<{ part: string }>) => {
+                this.middle = 'edit'
+                this.selected = e.detail.part
+                this.tab = 'properties'
+                await this.updateComplete
+                this.renderRoot.querySelector('figure-links')?.scrollIntoView({ block: 'nearest' })
+              }}
               @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
             ></figure-preview>`
-          : html`<figure-canvas
+          : html`<div middle>
+          ${view.geometry.length === 0 && !unavailable ? this.renderStart() : nothing}
+          <figure-canvas
+          ?startShown=${view.geometry.length === 0 && !unavailable}
           .view=${this.view}
           .parts=${this.drawnParts(view.geometry, asset)}
+          .anchors=${this.anchorsOf(asset as FigureAsset | undefined)}
           .fan=${this.fanOf(asset as FigureAsset | undefined)}
+          .ghost=${this.previewShown().ghost}
+          .highlight=${this.previewShown().highlight}
           .palette=${view.palette ?? {}}
           .context=${view.context ?? ''}
           .selected=${this.selected}
@@ -1320,7 +2005,7 @@ export class FigureEditor extends LitElement {
           @render-error=${(e: CustomEvent<Error>) => {
             this.error = e.detail.message
           }}
-        ></figure-canvas>`}
+        ></figure-canvas></div>`}
         <aside slot="end">
           <div tabs>
             ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}
@@ -1349,7 +2034,8 @@ export class FigureEditor extends LitElement {
                     ${this.renderRepeatNote(view.geometry)}
                   </section>
                   ${this.renderRepeat(asset as FigureAsset | undefined, view.geometry, unavailable)}
-                  ${this.renderGroups(groupFields(own, this.selected), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable))}
+                  ${this.renderGroups(this.withSizeRow(groupFields(partFields, this.selected), held), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable), held)}
+                  ${roomFields.length ? this.renderRoomOnly(roomFields, unavailable) : nothing}
                   ${this.renderLinks(unavailable, 'shape')}
                   <figure-material-panel
                     .body=${{ ...part, id: this.selected }}
@@ -1358,7 +2044,15 @@ export class FigureEditor extends LitElement {
                     @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
                     @part-live=${(e: CustomEvent) => this.hold({}, e.detail.edit)}
                   ></figure-material-panel>`
-              : html`<slot name="figure"></slot>
+              : view.geometry.length === 0
+                ? html`${this.renderSubject()}<section empty-figure>
+                    <p>${i18next.t('figure.text.empty-figure-next')}</p>
+                    <details>
+                      <summary>${i18next.t('figure.label.figure-info-later')}</summary>
+                      <slot name="figure"></slot>
+                    </details>
+                  </section>`
+                : html`${this.renderSubject()}<slot name="figure"></slot>
                   ${this.renderGroups(groupFields(common), 'figure.label.group-figure-size', 'figure.label.design-inputs', unavailable)}
                   ${this.renderInstanceRange(asset as FigureAsset | undefined, unavailable)}`}
           </div>
@@ -1392,12 +2086,13 @@ export class FigureEditor extends LitElement {
     vectorTitle: string,
     singleTitle: string,
     unavailable: boolean,
-    tools: unknown = null
+    tools: unknown = null,
+    held?: HeldValues
   ) {
     return html`${groups.vectors.length || tools
       ? html`<section>
           <h3>${i18next.t(vectorTitle)}</h3>
-          ${groups.vectors.map(g => this.renderVector(g, unavailable))}
+          ${groups.vectors.map(g => this.renderVector(g, unavailable, held))}
           ${tools ? html`<div vector-row><label>${i18next.t('figure.label.tools')}</label>${tools}</div>` : nothing}
         </section>`
       : nothing}
@@ -1408,20 +2103,42 @@ export class FigureEditor extends LitElement {
         </section>`
       : nothing}`
   }
-  private renderVector(group: FieldGroup, unavailable: boolean) {
+  /**
+   * A box-like part's size row stands when a rule sets every side -- each following the figure's size -- with the
+   * numbers the rule gives, as its position and turn rows do (designer 2026-09-27: not a blank, not gone).
+   */
+  private withSizeRow(groups: ReturnType<typeof groupFields>, held?: HeldValues) {
+    if (groups.vectors.some(v => v.kind === 'vector' && v.name === 'size')) return groups
+    if (!held?.sizeRuled || !held.size || held.size.length !== 3 || held.size.some(v => v === undefined)) return groups
+    const at = groups.vectors.findIndex(v => v.kind === 'vector' && v.name === 'rotation')
+    const vectors = [...groups.vectors]
+    vectors.splice(at < 0 ? vectors.length : at + 1, 0, { kind: 'vector', name: 'size', cells: {} })
+    return { ...groups, vectors }
+  }
+  private renderVector(group: FieldGroup, unavailable: boolean, held?: HeldValues) {
     if (group.kind !== 'vector') return nothing
-    const unit = group.cells.x.unit === 'deg' ? '°' : group.cells.x.unit
+    const unit = group.name === 'rotation' ? '°' : 'mm'
+    const ruled = (['x', 'y', 'z'] as const).filter(axis => !group.cells[axis])
+    const given = (axis: 'x' | 'y' | 'z') => {
+      const v = held?.[group.name]?.[['x', 'y', 'z'].indexOf(axis)]
+      return v === undefined || !Number.isFinite(v) ? '—' : String(Math.round(v * 10) / 10)
+    }
     return html`<div vector-row>
       <label>${i18next.t('figure.label.group-' + group.name)}${group.name === 'rotation' ? '' : html` <span unit>${unit}</span>`}</label>
       <div triple>
         ${(['x', 'y', 'z'] as const).map(
-          axis => html`<div cell>
+          axis => !group.cells[axis]
+            ? html`<div cell held title=${i18next.t('figure.text.axis-held-by-rule')}>
+                <span axis>${axis.toUpperCase()}</span>
+                <input type="text" readonly .value=${given(axis)} aria-label=${`${group.name}.${axis} · ${i18next.t('figure.text.axis-held-by-rule')}`} />
+              </div>`
+            : html`<div cell>
             <span axis ?scrub=${!unavailable} @pointerdown=${(e: PointerEvent) => this.scrub(group.cells[axis] as never, e, unavailable)}>${axis.toUpperCase()}</span>
             <input
-              aria-label=${group.cells[axis].id}
+              aria-label=${group.cells[axis]!.id}
               type="number"
               step="any"
-              .value=${String(group.cells[axis].value)}
+              .value=${String(group.cells[axis]!.value)}
               ?disabled=${unavailable}
               @input=${(e: Event) => this.typing(group.cells[axis] as never, e)}
               @change=${(e: Event) => this.changeField(group.cells[axis] as never, e)}
@@ -1429,7 +2146,62 @@ export class FigureEditor extends LitElement {
           </div>`
         )}
       </div>
-    </div>`
+    </div>
+    ${ruled.length ? html`<p hint held-axes>${i18next.t('figure.text.axes-held-by-rule', { group: i18next.t('figure.label.group-' + group.name), axes: ruled.map(a => a.toUpperCase()).join(' · ') })}</p>` : nothing}`
+  }
+  /**
+   * A part's fields only the declared room still reads (ADR-0097, designer 2026-09-27): shown as what they are and not
+   * typed into -- they move nothing. Declaring the room again is offered; nothing is deleted or widened on the way.
+   */
+  private renderRoomOnly(fields: FieldLike[], unavailable: boolean) {
+    return html`<section room-only>
+      <h3>${i18next.t('figure.label.room-only-inputs')}</h3>
+      <p hint>${i18next.t('figure.text.room-only-inputs')}</p>
+      <div form>
+        ${fields.map(
+          f => html`<span>${fieldWordsOf(f.id, key => i18next.t(key))} (${f.unit})</span><input aria-label=${f.id} type="number" .value=${String(f.value)} disabled />`
+        )}
+      </div>
+      <button act room-refit ?disabled=${unavailable} @click=${() => this.askRoomRefit()}>${i18next.t('figure.button.room-refit')}</button>
+    </section>`
+  }
+  /** The room as declared and as proposed, and what lies outside each as measured, before the author confirms. */
+  private async askRoomRefit() {
+    let refit
+    try {
+      refit = figureRoomRefitOf(parseFigureAsset(this.session!.source()))
+    } catch (error) {
+      this.error = this.said(error)
+      return
+    }
+    if (!refit) return
+    const rows = roomRefitRowsOf(refit)
+    const outside = (list: typeof refit.outside.declared) =>
+      list.length
+        ? list.map(o => i18next.t('figure.text.room-part-outside', { part: partLabelOf(o.part), axis: o.axis.toUpperCase(), mm: String(o.mm) })).join(' · ')
+        : i18next.t('figure.text.room-nothing-outside')
+    const agreed = await OxPrompt.open({
+      type: 'question',
+      title: i18next.t('figure.label.room-refit'),
+      template: html`<table room-refit>
+          <tr><th></th><th>${i18next.t('figure.label.room-declared')}</th><th>${i18next.t('figure.label.room-proposed')}</th></tr>
+          ${rows.map(
+            r => html`<tr>
+              <td>${i18next.t(`figure.label.room-at-${r.at}`)} ${r.axis.toUpperCase()}</td>
+              <td>${r.declared}</td>
+              <td>${r.same ? i18next.t('figure.text.room-same') : r.proposed}</td>
+            </tr>`
+          )}
+        </table>
+        <p>${i18next.t('figure.label.room-declared')}: ${outside(refit.outside.declared)}</p>
+        <p>${i18next.t('figure.label.room-proposed')}: ${outside(refit.outside.proposed)}</p>
+        ${refit.drops.length
+          ? html`<p>${i18next.t('figure.text.room-drops', { fields: [...new Set(refit.drops.map(id => `${partLabelOf(id.split('.')[0]!)} ${fieldWordsOf(id, key => i18next.t(key))}`))].join(' · ') })}</p>`
+          : nothing}`,
+      confirmButton: { text: i18next.t('figure.button.room-refit-confirm') },
+      cancelButton: { text: i18next.t('figure.button.keep-editing') }
+    })
+    if (agreed) this.linkCommand(refit.step)
   }
   private renderSingle(name: string, field: FieldLike, unavailable: boolean) {
     const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }))