@things-factory/figure-ui 10.1.103 → 10.1.105

package/client/modeller/editor.ts

@@ -1037,13 +1037,13 @@ export class FigureEditor extends LitElement {
         <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)}>
+            ({ axis, able }) => html`<button ?disabled=${unavailable || !able} title=${i18next.t(able ? 'figure.text.mirror-explained' : 'figure.text.mirror-would-overlap')} @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

package/client/modeller/fields.ts

@@ -50,7 +50,13 @@ export function groupFields(fields: readonly FieldLike[], part?: string): { vect
     A drawn section's points and a pyramid's apex are edited in the section editor, where a move is checked as it is made
     and the points stand in the outline's order (user 2026-10-01): not here, one field each, in the order they were made.
   */
-  const drawn = (id: string) => /^(point\.[^.]+|apex)\.[xyz]$/.test(id.slice(prefix.length))
+  /*
+    The section's own numbers -- its corners, its inside's walls and closed ends -- are edited in the 단면 group, where
+    they are drawn (user 2026-10-01: 「wall (mm)」, 「closed · start (mm)」 stood in the shape's list under their
+    inner names).
+  */
+  const ofSection = (id: string) => /^(dimension\.)?(round|roundX|roundZ|wall|wallX|wallZ|floor|closed|corner)(\.|$)/.test(id.slice(prefix.length))
+  const drawn = (id: string) => /^(point\.[^.]+|apex)\.[xyz]$/.test(id.slice(prefix.length)) || ofSection(id)
   const singles: FieldGroup[] = own
     .filter(f => !used.has(f.id) && !drawn(f.id))
     .map(field => ({ kind: 'single', name: nameOf(field.id.slice(prefix.length)), field }))

package/client/modeller/figure-cavity-drawing.ts

@@ -1,12 +1,16 @@
 import { css, html, LitElement, nothing, svg } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
+import { ref } from 'lit/directives/ref.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { figureCavitySectionOf } from '@hatiolab/figure-model'
 import type { FigureAuthoringAction, FigureCavityRequest, FigureEvaluatedShape, FigureSection } from '@hatiolab/figure-model'
-import { cavityRefusalOf, cavityWorkingOf, END_FACE, endToggled, mm, SIDE_FACE, wallDragged } from './section-controls.js'
+import { cavityRefusalOf, cavityWorkingOf, END_FACE, endToggled, mm, SIDE_FACE, sideWallLimitOf, wallDragged } from './section-controls.js'
 
 type Axis = 'x' | 'y' | 'z'
+
+/** A field opened by a press takes the keys at once. */
+const focusOnRender = () => ref(el => el && requestAnimationFrame(() => (el as HTMLInputElement).select()))
 type End = 'start' | 'end'
 type Body = { id: string; shape: FigureEvaluatedShape }
 
@@ -41,6 +45,19 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
     small[refusal] {
       color: var(--md-sys-color-error);
     }
+    div[pane] {
+      position: relative;
+    }
+    div[pane] input {
+      position: absolute;
+      width: 64px;
+      transform: translate(-50%, -50%);
+      font: inherit;
+    }
+    text[typed] {
+      cursor: text;
+      text-decoration: underline dotted;
+    }
   `
 
   @property({ attribute: false }) body?: Body
@@ -52,6 +69,8 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
   @state() private working?: ReturnType<typeof cavityWorkingOf>
   @state() private refusal = ''
   private dragging: { kind: 'wall'; side: string } | { kind: 'end'; end: End } | null = null
+  /** A number pressed to be typed: which, and where on its picture (percent of the picture's box). */
+  @state() private typing?: ({ kind: 'wall'; side: string } | { kind: 'end'; end: End }) & { x: number; y: number; pane: 'top' | 'side'; value: number }
   private pressedAt = 0
 
   private get now() {
@@ -66,18 +85,22 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
     return { kind: 'set-cavity', part: this.body!.id, cavity: this.request(w) }
   }
 
-  private judge(w: NonNullable<ReturnType<typeof cavityWorkingOf>>): string {
+  /** What the kernel would refuse, in words; for one side's wall, the most that side can be with the opposite kept. */
+  private judge(w: NonNullable<ReturnType<typeof cavityWorkingOf>>, side?: string): string {
     const ask = cavityRefusalOf(this.body!.shape, this.request(w))
     if (!ask) return ''
-    if (ask.code === 'wall-too-thick') return i18next.t('figure.text.section-wall-over', { max: String(ask.max) })
+    if (ask.code === 'wall-too-thick')
+      return i18next.t('figure.text.section-wall-over', {
+        max: String(this.perSide && side ? mm(sideWallLimitOf(this.body!.shape, w.wall, side)) : ask.max)
+      })
     if (ask.code === 'ends-too-thick') return i18next.t('figure.text.section-ends-over', { max: String(ask.max) })
     return i18next.t('figure.text.section-not-positive')
   }
 
   /** The working inside while dragging: drawn, judged, and previewed behind when the kernel would take it. */
-  private hold(w: NonNullable<ReturnType<typeof cavityWorkingOf>>) {
+  private hold(w: NonNullable<ReturnType<typeof cavityWorkingOf>>, side?: string) {
     this.working = w
-    this.refusal = this.judge(w)
+    this.refusal = this.judge(w, side)
     this.emit('command-live', this.refusal ? null : this.action(w))
   }
 
@@ -109,10 +132,41 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
     const e = this.body?.shape.extrusion
     const w = this.now
     if (!e || !w || (e.section.kind !== 'rectangle' && e.section.kind !== 'ellipse')) return nothing
-    return html`${this.top(e, w)}${this.side(e, w)}
+    return html`<div pane>${this.top(e, w)}${this.typing?.pane === 'top' ? this.renderTyping() : nothing}</div>
+      <div pane>${this.side(e, w)}${this.typing?.pane === 'side' ? this.renderTyping() : nothing}</div>
       ${this.refusal ? html`<small refusal role="alert">${this.refusal}</small>` : nothing}`
   }
 
+  /** Press a number, type it, Enter: the same one set-cavity a drag sends; Esc or leaving puts it back. */
+  private type(ev: PointerEvent, what: { kind: 'wall'; side: string } | { kind: 'end'; end: End }, pane: 'top' | 'side', value: number) {
+    if (this.locked) return
+    ev.stopPropagation()
+    const svgEl = (ev.target as Element).closest('svg')!
+    const box = svgEl.getBoundingClientRect()
+    this.refusal = ''
+    this.typing = { ...what, pane, value, x: ((ev.clientX - box.left) / box.width) * 100, y: ((ev.clientY - box.top) / box.height) * 100 }
+  }
+
+  private renderTyping() {
+    const t = this.typing!
+    return html`<input type="number" step="1" min="1" .value=${String(t.value)} style=${`left:${t.x}%;top:${t.y}%`}
+      aria-label=${t.kind === 'wall' ? i18next.t('figure.label.section-wall') : i18next.t('figure.label.face-' + END_FACE(this.body!.shape.extrusion!.axis, t.end))}
+      @keydown=${(ev: KeyboardEvent) => {
+        ev.stopPropagation()
+        if (ev.key === 'Escape') this.typing = undefined
+        if (ev.key !== 'Enter') return
+        const value = Number((ev.target as HTMLInputElement).value)
+        this.typing = undefined
+        if (!(Number.isFinite(value) && value > 0)) return
+        const now = this.now!
+        const next = t.kind === 'wall' ? { ...now, wall: wallDragged(now.wall, t.side, value, this.perSide) } : { ...now, [t.end]: { closed: Math.round(value) } }
+        this.refusal = this.judge(next, t.kind === 'wall' ? t.side : undefined)
+        if (!this.refusal) this.emit('command', this.action(next))
+      }}
+      @blur=${() => (this.typing = undefined)}
+      ${focusOnRender()} />`
+  }
+
   /** Seen along the push: the section, its inside and a handle on each wall. */
   private top(e: NonNullable<FigureEvaluatedShape['extrusion']>, w: NonNullable<ReturnType<typeof cavityWorkingOf>>) {
     const [h, v] = SCREEN[e.axis]
@@ -150,7 +204,8 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
       return svg`<g wall=${side} style=${`cursor:${a === h ? 'ew-resize' : 'ns-resize'}`}
           @pointerdown=${(ev: PointerEvent) => this.grab(ev, { kind: 'wall', side })}>
         <rect x=${x - 6} y=${y - 6} width="12" height="12" rx="2" style="fill:var(--md-sys-color-surface);stroke:var(--md-sys-color-primary);stroke-width:1.5" />
-        <text x=${tx} y=${ty} font-size="11" text-anchor=${a === h ? 'middle' : 'start'} style="fill:var(--md-sys-color-on-surface)">${mm(w.wall[side]!)}</text>
+        <text typed x=${tx} y=${ty} font-size="11" text-anchor=${a === h ? 'middle' : 'start'} style="fill:var(--md-sys-color-on-surface)"
+          @pointerdown=${(ev: PointerEvent) => this.type(ev, { kind: 'wall', side }, 'top', w.wall[side]!)}>${mm(w.wall[side]!)}</text>
         <title>${i18next.t('figure.label.face-' + SIDE_FACE[side])} ${i18next.t('figure.label.section-wall')}</title>
       </g>`
     })
@@ -198,7 +253,8 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
           @pointerdown=${(ev: PointerEvent) => this.grab(ev, { kind: 'end', end })}>
         <rect x=${x0 + wl} y=${Math.min(y, inner) - 8} width=${x1 - x0 - wl - wr} height=${Math.abs(t) + 16} style="fill:transparent" />
         ${open ? svg`<line x1=${x0 + wl} y1=${y} x2=${x1 - wr} y2=${y} style="stroke:var(--md-sys-color-outline);stroke-dasharray:3 3" />` : nothing}
-        <text x=${W / 2} y=${end === 'start' ? yBot + 16 : yTop - 8} font-size="11" text-anchor="middle" style="fill:var(--md-sys-color-primary)">${label}</text>
+        <text ?typed=${!open} x=${W / 2} y=${end === 'start' ? yBot + 16 : yTop - 8} font-size="11" text-anchor="middle" style="fill:var(--md-sys-color-primary)"
+          @pointerdown=${(ev: PointerEvent) => !open && this.type(ev, { kind: 'end', end }, 'side', (w[end] as { closed: number }).closed)}>${label}</text>
         <title>${label}</title>
       </g>`
     }
@@ -231,7 +287,7 @@ export class FigureCavityDrawing extends localize(i18next)(LitElement) {
       low = d.side[1] === '-'
     const at = a === h ? p.x - ox : p.y - oy
     const value = (half[a] - (low ? -at : at)) / k
-    this.hold({ ...this.now!, wall: wallDragged(this.now!.wall, d.side, value, this.perSide) })
+    this.hold({ ...this.now!, wall: wallDragged(this.now!.wall, d.side, value, this.perSide) }, d.side)
   }
 
   private dragEnd(ev: PointerEvent, k: number, yTop: number, yBot: number) {

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

@@ -187,7 +187,6 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
           ? html`<small>${i18next.t('figure.label.status-colors')}</small>
               <div swatches>${this.swatches(lit, material.token, token => this.put({ token }))}</div>`
           : nothing}
-        <small><b>${purposeOf(material.token)}</b> — ${i18next.t('figure.text.palette-purpose-explained')}</small>
       </div>
       <div form>
         <span>${i18next.t('figure.label.preset')}</span>

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

@@ -4,30 +4,12 @@ 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 type { FigureAuthoringAction, 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,
-  cavityDepthOf,
-  cavityRefusalOf,
-  cavityRequestOf,
-  cavityResultOf,
-  cornerLimitOf,
-  cornerRefusalOf,
-  defaultWallOf,
-  mm,
-  sameOf,
-  sidesOf,
-  sideWallLimitOf,
-  wallLimitOf,
-  type FigureCavityAsk
-} from './section-controls.js'
+import { cavityDepthOf, cavityRequestOf, cavityResultOf, cornerLimitOf, cornerRefusalOf, mm, sameOf } from './section-controls.js'
 
-type Axis = 'x' | 'y' | 'z'
-type End = 'start' | 'end'
 type Body = { id: string; shape: FigureEvaluatedShape }
 
 /**
@@ -114,7 +96,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
           </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, e.axis) : 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}
     </section>`
   }
 
@@ -142,29 +124,13 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
     </div>`
   }
 
-  private renderCavity(body: Body, axis: Axis) {
+  /*
+   * The inside: made or taken away here, and drawn -- walls dragged or their number pressed and typed, ends pressed
+   * open or closed (figure-cavity-drawing). The number fields under the drawing went (user 2026-10-01): they said the
+   * drawing again.
+   */
+  private renderCavity(body: Body) {
     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 toggle>
           <input
@@ -174,7 +140,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
             @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 })
+              this.command({ kind: 'set-cavity', part: body.id, cavity: on ? cavityRequestOf(body.shape, {}) : null })
             }}
           />
           ${i18next.t('figure.label.section-cavity')}
@@ -188,69 +154,15 @@ 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 form>
-              <label>${i18next.t('figure.label.section-wall')}</label>
-              <div>
-              ${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 toggle>
-                <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>
-            </div>
-            ${(['start', 'end'] as const).map(end => this.renderEnd(body, axis, end, cavity[end], request, cavityField))}`
+        ? html`<figure-cavity-drawing .body=${body} .perSide=${this.perSide} ?locked=${this.locked}></figure-cavity-drawing>
+            <label toggle>
+              <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>`
         : nothing}`
   }
 
-  private renderEnd(
-    body: Body,
-    axis: Axis,
-    end: End,
-    now: 'open' | { closed: number },
-    request: (patch: Partial<FigureCavityRequest>) => FigureCavityRequest,
-    cavityField: (key: string, now: number | undefined, patch: (value: number) => Partial<FigureCavityRequest>) => unknown
-  ) {
-    const closed = now !== 'open'
-    return html`<div form>
-      <label>${i18next.t('figure.label.face-' + END_FACE(axis, end))}</label>
-      <div row>
-        <select
-          .value=${live(closed ? 'closed' : 'open')}
-          ?disabled=${this.locked}
-          @change=${(ev: Event) => {
-            const select = ev.target as HTMLSelectElement
-            const want = select.value
-            select.value = closed ? 'closed' : 'open'
-            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 ? cavityField(`closed.${end}`, now.closed, value => ({ [end]: { closed: value } })) : html`<span></span>`}
-      </div>
-    </div>`
-  }
-
   /**
    * 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.

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";
 };

package/dist-client/modeller/editor.js

@@ -1056,12 +1056,12 @@ let FigureEditor = class FigureEditor extends LitElement {
       <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)}>
+          ${mirrors.map(({ axis, able }) => html `<button ?disabled=${unavailable || !able} title=${i18next.t(able ? 'figure.text.mirror-explained' : 'figure.text.mirror-would-overlap')} @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