@things-factory/figure-ui 10.1.128 → 10.1.141

package/client/modeller/editor.ts

@@ -6,7 +6,7 @@ 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, parseFigureAsset, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, type FigurePlaneContact, type FigureClipLoss, figurePartFaceOf, type FigureFaceArea, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang, figureRoomOnlyInputsOf, figureRoomRefitOf, seedFigureEvaluation, upgradeFigurePlacement } from '@hatiolab/figure-model'
+import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, 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 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'
@@ -32,7 +32,7 @@ import { keyActionOf } from './keys.js'
 import { groupFields, ownerOf, partLabelOf, repeatOf, type FieldLike, type FieldGroup } from './fields.js'
 import { SidePanelStyles } from './side-panel-styles.js'
 import { ScrollbarStyles } from '@operato/styles'
-import { alignChanges, boxOf, canMirror, mirrorChanges, type AlignTool } from './align.js'
+import { alignChanges, canMirror, mirrorChanges, type AlignTool } from './align.js'
 import type { FigurePaletteKind, FigurePartRow } from './figure-parts.js'
 import { paletteRecipe } from './palette.js'
 import { apexOver, drawnOf } from './section-drawing.js'
@@ -48,7 +48,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 { seedEvaluatedGeometry } from './evaluated.js'
+import { derivedHeld, 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'
@@ -75,18 +75,11 @@ function foldSaid(): boolean {
 /** 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
 
-function deepFreeze<T>(value: T): T {
-  if (value && typeof value === 'object' && !Object.isFrozen(value)) {
-    Object.freeze(value)
-    for (const inner of Object.values(value)) deepFreeze(inner)
-  }
-  return value
-}
-
 @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. */
@@ -494,7 +487,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(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() })}`}
+          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + i18next.t(tool.mode === 'scale' && this.sizeDragUnsure(this.asset()!, 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>
@@ -691,7 +684,7 @@ export class FigureEditor extends LitElement {
   /** 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
+      const asset = this.asset()
       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
@@ -723,31 +716,34 @@ export class FigureEditor extends LitElement {
       this.live = NOTHING_LIVE
     }
   }
+  /** The bodies drawn with the value in hand, or null when nothing is in hand (or the figure cannot take it). */
+  private liveParts(shown: FigureRevision | undefined): FigureRenderPart[] | null {
+    return shown ? liveOverSession(shown, this.live) : null
+  }
   /** What the canvas draws: the figure with the value in hand when there is one, and without the parts hidden on the workbench. */
-  private drawnParts(geometry: Parameters<typeof drawableFigureParts>[0] | undefined, asset: unknown) {
-    const parts = (asset ? liveOverSession(asset as FigureAsset, this.currentInputs(), this.live) : null) ?? drawableFigureParts(geometry ?? [])
+  private drawnParts(geometry: Parameters<typeof drawableFigureParts>[0] | undefined, live: FigureRenderPart[] | null) {
+    const parts = live ?? drawableFigureParts(geometry ?? [])
     return parts.filter(body => !this.hiddenParts.has(ownerOf((body as { id: string }).id)))
   }
   /**
    * Where the selected part turns and how far, with the pose as it is drawn now -- a value in hand included, so the
    * fan follows the arm while a control is dragged. Its size comes from what the joint turns (`joint-fan`).
    */
-  private fanOf(asset: FigureAsset | undefined) {
-    if (!asset || !this.selected || this.hiddenParts.has(this.selected)) return null
+  private fanOf(shown: FigureRevision | undefined, live: FigureRenderPart[] | null) {
+    if (!shown || !this.selected || this.hiddenParts.has(this.selected)) return null
     try {
-      return jointFanOf(asset, this.selected, { ...this.currentInputs(), ...this.live.values })
+      return jointFanOf(shown, this.selected, live ? { values: this.live.values, geometry: live } : undefined)
     } catch {
       return null
     }
   }
   /**
-   * Every input as the session holds it now -- the pose the author has set with the controls, and design values. The
-   * asset's source carries only the saved defaults, so drawing a value in hand over it put every other joint back to its
-   * saved angle while one slider moved, and the arm jumped when released (user, 2026-09-24).
+   * The figure on screen at its version: what every panel and helper reads (`revision.ts`). Every input as the session
+   * holds it now is its `inputs` -- the pose set with the controls included: drawing a value in hand over the saved
+   * defaults put every other joint back to its saved angle while one slider moved (user, 2026-09-24).
    */
-  private currentInputs(): Record<string, number> {
-    const view = this.session?.read()
-    return view ? Object.fromEntries(view.fields.map(field => [field.id, field.value as number])) : {}
+  private shown(): FigureRevision | undefined {
+    return this.session?.revisionNow()
   }
   /** A value in hand: an input's value (design or pose) or a part edit. Nothing is recorded. */
   private hold(values: Record<string, number>, edit?: FigurePartEdit) {
@@ -865,7 +861,7 @@ export class FigureEditor extends LitElement {
    */
   private insertRecipe(recipe: FigureRecipe, values: Record<string, FigureRecipeValue>) {
     try {
-      const asset = this.plainAsset() as FigureAsset
+      const asset = this.shown()!.asset
       const checked = parseFigureRecipe(recipe)
       const id = figureRecipeIdFor(asset, checked)
       const steps = resolveFigureRecipe(checked, { id, ...(checked.target === 'part' ? { target: this.selected } : {}), values })
@@ -881,7 +877,7 @@ export class FigureEditor extends LitElement {
   /** The design values of the asset being edited. */
   private designValues(): Record<string, number> {
     try {
-      return this.session ? (this.plainAsset().designInputs ?? {}) : {}
+      return this.shown()?.asset.designInputs ?? {}
     } catch {
       return {}
     }
@@ -892,7 +888,7 @@ 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 {
-      const asset = this.plainAsset()
+      const asset = this.shown()!.asset
       const reach = gizmoReachOf(asset, id)
       /*
         A size drag shows the face it keeps and the commit keeps the same (figureScaleAnchorOf). Where figure-model cannot
@@ -917,9 +913,10 @@ export class FigureEditor extends LitElement {
   private transformed(id: string, result: GizmoResult) {
     const view = this.session!.read()
     /* A part hanging from a joint: the drag edits the joint -- its value, or where it sits (ADR-0093). */
-    const asset = this.plainAsset() as FigureAsset
+    const shown = this.shown()!
+    const asset = shown.asset
     const drawn = view.geometry.find(g => g.id === id) as unknown as FigureRenderPart | undefined
-    const drag = drawn ? jointDragOf(asset, ownerOf(id), drawn, result, this.currentInputs()) : null
+    const drag = drawn ? jointDragOf(asset, ownerOf(id), drawn, result, shown.inputs) : null
     if (drag) {
       if (drag.kind === 'value') this.run(() => this.session!.apply([{ kind: 'set-state', input: drag.input, unit: drag.unit, value: drag.value }]))
       else if (drag.kind === 'joint') this.run(() => this.session!.command({ kind: 'set-joint', joint: drag.joint }))
@@ -994,8 +991,7 @@ export class FigureEditor extends LitElement {
   /** 맞추기 — one tool, one step of the history, through the same inputs as the gizmo. */
   private align(tool: AlignTool) {
     this.run(() => {
-      const asset = this.plainAsset()
-      const changes = alignChanges(asset, this.selected, this.reachOf(this.selected), tool)
+      const changes = alignChanges(this.shown()!, this.selected, this.reachOf(this.selected), tool)
       if (changes.length) this.session!.apply(changes)
     })
   }
@@ -1007,7 +1003,7 @@ export class FigureEditor extends LitElement {
       this.session!.edit({ kind: 'duplicate-part', target: id })
       const copy = this.session!.read().geometry.find(g => !before.has(g.id))?.id
       if (!copy) return
-      this.session!.apply(mirrorChanges(this.plainAsset(), id, copy, axis))
+      this.session!.apply(mirrorChanges(this.shown()!, id, copy, axis))
       this.selected = copy
     })
   }
@@ -1019,33 +1015,29 @@ export class FigureEditor extends LitElement {
    */
   /* 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'
+    const placement = (this.asset())?.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
+  /* How the selected part would meet the plane, worked out once per version and part. */
+  private planeContactOf(shown: FigureRevision, part: string): FigurePlaneContact | undefined {
+    return derivedOf(shown, `plane-contact|${part}`, () => {
       try {
-        contact = figurePlaneAlignChanges(parseFigureAsset(source), part).contact
+        return figurePlaneAlignChanges(shown.asset, part).contact
       } catch {
-        contact = undefined
+        return undefined
       }
-      this.planeContact = { source, part, contact }
-    }
-    return this.planeContact.contact
+    })
   }
-  private renderPlaneAlign(asset: FigureAsset, unavailable: boolean) {
-    const placement = asset.placement ?? 'floor'
+  private renderPlaneAlign(shown: FigureRevision, unavailable: boolean) {
+    const placement = shown.asset.placement ?? 'floor'
     /* 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 contact = this.planeContactOf(shown, this.selected)
     const told = contact === 'tilted' || contact === 'extreme' ? `-${contact}` : ''
     return html`<button plane-align=${placement} ?disabled=${unavailable} title=${i18next.t(`figure.text.align-to-${placement}${told}`)}
       @click=${() => this.alignToPlane()}>${i18next.t(`figure.button.align-to-${placement}`)}</button>`
   }
   private alignToPlane() {
-    const asset = this.parsedAsset()
+    const asset = this.shown()!.asset
     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) })
@@ -1056,26 +1048,21 @@ export class FigureEditor extends LitElement {
   }
   private renderTools(unavailable: boolean) {
     const reach = this.reachOf(this.selected)
-    if (!this.selected || !reach.translate) return null
-    let asset: unknown
-    try {
-      asset = this.plainAsset()
-    } catch {
-      return null
-    }
+    const shown = this.shown()
+    if (!this.selected || !reach.translate || !shown) return null
     /*
      * In words, two rows by what they do (user 2026-10-01: 「무엇을 하는 것인지 모르겠다」): moving the part to the figure's
      * centre lines, onto its plane or onto the grid; and making a mirrored copy, which makes a part and moves nothing.
      */
     const tool = (name: AlignTool, label: string, title: string) =>
       html`<button ?disabled=${unavailable} title=${i18next.t(title)} @click=${() => this.align(name)}>${i18next.t(label)}</button>`
-    const mirrors = (['x', 'z'] as const).map(axis => ({ axis, able: canMirror(asset as never, this.selected, axis, reach) }))
+    const mirrors = (['x', 'z'] as const).map(axis => ({ axis, able: canMirror(shown, this.selected, axis, reach) }))
     return html`<div vector-row>
         <label>${i18next.t('figure.label.tools')}</label>
         <div tools>
           ${tool('centre-x', 'figure.button.center-x', 'figure.text.center-on-x')}
           ${tool('centre-z', 'figure.button.center-z', 'figure.text.center-on-z')}
-          ${this.renderPlaneAlign(asset as FigureAsset, unavailable)}
+          ${this.renderPlaneAlign(shown, unavailable)}
           ${tool('snap', 'figure.button.snap', 'figure.text.snap-explained')}
         </div>
       </div>
@@ -1131,20 +1118,6 @@ export class FigureEditor extends LitElement {
     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 dimsSaid?: { key: string; dims: [number, number, number] | undefined }
-  private dimsOf(asset: FigureAsset): [number, number, number] | undefined {
-    const view = this.session?.read()
-    const key = `${view?.context}|${view?.revision}|${this.selected}`
-    if (this.dimsSaid?.key === key) return this.dimsSaid.dims
-    let dims: [number, number, number] | undefined
-    try {
-      dims = boxOf(asset, this.selected, this.currentInputs())?.dims
-    } catch {
-      dims = undefined
-    }
-    this.dimsSaid = { key, dims }
-    return dims
-  }
   private previewWordsSaid?: { preview: unknown; part: string; language: string; words: string[] }
   private previewWordsNow(): string[] {
     const preview = this.currentPreview()
@@ -1155,24 +1128,18 @@ export class FigureEditor extends LitElement {
     return words
   }
   private renderLinks(unavailable: boolean, section: 'shape' | 'places' | 'motion') {
-    let asset
-    try {
-      asset = this.plainAsset()
-    } catch {
-      return null
-    }
-    const dims = this.dimsOf(asset)
+    const shown = this.shown()
+    if (!shown) return null
     return html`<figure-links
-      .asset=${asset}
+      .revision=${shown}
       .section=${section}
       .partId=${this.selected}
-      .dims=${dims}
       ?locked=${unavailable}
       @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
       .previewWords=${this.previewWordsNow()}
-      .detachWords=${this.detachWords(asset as FigureAsset | undefined)}
-      .overhangWords=${section === 'shape' ? this.overhangWords(asset as FigureAsset | undefined) : NO_WORDS}
-      .overhangNote=${section === 'shape' ? this.overhangNote(asset as FigureAsset | undefined) : NO_WORDS}
+      .detachWords=${this.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)}
@@ -1199,12 +1166,8 @@ export class FigureEditor extends LitElement {
   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
-    try {
-      asset = this.plainAsset()
-    } catch {
-      return null
-    }
+    const asset = this.shown()?.asset
+    if (!asset) return null
     const values = Object.fromEntries(view.fields.filter(f => f.role === 'state').map(f => [f.id, f.value]))
     return html`<figure-controls
       .asset=${asset}
@@ -1286,7 +1249,7 @@ export class FigureEditor extends LitElement {
     /* 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 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(this.parsedAsset(), part, [change]) : [change]))
+    this.run(() => this.session!.apply(field.role !== 'state' && part ? figureSizeEditChanges(this.shown()!.asset, 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)
   }
@@ -1331,14 +1294,12 @@ export class FigureEditor extends LitElement {
     label.addEventListener('pointerup', up)
     label.addEventListener('pointercancel', up)
   }
-  /** The measured range, kept for the revision it was measured at: measuring evaluates the figure at its edges. */
-  private range?: { at: string; of: ReturnType<typeof instanceRangeOf>; toDeclare?: ReturnType<typeof instanceRangeToDeclare> }
   /** The sizes a board may give the figure, and the way to measure them again after its parts changed. */
-  private renderInstanceRange(asset: FigureAsset | undefined, unavailable: boolean) {
-    if (!asset) return nothing
-    /* Another figure, or another step of this one, is measured again. */
-    const at = `${this.session?.read().context ?? ''}:${this.revision}`
-    if (this.range?.at !== at) {
+  private renderInstanceRange(shown: FigureRevision | undefined, unavailable: boolean) {
+    if (!shown) return nothing
+    const asset = shown.asset
+    /* Measured once per version: measuring evaluates the figure at its edges. */
+    const measured = derivedOf(shown, 'instance-range', () => {
       let of: ReturnType<typeof instanceRangeOf>
       let toDeclare: ReturnType<typeof instanceRangeToDeclare>
       try {
@@ -1351,11 +1312,11 @@ export class FigureEditor extends LitElement {
       } catch {
         toDeclare = undefined
       }
-      this.range = { at, of, toDeclare }
-    }
-    const range = this.range.of
+      return { of, toDeclare }
+    })
+    const range = measured.of
     /* No size yet: the figure is declared its size from its parts, so a board can resize it and parts can follow it. */
-    const toDeclare = this.range.toDeclare
+    const toDeclare = measured.toDeclare
     if (!range && toDeclare)
       return html`<section>
         <h3>${i18next.t('figure.label.instance-range')}</h3>
@@ -1472,9 +1433,10 @@ export class FigureEditor extends LitElement {
    * The pitch of a row that fills its length is edited as a number (`set-repeat` makes it the part's own the first
    * time); a row of a fixed count says its pitch cannot be set yet (figure-model refuses it the same way).
    */
-  private renderRepeat(asset: FigureAsset | undefined, geometry: readonly { id: string }[], unavailable: boolean) {
+  private renderRepeat(shown: FigureRevision | undefined, geometry: readonly { id: string }[], unavailable: boolean) {
     const repeat = repeatOf(this.selected, geometry)
-    if (!asset || !repeat || repeat.index) return nothing
+    const asset = shown?.asset
+    if (!shown || !asset || !repeat || repeat.index) return nothing
     /* The row is set on its part; what hangs from that part is copied with it and has no row of its own. */
     if (!asset.document.model.nodes.some(n => n.id === `${this.selected}.repeat`)) return nothing
     const model = asset.document.model as unknown as {
@@ -1486,7 +1448,7 @@ export class FigureEditor extends LitElement {
     const axis = model.nodes.find(n => n.id === `${this.selected}.repeat`)?.params?.axis ?? '?'
     const own = `${this.selected}.repeat.pitch`
     /* The pitch as it stands: the part's own number, a constant, or what a pitch that follows a length comes to. */
-    const pitch = asset.designInputs[own] ?? model.constants.find(c => c.id === layout?.args[4])?.value ?? valueNow(asset, layout?.args[4])
+    const pitch = asset.designInputs[own] ?? model.constants.find(c => c.id === layout?.args[4])?.value ?? valueNow(shown, layout?.args[4])
     const fits = layout?.op === 'fit-pitch@1'
     /* What the pitch gives, in numbers: this many copies at the length it is authored, and how long it may be placed. */
     const lengthRef = layout?.args[0] ?? ''
@@ -1509,7 +1471,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>
+      <ul row-reading>${rowWordsOf(this.rowNow(shown), (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', {
@@ -1529,12 +1491,14 @@ export class FigureEditor extends LitElement {
     </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
-    }
+  private rowNow(shown: FigureRevision): FigureRowReading | undefined {
+    return derivedOf(shown, `row|${this.selected}`, () => {
+      try {
+        return figureRowOf(shown.asset, this.selected, shown.inputs)
+      } 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 {
@@ -1620,7 +1584,7 @@ export class FigureEditor extends LitElement {
     const pitch = input.valueAsNumber
     if (!Number.isFinite(pitch) || pitch === field.value) return
     /* Read from a design input the board may set: the input's value changes, the row keeps reading it (ADR-0096). */
-    const from = this.pitchInputOf(this.plainAsset() as FigureAsset, this.selected)
+    const from = this.pitchInputOf(this.shown()!.asset, this.selected)
     if (from) {
       this.run(() => this.session!.apply([{ kind: 'set-design', input: from, unit: 'mm', value: pitch }]))
       input.value = String(this.session!.read().fields.find(i => i.id === from)?.value ?? field.value)
@@ -1686,13 +1650,14 @@ export class FigureEditor extends LitElement {
       let face: FigureFaceArea | undefined
       if (candidate.face) {
         try {
-          face = figurePartFaceOf(this.parsedAsset(), candidate.face.part, candidate.face.face, this.currentInputs())
+          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.currentInputs()) : undefined
+      const row = candidate.action.kind === 'make-repeat' ? figureRowOf(seen.asset, this.selected, this.shown()!.inputs) : undefined
       this.preview = {
         ...held,
         context: seen.context,
@@ -1723,104 +1688,91 @@ export class FigureEditor extends LitElement {
     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 detachTimer?: ReturnType<typeof setTimeout>
-  private detachAsked?: string
+  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(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 NO_WORDS
-    const key = `${view.context}|${view.revision}|${this.selected}`
-    if (this.detachSaid?.key === key) return this.detachSaid.words
-    if (this.detachAsked !== key) {
-      this.detachAsked = key
+  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(() => {
-        const now = this.session?.read()
-        if (!now || `${now.context}|${now.revision}|${this.selected}` !== key) return
-        this.computeDetachWords(asset, key)
+        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(asset: FigureAsset, key: string): string[] {
+  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: this.selected })
-      const own = seen.moves.some(m => m.body === this.selected)
+      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, moves: seen.moves }, this.selected, say)]
+        ? [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 = (asset.joints ?? []).filter(j => 'part' in j.body0 && j.body0.part === this.selected).map(j => partLabelOf(j.body1.part))
+      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) })]
     }
-    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.
+    to it -- said apart from the room, nothing moved. Read once per version, part and language. The note says it is wider
+    than its face: a fact of the relation, said in its details, not as a warning (designer 2026-09-27).
   */
-  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 NO_WORDS
-    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(', ') }))
+  private overhangOf(shown: FigureRevision): { words: string[]; note: string[] } {
+    const part = this.selected
+    if (!part) return NO_OVERHANG
+    return derivedOf(shown, `overhang|${part}|${i18next.language}`, () => {
+      const asset = shown.asset
+      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 own = figureFaceOverhangOf(asset, part, shown.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 === part).map(j => figureFaceOverhangOf(asset, j.body1.part, shown.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. */
       }
-      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
+      return { words, note }
+    })
   }
-  /** 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 }
+  /** The selected part's motion at both ends of its range, made once per version and part. */
   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
+    const shown = this.shown()
+    const part = this.selected
+    if (!shown || !part) return null
+    return derivedOf(shown, `motion-ends|${part}`, () => {
       try {
-        ends = motionEndsOf(this.parsedAsset(), this.selected, this.currentInputs())
+        return motionEndsOf(shown, part)
       } catch {
-        ends = null
+        return 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() {
@@ -1853,50 +1805,8 @@ export class FigureEditor extends LitElement {
     this.faceMapping = undefined
     if (id && (this.tab === 'verdict' || this.tab === 'view' || this.tab === 'history')) this.tab = 'properties'
   }
-  /**
-   * The figure as the session holds it now, parsed once per text: a render asks for it a dozen times, and parsing the whole
-   * figure is most of what a selection costs. Read, never changed -- what changes a figure goes through the session.
-   */
-  /**
-   * The session has evaluated this figure at this version, with these inputs: the screen's questions of the text it just
-   * parsed are answered from that, not by evaluating the figure again (each is tens of milliseconds on a real figure).
-   */
-  private seeded(asset: FigureAsset): FigureAsset {
-    const view = this.session?.read()
-    if (view?.geometry.length) {
-      const values = this.currentInputs()
-      seedEvaluatedGeometry(asset, values, view.geometry as never)
-      seedFigureEvaluation(asset, values, view.geometry)
-    }
-    return asset
-  }
-  private parsed?: { text: string; asset: FigureAsset }
-  private parsedAsset(): FigureAsset {
-    const text = this.session!.source()
-    if (this.parsed?.text !== text) {
-      /* The session's text is what its workspace exported, compiled then: it is read here, not compiled again. */
-      const plain = this.plainAsset()
-      const upgraded = upgradeFigurePlacement(plain)
-      this.parsed = { text, asset: upgraded === plain ? plain : this.seeded(deepFreeze(upgraded)) }
-    }
-    return this.parsed.asset
-  }
-  private plain?: { text: string; asset: FigureAsset }
-  /**
-   * The figure as plain data, parsed once per text and frozen: the render, the gizmo's reach and every tool read it, and
-   * a copy for each of them cost more than the selection they serve. A change goes through the session, never through this.
-   */
-  private plainAsset(): FigureAsset {
-    const text = this.session!.source()
-    if (this.plain?.text !== text) this.plain = { text, asset: this.seeded(deepFreeze(JSON.parse(text))) }
-    return this.plain.asset
-  }
-  private asset(): unknown {
-    try {
-      return this.plainAsset()
-    } catch {
-      return undefined
-    }
+  private asset(): FigureAsset | undefined {
+    return this.shown()?.asset
   }
   /** 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) {
@@ -1963,25 +1873,26 @@ export class FigureEditor extends LitElement {
    * Why a drawn push's end cannot be drawn to one point now: the kernel's own refusal of that command on a copy (what is
    * fastened to the end face), said as the face. Asked once per figure revision and part.
    */
-  private pointBlocked?: { key: string; words: string }
   private pointBlockedOf(drawn: NonNullable<ReturnType<typeof drawnOf>>): string {
-    if (drawn.apex || drawn.section.kind !== 'polygon' || !this.session) return ''
-    const key = `${this.session.read().revision}|${this.selected}`
-    if (this.pointBlocked?.key === key) return this.pointBlocked.words
-    let words = ''
-    try {
-      this.session.previewCommand({ kind: 'set-section', part: this.selected!, apex: apexOver(drawn.section.points, drawn.axis) })
-    } catch (error) {
-      if ((error as { code?: string }).code === 'FEATURE_MAPPING_REQUIRED')
-        words = i18next.t('figure.text.section-editor-apex-blocked', { face: i18next.t('figure.label.face-' + END_FACE(drawn.axis, 'end')) })
-    }
-    this.pointBlocked = { key, words }
-    return words
+    const shown = this.shown()
+    const session = this.session
+    if (drawn.apex || drawn.section.kind !== 'polygon' || !session || !shown) return ''
+    const part = this.selected
+    const apex = apexOver(drawn.section.points, drawn.axis)
+    return derivedOf(shown, `point-blocked|${part}|${i18next.language}`, () => {
+      try {
+        session.previewCommand({ kind: 'set-section', part, apex })
+      } catch (error) {
+        if ((error as { code?: string }).code === 'FEATURE_MAPPING_REQUIRED')
+          return i18next.t('figure.text.section-editor-apex-blocked', { face: i18next.t('figure.label.face-' + END_FACE(drawn.axis, 'end')) })
+      }
+      return ''
+    })
   }
   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
+    const placement = ((this.asset())?.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>
@@ -2028,7 +1939,7 @@ export class FigureEditor extends LitElement {
     let summary: { kind: string; size: string } | undefined
     try {
       summary = this.selected
-        ? partSummaryOf(this.parsedAsset(), ownerOf(this.selected), (key, params) => i18next.t(key, params), i18next.language || 'ko')
+        ? partSummaryOf(this.shown()!.asset, ownerOf(this.selected), (key, params) => i18next.t(key, params), i18next.language || 'ko')
         : undefined
     } catch {
       summary = undefined
@@ -2063,9 +1974,11 @@ export class FigureEditor extends LitElement {
       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).
     */
+    const shown = this.shown()
+    const asset = shown?.asset
     let roomOnly: string[] = []
     try {
-      roomOnly = this.selected ? figureRoomOnlyInputsOf(this.parsedAsset(), this.selected) : []
+      roomOnly = this.selected && asset ? figureRoomOnlyInputsOf(asset, this.selected) : []
     } catch {
       roomOnly = []
     }
@@ -2075,14 +1988,13 @@ export class FigureEditor extends LitElement {
     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 ? this.parsedAsset() : undefined
-      if (placed && parsed)
+      if (placed && shown && this.selected)
         held = {
           position: placed.position,
           rotation: placed.rotation,
-          size: (['x', 'y', 'z'] as const).map(axis => measureNow(parsed, ownerOf(this.selected), axis)),
+          size: (['x', 'y', 'z'] as const).map(axis => measureNow(shown, 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')
+          sizeRuled: (['x', 'y', 'z'] as const).every(axis => followOf(shown.asset, ownerOf(this.selected), axis).of !== 'own')
         }
     } catch {
       held = undefined
@@ -2095,8 +2007,8 @@ export class FigureEditor extends LitElement {
         : view.dirty || !view.id
           ? 'figure.text.unsaved-changes'
           : 'figure.text.saved'
-    const asset = this.asset()
     const tab = this.tab
+    const live = this.liveParts(shown)
     return html`<ox-canvas-bar
         history
         fit
@@ -2137,8 +2049,8 @@ export class FigureEditor extends LitElement {
           slot="start"
           .budget=${this.budget}
           @show-maturity=${() => (this.tab = 'verdict')}
-          .parts=${this.partRows(view.geometry, asset as FigureAsset | undefined)}
-          .partBudget=${this.partBudgetOf(asset as FigureAsset | undefined)}
+          .parts=${this.partRows(view.geometry, asset)}
+          .partBudget=${this.partBudgetOf(asset)}
           @set-detail-level=${(e: CustomEvent) => this.linkCommand({ kind: 'set-detail-level', level: e.detail.level })}
           .selected=${this.selected}
           .modelName=${view.name ?? ''}
@@ -2160,7 +2072,7 @@ export class FigureEditor extends LitElement {
           ? html`<figure-preview
               ?hidden=${this.middle !== 'preview'}
               .active=${this.middle === 'preview'}
-              .asset=${asset}
+              .revision=${shown}
               .context=${view.context ?? ''}
               .view=${this.view}
               .selected=${this.selected}
@@ -2179,9 +2091,9 @@ export class FigureEditor extends LitElement {
           ${this.sectionEditing && this.sectionEditing === this.selected && !unavailable ? this.renderSectionEditor(view.geometry) : nothing}
           <figure-canvas
           .view=${this.view}
-          .parts=${this.drawnParts(view.geometry, asset)}
-          .anchors=${this.anchorsOf(asset as FigureAsset | undefined)}
-          .fan=${this.fanOf(asset as FigureAsset | undefined)}
+          .parts=${this.drawnParts(view.geometry, live)}
+          .anchors=${this.anchorsOf(asset)}
+          .fan=${this.fanOf(shown, live)}
           .ghost=${this.previewShown().ghost}
           .highlight=${this.previewShown().highlight}
           .palette=${view.palette ?? {}}
@@ -2221,7 +2133,7 @@ export class FigureEditor extends LitElement {
                     </div>
                     ${this.renderRepeatNote(view.geometry)}
                   </section>
-                  ${this.renderRepeat(asset as FigureAsset | undefined, view.geometry, unavailable)}
+                  ${this.renderRepeat(shown, view.geometry, 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')}
@@ -2252,7 +2164,7 @@ export class FigureEditor extends LitElement {
                   </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)}`}
+                  ${this.renderInstanceRange(shown, unavailable)}`}
           </div>
           <div panel ?off=${tab !== 'capability'}>
             ${this.renderSubject()}
@@ -2354,7 +2266,7 @@ export class FigureEditor extends LitElement {
    * something else. A size that follows something is said at the panel's head, so not again here.
    */
   private renderHeldAxes(vectors: FieldGroup[]) {
-    const fastened = !!(this.asset() as FigureAsset | undefined)?.joints?.some(j => j.body1.part === ownerOf(this.selected))
+    const fastened = !!(this.asset())?.joints?.some(j => j.body1.part === ownerOf(this.selected))
     const held = vectors.filter(g => g.kind === 'vector' && g.name !== 'size' && (['x', 'y', 'z'] as const).some(axis => !g.cells[axis]))
     if (!held.length) return nothing
     const placed = held.every(g => g.name === 'position' || g.name === 'rotation')
@@ -2381,7 +2293,7 @@ export class FigureEditor extends LitElement {
   private async askRoomRefit() {
     let refit
     try {
-      refit = figureRoomRefitOf(this.parsedAsset())
+      refit = figureRoomRefitOf(this.shown()!.asset)
     } catch (error) {
       this.error = this.said(error)
       return