@things-factory/figure-ui 10.1.175 → 10.1.177

package/dist-client/modeller/editor.js

@@ -78,8 +78,6 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.selected = '';
         this.error = '';
         this.tab = 'properties';
-        /** The capability group open: the canvas marks the places only while their group is in sight. */
-        this.capabilityOpen = false;
         /** 「더 보기」 open, as this person left it last (chief architect 2026-10-16: kept per person). */
         this.moreOpen = FigureEditor_1.storedMoreOpen();
         /** What the middle shows: the parts being edited, or the figure placed on a board at eight sizes. */
@@ -107,7 +105,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             session: () => this.session,
             selected: () => this.selected,
             shown: () => this.shown(),
-            formsInSight: () => this.middle === 'edit' && this.tab === 'properties',
+            formsInSight: () => this.middle === 'edit' && (this.tab === 'properties' || this.tab === 'response'),
             said: error => this.said(error)
         });
         this.keys = new ModellerKeys(this, {
@@ -757,9 +755,11 @@ let FigureEditor = class FigureEditor extends LitElement {
         const shown = this.shown();
         if (!shown)
             return null;
+        const tab = section === 'shape' ? 'properties' : section === 'places' ? 'capability' : section;
         return html `<figure-links
       .revision=${shown}
       .section=${section}
+      .active=${this.tab === tab}
       .partId=${this.selected}
       ?locked=${unavailable}
       @command=${(e) => this.linkCommand(e.detail.action)}
@@ -774,9 +774,10 @@ let FigureEditor = class FigureEditor extends LitElement {
     >${slotted}</figure-links>`;
     }
     /**
-     * A part's groups in one order whatever its state (chief architect 2026-10-16): its size, its place, its row. The links
-     * draw the three groups and their rules; the part's own numbers go into them by slot. A fastened part's place and turn
-     * are its fastening's: the place group says it in one line and the locked cells are not drawn (user 2026-10-16).
+     * A part's groups in one order whatever its state (chief architect 2026-10-16): its size, its place. The links draw
+     * the groups; the part's own numbers go into them by slot. How the part answers a size -- its rules, a position that
+     * follows, its row -- is the 「반응형」 tab's. A fastened part's place and turn are its fastening's: the place group
+     * says it in one line and the locked cells are not drawn (user 2026-10-16).
      */
     renderPartGroups(shown, geometry, fields, unavailable, held) {
         const groups = this.withSizeRow(groupFields(fields, this.selected), held);
@@ -794,27 +795,11 @@ let FigureEditor = class FigureEditor extends LitElement {
             : nothing}
         ${place.length && !placeLocked
             ? html `<div slot="place" group-fields>${place.map(g => this.renderVector(g, unavailable, held))}${this.renderHeldAxes(place)}</div>`
-            : nothing}
-        ${this.renderRepeat(shown, geometry, unavailable)}`);
+            : nothing}`);
     }
-    /**
-     * What the figure does -- its places (ADR-0118) -- as a group of the properties, folded: a declaration made once,
-     * whose marks on the canvas show while it is open. A verdict that finds it empty still says where it is.
-     */
-    renderCapability(asset, unavailable) {
-        return html `<section capability>
-      <details capability-fold ?open=${this.capabilityOpen} @toggle=${(e) => (this.capabilityOpen = e.target.open)}>
-        <summary><h3>${i18next.t('figure.label.tab-capability')}</h3></summary>
-        ${this.selected ? this.renderLinks(unavailable, 'places') : nothing}
-        <figure-capability-panel
-          .asset=${asset}
-          .selected=${this.selected}
-          ?locked=${unavailable}
-          @select-part=${(e) => this.choose(e.detail.id)}
-          @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
-        ></figure-capability-panel>
-      </details>
-    </section>`;
+    /** 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));
     }
     /**
      * 「더 보기」: what few parts need, folded by default and left as this person last left it (chief architect
@@ -1764,7 +1749,7 @@ let FigureEditor = class FigureEditor extends LitElement {
               @configure-size=${async (e) => {
                 this.middle = 'edit';
                 this.selected = e.detail.part;
-                this.tab = 'properties';
+                this.tab = 'response';
                 await this.updateComplete;
                 this.renderRoot.querySelector('figure-links')?.scrollIntoView({ block: 'nearest' });
             }}
@@ -1781,7 +1766,7 @@ let FigureEditor = class FigureEditor extends LitElement {
           .fan=${this.fanOf(shown, live)}
           .ghost=${this.previewShown().ghost}
           .highlight=${this.previewShown().highlight}
-          .marks=${this.tab === 'properties' && this.capabilityOpen ? this.slotMarks(view, asset) : NO_MARKS}
+          .marks=${this.tab === 'capability' ? this.slotMarks(view, asset) : NO_MARKS}
           .palette=${view.palette ?? {}}
           .context=${view.context ?? ''}
           .selected=${this.selected}
@@ -1795,7 +1780,9 @@ let FigureEditor = class FigureEditor extends LitElement {
         <aside slot="end">
           <div tabs>
             ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}
+            ${this.renderTab('response', 'aspect_ratio', i18next.t('figure.label.tab-response'))}
             ${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.instances)}
           </div>
@@ -1826,7 +1813,6 @@ let FigureEditor = class FigureEditor extends LitElement {
                     @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
                     @part-live=${(e) => this.hold({}, e.detail.edit)}
                   ></figure-material-panel>
-                  ${this.renderCapability(asset, unavailable)}
                   ${this.renderMore(part, view.palette ?? {}, unavailable)}`
             : view.geometry.length === 0
                 ? html `${this.renderSubject()}<section empty-figure>
@@ -1836,16 +1822,31 @@ let FigureEditor = class FigureEditor extends LitElement {
                       <slot name="figure"></slot>
                     </details>
                   </section>`
-                : html `${this.renderSubject()}<slot name="figure"></slot>
-                  ${this.renderGroups(groupFields(common), 'figure.label.group-figure-size', 'figure.label.design-inputs', unavailable)}
-                  ${this.renderInstanceRange(shown, unavailable)}
-                  ${this.renderCapability(asset, unavailable)}`}
+                : html `${this.renderSubject()}<slot name="figure"></slot>`}
+          </div>
+          <div panel ?off=${tab !== 'response'}>
+            ${this.renderSubject()}
+            ${this.selected && part
+            ? this.renderResponse(shown, view.geometry, unavailable)
+            : html `${this.renderGroups(groupFields(common), 'figure.label.group-figure-size', 'figure.label.design-inputs', unavailable)}
+                  ${this.renderInstanceRange(shown, unavailable)}`}
           </div>
           <div panel ?off=${tab !== 'motion'}>
             ${this.renderSubject()}
             ${this.selected && part ? this.renderLinks(unavailable, 'motion') : html `<section><p hint>${i18next.t('figure.text.choose-a-part-to-move')}</p></section>`}
             ${this.renderControls(view, unavailable)}
           </div>
+          <div panel ?off=${tab !== 'capability'}>
+            ${this.renderSubject()}
+            ${this.selected && part ? this.renderLinks(unavailable, 'places') : nothing}
+            <figure-capability-panel
+              .asset=${asset}
+              .selected=${this.selected}
+              ?locked=${unavailable}
+              @select-part=${(e) => this.choose(e.detail.id)}
+              @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
+            ></figure-capability-panel>
+          </div>
           <div panel ?off=${tab !== 'data'}>
             ${this.renderSubject()}
             <figure-data-panel
@@ -2086,10 +2087,6 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], FigureEditor.prototype, "overlay", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureEditor.prototype, "capabilityOpen", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)