@things-factory/figure-ui 10.1.84 → 10.1.86

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

@@ -1,30 +1,42 @@
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { css, html, LitElement, nothing, type PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
 
 import { i18next, localize } from '@operato/i18n'
 import type { FigureAuthoringAction, FigureCavityRequest, FigureEvaluatedShape } from '@hatiolab/figure-model'
 import { SidePanelStyles } from './side-panel-styles.js'
-import { cavityRequestOf, defaultWallOf, mm, sameOf } from './section-controls.js'
+import {
+  END_FACE,
+  SIDE_FACE,
+  cavityDepthOf,
+  cavityRefusalOf,
+  cavityRequestOf,
+  cavityResultOf,
+  cornerLimitOf,
+  cornerRefusalOf,
+  defaultWallOf,
+  mm,
+  sameOf,
+  sidesOf,
+  sideWallLimitOf,
+  wallLimitOf,
+  type FigureCavityAsk
+} from './section-controls.js'
 
 type Axis = 'x' | 'y' | 'z'
 type End = 'start' | 'end'
-
-/** The face each end of a push is, by the axis it runs along: its start is the low side. */
-const END_FACE: Record<Axis, Record<End, string>> = {
-  x: { start: 'left', end: 'right' },
-  y: { start: 'bottom', end: 'top' },
-  z: { start: 'back', end: 'front' }
-}
+type Body = { id: string; shape: FigureEvaluatedShape }
 
 /**
- * 단면 — a pushed part's rounded corners and its inside (ADR-0100 stage 1).
+ * 단면 — a pushed part's rounded corners and its inside (ADR-0100 §3.3).
  *
- * Only what the part's section has: corners for a rectangle, an inside for a rectangle or an ellipse. A drawn section
- * and a turned body show nothing here. A radius or a wall entered sets every corner or every wall to it; the kernel
- * holds per-axis values, and when they differ the field says so and shows none of them.
+ * Corners for a rectangle; an inside for a rectangle or an ellipse, with its walls (one thickness, or one per side when
+ * asked for), its two ends open or closed, and what that makes of the part and how deep. A drawn section says beside
+ * the inside why it has none. A turned body shows nothing here.
  *
- * Every change leaves as one `command`; the editor runs it through the session, one step of the undo history.
+ * A value being typed is drawn at once and recorded nowhere (`command-live`); a value the kernel would refuse is said
+ * under its field with the most it can be, and is not sent. Enter or leaving the field sends the one `command`, one step
+ * of the undo history; Esc puts the value back.
  */
 @customElement('figure-section-panel')
 export class FigureSectionPanel extends localize(i18next)(LitElement) {
@@ -41,132 +53,256 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
       flex: 1;
       min-width: 0;
     }
-    div[row] > label {
-      flex: 0 0 auto;
+    div[sides] {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 6px;
+      /* A side's refusal under its field lengthens its cell only: the field beside it stays level. */
+      align-items: start;
+    }
+    div[sides] > label {
+      display: grid;
+      gap: 2px;
+    }
+    small[refusal] {
+      color: var(--md-sys-color-error);
+    }
+    input[aria-invalid='true'] {
+      outline: 2px solid var(--md-sys-color-error);
     }
   `]
 
-  @property({ attribute: false }) body?: { id: string; shape: FigureEvaluatedShape }
+  @property({ attribute: false }) body?: Body
   @property({ type: Boolean }) locked = false
+  /** 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. */
+  @state() private typed: Record<string, string> = {}
+  /** Walls one per side, asked for or because they already differ. */
+  @state() private perSide = false
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    const before = changed.get('body') as Body | undefined
+    if (changed.has('body') && before?.id !== this.body?.id) {
+      this.refusals = {}
+      this.typed = {}
+      /* A part whose walls already differ opens with them one per side. */
+      const walls = this.body?.shape.cavity?.wall
+      this.perSide = !!walls && sameOf(Object.values(walls)) === undefined
+    }
+  }
 
   render() {
     const body = this.body
-    const extrusion = body?.shape?.provider === 'extrude' ? body.shape.extrusion : undefined
-    if (!body || !extrusion) return nothing
-    const kind = extrusion.section.kind
-    if (kind !== 'rectangle' && kind !== 'ellipse') return nothing
+    const e = body?.shape?.provider === 'extrude' ? body.shape.extrusion : undefined
+    if (!body || !e) return nothing
+    const kind = e.section.kind
     return html`<section>
       <h3>${i18next.t('figure.label.group-section')}</h3>
-      ${kind === 'rectangle' ? this.renderCorner(body) : nothing} ${this.renderCavity(body, extrusion.axis)}
+      ${kind === 'rectangle' ? this.renderCorner(body) : nothing}
+      ${kind === 'rectangle' || kind === 'ellipse'
+        ? this.renderCavity(body, e.axis)
+        : html`${kind === 'polygon' && !body.shape.cavity && body.shape.dimensions.jamb === undefined
+              ? html`<div field>
+                  <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>
+                </div>`
+              : nothing}
+            <div field>
+              <small>${i18next.t('figure.text.section-cavity-unavailable')}</small>
+            </div>`}
     </section>`
   }
 
-  private renderCorner(body: { id: string; shape: FigureEvaluatedShape }) {
+  private renderCorner(body: Body) {
     const d = body.shape.dimensions
     const reaches = Object.keys(d)
       .filter(k => k.startsWith('corner.'))
       .map(k => d[k])
-    const one = reaches.length ? sameOf(reaches) : 0
+    const now = reaches.length ? sameOf(reaches) : 0
+    const max = cornerLimitOf(body.shape)
     return html`<div field>
-      <label>${i18next.t('figure.label.section-corner')}</label>
-      <input
-        type="number"
-        min="0"
-        step="any"
-        .value=${live(one === undefined ? '' : String(mm(one)))}
-        placeholder=${one === undefined ? i18next.t('figure.text.section-corner-differs') : ''}
-        ?disabled=${this.locked}
-        @change=${(e: Event) => {
-          const input = e.target as HTMLInputElement
-          const value = Number(input.value)
-          if (input.value === '' || !Number.isFinite(value) || value < 0) {
-            input.value = one === undefined ? '' : String(mm(one))
-            return
-          }
-          /* 0 is a sharp corner: the rounding is taken away rather than kept at nothing. */
-          this.command({ kind: 'set-section-corner', part: body.id, corner: value > 0 ? value : null })
-        }}
-      />
+      <label for="corner">${i18next.t('figure.label.section-corner')}</label>
+      ${this.number('corner', now, {
+        min: 0,
+        ask: value => {
+          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 }),
+        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}
     </div>`
   }
 
-  private renderCavity(body: { id: string; shape: FigureEvaluatedShape }, axis: Axis) {
+  private renderCavity(body: Body, axis: Axis) {
     const cavity = body.shape.cavity
     const request = (patch: Partial<FigureCavityRequest>) => cavityRequestOf(body.shape, patch)
+    const said = (ask: FigureCavityAsk | null) =>
+      !ask
+        ? ''
+        : ask.code === 'not-positive'
+          ? i18next.t('figure.text.section-not-positive')
+          : i18next.t(`figure.text.section-${ask.code === 'wall-too-thick' ? 'wall' : 'ends'}-over`, { max: String(ask.max) })
+    const cavityField = (key: string, now: number | undefined, patch: (value: number) => Partial<FigureCavityRequest>) =>
+      this.number(key, now, {
+        min: 0,
+        ask: value => {
+          if (!(value > 0)) return i18next.t('figure.text.section-not-positive')
+          const ask = cavityRefusalOf(body.shape, request(patch(value)))
+          /* One side too thick: the most it can be is the width across less the wall opposite, not the even limit. */
+          const side = key.startsWith('wall.') ? key.slice(5) : undefined
+          if (ask?.code === 'wall-too-thick' && side && cavity)
+            return said({ code: 'wall-too-thick', max: mm(sideWallLimitOf(body.shape, cavity.wall, side)) })
+          return said(ask)
+        },
+        action: value => ({ kind: 'set-cavity', part: body.id, cavity: request(patch(value)) })
+      })
     return html`<div field>
         <label>
           <input
             type="checkbox"
             .checked=${live(!!cavity)}
             ?disabled=${this.locked}
-            @change=${(e: Event) => {
-              const on = (e.target as HTMLInputElement).checked
-              ;(e.target as HTMLInputElement).checked = !!cavity
+            @change=${(ev: Event) => {
+              const on = (ev.target as HTMLInputElement).checked
+              ;(ev.target as HTMLInputElement).checked = !!cavity
               this.command({ kind: 'set-cavity', part: body.id, cavity: on ? request({}) : null })
             }}
           />
           ${i18next.t('figure.label.section-cavity')}
         </label>
+        ${cavity
+          ? html`<small result>
+              ${i18next.t('figure.text.section-depth', {
+                result: i18next.t(`figure.label.section-result-${cavityResultOf(cavity)}`),
+                depth: String(cavityDepthOf(body.shape))
+              })}
+            </small>`
+          : nothing}
       </div>
       ${cavity
         ? html`<div field>
               <label>${i18next.t('figure.label.section-wall')}</label>
-              ${this.thickness(sameOf(Object.values(cavity.wall)), value => this.command({ kind: 'set-cavity', part: body.id, cavity: request({ wall: value }) }), 'figure.text.section-wall-differs')}
+              ${this.perSide
+                ? html`<div sides>
+                    ${[...sidesOf(axis)].sort((a, b) => a[0]!.localeCompare(b[0]!) || (a[1] === '-' ? -1 : 1)).map(
+                      side => html`<label>
+                        <span>${i18next.t('figure.label.face-' + SIDE_FACE[side])}</span>
+                        ${cavityField(`wall.${side}`, cavity.wall[side], value => ({ wall: { ...cavity.wall, [side]: value } }))}
+                      </label>`
+                    )}
+                  </div>`
+                : cavityField('wall', sameOf(Object.values(cavity.wall)), value => ({ wall: value }))}
+              ${this.perSide || this.refusals.wall
+                ? nothing
+                : html`<small>${i18next.t('figure.text.section-wall-at-most', { max: String(mm(wallLimitOf(body.shape))) })}</small>`}
+              <label>
+                <input
+                  type="checkbox"
+                  .checked=${live(this.perSide)}
+                  ?disabled=${this.locked}
+                  @change=${(ev: Event) => (this.perSide = (ev.target as HTMLInputElement).checked)}
+                />
+                ${i18next.t('figure.label.section-wall-per-side')}
+              </label>
             </div>
-            ${(['start', 'end'] as const).map(end => this.renderEnd(body.id, axis, end, cavity[end], request))}`
+            ${(['start', 'end'] as const).map(end => this.renderEnd(body, axis, end, cavity[end], request, cavityField))}`
         : nothing}`
   }
 
   private renderEnd(
-    part: string,
+    body: Body,
     axis: Axis,
     end: End,
     now: 'open' | { closed: number },
-    request: (patch: Partial<FigureCavityRequest>) => FigureCavityRequest
+    request: (patch: Partial<FigureCavityRequest>) => FigureCavityRequest,
+    cavityField: (key: string, now: number | undefined, patch: (value: number) => Partial<FigureCavityRequest>) => unknown
   ) {
     const closed = now !== 'open'
-    const set = (value: 'open' | { closed: number }) => this.command({ kind: 'set-cavity', part, cavity: request({ [end]: value }) })
     return html`<div field>
-      <label>${i18next.t('figure.label.face-' + END_FACE[axis][end])}</label>
+      <label>${i18next.t('figure.label.face-' + END_FACE(axis, end))}</label>
       <div row>
         <select
           .value=${live(closed ? 'closed' : 'open')}
           ?disabled=${this.locked}
-          @change=${(e: Event) => {
-            const select = e.target as HTMLSelectElement
+          @change=${(ev: Event) => {
+            const select = ev.target as HTMLSelectElement
             const want = select.value
             select.value = closed ? 'closed' : 'open'
-            set(want === 'open' ? 'open' : { closed: defaultWallOf(this.body!.shape) })
+            this.command({ kind: 'set-cavity', part: body.id, cavity: request({ [end]: want === 'open' ? 'open' : { closed: defaultWallOf(body.shape) } }) })
           }}
         >
           <option value="closed">${i18next.t('figure.label.section-end-closed')}</option>
           <option value="open">${i18next.t('figure.label.section-end-open')}</option>
         </select>
-        ${closed ? this.thickness(now.closed, value => set({ closed: value })) : html`<span></span>`}
+        ${closed ? cavityField(`closed.${end}`, now.closed, value => ({ [end]: { closed: value } })) : html`<span></span>`}
       </div>
     </div>`
   }
 
-  /** A thickness field: a positive number, committed on change; anything else puts the old value back. */
-  private thickness(now: number | undefined, commit: (value: number) => void, differs?: string) {
+  /**
+   * A millimetre field. Typing draws the value (or, if the kernel would refuse it, says why under the field and draws the
+   * figure as it stands); Enter or leaving sends it once; Esc puts the value back.
+   */
+  private number(
+    key: string,
+    now: number | undefined,
+    o: { min: number; ask: (value: number) => string; action: (value: number) => FigureAuthoringAction; placeholder?: string }
+  ) {
     const shown = now === undefined ? '' : String(mm(now))
+    const done = () => {
+      const { [key]: _, ...rest } = this.typed
+      this.typed = rest
+    }
+    const read = (input: HTMLInputElement) => (input.value === '' ? NaN : Number(input.value))
+    const judge = (input: HTMLInputElement) => {
+      const value = read(input)
+      const refusal = !Number.isFinite(value) || value < o.min ? '' : o.ask(value)
+      this.refusals = { ...this.refusals, [key]: refusal }
+      return Number.isFinite(value) && value >= o.min && !refusal ? value : undefined
+    }
     return html`<input
-      type="number"
-      min="0"
-      step="any"
-      .value=${live(shown)}
-      placeholder=${now === undefined && differs ? i18next.t(differs) : ''}
-      ?disabled=${this.locked}
-      @change=${(e: Event) => {
-        const input = e.target as HTMLInputElement
-        const value = Number(input.value)
-        if (input.value === '' || !Number.isFinite(value) || !(value > 0)) {
+        id=${key}
+        type="number"
+        min=${o.min}
+        step="any"
+        inputmode="decimal"
+        .value=${live(this.typed[key] ?? shown)}
+        placeholder=${o.placeholder ?? ''}
+        aria-invalid=${this.refusals[key] ? 'true' : 'false'}
+        aria-describedby=${`${key}-refusal`}
+        ?disabled=${this.locked}
+        @input=${(ev: Event) => {
+          this.typed = { ...this.typed, [key]: (ev.target as HTMLInputElement).value }
+          const value = judge(ev.target as HTMLInputElement)
+          this.preview(value === undefined ? null : o.action(value))
+        }}
+        @change=${(ev: Event) => {
+          const input = ev.target as HTMLInputElement
+          if (input.value === shown) return done(), this.preview(null)
+          const value = judge(input)
+          /* A refused value stays typed with its reason under it, to be corrected; nothing is sent. */
+          if (value === undefined) return this.preview(null)
+          done()
+          this.command(o.action(value))
+        }}
+        @keydown=${(ev: KeyboardEvent) => {
+          if (ev.key !== 'Escape') return
+          const input = ev.target as HTMLInputElement
           input.value = shown
-          return
-        }
-        commit(value)
-      }}
-    />`
+          done()
+          this.refusals = { ...this.refusals, [key]: '' }
+          this.preview(null)
+        }}
+      />
+      ${this.refusals[key] ? html`<small refusal id=${`${key}-refusal`} role="alert">${this.refusals[key]}</small>` : nothing}`
+  }
+
+  private preview(action: FigureAuthoringAction | null) {
+    this.dispatchEvent(new CustomEvent('command-live', { detail: { action }, bubbles: true, composed: true }))
   }
 
   private command(action: FigureAuthoringAction) {

package/client/modeller/live.ts

@@ -1,5 +1,5 @@
-import { compileFigureAsset, editFigurePart } from '@hatiolab/figure-model'
-import type { FigureAsset, FigurePartEdit } from '@hatiolab/figure-model'
+import { applyFigureAuthoring, compileFigureAsset, editFigurePart } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureAuthoringAction, FigurePartEdit } from '@hatiolab/figure-model'
 
 import { drawableFigureParts, type FigureRenderPart } from './renderer.js'
 
@@ -19,6 +19,8 @@ export interface LiveValues {
   values: Record<string, number>
   /** A part edit in hand, not yet committed. */
   edit?: FigurePartEdit
+  /** An authoring command in hand (a corner radius, an inside, being typed), not yet committed (ADR-0100 §3.3). */
+  action?: FigureAuthoringAction
 }
 
 export const NOTHING_LIVE: LiveValues = { values: {} }
@@ -38,7 +40,7 @@ export function liveOverridesOf(asset: FigureAsset, values: Record<string, numbe
 }
 
 export function isLive(live: LiveValues): boolean {
-  return !!live.edit || Object.keys(live.values).length > 0
+  return !!live.edit || !!live.action || Object.keys(live.values).length > 0
 }
 
 /**
@@ -50,9 +52,16 @@ export function isLive(live: LiveValues): boolean {
  */
 export function livePartsOf(asset: FigureAsset, live: LiveValues): FigureRenderPart[] | null {
   if (!isLive(live)) return null
-  const { design, state } = liveOverridesOf(asset, live.values)
   try {
     let next = live.edit ? editFigurePart(asset, live.edit) : asset
+    if (live.action) next = applyFigureAuthoring(next, live.action)
+    /* Read against the figure the edit makes: a command can take an input away (one wall becomes one per side). */
+    const { design, state } = liveOverridesOf(next, live.values)
+    /*
+     * An input the edit or the command in hand wrote takes its value: the values as they stand hold its old one (a
+     * point's coordinate before it was moved, a corner's radius before it was typed again) and would put it back.
+     */
+    for (const id of Object.keys(design)) if (next.designInputs[id] !== asset.designInputs[id]) delete design[id]
     if (Object.keys(design).length) next = { ...next, designInputs: { ...next.designInputs, ...design } }
     return drawableFigureParts(compileFigureAsset(next).evaluate(state).geometry)
   } catch {

package/client/modeller/section-controls.ts

@@ -1,21 +1,40 @@
+import { FIGURE_SECTION_PLANE, checkFigureSection, figureExtrusionFeaturesOf } from '@hatiolab/figure-model'
 import type { FigureCavityRequest, FigureEvaluatedShape } from '@hatiolab/figure-model'
 
+/*
+ * What the 단면 section of the properties tab reads and asks (ADR-0100 §3.3): a pushed part's corners and its inside.
+ * Whether a value can be taken is asked of the kernel's own section checks -- the screen keeps no rule of its own -- and
+ * the most it can take is said beside the field, so a refusal names the value to type rather than only that it failed.
+ */
+
+type Axis = 'x' | 'y' | 'z'
+type End = 'start' | 'end'
+type Extrusion = NonNullable<FigureEvaluatedShape['extrusion']>
+
+/** The face each side of a section is, and each end of a push: a push's start is its low side. */
+export const SIDE_FACE: Record<string, string> = { 'x-': 'left', 'x+': 'right', 'y-': 'bottom', 'y+': 'top', 'z-': 'back', 'z+': 'front' }
+export const END_FACE = (axis: Axis, end: End) => SIDE_FACE[`${axis}${end === 'start' ? '-' : '+'}`]!
+
 /** The one value every entry holds, or undefined when they differ (or there are none). */
 export const sameOf = (values: readonly (number | undefined)[]) =>
   values.length && values.every(v => v !== undefined && Math.abs(v - values[0]!) < 1e-6) ? values[0] : undefined
 
 export const mm = (value: number) => Math.round(value * 1000) / 1000
 
+/** The four sides of a push's section, in the kernel's order: the first plane axis low and high, then the second. */
+export const sidesOf = (axis: Axis) => FIGURE_SECTION_PLANE[axis].flatMap(a => [`${a}-`, `${a}+`])
+
+/** The section's widths across, one per plane axis: a rectangle's sides, an ellipse's diameters. */
+function acrossOf(e: Extrusion): number[] {
+  const s = e.section
+  if (s.kind === 'rectangle') return FIGURE_SECTION_PLANE[e.axis].map(a => s.size[a]!)
+  if (s.kind === 'ellipse') return FIGURE_SECTION_PLANE[e.axis].map(a => 2 * s.radius[a]!)
+  return []
+}
+
 /** The wall a new inside starts with: a tenth of the section's narrower side, at least 1 mm. */
 export function defaultWallOf(shape: FigureEvaluatedShape): number {
-  const section = shape.extrusion!.section
-  const across =
-    section.kind === 'rectangle'
-      ? Object.values(section.size)
-      : section.kind === 'ellipse'
-        ? Object.values(section.radius).map(r => 2 * r!)
-        : []
-  return Math.max(1, Math.round(Math.min(...(across as number[])) / 10))
+  return Math.max(1, Math.round(Math.min(...acrossOf(shape.extrusion!)) / 10))
 }
 
 /**
@@ -32,3 +51,65 @@ export function cavityRequestOf(shape: FigureEvaluatedShape, patch: Partial<Figu
   }
 }
 
+/** The most a rectangle's corners can reach: half its narrower side (the kernel's CORNER_TOO_LARGE says where). */
+export function cornerLimitOf(shape: FigureEvaluatedShape): number | undefined {
+  const e = shape.extrusion
+  if (e?.section.kind !== 'rectangle') return undefined
+  const [u, v] = FIGURE_SECTION_PLANE[e.axis]
+  const far = 2 * Math.max(...acrossOf(e))
+  const issues = checkFigureSection({ kind: 'rectangle', size: e.section.size, corner: { [u]: far, [v]: far } }, e.axis)
+  const maxes = issues.flatMap(i => (i.code === 'CORNER_TOO_LARGE' ? [i.max] : []))
+  return maxes.length ? Math.min(...maxes) : undefined
+}
+
+/** Whether a corner radius can be taken; if not, the most it can be. */
+export function cornerRefusalOf(shape: FigureEvaluatedShape, radius: number): { max: number } | null {
+  const e = shape.extrusion
+  if (e?.section.kind !== 'rectangle' || !(radius > 0)) return null
+  const [u, v] = FIGURE_SECTION_PLANE[e.axis]
+  const issues = checkFigureSection({ kind: 'rectangle', size: e.section.size, corner: { [u]: radius, [v]: radius } }, e.axis)
+  return issues.some(i => i.code === 'CORNER_TOO_LARGE') ? { max: cornerLimitOf(shape)! } : null
+}
+
+/** One side's wall, the others kept: it must leave room inside, so under the width across it less the opposite wall. */
+export function sideWallLimitOf(shape: FigureEvaluatedShape, wall: Record<string, number>, side: string): number {
+  const e = shape.extrusion!
+  const axis = side[0] as Axis
+  const across = acrossOf(e)[FIGURE_SECTION_PLANE[e.axis].indexOf(axis)]!
+  return across - (wall[`${axis}${side[1] === '-' ? '+' : '-'}`] ?? 0)
+}
+
+/** A wall must leave room inside: under half the narrower width the section has. */
+export const wallLimitOf = (shape: FigureEvaluatedShape) => Math.min(...acrossOf(shape.extrusion!)) / 2
+
+export type FigureCavityAsk =
+  | { code: 'wall-too-thick'; max: number }
+  | { code: 'ends-too-thick'; max: number }
+  | { code: 'not-positive' }
+
+/** Whether an inside can be taken, asked of the kernel; if not, what to change and the most it can be. */
+export function cavityRefusalOf(shape: FigureEvaluatedShape, request: FigureCavityRequest): FigureCavityAsk | null {
+  const e = shape.extrusion!
+  const sides = sidesOf(e.axis)
+  const wall = typeof request.wall === 'number' ? Object.fromEntries(sides.map(s => [s, request.wall as number])) : request.wall
+  const made = figureExtrusionFeaturesOf(e, [{ id: 'inside', wall: wall as Record<string, number>, start: request.start, end: request.end }])
+  if (!('refused' in made)) return null
+  const r = made.refused
+  if (r.code === 'CAVITY' && r.refused === 'NO_ROOM_INSIDE') return { code: 'wall-too-thick', max: mm(wallLimitOf(shape)) }
+  if (r.code === 'CAVITY_NO_LENGTH') return { code: 'ends-too-thick', max: mm(e.end - e.start) }
+  return { code: 'not-positive' }
+}
+
+/** What the inside makes of the part (§3.3): open at both ends a pipe, at one a container, at neither a closed space. */
+export function cavityResultOf(cavity: NonNullable<FigureEvaluatedShape['cavity']>): 'pipe' | 'container' | 'sealed' {
+  const open = [cavity.start, cavity.end].filter(e => e === 'open').length
+  return open === 2 ? 'pipe' : open === 1 ? 'container' : 'sealed'
+}
+
+/** How deep the inside is along the push: the length less the closed ends. */
+export function cavityDepthOf(shape: FigureEvaluatedShape): number {
+  const e = shape.extrusion!,
+    c = shape.cavity!
+  const closed = (x: typeof c.start) => (x === 'open' ? 0 : x.closed)
+  return mm(e.end - e.start - closed(c.start) - closed(c.end))
+}

package/client/modeller/section-drawing.ts

@@ -0,0 +1,97 @@
+import { FIGURE_SECTION_PLANE, FIGURE_SECTION_POINT_LIMIT, checkFigureSection, figureSectionSidesOf } from '@hatiolab/figure-model'
+import type { FigureSectionIssue, FigureSectionPoint } from '@hatiolab/figure-model'
+
+/*
+ * What the section editor does to a drawn section's points, and how it says what is wrong with them (ADR-0100 §3.2).
+ * The points are the kernel's own (`{ id, x, z }` for a push along Y), their validity is the kernel's own check, and a
+ * point's number on screen is its own name's number (Q9): p3 is 「3」 before and after any edit, and deleting it leaves
+ * 1, 2 and 4.
+ */
+
+type Axis = 'x' | 'y' | 'z'
+export type Points = readonly FigureSectionPoint[]
+
+/** The number a point is shown by: its name's number. */
+export const pointLabel = (id: string) => /^p(\d+)$/.exec(id)?.[1] ?? id
+
+/** The next point's name: one past the highest number the loop has, so a new point never takes a gap's number. */
+export function nextPointId(points: Points): string {
+  return `p${Math.max(0, ...points.map(p => Number(/^p(\d+)$/.exec(p.id)?.[1] ?? 0))) + 1}`
+}
+
+/** A point in the middle of the side from `from` to the point after it, whole millimetres; the new point's id with it. */
+export function insertAfter(points: Points, from: string, axis: Axis): { points: FigureSectionPoint[]; id: string } {
+  const [u, v] = FIGURE_SECTION_PLANE[axis]
+  const i = points.findIndex(p => p.id === from)
+  const a = points[i]!,
+    b = points[(i + 1) % points.length]!
+  const id = nextPointId(points)
+  const mid = { id, [u]: Math.round((a[u]! + b[u]!) / 2), [v]: Math.round((a[v]! + b[v]!) / 2) } as FigureSectionPoint
+  return { points: [...points.slice(0, i + 1), mid, ...points.slice(i + 1)], id }
+}
+
+/** The points less one, or why not: a section is three points or more. */
+export function removePoint(points: Points, id: string): FigureSectionPoint[] | { refused: 'too-few' } {
+  if (points.length <= 3) return { refused: 'too-few' }
+  return points.filter(p => p.id !== id)
+}
+
+export function movePoint(points: Points, id: string, at: Partial<Record<Axis, number>>): FigureSectionPoint[] {
+  return points.map(p => (p.id === id ? { ...p, ...at } : p))
+}
+
+/** What is wrong with the points, by the kernel's own check. */
+export const issuesOf = (points: Points, axis: Axis) => checkFigureSection({ kind: 'polygon', points: [...points] }, axis)
+
+/** A side said in the loop's order, 3–4 not 4–3: its id is the pair in name order, which a person never sees. */
+function sideLabel(points: Points, axis: Axis, side: string): string {
+  const s = figureSectionSidesOf({ kind: 'polygon', points: [...points] }, axis).find(x => x.id === side)
+  const [a, b] = s?.from ? [s.from, s.to!] : side.split('~')
+  return `${pointLabel(a!)}–${pointLabel(b!)}`
+}
+
+/** An issue as the words that say it: an i18n key and its values. */
+export function issueWords(issue: FigureSectionIssue, points: Points, axis: Axis): { key: string; params: Record<string, string> } {
+  const line = (s: string) => sideLabel(points, axis, s)
+  switch (issue.code) {
+    case 'SIDES_CROSS':
+      return { key: 'figure.text.section-issue-cross', params: { a: line(issue.sides[0]), b: line(issue.sides[1]) } }
+    case 'SIDES_TOUCH':
+      return { key: 'figure.text.section-issue-touch', params: { a: line(issue.sides[0]), b: line(issue.sides[1]) } }
+    case 'SIDES_FOLD':
+      return { key: 'figure.text.section-issue-fold', params: { a: line(issue.sides[0]), b: line(issue.sides[1]) } }
+    case 'ZERO_LENGTH_SIDE':
+      return { key: 'figure.text.section-issue-zero-length', params: { a: line(issue.side) } }
+    case 'ZERO_AREA':
+      return { key: 'figure.text.section-issue-zero-area', params: {} }
+    case 'TOO_FEW_POINTS':
+      return { key: 'figure.text.section-issue-too-few', params: {} }
+    case 'TOO_MANY_POINTS':
+      return { key: 'figure.text.section-issue-too-many', params: { limit: String(issue.limit) } }
+    default:
+      return { key: 'figure.text.section-issue-number', params: {} }
+  }
+}
+
+/** Every side and point an issue names, to mark on the drawing -- by more than colour: the list says them too. */
+export function markedBy(issues: readonly FigureSectionIssue[]): { sides: Set<string>; points: Set<string> } {
+  const sides = new Set<string>(),
+    points = new Set<string>()
+  for (const i of issues) {
+    if ('sides' in i) for (const s of i.sides) sides.add(s)
+    if ('side' in i) sides.add(i.side)
+    if ('point' in i) points.add(i.point)
+    if ('at' in i) points.add(String(i.at).split('.')[0]!)
+  }
+  for (const s of sides) for (const p of s.split('~')) points.add(p)
+  return { sides, points }
+}
+
+/** How far the drawing reaches from the origin: the points' farthest coordinate with room around, in 50 mm steps. */
+export function extentOf(points: Points, axis: Axis): number {
+  const [u, v] = FIGURE_SECTION_PLANE[axis]
+  const far = Math.max(1, ...points.flatMap(p => [Math.abs(p[u] ?? 0), Math.abs(p[v] ?? 0)]))
+  return Math.ceil((far * 1.4 + 40) / 50) * 50
+}
+
+export const POINT_LIMIT = FIGURE_SECTION_POINT_LIMIT

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: "wrap" | "hold";
+    loop: "hold" | "wrap";
     interpolation: "linear" | "step";
 };