@things-factory/figure-ui 10.1.169 → 10.1.170

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

@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import type { FigureFace } from '@hatiolab/figure-model'
 
-import { alignmentAt, offsetOf, overhangOf, screenOf, type FaceView, type FastenMode } from './fasten-geometry.js'
+import { alignmentAt, fastenLabelsOf, offsetOf, overhangOf, screenOf, type FaceView, type FastenMode } from './fasten-geometry.js'
 import type { Alignment } from './links.js'
 
 type Axis = 'x' | 'y' | 'z'
@@ -299,6 +299,7 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     }
     const faceName = this.target ? `${this.target} ${i18next.t('figure.label.face-' + this.face)}` : this.planeWord
     const sizeWords = faceSized ? ` ${Math.round(view.face[h]!)} × ${Math.round(view.face[v]!)}` : ''
+    const labels = fastenLabelsOf(faceSized ? { x: fx, y: fy, w: fw, h: fh } : { x: 6, y: 4, w: W - 12, h: H - 8 }, { x: px, y: py, w: pw, h: ph }, this.partName, H)
     return html`<div where tabindex="0" @keydown=${(ev: KeyboardEvent) => this.keys(ev, view)}>
         ${svg`<svg viewBox="0 0 ${W} ${H}" role="img" aria-label=${faceName}
             @pointermove=${(ev: PointerEvent) => this.drag(ev, view, cx, cy)}
@@ -306,7 +307,7 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
           ${faceSized
             ? svg`<rect x=${fx} y=${fy} width=${fw} height=${fh} rx="4" style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />`
             : svg`<rect x="1" y="1" width=${W - 2} height=${H - 2} rx="8" style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />`}
-          <text x=${faceSized ? fx + 4 : 10} y=${faceSized ? fy + fh - 6 : 18} font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${faceName}${sizeWords}</text>
+          <text face-name x=${labels.face.x} y=${labels.face.y} font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${faceName}${sizeWords}</text>
           ${guide(h)}${guide(v)}
           <g footprint style=${`cursor:${this.locked ? 'default' : 'grab'}`} @pointerdown=${(ev: PointerEvent) => this.grab(ev, at, caught)}>
             <rect x=${px} y=${py} width=${pw} height=${ph} rx=${round ? pw / 2 : 2} style="fill:var(--md-sys-color-tertiary-container)" />
@@ -317,7 +318,7 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
                 : nothing}
             <rect x=${px} y=${py} width=${pw} height=${ph} rx=${round ? pw / 2 : 2}
               style=${`fill:none;stroke:var(--md-sys-color-on-surface);stroke-width:1.5;stroke-dasharray:${touching ? '' : '4 3'}`} />
-            <text x=${px + pw / 2} y=${py + ph / 2 + 4} text-anchor="middle" font-size="12" pointer-events="none" style="fill:var(--md-sys-color-on-surface)">${this.partName}</text>
+            <text part-name x=${labels.part.x} y=${labels.part.y} text-anchor="middle" font-size="12" pointer-events="none" style="fill:var(--md-sys-color-on-surface)">${this.partName}</text>
           </g>
           ${dim(h)}${dim(v)}
         </svg>`}

package/client/modeller/figure-links.ts

@@ -20,6 +20,7 @@ import {
   followableAxes,
   positionIsShare,
   choiceOf,
+  followWordsOf,
   fastenedTo,
   heldBy,
   followOf,
@@ -60,6 +61,7 @@ import type { FastenChange } from './figure-fasten-drawing.js'
 import { faceViewOf, insideAlignmentOf, modeOf, myFaceFor, turnsInPlace, type FaceView, type FastenMode } from './fasten-geometry.js'
 import type { FigureRevision } from './revision.js'
 import { HelpToggles } from './help.js'
+import { groupMenu, GroupMenuStyles } from './group-menu.js'
 import { jointAxisWord } from './joint-axis.js'
 import { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js'
 
@@ -100,10 +102,28 @@ const freshPlace = () => ({ role: 'grip' as 'seat' | 'grip', face: 'top' as Figu
 @customElement('figure-links')
 export class FigureLinks extends localize(i18next)(LitElement) {
   private readonly help = new HelpToggles(this)
-  static styles = [SidePanelStyles, css`
+  static styles = [SidePanelStyles, GroupMenuStyles, css`
     :host {
       display: block;
     }
+    /* A group's sub-question, under its title: quieter than the title, as a label is. */
+    p[group-question] {
+      margin: 4px 0 0;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    /* The fastening a part has, in one line, and 「바꾸기」 at its end. */
+    div[fastened-summary] {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    div[fastened-summary] > p {
+      flex: 1;
+      margin: 0;
+    }
+    div[fastened-summary] > button[quiet] {
+      margin-left: 0;
+    }
     /* The measure's name, then its rule: X, or a cylinder's 반지름 · 길이, on one line. */
     div[row] > b {
       white-space: nowrap;
@@ -121,9 +141,9 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     div[resize-now] { display: grid; gap: 4px; margin: 12px 0; }
     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; }
     /* 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; }
+    /* One of the size group's rows: the group's gap spaces it, as it does the rest (a margin on top of it left a hole). */
+    details[resize-choice] { margin: 0; padding: 0; border: 0; }
     details[resize-choice] > div { display: grid; gap: 8px; padding: 8px 0; }
     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; }
@@ -186,6 +206,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
 
   /** 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 the part has, opened to be changed: until then the place group says it in one line. */
+  @state() private changingFastening = false
   /** The fastening section, marked for a moment when "open attachment settings" brings it into view. */
   @state() private spotlit = false
   @state() private fasten = freshFasten()
@@ -219,6 +241,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       this.row = freshRow()
       this.editingMotion = false
       this.choosingFastening = false
+      this.changingFastening = false
     }
   }
 
@@ -270,17 +293,29 @@ export class FigureLinks extends localize(i18next)(LitElement) {
             ? this.renderPlaces(asset)
             : html`<p hint>${i18next.t('figure.text.places-need-a-box')}</p>`}</section>`
     }
+    /*
+      Three groups in one order whatever the part's state (chief architect 2026-10-16): its size, its place, its row. The
+      editor's own numbers go in through the slots, so a group keeps its place when a rule or a fastening takes them over.
+    */
+    /* Fastened, by a face or by an origin: either can be taken off, from the place group's 「⋯」. */
+    const held = !!heldBy(asset, this.partId) || !!(this.revision && fasteningOf(this.revision, this.partId)?.atOrigin)
     const shown = html`
-      <section>
-        <h3>${i18next.t('figure.label.resize-intent')}</h3>
+      <section size>
+        <h3>${i18next.t('figure.label.group-size')}</h3>
+        <slot name="size"></slot>
+        <p group-question>${i18next.t('figure.label.resize-intent')}</p>
         ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
       </section>
       <section fastening ?spotlit=${this.spotlit} @focusin=${() => (this.working = 'fasten')}>
-        <h3>${i18next.t('figure.label.placement')}${this.help.button('figure.text.fastening-explained')}</h3>${this.help.hint('figure.text.fastening-explained')}
+        <h3>
+          ${i18next.t('figure.label.group-place')}${this.help.button('figure.text.fastening-explained')}
+          ${groupMenu([{ label: i18next.t('figure.button.detach'), icon: 'link_off', disabled: this.locked || !held, run: () => this.command({ kind: 'detach', part: this.partId }) }])}
+        </h3>${this.help.hint('figure.text.fastening-explained')}
+        <slot name="place"></slot>
         ${this.renderPositions(asset)}
         ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
       </section>
-      ${this.renderRow(asset)}
+      ${rowOf(asset, this.partId) ? html`<slot name="row"></slot>` : this.renderRow(asset)}
     `
     this.candidate = this.working === 'row' && this.rowCandidate ? { action: this.rowCandidate } : this.fastenCandidate
     return shown
@@ -301,7 +336,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
             <b bound>${one.label}</b>
             <small>${one.face ? i18next.t('figure.label.face-' + one.face) + ' · ' : ''}${placeTerms(one, (key, params) => i18next.t(key, params))}</small>
           </span>
-          <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-binding', id: one.id })}>
+          <button quiet ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-binding', id: one.id })}>
             <md-icon>close</md-icon>${i18next.t('figure.button.remove-place')}
           </button>
         </div>`
@@ -373,9 +408,9 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         return html`<div row>
           <b>${word(axis)}</b>
           <span measure>${mm === undefined ? '—' : `${Math.round(mm)} mm`}</span>
-          <span>${i18next.t(custom ? 'figure.label.resize-custom' : following ? 'figure.label.resize-following' : 'figure.label.follows-nothing')}</span>
+          <span>${custom ? followWordsOf(now, (key, params) => i18next.t(key, params)) : i18next.t(following ? 'figure.label.resize-following' : 'figure.label.follows-nothing')}</span>
           ${following
-            ? html`<button link resize-unfollow=${axis} ?disabled=${this.locked}
+            ? html`<button quiet resize-unfollow=${axis} ?disabled=${this.locked}
                 @click=${() => {
                   this.follow(axis, 'own', now)
                 }}>${i18next.t('figure.button.resize-unfollow')}</button>`
@@ -383,7 +418,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         </div>`
       })}</div>`}
       ${followsAll
-        ? html`<p hint>${i18next.t('figure.text.resize-all-following')}</p>`
+        ? nothing
         : 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>`}
@@ -398,15 +433,15 @@ export class FigureLinks extends localize(i18next)(LitElement) {
           <option value="own" ?selected=${value === 'own'}>${i18next.t('figure.label.follows-nothing')}</option>
           ${AXES.filter(one => hasInstanceSize(asset, one)).map(
             one => html`<option value=${`share:${one}`} ?selected=${value === `share:${one}`}>
-                ${i18next.t('figure.label.follows-instance-share')} · ${one.toUpperCase()}
+                ${i18next.t('figure.label.follows-instance-share', { axis: one.toUpperCase() })}
               </option>
               <option value=${`instance:${one}`} ?selected=${value === `instance:${one}`}>
-                ${i18next.t('figure.label.follows-instance')} · ${one.toUpperCase()}
+                ${i18next.t('figure.label.follows-instance', { axis: one.toUpperCase() })}
               </option>`
           )}
           ${others.flatMap(other =>
             AXES.map(
-              one => html`<option value=${`part:${other}:${one}`} ?selected=${value === `part:${other}:${one}`}>${other} · ${one.toUpperCase()}</option>`
+              one => html`<option value=${`part:${other}:${one}`} ?selected=${value === `part:${other}:${one}`}>${i18next.t('figure.label.follows-part-axis', { part: other, axis: one.toUpperCase() })}</option>`
             )
           )}
           ${now.of === 'expression' || now.of === 'input'
@@ -468,6 +503,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   private async openFastening(asset: FigureAsset) {
     const own = fasteningOf(this.revision!, this.partId)
     this.fasten = own ? ({ ...freshFasten(), ...own } as ReturnType<typeof freshFasten>) : freshFasten()
+    /* Asked for from elsewhere: the form itself, not the one-line summary of the fastening it has. */
+    this.changingFastening = true
     this.spotlit = true
     await this.updateComplete
     const section = this.renderRoot.querySelector<HTMLElement>('section[fastening]')
@@ -548,9 +585,6 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       this.fastenCandidate = undefined
       return html`<div fastened fasten-at-origin>
         <p>${this.heldWords(asset)}</p>
-        <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'detach', part: this.partId })}>
-          <md-icon>link_off</md-icon>${i18next.t('figure.button.detach')}
-        </button>
         ${this.renderDetachWords()}
       </div>`
     }
@@ -610,17 +644,13 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     */
     const current = asset.joints?.find(j => j.body1.part === this.partId)
     const editing = 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`
-      ${current ? nothing : html`<p fasten-mode>${editing}</p>`}
-      ${this.overhangNote.length ? html`<p hint overhang-note>${this.overhangNote.join(' ')}</p>` : nothing}
+    /*
+      A fastening the part has, said in one line -- what, on which face, how -- and 「바꾸기」 to open the drawing and the
+      details (chief architect 2026-10-16). They were open on every fastened part, near a screen of the panel, for a
+      choice made once. Taking it off is in the group's 「⋯」. What would hang over still shows: it is about now.
+    */
+    /* What hangs over the face, and the way to fix it: about the fastening as it is now, so said open or folded. */
+    const overhang = html`${this.overhangNote.length ? html`<p hint overhang-note>${this.overhangNote.join(' ')}</p>` : nothing}
       ${this.overhangWords.length
         ? html`<div overhang role="status">
             ${this.overhangWords.map(line => html`<p>${line}</p>`)}
@@ -631,15 +661,28 @@ export class FigureLinks extends localize(i18next)(LitElement) {
                   ${this.fixNote ? html`<p hint fix-note>${this.fixNote}</p>` : nothing}`
               : nothing}
           </div>`
-        : nothing}
-      ${held
-        ? html`<div fastened>
-            <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'detach', part: this.partId })}>
-              <md-icon>link_off</md-icon>${i18next.t('figure.button.detach')}
-            </button>
-            ${this.renderDetachWords()}
-          </div>`
-        : nothing}
+        : nothing}`
+    if (current && held && !this.changingFastening && (f.toPlane || f.target))
+      return html`
+        ${overhang}
+        <div fastened-summary>
+          <p fasten-sentence>${this.sentenceOf(myFace, f.toPlane ? planeWord : `${f.target}의 ${i18next.t('figure.label.face-' + targetFace)}`, mode)}</p>
+          <button quiet change-fastening ?disabled=${this.locked} @click=${() => (this.changingFastening = true)}>${i18next.t('figure.button.change-fastening')}</button>
+        </div>
+        ${this.renderDetachWords()}
+      `
+    /* 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`
+      ${current ? nothing : html`<p fasten-mode>${editing}</p>`}
+      ${overhang}
+      ${held ? this.renderDetachWords() : nothing}
       <div form>
         <span>${i18next.t('figure.label.target-part')}</span>
         <select @change=${(e: Event) => {

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

@@ -46,6 +46,11 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
     :host {
       display: block;
     }
+    /* The rarer half, drawn inside the 「더 보기」 fold: the fold gives the padding and the line. */
+    div[more] {
+      display: grid;
+      gap: 8px;
+    }
     div[field] {
       display: grid;
       gap: 4px;
@@ -164,6 +169,11 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
   /** The asset's palette, token → colour. */
   @property({ attribute: false }) palette: Record<string, string> = {}
   @property({ type: Boolean }) locked = false
+  /**
+   * Which half to draw. `look` is what most parts need -- the colour role and the preset; `more` is what few parts
+   * need -- transparency, glow and the segments of a round part -- drawn in the properties' 「더 보기」 fold.
+   */
+  @property({ type: String }) show: 'look' | 'more' = 'look'
   /** The glow while its slider is dragged: shown beside it and drawn on the canvas, recorded on release. */
   @state() private glowing?: number
 
@@ -179,6 +189,7 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
     const painted = entries.filter(([token]) => !token.startsWith('palette.status-'))
     const lit = entries.filter(([token]) => token.startsWith('palette.status-'))
     const glow = material.emissive
+    if (this.show === 'more') return this.renderMore(part, painted, lit)
     return html`<section>
       <h3>${i18next.t('figure.label.part-material')}</h3>
       <div field>
@@ -201,6 +212,14 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
           )}
         </select>
       </div>
+    </section>`
+  }
+
+  /** Transparency, glow and segments: few parts need them, so they wait in the 「더 보기」 fold. */
+  private renderMore(part: FigureAssetGeometry & { id: string }, painted: [string, string][], lit: [string, string][]) {
+    const material = part.material
+    const glow = material.emissive
+    return html`<div more>
       <label toggle>
         <input
           type="checkbox"
@@ -233,7 +252,7 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
           </div>`
         : nothing}
       ${this.renderSegments(part)}
-    </section>`
+    </div>`
   }
 
   private renderSegments(part: FigureAssetGeometry & { id: string }) {

package/client/modeller/figure-preview.ts

@@ -10,15 +10,18 @@ import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH, type ViewSetting
 import { dialShape } from './angle-dial.js'
 import { domainOf, motionWrittenByData, typedValueOf, valueRowsOf } from './data-interface.js'
 import { derivedOf, type FigureRevision } from './revision.js'
-import { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewTypeOf, setupPartOf } from '@things-factory/figure-viewer/dist-client/preview-model.js'
+import { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewOneInstance, previewTypeOf, setupPartOf, sizeRangeOf, sizeWithinRange } from '@things-factory/figure-viewer/dist-client/preview-model.js'
+import { previewSizeWordsOf } from './preview-size.js'
 
 /**
  * The figure placed on a board.
  *
  * The editing canvas shows the figure at the size it was made. Half of what a figure is lies in how it answers a
- * different size, so here the figure being authored is registered as a board registers it and placed as
- * `FigureInstance`s: the size it was made, and each of the seven ways of growing one, two or three axes twice as
- * large, side by side at one scale, four to a row. The board draws them as it will on a real board --
+ * different size, so here the figure being authored is registered as a board registers it and placed as a
+ * `FigureInstance` the author stretches with a slider per axis the figure lets change, its size and its rows' counts
+ * said beside it (first 15 minutes, 2026-10-16: eight variants side by side at one scale made a 60 mm roller on a 3 m
+ * conveyor a speck). The eight -- the size it was made, and each of the seven ways of growing one, two or three axes
+ * twice as large, four to a row -- are a choice in the legend. The board draws them as it will on a real board --
  * placement, lights, environment, the same renderer.
  *
  * The controls: each value that poses the figure with a slider (and a dial for an angle), each clip's
@@ -92,6 +95,55 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       flex-wrap: wrap;
       max-width: calc(100% - 16px);
     }
+    /* One figure or eight: two words in the legend, the one shown pressed. */
+    div[legend] button[way] {
+      padding: 0 6px;
+      font: inherit;
+      color: inherit;
+      background: none;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      opacity: 0.7;
+    }
+    div[legend] button[way][aria-pressed='true'] {
+      opacity: 1;
+      background-color: rgba(255, 255, 255, 0.18);
+    }
+    /* The one figure's size: under the legend, in the controls' look. */
+    div[sizes] {
+      position: absolute;
+      top: 40px;
+      left: 8px;
+      display: grid;
+      gap: 6px;
+      padding: 8px 10px;
+      max-width: calc(100% - 16px);
+      box-sizing: border-box;
+      color: rgba(255, 255, 255, 0.92);
+      background-color: rgba(28, 28, 30, 0.72);
+      border-radius: 8px;
+      font-size: 0.72rem;
+    }
+    div[sizes] label {
+      display: grid;
+      grid-template-columns: 32px 160px 52px;
+      align-items: center;
+      gap: 8px;
+    }
+    div[sizes] input {
+      width: 100%;
+      accent-color: var(--md-sys-color-primary);
+    }
+    div[sizes] output {
+      font-variant-numeric: tabular-nums;
+      text-align: right;
+    }
+    div[sizes] p[said] {
+      margin: 0;
+      font-variant-numeric: tabular-nums;
+      font-weight: 600;
+    }
     /* A variant drawn at another size than it asks: the figure does not declare that size. */
     div[legend] small[clamp] {
       margin-left: 4px;
@@ -216,6 +268,11 @@ export class FigurePreview extends localize(i18next)(LitElement) {
   /** The part chosen in the editor. The size help starts on it, so the help speaks of the part the author was working on. */
   @property() selected = ''
   @state() private setupPart = ''
+  /** One figure stretched by sliders, or the eight ways of growing side by side. */
+  @state() private way: 'one' | 'eight' = 'one'
+  /** The size the one figure is tried at; the authored size when the figure stands up. */
+  @state() private trying?: { x: number; y: number; z: number }
+  private board = { width: 0, height: 0 }
 
   /** What is being tried here now -- clip speeds and control values -- for the AI dock to hear with a request; none when nothing is. */
   tried(): { clips?: Record<string, number>; controls?: Record<string, number> } | undefined {
@@ -247,7 +304,10 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       ${this.cannot
         ? html`<div cannot>${this.cannot}</div>`
         : html`<div legend>
-              ${PREVIEW_WAYS.map(way => {
+              ${(['one', 'eight'] as const).map(
+                way => html`<button way=${way} aria-pressed=${String(this.way === way)} @click=${() => this.chooseWay(way)}>${i18next.t(`figure.label.preview-way-${way}`)}</button>`
+              )}
+              ${this.way === 'one' ? nothing : PREVIEW_WAYS.map(way => {
                 const clamps = clampsByWay[way.name] ?? []
                 return html`<span>
                   ${way.axes.length ? way.name : i18next.t('figure.label.preview-base')}
@@ -257,6 +317,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
                 </span>`
               })}
             </div>
+            ${this.way === 'one' && asset && this.trying ? this.renderSizes(asset, this.trying) : nothing}
             <div foot>${asset?.appearance.length ? html`<div setup>
               <p>${i18next.t('figure.text.preview-setup')}</p>
               <select aria-label=${i18next.t('figure.label.resize-part')} @change=${(e: Event) => this.setupPart = (e.target as HTMLSelectElement).value}>
@@ -267,6 +328,51 @@ export class FigurePreview extends localize(i18next)(LitElement) {
             ${controls.length + clips.length + (asset?.motionGroups?.length ?? 0) + (asset ? valueRowsOf(asset).length : 0) ? this.renderDrivers(asset!, controls, clips) : nothing}</div>`}`
   }
 
+  /** The one figure's size: a slider per axis the figure lets change, and what it is at the size tried. */
+  private renderSizes(asset: FigureAsset, size: { x: number; y: number; z: number }) {
+    const say = (key: string, params?: Record<string, string>) => i18next.t(key, params)
+    /* A board sizes a figure by the space it takes: with none declared, its box folds and no size can be tried. */
+    if (!asset.occupancy) return html`<div sizes><p said>${i18next.t('figure.text.preview-needs-space')}</p></div>`
+    return html`<div sizes>
+      ${(['x', 'y', 'z'] as const).map(axis => {
+        const range = sizeRangeOf(asset, axis)
+        if (!range) return nothing
+        return html`<label>
+          <span>${i18next.t(`figure.label.measure-${axis}`)}</span>
+          <input type="range" aria-label=${i18next.t(`figure.label.measure-${axis}`)} min=${range.min} max=${range.max} step="any" .value=${String(size[axis])}
+            @input=${(e: Event) => this.tryAxis(axis, (e.target as HTMLInputElement).valueAsNumber)}
+            @change=${() => this.fitView()} />
+          <output>${Math.round(size[axis]).toLocaleString()}</output>
+        </label>`
+      })}
+      <p said>${previewSizeWordsOf(asset, size, say)}</p>
+    </div>`
+  }
+
+  private chooseWay(way: 'one' | 'eight') {
+    if (way === this.way) return
+    this.way = way
+    this.standUp()
+  }
+
+  /** The one figure at another size on an axis, held to what the figure declares, its centre kept on the board's. */
+  private tryAxis(axis: 'x' | 'y' | 'z', value: number) {
+    const asset = this.asset
+    const used = asset ? sizeWithinRange(asset, axis, value) : undefined
+    if (used === undefined || !this.trying) return
+    this.trying = { ...this.trying, [axis]: used }
+    const instance = this.scene?.root?.components?.[0] as { model?: { width?: number; height?: number }; set(props: Record<string, unknown>): void } | undefined
+    instance?.set(axis === 'x' ? { width: used } : axis === 'y' ? { depth: used } : { height: used })
+    const { width = 0, height = 0 } = instance?.model ?? {}
+    instance?.set({ left: this.board.width / 2 - width / 2, top: this.board.height / 2 - height / 2 })
+  }
+
+  /** The figure as stretched, whole in view: done once the slider is let go, so the ground does not slide under a drag. */
+  private fitView() {
+    this.scene?.fit?.('ratio')
+    this.scene?.root?.fitCameraToModel?.()
+  }
+
   private renderDrivers(asset: FigureAsset, controls: FigureAsset['document']['model']['inputs'], clips: string[]) {
     const changed = controls.filter(c => this.giving[c.id] !== undefined && this.giving[c.id] !== asset.stateDefaults[c.id])
     return html`<div clips>
@@ -464,7 +570,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       this.teardown()
       return
     }
-    const signature = JSON.stringify([asset, view.placement, view.ceilingHeight])
+    const signature = JSON.stringify([asset, view.placement, view.ceilingHeight, this.way])
     if (this.scene && this.standing === signature) return
     try {
       compileFigureAsset(asset)
@@ -490,12 +596,15 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       this.valuing = {}
       registerFigure(type, asset)
       this.registered = type
-      const { components, board } = previewInstances(type, size)
+      const { components, board } = this.way === 'one' ? previewOneInstance(type, size) : previewInstances(type, size)
+      this.board = board
+      this.trying = this.way === 'one' ? { ...size } : undefined
       const model = {
         type: 'model-layer',
         width: board.width,
         height: board.height,
-        depth: previewBoardDepth({ placement: asset.placement, base: { y: size.y } }, view.ceilingHeight, PREVIEW_FACTOR),
+        /* As tall as the figure may grow: twice for the eight, the declared height range's top for the one. */
+        depth: previewBoardDepth({ placement: asset.placement, base: { y: size.y } }, view.ceilingHeight, this.way === 'one' ? Math.max(1, (sizeRangeOf(asset, 'y')?.max ?? size.y) / size.y) : PREVIEW_FACTOR),
         threed: true,
         sky: 'color',
         ...sceneLook(view),

package/client/modeller/figure-properties.ts

@@ -174,7 +174,6 @@ export class FigureProperties extends localize(i18next)(LitElement) {
             one => html`<option value=${one} ?selected=${one === current}>${i18next.t('figure.label.placement-' + one)}</option>`
           )}
         </select>
-        <small>${i18next.t('figure.text.placement-is-intent')}</small>
       </div>
     `
   }
@@ -212,7 +211,7 @@ export class FigureProperties extends localize(i18next)(LitElement) {
           <button act ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part!, face })}>
             <md-icon>check</md-icon>${i18next.t('figure.button.set-mounting-face')}
           </button>
-          <button act ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>
+          <button quiet ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>
             <md-icon>close</md-icon>${i18next.t('figure.button.clear-mounting-face')}
           </button>
         </div>

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

@@ -30,6 +30,11 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
     :host {
       display: block;
     }
+    /* Inside the properties' 「더 보기」 fold: one group among the fold's, not a section of the side of its own. */
+    :host([embedded]) section {
+      padding: 0;
+      border-bottom: 0;
+    }
     div[row] {
       display: flex;
       gap: 6px;

package/client/modeller/figure-verdict.ts

@@ -421,6 +421,9 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
       else this.measureTimer = setTimeout(() => this.measure(), MEASURE_SETTLE_MS)
     }
     if (changed || changes.has('figureId') || changes.has('figureType')) this.schedule()
+    /* What blocks release, told to the page so the bar can say it beside 「발행」 (first 15 minutes, 2026-10-16). */
+    if (changes.has('inspection'))
+      this.dispatchEvent(new CustomEvent('release-verdict', { detail: { blocking: (this.inspection?.findings ?? []).filter(finding => finding.blocking) } }))
   }
 
   private measure() {
@@ -762,19 +765,23 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
         ${blocking.length
           ? html`<ul gate>
               <li head>${i18next.t('figure.text.must-fix-to-release')}</li>
-              ${blocking.map(finding => renderGateFinding(finding, true, this.actionsFor(finding.code)))}
+              ${blocking.map(finding => renderGateFinding(finding, true, this.actionsFor(finding.code), this.partNames()))}
             </ul>`
           : nothing}
         ${advisory.length
           ? html`<ul gate>
               <li head quiet>${i18next.t('figure.text.does-not-block')}</li>
-              ${advisory.map(finding => renderGateFinding(finding, false))}
+              ${advisory.map(finding => renderGateFinding(finding, false, nothing, this.partNames()))}
             </ul>`
           : nothing}
       </section>
     `
   }
 
+  private partNames(): string[] {
+    return (this.revision?.asset.appearance ?? []).map(look => look.target)
+  }
+
   /** The same way out the release panel offers for the same two findings — declare the space from the parts. */
   private actionsFor(code: string) {
     if (code !== 'part-outside-occupancy' && code !== 'occupancy-undeclared') return nothing

package/client/modeller/gate-findings.ts

@@ -2,6 +2,7 @@ import { css, html, nothing, type TemplateResult } from 'lit'
 import { i18next } from '@operato/i18n'
 
 import type { FigureGateFinding } from '../types.js'
+import { affectedPartsOf } from './affected-parts.js'
 
 /**
  * One release-gate finding as a line on screen — the measured fact, where, why it matters, and what to change.
@@ -11,15 +12,22 @@ import type { FigureGateFinding } from '../types.js'
  * in each would drift the first time one of them is touched. The caller passes its own action buttons, because
  * what can be done about a finding depends on the screen it is shown on.
  */
-export function renderGateFinding(finding: FigureGateFinding, blocking: boolean, actions: unknown = nothing): TemplateResult {
+export function renderGateFinding(
+  finding: FigureGateFinding,
+  blocking: boolean,
+  actions: unknown = nothing,
+  /** The figure's part names, when the screen has the figure: only these are shown as affected. */
+  parts?: readonly string[]
+): TemplateResult {
+  const affected = finding.at ? (parts ? affectedPartsOf(finding.at, parts) : [finding.at]) : []
   return html`
     <li finding ?blocking=${blocking}>
       <span msg>${finding.message}</span>
-      ${finding.at
+      ${affected.length
         ? html`
             <details affected>
               <summary>${i18next.t('figure.text.show-affected-parts')}</summary>
-              <code where>${finding.at}</code>
+              <span where>${affected.join(' · ')}</span>
             </details>
           `
         : nothing}
@@ -68,7 +76,7 @@ export const gateFindingStyles = css`
       background-color: var(--md-sys-color-error-container);
     }
 
-    li[finding] code[where] {
+    li[finding] [where] {
       font-family: var(--mono-font, monospace);
       font-size: 0.68rem;
       opacity: 0.85;