@things-factory/figure-ui 10.1.224 → 10.1.226

package/dist-client/modeller/editor.js

@@ -2,6 +2,8 @@ var FigureEditor_1;
 import { __decorate, __metadata } from "tslib";
 import { LitElement, html, nothing } from 'lit';
 import { i18next } from '@operato/i18n';
+import { isMacOS } from '@operato/utils';
+import { unitWord } from './unit-words.js';
 import '@operato/layout';
 import { openPopup } from '@operato/layout';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -893,6 +895,14 @@ let FigureEditor = class FigureEditor extends LitElement {
         <summary><h3>${i18next.t('figure.label.group-more')}</h3></summary>
         <div more-body>
           ${tools ? html `<div group-fields>${tools}</div>` : nothing}
+          <figure-material-panel
+            show="more"
+            .body=${{ ...part, id: this.selected }}
+            .palette=${palette}
+            ?locked=${unavailable}
+            @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
+            @part-live=${(e) => this.hold({}, e.detail.edit)}
+          ></figure-material-panel>
           <figure-section-panel
             embedded
             .body=${{ ...part, id: this.selected }}
@@ -904,14 +914,6 @@ let FigureEditor = class FigureEditor extends LitElement {
             @command-live=${(e) => this.holdAction(e.detail.action)}
             @section-editor-open=${() => (this.sectionEditing = this.selected)}
           ></figure-section-panel>
-          <figure-material-panel
-            show="more"
-            .body=${{ ...part, id: this.selected }}
-            .palette=${palette}
-            ?locked=${unavailable}
-            @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
-            @part-live=${(e) => this.hold({}, e.detail.edit)}
-          ></figure-material-panel>
         </div>
       </details>
     </section>`;
@@ -1165,7 +1167,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         return html `<section board-size>
       ${title('figure.text.board-size-range-explained')}
       ${['x', 'y', 'z'].map(axis => html `<div inline-field>
-          <label>${i18next.t('figure.label.resize-' + axis)} <span unit>mm</span></label>
+          <label>${i18next.t('figure.label.resize-' + axis)} <span unit>(mm)</span></label>
           <div pair range>
             ${['min', 'max'].map((bound, i) => html `${i ? html `<span dash aria-hidden="true">–</span>` : nothing}<input
                 aria-label=${`size.${axis}.${bound}`}
@@ -1297,7 +1299,7 @@ let FigureEditor = class FigureEditor extends LitElement {
       <div inline-field><label>${i18next.t('figure.label.repeat-axis')}</label>${axes.length ? html `<select aria-label=${i18next.t('figure.label.repeat-axis')} ?disabled=${unavailable} .value=${live(axis)} @change=${(e) => update({ axis: e.target.value.toUpperCase() })}>${axes.map(a => html `<option value=${a} ?selected=${a === axis}>${a.toUpperCase()}</option>`)}</select>` : html `<span value>${axis.toUpperCase()}</span>`}</div>
       <div inline-field><label>${i18next.t('figure.label.repeat-count')}</label>${!fits && record ? html `<input type="number" min="1" step="1" aria-label=${i18next.t('figure.label.repeat-count')} .value=${live(String(repeat.count))} ?disabled=${unavailable} @change=${(e) => update({ count: e.target.valueAsNumber })}>` : html `<span value>${repeat.count}</span>`}</div>
       <div inline-field>
-        <label>${i18next.t('figure.label.repeat-gap')} <span unit>mm</span></label>
+        <label>${i18next.t('figure.label.repeat-gap')} <span unit>(mm)</span></label>
         ${fits ? html `<input
           type="number"
           step="any"
@@ -1391,8 +1393,8 @@ let FigureEditor = class FigureEditor extends LitElement {
       </label>
       ${open
             ? html `<div inline-field><label>${i18next.t('figure.label.board-name')}</label><input aria-label="figure.label.board-name" .value=${form.label} @change=${edit('label')} /></div>
-            <div inline-field><label>${i18next.t('figure.label.least')} <span unit>mm</span></label><input type="number" step="any" aria-label="figure.label.least" .value=${String(form.min)} @change=${edit('min')} /></div>
-            <div inline-field><label>${i18next.t('figure.label.most')} <span unit>mm</span></label><input type="number" step="any" aria-label="figure.label.most" .value=${String(form.max)} @change=${edit('max')} /></div>
+            <div inline-field><label>${i18next.t('figure.label.least')} <span unit>(mm)</span></label><input type="number" step="any" aria-label="figure.label.least" .value=${String(form.min)} @change=${edit('min')} /></div>
+            <div inline-field><label>${i18next.t('figure.label.most')} <span unit>(mm)</span></label><input type="number" step="any" aria-label="figure.label.most" .value=${String(form.max)} @change=${edit('max')} /></div>
             <button act publish-pitch ?disabled=${unavailable || !form.label.trim()} @click=${() => run(steps())}>
               <md-icon>${listed ? 'check' : 'ios_share'}</md-icon>${i18next.t(listed ? 'figure.button.apply' : 'figure.button.publish-input')}
             </button>`
@@ -1627,9 +1629,12 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     /** A side tab says what it is in words under its icon: the icons alone had to be learnt (designer 2026-09-27, U05). */
     renderTab(tab, icon, label) {
-        /* Its accessible name is the name it shows (designer 2026-09-27); the longer title stays as its tooltip. */
-        const name = i18next.t(tab === 'response' && this.selected ? 'figure.label.tab-arrangement' : 'figure.label.tab-short-' + tab);
-        return html `<button tab ?on=${this.tab === tab} title=${tab === 'response' && this.selected ? name : label} aria-label=${name} @click=${() => (this.tab = tab)}>
+        /*
+          Its accessible name is the name it shows (designer 2026-09-27); the longer title stays as its tooltip. One name
+          whatever is picked: the size tab was 「반응형」 with nothing picked and 「배치」 with a part (sweep 2026-10-27 J2).
+        */
+        const name = i18next.t('figure.label.tab-short-' + tab);
+        return html `<button tab ?on=${this.tab === tab} title=${label} aria-label=${name} @click=${() => (this.tab = tab)}>
       <md-icon>${icon}</md-icon><span tab-label aria-hidden="true">${name}</span>
     </button>`;
     }
@@ -1727,7 +1732,13 @@ let FigureEditor = class FigureEditor extends LitElement {
                 ${i18next.t(kind === 'box' ? 'figure.label.primitive-cube' : `figure.label.primitive-${kind}`)}
               </button>`)}
           </div>
-          <small>${i18next.t('figure.text.start-shape-more')}</small>
+          ${this.panes?.foldStart
+            ? /* The list it points to is folded at this width: a way to it, not words about a list not there (sweep 2026-10-27 U23). */
+                html `<button start-more @click=${() => {
+                    this.panes.foldStart = false;
+                    this.requestUpdate();
+                }}>${i18next.t('figure.button.start-shape-more')}</button>`
+            : html `<small>${i18next.t('figure.text.start-shape-more')}</small>`}
         </section>
         ${this.aiDraft
             ? html `<section>
@@ -1735,7 +1746,6 @@ let FigureEditor = class FigureEditor extends LitElement {
               <button start-button start-ai @click=${() => this.dispatchEvent(new CustomEvent('ask-ai-draft', { bubbles: true, composed: true }))}>
                 ${i18next.t('figure.button.start-ai')}
               </button>
-              <small>${i18next.t('figure.text.start-ai-optional')}</small>
             </section>`
             : nothing}
       </div>
@@ -1820,8 +1830,8 @@ let FigureEditor = class FigureEditor extends LitElement {
         return html `<ox-canvas-bar
         history
         fit
-        undo-shortcut="Ctrl+Z"
-        redo-shortcut="Ctrl+Y"
+        undo-shortcut=${isMacOS() ? '⌘Z' : 'Ctrl+Z'}
+        redo-shortcut=${isMacOS() ? '⇧⌘Z' : 'Ctrl+Y'}
         ?can-undo=${!unavailable && view.canUndo}
         ?can-redo=${!unavailable && view.canRedo}
         .pane=${this.panes}
@@ -1851,7 +1861,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         >
           <md-icon>publish</md-icon>${i18next.t('figure.button.release')}
         </button>
-        <button slot="commit" save ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}><md-icon>save</md-icon>${i18next.t('figure.button.save')}</button>
+        <button slot="commit" save title=${!view.id && !view.geometry.length ? i18next.t('figure.text.save-needs-a-part') : ''} ?disabled=${unavailable || (!view.dirty && !!view.id) || (!view.id && !view.geometry.length)} @click=${this.save}><md-icon>save</md-icon>${i18next.t('figure.button.save')}</button>
       </ox-canvas-bar>
       ${this.blockersOpen && blockers.length ? this.renderReleaseBlockers(blockers, asset) : nothing}
       ${this.catalogOpen
@@ -1941,7 +1951,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             ${this.renderTab('motion', 'animation', i18next.t('figure.label.motion'))}
             ${this.renderTab('capability', 'conveyor_belt', i18next.t('figure.label.tab-capability'))}
             ${this.renderTab('data', 'sensors', i18next.t('figure.label.tab-data'))}
-            ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'))}
+            ${this.renderTab('verdict', 'insights', i18next.t('figure.label.tab-verdict'))}
           </div>
           <slot name="notice"></slot>
           <div panel ?off=${tab !== 'properties'}>
@@ -1970,15 +1980,17 @@ let FigureEditor = class FigureEditor extends LitElement {
                     @part-live=${(e) => this.hold({}, e.detail.edit)}
                   ></figure-material-panel>
                   ${this.renderMore(part, view.palette ?? {}, unavailable)}`
-            : view.geometry.length === 0
-                ? html `${this.renderSubject()}<section empty-figure>
+            : view.loading || !view.context
+                ? nothing
+                : view.geometry.length === 0
+                    ? html `${this.renderSubject()}<section empty-figure>
                     <p>${i18next.t('figure.text.empty-figure-next')}</p>
                     <details>
                       <summary>${i18next.t('figure.label.figure-info-later')}</summary>
                       <slot name="figure"></slot>
                     </details>
                   </section>`
-                : html `${this.renderSubject()}<slot name="figure"></slot>`}
+                    : html `${this.renderSubject()}<slot name="figure"></slot>`}
           </div>
           <div panel ?off=${tab !== 'response'}>
             ${this.renderSubject()}
@@ -2062,17 +2074,18 @@ let FigureEditor = class FigureEditor extends LitElement {
             return v === undefined || !Number.isFinite(v) ? '—' : String(Math.round(v * 10) / 10);
         };
         return html `<div vector-row>
-      <label>${i18next.t('figure.label.group-' + group.name)}${group.name === 'rotation' ? '' : html ` <span unit>${unit}</span>`}</label>
+      <label>${i18next.t('figure.label.group-' + group.name)}${group.name === 'rotation' ? '' : html ` <span unit>(${unit})</span>`}</label>
       <div triple>
         ${['x', 'y', 'z'].map(axis => !group.cells[axis]
             ? html `<div cell held title=${i18next.t('figure.text.axis-held-by-rule')}>
                 <span axis>${axis.toUpperCase()}</span>
-                <input type="text" readonly .value=${given(axis)} aria-label=${`${group.name}.${axis} · ${i18next.t('figure.text.axis-held-by-rule')}`} />
+                <input type="text" readonly .value=${given(axis)} data-field=${`${group.name}.${axis}`} aria-label=${`${i18next.t('figure.label.group-' + group.name)} ${axis.toUpperCase()} · ${i18next.t('figure.text.axis-held-by-rule')}`} />
               </div>`
             : html `<div cell>
             <span axis ?scrub=${!unavailable} @pointerdown=${(e) => this.scrub(group.cells[axis], e, unavailable)}>${axis.toUpperCase()}</span>
             <input
-              aria-label=${group.cells[axis].id}
+              data-field=${group.cells[axis].id}
+              aria-label=${`${i18next.t('figure.label.group-' + group.name)} ${axis.toUpperCase()}`}
               type="number"
               step="any"
               .value=${String(group.cells[axis].value)}
@@ -2108,9 +2121,10 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     renderSingle(name, field, unavailable) {
         const words = name.split('.').map(part => i18next.t('figure.label.field-' + part, { defaultValue: part }));
-        return html `<span ?scrub=${!unavailable} @pointerdown=${(e) => this.scrub(field, e, unavailable)}>${words.join(' · ')} (${field.unit})</span
+        return html `<span ?scrub=${!unavailable} @pointerdown=${(e) => this.scrub(field, e, unavailable)}>${words.join(' · ')} (${unitWord(field.unit)})</span
       ><input
-        aria-label=${field.id}
+        data-field=${field.id}
+        aria-label=${words.join(' · ')}
         type="number"
         step="any"
         .value=${String(field.value)}