@things-factory/figure-ui 10.1.82 → 10.1.84

package/client/modeller/command-preview.ts

@@ -1,6 +1,7 @@
 import type { FigureBodyMove, FigureClipLoss, FigureFaceArea, FigureRowReading } from '@hatiolab/figure-model'
 
 import type { FigureRenderPart } from './renderer.js'
+import { boxShape, discShape } from './drawn-shapes.js'
 
 /*
  * A command seen before it is done, as the modeller shows it (ADR-0097 §5.5, designer 2026-09-27): the bodies it would
@@ -53,9 +54,10 @@ export function faceHighlightOf(face: FigureFaceArea | undefined): FigureRenderP
   /* Its own x · y · z are the face's two sides and its normal, as the kernel gives them. */
   const r = [0, 1, 2].map(i => [face.u[i]!, face.normal[i]!, face.v[i]!])
   const t = [0, 1, 2].map(i => face.centre[i]! + face.normal[i]! * (LIFT + THICKNESS / 2))
+  /* A plane touching a curved side is a line (Q3): drawn as a narrow strip, never a plate. */
   const shape: FigureRenderPart['shape'] = face.round
-    ? { provider: 'cylinder', dimensions: { radius: face.size.u / 2, length: THICKNESS } }
-    : { provider: 'box', dimensions: { width: face.size.u, height: THICKNESS, depth: face.size.v } }
+    ? discShape(face.size.u / 2, THICKNESS)
+    : boxShape(Math.max(face.size.u, THICKNESS), THICKNESS, Math.max(face.size.v, THICKNESS))
   /* Solid: a translucent plate over a light face was hardly seen (2026-09-27, :3391); it covers the face it names. */
   return { id: TARGET_FACE, shape, pose: { r, t }, material: { token: TARGET_FACE } }
 }

package/client/modeller/drawn-shapes.ts

@@ -0,0 +1,29 @@
+/**
+ * Shapes the modeller draws of its own -- a lit face, a joint's fan, a slide's line -- written as the shapes figure-model
+ * evaluates (ADR-0100): a section pushed along Y, centred. things-scene's one builder draws them as it draws a part.
+ */
+export interface DrawnShape {
+  provider: 'extrude'
+  dimensions: Record<string, number>
+  extrusion: { axis: 'y'; section: DrawnSection; start: number; end: number }
+}
+type DrawnSection =
+  | { kind: 'rectangle'; size: { x: number; z: number } }
+  | { kind: 'ellipse'; radius: { x: number; z: number } }
+  | { kind: 'polygon'; points: Array<{ id: string; x: number; z: number }> }
+
+const centred = (section: DrawnSection, height: number): DrawnShape => ({
+  provider: 'extrude',
+  dimensions: { length: height },
+  extrusion: { axis: 'y', section, start: -height / 2, end: height / 2 }
+})
+
+/** A box: width along X, height along Y, depth along Z. */
+export const boxShape = (width: number, height: number, depth: number): DrawnShape => centred({ kind: 'rectangle', size: { x: width, z: depth } }, height)
+
+/** A disc of a radius, `height` thick along Y. */
+export const discShape = (radius: number, height: number): DrawnShape => centred({ kind: 'ellipse', radius: { x: radius, z: radius } }, height)
+
+/** A section in X-Z, `height` thick along Y. */
+export const sectionShape = (points: ReadonlyArray<{ x: number; z: number }>, height: number): DrawnShape =>
+  centred({ kind: 'polygon', points: points.map((p, i) => ({ id: `p${i + 1}`, x: p.x, z: p.z })) }, height)

package/client/modeller/editor.ts

@@ -6,16 +6,17 @@ 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, planFigureResize, parseFigureAsset, figureSizeEditChanges, figureScaleAnchorOf, figurePlaneAlignChanges, type FigurePlaneContact, type FigureClipLoss, figurePartFaceOf, type FigureFaceArea, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model'
+import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figureRecipeIdFor, parseFigureAsset, figureSizeEditChanges, figureScaleAnchorOf, figurePlaneAlignChanges, type FigurePlaneContact, type FigureClipLoss, figurePartFaceOf, type FigureFaceArea, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model'
 import type { RecipeTemplate } from './recipes.js'
 import './figure-recipe-catalog.js'
-import type { FigureAsset, FigureAuthoringAction, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigureResizeRequest, FigurePlacement } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureAuthoringAction, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigurePlacement } from '@hatiolab/figure-model'
 import type { FigureProductSession } from './product-session.js'
 import { captureFigureThumbnail } from './thumbnail.js'
 import { drawableFigureParts } from './renderer.js'
 import './canvas.js'
 import './figure-parts.js'
 import './figure-material-panel.js'
+import './figure-section-panel.js'
 import { faceHighlightOf, ghostPartsOf, previewWordsOf, rowWordsOf, type HeldPreview } from './command-preview.js'
 import { motionEndsOf, type MotionEnds } from './motion-ends.js'
 import './figure-links.js'
@@ -39,7 +40,7 @@ import { nudgeOf, placementOf, type ScaleAnchor } from './stage-model.js'
 /** The numbers a rule gives a part's position, turn and size, per axis, for the cells that have no field. */
 type HeldValues = { position?: number[]; rotation?: number[]; size?: (number | undefined)[]; sizeRuled?: boolean }
 import { roomRefitRowsOf } from './occupancy.js'
-import { editRefusalOf, inDeclaredRoom, inputRangeRefusalOf, narrowingRetryOf, partRefusalOf, placementRefusalOf, recipeRefusalOf, removalNoticeOf, resizeRefusalOf, sizeRangeRefusalOf } from './refusals.js'
+import { editRefusalOf, inDeclaredRoom, inputRangeRefusalOf, narrowingRetryOf, partRefusalOf, placementRefusalOf, recipeRefusalOf, removalNoticeOf, sizeRangeRefusalOf } from './refusals.js'
 import type { FigureRenderPart } from './renderer.js'
 import type { FigureBudgetLine } from './maturity.js'
 import { fieldWordsOf, followOf, measureNow, partSummaryOf, instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './links.js'
@@ -47,6 +48,7 @@ import { jointFanOf } from './joint-fan.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'
+import { startingShapeKindOfBody } from './starting-shape.js'
 
 
 /**
@@ -1089,7 +1091,6 @@ export class FigureEditor extends LitElement {
       .motionEnds=${section === 'motion' ? this.motionEnds() : null}
       @go-fasten=${() => this.goFasten()}
       @preview-command=${(e: CustomEvent) => this.previewCommand(e.detail)}
-      @resize-with-placement=${(e: CustomEvent) => this.resizeWithPlacement(e.detail.request)}
       @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
     ></figure-links>`
   }
@@ -1137,30 +1138,6 @@ export class FigureEditor extends LitElement {
       @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
     ></figure-clips>`
   }
-  /**
-   * "Follow the size and keep where the figure is placed" (ADR-0097): figure-model plans it from the figure as it is now,
-   * and the whole plan is one step of the history. A refusal with a way on -- move the part onto the plane, replace how
-   * its position is worked out -- asks in the app's prompt and plans again with that choice; any other says why.
-   */
-  private resizeWithPlacement(request: FigureResizeRequest) {
-    this.retry = undefined
-    this.notice = ''
-    const plan = planFigureResize(parseFigureAsset(this.session!.source()), request)
-    const refusal = plan.refusal
-    if (refusal) {
-      const choice = refusal.choice
-      /* The gap is chosen on the screen beside the button, with its distance; only replacing a position rule is asked here. */
-      this.retry = choice === 'replacePosition' ? { label: i18next.t('figure.button.resize-choice-replace-position'), run: () => this.resizeWithPlacement({ ...request, replacePosition: true }) } : undefined
-      this.error = resizeRefusalOf(plan, request.part, (key, params) => i18next.t(key, params))
-      return
-    }
-    this.run(() => this.session!.applyRecipe(plan.steps))
-    /*
-      The declared room was measured from the part's old numbers and is not changed: said as a fact, not as a claim that
-      the part leaves it -- that is measured where the room is declared again (designer 2026-09-27).
-    */
-    if (!this.error && plan.roomReads.length) this.notice = i18next.t('figure.text.resize-room-unchanged')
-  }
   /** One command, one step of the history. A refusal a person can meet here is said in their words. */
   private linkCommand(action: FigureAuthoringAction) {
     this.retry = undefined
@@ -1367,7 +1344,7 @@ export class FigureEditor extends LitElement {
       }
       rows.set(id, {
         id,
-        provider: (g as { shape?: { provider?: string } }).shape?.provider ?? '',
+        kind: startingShapeKindOfBody((g as { shape?: never }).shape) ?? '',
         hidden: this.hiddenParts.has(id),
         invisible: (g as { visible?: boolean }).visible === false,
         ...(id !== g.id ? { copies: 1 } : {}),
@@ -2037,6 +2014,11 @@ export class FigureEditor extends LitElement {
                   ${this.renderGroups(this.withSizeRow(groupFields(partFields, this.selected), held), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable), held)}
                   ${roomFields.length ? this.renderRoomOnly(roomFields, unavailable) : nothing}
                   ${this.renderLinks(unavailable, 'shape')}
+                  <figure-section-panel
+                    .body=${{ ...part, id: this.selected }}
+                    ?locked=${unavailable}
+                    @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+                  ></figure-section-panel>
                   <figure-material-panel
                     .body=${{ ...part, id: this.selected }}
                     .palette=${view.palette ?? {}}

package/client/modeller/figure-links.ts

@@ -4,7 +4,7 @@ import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import { FIGURE_FACES, planFigureResize } from '@hatiolab/figure-model'
+import { FIGURE_FACES } from '@hatiolab/figure-model'
 import type { FigureAsset, FigureAuthoringAction, FigureDimensionSource, FigureFace } from '@hatiolab/figure-model'
 
 import {
@@ -42,7 +42,6 @@ import {
   fixedJointOf,
   rowOf,
   positionsWorkedOut,
-  resizeAxesOf,
   fieldWordsOf,
   measureNow,
   type Alignment,
@@ -109,10 +108,9 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     div[resize-now] div[row] { grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; }
     div[resize-now] span[measure] { font-variant-numeric: tabular-nums; }
     button[link] { background: none; border: none; padding: 0; color: var(--md-sys-color-primary, #477b9e); text-decoration: underline; cursor: pointer; font: inherit; }
-    /* What will be applied: a pending choice, boxed apart from the rows above. */
-    fieldset[resize-pending] { display: grid; gap: 8px; margin: 12px 0; padding: 10px 12px; border: 1px dashed var(--border-color, #8888); border-radius: 6px; }
-    fieldset[resize-pending] label { display: flex; align-items: center; gap: 6px; }
-    fieldset[resize-pending] small { opacity: 0.7; }
+    /* Size behaviour is a choice about dimensions only. It never implies a placement or a fastening. */
+    details[resize-choice] { margin: 12px 0; padding: 0; border: 0; }
+    details[resize-choice] > div { display: grid; gap: 8px; padding: 8px 0; }
     div[resize-held] { display: grid; gap: 8px; margin: 12px 0; padding: 10px 12px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); }
     div[resize-held] p { margin: 0; display: flex; align-items: center; gap: 6px; }
     p[fasten-mode] { margin: 0; font-weight: 600; }
@@ -170,8 +168,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   private fastenCandidate?: { action: FigureAuthoringAction; face?: { part: string; face: string } }
   private rowCandidate?: FigureAuthoringAction
 
-  /** The directions ticked for "follow the size, attached", per part, once the author has ticked or fixed any. */
-  @state() private pendingAxes: Record<string, Axis[]> = {}
+  /** A new fastening starts with a target. Its face and alignment are asked only after that target is chosen. */
+  @state() private choosingFastening = false
   /** The fastening section, marked for a moment when "open attachment settings" brings it into view. */
   @state() private spotlit = false
   @state() private fasten = freshFasten()
@@ -198,6 +196,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       this.place = freshPlace()
       this.row = freshRow()
       this.editingMotion = false
+      this.choosingFastening = false
     }
   }
 
@@ -317,41 +316,11 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   }
 
   private renderDimensions(asset: FigureAsset) {
-    /*
-      The kernel's plan for "follow the size and keep where the figure is placed" (ADR-0097), with the directions the
-      author ticked below -- a pending choice, drawn apart from the rows above, which only say what each direction does
-      now (designer 2026-09-27: the immediate and the pending are not mixed in one look).
-    */
     const editable = followableAxes(asset, this.partId)
-    const choice = resizeAxesOf(asset, this.partId, this.pendingAxes[this.partId])
-    const axes = choice.axes
-    const plan = planFigureResize(asset, { part: this.partId, axes })
-    const mode = plan.mode
     const round = editable.length === 2
     const word = (axis: Axis) => i18next.t(round && axis === 'x' ? 'figure.label.resize-diameter' : `figure.label.resize-${axis}`)
-    const scope =
-      axes.length && axes.length === editable.length
-        ? i18next.t(`figure.text.resize-scope-all-${editable.length}`)
-        : i18next.t('figure.text.resize-scope-only', { axes: axes.map(word).join(' · ') })
-    const ask = (gap?: 'keep' | 'plane') =>
-      this.dispatchEvent(new CustomEvent('resize-with-placement', { detail: { request: { part: this.partId, axes, ...(gap ? { gap } : {}) } }, bubbles: true, composed: true }))
-    const gapChoice = plan.refusal?.code === 'GAP_CHOICE' ? plan.refusal : undefined
-    /* Brought onto the plane, where it moves -- said on the button before it is pressed. */
-    const onto = gapChoice ? planFigureResize(asset, { part: this.partId, axes, gap: 'plane' }).moves[0] : undefined
-    const place = i18next.t(`figure.label.resize-place-${mode}`)
-    const tick = (axis: Axis, on: boolean) => {
-      const next = on ? [...new Set([...axes, axis])] : axes.filter(one => one !== axis)
-      this.pendingAxes = { ...this.pendingAxes, [this.partId]: next }
-    }
     const others = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFollow(asset, one))
-    /* One step for the whole part (figure-model follow-size): the size is declared from the parts if there is none. */
     const followsAll = editable.every(axis => followOf(asset, this.partId, axis).of === 'instance')
-    const whole = followsAll
-      ? nothing
-      : html`<button act follow-size ?disabled=${this.locked} @click=${() => this.command({ kind: 'follow-size', part: this.partId })}>
-          <md-icon>open_in_full</md-icon>${i18next.t('figure.button.follow-size')}
-        </button>`
-    const held = plan.refusal?.code === 'HELD'
     return html`<p hint>${i18next.t('figure.text.resize-intent')}</p>
       ${asset.sizing === 'uniform' ? html`<p hint>${i18next.t('figure.text.resize-uniform-warning')}</p>` : nothing}
       <div resize-now>${editable.map(axis => {
@@ -366,46 +335,17 @@ export class FigureLinks extends localize(i18next)(LitElement) {
           ${following
             ? html`<button link resize-unfollow=${axis} ?disabled=${this.locked}
                 @click=${() => {
-                  /* Set back to fixed: the author's choice for this part from now on, not a blank to fill with "all". */
-                  this.pendingAxes = { ...this.pendingAxes, [this.partId]: axes.filter(one => one !== axis) }
                   this.follow(asset, axis, 'own', now)
                 }}>${i18next.t('figure.button.resize-unfollow')}</button>`
             : nothing}
         </div>`
       })}</div>
-      ${held
-        ? this.renderHeld(asset)
-        : html`<fieldset resize-pending ?disabled=${this.locked || asset.sizing === 'uniform'}>
-            <legend>${i18next.t('figure.label.resize-pending')}</legend>
-            ${editable.map(axis => {
-              const now = followOf(asset, this.partId, axis)
-              const following = now.of === 'instance' && now.axis === axis
-              const custom = now.of !== 'own' && !following
-              return html`<label>
-                <input type="checkbox" resize-tick=${axis} .checked=${axes.includes(axis)} ?disabled=${following || custom}
-                  @change=${(e: Event) => tick(axis, (e.target as HTMLInputElement).checked)} />
-                ${word(axis)}${following ? html` <small>${i18next.t('figure.text.resize-already-following')}</small>` : nothing}
-              </label>`
-            })}
-            <p hint resize-basis>${i18next.t(`figure.text.resize-basis-${choice.basis}`)}</p>
-            <p hint>${i18next.t('figure.text.placement-intent-' + mode)}</p>
-            ${gapChoice
-              ? html`<p hint gap-choice>${i18next.t(gapChoice.mm! > 0 ? 'figure.text.resize-gap-off' : 'figure.text.resize-gap-through', { place, mm: String(Math.abs(Math.round(gapChoice.mm! * 10) / 10)) })}</p>
-                  <button act resize-keep-gap @click=${() => ask('keep')}>
-                    ${i18next.t(gapChoice.mm! > 0 ? 'figure.button.resize-keep-gap' : 'figure.button.resize-keep-through', { scope, mm: String(Math.abs(Math.round(gapChoice.mm! * 10) / 10)) })}
-                  </button>
-                  <button act resize-onto-plane @click=${() => ask('plane')}>
-                    ${i18next.t('figure.button.resize-onto-plane-' + mode, { scope })}
-                    ${onto ? html`<small>${i18next.t('figure.text.resize-move', { axis: onto.axis.toUpperCase(), mm: String(Math.round((onto.to - onto.from) * 10) / 10) })}</small>` : nothing}
-                  </button>`
-              : html`<button act resize-with-placement ?disabled=${choice.basis === 'none' || plan.refusal?.code === 'UNIFORM_POLICY'} @click=${() => ask()}>
-                  ${i18next.t('figure.button.resize-scoped-' + mode, { scope })}
-                </button>`}
-            ${!plan.refusal && plan.replaces.length
-              ? html`<p hint resize-replaces>${i18next.t('figure.text.resize-replaces', { fields: [...new Set(plan.replaces.map(id => fieldWordsOf(id, key => i18next.t(key))))].join(' · '), place })}</p>`
-              : nothing}
-          </fieldset>`}
-      <details><summary>${i18next.t('figure.label.resize-advanced')}</summary>${whole}${followableAxes(asset, this.partId).map(axis => {
+      ${followsAll
+        ? html`<p hint>${i18next.t('figure.text.resize-all-following')}</p>`
+        : html`<button act follow-size ?disabled=${this.locked || asset.sizing === 'uniform'} @click=${() => this.command({ kind: 'follow-size', part: this.partId })}>
+            <md-icon>open_in_full</md-icon>${i18next.t('figure.button.follow-size')}
+          </button>`}
+      <details resize-choice><summary>${i18next.t('figure.label.resize-advanced')}</summary><div>${followableAxes(asset, this.partId).map(axis => {
       const now = followOf(asset, this.partId, axis)
       const value = choiceOf(now)
       /* A cylinder's two measures are its radius and its length; its X and Y name them. */
@@ -445,7 +385,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
               </label>`
           : nothing}
       </div>`
-    })}</details>`
+    })}</div></details>`
   }
 
   /**
@@ -631,6 +571,14 @@ export class FigureLinks extends localize(i18next)(LitElement) {
           target: 'plane' in current.body0 ? i18next.t('figure.label.mounting-plane') : `${current.body0.part} · ${i18next.t(`figure.label.face-${current.body0.face}`)}`
         })
       : i18next.t('figure.text.fasten-new')
+    /* A blank attachment is not a form to decipher. Ask for the thing to attach to first. */
+    if (!current && !this.choosingFastening && !f.target)
+      return html`
+        <p hint>${i18next.t('figure.text.fasten-start')}</p>
+        <button act ?disabled=${this.locked} @click=${() => (this.choosingFastening = true)}>
+          <md-icon>link</md-icon>${i18next.t('figure.button.fasten-start')}
+        </button>
+      `
     return html`
       <p fasten-mode ?editing=${!!current}>${editing}</p>
       ${this.overhangNote.length ? html`<p hint overhang-note>${this.overhangNote.join(' ')}</p>` : nothing}
@@ -651,34 +599,32 @@ export class FigureLinks extends localize(i18next)(LitElement) {
           </div>
           ${this.renderDetachWords()}`
         : nothing}
-      <div form>
-        <span>${i18next.t('figure.label.my-face')}</span>
-        <select @change=${(e: Event) => (this.fasten = { ...f, face: (e.target as HTMLSelectElement).value as FigureFace | 'centre' })}>
-          ${mineFaces.map(face => html`<option value=${face} ?selected=${face === myFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
-        </select>
-      </div>
-      <label toggle>
-        <input type="checkbox" .checked=${f.toPlane} @change=${(e: Event) => this.aimAt(asset, { ...f, toPlane: (e.target as HTMLInputElement).checked })} />
-        ${i18next.t('figure.label.stands-on-plane')}
-      </label>
       ${f.toPlane
-        ? nothing
+        ? html`<p hint>${i18next.t('figure.text.fasten-edit-on-plane')}</p>`
         : html`<div form>
-            <span>${i18next.t('figure.label.target-part')}</span>
-            <select @change=${(e: Event) => this.aimAt(asset, { ...f, target: (e.target as HTMLSelectElement).value })}>
-              <option value="" ?selected=${!f.target}>—</option>
-              ${targets.map(one =>
-                loops(one)
-                  ? html`<option value=${one} disabled>${i18next.t('figure.text.target-would-loop', { part: one, mine: this.partId })}</option>`
-                  : html`<option value=${one} ?selected=${one === f.target}>${one}</option>`
-              )}
-            </select>
-            <span>${i18next.t('figure.label.target-face')}</span>
-            <select @change=${(e: Event) => this.aimAt(asset, { ...f, targetFace: (e.target as HTMLSelectElement).value as FigureFace })}>
-              ${theirFaces.map(face => html`<option value=${face} ?selected=${face === targetFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
-            </select>
-          </div>`}
-      <details fasten-detail>
+              <span>${i18next.t('figure.label.target-part')}</span>
+              <select @change=${(e: Event) => this.aimAt(asset, { ...f, target: (e.target as HTMLSelectElement).value })}>
+                <option value="" ?selected=${!f.target}>${i18next.t('figure.label.target-part-placeholder')}</option>
+                ${targets.map(one =>
+                  loops(one)
+                    ? html`<option value=${one} disabled>${i18next.t('figure.text.target-would-loop', { part: one, mine: this.partId })}</option>`
+                    : html`<option value=${one} ?selected=${one === f.target}>${one}</option>`
+                )}
+              </select>
+            </div>
+            ${f.target
+              ? html`<div form>
+                    <span>${i18next.t('figure.label.my-face')}</span>
+                    <select @change=${(e: Event) => (this.fasten = { ...f, face: (e.target as HTMLSelectElement).value as FigureFace | 'centre' })}>
+                      ${mineFaces.map(face => html`<option value=${face} ?selected=${face === myFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
+                    </select>
+                    <span>${i18next.t('figure.label.target-face')}</span>
+                    <select @change=${(e: Event) => this.aimAt(asset, { ...f, targetFace: (e.target as HTMLSelectElement).value as FigureFace })}>
+                      ${theirFaces.map(face => html`<option value=${face} ?selected=${face === targetFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
+                    </select>
+                  </div>`
+              : 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>
         ${f.toPlane
           ? nothing
@@ -700,7 +646,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       ${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>
+      </button>` : nothing}
     `
   }
 

package/client/modeller/figure-material-panel.ts

@@ -6,6 +6,7 @@ import { MATERIAL_PRESETS, SEGMENT_PRESETS, figureTrianglesOf } from '@hatiolab/
 import { activePalette } from '@hatiolab/things-scene'
 import type { FigureAssetGeometry, FigureMaterial, FigurePartEdit } from '@hatiolab/figure-model'
 import { SidePanelStyles } from './side-panel-styles.js'
+import { isRoundBody } from './starting-shape.js'
 
 /** The purpose each palette role is for, by its token. */
 const PURPOSE: Record<string, string> = {
@@ -23,7 +24,6 @@ const PURPOSE: Record<string, string> = {
 export const purposeOf = (token?: string) => i18next.t(`figure.label.palette-purpose-${PURPOSE[token ?? ''] ?? 'registered'}`)
 
 /** Bodies with a rim — the ones `set-segments` accepts. */
-const ROUND = new Set(['cylinder', 'ellipticCylinder', 'sphere', 'frustum'])
 const DEFAULT_SEGMENTS = 12
 
 /**
@@ -230,8 +230,7 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
   }
 
   private renderSegments(part: FigureAssetGeometry & { id: string }) {
-    const provider = (part as { shape?: { provider?: string } }).shape?.provider ?? ''
-    if (!ROUND.has(provider)) return nothing
+    if (!isRoundBody((part as { shape?: never }).shape)) return nothing
     const current = part.segments ?? DEFAULT_SEGMENTS
     return html`
       <div field>

package/client/modeller/figure-parts.ts

@@ -13,7 +13,7 @@ import { partLabelOf } from './fields.js'
  *
  * 팔레트는 목록 위에, 눈 단추는 늘 자리를 차지하고, 조작은 고른 줄에서만 보인다.
  *
- * 부품의 도형은 평가가 준 `provider` 로 읽는다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라
+ * 부품의 도형은 평가가 준 형상에서 읽은 시작 모양 이름(`kind`)으로 보인다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라
  * 보이고 안 보이는 것)와는 다른 것이다. 그것은 속성 패널의 몫이다.
  *
  * 이 컴포넌트는 정본을 만지지 않는다. 무엇을 하겠다는 것만 알린다.
@@ -22,7 +22,8 @@ import { partLabelOf } from './fields.js'
 /** 한 줄 — 평가에서 이 패널이 읽는 것만. */
 export interface FigurePartRow {
   id: string
-  provider: string
+  /** 시작 모양 이름(`startingShapeKindOfBody`): 상자 · 원기둥 … 아이콘을 고른다. */
+  kind: string
   /** 작업대에서 잠깐 가린 것. 저장되지 않는다. */
   hidden?: boolean
   /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */
@@ -36,17 +37,14 @@ export interface FigurePartRow {
   fastenedTo?: string
 }
 
-/** 제공자마다의 아이콘. Material Symbols 이름이다. */
-const PROVIDER_ICON: Record<string, string> = {
-  box: 'deployed_code',
+/** 시작 모양마다의 아이콘. Material Symbols 이름이다. */
+const KIND_ICON: Record<string, string> = {
+  cube: 'deployed_code',
   cylinder: 'database',
-  ellipticCylinder: 'database',
   frustum: 'change_history',
   sphere: 'circle',
-  roundedBox: 'crop_square',
-  roundedBoxXZ: 'crop_square',
-  hollowBox: 'check_box_outline_blank',
-  hollowBoxXZ: 'check_box_outline_blank',
+  'rounded-box': 'crop_square',
+  'hollow-box': 'check_box_outline_blank',
   polygon: 'pentagon',
   portal: 'door_front'
 }
@@ -575,7 +573,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         >
           <md-icon>${off ? 'visibility_off' : 'visibility'}</md-icon>
         </button>
-        <md-icon>${PROVIDER_ICON[part.provider] ?? 'deployed_code'}</md-icon>
+        <md-icon>${KIND_ICON[part.kind] ?? 'deployed_code'}</md-icon>
         <span label title=${part.id}
           >${partLabelOf(part.id)}${part.copies ? html` <small copies>× ${part.copies}</small>` : nothing}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}${part.fastenedTo
             ? html`<small fastened-to title=${i18next.t('figure.label.fastened-to')}>${part.fastenedTo}</small>`

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

@@ -0,0 +1,175 @@
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { live } from 'lit/directives/live.js'
+
+import { i18next, localize } from '@operato/i18n'
+import type { FigureAuthoringAction, FigureCavityRequest, FigureEvaluatedShape } from '@hatiolab/figure-model'
+import { SidePanelStyles } from './side-panel-styles.js'
+import { cavityRequestOf, defaultWallOf, mm, sameOf } from './section-controls.js'
+
+type Axis = 'x' | 'y' | 'z'
+type End = 'start' | 'end'
+
+/** The face each end of a push is, by the axis it runs along: its start is the low side. */
+const END_FACE: Record<Axis, Record<End, string>> = {
+  x: { start: 'left', end: 'right' },
+  y: { start: 'bottom', end: 'top' },
+  z: { start: 'back', end: 'front' }
+}
+
+/**
+ * 단면 — a pushed part's rounded corners and its inside (ADR-0100 stage 1).
+ *
+ * Only what the part's section has: corners for a rectangle, an inside for a rectangle or an ellipse. A drawn section
+ * and a turned body show nothing here. A radius or a wall entered sets every corner or every wall to it; the kernel
+ * holds per-axis values, and when they differ the field says so and shows none of them.
+ *
+ * Every change leaves as one `command`; the editor runs it through the session, one step of the undo history.
+ */
+@customElement('figure-section-panel')
+export class FigureSectionPanel extends localize(i18next)(LitElement) {
+  static styles = [SidePanelStyles, css`
+    :host {
+      display: block;
+    }
+    div[row] {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+    }
+    div[row] > * {
+      flex: 1;
+      min-width: 0;
+    }
+    div[row] > label {
+      flex: 0 0 auto;
+    }
+  `]
+
+  @property({ attribute: false }) body?: { id: string; shape: FigureEvaluatedShape }
+  @property({ type: Boolean }) locked = false
+
+  render() {
+    const body = this.body
+    const extrusion = body?.shape?.provider === 'extrude' ? body.shape.extrusion : undefined
+    if (!body || !extrusion) return nothing
+    const kind = extrusion.section.kind
+    if (kind !== 'rectangle' && kind !== 'ellipse') return nothing
+    return html`<section>
+      <h3>${i18next.t('figure.label.group-section')}</h3>
+      ${kind === 'rectangle' ? this.renderCorner(body) : nothing} ${this.renderCavity(body, extrusion.axis)}
+    </section>`
+  }
+
+  private renderCorner(body: { id: string; shape: FigureEvaluatedShape }) {
+    const d = body.shape.dimensions
+    const reaches = Object.keys(d)
+      .filter(k => k.startsWith('corner.'))
+      .map(k => d[k])
+    const one = reaches.length ? sameOf(reaches) : 0
+    return html`<div field>
+      <label>${i18next.t('figure.label.section-corner')}</label>
+      <input
+        type="number"
+        min="0"
+        step="any"
+        .value=${live(one === undefined ? '' : String(mm(one)))}
+        placeholder=${one === undefined ? i18next.t('figure.text.section-corner-differs') : ''}
+        ?disabled=${this.locked}
+        @change=${(e: Event) => {
+          const input = e.target as HTMLInputElement
+          const value = Number(input.value)
+          if (input.value === '' || !Number.isFinite(value) || value < 0) {
+            input.value = one === undefined ? '' : String(mm(one))
+            return
+          }
+          /* 0 is a sharp corner: the rounding is taken away rather than kept at nothing. */
+          this.command({ kind: 'set-section-corner', part: body.id, corner: value > 0 ? value : null })
+        }}
+      />
+    </div>`
+  }
+
+  private renderCavity(body: { id: string; shape: FigureEvaluatedShape }, axis: Axis) {
+    const cavity = body.shape.cavity
+    const request = (patch: Partial<FigureCavityRequest>) => cavityRequestOf(body.shape, patch)
+    return html`<div field>
+        <label>
+          <input
+            type="checkbox"
+            .checked=${live(!!cavity)}
+            ?disabled=${this.locked}
+            @change=${(e: Event) => {
+              const on = (e.target as HTMLInputElement).checked
+              ;(e.target as HTMLInputElement).checked = !!cavity
+              this.command({ kind: 'set-cavity', part: body.id, cavity: on ? request({}) : null })
+            }}
+          />
+          ${i18next.t('figure.label.section-cavity')}
+        </label>
+      </div>
+      ${cavity
+        ? html`<div field>
+              <label>${i18next.t('figure.label.section-wall')}</label>
+              ${this.thickness(sameOf(Object.values(cavity.wall)), value => this.command({ kind: 'set-cavity', part: body.id, cavity: request({ wall: value }) }), 'figure.text.section-wall-differs')}
+            </div>
+            ${(['start', 'end'] as const).map(end => this.renderEnd(body.id, axis, end, cavity[end], request))}`
+        : nothing}`
+  }
+
+  private renderEnd(
+    part: string,
+    axis: Axis,
+    end: End,
+    now: 'open' | { closed: number },
+    request: (patch: Partial<FigureCavityRequest>) => FigureCavityRequest
+  ) {
+    const closed = now !== 'open'
+    const set = (value: 'open' | { closed: number }) => this.command({ kind: 'set-cavity', part, cavity: request({ [end]: value }) })
+    return html`<div field>
+      <label>${i18next.t('figure.label.face-' + END_FACE[axis][end])}</label>
+      <div row>
+        <select
+          .value=${live(closed ? 'closed' : 'open')}
+          ?disabled=${this.locked}
+          @change=${(e: Event) => {
+            const select = e.target as HTMLSelectElement
+            const want = select.value
+            select.value = closed ? 'closed' : 'open'
+            set(want === 'open' ? 'open' : { closed: defaultWallOf(this.body!.shape) })
+          }}
+        >
+          <option value="closed">${i18next.t('figure.label.section-end-closed')}</option>
+          <option value="open">${i18next.t('figure.label.section-end-open')}</option>
+        </select>
+        ${closed ? this.thickness(now.closed, value => set({ closed: value })) : html`<span></span>`}
+      </div>
+    </div>`
+  }
+
+  /** A thickness field: a positive number, committed on change; anything else puts the old value back. */
+  private thickness(now: number | undefined, commit: (value: number) => void, differs?: string) {
+    const shown = now === undefined ? '' : String(mm(now))
+    return html`<input
+      type="number"
+      min="0"
+      step="any"
+      .value=${live(shown)}
+      placeholder=${now === undefined && differs ? i18next.t(differs) : ''}
+      ?disabled=${this.locked}
+      @change=${(e: Event) => {
+        const input = e.target as HTMLInputElement
+        const value = Number(input.value)
+        if (input.value === '' || !Number.isFinite(value) || !(value > 0)) {
+          input.value = shown
+          return
+        }
+        commit(value)
+      }}
+    />`
+  }
+
+  private command(action: FigureAuthoringAction) {
+    this.dispatchEvent(new CustomEvent('command', { detail: { action }, bubbles: true, composed: true }))
+  }
+}