@things-factory/figure-ui 10.1.104 → 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
@@ -1037,13 +1049,13 @@ export class FigureEditor extends LitElement {
         <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)}>
+            ({ axis, able }) => html`<button ?disabled=${unavailable || !able} title=${i18next.t(able ? 'figure.text.mirror-explained' : 'figure.text.mirror-would-overlap')} @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
@@ -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/fields.ts

@@ -50,7 +50,13 @@ export function groupFields(fields: readonly FieldLike[], part?: string): { vect
     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))
+  /*
+    The section's own numbers -- its corners, its inside's walls and closed ends -- are edited in the 단면 group, where
+    they are drawn (user 2026-10-01: 「wall (mm)」, 「closed · start (mm)」 stood in the shape's list under their
+    inner names).
+  */
+  const ofSection = (id: string) => /^(dimension\.)?(round|roundX|roundZ|wall|wallX|wallZ|floor|closed|corner)(\.|$)/.test(id.slice(prefix.length))
+  const drawn = (id: string) => /^(point\.[^.]+|apex)\.[xyz]$/.test(id.slice(prefix.length)) || ofSection(id)
   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 }))

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

@@ -1,12 +1,16 @@
 import { css, html, LitElement, nothing, svg } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
+import { ref } from 'lit/directives/ref.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'
+import { cavityRefusalOf, cavityWorkingOf, END_FACE, endToggled, mm, SIDE_FACE, sideWallLimitOf, wallDragged } from './section-controls.js'
 
 type Axis = 'x' | 'y' | 'z'
+
+/** A field opened by a press takes the keys at once. */
+const focusOnRender = () => ref(el => el && requestAnimationFrame(() => (el as HTMLInputElement).select()))
 type End = 'start' | 'end'
 type Body = { id: string; shape: FigureEvaluatedShape }
 
@@ -41,6 +45,19 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
     small[refusal] {
       color: var(--md-sys-color-error);
     }
+    div[pane] {
+      position: relative;
+    }
+    div[pane] input {
+      position: absolute;
+      width: 64px;
+      transform: translate(-50%, -50%);
+      font: inherit;
+    }
+    text[typed] {
+      cursor: text;
+      text-decoration: underline dotted;
+    }
   `
 
   @property({ attribute: false }) body?: Body
@@ -52,6 +69,8 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
   @state() private working?: ReturnType<typeof cavityWorkingOf>
   @state() private refusal = ''
   private dragging: { kind: 'wall'; side: string } | { kind: 'end'; end: End } | null = null
+  /** A number pressed to be typed: which, and where on its picture (percent of the picture's box). */
+  @state() private typing?: ({ kind: 'wall'; side: string } | { kind: 'end'; end: End }) & { x: number; y: number; pane: 'top' | 'side'; value: number }
   private pressedAt = 0
 
   private get now() {
@@ -66,18 +85,22 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
     return { kind: 'set-cavity', part: this.body!.id, cavity: this.request(w) }
   }
 
-  private judge(w: NonNullable<ReturnType<typeof cavityWorkingOf>>): string {
+  /** What the kernel would refuse, in words; for one side's wall, the most that side can be with the opposite kept. */
+  private judge(w: NonNullable<ReturnType<typeof cavityWorkingOf>>, side?: string): 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 === 'wall-too-thick')
+      return i18next.t('figure.text.section-wall-over', {
+        max: String(this.perSide && side ? mm(sideWallLimitOf(this.body!.shape, w.wall, side)) : 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>>) {
+  private hold(w: NonNullable<ReturnType<typeof cavityWorkingOf>>, side?: string) {
     this.working = w
-    this.refusal = this.judge(w)
+    this.refusal = this.judge(w, side)
     this.emit('command-live', this.refusal ? null : this.action(w))
   }
 
@@ -109,10 +132,41 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
     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)}
+    return html`<div pane>${this.top(e, w)}${this.typing?.pane === 'top' ? this.renderTyping() : nothing}</div>
+      <div pane>${this.side(e, w)}${this.typing?.pane === 'side' ? this.renderTyping() : nothing}</div>
       ${this.refusal ? html`<small refusal role="alert">${this.refusal}</small>` : nothing}`
   }
 
+  /** Press a number, type it, Enter: the same one set-cavity a drag sends; Esc or leaving puts it back. */
+  private type(ev: PointerEvent, what: { kind: 'wall'; side: string } | { kind: 'end'; end: End }, pane: 'top' | 'side', value: number) {
+    if (this.locked) return
+    ev.stopPropagation()
+    const svgEl = (ev.target as Element).closest('svg')!
+    const box = svgEl.getBoundingClientRect()
+    this.refusal = ''
+    this.typing = { ...what, pane, value, x: ((ev.clientX - box.left) / box.width) * 100, y: ((ev.clientY - box.top) / box.height) * 100 }
+  }
+
+  private renderTyping() {
+    const t = this.typing!
+    return html`<input type="number" step="1" min="1" .value=${String(t.value)} style=${`left:${t.x}%;top:${t.y}%`}
+      aria-label=${t.kind === 'wall' ? i18next.t('figure.label.section-wall') : i18next.t('figure.label.face-' + END_FACE(this.body!.shape.extrusion!.axis, t.end))}
+      @keydown=${(ev: KeyboardEvent) => {
+        ev.stopPropagation()
+        if (ev.key === 'Escape') this.typing = undefined
+        if (ev.key !== 'Enter') return
+        const value = Number((ev.target as HTMLInputElement).value)
+        this.typing = undefined
+        if (!(Number.isFinite(value) && value > 0)) return
+        const now = this.now!
+        const next = t.kind === 'wall' ? { ...now, wall: wallDragged(now.wall, t.side, value, this.perSide) } : { ...now, [t.end]: { closed: Math.round(value) } }
+        this.refusal = this.judge(next, t.kind === 'wall' ? t.side : undefined)
+        if (!this.refusal) this.emit('command', this.action(next))
+      }}
+      @blur=${() => (this.typing = undefined)}
+      ${focusOnRender()} />`
+  }
+
   /** 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]
@@ -121,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)
@@ -139,18 +194,24 @@ 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 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>
+        <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>`
     })
@@ -198,7 +259,8 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
           @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>
+        <text ?typed=${!open} x=${W / 2} y=${end === 'start' ? yBot + 16 : yTop - 8} font-size="11" text-anchor="middle" style="fill:var(--md-sys-color-primary)"
+          @pointerdown=${(ev: PointerEvent) => !open && this.type(ev, { kind: 'end', end }, 'side', (w[end] as { closed: number }).closed)}>${label}</text>
         <title>${label}</title>
       </g>`
     }
@@ -231,7 +293,7 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
       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) })
+    this.hold({ ...this.now!, wall: wallDragged(this.now!.wall, d.side, value, this.perSide) }, d.side)
   }
 
   private dragEnd(ev: PointerEvent, k: number, yTop: number, yBot: number) {

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-material-panel.ts

@@ -187,7 +187,6 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
           ? html`<small>${i18next.t('figure.label.status-colors')}</small>
               <div swatches>${this.swatches(lit, material.token, token => this.put({ token }))}</div>`
           : nothing}
-        <small><b>${purposeOf(material.token)}</b> — ${i18next.t('figure.text.palette-purpose-explained')}</small>
       </div>
       <div form>
         <span>${i18next.t('figure.label.preset')}</span>

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>`