@things-factory/figure-ui 10.1.48 → 10.1.50

package/client/graphql/v3-store.ts

@@ -13,13 +13,14 @@ export const v3ProductStore: V3ProductStore = {
   async save(request) {
     const response = await client.mutate({
       mutation: gql`
-        mutation SaveFigureV3($source: String!, $id: String, $expectedSource: String, $creationId: String, $thumbnail: String) {
+        mutation SaveFigureV3($source: String!, $id: String, $expectedSource: String, $creationId: String, $thumbnail: String, $type: String) {
           saveFigureV3(
             source: $source
             id: $id
             expectedSource: $expectedSource
             creationId: $creationId
             thumbnail: $thumbnail
+            type: $type
           ) {
             id
             source

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

@@ -9,6 +9,7 @@ import { ScrollbarStyles } from '@operato/styles'
 
 import { fetchFigureVersions, inspectFigure, releaseFigure, revertFigureVersion } from '../graphql/index.js'
 import type { FigureGateFinding, FigureGateFix, FigureGateFixPlan, FigureInspection, FigureVersion } from '../types.js'
+import { OxPrompt } from '@operato/popup'
 
 /**
  * 이력 — **발행하는 자리이자, 발행된 판들을 보는 자리.**
@@ -558,7 +559,14 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
 
   private async revert(version: number) {
     /* 되돌아갈 수 없는 조작은 아니지만(판본은 남는다), 지금 화면의 것이 덮인다 — 이름으로 확인한다. */
-    if (!confirm(i18next.t('figure.text.revert-to-version-confirm', { version }))) {
+    const agreed = await OxPrompt.open({
+      type: 'warning',
+      title: i18next.t('figure.button.revert'),
+      text: i18next.t('figure.text.revert-to-version-confirm', { version }),
+      confirmButton: { text: i18next.t('figure.button.revert') },
+      cancelButton: { text: i18next.t('figure.button.keep-editing') }
+    })
+    if (!agreed) {
       return
     }
 

package/client/modeller/figure-v3-first-save.ts

@@ -0,0 +1,98 @@
+import { LitElement, html, css, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import '@operato/popup/ox-popup-actions.js'
+import { CommonPopupStyles, FormFieldStyles } from '@operato/styles'
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+
+import { firstSaveRefusalOf, releasableType, typeOf, type FirstSave } from './v3-first-save.js'
+
+/**
+ * The first save of a new figure: its type and its name, asked once (V2's save dialog, in the suite's popup look).
+ * Closes with the answer, or with nothing when cancelled -- then nothing is saved.
+ */
+@customElement('figure-v3-first-save')
+export class FigureV3FirstSave extends LitElement {
+  static styles = [
+    FormFieldStyles,
+    CommonPopupStyles,
+    css`
+      /* The popup's height is a share of the window (small is 40%): on a low window the buttons must still be reached. */
+      :host {
+        overflow-y: auto;
+      }
+      div[field] {
+        display: grid;
+        gap: 4px;
+      }
+      div[field] label {
+        font-size: var(--popup-font-size-small);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[field] input {
+        box-sizing: border-box;
+        width: 100%;
+      }
+      input[type-field] {
+        font-family: var(--mono-font, monospace);
+      }
+    `
+  ]
+
+  /** The type the figure has so far -- empty for a temporary one, which is not offered. */
+  @property() type = ''
+  @property() name = ''
+  /** Type names already used in this domain. */
+  @property({ attribute: false }) taken: string[] = []
+  @state() private refusal: { key: string; type?: string } | null = null
+
+  render() {
+    return html`
+      <div class="what">${i18next.t('figure.text.save-new-figure-desc')}</div>
+      <div field>
+        <label for="type">${i18next.t('figure.label.figure-type')}</label>
+        <input
+          id="type"
+          type-field
+          autofocus
+          .value=${this.type}
+          placeholder=${i18next.t('figure.text.figure-type-example')}
+          @input=${(e: Event) => {
+            this.type = typeOf((e.target as HTMLInputElement).value)
+            ;(e.target as HTMLInputElement).value = this.type
+            this.refusal = null
+          }}
+          @keydown=${this.onKey}
+        />
+        ${this.type && !releasableType(this.type) ? html`<div class="note">${i18next.t('figure.text.type-name-will-not-release')}</div>` : nothing}
+      </div>
+      <div field>
+        <label for="name">${i18next.t('figure.label.name')}</label>
+        <input
+          id="name"
+          .value=${this.name}
+          placeholder=${i18next.t('figure.text.figure-name-example')}
+          @input=${(e: Event) => (this.name = (e.target as HTMLInputElement).value)}
+          @keydown=${this.onKey}
+        />
+      </div>
+      ${this.refusal ? html`<div class="failure" role="alert">${i18next.t(this.refusal.key, { type: this.refusal.type })}</div>` : nothing}
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => closePopup(this)}>${i18next.t('figure.button.cancel')}</md-text-button>
+        <md-filled-button slot="confirm" ?disabled=${!this.type} @click=${this.confirm}>${i18next.t('figure.button.save')}</md-filled-button>
+      </ox-popup-actions>
+    `
+  }
+
+  private onKey = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.isComposing) this.confirm()
+  }
+
+  private confirm = () => {
+    this.refusal = firstSaveRefusalOf(this.type, this.taken)
+    if (this.refusal) return
+    closePopup(this, { type: this.type, name: this.name.trim() || this.type } satisfies FirstSave)
+  }
+}

package/client/modeller/figure-v3-links.ts

@@ -9,6 +9,8 @@ import type { V3Asset, V3AuthoringAction, V3DimensionSource, V3Face } from '@hat
 
 import {
   acceptsOf,
+  alignAxesOf,
+  alignOf,
   AXES,
   canFasten,
   canFollow,
@@ -20,13 +22,17 @@ import {
   followOf,
   hasInstanceSize,
   holdsThings,
+  leadersFor,
   motionOf,
+  motionJoint,
   placeFacesOf,
   placeIdFor,
   placesOn,
   positionsWorkedOut,
+  type Alignment,
   type Axis,
-  type Follow
+  type Follow,
+  type MotionForm
 } from './v3-links.js'
 import { SidePanelStyles } from './side-panel-styles.js'
 import { HelpToggles } from './v3-help.js'
@@ -78,8 +84,8 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   /** Which ties this shows: the part's shape (size and placement, in 속성), its places (자리·능력) or its motion (움직임). */
   @property() section: 'shape' | 'places' | 'motion' = 'shape'
 
-  @state() private fasten = { face: 'bottom' as V3Face, toPlane: false, target: '', targetFace: 'top' as V3Face, facing: 'meet' as 'meet' | 'flush', gap: 0 }
-  @state() private motion = { kind: 'slide' as 'slide' | 'turn', axis: 'x' as Axis, id: '', min: 0, max: 500 }
+  @state() private fasten = { face: 'bottom' as V3Face, toPlane: false, target: '', targetFace: 'top' as V3Face, facing: 'meet' as 'meet' | 'flush', gap: 0, align: {} as Partial<Record<Axis, Alignment>>, alignMm: {} as Partial<Record<Axis, number>> }
+  @state() private motion: MotionForm = { kind: 'slide', axis: 'x', id: '', min: 0, max: 500, follow: '', multiplier: 1, offset: 0 }
   @state() private place = { role: 'grip' as 'seat' | 'grip', face: 'top' as V3Face, label: '', accepts: '', capacity: 1 }
 
   render() {
@@ -290,6 +296,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
               <option value="flush" ?selected=${f.facing === 'flush'}>${i18next.t('figure.label.facing-flush')}</option>
             </select>
           </div>`}
+      ${this.renderAlignment()}
       <div form>
         <span>${i18next.t('figure.label.gap')}</span>
         <input type="number" step="any" .value=${String(f.gap)} @change=${(e: Event) => (this.fasten = { ...f, gap: Number((e.target as HTMLInputElement).value) || 0 })} />
@@ -305,6 +312,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
             to: f.toPlane ? { plane: 'mounting-plane' } : { part: f.target, face: f.targetFace },
             ...(f.toPlane ? {} : { facing: f.facing }),
             ...(f.gap ? { gap: f.gap } : {}),
+            ...(alignOf(f.toPlane ? 'plane' : f.targetFace, f.align, f.alignMm) ? { align: alignOf(f.toPlane ? 'plane' : f.targetFace, f.align, f.alignMm) } : {}),
             replace: !!to
           } as V3AuthoringAction)}
       >
@@ -313,58 +321,113 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
     `
   }
 
+  /**
+   * Where on the target face the part sits, on the two axes across it: centred, level with the target's edge on
+   * either side, or a distance off centre. A door hung level with the frame's front edge turns about that edge.
+   */
+  private renderAlignment() {
+    const f = this.fasten
+    const set = (axis: Axis, how: Alignment) => (this.fasten = { ...f, align: { ...f.align, [axis]: how } })
+    const setMm = (axis: Axis, mm: number) => (this.fasten = { ...f, alignMm: { ...f.alignMm, [axis]: mm } })
+    return html`<div form>
+      ${alignAxesOf(f.toPlane ? 'plane' : f.targetFace).map(({ axis, edges }) => {
+        const how = f.align[axis] === 'min' || f.align[axis] === 'max' ? (edges ? f.align[axis]! : 'centre') : (f.align[axis] ?? 'centre')
+        return html`<span>${i18next.t('figure.label.align-' + axis)}</span>
+          <select @change=${(e: Event) => set(axis, (e.target as HTMLSelectElement).value as Alignment)}>
+            <option value="centre" ?selected=${how === 'centre'}>${i18next.t('figure.label.align-centre')}</option>
+            ${edges
+              ? html`<option value="min" ?selected=${how === 'min'}>${i18next.t(`figure.label.align-${axis}-min`)}</option>
+                  <option value="max" ?selected=${how === 'max'}>${i18next.t(`figure.label.align-${axis}-max`)}</option>`
+              : nothing}
+            <option value="mm" ?selected=${how === 'mm'}>${i18next.t('figure.label.align-mm')}</option>
+          </select>
+          ${how === 'mm'
+            ? html`<span></span><input type="number" step="any" aria-label=${i18next.t('figure.label.align-mm')} .value=${String(f.alignMm[axis] ?? 0)} @change=${(e: Event) => setMm(axis, Number((e.target as HTMLInputElement).value) || 0)} />`
+            : nothing}`
+      })}
+    </div>`
+  }
+
   private renderMotion(asset: V3Asset) {
     const now = motionOf(asset, this.partId)
+    const joint = asset.joints?.find(j => j.body1.part === this.partId)
     if (now) {
       return html`<div pair>
         <span>
           ${i18next.t('figure.label.motion-' + now.kind)} · ${String(now.axis).toUpperCase()}
-          ${now.control ? html`<small>${now.control.id} (${now.control.unit}) ${now.control.min} … ${now.control.max}</small>` : nothing}
+          ${now.follows
+            ? html`<small>${i18next.t('figure.label.motion-follows', { joint: now.follows.joint, multiplier: now.follows.multiplier, offset: now.follows.offset ?? 0 })}</small>`
+            : now.control
+              ? html`<small>${now.control.id} (${now.control.unit}) ${now.control.min} … ${now.control.max}</small>`
+              : nothing}
         </span>
-        <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'remove-motion', part: this.partId })}>
+        <button
+          act
+          ?disabled=${this.locked || !joint}
+          @click=${() => joint && this.command({ kind: 'set-joint', joint: { id: joint.id, type: 'fixed', body0: joint.body0, body1: joint.body1, ...(joint.origin ? { origin: joint.origin } : {}) } })}
+        >
           <md-icon>close</md-icon>${i18next.t('figure.button.remove-motion')}
         </button>
       </div>`
     }
+    /* A joint needs a parent (URDF): a part fastened to nothing is fastened first. */
+    if (!joint) return html`<p hint>${i18next.t('figure.text.fasten-before-moving')}</p>`
     const m = this.motion
-    const unit = m.kind === 'turn' ? 'deg' : 'mm'
+    const unit = m.kind === 'slide' ? 'mm' : 'deg'
+    /* A follower follows a joint that moves the same way; a choice the kind no longer allows is dropped. */
+    const leaders = leadersFor(asset, this.partId, m.kind)
+    const follow = leaders.some(j => j.id === m.follow) ? m.follow : ''
     return html`
       <div pair>
-        <select @change=${(e: Event) => this.setKind((e.target as HTMLSelectElement).value as 'slide' | 'turn')}>
+        <select @change=${(e: Event) => this.setKind((e.target as HTMLSelectElement).value as 'slide' | 'turn' | 'continuous')}>
           <option value="slide" ?selected=${m.kind === 'slide'}>${i18next.t('figure.label.motion-slide')}</option>
           <option value="turn" ?selected=${m.kind === 'turn'}>${i18next.t('figure.label.motion-turn')}</option>
+          <option value="continuous" ?selected=${m.kind === 'continuous'}>${i18next.t('figure.label.motion-continuous')}</option>
         </select>
         <select @change=${(e: Event) => (this.motion = { ...m, axis: (e.target as HTMLSelectElement).value as Axis })}>
           ${AXES.map(a => html`<option value=${a} ?selected=${a === m.axis}>${i18next.t('figure.label.motion-axis')} ${a.toUpperCase()}</option>`)}
         </select>
       </div>
-      <div form>
-        <span>${i18next.t('figure.label.control-id')}</span>
-        <input .value=${m.id} placeholder=${`${this.partId}-${m.kind}`} @change=${(e: Event) => (this.motion = { ...m, id: (e.target as HTMLInputElement).value.trim() })} />
-        <span>${i18next.t('figure.label.control-range')} (${unit})</span>
-        <div pair>
-          <input type="number" step="any" .value=${String(m.min)} @change=${(e: Event) => (this.motion = { ...m, min: Number((e.target as HTMLInputElement).value) })} />
-          <input type="number" step="any" .value=${String(m.max)} @change=${(e: Event) => (this.motion = { ...m, max: Number((e.target as HTMLInputElement).value) })} />
-        </div>
-      </div>
+      ${leaders.length
+        ? html`<div form>
+            <span>${i18next.t('figure.label.motion-follow')}</span>
+            <select @change=${(e: Event) => (this.motion = { ...m, follow: (e.target as HTMLSelectElement).value })}>
+              <option value="" ?selected=${!follow}>${i18next.t('figure.label.motion-own-control')}</option>
+              ${leaders.map(j => html`<option value=${j.id} ?selected=${j.id === follow}>${j.body1.part}${j.state ? ` · ${j.state.id}` : ''}</option>`)}
+            </select>
+          </div>`
+        : nothing}
+      ${follow
+        ? html`<div form>
+            <span>${i18next.t('figure.label.motion-multiplier')}</span>
+            <input type="number" step="any" .value=${String(m.multiplier)} @change=${(e: Event) => (this.motion = { ...m, multiplier: Number((e.target as HTMLInputElement).value) })} />
+            <span>${i18next.t('figure.label.motion-offset')} (${unit})</span>
+            <input type="number" step="any" .value=${String(m.offset)} @change=${(e: Event) => (this.motion = { ...m, offset: Number((e.target as HTMLInputElement).value) || 0 })} />
+          </div>`
+        : html`<div form>
+            <span>${i18next.t('figure.label.control-id')}</span>
+            <input .value=${m.id} placeholder=${`${this.partId}-${m.kind}`} @change=${(e: Event) => (this.motion = { ...m, id: (e.target as HTMLInputElement).value.trim() })} />
+            ${m.kind === 'continuous'
+              ? nothing
+              : html`<span>${i18next.t('figure.label.control-range')} (${unit})</span>
+                  <div pair>
+                    <input type="number" step="any" .value=${String(m.min)} @change=${(e: Event) => (this.motion = { ...m, min: Number((e.target as HTMLInputElement).value) })} />
+                    <input type="number" step="any" .value=${String(m.max)} @change=${(e: Event) => (this.motion = { ...m, max: Number((e.target as HTMLInputElement).value) })} />
+                  </div>`}
+          </div>`}
       <button
         act
-        ?disabled=${this.locked || !(m.max > m.min)}
-        @click=${() =>
-          this.command({
-            kind: 'add-motion',
-            part: this.partId,
-            motion: { kind: m.kind, axis: m.axis },
-            state: { id: m.id || `${this.partId}-${m.kind}`, unit, min: m.min, max: m.max, start: m.min }
-          })}
+        ?disabled=${this.locked || (follow ? !(Number.isFinite(m.multiplier) && m.multiplier !== 0) : m.kind !== 'continuous' && !(m.max > m.min && m.min <= 0 && 0 <= m.max))}
+        title=${!follow && m.kind !== 'continuous' && !(m.min <= 0 && 0 <= m.max) ? i18next.t('figure.text.joint-range-holds-zero') : ''}
+        @click=${() => this.command({ kind: 'set-joint', joint: motionJoint(joint, { ...m, follow }, this.partId) })}
       >
         <md-icon>animation</md-icon>${i18next.t('figure.button.add-motion')}
       </button>
     `
   }
 
-  private setKind(kind: 'slide' | 'turn') {
-    this.motion = kind === 'turn' ? { ...this.motion, kind, min: -90, max: 90 } : { ...this.motion, kind, min: 0, max: 500 }
+  private setKind(kind: 'slide' | 'turn' | 'continuous') {
+    this.motion = kind === 'slide' ? { ...this.motion, kind, min: 0, max: 500 } : { ...this.motion, kind, min: -90, max: 90 }
   }
 
   private command(action: V3AuthoringAction) {

package/client/modeller/figure-v3-parts.ts

@@ -3,6 +3,7 @@ import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
+import { PART_LIMIT } from '@hatiolab/figure-model'
 import type { V3PrimitiveCreation } from '@hatiolab/figure-model'
 import type { V3BudgetLine } from './v3-maturity.js'
 import { partLabelOf } from './v3-fields.js'
@@ -28,6 +29,8 @@ export interface V3PartRow {
   hidden?: boolean
   /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */
   invisible?: boolean
+  /** 되풀이한 부품이면 지금 몇 개로 그려지나. 되풀이는 한 부품이다 — 한 줄로 보인다. */
+  copies?: number
 }
 
 /** 제공자마다의 아이콘. Material Symbols 이름이다. */
@@ -147,25 +150,61 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         font-style: normal;
         color: var(--md-sys-color-error);
       }
+      span[room][full] {
+        color: var(--md-sys-color-error);
+        font-weight: 600;
+      }
+      p[full] {
+        margin: 4px 0 0;
+        font-size: 0.68rem;
+        color: var(--md-sys-color-error);
+      }
+      div[level] {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        align-items: center;
+        gap: 6px;
+        margin: 0 0 6px;
+        font-size: 0.68rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[level] select {
+        min-width: 0;
+        padding: 2px 4px;
+        font: inherit;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface);
+        background: var(--md-sys-color-surface-container-lowest);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+      }
+      small[copies] {
+        color: var(--md-sys-color-on-surface-variant);
+      }
       span[room] {
         font-size: 0.7rem;
         font-weight: 400;
         letter-spacing: 0;
         text-transform: none;
       }
+      /* Three to a row, small (user, 2026-09-24): the palette is reached for, not read -- the list below is what grows. */
       div[palette] {
         display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 4px;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 3px;
       }
       button[shape] {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 2px;
-        padding: 7px 2px 5px 2px;
+        gap: 1px;
+        min-width: 0;
+        padding: 5px 1px 4px;
         font: var(--label-font, inherit);
-        font-size: 0.66rem;
+        font-size: 0.6rem;
+        line-height: 1.2;
+        text-align: center;
+        overflow-wrap: anywhere;
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
         background: none;
         border: 1px solid var(--md-sys-color-outline-variant);
@@ -182,7 +221,7 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         cursor: default;
       }
       button[shape] md-icon {
-        --md-icon-size: 20px;
+        --md-icon-size: 18px;
       }
       ol {
         margin: 0;
@@ -323,8 +362,15 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
    * 기준이 저작을 이끈다(V2 모델러의 정체성). 등급이 D 면 무엇이 넘쳤는지를 적는다. 누르면 성숙도 탭이 열린다.
    */
   @property({ attribute: false }) budget?: V3BudgetLine
+  /**
+   * 디테일 등급의 부품 한도 — V2 의 S/M/L(사용자 2026-09-24). 부품을 넣기 **전에** 몇 개 남았는지 보이고, 다 차면 팔레트가
+   * 잠긴다. 되풀이는 한 부품으로 센다. 등급을 안 정했으면 한도는 없다.
+   */
+  @property({ attribute: false }) partBudget?: { level: 'S' | 'M' | 'L' | null; used: number; limit: number | null }
 
   render() {
+    const b = this.partBudget
+    const full = !!b && b.limit !== null && b.used >= b.limit
     return html`
       <section>
         <h3>${i18next.t('figure.label.shapes')}</h3>
@@ -333,8 +379,8 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
             recipe => html`
               <button
                 shape
-                ?disabled=${this.locked}
-                title=${i18next.t(recipe.label)}
+                ?disabled=${this.locked || full}
+                title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t(recipe.label)}
                 @click=${() => this.ask('add-part', { kind: recipe.kind })}
               >
                 <md-icon>${recipe.icon}</md-icon>
@@ -343,14 +389,18 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
             `
           )}
         </div>
+        ${full ? html`<p full>${i18next.t('figure.text.part-limit-reached-short', { level: b!.level, limit: b!.limit })}</p>` : nothing}
       </section>
 
       <section list>
         <h3>
           <span>${i18next.t('figure.label.parts')}</span>
-          <span room>${this.parts.length}</span>
+          <span room ?full=${full} title=${i18next.t('figure.text.limit-comes-from-level')}
+            >${b && b.limit !== null ? i18next.t('figure.text.n-of-limit', { used: b.used, limit: b.limit }) : (b?.used ?? this.parts.length)}</span
+          >
           ${this.renderShowAll()}
         </h3>
+        ${this.renderLevel()}
         ${this.renderBudget()}
         ${this.parts.length === 0
           ? html`<p quiet>${i18next.t('figure.text.no-parts-yet')}</p>`
@@ -361,6 +411,32 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
     `
   }
 
+  /** 디테일 등급 — 고르면 한도가 바뀐다. V2 의 자리 그대로, 목록 머리 아래. */
+  private renderLevel() {
+    const b = this.partBudget
+    if (!b) return nothing
+    return html`<div level>
+      <label for="detail-level">${i18next.t('figure.label.detail-level')}</label>
+      <select
+        id="detail-level"
+        title=${i18next.t('figure.text.detail-level-explained')}
+        .value=${b.level ?? ''}
+        ?disabled=${this.locked}
+        @change=${(e: Event) => {
+          const value = (e.target as HTMLSelectElement).value
+          this.dispatchEvent(new CustomEvent('set-detail-level', { detail: { level: value || null }, bubbles: true, composed: true }))
+        }}
+      >
+        <option value="" ?selected=${!b.level}>${i18next.t('figure.label.detail-none')}</option>
+        ${(['S', 'M', 'L'] as const).map(
+          one => html`<option value=${one} ?selected=${one === b.level}>
+            ${one} ${i18next.t('figure.label.detail-' + one)} · ${i18next.t('figure.text.n-parts-at-most', { limit: PART_LIMIT[one] })}
+          </option>`
+        )}
+      </select>
+    </div>`
+  }
+
   private renderBudget() {
     const b = this.budget
     if (!b || !this.parts.length) return nothing
@@ -434,7 +510,7 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         </button>
         <md-icon>${PROVIDER_ICON[part.provider] ?? 'deployed_code'}</md-icon>
         <span label title=${part.id}
-          >${partLabelOf(part.id)}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span
+          >${partLabelOf(part.id)}${part.copies ? html` <small copies>× ${part.copies}</small>` : nothing}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span
         >
         ${selected ? this.renderOps(part.id, index) : nothing}
       </li>

package/client/modeller/figure-v3-properties.ts

@@ -10,6 +10,7 @@ import type { V3AuthoringAction, V3Face } from '@hatiolab/figure-model'
 import { occupancyFromParts } from './v3-occupancy.js'
 import { tagsOf, v3FigureFacts, type Placement, type V3FigureFacts } from './v3-figure-facts.js'
 import { SidePanelStyles } from './side-panel-styles.js'
+import { ScrollbarStyles } from '@operato/styles'
 
 const PLACEMENTS: Placement[] = ['floor', 'ceiling', 'center']
 const FACES = Object.keys(V3_FACES) as V3Face[]
@@ -32,7 +33,7 @@ const FACES = Object.keys(V3_FACES) as V3Face[]
  */
 @customElement('figure-v3-properties')
 export class FigureV3Properties extends localize(i18next)(LitElement) {
-  static styles = [SidePanelStyles, css`
+  static styles = [ScrollbarStyles, SidePanelStyles, css`
     :host {
       display: block;
       /* It stands inside the properties tab's panel, which gives the margin; a second one indented it past the type. */

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

@@ -88,6 +88,14 @@ export const SidePanelStyles = css`
     overflow-wrap: anywhere;
     white-space: normal;
   }
+  /* 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;
+    color: var(--md-sys-color-on-surface);
+  }
+  label span[unit] {
+    color: var(--md-sys-color-outline);
+  }
   div[inline-field] + div[inline-field],
   div[inline-field] + div[vector-row],
   div[vector-row] + div[inline-field] {