@things-factory/figure-ui 10.1.176 → 10.1.177

package/dist-client/modeller/figure-links.d.ts

@@ -28,7 +28,12 @@ export declare class FigureLinks extends FigureLinks_base {
     partId: string;
     locked: boolean;
     /** Which ties this shows: the part's shape (size and placement, in 속성), its places (자리·능력) or its motion (움직임). */
-    section: 'shape' | 'places' | 'motion';
+    section: 'shape' | 'response' | 'places' | 'motion';
+    /**
+     * Its tab is the one shown. Two sections speak of what a command would draw -- the properties' fastening and the
+     * response's row -- and only the one in sight may: the hidden one's silence would clear what the shown one draws.
+     */
+    active: boolean;
     /** What the fastening command would do, in words (the editor works it out: `command-preview.ts`). */
     previewWords: string[];
     /** Where the selected part's motion takes it, at both ends of its range (the editor draws them on the canvas). */
@@ -69,7 +74,7 @@ export declare class FigureLinks extends FigureLinks_base {
     willUpdate(changed: Map<string, unknown>): void;
     updated(): void;
     disconnectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     /** Where things are held on this part: a seat things rest on, or a grip things are held in. */
     private renderPlaces;
     /** The figure holds things: `Capacity` and `Holdable`, the ladder's middle rung. One part edit, one undo step. */

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

@@ -55,6 +55,11 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         this.locked = false;
         /** Which ties this shows: the part's shape (size and placement, in 속성), its places (자리·능력) or its motion (움직임). */
         this.section = 'shape';
+        /**
+         * Its tab is the one shown. Two sections speak of what a command would draw -- the properties' fastening and the
+         * response's row -- and only the one in sight may: the hidden one's silence would clear what the shown one draws.
+         */
+        this.active = true;
         /** What the fastening command would do, in words (the editor works it out: `command-preview.ts`). */
         this.previewWords = [];
         /** Where the selected part's motion takes it, at both ends of its range (the editor draws them on the canvas). */
@@ -159,6 +164,9 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         return this.revision?.asset;
     }
     willUpdate(changed) {
+        /* Its tab shown again: what it would draw is said again, over whatever the other tab left. */
+        if (changed.has('active') && this.active && changed.get('active') === false)
+            this.told = '';
         /* What 고치기 said is about the figure as it was: another step or another part, and it no longer holds. */
         if (changed.has('asset') || changed.has('partId'))
             this.fixNote = '';
@@ -176,9 +184,10 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         }
     }
     updated() {
-        /* Only the section that holds the fastening form speaks of it: the panel has one of these per section, and the
-           others' silence cleared what it showed (2026-09-27, :3391). */
-        if (this.section !== 'shape' && !this.told)
+        /* Only the sections that hold a form speak of what it would do, and only while their tab is shown: the panel has
+           one of these per section, and the others' silence cleared what it showed (2026-09-27, :3391). */
+        const speaks = this.active && (this.section === 'shape' || this.section === 'response');
+        if (!speaks)
             return;
         const said = JSON.stringify(this.candidate ?? null);
         if (said === this.told)
@@ -231,12 +240,33 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         */
         /* Fastened, by a face or by an origin: either can be taken off, from the place group's 「⋯」. */
         const held = !!heldBy(asset, this.partId) || !!(this.revision && fasteningOf(this.revision, this.partId)?.atOrigin);
+        if (this.section === 'response') {
+            /*
+              How the part answers a size it is placed at (user 2026-10-17, the 「반응형」 tab): its own measures, where it
+              stands, and the row it may make -- what Build Once, Fit Anywhere is authored with, in one place.
+            */
+            const positions = positionsWorkedOut(asset, this.partId);
+            const response = html `
+        <section size-response>
+          <h3>${i18next.t('figure.label.group-size')}</h3>
+          <p group-question>${i18next.t('figure.label.resize-intent')}</p>
+          ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html `<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
+        </section>
+        ${positions.length
+                ? html `<section position-response>
+              <h3>${i18next.t('figure.label.group-position-response')}</h3>
+              ${this.renderPositions(asset)}
+            </section>`
+                : nothing}
+        ${rowOf(asset, this.partId) ? html `<slot name="row"></slot>` : this.renderRow(asset)}
+      `;
+            this.candidate = this.working === 'row' && this.rowCandidate ? { action: this.rowCandidate } : undefined;
+            return response;
+        }
         const shown = html `
       <section size>
         <h3>${i18next.t('figure.label.group-size')}</h3>
         <slot name="size"></slot>
-        <p group-question>${i18next.t('figure.label.resize-intent')}</p>
-        ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html `<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
       </section>
       <section fastening ?spotlit=${this.spotlit} @focusin=${() => (this.working = 'fasten')}>
         <h3>
@@ -244,12 +274,10 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
           ${groupMenu([{ label: i18next.t('figure.button.detach'), icon: 'link_off', disabled: this.locked || !held, run: () => this.command({ kind: 'detach', part: this.partId }) }])}
         </h3>${this.help.hint('figure.text.fastening-explained')}
         <slot name="place"></slot>
-        ${this.renderPositions(asset)}
         ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html `<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
       </section>
-      ${rowOf(asset, this.partId) ? html `<slot name="row"></slot>` : this.renderRow(asset)}
     `;
-        this.candidate = this.working === 'row' && this.rowCandidate ? { action: this.rowCandidate } : this.fastenCandidate;
+        this.candidate = this.fastenCandidate;
         return shown;
     }
     /** Where things are held on this part: a seat things rest on, or a grip things are held in. */
@@ -1005,6 +1033,10 @@ __decorate([
     property(),
     __metadata("design:type", String)
 ], FigureLinks.prototype, "section", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureLinks.prototype, "active", void 0);
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Array)