@things-factory/figure-ui 10.1.208 → 10.1.211

package/dist-client/modeller/editor.js

@@ -6,7 +6,7 @@ import '@operato/layout';
 import { openPopup } from '@operato/layout';
 import { customElement, property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
-import { figurePartFaceOf, PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditOf, figureSizeEditorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figureRowOf, figureFaceOverhangOf } from '@hatiolab/figure-model';
+import { figureFastenAxesOf, figurePartFaceOf, PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditOf, figureSizeEditorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figureRowOf, figureFaceOverhangOf } from '@hatiolab/figure-model';
 import './figure-recipe-catalog.js';
 import { captureFigureThumbnail } from './thumbnail.js';
 import { drawableFigureParts } from './renderer.js';
@@ -50,13 +50,14 @@ import { nudgeOf, placementOf } from './stage-model.js';
 import { gateFindingStyles, renderGateFinding } from './gate-findings.js';
 import { editRefusalOf, partNameRefusalOf, sizeRangeFitsOf, partRefusalOf, placedRefusalOf, recipeRefusalOf, removalNoticeOf } from './refusals.js';
 import { HelpToggles } from './help.js';
-import { endPlaceKeyOf, followOf, sizeFollowersOf, measureNow, partSummaryOf, instanceRangeOf, instanceSizeToDeclare, proportionToFollow, rangeWith, turnsAboutAJoint, valueNow } from './links.js';
+import { sizeInputOf } from './size-response.js';
+import { canFollow, followableAxes, endPlaceKeyOf, followOf, sizeFollowersOf, measureNow, partSummaryOf, instanceRangeOf, instanceSizeToDeclare, proportionToFollow, rangeWith, turnsAboutAJoint, valueNow } from './links.js';
 import { jointFanOf } from './joint-fan.js';
 import { derivedOf } from './revision.js';
 import { jointDragOf } from './joint-drag.js';
-import { liveOverSession, NOTHING_LIVE, scrubbed, scrubStep } from './live.js';
+import { liveOverSession, NOTHING_LIVE, scrubLabel } from './live.js';
 import { startingShapeKindOfBody } from './starting-shape.js';
-import { groupMenu, GroupMenuStyles } from './group-menu.js';
+import { GroupMenuStyles } from './group-menu.js';
 /** The person's own fold of the properties' 「더 보기」, kept in their browser. */
 const MORE_OPEN_KEY = 'figure-properties-more-open';
 /** Product editor surface. The injected session is shared by page persistence and AI commands. */
@@ -330,10 +331,16 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     /**
      * A refusal no particular sentence knows: figure-model's code said as a refusal, never its English; any other error
-     * (the network, the server) as it came.
+     * (the network, the server) as it came. A loop is said as a loop whichever way it was made: a command, or the size
+     * editor's steps (a measure made to follow what follows it, 2026-10-24 -- said as a bare refused step before).
      */
     said(error) {
-        return error?.code ? editRefusalOf(error, (key, params) => i18next.t(key, params)) : error instanceof Error ? error.message : String(error);
+        const code = error?.code;
+        if (code === 'DIMENSION_CYCLE')
+            return i18next.t('figure.text.follow-would-loop');
+        if (code === 'FASTEN_CYCLE' || code === 'ATTACH_CYCLE')
+            return i18next.t('figure.text.fasten-would-loop');
+        return code ? editRefusalOf(error, (key, params) => i18next.t(key, params)) : error instanceof Error ? error.message : String(error);
     }
     run(action) {
         try {
@@ -824,6 +831,10 @@ let FigureEditor = class FigureEditor extends LitElement {
       .partId=${this.selected}
       ?locked=${unavailable}
       @command=${(e) => this.linkCommand(e.detail.action)}
+      @size-recipe=${(e) => this.applySizeSteps(e.detail.steps)}
+      @size-input=${(e) => this.writeField({ id: e.detail.input, unit: 'mm' }, e.detail.value)}
+      @size-typing=${(e) => this.hold(this.heldOf({ id: e.detail.input, unit: 'mm' }, e.detail.value))}
+      @size-let-go=${() => (this.live = NOTHING_LIVE)}
       @fasten-open=${() => this.openFastening()}
       .previewWords=${this.commandPreview.words()}
       .detachWords=${this.commandPreview.detachWords(shown)}
@@ -843,18 +854,22 @@ let FigureEditor = class FigureEditor extends LitElement {
      */
     renderPartGroups(shown, geometry, fields, unavailable, held) {
         const groups = this.withSizeRow(groupFields(fields, this.selected), held);
-        const size = groups.vectors.filter(g => g.kind === 'vector' && g.name === 'size');
+        const integrated = !!shown && canFollow(shown.asset, this.selected);
+        const dimensionInputs = new Set(integrated ? followableAxes(shown.asset, this.selected).map(axis => sizeInputOf(shown.asset, this.selected, axis)) : []);
+        const singles = groups.singles.filter(g => g.kind !== 'single' || !dimensionInputs.has(g.field.id));
+        const size = integrated ? [] : groups.vectors.filter(g => g.kind === 'vector' && g.name === 'size');
         const place = groups.vectors.filter(g => g.kind === 'vector' && g.name !== 'size');
         const fastened = !!this.asset()?.joints?.some(j => j.body1.part === ownerOf(this.selected));
         const placeLocked = fastened && place.every(g => g.kind === 'vector' && ['x', 'y', 'z'].every(axis => !g.cells[axis]));
-        return this.renderLinks(unavailable, 'shape', html `${size.length || groups.singles.length
-            ? html `<div slot="size" group-fields>
+        return this.renderLinks(unavailable, 'shape', html `${size.length || singles.length
+            ? html `<section slot="size" group-fields>
+              <h3>${i18next.t(integrated ? 'figure.label.group-shape' : 'figure.label.group-size')}</h3>
               ${size.map(g => this.renderVector(g, unavailable, held))}
-              ${groups.singles.length
-                ? html `<div form>${groups.singles.map(g => (g.kind === 'single' ? this.renderSingle(g.name, g.field, unavailable) : nothing))}</div>`
+              ${singles.length
+                ? html `<div form>${singles.map(g => (g.kind === 'single' ? this.renderSingle(g.name, g.field, unavailable) : nothing))}</div>`
                 : nothing}
-              ${this.renderSizeKeeps()}
-            </div>`
+              ${!integrated ? this.renderSizeKeeps() : nothing}
+            </section>`
             : nothing}
         ${place.length && !placeLocked
             ? html `<div slot="place" group-fields>${place.map(g => this.renderVector(g, unavailable, held))}${this.renderHeldAxes(place)}</div>`
@@ -862,7 +877,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     /** The 「반응형」 tab of a part: the links' response groups, its row's own section put in by slot. */
     renderResponse(shown, geometry, unavailable) {
-        return this.renderLinks(unavailable, 'response', this.renderRepeat(shown, geometry, unavailable));
+        return this.renderLinks(unavailable, 'response', html `<div slot="size-note">${this.renderSizeKeeps()}</div>${this.renderRepeat(shown, geometry, unavailable)}`);
     }
     /**
      * 「더 보기」: what few parts need, folded by default and left as this person last left it (chief architect
@@ -970,6 +985,25 @@ let FigureEditor = class FigureEditor extends LitElement {
         if (done && held.from === 'section-editor')
             this.closeSectionEditor();
     }
+    /** The figure's size, declared for a part to follow, in one line (ADR ruling Q1). */
+    sizeDeclaredWords() {
+        const size = this.designValues();
+        return i18next.t('figure.text.size-declared-to-follow', {
+            x: Math.round(size['size.x'] ?? 0).toLocaleString(),
+            y: Math.round(size['size.y'] ?? 0).toLocaleString(),
+            z: Math.round(size['size.z'] ?? 0).toLocaleString()
+        });
+    }
+    /**
+     * The size editor's steps, one step of the history. A measure made to follow the figure on a figure with no size
+     * declares it on the way; that is said in one line, as follow-size said it (ADR ruling Q1, 2026-10-24).
+     */
+    applySizeSteps(steps) {
+        const hadSize = this.hasSize();
+        this.run(() => this.session.applyRecipe(steps));
+        if (!hadSize && !this.error && this.hasSize())
+            this.notice = this.sizeDeclaredWords();
+    }
     /** Runs a command; true when it was taken. */
     linkCommand(action, from = 'panel') {
         /* Committed or refused, a command in hand is let go of: the figure as it stands is drawn again. */
@@ -981,14 +1015,8 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.error = '';
             this.faceMapping = undefined;
             /* What the command did besides what was asked, in one line: the figure's size declared to follow (ADR ruling Q1). */
-            if (action.kind === 'follow-size' && !hadSize) {
-                const size = this.designValues();
-                this.notice = i18next.t('figure.text.size-declared-to-follow', {
-                    x: Math.round(size['size.x'] ?? 0).toLocaleString(),
-                    y: Math.round(size['size.y'] ?? 0).toLocaleString(),
-                    z: Math.round(size['size.z'] ?? 0).toLocaleString()
-                });
-            }
+            if (action.kind === 'follow-size' && !hadSize)
+                this.notice = this.sizeDeclaredWords();
             this.changed();
             return true;
         }
@@ -1003,18 +1031,20 @@ let FigureEditor = class FigureEditor extends LitElement {
                 this.error = '';
                 return false;
             }
-            this.error =
-                code === 'DIMENSION_CYCLE'
-                    ? i18next.t('figure.text.follow-would-loop')
-                    : code === 'FASTEN_CYCLE' || code === 'ATTACH_CYCLE'
-                        ? i18next.t('figure.text.fasten-would-loop')
-                        : this.said(error);
+            this.error = this.said(error);
             return false;
         }
     }
     changeField(field, event) {
-        const input = event.target, value = input.valueAsNumber;
-        /* A number typed keeps the part's middle, or its fastening -- figure-model's one size function (ADR-0140 4.1). */
+        const input = event.target;
+        // Rejected edits must also restore the displayed numeric value.
+        input.value = String(this.writeField(field, input.valueAsNumber));
+    }
+    /**
+     * A number written to an input, from a field, a scrub or the size editor's rows: a size keeps the part's middle, or its
+     * fastening -- figure-model's one size function (ADR-0140 4.1). Gives the value the input holds after, refused or not.
+     */
+    writeField(field, value) {
         const part = this.selected;
         const change = { kind: field.role === 'state' ? 'set-state' : 'set-design', input: field.id, unit: field.unit, value };
         const asset = this.shown()?.asset;
@@ -1024,8 +1054,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         const after = asset && part && field.role !== 'state' ? throughPlaneOf(this.shown().asset, drawableFigureParts(this.session.read().geometry ?? []), part) : 0;
         if (after > before + 0.5)
             this.tellThroughPlane(part, after);
-        // Rejected edits must also restore the displayed numeric value.
-        input.value = String(this.session.read().fields.find(i => i.id === field.id).value);
+        return this.session.read().fields.find(i => i.id === field.id).value;
     }
     /** Typing or a held spinner: each number on the way is drawn; the field's change records it. */
     typing(field, event) {
@@ -1056,16 +1085,12 @@ let FigureEditor = class FigureEditor extends LitElement {
      * pointer, and the release records one step. The field's number follows too, so the value in hand is always read.
      */
     scrub(field, down, unavailable) {
-        if (unavailable || down.button !== 0)
+        if (unavailable)
             return;
         const label = down.currentTarget;
         const input = (label.closest('div[cell]')?.querySelector('input') ?? label.nextElementSibling);
         if (!input)
             return;
-        down.preventDefault();
-        label.setPointerCapture(down.pointerId);
-        const start = field.value;
-        let value = start;
         /* Prepared once for the scrub: each move is a size through the same function its release writes with. */
         const asset = this.shown()?.asset;
         const sized = asset && this.selected && field.role !== 'state' ? (() => { try {
@@ -1074,29 +1099,17 @@ let FigureEditor = class FigureEditor extends LitElement {
         catch {
             return undefined;
         } })() : undefined;
-        const move = (e) => {
-            value = scrubbed(start, e.clientX - down.clientX, scrubStep(field.unit, start, e.shiftKey));
-            input.value = String(value);
-            this.hold(this.heldOf(field, value, sized));
-        };
-        const up = (e) => {
-            label.removeEventListener('pointermove', move);
-            label.removeEventListener('pointerup', up);
-            label.removeEventListener('pointercancel', up);
-            /* A drag the system took away is not the author's value: the field goes back to where it was. */
-            if (e.type === 'pointercancel')
-                value = start;
-            if (value === start) {
-                input.value = String(start);
+        scrubLabel(down, field, {
+            move: value => {
+                input.value = String(value);
+                this.hold(this.heldOf(field, value, sized));
+            },
+            release: value => (input.value = String(this.writeField(field, value))),
+            cancel: () => {
+                input.value = String(field.value);
                 this.live = NOTHING_LIVE;
-                return;
             }
-            input.value = String(value);
-            this.changeField(field, { target: input });
-        };
-        label.addEventListener('pointermove', move);
-        label.addEventListener('pointerup', up);
-        label.addEventListener('pointercancel', up);
+        });
     }
     /** The sizes a board may give the figure: the ends the author typed, and the rest as far as its parts allow. */
     renderInstanceRange(shown, unavailable) {
@@ -1256,45 +1269,46 @@ let FigureEditor = class FigureEditor extends LitElement {
         const axis = model.nodes.find(n => n.id === `${this.selected}.repeat`)?.params?.axis ?? '?';
         const own = `${this.selected}.repeat.pitch`;
         /* The pitch as it stands: the part's own number, a constant, or what a pitch that follows a length comes to. */
-        const pitch = asset.designInputs[own] ?? model.constants.find(c => c.id === layout?.args[4])?.value ?? valueNow(shown, layout?.args[4]);
         const fits = layout?.op === 'fit-pitch@1';
-        /* What the pitch gives, in numbers: this many copies at the length it is authored, and how long it may be placed. */
-        const lengthRef = layout?.args[0] ?? '';
-        const length = asset.designInputs[lengthRef];
-        const longest = model.inputs.find(i => i.id === lengthRef)?.max;
-        const limit = model.constants.find(c => c.id === layout?.args[6])?.value;
+        const pitch = fits ? asset.designInputs[own] ?? model.constants.find(c => c.id === layout?.args[4])?.value ?? valueNow(shown, layout?.args[4]) : this.rowNow(shown)?.pitch;
         const field = { id: own, unit: 'mm', role: 'design', value: pitch ?? 0 };
-        const removable = !!asset.joints?.some(j => j.body1.part === this.selected && j.repeat);
+        const record = asset.joints?.find(j => j.body1.part === this.selected && j.repeat);
+        const parent = record && 'part' in record.body0 ? record.body0.part : undefined;
+        const removable = !!record;
+        const axes = record && 'part' in record.body0 && 'face' in record.body0 ? figureFastenAxesOf(asset, record.body0) : [];
+        const update = (change) => {
+            if (!record?.repeat || unavailable)
+                return;
+            this.run(() => this.session.command({ kind: 'set-joint', joint: { ...record, repeat: { ...record.repeat, ...change } } }));
+        };
         return html `<section slot="row" row>
       <h3>
         ${i18next.t('figure.label.repeat')}
-        ${groupMenu([{ label: i18next.t('figure.button.remove-repeat'), icon: 'close', disabled: unavailable || !removable, run: () => this.run(() => this.session.command({ kind: 'remove-repeat', part: this.selected })) }])}
+        <span section-state active>${i18next.t('figure.label.repeat-active')}</span>
       </h3>
-      <div inline-field><label>${i18next.t('figure.label.repeat-axis')}</label><span value>${axis.toUpperCase()}</span></div>
-      <div inline-field><label>${i18next.t('figure.label.repeat-count')}</label><span value>${repeat.count}</span></div>
+      <div choice-row role="radiogroup" aria-label=${i18next.t('figure.label.row-basis')}>
+        <label toggle><input type="radio" name="applied-repeat-mode" .checked=${live(fits)} ?disabled=${unavailable || !record} @change=${() => update({ count: undefined, pitch: pitch && pitch > 0 ? pitch : 200 })}>${i18next.t('figure.label.repeat-fills')}</label>
+        <label toggle><input type="radio" name="applied-repeat-mode" .checked=${live(!fits)} ?disabled=${unavailable || !record} @change=${() => update({ count: repeat.count })}>${i18next.t('figure.label.row-by-count')}</label>
+      </div>
+      <p hint>${i18next.t(fits ? 'figure.text.repeat-mode-pitch' : 'figure.text.repeat-mode-count')}</p>
+      <div inline-field><label>${i18next.t('figure.label.size-source')}</label><span value>${parent ?? '—'}</span></div>
+      <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>
-        <input
+        ${fits ? html `<input
           type="number"
           step="any"
-          aria-label=${own}
-          .value=${String(pitch ?? '')}
-          ?disabled=${unavailable || !fits}
+          aria-label=${i18next.t('figure.label.repeat-gap')}
+          .value=${live(String(pitch ?? ''))}
+          ?disabled=${unavailable}
           @change=${(e) => this.setPitch(field, e)}
-        />
+        />` : html `<span value>${pitch === undefined ? '—' : Number(pitch.toFixed(3))}</span>`}
       </div>
-      <ul row-reading>${rowWordsOf(this.rowNow(shown), (key, params) => i18next.t(key, params)).map(line => html `<li>${line}</li>`)}</ul>
-      <p hint>
-        ${fits && length !== undefined && longest !== undefined && limit !== undefined
-            ? i18next.t('figure.text.repeat-what-pitch-gives', {
-                length: length.toLocaleString(),
-                count: repeat.count,
-                longest: longest.toLocaleString(),
-                limit
-            })
-            : i18next.t(fits ? 'figure.text.repeat-fits-length' : 'figure.text.repeat-fixed-count')}
-      </p>
-      ${this.renderPublicPitch(asset, pitch ?? 0, unavailable)}
+      <ul row-reading>${rowWordsOf(this.rowNow(shown), (key, params) => i18next.t(key, params)).slice(1).map(line => html `<li>${line}</li>`)}</ul>
+      <button quiet ?disabled=${unavailable || !removable} @click=${() => this.run(() => this.session.command({ kind: 'remove-repeat', part: this.selected }))}>${i18next.t('figure.button.remove-repeat')}</button>
+      <p hint>${i18next.t('figure.text.repeat-remove-explained')}</p>
+      ${fits ? this.renderPublicPitch(asset, pitch ?? 0, unavailable) : nothing}
     </section>`;
     }
     /** The selected row as it is drawn now, read by figure-model: nothing when it cannot be read. */
@@ -1610,8 +1624,8 @@ 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('figure.label.tab-short-' + tab);
-        return html `<button tab ?on=${this.tab === tab} title=${label} aria-label=${name} @click=${() => (this.tab = tab)}>
+        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)}>
       <md-icon>${icon}</md-icon><span tab-label aria-hidden="true">${name}</span>
     </button>`;
     }
@@ -1741,8 +1755,8 @@ let FigureEditor = class FigureEditor extends LitElement {
             return nothing;
         return html `<div subject>
       <div subject-summary>
-        ${summary.kind ? html `<b>${summary.kind}</b>` : nothing}
-        ${summary.size ? html `<small>${summary.size}</small>` : nothing}
+        <b>${ownerOf(this.selected)}</b>
+        ${summary.kind ? html `<small>${summary.kind}</small>` : nothing}
       </div>
     </div>`;
     }