@things-factory/figure-ui 10.1.46 → 10.1.47

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

@@ -12,6 +12,9 @@ import {
   AXES,
   canFasten,
   canFollow,
+  dimensionNow,
+  followableAxes,
+  positionIsShare,
   choiceOf,
   fastenedTo,
   followOf,
@@ -25,6 +28,8 @@ import {
   type Axis,
   type Follow
 } from './v3-links.js'
+import { SidePanelStyles } from './side-panel-styles.js'
+import { HelpToggles } from './v3-help.js'
 
 const FACES = Object.keys(V3_FACES) as V3Face[]
 
@@ -43,76 +48,25 @@ const FACES = Object.keys(V3_FACES) as V3Face[]
  */
 @customElement('figure-v3-links')
 export class FigureV3Links extends localize(i18next)(LitElement) {
-  static styles = css`
+  private readonly help = new HelpToggles(this)
+  static styles = [SidePanelStyles, css`
     :host {
-      display: grid;
-      gap: 10px;
+      display: block;
     }
-    h3 {
-      font-size: var(--ui-t-body, 13px);
-      margin: 12px 0 0;
+    /* The measure's name, then its rule: X, or a cylinder's 반지름 · 길이, on one line. */
+    div[row] > b {
+      white-space: nowrap;
     }
     div[row] {
       display: grid;
-      grid-template-columns: 24px minmax(0, 1fr);
-      gap: 6px;
-      align-items: center;
-    }
-    div[form] {
-      display: grid;
-      grid-template-columns: 96px minmax(0, 1fr);
+      grid-template-columns: minmax(24px, max-content) minmax(0, 1fr);
       gap: 6px;
       align-items: center;
     }
-    div[pair] {
-      display: flex;
-      gap: 6px;
-    }
-    div[pair] > * {
-      flex: 1;
-      min-width: 0;
-    }
-    select,
-    input,
-    button {
-      font: inherit;
-      min-width: 0;
-    }
-    button[act] {
-      justify-self: start;
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 10px;
-      border: none;
-      border-radius: 999em;
-      cursor: pointer;
-      color: var(--md-sys-color-on-secondary-container);
-      background: var(--md-sys-color-secondary-container);
-    }
-    button[act]:disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-    button[act] md-icon {
-      font-size: 16px;
-      width: 16px;
-      height: 16px;
-    }
-    small,
-    p[hint] {
-      margin: 0;
-      color: var(--md-sys-color-on-surface-variant);
-    }
     b[bound] {
       font-weight: 600;
     }
-    label[toggle] {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-  `
+  `]
 
   /** The asset being edited. */
   @property({ attribute: false }) asset?: V3Asset
@@ -121,6 +75,8 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   /** The part's own extent along its axes now, in mm — what a dimension is fixed at when it stops following. */
   @property({ attribute: false }) dims?: [number, number, number]
   @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'
 
   @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 }
@@ -129,16 +85,22 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   render() {
     const asset = this.asset
     if (!asset || !this.partId) return nothing
+    if (this.section === 'motion')
+      return html`<section><h3>${i18next.t('figure.label.motion')}${this.help.button('figure.text.motion-explained')}</h3>${this.help.hint('figure.text.motion-explained')}
+        ${this.renderMotion(asset)}</section>`
+    if (this.section === 'places')
+      return html`<section><h3>${i18next.t('figure.label.places-on-part', { part: this.partId })}${this.help.button('figure.text.place-explained')}</h3>${this.help.hint('figure.text.place-explained')}
+        ${placeFacesOf(asset, this.partId).length ? this.renderPlaces(asset) : html`<p hint>${i18next.t('figure.text.places-need-a-box')}</p>`}</section>`
     return html`
-      <h3>${i18next.t('figure.label.dimensions')}</h3>
-      ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
-      <h3>${i18next.t('figure.label.placement')}</h3>
-      ${this.renderPositions(asset)}
-      ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
-      <h3>${i18next.t('figure.label.motion')}</h3>
-      ${this.renderMotion(asset)}
-      <h3>${i18next.t('figure.label.places')}</h3>
-      ${placeFacesOf(asset, this.partId).length ? this.renderPlaces(asset) : html`<p hint>${i18next.t('figure.text.places-need-a-box')}</p>`}
+      <section>
+        <h3>${i18next.t('figure.label.dimensions')}</h3>
+        ${canFollow(asset, this.partId) ? this.renderDimensions(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
+      </section>
+      <section>
+        <h3>${i18next.t('figure.label.placement')}${this.help.button('figure.text.fastening-explained')}</h3>${this.help.hint('figure.text.fastening-explained')}
+        ${this.renderPositions(asset)}
+        ${canFasten(asset, this.partId) ? this.renderFastening(asset) : html`<p hint>${i18next.t('figure.text.links-need-a-box')}</p>`}
+      </section>
     `
   }
 
@@ -162,7 +124,6 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
           </button>
         </div>`
       )}
-      <p hint>${i18next.t('figure.text.place-explained')}</p>
       ${holdsThings(asset)
         ? nothing
         : html`<p hint>${i18next.t('figure.text.place-needs-holding')}</p>
@@ -215,17 +176,23 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
 
   private renderDimensions(asset: V3Asset) {
     const others = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFollow(asset, one))
-    return AXES.map(axis => {
+    const round = followableAxes(asset, this.partId).length === 2
+    return followableAxes(asset, this.partId).map(axis => {
       const now = followOf(asset, this.partId, axis)
       const value = choiceOf(now)
+      /* A cylinder's two measures are its radius and its length; its X and Y name them. */
+      const name = round ? i18next.t(axis === 'x' ? 'figure.label.field-radius' : 'figure.label.field-length') : axis.toUpperCase()
       return html`<div row>
-        <b>${axis.toUpperCase()}</b>
-        <select ?disabled=${this.locked || now.of === 'expression'} @change=${(e: Event) => this.follow(axis, (e.target as HTMLSelectElement).value, now)}>
+        <b>${name}</b>
+        <select ?disabled=${this.locked} @change=${(e: Event) => this.follow(asset, axis, (e.target as HTMLSelectElement).value, now)}>
           <option value="own" ?selected=${value === 'own'}>${i18next.t('figure.label.follows-nothing')}</option>
           ${AXES.filter(one => hasInstanceSize(asset, one)).map(
-            one => html`<option value=${`instance:${one}`} ?selected=${value === `instance:${one}`}>
-              ${i18next.t('figure.label.follows-instance')} · ${one.toUpperCase()}
-            </option>`
+            one => html`<option value=${`share:${one}`} ?selected=${value === `share:${one}`}>
+                ${i18next.t('figure.label.follows-instance-share')} · ${one.toUpperCase()}
+              </option>
+              <option value=${`instance:${one}`} ?selected=${value === `instance:${one}`}>
+                ${i18next.t('figure.label.follows-instance')} · ${one.toUpperCase()}
+              </option>`
           )}
           ${others.flatMap(other =>
             AXES.map(
@@ -240,15 +207,24 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
     })
   }
 
-  private follow(axis: Axis, choice: string, now: Follow) {
+  private follow(asset: V3Asset, axis: Axis, choice: string, now: Follow) {
     const following = now.of !== 'own'
+    /* The measure as it stands: a dimension stops following at it, and a share is taken of it. */
+    const current = dimensionNow(asset, this.partId, axis) ?? this.dims?.[AXES.indexOf(axis)] ?? 100
     if (choice === 'own') {
       if (!following) return
-      const mm = Math.max(1, Math.round(this.dims?.[AXES.indexOf(axis)] ?? 100))
-      this.command({ kind: 'unlink-dimension', part: this.partId, axis, mm })
+      this.command({ kind: 'unlink-dimension', part: this.partId, axis, mm: Math.max(1, Math.round(current)) })
       return
     }
     const [of, a, b] = choice.split(':')
+    if (of === 'share') {
+      /* V2's proportional rule: this measure is the share of the instance size it is now, so it grows with the figure. */
+      const size = asset.designInputs[`size.${a}`]
+      if (!size) return
+      const times = Math.round((current / size) * 1e6) / 1e6
+      this.command({ kind: 'link-dimension', part: this.partId, axis, source: { of: 'instance', axis: a as Axis }, times, replace: following })
+      return
+    }
     const source: V3DimensionSource = of === 'instance' ? { of: 'instance', axis: a as Axis } : { of: 'part', part: a!, axis: b as Axis }
     this.command({ kind: 'link-dimension', part: this.partId, axis, source, replace: following })
   }
@@ -260,10 +236,15 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   private renderPositions(asset: V3Asset) {
     return positionsWorkedOut(asset, this.partId).map(
       axis => html`<div pair>
-        <span>${axis.toUpperCase()} · ${i18next.t('figure.label.position-worked-out')}</span>
+        <span>${axis.toUpperCase()} · ${i18next.t(positionIsShare(asset, this.partId, axis) ? 'figure.label.position-in-proportion' : 'figure.label.position-worked-out')}</span>
         <button act ?disabled=${this.locked} @click=${() => this.command({ kind: 'fix-position', part: this.partId, axis })}>
           <md-icon>push_pin</md-icon>${i18next.t('figure.button.fix-position')}
         </button>
+        ${hasInstanceSize(asset, axis) && !positionIsShare(asset, this.partId, axis)
+          ? html`<button act ?disabled=${this.locked} title=${i18next.t('figure.text.scale-position-explained')} @click=${() => this.command({ kind: 'scale-position', part: this.partId, axis })}>
+              <md-icon>open_in_full</md-icon>${i18next.t('figure.button.scale-position')}
+            </button>`
+          : nothing}
       </div>`
     )
   }
@@ -280,7 +261,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
               <md-icon>link_off</md-icon>${i18next.t('figure.button.detach')}
             </button>
           </div>`
-        : html`<p hint>${i18next.t('figure.text.fastening-explained')}</p>`}
+        : nothing}
       <div form>
         <span>${i18next.t('figure.label.my-face')}</span>
         <select @change=${(e: Event) => (this.fasten = { ...f, face: (e.target as HTMLSelectElement).value as V3Face })}>
@@ -348,7 +329,6 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
     const m = this.motion
     const unit = m.kind === 'turn' ? 'deg' : 'mm'
     return html`
-      <p hint>${i18next.t('figure.text.motion-explained')}</p>
       <div pair>
         <select @change=${(e: Event) => this.setKind((e.target as HTMLSelectElement).value as 'slide' | 'turn')}>
           <option value="slide" ?selected=${m.kind === 'slide'}>${i18next.t('figure.label.motion-slide')}</option>

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

@@ -1,10 +1,11 @@
-import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { css, html, LitElement, nothing, svg } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { MATERIAL_PRESETS, SEGMENT_PRESETS, v3TrianglesOf } from '@hatiolab/figure-model'
 import { activePalette } from '@hatiolab/things-scene'
 import type { V3AssetGeometry, V3Material, V3PartEdit } from '@hatiolab/figure-model'
+import { SidePanelStyles } from './side-panel-styles.js'
 
 /** The purpose each palette role is for, by its token — the V2 inspector's words for the same roles. */
 const PURPOSE: Record<string, string> = {
@@ -40,14 +41,9 @@ const DEFAULT_SEGMENTS = 12
  */
 @customElement('figure-v3-material')
 export class FigureV3Material extends localize(i18next)(LitElement) {
-  static styles = css`
+  static styles = [SidePanelStyles, css`
     :host {
-      display: grid;
-      gap: 10px;
-    }
-    h3 {
-      font-size: var(--ui-t-body, 13px);
-      margin: 12px 0 0;
+      display: block;
     }
     div[field] {
       display: grid;
@@ -74,46 +70,96 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
       outline: 2px solid var(--md-sys-color-primary);
       outline-offset: 1px;
     }
-    small {
-      color: var(--md-sys-color-on-surface-variant);
-    }
     select,
     input[type='range'] {
       font: inherit;
       min-width: 0;
     }
-    label[toggle] {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
+    /* V2's segment picker: the four common counts as their silhouettes with their triangle cost, the rest folded. */
     div[segments] {
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(4, 1fr);
       gap: 4px;
     }
-    div[segments] button {
-      display: grid;
-      padding: 4px;
+    button[seg] {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1px;
+      padding: 6px 2px 4px;
       font: inherit;
+      color: var(--md-sys-color-on-surface);
+      background: none;
       border: 1px solid var(--md-sys-color-outline-variant);
       border-radius: 6px;
-      background: var(--md-sys-color-surface);
+      cursor: pointer;
+    }
+    button[seg]:hover:not([on]) {
+      background-color: var(--md-sys-color-surface-container);
+    }
+    button[seg][on] {
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+      border-color: transparent;
+    }
+    /* Small, and 12 and 16 both read as circles: large enough for the corners to show (V2). */
+    button[seg] svg {
+      display: block;
+      width: 32px;
+      height: 32px;
+    }
+    button[seg] svg polygon {
+      fill: var(--md-sys-color-surface-container-highest);
+      stroke: currentColor;
+      stroke-width: 1.1;
+      stroke-linejoin: miter;
+    }
+    button[seg][on] svg polygon {
+      fill: var(--md-sys-color-surface-container-lowest);
+    }
+    button[seg] b {
+      font-size: 0.8rem;
+    }
+    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] {
+      display: flex;
+      gap: 4px;
+      margin-top: 4px;
+    }
+    div[presets] button {
+      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);
+      border-radius: 6px;
       cursor: pointer;
     }
-    div[segments] button[on] {
-      background: var(--md-sys-color-secondary-container);
-      color: var(--md-sys-color-on-secondary-container);
-      border-color: var(--md-sys-color-primary);
+    div[presets] button[on] {
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+      border-color: transparent;
     }
-  `
+  `]
 
   /** The selected body as evaluated — its material, its segments and its shape. */
   @property({ attribute: false }) body?: V3AssetGeometry & { id: string }
   /** The asset's palette, token → colour. */
   @property({ attribute: false }) palette: Record<string, string> = {}
   @property({ type: Boolean }) locked = false
+  /** The glow while its slider is dragged: shown beside it and drawn on the canvas, recorded on release. */
+  @state() private glowing?: number
 
   render() {
     const part = this.body
@@ -127,7 +173,7 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
     const painted = entries.filter(([token]) => !token.startsWith('palette.status-'))
     const lit = entries.filter(([token]) => token.startsWith('palette.status-'))
     const glow = material.emissive
-    return html`
+    return html`<section>
       <h3>${i18next.t('figure.label.part-material')}</h3>
       <div field>
         <label>${i18next.t('figure.label.palette-role')}</label>
@@ -168,9 +214,10 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
           step="0.05"
           ?disabled=${this.locked}
           .value=${String(glow?.intensity ?? 0)}
+          @input=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value), true)}
           @change=${(e: Event) => this.glow(Number((e.target as HTMLInputElement).value))}
         />
-        <small>${(glow?.intensity ?? 0).toFixed(2)}</small>
+        <small>${(this.glowing ?? glow?.intensity ?? 0).toFixed(2)}</small>
       </div>
       ${glow
         ? html`<div field>
@@ -179,7 +226,7 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
           </div>`
         : nothing}
       ${this.renderSegments(part)}
-    `
+    </section>`
   }
 
   private renderSegments(part: V3AssetGeometry & { id: string }) {
@@ -190,17 +237,29 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
       <div field>
         <label>${i18next.t('figure.label.segments')}</label>
         <div segments>
-          ${SEGMENT_PRESETS.map(
+          ${SEGMENT_PRESETS.slice(0, 4).map(
             preset => html`<button
+              seg
               ?on=${preset === current}
               ?disabled=${this.locked}
               @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}
             >
+              ${silhouette(preset)}
               <b>${preset}</b>
               <small>${i18next.t('figure.text.n-triangles', { count: v3TrianglesOf({ ...part, segments: preset }) })}</small>
             </button>`
           )}
         </div>
+        <details free ?open=${SEGMENT_PRESETS.slice(4).includes(current as never)}>
+          <summary>${i18next.t('figure.text.more-segment-options')}</summary>
+          <div presets>
+            ${SEGMENT_PRESETS.slice(4).map(
+              preset => html`<button ?on=${preset === current} ?disabled=${this.locked} @click=${() => this.edit({ kind: 'set-segments', target: part.id, segments: preset })}>
+                ${preset}
+              </button>`
+            )}
+          </div>
+        </details>
       </div>
     `
   }
@@ -224,12 +283,14 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
   }
 
   /** Intensity 0 is no glow at all, as in V2; a new glow takes the part's own colour until another is picked. */
-  private glow(intensity: number) {
+  private glow(intensity: number, live = false) {
     const material = this.body!.material
-    this.put({ emissive: intensity > 0 ? { token: material.emissive?.token ?? material.token, intensity, on: true } : undefined })
+    this.glowing = live ? intensity : undefined
+    this.put({ emissive: intensity > 0 ? { token: material.emissive?.token ?? material.token, intensity, on: true } : undefined }, live)
   }
 
-  private put(patch: Partial<V3Material>) {
+  /** A material change: recorded, or -- while a slider is dragged -- only drawn (`v3-part-live`). */
+  private put(patch: Partial<V3Material>, live = false) {
     const material: V3Material = { ...this.body!.material, ...patch }
     for (const key of Object.keys(material) as (keyof V3Material)[]) if (material[key] === undefined) delete material[key]
     /* The colours this material names that the asset does not carry yet. */
@@ -239,10 +300,22 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
         .filter((token): token is string => !!token && this.palette[token] === undefined && offered[token] !== undefined)
         .map(token => [token, offered[token]!])
     )
-    this.edit({ kind: 'set-material', target: this.body!.id, material, ...(Object.keys(palette).length ? { palette } : {}) })
+    const edit: V3PartEdit = { kind: 'set-material', target: this.body!.id, material, ...(Object.keys(palette).length ? { palette } : {}) }
+    if (live) this.dispatchEvent(new CustomEvent('v3-part-live', { detail: { edit }, bubbles: true, composed: true }))
+    else this.edit(edit)
   }
 
   private edit(edit: V3PartEdit) {
     this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit }, bubbles: true, composed: true }))
   }
 }
+
+/** A regular polygon of this many sides -- how round a body with this rim count looks from its end (V2). */
+function silhouette(segments: number) {
+  const points: string[] = []
+  for (let i = 0; i < segments; i++) {
+    const angle = -Math.PI / 2 + (i * 2 * Math.PI) / segments
+    points.push(`${(16 + 13 * Math.cos(angle)).toFixed(2)},${(16 + 13 * Math.sin(angle)).toFixed(2)}`)
+  }
+  return svg`<svg viewBox="0 0 32 32" aria-hidden="true"><polygon points=${points.join(' ')}></polygon></svg>`
+}

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

@@ -4,6 +4,8 @@ import { customElement, property } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 import type { V3PrimitiveCreation } from '@hatiolab/figure-model'
+import type { V3BudgetLine } from './v3-maturity.js'
+import { partLabelOf } from './v3-fields.js'
 
 /**
  * 도형 팔레트와 부품 목록 — V3 자산의 것.
@@ -44,10 +46,20 @@ const PROVIDER_ICON: Record<string, string> = {
 }
 
 /** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */
-const RECIPES: Array<{ kind: V3PrimitiveCreation['kind']; icon: string; label: string }> = [
+/*
+  The palette: V2's shapes. A plate and a wall are boxes of a shape a person reaches for (V2 drew both as boxes), so
+  they are starting sizes, not kinds of their own.
+*/
+export type V3PaletteKind = V3PrimitiveCreation['kind'] | 'plate' | 'wall'
+const RECIPES: Array<{ kind: V3PaletteKind; icon: string; label: string }> = [
   { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },
   { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },
   { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rounded-box' },
+  { kind: 'sphere', icon: 'circle', label: 'figure.label.primitive-sphere' },
+  { kind: 'frustum', icon: 'change_history', label: 'figure.label.primitive-frustum' },
+  { kind: 'polygon', icon: 'hexagon', label: 'figure.label.primitive-polygon' },
+  { kind: 'plate', icon: 'check_box_outline_blank', label: 'figure.label.primitive-plate' },
+  { kind: 'wall', icon: 'wall', label: 'figure.label.primitive-wall' },
   { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
 ]
 
@@ -62,7 +74,7 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         min-height: 0;
         overflow: hidden;
         background-color: var(--md-sys-color-surface-container-lowest);
-        border-right: 1px solid var(--md-sys-color-outline-variant);
+        /* The divider beside it is the editor's frame's (ox-three-pane). */
         color: var(--md-sys-color-on-surface);
         font: var(--label-font, inherit);
         font-size: 0.76rem;
@@ -90,6 +102,51 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         text-transform: uppercase;
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
+      /* The cost line: the grade's letter in its colour, then what the figure costs. */
+      button[budget] {
+        display: flex;
+        align-items: flex-start;
+        gap: 6px;
+        width: 100%;
+        margin: 0 0 6px;
+        padding: 4px 6px;
+        font: inherit;
+        font-size: 0.68rem;
+        line-height: 1.5;
+        text-align: left;
+        color: var(--md-sys-color-on-surface-variant);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      button[budget]:hover {
+        background: var(--md-sys-color-surface-container);
+      }
+      button[budget] b {
+        flex: none;
+        min-width: 16px;
+        text-align: center;
+        border-radius: 4px;
+        color: var(--md-sys-color-on-primary-container);
+        background: var(--md-sys-color-primary-container);
+      }
+      button[budget][grade='C'] b {
+        color: var(--md-sys-color-on-tertiary-container);
+        background: var(--md-sys-color-tertiary-container);
+      }
+      button[budget][grade='D'] {
+        border-color: var(--md-sys-color-error);
+      }
+      button[budget][grade='D'] b {
+        color: var(--md-sys-color-on-error);
+        background: var(--md-sys-color-error);
+      }
+      button[budget] em {
+        display: block;
+        font-style: normal;
+        color: var(--md-sys-color-error);
+      }
       span[room] {
         font-size: 0.7rem;
         font-weight: 400;
@@ -261,6 +318,11 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
   @property({ type: String }) selected = ''
   /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */
   @property({ type: Boolean }) locked = false
+  /**
+   * 이 도형이 치르는 값 — 삼각형 · 묶음 · 한 화면에 몇 대 · 등급. 부품을 더하는 바로 그 자리에서 보여야 로우폴리의
+   * 기준이 저작을 이끈다(V2 모델러의 정체성). 등급이 D 면 무엇이 넘쳤는지를 적는다. 누르면 성숙도 탭이 열린다.
+   */
+  @property({ attribute: false }) budget?: V3BudgetLine
 
   render() {
     return html`
@@ -289,6 +351,7 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
           <span room>${this.parts.length}</span>
           ${this.renderShowAll()}
         </h3>
+        ${this.renderBudget()}
         ${this.parts.length === 0
           ? html`<p quiet>${i18next.t('figure.text.no-parts-yet')}</p>`
           : html`<ol>
@@ -298,6 +361,36 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
     `
   }
 
+  private renderBudget() {
+    const b = this.budget
+    if (!b || !this.parts.length) return nothing
+    const over = b.grade === 'D'
+    return html`<button
+      budget
+      grade=${b.grade}
+      title=${i18next.t('figure.text.parts-budget-open')}
+      @click=${() => this.dispatchEvent(new CustomEvent('show-maturity', { bubbles: true, composed: true }))}
+    >
+      <b>${b.grade}</b>
+      <span>
+        ${i18next.t('figure.text.parts-budget', {
+          triangles: b.triangles.toLocaleString(),
+          groups: b.groups.toLocaleString(),
+          instances: b.instances.toLocaleString()
+        })}
+        ${over
+          ? html`<em
+              >${i18next.t('figure.text.parts-budget-over', {
+                budget: i18next.t('figure.label.budget-' + b.tightest.key),
+                used: b.tightest.used.toLocaleString(),
+                limit: b.tightest.limit.toLocaleString()
+              })}</em
+            >`
+          : nothing}
+      </span>
+    </button>`
+  }
+
   /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */
   private renderShowAll() {
     if (this.parts.length === 0) return nothing
@@ -341,7 +434,7 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         </button>
         <md-icon>${PROVIDER_ICON[part.provider] ?? 'deployed_code'}</md-icon>
         <span label title=${part.id}
-          >${part.id}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span
+          >${partLabelOf(part.id)}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span
         >
         ${selected ? this.renderOps(part.id, index) : nothing}
       </li>