@things-factory/figure-ui 10.1.225 → 10.1.226

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

@@ -22,6 +22,9 @@ export declare class FigureCapabilityPanel extends FigureCapabilityPanel_base {
     selected: string;
     locked: boolean;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    private renderPlaces;
+    /** Whether the figure is an item: what a product capability may need first, so it stands first (sweep 2026-10-27 J4). */
+    private renderItem;
     /** The products' capabilities: those this modeller knows, each on or off with its settings, and those it does not know. */
     private renderConsumers;
     /** A capability's settings as its descriptor draws them, and what its check says of them. */

package/dist-client/modeller/figure-capability-panel.js

@@ -3,12 +3,13 @@ import { css, html, LitElement, nothing } from 'lit';
 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 { RUNGS, rungOf } from '@things-factory/figure-viewer/dist-client/capability-rung.js';
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
 import { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js';
 import { onFigureCapabilitiesChanged } from '@hatiolab/things-scene';
-import { consumerDescriptors, inputTableAt, namesWith, needsMissing, partsAt, settingsIssues, settingsOf, unknownConsumerNames, withInputTable, withParts } from './consumer-capabilities.js';
+import { consumerDescriptors, inputTableAt, namesWith, needsMissing, needsOffered, partsAt, settingsIssues, settingsOf, unknownConsumerNames, withInputTable, withParts } from './consumer-capabilities.js';
 /**
  * 자리·능력 — what the figure does on a board: the ladder from drawing only, to
  * holding things, to passing them on, and every place things are held, whatever part it is on. A place is not drawn,
@@ -123,7 +124,8 @@ let FigureCapabilityPanel = class FigureCapabilityPanel extends localize(i18next
         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'].map(which => html `<label rung ?on=${rung === which}>
           <input type="radio" name="rung" .checked=${live(rung === which)} ?disabled=${this.locked} @change=${() => this.setRung(which)} />
@@ -133,10 +135,17 @@ let FigureCapabilityPanel = class FigureCapabilityPanel extends localize(i18next
           </span>
         </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).
+    */
+    renderPlaces(places, rung) {
+        return html `<section>
       <h3>${i18next.t('figure.label.places')}</h3>
       ${places.length
             ? places.map(one => html `<button place ?on=${one.part === this.selected} @click=${() => one.part && this.pick(one.part)}>
@@ -148,8 +157,11 @@ let FigureCapabilityPanel = class FigureCapabilityPanel extends localize(i18next
             </button>`)
             : 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). */
+    renderItem(asset) {
+        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) => this.setItem(e.target.checked)} />
@@ -158,8 +170,7 @@ let FigureCapabilityPanel = class FigureCapabilityPanel extends localize(i18next
           <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. */
     renderConsumers(asset) {
@@ -173,15 +184,22 @@ let FigureCapabilityPanel = class FigureCapabilityPanel extends localize(i18next
       ${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) => this.setConsumer(asset, d.name, e.target.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(name => html `<p hint>
@@ -215,7 +233,7 @@ let FigureCapabilityPanel = class FigureCapabilityPanel extends localize(i18next
             return html `<span>${setting.label}</span>
             <select ?disabled=${this.locked} @change=${(e) => write(withInputTable(settings, setting, e.target.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/dist-client/modeller/figure-capability-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"figure-capability-panel.js","sourceRoot":"","sources":["../../client/modeller/figure-capability-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { figureBindingsOf } from '@hatiolab/figure-model'\nimport type { FigureAsset } from '@hatiolab/figure-model'\nimport { RUNGS, rungOf, type Rung } from '@things-factory/figure-viewer/dist-client/capability-rung.js'\nimport { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'\nimport { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js'\nimport { onFigureCapabilitiesChanged, type FigureCapabilityDescriptor, type FigureCapabilitySetting } from '@hatiolab/things-scene'\n\nimport {\n  consumerDescriptors,\n  inputTableAt,\n  namesWith,\n  needsMissing,\n  partsAt,\n  settingsIssues,\n  settingsOf,\n  unknownConsumerNames,\n  withInputTable,\n  withParts\n} from './consumer-capabilities.js'\n\n/**\n * 자리·능력 — what the figure does on a board: the ladder from drawing only, to\n * holding things, to passing them on, and every place things are held, whatever part it is on. A place is not drawn,\n * so the list is the only way to find one; choosing a row selects its part, where the place is edited. Whether the\n * figure is the look of an item a holder carries is said here too (ADR-0155 amendment 2): a tag, apart from the ladder,\n * since an item may hold things as well.\n *\n * Below the ladder, the products' capabilities this modeller has descriptors for (ADR-0167 9, 12): each put on or off,\n * what it still needs, and its settings as its descriptor draws them -- parts picked (the part chosen here by one\n * button), an input and a value per fixed key, never a row added or taken away -- with what its check says.\n */\n@customElement('figure-capability-panel')\nexport class FigureCapabilityPanel extends localize(i18next)(LitElement) {\n  static styles = [SidePanelStyles, css`\n    :host {\n      display: block;\n    }\n    label[rung],\n    label[item] {\n      display: flex;\n      gap: 8px;\n      align-items: flex-start;\n      padding: 8px;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n      cursor: pointer;\n    }\n    /* The box keeps its size beside a long note: squeezed by the flex row it read as a dot (sweep 2026-10-27 U1). */\n    label[rung] > input,\n    label[item] > input {\n      flex: none;\n      margin: 2px 0 0;\n    }\n    label[rung][on],\n    label[item][on] {\n      border-color: var(--md-sys-color-primary);\n      background: var(--md-sys-color-secondary-container);\n      color: var(--md-sys-color-on-secondary-container);\n    }\n    label[rung] span,\n    label[item] span {\n      display: grid;\n      gap: 2px;\n    }\n    label[rung] em,\n    label[item] em,\n    p[hint],\n    small {\n      font-style: normal;\n      margin: 0;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    button[place] {\n      display: grid;\n      gap: 2px;\n      text-align: left;\n      padding: 6px 8px;\n      font: inherit;\n      color: inherit;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n      background: none;\n      cursor: pointer;\n    }\n    button[place][on] {\n      border-color: var(--md-sys-color-primary);\n    }\n    code {\n      font-size: var(--ui-t-small, 11.5px);\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    div[chips] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px 10px;\n      align-items: center;\n    }\n    div[chips] label {\n      display: inline-flex;\n      gap: 4px;\n      align-items: center;\n    }\n    div[table] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n      gap: 4px 6px;\n      align-items: center;\n    }\n    p[warn] {\n      margin: 0;\n      color: var(--md-sys-color-error);\n    }\n  `]\n\n  private unlisten?: () => void\n\n  connectedCallback() {\n    super.connectedCallback()\n    /* A product's descriptors may be registered after the panel stands. */\n    this.unlisten = onFigureCapabilitiesChanged(() => this.requestUpdate())\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.unlisten?.()\n  }\n\n  @property({ attribute: false }) asset?: FigureAsset\n  /** The selected part, whose places are marked. */\n  @property() selected = ''\n  @property({ type: Boolean }) locked = false\n\n  render() {\n    const asset = this.asset\n    if (!asset) return nothing\n    const names = asset.document.capabilities.names ?? []\n    const rung = rungOf(names)\n    const places = figureBindingsOf(asset)\n    return html`<section>\n      <h3>${i18next.t('figure.label.what-this-does')}</h3>\n      ${(['none', 'hold', 'flow'] as const).map(\n        which => html`<label rung ?on=${rung === which}>\n          <input type=\"radio\" name=\"rung\" .checked=${live(rung === which)} ?disabled=${this.locked} @change=${() => this.setRung(which)} />\n          <span>\n            <strong>${i18next.t(`figure.label.rung-${which}`)}</strong>\n            <em>${i18next.t(`figure.text.rung-${which}-note`)}</em>\n          </span>\n        </label>`\n      )}\n      ${rung === null ? html`<p hint>${i18next.t('figure.text.capability-hand-written')}</p>` : nothing}\n      ${names.length ? html`<code>${names.join(' · ')}</code>` : nothing}\n      </section>\n      ${this.renderConsumers(asset)}\n      <section>\n      <h3>${i18next.t('figure.label.places')}</h3>\n      ${places.length\n        ? places.map(\n            one => html`<button place ?on=${one.part === this.selected} @click=${() => one.part && this.pick(one.part)}>\n              <strong>${one.label}</strong>\n              <small>\n                ${one.part ?? '?'}${one.face ? ' · ' + i18next.t('figure.label.face-' + one.face) : ''} ·\n                ${placeTerms(one, (key, params) => i18next.t(key, params))}\n              </small>\n            </button>`\n          )\n        : html`<p hint>${i18next.t('figure.text.no-places')}</p>`}\n      ${places.length && rung === 'none' ? html`<p hint>${i18next.t('figure.text.place-needs-holding')}</p>` : nothing}\n      </section>\n      <section>\n      <h3>${i18next.t('figure.label.item')}</h3>\n      <label item ?on=${!!asset.item}>\n        <input type=\"checkbox\" .checked=${live(!!asset.item)} ?disabled=${this.locked} @change=${(e: Event) => this.setItem((e.target as HTMLInputElement).checked)} />\n        <span>\n          <strong>${i18next.t('figure.label.is-item')}</strong>\n          <em>${i18next.t('figure.text.is-item-note')}</em>\n        </span>\n      </label>\n      </section>\n    `\n  }\n\n  /** The products' capabilities: those this modeller knows, each on or off with its settings, and those it does not know. */\n  private renderConsumers(asset: FigureAsset) {\n    const known = consumerDescriptors()\n    const unknown = unknownConsumerNames(asset)\n    if (!known.length && !unknown.length) return nothing\n    const names = asset.document.capabilities.names ?? []\n    return html`<section>\n      <h3>${i18next.t('figure.label.product-capabilities')}</h3>\n      ${known.map(d => {\n        const on = names.includes(d.name)\n        const missing = needsMissing(d, asset)\n        return html`<label rung ?on=${on}>\n            <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)} />\n            <span>\n              <strong>${d.label}</strong>\n              <em>${d.note}</em>\n              <code>${d.name} · ${d.version}</code>\n            </span>\n          </label>\n          ${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}\n          ${on ? this.renderSettings(asset, d) : nothing}`\n      })}\n      ${unknown.map(\n        name => html`<p hint>\n          ${i18next.t('figure.text.product-capability-unknown', { name })}\n          <button quiet ?disabled=${this.locked} @click=${() => this.setConsumer(asset, name, false)}>${i18next.t('figure.button.product-capability-remove')}</button>\n        </p>`\n      )}\n    </section>`\n  }\n\n  /** A capability's settings as its descriptor draws them, and what its check says of them. */\n  private renderSettings(asset: FigureAsset, d: FigureCapabilityDescriptor) {\n    const settings = settingsOf(asset, d.name)\n    const write = (next: Record<string, unknown>) =>\n      this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capability-settings', name: d.name, settings: Object.keys(next).length ? next : null } }, bubbles: true, composed: true }))\n    const parts = [...new Set(asset.appearance.map(a => a.target))]\n    const inputs = asset.document.model.inputs.filter(i => i.role === 'state')\n    const issues = settingsIssues(d, asset)\n    return html`<div form>\n        ${(d.settings ?? []).map((setting: FigureCapabilitySetting) => {\n          if (setting.kind === 'parts') {\n            const chosen = partsAt(settings, setting.key)\n            const toggle = (part: string, on: boolean) => write(withParts(settings, setting.key, on ? [...chosen, part] : chosen.filter(p => p !== part)))\n            return html`<span>${setting.label}</span>\n              <div chips>\n                ${parts.map(p => html`<label><input type=\"checkbox\" .checked=${live(chosen.includes(p))} ?disabled=${this.locked} @change=${(e: Event) => toggle(p, (e.target as HTMLInputElement).checked)} />${p}</label>`)}\n                ${this.selected && parts.includes(this.selected) && !chosen.includes(this.selected)\n                  ? html`<button quiet ?disabled=${this.locked} @click=${() => toggle(this.selected, true)}>${i18next.t('figure.button.data-add-selected-part', { part: this.selected })}</button>`\n                  : nothing}\n              </div>`\n          }\n          const table = inputTableAt(settings, setting)\n          const input = inputs.find(i => i.id === table.input)\n          return html`<span>${setting.label}</span>\n            <select ?disabled=${this.locked} @change=${(e: Event) => write(withInputTable(settings, setting, (e.target as HTMLSelectElement).value || undefined, table.values))}>\n              <option value=\"\" ?selected=${!table.input}>${i18next.t('figure.label.data-none')}</option>\n              ${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>`)}\n            </select>\n            ${table.input\n              ? html`<span></span>\n                  <div table>\n                    ${setting.keys.map(\n                      key => html`<span>${key}</span>\n                        <input\n                          type=\"number\"\n                          step=\"any\"\n                          min=${input?.min ?? ''}\n                          max=${input?.max ?? ''}\n                          .value=${String(table.values[key])}\n                          ?disabled=${this.locked}\n                          @change=${(e: Event) => {\n                            const n = (e.target as HTMLInputElement).valueAsNumber\n                            if (!Number.isFinite(n)) return this.requestUpdate()\n                            write(withInputTable(settings, setting, table.input, { ...table.values, [key]: n }))\n                          }}\n                        />`\n                    )}\n                  </div>`\n              : nothing}`\n        })}\n      </div>\n      ${issues.map(reason => html`<p warn>${reason}</p>`)}`\n  }\n\n  private setConsumer(asset: FigureAsset, name: string, on: boolean) {\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names: namesWith(asset, name, on) } }, bubbles: true, composed: true }))\n  }\n\n  private setRung(which: Rung) {\n    /* The ladder sets the shared names; a product's capabilities stay as they are. */\n    const consumers = (this.asset?.document.capabilities.names ?? []).filter(n => n.includes('.'))\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names: [...RUNGS[which], ...consumers] } }, bubbles: true, composed: true }))\n  }\n\n  private setItem(item: boolean) {\n    this.dispatchEvent(new CustomEvent('command', { detail: { action: { kind: 'set-item', item } }, bubbles: true, composed: true }))\n  }\n\n  private pick(part: string) {\n    this.dispatchEvent(new CustomEvent('select-part', { detail: { id: part }, bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"figure-capability-panel.js","sourceRoot":"","sources":["../../client/modeller/figure-capability-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { unitWord } from './unit-words.js'\nimport { figureBindingsOf } from '@hatiolab/figure-model'\nimport type { FigureAsset } from '@hatiolab/figure-model'\nimport { RUNGS, rungOf, type Rung } from '@things-factory/figure-viewer/dist-client/capability-rung.js'\nimport { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'\nimport { placeTerms } from '@things-factory/figure-viewer/dist-client/detail-facts.js'\nimport { onFigureCapabilitiesChanged, type FigureCapabilityDescriptor, type FigureCapabilitySetting } from '@hatiolab/things-scene'\n\nimport {\n  consumerDescriptors,\n  inputTableAt,\n  namesWith,\n  needsMissing,\n  needsOffered,\n  partsAt,\n  settingsIssues,\n  settingsOf,\n  unknownConsumerNames,\n  withInputTable,\n  withParts\n} from './consumer-capabilities.js'\n\n/**\n * 자리·능력 — what the figure does on a board: the ladder from drawing only, to\n * holding things, to passing them on, and every place things are held, whatever part it is on. A place is not drawn,\n * so the list is the only way to find one; choosing a row selects its part, where the place is edited. Whether the\n * figure is the look of an item a holder carries is said here too (ADR-0155 amendment 2): a tag, apart from the ladder,\n * since an item may hold things as well.\n *\n * Below the ladder, the products' capabilities this modeller has descriptors for (ADR-0167 9, 12): each put on or off,\n * what it still needs, and its settings as its descriptor draws them -- parts picked (the part chosen here by one\n * button), an input and a value per fixed key, never a row added or taken away -- with what its check says.\n */\n@customElement('figure-capability-panel')\nexport class FigureCapabilityPanel extends localize(i18next)(LitElement) {\n  static styles = [SidePanelStyles, css`\n    :host {\n      display: block;\n    }\n    label[rung],\n    label[item] {\n      display: flex;\n      gap: 8px;\n      align-items: flex-start;\n      padding: 8px;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n      cursor: pointer;\n    }\n    /* The box keeps its size beside a long note: squeezed by the flex row it read as a dot (sweep 2026-10-27 U1). */\n    label[rung] > input,\n    label[item] > input {\n      flex: none;\n      margin: 2px 0 0;\n    }\n    label[rung][on],\n    label[item][on] {\n      border-color: var(--md-sys-color-primary);\n      background: var(--md-sys-color-secondary-container);\n      color: var(--md-sys-color-on-secondary-container);\n    }\n    label[rung] span,\n    label[item] span {\n      display: grid;\n      gap: 2px;\n    }\n    label[rung] em,\n    label[item] em,\n    p[hint],\n    small {\n      font-style: normal;\n      margin: 0;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    button[place] {\n      display: grid;\n      gap: 2px;\n      text-align: left;\n      padding: 6px 8px;\n      font: inherit;\n      color: inherit;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n      background: none;\n      cursor: pointer;\n    }\n    button[place][on] {\n      border-color: var(--md-sys-color-primary);\n    }\n    code {\n      font-size: var(--ui-t-small, 11.5px);\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    div[chips] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px 10px;\n      align-items: center;\n    }\n    div[chips] label {\n      display: inline-flex;\n      gap: 4px;\n      align-items: center;\n    }\n    div[table] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n      gap: 4px 6px;\n      align-items: center;\n    }\n    p[warn] {\n      margin: 0;\n      color: var(--md-sys-color-error);\n    }\n  `]\n\n  private unlisten?: () => void\n\n  connectedCallback() {\n    super.connectedCallback()\n    /* A product's descriptors may be registered after the panel stands. */\n    this.unlisten = onFigureCapabilitiesChanged(() => this.requestUpdate())\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.unlisten?.()\n  }\n\n  @property({ attribute: false }) asset?: FigureAsset\n  /** The selected part, whose places are marked. */\n  @property() selected = ''\n  @property({ type: Boolean }) locked = false\n\n  render() {\n    const asset = this.asset\n    if (!asset) return nothing\n    const names = asset.document.capabilities.names ?? []\n    const rung = rungOf(names)\n    const places = figureBindingsOf(asset)\n    return html`${this.renderItem(asset)}\n      <section>\n      <h3>${i18next.t('figure.label.what-this-does')}</h3>\n      ${(['none', 'hold', 'flow'] as const).map(\n        which => html`<label rung ?on=${rung === which}>\n          <input type=\"radio\" name=\"rung\" .checked=${live(rung === which)} ?disabled=${this.locked} @change=${() => this.setRung(which)} />\n          <span>\n            <strong>${i18next.t(`figure.label.rung-${which}`)}</strong>\n            <em>${i18next.t(`figure.text.rung-${which}-note`)}</em>\n          </span>\n        </label>`\n      )}\n      ${rung === null ? html`<p hint>${i18next.t('figure.text.capability-hand-written')}</p>` : nothing}\n      </section>\n      ${this.renderConsumers(asset)}\n      ${places.length || !this.selected ? this.renderPlaces(places, rung) : nothing}\n    `\n  }\n\n  /*\n    The figure's places. None yet, with a part picked: nothing here -- the part's own place form stands above, and 「pick a\n    part and add one」 under it told the author what they were doing (sweep 2026-10-27 U20).\n  */\n  private renderPlaces(places: ReturnType<typeof figureBindingsOf>, rung: Rung | null) {\n    return html`<section>\n      <h3>${i18next.t('figure.label.places')}</h3>\n      ${places.length\n        ? places.map(\n            one => html`<button place ?on=${one.part === this.selected} @click=${() => one.part && this.pick(one.part)}>\n              <strong>${one.label}</strong>\n              <small>\n                ${one.part ?? '?'}${one.face ? ' · ' + i18next.t('figure.label.face-' + one.face) : ''} ·\n                ${placeTerms(one, (key, params) => i18next.t(key, params))}\n              </small>\n            </button>`\n          )\n        : html`<p hint>${i18next.t('figure.text.no-places')}</p>`}\n      ${places.length && rung === 'none' ? html`<p hint>${i18next.t('figure.text.place-needs-holding')}</p>` : nothing}\n    </section>`\n  }\n\n  /** Whether the figure is an item: what a product capability may need first, so it stands first (sweep 2026-10-27 J4). */\n  private renderItem(asset: FigureAsset) {\n    return html`<section>\n      <h3>${i18next.t('figure.label.item')}</h3>\n      <label item ?on=${!!asset.item}>\n        <input type=\"checkbox\" .checked=${live(!!asset.item)} ?disabled=${this.locked} @change=${(e: Event) => this.setItem((e.target as HTMLInputElement).checked)} />\n        <span>\n          <strong>${i18next.t('figure.label.is-item')}</strong>\n          <em>${i18next.t('figure.text.is-item-note')}</em>\n        </span>\n      </label>\n    </section>`\n  }\n\n  /** The products' capabilities: those this modeller knows, each on or off with its settings, and those it does not know. */\n  private renderConsumers(asset: FigureAsset) {\n    const known = consumerDescriptors()\n    const unknown = unknownConsumerNames(asset)\n    if (!known.length && !unknown.length) return nothing\n    const names = asset.document.capabilities.names ?? []\n    return html`<section>\n      <h3>${i18next.t('figure.label.product-capabilities')}</h3>\n      ${known.map(d => {\n        const on = names.includes(d.name)\n        const missing = needsMissing(d, asset)\n        const offered = needsOffered(d, asset)\n        const needs = [\n          ...(offered.item ? [i18next.t('figure.label.is-item')] : []),\n          ...(offered.rungs.length\n            ? [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')) })]\n            : []),\n          ...offered.names\n        ]\n        return html`<label rung ?on=${on}>\n            <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)} />\n            <span>\n              <strong>${d.label}</strong>\n              <em>${d.note}</em>\n              ${needs.length ? html`<small needs>${i18next.t('figure.text.product-capability-needs', { needs: needs.join(', ') })}</small>` : nothing}\n            </span>\n          </label>\n          ${on ? this.renderSettings(asset, d) : nothing}`\n      })}\n      ${unknown.map(\n        name => html`<p hint>\n          ${i18next.t('figure.text.product-capability-unknown', { name })}\n          <button quiet ?disabled=${this.locked} @click=${() => this.setConsumer(asset, name, false)}>${i18next.t('figure.button.product-capability-remove')}</button>\n        </p>`\n      )}\n    </section>`\n  }\n\n  /** A capability's settings as its descriptor draws them, and what its check says of them. */\n  private renderSettings(asset: FigureAsset, d: FigureCapabilityDescriptor) {\n    const settings = settingsOf(asset, d.name)\n    const write = (next: Record<string, unknown>) =>\n      this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capability-settings', name: d.name, settings: Object.keys(next).length ? next : null } }, bubbles: true, composed: true }))\n    const parts = [...new Set(asset.appearance.map(a => a.target))]\n    const inputs = asset.document.model.inputs.filter(i => i.role === 'state')\n    const issues = settingsIssues(d, asset)\n    return html`<div form>\n        ${(d.settings ?? []).map((setting: FigureCapabilitySetting) => {\n          if (setting.kind === 'parts') {\n            const chosen = partsAt(settings, setting.key)\n            const toggle = (part: string, on: boolean) => write(withParts(settings, setting.key, on ? [...chosen, part] : chosen.filter(p => p !== part)))\n            return html`<span>${setting.label}</span>\n              <div chips>\n                ${parts.map(p => html`<label><input type=\"checkbox\" .checked=${live(chosen.includes(p))} ?disabled=${this.locked} @change=${(e: Event) => toggle(p, (e.target as HTMLInputElement).checked)} />${p}</label>`)}\n                ${this.selected && parts.includes(this.selected) && !chosen.includes(this.selected)\n                  ? html`<button quiet ?disabled=${this.locked} @click=${() => toggle(this.selected, true)}>${i18next.t('figure.button.data-add-selected-part', { part: this.selected })}</button>`\n                  : nothing}\n              </div>`\n          }\n          const table = inputTableAt(settings, setting)\n          const input = inputs.find(i => i.id === table.input)\n          return html`<span>${setting.label}</span>\n            <select ?disabled=${this.locked} @change=${(e: Event) => write(withInputTable(settings, setting, (e.target as HTMLSelectElement).value || undefined, table.values))}>\n              <option value=\"\" ?selected=${!table.input}>${i18next.t('figure.label.data-none')}</option>\n              ${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>`)}\n            </select>\n            ${table.input\n              ? html`<span></span>\n                  <div table>\n                    ${setting.keys.map(\n                      key => html`<span>${key}</span>\n                        <input\n                          type=\"number\"\n                          step=\"any\"\n                          min=${input?.min ?? ''}\n                          max=${input?.max ?? ''}\n                          .value=${String(table.values[key])}\n                          ?disabled=${this.locked}\n                          @change=${(e: Event) => {\n                            const n = (e.target as HTMLInputElement).valueAsNumber\n                            if (!Number.isFinite(n)) return this.requestUpdate()\n                            write(withInputTable(settings, setting, table.input, { ...table.values, [key]: n }))\n                          }}\n                        />`\n                    )}\n                  </div>`\n              : nothing}`\n        })}\n      </div>\n      ${issues.map(reason => html`<p warn>${reason}</p>`)}`\n  }\n\n  private setConsumer(asset: FigureAsset, name: string, on: boolean) {\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names: namesWith(asset, name, on) } }, bubbles: true, composed: true }))\n  }\n\n  private setRung(which: Rung) {\n    /* The ladder sets the shared names; a product's capabilities stay as they are. */\n    const consumers = (this.asset?.document.capabilities.names ?? []).filter(n => n.includes('.'))\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names: [...RUNGS[which], ...consumers] } }, bubbles: true, composed: true }))\n  }\n\n  private setItem(item: boolean) {\n    this.dispatchEvent(new CustomEvent('command', { detail: { action: { kind: 'set-item', item } }, bubbles: true, composed: true }))\n  }\n\n  private pick(part: string) {\n    this.dispatchEvent(new CustomEvent('select-part', { detail: { id: part }, bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist-client/modeller/figure-clips.js

@@ -3,6 +3,7 @@ import '@material/web/icon/icon.js';
 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 { clipGroupsOf, clipsOf, freeGroupIdOf, groupEdit, poseAt, trackEdit, undrivenOf, withKey, withoutKey } from './clips.js';
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
 import { HelpToggles } from './help.js';
@@ -148,7 +149,7 @@ let FigureClips = 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/dist-client/modeller/figure-clips.js.map

@@ -1 +1 @@
-{"version":3,"file":"figure-clips.js","sourceRoot":"","sources":["../../client/modeller/figure-clips.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport type { FigureAsset } from '@hatiolab/figure-model'\n\nimport { clipGroupsOf, clipsOf, freeGroupIdOf, groupEdit, poseAt, trackEdit, undrivenOf, withKey, withoutKey, type Clip, type ClipGroup, type ClipTrack } from './clips.js'\nimport { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'\nimport { HelpToggles } from './help.js'\n\n/** A value as a person reads it: at most three decimals, the float's last digits (14.399999999999999) left out. */\nconst shown = (value: number) => value.toLocaleString(undefined, { maximumFractionDigits: 3 })\n\n/**\n * 클립 — controls played by keys over time. A clip is one clock; each track plays one\n * control. Scrubbing a clip shows its pose at that moment (one batch of input changes, not saved as the default); a key\n * is added at the scrubbed moment with the control's value there, so a pose is made with the controls' sliders and\n * then kept as a key. Every change is one part edit.\n *\n * Clips of one motion group play one at a time on the same controls -- idle, walk, run (ADR-0051 §3.2): only clips of\n * one group may play the same control, so a new clip is put in a group as it is made when it is to take one.\n */\n@customElement('figure-clips')\nexport class FigureClips extends localize(i18next)(LitElement) {\n  private readonly help = new HelpToggles(this)\n  static styles = [SidePanelStyles, css`\n    :host {\n      display: block;\n    }\n    section[clip] {\n      display: grid;\n      gap: 8px;\n      padding: 8px;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n    }\n    div[row] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 72px;\n      gap: 6px;\n      align-items: center;\n    }\n    div[track] {\n      display: grid;\n      gap: 4px;\n      padding-top: 6px;\n      border-top: 1px dashed var(--md-sys-color-outline-variant);\n    }\n    /*\n      The track's name on its own line, then how it repeats and the button that removes it. A flex row let the shared\n      full-width select and button squeeze the name to one letter a line (user, 2026-09-24).\n    */\n    div[track-head] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 30px;\n      gap: 4px 6px;\n      align-items: center;\n    }\n    div[track-head] strong {\n      grid-column: 1 / -1;\n      min-width: 0;\n      overflow-wrap: anywhere;\n    }\n    div[track-head] button[act] {\n      width: 30px;\n      min-height: var(--figure-control-height);\n      margin: 0;\n      padding: 0;\n    }\n    div[keys] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n    }\n    span[key] {\n      display: inline-flex;\n      align-items: center;\n      gap: 2px;\n      padding: 0 2px 0 8px;\n      border-radius: 999em;\n      background: var(--md-sys-color-surface-container);\n      font-variant-numeric: tabular-nums;\n    }\n    span[key] button {\n      width: 22px;\n      height: 22px;\n      padding: 0;\n      border: none;\n      background: none;\n    }\n    md-icon {\n      font-size: 16px;\n      width: 16px;\n      height: 16px;\n    }\n  `]\n\n  @property({ attribute: false }) asset?: FigureAsset\n  /** The values the editor holds now, by input id -- what a new key takes. */\n  @property({ attribute: false }) values: Record<string, number> = {}\n  @property({ type: Boolean }) locked = false\n\n  /** Where each clip is scrubbed to, in seconds. */\n  @state() private at: Record<string, number> = {}\n  @state() private adding = { state: '', clip: '', name: '', duration: 2, group: '' }\n  @state() private grouping = { clip: '', label: '' }\n\n  render() {\n    const asset = this.asset\n    if (!asset) return nothing\n    const clips = clipsOf(asset)\n    /* Nothing to play yet: said inside the section it belongs to, with the section's own margins. */\n    const empty = !clips.length && !undrivenOf(asset).length && !asset.motionGroups?.length\n    return html`\n      <section>\n        <h3>${i18next.t('figure.label.clips')}${this.help.button('figure.text.clips-explained')}</h3>\n        ${this.help.hint('figure.text.clips-explained')}\n        ${clips.map(clip => this.renderClip(clip))}\n        ${empty ? html`<p hint>${i18next.t('figure.text.no-clips')}</p>` : nothing}\n      </section>\n      ${empty ? nothing : this.renderAdd(asset, clips)} ${this.renderGroups(asset)}\n    `\n  }\n\n  private renderClip(clip: Clip) {\n    const at = Math.min(this.at[clip.name] ?? 0, clip.duration)\n    const number = (e: Event) => (e.target as HTMLInputElement).valueAsNumber\n    return html`<section clip>\n      <div form>\n        <span>${i18next.t('figure.label.clip-name')}</span>\n        <input .value=${clip.name} ?disabled=${this.locked} @change=${(e: Event) => this.edit({ kind: 'set-clip', clip: clip.name, name: (e.target as HTMLInputElement).value })} />\n        <span>${i18next.t('figure.label.clip-duration')}</span>\n        <input type=\"number\" min=\"0.1\" step=\"any\" .value=${String(clip.duration)} ?disabled=${this.locked} @change=${(e: Event) => this.edit({ kind: 'set-clip', clip: clip.name, duration: number(e) })} />\n      </div>\n      <div row>\n        <input\n          type=\"range\"\n          min=\"0\"\n          max=${clip.duration}\n          step=${clip.duration / 100}\n          .value=${String(at)}\n          ?disabled=${this.locked}\n          aria-label=${i18next.t('figure.label.clip-time')}\n          @input=${(e: Event) => this.scrub(clip, number(e), true)}\n          @change=${(e: Event) => this.scrub(clip, number(e))}\n        />\n        <small>${at.toFixed(2)} s</small>\n      </div>\n      ${clip.tracks.map(track => this.renderTrack(clip, track, at))}\n    </section>`\n  }\n\n  private renderTrack(clip: Clip, track: ClipTrack, at: number) {\n    const current = this.values[track.state]\n    return html`<div track>\n      <div track-head>\n        <strong>${track.label} <small>(${track.unit})</small></strong>\n        <select\n          aria-label=${i18next.t('figure.label.clip-loop')}\n          ?disabled=${this.locked}\n          @change=${(e: Event) => this.edit(trackEdit(clip, track, { loop: (e.target as HTMLSelectElement).value as 'wrap' | 'hold' }))}\n        >\n          <option value=\"wrap\" ?selected=${track.loop === 'wrap'}>${i18next.t('figure.label.clip-loop-wrap')}</option>\n          <option value=\"hold\" ?selected=${track.loop === 'hold'}>${i18next.t('figure.label.clip-loop-hold')}</option>\n        </select>\n        <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-track')} @click=${() => this.edit({ kind: 'remove-driver', state: track.state, clip: clip.name })}>\n          <md-icon>close</md-icon>\n        </button>\n      </div>\n      <div keys>\n        ${track.keys.map(\n          (key, i) => html`<span key\n            >${key.seconds}s → ${shown(key.value)}\n            <button\n              ?disabled=${this.locked || !withoutKey(track.keys, i)}\n              title=${i18next.t('figure.button.remove-key')}\n              aria-label=${i18next.t('figure.button.remove-key')}\n              @click=${() => this.edit(trackEdit(clip, track, { keys: withoutKey(track.keys, i)! }))}\n            >\n              <md-icon>close</md-icon>\n            </button></span\n          >`\n        )}\n      </div>\n      <button\n        act\n        ?disabled=${this.locked || current === undefined}\n        @click=${() => this.edit(trackEdit(clip, track, { keys: withKey(track.keys, { seconds: Math.round(at * 1000) / 1000, value: current! }) }))}\n      >\n        <md-icon>add</md-icon>${i18next.t('figure.button.add-key-here', { seconds: at.toFixed(2), value: current === undefined ? '' : shown(current) })}\n      </button>\n    </div>`\n  }\n\n  private renderAdd(asset: FigureAsset, clips: Clip[]) {\n    const a = this.adding\n    const joining = clips.find(c => c.name === a.clip)\n    const { groups } = clipGroupsOf(asset)\n    const group = joining ? undefined : groups.find(g => g.id === a.group)\n    /* The controls this clip may take: not played by it yet, and by no clip outside its group. */\n    const free = undrivenOf(asset, joining?.name ?? '', group?.id)\n    const stateId = free.includes(a.state) ? a.state : free[0]\n    const name = joining ? joining.name : a.name.trim()\n    const input = asset.document.model.inputs.find(i => i.id === stateId)\n    const duration = joining ? joining.duration : a.duration\n    /* A new clip takes a name no clip has: the same name would rewrite that clip's track, not add one. */\n    const taken = !joining && clips.some(c => c.name === name)\n    const ready = !!name && !taken && duration > 0 && !!input\n    return html`<section><h3>${i18next.t('figure.label.add-track')}</h3>\n      <div form>\n        <span>${i18next.t('figure.label.controls')}</span>\n        <select ?disabled=${!free.length} @change=${(e: Event) => (this.adding = { ...a, state: (e.target as HTMLSelectElement).value })}>\n          ${free.map(id => html`<option value=${id} ?selected=${id === stateId}>${asset.stateInputs?.[id]?.label ?? id}</option>`)}\n        </select>\n        <span>${i18next.t('figure.label.clip')}</span>\n        <select @change=${(e: Event) => (this.adding = { ...a, clip: (e.target as HTMLSelectElement).value })}>\n          <option value=\"\" ?selected=${!joining}>${i18next.t('figure.label.new-clip')}</option>\n          ${clips.map(c => html`<option value=${c.name} ?selected=${c === joining}>${c.name}</option>`)}\n        </select>\n        ${joining || !groups.length\n          ? nothing\n          : html`<span>${i18next.t('figure.label.motion-group')}</span>\n              <select @change=${(e: Event) => (this.adding = { ...a, group: (e.target as HTMLSelectElement).value })}>\n                <option value=\"\" ?selected=${!group}>${i18next.t('figure.label.no-motion-group')}</option>\n                ${groups.map(g => html`<option value=${g.id} ?selected=${g === group}>${g.label}</option>`)}\n              </select>`}\n        ${joining\n          ? nothing\n          : html`<span>${i18next.t('figure.label.clip-name')}</span>\n              <input .value=${a.name} placeholder=\"cycle\" @input=${(e: Event) => (this.adding = { ...a, name: (e.target as HTMLInputElement).value })} />\n              <span>${i18next.t('figure.label.clip-duration')}</span>\n              <input type=\"number\" min=\"0.1\" step=\"any\" .value=${String(a.duration)} @change=${(e: Event) => (this.adding = { ...a, duration: (e.target as HTMLInputElement).valueAsNumber })} />`}\n      </div>\n      <button\n        act\n        ?disabled=${this.locked || !ready}\n        @click=${() => {\n          this.edit({\n            kind: 'set-driver',\n            state: stateId,\n            clip: name,\n            ...(joining ? {} : { duration }),\n            ...(group ? { group: group.id } : {}),\n            keys: [\n              { seconds: 0, value: input!.min },\n              { seconds: duration, value: input!.max }\n            ]\n          })\n          /* The name was this clip's; the next new clip is named again. */\n          this.adding = { ...a, name: '', state: '' }\n        }}\n      >\n        <md-icon>add</md-icon>${i18next.t('figure.button.add-track')}\n      </button></section>`\n  }\n\n  /**\n   * The motion groups: a name, the clip that plays until another is chosen, how long a change of clip blends, and the\n   * clips each holds. A group is made from a clip in none; a clip in none joins one here. Every change is one edit.\n   */\n  private renderGroups(asset: FigureAsset) {\n    const { groups, free } = clipGroupsOf(asset)\n    if (!groups.length && !free.length) return nothing\n    const g = this.grouping\n    const first = free.includes(g.clip) ? g.clip : free[0]\n    return html`<section>\n      <h3>${i18next.t('figure.label.motion-groups')}${this.help.button('figure.text.motion-groups-explained')}</h3>\n      ${this.help.hint('figure.text.motion-groups-explained')}\n      ${groups.map(group => this.renderGroup(group, free))}\n      ${free.length\n        ? html`<div form>\n              <span>${i18next.t('figure.label.motion-group-name')}</span>\n              <input .value=${g.label} placeholder=${i18next.t('figure.label.motion-group')} @input=${(e: Event) => (this.grouping = { ...g, label: (e.target as HTMLInputElement).value })} />\n              <span>${i18next.t('figure.label.clip')}</span>\n              <select @change=${(e: Event) => (this.grouping = { ...g, clip: (e.target as HTMLSelectElement).value })}>\n                ${free.map(c => html`<option value=${c} ?selected=${c === first}>${c}</option>`)}\n              </select>\n            </div>\n            <button\n              act\n              ?disabled=${this.locked || !first || !g.label.trim()}\n              @click=${() => {\n                this.edit({ kind: 'set-motion-group', group: { id: freeGroupIdOf(asset), label: g.label.trim(), clips: [first!], defaultClip: first!, transitionSeconds: 0.2 } })\n                this.grouping = { clip: '', label: '' }\n              }}\n            >\n              <md-icon>add</md-icon>${i18next.t('figure.button.add-motion-group')}\n            </button>`\n        : nothing}\n    </section>`\n  }\n\n  private renderGroup(group: ClipGroup, free: string[]) {\n    const value = (e: Event) => (e.target as HTMLInputElement | HTMLSelectElement).value\n    return html`<section clip>\n      <div track-head>\n        <strong>${group.label}</strong>\n        <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-motion-group')} @click=${() => this.edit({ kind: 'remove-motion-group', id: group.id })}>\n          <md-icon>close</md-icon>\n        </button>\n      </div>\n      <div form>\n        <span>${i18next.t('figure.label.motion-group-name')}</span>\n        <input .value=${group.label} ?disabled=${this.locked} @change=${(e: Event) => value(e).trim() && this.edit(groupEdit(group, { label: value(e).trim() }))} />\n        <span>${i18next.t('figure.label.motion-group-default')}</span>\n        <select ?disabled=${this.locked} @change=${(e: Event) => this.edit(groupEdit(group, { defaultClip: value(e) }))}>\n          ${group.clips.map(c => html`<option value=${c} ?selected=${c === group.defaultClip}>${c}</option>`)}\n        </select>\n        <span>${i18next.t('figure.label.motion-group-transition')}</span>\n        <input\n          type=\"number\"\n          min=\"0\"\n          step=\"any\"\n          .value=${String(group.transitionSeconds)}\n          ?disabled=${this.locked}\n          @change=${(e: Event) => this.edit(groupEdit(group, { transitionSeconds: (e.target as HTMLInputElement).valueAsNumber }))}\n        />\n      </div>\n      <div keys>\n        ${group.clips.map(\n          c => html`<span key\n            >${c}\n            <button\n              ?disabled=${this.locked || group.clips.length < 2}\n              title=${i18next.t('figure.button.remove-clip-from-group')}\n              aria-label=${i18next.t('figure.button.remove-clip-from-group')}\n              @click=${() => {\n                const clips = group.clips.filter(x => x !== c)\n                this.edit(groupEdit(group, { clips, defaultClip: group.defaultClip === c ? clips[0]! : group.defaultClip }))\n              }}\n            >\n              <md-icon>close</md-icon>\n            </button></span\n          >`\n        )}\n      </div>\n      ${free.length\n        ? html`<select\n            aria-label=${i18next.t('figure.button.add-clip-to-group')}\n            ?disabled=${this.locked}\n            @change=${(e: Event) => {\n              const c = value(e)\n              if (c) this.edit(groupEdit(group, { clips: [...group.clips, c] }))\n              ;(e.target as HTMLSelectElement).value = ''\n            }}\n          >\n            <option value=\"\" selected>${i18next.t('figure.button.add-clip-to-group')}</option>\n            ${free.map(c => html`<option value=${c}>${c}</option>`)}\n          </select>`\n        : nothing}\n    </section>`\n  }\n\n  /** Show the clip's pose at a moment: one batch of input changes, not saved as the default. */\n  /** Show the clip's pose at a moment. While the bar is dragged the pose is live (drawn, not recorded); the release\n   * applies it as one batch of input changes. */\n  private scrub(clip: Clip, seconds: number, live = false) {\n    if (!this.asset || !Number.isFinite(seconds)) return\n    this.at = { ...this.at, [clip.name]: seconds }\n    const changes = poseAt(this.asset, clip.name, seconds)\n    if (!changes.length) return\n    if (live) {\n      const values = Object.fromEntries(changes.map(c => [c.input, c.value]))\n      this.dispatchEvent(new CustomEvent('states-live', { detail: { values }, bubbles: true, composed: true }))\n      return\n    }\n    this.dispatchEvent(new CustomEvent('states', { detail: { changes }, bubbles: true, composed: true }))\n  }\n\n  private edit(edit: unknown) {\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"figure-clips.js","sourceRoot":"","sources":["../../client/modeller/figure-clips.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { unitWord } from './unit-words.js'\nimport type { FigureAsset } from '@hatiolab/figure-model'\n\nimport { clipGroupsOf, clipsOf, freeGroupIdOf, groupEdit, poseAt, trackEdit, undrivenOf, withKey, withoutKey, type Clip, type ClipGroup, type ClipTrack } from './clips.js'\nimport { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'\nimport { HelpToggles } from './help.js'\n\n/** A value as a person reads it: at most three decimals, the float's last digits (14.399999999999999) left out. */\nconst shown = (value: number) => value.toLocaleString(undefined, { maximumFractionDigits: 3 })\n\n/**\n * 클립 — controls played by keys over time. A clip is one clock; each track plays one\n * control. Scrubbing a clip shows its pose at that moment (one batch of input changes, not saved as the default); a key\n * is added at the scrubbed moment with the control's value there, so a pose is made with the controls' sliders and\n * then kept as a key. Every change is one part edit.\n *\n * Clips of one motion group play one at a time on the same controls -- idle, walk, run (ADR-0051 §3.2): only clips of\n * one group may play the same control, so a new clip is put in a group as it is made when it is to take one.\n */\n@customElement('figure-clips')\nexport class FigureClips extends localize(i18next)(LitElement) {\n  private readonly help = new HelpToggles(this)\n  static styles = [SidePanelStyles, css`\n    :host {\n      display: block;\n    }\n    section[clip] {\n      display: grid;\n      gap: 8px;\n      padding: 8px;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n    }\n    div[row] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 72px;\n      gap: 6px;\n      align-items: center;\n    }\n    div[track] {\n      display: grid;\n      gap: 4px;\n      padding-top: 6px;\n      border-top: 1px dashed var(--md-sys-color-outline-variant);\n    }\n    /*\n      The track's name on its own line, then how it repeats and the button that removes it. A flex row let the shared\n      full-width select and button squeeze the name to one letter a line (user, 2026-09-24).\n    */\n    div[track-head] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 30px;\n      gap: 4px 6px;\n      align-items: center;\n    }\n    div[track-head] strong {\n      grid-column: 1 / -1;\n      min-width: 0;\n      overflow-wrap: anywhere;\n    }\n    div[track-head] button[act] {\n      width: 30px;\n      min-height: var(--figure-control-height);\n      margin: 0;\n      padding: 0;\n    }\n    div[keys] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n    }\n    span[key] {\n      display: inline-flex;\n      align-items: center;\n      gap: 2px;\n      padding: 0 2px 0 8px;\n      border-radius: 999em;\n      background: var(--md-sys-color-surface-container);\n      font-variant-numeric: tabular-nums;\n    }\n    span[key] button {\n      width: 22px;\n      height: 22px;\n      padding: 0;\n      border: none;\n      background: none;\n    }\n    md-icon {\n      font-size: 16px;\n      width: 16px;\n      height: 16px;\n    }\n  `]\n\n  @property({ attribute: false }) asset?: FigureAsset\n  /** The values the editor holds now, by input id -- what a new key takes. */\n  @property({ attribute: false }) values: Record<string, number> = {}\n  @property({ type: Boolean }) locked = false\n\n  /** Where each clip is scrubbed to, in seconds. */\n  @state() private at: Record<string, number> = {}\n  @state() private adding = { state: '', clip: '', name: '', duration: 2, group: '' }\n  @state() private grouping = { clip: '', label: '' }\n\n  render() {\n    const asset = this.asset\n    if (!asset) return nothing\n    const clips = clipsOf(asset)\n    /* Nothing to play yet: said inside the section it belongs to, with the section's own margins. */\n    const empty = !clips.length && !undrivenOf(asset).length && !asset.motionGroups?.length\n    return html`\n      <section>\n        <h3>${i18next.t('figure.label.clips')}${this.help.button('figure.text.clips-explained')}</h3>\n        ${this.help.hint('figure.text.clips-explained')}\n        ${clips.map(clip => this.renderClip(clip))}\n        ${empty ? html`<p hint>${i18next.t('figure.text.no-clips')}</p>` : nothing}\n      </section>\n      ${empty ? nothing : this.renderAdd(asset, clips)} ${this.renderGroups(asset)}\n    `\n  }\n\n  private renderClip(clip: Clip) {\n    const at = Math.min(this.at[clip.name] ?? 0, clip.duration)\n    const number = (e: Event) => (e.target as HTMLInputElement).valueAsNumber\n    return html`<section clip>\n      <div form>\n        <span>${i18next.t('figure.label.clip-name')}</span>\n        <input .value=${clip.name} ?disabled=${this.locked} @change=${(e: Event) => this.edit({ kind: 'set-clip', clip: clip.name, name: (e.target as HTMLInputElement).value })} />\n        <span>${i18next.t('figure.label.clip-duration')}</span>\n        <input type=\"number\" min=\"0.1\" step=\"any\" .value=${String(clip.duration)} ?disabled=${this.locked} @change=${(e: Event) => this.edit({ kind: 'set-clip', clip: clip.name, duration: number(e) })} />\n      </div>\n      <div row>\n        <input\n          type=\"range\"\n          min=\"0\"\n          max=${clip.duration}\n          step=${clip.duration / 100}\n          .value=${String(at)}\n          ?disabled=${this.locked}\n          aria-label=${i18next.t('figure.label.clip-time')}\n          @input=${(e: Event) => this.scrub(clip, number(e), true)}\n          @change=${(e: Event) => this.scrub(clip, number(e))}\n        />\n        <small>${at.toFixed(2)} s</small>\n      </div>\n      ${clip.tracks.map(track => this.renderTrack(clip, track, at))}\n    </section>`\n  }\n\n  private renderTrack(clip: Clip, track: ClipTrack, at: number) {\n    const current = this.values[track.state]\n    return html`<div track>\n      <div track-head>\n        <strong>${track.label} <small>(${unitWord(track.unit)})</small></strong>\n        <select\n          aria-label=${i18next.t('figure.label.clip-loop')}\n          ?disabled=${this.locked}\n          @change=${(e: Event) => this.edit(trackEdit(clip, track, { loop: (e.target as HTMLSelectElement).value as 'wrap' | 'hold' }))}\n        >\n          <option value=\"wrap\" ?selected=${track.loop === 'wrap'}>${i18next.t('figure.label.clip-loop-wrap')}</option>\n          <option value=\"hold\" ?selected=${track.loop === 'hold'}>${i18next.t('figure.label.clip-loop-hold')}</option>\n        </select>\n        <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-track')} @click=${() => this.edit({ kind: 'remove-driver', state: track.state, clip: clip.name })}>\n          <md-icon>close</md-icon>\n        </button>\n      </div>\n      <div keys>\n        ${track.keys.map(\n          (key, i) => html`<span key\n            >${key.seconds}s → ${shown(key.value)}\n            <button\n              ?disabled=${this.locked || !withoutKey(track.keys, i)}\n              title=${i18next.t('figure.button.remove-key')}\n              aria-label=${i18next.t('figure.button.remove-key')}\n              @click=${() => this.edit(trackEdit(clip, track, { keys: withoutKey(track.keys, i)! }))}\n            >\n              <md-icon>close</md-icon>\n            </button></span\n          >`\n        )}\n      </div>\n      <button\n        act\n        ?disabled=${this.locked || current === undefined}\n        @click=${() => this.edit(trackEdit(clip, track, { keys: withKey(track.keys, { seconds: Math.round(at * 1000) / 1000, value: current! }) }))}\n      >\n        <md-icon>add</md-icon>${i18next.t('figure.button.add-key-here', { seconds: at.toFixed(2), value: current === undefined ? '' : shown(current) })}\n      </button>\n    </div>`\n  }\n\n  private renderAdd(asset: FigureAsset, clips: Clip[]) {\n    const a = this.adding\n    const joining = clips.find(c => c.name === a.clip)\n    const { groups } = clipGroupsOf(asset)\n    const group = joining ? undefined : groups.find(g => g.id === a.group)\n    /* The controls this clip may take: not played by it yet, and by no clip outside its group. */\n    const free = undrivenOf(asset, joining?.name ?? '', group?.id)\n    const stateId = free.includes(a.state) ? a.state : free[0]\n    const name = joining ? joining.name : a.name.trim()\n    const input = asset.document.model.inputs.find(i => i.id === stateId)\n    const duration = joining ? joining.duration : a.duration\n    /* A new clip takes a name no clip has: the same name would rewrite that clip's track, not add one. */\n    const taken = !joining && clips.some(c => c.name === name)\n    const ready = !!name && !taken && duration > 0 && !!input\n    return html`<section><h3>${i18next.t('figure.label.add-track')}</h3>\n      <div form>\n        <span>${i18next.t('figure.label.controls')}</span>\n        <select ?disabled=${!free.length} @change=${(e: Event) => (this.adding = { ...a, state: (e.target as HTMLSelectElement).value })}>\n          ${free.map(id => html`<option value=${id} ?selected=${id === stateId}>${asset.stateInputs?.[id]?.label ?? id}</option>`)}\n        </select>\n        <span>${i18next.t('figure.label.clip')}</span>\n        <select @change=${(e: Event) => (this.adding = { ...a, clip: (e.target as HTMLSelectElement).value })}>\n          <option value=\"\" ?selected=${!joining}>${i18next.t('figure.label.new-clip')}</option>\n          ${clips.map(c => html`<option value=${c.name} ?selected=${c === joining}>${c.name}</option>`)}\n        </select>\n        ${joining || !groups.length\n          ? nothing\n          : html`<span>${i18next.t('figure.label.motion-group')}</span>\n              <select @change=${(e: Event) => (this.adding = { ...a, group: (e.target as HTMLSelectElement).value })}>\n                <option value=\"\" ?selected=${!group}>${i18next.t('figure.label.no-motion-group')}</option>\n                ${groups.map(g => html`<option value=${g.id} ?selected=${g === group}>${g.label}</option>`)}\n              </select>`}\n        ${joining\n          ? nothing\n          : html`<span>${i18next.t('figure.label.clip-name')}</span>\n              <input .value=${a.name} placeholder=\"cycle\" @input=${(e: Event) => (this.adding = { ...a, name: (e.target as HTMLInputElement).value })} />\n              <span>${i18next.t('figure.label.clip-duration')}</span>\n              <input type=\"number\" min=\"0.1\" step=\"any\" .value=${String(a.duration)} @change=${(e: Event) => (this.adding = { ...a, duration: (e.target as HTMLInputElement).valueAsNumber })} />`}\n      </div>\n      <button\n        act\n        ?disabled=${this.locked || !ready}\n        @click=${() => {\n          this.edit({\n            kind: 'set-driver',\n            state: stateId,\n            clip: name,\n            ...(joining ? {} : { duration }),\n            ...(group ? { group: group.id } : {}),\n            keys: [\n              { seconds: 0, value: input!.min },\n              { seconds: duration, value: input!.max }\n            ]\n          })\n          /* The name was this clip's; the next new clip is named again. */\n          this.adding = { ...a, name: '', state: '' }\n        }}\n      >\n        <md-icon>add</md-icon>${i18next.t('figure.button.add-track')}\n      </button></section>`\n  }\n\n  /**\n   * The motion groups: a name, the clip that plays until another is chosen, how long a change of clip blends, and the\n   * clips each holds. A group is made from a clip in none; a clip in none joins one here. Every change is one edit.\n   */\n  private renderGroups(asset: FigureAsset) {\n    const { groups, free } = clipGroupsOf(asset)\n    if (!groups.length && !free.length) return nothing\n    const g = this.grouping\n    const first = free.includes(g.clip) ? g.clip : free[0]\n    return html`<section>\n      <h3>${i18next.t('figure.label.motion-groups')}${this.help.button('figure.text.motion-groups-explained')}</h3>\n      ${this.help.hint('figure.text.motion-groups-explained')}\n      ${groups.map(group => this.renderGroup(group, free))}\n      ${free.length\n        ? html`<div form>\n              <span>${i18next.t('figure.label.motion-group-name')}</span>\n              <input .value=${g.label} placeholder=${i18next.t('figure.label.motion-group')} @input=${(e: Event) => (this.grouping = { ...g, label: (e.target as HTMLInputElement).value })} />\n              <span>${i18next.t('figure.label.clip')}</span>\n              <select @change=${(e: Event) => (this.grouping = { ...g, clip: (e.target as HTMLSelectElement).value })}>\n                ${free.map(c => html`<option value=${c} ?selected=${c === first}>${c}</option>`)}\n              </select>\n            </div>\n            <button\n              act\n              ?disabled=${this.locked || !first || !g.label.trim()}\n              @click=${() => {\n                this.edit({ kind: 'set-motion-group', group: { id: freeGroupIdOf(asset), label: g.label.trim(), clips: [first!], defaultClip: first!, transitionSeconds: 0.2 } })\n                this.grouping = { clip: '', label: '' }\n              }}\n            >\n              <md-icon>add</md-icon>${i18next.t('figure.button.add-motion-group')}\n            </button>`\n        : nothing}\n    </section>`\n  }\n\n  private renderGroup(group: ClipGroup, free: string[]) {\n    const value = (e: Event) => (e.target as HTMLInputElement | HTMLSelectElement).value\n    return html`<section clip>\n      <div track-head>\n        <strong>${group.label}</strong>\n        <button act ?disabled=${this.locked} title=${i18next.t('figure.button.remove-motion-group')} @click=${() => this.edit({ kind: 'remove-motion-group', id: group.id })}>\n          <md-icon>close</md-icon>\n        </button>\n      </div>\n      <div form>\n        <span>${i18next.t('figure.label.motion-group-name')}</span>\n        <input .value=${group.label} ?disabled=${this.locked} @change=${(e: Event) => value(e).trim() && this.edit(groupEdit(group, { label: value(e).trim() }))} />\n        <span>${i18next.t('figure.label.motion-group-default')}</span>\n        <select ?disabled=${this.locked} @change=${(e: Event) => this.edit(groupEdit(group, { defaultClip: value(e) }))}>\n          ${group.clips.map(c => html`<option value=${c} ?selected=${c === group.defaultClip}>${c}</option>`)}\n        </select>\n        <span>${i18next.t('figure.label.motion-group-transition')}</span>\n        <input\n          type=\"number\"\n          min=\"0\"\n          step=\"any\"\n          .value=${String(group.transitionSeconds)}\n          ?disabled=${this.locked}\n          @change=${(e: Event) => this.edit(groupEdit(group, { transitionSeconds: (e.target as HTMLInputElement).valueAsNumber }))}\n        />\n      </div>\n      <div keys>\n        ${group.clips.map(\n          c => html`<span key\n            >${c}\n            <button\n              ?disabled=${this.locked || group.clips.length < 2}\n              title=${i18next.t('figure.button.remove-clip-from-group')}\n              aria-label=${i18next.t('figure.button.remove-clip-from-group')}\n              @click=${() => {\n                const clips = group.clips.filter(x => x !== c)\n                this.edit(groupEdit(group, { clips, defaultClip: group.defaultClip === c ? clips[0]! : group.defaultClip }))\n              }}\n            >\n              <md-icon>close</md-icon>\n            </button></span\n          >`\n        )}\n      </div>\n      ${free.length\n        ? html`<select\n            aria-label=${i18next.t('figure.button.add-clip-to-group')}\n            ?disabled=${this.locked}\n            @change=${(e: Event) => {\n              const c = value(e)\n              if (c) this.edit(groupEdit(group, { clips: [...group.clips, c] }))\n              ;(e.target as HTMLSelectElement).value = ''\n            }}\n          >\n            <option value=\"\" selected>${i18next.t('figure.button.add-clip-to-group')}</option>\n            ${free.map(c => html`<option value=${c}>${c}</option>`)}\n          </select>`\n        : nothing}\n    </section>`\n  }\n\n  /** Show the clip's pose at a moment: one batch of input changes, not saved as the default. */\n  /** Show the clip's pose at a moment. While the bar is dragged the pose is live (drawn, not recorded); the release\n   * applies it as one batch of input changes. */\n  private scrub(clip: Clip, seconds: number, live = false) {\n    if (!this.asset || !Number.isFinite(seconds)) return\n    this.at = { ...this.at, [clip.name]: seconds }\n    const changes = poseAt(this.asset, clip.name, seconds)\n    if (!changes.length) return\n    if (live) {\n      const values = Object.fromEntries(changes.map(c => [c.input, c.value]))\n      this.dispatchEvent(new CustomEvent('states-live', { detail: { values }, bubbles: true, composed: true }))\n      return\n    }\n    this.dispatchEvent(new CustomEvent('states', { detail: { changes }, bubbles: true, composed: true }))\n  }\n\n  private edit(edit: unknown) {\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist-client/modeller/figure-controls.js

@@ -3,6 +3,7 @@ import '@material/web/icon/icon.js';
 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 { controlsOf, poseAsDefault, poseDiffers } from '@things-factory/figure-viewer/dist-client/controls.js';
 import { dialShape } from './angle-dial.js';
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
@@ -118,7 +119,7 @@ let FigureControls = 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"
@@ -167,7 +168,7 @@ let FigureControls = 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) => policy({ label: e.target.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) => policy({ min: number(e) })} />
           <input type="number" step="any" .value=${String(c.max)} ?disabled=${this.locked} @change=${(e) => policy({ max: number(e) })} />
@@ -175,7 +176,7 @@ let FigureControls = 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) => 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>`;
     }
     /** While dragging: the value is told as live -- the editor draws that pose at once and records nothing. */

package/dist-client/modeller/figure-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"figure-controls.js","sourceRoot":"","sources":["../../client/modeller/figure-controls.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport type { FigureAsset } from '@hatiolab/figure-model'\n\nimport { controlsOf, poseAsDefault, poseDiffers, type Control } from '@things-factory/figure-viewer/dist-client/controls.js'\nimport { dialShape } from './angle-dial.js'\nimport { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'\n\n/**\n * The figure's controls and its pose tools: each value a board sets to pose the figure,\n * with a slider to try it, its name, range and travel time, and a button that keeps the pose being looked at as the\n * pose it stands in when placed.\n *\n * Trying a value is an input change (`state`, not saved as the default); naming, the range and the travel time are\n * one `set-state-input` part edit each; keeping the pose is one `set-state-defaults` edit. A control is made with\n * a motion on a part (「움직임」), which is where it gets its meaning.\n */\n@customElement('figure-controls')\nexport class FigureControls extends localize(i18next)(LitElement) {\n  static styles = [SidePanelStyles, css`\n    :host {\n      display: block;\n    }\n    /* One control, one line: its name, a dial for an angle, a thin slider, the value. */\n    div[control] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 18px minmax(64px, 1.2fr) 58px 22px;\n      align-items: center;\n      gap: 6px;\n      min-height: 28px;\n    }\n    div[control] > span[name] {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    div[control] > span[name] em {\n      font-style: normal;\n      font-size: var(--ui-t-micro, 11px);\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    div[control] input[type='number'] {\n      min-height: 24px;\n      padding: 2px 5px;\n      font-family: var(--ui-mono, ui-monospace, monospace);\n      text-align: right;\n    }\n    svg[dial] {\n      width: 18px;\n      height: 18px;\n    }\n    svg[dial] path {\n      fill: var(--md-sys-color-surface-container-high);\n    }\n    svg[dial] circle {\n      fill: none;\n      stroke: var(--md-sys-color-outline-variant);\n    }\n    svg[dial] line {\n      stroke: var(--md-sys-color-primary);\n      stroke-width: 2;\n      stroke-linecap: round;\n    }\n    button[more] {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 22px;\n      height: 22px;\n      padding: 0;\n      border: none;\n      border-radius: 4px;\n      background: none;\n      color: var(--md-sys-color-on-surface-variant);\n      cursor: pointer;\n    }\n    button[more][aria-expanded='true'] {\n      color: var(--md-sys-color-primary);\n      background: var(--md-sys-color-surface-container);\n    }\n    button[more] md-icon {\n      font-size: 16px;\n      width: 16px;\n      height: 16px;\n    }\n    /* The rarely changed: the name, the range, the travel time -- opened per control. */\n    div[settings] {\n      margin: 2px 0 8px;\n      padding: 6px 0 6px 8px;\n      border-left: 2px solid var(--md-sys-color-outline-variant);\n    }\n  `]\n\n  /** The asset being edited. */\n  @property({ attribute: false }) asset?: FigureAsset\n  /** The values the editor holds now, by input id. */\n  @property({ attribute: false }) values: Record<string, number> = {}\n  @property({ type: Boolean }) locked = false\n\n  /** Which control's settings are open. */\n  @state() private open = ''\n  /** Values in hand while a slider is dragged: the dial and the number follow them before the release commits. */\n  @state() private live: Record<string, number> = {}\n\n  render() {\n    if (!this.asset) return nothing\n    const controls = controlsOf(this.asset, this.values)\n    return html`<section>\n      <h3>${i18next.t('figure.label.controls')}</h3>\n      ${controls.length\n        ? html`${controls.map(control => this.renderControl(control))}\n            <button act ?disabled=${this.locked || !poseDiffers(controls)} @click=${() => this.edit(poseAsDefault(controls))}>\n              <md-icon>push_pin</md-icon>${i18next.t('figure.button.keep-pose')}\n            </button>`\n        : html`<p hint>${i18next.t('figure.text.no-controls')}</p>`}\n    </section>`\n  }\n\n  private renderControl(control: Control) {\n    const number = (e: Event) => (e.target as HTMLInputElement).valueAsNumber\n    const c = this.live[control.id] === undefined ? control : { ...control, value: this.live[control.id]! }\n    const open = this.open === c.id\n    return html`<div control>\n        <span name title=${c.id}>${c.label} <em>${c.unit}</em></span>\n        ${c.unit === 'deg' ? this.renderDial(c) : html`<span></span>`}\n        <input\n          type=\"range\"\n          min=${c.min}\n          max=${c.max}\n          step=${c.step}\n          .value=${String(c.value)}\n          ?disabled=${this.locked}\n          aria-label=${c.label}\n          @input=${(e: Event) => this.drag(c, number(e))}\n          @change=${(e: Event) => this.try(c, number(e))}\n        />\n        <input type=\"number\" step=\"any\" .value=${String(Math.round(c.value * 100) / 100)} ?disabled=${this.locked} aria-label=${c.label} @change=${(e: Event) => this.try(c, number(e))} />\n        <button\n          more\n          aria-expanded=${String(open)}\n          title=${i18next.t('figure.button.control-settings')}\n          aria-label=${i18next.t('figure.button.control-settings')}\n          @click=${() => (this.open = open ? '' : c.id)}\n        >\n          <md-icon>tune</md-icon>\n        </button>\n      </div>\n      ${open ? this.renderSettings(c) : nothing}`\n  }\n\n  private renderDial(c: Control) {\n    const dial = dialShape(c.min, c.max, c.value)\n    const span = dial.radius * 2 + 2\n    return html`<svg dial viewBox=\"0 0 ${span} ${span}\" aria-hidden=\"true\">\n      <path d=${dial.sector}></path>\n      <circle cx=${dial.centre.x} cy=${dial.centre.y} r=${dial.radius}></circle>\n      <line x1=${dial.centre.x} y1=${dial.centre.y} x2=${dial.needle.x} y2=${dial.needle.y}></line>\n    </svg>`\n  }\n\n  private renderSettings(c: Control) {\n    const policy = (patch: Partial<{ label: string; sweep: number; min: number; max: number }>) =>\n      this.edit({\n        kind: 'set-state-input',\n        input: c.id,\n        label: patch.label ?? (c.named ? c.label : undefined),\n        sweep: patch.sweep ?? c.sweep,\n        ...(patch.min !== undefined ? { min: patch.min } : {}),\n        ...(patch.max !== undefined ? { max: patch.max } : {})\n      })\n    const number = (e: Event) => (e.target as HTMLInputElement).valueAsNumber\n    return html`<div settings>\n      <div form>\n        <span>${i18next.t('figure.label.control-name')}</span>\n        <input .value=${c.named ? c.label : ''} placeholder=${c.id} ?disabled=${this.locked} @change=${(e: Event) => policy({ label: (e.target as HTMLInputElement).value })} />\n        <span>${i18next.t('figure.label.control-range')} (${c.unit})</span>\n        <div pair>\n          <input type=\"number\" step=\"any\" .value=${String(c.min)} ?disabled=${this.locked} @change=${(e: Event) => policy({ min: number(e) })} />\n          <input type=\"number\" step=\"any\" .value=${String(c.max)} ?disabled=${this.locked} @change=${(e: Event) => policy({ max: number(e) })} />\n        </div>\n        <span>${i18next.t('figure.label.control-sweep')}</span>\n        <input type=\"number\" min=\"0\" step=\"any\" .value=${String(c.sweep)} ?disabled=${this.locked} @change=${(e: Event) => policy({ sweep: number(e) })} />\n      </div>\n      <small>${i18next.t('figure.text.control-starts-at', { value: c.start, unit: c.unit })}</small>\n    </div>`\n  }\n\n  /** While dragging: the value is told as live -- the editor draws that pose at once and records nothing. */\n  private drag(c: Control, value: number) {\n    if (!Number.isFinite(value)) return\n    this.live = { ...this.live, [c.id]: value }\n    this.dispatchEvent(new CustomEvent('state-live', { detail: { input: c.id, value }, bubbles: true, composed: true }))\n  }\n\n  /** Try a value: the pose being looked at, clamped to the range. Not saved as the default. The slider sends it on\n   * release, so one drag is one step of the undo history rather than one per pixel. */\n  private try(c: Control, value: number) {\n    if (!Number.isFinite(value)) return\n    const clamped = Math.min(Math.max(value, c.min), c.max)\n    const { [c.id]: _released, ...rest } = this.live\n    this.live = rest\n    this.dispatchEvent(new CustomEvent('state', { detail: { input: c.id, unit: c.unit, value: clamped }, bubbles: true, composed: true }))\n  }\n\n  private edit(edit: unknown) {\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"figure-controls.js","sourceRoot":"","sources":["../../client/modeller/figure-controls.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { unitWord } from './unit-words.js'\nimport type { FigureAsset } from '@hatiolab/figure-model'\n\nimport { controlsOf, poseAsDefault, poseDiffers, type Control } from '@things-factory/figure-viewer/dist-client/controls.js'\nimport { dialShape } from './angle-dial.js'\nimport { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js'\n\n/**\n * The figure's controls and its pose tools: each value a board sets to pose the figure,\n * with a slider to try it, its name, range and travel time, and a button that keeps the pose being looked at as the\n * pose it stands in when placed.\n *\n * Trying a value is an input change (`state`, not saved as the default); naming, the range and the travel time are\n * one `set-state-input` part edit each; keeping the pose is one `set-state-defaults` edit. A control is made with\n * a motion on a part (「움직임」), which is where it gets its meaning.\n */\n@customElement('figure-controls')\nexport class FigureControls extends localize(i18next)(LitElement) {\n  static styles = [SidePanelStyles, css`\n    :host {\n      display: block;\n    }\n    /* One control, one line: its name, a dial for an angle, a thin slider, the value. */\n    div[control] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) 18px minmax(64px, 1.2fr) 58px 22px;\n      align-items: center;\n      gap: 6px;\n      min-height: 28px;\n    }\n    div[control] > span[name] {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    div[control] > span[name] em {\n      font-style: normal;\n      font-size: var(--ui-t-micro, 11px);\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    div[control] input[type='number'] {\n      min-height: 24px;\n      padding: 2px 5px;\n      font-family: var(--ui-mono, ui-monospace, monospace);\n      text-align: right;\n    }\n    svg[dial] {\n      width: 18px;\n      height: 18px;\n    }\n    svg[dial] path {\n      fill: var(--md-sys-color-surface-container-high);\n    }\n    svg[dial] circle {\n      fill: none;\n      stroke: var(--md-sys-color-outline-variant);\n    }\n    svg[dial] line {\n      stroke: var(--md-sys-color-primary);\n      stroke-width: 2;\n      stroke-linecap: round;\n    }\n    button[more] {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 22px;\n      height: 22px;\n      padding: 0;\n      border: none;\n      border-radius: 4px;\n      background: none;\n      color: var(--md-sys-color-on-surface-variant);\n      cursor: pointer;\n    }\n    button[more][aria-expanded='true'] {\n      color: var(--md-sys-color-primary);\n      background: var(--md-sys-color-surface-container);\n    }\n    button[more] md-icon {\n      font-size: 16px;\n      width: 16px;\n      height: 16px;\n    }\n    /* The rarely changed: the name, the range, the travel time -- opened per control. */\n    div[settings] {\n      margin: 2px 0 8px;\n      padding: 6px 0 6px 8px;\n      border-left: 2px solid var(--md-sys-color-outline-variant);\n    }\n  `]\n\n  /** The asset being edited. */\n  @property({ attribute: false }) asset?: FigureAsset\n  /** The values the editor holds now, by input id. */\n  @property({ attribute: false }) values: Record<string, number> = {}\n  @property({ type: Boolean }) locked = false\n\n  /** Which control's settings are open. */\n  @state() private open = ''\n  /** Values in hand while a slider is dragged: the dial and the number follow them before the release commits. */\n  @state() private live: Record<string, number> = {}\n\n  render() {\n    if (!this.asset) return nothing\n    const controls = controlsOf(this.asset, this.values)\n    return html`<section>\n      <h3>${i18next.t('figure.label.controls')}</h3>\n      ${controls.length\n        ? html`${controls.map(control => this.renderControl(control))}\n            <button act ?disabled=${this.locked || !poseDiffers(controls)} @click=${() => this.edit(poseAsDefault(controls))}>\n              <md-icon>push_pin</md-icon>${i18next.t('figure.button.keep-pose')}\n            </button>`\n        : html`<p hint>${i18next.t('figure.text.no-controls')}</p>`}\n    </section>`\n  }\n\n  private renderControl(control: Control) {\n    const number = (e: Event) => (e.target as HTMLInputElement).valueAsNumber\n    const c = this.live[control.id] === undefined ? control : { ...control, value: this.live[control.id]! }\n    const open = this.open === c.id\n    return html`<div control>\n        <span name title=${c.id}>${c.label} <em>${unitWord(c.unit)}</em></span>\n        ${c.unit === 'deg' ? this.renderDial(c) : html`<span></span>`}\n        <input\n          type=\"range\"\n          min=${c.min}\n          max=${c.max}\n          step=${c.step}\n          .value=${String(c.value)}\n          ?disabled=${this.locked}\n          aria-label=${c.label}\n          @input=${(e: Event) => this.drag(c, number(e))}\n          @change=${(e: Event) => this.try(c, number(e))}\n        />\n        <input type=\"number\" step=\"any\" .value=${String(Math.round(c.value * 100) / 100)} ?disabled=${this.locked} aria-label=${c.label} @change=${(e: Event) => this.try(c, number(e))} />\n        <button\n          more\n          aria-expanded=${String(open)}\n          title=${i18next.t('figure.button.control-settings')}\n          aria-label=${i18next.t('figure.button.control-settings')}\n          @click=${() => (this.open = open ? '' : c.id)}\n        >\n          <md-icon>tune</md-icon>\n        </button>\n      </div>\n      ${open ? this.renderSettings(c) : nothing}`\n  }\n\n  private renderDial(c: Control) {\n    const dial = dialShape(c.min, c.max, c.value)\n    const span = dial.radius * 2 + 2\n    return html`<svg dial viewBox=\"0 0 ${span} ${span}\" aria-hidden=\"true\">\n      <path d=${dial.sector}></path>\n      <circle cx=${dial.centre.x} cy=${dial.centre.y} r=${dial.radius}></circle>\n      <line x1=${dial.centre.x} y1=${dial.centre.y} x2=${dial.needle.x} y2=${dial.needle.y}></line>\n    </svg>`\n  }\n\n  private renderSettings(c: Control) {\n    const policy = (patch: Partial<{ label: string; sweep: number; min: number; max: number }>) =>\n      this.edit({\n        kind: 'set-state-input',\n        input: c.id,\n        label: patch.label ?? (c.named ? c.label : undefined),\n        sweep: patch.sweep ?? c.sweep,\n        ...(patch.min !== undefined ? { min: patch.min } : {}),\n        ...(patch.max !== undefined ? { max: patch.max } : {})\n      })\n    const number = (e: Event) => (e.target as HTMLInputElement).valueAsNumber\n    return html`<div settings>\n      <div form>\n        <span>${i18next.t('figure.label.control-name')}</span>\n        <input .value=${c.named ? c.label : ''} placeholder=${c.id} ?disabled=${this.locked} @change=${(e: Event) => policy({ label: (e.target as HTMLInputElement).value })} />\n        <span>${i18next.t('figure.label.control-range')} (${unitWord(c.unit)})</span>\n        <div pair>\n          <input type=\"number\" step=\"any\" .value=${String(c.min)} ?disabled=${this.locked} @change=${(e: Event) => policy({ min: number(e) })} />\n          <input type=\"number\" step=\"any\" .value=${String(c.max)} ?disabled=${this.locked} @change=${(e: Event) => policy({ max: number(e) })} />\n        </div>\n        <span>${i18next.t('figure.label.control-sweep')}</span>\n        <input type=\"number\" min=\"0\" step=\"any\" .value=${String(c.sweep)} ?disabled=${this.locked} @change=${(e: Event) => policy({ sweep: number(e) })} />\n      </div>\n      <small>${i18next.t('figure.text.control-starts-at', { value: c.start, unit: unitWord(c.unit) })}</small>\n    </div>`\n  }\n\n  /** While dragging: the value is told as live -- the editor draws that pose at once and records nothing. */\n  private drag(c: Control, value: number) {\n    if (!Number.isFinite(value)) return\n    this.live = { ...this.live, [c.id]: value }\n    this.dispatchEvent(new CustomEvent('state-live', { detail: { input: c.id, value }, bubbles: true, composed: true }))\n  }\n\n  /** Try a value: the pose being looked at, clamped to the range. Not saved as the default. The slider sends it on\n   * release, so one drag is one step of the undo history rather than one per pixel. */\n  private try(c: Control, value: number) {\n    if (!Number.isFinite(value)) return\n    const clamped = Math.min(Math.max(value, c.min), c.max)\n    const { [c.id]: _released, ...rest } = this.live\n    this.live = rest\n    this.dispatchEvent(new CustomEvent('state', { detail: { input: c.id, unit: c.unit, value: clamped }, bubbles: true, composed: true }))\n  }\n\n  private edit(edit: unknown) {\n    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist-client/modeller/figure-data-panel.js

@@ -3,6 +3,7 @@ import '@material/web/icon/icon.js';
 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 { accessorOfRow, behaviorKeyOf, behaviorsOf, bindingDraftOf, domainOf, endlessJointsOf, fieldAt, fieldOfKind, fitsField, freeCodeOf, legendRoleOf, methodOf, methodsOf, partsOf, rotationStepsOf, sampleOf, schemaRowsOf, schemaWithField, schemaWithFieldReplaced, schemaWithoutField, schemaFollowingCodes, stateInputsOf, tableColumnsOf, tableDraftOf, tableWithKeys, tableWithLook, tableWithTargets } from './data-interface.js';
 import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-panel-styles.js';
@@ -112,6 +113,17 @@ let FigureDataPanel = 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);
@@ -255,7 +267,7 @@ let FigureDataPanel = 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(', ')})`;
@@ -317,8 +329,8 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         ${field.kind === 'number'
             ? html `<span>${i18next.t('figure.label.data-unit')}</span>
               <select ?disabled=${this.locked} @change=${(e) => 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) => set({ min: number(e) })} />
@@ -453,10 +465,12 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
         const open = this.opened === b.id;
         const set = (next) => 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>
@@ -814,9 +828,12 @@ let FigureDataPanel = class FigureDataPanel extends localize(i18next)(LitElement
               <input .value=${a.name} @input=${(e) => set({ name: typed(e) })} />`
             : nothing}
         <span>${i18next.t('figure.label.data-method')}</span>
-        <select ?disabled=${!methods.length} @change=${(e) => set({ method: typed(e) })}>
-          ${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) => set({ method: typed(e) })}>
+              ${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) => set({ behavior: typed(e) })}>