@things-factory/figure-ui 10.1.193 → 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/client/pages/figure-list-page.ts

@@ -2,8 +2,8 @@ import '@operato/data-grist'
 import '@material/web/icon/icon.js'
 import '../viewparts/figure-thumb.js'
 
-import { css, html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { css, html, nothing } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
 
 import type { DataGrist, FetchOption } from '@operato/data-grist'
 import { i18next, localize } from '@operato/i18n'
@@ -97,23 +97,6 @@ export class FigureListPage extends FigureListPageBase {
         카드 · 그림 칸 · 만들기 FAB 는 모든 카드 카탈로그와 같다(@operato/styles CardCatalogStyles,
         ADR-0117 개정 2026-10-13). 여기에는 이 화면에만 있는 것만 둔다.
       */
-      /* Which figures are listed: quiet words beside the filters, coloured when they are on. */
-      button[scope] {
-        font: inherit;
-        padding: 0 8px;
-        border: none;
-        background: none;
-        color: var(--md-sys-color-on-surface-variant);
-        cursor: pointer;
-        white-space: nowrap;
-      }
-      button[scope]:hover {
-        color: var(--md-sys-color-on-surface);
-      }
-      button[scope][aria-pressed='true'] {
-        color: var(--md-sys-color-primary);
-        font-weight: 600;
-      }
       ox-grist {
         /* 상태와 성숙도는 짧은 표식이다 — 두 줄로 세우지 않고 한 줄에 뉜다 */
         --data-card-detail-direction: row;
@@ -127,14 +110,18 @@ export class FigureListPage extends FigureListPageBase {
 
   @query('ox-grist') private grist!: DataGrist
 
-  /** The domain's own figures, or other domains' public ones (LV figure-server design G2), read only. */
-  @state() private scope: 'own' | 'public' = 'own'
+  /**
+   * The domain's own figures, or other domains' public ones (LV figure-server design G2), read only. Each is a screen
+   * of its own on the rail (user 2026-10-19): the own catalogue is where figures are made and changed, the public one
+   * only looked at, so a switch inside one list mixed two jobs. `figure-public-list-page` sets it.
+   */
+  protected readonly scope: 'own' | 'public' = 'own'
 
   private listen?: () => void
 
   get context() {
     return {
-      title: i18next.t('figure.title.figures'),
+      title: i18next.t(this.scope === 'public' ? 'figure.title.public-figures' : 'figure.title.figures'),
       search: {
         handler: (search: string) => {
           this.grist.searchText = search
@@ -171,15 +158,16 @@ export class FigureListPage extends FigureListPageBase {
           <div class="filters">
             <ox-filters-form autofocus without-search></ox-filters-form>
           </div>
-          <button scope aria-pressed=${String(this.scope === 'public')} @click=${() => this.toggleScope()}>${i18next.t('figure.button.public-figures')}</button>
         </div>
 
         <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
       </ox-grist>
 
-      <button fab title=${i18next.t('figure.button.new-figure')} @click=${() => this.openModeller()}>
-        <md-icon>add</md-icon>${i18next.t('figure.button.new-figure')}
-      </button>
+      ${this.scope === 'own'
+        ? html`<button fab title=${i18next.t('figure.button.new-figure')} @click=${() => this.openModeller()}>
+            <md-icon>add</md-icon>${i18next.t('figure.button.new-figure')}
+          </button>`
+        : nothing}
     `
   }
 
@@ -340,15 +328,19 @@ export class FigureListPage extends FigureListPageBase {
             이름표는 비워 둔다. 단추에 「초안」·「발행됨」이라고 적혀 있으니 그 앞의 「상태」는
             같은 말을 한 번 더 하는 것이고, 걸러 보기 줄에서 자리만 먹는다.
           */
-          filter: {
-            type: 'select-buttons',
-            operator: 'in',
-            label: '',
-            options: [
-              { display: i18next.t('figure.label.draft'), value: 'draft' },
-              { display: i18next.t('figure.label.figure-released'), value: 'released' }
-            ]
-          },
+          /* Another domain's public figures are released ones only: no draft to tell apart, no choice to offer. */
+          filter:
+            this.scope === 'own'
+              ? {
+                  type: 'select-buttons',
+                  operator: 'in',
+                  label: '',
+                  options: [
+                    { display: i18next.t('figure.label.draft'), value: 'draft' },
+                    { display: i18next.t('figure.label.figure-released'), value: 'released' }
+                  ]
+                }
+              : undefined,
           width: 120
         },
         {
@@ -559,11 +551,6 @@ export class FigureListPage extends FigureListPageBase {
     navigate(modellerPathOf(figure))
   }
 
-  private toggleScope() {
-    this.scope = this.scope === 'public' ? 'own' : 'public'
-    this.grist?.fetch()
-  }
-
   /** `remove` 는 HTMLElement 의 메서드다 — 가리면 조용한 결함이 된다. */
   private async removeFigure(figure: Figure) {
     if (this.scope === 'public') return

package/client/pages/figure-public-list-page.ts

@@ -0,0 +1,21 @@
+import { customElement } from 'lit/decorators.js'
+
+import { FigureListPage } from './figure-list-page.js'
+
+/**
+ * Other domains' public figures (LV figure-server design G2), a screen of its own on the rail (user 2026-10-19).
+ *
+ * Looked at only: each shows its latest release and its domain, and nothing on it is changed from here -- no new
+ * figure, no delete, no edit (`figure-detail-dock.ts` \`foreign\`). The catalogue's own class with the other scope, so
+ * the two lists are one list.
+ */
+@customElement('figure-public-list-page')
+export class FigurePublicListPage extends FigureListPage {
+  protected readonly scope = 'public' as const
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'figure-public-list-page': FigurePublicListPage
+  }
+}

package/client/route.ts

@@ -4,6 +4,10 @@ export default function route(page: string) {
       import('./pages/figure-list-page')
       return page
 
+    case 'figure-public-list':
+      import('./pages/figure-public-list-page')
+      return page
+
     case 'figure-modeller':
       import('./pages/figure-modeller-page')
       return page

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. */