@things-factory/figure-ui 10.1.169 → 10.1.170

package/client/modeller/affected-parts.ts

@@ -0,0 +1,11 @@
+/**
+ * The parts a release finding points at, by the author's names. The server's `at` lists the first word of each path it
+ * could not prove -- a part's name, or a section of the format such as 「occupancy」 -- and the screen showed it as it came
+ * (「occupancy · roller-row-1-roller」, user 2026-10-16). Only the figure's own part names are kept.
+ */
+export function affectedPartsOf(at: string, parts: readonly string[]): string[] {
+  return at
+    .split('·')
+    .map(word => word.trim())
+    .filter(word => parts.includes(word))
+}

package/client/modeller/canvas.ts

@@ -5,7 +5,7 @@ import { create, Model, niceGridStep } from '@hatiolab/things-scene'
 import type { GizmoReach } from './gizmo.js'
 import type { FigureRenderPart } from './renderer.js'
 import { DEFAULT_VIEW, sceneLook, WORKBENCH, type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js'
-import { boardFor, changedKeys, componentOf, gizmoResultOf, type Board, type ScaleAnchor } from './stage-model.js'
+import { boardFor, changedKeys, componentOf, gizmoResultOf, needsRefit, type Board, type ScaleAnchor } from './stage-model.js'
 import { JOINT_FAN } from './joint-fan.js'
 import { SLOT_MARK } from './slot-layout-host.js'
 import { PREVIEW, TARGET_FACE } from './command-preview.js'
@@ -48,6 +48,9 @@ interface SceneHandle {
   root?: SceneLayer
 }
 
+/* How long the figure stands still before the camera judges whether to follow it. */
+const REFIT_SETTLE_MS = 400
+
 /* The fan's colour when the figure's palette names no accent. */
 const FAN_COLOUR = '#ff8a00'
 
@@ -103,6 +106,9 @@ export class FigureCanvas extends LitElement {
 
   private scene?: SceneHandle
   private board?: Board & { depth: number }
+  /** The figure's reach when the view was last fitted to it. */
+  private fittedFor?: Board & { depth: number }
+  private refitTimer?: ReturnType<typeof setTimeout>
   private standingFor?: string
   private watcher?: ResizeObserver
   /** Set while this canvas writes to components, so the scene's echo of it is not taken for a drag. */
@@ -134,6 +140,7 @@ export class FigureCanvas extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback()
+    clearTimeout(this.refitTimer)
     this.watcher?.disconnect()
     this.watcher = undefined
     this.teardown()
@@ -162,6 +169,7 @@ export class FigureCanvas extends LitElement {
 
   /** The whole figure in view: the board's fit, then the 3D camera's own. */
   fit() {
+    this.fittedFor = boardFor(this.parts)
     this.scene?.fit?.('ratio')
     this.scene?.root?.fitCameraToModel?.()
   }
@@ -186,6 +194,12 @@ export class FigureCanvas extends LitElement {
       */
       if (outgrown) this.grow(needed)
       this.sync()
+      /*
+        Grown or shrunk far past the view (a size typed in): the camera follows, once the figure has settled. A value is
+        drawn as it is typed -- 「3」, 「30」, 「300」 on the way to 3000 -- so the reach is judged after the last change.
+      */
+      clearTimeout(this.refitTimer)
+      if (this.parts.length) this.refitTimer = setTimeout(() => needsRefit(this.fittedFor, boardFor(this.parts)) && this.fit(), REFIT_SETTLE_MS)
       return
     }
     this.teardown()

package/client/modeller/editor-styles.ts

@@ -3,6 +3,7 @@ import { css } from 'lit'
 /** The modeller editor's own styles: the bar's tools, the panes, the start card, the side's tabs and panels. */
 export const EditorStyles = css`
   :host {
+    position: relative;
     display: flex;
     flex-direction: column;
     min-height: 0;
@@ -16,6 +17,7 @@ export const EditorStyles = css`
      fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */
   ox-canvas-bar button[mode] {
     height: 28px;
+    border: 1px solid transparent;
     padding: 0 10px;
     border-radius: 999em;
     border-color: transparent;
@@ -250,6 +252,63 @@ export const EditorStyles = css`
   [off] {
     display: none !important;
   }
+  /* The part's own numbers inside a group the links draw (size, place): one column, the panel's gap. */
+  div[group-fields] {
+    display: grid;
+    gap: 8px;
+  }
+  /* A folded group (capability, 「더 보기」): its title is the fold's handle, at the title's size. */
+  section[more] > details > summary,
+  section[capability] > details > summary {
+    padding: 0;
+  }
+  section[more] > details > summary > h3,
+  section[capability] > details > summary > h3 {
+    margin: 0;
+  }
+  div[more-body] {
+    display: grid;
+    gap: 16px;
+    margin-top: 12px;
+  }
+  /*
+    The view settings and the release history, opened from the bar over the right of the work: neither is about the
+    part chosen, so neither takes a tab beside the part's (chief architect 2026-10-16).
+  */
+  :host {
+    position: relative;
+  }
+  div[bar-overlay-panel] {
+    position: absolute;
+    top: var(--figure-bar-height, 44px);
+    right: 8px;
+    z-index: 5;
+    display: flex;
+    flex-direction: column;
+    width: min(360px, calc(100% - 16px));
+    max-height: calc(100% - var(--figure-bar-height, 44px) - 16px);
+    background: var(--md-sys-color-surface-container-lowest);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 8px;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
+  }
+  div[overlay-head] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 8px 8px 12px;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  }
+  div[overlay-head] h3 {
+    margin: 0;
+  }
+  div[overlay-head] button[quiet] {
+    margin-left: 0;
+  }
+  div[overlay-body] {
+    min-height: 0;
+    overflow: auto;
+  }
   /* Which part the panel speaks of. */
   div[subject] {
     position: sticky;
@@ -277,19 +336,52 @@ export const EditorStyles = css`
   div[subject-summary] small {
     color: var(--md-sys-color-on-surface-variant);
   }
+  /*
+    No rule here draws every button as a box: the side's buttons take the shared panel rules (SidePanelStyles), one
+    height with the fields beside them, and only the bar's publish keeps an outline (user 2026-10-16: 「버튼 박스도
+    과하게 사용되어서」 -- a bare 「button」 rule had put a 32px box round every button the editor drew).
+  */
   button {
     font: inherit;
     box-sizing: border-box;
+    color: inherit;
+    min-width: 0;
+    cursor: pointer;
+  }
+  /* What blocks release, beside 「발행」: one red word button, and its list under the bar. */
+  ox-canvas-bar button[release-blocked] {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
     height: 32px;
-    border: 1px solid var(--md-sys-color-outline-variant);
+    padding: 0 10px;
+    border: none;
     border-radius: 6px;
+    color: var(--md-sys-color-on-error-container);
+    background: var(--md-sys-color-error-container);
+  }
+  ox-canvas-bar button[release-blocked] md-icon {
+    --md-icon-size: 18px;
+  }
+  div[release-blockers] {
+    position: absolute;
+    top: 46px;
+    right: 8px;
+    z-index: 6;
+    width: min(340px, calc(100% - 16px));
+    padding: 8px 10px 10px;
+    box-sizing: border-box;
     background: var(--md-sys-color-surface);
-    color: inherit;
-    padding: 0 8px;
-    min-width: 0;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 8px;
+    box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);
   }
-  button {
-    cursor: pointer;
+  ox-canvas-bar button[publish] {
+    height: 32px;
+    padding: 0 8px;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 6px;
+    background: var(--md-sys-color-surface);
   }
   button:disabled {
     opacity: 0.45;

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