@things-factory/figure-ui 10.1.224 → 10.1.226

package/client/modeller/consumer-capabilities.ts

@@ -7,6 +7,7 @@
 import { isFigureConsumerCapability } from '@hatiolab/figure-model'
 import type { FigureAsset } from '@hatiolab/figure-model'
 import { figureCapabilityDescriptors, type FigureCapabilityDescriptor, type FigureCapabilitySetting } from '@hatiolab/things-scene'
+import { RUNGS, type Rung } from '@things-factory/figure-viewer/dist-client/capability-rung.js'
 
 /** The products' capabilities this modeller knows: registered descriptors with a namespaced name. */
 export const consumerDescriptors = (): FigureCapabilityDescriptor[] => figureCapabilityDescriptors().filter(d => isFigureConsumerCapability(d.name))
@@ -24,6 +25,20 @@ export function needsMissing(descriptor: FigureCapabilityDescriptor, asset: Figu
   return descriptor.needs.filter(need => (Array.isArray(need) ? !need.some(has) : !has(need as string))).map(need => (Array.isArray(need) ? need.join(' | ') : (need as string)))
 }
 
+/**
+ * What a product's capability needs that the figure lacks, as the tab offers it: the item tag, and the rungs that would
+ * give the names it needs (Holdable | FlowNode and Capacity | FlowNode: hold or flow). Its own names are not shown to the
+ * author (sweep 2026-10-27 U19); `names` keeps a need no rung gives.
+ */
+export function needsOffered(descriptor: FigureCapabilityDescriptor, asset: FigureAsset): { item: boolean; rungs: Rung[]; names: string[] } {
+  const missing = needsMissing(descriptor, asset)
+  const groups = descriptor.needs.filter(need => need !== 'item').map(need => (Array.isArray(need) ? need : [need as string]))
+  const gives = (rung: Rung) => groups.every(group => group.some(name => (RUNGS[rung] as readonly string[]).includes(name)))
+  const lacking = missing.filter(m => m !== 'item')
+  const rungs = lacking.length ? (['hold', 'flow'] as const).filter(gives) : []
+  return { item: missing.includes('item'), rungs, names: lacking.length && !rungs.length ? lacking : [] }
+}
+
 /** The names with a product's capability put on or taken off; the shared ones as they are. */
 export function namesWith(asset: FigureAsset, name: string, on: boolean): string[] {
   const names = asset.document.capabilities.names ?? []

package/client/modeller/editor-styles.ts

@@ -19,7 +19,8 @@ export const EditorStyles = css`
   /* The bar over the work is ox-canvas-bar (ADR-0060 decision 8): the folds at its edges, undo, redo and
      fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */
   ox-canvas-bar button[mode] {
-    height: 28px;
+    /* The bar's height, beside its 32px icons and the save (sweep 2026-10-27 U25). */
+    height: 32px;
     border: 1px solid transparent;
     padding: 0 10px;
     border-radius: 999em;
@@ -207,6 +208,22 @@ export const EditorStyles = css`
     margin-top: 4px;
     color: var(--md-sys-color-on-surface-variant);
   }
+  div[start] button[start-more] {
+    display: block;
+    text-align: left;
+    margin: 4px 0 0;
+    padding: 0;
+    font: inherit;
+    font-size: var(--ui-t-small);
+    color: var(--md-sys-color-primary);
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  /* No rule under the last way to start: it closed nothing (sweep 2026-10-27 U23). */
+  div[start-paths] > section:last-of-type {
+    border-bottom: none;
+  }
   /* The side: tabs over one panel at a time, each using the whole height. */
   /*
     The side's words at the panel's size (side-panel-styles: titles body, the rest small). The editor's host is at body
@@ -339,11 +356,12 @@ export const EditorStyles = css`
     min-height: 0;
     overflow: auto;
   }
-  /* Which part the panel speaks of. */
+  /* Which part the panel speaks of. Above z-index 1: a chip's label (md-filter-chip) sits at 1 and, coming later, was
+     drawn over it when the panel scrolled (sweep 2026-10-27 U2). */
   div[subject] {
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: 2;
     display: grid;
     gap: 4px;
     padding: 10px 12px;

package/client/modeller/editor.ts

@@ -1,5 +1,7 @@
 import { LitElement, html, nothing, type PropertyValues } from 'lit'
 import { i18next } from '@operato/i18n'
+import { isMacOS } from '@operato/utils'
+import { unitWord } from './unit-words.js'
 import type { OxThreePane } from '@operato/layout'
 import '@operato/layout'
 import { openPopup } from '@operato/layout'
@@ -887,6 +889,14 @@ export class FigureEditor extends LitElement {
         <summary><h3>${i18next.t('figure.label.group-more')}</h3></summary>
         <div more-body>
           ${tools ? html`<div group-fields>${tools}</div>` : nothing}
+          <figure-material-panel
+            show="more"
+            .body=${{ ...part, id: this.selected }}
+            .palette=${palette}
+            ?locked=${unavailable}
+            @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
+            @part-live=${(e: CustomEvent) => this.hold({}, e.detail.edit)}
+          ></figure-material-panel>
           <figure-section-panel
             embedded
             .body=${{ ...part, id: this.selected }}
@@ -898,14 +908,6 @@ export class FigureEditor extends LitElement {
             @command-live=${(e: CustomEvent) => this.holdAction(e.detail.action)}
             @section-editor-open=${() => (this.sectionEditing = this.selected)}
           ></figure-section-panel>
-          <figure-material-panel
-            show="more"
-            .body=${{ ...part, id: this.selected }}
-            .palette=${palette}
-            ?locked=${unavailable}
-            @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
-            @part-live=${(e: CustomEvent) => this.hold({}, e.detail.edit)}
-          ></figure-material-panel>
         </div>
       </details>
     </section>`
@@ -1143,7 +1145,7 @@ export class FigureEditor extends LitElement {
       ${title('figure.text.board-size-range-explained')}
       ${(['x', 'y', 'z'] as const).map(
         axis => html`<div inline-field>
-          <label>${i18next.t('figure.label.resize-' + axis)} <span unit>mm</span></label>
+          <label>${i18next.t('figure.label.resize-' + axis)} <span unit>(mm)</span></label>
           <div pair range>
             ${(['min', 'max'] as const).map(
               (bound, i) => html`${i ? html`<span dash aria-hidden="true">–</span>` : nothing}<input
@@ -1279,7 +1281,7 @@ export class FigureEditor extends LitElement {
       <div inline-field><label>${i18next.t('figure.label.repeat-axis')}</label>${axes.length ? html`<select aria-label=${i18next.t('figure.label.repeat-axis')} ?disabled=${unavailable} .value=${live(axis)} @change=${(e: Event) => update({ axis: (e.target as HTMLSelectElement).value.toUpperCase() as 'X' | 'Y' | 'Z' })}>${axes.map(a => html`<option value=${a} ?selected=${a === axis}>${a.toUpperCase()}</option>`)}</select>` : html`<span value>${axis.toUpperCase()}</span>`}</div>
       <div inline-field><label>${i18next.t('figure.label.repeat-count')}</label>${!fits && record ? html`<input type="number" min="1" step="1" aria-label=${i18next.t('figure.label.repeat-count')} .value=${live(String(repeat.count))} ?disabled=${unavailable} @change=${(e: Event) => update({ count: (e.target as HTMLInputElement).valueAsNumber })}>` : html`<span value>${repeat.count}</span>`}</div>
       <div inline-field>
-        <label>${i18next.t('figure.label.repeat-gap')} <span unit>mm</span></label>
+        <label>${i18next.t('figure.label.repeat-gap')} <span unit>(mm)</span></label>
         ${fits ? html`<input
           type="number"
           step="any"
@@ -1371,8 +1373,8 @@ export class FigureEditor extends LitElement {
       </label>
       ${open
         ? html`<div inline-field><label>${i18next.t('figure.label.board-name')}</label><input aria-label="figure.label.board-name" .value=${form!.label} @change=${edit('label')} /></div>
-            <div inline-field><label>${i18next.t('figure.label.least')} <span unit>mm</span></label><input type="number" step="any" aria-label="figure.label.least" .value=${String(form!.min)} @change=${edit('min')} /></div>
-            <div inline-field><label>${i18next.t('figure.label.most')} <span unit>mm</span></label><input type="number" step="any" aria-label="figure.label.most" .value=${String(form!.max)} @change=${edit('max')} /></div>
+            <div inline-field><label>${i18next.t('figure.label.least')} <span unit>(mm)</span></label><input type="number" step="any" aria-label="figure.label.least" .value=${String(form!.min)} @change=${edit('min')} /></div>
+            <div inline-field><label>${i18next.t('figure.label.most')} <span unit>(mm)</span></label><input type="number" step="any" aria-label="figure.label.most" .value=${String(form!.max)} @change=${edit('max')} /></div>
             <button act publish-pitch ?disabled=${unavailable || !form!.label.trim()} @click=${() => run(steps())}>
               <md-icon>${listed ? 'check' : 'ios_share'}</md-icon>${i18next.t(listed ? 'figure.button.apply' : 'figure.button.publish-input')}
             </button>`
@@ -1601,9 +1603,12 @@ export class FigureEditor extends LitElement {
   }
   /** A side tab says what it is in words under its icon: the icons alone had to be learnt (designer 2026-09-27, U05). */
   private renderTab(tab: SideTab, icon: string, label: string) {
-    /* Its accessible name is the name it shows (designer 2026-09-27); the longer title stays as its tooltip. */
-    const name = i18next.t(tab === 'response' && this.selected ? 'figure.label.tab-arrangement' : 'figure.label.tab-short-' + tab)
-    return html`<button tab ?on=${this.tab === tab} title=${tab === 'response' && this.selected ? name : label} aria-label=${name} @click=${() => (this.tab = tab)}>
+    /*
+      Its accessible name is the name it shows (designer 2026-09-27); the longer title stays as its tooltip. One name
+      whatever is picked: the size tab was 「반응형」 with nothing picked and 「배치」 with a part (sweep 2026-10-27 J2).
+    */
+    const name = i18next.t('figure.label.tab-short-' + tab)
+    return html`<button tab ?on=${this.tab === tab} title=${label} aria-label=${name} @click=${() => (this.tab = tab)}>
       <md-icon>${icon}</md-icon><span tab-label aria-hidden="true">${name}</span>
     </button>`
   }
@@ -1700,7 +1705,13 @@ export class FigureEditor extends LitElement {
               </button>`
             )}
           </div>
-          <small>${i18next.t('figure.text.start-shape-more')}</small>
+          ${this.panes?.foldStart
+            ? /* The list it points to is folded at this width: a way to it, not words about a list not there (sweep 2026-10-27 U23). */
+              html`<button start-more @click=${() => {
+                this.panes!.foldStart = false
+                this.requestUpdate()
+              }}>${i18next.t('figure.button.start-shape-more')}</button>`
+            : html`<small>${i18next.t('figure.text.start-shape-more')}</small>`}
         </section>
         ${this.aiDraft
           ? html`<section>
@@ -1708,7 +1719,6 @@ export class FigureEditor extends LitElement {
               <button start-button start-ai @click=${() => this.dispatchEvent(new CustomEvent('ask-ai-draft', { bubbles: true, composed: true }))}>
                 ${i18next.t('figure.button.start-ai')}
               </button>
-              <small>${i18next.t('figure.text.start-ai-optional')}</small>
             </section>`
           : nothing}
       </div>
@@ -1789,8 +1799,8 @@ export class FigureEditor extends LitElement {
     return html`<ox-canvas-bar
         history
         fit
-        undo-shortcut="Ctrl+Z"
-        redo-shortcut="Ctrl+Y"
+        undo-shortcut=${isMacOS() ? '⌘Z' : 'Ctrl+Z'}
+        redo-shortcut=${isMacOS() ? '⇧⌘Z' : 'Ctrl+Y'}
         ?can-undo=${!unavailable && view.canUndo}
         ?can-redo=${!unavailable && view.canRedo}
         .pane=${this.panes}
@@ -1822,7 +1832,7 @@ export class FigureEditor extends LitElement {
         >
           <md-icon>publish</md-icon>${i18next.t('figure.button.release')}
         </button>
-        <button slot="commit" save ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}><md-icon>save</md-icon>${i18next.t('figure.button.save')}</button>
+        <button slot="commit" save title=${!view.id && !view.geometry.length ? i18next.t('figure.text.save-needs-a-part') : ''} ?disabled=${unavailable || (!view.dirty && !!view.id) || (!view.id && !view.geometry.length)} @click=${this.save}><md-icon>save</md-icon>${i18next.t('figure.button.save')}</button>
       </ox-canvas-bar>
       ${this.blockersOpen && blockers.length ? this.renderReleaseBlockers(blockers, asset) : nothing}
       ${this.catalogOpen
@@ -1914,7 +1924,7 @@ export class FigureEditor extends LitElement {
             ${this.renderTab('motion', 'animation', i18next.t('figure.label.motion'))}
             ${this.renderTab('capability', 'conveyor_belt', i18next.t('figure.label.tab-capability'))}
             ${this.renderTab('data', 'sensors', i18next.t('figure.label.tab-data'))}
-            ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'))}
+            ${this.renderTab('verdict', 'insights', i18next.t('figure.label.tab-verdict'))}
           </div>
           <slot name="notice"></slot>
           <div panel ?off=${tab !== 'properties'}>
@@ -1943,7 +1953,9 @@ export class FigureEditor extends LitElement {
                     @part-live=${(e: CustomEvent) => this.hold({}, e.detail.edit)}
                   ></figure-material-panel>
                   ${this.renderMore(part, view.palette ?? {}, unavailable)}`
-              : view.geometry.length === 0
+              : view.loading || !view.context
+                ? nothing
+                : view.geometry.length === 0
                 ? html`${this.renderSubject()}<section empty-figure>
                     <p>${i18next.t('figure.text.empty-figure-next')}</p>
                     <details>
@@ -2039,18 +2051,19 @@ export class FigureEditor extends LitElement {
       return v === undefined || !Number.isFinite(v) ? '—' : String(Math.round(v * 10) / 10)
     }
     return html`<div vector-row>
-      <label>${i18next.t('figure.label.group-' + group.name)}${group.name === 'rotation' ? '' : html` <span unit>${unit}</span>`}</label>
+      <label>${i18next.t('figure.label.group-' + group.name)}${group.name === 'rotation' ? '' : html` <span unit>(${unit})</span>`}</label>
       <div triple>
         ${(['x', 'y', 'z'] as const).map(
           axis => !group.cells[axis]
             ? html`<div cell held title=${i18next.t('figure.text.axis-held-by-rule')}>
                 <span axis>${axis.toUpperCase()}</span>
-                <input type="text" readonly .value=${given(axis)} aria-label=${`${group.name}.${axis} · ${i18next.t('figure.text.axis-held-by-rule')}`} />
+                <input type="text" readonly .value=${given(axis)} data-field=${`${group.name}.${axis}`} aria-label=${`${i18next.t('figure.label.group-' + group.name)} ${axis.toUpperCase()} · ${i18next.t('figure.text.axis-held-by-rule')}`} />
               </div>`
             : html`<div cell>
             <span axis ?scrub=${!unavailable} @pointerdown=${(e: PointerEvent) => this.scrub(group.cells[axis] as never, e, unavailable)}>${axis.toUpperCase()}</span>
             <input
-              aria-label=${group.cells[axis]!.id}
+              data-field=${group.cells[axis]!.id}
+              aria-label=${`${i18next.t('figure.label.group-' + group.name)} ${axis.toUpperCase()}`}
               type="number"
               step="any"
               .value=${String(group.cells[axis]!.value)}
@@ -2085,9 +2098,10 @@ export class FigureEditor extends LitElement {
   }
   private renderSingle(name: string, field: FieldLike, unavailable: boolean) {
     const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }))
-    return html`<span ?scrub=${!unavailable} @pointerdown=${(e: PointerEvent) => this.scrub(field as never, e, unavailable)}>${words.join(' · ')} (${field.unit})</span
+    return html`<span ?scrub=${!unavailable} @pointerdown=${(e: PointerEvent) => this.scrub(field as never, e, unavailable)}>${words.join(' · ')} (${unitWord(field.unit)})</span
       ><input
-        aria-label=${field.id}
+        data-field=${field.id}
+        aria-label=${words.join(' · ')}
         type="number"
         step="any"
         .value=${String(field.value)}

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

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
 
 import { i18next, localize } from '@operato/i18n'
+import { unitWord } from './unit-words.js'
 import { figureBindingsOf } from '@hatiolab/figure-model'
 import type { FigureAsset } from '@hatiolab/figure-model'
 import { RUNGS, rungOf, type Rung } from '@things-factory/figure-viewer/dist-client/capability-rung.js'
@@ -15,6 +16,7 @@ import {
   inputTableAt,
   namesWith,
   needsMissing,
+  needsOffered,
   partsAt,
   settingsIssues,
   settingsOf,
@@ -50,6 +52,12 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
       border-radius: 8px;
       cursor: pointer;
     }
+    /* The box keeps its size beside a long note: squeezed by the flex row it read as a dot (sweep 2026-10-27 U1). */
+    label[rung] > input,
+    label[item] > input {
+      flex: none;
+      margin: 2px 0 0;
+    }
     label[rung][on],
     label[item][on] {
       border-color: var(--md-sys-color-primary);
@@ -135,7 +143,8 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
     const names = asset.document.capabilities.names ?? []
     const rung = rungOf(names)
     const places = figureBindingsOf(asset)
-    return html`<section>
+    return html`${this.renderItem(asset)}
+      <section>
       <h3>${i18next.t('figure.label.what-this-does')}</h3>
       ${(['none', 'hold', 'flow'] as const).map(
         which => html`<label rung ?on=${rung === which}>
@@ -147,10 +156,18 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
         </label>`
       )}
       ${rung === null ? html`<p hint>${i18next.t('figure.text.capability-hand-written')}</p>` : nothing}
-      ${names.length ? html`<code>${names.join(' · ')}</code>` : nothing}
       </section>
       ${this.renderConsumers(asset)}
-      <section>
+      ${places.length || !this.selected ? this.renderPlaces(places, rung) : nothing}
+    `
+  }
+
+  /*
+    The figure's places. None yet, with a part picked: nothing here -- the part's own place form stands above, and 「pick a
+    part and add one」 under it told the author what they were doing (sweep 2026-10-27 U20).
+  */
+  private renderPlaces(places: ReturnType<typeof figureBindingsOf>, rung: Rung | null) {
+    return html`<section>
       <h3>${i18next.t('figure.label.places')}</h3>
       ${places.length
         ? places.map(
@@ -164,8 +181,12 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
           )
         : html`<p hint>${i18next.t('figure.text.no-places')}</p>`}
       ${places.length && rung === 'none' ? html`<p hint>${i18next.t('figure.text.place-needs-holding')}</p>` : nothing}
-      </section>
-      <section>
+    </section>`
+  }
+
+  /** Whether the figure is an item: what a product capability may need first, so it stands first (sweep 2026-10-27 J4). */
+  private renderItem(asset: FigureAsset) {
+    return html`<section>
       <h3>${i18next.t('figure.label.item')}</h3>
       <label item ?on=${!!asset.item}>
         <input type="checkbox" .checked=${live(!!asset.item)} ?disabled=${this.locked} @change=${(e: Event) => this.setItem((e.target as HTMLInputElement).checked)} />
@@ -174,8 +195,7 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
           <em>${i18next.t('figure.text.is-item-note')}</em>
         </span>
       </label>
-      </section>
-    `
+    </section>`
   }
 
   /** The products' capabilities: those this modeller knows, each on or off with its settings, and those it does not know. */
@@ -189,15 +209,22 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
       ${known.map(d => {
         const on = names.includes(d.name)
         const missing = needsMissing(d, asset)
+        const offered = needsOffered(d, asset)
+        const needs = [
+          ...(offered.item ? [i18next.t('figure.label.is-item')] : []),
+          ...(offered.rungs.length
+            ? [i18next.t('figure.text.product-capability-needs-rungs', { rungs: offered.rungs.map(r => i18next.t(`figure.label.rung-${r}`)).join(i18next.t('figure.label.or-between')) })]
+            : []),
+          ...offered.names
+        ]
         return html`<label rung ?on=${on}>
             <input type="checkbox" .checked=${live(on)} ?disabled=${this.locked || (!on && missing.length > 0)} @change=${(e: Event) => this.setConsumer(asset, d.name, (e.target as HTMLInputElement).checked)} />
             <span>
               <strong>${d.label}</strong>
               <em>${d.note}</em>
-              <code>${d.name} · ${d.version}</code>
+              ${needs.length ? html`<small needs>${i18next.t('figure.text.product-capability-needs', { needs: needs.join(', ') })}</small>` : nothing}
             </span>
           </label>
-          ${missing.length ? html`<p hint>${i18next.t('figure.text.product-capability-needs', { needs: missing.map(m => (m === 'item' ? i18next.t('figure.label.is-item') : m)).join(', ') })}</p>` : nothing}
           ${on ? this.renderSettings(asset, d) : nothing}`
       })}
       ${unknown.map(
@@ -235,7 +262,7 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
           return html`<span>${setting.label}</span>
             <select ?disabled=${this.locked} @change=${(e: Event) => write(withInputTable(settings, setting, (e.target as HTMLSelectElement).value || undefined, table.values))}>
               <option value="" ?selected=${!table.input}>${i18next.t('figure.label.data-none')}</option>
-              ${inputs.map(i => html`<option value=${i.id} ?selected=${i.id === table.input}>${asset.stateInputs?.[i.id]?.label ?? i.id}${i.unit ? ` (${i.unit} ${i.min ?? ''}~${i.max ?? ''})` : ''}</option>`)}
+              ${inputs.map(i => html`<option value=${i.id} ?selected=${i.id === table.input}>${asset.stateInputs?.[i.id]?.label ?? i.id}${i.unit ? ` (${unitWord(i.unit)} ${i.min ?? ''}~${i.max ?? ''})` : ''}</option>`)}
             </select>
             ${table.input
               ? html`<span></span>

package/client/modeller/figure-clips.ts

@@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
+import { unitWord } from './unit-words.js'
 import type { FigureAsset } from '@hatiolab/figure-model'
 
 import { clipGroupsOf, clipsOf, freeGroupIdOf, groupEdit, poseAt, trackEdit, undrivenOf, withKey, withoutKey, type Clip, type ClipGroup, type ClipTrack } from './clips.js'
@@ -118,7 +119,7 @@ export class FigureClips extends localize(i18next)(LitElement) {
         <h3>${i18next.t('figure.label.clips')}${this.help.button('figure.text.clips-explained')}</h3>
         ${this.help.hint('figure.text.clips-explained')}
         ${clips.map(clip => this.renderClip(clip))}
-        ${empty ? html`<p hint>${i18next.t('figure.text.no-controls')}</p>` : nothing}
+        ${empty ? html`<p hint>${i18next.t('figure.text.no-clips')}</p>` : nothing}
       </section>
       ${empty ? nothing : this.renderAdd(asset, clips)} ${this.renderGroups(asset)}
     `
@@ -156,7 +157,7 @@ export class FigureClips extends localize(i18next)(LitElement) {
     const current = this.values[track.state]
     return html`<div track>
       <div track-head>
-        <strong>${track.label} <small>(${track.unit})</small></strong>
+        <strong>${track.label} <small>(${unitWord(track.unit)})</small></strong>
         <select
           aria-label=${i18next.t('figure.label.clip-loop')}
           ?disabled=${this.locked}

package/client/modeller/figure-controls.ts

@@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
+import { unitWord } from './unit-words.js'
 import type { FigureAsset } from '@hatiolab/figure-model'
 
 import { controlsOf, poseAsDefault, poseDiffers, type Control } from '@things-factory/figure-viewer/dist-client/controls.js'
@@ -125,7 +126,7 @@ export class FigureControls extends localize(i18next)(LitElement) {
     const c = this.live[control.id] === undefined ? control : { ...control, value: this.live[control.id]! }
     const open = this.open === c.id
     return html`<div control>
-        <span name title=${c.id}>${c.label} <em>${c.unit}</em></span>
+        <span name title=${c.id}>${c.label} <em>${unitWord(c.unit)}</em></span>
         ${c.unit === 'deg' ? this.renderDial(c) : html`<span></span>`}
         <input
           type="range"
@@ -177,7 +178,7 @@ export class FigureControls extends localize(i18next)(LitElement) {
       <div form>
         <span>${i18next.t('figure.label.control-name')}</span>
         <input .value=${c.named ? c.label : ''} placeholder=${c.id} ?disabled=${this.locked} @change=${(e: Event) => policy({ label: (e.target as HTMLInputElement).value })} />
-        <span>${i18next.t('figure.label.control-range')} (${c.unit})</span>
+        <span>${i18next.t('figure.label.control-range')} (${unitWord(c.unit)})</span>
         <div pair>
           <input type="number" step="any" .value=${String(c.min)} ?disabled=${this.locked} @change=${(e: Event) => policy({ min: number(e) })} />
           <input type="number" step="any" .value=${String(c.max)} ?disabled=${this.locked} @change=${(e: Event) => policy({ max: number(e) })} />
@@ -185,7 +186,7 @@ export class FigureControls extends localize(i18next)(LitElement) {
         <span>${i18next.t('figure.label.control-sweep')}</span>
         <input type="number" min="0" step="any" .value=${String(c.sweep)} ?disabled=${this.locked} @change=${(e: Event) => policy({ sweep: number(e) })} />
       </div>
-      <small>${i18next.t('figure.text.control-starts-at', { value: c.start, unit: c.unit })}</small>
+      <small>${i18next.t('figure.text.control-starts-at', { value: c.start, unit: unitWord(c.unit) })}</small>
     </div>`
   }
 

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

@@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
+import { unitWord } from './unit-words.js'
 import { FIGURE_UNITS, figureDataExample, inferFigureDataSchema } from '@hatiolab/figure-model'
 import type {
   FigureAsset,
@@ -137,6 +138,17 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
         overflow-wrap: anywhere;
         cursor: pointer;
       }
+      /* What it reads and where on the first line, its method under it: a method wrapped alone read 「· 배율」 (sweep 2026-10-27 U11). */
+      div[head] button[line] small {
+        display: block;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      /* A binding a product capability takes over is marked where the list is read, folded or not (sweep 2026-10-27 U18). */
+      div[head] button[line] span[rests] {
+        padding: 0 6px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 999px;
+      }
       div[head] button[act] {
         width: 30px;
         min-height: var(--figure-control-height);
@@ -307,7 +319,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
     const kind = i18next.t('figure.label.data-kind-' + node.kind)
     if (node.kind === 'number') {
       const range = node.min !== undefined || node.max !== undefined ? ` ${node.min ?? ''}~${node.max ?? ''}` : ''
-      return `${kind}${node.unit ? ` ${node.unit}` : ''}${range}`
+      return `${kind}${node.unit ? ` ${unitWord(node.unit)}` : ''}${range}`
     }
     if (node.kind === 'text' && node.values) return `${kind} (${node.values.join(', ')})`
     if (node.kind === 'list') return `${kind} · ${i18next.t('figure.label.data-kind-' + node.item.kind)}`
@@ -346,7 +358,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
             this.edit({ kind: 'set-data-schema', schema: schemaWithoutField(schema, row.path) })
           }}
         >
-          <md-icon>close</md-icon>
+          <md-icon>delete</md-icon>
         </button>
       </div>
       <div form>
@@ -361,8 +373,8 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
         ${field.kind === 'number'
           ? html`<span>${i18next.t('figure.label.data-unit')}</span>
               <select ?disabled=${this.locked} @change=${(e: Event) => set({ unit: value(e) || undefined })}>
-                <option value="" ?selected=${!field.unit}>-</option>
-                ${FIGURE_UNITS.map(u => html`<option value=${u} ?selected=${u === field.unit}>${u}</option>`)}
+                <option value="" ?selected=${!field.unit}>${i18next.t('figure.label.unit-none')}</option>
+                ${FIGURE_UNITS.map(u => html`<option value=${u} ?selected=${u === field.unit}>${unitWord(u)}</option>`)}
               </select>
               <span>${i18next.t('figure.label.data-min')}</span>
               <input type="number" step="any" .value=${field.min === undefined ? '' : String(field.min)} ?disabled=${this.locked} @change=${(e: Event) => set({ min: number(e) })} />
@@ -412,22 +424,25 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
   private renderAddField(schema: readonly FigureDataField[], under: string) {
     const a = this.adding
     const named = a.name.trim()
+    const add = () => {
+      if (this.locked || !named) return
+      this.edit({ kind: 'set-data-schema', schema: schemaWithField(schema, under, { name: named, ...nodeOfKind(a.kind) } as FigureDataField) })
+      this.adding = { ...a, name: '' }
+    }
     return html`<div form>
         <span>${i18next.t('figure.label.data-name')}</span>
-        <input .value=${a.name} @input=${(e: Event) => (this.adding = { ...a, name: (e.target as HTMLInputElement).value })} />
+        <input
+          aria-label=${i18next.t('figure.label.data-name')}
+          .value=${a.name}
+          @input=${(e: Event) => (this.adding = { ...a, name: (e.target as HTMLInputElement).value })}
+          @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && !e.isComposing && add()}
+        />
         <span>${i18next.t('figure.label.data-kind')}</span>
         <select @change=${(e: Event) => (this.adding = { ...a, kind: (e.target as HTMLSelectElement).value as FigureDataNode['kind'] })}>
           ${KINDS.map(k => html`<option value=${k} ?selected=${k === a.kind}>${i18next.t('figure.label.data-kind-' + k)}</option>`)}
         </select>
       </div>
-      <button
-        act
-        ?disabled=${this.locked || !named}
-        @click=${() => {
-          this.edit({ kind: 'set-data-schema', schema: schemaWithField(schema, under, { name: named, ...nodeOfKind(a.kind) } as FigureDataField) })
-          this.adding = { ...a, name: '' }
-        }}
-      >
+      <button act ?disabled=${this.locked || !named} @click=${add}>
         <md-icon>add</md-icon>${i18next.t(under ? 'figure.button.add-data-child' : 'figure.button.add-data-field', { parent: under })}
       </button>`
   }
@@ -499,13 +514,15 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
     const open = this.opened === b.id
     const set = (next: FigureDataBinding) => this.edit({ kind: 'set-data-binding', binding: next })
     const what = b.rule === 'table' ? this.targetsName(asset, b) : this.behaviorName(asset, choices, b.behavior)
+    const rests = resting.some(r => r.id === b.id)
     return html`<section item>
       <div head>
         <button line aria-expanded=${open ? 'true' : 'false'} @click=${() => (this.opened = open ? '' : b.id)}>
-          <strong>${b.label ?? b.accessor}</strong> → ${what} <small>· ${i18next.t('figure.label.data-method-' + methodOf(b))}</small>
+          <strong>${b.label ?? b.accessor}</strong> → ${what}
+          <small>${i18next.t('figure.label.data-method-' + methodOf(b))}${rests ? html` <span rests>${i18next.t('figure.label.data-binding-resting')}</span>` : nothing}</small>
         </button>
         <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-binding')} @click=${() => this.edit({ kind: 'remove-data-binding', id: b.id })}>
-          <md-icon>close</md-icon>
+          <md-icon>delete</md-icon>
         </button>
       </div>
       ${resting.filter(r => r.id === b.id).map(r => this.renderResting(r))}
@@ -700,7 +717,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
     return html`<div looks style="grid-template-columns: ${gridOf(keyCells, columns.length)}">
       <span style="grid-column: span ${keyCells}">${i18next.t('figure.label.data-otherwise')}</span>
       ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, 'default', l)))}
-      ${needed ? html`<span></span>` : html`<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => set({ ...b, table: rest })}><md-icon>close</md-icon></button>`}
+      ${needed ? html`<span></span>` : html`<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => set({ ...b, table: rest })}><md-icon>delete</md-icon></button>`}
     </div>`
   }
 
@@ -736,7 +753,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
             ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, k, l)))}
             ${boolean || rows.length < 2 && domain.length > 0
               ? html`<span></span>`
-              : html`<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => rekeyed(rows.filter((_, j) => j !== i))}><md-icon>close</md-icon></button>`}`
+              : html`<button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-case')} @click=${() => rekeyed(rows.filter((_, j) => j !== i))}><md-icon>delete</md-icon></button>`}`
         )}
       </div>
       ${this.renderOtherwise(asset, b, columns, domain.length > 0 && !covered, set, 1)}
@@ -779,7 +796,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
           return html`<input type="number" step="any" .value=${e.from} ?disabled=${this.locked} @change=${(ev: Event) => rekey(i, 'from', (ev.target as HTMLInputElement).value)} />
             <input type="number" step="any" .value=${e.to} ?disabled=${this.locked} @change=${(ev: Event) => rekey(i, 'to', (ev.target as HTMLInputElement).value)} />
             ${this.lookCells(asset, columns, look, l => set(tableWithLook(b, k, l)))}
-            <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-range')} @click=${() => set(tableWithKeys(b, rows.filter((_, j) => j !== i)))}><md-icon>close</md-icon></button>`
+            <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-data-range')} @click=${() => set(tableWithKeys(b, rows.filter((_, j) => j !== i)))}><md-icon>delete</md-icon></button>`
         })}
       </div>
       ${this.renderOtherwise(asset, b, columns, false, set, 2)}
@@ -868,9 +885,12 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
               <input .value=${a.name} @input=${(e: Event) => set({ name: typed(e) })} />`
           : nothing}
         <span>${i18next.t('figure.label.data-method')}</span>
-        <select ?disabled=${!methods.length} @change=${(e: Event) => set({ method: typed(e) as DataMethod })}>
-          ${methods.map(m => html`<option value=${m} ?selected=${m === method}>${i18next.t('figure.label.data-method-' + m)}</option>`)}
-        </select>
+        ${methods.length === 1
+          ? /* One way only (a text is read by a code table): said, not offered as a choice of one (sweep 2026-10-27 U10). */
+            html`<span method>${i18next.t('figure.label.data-method-' + methods[0])}</span>`
+          : html`<select ?disabled=${!methods.length} @change=${(e: Event) => set({ method: typed(e) as DataMethod })}>
+              ${methods.map(m => html`<option value=${m} ?selected=${m === method}>${i18next.t('figure.label.data-method-' + m)}</option>`)}
+            </select>`}
         ${!table && fitting.length
           ? html`<span>${i18next.t('figure.label.data-behavior')}</span>
               <select @change=${(e: Event) => set({ behavior: typed(e) })}>

package/client/modeller/figure-links.ts

@@ -7,6 +7,7 @@ import './figure-size-editor.js'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
+import { unitWord } from './unit-words.js'
 import { figureFaceOverhangOf, figureMotionsOf, motionIdOf } from '@hatiolab/figure-model'
 import type { FigureAsset, FigureAuthoringAction, FigureBindingPlace, FigureFace } from '@hatiolab/figure-model'
 
@@ -624,7 +625,6 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     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 }] : []
@@ -687,9 +687,9 @@ export class FigureLinks extends localize(i18next)(LitElement) {
               <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>
+            <span>${i18next.t('figure.label.state-size-at-min', { at: String(form.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>
+            <span>${i18next.t('figure.label.state-size-at-max', { at: String(form.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=${() => {
@@ -768,7 +768,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
               : it.follows
               ? html`<small>${i18next.t('figure.label.motion-follow')}: ${it.follows.sum.map(t => `${t.joint} × ${t.multiplier}`).join(' + ')} + ${it.follows.offset}</small>`
               : it.control
-                ? html`<small>${it.control.id} (${it.control.unit}) ${it.control.min} … ${it.control.max}</small>`
+                ? html`<small>${it.control.id} (${unitWord(it.control.unit)}) ${it.control.min} … ${it.control.max}</small>`
                 : nothing}
           </span>
           ${count > 1
@@ -792,7 +792,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
           })}
         </p>
         ${ends
-          ? html`<p hint motion-ends>${i18next.t('figure.text.motion-ends-shown', { min: String(ends.min), max: String(ends.max), unit: ends.unit })}</p>`
+          ? html`<p hint motion-ends>${i18next.t('figure.text.motion-ends-shown', { min: String(ends.min), max: String(ends.max), unit: unitWord(ends.unit) })}</p>`
           : nothing}
         ${Array.from({ length: count }, (_, k) => row(k))}
         <div pair>