@things-factory/figure-ui 10.1.90 → 10.1.92

package/client/modeller/editor.ts

@@ -305,7 +305,7 @@ export class FigureEditor extends LitElement {
     [off] {
       display: none !important;
     }
-    /* Which part the panel speaks of, and the way back to the whole figure. */
+    /* Which part the panel speaks of. */
     div[subject] {
       position: sticky;
       top: 0;
@@ -316,41 +316,6 @@ export class FigureEditor extends LitElement {
       background: var(--md-sys-color-surface-container-lowest);
       border-bottom: 1px solid var(--md-sys-color-outline-variant);
     }
-    nav[path] {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      min-width: 0;
-    }
-    nav[path] button[model-crumb] {
-      flex: none;
-      max-width: 55%;
-      height: 28px;
-      padding: 0 8px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 999em;
-      background: none;
-      color: var(--md-sys-color-primary);
-      cursor: pointer;
-    }
-    nav[path] button[model-crumb][on] {
-      border-color: var(--md-sys-color-primary);
-      background: var(--md-sys-color-primary-container);
-    }
-    nav[path] button[model-crumb]:focus-visible {
-      outline: 2px solid var(--md-sys-color-primary);
-      outline-offset: 1px;
-    }
-    nav[path] span[current] {
-      min-width: 0;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      font-weight: 600;
-    }
     div[subject-summary] {
       display: grid;
       gap: 1px;
@@ -651,7 +616,26 @@ export class FigureEditor extends LitElement {
      * 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.
      */
-    if (this.sectionEditing && this.sectionEditing !== this.selected) this.closeSectionEditor()
+    if (this.sectionEditing && this.sectionEditing !== this.selected) this.leaveSectionEditor(this.selected)
+  }
+  /**
+   * The selection moved off the part being edited. With nothing changed there the editor closes; with changes, the part
+   * stays selected while the editor asks (apply, let go, keep editing), and the move goes on only once it closed. A part
+   * gone or another figure opened has nothing to go back to: the editor closes.
+   */
+  private leaveSectionEditor(next: string) {
+    const editing = this.sectionEditing!
+    const editor = this.renderRoot.querySelector('figure-section-editor') as (HTMLElement & { dirty: boolean; requestClose(): Promise<boolean> }) | null
+    const view = this.session?.read()
+    const stillThere = !!view?.geometry.some(g => ownerOf(g.id) === editing)
+    if (!editor?.dirty || !stillThere) {
+      this.closeSectionEditor()
+      return
+    }
+    this.selected = editing
+    editor.requestClose().then(closed => {
+      if (closed && this.selected === editing) this.selected = next
+    })
   }
   /** The scene toggles: the mode already shown takes the gizmo away. */
   private useGizmo(mode: 'translate' | 'rotate' | 'scale') {
@@ -1003,14 +987,11 @@ export class FigureEditor extends LitElement {
   }
   private renderPlaneAlign(asset: FigureAsset, unavailable: boolean) {
     const placement = asset.placement ?? 'floor'
-    const icon = { floor: 'vertical_align_bottom', ceiling: 'vertical_align_top', wall: 'flip_to_back', center: 'vertical_align_center' }[placement]
     /* A tilted part touches the plane at a point or an edge, a ball at its lowest; the tooltip says so rather than promise a face (designer 2026-09-27). */
     const contact = this.planeContactOf(this.session!.source(), this.selected)
     const told = contact === 'tilted' || contact === 'extreme' ? `-${contact}` : ''
-    return html`<button plane-align=${placement} ?disabled=${unavailable} aria-label=${i18next.t(`figure.button.align-to-${placement}`)}
-      title=${i18next.t(`figure.text.align-to-${placement}${told}`)} @click=${() => this.alignToPlane()}>
-      <md-icon>${icon}</md-icon>
-    </button>`
+    return html`<button plane-align=${placement} ?disabled=${unavailable} title=${i18next.t(`figure.text.align-to-${placement}${told}`)}
+      @click=${() => this.alignToPlane()}>${i18next.t(`figure.button.align-to-${placement}`)}</button>`
   }
   private alignToPlane() {
     const asset = parseFigureAsset(this.session!.source())
@@ -1031,27 +1012,33 @@ export class FigureEditor extends LitElement {
     } catch {
       return null
     }
-    const tool = (name: AlignTool, icon: string, label: string, title: string) =>
-      html`<button ?disabled=${unavailable} aria-label=${i18next.t(label)} title=${i18next.t(title)} @click=${() => this.align(name)}>
-        <md-icon>${icon}</md-icon>
-      </button>`
-    return html`<div tools title=${i18next.t('figure.text.tools-explained')}>
-      ${tool('centre-x', 'horizontal_distribute', 'figure.button.center-x', 'figure.text.center-on-x')}
-      ${tool('centre-z', 'vertical_align_center', 'figure.button.center-z', 'figure.text.center-on-z')}
-      ${this.renderPlaneAlign(asset as FigureAsset, unavailable)}
-      ${(['x', 'z'] as const).map(axis => {
-        const able = canMirror(asset as never, this.selected, axis, reach)
-        return html`<button
-          ?disabled=${unavailable || !able}
-          aria-label=${i18next.t('figure.button.mirror-' + axis)}
-          title=${i18next.t(able ? 'figure.text.mirror-explained' : 'figure.text.mirror-would-overlap')}
-          @click=${() => this.mirror(axis)}
-        >
-          <md-icon>${axis === 'x' ? 'flip' : 'flip_camera_android'}</md-icon>
-        </button>`
-      })}
-      ${tool('snap', 'grid_on', 'figure.button.snap', 'figure.text.snap-explained')}
-    </div>`
+    /*
+     * In words, two rows by what they do (user 2026-10-01: 「무엇을 하는 것인지 모르겠다」): moving the part to the figure's
+     * centre lines, onto its plane or onto the grid; and making a mirrored copy, which makes a part and moves nothing.
+     */
+    const tool = (name: AlignTool, label: string, title: string) =>
+      html`<button ?disabled=${unavailable} title=${i18next.t(title)} @click=${() => this.align(name)}>${i18next.t(label)}</button>`
+    const mirrors = (['x', 'z'] as const).map(axis => ({ axis, able: canMirror(asset as never, this.selected, axis, reach) }))
+    return html`<div vector-row>
+        <label>${i18next.t('figure.label.tools')}</label>
+        <div tools>
+          ${tool('centre-x', 'figure.button.center-x', 'figure.text.center-on-x')}
+          ${tool('centre-z', 'figure.button.center-z', 'figure.text.center-on-z')}
+          ${this.renderPlaneAlign(asset as FigureAsset, unavailable)}
+          ${tool('snap', 'figure.button.snap', 'figure.text.snap-explained')}
+        </div>
+      </div>
+      <div vector-row>
+        <label>${i18next.t('figure.label.mirror-copy')}</label>
+        <div tools>
+          ${mirrors.map(
+            ({ axis, able }) => html`<button ?disabled=${unavailable || !able} title=${i18next.t('figure.text.mirror-explained')} @click=${() => this.mirror(axis)}>
+              ${i18next.t('figure.button.mirror-' + axis)}
+            </button>`
+          )}
+        </div>
+      </div>
+      ${mirrors.every(m => !m.able) ? html`<p hint>${i18next.t('figure.text.mirror-would-overlap')}</p>` : nothing}`
   }
   /**
    * A part's name. It renames every value the part owns, and what refers to them follows
@@ -1872,36 +1859,27 @@ export class FigureEditor extends LitElement {
     </div>`
   }
   /**
-   * Where the panel is, held at its top: the model by its name -- the way back to its settings -- and the part chosen,
-   * with the part's three lines: its kind, how its size answers, what holds it (designer 2026-09-27, B and B.1). The
-   * model name is the same move as the parts list's root; there is no separate "whole figure" link.
+   * The part the panel speaks of, held at its top: its kind, how its size answers, what holds it (designer 2026-09-27,
+   * B). No path above it (user 2026-10-01): the parts list and the canvas already show which part is chosen, and the
+   * list's root is the way back to the model's settings.
    */
   private renderSubject() {
-    const name = this.session?.read()?.name || i18next.t('figure.text.new-figure-name')
     let summary: { kind: string; size: string; relation: string } | undefined
     try {
       summary = this.selected ? partSummaryOf(parseFigureAsset(this.session!.source()), ownerOf(this.selected), (key, params) => i18next.t(key, params)) : undefined
     } catch {
       summary = undefined
     }
+    if (!summary) return nothing
     return html`<div subject>
-      <nav path aria-label=${i18next.t('figure.label.panel-path')}>
-        <button model-crumb ?on=${!this.selected} title=${`${i18next.t('figure.button.show-model-settings')} · ${name}`}
-          aria-label=${`${i18next.t('figure.button.show-model-settings')}: ${name}`} @click=${() => this.showModelSettings()}>${name}</button>
-        ${this.selected
-          ? html`<span aria-hidden="true">›</span><span current aria-current="location" title=${partLabelOf(this.selected)}>${partLabelOf(this.selected)}</span>`
-          : html`<span aria-hidden="true">·</span><span current aria-current="location">${i18next.t('figure.label.model-settings')}</span>`}
-      </nav>
-      ${summary
-        ? html`<div subject-summary>
-            ${summary.kind ? html`<b>${summary.kind}</b>` : nothing}
-            <small>${summary.size}</small><small>${summary.relation}</small>
-          </div>`
-        : nothing}
+      <div subject-summary>
+        ${summary.kind ? html`<b>${summary.kind}</b>` : nothing}
+        <small>${summary.size}</small><small>${summary.relation}</small>
+      </div>
     </div>`
   }
   /**
-   * The model's settings: the same move from the parts list's root and from the panel's path (B.1). It shows them on
+   * The model's settings, from the parts list's root (B.1). It shows them on
    * the properties tab whatever tab was open; it changes no data, no camera, no history and no AI conversation.
    */
   private showModelSettings() {
@@ -2144,7 +2122,7 @@ export class FigureEditor extends LitElement {
       ? html`<section>
           <h3>${i18next.t(vectorTitle)}</h3>
           ${groups.vectors.map(g => this.renderVector(g, unavailable, held))}
-          ${tools ? html`<div vector-row><label>${i18next.t('figure.label.tools')}</label>${tools}</div>` : nothing}
+          ${tools ?? nothing}
         </section>`
       : nothing}
     ${groups.singles.length
@@ -2255,14 +2233,7 @@ export class FigureEditor extends LitElement {
     if (agreed) this.linkCommand(refit.step)
   }
   private renderSingle(name: string, field: FieldLike, unavailable: boolean) {
-    /* A drawn section's point is called by its number and axis, as the section editor calls it (ADR-0100 §2.1, Q9). */
-    const point = /^point\.p(\d+)\.([xyz])$/.exec(name)
-    const apex = /^apex\.([xyz])$/.exec(name)
-    const words = point
-      ? [i18next.t('figure.label.section-editor-coordinate', { point: point[1]!, axis: point[2]!.toUpperCase() })]
-      : apex
-        ? [`${i18next.t('figure.label.section-editor-apex-mark')} ${apex[1]!.toUpperCase()}`]
-        : name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }))
+    const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }))
     return html`<span ?scrub=${!unavailable} @pointerdown=${(e: PointerEvent) => this.scrub(field as never, e, unavailable)}>${words.join(' · ')} (${field.unit})</span
       ><input
         aria-label=${field.id}

package/client/modeller/fields.ts

@@ -46,7 +46,14 @@ export function groupFields(fields: readonly FieldLike[], part?: string): { vect
     AXES.forEach((axis, i) => byId.has(ids[i]!) && (cells[axis] = byId.get(ids[i]!)!))
     vectors.push({ kind: 'vector', name, cells })
   }
-  const singles: FieldGroup[] = own.filter(f => !used.has(f.id)).map(field => ({ kind: 'single', name: nameOf(field.id.slice(prefix.length)), field }))
+  /*
+    A drawn section's points and a pyramid's apex are edited in the section editor, where a move is checked as it is made
+    and the points stand in the outline's order (user 2026-10-01): not here, one field each, in the order they were made.
+  */
+  const drawn = (id: string) => /^(point\.[^.]+|apex)\.[xyz]$/.test(id.slice(prefix.length))
+  const singles: FieldGroup[] = own
+    .filter(f => !used.has(f.id) && !drawn(f.id))
+    .map(field => ({ kind: 'single', name: nameOf(field.id.slice(prefix.length)), field }))
   return { vectors, singles }
 }
 

package/client/modeller/figure-section-close-choice.ts

@@ -0,0 +1,52 @@
+import { LitElement, html, css, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import '@operato/popup/ox-popup-actions.js'
+import { CommonPopupStyles } from '@operato/styles'
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+
+/** What to do with a section edit not applied yet, when its editor is about to close (user 2026-10-01). */
+export type SectionCloseChoice = 'apply' | 'discard'
+
+/**
+ * Closing the section editor with changes not applied: apply them, let them go, or keep editing. Closes with the choice,
+ * or with nothing -- then the editor stays open as it was. Apply is not offered while the working shape would be refused
+ * or the figure changed since the editor opened; the words say which.
+ */
+@customElement('figure-section-close-choice')
+export class FigureSectionCloseChoice extends LitElement {
+  static styles = [
+    CommonPopupStyles,
+    css`
+      :host {
+        overflow-y: auto;
+      }
+      p {
+        margin: 0 0 12px;
+      }
+    `
+  ]
+
+  /** Why the working shape cannot be applied now, or empty when it can. */
+  @property({ type: String }) held = ''
+
+  render() {
+    return html`
+      <p>${i18next.t('figure.text.section-editor-close-changed')}</p>
+      ${this.held ? html`<p>${this.held}</p>` : nothing}
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => closePopup(this)}>${i18next.t('figure.button.keep-editing')}</md-text-button>
+        <md-text-button slot="start" destructive @click=${() => closePopup(this, 'discard' satisfies SectionCloseChoice)}
+          >${i18next.t('figure.button.section-editor-discard')}</md-text-button
+        >
+        ${this.held
+          ? nothing
+          : html`<md-filled-button slot="confirm" @click=${() => closePopup(this, 'apply' satisfies SectionCloseChoice)}
+              >${i18next.t('figure.button.section-editor-apply-and-close')}</md-filled-button
+            >`}
+      </ox-popup-actions>
+    `
+  }
+}

package/client/modeller/figure-section-editor.ts

@@ -8,6 +8,9 @@ import type { FigureAuthoringAction, FigureEvaluatedShape, FigureSection, Figure
 import { SidePanelStyles } from './side-panel-styles.js'
 import { apexOver, drawnOf, insertAfter, markedBy, movePoint, pointLabel, removePoint, sectionOf, workingIssuesOf, workingOf, type SectionWorking } from './section-drawing.js'
 import { END_FACE } from './section-controls.js'
+import { openPopup } from '@operato/layout'
+import './figure-section-close-choice.js'
+import type { SectionCloseChoice } from './figure-section-close-choice.js'
 
 type Axis = 'x' | 'y' | 'z'
 
@@ -34,7 +37,8 @@ export const NARROW_BELOW = 900
  *
  * What the kernel would refuse is marked on the outline and said in the list; apply is held back, and the solid shows
  * the last valid state, which the caption names. Apply sends one `set-section` command (one step of the history); cancel
- * or Esc sends nothing and lets the preview go. The undo here is the editor's own. If the figure changes while the editor
+ * or Esc sends nothing and lets the preview go -- after asking, when something was changed: apply it, let it go, or keep
+ * editing (`requestClose`). The undo here is the editor's own. If the figure changes while the editor
  * is open, apply is refused until it is opened again.
  */
 @customElement('figure-section-editor')
@@ -306,10 +310,12 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
    */
   private keys = (e: KeyboardEvent) => {
     const inField = (e.composedPath()[0] as HTMLElement)?.tagName === 'INPUT'
+    /* While the close is being asked, the question has the keys: Esc there is 계속 편집. */
+    if (this.asking) return
     const take = () => (e.preventDefault(), e.stopImmediatePropagation())
     if (e.key === 'Escape') {
       take()
-      this.cancel()
+      this.requestClose()
     } else if ((e.key === 'Delete' || e.key === 'Backspace') && !inField && this.selected) {
       /* In a field the key deletes a character; outside, the chosen point. */
       take()
@@ -390,6 +396,55 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     this.close()
   }
 
+  /** Whether anything was changed since the editor opened. */
+  get dirty(): boolean {
+    const key = (w: SectionWorking) =>
+      JSON.stringify([
+        w.points.map(p => [p.id, p.x ?? 0, p.y ?? 0, p.z ?? 0]),
+        Object.entries(w.across).sort(),
+        w.length,
+        w.apex ? Object.entries(w.apex).sort() : null
+      ])
+    return !!this.opened && key(this.working) !== key(this.opened)
+  }
+
+  private asking = false
+  /**
+   * Close, asking first when something was changed (user 2026-10-01): apply it, let it go, or keep editing. True when the
+   * editor closed; false when the person keeps editing.
+   */
+  async requestClose(): Promise<boolean> {
+    if (!this.dirty) {
+      this.cancel()
+      return true
+    }
+    if (this.asking) return false
+    const held = this.stale
+      ? i18next.t('figure.text.section-editor-stale')
+      : this.valid(this.working)
+        ? ''
+        : i18next.t('figure.text.section-editor-close-invalid')
+    this.asking = true
+    try {
+      const choice = await openPopup<SectionCloseChoice>(html`<figure-section-close-choice .held=${held}></figure-section-close-choice>`, {
+        backdrop: true,
+        size: 'small',
+        title: i18next.t('figure.label.section-editor')
+      }).result
+      if (choice === 'apply' && !held) {
+        this.apply()
+        return true
+      }
+      if (choice === 'discard') {
+        this.cancel()
+        return true
+      }
+      return false
+    } finally {
+      this.asking = false
+    }
+  }
+
   private cancel() {
     this.dispatchEvent(new CustomEvent('command-live', { detail: { action: null }, bubbles: true, composed: true }))
     this.close()
@@ -441,7 +496,7 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
             ? i18next.t('figure.text.section-editor-stale')
             : i18next.t(this.kind === 'polygon' ? 'figure.text.section-editor-hint' : 'figure.text.section-editor-hint-sized')}
         </span>
-        <button @click=${() => this.cancel()}>${i18next.t('figure.button.section-editor-cancel')}</button>
+        <button @click=${() => this.requestClose()}>${i18next.t('figure.button.section-editor-cancel')}</button>
         <button primary ?disabled=${this.stale || words.length > 0} @click=${() => this.apply()}>${i18next.t('figure.button.section-editor-apply')}</button>
       </footer>
     `

package/client/modeller/figure-section-panel.ts

@@ -106,6 +106,9 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
             <button act ?disabled=${this.locked} @click=${() => this.dispatchEvent(new CustomEvent('section-editor-open', { bubbles: true, composed: true }))}>
               ${i18next.t('figure.button.section-editor-open')}
             </button>
+            ${e.section.kind === 'polygon'
+              ? html`<small>${i18next.t(e.apex ? 'figure.text.section-points-apex' : 'figure.text.section-points', { points: String(e.section.points.length) })}</small>`
+              : nothing}
           </div>`
         : nothing}
       ${kind === 'rectangle' ? this.renderCorner(body) : nothing}

package/client/modeller/side-panel-styles.ts

@@ -101,19 +101,17 @@ export const SidePanelStyles = css`
   div[vector-row] + div[inline-field] {
     margin-top: 5px;
   }
-  /* A row of icon tools (align, mirror, snap). */
+  /* A row of worded tools (align, snap; mirror copies). */
   div[tools] {
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
   }
   div[tools] button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 30px;
     height: 28px;
-    padding: 0;
+    padding: 0 10px;
+    font: inherit;
+    font-size: 0.78rem;
     color: var(--md-sys-color-on-surface);
     background: var(--md-sys-color-surface-container-lowest);
     border: 1px solid var(--md-sys-color-outline-variant);
@@ -127,11 +125,6 @@ export const SidePanelStyles = css`
     opacity: 0.45;
     cursor: default;
   }
-  div[tools] md-icon {
-    font-size: 17px;
-    width: 17px;
-    height: 17px;
-  }
   div[pair] {
     display: flex;
     gap: 4px;

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

@@ -114,6 +114,12 @@ export declare class FigureEditor extends LitElement {
     private propertiesPanel;
     private foldsOf;
     protected willUpdate(_changed: PropertyValues): void;
+    /**
+     * The selection moved off the part being edited. With nothing changed there the editor closes; with changes, the part
+     * stays selected while the editor asks (apply, let go, keep editing), and the move goes on only once it closed. A part
+     * gone or another figure opened has nothing to go back to: the editor closes.
+     */
+    private leaveSectionEditor;
     /** The scene toggles: the mode already shown takes the gizmo away. */
     private useGizmo;
     /**
@@ -303,13 +309,13 @@ export declare class FigureEditor extends LitElement {
     private pointBlockedOf;
     private renderStart;
     /**
-     * Where the panel is, held at its top: the model by its name -- the way back to its settings -- and the part chosen,
-     * with the part's three lines: its kind, how its size answers, what holds it (designer 2026-09-27, B and B.1). The
-     * model name is the same move as the parts list's root; there is no separate "whole figure" link.
+     * The part the panel speaks of, held at its top: its kind, how its size answers, what holds it (designer 2026-09-27,
+     * B). No path above it (user 2026-10-01): the parts list and the canvas already show which part is chosen, and the
+     * list's root is the way back to the model's settings.
      */
     private renderSubject;
     /**
-     * The model's settings: the same move from the parts list's root and from the panel's path (B.1). It shows them on
+     * The model's settings, from the parts list's root (B.1). It shows them on
      * the properties tab whatever tab was open; it changes no data, no camera, no history and no AI conversation.
      */
     private showModelSettings;