@things-factory/figure-ui 10.1.4 → 10.1.6

package/client/modeller/figure-parts.ts

@@ -324,49 +324,49 @@ export class FigureParts extends localize(i18next)(LitElement) {
 
     return html`
       <section>
-        <h3>${i18next.t('label.shapes')}</h3>
+        <h3>${i18next.t('figure.label.shapes')}</h3>
         <div palette>
           ${PRIMITIVE_KINDS.map(
             kind => html`
               <button
                 shape
                 ?disabled=${full}
-                title=${full ? i18next.t('text.part-limit-reached') : i18next.t('text.add-a-shape')}
+                title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t('figure.text.add-a-shape')}
                 @click=${() => this.ask('add-part', { primitive: kind })}
               >
                 <md-icon>${SHAPE_ICON[kind]}</md-icon>
-                ${i18next.t('label.primitive-' + kind)}
+                ${i18next.t('figure.label.primitive-' + kind)}
               </button>
             `
           )}
         </div>
         ${full
-          ? html`<p full>${i18next.t('text.part-limit-reached-short', { level, limit })}</p>`
+          ? html`<p full>${i18next.t('figure.text.part-limit-reached-short', { level, limit })}</p>`
           : ''}
       </section>
 
       <section list>
         <h3>
-          ${i18next.t('label.parts')}
-          <span room ?full=${full} title=${i18next.t('text.limit-comes-from-level')}>
-            ${i18next.t('text.n-of-limit', { used: parts.length, limit })}
+          ${i18next.t('figure.label.parts')}
+          <span room ?full=${full} title=${i18next.t('figure.text.limit-comes-from-level')}>
+            ${i18next.t('figure.text.n-of-limit', { used: parts.length, limit })}
           </span>
           ${this.renderShowAll(parts)}
         </h3>
 
         <div level>
-          <label for="detail-level">${i18next.t('label.detail-level')}</label>
+          <label for="detail-level">${i18next.t('figure.label.detail-level')}</label>
           <select
             id="detail-level"
-            title=${i18next.t('text.detail-level-explained')}
+            title=${i18next.t('figure.text.detail-level-explained')}
             @change=${(e: Event) =>
               this.ask('change-detail-level', { level: (e.target as HTMLSelectElement).value })}
           >
             ${DETAIL_LEVELS.map(
               one => html`
                 <option value=${one} ?selected=${one === level}>
-                  ${one} ${i18next.t('label.detail-' + one)} ·
-                  ${i18next.t('text.n-parts-at-most', { limit: PART_LIMIT[one] })}
+                  ${one} ${i18next.t('figure.label.detail-' + one)} ·
+                  ${i18next.t('figure.text.n-parts-at-most', { limit: PART_LIMIT[one] })}
                 </option>
               `
             )}
@@ -374,7 +374,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         </div>
 
         ${parts.length === 0
-          ? html`<p quiet>${i18next.t('text.pick-a-shape-above-to-start')}</p>`
+          ? html`<p quiet>${i18next.t('figure.text.pick-a-shape-above-to-start')}</p>`
           : html`
               <ol>
                 ${parts.map((part, index) => this.renderRow(part, index, parts.length))}
@@ -403,7 +403,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         eye
         all
         ?off=${!anyHidden}
-        title=${i18next.t(anyHidden ? 'text.show-all-parts' : 'text.hide-all-parts')}
+        title=${i18next.t(anyHidden ? 'figure.text.show-all-parts' : 'figure.text.hide-all-parts')}
         @click=${(e: Event) => {
           e.stopPropagation()
           this.ask('set-all-parts-hidden', { hidden: !anyHidden })
@@ -423,7 +423,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         <button
           eye
           ?off=${off}
-          title=${i18next.t(off ? 'text.show-this-part' : 'text.hide-this-part')}
+          title=${i18next.t(off ? 'figure.text.show-this-part' : 'figure.text.hide-this-part')}
           @click=${(e: Event) => {
             // 눌렀을 때 줄 고르기가 함께 일어나지 않게 막는다 — 가리려던 것이지 고르려던 것이 아니다
             e.stopPropagation()
@@ -453,7 +453,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
       <button
         op=${name}
         ?disabled=${!enabled}
-        title=${i18next.t('button.' + name)}
+        title=${i18next.t('figure.button.' + name)}
         @click=${(e: Event) => {
           e.stopPropagation()
           if (enabled) this.ask(name, detail)

package/client/modeller/figure-preview.ts

@@ -263,7 +263,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
   private standUp() {
     const source = this.source
     if (!source || source.parts.length === 0) {
-      this.cannot = i18next.t('text.preview-needs-a-part')
+      this.cannot = i18next.t('figure.text.preview-needs-a-part')
       this.teardown()
       return
     }
@@ -273,7 +273,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
 
     const { errors } = validate(source)
     if (errors.length > 0) {
-      this.cannot = i18next.t('text.preview-blocked-by-errors')
+      this.cannot = i18next.t('figure.text.preview-blocked-by-errors')
       this.teardown()
       return
     }

package/client/modeller/figure-report.ts

@@ -6,7 +6,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
-import { compile, costCurveSvg, costOf, scoreOf, validate } from '@hatiolab/figure-model'
+import { compile, costCurveSvg, costOf, scoreOf, sizingReport, validate } from '@hatiolab/figure-model'
 import type { FigureCost, FigureScore, FigureSource } from '@hatiolab/figure-model'
 
 import { capacityOf } from './scene-budget.js'
@@ -440,6 +440,23 @@ export class FigureReport extends localize(i18next)(LitElement) {
   @state() private expanded = false
   @state() private errors: { code: string; message: string; at?: string }[] = []
   @state() private violations: { code: string; message: string }[] = []
+  /**
+   * 크기를 바꿔 봤을 때 갈라지는가 — **발행을 막는 것**이다.
+   *
+   * 이력 탭이 같은 판정을 서버에서 받아 발행 문을 잠그지만, 그것은 **저장된 정본**에 대한
+   * 것이라 저장하기 전에는 답하지 못한다. 여기서는 저작 중인 정본을 그대로 재므로, 부품을
+   * 옮기는 그 자리에서 갈라짐이 생겼는지 사라졌는지 보인다 — 저장하고 탭을 옮겨 확인하게
+   * 두면 고칠 때가 이미 지나 있다.
+   */
+  @state() private sizing: { code: string; message: string; at?: string; blocking: boolean }[] = []
+  /**
+   * 아직 부품이 하나도 없나 — **저작 전이지 형식을 어긴 것이 아니다.**
+   *
+   * 형식은 부품 0개를 오류로 본다(`missing-parts`). 발행 관점에서는 맞다. 그런데 새로 만들기를
+   * 누른 직후가 바로 그 상태이므로, 그것을 그대로 오류로 그리면 **아무것도 하지 않았는데 붉은
+   * 화면**을 보게 된다. 그래서 이 자리에서 둘을 가른다.
+   */
+  @state() private bare = false
 
   willUpdate(changed: Map<string, unknown>) {
     if (changed.has('source')) {
@@ -448,10 +465,17 @@ export class FigureReport extends localize(i18next)(LitElement) {
   }
 
   render() {
-    if (!this.source) {
+    /*
+      부품이 없으면 이 자리는 **판정이 아니라 안내**다. 이미 있던 「부품을 추가하면 나옵니다」가
+      정확히 그 말이므로 그것을 쓴다 — 같은 상태에 문장을 둘 두지 않는다.
+
+      아래 셈들(머리·축·한도·추이)은 부품이 있어야 뜻이 있고, 재지 않은 값을 들고 그리면 0 으로
+      보인다. 0 은 「나쁘다」로 읽히므로 그 자리에 두지 않는다.
+    */
+    if (!this.source || this.bare) {
       return html`
         <section>
-          <p quiet>${i18next.t('text.report-appears-when-you-add-a-part')}</p>
+          <p quiet>${i18next.t('figure.text.report-appears-when-you-add-a-part')}</p>
         </section>
       `
     }
@@ -484,34 +508,34 @@ export class FigureReport extends localize(i18next)(LitElement) {
 
     return html`
       <section>
-        <h3>${i18next.t('label.maturity')}</h3>
-        <p lead>${i18next.t('label.axis-scale')} — ${i18next.t('text.how-many-fit')}</p>
+        <h3>${i18next.t('figure.label.maturity')}</h3>
+        <p lead>${i18next.t('figure.label.axis-scale')} — ${i18next.t('figure.text.how-many-fit')}</p>
         <div verdict>
           <span capacity>${capacity.instances.toLocaleString()}</span>
-          <span unit>${i18next.t('text.instances-unit')}</span>
+          <span unit>${i18next.t('figure.text.instances-unit')}</span>
           <span
             grade
             ?tight=${score.grade === 'C'}
             ?over=${score.grade === 'D'}
-            title=${i18next.t('text.grade-explained')}
+            title=${i18next.t('figure.text.grade-explained')}
           >
             ${score.grade}
-            <small>${i18next.t('text.headroom-percent', { percent: Math.round(score.score) })}</small>
+            <small>${i18next.t('figure.text.headroom-percent', { percent: Math.round(score.score) })}</small>
           </span>
         </div>
         <p because>
-          ${i18next.t('text.grade-decided-by')}
-          <strong>${i18next.t('label.budget-' + score.tightest.key)}</strong>
+          ${i18next.t('figure.text.grade-decided-by')}
+          <strong>${i18next.t('figure.label.budget-' + score.tightest.key)}</strong>
           — ${score.tightest.used} / ${score.tightest.limit}
           (${Math.round((score.tightest.used / score.tightest.limit) * 100)}%)
         </p>
         ${this.renderGradeScale(score.grade)}
         <p basis>
-          ${i18next.t('text.bound-by-' + capacity.bound, {
+          ${i18next.t('figure.text.bound-by-' + capacity.bound, {
             per: capacity.per.toLocaleString(),
             budget: capacity.budget.toLocaleString()
           })}
-          <em>${i18next.t('text.budget-not-measured-yet')}</em>
+          <em>${i18next.t('figure.text.budget-not-measured-yet')}</em>
         </p>
       </section>
     `
@@ -536,7 +560,7 @@ export class FigureReport extends localize(i18next)(LitElement) {
 
     return html`
       <p scale>
-        <span>${i18next.t('text.grade-scale-lead')}</span>
+        <span>${i18next.t('figure.text.grade-scale-lead')}</span>
         ${bounds.map(
           ([grade, bound]) => html`<span ?now=${grade === now}><b>${grade}</b> ${bound}</span>`
         )}
@@ -568,7 +592,7 @@ export class FigureReport extends localize(i18next)(LitElement) {
 
     return html`
       <section>
-        <h3>${i18next.t('label.by-axis')}</h3>
+        <h3>${i18next.t('figure.label.by-axis')}</h3>
         <div radar>${this.renderRadar(all.filter(axis => axis.ratio !== undefined))}</div>
         ${this.renderUnmeasured(all.filter(axis => axis.ratio === undefined))}
         <ul axes>
@@ -624,7 +648,7 @@ export class FigureReport extends localize(i18next)(LitElement) {
           const anchor = x < cx - 3 ? 'end' : x > cx + 3 ? 'start' : 'middle'
           return svg`
             <text x=${x.toFixed(1)} y=${(y + 1.8).toFixed(1)} text-anchor=${anchor}>
-              ${i18next.t('label.axis-' + axis.key + '-short')}
+              ${i18next.t('figure.label.axis-' + axis.key + '-short')}
             </text>
           `
         })}
@@ -644,21 +668,21 @@ export class FigureReport extends localize(i18next)(LitElement) {
 
     return html`
       <p unmeasured>
-        ${i18next.t('text.axes-not-measurable-yet', {
-          axes: axes.map(axis => i18next.t('label.axis-' + axis.key)).join(' · ')
+        ${i18next.t('figure.text.axes-not-measurable-yet', {
+          axes: axes.map(axis => i18next.t('figure.label.axis-' + axis.key)).join(' · ')
         })}
       </p>
     `
   }
 
   private renderAxis(axis: MaturityAxis) {
-    const name = i18next.t('label.axis-' + axis.key)
+    const name = i18next.t('figure.label.axis-' + axis.key)
 
     if (axis.blocked) {
       return html`
         <li blocked>
           <span>${name}</span>
-          <span reading>${i18next.t('text.not-measurable-yet')}</span>
+          <span reading>${i18next.t('figure.text.not-measurable-yet')}</span>
           <em>${i18next.t(axis.blocked)}</em>
         </li>
       `
@@ -688,7 +712,7 @@ export class FigureReport extends localize(i18next)(LitElement) {
    * 그것을 그대로 실으면 다른 언어 사용자에게 한국어가 나온다.
    *
    * `budgets` 는 **배열**이다. `Object.entries` 로 돌면 키가 인덱스(0·1·2…)가 되어
-   * `label.budget-0` 같은 없는 키를 찾는다 — 화면을 띄워 보고서야 드러났다.
+   * `figure.label.budget-0` 같은 없는 키를 찾는다 — 화면을 띄워 보고서야 드러났다.
    * 배열을 그대로 돌고 `use.key` 를 쓴다.
    *
    * 그래서 **안정된 `key`** 로 이 화면의 i18n 을 찾는다. `key` 는 열거형이라 형식의
@@ -701,14 +725,14 @@ export class FigureReport extends localize(i18next)(LitElement) {
 
     return html`
       <section>
-        <h3>${i18next.t('label.budgets')}</h3>
+        <h3>${i18next.t('figure.label.budgets')}</h3>
         <ul budgets>
           ${score.budgets.map(use => {
             const ratio = Math.min(1, use.ratio)
             const tight = use.key === score.tightest.key
             return html`
               <li>
-                <span>${i18next.t('label.budget-' + use.key)}</span>
+                <span>${i18next.t('figure.label.budget-' + use.key)}</span>
                 <span>${use.used} / ${use.limit}</span>
                 <div bar><i ?tight=${tight} style="width:${Math.round(ratio * 100)}%"></i></div>
               </li>
@@ -725,21 +749,21 @@ export class FigureReport extends localize(i18next)(LitElement) {
 
     return html`
       <section>
-        <h3>${i18next.t('label.weight')}</h3>
+        <h3>${i18next.t('figure.label.weight')}</h3>
         <dl metrics>
-          <dt>${i18next.t('label.triangles')}</dt>
+          <dt>${i18next.t('figure.label.triangles')}</dt>
           <dd>${cost.triangles.toLocaleString()}</dd>
 
-          <dt>${i18next.t('label.triangles-at-100')}</dt>
+          <dt>${i18next.t('figure.label.triangles-at-100')}</dt>
           <dd>${cost.at.triangles.toLocaleString()}</dd>
 
-          <dt>${i18next.t('label.draw-calls-at-100')}</dt>
+          <dt>${i18next.t('figure.label.draw-calls-at-100')}</dt>
           <dd>${cost.at.drawCalls.toLocaleString()}</dd>
 
-          <dt>${i18next.t('label.distinct-shapes')}</dt>
+          <dt>${i18next.t('figure.label.distinct-shapes')}</dt>
           <dd>${cost.distinctShapes}</dd>
 
-          <dt>${i18next.t('label.distinct-materials')}</dt>
+          <dt>${i18next.t('figure.label.distinct-materials')}</dt>
           <dd>${cost.distinctMaterials}</dd>
         </dl>
       </section>
@@ -762,14 +786,14 @@ export class FigureReport extends localize(i18next)(LitElement) {
 
     return html`
       <section>
-        <h3>${i18next.t('label.reuse-trend')}</h3>
+        <h3>${i18next.t('figure.label.reuse-trend')}</h3>
         ${many
           ? html`
               <dl metrics>
-                <dt>${i18next.t('label.triangles-at-10k')}</dt>
+                <dt>${i18next.t('figure.label.triangles-at-10k')}</dt>
                 <dd>${many.at.triangles.toLocaleString()}</dd>
 
-                <dt>${i18next.t('label.draw-calls-at-10k')}</dt>
+                <dt>${i18next.t('figure.label.draw-calls-at-10k')}</dt>
                 <dd>${many.at.drawCalls.toLocaleString()}</dd>
               </dl>
             `
@@ -777,7 +801,7 @@ export class FigureReport extends localize(i18next)(LitElement) {
         ${this.curve
           ? html`
               <button expand @click=${() => (this.expanded = true)}>
-                ${i18next.t('button.see-the-trend-chart')}
+                ${i18next.t('figure.button.see-the-trend-chart')}
               </button>
             `
           : nothing}
@@ -794,7 +818,7 @@ export class FigureReport extends localize(i18next)(LitElement) {
         <figure @click=${(e: Event) => e.stopPropagation()}>
           ${unsafeSVG(this.curve)}
           <figcaption>
-            <button close @click=${() => (this.expanded = false)}>${i18next.t('button.close')}</button>
+            <button close @click=${() => (this.expanded = false)}>${i18next.t('figure.button.close')}</button>
           </figcaption>
         </figure>
       </div>
@@ -809,19 +833,27 @@ export class FigureReport extends localize(i18next)(LitElement) {
    * 검사가 돌았는지 알 수 없다.
    */
   private renderFindings() {
-    if (this.errors.length === 0 && this.violations.length === 0) {
+    if (this.errors.length === 0 && this.violations.length === 0 && this.sizing.length === 0) {
       return html`
         <section>
-          <h3>${i18next.t('label.findings')}</h3>
-          <p quiet>${i18next.t('text.no-findings')}</p>
+          <h3>${i18next.t('figure.label.findings')}</h3>
+          <p quiet>${i18next.t('figure.text.no-findings')}</p>
         </section>
       `
     }
 
     return html`
       <section>
-        <h3>${i18next.t('label.findings')}</h3>
+        <h3>${i18next.t('figure.label.findings')}</h3>
         <ul findings>
+          ${this.sizing.map(
+            finding => html`
+              <li ?violation=${!finding.blocking}>
+                <md-icon>call_split</md-icon>
+                <span>${finding.message} ${finding.at ? html`<code at>${finding.at}</code>` : ''}</span>
+              </li>
+            `
+          )}
           ${this.errors.map(
             e => html`
               <li>
@@ -854,6 +886,24 @@ export class FigureReport extends localize(i18next)(LitElement) {
       this.curve = ''
       this.errors = []
       this.violations = []
+      this.sizing = []
+      return
+    }
+
+    /*
+      부품이 없으면 판정을 아예 하지 않는다 — 잴 것이 없다. 「무엇을 고쳐야 하나」가 아니라
+      「무엇부터 놓나」인 상태이고, 그 안내는 부품 목록이 이미 하고 있다.
+    */
+    this.bare = !source.parts?.length
+    if (this.bare) {
+      this.cost = undefined
+      this.score = undefined
+      this.many = undefined
+      this.capacity = undefined
+      this.curve = ''
+      this.errors = []
+      this.violations = []
+      this.sizing = []
       return
     }
 
@@ -868,6 +918,7 @@ export class FigureReport extends localize(i18next)(LitElement) {
       this.many = undefined
       this.capacity = undefined
       this.curve = ''
+      this.sizing = []
       this.dispatchEvent(
         new CustomEvent('verdict-changed', { detail: {}, bubbles: true, composed: true })
       )
@@ -875,6 +926,20 @@ export class FigureReport extends localize(i18next)(LitElement) {
     }
 
     const blueprint = compile(source)
+
+    /*
+      크기를 바꿔 보는 일곱 조합. 판정 규칙은 `figure-model` 의 `gate.ts` 가 정한 것을 그대로
+      쓴다 — 무엇이 막는 것인지 화면이 다시 정하면 서버와 다른 말을 하게 된다.
+    */
+    const report = sizingReport(blueprint)
+    this.sizing = report.findings.map(finding => ({
+      code: finding.code,
+      message: finding.message,
+      /* 숫자가 아니라 자리를 말한다 — 갈라져 나온 부품 이름이 고칠 자리다. */
+      at: finding.clumps.map(clump => [...clump].sort().join('+')).join(' | ') || undefined,
+      blocking: finding.code === 'sizing-splits'
+    }))
+
     this.cost = costOf(blueprint, 100)
     // 1만 개는 figure-model 에 다시 묻는다 — 화면이 곱셈으로 짐작하지 않는다.
     this.many = costOf(blueprint, 10000)

package/client/modeller/figure-settings.ts

@@ -159,34 +159,34 @@ export class FigureSettings extends localize(i18next)(LitElement) {
 
     return html`
       <section>
-        <h3>${i18next.t('label.guides')}</h3>
-        <p quiet>${i18next.t('text.view-settings-are-not-saved')}</p>
+        <h3>${i18next.t('figure.label.guides')}</h3>
+        <p quiet>${i18next.t('figure.text.view-settings-are-not-saved')}</p>
 
-        ${this.toggle('grid', view.grid, i18next.t('label.coordinate-ground'), i18next.t('text.coordinate-ground-explained'))}
-        ${this.toggle('gridLabels', view.gridLabels, i18next.t('label.axis-labels'))}
-        ${this.toggle('floor', view.floor, i18next.t('label.floor'), i18next.t('text.floor-explained'))}
+        ${this.toggle('grid', view.grid, i18next.t('figure.label.coordinate-ground'), i18next.t('figure.text.coordinate-ground-explained'))}
+        ${this.toggle('gridLabels', view.gridLabels, i18next.t('figure.label.axis-labels'))}
+        ${this.toggle('floor', view.floor, i18next.t('figure.label.scene-floor'), i18next.t('figure.text.floor-explained'))}
       </section>
 
       <section>
-        <h3>${i18next.t('label.environment')}</h3>
+        <h3>${i18next.t('figure.label.environment')}</h3>
 
         <label field>
-          <span>${i18next.t('label.preset')}</span>
+          <span>${i18next.t('figure.label.preset')}</span>
           <select
             .value=${view.environment}
             @change=${(e: Event) => this.put({ environment: (e.target as HTMLSelectElement).value as EnvironmentName })}
           >
             ${ENVIRONMENTS.map(
               name => html`<option value=${name} ?selected=${view.environment === name}>
-                ${i18next.t(`label.environment-${name}`)}
+                ${i18next.t(`figure.label.environment-${name}`)}
               </option>`
             )}
           </select>
         </label>
-        <p quiet>${i18next.t('text.environment-explained')}</p>
+        <p quiet>${i18next.t('figure.text.environment-explained')}</p>
 
         <label field>
-          <span>${i18next.t('label.sky-color')}</span>
+          <span>${i18next.t('figure.label.sky-color')}</span>
           <input
             type="color"
             .value=${view.skyColor}
@@ -196,30 +196,30 @@ export class FigureSettings extends localize(i18next)(LitElement) {
       </section>
 
       <section>
-        <h3>${i18next.t('label.key-light')}</h3>
+        <h3>${i18next.t('figure.label.key-light')}</h3>
 
-        ${this.slider('dirLightIntensity', view.dirLightIntensity, i18next.t('label.intensity'), 0, 5, 0.1)}
+        ${this.slider('dirLightIntensity', view.dirLightIntensity, i18next.t('figure.label.intensity'), 0, 5, 0.1)}
         ${this.toggle(
           'dirLightFollowCamera',
           view.dirLightFollowCamera,
-          i18next.t('label.follow-camera'),
-          i18next.t('text.follow-camera-explained')
+          i18next.t('figure.label.follow-camera'),
+          i18next.t('figure.text.follow-camera-explained')
         )}
-        ${this.toggle('dirShadowEnabled', view.dirShadowEnabled, i18next.t('label.cast-shadow'))}
+        ${this.toggle('dirShadowEnabled', view.dirShadowEnabled, i18next.t('figure.label.cast-shadow'))}
         ${view.dirLightIntensity === 0 && view.hemiIntensity === 0
-          ? html`<p quiet>${i18next.t('text.all-lights-off')}</p>`
+          ? html`<p quiet>${i18next.t('figure.text.all-lights-off')}</p>`
           : ''}
       </section>
 
       <section>
-        <h3>${i18next.t('label.hemisphere-light')}</h3>
+        <h3>${i18next.t('figure.label.hemisphere-light')}</h3>
 
-        ${this.slider('hemiIntensity', view.hemiIntensity, i18next.t('label.intensity'), 0, 8, 0.1)}
-        <p quiet>${i18next.t('text.hemisphere-light-explained')}</p>
+        ${this.slider('hemiIntensity', view.hemiIntensity, i18next.t('figure.label.intensity'), 0, 8, 0.1)}
+        <p quiet>${i18next.t('figure.text.hemisphere-light-explained')}</p>
       </section>
 
       <section>
-        <button reset @click=${() => this.reset()}>${i18next.t('button.reset-view')}</button>
+        <button reset @click=${() => this.reset()}>${i18next.t('figure.button.reset-view')}</button>
       </section>
     `
   }

package/client/modeller/figure-side.ts

@@ -1,6 +1,8 @@
 import './figure-inspector.js'
+import './figure-capabilities.js'
 import './figure-report.js'
 import './figure-settings.js'
+import './figure-history-panel.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -12,7 +14,7 @@ import type { BoardModel, PartModel } from './figure-source.js'
 import { DEFAULT_VIEW } from './figure-view.js'
 import type { ViewSettings } from './figure-view.js'
 
-type Tab = 'properties' | 'verdict' | 'view'
+type Tab = 'properties' | 'capability' | 'verdict' | 'view' | 'history'
 
 /**
  * 저작면 오른쪽 칸 — 속성과 판정을 탭으로 겹쳐 둔다.
@@ -64,10 +66,19 @@ export class FigureSide extends localize(i18next)(LitElement) {
     }
     button[tab] {
       flex: 1;
+      /*
+        **탭 이름은 한 줄이다.** 배지를 이름 옆에 나란히 두었더니 넷이 좁은 칸을 나눠 쓰면서
+        이름이 접혀 「성숙 / 도」가 되었다. 이름이 접히면 그 줄이 두 줄이 되고 네 탭의 높이가
+        서로 달라진다.
+
+        그래서 배지는 자리를 차지하지 않고 **이름 위에 겹친다**(아래 span[badge]). 개수는
+        곁들이는 것이고 이름이 먼저다.
+      */
+      position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 6px;
+      white-space: nowrap;
       padding: 8px 6px;
       font: var(--label-font, inherit);
       font-size: 0.76rem;
@@ -87,14 +98,25 @@ export class FigureSide extends localize(i18next)(LitElement) {
       border-bottom-color: var(--md-sys-color-primary);
     }
 
-    /* 판정을 덮어 두어도 개수는 여기 남는다 */
+    /*
+      판정을 덮어 두어도 개수는 여기 남는다.
+
+      자리를 먹지 않게 오른쪽 위에 겹쳐 둔다 — 탭 이름을 밀지 않으므로 이름이 접히지 않는다.
+      숫자가 커져도(1,200 같은 것) 이름 위로 넘칠 뿐 줄을 바꾸지 않는다.
+    */
     span[badge] {
-      padding: 1px 7px;
-      font-size: 0.72rem;
+      position: absolute;
+      /* 이름 위에 겹치되 위로 붙지 않게 — 탭 가운데 글자와 눈높이를 조금 맞춘다 */
+      top: 5px;
+      right: 2px;
+      padding: 0 5px;
+      font-size: 0.62rem;
       font-weight: 700;
+      line-height: 1.5;
       color: var(--md-sys-color-on-primary-container);
       background-color: var(--md-sys-color-primary-container);
       border-radius: 999em;
+      pointer-events: none;
     }
 
     figure-inspector,
@@ -117,6 +139,11 @@ export class FigureSide extends localize(i18next)(LitElement) {
     곳이라 변환된 FigureSource 를 받는다. 변환은 모델러 페이지가 한 번만 해서 내려보낸다.
   */
   @property({ type: String }) figureName = ''
+  /** 이력 탭이 발행하고 되돌리는 데 필요한 것들. 정본은 저작면이 든다. */
+  @property({ type: String }) figureId?: string
+  @property({ type: String }) figureState?: 'draft' | 'released'
+  @property({ type: Number }) figureVersion = 0
+  @property({ type: Boolean }) dirty = false
 
   @property({ type: Object }) board?: BoardModel
   @property({ type: Array }) parts: PartModel[] = []
@@ -132,9 +159,11 @@ export class FigureSide extends localize(i18next)(LitElement) {
   render() {
     return html`
       <div tabs>
-        ${this.renderTab('properties', i18next.t('label.properties'))}
-        ${this.renderTab('verdict', i18next.t('label.maturity'), this.instances)}
-        ${this.renderTab('view', i18next.t('label.view'))}
+        ${this.renderTab('properties', i18next.t('figure.label.properties'))}
+        ${this.renderTab('capability', i18next.t('figure.label.tab-capability'))}
+        ${this.renderTab('verdict', i18next.t('figure.label.maturity'), this.instances)}
+        ${this.renderTab('view', i18next.t('figure.label.tab-environment'))}
+        ${this.renderTab('history', i18next.t('figure.label.history'))}
       </div>
 
       <figure-inspector
@@ -145,6 +174,12 @@ export class FigureSide extends localize(i18next)(LitElement) {
         .selected=${this.selected}
       ></figure-inspector>
 
+      <figure-capabilities
+        ?off=${this.tab !== 'capability'}
+        .board=${this.board}
+        .parts=${this.parts}
+      ></figure-capabilities>
+
       <figure-report
         ?off=${this.tab !== 'verdict'}
         .source=${this.source}
@@ -152,6 +187,17 @@ export class FigureSide extends localize(i18next)(LitElement) {
       ></figure-report>
 
       <figure-settings ?off=${this.tab !== 'view'} .view=${this.view}></figure-settings>
+
+      <!--
+        이력은 감춰도 DOM 에 남긴다 — 다른 탭들과 같은 규칙이다. 떼었다 붙이면 판본을 다시 부른다.
+      -->
+      <figure-history-panel
+        ?off=${this.tab !== 'history'}
+        .figureId=${this.figureId}
+        .figureState=${this.figureState}
+        .figureVersion=${this.figureVersion}
+        .dirty=${this.dirty}
+      ></figure-history-panel>
     `
   }