@things-factory/figure-ui 10.1.176 → 10.1.177

package/client/modeller/editor-styles.ts

@@ -265,13 +265,11 @@ export const EditorStyles = css`
     display: grid;
     gap: 6px;
   }
-  /* A folded group (capability, 「더 보기」): its title is the fold's handle, at the title's size. */
-  section[more] > details > summary,
-  section[capability] > details > summary {
+  /* The folded 「더 보기」: its title is the fold's handle, at the title's size. */
+  section[more] > details > summary {
     padding: 0;
   }
-  section[more] > details > summary > h3,
-  section[capability] > details > summary > h3 {
+  section[more] > details > summary > h3 {
     margin: 0;
   }
   div[more-body] {

package/client/modeller/editor.ts

@@ -72,12 +72,13 @@ import { groupMenu, GroupMenuStyles } from './group-menu.js'
 
 
 /**
- * The side's four tabs (chief architect 2026-10-16): properties, motion, its data (ADR-0051), the verdict. What it does
- * (its places) is a group of the properties; the view is a menu over the canvas and the release history opens from the
- * bar, since neither is about the part chosen. The verdict gives way to properties when a part is chosen; a tab about
- * parts keeps showing the newly chosen part.
+ * The side's six tabs (user 2026-10-17: up to six): properties -- the part's shape, place and look; 「반응형」 -- how it
+ * answers a size it is placed at (its size rules, a position that follows the size, its row; the figure's range);
+ * motion; what it does (its places); its data (ADR-0051); the verdict. The view is a menu over the canvas and the
+ * release history opens from the bar, since neither is about the part chosen. The verdict gives way to properties when
+ * a part is chosen; a tab about parts keeps showing the newly chosen part.
  */
-type SideTab = 'properties' | 'motion' | 'data' | 'verdict'
+type SideTab = 'properties' | 'response' | 'motion' | 'capability' | 'data' | 'verdict'
 
 /** What opens over the work from the bar: the view settings or the release history, one at a time. */
 type BarOverlay = 'view' | 'history'
@@ -134,8 +135,6 @@ export class FigureEditor extends LitElement {
   @state() private tab: SideTab = 'properties'
   /** The view settings or the release history, open over the work from the bar. */
   @state() private overlay?: BarOverlay
-  /** The capability group open: the canvas marks the places only while their group is in sight. */
-  @state() private capabilityOpen = false
   /** 「더 보기」 open, as this person left it last (chief architect 2026-10-16: kept per person). */
   @state() private moreOpen = FigureEditor.storedMoreOpen()
   private static storedMoreOpen(): boolean {
@@ -199,7 +198,7 @@ export 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)
   })
   /**
@@ -752,12 +751,14 @@ export class FigureEditor extends LitElement {
     }
   }
   /** Size response, fastening and motion for the selected part, as authoring commands. */
-  private renderLinks(unavailable: boolean, section: 'shape' | 'places' | 'motion', slotted: unknown = nothing) {
+  private renderLinks(unavailable: boolean, section: 'shape' | 'response' | 'places' | 'motion', slotted: unknown = nothing) {
     const shown = this.shown()
     if (!shown) return null
+    const tab: SideTab = 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: CustomEvent) => this.linkCommand(e.detail.action)}
@@ -772,9 +773,10 @@ export 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).
    */
   private renderPartGroups(shown: FigureRevision | undefined, geometry: readonly { id: string }[], fields: FieldLike[], unavailable: boolean, held?: HeldValues) {
     const groups = this.withSizeRow(groupFields(fields, this.selected), held)
@@ -795,28 +797,12 @@ export 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.
-   */
-  private renderCapability(asset: FigureAsset | undefined, unavailable: boolean) {
-    return html`<section capability>
-      <details capability-fold ?open=${this.capabilityOpen} @toggle=${(e: Event) => (this.capabilityOpen = (e.target as HTMLDetailsElement).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: CustomEvent) => this.choose(e.detail.id)}
-          @part-edit=${(e: CustomEvent) => 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. */
+  private renderResponse(shown: FigureRevision | undefined, geometry: readonly { id: string }[], unavailable: boolean) {
+    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
@@ -1747,7 +1733,7 @@ export class FigureEditor extends LitElement {
               @configure-size=${async (e: CustomEvent<{ part: string }>) => {
                 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' })
               }}
@@ -1764,7 +1750,7 @@ export 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}
@@ -1778,7 +1764,9 @@ export 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>
@@ -1809,7 +1797,6 @@ export class FigureEditor extends LitElement {
                     @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
                     @part-live=${(e: CustomEvent) => 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>
@@ -1819,16 +1806,31 @@ export 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: CustomEvent) => this.choose(e.detail.id)}
+              @part-edit=${(e: CustomEvent) => this.run(() => this.session!.edit(e.detail.edit))}
+            ></figure-capability-panel>
+          </div>
           <div panel ?off=${tab !== 'data'}>
             ${this.renderSubject()}
             <figure-data-panel

package/client/modeller/figure-links.ts

@@ -184,7 +184,12 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   @property() partId = ''
   @property({ type: Boolean }) locked = false
   /** Which ties this shows: the part's shape (size and placement, in 속성), its places (자리·능력) or its motion (움직임). */
-  @property() section: 'shape' | 'places' | 'motion' = 'shape'
+  @property() section: 'shape' | 'response' | 'places' | 'motion' = '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.
+   */
+  @property({ type: Boolean }) active = true
   /** What the fastening command would do, in words (the editor works it out: `command-preview.ts`). */
   @property({ attribute: false }) previewWords: string[] = []
   /** Where the selected part's motion takes it, at both ends of its range (the editor draws them on the canvas). */
@@ -231,6 +236,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
      fastening it has" over an empty target (2026-09-27, :3391, the doors). */
   private loadedFor?: string
   willUpdate(changed: Map<string, unknown>) {
+    /* 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 = ''
     if (this.asset && this.partId && this.partId !== this.loadedFor) {
@@ -248,9 +255,10 @@ export 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) return
+    /* 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) return
     this.told = said
@@ -301,12 +309,33 @@ export 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>
@@ -314,12 +343,10 @@ export 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
   }
 

package/dist-client/modeller/editor-styles.js

@@ -264,13 +264,11 @@ export const EditorStyles = css `
     display: grid;
     gap: 6px;
   }
-  /* A folded group (capability, 「더 보기」): its title is the fold's handle, at the title's size. */
-  section[more] > details > summary,
-  section[capability] > details > summary {
+  /* The folded 「더 보기」: its title is the fold's handle, at the title's size. */
+  section[more] > details > summary {
     padding: 0;
   }
-  section[more] > details > summary > h3,
-  section[capability] > details > summary > h3 {
+  section[more] > details > summary > h3 {
     margin: 0;
   }
   div[more-body] {

package/dist-client/modeller/editor-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor-styles.js","sourceRoot":"","sources":["../../client/modeller/editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,gHAAgH;AAChH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmZ9B,CAAA","sourcesContent":["import { css } from 'lit'\n\n/** The modeller editor's own styles: the bar's tools, the panes, the start card, the side's tabs and panels. */\nexport const EditorStyles = css`\n  :host {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    height: 100%;\n    /* The editor folds by the width it is given, not the window's (UX ruling, 2026-09-24). */\n    container-type: inline-size;\n    /* The app's one face (its typography theme's --theme-font) at the body size: a bare sans-serif here put a second\n       face under everything the editor draws, beside the parts list and the shell in the app's own (2026-10-16). */\n    font-family: var(--theme-font, ui-sans-serif, system-ui, sans-serif);\n    font-size: var(--ui-t-body, 13px);\n    color: var(--md-sys-color-on-surface);\n  }\n  /* The bar over the work is ox-canvas-bar (ADR-0060 decision 8): the folds at its edges, undo, redo and\n     fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */\n  ox-canvas-bar button[mode] {\n    height: 28px;\n    border: 1px solid transparent;\n    padding: 0 10px;\n    border-radius: 999em;\n    border-color: transparent;\n    background: none;\n  }\n  ox-canvas-bar button[mode][aria-pressed='true'] {\n    border-color: var(--md-sys-color-primary);\n  }\n  /* The gizmo's tools, drawn as the bar's own icon buttons (undo, redo, fit). */\n  ox-canvas-bar .gizmo-tools {\n    display: inline-flex;\n    gap: 2px;\n    padding-left: 4px;\n    border-left: 1px solid var(--md-sys-color-outline-variant);\n  }\n  ox-canvas-bar button[tool] {\n    display: inline-grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    background: transparent;\n    color: var(--md-sys-color-on-surface-variant);\n    cursor: pointer;\n  }\n  ox-canvas-bar button[tool]:hover:not(:disabled) {\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface);\n  }\n  ox-canvas-bar button[tool][aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n  ox-canvas-bar button[tool]:disabled {\n    opacity: 0.38;\n    cursor: default;\n  }\n  /*\n    Slotted into the bar from here, the tools do not get the bar's own icon size (20px, set inside its shadow): they\n    showed at md-icon's 24px, heavier than undo, redo and fit beside them. The same size, and the bar's focus ring.\n  */\n  ox-canvas-bar button[tool] md-icon {\n    --md-icon-size: 20px;\n  }\n  ox-canvas-bar button[tool]:focus-visible {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: 1px;\n  }\n  figure-preview {\n    min-width: 0;\n    min-height: 0;\n  }\n  /* The edit canvas stays standing while the preview is in front (a 3D scene costs a third of a second to make), out of sight. */\n  div[middle][hidden] {\n    display: none;\n  }\n  /* The preview, once made, stays standing out of sight too: its 3D scene is not made again each time it is asked for. */\n  figure-preview[hidden] {\n    display: none;\n  }\n  ox-canvas-bar .status {\n    padding: 0 8px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  ox-canvas-bar .status[dirty] {\n    color: var(--md-sys-color-primary);\n    font-weight: 600;\n  }\n  ox-canvas-bar button[save] {\n    height: 32px;\n    padding: 0 14px;\n    border: none;\n    border-radius: 999em;\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n  }\n  /* The three panes are ox-three-pane's (ADR-0060 decision 8): widths 200 | 1fr | 340, 160 | 300 under\n     860px and one column with the middle first under 560px are the frame's, as are the dividers. */\n  ox-three-pane {\n    flex: 1;\n    min-height: 0;\n  }\n  figure-parts {\n    min-height: 0;\n  }\n  figure-canvas {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n  }\n  div[middle] {\n    position: relative;\n    display: flex;\n    min-width: 0;\n    min-height: 0;\n  }\n  /* A new figure's first question, over the empty canvas. */\n  div[start] {\n    position: absolute;\n    inset: 50% auto auto 50%;\n    z-index: 10;\n    color: var(--md-sys-color-on-surface);\n    transform: translate(-50%, -50%);\n    width: min(440px, calc(100% - 32px));\n    box-sizing: border-box;\n    padding: 20px;\n    border-radius: 12px;\n    background: var(--md-sys-color-surface, #fff);\n    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);\n  }\n  div[start] button[start-button] {\n    width: auto;\n    margin: 0;\n    font-size: var(--ui-t-body);\n    height: 36px;\n    padding: 0 16px;\n    border: 1px solid var(--md-sys-color-outline);\n    border-radius: 999em;\n    color: var(--md-sys-color-primary);\n    background: var(--md-sys-color-surface, #fff);\n    cursor: pointer;\n  }\n  div[start] button[start-button]:hover:not(:disabled) {\n    background: var(--md-sys-color-primary-container);\n  }\n  div[start] button[start-button][pressed] {\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n    border-color: var(--md-sys-color-primary);\n  }\n  div[start] button[start-button]:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n  div[start] h2 {\n    margin: 0 0 12px;\n    font-size: var(--ui-t-title);\n  }\n  div[start-paths] {\n    display: grid;\n    gap: 14px;\n  }\n  div[start-paths] h3 {\n    margin: 0 0 6px;\n    font-size: var(--ui-t-body);\n  }\n  div[start-shapes] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n  div[start] small {\n    display: block;\n    margin-top: 4px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /* The side: tabs over one panel at a time, each using the whole height. */\n  /*\n    The side's words at the panel's size (side-panel-styles: titles body, the rest small). The editor's host is at body\n    for the bar, and the fields the editor drew itself -- the part's name -- stood a step larger than every other field.\n  */\n  aside {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    font-size: var(--ui-t-small, 11.5px);\n    background: var(--md-sys-color-surface-container-lowest);\n  }\n  div[tabs] {\n    display: flex;\n    flex: none;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  button[tab] {\n    flex: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 1px;\n    min-width: 0;\n    height: 48px;\n    padding: 0;\n    border: none;\n    border-radius: 0;\n    border-bottom: 2px solid transparent;\n    background: none;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  button[tab]:hover:not([on]) {\n    background: var(--md-sys-color-surface-container);\n  }\n  button[tab][on] {\n    color: var(--md-sys-color-primary);\n    border-bottom-color: var(--md-sys-color-primary);\n  }\n  button[tab] md-icon {\n    font-size: 20px;\n    width: 20px;\n    height: 20px;\n  }\n  button[tab] span[tab-label] {\n    max-width: 100%;\n    overflow: hidden;\n    font-size: var(--ui-t-micro, 11px);\n    line-height: 1.2;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  span[badge] {\n    position: absolute;\n    top: 3px;\n    right: 2px;\n    padding: 0 5px;\n    font-size: var(--ui-t-micro, 11px);\n    font-weight: 700;\n    line-height: 1.5;\n    color: var(--md-sys-color-on-primary-container);\n    background: var(--md-sys-color-primary-container);\n    border-radius: 999em;\n    pointer-events: none;\n  }\n  /* The sections inside carry the margins (side-panel-styles); the panel only scrolls. */\n  div[panel] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding: 0;\n  }\n  div[panel][flush] {\n    padding: 0;\n  }\n  /* Hidden, not removed: a panel keeps what it holds (the verdict its last answer) while another tab is open. */\n  [off] {\n    display: none !important;\n  }\n  /* The part's own numbers inside a group the links draw (size, place): one column, the panel's gap. */\n  div[group-fields] {\n    display: grid;\n    gap: 6px;\n  }\n  /* A folded group (capability, 「더 보기」): its title is the fold's handle, at the title's size. */\n  section[more] > details > summary,\n  section[capability] > details > summary {\n    padding: 0;\n  }\n  section[more] > details > summary > h3,\n  section[capability] > details > summary > h3 {\n    margin: 0;\n  }\n  div[more-body] {\n    display: grid;\n    gap: 16px;\n    margin-top: 12px;\n  }\n  /*\n    The view settings and the release history, opened from the bar over the right of the work: neither is about the\n    part chosen, so neither takes a tab beside the part's (chief architect 2026-10-16).\n  */\n  :host {\n    position: relative;\n  }\n  div[bar-overlay-panel] {\n    position: absolute;\n    top: var(--figure-bar-height, 44px);\n    right: 8px;\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    width: min(360px, calc(100% - 16px));\n    max-height: calc(100% - var(--figure-bar-height, 44px) - 16px);\n    background: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);\n  }\n  div[overlay-head] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 8px 8px 12px;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  div[overlay-head] h3 {\n    margin: 0;\n  }\n  div[overlay-head] button[quiet] {\n    margin-left: 0;\n  }\n  div[overlay-body] {\n    min-height: 0;\n    overflow: auto;\n  }\n  /* Which part the panel speaks of. */\n  div[subject] {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    display: grid;\n    gap: 4px;\n    padding: 10px 12px;\n    background: var(--md-sys-color-surface-container-lowest);\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  /* The panel's three sizes (side-panel-styles): the part's kind at the title's, its two lines at the hint's. */\n  div[subject-summary] {\n    display: grid;\n    gap: 2px;\n  }\n  div[subject-summary] b {\n    font-size: var(--ui-t-body, 13px);\n    font-weight: 600;\n  }\n  div[subject-summary] b span {\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  div[subject-summary] small {\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /*\n    No rule here draws every button as a box: the side's buttons take the shared panel rules (SidePanelStyles), one\n    height with the fields beside them, and only the bar's publish keeps an outline (user 2026-10-16: 「버튼 박스도\n    과하게 사용되어서」 -- a bare 「button」 rule had put a 32px box round every button the editor drew).\n  */\n  button {\n    font: inherit;\n    box-sizing: border-box;\n    color: inherit;\n    min-width: 0;\n    cursor: pointer;\n  }\n  /* What blocks release, beside 「발행」: one red word button, and its list under the bar. */\n  ox-canvas-bar button[release-blocked] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    height: 32px;\n    padding: 0 10px;\n    border: none;\n    border-radius: 6px;\n    color: var(--md-sys-color-on-error-container);\n    background: var(--md-sys-color-error-container);\n  }\n  ox-canvas-bar button[release-blocked] md-icon {\n    --md-icon-size: 18px;\n  }\n  div[release-blockers] {\n    position: absolute;\n    top: 46px;\n    right: 8px;\n    z-index: 6;\n    width: min(340px, calc(100% - 16px));\n    padding: 8px 10px 10px;\n    box-sizing: border-box;\n    background: var(--md-sys-color-surface);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);\n  }\n  ox-canvas-bar button[publish] {\n    height: 32px;\n    padding: 0 8px;\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n    background: var(--md-sys-color-surface);\n  }\n  button:disabled {\n    opacity: 0.45;\n    cursor: default;\n  }\n  button[aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    border-color: var(--md-sys-color-primary);\n  }\n  .hint {\n    color: var(--md-sys-color-on-surface-variant);\n    line-height: 1.5;\n  }\n`\n"]}
+{"version":3,"file":"editor-styles.js","sourceRoot":"","sources":["../../client/modeller/editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,gHAAgH;AAChH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiZ9B,CAAA","sourcesContent":["import { css } from 'lit'\n\n/** The modeller editor's own styles: the bar's tools, the panes, the start card, the side's tabs and panels. */\nexport const EditorStyles = css`\n  :host {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    height: 100%;\n    /* The editor folds by the width it is given, not the window's (UX ruling, 2026-09-24). */\n    container-type: inline-size;\n    /* The app's one face (its typography theme's --theme-font) at the body size: a bare sans-serif here put a second\n       face under everything the editor draws, beside the parts list and the shell in the app's own (2026-10-16). */\n    font-family: var(--theme-font, ui-sans-serif, system-ui, sans-serif);\n    font-size: var(--ui-t-body, 13px);\n    color: var(--md-sys-color-on-surface);\n  }\n  /* The bar over the work is ox-canvas-bar (ADR-0060 decision 8): the folds at its edges, undo, redo and\n     fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */\n  ox-canvas-bar button[mode] {\n    height: 28px;\n    border: 1px solid transparent;\n    padding: 0 10px;\n    border-radius: 999em;\n    border-color: transparent;\n    background: none;\n  }\n  ox-canvas-bar button[mode][aria-pressed='true'] {\n    border-color: var(--md-sys-color-primary);\n  }\n  /* The gizmo's tools, drawn as the bar's own icon buttons (undo, redo, fit). */\n  ox-canvas-bar .gizmo-tools {\n    display: inline-flex;\n    gap: 2px;\n    padding-left: 4px;\n    border-left: 1px solid var(--md-sys-color-outline-variant);\n  }\n  ox-canvas-bar button[tool] {\n    display: inline-grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    background: transparent;\n    color: var(--md-sys-color-on-surface-variant);\n    cursor: pointer;\n  }\n  ox-canvas-bar button[tool]:hover:not(:disabled) {\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface);\n  }\n  ox-canvas-bar button[tool][aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n  ox-canvas-bar button[tool]:disabled {\n    opacity: 0.38;\n    cursor: default;\n  }\n  /*\n    Slotted into the bar from here, the tools do not get the bar's own icon size (20px, set inside its shadow): they\n    showed at md-icon's 24px, heavier than undo, redo and fit beside them. The same size, and the bar's focus ring.\n  */\n  ox-canvas-bar button[tool] md-icon {\n    --md-icon-size: 20px;\n  }\n  ox-canvas-bar button[tool]:focus-visible {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: 1px;\n  }\n  figure-preview {\n    min-width: 0;\n    min-height: 0;\n  }\n  /* The edit canvas stays standing while the preview is in front (a 3D scene costs a third of a second to make), out of sight. */\n  div[middle][hidden] {\n    display: none;\n  }\n  /* The preview, once made, stays standing out of sight too: its 3D scene is not made again each time it is asked for. */\n  figure-preview[hidden] {\n    display: none;\n  }\n  ox-canvas-bar .status {\n    padding: 0 8px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  ox-canvas-bar .status[dirty] {\n    color: var(--md-sys-color-primary);\n    font-weight: 600;\n  }\n  ox-canvas-bar button[save] {\n    height: 32px;\n    padding: 0 14px;\n    border: none;\n    border-radius: 999em;\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n  }\n  /* The three panes are ox-three-pane's (ADR-0060 decision 8): widths 200 | 1fr | 340, 160 | 300 under\n     860px and one column with the middle first under 560px are the frame's, as are the dividers. */\n  ox-three-pane {\n    flex: 1;\n    min-height: 0;\n  }\n  figure-parts {\n    min-height: 0;\n  }\n  figure-canvas {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n  }\n  div[middle] {\n    position: relative;\n    display: flex;\n    min-width: 0;\n    min-height: 0;\n  }\n  /* A new figure's first question, over the empty canvas. */\n  div[start] {\n    position: absolute;\n    inset: 50% auto auto 50%;\n    z-index: 10;\n    color: var(--md-sys-color-on-surface);\n    transform: translate(-50%, -50%);\n    width: min(440px, calc(100% - 32px));\n    box-sizing: border-box;\n    padding: 20px;\n    border-radius: 12px;\n    background: var(--md-sys-color-surface, #fff);\n    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);\n  }\n  div[start] button[start-button] {\n    width: auto;\n    margin: 0;\n    font-size: var(--ui-t-body);\n    height: 36px;\n    padding: 0 16px;\n    border: 1px solid var(--md-sys-color-outline);\n    border-radius: 999em;\n    color: var(--md-sys-color-primary);\n    background: var(--md-sys-color-surface, #fff);\n    cursor: pointer;\n  }\n  div[start] button[start-button]:hover:not(:disabled) {\n    background: var(--md-sys-color-primary-container);\n  }\n  div[start] button[start-button][pressed] {\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n    border-color: var(--md-sys-color-primary);\n  }\n  div[start] button[start-button]:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n  div[start] h2 {\n    margin: 0 0 12px;\n    font-size: var(--ui-t-title);\n  }\n  div[start-paths] {\n    display: grid;\n    gap: 14px;\n  }\n  div[start-paths] h3 {\n    margin: 0 0 6px;\n    font-size: var(--ui-t-body);\n  }\n  div[start-shapes] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n  div[start] small {\n    display: block;\n    margin-top: 4px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /* The side: tabs over one panel at a time, each using the whole height. */\n  /*\n    The side's words at the panel's size (side-panel-styles: titles body, the rest small). The editor's host is at body\n    for the bar, and the fields the editor drew itself -- the part's name -- stood a step larger than every other field.\n  */\n  aside {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    font-size: var(--ui-t-small, 11.5px);\n    background: var(--md-sys-color-surface-container-lowest);\n  }\n  div[tabs] {\n    display: flex;\n    flex: none;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  button[tab] {\n    flex: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 1px;\n    min-width: 0;\n    height: 48px;\n    padding: 0;\n    border: none;\n    border-radius: 0;\n    border-bottom: 2px solid transparent;\n    background: none;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  button[tab]:hover:not([on]) {\n    background: var(--md-sys-color-surface-container);\n  }\n  button[tab][on] {\n    color: var(--md-sys-color-primary);\n    border-bottom-color: var(--md-sys-color-primary);\n  }\n  button[tab] md-icon {\n    font-size: 20px;\n    width: 20px;\n    height: 20px;\n  }\n  button[tab] span[tab-label] {\n    max-width: 100%;\n    overflow: hidden;\n    font-size: var(--ui-t-micro, 11px);\n    line-height: 1.2;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  span[badge] {\n    position: absolute;\n    top: 3px;\n    right: 2px;\n    padding: 0 5px;\n    font-size: var(--ui-t-micro, 11px);\n    font-weight: 700;\n    line-height: 1.5;\n    color: var(--md-sys-color-on-primary-container);\n    background: var(--md-sys-color-primary-container);\n    border-radius: 999em;\n    pointer-events: none;\n  }\n  /* The sections inside carry the margins (side-panel-styles); the panel only scrolls. */\n  div[panel] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding: 0;\n  }\n  div[panel][flush] {\n    padding: 0;\n  }\n  /* Hidden, not removed: a panel keeps what it holds (the verdict its last answer) while another tab is open. */\n  [off] {\n    display: none !important;\n  }\n  /* The part's own numbers inside a group the links draw (size, place): one column, the panel's gap. */\n  div[group-fields] {\n    display: grid;\n    gap: 6px;\n  }\n  /* The folded 「더 보기」: its title is the fold's handle, at the title's size. */\n  section[more] > details > summary {\n    padding: 0;\n  }\n  section[more] > details > summary > h3 {\n    margin: 0;\n  }\n  div[more-body] {\n    display: grid;\n    gap: 16px;\n    margin-top: 12px;\n  }\n  /*\n    The view settings and the release history, opened from the bar over the right of the work: neither is about the\n    part chosen, so neither takes a tab beside the part's (chief architect 2026-10-16).\n  */\n  :host {\n    position: relative;\n  }\n  div[bar-overlay-panel] {\n    position: absolute;\n    top: var(--figure-bar-height, 44px);\n    right: 8px;\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    width: min(360px, calc(100% - 16px));\n    max-height: calc(100% - var(--figure-bar-height, 44px) - 16px);\n    background: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);\n  }\n  div[overlay-head] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 8px 8px 12px;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  div[overlay-head] h3 {\n    margin: 0;\n  }\n  div[overlay-head] button[quiet] {\n    margin-left: 0;\n  }\n  div[overlay-body] {\n    min-height: 0;\n    overflow: auto;\n  }\n  /* Which part the panel speaks of. */\n  div[subject] {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    display: grid;\n    gap: 4px;\n    padding: 10px 12px;\n    background: var(--md-sys-color-surface-container-lowest);\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  /* The panel's three sizes (side-panel-styles): the part's kind at the title's, its two lines at the hint's. */\n  div[subject-summary] {\n    display: grid;\n    gap: 2px;\n  }\n  div[subject-summary] b {\n    font-size: var(--ui-t-body, 13px);\n    font-weight: 600;\n  }\n  div[subject-summary] b span {\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  div[subject-summary] small {\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /*\n    No rule here draws every button as a box: the side's buttons take the shared panel rules (SidePanelStyles), one\n    height with the fields beside them, and only the bar's publish keeps an outline (user 2026-10-16: 「버튼 박스도\n    과하게 사용되어서」 -- a bare 「button」 rule had put a 32px box round every button the editor drew).\n  */\n  button {\n    font: inherit;\n    box-sizing: border-box;\n    color: inherit;\n    min-width: 0;\n    cursor: pointer;\n  }\n  /* What blocks release, beside 「발행」: one red word button, and its list under the bar. */\n  ox-canvas-bar button[release-blocked] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    height: 32px;\n    padding: 0 10px;\n    border: none;\n    border-radius: 6px;\n    color: var(--md-sys-color-on-error-container);\n    background: var(--md-sys-color-error-container);\n  }\n  ox-canvas-bar button[release-blocked] md-icon {\n    --md-icon-size: 18px;\n  }\n  div[release-blockers] {\n    position: absolute;\n    top: 46px;\n    right: 8px;\n    z-index: 6;\n    width: min(340px, calc(100% - 16px));\n    padding: 8px 10px 10px;\n    box-sizing: border-box;\n    background: var(--md-sys-color-surface);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);\n  }\n  ox-canvas-bar button[publish] {\n    height: 32px;\n    padding: 0 8px;\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n    background: var(--md-sys-color-surface);\n  }\n  button:disabled {\n    opacity: 0.45;\n    cursor: default;\n  }\n  button[aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    border-color: var(--md-sys-color-primary);\n  }\n  .hint {\n    color: var(--md-sys-color-on-surface-variant);\n    line-height: 1.5;\n  }\n`\n"]}

package/dist-client/modeller/editor.d.ts

@@ -61,8 +61,6 @@ export declare class FigureEditor extends LitElement {
     private tab;
     /** The view settings or the release history, open over the work from the bar. */
     private overlay?;
-    /** The capability group open: the canvas marks the places only while their group is in sight. */
-    private capabilityOpen;
     /** 「더 보기」 open, as this person left it last (chief architect 2026-10-16: kept per person). */
     private moreOpen;
     private static storedMoreOpen;
@@ -203,16 +201,14 @@ export declare class FigureEditor extends LitElement {
     /** Size response, fastening and motion for the selected part, as authoring commands. */
     private renderLinks;
     /**
-     * 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).
      */
     private renderPartGroups;
-    /**
-     * 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.
-     */
-    private renderCapability;
+    /** The 「반응형」 tab of a part: the links' response groups, its row's own section put in by slot. */
+    private renderResponse;
     /**
      * 「더 보기」: what few parts need, folded by default and left as this person last left it (chief architect
      * 2026-10-16) -- the section, its corners and inside; transparency, glow and segments; the mirrored copy and the

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)