@things-factory/figure-ui 10.1.152 → 10.1.153

package/client/modeller/editor.ts

@@ -1,12 +1,12 @@
-import { LitElement, html, css, nothing, type PropertyValues } from 'lit'
+import { LitElement, html, nothing, type PropertyValues } from 'lit'
 import { i18next } from '@operato/i18n'
 import type { OxThreePane } from '@operato/layout'
 import '@operato/layout'
-import { notify, openPopup } from '@operato/layout'
+import { openPopup } 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, figurePartIdFor, figureRecipeIdFor, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, type FigurePlaneContact, type FigureClipLoss, figurePartFaceOf, type FigureFaceArea, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model'
+import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, type FigurePlaneContact, 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, FigureEvaluatedShape, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigurePlacement, FigureFaceMappingNeed, FigureFaceRemap } from '@hatiolab/figure-model'
@@ -18,7 +18,8 @@ import './figure-parts.js'
 import './figure-material-panel.js'
 import './figure-section-panel.js'
 import './figure-section-editor.js'
-import { faceHighlightOf, ghostPartsOf, previewWordsOf, rowWordsOf, type HeldPreview } from './command-preview.js'
+import { rowWordsOf } from './command-preview.js'
+import { CommandPreview, NO_WORDS } from './command-preview-controller.js'
 import { motionEndsOf, type MotionEnds } from './motion-ends.js'
 import './figure-links.js'
 import './figure-controls.js'
@@ -28,9 +29,14 @@ import './figure-settings.js'
 import { DEFAULT_VIEW, type ViewSettings } from './figure-view.js'
 import './figure-capability-panel.js'
 import { gizmoChanges, gizmoReachOf, type GizmoReach, type GizmoResult } from './gizmo.js'
-import { keyActionOf } from './keys.js'
+import type { KeyAction } from './keys.js'
+import { ModellerKeys } from './modeller-keys.js'
+import { PaneFold } from './pane-fold.js'
+import { PanelMemory } from './panel-memory.js'
+import { RefusalTeller, type Retry } from './refusal-teller.js'
 import { groupFields, ownerOf, partLabelOf, repeatOf, type FieldLike, type FieldGroup } from './fields.js'
 import { SidePanelStyles } from './side-panel-styles.js'
+import { EditorStyles } from './editor-styles.js'
 import { ScrollbarStyles } from '@operato/styles'
 import { alignChanges, canMirror, mirrorChanges, type AlignTool } from './align.js'
 import type { FigurePaletteKind, FigurePartRow } from './figure-parts.js'
@@ -54,7 +60,7 @@ import type { FigureRenderPart } from './renderer.js'
 import type { FigureBudgetLine } from './maturity.js'
 import { endPlaceKeyOf, fieldWordsOf, followOf, measureNow, partSummaryOf, instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './links.js'
 import { jointFanOf } from './joint-fan.js'
-import { derivedHeld, derivedOf, type FigureRevision } from './revision.js'
+import { derivedOf, type FigureRevision } from './revision.js'
 import { jointDragOf } from './joint-drag.js'
 import type { FirstSave } from './first-save.js'
 import { isLive, livePartsOf, liveOverSession, NOTHING_LIVE, scrubbed, scrubStep, type LiveValues } from './live.js'
@@ -67,332 +73,13 @@ import { startingShapeKindOfBody } from './starting-shape.js'
  */
 type SideTab = 'properties' | 'capability' | 'motion' | 'verdict' | 'view' | 'history'
 
-/** Whether the narrow fold was said in this browser before; true from now on. Storage refused: said, as before. */
-function foldSaid(): boolean {
-  try {
-    if (localStorage.getItem('figure-fold-said')) return true
-    localStorage.setItem('figure-fold-said', '1')
-  } catch {
-    /* No storage here: said every time, as it was. */
-  }
-  return false
-}
-
 /** Product editor surface. The injected session is shared by page persistence and AI commands. */
-/** The words a panel is given when there are none: one array, so it does not read as a change. */
-const NO_WORDS: string[] = []
 const NO_OVERHANG = { words: NO_WORDS, note: NO_WORDS }
 
-/** How long a command's candidate rests before its preview is worked out. */
-const PREVIEW_SETTLE_MS = 150
-
 @customElement('figure-editor')
 export class FigureEditor extends LitElement {
   /* The operato scrollbar, as every scrolling panel of the app has it -- the side panel scrolled with the browser's own. */
-  static styles = [ScrollbarStyles, SidePanelStyles, css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-      height: 100%;
-      /* The editor folds by the width it is given, not the window's (UX ruling, 2026-09-24). */
-      container-type: inline-size;
-      font: 13px sans-serif;
-      color: var(--md-sys-color-on-surface);
-    }
-    /* The bar over the work is ox-canvas-bar (ADR-0060 decision 8): the folds at its edges, undo, redo and
-       fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */
-    ox-canvas-bar button[mode] {
-      height: 28px;
-      padding: 0 10px;
-      border-radius: 999em;
-      border-color: transparent;
-      background: none;
-    }
-    ox-canvas-bar button[mode][aria-pressed='true'] {
-      border-color: var(--md-sys-color-primary);
-    }
-    /* The gizmo's tools, drawn as the bar's own icon buttons (undo, redo, fit). */
-    ox-canvas-bar .gizmo-tools {
-      display: inline-flex;
-      gap: 2px;
-      padding-left: 4px;
-      border-left: 1px solid var(--md-sys-color-outline-variant);
-    }
-    ox-canvas-bar button[tool] {
-      display: inline-grid;
-      place-items: center;
-      width: 32px;
-      height: 32px;
-      padding: 0;
-      border: none;
-      border-radius: var(--md-sys-shape-corner-small, 8px);
-      background: transparent;
-      color: var(--md-sys-color-on-surface-variant);
-      cursor: pointer;
-    }
-    ox-canvas-bar button[tool]:hover:not(:disabled) {
-      background: var(--md-sys-color-surface-container-high);
-      color: var(--md-sys-color-on-surface);
-    }
-    ox-canvas-bar button[tool][aria-pressed='true'] {
-      background: var(--md-sys-color-secondary-container);
-      color: var(--md-sys-color-on-secondary-container);
-    }
-    ox-canvas-bar button[tool]:disabled {
-      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;
-    }
-    /* The edit canvas stays standing while the preview is in front (a 3D scene costs a third of a second to make), out of sight. */
-    div[middle][hidden] {
-      display: none;
-    }
-    /* The preview, once made, stays standing out of sight too: its 3D scene is not made again each time it is asked for. */
-    figure-preview[hidden] {
-      display: none;
-    }
-    ox-canvas-bar .status {
-      padding: 0 8px;
-      color: var(--md-sys-color-on-surface-variant);
-    }
-    ox-canvas-bar .status[dirty] {
-      color: var(--md-sys-color-primary);
-      font-weight: 600;
-    }
-    ox-canvas-bar button[save] {
-      height: 32px;
-      padding: 0 14px;
-      border: none;
-      border-radius: 999em;
-      color: var(--md-sys-color-on-primary);
-      background: var(--md-sys-color-primary);
-    }
-    /* The three panes are ox-three-pane's (ADR-0060 decision 8): widths 200 | 1fr | 340, 160 | 300 under
-       860px and one column with the middle first under 560px are the frame's, as are the dividers. */
-    ox-three-pane {
-      flex: 1;
-      min-height: 0;
-    }
-    figure-parts {
-      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;
-      flex-direction: column;
-      min-height: 0;
-      background: var(--md-sys-color-surface-container-lowest);
-    }
-    div[tabs] {
-      display: flex;
-      flex: none;
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
-    }
-    button[tab] {
-      flex: 1;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 1px;
-      min-width: 0;
-      height: 48px;
-      padding: 0;
-      border: none;
-      border-radius: 0;
-      border-bottom: 2px solid transparent;
-      background: none;
-      color: var(--md-sys-color-on-surface-variant);
-    }
-    button[tab]:hover:not([on]) {
-      background: var(--md-sys-color-surface-container);
-    }
-    button[tab][on] {
-      color: var(--md-sys-color-primary);
-      border-bottom-color: var(--md-sys-color-primary);
-    }
-    button[tab] md-icon {
-      font-size: 20px;
-      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;
-      right: 2px;
-      padding: 0 5px;
-      font-size: 0.62rem;
-      font-weight: 700;
-      line-height: 1.5;
-      color: var(--md-sys-color-on-primary-container);
-      background: var(--md-sys-color-primary-container);
-      border-radius: 999em;
-      pointer-events: none;
-    }
-    /* The sections inside carry the margins (side-panel-styles); the panel only scrolls. */
-    div[panel] {
-      flex: 1;
-      min-height: 0;
-      overflow: auto;
-      padding: 0;
-    }
-    div[panel][flush] {
-      padding: 0;
-    }
-    /* Hidden, not removed: a panel keeps what it holds (the verdict its last answer) while another tab is open. */
-    [off] {
-      display: none !important;
-    }
-    /* Which part the panel speaks of. */
-    div[subject] {
-      position: sticky;
-      top: 0;
-      z-index: 1;
-      display: grid;
-      gap: 4px;
-      padding: 10px 12px;
-      background: var(--md-sys-color-surface-container-lowest);
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
-    }
-    /* The panel's three sizes (side-panel-styles): the part's kind at the title's, its two lines at the hint's. */
-    div[subject-summary] {
-      display: grid;
-      gap: 2px;
-    }
-    div[subject-summary] b {
-      font-size: var(--ui-t-body, 13px);
-      font-weight: 600;
-    }
-    div[subject-summary] b span {
-      font-weight: 400;
-      color: var(--md-sys-color-on-surface-variant);
-    }
-    div[subject-summary] small {
-      color: var(--md-sys-color-on-surface-variant);
-    }
-    button {
-      font: inherit;
-      box-sizing: border-box;
-      height: 32px;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 6px;
-      background: var(--md-sys-color-surface);
-      color: inherit;
-      padding: 0 8px;
-      min-width: 0;
-    }
-    button {
-      cursor: pointer;
-    }
-    button:disabled {
-      opacity: 0.45;
-      cursor: default;
-    }
-    button[aria-pressed='true'] {
-      background: var(--md-sys-color-secondary-container);
-      color: var(--md-sys-color-on-secondary-container);
-      border-color: var(--md-sys-color-primary);
-    }
-    .hint {
-      color: var(--md-sys-color-on-surface-variant);
-      line-height: 1.5;
-    }
-  `]
+  static styles = [ScrollbarStyles, SidePanelStyles, EditorStyles]
   @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 }
@@ -425,7 +112,7 @@ export class FigureEditor extends LitElement {
    */
   @state() private faceMapping?: { action: FigureAuthoringAction; need: FigureFaceMappingNeed; from: 'section-editor' | 'panel' }
   /** The same link offered again with the size range narrowed, after a link the declared range could not hold. */
-  @state() private retry?: { label: string; action?: FigureAuthoringAction; run?: () => void }
+  @state() private retry?: Retry
   @state() private tab: SideTab = 'properties'
   /** The frame the bar folds - found after the first render, since the bar is drawn before it. */
   @state() private panes?: OxThreePane
@@ -467,13 +154,14 @@ export class FigureEditor extends LitElement {
   @state() private live: LiveValues = NOTHING_LIVE
   /** The part whose drawn section is open in the section editor (ADR-0100 §3.2), or null. */
   @state() private sectionEditing: string | null = null
-  /**
-   * 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
+  private commandPreview = new CommandPreview(this, {
+    session: () => this.session,
+    selected: () => this.selected,
+    shown: () => this.shown(),
+    formsInSight: () => this.middle === 'edit' && this.tab === 'properties',
+    said: error => this.said(error)
+  })
   /**
    * Move, turn and size on the canvas, in the bar's tools: the gizmo the W · E · R keys give, found without knowing the
    * keys (2026-09-26 -- a person dragging the part turned the camera). Each is offered only where the part's own
@@ -501,29 +189,22 @@ export class FigureEditor extends LitElement {
       )}
     </span>`
   }
-  /** The modeller's keys (`keys.ts`): undo, redo, duplicate, remove, back to the whole figure, the gizmo's modes. */
-  private onKey = (e: KeyboardEvent) => {
-    const view = this.session?.read()
-    if (!view || view.loading || view.saving || !view.context || !this.isConnected) return
-    /*
-     * The section editor open takes the keys for its own: Esc cancels it, Delete deletes a point, Ctrl+Z undoes a point.
-     * Heard here first, they deselected the part, deleted the part and undid the figure's last step (2026-09-30).
-     */
-    if (this.sectionEditing) return
+  private keys = new ModellerKeys(this, {
+    taking: () => {
+      const view = this.session?.read()
+      /*
+       * The section editor open takes the keys for its own: Esc cancels it, Delete deletes a point, Ctrl+Z undoes a point.
+       * Heard here first, they deselected the part, deleted the part and undid the figure's last step (2026-09-30).
+       */
+      return !!view && !view.loading && !view.saving && !!view.context && this.isConnected && !this.sectionEditing
+    },
+    scene: () => this.renderRoot.querySelector<FigureCanvas>('figure-canvas'),
+    selected: () => this.selected,
+    act: action => this.keyAction(action)
+  })
+  private keyAction(action: KeyAction) {
+    const view = this.session!.read()
     const canvas = this.renderRoot.querySelector<FigureCanvas>('figure-canvas')
-    const path = e.composedPath()
-    const action = keyActionOf(
-      { key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey, target: path[0] as HTMLElement, inScene: !!canvas && path.includes(canvas) },
-      this.selected
-    )
-    if (!action) return
-    e.preventDefault()
-    /*
-      The session's history is the only one. With the canvas focused the scene took Ctrl+Z as well, undoing on its own
-      board the last value the canvas had written -- which the canvas then told as a drag: an undo of a drag on a
-      part placed by a rule wrote the drag again (2026-09-25). Heard first (capture) and kept from the scene.
-    */
-    e.stopPropagation()
     if (action === 'translate' || action === 'rotate' || action === 'scale') canvas && this.useGizmo(action)
     else if (action === 'undo') view.canUndo && this.run(() => this.session!.undo())
     else if (action === 'redo') view.canRedo && this.run(() => this.session!.redo())
@@ -531,118 +212,16 @@ export class FigureEditor extends LitElement {
     else if (action === 'remove') this.removePart(this.selected)
     else this.selected = ''
   }
-  connectedCallback() {
-    super.connectedCallback()
-    window.addEventListener('keydown', this.onKey, true)
-    this.widthWatch.observe(this)
-  }
-  disconnectedCallback() {
-    window.removeEventListener('keydown', this.onKey, true)
-    this.widthWatch.disconnect()
-    clearTimeout(this.previewTimer)
-    clearTimeout(this.detachTimer)
-    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.
-    Said once in this browser, not on every opening (2026-10-02): the list folds as before, the notice does not come back.
-  */
-  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
-        if (!foldSaid()) 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 --
-   * delete and fit the space again, narrow the range -- asks in the app's prompt and goes on when confirmed; any
-   * other refusal is the app's notification, which stays until it is closed.
-   */
-  private toldViewError = ''
-  private tell(changed: PropertyValues) {
-    if (changed.has('error') && this.error) {
-      const retry = this.retry
-      if (retry) this.ask(this.error, retry)
-      else notify({ level: 'error', message: this.error })
-    }
-    if (changed.has('notice') && this.notice) notify({ level: 'info', message: this.notice })
-    const viewError = this.session?.read()?.error ?? ''
-    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',
-      text: message,
-      confirmButton: { text: retry.label },
-      cancelButton: { text: i18next.t('figure.button.keep-editing') }
-    })
-    if (!agreed) return
-    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
-  }
+  private paneFold = new PaneFold(this, () => this.panes)
+  private refusals = new RefusalTeller({
+    session: () => this.session,
+    error: () => this.error,
+    notice: () => this.notice,
+    retry: () => this.retry,
+    refuse: message => (this.error = message),
+    command: action => this.linkCommand(action)
+  })
+  private panelMemory = new PanelMemory(() => this.renderRoot)
   /** The preview is made when first asked for, and kept (hidden) after that; it is taken down with the editor. */
   private previewMounted = false
   protected willUpdate(_changed: PropertyValues) {
@@ -655,10 +234,7 @@ export class FigureEditor extends LitElement {
       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'
+      this.panelMemory.leave((_changed.get('selected') as string | undefined) ?? '', this.selected)
     }
     if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected)) this.selected = ''
     if (_changed.has('selected')) this.gizmoMode = undefined
@@ -714,7 +290,7 @@ export class FigureEditor extends LitElement {
       this.notice = ''
       this.changed()
     } catch (error) {
-      if (this.askClipLoss(error, () => this.run(action))) return
+      if (this.refusals.askClipLoss(error, () => this.run(action))) return
       this.error = this.said(error)
     } finally {
       /* Committed or refused, the value in hand is gone: the figure as it stands is drawn again. */
@@ -864,7 +440,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
+      if (this.refusals.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
@@ -1136,19 +712,6 @@ export class FigureEditor extends LitElement {
     }
   }
   /** Size response, fastening and motion for the selected part, as authoring commands. */
-  /*
-    What a panel is handed is the same object while it says the same thing: a new array each render reads as a change to
-    the panel, which draws itself again for nothing (sixteen times for one edit).
-  */
-  private previewWordsSaid?: { preview: unknown; part: string; language: string; words: string[] }
-  private previewWordsNow(): string[] {
-    const preview = this.currentPreview()
-    const language = i18next.language
-    if (this.previewWordsSaid && this.previewWordsSaid.preview === preview && this.previewWordsSaid.part === this.selected && this.previewWordsSaid.language === language) return this.previewWordsSaid.words
-    const words = previewWordsOf(preview, this.selected, (key, params) => i18next.t(key, params))
-    this.previewWordsSaid = { preview, part: this.selected, language, words }
-    return words
-  }
   private renderLinks(unavailable: boolean, section: 'shape' | 'places' | 'motion') {
     const shown = this.shown()
     if (!shown) return null
@@ -1158,13 +721,13 @@ export class FigureEditor extends LitElement {
       .partId=${this.selected}
       ?locked=${unavailable}
       @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
-      .previewWords=${this.previewWordsNow()}
-      .detachWords=${this.detachWords(shown)}
+      .previewWords=${this.commandPreview.words()}
+      .detachWords=${this.commandPreview.detachWords(shown)}
       .overhangWords=${section === 'shape' ? this.overhangOf(shown).words : NO_WORDS}
       .overhangNote=${section === 'shape' ? this.overhangOf(shown).note : NO_WORDS}
       .motionEnds=${section === 'motion' ? this.motionEnds() : null}
       @go-fasten=${() => this.goFasten()}
-      @preview-command=${(e: CustomEvent) => this.previewCommand(e.detail)}
+      @preview-command=${(e: CustomEvent) => this.commandPreview.ask(e.detail)}
       @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
     ></figure-links>`
   }
@@ -1239,7 +802,7 @@ export class FigureEditor extends LitElement {
       this.changed()
       return true
     } catch (error) {
-      if (this.askClipLoss(error, () => this.linkCommand(action, from))) return false
+      if (this.refusals.askClipLoss(error, () => this.linkCommand(action, from))) return false
       const code = (error as { code?: string })?.code
       /* Something stands on a face this takes away: ask where it goes, there, rather than only saying no. */
       const need = (error as { details?: FigureFaceMappingNeed }).details
@@ -1637,117 +1200,6 @@ export class FigureEditor extends LitElement {
     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. */
-  /**
-   * What a command would do is worked out on a copy of the figure -- several compiles of it -- so it waits for the field to
-   * rest: a number typed digit by digit asks once, for the number it ends on. Clearing is at once, and the same question on
-   * the same version is not asked again.
-   */
-  private previewTimer?: ReturnType<typeof setTimeout>
-  private previewCommand(candidate: { action: FigureAuthoringAction; face?: { part: string; face: string } } | null) {
-    clearTimeout(this.previewTimer)
-    if (!candidate || !this.session || !this.selected) {
-      this.preview = undefined
-      return
-    }
-    const view = this.session.read()
-    const key = JSON.stringify(candidate)
-    const same = this.preview && this.preview.key === key && this.preview.context === view.context && this.preview.part === this.selected && 'revision' in this.preview && this.preview.revision === view.revision
-    if (same) return
-    /*
-      What another command would do is not said of this one while this one is worked out: a row's pitch refused stayed
-      on screen for the count chosen after it (:3300, 2026-10-11).
-    */
-    if (this.preview && this.preview.key !== key) this.preview = undefined
-    this.previewTimer = setTimeout(() => this.computePreview(candidate), PREVIEW_SETTLE_MS)
-  }
-  private computePreview(candidate: { action: FigureAuthoringAction; face?: { part: string; face: string } }) {
-    if (!this.session || !this.selected) 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 {
-          const shown = this.shown()!
-          face = figurePartFaceOf(shown.asset, candidate.face.part, candidate.face.face, shown.inputs)
-        } 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.shown()!.inputs) : 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 detachTimer?: ReturnType<typeof setTimeout>
-  private detachAsked?: { shown: FigureRevision; part: string }
-  /**
-   * Said once the figure has rested: working it out is a preview of the command on a copy (tens of milliseconds), and the
-   * edit that made this version should be on screen before it. Until then nothing is said, as for a part with no joint.
-   */
-  private detachWords(shown: FigureRevision): string[] {
-    const part = this.selected
-    if (!this.session || !shown.asset.joints?.some(j => j.body1.part === part)) return NO_WORDS
-    const key = `detach|${part}`
-    const said = derivedHeld<string[]>(shown, key)
-    if (said) return said
-    if (this.detachAsked?.shown !== shown || this.detachAsked.part !== part) {
-      this.detachAsked = { shown, part }
-      clearTimeout(this.detachTimer)
-      this.detachTimer = setTimeout(() => {
-        if (this.shown() !== shown || this.selected !== part) return
-        derivedOf(shown, key, () => this.computeDetachWords(shown, part))
-        this.requestUpdate()
-      }, PREVIEW_SETTLE_MS)
-    }
-    return NO_WORDS
-  }
-  private computeDetachWords(shown: FigureRevision, part: string): string[] {
-    const say = (k: string, params?: Record<string, string>) => i18next.t(k, params)
-    let words: string[]
-    try {
-      const seen = this.session!.previewCommand({ kind: 'detach', part })
-      const own = seen.moves.some(m => m.body === part)
-      words = own
-        ? [say('figure.text.detach-moves'), ...previewWordsOf({ context: seen.context, revision: seen.revision, key: `detach|${part}`, moves: seen.moves }, part, say)]
-        : /* It stays where it is: as expected, so nothing is said (user 2026-10-01). */ []
-      const children = (shown.asset.joints ?? []).filter(j => 'part' in j.body0 && j.body0.part === part).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) })]
-    }
-    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 version, part and language. The note says it is wider
@@ -1803,12 +1255,10 @@ export class FigureEditor extends LitElement {
   }
   /** 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()
+    const p = this.commandPreview.current()
     /* 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
+    return this.commandPreview.drawnOf(p)
   }
   /**
    * 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
@@ -1851,23 +1301,12 @@ export class FigureEditor extends LitElement {
   }
   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
-      })
-    }
+    this.refusals.tell(changed)
+    this.panelMemory.restore(() => this.selected)
     const panes = this.renderRoot.querySelector<OxThreePane>('ox-three-pane') ?? undefined
     if (panes !== this.panes) {
       this.panes = panes
-      this.fitPanesTo(this.getBoundingClientRect().width)
+      this.paneFold.fitTo(this.getBoundingClientRect().width)
     }
   }
   /**