@things-factory/figure-ui 10.1.91 → 10.1.93

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

@@ -6,6 +6,7 @@ import { i18next, localize } from '@operato/i18n'
 import type { FigureAuthoringAction, FigureCavityRequest, FigureEvaluatedShape } from '@hatiolab/figure-model'
 import { SidePanelStyles } from './side-panel-styles.js'
 import { drawnOf } from './section-drawing.js'
+import './figure-cavity-drawing.js'
 import {
   END_FACE,
   SIDE_FACE,
@@ -106,6 +107,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}
@@ -185,6 +189,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
             </small>`
           : nothing}
       </div>
+      ${cavity ? html`<figure-cavity-drawing .body=${body} .perSide=${this.perSide} ?locked=${this.locked}></figure-cavity-drawing>` : nothing}
       ${cavity
         ? html`<div field>
               <label>${i18next.t('figure.label.section-wall')}</label>

package/client/modeller/section-controls.ts

@@ -113,3 +113,22 @@ export function cavityDepthOf(shape: FigureEvaluatedShape): number {
   const closed = (x: typeof c.start) => (x === 'open' ? 0 : x.closed)
   return mm(e.end - e.start - closed(c.start) - closed(c.end))
 }
+
+/** The inside as it stands, every side's wall written out. */
+export function cavityWorkingOf(shape: FigureEvaluatedShape): { wall: Record<string, number>; start: FigureCavityRequest['start']; end: FigureCavityRequest['end'] } | undefined {
+  const c = shape.cavity
+  const e = shape.extrusion
+  if (!c || !e) return undefined
+  return { wall: Object.fromEntries(sidesOf(e.axis).map(s => [s, c.wall[s]!])), start: c.start, end: c.end }
+}
+
+/** A wall dragged to `value`: that side alone, or every side when the walls are one. */
+export function wallDragged(wall: Record<string, number>, side: string, value: number, perSide: boolean): Record<string, number> {
+  const v = Math.max(1, Math.round(value))
+  return perSide ? { ...wall, [side]: v } : Object.fromEntries(Object.keys(wall).map(s => [s, v]))
+}
+
+/** An end pressed: open becomes closed by the default wall, closed becomes open. */
+export function endToggled(shape: FigureEvaluatedShape, now: FigureCavityRequest['start']): FigureCavityRequest['start'] {
+  return now === 'open' ? { closed: defaultWallOf(shape) } : 'open'
+}

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;

package/dist-client/modeller/editor.js

@@ -379,7 +379,7 @@ let FigureEditor = 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;
@@ -390,41 +390,6 @@ let FigureEditor = 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;
@@ -638,7 +603,27 @@ let FigureEditor = class FigureEditor extends LitElement {
          * 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.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.
+     */
+    leaveSectionEditor(next) {
+        const editing = this.sectionEditing;
+        const editor = this.renderRoot.querySelector('figure-section-editor');
+        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. */
     useGizmo(mode) {
@@ -1019,14 +1004,11 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     renderPlaneAlign(asset, unavailable) {
         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>`;
     }
     alignToPlane() {
         const asset = parseFigureAsset(this.session.source());
@@ -1051,26 +1033,30 @@ let FigureEditor = class FigureEditor extends LitElement {
         catch {
             return null;
         }
-        const tool = (name, icon, label, title) => 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, unavailable)}
-      ${['x', 'z'].map(axis => {
-            const able = canMirror(asset, 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, label, title) => html `<button ?disabled=${unavailable} title=${i18next.t(title)} @click=${() => this.align(name)}>${i18next.t(label)}</button>`;
+        const mirrors = ['x', 'z'].map(axis => ({ axis, able: canMirror(asset, 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, 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
@@ -1906,12 +1892,11 @@ let FigureEditor = 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.
      */
     renderSubject() {
-        const name = this.session?.read()?.name || i18next.t('figure.text.new-figure-name');
         let summary;
         try {
             summary = this.selected ? partSummaryOf(parseFigureAsset(this.session.source()), ownerOf(this.selected), (key, params) => i18next.t(key, params)) : undefined;
@@ -1919,24 +1904,17 @@ let FigureEditor = class FigureEditor extends LitElement {
         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.
      */
     showModelSettings() {
@@ -2172,7 +2150,7 @@ let FigureEditor = 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
@@ -2282,14 +2260,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.linkCommand(refit.step);
     }
     renderSingle(name, field, unavailable) {
-        /* 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) => this.scrub(field, e, unavailable)}>${words.join(' · ')} (${field.unit})</span
       ><input
         aria-label=${field.id}