@things-factory/figure-ui 10.1.93 → 10.1.95

package/client/modeller/editor.ts

@@ -312,13 +312,18 @@ export class FigureEditor extends LitElement {
       z-index: 1;
       display: grid;
       gap: 4px;
-      padding: 8px 10px;
+      padding: 10px 12px;
       background: var(--md-sys-color-surface-container-lowest);
       border-bottom: 1px solid var(--md-sys-color-outline-variant);
     }
+    /* The panel's three sizes (side-panel-styles): the part's kind at the title's, its two lines at the hint's. */
     div[subject-summary] {
       display: grid;
-      gap: 1px;
+      gap: 2px;
+    }
+    div[subject-summary] b {
+      font-size: var(--ui-t-body, 13px);
+      font-weight: 600;
     }
     div[subject-summary] b span {
       font-weight: 400;
@@ -2122,6 +2127,7 @@ export class FigureEditor extends LitElement {
       ? html`<section>
           <h3>${i18next.t(vectorTitle)}</h3>
           ${groups.vectors.map(g => this.renderVector(g, unavailable, held))}
+          ${this.renderHeldAxes(groups.vectors)}
           ${tools ?? nothing}
         </section>`
       : nothing}
@@ -2176,7 +2182,22 @@ export class FigureEditor extends LitElement {
         )}
       </div>
     </div>
-    ${ruled.length ? html`<p hint held-axes>${i18next.t('figure.text.axes-held-by-rule', { group: i18next.t('figure.label.group-' + group.name), axes: ruled.map(a => a.toUpperCase()).join(' · ') })}</p>` : nothing}`
+`
+  }
+  /**
+   * Which axes a rule sets, said once under the rows (position and rotation X · Y · Z set by a rule), not a line under each row
+   * saying the same (user 2026-10-01, the panel checked for balance). The cells themselves are dashed and read-only.
+   */
+  private renderHeldAxes(vectors: FieldGroup[]) {
+    const byAxes = new Map<string, string[]>()
+    for (const g of vectors) {
+      if (g.kind !== 'vector') continue
+      const ruled = (['x', 'y', 'z'] as const).filter(axis => !g.cells[axis])
+      if (!ruled.length) continue
+      const axes = ruled.map(a => a.toUpperCase()).join(' · ')
+      byAxes.set(axes, [...(byAxes.get(axes) ?? []), i18next.t('figure.label.group-' + g.name)])
+    }
+    return [...byAxes].map(([axes, groups]) => html`<p hint held-axes>${i18next.t('figure.text.axes-held-by-rule', { group: groups.join(' · '), axes })}</p>`)
   }
   /**
    * A part's fields only the declared room still reads (ADR-0097, designer 2026-09-27): shown as what they are and not
@@ -2191,7 +2212,7 @@ export class FigureEditor extends LitElement {
           f => html`<span>${fieldWordsOf(f.id, key => i18next.t(key))} (${f.unit})</span><input aria-label=${f.id} type="number" .value=${String(f.value)} disabled />`
         )}
       </div>
-      <button act room-refit ?disabled=${unavailable} @click=${() => this.askRoomRefit()}>${i18next.t('figure.button.room-refit')}</button>
+      <button act room-refit ?disabled=${unavailable} @click=${() => this.askRoomRefit()}><md-icon>fit_screen</md-icon>${i18next.t('figure.button.room-refit')}</button>
     </section>`
   }
   /** The room as declared and as proposed, and what lies outside each as measured, before the author confirms. */

package/client/modeller/figure-fasten-drawing.ts

@@ -22,6 +22,7 @@ const SEEN: Array<[FigureFace, string]> = [
   ['right', 'M160 30 L200 10 L200 80 L160 100 Z']
 ]
 /** The faces the drawing cannot show on the box, as tags beside it where they are. */
+/* The box is drawn a little left of its picture's middle, and the viewBox shifts it back to the panel's centre. */
 const HIDDEN: Array<[FigureFace, number, number]> = [
   ['bottom', 30, 114],
   ['left', 24, 62],
@@ -64,12 +65,17 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
       grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
       gap: 6px;
     }
+    div[modes] svg {
+      width: 64px;
+      height: 44px;
+    }
     div[modes] button {
       display: grid;
       justify-items: center;
+      align-content: center;
+      gap: 2px;
       padding: 2px 4px 4px;
       font: inherit;
-      font-size: 0.72rem;
       color: var(--md-sys-color-on-surface);
       background: none;
       border: 1px solid var(--md-sys-color-outline-variant);
@@ -88,7 +94,6 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
       position: absolute;
       width: 72px;
       font: inherit;
-      font-size: 0.75rem;
     }
     small[warn] {
       color: var(--md-sys-color-tertiary);
@@ -135,11 +140,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
 
   /** The target box, its faces pressed; or the plane. */
   private renderTarget() {
-    if (!this.target)
-      return svg`<svg viewBox="0 0 ${PANEL_W} 90" role="img" aria-label=${this.planeWord}>
-        <path d="M30 80 L110 30 L270 30 L190 80 Z" style="fill:var(--md-sys-color-primary);fill-opacity:.35;stroke:var(--md-sys-color-primary);stroke-width:1.5" />
-        <text x="150" y="62" text-anchor="middle" font-size="12" style="fill:var(--md-sys-color-on-primary-container)">${this.planeWord}</text>
-      </svg>`
+    /* The plane is one face, named in the list and on the face drawn below: nothing to pick, so no picture of it. */
+    if (!this.target) return nothing
     const has = (f: string) => this.faces.includes(f)
     /* A press is a whole change, as a drag let go is: the form applies a fastening the part already has. */
     const pick = (f: string) => () => {
@@ -150,7 +152,7 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     const seen = SEEN.map(([f, d]) => {
       const on = this.face === f
       return svg`<path face=${f} d=${d} @click=${pick(f)}
-        style=${`cursor:${has(f) ? 'pointer' : 'default'};fill:${on ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-primary-container)'};fill-opacity:${on ? 0.55 : has(f) ? 1 : 0.35};stroke:var(--md-sys-color-primary);stroke-width:1.5`}>
+        style=${`cursor:${has(f) ? 'pointer' : 'default'};fill:${on ? 'var(--md-sys-color-primary-container)' : 'var(--md-sys-color-surface-container)'};fill-opacity:${has(f) ? 1 : 0.4};stroke:${on ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-outline)'};stroke-width:${on ? 2 : 1}`}>
         <title>${i18next.t('figure.label.face-' + f)}</title></path>`
     })
     const hidden = HIDDEN.map(([f, x, y]) => {
@@ -163,9 +165,9 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
     })
     /* A shape's faces beyond its six outer ones -- a door frame's opening -- are tags of their own under the box. */
     const others = this.faces.filter(f => !SEEN.some(([s]) => s === f) && !HIDDEN.some(([h]) => h === f))
-    return html`${svg`<svg viewBox="0 0 ${PANEL_W} 126" role="img" aria-label=${this.target}>
+    return html`${svg`<svg viewBox="-20 0 ${PANEL_W} 126" role="img" aria-label=${this.target}>
         ${seen}
-        <text x="110" y="70" text-anchor="middle" font-size="12" pointer-events="none" style="fill:var(--md-sys-color-on-primary-container)">${this.target}</text>
+        <text x="110" y="70" text-anchor="middle" font-size="12" pointer-events="none" style="fill:var(--md-sys-color-on-surface)">${this.target}</text>
         ${hidden}
       </svg>`}
       ${others.length
@@ -177,17 +179,19 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
 
   /** How: three side views; the chosen one's gap is dragged. */
   private renderModes() {
+    /* One way only (the plane is set on): the sentence says it; a single choice is not offered as a button. */
+    if (this.modes.length < 2) return nothing
     const icon = (m: FastenMode, on: boolean) => {
       const g = on && m !== 'centre' ? Math.min(this.gap / 4, 10) : 0
       const base = svg`<rect x="6" y="30" width="52" height="14" style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary)" />`
       const gapDrag = on && !this.locked ? 'ns-resize' : 'pointer'
       if (m === 'meet')
-        return svg`<svg width="64" height="48">${base}<rect gap x="22" y=${18 - g} width="20" height="12" style=${`fill:var(--md-sys-color-surface);stroke:currentColor;cursor:${gapDrag}`} />
+        return svg`<svg viewBox="0 0 64 48">${base}<rect gap x="22" y=${18 - g} width="20" height="12" style=${`fill:var(--md-sys-color-surface);stroke:currentColor;cursor:${gapDrag}`} />
           ${g ? svg`<text x="46" y=${26 - g / 2} font-size="10" style="fill:currentColor">${this.gap}</text>` : nothing}</svg>`
       if (m === 'flush')
-        return svg`<svg width="64" height="48">${base}<rect gap x="22" y=${30 - g} width="20" height="10" style=${`fill:var(--md-sys-color-surface);stroke:currentColor;cursor:${gapDrag}`} />
+        return svg`<svg viewBox="0 0 64 48">${base}<rect gap x="22" y=${30 - g} width="20" height="10" style=${`fill:var(--md-sys-color-surface);stroke:currentColor;cursor:${gapDrag}`} />
           <line x1="4" y1="30" x2="60" y2="30" style="stroke:currentColor;stroke-dasharray:2 2" /></svg>`
-      return svg`<svg width="64" height="48">${base}<circle cx="32" cy="30" r="11" style="fill:var(--md-sys-color-surface);fill-opacity:.85;stroke:currentColor" /><circle cx="32" cy="30" r="2" style="fill:currentColor" /></svg>`
+      return svg`<svg viewBox="0 0 64 48">${base}<circle cx="32" cy="30" r="11" style="fill:var(--md-sys-color-surface);fill-opacity:.85;stroke:currentColor" /><circle cx="32" cy="30" r="2" style="fill:currentColor" /></svg>`
     }
     return html`<div modes>
       ${this.modes.map(m => {
@@ -300,8 +304,8 @@ export class FigureFastenDrawing extends localize(i18next)(LitElement) {
             @pointermove=${(ev: PointerEvent) => this.drag(ev, view, cx, cy)}
             @pointerup=${() => this.drop()} @pointercancel=${() => this.drop()}>
           ${faceSized
-            ? svg`<rect x=${fx} y=${fy} width=${fw} height=${fh} rx="2" style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:1.5" />`
-            : svg`<rect x="4" y="4" width=${W - 8} height=${H - 8} rx="6" style="fill:var(--md-sys-color-primary-container);fill-opacity:.5" />`}
+            ? svg`<rect x=${fx} y=${fy} width=${fw} height=${fh} rx="4" style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />`
+            : svg`<rect x="1" y="1" width=${W - 2} height=${H - 2} rx="8" style="fill:var(--md-sys-color-primary-container);stroke:var(--md-sys-color-primary);stroke-width:2" />`}
           <text x=${faceSized ? fx + 4 : 10} y=${faceSized ? fy + fh - 6 : 18} font-size="11" pointer-events="none" style="fill:var(--md-sys-color-primary)">${faceName}${sizeWords}</text>
           ${guide(h)}${guide(v)}
           <g footprint style=${`cursor:${this.locked ? 'default' : 'grab'}`} @pointerdown=${(ev: PointerEvent) => this.grab(ev, at, caught)}>

package/client/modeller/figure-links.ts

@@ -119,17 +119,16 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     div[resize-held] { display: grid; gap: 8px; margin: 12px 0; padding: 10px 12px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); }
     div[resize-held] p { margin: 0; display: flex; align-items: center; gap: 6px; }
     p[fasten-mode] { margin: 0; font-weight: 600; }
-    p[fasten-mode][editing] { color: var(--md-sys-color-primary, #477b9e); }
     section[fastening][spotlit] { outline: 2px solid var(--md-sys-color-primary, #477b9e); outline-offset: 4px; border-radius: 6px; transition: outline-color 0.3s; }
-    details { margin-top: 14px; }
-    summary { cursor: pointer; padding: 8px 0; }
+    details { margin-top: 8px; }
     /* What the command would do, said beside the result drawn on the canvas. */
-    ul[preview-words] { margin: 10px 0; padding: 8px 12px 8px 26px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); display: grid; gap: 4px; }
+    ul[preview-words] { margin: 8px 0; padding: 8px 12px 8px 26px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); display: grid; gap: 4px; }
+    p[preview-words] { margin: 8px 0; padding: 8px 12px; border-radius: 6px; background: var(--md-sys-color-surface-container, #8881); }
     div[row-basis] { display: grid; gap: 4px; margin: 8px 0; }
     div[row-basis] label { display: flex; align-items: center; gap: 6px; }
     div[overhang] { display: grid; gap: 6px; margin: 8px 0; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--md-sys-color-outline-variant, #8884); }
     div[overhang] p { margin: 0; }
-    ul[detach-words] { margin: 4px 0 10px; padding-left: 20px; display: grid; gap: 2px; font-size: 0.8rem; opacity: 0.85; }
+    ul[detach-words] { margin: 4px 0 10px; padding-left: 20px; display: grid; gap: 2px; }
     span[fasten-summary] { opacity: 0.8; }
     /* The difference a following measure keeps: under its choice, on the same line as its words. */
     label[inline-plus] {
@@ -443,11 +442,11 @@ export class FigureLinks extends localize(i18next)(LitElement) {
     return html`<div resize-held>
       <p><md-icon>link</md-icon> ${where}</p>
       <button act open-fastening @click=${() => this.openFastening(asset)}>
-        ${i18next.t('figure.button.open-fastening')}
+        <md-icon>link</md-icon>${i18next.t('figure.button.open-fastening')}
       </button>
       ${joint
         ? html`<button act detach-held ?disabled=${this.locked} @click=${() => this.command({ kind: 'detach', part: this.partId })}>
-              ${i18next.t('figure.button.detach-held')}
+              <md-icon>link_off</md-icon>${i18next.t('figure.button.detach-held')}
             </button>
             ${this.renderDetachWords()}`
         : nothing}
@@ -569,17 +568,12 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       ...(f.twist ? [i18next.t('figure.text.fasten-summary-twist', { degrees: String(f.twist) })] : [])
     ]
     /*
-      Editing the fastening it has, or fastening it anew: said, with the relation named, so the form is not taken for a
-      blank new one while it holds the current (designer 2026-09-27). Applied unchanged, the same fastening is written
-      again, fields and all (resize-with-placement.test).
+      Fastening it anew is said, so the form is not taken for the one it has (designer 2026-09-27). The one it has is
+      said once, by the sentence over the drawing -- the panel's head says it too; a third and a fourth line saying the
+      same (「현재 관계 수정」, 「붙은 곳」) went (user 2026-10-01, the panel checked for balance).
     */
     const current = asset.joints?.find(j => j.body1.part === this.partId)
-    const editing = current
-      ? i18next.t('figure.text.fasten-editing', {
-          face: i18next.t(`figure.label.face-${current.body1.face}`),
-          target: 'plane' in current.body0 ? i18next.t('figure.label.mounting-plane') : `${current.body0.part} · ${i18next.t(`figure.label.face-${current.body0.face}`)}`
-        })
-      : i18next.t('figure.text.fasten-new')
+    const editing = i18next.t('figure.text.fasten-new')
     /* A blank attachment is not a form to decipher. Ask for the thing to attach to first. */
     if (!current && !this.choosingFastening && !f.target)
       return html`
@@ -589,7 +583,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         </button>
       `
     return html`
-      <p fasten-mode ?editing=${!!current}>${editing}</p>
+      ${current ? nothing : html`<p fasten-mode>${editing}</p>`}
       ${this.overhangNote.length ? html`<p hint overhang-note>${this.overhangNote.join(' ')}</p>` : nothing}
       ${this.overhangWords.length
         ? html`<div overhang role="status">
@@ -600,13 +594,12 @@ export class FigureLinks extends localize(i18next)(LitElement) {
           </div>`
         : nothing}
       ${held
-        ? html`<div pair>
-            <span>${i18next.t('figure.label.fastened-to')}: <b bound>${'plane' in held ? i18next.t('figure.label.mounting-plane') : held.part}</b></span>
+        ? html`<div fastened>
             <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'detach', part: this.partId })}>
               <md-icon>link_off</md-icon>${i18next.t('figure.button.detach')}
             </button>
-          </div>
-          ${this.renderDetachWords()}`
+            ${this.renderDetachWords()}
+          </div>`
         : nothing}
       <div form>
         <span>${i18next.t('figure.label.target-part')}</span>
@@ -687,6 +680,8 @@ export class FigureLinks extends localize(i18next)(LitElement) {
   }
 
   private renderDetachWords() {
+    /* One thing to say is a line, not a list of one. */
+    if (this.detachWords.length === 1) return html`<p hint detach-words>${this.detachWords[0]}</p>`
     return this.detachWords.length ? html`<ul detach-words>${this.detachWords.map(line => html`<li>${line}</li>`)}</ul>` : nothing
   }
 
@@ -729,6 +724,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
    * (the editor's) shows it and takes it away.
    */
   private renderPreviewWords() {
+    if (this.previewWords.length === 1) return html`<p preview-words role="status">${this.previewWords[0]}</p>`
     return this.previewWords.length ? html`<ul preview-words role="status">${this.previewWords.map(line => html`<li>${line}</li>`)}</ul>` : nothing
   }
 

package/client/modeller/figure-material-panel.ts

@@ -49,8 +49,16 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
       display: grid;
       gap: 4px;
     }
-    div[field] > label {
-      font-weight: 600;
+    /* A slider and its value on one line, the value at the end where the eye finishes. */
+    div[slider] {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 3em;
+      align-items: center;
+      gap: 8px;
+    }
+    div[slider] output {
+      text-align: right;
+      font-variant-numeric: tabular-nums;
     }
     div[swatches] {
       display: flex;
@@ -118,16 +126,14 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
       fill: var(--md-sys-color-surface-container-lowest);
     }
     button[seg] b {
-      font-size: 0.8rem;
+      font-weight: 600;
     }
     button[seg] small {
       margin: 0;
-      font-size: 0.6rem;
     }
     details[free] summary {
       margin-top: 4px;
       cursor: pointer;
-      font-size: 0.68rem;
       color: var(--md-sys-color-on-surface-variant);
     }
     div[presets] {
@@ -139,7 +145,6 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
       flex: 1;
       padding: 3px 0;
       font: inherit;
-      font-size: 0.72rem;
       color: var(--md-sys-color-on-surface);
       background: none;
       border: 1px solid var(--md-sys-color-outline-variant);
@@ -184,8 +189,8 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
           : nothing}
         <small><b>${purposeOf(material.token)}</b> — ${i18next.t('figure.text.palette-purpose-explained')}</small>
       </div>
-      <div field>
-        <label>${i18next.t('figure.label.preset')}</label>
+      <div form>
+        <span>${i18next.t('figure.label.preset')}</span>
         <select
           ?disabled=${this.locked}
           @change=${(e: Event) => this.put({ preset: ((e.target as HTMLSelectElement).value || undefined) as FigureMaterial['preset'] })}
@@ -205,8 +210,9 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
         />
         ${i18next.t('figure.label.transparent')}
       </label>
-      <div field>
-        <label>${i18next.t('figure.label.emissive')}</label>
+      <div form>
+        <span>${i18next.t('figure.label.emissive')}</span>
+        <div slider>
         <input
           type="range"
           min="0"
@@ -217,7 +223,8 @@ export class FigureMaterialPanel extends localize(i18next)(LitElement) {
           @input=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value), true)}
           @change=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value))}
         />
-        <small>${(this.glowing ?? glow?.intensity ?? 0).toFixed(2)}</small>
+        <output>${(this.glowing ?? glow?.intensity ?? 0).toFixed(2)}</output>
+        </div>
       </div>
       ${glow
         ? html`<div field>

package/client/modeller/figure-properties.ts

@@ -177,10 +177,10 @@ export class FigureProperties extends localize(i18next)(LitElement) {
         </div>
         <div row>
           <button act ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part!, face })}>
-            ${i18next.t('figure.button.set-mounting-face')}
+            <md-icon>check</md-icon>${i18next.t('figure.button.set-mounting-face')}
           </button>
           <button act ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>
-            ${i18next.t('figure.button.clear-mounting-face')}
+            <md-icon>close</md-icon>${i18next.t('figure.button.clear-mounting-face')}
           </button>
         </div>
         <small>

package/client/modeller/figure-section-panel.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import { css, html, LitElement, nothing, type PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
@@ -105,7 +106,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
       ${body.shape.dimensions.jamb === undefined
         ? html`<div field>
             <button act ?disabled=${this.locked} @click=${() => this.dispatchEvent(new CustomEvent('section-editor-open', { bubbles: true, composed: true }))}>
-              ${i18next.t('figure.button.section-editor-open')}
+              <md-icon>edit</md-icon>${i18next.t('figure.button.section-editor-open')}
             </button>
             ${e.section.kind === 'polygon'
               ? html`<small>${i18next.t(e.apex ? 'figure.text.section-points-apex' : 'figure.text.section-points', { points: String(e.section.points.length) })}</small>`
@@ -128,8 +129,9 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
       .map(k => d[k])
     const now = reaches.length ? sameOf(reaches) : 0
     const max = cornerLimitOf(body.shape)
-    return html`<div field>
+    return html`<div form>
       <label for="corner">${i18next.t('figure.label.section-corner')}</label>
+      <div>
       ${this.number('corner', now, {
         min: 0,
         ask: value => {
@@ -140,6 +142,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
         placeholder: now === undefined ? i18next.t('figure.text.section-corner-differs') : ''
       })}
       ${this.refusals.corner ? nothing : max !== undefined ? html`<small>${i18next.t('figure.text.section-at-most', { max: String(mm(max)) })}</small>` : nothing}
+      </div>
     </div>`
   }
 
@@ -167,7 +170,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
         action: value => ({ kind: 'set-cavity', part: body.id, cavity: request(patch(value)) })
       })
     return html`<div field>
-        <label>
+        <label toggle>
           <input
             type="checkbox"
             .checked=${live(!!cavity)}
@@ -191,8 +194,9 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
       </div>
       ${cavity ? html`<figure-cavity-drawing .body=${body} .perSide=${this.perSide} ?locked=${this.locked}></figure-cavity-drawing>` : nothing}
       ${cavity
-        ? html`<div field>
+        ? html`<div form>
               <label>${i18next.t('figure.label.section-wall')}</label>
+              <div>
               ${this.perSide
                 ? html`<div sides>
                     ${[...sidesOf(axis)].sort((a, b) => a[0]!.localeCompare(b[0]!) || (a[1] === '-' ? -1 : 1)).map(
@@ -206,7 +210,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
               ${this.perSide || this.refusals.wall
                 ? nothing
                 : html`<small>${i18next.t('figure.text.section-wall-at-most', { max: String(mm(wallLimitOf(body.shape))) })}</small>`}
-              <label>
+              <label toggle>
                 <input
                   type="checkbox"
                   .checked=${live(this.perSide)}
@@ -215,6 +219,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
                 />
                 ${i18next.t('figure.label.section-wall-per-side')}
               </label>
+              </div>
             </div>
             ${(['start', 'end'] as const).map(end => this.renderEnd(body, axis, end, cavity[end], request, cavityField))}`
         : nothing}`
@@ -229,7 +234,7 @@ export class FigureSectionPanel extends localize(i18next)(LitElement) {
     cavityField: (key: string, now: number | undefined, patch: (value: number) => Partial<FigureCavityRequest>) => unknown
   ) {
     const closed = now !== 'open'
-    return html`<div field>
+    return html`<div form>
       <label>${i18next.t('figure.label.face-' + END_FACE(axis, end))}</label>
       <div row>
         <select

package/client/modeller/side-panel-styles.ts

@@ -10,7 +10,11 @@ import { css } from 'lit'
  *
  * The vocabulary:
  *   section              one titled group; the side is a stack of them
- *   h3                   a group's title -- small capitals
+ *   h3                   a group's title
+ *
+ * Three sizes and two weights (user 2026-10-01, the panel checked for balance: eight sizes, and titles smaller than
+ * what they titled): a title at the body token and semibold, everything else at the small token, and a hint at the
+ * micro one. Sections are 16 px above their title and 12 px below their last line.
  *   div[inline-field]    a short label and its one field on one line
  *   div[field]           a label above a full-width field
  *   div[form]            short labels beside their fields, the fields starting on one line
@@ -25,14 +29,14 @@ import { css } from 'lit'
 export const SidePanelStyles = css`
   :host {
     --figure-control-height: 30px;
-    font-size: 0.76rem;
+    font-size: var(--ui-t-small, 11.5px);
     color: var(--md-sys-color-on-surface);
   }
   /* The side is a stack of sections, each a titled group. */
   section {
     display: grid;
-    gap: 6px;
-    padding: 8px 10px;
+    gap: 8px;
+    padding: 16px 12px 12px;
     border-bottom: 1px solid var(--md-sys-color-outline-variant);
   }
   section > h3 {
@@ -48,18 +52,21 @@ export const SidePanelStyles = css`
     align-items: center;
     gap: 4px;
     margin: 14px 0 6px;
-    font-size: var(--ui-t-micro, 11px);
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--md-sys-color-on-surface-variant);
+    font-size: var(--ui-t-body, 13px);
+    font-weight: 600;
+    color: var(--md-sys-color-on-surface);
   }
   h3:first-child {
     margin-top: 0;
   }
+  /* Two weights only: a bold word in a line is the title's weight, not the browser's heavier one. */
+  b,
+  strong {
+    font-weight: 600;
+  }
   label,
   div[form] > span {
-    font-size: 0.68rem;
+    font-size: inherit;
     color: var(--md-sys-color-on-surface-variant);
   }
   div[field] {
@@ -90,7 +97,7 @@ export const SidePanelStyles = css`
   }
   /* A value read, not edited, beside its label: the field's size and colour, not the page's. */
   div[inline-field] > span[value] {
-    font-size: 0.76rem;
+    font-size: inherit;
     color: var(--md-sys-color-on-surface);
   }
   label span[unit] {
@@ -108,10 +115,9 @@ export const SidePanelStyles = css`
     gap: 4px;
   }
   div[tools] button {
-    height: 28px;
+    height: var(--figure-control-height);
     padding: 0 10px;
     font: inherit;
-    font-size: 0.78rem;
     color: var(--md-sys-color-on-surface);
     background: var(--md-sys-color-surface-container-lowest);
     border: 1px solid var(--md-sys-color-outline-variant);
@@ -146,16 +152,45 @@ export const SidePanelStyles = css`
     box-sizing: border-box;
     padding: 4px 7px;
     font: inherit;
-    font-size: 0.76rem;
     color: var(--md-sys-color-on-surface);
     background-color: var(--md-sys-color-surface-container-lowest);
     border: 1px solid var(--md-sys-color-outline-variant);
     border-radius: 6px;
   }
+  /* The browser's own box and dot, in the panel's colour. */
   input[type='checkbox'],
   input[type='radio'] {
     width: auto;
     min-height: 0;
+    margin: 0;
+    accent-color: var(--md-sys-color-primary);
+  }
+  /* A fold: the panel's chevron, not the browser's triangle. */
+  summary {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 0;
+    list-style: none;
+    cursor: pointer;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+  summary::-webkit-details-marker {
+    display: none;
+  }
+  summary::before {
+    content: '';
+    flex: none;
+    width: 6px;
+    height: 6px;
+    margin: 0 2px;
+    border-right: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor;
+    transform: rotate(-45deg);
+    transition: transform 0.15s;
+  }
+  details[open] > summary::before {
+    transform: rotate(45deg);
   }
   /* A thin track and a small thumb: a slider is a line to drag along, not a block (user, 2026-09-24). */
   input[type='range'] {
@@ -239,7 +274,7 @@ export const SidePanelStyles = css`
   }
   div[cell] span[axis] {
     flex: none;
-    font-size: 0.64rem;
+    font-size: var(--ui-t-micro, 11px);
     letter-spacing: 0.02em;
     color: var(--md-sys-color-on-surface-variant);
   }
@@ -272,7 +307,6 @@ export const SidePanelStyles = css`
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: 0.76rem;
     color: var(--md-sys-color-on-surface);
   }
   /* The 「?」 beside a title: no border, it says there is more rather than asking to be pressed. */
@@ -299,41 +333,42 @@ export const SidePanelStyles = css`
   small {
     display: block;
     margin: 2px 0 4px;
-    font-size: 0.68rem;
+    font-size: var(--ui-t-micro, 11px);
     line-height: 1.5;
     color: var(--md-sys-color-on-surface-variant);
   }
-  p[hint] {
-    padding-left: 6px;
-    border-left: 2px solid var(--md-sys-color-outline-variant);
-  }
+  /*
+   * An action under its fields: as wide as its words, not a band across the panel -- four full-width grey bars read as
+   * four walls and none of them as the one to press (user 2026-10-01). Every one carries its icon.
+   */
   button[act] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 4px;
-    width: 100%;
+    justify-self: start;
+    gap: 6px;
+    width: auto;
+    max-width: 100%;
     margin-top: 4px;
-    padding: 3px 8px;
-    min-height: 28px;
+    padding: 0 12px;
+    min-height: var(--figure-control-height);
     font: inherit;
-    font-size: 0.72rem;
-    color: var(--md-sys-color-on-surface);
-    background-color: var(--md-sys-color-surface-container);
+    color: var(--md-sys-color-primary);
+    background-color: var(--md-sys-color-surface-container-lowest);
     border: 1px solid var(--md-sys-color-outline-variant);
     border-radius: 6px;
     cursor: pointer;
   }
   button[act]:hover:not(:disabled) {
-    background-color: var(--md-sys-color-surface-container-high);
+    background-color: var(--md-sys-color-primary-container);
   }
   button[act]:disabled {
     opacity: 0.5;
     cursor: default;
   }
   button[act] md-icon {
-    font-size: 15px;
-    width: 15px;
-    height: 15px;
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
   }
 `

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

@@ -328,6 +328,11 @@ export declare class FigureEditor extends LitElement {
      */
     private withSizeRow;
     private renderVector;
+    /**
+     * Which axes a rule sets, said once under the rows (position and rotation X · Y · Z set by a rule), not a line under each row
+     * saying the same (user 2026-10-01, the panel checked for balance). The cells themselves are dashed and read-only.
+     */
+    private renderHeldAxes;
     /**
      * A part's fields only the declared room still reads (ADR-0097, designer 2026-09-27): shown as what they are and not
      * typed into -- they move nothing. Declaring the room again is offered; nothing is deleted or widened on the way.