@things-factory/figure-ui 10.1.83 → 10.1.85

package/client/modeller/command-preview.ts

@@ -1,6 +1,7 @@
 import type { FigureBodyMove, FigureClipLoss, FigureFaceArea, FigureRowReading } from '@hatiolab/figure-model'
 
 import type { FigureRenderPart } from './renderer.js'
+import { boxShape, discShape } from './drawn-shapes.js'
 
 /*
  * A command seen before it is done, as the modeller shows it (ADR-0097 §5.5, designer 2026-09-27): the bodies it would
@@ -53,9 +54,10 @@ export function faceHighlightOf(face: FigureFaceArea | undefined): FigureRenderP
   /* Its own x · y · z are the face's two sides and its normal, as the kernel gives them. */
   const r = [0, 1, 2].map(i => [face.u[i]!, face.normal[i]!, face.v[i]!])
   const t = [0, 1, 2].map(i => face.centre[i]! + face.normal[i]! * (LIFT + THICKNESS / 2))
+  /* A plane touching a curved side is a line (Q3): drawn as a narrow strip, never a plate. */
   const shape: FigureRenderPart['shape'] = face.round
-    ? { provider: 'cylinder', dimensions: { radius: face.size.u / 2, length: THICKNESS } }
-    : { provider: 'box', dimensions: { width: face.size.u, height: THICKNESS, depth: face.size.v } }
+    ? discShape(face.size.u / 2, THICKNESS)
+    : boxShape(Math.max(face.size.u, THICKNESS), THICKNESS, Math.max(face.size.v, THICKNESS))
   /* Solid: a translucent plate over a light face was hardly seen (2026-09-27, :3391); it covers the face it names. */
   return { id: TARGET_FACE, shape, pose: { r, t }, material: { token: TARGET_FACE } }
 }

package/client/modeller/drawn-shapes.ts

@@ -0,0 +1,29 @@
+/**
+ * Shapes the modeller draws of its own -- a lit face, a joint's fan, a slide's line -- written as the shapes figure-model
+ * evaluates (ADR-0100): a section pushed along Y, centred. things-scene's one builder draws them as it draws a part.
+ */
+export interface DrawnShape {
+  provider: 'extrude'
+  dimensions: Record<string, number>
+  extrusion: { axis: 'y'; section: DrawnSection; start: number; end: number }
+}
+type DrawnSection =
+  | { kind: 'rectangle'; size: { x: number; z: number } }
+  | { kind: 'ellipse'; radius: { x: number; z: number } }
+  | { kind: 'polygon'; points: Array<{ id: string; x: number; z: number }> }
+
+const centred = (section: DrawnSection, height: number): DrawnShape => ({
+  provider: 'extrude',
+  dimensions: { length: height },
+  extrusion: { axis: 'y', section, start: -height / 2, end: height / 2 }
+})
+
+/** A box: width along X, height along Y, depth along Z. */
+export const boxShape = (width: number, height: number, depth: number): DrawnShape => centred({ kind: 'rectangle', size: { x: width, z: depth } }, height)
+
+/** A disc of a radius, `height` thick along Y. */
+export const discShape = (radius: number, height: number): DrawnShape => centred({ kind: 'ellipse', radius: { x: radius, z: radius } }, height)
+
+/** A section in X-Z, `height` thick along Y. */
+export const sectionShape = (points: ReadonlyArray<{ x: number; z: number }>, height: number): DrawnShape =>
+  centred({ kind: 'polygon', points: points.map((p, i) => ({ id: `p${i + 1}`, x: p.x, z: p.z })) }, height)

package/client/modeller/editor.ts

@@ -16,6 +16,7 @@ import { drawableFigureParts } from './renderer.js'
 import './canvas.js'
 import './figure-parts.js'
 import './figure-material-panel.js'
+import './figure-section-panel.js'
 import { faceHighlightOf, ghostPartsOf, previewWordsOf, rowWordsOf, type HeldPreview } from './command-preview.js'
 import { motionEndsOf, type MotionEnds } from './motion-ends.js'
 import './figure-links.js'
@@ -47,6 +48,7 @@ import { jointFanOf } from './joint-fan.js'
 import { jointDragOf } from './joint-drag.js'
 import type { FirstSave } from './first-save.js'
 import { isLive, livePartsOf, liveOverSession, NOTHING_LIVE, scrubbed, scrubStep, type LiveValues } from './live.js'
+import { startingShapeKindOfBody } from './starting-shape.js'
 
 
 /**
@@ -701,6 +703,12 @@ export class FigureEditor extends LitElement {
   private hold(values: Record<string, number>, edit?: FigurePartEdit) {
     this.live = { values: { ...this.live.values, ...values }, ...(edit ? { edit } : this.live.edit ? { edit: this.live.edit } : {}) }
   }
+  /** A command in hand, drawn and not run; `null` lets go of it and the figure as it stands is drawn again. */
+  private holdAction(action: FigureAuthoringAction | null) {
+    const { action: _, ...rest } = this.live
+    this.live = action ? { ...rest, action } : rest
+  }
+
   private changed() {
     this.requestUpdate()
     this.dispatchEvent(new CustomEvent('changed', { bubbles: true, composed: true }))
@@ -1138,6 +1146,8 @@ export class FigureEditor extends LitElement {
   }
   /** One command, one step of the history. A refusal a person can meet here is said in their words. */
   private linkCommand(action: FigureAuthoringAction) {
+    /* 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
     this.notice = ''
     const hadSize = this.hasSize()
@@ -1342,7 +1352,7 @@ export class FigureEditor extends LitElement {
       }
       rows.set(id, {
         id,
-        provider: (g as { shape?: { provider?: string } }).shape?.provider ?? '',
+        kind: startingShapeKindOfBody((g as { shape?: never }).shape) ?? '',
         hidden: this.hiddenParts.has(id),
         invisible: (g as { visible?: boolean }).visible === false,
         ...(id !== g.id ? { copies: 1 } : {}),
@@ -2012,6 +2022,12 @@ export class FigureEditor extends LitElement {
                   ${this.renderGroups(this.withSizeRow(groupFields(partFields, this.selected), held), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable), held)}
                   ${roomFields.length ? this.renderRoomOnly(roomFields, unavailable) : nothing}
                   ${this.renderLinks(unavailable, 'shape')}
+                  <figure-section-panel
+                    .body=${{ ...part, id: this.selected }}
+                    ?locked=${unavailable}
+                    @command=${(e: CustomEvent) => this.linkCommand(e.detail.action)}
+                    @command-live=${(e: CustomEvent) => this.holdAction(e.detail.action)}
+                  ></figure-section-panel>
                   <figure-material-panel
                     .body=${{ ...part, id: this.selected }}
                     .palette=${view.palette ?? {}}

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

@@ -6,6 +6,7 @@ import { MATERIAL_PRESETS, SEGMENT_PRESETS, figureTrianglesOf } from '@hatiolab/
 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'
 
 /** The purpose each palette role is for, by its token. */
 const PURPOSE: Record<string, string> = {
@@ -23,7 +24,6 @@ const PURPOSE: Record<string, string> = {
 export const purposeOf = (token?: string) => i18next.t(`figure.label.palette-purpose-${PURPOSE[token ?? ''] ?? 'registered'}`)
 
 /** Bodies with a rim — the ones `set-segments` accepts. */
-const ROUND = new Set(['cylinder', 'ellipticCylinder', 'sphere', 'frustum'])
 const DEFAULT_SEGMENTS = 12
 
 /**
@@ -230,8 +230,7 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
   }
 
   private renderSegments(part: FigureAssetGeometry & { id: string }) {
-    const provider = (part as { shape?: { provider?: string } }).shape?.provider ?? ''
-    if (!ROUND.has(provider)) return nothing
+    if (!isRoundBody((part as { shape?: never }).shape)) return nothing
     const current = part.segments ?? DEFAULT_SEGMENTS
     return html`
       <div field>

package/client/modeller/figure-parts.ts

@@ -13,7 +13,7 @@ import { partLabelOf } from './fields.js'
  *
  * 팔레트는 목록 위에, 눈 단추는 늘 자리를 차지하고, 조작은 고른 줄에서만 보인다.
  *
- * 부품의 도형은 평가가 준 `provider` 로 읽는다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라
+ * 부품의 도형은 평가가 준 형상에서 읽은 시작 모양 이름(`kind`)으로 보인다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라
  * 보이고 안 보이는 것)와는 다른 것이다. 그것은 속성 패널의 몫이다.
  *
  * 이 컴포넌트는 정본을 만지지 않는다. 무엇을 하겠다는 것만 알린다.
@@ -22,7 +22,8 @@ import { partLabelOf } from './fields.js'
 /** 한 줄 — 평가에서 이 패널이 읽는 것만. */
 export interface FigurePartRow {
   id: string
-  provider: string
+  /** 시작 모양 이름(`startingShapeKindOfBody`): 상자 · 원기둥 … 아이콘을 고른다. */
+  kind: string
   /** 작업대에서 잠깐 가린 것. 저장되지 않는다. */
   hidden?: boolean
   /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */
@@ -36,37 +37,34 @@ export interface FigurePartRow {
   fastenedTo?: string
 }
 
-/** 제공자마다의 아이콘. Material Symbols 이름이다. */
-const PROVIDER_ICON: Record<string, string> = {
-  box: 'deployed_code',
+/** 시작 모양마다의 아이콘. Material Symbols 이름이다. */
+const KIND_ICON: Record<string, string> = {
+  cube: 'deployed_code',
   cylinder: 'database',
-  ellipticCylinder: 'database',
   frustum: 'change_history',
   sphere: 'circle',
-  roundedBox: 'crop_square',
-  roundedBoxXZ: 'crop_square',
-  hollowBox: 'check_box_outline_blank',
-  hollowBoxXZ: 'check_box_outline_blank',
+  'rounded-box': 'crop_square',
+  'hollow-box': 'check_box_outline_blank',
   polygon: 'pentagon',
   portal: 'door_front'
 }
 
 /** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */
 /*
-  The palette. A plate and a wall are boxes of a shape a person reaches for, so they are starting sizes, not kinds of their own.
+  The palette: starting shapes (ADR-0100 §2.1). A plate and a wall are boxes of a shape a person reaches for, so they are
+  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'
 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' },
-  { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rounded-box' },
   { kind: 'sphere', icon: 'circle', label: 'figure.label.primitive-sphere' },
   { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },
   { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },
   { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },
   { kind: 'wall', icon: 'crop_portrait', label: 'figure.label.primitive-wall' },
-  { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' },
-  { kind: 'hollow-box', icon: 'inventory_2', label: 'figure.label.primitive-hollow-box' }
+  { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
 ]
 
 @customElement('figure-parts')
@@ -575,7 +573,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         >
           <md-icon>${off ? 'visibility_off' : 'visibility'}</md-icon>
         </button>
-        <md-icon>${PROVIDER_ICON[part.provider] ?? 'deployed_code'}</md-icon>
+        <md-icon>${KIND_ICON[part.kind] ?? 'deployed_code'}</md-icon>
         <span label title=${part.id}
           >${partLabelOf(part.id)}${part.copies ? html` <small copies>× ${part.copies}</small>` : nothing}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}${part.fastenedTo
             ? html`<small fastened-to title=${i18next.t('figure.label.fastened-to')}>${part.fastenedTo}</small>`

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

@@ -0,0 +1,304 @@
+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 {
+  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'
+type Body = { id: string; shape: FigureEvaluatedShape }
+
+/**
+ * 단면 — a pushed part's rounded corners and its inside (ADR-0100 §3.3).
+ *
+ * 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.
+ *
+ * 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) {
+  static styles = [SidePanelStyles, css`
+    :host {
+      display: block;
+    }
+    div[row] {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+    }
+    div[row] > * {
+      flex: 1;
+      min-width: 0;
+    }
+    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?: 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 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}
+      ${kind === 'rectangle' || kind === 'ellipse'
+        ? this.renderCavity(body, e.axis)
+        : html`<div field>
+            <small>${i18next.t('figure.text.section-cavity-unavailable')}</small>
+          </div>`}
+    </section>`
+  }
+
+  private renderCorner(body: Body) {
+    const d = body.shape.dimensions
+    const reaches = Object.keys(d)
+      .filter(k => k.startsWith('corner.'))
+      .map(k => d[k])
+    const now = reaches.length ? sameOf(reaches) : 0
+    const max = cornerLimitOf(body.shape)
+    return html`<div field>
+      <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: 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=${(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.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, axis, end, cavity[end], request, cavityField))}`
+        : 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 field>
+      <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.
+   */
+  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
+        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
+          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) {
+    this.dispatchEvent(new CustomEvent('command', { detail: { action }, bubbles: true, composed: true }))
+  }
+}

package/client/modeller/gizmo.ts

@@ -1,13 +1,13 @@
-import { figureAttachmentsOf } from '@hatiolab/figure-model'
+import { figureAttachmentsOf, figureShapeProviderOf } from '@hatiolab/figure-model'
 import type { FigureAsset, FigureInputChange } from '@hatiolab/figure-model'
 
 /**
  * What the gizmo may write for a part: move · turn · size, on a asset.
  *
  * A drag can only be written back where the part is placed by its own numbers. A part the create commands made is:
- * its pose is `rigid@1` into the asset frame from `<part>.position.*` and `<part>.rotation.*`, and a box's shape
- * (`box-shape@1` or `rounded-box@1`) takes its width, height and depth from inputs of its own — `<part>.size.*` from
- * `addFigureBox`, `<part>.dimension.*` from the editor's shape palette. A part fastened to another, following an instance size or placed by
+ * its pose is `rigid@1` into the asset frame from `<part>.position.*` and `<part>.rotation.*`, and its shape takes its
+ * measures from inputs of its own — `<part>.size.*` from `addFigureBox`, `<part>.dimension.*` from the editor's shape
+ * palette — at the arguments the shape itself names (figure-model's provider). A part fastened to another, following an instance size or placed by
  * expressions has no such numbers; the gizmo does not offer what it could not write back, rather
  * than move something the next evaluation would put back.
  */
@@ -29,9 +29,6 @@ export interface GizmoReach {
   round?: { across: string[]; along: string[] }
 }
 
-/** Shapes whose first three arguments are the extent along X, Y and Z: a door frame's too (its width, height, depth). */
-const BOXES = new Set(['box-shape@1', 'rounded-box@1', 'portal-profile@2', 'hollow-box@2'])
-
 interface Node {
   id: string
   op: string
@@ -65,15 +62,28 @@ export function gizmoReachOf(asset: AssetLike, part: string): GizmoReach {
   const posed = direct || reseated
   const shape = nodes.find(node => node.id === `${part}.shape`)
   const mine = (ids: string[]) => ids.every(id => id.startsWith(`${part}.`) && design.has(id))
-  const round =
-    shape?.op === 'cylinder-shape@1' && mine(shape.args.slice(0, 2))
-      ? { across: [shape.args[0]!], along: [shape.args[1]!] }
-      : shape?.op === 'frustum-shape@1' && mine(shape.args.slice(0, 3))
-        ? { across: shape.args.slice(0, 2), along: [shape.args[2]!] }
-        : shape?.op === 'sphere-shape@1' && mine(shape.args.slice(0, 3))
-          ? { across: shape.args.slice(0, 3), along: [] }
-          : undefined
-  const extent = shape && BOXES.has(shape.op) ? shape.args.slice(0, 3) : []
+  /*
+    Which argument sizes the part along X, Y and Z: the shape says (figure-model's provider, ADR-0100) -- never its first
+    three arguments. A round section written from one radius, a sphere and a taper keep their shape: their radii take one
+    factor together.
+  */
+  const provider = shape ? figureShapeProviderOf(shape as never) : undefined
+  const edit = provider?.edit
+  const refOf = (axis: 'x' | 'y' | 'z') => {
+    const e = edit?.[axis]
+    return e && !('refused' in e) ? shape!.args[e.arg]! : undefined
+  }
+  const measures = AXES.map(refOf)
+  const shared = !!edit && AXES.some(axis => { const e = edit[axis]; return !('refused' in e) && !!(e.sameAs || e.with?.length) })
+  let round: GizmoReach['round']
+  if (shared && edit) {
+    const withs = AXES.flatMap(axis => { const e = edit[axis]; return !('refused' in e) ? (e.with ?? []).map(i => shape!.args[i]!) : [] })
+    const sphere = !!provider && Object.keys(provider.faces).length === 0
+    const across = [...new Set([refOf('x')!, ...withs])]
+    const along = sphere ? [] : [refOf('y')!]
+    if ([...across, ...along].every(id => id && mine([id]))) round = { across: sphere ? [...new Set([...across, refOf('y')!])] : across, along }
+  }
+  const extent = !round && measures.every(Boolean) ? (measures as string[]) : []
   const sizes =
     extent.length === 3 && extent.every(id => id.startsWith(`${part}.`) && design.has(id)) ? (extent as [string, string, string]) : undefined
   /*

package/client/modeller/joint-fan.ts

@@ -2,6 +2,7 @@ import { compileFigureAsset, compileFigureGraph, figureWorldBoxesOf, figureWrite
 import type { FigureAsset } from '@hatiolab/figure-model'
 
 import type { FigureRenderPart } from './renderer.js'
+import { sectionShape } from './drawn-shapes.js'
 
 /*
  * Where the selected part turns, and how far -- a translucent fan on the editing board. An axis name says nothing about which way a part swings; on a six-axis arm the author went to the preview and
@@ -249,14 +250,14 @@ export function jointFanOf(asset: FigureAsset, part: string, values: Record<stri
   const r = [0, 1, 2].map(i => [first[i]!, axisNow[i]!, zAxis[i]!])
   const local = (p: number[]) => {
     const v = sub(p, pivot)
-    return { x: dot(v, first), y: dot(v, zAxis) }
+    return { x: dot(v, first), z: dot(v, zAxis) }
   }
   const full = max - min >= 359.999
-  const profile = [...(full ? [] : [{ x: 0, y: 0 }]), ...traced.map(local)].map(p => ({ x: Math.round(p.x * 1000) / 1000, y: Math.round(p.y * 1000) / 1000 }))
+  const profile = [...(full ? [] : [{ x: 0, z: 0 }]), ...traced.map(local)].map(p => ({ x: Math.round(p.x * 1000) / 1000, z: Math.round(p.z * 1000) / 1000 }))
 
   return {
     id: JOINT_FAN,
-    shape: { provider: 'polygon', dimensions: { height: THICKNESS }, profile },
+    shape: sectionShape(profile, THICKNESS),
     pose: { t: pivot, r },
     material: { token: '__joint-fan', transparent: true },
     /** Which control turns it: the joint the fan shows. */