@things-factory/figure-ui 10.1.225 → 10.1.227

package/client/graphql/index.ts

@@ -45,7 +45,7 @@ function unwrap<T>(response: { data?: Record<string, unknown>; errors?: readonly
  * **`thumbnail` 도 여기 없다.** base64 문자열이라 목록 응답에 실으면 카탈로그를 열 때마다 그림
  * 전부가 다시 오고(표본 14개 227KB), data URL 은 브라우저가 캐시하지 못한다. 그림은 주소로
  * 부른다(`figure-thumbnail` 라우트). 대신 `thumbnailUpdatedAt` 을 받는다 — 그림이 있나 없나를
- * 그것으로 알고, 판을 가리는 값으로도 쓴다.
+ * 그것으로 알고, 버전을 가리는 값으로도 쓴다.
  */
 const FIGURE_LIST_FIELDS = `
   id
@@ -226,7 +226,7 @@ export async function deleteFigure(id: string): Promise<boolean> {
 }
 
 /**
- * 발행한다 — 판 번호가 오르고, 그 순간이 판본으로 남는다.
+ * 발행한다 — 버전 번호가 오르고, 그 순간이 버전으로 남는다.
  *
  * 이미 발행된 것을 다시 발행하면 서버가 거절한다. 고쳐서 다시 내려면 저장이 먼저이고, 저장은
  * 발행을 푼다(초안으로 돌아온다).
@@ -340,7 +340,7 @@ export interface KeptDraft {
 const KEPT_FIELDS = `id kind state version revertedToVersion restoredAt createdAt creator { name }`
 
 /**
- * 옛 판을 초안으로 되살린다. 정본·속성·그림이 돌아오고 이름·설명은 그대로다. 덮이는 초안은 같은 트랜잭션에서 서버가
+ * 옛 버전을 초안으로 되살린다. 정본·속성·그림이 돌아오고 이름·설명은 그대로다. 덮이는 초안은 같은 트랜잭션에서 서버가
  * 보관한다. `expectedSource` 는 서버가 들고 있다고 확인된 정본 -- 그 사이 바뀌었으면 거절된다. 답을 못 받았으면
  * (REVERT_UNREACHABLE) 같은 `requestId` 로 다시 묻는다: 서버는 같은 되돌리기로 답하고 두 번 하지 않는다.
  */
@@ -464,7 +464,7 @@ export async function inspectFigure(id: string): Promise<FigureInspection> {
  *
  * 발행 패널의 `inspectFigure` 는 저장된 원본을 재므로 고친 결과를 저장한 뒤에야 보여 준다. 편집하면서 막히는
  * 것을 보려면 편집 중인 원본을 보내야 한다. 판정은 서버의 같은 문(`inspectAnySource`)이 하고 문장도 같다 —
- * 화면이 제 판정을 따로 가지면 두 자리가 다른 말을 한다. `id` 가 있으면 서버가 그 행의 타입과 직전 발행판을 읽는다.
+ * 화면이 제 판정을 따로 가지면 두 자리가 다른 말을 한다. `id` 가 있으면 서버가 그 행의 타입과 직전 발행 버전을 읽는다.
  */
 export async function inspectFigureDraft(source: string, id?: string): Promise<FigureInspection> {
   const response = await client.query({
@@ -490,9 +490,9 @@ export async function inspectFigureDraft(source: string, id?: string): Promise<F
   return unwrap<FigureInspection>(response, 'inspectFigureDraft')
 }
 
-/** 발행된 판들 — 최근 것부터 열 개. */
+/** 발행된 버전들 — 최근 것부터 열 개. */
 /**
- * 직전 발행판의 정본. 한 번도 발행 안 했으면 `undefined`.
+ * 직전 발행 버전의 정본. 한 번도 발행 안 했으면 `undefined`.
  *
  * 저작 중에 「이 고침이 이미 놓인 것을 깨나」를 그 자리에서 보여 주려면 견줄 것이 필요하다. 저장
  * 전 초안은 서버가 모르므로 판정도 화면에서 한다 — 형식의 `contractChanges` 를 같이 쓴다.

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

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'}>
@@ -2041,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)}
@@ -2087,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,
@@ -141,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}>
@@ -153,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(
@@ -170,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)} />
@@ -180,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. */
@@ -195,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(
@@ -241,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'
@@ -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)}`
@@ -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) })} />
@@ -502,10 +514,12 @@ 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>delete</md-icon>
@@ -871,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-history-panel.ts

@@ -20,13 +20,13 @@ import type { FigureGateFinding, FigureInspection, FigureVersion } from '../type
 import { OxPrompt } from '@operato/popup'
 
 /**
- * 이력 — **발행하는 자리이자, 발행된 판들을 보는 자리.**
+ * 이력 — **발행하는 자리이자, 발행된 버전들을 보는 자리.**
  *
  * ## 왜 저장 옆이 아니라 여기인가
  *
  * 저장은 하루에 수십 번이고 발행은 드물다. 두 단추를 나란히 두면 저장하려다 발행을 누른다.
- * 그리고 발행은 **소비처에게 하는 약속**이라, 무엇을 약속하는지(지금 몇 판인가 · 저장 안 한 것이
- * 있나 · 지난 판이 무엇이었나)를 함께 보여 주는 자리에 있어야 한다.
+ * 그리고 발행은 **소비처에게 하는 약속**이라, 무엇을 약속하는지(지금 몇 버전인가 · 저장 안 한 것이
+ * 있나 · 지난 버전이 무엇이었나)를 함께 보여 주는 자리에 있어야 한다.
  *
  * ## 저장하지 않은 것이 있으면 발행하지 않는다
  *
@@ -35,11 +35,11 @@ import { OxPrompt } from '@operato/popup'
  *
  * ## 되돌리기는 초안으로 돌아온다
  *
- * 옛 판의 정본·속성·그림이 돌아오고 이름·설명은 그대로다. 되살렸다고 그 판이 다시 발행되지는
+ * 옛 버전의 정본·속성·그림이 돌아오고 이름·설명은 그대로다. 되살렸다고 그 버전이 다시 발행되지는
  * 않는다 — 다시 내보내려면 발행을 한 번 더 하고, 그때 번호는 이미 쓴 다음 번호를 받는다.
  *
  * 덮이는 초안은 서버가 같은 트랜잭션에서 보관하고, 「되돌리기 전 초안」에 남는다(ADR-0097 §5.6, 디자이너 2026-09-27).
- * 발행 판과 섞지 않는다. 다시 접속해도 거기서 찾고, 가장 최근 것은 「되돌리기 취소」로 되살린다 — 되돌린 뒤 모델이
+ * 발행 버전과 섞지 않는다. 다시 접속해도 거기서 찾고, 가장 최근 것은 「되돌리기 취소」로 되살린다 — 되돌린 뒤 모델이
  * 바뀌었으면 서버가 거절하고 보관본은 남는다.
  */
 @customElement('figure-history-panel')
@@ -501,7 +501,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
     if (this.dirty) {
       if (!(await this.settleUnsaved('revert', version))) return
     } else {
-      /* 지금 초안은 서버가 보관하지만, 화면의 것이 그 판으로 바뀐다 — 이름으로 확인한다. */
+      /* 지금 초안은 서버가 보관하지만, 화면의 것이 그 버전으로 바뀐다 — 이름으로 확인한다. */
       const agreed = await OxPrompt.open({
         type: 'warning',
         title: i18next.t('figure.button.revert'),
@@ -542,7 +542,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
       this.dispatchEvent(new CustomEvent('figure-reverted', { detail: result, bubbles: true, composed: true }))
       await this.reload()
       /*
-        **되돌리면 정본이 바뀌므로 판정도 바뀐다.** 이것을 안 하면 옛 판의 사유가 새 정본 위에
+        **되돌리면 정본이 바뀌므로 판정도 바뀐다.** 이것을 안 하면 옛 버전의 사유가 새 정본 위에
         남아 화면이 거짓말한다 — 되돌리기는 `dirty` 도 `figureVersion` 도 건드리지 않으므로
         `updated` 의 감시로는 다시 묻지 않는다.
       */

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>

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

@@ -219,7 +219,9 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
   private renderMore(part: FigureAssetGeometry & { id: string }, painted: [string, string][], lit: [string, string][]) {
     const material = part.material
     const glow = material.emissive
+    /* Under its own title: below 「단면」 without one, transparency and glow read as the section's (sweep 2026-10-27 U21). */
     return html`<div more>
+      <h3>${i18next.t('figure.label.part-material')}</h3>
       <label toggle>
         <input
           type="checkbox"