@things-factory/figure-ui 10.1.91 → 10.1.93

package/client/modeller/editor.ts

@@ -305,7 +305,7 @@ export class FigureEditor extends LitElement {
     [off] {
       display: none !important;
     }
-    /* Which part the panel speaks of, and the way back to the whole figure. */
+    /* Which part the panel speaks of. */
     div[subject] {
       position: sticky;
       top: 0;
@@ -316,41 +316,6 @@ export class FigureEditor extends LitElement {
       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;
-      min-width: 0;
-    }
-    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;
@@ -651,7 +616,26 @@ export class FigureEditor extends LitElement {
      * The section editor is of one part: when the selection moves off it by any way -- another part picked, the scene's
      * own Esc, the part removed, another figure opened -- it closes and lets go of the preview it held.
      */
-    if (this.sectionEditing && this.sectionEditing !== this.selected) this.closeSectionEditor()
+    if (this.sectionEditing && this.sectionEditing !== this.selected) this.leaveSectionEditor(this.selected)
+  }
+  /**
+   * The selection moved off the part being edited. With nothing changed there the editor closes; with changes, the part
+   * stays selected while the editor asks (apply, let go, keep editing), and the move goes on only once it closed. A part
+   * gone or another figure opened has nothing to go back to: the editor closes.
+   */
+  private leaveSectionEditor(next: string) {
+    const editing = this.sectionEditing!
+    const editor = this.renderRoot.querySelector('figure-section-editor') as (HTMLElement & { dirty: boolean; requestClose(): Promise<boolean> }) | null
+    const view = this.session?.read()
+    const stillThere = !!view?.geometry.some(g => ownerOf(g.id) === editing)
+    if (!editor?.dirty || !stillThere) {
+      this.closeSectionEditor()
+      return
+    }
+    this.selected = editing
+    editor.requestClose().then(closed => {
+      if (closed && this.selected === editing) this.selected = next
+    })
   }
   /** The scene toggles: the mode already shown takes the gizmo away. */
   private useGizmo(mode: 'translate' | 'rotate' | 'scale') {
@@ -1003,14 +987,11 @@ export class FigureEditor extends LitElement {
   }
   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>`
+    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 = parseFigureAsset(this.session!.source())
@@ -1031,27 +1012,33 @@ export class FigureEditor extends LitElement {
     } catch {
       return null
     }
-    const tool = (name: AlignTool, icon: string, label: string, title: string) =>
-      html`<button ?disabled=${unavailable} aria-label=${i18next.t(label)} title=${i18next.t(title)} @click=${() => this.align(name)}>
-        <md-icon>${icon}</md-icon>
-      </button>`
-    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')}
-      ${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
-          ?disabled=${unavailable || !able}
-          aria-label=${i18next.t('figure.button.mirror-' + axis)}
-          title=${i18next.t(able ? 'figure.text.mirror-explained' : 'figure.text.mirror-would-overlap')}
-          @click=${() => this.mirror(axis)}
-        >
-          <md-icon>${axis === 'x' ? 'flip' : 'flip_camera_android'}</md-icon>
-        </button>`
-      })}
-      ${tool('snap', 'grid_on', 'figure.button.snap', 'figure.text.snap-explained')}
-    </div>`
+    /*
+     * 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) }))
+    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)}
+          ${tool('snap', 'figure.button.snap', 'figure.text.snap-explained')}
+        </div>
+      </div>
+      <div vector-row>
+        <label>${i18next.t('figure.label.mirror-copy')}</label>
+        <div tools>
+          ${mirrors.map(
+            ({ axis, able }) => html`<button ?disabled=${unavailable || !able} title=${i18next.t('figure.text.mirror-explained')} @click=${() => this.mirror(axis)}>
+              ${i18next.t('figure.button.mirror-' + axis)}
+            </button>`
+          )}
+        </div>
+      </div>
+      ${mirrors.every(m => !m.able) ? html`<p hint>${i18next.t('figure.text.mirror-would-overlap')}</p>` : nothing}`
   }
   /**
    * A part's name. It renames every value the part owns, and what refers to them follows
@@ -1872,36 +1859,27 @@ export class FigureEditor extends LitElement {
     </div>`
   }
   /**
-   * 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.
+   * The part the panel speaks of, held at its top: its kind, how its size answers, what holds it (designer 2026-09-27,
+   * B). No path above it (user 2026-10-01): the parts list and the canvas already show which part is chosen, and the
+   * list's root is the way back to the model's settings.
    */
   private renderSubject() {
-    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
     }
+    if (!summary) return nothing
     return html`<div subject>
-      <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 subject-summary>
+        ${summary.kind ? html`<b>${summary.kind}</b>` : nothing}
+        <small>${summary.size}</small><small>${summary.relation}</small>
+      </div>
     </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 model's settings, from the parts list's root (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() {
@@ -2144,7 +2122,7 @@ export class FigureEditor extends LitElement {
       ? html`<section>
           <h3>${i18next.t(vectorTitle)}</h3>
           ${groups.vectors.map(g => this.renderVector(g, unavailable, held))}
-          ${tools ? html`<div vector-row><label>${i18next.t('figure.label.tools')}</label>${tools}</div>` : nothing}
+          ${tools ?? nothing}
         </section>`
       : nothing}
     ${groups.singles.length
@@ -2255,14 +2233,7 @@ export class FigureEditor extends LitElement {
     if (agreed) this.linkCommand(refit.step)
   }
   private renderSingle(name: string, field: FieldLike, unavailable: boolean) {
-    /* A drawn section's point is called by its number and axis, as the section editor calls it (ADR-0100 §2.1, Q9). */
-    const point = /^point\.p(\d+)\.([xyz])$/.exec(name)
-    const apex = /^apex\.([xyz])$/.exec(name)
-    const words = point
-      ? [i18next.t('figure.label.section-editor-coordinate', { point: point[1]!, axis: point[2]!.toUpperCase() })]
-      : apex
-        ? [`${i18next.t('figure.label.section-editor-apex-mark')} ${apex[1]!.toUpperCase()}`]
-        : name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }))
+    const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }))
     return html`<span ?scrub=${!unavailable} @pointerdown=${(e: PointerEvent) => this.scrub(field as never, e, unavailable)}>${words.join(' · ')} (${field.unit})</span
       ><input
         aria-label=${field.id}

package/client/modeller/fasten-geometry.ts

@@ -0,0 +1,152 @@
+import { figurePartFaceOf } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureFace } from '@hatiolab/figure-model'
+
+import { boxOf } from './align.js'
+import { alignAxesOf, facesOf, faceAxisOf, hasInstanceSize, mountingPlaneOf, type Alignment } from './links.js'
+
+/*
+ * What the 붙이기 drawing reads (user 2026-10-01): the face a part is fastened to, seen from above, and where the part
+ * lies on it. A fastening is chosen by the target's face and how (올려놓기 · 같은 면에 맞추기 · 가운데를 면에); the part's
+ * own face follows from those -- the kernel takes no other pairing (figure-model `attach`: meet is the facing face,
+ * flush the same one, a face along another axis would need a turn).
+ */
+
+type Axis = 'x' | 'y' | 'z'
+const AXES: Axis[] = ['x', 'y', 'z']
+export type FastenMode = 'meet' | 'flush' | 'centre'
+export type FastenTarget = { part: string; face: string } | 'plane'
+
+const OPPOSITE: Record<FigureFace, FigureFace> = { left: 'right', right: 'left', bottom: 'top', top: 'bottom', back: 'front', front: 'back' }
+const NORMAL: Record<FigureFace, [Axis, 1 | -1]> = { left: ['x', -1], right: ['x', 1], bottom: ['y', -1], top: ['y', 1], back: ['z', -1], front: ['z', 1] }
+
+/** The world direction a part's face looks along now, turns and all; by its name when the face's outline is not read. */
+function directionOf(asset: FigureAsset, part: string, face: string): [Axis, 1 | -1] | undefined {
+  const area = (() => {
+    try {
+      return figurePartFaceOf(asset, part, face)
+    } catch {
+      return undefined
+    }
+  })()
+  if (area) {
+    const k = area.normal.findIndex(v => Math.abs(v) > 0.5)
+    if (k >= 0) return [AXES[k]!, area.normal[k]! > 0 ? 1 : -1]
+  }
+  return face in NORMAL ? NORMAL[face as FigureFace] : undefined
+}
+
+/**
+ * The part's own face a fastening takes: the one looking against the target's face (올려놓기), with it (같은 면), or its
+ * centre. Read from where each face looks now, so a part standing turned offers the face that is really there.
+ * Undefined when the part has no such face.
+ */
+export function myFaceFor(asset: FigureAsset, part: string, target: FastenTarget, mode: FastenMode): FigureFace | 'centre' | undefined {
+  if (mode === 'centre') return target === 'plane' ? undefined : 'centre'
+  const want: [Axis, 1 | -1] | undefined =
+    target === 'plane'
+      ? /* The plane is met from above on a floor, from in front on a wall. */ [mountingPlaneOf(asset).normal, -1]
+      : (() => {
+          const d = directionOf(asset, target.part, target.face)
+          return d && [d[0], (mode === 'meet' ? -d[1] : d[1]) as 1 | -1]
+        })()
+  if (!want) return undefined
+  const mine = facesOf(asset, part).filter((f): f is FigureFace => f in NORMAL)
+  const hit = mine.find(f => {
+    const d = directionOf(asset, part, f)
+    return d && d[0] === want[0] && d[1] === want[1]
+  })
+  return hit ?? (target !== 'plane' && mode === 'meet' && target.face in OPPOSITE ? OPPOSITE[target.face as FigureFace] : undefined)
+}
+
+/** Which way the fastening is, read back from the part's face and facing. */
+export const modeOf = (face: string, facing: 'meet' | 'flush'): FastenMode => (face === 'centre' ? 'centre' : facing)
+
+/**
+ * The face seen from above: its two axes across (as the form's alignment names them), the face's size on each -- none
+ * for a plane with no declared size -- the part's footprint on each, and whether its edges can be lined up with.
+ */
+export interface FaceView {
+  axes: [Axis, Axis]
+  face: Partial<Record<Axis, number>>
+  part: Record<Axis, number>
+  edges: Record<Axis, boolean>
+}
+
+export function faceViewOf(asset: FigureAsset, part: string, target: FastenTarget): FaceView | undefined {
+  const across = alignAxesOf(asset, part, target)
+  if (across.length !== 2) return undefined
+  const box = boxOf(asset, part)
+  if (!box) return undefined
+  const axes = [across[0]!.axis, across[1]!.axis] as [Axis, Axis]
+  const face: Partial<Record<Axis, number>> = {}
+  if (target === 'plane') {
+    for (const a of axes) if (hasInstanceSize(asset, a)) face[a] = asset.designInputs[`size.${a}`]!
+  } else {
+    const theirs = boxOf(asset, target.part)
+    const normal = faceAxisOf(asset, target.part, target.face)
+    for (const a of axes) if (theirs && a !== normal) face[a] = theirs.extent[a]
+  }
+  return {
+    axes,
+    face,
+    part: { x: box.extent.x, y: box.extent.y, z: box.extent.z },
+    edges: Object.fromEntries(across.map(o => [o.axis, o.edges])) as Record<Axis, boolean>
+  }
+}
+
+/** Where the part's centre is from the face's centre along one axis, for the way it is aligned there. */
+export function offsetOf(how: Alignment | undefined, mm: number | undefined, face: number | undefined, part: number): number {
+  if (how === 'min' && face !== undefined) return -(face - part) / 2
+  if (how === 'max' && face !== undefined) return (face - part) / 2
+  if (how === 'mm' || how === 'share') return mm ?? 0
+  return 0
+}
+
+/**
+ * A place dropped on the face, as the form's alignment: caught at the centre, at an edge from inside (level with it:
+ * `min` / `max`, where the edges can be lined up with), or at an edge from outside (touching it, as a distance), when
+ * within `catchMm`; anywhere else a distance off centre, whole millimetres.
+ */
+export function alignmentAt(d: number, face: number | undefined, part: number, edges: boolean, catchMm: number): { how: Alignment; mm?: number; caught?: 'centre' | 'inside' | 'outside' } {
+  if (Math.abs(d) <= catchMm) return { how: 'centre', caught: 'centre' }
+  if (face !== undefined) {
+    const inside = (face - part) / 2,
+      outside = (face + part) / 2
+    for (const [at, how] of [
+      [-inside, 'min'],
+      [inside, 'max']
+    ] as const)
+      if (Math.abs(d - at) <= catchMm && inside > 0) return edges ? { how, caught: 'inside' } : { how: 'mm', mm: Math.round(at), caught: 'inside' }
+    for (const at of [-outside, outside]) if (Math.abs(d - at) <= catchMm) return { how: 'mm', mm: Math.round(at), caught: 'outside' }
+  }
+  return { how: 'mm', mm: Math.round(d) }
+}
+
+/** How far the footprint comes past the face's edges, per side, and whether it touches the face at all. */
+export function overhangOf(view: FaceView, at: Record<Axis, number>): { touching: boolean; sides: Array<{ axis: Axis; side: 'low' | 'high'; mm: number }> } {
+  const sides: Array<{ axis: Axis; side: 'low' | 'high'; mm: number }> = []
+  let touching = true
+  for (const a of view.axes) {
+    const face = view.face[a]
+    if (face === undefined) continue
+    const lo = at[a] - view.part[a] / 2,
+      hi = at[a] + view.part[a] / 2
+    if (lo >= face / 2 || hi <= -face / 2) touching = false
+    if (-face / 2 - lo > 0.5) sides.push({ axis: a, side: 'low', mm: Math.round(-face / 2 - lo) })
+    if (hi - face / 2 > 0.5) sides.push({ axis: a, side: 'high', mm: Math.round(hi - face / 2) })
+  }
+  return { touching, sides }
+}
+
+/** Whether the part turns about a joint: then 가운데를 면에 is offered -- a roller spinning in place. */
+export const turnsInPlace = (asset: FigureAsset, part: string) => (asset.joints ?? []).some(j => j.body1.part === part && (j.type === 'revolute' || j.body1.face === 'centre'))
+
+/**
+ * How the face lies on the screen: X across when it is one of the face's axes, else Z; the other down the screen -- up
+ * for Y, which rises, so a front face is seen as it stands and not upside down.
+ */
+export function screenOf(axes: readonly [Axis, Axis]): { h: Axis; v: Axis; sign: Record<Axis, 1 | -1> } {
+  const h = axes.includes('x') ? 'x' : 'z'
+  const v = axes.find(a => a !== h)!
+  return { h, v, sign: { x: 1, y: 1, z: 1, [v]: v === 'y' ? -1 : 1 } as Record<Axis, 1 | -1> }
+}

package/client/modeller/fields.ts

@@ -46,7 +46,14 @@ export function groupFields(fields: readonly FieldLike[], part?: string): { vect
     AXES.forEach((axis, i) => byId.has(ids[i]!) && (cells[axis] = byId.get(ids[i]!)!))
     vectors.push({ kind: 'vector', name, cells })
   }
-  const singles: FieldGroup[] = own.filter(f => !used.has(f.id)).map(field => ({ kind: 'single', name: nameOf(field.id.slice(prefix.length)), field }))
+  /*
+    A drawn section's points and a pyramid's apex are edited in the section editor, where a move is checked as it is made
+    and the points stand in the outline's order (user 2026-10-01): not here, one field each, in the order they were made.
+  */
+  const drawn = (id: string) => /^(point\.[^.]+|apex)\.[xyz]$/.test(id.slice(prefix.length))
+  const singles: FieldGroup[] = own
+    .filter(f => !used.has(f.id) && !drawn(f.id))
+    .map(field => ({ kind: 'single', name: nameOf(field.id.slice(prefix.length)), field }))
   return { vectors, singles }
 }
 

package/client/modeller/figure-cavity-drawing.ts

@@ -0,0 +1,259 @@
+import { css, html, LitElement, nothing, svg } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { figureCavitySectionOf } from '@hatiolab/figure-model'
+import type { FigureAuthoringAction, FigureCavityRequest, FigureEvaluatedShape, FigureSection } from '@hatiolab/figure-model'
+import { cavityRefusalOf, cavityWorkingOf, END_FACE, endToggled, mm, SIDE_FACE, wallDragged } from './section-controls.js'
+
+type Axis = 'x' | 'y' | 'z'
+type End = 'start' | 'end'
+type Body = { id: string; shape: FigureEvaluatedShape }
+
+/** How the section is laid on the screen, by the axis it is pushed along: across to the right, then down. */
+const SCREEN: Record<Axis, [Axis, Axis]> = { y: ['x', 'z'], x: ['z', 'y'], z: ['x', 'y'] }
+
+/**
+ * 속 공간 그림 — the inside of a pushed part drawn, and edited by drawing (user 2026-10-01: 「이해와 편집이 직관적이지 않다」).
+ *
+ * Seen along the push, the section and its inside: a handle in the middle of each wall is dragged to its thickness,
+ * every wall together unless 면마다 벽 is on. Cut along the push, the walls and the two ends: an end pressed opens or
+ * closes it, a closed end's inner line is dragged to its thickness. While dragging, the figure behind shows what the
+ * inside makes (`command-live`); letting go sends one `set-cavity`. What the kernel would refuse is drawn in the error
+ * colour and said, by the kernel's own check, and is not sent.
+ */
+@customElement('figure-cavity-drawing')
+export class FigureCavityDrawing extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: grid;
+      gap: 6px;
+    }
+    svg {
+      width: 100%;
+      display: block;
+      touch-action: none;
+      user-select: none;
+    }
+    svg text {
+      font: inherit;
+    }
+    small[refusal] {
+      color: var(--md-sys-color-error);
+    }
+  `
+
+  @property({ attribute: false }) body?: Body
+  @property({ type: Boolean }) locked = false
+  /** Walls one per side: a handle moves its own wall only. */
+  @property({ type: Boolean }) perSide = false
+
+  /** What is being dragged, and the inside it makes; undefined when nothing is. */
+  @state() private working?: ReturnType<typeof cavityWorkingOf>
+  @state() private refusal = ''
+  private dragging: { kind: 'wall'; side: string } | { kind: 'end'; end: End } | null = null
+  private pressedAt = 0
+
+  private get now() {
+    return this.working ?? (this.body ? cavityWorkingOf(this.body.shape) : undefined)
+  }
+
+  private request(w: NonNullable<ReturnType<typeof cavityWorkingOf>>): FigureCavityRequest {
+    return { wall: { ...w.wall }, start: w.start, end: w.end }
+  }
+
+  private action(w: NonNullable<ReturnType<typeof cavityWorkingOf>>): FigureAuthoringAction {
+    return { kind: 'set-cavity', part: this.body!.id, cavity: this.request(w) }
+  }
+
+  private judge(w: NonNullable<ReturnType<typeof cavityWorkingOf>>): string {
+    const ask = cavityRefusalOf(this.body!.shape, this.request(w))
+    if (!ask) return ''
+    if (ask.code === 'wall-too-thick') return i18next.t('figure.text.section-wall-over', { max: String(ask.max) })
+    if (ask.code === 'ends-too-thick') return i18next.t('figure.text.section-ends-over', { max: String(ask.max) })
+    return i18next.t('figure.text.section-not-positive')
+  }
+
+  /** The working inside while dragging: drawn, judged, and previewed behind when the kernel would take it. */
+  private hold(w: NonNullable<ReturnType<typeof cavityWorkingOf>>) {
+    this.working = w
+    this.refusal = this.judge(w)
+    this.emit('command-live', this.refusal ? null : this.action(w))
+  }
+
+  private release() {
+    const w = this.working
+    this.dragging = null
+    this.working = undefined
+    if (!w) return
+    /* Refused: nothing is sent, and the reason stays said until the next drag -- letting go must not look like taking it. */
+    if (this.refusal) {
+      this.emit('command-live', null)
+      return
+    }
+    this.emit('command', this.action(w))
+  }
+
+  private emit(name: 'command' | 'command-live', action: FigureAuthoringAction | null) {
+    this.dispatchEvent(new CustomEvent(name, { detail: { action }, bubbles: true, composed: true }))
+  }
+
+  private point(ev: PointerEvent, el: SVGSVGElement) {
+    const pt = el.createSVGPoint()
+    pt.x = ev.clientX
+    pt.y = ev.clientY
+    return pt.matrixTransform(el.getScreenCTM()!.inverse())
+  }
+
+  render() {
+    const e = this.body?.shape.extrusion
+    const w = this.now
+    if (!e || !w || (e.section.kind !== 'rectangle' && e.section.kind !== 'ellipse')) return nothing
+    return html`${this.top(e, w)}${this.side(e, w)}
+      ${this.refusal ? html`<small refusal role="alert">${this.refusal}</small>` : nothing}`
+  }
+
+  /** Seen along the push: the section, its inside and a handle on each wall. */
+  private top(e: NonNullable<FigureEvaluatedShape['extrusion']>, w: NonNullable<ReturnType<typeof cavityWorkingOf>>) {
+    const [h, v] = SCREEN[e.axis]
+    const s = e.section
+    const across = (a: Axis) => (s.kind === 'rectangle' ? s.size[a]! : 2 * (s as { radius: Record<string, number> }).radius[a]!)
+    const W = 300,
+      H = 170,
+      pad = 26
+    const k = Math.min((W - 2 * pad) / across(h), (H - 2 * pad) / across(v))
+    const ox = W / 2,
+      oy = H / 2
+    const inside = figureCavitySectionOf(s as FigureSection, e.axis, w.wall)
+    const bad = !!this.refusal || !('section' in inside)
+    const shape = (sec: FigureSection, c: Partial<Record<Axis, number>>, attrs: string) => {
+      const cx = ox + (c[h] ?? 0) * k,
+        cy = oy + (c[v] ?? 0) * k
+      if (sec.kind === 'ellipse') return svg`<ellipse cx=${cx} cy=${cy} rx=${sec.radius[h]! * k} ry=${sec.radius[v]! * k} style=${attrs} />`
+      const r = sec as { size: Record<string, number>; corner?: Record<string, number> }
+      return svg`<rect x=${cx - (r.size[h]! * k) / 2} y=${cy - (r.size[v]! * k) / 2} width=${r.size[h]! * k} height=${r.size[v]! * k}
+        rx=${(r.corner?.[h] ?? 0) * k} ry=${(r.corner?.[v] ?? 0) * k} style=${attrs} />`
+    }
+    const half = { [h]: (across(h) * k) / 2, [v]: (across(v) * k) / 2 } as Record<Axis, number>
+    /* Each wall's handle sits on the inside's edge, half way along it; the value is the wall's own. */
+    const handles = [`${h}-`, `${h}+`, `${v}-`, `${v}+`].map(side => {
+      const a = side[0] as Axis,
+        low = side[1] === '-'
+      const edge = (low ? -1 : 1) * (half[a] - w.wall[side]! * k)
+      const x = a === h ? ox + edge : ox,
+        y = a === v ? oy + edge : oy
+      /* The number stands in the wall itself, half way through it; a wall too thin for it has it just outside. */
+      const band = w.wall[side]! * k
+      const mid = (low ? -1 : 1) * (half[a] - (band < 16 ? -9 : band / 2))
+      const tx = a === h ? ox + mid : x + 14,
+        ty = a === v ? oy + mid + 4 : y - 10
+      return svg`<g wall=${side} style=${`cursor:${a === h ? 'ew-resize' : 'ns-resize'}`}
+          @pointerdown=${(ev: PointerEvent) => this.grab(ev, { kind: 'wall', side })}>
+        <rect x=${x - 6} y=${y - 6} width="12" height="12" rx="2" style="fill:var(--md-sys-color-surface);stroke:var(--md-sys-color-primary);stroke-width:1.5" />
+        <text x=${tx} y=${ty} font-size="11" text-anchor=${a === h ? 'middle' : 'start'} style="fill:var(--md-sys-color-on-surface)">${mm(w.wall[side]!)}</text>
+        <title>${i18next.t('figure.label.face-' + SIDE_FACE[side])} ${i18next.t('figure.label.section-wall')}</title>
+      </g>`
+    })
+    return svg`<svg viewBox=${`0 0 ${W} ${H}`} role="img" aria-label=${i18next.t('figure.label.section-cavity-top')}
+        @pointermove=${(ev: PointerEvent) => this.drag(ev, e, k, ox, oy, half)}
+        @pointerup=${() => this.release()} @pointercancel=${() => this.release()}>
+      ${shape(s as FigureSection, {}, 'fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:1.5')}
+      ${'section' in inside
+        ? shape(inside.section, inside.centre, `fill:var(--md-sys-color-surface);stroke:${bad ? 'var(--md-sys-color-error)' : 'var(--md-sys-color-primary)'};stroke-width:1.2;stroke-dasharray:4 3`)
+        : nothing}
+      ${this.locked ? nothing : handles}
+    </svg>`
+  }
+
+  /** Cut along the push: the walls across the first plane axis, and the two ends -- pressed to open or close. */
+  private side(e: NonNullable<FigureEvaluatedShape['extrusion']>, w: NonNullable<ReturnType<typeof cavityWorkingOf>>) {
+    const [h] = SCREEN[e.axis]
+    const s = e.section
+    const width = s.kind === 'rectangle' ? s.size[h]! : 2 * (s as { radius: Record<string, number> }).radius[h]!
+    const length = e.end - e.start
+    const W = 300,
+      H = 170,
+      padX = 40,
+      padY = 26
+    const k = Math.min((W - 2 * padX) / width, (H - 2 * padY) / length)
+    const x0 = W / 2 - (width * k) / 2,
+      x1 = W / 2 + (width * k) / 2,
+      yTop = H / 2 - (length * k) / 2,
+      yBot = H / 2 + (length * k) / 2
+    const wl = w.wall[`${h}-`]! * k,
+      wr = w.wall[`${h}+`]! * k
+    const thick = (end: End) => (w[end] === 'open' ? 0 : (w[end] as { closed: number }).closed * k)
+    /* The push's start is drawn at the bottom: a tote stands on its floor. */
+    const floor = thick('start'),
+      lid = thick('end')
+    const fill = 'fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:1.2'
+    const endZone = (end: End, y: number, t: number) => {
+      const open = w[end] === 'open'
+      const words = open
+        ? i18next.t('figure.label.section-end-open')
+        : `${i18next.t('figure.label.section-end-closed')} ${mm((w[end] as { closed: number }).closed)}`
+      const label = `${i18next.t('figure.label.face-' + END_FACE(e.axis, end))}: ${words}`
+      const inner = end === 'start' ? y - t : y + t
+      return svg`<g end=${end} style=${`cursor:${open ? 'pointer' : 'ns-resize'}`}
+          @pointerdown=${(ev: PointerEvent) => this.grab(ev, { kind: 'end', end })}>
+        <rect x=${x0 + wl} y=${Math.min(y, inner) - 8} width=${x1 - x0 - wl - wr} height=${Math.abs(t) + 16} style="fill:transparent" />
+        ${open ? svg`<line x1=${x0 + wl} y1=${y} x2=${x1 - wr} y2=${y} style="stroke:var(--md-sys-color-outline);stroke-dasharray:3 3" />` : nothing}
+        <text x=${W / 2} y=${end === 'start' ? yBot + 16 : yTop - 8} font-size="11" text-anchor="middle" style="fill:var(--md-sys-color-primary)">${label}</text>
+        <title>${label}</title>
+      </g>`
+    }
+    return svg`<svg viewBox=${`0 0 ${W} ${H + 8}`} role="img" aria-label=${i18next.t('figure.label.section-cavity-side')}
+        @pointermove=${(ev: PointerEvent) => this.dragEnd(ev, k, yTop, yBot)}
+        @pointerup=${(ev: PointerEvent) => this.releaseEnd(ev)} @pointercancel=${() => this.release()}>
+      <rect x=${x0} y=${yTop} width=${wl} height=${yBot - yTop} style=${fill} />
+      <rect x=${x1 - wr} y=${yTop} width=${wr} height=${yBot - yTop} style=${fill} />
+      ${floor ? svg`<rect x=${x0 + wl} y=${yBot - floor} width=${x1 - x0 - wl - wr} height=${floor} style=${fill} />` : nothing}
+      ${lid ? svg`<rect x=${x0 + wl} y=${yTop} width=${x1 - x0 - wl - wr} height=${lid} style=${fill} />` : nothing}
+      ${this.locked ? nothing : [endZone('start', yBot, floor), endZone('end', yTop, lid)]}
+    </svg>`
+  }
+
+  private grab(ev: PointerEvent, what: NonNullable<FigureCavityDrawing['dragging']>) {
+    if (this.locked) return
+    ev.stopPropagation()
+    ;(ev.currentTarget as Element).closest('svg')!.setPointerCapture(ev.pointerId)
+    this.dragging = what
+    this.pressedAt = ev.clientY
+    this.refusal = ''
+  }
+
+  private drag(ev: PointerEvent, e: NonNullable<FigureEvaluatedShape['extrusion']>, k: number, ox: number, oy: number, half: Record<Axis, number>) {
+    const d = this.dragging
+    if (d?.kind !== 'wall') return
+    const [h] = SCREEN[e.axis]
+    const p = this.point(ev, ev.currentTarget as SVGSVGElement)
+    const a = d.side[0] as Axis,
+      low = d.side[1] === '-'
+    const at = a === h ? p.x - ox : p.y - oy
+    const value = (half[a] - (low ? -at : at)) / k
+    this.hold({ ...this.now!, wall: wallDragged(this.now!.wall, d.side, value, this.perSide) })
+  }
+
+  private dragEnd(ev: PointerEvent, k: number, yTop: number, yBot: number) {
+    const d = this.dragging
+    if (d?.kind !== 'end' || this.now![d.end] === 'open') return
+    if (Math.abs(ev.clientY - this.pressedAt) < 3 && !this.working) return
+    const p = this.point(ev, ev.currentTarget as SVGSVGElement)
+    const t = d.end === 'start' ? (yBot - p.y) / k : (p.y - yTop) / k
+    this.hold({ ...this.now!, [d.end]: { closed: Math.max(1, Math.round(t)) } })
+  }
+
+  /** A press on an end that did not move is a toggle; a drag was a thickness. */
+  private releaseEnd(ev: PointerEvent) {
+    const d = this.dragging
+    if (d?.kind === 'end' && !this.working && Math.abs(ev.clientY - this.pressedAt) < 3) {
+      this.dragging = null
+      const next = { ...this.now!, [d.end]: endToggled(this.body!.shape, this.now![d.end]) }
+      this.refusal = this.judge(next)
+      if (!this.refusal) this.emit('command', this.action(next))
+      return
+    }
+    this.release()
+  }
+}
+