@things-factory/figure-ui 10.1.194 → 10.1.195

package/client/modeller/editor-styles.ts

@@ -295,12 +295,13 @@ export const EditorStyles = css`
   }
   /*
     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).
+    part chosen, so neither takes a tab beside the part's (chief architect 2026-10-16). The fastening window stands in
+    the same place, over the side panel, so the canvas it previews on stays in sight (user 2026-10-19).
   */
   :host {
     position: relative;
   }
-  div[bar-overlay-panel] {
+  div[side-overlay] {
     position: absolute;
     top: var(--figure-bar-height, 44px);
     right: 8px;
@@ -327,10 +328,16 @@ export const EditorStyles = css`
   div[overlay-head] button[quiet] {
     margin-left: 0;
   }
-  div[overlay-body] {
+  [overlay-body] {
     min-height: 0;
     overflow: auto;
   }
+  /* The fastening window keeps to the panel's width: a popup's own sizing made it wider than the panel. */
+  div[fasten-panel] > figure-fasten-dialog {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
   /* Which part the panel speaks of. */
   div[subject] {
     position: sticky;

package/client/modeller/editor.ts

@@ -139,12 +139,12 @@ export class FigureEditor extends LitElement {
   /** The view settings or the release history, open over the work from the bar. */
   @state() private overlay?: BarOverlay
   /**
-   * 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.
+   * The fastening window open for the selected part (user 2026-10-17): chosen there, applied once. It stands over the
+   * side panel, not over the canvas, so what is chosen is seen in 3D as it is chosen (user 2026-10-19: the standard
+   * popup, always modal, covered the preview). It closes with nothing written when the part, the tab, the middle or a
+   * bar panel changes under it.
    */
   @state() private fastening = false
-  private fastenPopup?: { close: () => void }
-  private fastenWindow?: HTMLElement & { revision?: FigureRevision; partId: string; locked: boolean; previewWords: string[]; error: string }
   /** Why the window's 「적용」 was refused, said in it. */
   @state() 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. */
@@ -234,7 +234,7 @@ export class FigureEditor extends LitElement {
           aria-pressed=${String(this.gizmoMode === tool.mode)}
           ?disabled=${!tool.can}
           aria-label=${i18next.t('figure.button.gizmo-' + tool.mode)}
-          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + i18next.t(tool.mode === 'scale' && this.sizeDragUnsure(this.asset()!, this.selected) ? 'figure.text.gizmo-size-turned-fastening' : 'figure.text.gizmo-not-own', { part: partLabelOf(this.selected), extreme: this.keptExtremeWord() })}`}
+          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + (tool.mode === 'scale' && this.sizeDragUnsure(this.asset()!, this.selected) ? this.sizeDragRefusalOf(this.selected) : i18next.t('figure.text.gizmo-not-own'))}`}
           @click=${() => this.useGizmo(tool.mode)}
         >
           <md-icon>${tool.icon}</md-icon>
@@ -292,7 +292,7 @@ export class FigureEditor extends LitElement {
     if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected)) 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()
+    if (this.fastening && (_changed.has('selected') || !this.selected || this.tab !== 'properties' || this.middle !== 'edit' || this.overlay)) 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.
@@ -323,7 +323,7 @@ export class FigureEditor extends LitElement {
     if (mode === 'scale' && this.selected && this.gizmoMode !== 'scale') {
       const asset = this.asset()
       if (asset && this.sizeDragUnsure(asset, this.selected)) {
-        this.error = i18next.t('figure.text.gizmo-size-turned-fastening', { part: partLabelOf(this.selected), extreme: this.keptExtremeWord() })
+        this.tellSizeByFields(this.selected)
         return
       }
     }
@@ -579,6 +579,28 @@ export class FigureEditor extends LitElement {
       return true
     }
   }
+  /**
+   * Why this part's size is not dragged, in one line (user 2026-10-19: the reason told the faces kept, and was not
+   * understood): attached turned or twisted, or turned off its upright.
+   */
+  private sizeDragRefusalOf(id: string): string {
+    const fastened = !!this.asset()?.joints?.some(j => j.body1.part === ownerOf(id))
+    return i18next.t(fastened ? 'figure.text.gizmo-size-turned-fastening' : 'figure.text.gizmo-size-tilted', { part: partLabelOf(id) })
+  }
+  /** The size drag refused, said as a notice with the way to the part's size fields. */
+  private tellSizeByFields(id: string) {
+    this.refusals.point(this.sizeDragRefusalOf(id), { label: i18next.t('figure.button.to-size-fields'), run: () => this.toSizeFields(id) })
+  }
+  /** To the part's first size field it takes typed, on the properties tab, ready to type over. */
+  private async toSizeFields(id: string) {
+    this.middle = 'edit'
+    this.tab = 'properties'
+    this.selected = id
+    await this.updateComplete
+    const field = this.renderRoot.querySelector<HTMLInputElement>('[slot="size"] input:not([disabled]):not([readonly])')
+    field?.focus()
+    field?.select()
+  }
   /** A drag, written back as the part's own inputs — one step of the history, like typing the numbers. */
   private transformed(id: string, result: GizmoResult) {
     const view = this.session!.read()
@@ -605,7 +627,7 @@ export class FigureEditor extends LitElement {
     const jointed = !!asset.joints?.some(j => j.body1.part === ownerOf(id))
     /* A size drag this part cannot show truly is not written: it springs back, and the reason is said. */
     if (result.scale && result.scale.some(k => Math.abs(k - 1) > 1e-4) && this.sizeDragUnsure(asset, id)) {
-      this.error = i18next.t('figure.text.gizmo-size-turned-fastening', { part: partLabelOf(id), extreme: this.keptExtremeWord() })
+      this.tellSizeByFields(id)
       return this.requestUpdate()
     }
     /*
@@ -677,10 +699,6 @@ export class FigureEditor extends LitElement {
    * fastened. Refused, it says why.
    */
   /* What a tilted part's typed size keeps, by the figure's placement: not the floor's lowest point everywhere (designer 2026-09-27). */
-  private keptExtremeWord(): string {
-    const placement = (this.asset())?.placement ?? 'floor'
-    return i18next.t(`figure.label.kept-extreme-${placement}`)
-  }
   /* How the selected part would meet the plane, worked out once per version and part. */
   private planeContactOf(shown: FigureRevision, part: string): FigurePlaneContact | undefined {
     return derivedOf(shown, `plane-contact|${part}`, () => {
@@ -883,6 +901,7 @@ export class FigureEditor extends LitElement {
   private renderOverlay() {
     const close = () => (this.overlay = undefined)
     const panel = (which: BarOverlay, label: string, body: unknown) => html`<div
+      side-overlay
       bar-overlay-panel=${which}
       role="dialog"
       aria-label=${i18next.t(label)}
@@ -1448,48 +1467,44 @@ export class FigureEditor extends LitElement {
     this.openFastening()
   }
   private openFastening() {
-    if (!this.selected || this.fastenPopup) return
+    if (!this.selected || this.fastening) return
     this.fastenError = ''
     this.fastenHover = null
+    /* One panel over the side at a time: the view or the history gives way to the window. */
+    this.overlay = undefined
     this.fastening = true
-    const content = document.createElement('figure-fasten-dialog') as NonNullable<typeof this.fastenWindow>
-    content.addEventListener('preview-command', e => this.commandPreview.ask((e as CustomEvent).detail))
-    content.addEventListener('fasten-hover', e => this.hoverFastening((e as CustomEvent).detail))
-    content.addEventListener('fasten-apply', e => this.applyFastening((e as CustomEvent).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())
   }
   private closeFastening() {
-    const popup = this.fastenPopup
-    this.fastenClosed()
-    popup?.close()
-  }
-  private 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. */
-  private 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 fastening window over the side panel, as the bar's panels stand there: the figure on screen, the part, and what
+   * the preview and a refusal said are the editor's. Its own Esc and 「취소」 close it, as its X does.
+   */
+  private renderFastening(unavailable: boolean) {
+    if (!this.fastening || !this.selected) return nothing
+    return html`<div side-overlay fasten-panel>
+      <div overlay-head>
+        <h3>${i18next.t('figure.label.fastening')}</h3>
+        <button quiet fasten-close aria-label=${i18next.t('figure.button.close')} title=${i18next.t('figure.button.close')} @click=${() => this.closeFastening()}>
+          <md-icon>close</md-icon>
+        </button>
+      </div>
+      <figure-fasten-dialog
+        overlay-body
+        .revision=${this.shown()}
+        .partId=${this.selected}
+        ?locked=${unavailable}
+        .previewWords=${this.commandPreview.words()}
+        .error=${this.fastenError}
+        @preview-command=${(e: CustomEvent) => this.commandPreview.ask(e.detail)}
+        @fasten-hover=${(e: CustomEvent) => this.hoverFastening(e.detail)}
+        @fasten-apply=${(e: CustomEvent) => this.applyFastening(e.detail.action)}
+        @fasten-cancel=${() => this.closeFastening()}
+      ></figure-fasten-dialog>
+    </div>`
   }
   /** 「적용」: the command, one step; refused, the window stays open and says why. */
   private applyFastening(action: FigureAuthoringAction) {
@@ -1557,7 +1572,6 @@ export class FigureEditor extends LitElement {
   }
   updated(changed: PropertyValues<this>) {
     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
     this.refusals.tell(changed)
@@ -1945,7 +1959,7 @@ export class FigureEditor extends LitElement {
           <div panel flush ?off=${tab !== 'verdict'}><slot name="verdict"></slot></div>
         </aside>
       </ox-three-pane>
-      ${this.renderOverlay()}`
+      ${this.renderOverlay()} ${this.renderFastening(unavailable)}`
   }
   /** 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/figure-fasten-dialog.ts

@@ -30,9 +30,9 @@ import type { FigureRevision } from './revision.js'
 const PLANE = '__plane'
 
 /**
- * 붙이기 창: what the selected part is fastened to, on which face, how -- chosen with room to see it, in the standard
- * popup the editor opens (`openPopup`: its title, its close, moved by its head) (user 2026-10-17: 「속성에는 심플하고
- * 직관적인 결과 위주로, 편집은 팝업에서 넓은 공간을 써서」; 2026-10-18: the standard popup, not a window of its own).
+ * 붙이기 창: what the selected part is fastened to, on which face, how (user 2026-10-17: 「속성에는 심플하고 직관적인
+ * 결과 위주로, 편집은 팝업에서 넓은 공간을 써서」). The editor stands it over the side panel with its title and close,
+ * where the canvas stays in sight (2026-10-19: the standard popup, always modal, hid the 3D it was choosing for).
  *
  * Everything chosen here is tried, not done: the command it comes to is told to the editor as it changes
  * (`preview-command`), and the canvas draws it. 「적용」 sends it once (`fasten-apply`), one step of the history;
@@ -104,6 +104,14 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
         margin: 0;
         color: var(--md-sys-color-error);
       }
+      /* 취소 · 적용 stay in sight at the window's foot when what is above them is taller than the panel. */
+      ox-popup-actions {
+        position: sticky;
+        bottom: calc(-1 * var(--popup-padding, 16px));
+        margin-bottom: calc(-1 * var(--popup-padding, 16px));
+        padding-bottom: var(--popup-padding, 16px);
+        background: var(--md-sys-color-surface-container-lowest);
+      }
     `
   ]
 
@@ -410,8 +418,6 @@ export class FigureFastenDialog extends localize(i18next)(LitElement) {
     this.setAttribute('role', 'dialog')
     this.setAttribute('aria-label', i18next.t('figure.label.fastening'))
     this.addEventListener('keydown', this.onKey)
-    /* The popup's fitting width is the overlay's own setting; the window asks it for room for the face and the way side by side. */
-    this.closest<HTMLElement>('ox-floating-overlay')?.style.setProperty('--overlay-center-fit-width', '640px')
   }
 
   private onKey = async (e: KeyboardEvent) => {

package/client/modeller/refusal-teller.ts

@@ -47,6 +47,14 @@ export class RefusalTeller {
     this.toldViewError = viewError
   }
 
+  /**
+   * What cannot be done this way, with the way it can, as a notice: nothing went wrong, so not the error's red
+   * (user 2026-10-19, the size drag on a part attached turned). Given more time than a plain notice, for its button.
+   */
+  point(message: string, way: { label: string; run: () => void }) {
+    notify({ level: 'info', message, option: { action: { label: way.label, callback: way.run }, timer: 8000 } })
+  }
+
   /*
     An edit that would stop clips is refused by figure-model with the clips named (CLIPS_DROPPED). The person is told
     which, and why, before anything is written; agreed, the same edit is made again letting exactly those go, as one

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

@@ -294,12 +294,13 @@ export const EditorStyles = css `
   }
   /*
     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).
+    part chosen, so neither takes a tab beside the part's (chief architect 2026-10-16). The fastening window stands in
+    the same place, over the side panel, so the canvas it previews on stays in sight (user 2026-10-19).
   */
   :host {
     position: relative;
   }
-  div[bar-overlay-panel] {
+  div[side-overlay] {
     position: absolute;
     top: var(--figure-bar-height, 44px);
     right: 8px;
@@ -326,10 +327,16 @@ export const EditorStyles = css `
   div[overlay-head] button[quiet] {
     margin-left: 0;
   }
-  div[overlay-body] {
+  [overlay-body] {
     min-height: 0;
     overflow: auto;
   }
+  /* The fastening window keeps to the panel's width: a popup's own sizing made it wider than the panel. */
+  div[fasten-panel] > figure-fasten-dialog {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
   /* Which part the panel speaks of. */
   div[subject] {
     position: sticky;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2a9B,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). The fastening window stands in\n    the same place, over the side panel, so the canvas it previews on stays in sight (user 2026-10-19).\n  */\n  :host {\n    position: relative;\n  }\n  div[side-overlay] {\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  [overlay-body] {\n    min-height: 0;\n    overflow: auto;\n  }\n  /* The fastening window keeps to the panel's width: a popup's own sizing made it wider than the panel. */\n  div[fasten-panel] > figure-fasten-dialog {\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 0;\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

@@ -65,12 +65,12 @@ export declare class FigureEditor extends LitElement {
     /** 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.
+     * The fastening window open for the selected part (user 2026-10-17): chosen there, applied once. It stands over the
+     * side panel, not over the canvas, so what is chosen is seen in 3D as it is chosen (user 2026-10-19: the standard
+     * popup, always modal, covered the preview). It closes with nothing written when the part, the tab, the middle or a
+     * bar panel 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. */
@@ -185,6 +185,15 @@ export declare class FigureEditor extends LitElement {
     private reachOf;
     /** Whether a size drag on this part could not show what is written: figure-model gives no face it keeps. */
     private sizeDragUnsure;
+    /**
+     * Why this part's size is not dragged, in one line (user 2026-10-19: the reason told the faces kept, and was not
+     * understood): attached turned or twisted, or turned off its upright.
+     */
+    private sizeDragRefusalOf;
+    /** The size drag refused, said as a notice with the way to the part's size fields. */
+    private tellSizeByFields;
+    /** To the part's first size field it takes typed, on the properties tab, ready to type over. */
+    private toSizeFields;
     /** A drag, written back as the part's own inputs — one step of the history, like typing the numbers. */
     private transformed;
     /** 맞추기 — one tool, one step of the history, through the same inputs as the gizmo. */
@@ -197,7 +206,6 @@ export declare class FigureEditor extends LitElement {
      * its top, a wall one's to the wall by its back, a centred one's centre to the origin's height. Once: nothing is
      * fastened. Refused, it says why.
      */
-    private keptExtremeWord;
     private planeContactOf;
     private renderPlaneAlign;
     private alignToPlane;
@@ -307,10 +315,11 @@ export declare class FigureEditor extends LitElement {
     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 fastening window over the side panel, as the bar's panels stand there: the figure on screen, the part, and what
+     * the preview and a refusal said are the editor's. Its own Esc and 「취소」 close it, as its X does.
+     */
+    private renderFastening;
     /** 「적용」: 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. */

package/dist-client/modeller/editor.js

@@ -80,8 +80,10 @@ let FigureEditor = class FigureEditor extends LitElement {
         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.
+         * The fastening window open for the selected part (user 2026-10-17): chosen there, applied once. It stands over the
+         * side panel, not over the canvas, so what is chosen is seen in 3D as it is chosen (user 2026-10-19: the standard
+         * popup, always modal, covered the preview). It closes with nothing written when the part, the tab, the middle or a
+         * bar panel changes under it.
          */
         this.fastening = false;
         /** Why the window's 「적용」 was refused, said in it. */
@@ -219,7 +221,7 @@ let FigureEditor = class FigureEditor extends LitElement {
           aria-pressed=${String(this.gizmoMode === tool.mode)}
           ?disabled=${!tool.can}
           aria-label=${i18next.t('figure.button.gizmo-' + tool.mode)}
-          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + i18next.t(tool.mode === 'scale' && this.sizeDragUnsure(this.asset(), this.selected) ? 'figure.text.gizmo-size-turned-fastening' : 'figure.text.gizmo-not-own', { part: partLabelOf(this.selected), extreme: this.keptExtremeWord() })}`}
+          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + (tool.mode === 'scale' && this.sizeDragUnsure(this.asset(), this.selected) ? this.sizeDragRefusalOf(this.selected) : i18next.t('figure.text.gizmo-not-own'))}`}
           @click=${() => this.useGizmo(tool.mode)}
         >
           <md-icon>${tool.icon}</md-icon>
@@ -261,7 +263,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         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'))
+        if (this.fastening && (_changed.has('selected') || !this.selected || this.tab !== 'properties' || this.middle !== 'edit' || this.overlay))
             this.closeFastening();
         /*
          * The section editor is of one part: when the selection moves off it by any way -- another part picked, the scene's
@@ -295,7 +297,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         if (mode === 'scale' && this.selected && this.gizmoMode !== 'scale') {
             const asset = this.asset();
             if (asset && this.sizeDragUnsure(asset, this.selected)) {
-                this.error = i18next.t('figure.text.gizmo-size-turned-fastening', { part: partLabelOf(this.selected), extreme: this.keptExtremeWord() });
+                this.tellSizeByFields(this.selected);
                 return;
             }
         }
@@ -575,6 +577,28 @@ let FigureEditor = class FigureEditor extends LitElement {
             return true;
         }
     }
+    /**
+     * Why this part's size is not dragged, in one line (user 2026-10-19: the reason told the faces kept, and was not
+     * understood): attached turned or twisted, or turned off its upright.
+     */
+    sizeDragRefusalOf(id) {
+        const fastened = !!this.asset()?.joints?.some(j => j.body1.part === ownerOf(id));
+        return i18next.t(fastened ? 'figure.text.gizmo-size-turned-fastening' : 'figure.text.gizmo-size-tilted', { part: partLabelOf(id) });
+    }
+    /** The size drag refused, said as a notice with the way to the part's size fields. */
+    tellSizeByFields(id) {
+        this.refusals.point(this.sizeDragRefusalOf(id), { label: i18next.t('figure.button.to-size-fields'), run: () => this.toSizeFields(id) });
+    }
+    /** To the part's first size field it takes typed, on the properties tab, ready to type over. */
+    async toSizeFields(id) {
+        this.middle = 'edit';
+        this.tab = 'properties';
+        this.selected = id;
+        await this.updateComplete;
+        const field = this.renderRoot.querySelector('[slot="size"] input:not([disabled]):not([readonly])');
+        field?.focus();
+        field?.select();
+    }
     /** A drag, written back as the part's own inputs — one step of the history, like typing the numbers. */
     transformed(id, result) {
         const view = this.session.read();
@@ -603,7 +627,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         const jointed = !!asset.joints?.some(j => j.body1.part === ownerOf(id));
         /* A size drag this part cannot show truly is not written: it springs back, and the reason is said. */
         if (result.scale && result.scale.some(k => Math.abs(k - 1) > 1e-4) && this.sizeDragUnsure(asset, id)) {
-            this.error = i18next.t('figure.text.gizmo-size-turned-fastening', { part: partLabelOf(id), extreme: this.keptExtremeWord() });
+            this.tellSizeByFields(id);
             return this.requestUpdate();
         }
         /*
@@ -681,10 +705,6 @@ let FigureEditor = class FigureEditor extends LitElement {
      * fastened. Refused, it says why.
      */
     /* What a tilted part's typed size keeps, by the figure's placement: not the floor's lowest point everywhere (designer 2026-09-27). */
-    keptExtremeWord() {
-        const placement = (this.asset())?.placement ?? 'floor';
-        return i18next.t(`figure.label.kept-extreme-${placement}`);
-    }
     /* How the selected part would meet the plane, worked out once per version and part. */
     planeContactOf(shown, part) {
         return derivedOf(shown, `plane-contact|${part}`, () => {
@@ -886,6 +906,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     renderOverlay() {
         const close = () => (this.overlay = undefined);
         const panel = (which, label, body) => html `<div
+      side-overlay
       bar-overlay-panel=${which}
       role="dialog"
       aria-label=${i18next.t(label)}
@@ -1458,50 +1479,46 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.openFastening();
     }
     openFastening() {
-        if (!this.selected || this.fastenPopup)
+        if (!this.selected || this.fastening)
             return;
         this.fastenError = '';
         this.fastenHover = null;
+        /* One panel over the side at a time: the view or the history gives way to the window. */
+        this.overlay = undefined;
         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 fastening window over the side panel, as the bar's panels stand there: the figure on screen, the part, and what
+     * the preview and a refusal said are the editor's. Its own Esc and 「취소」 close it, as its X does.
+     */
+    renderFastening(unavailable) {
+        if (!this.fastening || !this.selected)
+            return nothing;
+        return html `<div side-overlay fasten-panel>
+      <div overlay-head>
+        <h3>${i18next.t('figure.label.fastening')}</h3>
+        <button quiet fasten-close aria-label=${i18next.t('figure.button.close')} title=${i18next.t('figure.button.close')} @click=${() => this.closeFastening()}>
+          <md-icon>close</md-icon>
+        </button>
+      </div>
+      <figure-fasten-dialog
+        overlay-body
+        .revision=${this.shown()}
+        .partId=${this.selected}
+        ?locked=${unavailable}
+        .previewWords=${this.commandPreview.words()}
+        .error=${this.fastenError}
+        @preview-command=${(e) => this.commandPreview.ask(e.detail)}
+        @fasten-hover=${(e) => this.hoverFastening(e.detail)}
+        @fasten-apply=${(e) => this.applyFastening(e.detail.action)}
+        @fasten-cancel=${() => this.closeFastening()}
+      ></figure-fasten-dialog>
+    </div>`;
     }
     /** 「적용」: the command, one step; refused, the window stays open and says why. */
     applyFastening(action) {
@@ -1573,7 +1590,6 @@ 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;
@@ -1964,7 +1980,7 @@ let FigureEditor = class FigureEditor extends LitElement {
           <div panel flush ?off=${tab !== 'verdict'}><slot name="verdict"></slot></div>
         </aside>
       </ox-three-pane>
-      ${this.renderOverlay()}`;
+      ${this.renderOverlay()} ${this.renderFastening(unavailable)}`;
     }
     /** Position, rotation and size as rows of three cells; the shape's own measures one to a line, under their title. */
     renderGroups(groups, vectorTitle, singleTitle, unavailable, tools = null, held) {