@things-factory/figure-ui 10.1.112 → 10.1.114

package/client/modeller/editor.ts

@@ -9,7 +9,7 @@ import { live } from 'lit/directives/live.js'
 import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figureRecipeIdFor, parseFigureAsset, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, type FigurePlaneContact, type FigureClipLoss, figurePartFaceOf, type FigureFaceArea, figureRowOf, type FigureRowReading, figureFaceOverhangOf, type FigureFaceOverhang, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model'
 import type { RecipeTemplate } from './recipes.js'
 import './figure-recipe-catalog.js'
-import type { FigureAsset, FigureAuthoringAction, FigureEvaluatedShape, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigurePlacement } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureAuthoringAction, FigureEvaluatedShape, FigureInputChange, FigurePartEdit, FigurePrimitiveCreation, FigureProposalStep, FigureRecipe, FigureRecipeValue, FigurePlacement, FigureFaceMappingNeed, FigureFaceRemap } from '@hatiolab/figure-model'
 import type { FigureProductSession } from './product-session.js'
 import { captureFigureThumbnail } from './thumbnail.js'
 import { drawableFigureParts } from './renderer.js'
@@ -396,6 +396,12 @@ export class FigureEditor extends LitElement {
   @property({ attribute: false }) firstSave?: (name: string) => Promise<FirstSave | undefined>
   @state() private selected = ''
   @state() private error = ''
+  /*
+   * An edit that takes a face away which something stands on (ADR-0100 A8): held, with what the kernel says stands
+   * there, until the author chooses where each goes -- then the same edit goes again with the remap. Shown where the
+   * edit was made (`from`).
+   */
+  @state() private faceMapping?: { action: FigureAuthoringAction; need: FigureFaceMappingNeed; from: 'section-editor' | 'panel' }
   /** The same link offered again with the size range narrowed, after a link the declared range could not hold. */
   @state() private retry?: { label: string; action?: FigureAuthoringAction; run?: () => void }
   @state() private tab: SideTab = 'properties'
@@ -1168,7 +1174,15 @@ export class FigureEditor extends LitElement {
     ></figure-clips>`
   }
   /** One command, one step of the history. A refusal a person can meet here is said in their words. */
-  private linkCommand(action: FigureAuthoringAction) {
+  /** Where a held edit goes once the author has chosen where what stands on its lost faces goes. */
+  private mapFaces(remap: FigureFaceRemap[]) {
+    const held = this.faceMapping
+    if (!held) return
+    const done = this.linkCommand({ ...held.action, remap } as FigureAuthoringAction, held.from)
+    if (done && held.from === 'section-editor') this.closeSectionEditor()
+  }
+  /** Runs a command; true when it was taken. */
+  private linkCommand(action: FigureAuthoringAction, from: 'section-editor' | 'panel' = 'panel'): boolean {
     /* Committed or refused, a command in hand is let go of: the figure as it stands is drawn again. */
     this.holdAction(null)
     this.retry = undefined
@@ -1177,6 +1191,7 @@ export class FigureEditor extends LitElement {
     try {
       this.session!.command(action)
       this.error = ''
+      this.faceMapping = undefined
       /* What the command did besides what was asked, in one line: the figure's size declared to follow (ADR ruling Q1). */
       if (action.kind === 'follow-size' && !hadSize) {
         const size = this.designValues()
@@ -1187,14 +1202,22 @@ export class FigureEditor extends LitElement {
         })
       }
       this.changed()
+      return true
     } catch (error) {
-      if (this.askClipLoss(error, () => this.linkCommand(action))) return
+      if (this.askClipLoss(error, () => this.linkCommand(action, from))) return false
       const code = (error as { code?: string })?.code
+      /* Something stands on a face this takes away: ask where it goes, there, rather than only saying no. */
+      const need = (error as { details?: FigureFaceMappingNeed }).details
+      if (code === 'FEATURE_MAPPING_REQUIRED' && need?.lost?.length) {
+        this.faceMapping = { action, need, from }
+        this.error = ''
+        return false
+      }
       const narrowing = narrowingRetryOf(action, error, (key, params) => i18next.t(key, params))
       if (narrowing) {
         this.error = narrowing.message
         this.retry = { label: narrowing.label, action: narrowing.retry as FigureAuthoringAction }
-        return
+        return false
       }
       this.error =
         code === 'DIMENSION_CYCLE'
@@ -1204,6 +1227,7 @@ export class FigureEditor extends LitElement {
             : sizeRangeRefusalOf(error, (key, params) => i18next.t(key, params)) ??
               placementRefusalOf(error, (key, params) => i18next.t(key, params)) ??
               this.said(error)
+      return false
     }
   }
   private changeField(field: { id: string; unit: FigureInputChange['unit']; role?: string }, event: Event) {
@@ -1743,6 +1767,7 @@ export class FigureEditor extends LitElement {
   private choose(id: string) {
     /* A copy on the canvas selects its repeat: the part the author made. */
     this.selected = id ? ownerOf(id) : id
+    this.faceMapping = undefined
     if (id && (this.tab === 'verdict' || this.tab === 'view' || this.tab === 'history')) this.tab = 'properties'
   }
   private asset(): unknown {
@@ -1801,8 +1826,14 @@ export class FigureEditor extends LitElement {
       .kept=${kept}
       .pointBlocked=${this.pointBlockedOf(drawn)}
       .revision=${this.session?.read().revision ?? 0}
-      @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+      .faceMapping=${this.faceMapping?.from === 'section-editor' ? this.faceMapping.need : undefined}
+      @command=${(e: CustomEvent) => {
+        /* Held for a choice of where things go: the editor stays open, the choice shown in it. */
+        if (!this.linkCommand(e.detail.action, 'section-editor')) e.detail.held = true
+      }}
       @command-live=${(e: CustomEvent) => this.holdAction(e.detail.action)}
+      @face-mapped=${(e: CustomEvent) => this.mapFaces(e.detail.remap)}
+      @face-mapping-cancel=${() => (this.faceMapping = undefined)}
       @section-editor-close=${() => this.closeSectionEditor()}
     ></figure-section-editor>`
   }
@@ -2078,6 +2109,9 @@ export class FigureEditor extends LitElement {
                   <figure-section-panel
                     .body=${{ ...part, id: this.selected }}
                     ?locked=${unavailable}
+                    .faceMapping=${this.faceMapping?.from === 'panel' ? this.faceMapping.need : undefined}
+                    @face-mapped=${(e: CustomEvent) => this.mapFaces(e.detail.remap)}
+                    @face-mapping-cancel=${() => (this.faceMapping = undefined)}
                     @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
                     @command-live=${(e: CustomEvent) => this.holdAction(e.detail.action)}
                     @section-editor-open=${() => (this.sectionEditing = this.selected)}

package/client/modeller/face-mapping.ts

@@ -0,0 +1,39 @@
+import type { FigureFaceMappingNeed, FigureFaceReference, FigureFaceRemap } from '@hatiolab/figure-model'
+
+/*
+ * Where what stands on a face an edit takes away goes instead (ADR-0100 A8, user 2026-10-02): one row per thing that
+ * refers to a lost face, its choices the faces that remain looking the same way, and -- for a joint, never a named
+ * face -- let go where it stands. Nothing is chosen for the author: where it goes only they know.
+ */
+
+export interface FaceMappingRow {
+  ref: FigureFaceReference
+  /** The face it is on now, which the edit takes away. */
+  lost: string
+  /** The faces it may go to: those that remain, looking the way the lost one did. */
+  faces: string[]
+  /** Whether it may be let go where it stands: a joint may, a named face may not. */
+  detach: boolean
+}
+
+export const DETACH = '__detach'
+
+export function faceMappingRowsOf(need: FigureFaceMappingNeed): FaceMappingRow[] {
+  return need.lost.flatMap(lost => {
+    const faces = need.remain.filter(r => lost.axis === undefined || (r.axis === lost.axis && r.normal === lost.normal)).map(r => r.face)
+    return lost.refs.map(ref => ({ ref, lost: lost.face, faces, detach: ref.kind === 'joint' }))
+  })
+}
+
+/** The remap a command takes, once every row is chosen; undefined while one is not. */
+export function remapOf(rows: readonly FaceMappingRow[], picks: Readonly<Record<string, string>>): FigureFaceRemap[] | undefined {
+  const out: FigureFaceRemap[] = []
+  for (const row of rows) {
+    const pick = picks[rowKey(row)]
+    if (!pick) return undefined
+    out.push({ ref: { kind: row.ref.kind, id: row.ref.id }, to: pick === DETACH ? 'detach' : { face: pick } })
+  }
+  return out
+}
+
+export const rowKey = (row: FaceMappingRow) => `${row.ref.kind}:${row.ref.id}:${row.lost}`

package/client/modeller/figure-face-mapping.ts

@@ -0,0 +1,78 @@
+import { css, html, LitElement, nothing, type PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import type { FigureFaceMappingNeed } from '@hatiolab/figure-model'
+
+import { SidePanelStyles } from './side-panel-styles.js'
+import { DETACH, faceMappingRowsOf, remapOf, rowKey } from './face-mapping.js'
+
+/**
+ * 없어지는 면에 붙은 것을 옮길 곳 (ADR-0100 A8): shown where the edit was made, under it. Each thing on a lost face
+ * is a row; apply is held until every row is chosen, and then the same edit goes again with the remap, one step.
+ */
+@customElement('figure-face-mapping')
+export class FigureFaceMapping extends localize(i18next)(LitElement) {
+  static styles = [
+    SidePanelStyles,
+    css`
+      :host {
+        display: grid;
+        gap: 8px;
+        padding: 10px 12px;
+        border: 1px solid var(--md-sys-color-error);
+        border-radius: 8px;
+      }
+      div[row] {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        gap: 8px;
+        align-items: center;
+      }
+      div[buttons] {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-end;
+      }
+    `
+  ]
+
+  @property({ attribute: false }) need?: FigureFaceMappingNeed
+  @state() private picks: Record<string, string> = {}
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    /* Another refusal is another question: what was chosen for the last one does not carry over. */
+    if (changed.has('need')) this.picks = {}
+  }
+
+  private face = (face: string) => i18next.t('figure.label.face-' + face, { defaultValue: face })
+
+  render() {
+    if (!this.need) return nothing
+    const rows = faceMappingRowsOf(this.need)
+    const remap = remapOf(rows, this.picks)
+    const lost = [...new Set(this.need.lost.map(l => this.face(l.face)))].join(', ')
+    return html`<p>${i18next.t('figure.text.face-mapping-lost', { faces: lost })}</p>
+      ${rows.map(
+        row => html`<div row>
+          <span>${row.ref.part ?? row.ref.id} · ${this.face(row.lost)}</span>
+          <select
+            aria-label=${i18next.t('figure.label.face-mapping-to', { part: row.ref.part ?? row.ref.id })}
+            @change=${(e: Event) => (this.picks = { ...this.picks, [rowKey(row)]: (e.target as HTMLSelectElement).value })}
+          >
+            <option value="" ?selected=${!this.picks[rowKey(row)]}>${i18next.t('figure.label.face-mapping-choose')}</option>
+            ${row.faces.map(f => html`<option value=${f}>${this.face(f)}</option>`)}
+            ${row.detach ? html`<option value=${DETACH}>${i18next.t('figure.label.face-mapping-detach')}</option>` : nothing}
+          </select>
+        </div>`
+      )}
+      <div buttons>
+        <button @click=${() => this.dispatchEvent(new CustomEvent('face-mapping-cancel', { bubbles: true, composed: true }))}>
+          ${i18next.t('figure.button.face-mapping-cancel')}
+        </button>
+        <button act ?disabled=${!remap} @click=${() => remap && this.dispatchEvent(new CustomEvent('face-mapped', { detail: { remap }, bubbles: true, composed: true }))}>
+          ${i18next.t('figure.button.face-mapping-apply')}
+        </button>
+      </div>`
+  }
+}

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

@@ -4,11 +4,12 @@ import { live } from 'lit/directives/live.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { figureCavitySectionOf, figureSectionSidesOf } from '@hatiolab/figure-model'
-import type { FigureAuthoringAction, FigureEvaluatedShape, FigureSection, FigureSectionMeasure, FigureSectionPoint } from '@hatiolab/figure-model'
+import type { FigureAuthoringAction, FigureEvaluatedShape, FigureFaceMappingNeed, FigureSection, FigureSectionMeasure, FigureSectionPoint } from '@hatiolab/figure-model'
 import { SidePanelStyles } from './side-panel-styles.js'
 import { apexOver, drawnOf, insertAfter, markedBy, movePoint, pointLabel, removePoint, sectionOf, workingIssuesOf, workingOf, workingShapeOf, type SectionWorking } from './section-drawing.js'
 import { cavityDepthOf, cavityRequestOf, cavityResultOf, END_FACE, sameOf, sidesOf } from './section-controls.js'
 import './figure-cavity-drawing.js'
+import './figure-face-mapping.js'
 import { openPopup } from '@operato/layout'
 import './figure-section-close-choice.js'
 import type { SectionCloseChoice } from './figure-section-close-choice.js'
@@ -276,6 +277,8 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
   @property({ attribute: false }) pointBlocked = ''
   /** The figure's revision now; the editor remembers the one it opened at. */
   @property({ type: Number }) revision = 0
+  /** What stands on the faces the last apply takes away (ADR-0100 A8): asked here, where the edit was made. */
+  @property({ attribute: false }) faceMapping?: FigureFaceMappingNeed
   /** Narrow: the outline or the solid behind. */
   @property({ reflect: true }) show: 'outline' | 'solid' = 'outline'
   /** Set when the space the editor stands in leaves too little beside it to see the solid. */
@@ -430,8 +433,10 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
 
   private apply() {
     if (this.stale || !this.valid(this.working)) return
-    this.dispatchEvent(new CustomEvent('command', { detail: { action: this.action(this.working) }, bubbles: true, composed: true }))
-    this.close()
+    const detail: { action: FigureAuthoringAction; held?: boolean } = { action: this.action(this.working) }
+    this.dispatchEvent(new CustomEvent('command', { detail, bubbles: true, composed: true }))
+    /* Held for a choice of where what stands on a lost face goes: stays open, the choice shown below. */
+    if (!detail.held) this.close()
   }
 
   /** Whether anything was changed since the editor opened. */
@@ -526,7 +531,10 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
       </nav>
       <div body>
         <div outline>${this.drawing(issues, words.length > 0)}</div>
-        <aside>${this.list(issues, words)}</aside>
+        <aside>
+          ${this.faceMapping ? html`<figure-face-mapping .need=${this.faceMapping}></figure-face-mapping>` : nothing}
+          ${this.list(issues, words)}
+        </aside>
       </div>
       <footer>
         <button ?disabled=${!this.history.length} @click=${() => this.back()}>${i18next.t('figure.button.section-editor-back')}</button>

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

@@ -4,10 +4,11 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
 
 import { i18next, localize } from '@operato/i18n'
-import type { FigureAuthoringAction, FigureEvaluatedShape } from '@hatiolab/figure-model'
+import type { FigureAuthoringAction, FigureEvaluatedShape, FigureFaceMappingNeed } from '@hatiolab/figure-model'
 import { SidePanelStyles } from './side-panel-styles.js'
 import { drawnOf } from './section-drawing.js'
 import './figure-cavity-drawing.js'
+import './figure-face-mapping.js'
 import { cavityDepthOf, cavityRequestOf, cavityResultOf, cornerLimitOf, cornerRefusalOf, mm, sameOf } from './section-controls.js'
 
 type Body = { id: string; shape: FigureEvaluatedShape }
@@ -59,6 +60,8 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
 
   @property({ attribute: false }) body?: Body
   @property({ type: Boolean }) locked = false
+  /** What stands on the faces the last edit here takes away (ADR-0100 A8): asked here, where the edit was made. */
+  @property({ attribute: false }) faceMapping?: FigureFaceMappingNeed
   /** What each field would not take, by field, said under it. */
   @state() private refusals: Record<string, string> = {}
   /** What is typed in a field and not yet sent, by field: the figure drawn with it must not type over it. */
@@ -97,6 +100,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
         : nothing}
       ${kind === 'rectangle' ? this.renderCorner(body) : nothing}
       ${/* No inside for a drawn section: the control is not there, rather than a line saying so. */ kind === 'rectangle' || kind === 'ellipse' ? this.renderCavity(body) : nothing}
+      ${this.faceMapping ? html`<figure-face-mapping .need=${this.faceMapping}></figure-face-mapping>` : nothing}
     </section>`
   }
 

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

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

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

@@ -47,6 +47,7 @@ export declare class FigureEditor extends LitElement {
     firstSave?: (name: string) => Promise<FirstSave | undefined>;
     private selected;
     private error;
+    private faceMapping?;
     /** The same link offered again with the size range narrowed, after a link the declared range could not hold. */
     private retry?;
     private tab;
@@ -210,6 +211,9 @@ export declare class FigureEditor extends LitElement {
     /** The figure's controls: try a value, name it, set its range and travel time, keep the pose. */
     private renderControls;
     /** One command, one step of the history. A refusal a person can meet here is said in their words. */
+    /** Where a held edit goes once the author has chosen where what stands on its lost faces goes. */
+    private mapFaces;
+    /** Runs a command; true when it was taken. */
     private linkCommand;
     private changeField;
     /** Typing or a held spinner: each number on the way is drawn; the field's change records it. */

package/dist-client/modeller/editor.js

@@ -1194,7 +1194,17 @@ let FigureEditor = class FigureEditor extends LitElement {
     ></figure-clips>`;
     }
     /** One command, one step of the history. A refusal a person can meet here is said in their words. */
-    linkCommand(action) {
+    /** Where a held edit goes once the author has chosen where what stands on its lost faces goes. */
+    mapFaces(remap) {
+        const held = this.faceMapping;
+        if (!held)
+            return;
+        const done = this.linkCommand({ ...held.action, remap }, held.from);
+        if (done && held.from === 'section-editor')
+            this.closeSectionEditor();
+    }
+    /** Runs a command; true when it was taken. */
+    linkCommand(action, from = 'panel') {
         /* Committed or refused, a command in hand is let go of: the figure as it stands is drawn again. */
         this.holdAction(null);
         this.retry = undefined;
@@ -1203,6 +1213,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         try {
             this.session.command(action);
             this.error = '';
+            this.faceMapping = undefined;
             /* What the command did besides what was asked, in one line: the figure's size declared to follow (ADR ruling Q1). */
             if (action.kind === 'follow-size' && !hadSize) {
                 const size = this.designValues();
@@ -1213,16 +1224,24 @@ let FigureEditor = class FigureEditor extends LitElement {
                 });
             }
             this.changed();
+            return true;
         }
         catch (error) {
-            if (this.askClipLoss(error, () => this.linkCommand(action)))
-                return;
+            if (this.askClipLoss(error, () => this.linkCommand(action, from)))
+                return false;
             const code = error?.code;
+            /* Something stands on a face this takes away: ask where it goes, there, rather than only saying no. */
+            const need = error.details;
+            if (code === 'FEATURE_MAPPING_REQUIRED' && need?.lost?.length) {
+                this.faceMapping = { action, need, from };
+                this.error = '';
+                return false;
+            }
             const narrowing = narrowingRetryOf(action, error, (key, params) => i18next.t(key, params));
             if (narrowing) {
                 this.error = narrowing.message;
                 this.retry = { label: narrowing.label, action: narrowing.retry };
-                return;
+                return false;
             }
             this.error =
                 code === 'DIMENSION_CYCLE'
@@ -1232,6 +1251,7 @@ let FigureEditor = class FigureEditor extends LitElement {
                         : sizeRangeRefusalOf(error, (key, params) => i18next.t(key, params)) ??
                             placementRefusalOf(error, (key, params) => i18next.t(key, params)) ??
                             this.said(error);
+            return false;
         }
     }
     changeField(field, event) {
@@ -1779,6 +1799,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     choose(id) {
         /* A copy on the canvas selects its repeat: the part the author made. */
         this.selected = id ? ownerOf(id) : id;
+        this.faceMapping = undefined;
         if (id && (this.tab === 'verdict' || this.tab === 'view' || this.tab === 'history'))
             this.tab = 'properties';
     }
@@ -1842,8 +1863,15 @@ let FigureEditor = class FigureEditor extends LitElement {
       .kept=${kept}
       .pointBlocked=${this.pointBlockedOf(drawn)}
       .revision=${this.session?.read().revision ?? 0}
-      @command=${(e) => this.linkCommand(e.detail.action)}
+      .faceMapping=${this.faceMapping?.from === 'section-editor' ? this.faceMapping.need : undefined}
+      @command=${(e) => {
+            /* Held for a choice of where things go: the editor stays open, the choice shown in it. */
+            if (!this.linkCommand(e.detail.action, 'section-editor'))
+                e.detail.held = true;
+        }}
       @command-live=${(e) => this.holdAction(e.detail.action)}
+      @face-mapped=${(e) => this.mapFaces(e.detail.remap)}
+      @face-mapping-cancel=${() => (this.faceMapping = undefined)}
       @section-editor-close=${() => this.closeSectionEditor()}
     ></figure-section-editor>`;
     }
@@ -2115,6 +2143,9 @@ let FigureEditor = class FigureEditor extends LitElement {
                   <figure-section-panel
                     .body=${{ ...part, id: this.selected }}
                     ?locked=${unavailable}
+                    .faceMapping=${this.faceMapping?.from === 'panel' ? this.faceMapping.need : undefined}
+                    @face-mapped=${(e) => this.mapFaces(e.detail.remap)}
+                    @face-mapping-cancel=${() => (this.faceMapping = undefined)}
                     @command=${(e) => this.linkCommand(e.detail.action)}
                     @command-live=${(e) => this.holdAction(e.detail.action)}
                     @section-editor-open=${() => (this.sectionEditing = this.selected)}
@@ -2363,6 +2394,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureEditor.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "faceMapping", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)