@things-factory/figure-ui 10.1.168 → 10.1.170

package/client/modeller/editor.ts

@@ -55,7 +55,9 @@ 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 { occupancyFromParts, roomRefitRowsOf } from './occupancy.js'
+import { gateFindingStyles, renderGateFinding } from './gate-findings.js'
+import type { FigureGateFinding } from '../types.js'
 import { editRefusalOf, inDeclaredRoom, narrowingRetryOf, partNameRefusalOf, partRefusalOf, placedRefusalOf, recipeRefusalOf, removalNoticeOf } from './refusals.js'
 import type { FigureRenderPart } from './renderer.js'
 import type { FigureBudgetLine } from './maturity.js'
@@ -66,13 +68,22 @@ 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'
+import { groupMenu, GroupMenuStyles } from './group-menu.js'
 
 
 /**
- * The side's tabs: properties, what it does (places), motion, its data (ADR-0051), the verdict, the view, the release history. A figure-level tab (verdict, history) gives way to properties when a part is chosen; a tab about
+ * The side's four tabs (chief architect 2026-10-16): properties, motion, its data (ADR-0051), the verdict. What it does
+ * (its places) is a group of the properties; the view is a menu over the canvas and the release history opens from the
+ * bar, since neither is about the part chosen. The verdict gives way to properties when a part is chosen; a tab about
  * parts keeps showing the newly chosen part.
  */
-type SideTab = 'properties' | 'capability' | 'motion' | 'data' | 'verdict' | 'view' | 'history'
+type SideTab = 'properties' | 'motion' | 'data' | 'verdict'
+
+/** What opens over the work from the bar: the view settings or the release history, one at a time. */
+type BarOverlay = 'view' | 'history'
+
+/** The person's own fold of the properties' 「더 보기」, kept in their browser. */
+const MORE_OPEN_KEY = 'figure-properties-more-open'
 
 /** Product editor surface. The injected session is shared by page persistence and AI commands. */
 const NO_OVERHANG = { words: NO_WORDS, note: NO_WORDS }
@@ -80,10 +91,16 @@ const NO_OVERHANG = { words: NO_WORDS, note: NO_WORDS }
 @customElement('figure-editor')
 export class FigureEditor extends LitElement {
   /* The operato scrollbar, as every scrolling panel of the app has it -- the side panel scrolled with the browser's own. */
-  static styles = [ScrollbarStyles, SidePanelStyles, EditorStyles]
+  static styles = [ScrollbarStyles, SidePanelStyles, gateFindingStyles, GroupMenuStyles, EditorStyles]
   @property({ attribute: false }) session?: FigureProductSession
   /** The saved figure's state and version, as the server gave them (the page reads the row). */
   @property({ attribute: false }) releaseState?: { state?: 'draft' | 'released'; version: number }
+  /**
+   * What blocks release now, as the page's verdict heard it: said beside 「발행」 with the way out at hand, so an author
+   * does not find it at the foot of the verdict tab (first 15 minutes, 2026-10-16; chief architect, Q1 B).
+   */
+  @property({ attribute: false }) releaseBlockers: FigureGateFinding[] = []
+  @state() private blockersOpen = false
   /** The recipe templates (ADR-0095), read by the page from the server. */
   @property({ attribute: false }) templates: RecipeTemplate[] = []
   /** Reads a template's guide; given by the page. */
@@ -115,6 +132,28 @@ export class FigureEditor extends LitElement {
   /** The same link offered again with the size range narrowed, after a link the declared range could not hold. */
   @state() private retry?: Retry
   @state() private tab: SideTab = 'properties'
+  /** The view settings or the release history, open over the work from the bar. */
+  @state() private overlay?: BarOverlay
+  /** The capability group open: the canvas marks the places only while their group is in sight. */
+  @state() private capabilityOpen = false
+  /** 「더 보기」 open, as this person left it last (chief architect 2026-10-16: kept per person). */
+  @state() private moreOpen = FigureEditor.storedMoreOpen()
+  private static storedMoreOpen(): boolean {
+    try {
+      return localStorage.getItem(MORE_OPEN_KEY) === '1'
+    } catch {
+      return false
+    }
+  }
+  private setMoreOpen(open: boolean) {
+    if (open === this.moreOpen) return
+    this.moreOpen = open
+    try {
+      localStorage.setItem(MORE_OPEN_KEY, open ? '1' : '0')
+    } catch {
+      /* A browser that keeps nothing folds it again next time. */
+    }
+  }
   /** The frame the bar folds - found after the first render, since the bar is drawn before it. */
   @state() private panes?: OxThreePane
   /** What the middle shows: the parts being edited, or the figure placed on a board at eight sizes. */
@@ -713,7 +752,7 @@ export class FigureEditor extends LitElement {
     }
   }
   /** Size response, fastening and motion for the selected part, as authoring commands. */
-  private renderLinks(unavailable: boolean, section: 'shape' | 'places' | 'motion') {
+  private renderLinks(unavailable: boolean, section: 'shape' | 'places' | 'motion', slotted: unknown = nothing) {
     const shown = this.shown()
     if (!shown) return null
     return html`<figure-links
@@ -730,7 +769,126 @@ export class FigureEditor extends LitElement {
       @go-fasten=${() => this.goFasten()}
       @preview-command=${(e: CustomEvent) => this.commandPreview.ask(e.detail)}
       @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
-    ></figure-links>`
+    >${slotted}</figure-links>`
+  }
+  /**
+   * A part's groups in one order whatever its state (chief architect 2026-10-16): its size, its place, its row. The links
+   * draw the three groups and their rules; the part's own numbers go into them by slot. A fastened part's place and turn
+   * are its fastening's: the place group says it in one line and the locked cells are not drawn (user 2026-10-16).
+   */
+  private renderPartGroups(shown: FigureRevision | undefined, geometry: readonly { id: string }[], fields: FieldLike[], unavailable: boolean, held?: HeldValues) {
+    const groups = this.withSizeRow(groupFields(fields, this.selected), held)
+    const size = groups.vectors.filter(g => g.kind === 'vector' && g.name === 'size')
+    const place = groups.vectors.filter(g => g.kind === 'vector' && g.name !== 'size')
+    const fastened = !!this.asset()?.joints?.some(j => j.body1.part === ownerOf(this.selected))
+    const placeLocked = fastened && place.every(g => g.kind === 'vector' && (['x', 'y', 'z'] as const).every(axis => !g.cells[axis]))
+    return this.renderLinks(
+      unavailable,
+      'shape',
+      html`${size.length || groups.singles.length
+          ? html`<div slot="size" group-fields>
+              ${size.map(g => this.renderVector(g, unavailable, held))}
+              ${groups.singles.length
+                ? html`<div form>${groups.singles.map(g => (g.kind === 'single' ? this.renderSingle(g.name, g.field, unavailable) : nothing))}</div>`
+                : nothing}
+            </div>`
+          : nothing}
+        ${place.length && !placeLocked
+          ? html`<div slot="place" group-fields>${place.map(g => this.renderVector(g, unavailable, held))}${this.renderHeldAxes(place)}</div>`
+          : nothing}
+        ${this.renderRepeat(shown, geometry, unavailable)}`
+    )
+  }
+  /**
+   * What the figure does -- its places (ADR-0118) -- as a group of the properties, folded: a declaration made once,
+   * whose marks on the canvas show while it is open. A verdict that finds it empty still says where it is.
+   */
+  private renderCapability(asset: FigureAsset | undefined, unavailable: boolean) {
+    return html`<section capability>
+      <details capability-fold ?open=${this.capabilityOpen} @toggle=${(e: Event) => (this.capabilityOpen = (e.target as HTMLDetailsElement).open)}>
+        <summary><h3>${i18next.t('figure.label.tab-capability')}</h3></summary>
+        ${this.selected ? this.renderLinks(unavailable, 'places') : nothing}
+        <figure-capability-panel
+          .asset=${asset}
+          .selected=${this.selected}
+          ?locked=${unavailable}
+          @select-part=${(e: CustomEvent) => this.choose(e.detail.id)}
+          @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
+        ></figure-capability-panel>
+      </details>
+    </section>`
+  }
+  /**
+   * 「더 보기」: what few parts need, folded by default and left as this person last left it (chief architect
+   * 2026-10-16) -- the section, its corners and inside; transparency, glow and segments; the mirrored copy and the
+   * alignment tools.
+   */
+  private renderMore(part: object, palette: Record<string, string>, unavailable: boolean) {
+    const tools = this.renderTools(unavailable)
+    return html`<section more>
+      <details more-fold ?open=${this.moreOpen} @toggle=${(e: Event) => this.setMoreOpen((e.target as HTMLDetailsElement).open)}>
+        <summary><h3>${i18next.t('figure.label.group-more')}</h3></summary>
+        <div more-body>
+          ${tools ? html`<div group-fields>${tools}</div>` : nothing}
+          <figure-section-panel
+            embedded
+            .body=${{ ...part, id: this.selected }}
+            ?locked=${unavailable}
+            .faceMapping=${this.faceMapping?.from === 'panel' ? this.faceMapping.need : undefined}
+            @face-mapped=${(e: CustomEvent) => this.mapFaces(e.detail.remap)}
+            @face-mapping-cancel=${() => (this.faceMapping = undefined)}
+            @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+            @command-live=${(e: CustomEvent) => this.holdAction(e.detail.action)}
+            @section-editor-open=${() => (this.sectionEditing = this.selected)}
+          ></figure-section-panel>
+          <figure-material-panel
+            show="more"
+            .body=${{ ...part, id: this.selected }}
+            .palette=${palette}
+            ?locked=${unavailable}
+            @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
+            @part-live=${(e: CustomEvent) => this.hold({}, e.detail.edit)}
+          ></figure-material-panel>
+        </div>
+      </details>
+    </section>`
+  }
+  /** A bar button that opens the view settings or the release history over the work; pressed while it is open. */
+  private renderOverlayButton(which: BarOverlay, icon: string, label: string, slot?: string) {
+    const open = this.overlay === which
+    return html`<button
+      slot=${slot ?? nothing}
+      tool
+      bar-overlay=${which}
+      aria-pressed=${String(open)}
+      aria-label=${i18next.t(label)}
+      title=${i18next.t(label)}
+      @click=${() => (this.overlay = open ? undefined : which)}
+    >
+      <md-icon>${icon}</md-icon>
+    </button>`
+  }
+  /**
+   * The view settings or the release history, over the work under the bar. Both stay drawn, hidden when closed: the
+   * history keeps what it read, as the tabs kept it. Esc closes it.
+   */
+  private renderOverlay() {
+    const close = () => (this.overlay = undefined)
+    const panel = (which: BarOverlay, label: string, body: unknown) => html`<div
+      bar-overlay-panel=${which}
+      role="dialog"
+      aria-label=${i18next.t(label)}
+      ?off=${this.overlay !== which}
+      @keydown=${(e: KeyboardEvent) => e.key === 'Escape' && (e.stopPropagation(), close())}
+    >
+      <div overlay-head>
+        <h3>${i18next.t(label)}</h3>
+        <button quiet aria-label=${i18next.t('figure.button.close')} title=${i18next.t('figure.button.close')} @click=${close}><md-icon>close</md-icon></button>
+      </div>
+      <div overlay-body>${body}</div>
+    </div>`
+    return html`${panel('view', 'figure.label.tab-environment', html`<figure-settings .view=${this.view} @update-view=${(e: CustomEvent) => this.setView(e.detail.view)}></figure-settings>`)}
+      ${panel('history', 'figure.label.history', html`<slot name="history"></slot>`)}`
   }
   /**
    * The face a size drag keeps for the selected part, figure-model's rule (`figureScaleAnchorOf`): the gizmo shows it
@@ -789,6 +947,7 @@ export class FigureEditor extends LitElement {
     this.retry = undefined
     this.notice = ''
     const hadSize = this.hasSize()
+    const hadSpace = !!this.shown()?.asset.occupancy
     try {
       this.session!.command(action)
       this.error = ''
@@ -796,7 +955,9 @@ export class FigureEditor extends LitElement {
       /* What the command did besides what was asked, in one line: the figure's size declared to follow (ADR ruling Q1). */
       if (action.kind === 'follow-size' && !hadSize) {
         const size = this.designValues()
-        this.notice = i18next.t('figure.text.size-declared-to-follow', {
+        /* The same step may have fitted the space the figure takes to its parts (figure-model, ruling 2026-10-16 Q1 A): one line says both. */
+        const spaceToo = !hadSpace && !!this.shown()?.asset.occupancy
+        this.notice = i18next.t(spaceToo ? 'figure.text.size-and-space-declared-to-follow' : 'figure.text.size-declared-to-follow', {
           x: Math.round(size['size.x'] ?? 0).toLocaleString(),
           y: Math.round(size['size.y'] ?? 0).toLocaleString(),
           z: Math.round(size['size.z'] ?? 0).toLocaleString()
@@ -1042,8 +1203,12 @@ export class FigureEditor extends LitElement {
     const longest = model.inputs.find(i => i.id === lengthRef)?.max
     const limit = model.constants.find(c => c.id === layout?.args[6])?.value
     const field = { id: own, unit: 'mm' as const, role: 'design', value: pitch ?? 0 }
-    return html`<section>
-      <h3>${i18next.t('figure.label.repeat')}</h3>
+    const removable = !!asset.joints?.some(j => j.body1.part === this.selected && j.repeat)
+    return html`<section slot="row" row>
+      <h3>
+        ${i18next.t('figure.label.repeat')}
+        ${groupMenu([{ label: i18next.t('figure.button.remove-repeat'), icon: 'close', disabled: unavailable || !removable, run: () => this.run(() => this.session!.command({ kind: 'remove-repeat', part: this.selected })) }])}
+      </h3>
       <div inline-field><label>${i18next.t('figure.label.repeat-axis')}</label><span value>${axis.toUpperCase()}</span></div>
       <div inline-field><label>${i18next.t('figure.label.repeat-count')}</label><span value>${repeat.count}</span></div>
       <div inline-field>
@@ -1069,11 +1234,6 @@ export class FigureEditor extends LitElement {
           : i18next.t(fits ? 'figure.text.repeat-fits-length' : 'figure.text.repeat-fixed-count')}
       </p>
       ${this.renderPublicPitch(asset, pitch ?? 0, unavailable)}
-      ${asset.joints?.some(j => j.body1.part === this.selected && j.repeat)
-        ? html`<button act ?disabled=${unavailable} @click=${() => this.run(() => this.session!.command({ kind: 'remove-repeat', part: this.selected }))}>
-            <md-icon>close</md-icon>${i18next.t('figure.button.remove-repeat')}
-          </button>`
-        : nothing}
     </section>`
   }
   /** The selected row as it is drawn now, read by figure-model: nothing when it cannot be read. */
@@ -1197,9 +1357,25 @@ export class FigureEditor extends LitElement {
     if (state === 'released') return i18next.t('figure.text.release-state-released', { version: String(version) })
     return version > 0 ? i18next.t('figure.text.release-state-draft-over', { version: String(version) }) : i18next.t('figure.text.release-state-draft-new')
   }
-  /** To the release that exists: the history tab's release section, not a second one here. */
+  /** The findings that block release, under the bar beside 「발행」, each with the way out the verdict tab offers for it. */
+  private renderReleaseBlockers(asset: FigureAsset | undefined, unavailable: boolean) {
+    const parts = (asset?.appearance ?? []).map(look => look.target)
+    const way = (code: string) =>
+      (code === 'occupancy-undeclared' || code === 'part-outside-occupancy') && asset && parts.length
+        ? html`<button act ?disabled=${unavailable} @click=${() => this.linkCommand(occupancyFromParts(asset))}>
+            <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}
+          </button>`
+        : nothing
+    return html`<div release-blockers role="dialog" aria-label=${i18next.t('figure.text.must-fix-to-release')} @keydown=${(e: KeyboardEvent) => e.key === 'Escape' && (this.blockersOpen = false)}>
+      <ul gate>
+        <li head>${i18next.t('figure.text.must-fix-to-release')}</li>
+        ${this.releaseBlockers.map(finding => renderGateFinding(finding, true, way(finding.code), parts))}
+      </ul>
+    </div>`
+  }
+  /** To the release that exists: the history's release section, opened from the bar, not a second one here. */
   private goRelease = async () => {
-    this.tab = 'history'
+    this.overlay = 'history'
     await this.updateComplete
     await this.querySelector<HTMLElement & { showRelease?: () => Promise<void> }>('figure-history-panel')?.showRelease?.()
   }
@@ -1289,7 +1465,7 @@ export class FigureEditor extends LitElement {
     /* A copy on the canvas selects its repeat: the part the author made. */
     this.selected = id ? ownerOf(id) : id
     this.faceMapping = undefined
-    if (id && (this.tab === 'verdict' || this.tab === 'view' || this.tab === 'history')) this.tab = 'properties'
+    if (id && this.tab === 'verdict') this.tab = 'properties'
   }
   private asset(): FigureAsset | undefined {
     return this.shown()?.asset
@@ -1304,6 +1480,8 @@ export class FigureEditor extends LitElement {
   }
   updated(changed: PropertyValues<this>) {
     super.updated?.(changed)
+    /* Nothing blocks release any more: the list under the bar closes, and opens fresh when something does again. */
+    if (changed.has('releaseBlockers') && !this.releaseBlockers.length && this.blockersOpen) this.blockersOpen = false
     this.refusals.tell(changed)
     this.panelMemory.restore(() => this.selected)
     const panes = this.renderRoot.querySelector<OxThreePane>('ox-three-pane') ?? undefined
@@ -1381,7 +1559,6 @@ export class FigureEditor extends LitElement {
               </button>`
             )}
           </div>
-          <small>${i18next.t('figure.text.placement-is-intent')}</small>
         </section>
         <section>
           <h3>${i18next.t('figure.label.start-shape')}</h3>
@@ -1497,6 +1674,7 @@ export class FigureEditor extends LitElement {
         @canvas-fit=${() => this.renderRoot.querySelector<FigureCanvas>('figure-canvas')?.fit()}
       >
         ${this.renderGizmoTools(!unavailable && this.middle === 'edit')}
+        ${this.renderOverlayButton('view', 'wb_sunny', 'figure.label.tab-environment')}
         ${(['edit', 'preview'] as const).map(
           mode => html`<button slot="mode" mode aria-pressed=${String(this.middle === mode)} title=${i18next.t('figure.text.mode-' + mode + '-explained')} @click=${() => (this.middle = mode)}>
             ${i18next.t('figure.label.mode-' + mode)}
@@ -1504,9 +1682,16 @@ export class FigureEditor extends LitElement {
         )}
         <span slot="status" class="status" role="status" ?dirty=${status === 'figure.text.unsaved-changes'}>${i18next.t(status)}</span>
         <span slot="status" release-state>${this.releaseWords(view)}</span>
+        ${this.renderOverlayButton('history', 'history', 'figure.label.history', 'commit')}
+        ${this.releaseBlockers.length
+          ? html`<button slot="commit" release-blocked aria-expanded=${String(this.blockersOpen)} @click=${() => (this.blockersOpen = !this.blockersOpen)}>
+              <md-icon>error</md-icon>${i18next.t('figure.button.release-blocked', { count: this.releaseBlockers.length })}
+            </button>`
+          : nothing}
         <button slot="commit" publish ?disabled=${!view.id} title=${view.id ? '' : i18next.t('figure.text.save-the-figure-before-releasing')} @click=${this.goRelease}>${i18next.t('figure.button.release')}</button>
         <button slot="commit" save ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}>${i18next.t('figure.button.save')}</button>
       </ox-canvas-bar>
+      ${this.blockersOpen && this.releaseBlockers.length ? this.renderReleaseBlockers(asset, unavailable) : nothing}
       ${this.catalogOpen
         ? html`<figure-recipe-catalog
             .templates=${this.templates}
@@ -1573,7 +1758,7 @@ export class FigureEditor extends LitElement {
           .fan=${this.fanOf(shown, live)}
           .ghost=${this.previewShown().ghost}
           .highlight=${this.previewShown().highlight}
-          .marks=${this.tab === 'capability' ? this.slotMarks(view, asset) : NO_MARKS}
+          .marks=${this.tab === 'properties' && this.capabilityOpen ? this.slotMarks(view, asset) : NO_MARKS}
           .palette=${view.palette ?? {}}
           .context=${view.context ?? ''}
           .selected=${this.selected}
@@ -1587,12 +1772,9 @@ export class FigureEditor extends LitElement {
         <aside slot="end">
           <div tabs>
             ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}
-            ${this.renderTab('capability', 'conveyor_belt', i18next.t('figure.label.tab-capability'))}
             ${this.renderTab('motion', 'animation', i18next.t('figure.label.motion'))}
             ${this.renderTab('data', 'sensors', i18next.t('figure.label.tab-data'))}
             ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'), this.instances)}
-            ${this.renderTab('view', 'wb_sunny', i18next.t('figure.label.tab-environment'))}
-            ${this.renderTab('history', 'history', i18next.t('figure.label.history'))}
           </div>
           <slot name="notice"></slot>
           <div panel ?off=${tab !== 'properties'}>
@@ -1612,27 +1794,17 @@ export class FigureEditor extends LitElement {
                     </div>
                     ${this.renderRepeatNote(view.geometry)}
                   </section>
-                  ${this.renderRepeat(shown, view.geometry, unavailable)}
-                  ${this.renderGroups(this.withSizeRow(groupFields(partFields, this.selected), held), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable), held)}
+                  ${this.renderPartGroups(shown, view.geometry, partFields, unavailable, held)}
                   ${roomFields.length ? this.renderRoomOnly(roomFields, unavailable) : nothing}
-                  ${this.renderLinks(unavailable, 'shape')}
-                  <figure-section-panel
-                    .body=${{ ...part, id: this.selected }}
-                    ?locked=${unavailable}
-                    .faceMapping=${this.faceMapping?.from === 'panel' ? this.faceMapping.need : undefined}
-                    @face-mapped=${(e: CustomEvent) => this.mapFaces(e.detail.remap)}
-                    @face-mapping-cancel=${() => (this.faceMapping = undefined)}
-                    @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
-                    @command-live=${(e: CustomEvent) => this.holdAction(e.detail.action)}
-                    @section-editor-open=${() => (this.sectionEditing = this.selected)}
-                  ></figure-section-panel>
                   <figure-material-panel
                     .body=${{ ...part, id: this.selected }}
                     .palette=${view.palette ?? {}}
                     ?locked=${unavailable}
                     @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
                     @part-live=${(e: CustomEvent) => this.hold({}, e.detail.edit)}
-                  ></figure-material-panel>`
+                  ></figure-material-panel>
+                  ${this.renderCapability(asset, unavailable)}
+                  ${this.renderMore(part, view.palette ?? {}, unavailable)}`
               : view.geometry.length === 0
                 ? html`${this.renderSubject()}<section empty-figure>
                     <p>${i18next.t('figure.text.empty-figure-next')}</p>
@@ -1643,18 +1815,8 @@ export class FigureEditor extends LitElement {
                   </section>`
                 : html`${this.renderSubject()}<slot name="figure"></slot>
                   ${this.renderGroups(groupFields(common), 'figure.label.group-figure-size', 'figure.label.design-inputs', unavailable)}
-                  ${this.renderInstanceRange(shown, unavailable)}`}
-          </div>
-          <div panel ?off=${tab !== 'capability'}>
-            ${this.renderSubject()}
-            ${this.selected && part ? this.renderLinks(unavailable, 'places') : null}
-            <figure-capability-panel
-              .asset=${asset}
-              .selected=${this.selected}
-              ?locked=${unavailable}
-              @select-part=${(e: CustomEvent) => this.choose(e.detail.id)}
-              @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
-            ></figure-capability-panel>
+                  ${this.renderInstanceRange(shown, unavailable)}
+                  ${this.renderCapability(asset, unavailable)}`}
           </div>
           <div panel ?off=${tab !== 'motion'}>
             ${this.renderSubject()}
@@ -1672,12 +1834,9 @@ export class FigureEditor extends LitElement {
             ></figure-data-panel>
           </div>
           <div panel flush ?off=${tab !== 'verdict'}><slot name="verdict"></slot></div>
-          <div panel flush ?off=${tab !== 'view'}>
-            <figure-settings .view=${this.view} @update-view=${(e: CustomEvent) => this.setView(e.detail.view)}></figure-settings>
-          </div>
-          <div panel flush ?off=${tab !== 'history'}><slot name="history"></slot></div>
         </aside>
-      </ox-three-pane>`
+      </ox-three-pane>
+      ${this.renderOverlay()}`
   }
   /** Position, rotation and size as rows of three cells; the shape's own measures one to a line, under their title. */
   private renderGroups(

package/client/modeller/fasten-geometry.ts

@@ -185,3 +185,22 @@ export function screenOf(axes: readonly [Axis, Axis]): { h: Axis; v: Axis; sign:
   const v = axes.find(a => a !== h)!
   return { h, v, sign: { x: 1, y: 1, z: 1, [v]: v === 'y' ? -1 : 1 } as Record<Axis, 1 | -1> }
 }
+
+/**
+ * Where the fastening drawing writes its two names so neither lies over the other (user 2026-10-16: 「roller」 over the
+ * roller's thin bar, and 「frame 윗면 2000 × 600」 cut by it). The face's name stands above the face, inside its top edge
+ * only when the face fills the drawing. The part's name stands in the part when the part is wide and tall enough for it,
+ * else just under it -- above it when the drawing ends first. Widths are estimated: 7 px a letter at 11-12 px.
+ */
+export function fastenLabelsOf(
+  face: { x: number; y: number; w: number; h: number },
+  part: { x: number; y: number; w: number; h: number },
+  partName: string,
+  height: number
+): { face: { x: number; y: number }; part: { x: number; y: number; inside: boolean } } {
+  const facePlace = face.y >= 16 ? { x: face.x, y: face.y - 5 } : { x: face.x + 4, y: face.y + 14 }
+  const fits = part.w >= partName.length * 7 + 8 && part.h >= 16
+  if (fits) return { face: facePlace, part: { x: part.x + part.w / 2, y: part.y + part.h / 2 + 4, inside: true } }
+  const below = part.y + part.h + 14
+  return { face: facePlace, part: { x: part.x + part.w / 2, y: below <= height - 20 ? below : part.y - 5, inside: false } }
+}

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