@things-factory/figure-ui 10.1.181 → 10.1.185

package/client/modeller/figure-properties.ts

@@ -1,38 +1,35 @@
 import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
 
 import { i18next, localize } from '@operato/i18n'
-import { FIGURE_FACES } from '@hatiolab/figure-model'
-import type { FigureAuthoringAction, FigureFace } from '@hatiolab/figure-model'
+import type { FigureAuthoringAction } from '@hatiolab/figure-model'
 
-import { occupancyFromParts } from './occupancy.js'
 import { tagsOf, figureFigureFacts, type Placement, type FigureFigureFacts } from './figure-facts.js'
-import { offeredMountingOf } from './mounting-part.js'
 import type { FigureRevision } from './revision.js'
 import { figurePropertySections } from './property-sections.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { ScrollbarStyles } from '@operato/styles'
 
 const PLACEMENTS: Placement[] = ['floor', 'ceiling', 'center', 'wall']
-const FACES = Object.keys(FIGURE_FACES) as FigureFace[]
 
 /**
  * 속성 — the modeller's figure properties.
  *
- * The tab opens with what the figure is: its name, the face it is placed by, the room it takes up, where the
- * catalogue files it.
+ * The tab opens with what the figure is: its name, where it stands, where the catalogue files it.
+ *
+ * Nothing here is set up before work can go on (user 2026-10-18, after a walk without it). The room the figure
+ * takes up is declared where release asks for it, from the parts -- the bar's blockers and the verdict offer it;
+ * whether the figure meets its plane is said by the release check from the parts, with no face to name. A mounting
+ * face named already (by the assistant, or before) is shown with the way to take it off, and nothing more.
  *
  * Two kinds of change leave this tab, and it does neither itself:
- *  - `command` carries an authoring command (rename, declare the room, the mounting face). The page runs it
- *    through the session, so it is one step of the same undo history as every other edit, and is saved with it.
+ *  - `command` carries an authoring command (rename, where it stands, taking the mounting face off). The page runs
+ *    it through the session, so it is one step of the same undo history as every other edit, and is saved with it.
  *  - `catalog` carries a change to the row (category, tags). Those are not in the asset; the page writes them
  *    to the saved row at once, so they need a saved figure.
- *
- * Not here yet, because has no place for them: editing the declared room by hand (declares it from the
- * parts, as graph expressions), and the detail level. Both wait on a ruling.
  */
 @customElement('figure-properties')
 export class FigureProperties extends localize(i18next)(LitElement) {
@@ -48,16 +45,12 @@ export class FigureProperties extends localize(i18next)(LitElement) {
       gap: 6px;
       align-items: center;
     }
-    div[row] > select {
+    /* What is named, then the way to take it off at the line's end, as wide as its words. */
+    div[row] > span {
       flex: 1;
     }
-    /* Words as wide as themselves (side-panel-styles' action): stretched over the row, their label floated in the middle. */
-    div[row] > button[act] {
+    div[row] > button[quiet] {
       flex: none;
-      width: auto;
-    }
-    div[row] > span {
-      flex: 1;
     }
   `]
 
@@ -69,10 +62,6 @@ export class FigureProperties extends localize(i18next)(LitElement) {
   /** The categories the server allows (LV figure-server design G5): chosen from, and fixed once set. Null: free text. */
   @property({ attribute: false }) figureCategories?: string[] | null
   @property({ type: Array }) figureTags?: string[]
-  /** The part and face picked for the mounting face, before 「이 면으로」 is pressed. */
-  @state() private pickedPart?: string
-  @state() private pickedFace?: FigureFace
-
   private facts(): FigureFigureFacts | undefined {
     try {
       return this.revision ? figureFigureFacts(this.revision) : undefined
@@ -121,11 +110,7 @@ export class FigureProperties extends localize(i18next)(LitElement) {
     return html`<section>
         <h3>${i18next.t('figure.label.group-figure')}</h3>
         <slot name="type"></slot>
-        ${this.renderName(facts)} ${this.renderPlacement(facts)}
-      </section>
-      <section>
-        <h3>${i18next.t('figure.label.group-standing')}</h3>
-        ${this.renderSpace(facts)} ${this.renderMounting(facts)}
+        ${this.renderName(facts)} ${this.renderPlacement(facts)} ${this.renderMounting(facts)}
       </section>
       <section>
         <h3>${i18next.t('figure.label.group-catalog')}</h3>
@@ -182,50 +167,23 @@ export class FigureProperties extends localize(i18next)(LitElement) {
     `
   }
 
-  private renderSpace(facts: FigureFigureFacts) {
-    return html`
-      <div field>
-        <label>${i18next.t('figure.label.declared-space')}</label>
-        <div row>
-          <span>${i18next.t(facts.declared ? 'figure.text.declared-space-declared' : 'figure.text.declared-space-none')}</span>
-          <button act ?disabled=${!facts.parts.length} @click=${() => this.declare(facts.placement ?? 'floor')}>
-            <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}
-          </button>
-        </div>
-      </div>
-    `
-  }
-
+  /**
+   * A mounting face named already: which, and the way to take it off. A centred figure has no plane, so the gate does
+   * not check it there; the line says so rather than show a promise that is not kept.
+   */
   private renderMounting(facts: FigureFigureFacts) {
     const mounting = facts.mounting
-    /* Chosen, or what is set, or where the figure meets its plane -- not the first part listed (walk 1). */
-    const { part, face } = offeredMountingOf(facts, { part: this.pickedPart, face: this.pickedFace })
+    if (!mounting) return nothing
+    const said = `${mounting.part} · ${i18next.t('figure.label.face-' + mounting.face)}`
     return html`
-      <div field>
+      <div field mounting-face>
         <label>${i18next.t('figure.label.mounting-face')}</label>
         <div row>
-          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedPart = (e.target as HTMLSelectElement).value)}>
-            ${facts.parts.map(one => html`<option value=${one} ?selected=${one === part}>${one}</option>`)}
-          </select>
-          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedFace = (e.target as HTMLSelectElement).value as FigureFace)}>
-            ${FACES.map(one => html`<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}
-          </select>
-        </div>
-        <div row>
-          <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 quiet ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>
+          <span>${facts.placement === 'center' ? `${said} · ${i18next.t('figure.text.mounting-face-unchecked-at-center')}` : said}</span>
+          <button quiet clear-mounting-face @click=${() => this.command({ kind: 'clear-mounting-face' })}>
             <md-icon>close</md-icon>${i18next.t('figure.button.clear-mounting-face')}
           </button>
         </div>
-        <small>
-          ${facts.declared
-            ? mounting
-              ? `${mounting.part} · ${i18next.t('figure.label.face-' + mounting.face)}`
-              : i18next.t('figure.label.mounting-face-none')
-            : i18next.t('figure.text.mounting-face-needs-space')}
-        </small>
       </div>
     `
   }
@@ -285,11 +243,6 @@ export class FigureProperties extends localize(i18next)(LitElement) {
     `
   }
 
-  private declare(placement: Placement) {
-    if (!this.revision) return
-    this.command(occupancyFromParts(this.revision.asset, placement))
-  }
-
   private command(action: FigureAuthoringAction) {
     this.dispatchEvent(new CustomEvent('command', { detail: { action }, bubbles: true, composed: true }))
   }

package/client/modeller/modeller-keys.ts

@@ -36,11 +36,11 @@ export class ModellerKeys implements ReactiveController {
     const canvas = this.of.scene()
     const path = e.composedPath()
     /*
-      A key for something open over the work -- a group's 「⋯」 menu, the view or the history, a question -- is that
-      thing's: heard here first, Esc deselected the part and was kept from the menu, which then could not be closed by
-      the keyboard (2026-10-16).
+      A key for something open over the work -- a group's 「⋯」 menu, the view or the history, a question, a popup -- is
+      that thing's: heard here first, Esc deselected the part and was kept from the menu, which then could not be closed
+      by the keyboard (2026-10-16).
     */
-    if (path.some(node => node instanceof Element && (node.localName.startsWith('ox-popup') || node.getAttribute('role') === 'dialog'))) return
+    if (path.some(node => node instanceof Element && (node.localName.startsWith('ox-popup') || node.localName === 'ox-floating-overlay' || node.getAttribute('role') === 'dialog'))) return
     const action = keyActionOf(
       {
         key: e.key,

package/dist-client/modeller/clips.d.ts

@@ -64,6 +64,6 @@ export declare const trackEdit: (clip: Clip, track: ClipTrack, patch?: Partial<P
     state: string;
     clip: string;
     keys: ClipKey[];
-    loop: "wrap" | "hold";
-    interpolation: "step" | "linear";
+    loop: "hold" | "wrap";
+    interpolation: "linear" | "step";
 };

package/dist-client/modeller/editor-styles.js

@@ -90,11 +90,27 @@ export const EditorStyles = css `
     color: var(--md-sys-color-primary);
     font-weight: 600;
   }
-  ox-canvas-bar button[save] {
+  /*
+    The bar's two commitments, one shape (user 2026-10-18: 「발행버튼도 저장버튼도 라운드 버튼으로 … 버튼 안에 적절한 아이콘」):
+    round, an icon inside, so neither is taken for the other. Save, done many times a day, is the filled one; release,
+    a promise to whoever draws the figure, is outlined.
+  */
+  ox-canvas-bar button[save],
+  ox-canvas-bar button[publish] {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     height: 32px;
-    padding: 0 14px;
-    border: none;
+    padding: 0 14px 0 10px;
     border-radius: 999em;
+    font-weight: 600;
+  }
+  ox-canvas-bar button[save] md-icon,
+  ox-canvas-bar button[publish] md-icon {
+    --md-icon-size: 18px;
+  }
+  ox-canvas-bar button[save] {
+    border: 1px solid transparent;
     color: var(--md-sys-color-on-primary);
     background: var(--md-sys-color-primary);
   }
@@ -359,9 +375,10 @@ export const EditorStyles = css `
     align-items: center;
     gap: 4px;
     height: 32px;
-    padding: 0 10px;
+    padding: 0 14px 0 10px;
     border: none;
-    border-radius: 6px;
+    /* Round as save and release beside it: one shape for the bar's end. */
+    border-radius: 999em;
     color: var(--md-sys-color-on-error-container);
     background: var(--md-sys-color-error-container);
   }
@@ -382,12 +399,14 @@ export const EditorStyles = css `
     box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);
   }
   ox-canvas-bar button[publish] {
-    height: 32px;
-    padding: 0 8px;
-    border: 1px solid var(--md-sys-color-outline-variant);
-    border-radius: 6px;
+    border: 1px solid var(--md-sys-color-outline);
+    color: var(--md-sys-color-primary);
     background: var(--md-sys-color-surface);
   }
+  ox-canvas-bar button[publish][aria-pressed='true'] {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
   button:disabled {
     opacity: 0.45;
     cursor: default;

package/dist-client/modeller/editor-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor-styles.js","sourceRoot":"","sources":["../../client/modeller/editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,gHAAgH;AAChH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiZ9B,CAAA","sourcesContent":["import { css } from 'lit'\n\n/** The modeller editor's own styles: the bar's tools, the panes, the start card, the side's tabs and panels. */\nexport const EditorStyles = css`\n  :host {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    height: 100%;\n    /* The editor folds by the width it is given, not the window's (UX ruling, 2026-09-24). */\n    container-type: inline-size;\n    /* The app's one face (its typography theme's --theme-font) at the body size: a bare sans-serif here put a second\n       face under everything the editor draws, beside the parts list and the shell in the app's own (2026-10-16). */\n    font-family: var(--theme-font, ui-sans-serif, system-ui, sans-serif);\n    font-size: var(--ui-t-body, 13px);\n    color: var(--md-sys-color-on-surface);\n  }\n  /* The bar over the work is ox-canvas-bar (ADR-0060 decision 8): the folds at its edges, undo, redo and\n     fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */\n  ox-canvas-bar button[mode] {\n    height: 28px;\n    border: 1px solid transparent;\n    padding: 0 10px;\n    border-radius: 999em;\n    border-color: transparent;\n    background: none;\n  }\n  ox-canvas-bar button[mode][aria-pressed='true'] {\n    border-color: var(--md-sys-color-primary);\n  }\n  /* The gizmo's tools, drawn as the bar's own icon buttons (undo, redo, fit). */\n  ox-canvas-bar .gizmo-tools {\n    display: inline-flex;\n    gap: 2px;\n    padding-left: 4px;\n    border-left: 1px solid var(--md-sys-color-outline-variant);\n  }\n  ox-canvas-bar button[tool] {\n    display: inline-grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    background: transparent;\n    color: var(--md-sys-color-on-surface-variant);\n    cursor: pointer;\n  }\n  ox-canvas-bar button[tool]:hover:not(:disabled) {\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface);\n  }\n  ox-canvas-bar button[tool][aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n  ox-canvas-bar button[tool]:disabled {\n    opacity: 0.38;\n    cursor: default;\n  }\n  /*\n    Slotted into the bar from here, the tools do not get the bar's own icon size (20px, set inside its shadow): they\n    showed at md-icon's 24px, heavier than undo, redo and fit beside them. The same size, and the bar's focus ring.\n  */\n  ox-canvas-bar button[tool] md-icon {\n    --md-icon-size: 20px;\n  }\n  ox-canvas-bar button[tool]:focus-visible {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: 1px;\n  }\n  figure-preview {\n    min-width: 0;\n    min-height: 0;\n  }\n  /* The edit canvas stays standing while the preview is in front (a 3D scene costs a third of a second to make), out of sight. */\n  div[middle][hidden] {\n    display: none;\n  }\n  /* The preview, once made, stays standing out of sight too: its 3D scene is not made again each time it is asked for. */\n  figure-preview[hidden] {\n    display: none;\n  }\n  ox-canvas-bar .status {\n    padding: 0 8px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  ox-canvas-bar .status[dirty] {\n    color: var(--md-sys-color-primary);\n    font-weight: 600;\n  }\n  ox-canvas-bar button[save] {\n    height: 32px;\n    padding: 0 14px;\n    border: none;\n    border-radius: 999em;\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n  }\n  /* The three panes are ox-three-pane's (ADR-0060 decision 8): widths 200 | 1fr | 340, 160 | 300 under\n     860px and one column with the middle first under 560px are the frame's, as are the dividers. */\n  ox-three-pane {\n    flex: 1;\n    min-height: 0;\n  }\n  figure-parts {\n    min-height: 0;\n  }\n  figure-canvas {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n  }\n  div[middle] {\n    position: relative;\n    display: flex;\n    min-width: 0;\n    min-height: 0;\n  }\n  /* A new figure's first question, over the empty canvas. */\n  div[start] {\n    position: absolute;\n    inset: 50% auto auto 50%;\n    z-index: 10;\n    color: var(--md-sys-color-on-surface);\n    transform: translate(-50%, -50%);\n    width: min(440px, calc(100% - 32px));\n    box-sizing: border-box;\n    padding: 20px;\n    border-radius: 12px;\n    background: var(--md-sys-color-surface, #fff);\n    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);\n  }\n  div[start] button[start-button] {\n    width: auto;\n    margin: 0;\n    font-size: var(--ui-t-body);\n    height: 36px;\n    padding: 0 16px;\n    border: 1px solid var(--md-sys-color-outline);\n    border-radius: 999em;\n    color: var(--md-sys-color-primary);\n    background: var(--md-sys-color-surface, #fff);\n    cursor: pointer;\n  }\n  div[start] button[start-button]:hover:not(:disabled) {\n    background: var(--md-sys-color-primary-container);\n  }\n  div[start] button[start-button][pressed] {\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n    border-color: var(--md-sys-color-primary);\n  }\n  div[start] button[start-button]:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n  div[start] h2 {\n    margin: 0 0 12px;\n    font-size: var(--ui-t-title);\n  }\n  div[start-paths] {\n    display: grid;\n    gap: 14px;\n  }\n  div[start-paths] h3 {\n    margin: 0 0 6px;\n    font-size: var(--ui-t-body);\n  }\n  div[start-shapes] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n  div[start] small {\n    display: block;\n    margin-top: 4px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /* The side: tabs over one panel at a time, each using the whole height. */\n  /*\n    The side's words at the panel's size (side-panel-styles: titles body, the rest small). The editor's host is at body\n    for the bar, and the fields the editor drew itself -- the part's name -- stood a step larger than every other field.\n  */\n  aside {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    font-size: var(--ui-t-small, 11.5px);\n    background: var(--md-sys-color-surface-container-lowest);\n  }\n  div[tabs] {\n    display: flex;\n    flex: none;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  button[tab] {\n    flex: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 1px;\n    min-width: 0;\n    height: 48px;\n    padding: 0;\n    border: none;\n    border-radius: 0;\n    border-bottom: 2px solid transparent;\n    background: none;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  button[tab]:hover:not([on]) {\n    background: var(--md-sys-color-surface-container);\n  }\n  button[tab][on] {\n    color: var(--md-sys-color-primary);\n    border-bottom-color: var(--md-sys-color-primary);\n  }\n  button[tab] md-icon {\n    font-size: 20px;\n    width: 20px;\n    height: 20px;\n  }\n  button[tab] span[tab-label] {\n    max-width: 100%;\n    overflow: hidden;\n    font-size: var(--ui-t-micro, 11px);\n    line-height: 1.2;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  span[badge] {\n    position: absolute;\n    top: 3px;\n    right: 2px;\n    padding: 0 5px;\n    font-size: var(--ui-t-micro, 11px);\n    font-weight: 700;\n    line-height: 1.5;\n    color: var(--md-sys-color-on-primary-container);\n    background: var(--md-sys-color-primary-container);\n    border-radius: 999em;\n    pointer-events: none;\n  }\n  /* The sections inside carry the margins (side-panel-styles); the panel only scrolls. */\n  div[panel] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding: 0;\n  }\n  div[panel][flush] {\n    padding: 0;\n  }\n  /* Hidden, not removed: a panel keeps what it holds (the verdict its last answer) while another tab is open. */\n  [off] {\n    display: none !important;\n  }\n  /* The part's own numbers inside a group the links draw (size, place): one column, the panel's gap. */\n  div[group-fields] {\n    display: grid;\n    gap: 6px;\n  }\n  /* The folded 「더 보기」: its title is the fold's handle, at the title's size. */\n  section[more] > details > summary {\n    padding: 0;\n  }\n  section[more] > details > summary > h3 {\n    margin: 0;\n  }\n  div[more-body] {\n    display: grid;\n    gap: 16px;\n    margin-top: 12px;\n  }\n  /*\n    The view settings and the release history, opened from the bar over the right of the work: neither is about the\n    part chosen, so neither takes a tab beside the part's (chief architect 2026-10-16).\n  */\n  :host {\n    position: relative;\n  }\n  div[bar-overlay-panel] {\n    position: absolute;\n    top: var(--figure-bar-height, 44px);\n    right: 8px;\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    width: min(360px, calc(100% - 16px));\n    max-height: calc(100% - var(--figure-bar-height, 44px) - 16px);\n    background: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);\n  }\n  div[overlay-head] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 8px 8px 12px;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  div[overlay-head] h3 {\n    margin: 0;\n  }\n  div[overlay-head] button[quiet] {\n    margin-left: 0;\n  }\n  div[overlay-body] {\n    min-height: 0;\n    overflow: auto;\n  }\n  /* Which part the panel speaks of. */\n  div[subject] {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    display: grid;\n    gap: 4px;\n    padding: 10px 12px;\n    background: var(--md-sys-color-surface-container-lowest);\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  /* The panel's three sizes (side-panel-styles): the part's kind at the title's, its two lines at the hint's. */\n  div[subject-summary] {\n    display: grid;\n    gap: 2px;\n  }\n  div[subject-summary] b {\n    font-size: var(--ui-t-body, 13px);\n    font-weight: 600;\n  }\n  div[subject-summary] b span {\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  div[subject-summary] small {\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /*\n    No rule here draws every button as a box: the side's buttons take the shared panel rules (SidePanelStyles), one\n    height with the fields beside them, and only the bar's publish keeps an outline (user 2026-10-16: 「버튼 박스도\n    과하게 사용되어서」 -- a bare 「button」 rule had put a 32px box round every button the editor drew).\n  */\n  button {\n    font: inherit;\n    box-sizing: border-box;\n    color: inherit;\n    min-width: 0;\n    cursor: pointer;\n  }\n  /* What blocks release, beside 「발행」: one red word button, and its list under the bar. */\n  ox-canvas-bar button[release-blocked] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    height: 32px;\n    padding: 0 10px;\n    border: none;\n    border-radius: 6px;\n    color: var(--md-sys-color-on-error-container);\n    background: var(--md-sys-color-error-container);\n  }\n  ox-canvas-bar button[release-blocked] md-icon {\n    --md-icon-size: 18px;\n  }\n  div[release-blockers] {\n    position: absolute;\n    top: 46px;\n    right: 8px;\n    z-index: 6;\n    width: min(340px, calc(100% - 16px));\n    padding: 8px 10px 10px;\n    box-sizing: border-box;\n    background: var(--md-sys-color-surface);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);\n  }\n  ox-canvas-bar button[publish] {\n    height: 32px;\n    padding: 0 8px;\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n    background: var(--md-sys-color-surface);\n  }\n  button:disabled {\n    opacity: 0.45;\n    cursor: default;\n  }\n  button[aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    border-color: var(--md-sys-color-primary);\n  }\n  .hint {\n    color: var(--md-sys-color-on-surface-variant);\n    line-height: 1.5;\n  }\n`\n"]}
+{"version":3,"file":"editor-styles.js","sourceRoot":"","sources":["../../client/modeller/editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,gHAAgH;AAChH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoa9B,CAAA","sourcesContent":["import { css } from 'lit'\n\n/** The modeller editor's own styles: the bar's tools, the panes, the start card, the side's tabs and panels. */\nexport const EditorStyles = css`\n  :host {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    height: 100%;\n    /* The editor folds by the width it is given, not the window's (UX ruling, 2026-09-24). */\n    container-type: inline-size;\n    /* The app's one face (its typography theme's --theme-font) at the body size: a bare sans-serif here put a second\n       face under everything the editor draws, beside the parts list and the shell in the app's own (2026-10-16). */\n    font-family: var(--theme-font, ui-sans-serif, system-ui, sans-serif);\n    font-size: var(--ui-t-body, 13px);\n    color: var(--md-sys-color-on-surface);\n  }\n  /* The bar over the work is ox-canvas-bar (ADR-0060 decision 8): the folds at its edges, undo, redo and\n     fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */\n  ox-canvas-bar button[mode] {\n    height: 28px;\n    border: 1px solid transparent;\n    padding: 0 10px;\n    border-radius: 999em;\n    border-color: transparent;\n    background: none;\n  }\n  ox-canvas-bar button[mode][aria-pressed='true'] {\n    border-color: var(--md-sys-color-primary);\n  }\n  /* The gizmo's tools, drawn as the bar's own icon buttons (undo, redo, fit). */\n  ox-canvas-bar .gizmo-tools {\n    display: inline-flex;\n    gap: 2px;\n    padding-left: 4px;\n    border-left: 1px solid var(--md-sys-color-outline-variant);\n  }\n  ox-canvas-bar button[tool] {\n    display: inline-grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    background: transparent;\n    color: var(--md-sys-color-on-surface-variant);\n    cursor: pointer;\n  }\n  ox-canvas-bar button[tool]:hover:not(:disabled) {\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface);\n  }\n  ox-canvas-bar button[tool][aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n  ox-canvas-bar button[tool]:disabled {\n    opacity: 0.38;\n    cursor: default;\n  }\n  /*\n    Slotted into the bar from here, the tools do not get the bar's own icon size (20px, set inside its shadow): they\n    showed at md-icon's 24px, heavier than undo, redo and fit beside them. The same size, and the bar's focus ring.\n  */\n  ox-canvas-bar button[tool] md-icon {\n    --md-icon-size: 20px;\n  }\n  ox-canvas-bar button[tool]:focus-visible {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: 1px;\n  }\n  figure-preview {\n    min-width: 0;\n    min-height: 0;\n  }\n  /* The edit canvas stays standing while the preview is in front (a 3D scene costs a third of a second to make), out of sight. */\n  div[middle][hidden] {\n    display: none;\n  }\n  /* The preview, once made, stays standing out of sight too: its 3D scene is not made again each time it is asked for. */\n  figure-preview[hidden] {\n    display: none;\n  }\n  ox-canvas-bar .status {\n    padding: 0 8px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  ox-canvas-bar .status[dirty] {\n    color: var(--md-sys-color-primary);\n    font-weight: 600;\n  }\n  /*\n    The bar's two commitments, one shape (user 2026-10-18: 「발행버튼도 저장버튼도 라운드 버튼으로 … 버튼 안에 적절한 아이콘」):\n    round, an icon inside, so neither is taken for the other. Save, done many times a day, is the filled one; release,\n    a promise to whoever draws the figure, is outlined.\n  */\n  ox-canvas-bar button[save],\n  ox-canvas-bar button[publish] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    height: 32px;\n    padding: 0 14px 0 10px;\n    border-radius: 999em;\n    font-weight: 600;\n  }\n  ox-canvas-bar button[save] md-icon,\n  ox-canvas-bar button[publish] md-icon {\n    --md-icon-size: 18px;\n  }\n  ox-canvas-bar button[save] {\n    border: 1px solid transparent;\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n  }\n  /* The three panes are ox-three-pane's (ADR-0060 decision 8): widths 200 | 1fr | 340, 160 | 300 under\n     860px and one column with the middle first under 560px are the frame's, as are the dividers. */\n  ox-three-pane {\n    flex: 1;\n    min-height: 0;\n  }\n  figure-parts {\n    min-height: 0;\n  }\n  figure-canvas {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n  }\n  div[middle] {\n    position: relative;\n    display: flex;\n    min-width: 0;\n    min-height: 0;\n  }\n  /* A new figure's first question, over the empty canvas. */\n  div[start] {\n    position: absolute;\n    inset: 50% auto auto 50%;\n    z-index: 10;\n    color: var(--md-sys-color-on-surface);\n    transform: translate(-50%, -50%);\n    width: min(440px, calc(100% - 32px));\n    box-sizing: border-box;\n    padding: 20px;\n    border-radius: 12px;\n    background: var(--md-sys-color-surface, #fff);\n    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);\n  }\n  div[start] button[start-button] {\n    width: auto;\n    margin: 0;\n    font-size: var(--ui-t-body);\n    height: 36px;\n    padding: 0 16px;\n    border: 1px solid var(--md-sys-color-outline);\n    border-radius: 999em;\n    color: var(--md-sys-color-primary);\n    background: var(--md-sys-color-surface, #fff);\n    cursor: pointer;\n  }\n  div[start] button[start-button]:hover:not(:disabled) {\n    background: var(--md-sys-color-primary-container);\n  }\n  div[start] button[start-button][pressed] {\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n    border-color: var(--md-sys-color-primary);\n  }\n  div[start] button[start-button]:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n  div[start] h2 {\n    margin: 0 0 12px;\n    font-size: var(--ui-t-title);\n  }\n  div[start-paths] {\n    display: grid;\n    gap: 14px;\n  }\n  div[start-paths] h3 {\n    margin: 0 0 6px;\n    font-size: var(--ui-t-body);\n  }\n  div[start-shapes] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n  div[start] small {\n    display: block;\n    margin-top: 4px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /* The side: tabs over one panel at a time, each using the whole height. */\n  /*\n    The side's words at the panel's size (side-panel-styles: titles body, the rest small). The editor's host is at body\n    for the bar, and the fields the editor drew itself -- the part's name -- stood a step larger than every other field.\n  */\n  aside {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    font-size: var(--ui-t-small, 11.5px);\n    background: var(--md-sys-color-surface-container-lowest);\n  }\n  div[tabs] {\n    display: flex;\n    flex: none;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  button[tab] {\n    flex: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 1px;\n    min-width: 0;\n    height: 48px;\n    padding: 0;\n    border: none;\n    border-radius: 0;\n    border-bottom: 2px solid transparent;\n    background: none;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  button[tab]:hover:not([on]) {\n    background: var(--md-sys-color-surface-container);\n  }\n  button[tab][on] {\n    color: var(--md-sys-color-primary);\n    border-bottom-color: var(--md-sys-color-primary);\n  }\n  button[tab] md-icon {\n    font-size: 20px;\n    width: 20px;\n    height: 20px;\n  }\n  button[tab] span[tab-label] {\n    max-width: 100%;\n    overflow: hidden;\n    font-size: var(--ui-t-micro, 11px);\n    line-height: 1.2;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  span[badge] {\n    position: absolute;\n    top: 3px;\n    right: 2px;\n    padding: 0 5px;\n    font-size: var(--ui-t-micro, 11px);\n    font-weight: 700;\n    line-height: 1.5;\n    color: var(--md-sys-color-on-primary-container);\n    background: var(--md-sys-color-primary-container);\n    border-radius: 999em;\n    pointer-events: none;\n  }\n  /* The sections inside carry the margins (side-panel-styles); the panel only scrolls. */\n  div[panel] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding: 0;\n  }\n  div[panel][flush] {\n    padding: 0;\n  }\n  /* Hidden, not removed: a panel keeps what it holds (the verdict its last answer) while another tab is open. */\n  [off] {\n    display: none !important;\n  }\n  /* The part's own numbers inside a group the links draw (size, place): one column, the panel's gap. */\n  div[group-fields] {\n    display: grid;\n    gap: 6px;\n  }\n  /* The folded 「더 보기」: its title is the fold's handle, at the title's size. */\n  section[more] > details > summary {\n    padding: 0;\n  }\n  section[more] > details > summary > h3 {\n    margin: 0;\n  }\n  div[more-body] {\n    display: grid;\n    gap: 16px;\n    margin-top: 12px;\n  }\n  /*\n    The view settings and the release history, opened from the bar over the right of the work: neither is about the\n    part chosen, so neither takes a tab beside the part's (chief architect 2026-10-16).\n  */\n  :host {\n    position: relative;\n  }\n  div[bar-overlay-panel] {\n    position: absolute;\n    top: var(--figure-bar-height, 44px);\n    right: 8px;\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    width: min(360px, calc(100% - 16px));\n    max-height: calc(100% - var(--figure-bar-height, 44px) - 16px);\n    background: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);\n  }\n  div[overlay-head] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 8px 8px 12px;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  div[overlay-head] h3 {\n    margin: 0;\n  }\n  div[overlay-head] button[quiet] {\n    margin-left: 0;\n  }\n  div[overlay-body] {\n    min-height: 0;\n    overflow: auto;\n  }\n  /* Which part the panel speaks of. */\n  div[subject] {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    display: grid;\n    gap: 4px;\n    padding: 10px 12px;\n    background: var(--md-sys-color-surface-container-lowest);\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  /* The panel's three sizes (side-panel-styles): the part's kind at the title's, its two lines at the hint's. */\n  div[subject-summary] {\n    display: grid;\n    gap: 2px;\n  }\n  div[subject-summary] b {\n    font-size: var(--ui-t-body, 13px);\n    font-weight: 600;\n  }\n  div[subject-summary] b span {\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  div[subject-summary] small {\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /*\n    No rule here draws every button as a box: the side's buttons take the shared panel rules (SidePanelStyles), one\n    height with the fields beside them, and only the bar's publish keeps an outline (user 2026-10-16: 「버튼 박스도\n    과하게 사용되어서」 -- a bare 「button」 rule had put a 32px box round every button the editor drew).\n  */\n  button {\n    font: inherit;\n    box-sizing: border-box;\n    color: inherit;\n    min-width: 0;\n    cursor: pointer;\n  }\n  /* What blocks release, beside 「발행」: one red word button, and its list under the bar. */\n  ox-canvas-bar button[release-blocked] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    height: 32px;\n    padding: 0 14px 0 10px;\n    border: none;\n    /* Round as save and release beside it: one shape for the bar's end. */\n    border-radius: 999em;\n    color: var(--md-sys-color-on-error-container);\n    background: var(--md-sys-color-error-container);\n  }\n  ox-canvas-bar button[release-blocked] md-icon {\n    --md-icon-size: 18px;\n  }\n  div[release-blockers] {\n    position: absolute;\n    top: 46px;\n    right: 8px;\n    z-index: 6;\n    width: min(340px, calc(100% - 16px));\n    padding: 8px 10px 10px;\n    box-sizing: border-box;\n    background: var(--md-sys-color-surface);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);\n  }\n  ox-canvas-bar button[publish] {\n    border: 1px solid var(--md-sys-color-outline);\n    color: var(--md-sys-color-primary);\n    background: var(--md-sys-color-surface);\n  }\n  ox-canvas-bar button[publish][aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n  button:disabled {\n    opacity: 0.45;\n    cursor: default;\n  }\n  button[aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    border-color: var(--md-sys-color-primary);\n  }\n  .hint {\n    color: var(--md-sys-color-on-surface-variant);\n    line-height: 1.5;\n  }\n`\n"]}

package/dist-client/modeller/editor.d.ts

@@ -9,6 +9,7 @@ import './figure-material-panel.js';
 import './figure-section-panel.js';
 import './figure-section-editor.js';
 import './figure-links.js';
+import './figure-fasten-dialog.js';
 import './figure-controls.js';
 import './figure-clips.js';
 import './figure-data-panel.js';
@@ -63,6 +64,17 @@ export declare class FigureEditor extends LitElement {
     private tab;
     /** The view settings or the release history, open over the work from the bar. */
     private overlay?;
+    /**
+     * The fastening window open for the selected part (user 2026-10-17), in the standard popup (2026-10-18): chosen there,
+     * applied once. It closes with nothing written when the part, the tab or the middle changes under it.
+     */
+    private fastening;
+    private fastenPopup?;
+    private fastenWindow?;
+    /** Why the window's 「적용」 was refused, said in it. */
+    private fastenError;
+    /** The face of the part a row of the window's list is on, lit on the canvas while the pointer or the arrows are there. */
+    private fastenHover;
     /** 「더 보기」 open, as this person left it last (chief architect 2026-10-16: kept per person). */
     private moreOpen;
     private static storedMoreOpen;
@@ -287,13 +299,22 @@ export declare class FigureEditor extends LitElement {
     private releaseWords;
     /** The findings that block release, under the bar beside 「발행」, each with the way out the verdict tab offers for it. */
     private renderReleaseBlockers;
-    /** To the release that exists: the history's release section, opened from the bar, not a second one here. */
     private goRelease;
     private overhangOf;
     /** The selected part's motion at both ends of its range, made once per version and part. */
     private motionEnds;
-    /** "Fasten it first", from the motion tab: to the properties tab, the fastening form open on this part. */
+    /** "Fasten it first", from the motion tab or a row: to the properties tab, the fastening window open on this part. */
     private goFasten;
+    private openFastening;
+    private closeFastening;
+    private fastenClosed;
+    /** What the window shows is the editor's: the figure on screen, the part, and what the preview and a refusal said. */
+    private tellFastening;
+    disconnectedCallback(): void;
+    /** 「적용」: the command, one step; refused, the window stays open and says why. */
+    private applyFastening;
+    /** A row of the window's list under the pointer or the arrows: the face of that part it would be fastened on, lit. */
+    private hoverFastening;
     /** What the canvas draws of it, made once per preview: a new list every render would stand the board up each time. */
     private previewShown;
     /**

package/dist-client/modeller/editor.js

@@ -7,7 +7,7 @@ import { openPopup } from '@operato/layout';
 import { OxPrompt } from '@operato/popup';
 import { customElement, property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
-import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model';
+import { figurePartFaceOf, PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model';
 import './figure-recipe-catalog.js';
 import { captureFigureThumbnail } from './thumbnail.js';
 import { drawableFigureParts } from './renderer.js';
@@ -16,10 +16,11 @@ import './figure-parts.js';
 import './figure-material-panel.js';
 import './figure-section-panel.js';
 import './figure-section-editor.js';
-import { rowWordsOf } from './command-preview.js';
+import { faceHighlightOf, rowWordsOf } from './command-preview.js';
 import { CommandPreview, NO_WORDS } from './command-preview-controller.js';
 import { motionEndsOf } from './motion-ends.js';
 import './figure-links.js';
+import './figure-fasten-dialog.js';
 import './figure-controls.js';
 import './figure-clips.js';
 import './figure-data-panel.js';
@@ -78,6 +79,15 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.selected = '';
         this.error = '';
         this.tab = 'properties';
+        /**
+         * The fastening window open for the selected part (user 2026-10-17), in the standard popup (2026-10-18): chosen there,
+         * applied once. It closes with nothing written when the part, the tab or the middle changes under it.
+         */
+        this.fastening = false;
+        /** Why the window's 「적용」 was refused, said in it. */
+        this.fastenError = '';
+        /** The face of the part a row of the window's list is on, lit on the canvas while the pointer or the arrows are there. */
+        this.fastenHover = null;
         /** 「더 보기」 open, as this person left it last (chief architect 2026-10-16: kept per person). */
         this.moreOpen = FigureEditor_1.storedMoreOpen();
         /** What the middle shows: the parts being edited, or the figure placed on a board at eight sizes. */
@@ -136,8 +146,16 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.lastAnchors = {};
         /** Data tried in the data tab, given to the preview's figures as their `data`; null when none is (ADR-0051 §8). */
         this.dataSample = null;
-        /** To the release that exists: the history's release section, opened from the bar, not a second one here. */
+        /*
+          The bar's one way to the releases (user 2026-10-18: the history icon and 「발행」 opened the same panel): the panel
+          of releases -- what to release now, the releases before it and going back to one -- opened at its release section,
+          closed again by a second press.
+        */
         this.goRelease = async () => {
+            if (this.overlay === 'history') {
+                this.overlay = undefined;
+                return;
+            }
             this.overlay = 'history';
             await this.updateComplete;
             await this.querySelector('figure-history-panel')?.showRelease?.();
@@ -242,6 +260,9 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.selected = '';
         if (_changed.has('selected'))
             this.gizmoMode = undefined;
+        /* The window is about the part chosen on the properties tab, being edited: it does not follow anywhere else. */
+        if (this.fastening && (_changed.has('selected') || !this.selected || this.tab !== 'properties' || this.middle !== 'edit'))
+            this.closeFastening();
         /*
          * The section editor is of one part: when the selection moves off it by any way -- another part picked, the scene's
          * own Esc, the part removed, another figure opened -- it closes and lets go of the preview it held.
@@ -765,10 +786,11 @@ let FigureEditor = class FigureEditor extends LitElement {
         return html `<figure-links
       .revision=${shown}
       .section=${section}
-      .active=${this.tab === tab}
+      .active=${this.tab === tab && !(section === 'shape' && this.fastening)}
       .partId=${this.selected}
       ?locked=${unavailable}
       @command=${(e) => this.linkCommand(e.detail.action)}
+      @fasten-open=${() => this.openFastening()}
       .previewWords=${this.commandPreview.words()}
       .detachWords=${this.commandPreview.detachWords(shown)}
       .overhangWords=${section === 'shape' ? this.overhangOf(shown).words : NO_WORDS}
@@ -877,7 +899,7 @@ let FigureEditor = class FigureEditor extends LitElement {
       <div overlay-body>${body}</div>
     </div>`;
         return html `${panel('view', 'figure.label.tab-environment', html `<figure-settings .view=${this.view} @update-view=${(e) => this.setView(e.detail.view)}></figure-settings>`)}
-      ${panel('history', 'figure.label.history', html `<slot name="history"></slot>`)}`;
+      ${panel('history', 'figure.button.release', html `<slot name="history"></slot>`)}`;
     }
     /**
      * The face a size drag keeps for the selected part, figure-model's rule (`figureScaleAnchorOf`): the gizmo shows it
@@ -1429,12 +1451,76 @@ let FigureEditor = class FigureEditor extends LitElement {
             }
         });
     }
-    /** "Fasten it first", from the motion tab: to the properties tab, the fastening form open on this part. */
+    /** "Fasten it first", from the motion tab or a row: to the properties tab, the fastening window open on this part. */
     async goFasten() {
         this.tab = 'properties';
         await this.updateComplete;
-        const links = [...this.renderRoot.querySelectorAll('figure-links')].find(l => l.section === 'shape');
-        await links?.showFastening?.();
+        this.openFastening();
+    }
+    openFastening() {
+        if (!this.selected || this.fastenPopup)
+            return;
+        this.fastenError = '';
+        this.fastenHover = null;
+        this.fastening = true;
+        const content = document.createElement('figure-fasten-dialog');
+        content.addEventListener('preview-command', e => this.commandPreview.ask(e.detail));
+        content.addEventListener('fasten-hover', e => this.hoverFastening(e.detail));
+        content.addEventListener('fasten-apply', e => this.applyFastening(e.detail.action));
+        content.addEventListener('fasten-cancel', () => this.closeFastening());
+        this.fastenWindow = content;
+        this.tellFastening();
+        const popup = openPopup(html `${content}`, { title: i18next.t('figure.label.fastening'), size: 'fit', backdrop: true, movable: true, closable: true, escapable: true });
+        this.fastenPopup = popup;
+        /* Closed by its own X or Esc as well: the editor lets go of it the same way. */
+        popup.result.then(() => this.fastenPopup === popup && this.fastenClosed());
+    }
+    closeFastening() {
+        const popup = this.fastenPopup;
+        this.fastenClosed();
+        popup?.close();
+    }
+    fastenClosed() {
+        this.fastenPopup = undefined;
+        this.fastenWindow = undefined;
+        this.fastening = false;
+        this.fastenError = '';
+        this.fastenHover = null;
+    }
+    /** What the window shows is the editor's: the figure on screen, the part, and what the preview and a refusal said. */
+    tellFastening() {
+        const content = this.fastenWindow;
+        const view = this.session?.read();
+        if (!content || !view)
+            return;
+        content.revision = this.shown();
+        content.partId = this.selected;
+        content.locked = view.loading || !!view.error || view.saving || !view.context;
+        content.previewWords = this.commandPreview.words();
+        content.error = this.fastenError;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.closeFastening();
+    }
+    /** 「적용」: the command, one step; refused, the window stays open and says why. */
+    applyFastening(action) {
+        if (this.linkCommand(action))
+            this.closeFastening();
+        else
+            this.fastenError = this.error;
+    }
+    /** A row of the window's list under the pointer or the arrows: the face of that part it would be fastened on, lit. */
+    hoverFastening(on) {
+        const shown = this.shown();
+        let lit = null;
+        try {
+            lit = on?.face && shown ? faceHighlightOf(figurePartFaceOf(shown.asset, on.part, on.face, shown.inputs)) : null;
+        }
+        catch {
+            lit = null;
+        }
+        this.fastenHover = lit;
     }
     /** What the canvas draws of it, made once per preview: a new list every render would stand the board up each time. */
     previewShown() {
@@ -1442,7 +1528,9 @@ let FigureEditor = class FigureEditor extends LitElement {
         /* On the motion tab, with nothing being tried: where the selected part's motion takes it, at both ends. */
         if (!p && this.tab === 'motion' && this.middle === 'edit')
             return { ghost: this.motionEnds()?.ghost ?? [], highlight: null };
-        return this.commandPreview.drawnOf(p);
+        const drawn = this.commandPreview.drawnOf(p);
+        /* A part in the fastening window's list under the pointer: its face lit in place of the one the command meets. */
+        return this.fastenHover ? { ghost: drawn.ghost, highlight: this.fastenHover } : drawn;
     }
     /**
      * What the author has in view, for the AI dock to hear with a request (ADR-0097 §5.6 item 5): the part selected and
@@ -1485,6 +1573,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     updated(changed) {
         super.updated?.(changed);
+        this.tellFastening();
         /* 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;
@@ -1697,14 +1786,22 @@ let FigureEditor = class FigureEditor extends LitElement {
           </button>`)}
         <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')}
         ${blockers.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: blockers.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>
+        <button
+          slot="commit"
+          publish
+          aria-pressed=${String(this.overlay === 'history')}
+          ?disabled=${!view.id}
+          title=${view.id ? '' : i18next.t('figure.text.save-the-figure-before-releasing')}
+          @click=${this.goRelease}
+        >
+          <md-icon>publish</md-icon>${i18next.t('figure.button.release')}
+        </button>
+        <button slot="commit" save ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}><md-icon>save</md-icon>${i18next.t('figure.button.save')}</button>
       </ox-canvas-bar>
       ${this.blockersOpen && blockers.length ? this.renderReleaseBlockers(blockers, asset, unavailable) : nothing}
       ${this.catalogOpen
@@ -2098,6 +2195,18 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], FigureEditor.prototype, "overlay", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "fastening", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "fastenError", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "fastenHover", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)