@things-factory/figure-ui 10.1.105 → 10.1.106

package/client/modeller/canvas.ts

@@ -1,6 +1,5 @@
-import { LitElement, html, css, nothing, unsafeCSS, type PropertyValues } from 'lit'
+import { LitElement, html, css, unsafeCSS, type PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
-import { i18next } from '@operato/i18n'
 import { create, Model, niceGridStep } from '@hatiolab/things-scene'
 
 import type { GizmoReach } from './gizmo.js'
@@ -71,14 +70,6 @@ export class FigureCanvas extends LitElement {
       width: 100%;
       height: 100%;
     }
-    p {
-      position: absolute;
-      inset: 45% 1rem auto;
-      margin: 0;
-      text-align: center;
-      pointer-events: none;
-      color: #f4f4f4;
-    }
   `
   @property({ attribute: false }) parts: FigureRenderPart[] = []
   @property({ attribute: false }) palette: Record<string, string> = {}
@@ -96,8 +87,6 @@ export class FigureCanvas extends LitElement {
    * would reach the editor as an edit.
    */
   @property({ type: Boolean }) viewOnly = false
-  /** The editor shows a new figure's start card over the canvas: the canvas's own one-line hint gives way to it. */
-  @property({ type: Boolean }) startShown = false
   /** Where the selected part turns and how far (`joint-fan`): shown, never picked, never saved. */
   @property({ attribute: false }) fan: FigureRenderPart | null = null
   /**
@@ -117,7 +106,11 @@ export class FigureCanvas extends LitElement {
   private writing = false
 
   render() {
-    return html`<div stage></div>${this.parts.length || this.startShown ? nothing : html`<p>${i18next.t('figure.text.add-a-shape-to-start')}</p>`}`
+    /*
+     * No line of its own over an empty stage: a new figure's start card says how to begin, and an empty stage otherwise
+     * is one loading, or with every part hidden -- where 「도형을 추가해…」 flashed and said the wrong thing (2026-10-02).
+     */
+    return html`<div stage></div>`
   }
 
   firstUpdated() {

package/client/modeller/editor.ts

@@ -60,6 +60,17 @@ 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. */
 @customElement('figure-editor')
 export class FigureEditor extends LitElement {
@@ -506,6 +517,7 @@ export class FigureEditor extends LitElement {
     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
@@ -519,7 +531,7 @@ export class FigureEditor extends LitElement {
       if (!panes.foldStart && !this.keptOpenByAuthor) {
         panes.foldStart = true
         this.foldedForWidth = true
-        notify({ level: 'info', message: i18next.t('figure.text.parts-panel-folded-narrow') })
+        if (!foldSaid()) notify({ level: 'info', message: i18next.t('figure.text.parts-panel-folded-narrow') })
       }
     } else {
       if (this.foldedForWidth && panes.foldStart) panes.foldStart = false
@@ -2016,7 +2028,6 @@ export class FigureEditor extends LitElement {
           ${view.geometry.length === 0 && !unavailable ? this.renderStart() : nothing}
           ${this.sectionEditing && this.sectionEditing === this.selected && !unavailable ? this.renderSectionEditor(view.geometry) : nothing}
           <figure-canvas
-          ?startShown=${view.geometry.length === 0 && !unavailable}
           .view=${this.view}
           .parts=${this.drawnParts(view.geometry, asset)}
           .anchors=${this.anchorsOf(asset as FigureAsset | undefined)}

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

@@ -175,7 +175,8 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
     const W = 300,
       H = 170,
       pad = 26
-    const k = Math.min((W - 2 * pad) / across(h), (H - 2 * pad) / across(v))
+    /* Wider room left and right: a wall's number stands outside the section there. */
+    const k = Math.min((W - 2 * (pad + 10)) / across(h), (H - 2 * pad) / across(v))
     const ox = W / 2,
       oy = H / 2
     const inside = figureCavitySectionOf(s as FigureSection, e.axis, w.wall)
@@ -193,18 +194,23 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
     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
+      const sign = low ? -1 : 1
+      const edge = sign * (half[a] - w.wall[side]! * k)
+      /* The two handles across a narrow inside would stand on each other: then each steps aside, the low one first. */
+      const room = 2 * half[a] - (w.wall[`${a}-`]! + w.wall[`${a}+`]!) * k
+      const aside = room < 16 ? sign * 9 : 0
+      const x = a === h ? ox + edge : ox + aside,
+        y = a === v ? oy + edge : oy + aside
+      /*
+        The number stands just past the section's outer edge on its own side, so the opposite wall's never meets it
+        however thin the walls or shallow the section (2026-10-02: at 70 mm deep the two walls' numbers lay on each other).
+      */
+      const tx = a === h ? ox + sign * (half[a] + 5) : ox,
+        ty = a === v ? oy + sign * (half[a] + (low ? 5 : 13)) : oy + 4
       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 typed x=${tx} y=${ty} font-size="11" text-anchor=${a === h ? 'middle' : 'start'} style="fill:var(--md-sys-color-on-surface)"
+        <text typed x=${tx} y=${ty} font-size="11" text-anchor=${a === h ? (low ? 'end' : 'start') : 'middle'} style="fill:var(--md-sys-color-on-surface)"
           @pointerdown=${(ev: PointerEvent) => this.type(ev, { kind: 'wall', side }, 'top', w.wall[side]!)}>${mm(w.wall[side]!)}</text>
         <title>${i18next.t('figure.label.face-' + SIDE_FACE[side])} ${i18next.t('figure.label.section-wall')}</title>
       </g>`

package/client/modeller/figure-links.ts

@@ -121,6 +121,10 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     p[fasten-mode] { margin: 0; font-weight: 600; }
     section[fastening][spotlit] { outline: 2px solid var(--md-sys-color-primary, #477b9e); outline-offset: 4px; border-radius: 6px; transition: outline-color 0.3s; }
     details { margin-top: 8px; }
+    details[row-fold] { margin: 0; }
+    details[row-fold] > summary { padding: 0; color: var(--md-sys-color-on-surface); }
+    details[row-fold] > summary h3 { margin: 0; }
+    details[row-fold][open] > summary { margin-bottom: 8px; }
     /* What the command would do, said beside the result drawn on the canvas. */
     ul[preview-words] { margin: 8px 0; padding: 8px 12px 8px 26px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); display: grid; gap: 4px; }
     p[preview-words] { margin: 8px 0; padding: 8px 12px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); }
@@ -399,15 +403,14 @@ export class FigureLinks extends localize(i18next)(LitElement) {
    * attached" while it was selected, so the form still held what it had before (designer 2026-09-27: it opened the
    * holding places instead).
    */
-  /** The fastening's details open, focus in them: where the gap and the place across the face are changed. */
-  private async openDetail() {
-    const detail = this.renderRoot.querySelector<HTMLDetailsElement>('details[fasten-detail]')
-    if (!detail) return
-    detail.open = true
+  /** The face the part sits on, in view with the focus on it: where the place across the face is dragged or keyed. */
+  private async showWhere() {
     this.working = 'fasten'
     await this.updateComplete
-    detail.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
-    detail.querySelector<HTMLElement>('select, input')?.focus({ preventScroll: true })
+    const where = this.renderRoot.querySelector('figure-fasten-drawing')?.shadowRoot?.querySelector<HTMLElement>('div[where]')
+    if (!where) return
+    where.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+    where.focus({ preventScroll: true })
   }
 
   /** The fastening form, open on this part and in view: for "fasten it first" from elsewhere. */
@@ -555,19 +558,22 @@ export class FigureLinks extends localize(i18next)(LitElement) {
           } as FigureAuthoringAction)
         : undefined
     if (action) this.fastenCandidate = { action, ...(f.toPlane ? {} : { face: { part: f.target, face: targetFace } }) }
-    /* What the details hold that is not their default, and where on the face it sits: said while they are folded. */
+    /*
+      What the folded details hold that is not their default, said while folded; the way and the place on the face are
+      the drawing's, and said there (user 2026-10-02: the details had selects repeating the drawing). Nothing is said
+      for the default.
+    */
     const detail = [
-      ...(f.facing === 'flush' && !f.toPlane ? [i18next.t('figure.label.facing-flush')] : []),
-      ...Object.entries(align ?? {}).map(([axis, one]) =>
-        one === 'min' || one === 'max'
-          ? i18next.t(`figure.text.fasten-summary-edge-${one}`, { axis: axis.toUpperCase() })
-          : typeof one.mm === 'number'
-            ? i18next.t('figure.text.fasten-summary-off-centre', { axis: axis.toUpperCase(), mm: String(Math.round(one.mm * 10) / 10) })
-            : i18next.t('figure.text.fasten-summary-follows', { axis: axis.toUpperCase() })
-      ),
       ...(f.gap ? [i18next.t('figure.text.fasten-summary-gap', { mm: String(f.gap) })] : []),
       ...(f.twist ? [i18next.t('figure.text.fasten-summary-twist', { degrees: String(f.twist) })] : [])
     ]
+    /* Across the face, a row only where the drawing cannot set it: no drawing of the face, or a share or a field to follow. */
+    const view = f.toPlane || f.target ? faceViewOf(asset, this.partId, aim) : undefined
+    const alignRows = (f.toPlane || f.target ? alignAxesOf(asset, this.partId, aim, !!f.twist) : []).filter(
+      ({ axis }) => !view || !view.axes.includes(axis) || !!f.alignInput?.[axis] || hasInstanceSize(asset, axis)
+    )
+    /* A fastening the part has is changed as soon as something is chosen, as the drawing does; a new one waits for 붙이기. */
+    const settle = () => this.onFastenRelease(!!held)
     /*
       Fastening it anew is said, so the form is not taken for the one it has (designer 2026-09-27). The one it has is
       said once, by the sentence over the drawing -- the panel's head says it too; a third and a fourth line saying the
@@ -590,7 +596,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         ? html`<div overhang role="status">
             ${this.overhangWords.map(line => html`<p>${line}</p>`)}
             ${current
-              ? html`<button act @click=${() => this.openDetail()}><md-icon>tune</md-icon>${i18next.t('figure.button.fix-alignment')}</button>`
+              ? html`<button act @click=${() => this.showWhere()}><md-icon>tune</md-icon>${i18next.t('figure.button.fix-alignment')}</button>`
               : nothing}
           </div>`
         : nothing}
@@ -607,6 +613,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         <select @change=${(e: Event) => {
           const value = (e.target as HTMLSelectElement).value
           this.aimAt(asset, value === PLANE ? { ...f, toPlane: true, target: '' } : { ...f, toPlane: false, target: value })
+          if (value) settle()
         }}>
           <option value="" ?selected=${!f.target && !f.toPlane}>${i18next.t('figure.label.target-part-placeholder')}</option>
           <option value=${PLANE} ?selected=${f.toPlane}>${planeWord}</option>
@@ -626,7 +633,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
               .face=${targetFace}
               .modes=${f.toPlane ? (['meet'] as FastenMode[]) : ([...(['meet', 'flush'] as FastenMode[]), ...(turnsInPlace(asset, this.partId) ? (['centre'] as FastenMode[]) : [])])}
               .mode=${mode}
-              .view=${faceViewOf(asset, this.partId, aim)}
+              .view=${view}
               .align=${f.align}
               .alignMm=${f.alignMm}
               .gap=${f.gap}
@@ -638,19 +645,21 @@ export class FigureLinks extends localize(i18next)(LitElement) {
             ></figure-fasten-drawing>`
         : html`<p hint>${i18next.t('figure.text.fasten-target-first')}</p>`}
       ${(f.toPlane || f.target) ? html`<details fasten-detail>
-        <summary>${i18next.t('figure.label.fasten-detail')} · <span fasten-summary>${detail.length ? detail.join(' · ') : i18next.t('figure.text.fasten-summary-default')}</span></summary>
-        ${this.renderAlignment(f.toPlane || f.target ? alignAxesOf(asset, this.partId, aim, !!f.twist) : [])}
+        <summary>${i18next.t('figure.label.fasten-detail')}${detail.length ? html` · <span fasten-summary>${detail.join(' · ')}</span>` : nothing}</summary>
+        ${alignRows.length ? this.renderAlignment(alignRows, settle) : nothing}
         <div form>
           <span>${i18next.t('figure.label.gap')}</span>
-          <input type="number" step="any" .value=${String(f.gap)} @change=${(e: Event) => (this.fasten = { ...f, gap: Number((e.target as HTMLInputElement).value) || 0 })} />
+          <input type="number" step="any" .value=${String(f.gap)} @change=${(e: Event) => ((this.fasten = { ...f, gap: Number((e.target as HTMLInputElement).value) || 0 }), settle())} />
           <span>${i18next.t('figure.label.twist')}</span>
-          <input type="number" step="any" .value=${String(f.twist)} @change=${(e: Event) => (this.fasten = { ...f, twist: Number((e.target as HTMLInputElement).value) || 0 })} />
+          <input type="number" step="any" .value=${String(f.twist)} @change=${(e: Event) => ((this.fasten = { ...f, twist: Number((e.target as HTMLInputElement).value) || 0 }), settle())} />
         </div>
       </details>
-      ${action && this.working === 'fasten' ? this.renderPreviewWords() : nothing}
-      <button act ?disabled=${this.locked || !action} @click=${() => action && this.command(action)}>
-        <md-icon>link</md-icon>${i18next.t(current ? 'figure.button.fasten-update' : 'figure.button.fasten')}
-      </button>` : nothing}
+      ${/* What 붙이기 would do; a fastening the part has is changed at once, and the canvas shows it. */ action && !held && this.working === 'fasten' ? this.renderPreviewWords() : nothing}
+      ${held
+        ? nothing
+        : html`<button act ?disabled=${this.locked || !action} @click=${() => action && this.command(action)}>
+            <md-icon>link</md-icon>${i18next.t('figure.button.fasten')}
+          </button>`}` : nothing}
     `
   }
 
@@ -690,10 +699,10 @@ export class FigureLinks extends localize(i18next)(LitElement) {
    * Where on the target face the part sits, on the two axes across it: centred, level with the target's edge on
    * either side, or a distance off centre. A door hung level with the frame's front edge turns about that edge.
    */
-  private renderAlignment(axes: { axis: Axis; edges: boolean }[]) {
+  private renderAlignment(axes: { axis: Axis; edges: boolean }[], settle: () => void) {
     const f = this.fasten
-    const set = (axis: Axis, how: Alignment) => (this.fasten = { ...f, align: { ...f.align, [axis]: how } })
-    const setMm = (axis: Axis, mm: number) => (this.fasten = { ...f, alignMm: { ...f.alignMm, [axis]: mm } })
+    const set = (axis: Axis, how: Alignment) => ((this.fasten = { ...f, align: { ...f.align, [axis]: how } }), settle())
+    const setMm = (axis: Axis, mm: number) => ((this.fasten = { ...f, alignMm: { ...f.alignMm, [axis]: mm } }), settle())
     return html`<div form>
       ${axes.map(({ axis, edges }) => {
         const how = f.align[axis] === 'min' || f.align[axis] === 'max' ? (edges ? f.align[axis]! : 'centre') : (f.align[axis] ?? 'centre')
@@ -739,14 +748,19 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     const blocked = rowBlockOf(asset, this.partId)
     const axes = rowAxesOf(asset, this.partId)
     const r = this.row
+    /*
+      Folded, open while it is being worked (2026-10-02): a row is made now and then, and most parts stand on the plane,
+      where the section said its reason open on every one. Opened, it says why or asks how.
+    */
+    const head = html`<summary><h3>${i18next.t('figure.label.repeat')}</h3></summary>`
     if (blocked || !axes.length)
-      return html`<section row>
-        <h3>${i18next.t('figure.label.repeat')}</h3>
+      return html`<section row><details row-fold>
+        ${head}
         <p hint row-blocked>${i18next.t(`figure.text.row-blocked-${blocked ?? 'unfastened'}`, { part: this.partId })}</p>
         ${blocked === 'unfastened'
           ? html`<button act @click=${() => this.openFastening(asset)}><md-icon>link</md-icon>${i18next.t('figure.button.go-fasten')}</button>`
           : nothing}
-      </section>`
+      </details></section>`
     const axis = axes.includes(r.axis as Axis) ? (r.axis as Axis) : axes[0]!
     const ok = r.fills ? r.pitch > 0 : Number.isSafeInteger(r.count) && r.count >= 1
     const action = ok
@@ -754,8 +768,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       : undefined
     this.rowCandidate = action
     const set = (next: typeof r) => ((this.row = next), (this.working = 'row'))
-    return html`<section row @focusin=${() => (this.working = 'row')}>
-      <h3>${i18next.t('figure.label.repeat')}</h3>
+    return html`<section row @focusin=${() => (this.working = 'row')}><details row-fold ?open=${this.working === 'row'}>
+      ${head}
       <div form>
         <span>${i18next.t('figure.label.repeat-axis')}</span>
         <select @change=${(e: Event) => set({ ...r, axis: (e.target as HTMLSelectElement).value as Axis })}>
@@ -780,7 +794,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       <button act ?disabled=${this.locked || !action} @click=${() => action && this.command(action)}>
         <md-icon>view_week</md-icon>${i18next.t('figure.button.make-repeat')}
       </button>
-    </section>`
+    </details></section>`
   }
 
   /**

package/client/modeller/figure-parts.ts

@@ -3,7 +3,7 @@ import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
-import { PART_LIMIT } from '@hatiolab/figure-model'
+import { DETAIL_LEVELS, PART_LIMIT, type DetailLevel } from '@hatiolab/figure-model'
 import type { FigurePrimitiveCreation } from '@hatiolab/figure-model'
 import type { FigureBudgetLine } from './maturity.js'
 import { partLabelOf } from './fields.js'
@@ -414,7 +414,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
    * 디테일 등급(S/M/L)의 부품 한도(사용자 2026-09-24). 부품을 넣기 **전에** 몇 개 남았는지 보이고, 다 차면 팔레트가
    * 잠긴다. 되풀이는 한 부품으로 센다. 등급을 안 정했으면 한도는 없다.
    */
-  @property({ attribute: false }) partBudget?: { level: 'S' | 'M' | 'L' | null; used: number; limit: number | null }
+  @property({ attribute: false }) partBudget?: { level: DetailLevel | null; used: number; limit: number | null }
   /** How many recipe templates the catalog holds; none, and the section is not drawn. */
   @property({ type: Number }) recipeCount = 0
 
@@ -494,7 +494,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         }}
       >
         <option value="" ?selected=${!b.level}>${i18next.t('figure.label.detail-none')}</option>
-        ${(['S', 'M', 'L'] as const).map(
+        ${DETAIL_LEVELS.map(
           one => html`<option value=${one} ?selected=${one === b.level}>
             ${one} ${i18next.t('figure.label.detail-' + one)} · ${i18next.t('figure.text.n-parts-at-most', { limit: PART_LIMIT[one] })}
           </option>`

package/client/modeller/figure-section-editor.ts

@@ -6,8 +6,9 @@ import { i18next, localize } from '@operato/i18n'
 import { figureCavitySectionOf, figureSectionSidesOf } from '@hatiolab/figure-model'
 import type { FigureAuthoringAction, FigureEvaluatedShape, FigureSection, FigureSectionMeasure, FigureSectionPoint } from '@hatiolab/figure-model'
 import { SidePanelStyles } from './side-panel-styles.js'
-import { apexOver, drawnOf, insertAfter, markedBy, movePoint, pointLabel, removePoint, sectionOf, workingIssuesOf, workingOf, type SectionWorking } from './section-drawing.js'
-import { END_FACE } from './section-controls.js'
+import { apexOver, drawnOf, insertAfter, markedBy, movePoint, pointLabel, removePoint, sectionOf, workingIssuesOf, workingOf, workingShapeOf, type SectionWorking } from './section-drawing.js'
+import { cavityDepthOf, cavityRequestOf, cavityResultOf, END_FACE, sameOf, sidesOf } from './section-controls.js'
+import './figure-cavity-drawing.js'
 import { openPopup } from '@operato/layout'
 import './figure-section-close-choice.js'
 import type { SectionCloseChoice } from './figure-section-close-choice.js'
@@ -17,6 +18,10 @@ type Axis = 'x' | 'y' | 'z'
 /** 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 said so two can be compared: its walls by side, its ends. */
+const cavityKey = (w: SectionWorking) =>
+  w.cavity ? [Object.entries(w.cavity.wall).sort(), w.cavity.start, w.cavity.end] : null
+
 /** The editor's width and room for the solid beside it: below this the two take turns. */
 export const NARROW_BELOW = 900
 
@@ -35,6 +40,10 @@ export const NARROW_BELOW = 900
  * apex is dragged or typed like a point, and is not offered while something is fastened to the end it takes away (the
  * kernel's own refusal, `pointBlocked`).
  *
+ * A rectangle's or ellipse's inside is made, changed or taken away here too, by the same drawing the section panel has
+ * (figure-cavity-drawing), drawn and judged on the widths being typed: walls that fit only a wider section are taken
+ * with it, in the same command (figure-model `set-section`'s `cavity`).
+ *
  * What the kernel would refuse is marked on the outline and said in the list; apply is held back, and the solid shows
  * the last valid state, which the caption names. Apply sends one `set-section` command (one step of the history); cancel
  * or Esc sends nothing and lets the preview go -- after asking, when something was changed: apply it, let it go, or keep
@@ -192,6 +201,26 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
       min-width: 0;
       font: inherit;
     }
+    div[cavity] {
+      display: grid;
+      gap: 6px;
+      margin-top: 10px;
+      padding-top: 8px;
+      border-top: 1px solid var(--md-sys-color-outline-variant);
+    }
+    /* The panel's width: wider, the drawing pushed the outline out of view. */
+    div[cavity] figure-cavity-drawing {
+      max-width: 340px;
+    }
+    label[toggle] {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+    label[toggle] small[result] {
+      margin-left: auto;
+    }
     ul[issues] {
       margin: 8px 0 0;
       padding: 0 0 0 16px;
@@ -256,7 +285,9 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     if (!this.narrow) this.show = 'outline'
   })
 
-  @state() private working: SectionWorking = { points: [], across: {}, length: 0, apex: null }
+  @state() private working: SectionWorking = { points: [], across: {}, length: 0, apex: null, cavity: null }
+  /** Walls one per side in the inside's drawing; on when they open differing. */
+  @state() private perSide = false
   @state() private selected: string | null = null
   @state() private note = ''
   private opened!: SectionWorking
@@ -274,6 +305,10 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
   private get kind() {
     return this.body && drawnOf(this.body.shape)?.section.kind
   }
+  /** A pushed rectangle or ellipse can have an inside; a drawn section's is a later stage. */
+  private get hollowable() {
+    return !!this.body?.shape.extrusion && (this.kind === 'rectangle' || this.kind === 'ellipse')
+  }
 
   connectedCallback() {
     super.connectedCallback()
@@ -282,6 +317,7 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     this.lastValid = this.working
     this.openedAt = this.revision
     this.extent = this.extentOf(this.working)
+    this.perSide = !!this.working.cavity && sameOf(Object.values(this.working.cavity.wall)) === undefined
     window.addEventListener('keydown', this.keys, true)
     if (this.parentElement) this.room.observe(this.parentElement)
   }
@@ -310,6 +346,8 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
    */
   private keys = (e: KeyboardEvent) => {
     const inField = (e.composedPath()[0] as HTMLElement)?.tagName === 'INPUT'
+    /* A number being typed in the inside's drawing: Esc there puts the number back, not the editor away. */
+    if (inField && e.composedPath().some(el => (el as HTMLElement).tagName === 'FIGURE-CAVITY-DRAWING')) return
     /* While the close is being asked, the question has the keys: Esc there is 계속 편집. */
     if (this.asking) return
     const take = () => (e.preventDefault(), e.stopImmediatePropagation())
@@ -351,10 +389,8 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
   }
 
   /** The solid behind shows the working state, or the last valid one while the working one is refused. */
-  private preview() {
-    this.dispatchEvent(
-      new CustomEvent('command-live', { detail: { action: this.action(this.lastValid) }, bubbles: true, composed: true })
-    )
+  private preview(w = this.lastValid) {
+    this.dispatchEvent(new CustomEvent('command-live', { detail: { action: this.action(w) }, bubbles: true, composed: true }))
   }
 
   /** One command for everything changed since the editor opened; a measure not changed is not sent (it may follow another). */
@@ -363,13 +399,15 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     const changed = (a: number | undefined, b: number | undefined) => Math.abs((a ?? 0) - (b ?? 0)) > 1e-9
     const across = Object.fromEntries(Object.entries(w.across).filter(([k, v]) => changed(v, o.across[k as Axis])))
     const apexMoved = !w.apex !== !o.apex || (!!w.apex && Object.entries(w.apex).some(([k, v]) => changed(v, o.apex![k as Axis])))
+    const cavityMoved = JSON.stringify(cavityKey(w)) !== JSON.stringify(cavityKey(o))
     return {
       kind: 'set-section',
       part: this.body!.id,
       ...(this.kind === 'polygon' ? { points: w.points.map(p => ({ ...p })) } : {}),
       ...(Object.keys(across).length ? { across } : {}),
       ...(changed(w.length, o.length) ? { length: w.length } : {}),
-      ...(apexMoved ? { apex: w.apex ? { ...w.apex } : null } : {})
+      ...(apexMoved ? { apex: w.apex ? { ...w.apex } : null } : {}),
+      ...(cavityMoved ? { cavity: w.cavity ? { wall: { ...w.cavity.wall }, start: w.cavity.start, end: w.cavity.end } : null } : {})
     }
   }
 
@@ -403,7 +441,8 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
         w.points.map(p => [p.id, p.x ?? 0, p.y ?? 0, p.z ?? 0]),
         Object.entries(w.across).sort(),
         w.length,
-        w.apex ? Object.entries(w.apex).sort() : null
+        w.apex ? Object.entries(w.apex).sort() : null,
+        cavityKey(w)
       ])
     return !!this.opened && key(this.working) !== key(this.opened)
   }
@@ -529,8 +568,7 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     const grid = Math.max(10, Math.pow(10, Math.floor(Math.log10(e))) / 2)
     const lines: number[] = []
     for (let g = -Math.floor(e / grid) * grid; g <= e; g += grid) lines.push(g)
-    const cavity = this.body!.shape.cavity
-    const inside = cavity && !invalid ? figureCavitySectionOf(section, this.axis, cavity.wall) : undefined
+    const inside = w.cavity && !invalid ? figureCavitySectionOf(section, this.axis, w.cavity.wall) : undefined
     const sized = (axis: Axis) => this.measures?.measures[axis] === 'editable'
     return html`<div caption ?last-valid=${invalid}>
         ${invalid ? i18next.t('figure.text.section-editor-last-valid') : i18next.t('figure.text.section-editor-units', { h: h.toUpperCase(), v: v.toUpperCase() })}
@@ -710,6 +748,62 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
         : nothing}`
   }
 
+  /** The inside, as the section panel shows it, on the working section: on or off, what it makes, its drawing. */
+  private cavityBlock(invalid: boolean) {
+    const w = this.working
+    const shape = workingShapeOf(this.body!.shape, w)
+    return html`<div cavity>
+      <label toggle>
+        <input
+          type="checkbox"
+          .checked=${live(!!w.cavity)}
+          @change=${(ev: Event) => {
+            const on = (ev.target as HTMLInputElement).checked
+            const ask = cavityRequestOf(shape, {})
+            const wall = typeof ask.wall === 'number' ? Object.fromEntries(sidesOf(this.axis).map(side => [side, ask.wall as number])) : (ask.wall as Record<string, number>)
+            this.change({ ...w, cavity: on ? { wall, start: ask.start, end: ask.end } : null })
+          }}
+        />
+        ${i18next.t('figure.label.section-cavity')}
+        ${w.cavity && !invalid
+          ? html`<small result>
+              ${i18next.t('figure.text.section-depth', {
+                result: i18next.t(`figure.label.section-result-${cavityResultOf(shape.cavity!)}`),
+                depth: String(cavityDepthOf(shape))
+              })}
+            </small>`
+          : nothing}
+      </label>
+      ${w.cavity
+        ? html`<figure-cavity-drawing
+              .body=${{ id: this.body!.id, shape }}
+              .perSide=${this.perSide}
+              @command-live=${(ev: CustomEvent) => {
+                ev.stopPropagation()
+                const c = this.cavityOf(ev.detail.action)
+                this.preview(c && this.valid({ ...this.working, cavity: c }) ? { ...this.working, cavity: c } : this.lastValid)
+              }}
+              @command=${(ev: CustomEvent) => {
+                ev.stopPropagation()
+                const c = this.cavityOf(ev.detail.action)
+                if (c) this.change({ ...this.working, cavity: c })
+              }}
+            ></figure-cavity-drawing>
+            <label toggle>
+              <input type="checkbox" .checked=${live(this.perSide)} @change=${(ev: Event) => (this.perSide = (ev.target as HTMLInputElement).checked)} />
+              ${i18next.t('figure.label.section-wall-per-side')}
+            </label>`
+        : nothing}
+    </div>`
+  }
+
+  /** The inside a drawing's set-cavity asks for, every wall written out; the drawing's commands stay in the editor. */
+  private cavityOf(action: FigureAuthoringAction | null): SectionWorking['cavity'] | undefined {
+    if (action?.kind !== 'set-cavity' || !action.cavity) return undefined
+    const { wall, start, end } = action.cavity
+    return { wall: typeof wall === 'number' ? Object.fromEntries(sidesOf(this.axis).map(side => [side, wall])) : ({ ...wall } as Record<string, number>), start, end }
+  }
+
   private list(issues: ReturnType<typeof workingIssuesOf>['issues'], words: ReturnType<typeof workingIssuesOf>['words']) {
     const [h, v] = SCREEN[this.axis]
     const marked = markedBy(issues)
@@ -773,6 +867,7 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
             )}
           </ol>`
         : nothing}
+      ${this.hollowable ? this.cavityBlock(words.length > 0) : nothing}
       ${this.note ? html`<small role="status">${this.note}</small>` : nothing}
       ${words.length
         ? html`<ul issues role="alert">

package/client/modeller/section-drawing.ts

@@ -1,5 +1,5 @@
 import { FIGURE_SECTION_PLANE, FIGURE_SECTION_POINT_LIMIT, checkFigureSection, figureExtrusionFeaturesOf, figureSectionSidesOf } from '@hatiolab/figure-model'
-import type { FigureEvaluatedShape, FigureSection, FigureSectionIssue, FigureSectionPoint } from '@hatiolab/figure-model'
+import type { FigureCavityRequest, FigureEvaluatedShape, FigureSection, FigureSectionIssue, FigureSectionPoint } from '@hatiolab/figure-model'
 
 /*
  * What the section editor does to a drawn section's points, and how it says what is wrong with them (ADR-0100 §3.2).
@@ -106,6 +106,8 @@ export interface SectionWorking {
   length: number
   /** A drawn section's end drawn to one point (a pyramid), across the plane axes; null for a push. */
   apex: Partial<Record<Axis, number>> | null
+  /** A pushed rectangle's or ellipse's inside, every side's wall written out; null for none or a drawn section. */
+  cavity: { wall: Record<string, number>; start: FigureCavityRequest['start']; end: FigureCavityRequest['end'] } | null
 }
 
 /** A pushed part's section, axis and ends -- or a pyramid's, whose end is its apex (figure-model `loft@1`). */
@@ -135,7 +137,28 @@ export function workingOf(shape: FigureEvaluatedShape): SectionWorking {
       : s.kind === 'ellipse'
         ? { [u]: 2 * s.radius[u]!, [v]: 2 * s.radius[v]! }
         : {}
-  return { points: s.kind === 'polygon' ? s.points.map(p => ({ ...p })) : [], across, length: e.end - e.start, apex: e.apex ? { ...e.apex } : null }
+  const c = shape.extrusion && shape.cavity
+  return {
+    points: s.kind === 'polygon' ? s.points.map(p => ({ ...p })) : [],
+    across,
+    length: e.end - e.start,
+    apex: e.apex ? { ...e.apex } : null,
+    cavity: c ? { wall: { ...c.wall }, start: c.start, end: c.end } : null
+  }
+}
+
+/**
+ * The part as the working state would make it: its section, its length from the same start, its inside -- what the
+ * inside's drawing reads, so its walls are judged against the widths being typed and not the ones the editor opened with.
+ */
+export function workingShapeOf(shape: FigureEvaluatedShape, w: SectionWorking): FigureEvaluatedShape {
+  const e = shape.extrusion!
+  const { cavity: _, ...rest } = shape
+  return {
+    ...rest,
+    extrusion: { ...e, section: sectionOf(shape, w), end: e.start + w.length },
+    ...(w.cavity ? { cavity: { id: shape.cavity?.id ?? 'inside', wall: { ...w.cavity.wall }, start: w.cavity.start, end: w.cavity.end } } : {})
+  } as FigureEvaluatedShape
 }
 
 /** The section the working state makes, of the part's own kind: its corners kept, its points or widths the working ones. */
@@ -159,8 +182,8 @@ export function workingIssuesOf(
   const words = issues.map(i => issueWords(i, w.points, e.axis))
   if (!(Number.isFinite(w.length) && w.length > 0)) words.push({ key: 'figure.text.section-issue-length', params: {} })
   if (w.apex && !Object.values(w.apex).every(n => Number.isFinite(n))) words.push({ key: 'figure.text.section-issue-number', params: {} })
-  if (!issues.length && words.length === 0 && shape.cavity) {
-    const made = figureExtrusionFeaturesOf({ axis: e.axis, section, start: e.start, end: e.start + w.length }, [shape.cavity])
+  if (!issues.length && words.length === 0 && w.cavity) {
+    const made = figureExtrusionFeaturesOf({ axis: e.axis, section, start: e.start, end: e.start + w.length }, [{ id: 'inside', ...w.cavity }])
     if ('refused' in made) {
       const r = made.refused
       words.push({ key: r.code === 'CAVITY_NO_LENGTH' ? 'figure.text.section-issue-cavity-length' : 'figure.text.section-issue-cavity-walls', params: {} })

package/dist-client/modeller/canvas.d.ts

@@ -21,8 +21,6 @@ export declare class FigureCanvas extends LitElement {
      * would reach the editor as an edit.
      */
     viewOnly: boolean;
-    /** The editor shows a new figure's start card over the canvas: the canvas's own one-line hint gives way to it. */
-    startShown: boolean;
     /** Where the selected part turns and how far (`joint-fan`): shown, never picked, never saved. */
     fan: FigureRenderPart | null;
     /**