@things-factory/figure-ui 10.1.147 → 10.1.149

package/client/modeller/figure-links.ts

@@ -1,6 +1,8 @@
 import '@material/web/icon/icon.js'
 
 import { css, html, LitElement, nothing } from 'lit'
+import '@operato/input/ox-input-select-buttons.js'
+import './figure-slot-layout-panel.js'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
@@ -9,14 +11,12 @@ import type { FigureAsset, FigureAuthoringAction, FigureDimensionSource, FigureF
 
 import {
   acceptsOf,
-  alignAxesOf,
-  mountingPlaneOf,
   alignOf,
   AXES,
   canFasten,
   facesOf,
   canFollow,
-  dimensionNow,
+  followCommandOf,
   followableAxes,
   positionIsShare,
   choiceOf,
@@ -46,6 +46,8 @@ import {
   positionsWorkedOut,
   fieldWordsOf,
   measureNow,
+  ownFacesOf,
+  alignRowsOf,
   type Alignment,
   type Axis,
   type Follow,
@@ -55,7 +57,6 @@ import { SidePanelStyles } from './side-panel-styles.js'
 import './figure-fasten-drawing.js'
 import type { FastenChange } from './figure-fasten-drawing.js'
 import { faceViewOf, modeOf, myFaceFor, turnsInPlace, type FastenMode } from './fasten-geometry.js'
-import { boxOf } from './align.js'
 import type { FigureRevision } from './revision.js'
 import { HelpToggles } from './help.js'
 import { jointAxisWord } from './joint-axis.js'
@@ -121,8 +122,6 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     /* Size behaviour is a choice about dimensions only. It never implies a placement or a fastening. */
     details[resize-choice] { margin: 12px 0; padding: 0; border: 0; }
     details[resize-choice] > div { display: grid; gap: 8px; padding: 8px 0; }
-    div[resize-held] { display: grid; gap: 8px; margin: 12px 0; padding: 10px 12px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); }
-    div[resize-held] p { margin: 0; display: flex; align-items: center; gap: 6px; }
     p[fasten-mode] { margin: 0; font-weight: 600; }
     section[fastening][spotlit] { outline: 2px solid var(--md-sys-color-primary, #477b9e); outline-offset: 4px; border-radius: 6px; transition: outline-color 0.3s; }
     details { margin-top: 8px; }
@@ -189,6 +188,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   @state() private fasten = freshFasten()
   @state() private motion: MotionForm = freshMotion()
   @state() private place = freshPlace()
+  /** How places are made here: one at a time, or by the figure's rule. Unset: by the rule when the figure has one. */
+  @state() private placesBy?: 'one' | 'rule'
   @state() private row = freshRow()
   /** The motion form is open over the part's own motion, to change it where it is. */
   @state() private editingMotion = false
@@ -240,9 +241,28 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     if (this.section === 'motion')
       return html`<section><h3>${i18next.t('figure.label.motion')}${this.help.button('figure.text.motion-explained')}</h3>${this.help.hint('figure.text.motion-explained')}
         ${this.renderMotion(asset)}${this.renderShown(asset)}</section>`
-    if (this.section === 'places')
+    if (this.section === 'places') {
+      /*
+        One idea, places, two ways to make them (ADR-0118): one at a time on this part, or many by a rule -- the figure's
+        slot layout. One section with a choice, not two screens for the same thing (chief architect, 2026-10-11).
+      */
+      const byRule = (this.placesBy ?? (asset.document.capabilities.slotLayout ? 'rule' : 'one')) === 'rule'
       return html`<section><h3>${i18next.t('figure.label.places-on-part', { part: this.partId })}${this.help.button('figure.text.place-explained')}</h3>${this.help.hint('figure.text.place-explained')}
-        ${placeFacesOf(asset, this.partId).length ? this.renderPlaces(asset) : html`<p hint>${i18next.t('figure.text.places-need-a-box')}</p>`}</section>`
+        <ox-input-select-buttons
+          places-by
+          .value=${byRule ? 'rule' : 'one'}
+          .options=${[
+            { value: 'one', display: i18next.t('figure.label.places-one') },
+            { value: 'rule', display: i18next.t('figure.label.places-by-rule') }
+          ]}
+          @change=${(e: CustomEvent) => (this.placesBy = e.detail === 'rule' ? 'rule' : 'one')}
+        ></ox-input-select-buttons>
+        ${byRule
+          ? html`<figure-slot-layout-panel .asset=${asset} .partId=${this.partId} ?locked=${this.locked}></figure-slot-layout-panel>`
+          : placeFacesOf(asset, this.partId).length
+            ? this.renderPlaces(asset)
+            : html`<p hint>${i18next.t('figure.text.places-need-a-box')}</p>`}</section>`
+    }
     const shown = html`
       <section>
         <h3>${i18next.t('figure.label.resize-intent')}</h3>
@@ -350,7 +370,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
           ${following
             ? html`<button link resize-unfollow=${axis} ?disabled=${this.locked}
                 @click=${() => {
-                  this.follow(asset, axis, 'own', now)
+                  this.follow(axis, 'own', now)
                 }}>${i18next.t('figure.button.resize-unfollow')}</button>`
             : nothing}
         </div>`
@@ -367,7 +387,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       const name = round ? i18next.t(axis === 'x' ? 'figure.label.field-radius' : 'figure.label.field-length') : axis.toUpperCase()
       return html`<div row>
         <b>${name}</b>
-        <select ?disabled=${this.locked} @change=${(e: Event) => this.follow(asset, axis, (e.target as HTMLSelectElement).value, now)}>
+        <select ?disabled=${this.locked} @change=${(e: Event) => this.follow(axis, (e.target as HTMLSelectElement).value, now)}>
           <option value="own" ?selected=${value === 'own'}>${i18next.t('figure.label.follows-nothing')}</option>
           ${AXES.filter(one => hasInstanceSize(asset, one)).map(
             one => html`<option value=${`share:${one}`} ?selected=${value === `share:${one}`}>
@@ -413,7 +433,10 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   private async showWhere() {
     this.working = 'fasten'
     await this.updateComplete
-    const where = this.renderRoot.querySelector('figure-fasten-drawing')?.shadowRoot?.querySelector<HTMLElement>('div[where]')
+    /* The drawing draws itself after this panel does: its "where" is there only once it has. */
+    const drawing = this.renderRoot.querySelector<HTMLElement & { updateComplete?: Promise<unknown> }>('figure-fasten-drawing')
+    await drawing?.updateComplete
+    const where = drawing?.shadowRoot?.querySelector<HTMLElement>('div[where]')
     if (!where) return
     where.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
     where.focus({ preventScroll: true })
@@ -452,22 +475,6 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     return where
   }
 
-  private renderHeld(asset: FigureAsset) {
-    const joint = (asset.joints ?? []).find(j => j.body1.part === this.partId)
-    return html`<div resize-held>
-      <p><md-icon>link</md-icon> ${this.heldWords(asset)}</p>
-      <button act open-fastening @click=${() => this.openFastening(asset)}>
-        <md-icon>link</md-icon>${i18next.t('figure.button.open-fastening')}
-      </button>
-      ${joint
-        ? html`<button act detach-held ?disabled=${this.locked} @click=${() => this.command({ kind: 'detach', part: this.partId })}>
-              <md-icon>link_off</md-icon>${i18next.t('figure.button.detach-held')}
-            </button>
-            ${this.renderDetachWords()}`
-        : nothing}
-    </div>`
-  }
-
   /** The same source, the same share, a new difference: a leaf the opening less its gaps (link-dimension's `plus`). */
   private followPlus(axis: Axis, now: Follow, plus: number) {
     if (now.of !== 'instance' && now.of !== 'part') return
@@ -477,27 +484,9 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     this.command({ kind: 'link-dimension', part: this.partId, axis, source, ...(times !== 1 ? { times } : {}), ...(plus ? { plus } : {}), replace: true })
   }
 
-  private follow(asset: FigureAsset, axis: Axis, choice: string, now: Follow) {
-    const following = now.of !== 'own'
-    /* The measure as it stands: a dimension stops following at it, and a share is taken of it. */
-    /* The part's own extent along the axis now, as drawn: what a dimension is fixed at when it stops following. */
-    const current = dimensionNow(this.revision!, this.partId, axis) ?? boxOf(this.revision!, this.partId)?.dims[AXES.indexOf(axis)] ?? 100
-    if (choice === 'own') {
-      if (!following) return
-      this.command({ kind: 'unlink-dimension', part: this.partId, axis, mm: Math.max(1, Math.round(current)) })
-      return
-    }
-    const [of, a, b] = choice.split(':')
-    if (of === 'share') {
-      /* A proportional rule: this measure is the share of the instance size it is now, so it grows with the figure. */
-      const size = asset.designInputs[`size.${a}`]
-      if (!size) return
-      const times = Math.round((current / size) * 1e6) / 1e6
-      this.command({ kind: 'link-dimension', part: this.partId, axis, source: { of: 'instance', axis: a as Axis }, times, replace: following })
-      return
-    }
-    const source: FigureDimensionSource = of === 'instance' ? { of: 'instance', axis: a as Axis } : { of: 'part', part: a!, axis: b as Axis }
-    this.command({ kind: 'link-dimension', part: this.partId, axis, source, replace: following })
+  private follow(axis: Axis, choice: string, now: Follow) {
+    const action = followCommandOf(this.revision!, this.partId, axis, choice, now)
+    if (action) this.command(action)
   }
 
   /**
@@ -549,15 +538,9 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     const targets = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFasten(asset, one))
     /* Shown, not dropped, and not choosable, with the reason (ADR-0097 §5.5): fastening it would close a loop. */
     const loops = (one: string) => hangsFrom(asset, one, this.partId)
-    /* The faces are the ones each shape declares: a part is fastened by one of its outer faces, to any face of the target. */
-    /* On the mounting plane only the faces it takes: a bottom or a top on the floor, a back on a wall. */
-    const plane = mountingPlaneOf(asset)
     const planeWord = i18next.t('figure.label.resize-place-' + (asset.placement ?? 'floor'))
-    /* Its outer faces, and its centre -- a roller spins about its middle (ADR-0093); the mounting plane takes a face. */
-    const mineFaces: Array<FigureFace | 'centre'> = [
-      ...(facesOf(asset, this.partId).filter(face => FACES.includes(face as FigureFace) && (!f.toPlane || plane.faces.includes(face as FigureFace))) as FigureFace[]),
-      ...(f.toPlane ? [] : (['centre'] as const))
-    ]
+    /* The faces are the ones each shape declares: a part is fastened by one of its outer faces, to any face of the target. */
+    const mineFaces = ownFacesOf(asset, this.partId, f.toPlane)
     const theirFaces = f.target ? facesOf(asset, f.target) : FACES
     const targetFace = theirFaces.includes(f.targetFace) ? f.targetFace : theirFaces[0]!
     const aim = f.toPlane ? ('plane' as const) : { part: f.target, face: targetFace }
@@ -592,9 +575,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     ]
     /* Across the face, a row only where the drawing cannot set it: no drawing of the face, or a share or a field to follow. */
     const view = f.toPlane || f.target ? faceViewOf(this.revision!, this.partId, aim) : undefined
-    const alignRows = (f.toPlane || f.target ? alignAxesOf(asset, this.partId, aim, !!f.twist) : []).filter(
-      ({ axis }) => !view || !view.axes.includes(axis) || !!f.alignInput?.[axis] || hasInstanceSize(asset, axis)
-    )
+    const alignRows = f.toPlane || f.target ? alignRowsOf(asset, this.partId, aim, view, !!f.twist, f.alignInput) : []
     /* A fastening the part has is changed as soon as something is chosen, as the drawing does; a new one waits for 붙이기. */
     const settle = () => this.onFastenRelease(!!held)
     /*
@@ -791,7 +772,12 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       : undefined
     this.rowCandidate = action
     const set = (next: typeof r) => ((this.row = next), (this.working = 'row'))
-    return html`<section row @focusin=${() => (this.working = 'row')}><details row-fold ?open=${this.working === 'row'}>
+    /*
+      Whether the row is being worked follows the fold's own toggle. A press on the heading focuses it before the click;
+      set on focus, the fold opened there and the click then folded it again (2026-10-11: it took two clicks to open).
+    */
+    const toggled = (e: Event) => (this.working = (e.target as HTMLDetailsElement).open ? 'row' : 'fasten')
+    return html`<section row><details row-fold ?open=${this.working === 'row'} @toggle=${toggled}>
       ${head}
       <div form>
         <span>${i18next.t('figure.label.repeat-axis')}</span>

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

@@ -7,6 +7,7 @@ import { activePalette } from '@hatiolab/things-scene'
 import type { FigureAssetGeometry, FigureMaterial, FigurePartEdit } from '@hatiolab/figure-model'
 import { SidePanelStyles } from './side-panel-styles.js'
 import { isRoundBody } from './starting-shape.js'
+import { glowOf, materialEditOf, offeredPaletteOf } from './material-edit.js'
 
 /** The purpose each palette role is for, by its token. */
 const PURPOSE: Record<string, string> = {
@@ -284,28 +285,17 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
   }
 
   private offered(): Record<string, string> {
-    return { ...(activePalette() as Record<string, string>), ...this.palette }
+    return offeredPaletteOf(activePalette() as Record<string, string>, this.palette)
   }
 
-  /** Intensity 0 is no glow at all; a new glow takes the part's own colour until another is picked. */
   private glow(intensity: number, live = false) {
-    const material = this.body!.material
     this.glowing = live ? intensity : undefined
-    this.put({ emissive: intensity > 0 ? { token: material.emissive?.token ?? material.token, intensity, on: true } : undefined }, live)
+    this.put(glowOf(this.body!.material, intensity), live)
   }
 
   /** A material change: recorded, or -- while a slider is dragged -- only drawn (`part-live`). */
   private put(patch: Partial<FigureMaterial>, live = false) {
-    const material: FigureMaterial = { ...this.body!.material, ...patch }
-    for (const key of Object.keys(material) as (keyof FigureMaterial)[]) if (material[key] === undefined) delete material[key]
-    /* The colours this material names that the asset does not carry yet. */
-    const offered = this.offered()
-    const palette = Object.fromEntries(
-      [material.token, material.emissive?.token]
-        .filter((token): token is string => !!token && this.palette[token] === undefined && offered[token] !== undefined)
-        .map(token => [token, offered[token]!])
-    )
-    const edit: FigurePartEdit = { kind: 'set-material', target: this.body!.id, material, ...(Object.keys(palette).length ? { palette } : {}) }
+    const edit = materialEditOf(this.body!.id, this.body!.material, patch, this.palette, this.offered())
     if (live) this.dispatchEvent(new CustomEvent('part-live', { detail: { edit }, bubbles: true, composed: true }))
     else this.edit(edit)
   }

package/client/modeller/figure-mesh-choice.ts

@@ -0,0 +1,68 @@
+import { LitElement, html, css } 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/text-button.js'
+
+/**
+ * What of an uploaded GLB becomes a part (ADR-0129): the whole file, or one node of it -- a crane's hoist, its trolley.
+ * Closes with the choice, or with nothing; then nothing is added.
+ */
+@customElement('figure-mesh-choice')
+export class FigureMeshChoice extends LitElement {
+  static styles = [
+    CommonPopupStyles,
+    css`
+      :host {
+        overflow-y: auto;
+      }
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      button {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        width: 100%;
+        padding: 8px 12px;
+        border: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: start;
+        cursor: pointer;
+      }
+      button:hover,
+      button:focus-visible {
+        background: var(--md-sys-color-surface-container-high);
+      }
+      span[count] {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+    `
+  ]
+
+  @property({ attribute: false }) choices: Array<{ node?: number; name: string; triangles: number }> = []
+
+  render() {
+    return html`
+      <ul>
+        ${this.choices.map(
+          c => html`<li>
+            <button @click=${() => closePopup(this, { node: c.node })}>
+              <span>${c.node === undefined ? i18next.t('figure.text.mesh-whole-file') : c.name}</span>
+              <span count>${i18next.t('figure.text.mesh-triangles', { n: c.triangles.toLocaleString() })}</span>
+            </button>
+          </li>`
+        )}
+      </ul>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => closePopup(this)}>${i18next.t('figure.button.cancel')}</md-text-button>
+      </ox-popup-actions>
+    `
+  }
+}

package/client/modeller/figure-parts.ts

@@ -56,7 +56,8 @@ const KIND_ICON: Record<string, string> = {
   starting sizes, not kinds of their own. A rounded box and a box open at the top are not here: they are a box with its
   corners rounded or an inside made, from the part's own 단면 section (§3.3), so the palette does not offer a second way.
 */
-export type FigurePaletteKind = FigurePrimitiveCreation['kind'] | 'plate' | 'wall'
+/* A mesh part is made from a file (`import-mesh`), not from a starting size. */
+export type FigurePaletteKind = Exclude<FigurePrimitiveCreation['kind'], 'mesh'> | 'plate' | 'wall'
 const RECIPES: Array<{ kind: FigurePaletteKind; icon: string; label: string }> = [
   { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },
   { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },
@@ -438,6 +439,27 @@ export class FigureParts extends localize(i18next)(LitElement) {
               </button>
             `
           )}
+          <button
+            shape
+            ?disabled=${this.locked || full}
+            title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t('figure.text.import-mesh-hint')}
+            @click=${() => this.renderRoot.querySelector<HTMLInputElement>('input[mesh-file]')?.click()}
+          >
+            <md-icon>view_in_ar</md-icon>
+            <span>${i18next.t('figure.button.import-mesh')}</span>
+          </button>
+          <input
+            mesh-file
+            type="file"
+            accept=".glb,model/gltf-binary"
+            hidden
+            @change=${(e: Event) => {
+              const input = e.target as HTMLInputElement
+              const file = input.files?.[0]
+              input.value = ''
+              if (file) this.ask('import-mesh', { file })
+            }}
+          />
         </div>
         ${full ? html`<p full>${i18next.t('figure.text.part-limit-reached-short', { level: b!.level, limit: b!.limit })}</p>` : nothing}
       </section>

package/client/modeller/figure-preview.ts

@@ -9,7 +9,7 @@ import { create, registerFigure, unregisterFigure } from '@hatiolab/things-scene
 import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH, type ViewSettings } from './figure-view.js'
 import { dialShape } from './angle-dial.js'
 import { derivedOf, type FigureRevision } from './revision.js'
-import { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, setupPartOf } from './preview-model.js'
+import { authoredSizeOf, PREVIEW_FACTOR, PREVIEW_WAYS, previewClampsOf, previewInstances, previewTypeOf, setupPartOf } from './preview-model.js'
 
 /**
  * The figure placed on a board.
@@ -376,7 +376,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     }
     try {
       /* Registered as a board registers it, under a type of this preview's own: a real type's drawings stay as they are. */
-      const type = `figure-preview-${this.context || 'new'}`
+      const type = previewTypeOf(this.context)
       const size = this.authoredSize()
       /*
         The figure changed under a scene that is standing: the same type is registered again and the content made again

package/client/modeller/figure-properties.ts

@@ -8,8 +8,10 @@ import { i18next, localize } from '@operato/i18n'
 import { FIGURE_FACES } from '@hatiolab/figure-model'
 import type { FigureAuthoringAction, FigureFace } from '@hatiolab/figure-model'
 
+import './figure-carrier.js'
 import { occupancyFromParts } from './occupancy.js'
 import { tagsOf, figureFigureFacts, type Placement, type FigureFigureFacts } from './figure-facts.js'
+import { offeredMountingOf } from './mounting-part.js'
 import type { FigureRevision } from './revision.js'
 import { SidePanelStyles } from './side-panel-styles.js'
 import { ScrollbarStyles } from '@operato/styles'
@@ -24,7 +26,7 @@ const FACES = Object.keys(FIGURE_FACES) as FigureFace[]
  * catalogue files it.
  *
  * Two kinds of change leave this tab, and it does neither itself:
- *  - `command` carries an authoring command (rename, declare the room, the mounting face). The page runs it
+ *  - `command` carries an authoring command (rename, declare the room, the mounting face, the carrier). The page runs it
  *    through the session, so it is one step of the same undo history as every other edit, and is saved with it.
  *  - `catalog` carries a change to the row (category, tags). Those are not in the asset; the page writes them
  *    to the saved row at once, so they need a saved figure.
@@ -123,6 +125,7 @@ export class FigureProperties extends localize(i18next)(LitElement) {
         <h3>${i18next.t('figure.label.group-standing')}</h3>
         ${this.renderSpace(facts)} ${this.renderMounting(facts)}
       </section>
+      <figure-carrier .carrier=${this.revision?.asset.carrier}></figure-carrier>
       <section>
         <h3>${i18next.t('figure.label.group-catalog')}</h3>
         ${this.renderCatalog()}
@@ -195,8 +198,7 @@ export class FigureProperties extends localize(i18next)(LitElement) {
   private renderMounting(facts: FigureFigureFacts) {
     const mounting = facts.mounting
     /* Chosen, or what is set, or where the figure meets its plane -- not the first part listed (walk 1). */
-    const part = [this.pickedPart, mounting?.part, facts.suggested?.part, facts.parts[0]].find(one => one && facts.parts.includes(one))
-    const face: FigureFace = this.pickedFace ?? mounting?.face ?? facts.suggested?.face ?? 'bottom'
+    const { part, face } = offeredMountingOf(facts, { part: this.pickedPart, face: this.pickedFace })
     return html`
       <div field>
         <label>${i18next.t('figure.label.mounting-face')}</label>

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

@@ -6,8 +6,8 @@ import { i18next, localize } from '@operato/i18n'
 import { figureCavitySectionOf, figureSectionSidesOf } 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 { apexOver, cavityKeyOf, drawnOf, insertAfter, markedBy, measureNoteOf, movePoint, pointLabel, removePoint, sectionActionOf, sectionOf, workingIssuesOf, workingOf, workingShapeOf, type SectionWorking } from './section-drawing.js'
+import { cavityDepthOf, cavityRequestOf, cavityResultOf, hollowableOf, sameOf, sidesOf } from './section-controls.js'
 import './figure-cavity-drawing.js'
 import './figure-face-mapping.js'
 import { openPopup } from '@operato/layout'
@@ -19,10 +19,6 @@ type Axis = 'x' | 'y' | 'z'
 /** How the section is laid on the screen, by the axis it is pushed along: across to the right, then down. */
 const SCREEN: Record<Axis, [Axis, Axis]> = { y: ['x', 'z'], x: ['z', 'y'], z: ['x', 'y'] }
 
-/** The inside said so two can be compared: its walls by side, its ends. */
-const cavityKey = (w: SectionWorking) =>
-  w.cavity ? [Object.entries(w.cavity.wall).sort(), w.cavity.start, w.cavity.end] : null
-
 /** The editor's width and room for the solid beside it: below this the two take turns. */
 export const NARROW_BELOW = 900
 
@@ -310,7 +306,7 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
   }
   /** A pushed rectangle or ellipse can have an inside; a drawn section's is a later stage. */
   private get hollowable() {
-    return !!this.body?.shape.extrusion && (this.kind === 'rectangle' || this.kind === 'ellipse')
+    return !!this.body && hollowableOf(this.body.shape)
   }
 
   connectedCallback() {
@@ -398,20 +394,7 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
 
   /** One command for everything changed since the editor opened; a measure not changed is not sent (it may follow another). */
   private action(w: SectionWorking): FigureAuthoringAction {
-    const o = this.opened
-    const changed = (a: number | undefined, b: number | undefined) => Math.abs((a ?? 0) - (b ?? 0)) > 1e-9
-    const across = Object.fromEntries(Object.entries(w.across).filter(([k, v]) => changed(v, o.across[k as Axis])))
-    const apexMoved = !w.apex !== !o.apex || (!!w.apex && Object.entries(w.apex).some(([k, v]) => changed(v, o.apex![k as Axis])))
-    const cavityMoved = JSON.stringify(cavityKey(w)) !== JSON.stringify(cavityKey(o))
-    return {
-      kind: 'set-section',
-      part: this.body!.id,
-      ...(this.kind === 'polygon' ? { points: w.points.map(p => ({ ...p })) } : {}),
-      ...(Object.keys(across).length ? { across } : {}),
-      ...(changed(w.length, o.length) ? { length: w.length } : {}),
-      ...(apexMoved ? { apex: w.apex ? { ...w.apex } : null } : {}),
-      ...(cavityMoved ? { cavity: w.cavity ? { wall: { ...w.cavity.wall }, start: w.cavity.start, end: w.cavity.end } : null } : {})
-    }
+    return sectionActionOf(this.body!.id, this.kind, this.opened, w)
   }
 
   private removePoint(id: string) {
@@ -447,7 +430,7 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
         Object.entries(w.across).sort(),
         w.length,
         w.apex ? Object.entries(w.apex).sort() : null,
-        cavityKey(w)
+        cavityKeyOf(w)
       ])
     return !!this.opened && key(this.working) !== key(this.opened)
   }
@@ -507,13 +490,10 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     return { h: Math.round(p.x), v: Math.round(p.y) }
   }
 
-  /** Words for the face a length change keeps, by the part's relations; nothing when they cannot say. */
-  private keptWords(): string {
-    if (this.kept === undefined) return ''
-    if (this.kept === 0) return i18next.t('figure.text.section-editor-keeps-centre')
-    return i18next.t('figure.text.section-editor-keeps', {
-      face: i18next.t('figure.label.face-' + END_FACE(this.axis, this.kept === 1 ? 'start' : 'end'))
-    })
+  /** What a measure's field says under it: following another value, or for the length the face it keeps. */
+  private noteWords(axis: Axis, kept?: -1 | 0 | 1): string {
+    const note = measureNoteOf(this.measures?.measures[axis], kept, axis)
+    return note ? i18next.t(note.key, note.face ? { face: i18next.t('figure.label.face-' + note.face) } : {}) : ''
   }
 
   render() {
@@ -816,27 +796,26 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     const [h, v] = SCREEN[this.axis]
     const marked = markedBy(issues)
     const m = this.measures?.measures
-    const linked = i18next.t('figure.text.section-editor-linked')
     return html`<div sizes>
         ${this.field(
           i18next.t(this.working.apex ? 'figure.label.section-editor-height' : 'figure.label.section-editor-length'),
           this.working.length,
           value => this.change({ ...this.working, length: value }),
           m?.[this.axis] !== 'editable',
-          m?.[this.axis] === 'linked' ? linked : this.keptWords()
+          this.noteWords(this.axis, this.kept)
         )}
         ${this.kind === 'polygon' ? this.apexFields() : nothing}
         ${this.kind === 'polygon'
           ? nothing
           : this.measures?.round
-            ? this.field(i18next.t('figure.label.section-editor-diameter'), this.working.across[h] ?? 0, value => this.change(this.across(h, value)), m?.[h] !== 'editable', m?.[h] === 'linked' ? linked : '')
+            ? this.field(i18next.t('figure.label.section-editor-diameter'), this.working.across[h] ?? 0, value => this.change(this.across(h, value)), m?.[h] !== 'editable', this.noteWords(h))
             : ([h, v] as const).map(axis =>
                 this.field(
                   i18next.t('figure.label.section-editor-across', { axis: axis.toUpperCase() }),
                   this.working.across[axis] ?? 0,
                   value => this.change(this.across(axis, value)),
                   m?.[axis] !== 'editable',
-                  m?.[axis] === 'linked' ? linked : ''
+                  this.noteWords(axis)
                 )
               )}
       </div>

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

@@ -6,10 +6,10 @@ import { live } from 'lit/directives/live.js'
 import { i18next, localize } from '@operato/i18n'
 import type { FigureAuthoringAction, FigureEvaluatedShape, FigureFaceMappingNeed } from '@hatiolab/figure-model'
 import { SidePanelStyles } from './side-panel-styles.js'
-import { drawnOf } from './section-drawing.js'
+import { drawnOf, sectionPointsWordsOf } 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'
+import { cavityDepthOf, cavityRequestOf, cavityResultOf, cornerActionOf, cornerLimitOf, cornerRefusalOf, hollowableOf, mm, sameOf } from './section-controls.js'
 
 type Body = { id: string; shape: FigureEvaluatedShape }
 
@@ -86,6 +86,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
     const e = body?.shape ? drawnOf(body.shape) : undefined
     if (!body || !e) return nothing
     const kind = e.section.kind
+    const points = sectionPointsWordsOf(e)
     return html`<section>
       <h3>${i18next.t('figure.label.group-section')}</h3>
       ${body.shape.dimensions.jamb === undefined
@@ -93,13 +94,11 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
             <button act ?disabled=${this.locked} @click=${() => this.dispatchEvent(new CustomEvent('section-editor-open', { bubbles: true, composed: true }))}>
               <md-icon>edit</md-icon>${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}
+            ${points ? html`<small>${i18next.t(points.key, points.params)}</small>` : nothing}
           </div>`
         : 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}
+      ${/* No inside for a drawn section: the control is not there, rather than a line saying so. */ hollowableOf(body.shape) ? this.renderCavity(body) : nothing}
       ${this.faceMapping ? html`<figure-face-mapping .need=${this.faceMapping}></figure-face-mapping>` : nothing}
     </section>`
   }
@@ -120,7 +119,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
           const r = cornerRefusalOf(body.shape, value)
           return r ? i18next.t('figure.text.section-corner-over', { max: String(mm(r.max)) }) : ''
         },
-        action: value => ({ kind: 'set-section-corner', part: body.id, corner: value > 0 ? value : null }),
+        action: value => cornerActionOf(body.id, value),
         placeholder: now === undefined ? i18next.t('figure.text.section-corner-differs') : ''
       })}
       ${this.refusals.corner ? nothing : max !== undefined ? html`<small>${i18next.t('figure.text.section-at-most', { max: String(mm(max)) })}</small>` : nothing}