@things-factory/figure-ui 10.1.223 → 10.1.224

package/client/modeller/figure-links.ts

@@ -8,7 +8,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { figureFaceOverhangOf, figureMotionsOf, motionIdOf } from '@hatiolab/figure-model'
-import type { FigureAsset, FigureAuthoringAction, FigureFace } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureAuthoringAction, FigureBindingPlace, FigureFace } from '@hatiolab/figure-model'
 
 import {
   acceptsOf,
@@ -39,8 +39,17 @@ import {
   rowOf,
   positionsWorkedOut,
   type Axis,
-  type MotionForm
+  type MotionForm,
+  followOf,
+  followableAxes,
+  measureNow,
+  freshStateSize,
+  stateSizeIdFor,
+  stateSizeCommandOf,
+  stateSizeFixedOf,
+  type StateSizeForm
 } from './links.js'
+import { measureFactor } from './size-response.js'
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'
 import { insideAlignmentOf } from './fasten-geometry.js'
 import { fastenFormOf, fastenPlanOf, fastenSentenceOf } from './fasten-form.js'
@@ -179,7 +188,11 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   /** Why 정렬·간격 고치기 moved nothing, said under it; empty once it moved the part or the part changed. */
   @state() private fixNote = ''
   @state() private motion: MotionForm = freshMotion()
+  /* The form for a measure a control sets (「상태에 따라 크기」). */
+  @state() private stateSize: StateSizeForm = freshStateSize()
   @state() private place = freshPlace()
+  /** The id of the place the form changes, kept so the place keeps its id (a release refuses a place id that goes); null adds one. */
+  @state() private placeEditing: string | null = null
   /** 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()
@@ -204,6 +217,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       this.loadedFor = this.partId
       this.motion = freshMotion()
       this.place = freshPlace()
+      this.placeEditing = null
       this.row = freshRow()
       this.rowOpen = false
       this.rowCandidate = undefined
@@ -238,7 +252,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     if (!asset || !this.partId) return nothing
     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>`
+        ${this.renderMotion(asset)}${this.renderShown(asset)}${this.renderStateSize(asset)}</section>`
     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
@@ -306,6 +320,12 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     return shown
   }
 
+  /** A place on this part into the form, to change it under its own id. */
+  private editPlace(one: FigureBindingPlace) {
+    this.placeEditing = one.id
+    this.place = { role: one.role, face: one.face ?? 'top', label: one.label, accepts: (one.accepts ?? []).join(', '), capacity: one.capacity }
+  }
+
   /** Where things are held on this part: a seat things rest on, or a grip things are held in. */
   private renderPlaces(asset: FigureAsset) {
     const faces = placeFacesOf(asset, this.partId)
@@ -321,6 +341,9 @@ export class FigureLinks extends localize(i18next)(LitElement) {
             <b bound>${one.label}</b>
             <small>${one.face ? i18next.t('figure.label.face-' + one.face) + ' · ' : ''}${placeTerms(one, (key, params) => i18next.t(key, params))}</small>
           </span>
+          <button quiet edit-place ?disabled=${this.locked} @click=${() => this.editPlace(one)}>
+            <md-icon>edit</md-icon>${i18next.t('figure.button.edit-place')}
+          </button>
           <button quiet ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-binding', id: one.id })}>
             <md-icon>close</md-icon>${i18next.t('figure.button.remove-place')}
           </button>
@@ -345,28 +368,35 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         <span>${i18next.t('figure.label.place-name')}</span>
         <input .value=${p.label} placeholder=${roleName(p.role)} @change=${(e: Event) => (this.place = { ...p, label: (e.target as HTMLInputElement).value })} />
         <span>${i18next.t('figure.label.place-accepts')}</span>
-        <input .value=${p.accepts} placeholder="BOX, TOTE" @input=${(e: Event) => (this.place = { ...p, accepts: (e.target as HTMLInputElement).value })} />
+        <input .value=${p.accepts} placeholder=${i18next.t('figure.text.place-accepts-any')} @input=${(e: Event) => (this.place = { ...p, accepts: (e.target as HTMLInputElement).value })} />
         <span>${i18next.t('figure.label.place-capacity')}</span>
         <input type="number" min="1" step="1" .value=${String(p.capacity)} @change=${(e: Event) => (this.place = { ...p, capacity: (e.target as HTMLInputElement).valueAsNumber })} />
       </div>
-      ${accepts.length ? nothing : html`<small>${i18next.t('figure.text.place-accepts-needed')}</small>`}
       <button
         act
-        ?disabled=${this.locked || !accepts.length || !capacityOk}
-        @click=${() =>
+        ?disabled=${this.locked || !capacityOk}
+        @click=${() => {
           this.command({
             kind: 'add-binding',
-            id: placeIdFor(asset, this.partId, p.role),
+            id: this.placeEditing ?? placeIdFor(asset, this.partId, p.role),
             label: p.label.trim() || roleName(p.role),
             role: p.role,
             part: this.partId,
             face,
-            accepts,
-            capacity: p.capacity
-          })}
+            /* None named: it takes any item (ADR-0051 §4.1 decision 5). */
+            ...(accepts.length ? { accepts } : {}),
+            capacity: p.capacity,
+            ...(this.placeEditing ? { replace: true } : {})
+          })
+          this.placeEditing = null
+          this.place = freshPlace()
+        }}
       >
-        <md-icon>back_hand</md-icon>${i18next.t('figure.button.add-place')}
+        <md-icon>back_hand</md-icon>${i18next.t(this.placeEditing ? 'figure.button.save-place' : 'figure.button.add-place')}
       </button>
+      ${this.placeEditing
+        ? html`<button quiet @click=${() => ((this.placeEditing = null), (this.place = freshPlace()))}>${i18next.t('figure.button.cancel-place-edit')}</button>`
+        : nothing}
     `
   }
 
@@ -582,6 +612,94 @@ export class FigureLinks extends localize(i18next)(LitElement) {
    * When the part is drawn: always, or while a control is at least a value -- a lamp lit while the gate is open. One
    * part edit (`set-visibility`), one step. Offered once the figure has a control; a motion is what makes one.
    */
+  /**
+   * A measure a control sets (modeller snag C1, 2026-10-26): a wound roll shrinking to its core. Each measure that does is
+   * one line with the way back to a fixed number; the form makes another. Measures read as the size row shows them --
+   * a cylinder's X as its diameter.
+   */
+  private renderStateSize(asset: FigureAsset) {
+    const revision = this.revision
+    if (!revision) return nothing
+    const part = this.partId
+    const axes = followableAxes(asset, part)
+    if (!axes.length) return nothing
+    const word = (axis: Axis) => `${axis.toUpperCase()}${measureFactor(asset, part, axis) === 2 ? ' · ' + i18next.t('figure.label.size-diameter') : ''}`
+    const unitWord = (unit: string) => i18next.t(`figure.label.state-unit-${unit}`)
+    const sized = axes.flatMap(axis => {
+      const f = followOf(asset, part, axis)
+      return f.of === 'state' ? [{ axis, f }] : []
+    })
+    const free = axes.filter(axis => !sized.some(one => one.axis === axis))
+    const form = this.stateSize
+    const axis = form.axis && free.includes(form.axis) ? form.axis : free[0] ?? ''
+    const factor = axis ? measureFactor(asset, part, axis) : 1
+    const atMax = Number.isFinite(form.atMax) ? form.atMax : axis ? (measureNow(revision, part, axis) ?? NaN) : NaN
+    const id = form.id || stateSizeIdFor(asset, part)
+    const controls = visibilityControlsOf(asset)
+    const command = stateSizeCommandOf(asset, part, { ...form, axis, atMax }, factor, id)
+    /* A control already there is taken with its unit and range; another unit or range would be refused. */
+    const pickControl = (value: string) => {
+      const there = controls.find(c => c.id === value)
+      this.stateSize = there && ['percent', 'ratio', 'mm'].includes(there.unit)
+        ? { ...form, id: value, unit: there.unit as StateSizeForm['unit'], min: there.min, max: there.max }
+        : { ...form, id: value }
+    }
+    const number = (key: 'min' | 'max' | 'atMin' | 'atMax') => (e: Event) => (this.stateSize = { ...form, axis, [key]: (e.target as HTMLInputElement).valueAsNumber })
+    return html`<h4 state-size>${i18next.t('figure.label.state-size')}</h4>
+      ${sized.map(({ axis: one, f }) => {
+        const k = measureFactor(asset, part, one)
+        const input = controls.find(c => c.id === f.input)
+        return html`<div pair state-size-row=${one}>
+          <span>${word(one)}
+            <small>${i18next.t('figure.text.state-size-row', {
+              control: input?.label ?? f.input,
+              min: String(input?.min ?? ''),
+              max: String(input?.max ?? ''),
+              unit: input ? unitWord(input.unit) : '',
+              from: String(Math.round(f.at.min * k * 1000) / 1000),
+              to: String(Math.round(f.at.max * k * 1000) / 1000)
+            })}</small>
+          </span>
+          <button act ?disabled=${this.locked} @click=${() => {
+            const back = stateSizeFixedOf(asset, part, one)
+            if (back) this.command(back)
+          }}><md-icon>close</md-icon>${i18next.t('figure.button.state-size-fix')}</button>
+        </div>`
+      })}
+      ${free.length
+        ? html`<div form state-size-form>
+            <span>${i18next.t('figure.label.state-size-measure')}</span>
+            <select ?disabled=${this.locked} @change=${(e: Event) => (this.stateSize = { ...form, axis: (e.target as HTMLSelectElement).value as Axis, atMax: NaN })}>
+              ${free.map(one => html`<option value=${one} ?selected=${one === axis}>${word(one)}</option>`)}
+            </select>
+            <span>${i18next.t('figure.label.control-id')}</span>
+            <input list="state-size-controls" .value=${id} ?disabled=${this.locked} @change=${(e: Event) => pickControl((e.target as HTMLInputElement).value.trim())} />
+            <datalist id="state-size-controls">${controls.map(c => html`<option value=${c.id}>${c.label}</option>`)}</datalist>
+            <span>${i18next.t('figure.label.state-size-unit')}</span>
+            <select ?disabled=${this.locked} @change=${(e: Event) => {
+              const unit = (e.target as HTMLSelectElement).value as StateSizeForm['unit']
+              this.stateSize = { ...form, axis, unit, ...(unit === 'percent' ? { min: 0, max: 100 } : unit === 'ratio' ? { min: 0, max: 1 } : {}) }
+            }}>
+              ${(['percent', 'ratio', 'mm'] as const).map(u => html`<option value=${u} ?selected=${u === form.unit}>${unitWord(u)}</option>`)}
+            </select>
+            <span>${i18next.t('figure.label.control-range')} (${unitWord(form.unit)})</span>
+            <div pair>
+              <input type="number" step="any" .value=${String(form.min)} ?disabled=${this.locked} @change=${number('min')} />
+              <input type="number" step="any" .value=${String(form.max)} ?disabled=${this.locked} @change=${number('max')} />
+            </div>
+            <span>${i18next.t('figure.label.state-size-at-min')} (mm)</span>
+            <input type="number" step="any" min="0" state-size-at-min .value=${Number.isFinite(form.atMin) ? String(form.atMin) : ''} ?disabled=${this.locked} @change=${number('atMin')} />
+            <span>${i18next.t('figure.label.state-size-at-max')} (mm)</span>
+            <input type="number" step="any" min="0" state-size-at-max .value=${Number.isFinite(atMax) ? String(atMax) : ''} ?disabled=${this.locked} @change=${number('atMax')} />
+          </div>
+          <button act add-state-size ?disabled=${this.locked || !command} @click=${() => {
+            if (!command) return
+            this.command(command)
+            this.stateSize = freshStateSize()
+          }}><md-icon>open_in_full</md-icon>${i18next.t('figure.button.add-state-size')}</button>`
+        : nothing}`
+  }
+
   private renderShown(asset: FigureAsset) {
     const controls = visibilityControlsOf(asset)
     if (!controls.length) return nothing

package/client/modeller/figure-preview.ts

@@ -4,7 +4,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { compileFigureAsset } from '@hatiolab/figure-model'
 import type { FigureAsset, FigureDataRow, FigureDataValue, FigureGraphStateInput } from '@hatiolab/figure-model'
-import { create, registerFigure, unregisterFigure } from '@hatiolab/things-scene'
+import { create, figureLegendSourcesChanged, registerFigure, unregisterFigure } from '@hatiolab/things-scene'
 
 import { DEFAULT_VIEW, previewBoardDepth, sceneLook, WORKBENCH, type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js'
 import { dialShape } from './angle-dial.js'
@@ -33,7 +33,11 @@ interface SceneHandle {
   resize?: () => void
   fit?: (type?: string) => void
   /** The scene's container: it can make the content again while keeping the 3D renderer and the camera (undo and redo use it). */
-  rootContainer?: { rebuildContentModel?: (model: unknown, options?: { preserveThreeD?: boolean }) => void }
+  rootContainer?: {
+    rebuildContentModel?: (model: unknown, options?: { preserveThreeD?: boolean }) => void
+    /** The scene's legends, by name (ADR-0166 7): what its figures' tables choose from. */
+    style?: Record<string, unknown>
+  }
   root?: {
     set?: (patch: Record<string, unknown>) => void
     fitCameraToModel?: () => void
@@ -265,6 +269,8 @@ export class FigurePreview extends localize(i18next)(LitElement) {
   @state() private valuing: Record<string, FigureDataValue> = {}
   /** Data tried in the data tab: the preview's figures take it as their \`data\`, as a board's data source gives it; null when none is. */
   @property({ attribute: false }) sample: unknown = null
+  /** Sample legends by role (ADR-0166 10): the scene's legends named as the roles, as a board would give them. */
+  @property({ attribute: false }) legends: Record<string, unknown> = {}
   /** The part chosen in the editor. The size help starts on it, so the help speaks of the part the author was working on. */
   @property() selected = ''
   @state() private setupPart = ''
@@ -526,8 +532,17 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     if (this.sample !== null && this.sample !== undefined) this.tellData(this.sample)
   }
 
+  /** The sample legends as the scene's (its root container's, where a board's are): its tables choose again. */
+  private tellLegends() {
+    const container = this.scene?.rootContainer
+    if (!container) return
+    container.style = { ...this.legends }
+    figureLegendSourcesChanged()
+  }
+
   willUpdate(changed: Map<string, unknown>) {
     if (changed.has('sample') && this.scene) this.tellData(this.sample)
+    if (changed.has('legends') && this.scene) this.tellLegends()
     if (!this.hasUpdated) return
     if (!this.active) {
       this.stale = true
@@ -622,6 +637,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
           this.scene!.rootContainer!.rebuildContentModel!(model, { preserveThreeD: true })
           this.standing = signature
           this.cannot = ''
+          this.tellLegends()
           this.tellSample()
           return
         } catch {
@@ -633,6 +649,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       this.scene = create({
         target: this.stage,
         model,
+        style: { ...this.legends },
         mode: 0
       }) as SceneHandle
       this.standing = signature

package/client/modeller/figure-slot-layout-panel.ts

@@ -7,11 +7,13 @@ import { compileFigureAsset, type FigureAsset, type SlotLayout } from '@hatiolab
 
 import {
   anchorFacesOf,
+  anchorRoomOf,
   anchorIdFor,
   figureSlotIssues,
   slotLayoutCommandOf,
   slotLayoutFormOf,
   slotPresetsOf,
+  startSizeOf,
   type SlotAnchor,
   type SlotAnchorFace,
   type SlotLayoutForm
@@ -170,13 +172,15 @@ export class FigureSlotLayoutPanel extends localize(i18next)(LitElement) {
     const value = {
       canUseDefault: false,
       presets: slotPresetsOf(form.anchors),
-      /* The first anchor's face is the size a preset is laid out over; the slot height is the author's. */
-      presetSize: anchorFaces[form.anchors[0]?.id ?? ''] ?? {},
+      /* The first anchor's face is the size a preset is laid out over, the room over it the slot height: no number to type. */
+      presetSize: startSizeOf(form.anchors, anchorFaces, anchorRoomOf(form.anchors, geometry)),
+      /* No layout yet: the whole face is one slot, shown at once and put in on Apply. */
+      startFrom: 'single',
       anchors: form.anchors.map(a => ({ id: a.id, label: `${a.id} · ${a.part} ${i18next.t('figure.label.face-' + a.face)}` })),
       anchorFaces,
       validate: (layout: SlotLayout) => figureSlotIssues(layout, form.anchors.map(a => a.id)),
       issueText: (issue: { code: string; path: string }) =>
-        issue.code === 'ACCEPTS_REQUIRED' ? `${issue.path}: ${i18next.t('figure.text.slot-accepts-required')}` : undefined
+        issue.code === 'ACCEPTS_EMPTY' ? `${issue.path}: ${i18next.t('figure.text.slot-accepts-empty-list')}` : undefined
     }
     this.options = { key, asset, value }
     return value

package/client/modeller/links.ts

@@ -163,6 +163,9 @@ export function partSummaryOf(
     } else if (f.of === 'input') {
       key = 'figure.text.summary-size-input'
       params = { field: fieldWordsOf(f.input, k => say(k)) }
+    } else if (f.of === 'state') {
+      key = 'figure.text.summary-size-state'
+      params = { control: f.input }
     } else key = 'figure.text.summary-size-worked-out'
     const id = key + JSON.stringify(params)
     lines.set(id, { key, params, axes: [...(lines.get(id)?.axes ?? []), axis] })
@@ -729,6 +732,8 @@ export function followWordsOf(follow: Follow, say: (key: string, params?: Record
       return say('figure.label.follows-part-axis', { part: follow.part, axis: follow.axis.toUpperCase() })
     case 'input':
       return follow.input
+    case 'state':
+      return say('figure.label.follows-state', { control: follow.input })
     case 'expression':
       return say('figure.label.follows-expression')
   }
@@ -744,6 +749,8 @@ export function choiceOf(follow: Follow): string {
       return `part:${follow.part}:${follow.axis}`
     case 'input':
       return `input:${follow.input}`
+    case 'state':
+      return `state:${follow.input}`
     case 'expression':
       return 'expression'
   }
@@ -863,3 +870,54 @@ export function turnsAboutAJoint(asset: FigureAsset): boolean {
 
 /** The joint made still: its fastening, its place and its row kept, its motion gone (the kernel's `figureJointAsFixed`, ADR-0140 D6). */
 export const fixedJointOf = figureJointAsFixed
+
+/** The form that sets a measure by a control (「상태에 따라 크기」): which measure, the control, and the measure at its two ends. */
+export interface StateSizeForm {
+  axis: Axis | ''
+  id: string
+  unit: 'percent' | 'ratio' | 'mm'
+  min: number
+  max: number
+  /** The measure at the control's least and most, as the size row shows it (a cylinder's diameter). */
+  atMin: number
+  atMax: number
+}
+
+export const freshStateSize = (): StateSizeForm => ({ axis: '', id: '', unit: 'percent', min: 0, max: 100, atMin: NaN, atMax: NaN })
+
+/** The control a new one would be named: `fill`, then `<part>-fill` when that is taken by another kind of value. */
+export function stateSizeIdFor(asset: FigureAsset, part: string): string {
+  const taken = modelOf(asset).inputs.find(i => i.id === 'fill')
+  return !taken || taken.role === 'state' ? 'fill' : `${part}-fill`
+}
+
+/**
+ * The command the form sends, or why it cannot: a control with a range, and a positive measure at each end. The
+ * measure is typed as the row shows it and sent as the part's own (a diameter halved). A measure that follows something
+ * else is replaced: the author chose this one.
+ */
+export function stateSizeCommandOf(asset: FigureAsset, part: string, form: StateSizeForm, factor: number, id: string): FigureAuthoringAction | undefined {
+  if (!form.axis || !id) return undefined
+  if (!(Number.isFinite(form.min) && Number.isFinite(form.max) && form.max > form.min)) return undefined
+  if (!(form.atMin > 0 && form.atMax > 0)) return undefined
+  const following = followOf(asset, part, form.axis).of !== 'own'
+  return {
+    kind: 'size-by-state',
+    part,
+    axis: form.axis,
+    state: { id, unit: form.unit, min: form.min, max: form.max },
+    at: { min: form.atMin / factor, max: form.atMax / factor },
+    ...(following ? { replace: true } : {})
+  }
+}
+
+/** A measure a control sets, back to a fixed number: the one it has where its control rests. */
+export function stateSizeFixedOf(asset: FigureAsset, part: string, axis: Axis): FigureAuthoringAction | undefined {
+  const f = followOf(asset, part, axis)
+  if (f.of !== 'state') return undefined
+  const input = modelOf(asset).inputs.find(i => i.id === f.input)
+  if (!input || input.min === undefined || input.max === undefined) return undefined
+  const rest = asset.stateDefaults[f.input] ?? input.max
+  const mm = f.at.min + ((f.at.max - f.at.min) * (rest - input.min)) / (input.max - input.min)
+  return { kind: 'unlink-dimension', part, axis, mm: Math.round(mm * 1e6) / 1e6 }
+}

package/client/modeller/refusals.ts

@@ -269,10 +269,18 @@ export function dataMotionRefusalOf(error: unknown, say: Say): string | null {
       high: domain.within ? numberOf(domain.within[1]) : '',
       value: domain.value === undefined ? '' : String(domain.value)
     })
-  const port = detailsOf(error, 'data-port-invalid')
-  if (port) return say('figure.text.data-port-invalid-' + port.what, { port: port.port, id: port.id ?? '' })
-  const bound = detailsOf(error, 'data-port-bound')
-  if (bound) return say('figure.text.data-port-bound', { port: bound.port, bindings: bound.bindings.join(', ') })
+  const target = detailsOf(error, 'data-table-target')
+  if (target) return say('figure.text.data-table-target-' + target.what, { binding: target.binding, id: target.id ?? '' })
+  const entry = detailsOf(error, 'data-table-entry')
+  if (entry)
+    return say('figure.text.data-table-entry-' + entry.what, {
+      binding: entry.binding,
+      key: entry.key === 'default' ? say('figure.label.data-otherwise', {}) : entry.key,
+      id: entry.id ?? '',
+      value: entry.value === undefined ? '' : String(typeof entry.value === 'object' ? JSON.stringify(entry.value) : entry.value)
+    })
+  const legend = detailsOf(error, 'data-legend-invalid')
+  if (legend) return say('figure.text.data-legend-invalid', { role: legend.role })
   const clipAbsent = detailsOf(error, 'motion-clip-absent')
   if (clipAbsent) return say('figure.text.motion-clip-absent', { clip: clipAbsent.clip, group: clipAbsent.group })
   const shared = detailsOf(error, 'motion-clip-shared')

package/client/modeller/slot-layout-host.ts

@@ -9,12 +9,15 @@
  * Kept free of Lit, i18n and the editor's element so node tests read it directly.
  */
 import {
+  figureBindingsOf,
+  figureShapeBoundsOf,
   figureSlotLayoutOf,
   figureSlotLayoutIssues,
   slotLayoutPreset,
   SLOT_LAYOUT_PRESET_KEYS,
   SLOT_LAYOUT_PRESET_PARAMS,
   type FigureAsset,
+  type FigureFace,
   type SlotLayout,
   type SlotPresetSize
 } from '@hatiolab/figure-model'
@@ -46,8 +49,28 @@ export function slotLayoutFormOf(asset: FigureAsset, part: string): { form: Slot
   return { form: { label: '', role: 'seat', anchors: part ? [{ id: part, part, face: 'top' }] : [] } }
 }
 
-/** How big each anchor's face is: things-scene's, the one a board's placed figure is measured with too. */
-export { figureAnchorFacesOf as anchorFacesOf } from '@hatiolab/things-scene'
+/** How big each anchor's face is, and the room the figure leaves over it: things-scene's, the ones a board's placed figure is measured with too. */
+export { figureAnchorFacesOf as anchorFacesOf, figureAnchorRoomOf as anchorRoomOf } from '@hatiolab/things-scene'
+import { figureAnchorRoomOf } from '@hatiolab/things-scene'
+
+/* How high a place over a face is when nobody said: the room the figure leaves over it, else the face's shorter side. */
+const heightOver = (room: number | undefined, width: number, depth: number) => ((room ?? 0) > 0 ? room! : Math.min(width, depth))
+
+/**
+ * Where an author starts with no numbers to type (slot layout drawn on the face, step 1): the first anchor's face, and a
+ * slot as high as the room the figure leaves over it (a forklift's forks: up to its mast) -- the face's shorter side when
+ * the face is the figure's top. Nothing when the face is not known: the editor then asks for the size.
+ */
+export function startSizeOf(
+  anchors: readonly SlotAnchor[],
+  faces: Record<string, { width: number; depth: number }>,
+  room: Record<string, number>
+): Partial<SlotPresetSize> {
+  const first = anchors[0]
+  const face = first && faces[first.id]
+  if (!face) return {}
+  return { width: face.width, depth: face.depth, slotHeight: heightOver(room[first.id], face.width, face.depth) }
+}
 
 /**
  * Where an author starts: the equipment presets (figure-model, ADR-0118 decision 8), laid out on this figure's anchors --
@@ -67,13 +90,13 @@ export function slotPresetsOf(anchors: readonly SlotAnchor[]) {
 }
 
 /*
- * What figure-model asks beyond the editor's own checks: every slot names the types it takes (ADR-0118 decision 5) -- the
- * editor's "any type" is a board's, not a figure's. The kernel's own check (`figureSlotLayoutIssues`, the one a
+ * What figure-model asks beyond the editor's own checks: a slot names the types it takes or takes any item, never an
+ * empty list (ADR-0051 §4.1 decision 5, 2026-10-27). The kernel's own check (`figureSlotLayoutIssues`, the one a
  * placement's override is held to as well), said before Apply rather than refused after it; the editor already shows the
  * common findings, so only the figure's own are added.
  */
 export function figureSlotIssues(layout: SlotLayout, anchors: readonly string[] = layout.tiers.map(t => t.anchorId)): SlotEditorIssue[] {
-  return figureSlotLayoutIssues(layout, anchors).filter(issue => issue.code === 'ACCEPTS_REQUIRED')
+  return figureSlotLayoutIssues(layout, anchors).filter(issue => issue.code === 'ACCEPTS_EMPTY')
 }
 
 /** The command the panel sends: the whole layout, its anchors and its name, as one step of the history. */
@@ -97,6 +120,8 @@ export function anchorIdFor(part: string, taken: readonly string[]): string {
 
 /* The token the canvas draws slots in: translucent, never picked, never saved. */
 export const SLOT_MARK = '__slot'
+/* The token the selected part's places are drawn in: the same box, in the primary colour, so the list and the canvas meet. */
+export const SLOT_MARK_CHOSEN = '__slot_chosen'
 
 type Evaluated = { id: string; pose: { r: number[][]; t: number[] }; region: { dimensions: number[] } | null }
 
@@ -126,3 +151,49 @@ export function slotMarksOf(places: readonly Evaluated[], layout: SlotLayout | u
   }
   return marks
 }
+
+/* Which way each face looks out of its part: the axis and the side. */
+const OUTWARD: Record<FigureFace, ['x' | 'y' | 'z', 1 | -1]> = { top: ['y', 1], bottom: ['y', -1], right: ['x', 1], left: ['x', -1], front: ['z', 1], back: ['z', -1] }
+/* The two axes a face lies along. */
+const ACROSS = { x: ['y', 'z'], y: ['x', 'z'], z: ['x', 'y'] } as const
+
+type Body = { id: string; shape?: Parameters<typeof figureShapeBoundsOf>[0]; pose?: { r: number[][]; t: number[] } }
+
+/**
+ * The places held one by one -- a forklift's fork, a lift's plate -- drawn where they are, as the slot layout's are: a
+ * place given a size as a box of that size out of its face, one without as its part's face raised as high as a slot
+ * would start there (the room over it, else the face's shorter side), so an author sees which face things sit on or
+ * hang from and about how much room they have. The selected part's places in the primary colour.
+ */
+export function placeMarksOf(places: readonly Evaluated[], asset: FigureAsset, geometry: readonly Body[], selected?: string) {
+  const at = new Map(places.map(p => [p.id, p] as const))
+  const marks: FigureRenderPart[] = []
+  for (const one of figureBindingsOf(asset)) {
+    const p = at.get(one.id)
+    if (one.slot || !one.face || !p) continue
+    const [axis, side] = OUTWARD[one.face]
+    const [u, v] = ACROSS[axis]
+    let size: Record<'x' | 'y' | 'z', number>
+    if (one.region) size = one.region
+    else {
+      const shape = geometry.find(g => g.id === one.part)?.shape
+      if (!shape) continue
+      const b = figureShapeBoundsOf(shape)
+      const face = { x: b.x.max - b.x.min, y: b.y.max - b.y.min, z: b.z.max - b.z.min }
+      const room = axis === 'y' ? figureAnchorRoomOf([{ id: one.id, part: one.part!, face: one.face }], geometry as never)[one.id] : 0
+      size = { ...face, [axis]: heightOver(room, face[u], face[v]) }
+    }
+    const out = size[axis]
+    marks.push({
+      id: `${SLOT_MARK}:${one.id}`,
+      shape: {
+        provider: 'extrude',
+        dimensions: { width: size.x, height: size.y, depth: size.z },
+        extrusion: { axis, section: { kind: 'rectangle', size: { [u]: size[u], [v]: size[v] } }, start: side > 0 ? 0 : -out, end: side > 0 ? out : 0 }
+      },
+      pose: p.pose,
+      material: { token: one.part === selected ? SLOT_MARK_CHOSEN : SLOT_MARK, transparent: true }
+    })
+  }
+  return marks
+}

package/dist-client/modeller/canvas.js

@@ -5,7 +5,7 @@ import { create, Model, niceGridStep } from '@hatiolab/things-scene';
 import { DEFAULT_VIEW, sceneLook, WORKBENCH } from '@things-factory/figure-viewer/dist-client/figure-view.js';
 import { boardFor, changedKeys, componentOf, gizmoResultOf, needsRefit } from './stage-model.js';
 import { JOINT_FAN } from './joint-fan.js';
-import { SLOT_MARK } from './slot-layout-host.js';
+import { SLOT_MARK, SLOT_MARK_CHOSEN } from './slot-layout-host.js';
 import { PREVIEW, TARGET_FACE } from './command-preview.js';
 import { ownerOf } from './fields.js';
 /* How long the figure stands still before the camera judges whether to follow it. */
@@ -225,7 +225,7 @@ let FigureCanvas = class FigureCanvas extends LitElement {
         /* The fan in the accent colour, translucent; `capturable: false` keeps clicks, the marquee and the gizmo off it. */
         const fan = this.fan ? componentOf(this.fan, { ...this.palette, [JOINT_FAN]: this.palette['palette.accent'] ?? FAN_COLOUR }, this.board) : null;
         const accent = this.palette['palette.accent'] ?? FAN_COLOUR;
-        const slots = this.marks.map(part => componentOf(part, { ...this.palette, [SLOT_MARK]: this.palette['palette.secondary'] ?? accent }, this.board));
+        const slots = this.marks.map(part => componentOf(part, { ...this.palette, [SLOT_MARK]: this.palette['palette.secondary'] ?? accent, [SLOT_MARK_CHOSEN]: this.palette['palette.primary'] ?? accent }, this.board));
         const shown = [...(fan ? [fan] : []), ...slots, ...this.ghost.map(part => componentOf(part, { ...this.palette, [PREVIEW]: accent, [TARGET_FACE]: accent }, this.board)), ...(this.highlight ? [componentOf(this.highlight, { ...this.palette, [TARGET_FACE]: accent }, this.board)] : [])];
         return [...parts, ...shown.filter((c) => !!c).map(c => ({ ...c, capturable: false, locked: true }))];
     }