@things-factory/figure-ui 10.1.3

package/client/modeller/figure-report.ts

@@ -0,0 +1,895 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing, svg } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+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 type { FigureCost, FigureScore, FigureSource } from '@hatiolab/figure-model'
+
+import { capacityOf } from './scene-budget.js'
+import { maturityOf } from './maturity.js'
+import type { MaturityAxis } from './maturity.js'
+import type { FigureCapacity } from './scene-budget.js'
+
+/**
+ * 판단 패널. 모델러 화면에 **늘 떠 있다.**
+ *
+ * 저장을 선택해야 아는 것이 아니다. 부품을 하나 놓을 때마다 무게와 점수가 움직이고,
+ * 그것이 보여야 저작자가 고칠 수 있다. 「무엇 때문에 점수가 낮은가」를 말해 주지
+ * 않으면 점수는 잔소리일 뿐이다.
+ *
+ * ## 셈을 여기서 하지 않는다
+ *
+ * 검증·원가·점수는 전부 `@hatiolab/figure-model` 이 한다. 화면은 **부르고 보여 줄
+ * 뿐**이다. 한도나 등급 경계를 화면이 다시 정하면 서버가 거절할 것을 화면이
+ * 통과시키게 된다.
+ */
+@customElement('figure-report')
+export class FigureReport extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        background-color: var(--md-sys-color-surface-container-lowest);
+        border-left: 1px solid var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-surface);
+        font: var(--label-font, inherit);
+        /*
+          이 패널의 본문 크기를 여기서 한 번 정한다.
+
+          전에는 규칙마다 따로 적었다. 그러면 빠뜨린 규칙이 본문 기본 크기(1rem)를
+          물려받아 그 줄만 제목처럼 커진다. 오류가 아니라서 화면을 띄워 봐야 안다.
+          이 파일에서만 두 번 났다.
+
+          form 요소(input · select · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.
+          그것 말고는 여기 값을 따른다.
+        */
+        font-size: 0.76rem;
+      }
+
+      section {
+        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+      section > h3 {
+        margin: 0 0 6px 0;
+        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, var(--md-sys-color-on-surface));
+      }
+
+      /* ── 몇 개까지 편한가 ───────────────────────────────────────────
+         로우폴리의 값은 「얼마나 많이 편하게 놓을 수 있나」다. 그 답이 머리에 온다.
+         등급은 형상 자체가 한도 안인지를 말할 뿐이라 옆의 작은 badge 로 둔다. */
+      div[verdict] {
+        display: flex;
+        align-items: baseline;
+        gap: 6px;
+      }
+      span[capacity] {
+        font-size: 2.1rem;
+        font-weight: 800;
+        line-height: 1;
+        letter-spacing: -0.01em;
+        color: var(--md-sys-color-primary);
+      }
+      span[unit] {
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: var(--md-sys-color-primary);
+      }
+      /*
+        등급 badge.
+
+        전에는 "C 0" 만 있었다. 글자 하나와 숫자 하나인데 어디에도 뜻이 없어서, 크게 뜬
+        개수 옆에 빨간 badge 가 붙은 것으로만 읽혔다. 0 을 100점 만점의 0 점으로 읽는 것이
+        자연스럽다. 실제 뜻은 "선언한 한도에 남은 여유가 0" 이다.
+
+        그래서 무엇을 측정하는지를 badge 안에 적고, 눈금은 바로 아래 줄에 늘 보이게 둔다.
+      */
+      span[grade] {
+        display: flex;
+        align-items: baseline;
+        gap: 5px;
+        margin-left: auto;
+        padding: 3px 10px;
+        font-size: 0.76rem;
+        font-weight: 700;
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+        border-radius: 999em;
+      }
+      span[grade] small {
+        font-size: 0.68rem;
+        font-weight: 500;
+      }
+      /*
+        C 는 한도를 지킨 것이다. 빨강은 넘긴 것(D)에만 쓴다. 지킨 것에 빨강을 쓰면
+        고칠 것이 없는데도 고쳐야 할 것처럼 보인다.
+      */
+      span[grade][tight] {
+        color: var(--md-sys-color-on-tertiary-container, #3d2f00);
+        background-color: var(--md-sys-color-tertiary-container, #ffdf9a);
+      }
+      /*
+        Pair the container with its on-container.
+
+        This used to fill with --md-sys-color-error and write with
+        --md-sys-color-on-error-container. Once the palette made containers
+        neutral and moved the meaning into the text colour, those two became the
+        same red and the badge went blank -- a filled pill with no readable text.
+      */
+      span[grade][over] {
+        color: var(--md-sys-color-on-error-container);
+        background-color: var(--md-sys-color-error-container);
+      }
+
+      /* 등급 눈금. 접어 두지 않는다 — 한 번 보고 마는 값이 아니라 볼 때마다 필요하다 */
+      p[scale] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px 10px;
+        margin: 6px 0 0 0;
+        font-size: 0.7rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      p[scale] b {
+        font-weight: 700;
+      }
+      p[scale] span[now] b {
+        color: var(--md-sys-color-primary);
+      }
+      p[scale] span[now] {
+        color: var(--md-sys-color-on-surface);
+      }
+      /* 이 큰 숫자가 어느 축인지 먼저 말한다 — 성숙도의 한 축이지 전부가 아니다 */
+      p[lead] {
+        margin: 0 0 4px 0;
+        font-size: 0.74rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+
+      /* 근거를 함께 낸다 — 숫자만 크게 내걸면 재 본 값처럼 읽힌다 */
+      p[basis] {
+        margin: 6px 0 0 0;
+        font-size: 0.72rem;
+        line-height: 1.55;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      p[basis] em {
+        font-style: normal;
+        color: var(--md-sys-color-tertiary);
+      }
+      span[score] {
+        font-size: 0.8rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+
+      /* 무엇 때문에 이 등급인가 — 한도에 가장 가까운 항목 */
+      p[because] {
+        margin: 8px 0 0 0;
+        /* 본문 크기를 물려받으면 이 줄만 제목처럼 커진다 — 화면을 띄워 보고 알았다 */
+        font-size: 0.78rem;
+        line-height: 1.6;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      p[because] strong {
+        color: var(--md-sys-color-on-surface);
+      }
+
+      /* ── 성숙도 radar ────────────────────────────────────────────────
+         여섯 축을 한 그림으로. 목록만 두면 「어느 쪽이 모자란가」가 안 보인다.
+         못 잰 축은 점을 찍지 않고 살만 흐리게 남긴다 — 0 으로 찍으면 「나쁘다」가 된다. */
+      div[radar] {
+        display: flex;
+        justify-content: center;
+        padding: 2px 0 6px 0;
+        color: var(--md-sys-color-primary);
+      }
+      div[radar] svg {
+        width: 100%;
+        max-width: 240px;
+        height: auto;
+      }
+      div[radar] polygon[web] {
+        fill: none;
+        stroke: var(--md-sys-color-outline-variant);
+        stroke-width: 0.6;
+      }
+      div[radar] line[spoke] {
+        stroke: var(--md-sys-color-outline-variant);
+        stroke-width: 0.6;
+      }
+      div[radar] polygon[shape] {
+        fill: color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);
+        stroke: var(--md-sys-color-primary);
+        stroke-width: 1.4;
+        stroke-linejoin: round;
+      }
+      div[radar] circle[dot] {
+        fill: var(--md-sys-color-primary);
+      }
+      div[radar] text {
+        font-size: 5.2px;
+        fill: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+
+      /* 그림에 자리를 주지 않은 축을 글로 밝힌다 */
+      p[unmeasured] {
+        margin: 0 0 8px 0;
+        font-size: 0.7rem;
+        line-height: 1.5;
+        color: var(--md-sys-color-tertiary);
+      }
+
+      /* ── 성숙도 축 ──────────────────────────────────────────────────
+         한 숫자로 합치지 않는다. 합치면 「무엇을 고쳐야 하나」가 사라진다. */
+      ul[axes] {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+      }
+      ul[axes] li {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 2px 8px;
+        font-size: 0.75rem;
+      }
+      ul[axes] li[blocked] {
+        opacity: 0.7;
+      }
+      ul[axes] em {
+        grid-column: 1 / -1;
+        font-style: normal;
+        font-size: 0.68rem;
+        line-height: 1.5;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      /* 못 잰 축은 0 으로 두지 않는다 — 0 은 「나쁘다」는 뜻이 되어 버린다 */
+      ul[axes] li[blocked] em {
+        color: var(--md-sys-color-tertiary);
+      }
+      span[reading] {
+        font-family: var(--mono-font, monospace);
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+
+      /* ── 예산 막대 ────────────────────────────────────────────────── */
+      ul[budgets] {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      ul[budgets] li {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 2px 8px;
+        font-size: 0.75rem;
+      }
+      div[bar] {
+        grid-column: 1 / -1;
+        height: 4px;
+        background-color: var(--md-sys-color-surface-container-highest);
+        border-radius: 2px;
+        overflow: hidden;
+      }
+      div[bar] > i {
+        display: block;
+        height: 100%;
+        background-color: var(--md-sys-color-primary);
+      }
+      div[bar] > i[tight] {
+        background-color: var(--md-sys-color-error);
+      }
+
+      /* ── 무게 ─────────────────────────────────────────────────────── */
+      dl[metrics] {
+        margin: 0;
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 4px 8px;
+        font-size: 0.78rem;
+      }
+      dl[metrics] dt {
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      dl[metrics] dd {
+        margin: 0;
+        text-align: right;
+        font-family: var(--mono-font, monospace);
+      }
+
+      /* ── 추이 ──────────────────────────────────────────────────────────
+         그림은 자연 크기가 680px 다. 300px 칸에 넣으면 글자가 4px 이 되어 아무것도
+         읽을 수 없다 — 사이드바에는 숫자를 두고, 그림은 선택해서 크게 본다. */
+      button[expand] {
+        margin-top: 6px;
+        padding: 4px 10px;
+        font: var(--label-font, inherit);
+        font-size: 0.74rem;
+        color: var(--md-sys-color-on-surface);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      button[expand]:hover {
+        background-color: var(--md-sys-color-surface-container);
+      }
+
+      div[sheet] {
+        position: fixed;
+        inset: 0;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--spacing-large, 12px);
+        background-color: rgba(0, 0, 0, 0.32);
+      }
+      div[sheet] > figure {
+        max-width: 100%;
+        max-height: 100%;
+        margin: 0;
+        padding: var(--spacing-large, 12px);
+        overflow: auto;
+        color: var(--md-sys-color-primary);
+        background-color: var(--md-sys-color-surface-container-lowest);
+        /* 담는 면이 팝업이면 안쪽 모서리는 알약이다 — 시트 자체는 페이지 값을 쓴다 */
+        border-radius: 6px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
+      }
+      div[sheet] svg {
+        display: block;
+        /* 자연 크기보다 작게 줄이지 않는다 — 좁으면 넘겨 보게 둔다 */
+        min-width: 680px;
+      }
+      div[sheet] figcaption {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+      div[sheet] button[close] {
+        padding: 5px 14px;
+        font: var(--label-font, inherit);
+        color: var(--md-sys-color-on-surface);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 999em;
+        cursor: pointer;
+      }
+
+      /* ── 알림 ─────────────────────────────────────────────────────── */
+      ul[findings] {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      ul[findings] li {
+        display: flex;
+        gap: 6px;
+        line-height: 1.5;
+      }
+      ul[findings] md-icon {
+        --md-icon-size: 16px;
+        flex: none;
+        color: var(--md-sys-color-error);
+      }
+      ul[findings] li[violation] md-icon {
+        color: var(--md-sys-color-tertiary);
+      }
+      /* 어긴 자리. 문구에 붙어 흐르면 문장의 일부로 읽힌다 — badge 로 보이게 뗀다 */
+      code[at] {
+        padding: 1px 5px;
+        font-family: var(--mono-font, monospace);
+        font-size: 0.68rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+        background-color: var(--md-sys-color-surface-container);
+        border-radius: 4px;
+        white-space: nowrap;
+      }
+
+      /*
+        발견이 없을 때의 문구.
+
+        크기를 안 적어 두었더니 본문 기본 크기를 물려받아 이 줄만 제목처럼 커졌다. 이
+        패널의 글자는 전부 0.7rem 대인데 여기만 1rem 이라 아래쪽이 무너져 보였다.
+
+        찾은 것이 있을 때의 목록(ul[findings] li)과 같은 크기로 맞춘다. 있을 때와 없을 때
+        절의 생김새가 달라질 이유가 없다.
+
+        이 파일에서 같은 실수를 두 번째로 한다. p[because] 에도 같은 주석이 있다.
+      */
+      p[quiet] {
+        margin: 0;
+        font-size: 0.76rem;
+        line-height: 1.6;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+  `
+  ]
+
+  /** 저작 중인 원본 데이터. 바뀌면 다시 측정한다. */
+  @property({ type: Object }) source?: FigureSource
+
+  @state() private cost?: FigureCost
+  @state() private score?: FigureScore
+  @state() private curve = ''
+  /** 1만 개를 놓았을 때. 저작자가 실제로 궁금한 숫자다. */
+  @state() private many?: FigureCost
+  /** 몇 개까지 놓을 수 있나. 이 패널의 머리다. */
+  @state() private capacity?: FigureCapacity
+  /** 추이 그림을 제 크기로 펼쳤나. */
+  @state() private expanded = false
+  @state() private errors: { code: string; message: string; at?: string }[] = []
+  @state() private violations: { code: string; message: string }[] = []
+
+  willUpdate(changed: Map<string, unknown>) {
+    if (changed.has('source')) {
+      this.measure()
+    }
+  }
+
+  render() {
+    if (!this.source) {
+      return html`
+        <section>
+          <p quiet>${i18next.t('text.report-appears-when-you-add-a-part')}</p>
+        </section>
+      `
+    }
+
+    // 형식을 어긴 상태에서는 셈이 뜻을 갖지 못한다 — 무엇이 잘못됐는지만 보여 준다.
+    if (this.errors.length > 0) {
+      return html`${this.renderFindings()}`
+    }
+
+    return html`
+      ${this.renderVerdict()} ${this.renderAxes()} ${this.renderBudgets()} ${this.renderMetrics()} ${this.renderCurve()}
+      ${this.renderFindings()} ${this.renderSheet()}
+    `
+  }
+
+  /**
+   * 머리 — 몇 개까지 편한가.
+   *
+   * 로우폴리의 값은 「얼마나 많이 편하게 놓을 수 있나」에 있다. 등급 B 는 그 물음에
+   * 직접 답하지 않는다 — 형상이 선언된 한도 안인지를 말할 뿐이다. 그래서 개수를
+   * 머리에 올리고 등급은 옆의 badge 로 내린다.
+   *
+   * 근거를 함께 낸다. 이 개수의 분모는 실측이 아니라 설계 문서의 목표치이고(미결
+   * D-20), 그 사실이 화면에 없으면 재 본 값처럼 읽힌다.
+   */
+  private renderVerdict() {
+    const score = this.score
+    const capacity = this.capacity
+    if (!score || !capacity) return nothing
+
+    return html`
+      <section>
+        <h3>${i18next.t('label.maturity')}</h3>
+        <p lead>${i18next.t('label.axis-scale')} — ${i18next.t('text.how-many-fit')}</p>
+        <div verdict>
+          <span capacity>${capacity.instances.toLocaleString()}</span>
+          <span unit>${i18next.t('text.instances-unit')}</span>
+          <span
+            grade
+            ?tight=${score.grade === 'C'}
+            ?over=${score.grade === 'D'}
+            title=${i18next.t('text.grade-explained')}
+          >
+            ${score.grade}
+            <small>${i18next.t('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>
+          — ${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, {
+            per: capacity.per.toLocaleString(),
+            budget: capacity.budget.toLocaleString()
+          })}
+          <em>${i18next.t('text.budget-not-measured-yet')}</em>
+        </p>
+      </section>
+    `
+  }
+
+  /**
+   * 등급 눈금.
+   *
+   * A·B·C·D 가 무엇을 뜻하는지 화면 어디에도 없었다. badge 만 보고는 좋은지 나쁜지도,
+   * 무엇을 고쳐야 오르는지도 알 수 없다. 눈금을 늘 곁에 두고 지금 어디에 있는지를
+   * 표시한다.
+   *
+   * 접어 두지 않는다. 한 번 배우고 마는 값이 아니라 볼 때마다 대조하는 값이다.
+   */
+  private renderGradeScale(now: string) {
+    const bounds: [string, string][] = [
+      ['A', '≤ 50%'],
+      ['B', '≤ 75%'],
+      ['C', '≤ 100%'],
+      ['D', '> 100%']
+    ]
+
+    return html`
+      <p scale>
+        <span>${i18next.t('text.grade-scale-lead')}</span>
+        ${bounds.map(
+          ([grade, bound]) => html`<span ?now=${grade === now}><b>${grade}</b> ${bound}</span>`
+        )}
+      </p>
+    `
+  }
+
+  /**
+   * 성숙도 — 여러 축으로 본다.
+   *
+   * 「몇 개까지 편한가」 하나로는 좋은 형상과 나쁜 형상이 구분되지 않는다. 부품 하나짜리
+   * 상자도 그 축에서는 만점이다.
+   *
+   * **못 재는 축을 0 으로 두지 않는다.** 0 은 「나쁘다」는 뜻이 되는데, 사실은 아직
+   * 측정할 방법이 없는 것이다. 측정하지 못한다고 알리고 이유를 붙인다. 지어낸 점수보다 그것이
+   * 이 리포트를 믿을 만하게 만든다.
+   */
+  private renderAxes() {
+    if (!this.cost || !this.score || !this.source) return nothing
+
+    /*
+      규모는 목록에서 뺀다 — 머리로 올라갔다. 같은 숫자를 두 번 내면 읽는 사람이
+      둘이 다른 것인 줄 안다.
+    */
+    const axes = maturityOf(this.source, this.cost, this.score).filter(axis => axis.key !== 'scale')
+
+    // radar 에는 여섯을 다 그린다. 규모가 어디쯤인지 함께 보여야 뜻이 있다
+    const all = maturityOf(this.source, this.cost, this.score)
+
+    return html`
+      <section>
+        <h3>${i18next.t('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>
+          ${axes.map(axis => this.renderAxis(axis))}
+        </ul>
+      </section>
+    `
+  }
+
+  /**
+   * 성숙도 radar. **측정한 축만 그린다.**
+   *
+   * 측정하지 못하는 축도 spoke 를 그려 두고 도형만 건너뛰던 때가 있었다. 그러면 그 방향을 가로지르는
+   * 직선이 생겨서 도형이 그쪽으로 움푹 들어간 것처럼 보인다. 0 으로 찍지 않으려고 한
+   * 일인데 결과는 0 으로 찍은 것과 똑같이 읽혔다. 점선 살과 물음표로는 그 인상이
+   * 지워지지 않았다.
+   *
+   * 그래서 아예 빼고, 못 재는 축은 그림 아래에 글로 적는다. 잴 수 없는 것은 그림에
+   * 자리를 주지 않는 편이 정직하다.
+   */
+  private renderRadar(axes: MaturityAxis[]) {
+    // 그림 안에서는 **짧은 이름**을 쓴다. 긴 이름을 그대로 쓰면 왼쪽이 잘린다 —
+    // 화면을 띄워 보고 알았다.
+    const cx = 60
+    const cy = 46
+    const r = 28
+
+    const at = (index: number, ratio: number) => {
+      const angle = -Math.PI / 2 + (index * 2 * Math.PI) / axes.length
+      return [cx + r * ratio * Math.cos(angle), cy + r * ratio * Math.sin(angle)]
+    }
+
+    const points = axes
+      .map((axis, index) => at(index, Math.max(0.04, Math.min(1, axis.ratio ?? 0))).map(n => n.toFixed(1)).join(','))
+      .join(' ')
+
+    return svg`
+      <svg viewBox="0 0 120 96" aria-hidden="true">
+        ${[0.33, 0.66, 1].map(
+          ring => svg`<polygon web points=${axes.map((_, i) => at(i, ring).map(n => n.toFixed(1)).join(',')).join(' ')}></polygon>`
+        )}
+        ${axes.map((_, index) => {
+          const [x, y] = at(index, 1)
+          return svg`<line spoke x1=${cx} y1=${cy} x2=${x.toFixed(1)} y2=${y.toFixed(1)}></line>`
+        })}
+        <polygon shape points=${points}></polygon>
+        ${axes.map((axis, index) => {
+          const [x, y] = at(index, Math.max(0.04, Math.min(1, axis.ratio ?? 0)))
+          return svg`<circle dot cx=${x.toFixed(1)} cy=${y.toFixed(1)} r="1.4"></circle>`
+        })}
+        ${axes.map((axis, index) => {
+          const [x, y] = at(index, 1.28)
+          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')}
+            </text>
+          `
+        })}
+      </svg>
+    `
+  }
+
+  /**
+   * 그림에 없는 축을 글로 밝힌다.
+   *
+   * 빼기만 하면 축이 여섯인지 다섯인지 알 수 없고, 없는 것을 없다고 말하지 않은 셈이
+   * 된다. 무엇을 아직 못 재는지 한 줄로 적는다. 왜 못 재는지는 아래 목록의 그 항목에
+   * 그대로 있다.
+   */
+  private renderUnmeasured(axes: MaturityAxis[]) {
+    if (axes.length === 0) return nothing
+
+    return html`
+      <p unmeasured>
+        ${i18next.t('text.axes-not-measurable-yet', {
+          axes: axes.map(axis => i18next.t('label.axis-' + axis.key)).join(' · ')
+        })}
+      </p>
+    `
+  }
+
+  private renderAxis(axis: MaturityAxis) {
+    const name = i18next.t('label.axis-' + axis.key)
+
+    if (axis.blocked) {
+      return html`
+        <li blocked>
+          <span>${name}</span>
+          <span reading>${i18next.t('text.not-measurable-yet')}</span>
+          <em>${i18next.t(axis.blocked)}</em>
+        </li>
+      `
+    }
+
+    const ratio = Math.max(0, Math.min(1, axis.ratio ?? 0))
+    return html`
+      <li>
+        <span>${name}</span>
+        <span reading>${axis.readingKey ? i18next.t(axis.readingKey) : (axis.reading ?? '')}</span>
+        <div bar><i style="width:${Math.round(ratio * 100)}%"></i></div>
+        ${axis.because ? html`<em>${i18next.t(axis.because)}</em>` : ''}
+      </li>
+    `
+  }
+
+  /**
+   * 예산 막대.
+   *
+   * 숫자만 늘어놓으면 어느 것이 꽉 찼는지 눈에 안 들어온다. 한도에 가장 가까운 하나를 색으로
+   * 구분한다. 그것이 점수를 정한 항목이다.
+   *
+   * ## `use.label` 을 쓰지 않는 이유
+   *
+   * `FigureBudgetUse` 에 `label` 과 `why` 가 있고 「저작자에게 그대로 보여 준다」고
+   * 적혀 있다. 그런데 그 문구가 **한국어로 구워져** 있다. 이 제품은 5언어를 쓰므로
+   * 그것을 그대로 실으면 다른 언어 사용자에게 한국어가 나온다.
+   *
+   * `budgets` 는 **배열**이다. `Object.entries` 로 돌면 키가 인덱스(0·1·2…)가 되어
+   * `label.budget-0` 같은 없는 키를 찾는다 — 화면을 띄워 보고서야 드러났다.
+   * 배열을 그대로 돌고 `use.key` 를 쓴다.
+   *
+   * 그래서 **안정된 `key`** 로 이 화면의 i18n 을 찾는다. `key` 는 열거형이라 형식의
+   * 일부이고, 문구는 화면의 몫이다. figure-model 이 문구를 언어 중립으로 바꾸면
+   * 그때 `label` 을 쓸 수 있다.
+   */
+  private renderBudgets() {
+    const score = this.score
+    if (!score) return nothing
+
+    return html`
+      <section>
+        <h3>${i18next.t('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>${use.used} / ${use.limit}</span>
+                <div bar><i ?tight=${tight} style="width:${Math.round(ratio * 100)}%"></i></div>
+              </li>
+            `
+          })}
+        </ul>
+      </section>
+    `
+  }
+
+  private renderMetrics() {
+    const cost = this.cost
+    if (!cost) return nothing
+
+    return html`
+      <section>
+        <h3>${i18next.t('label.weight')}</h3>
+        <dl metrics>
+          <dt>${i18next.t('label.triangles')}</dt>
+          <dd>${cost.triangles.toLocaleString()}</dd>
+
+          <dt>${i18next.t('label.triangles-at-100')}</dt>
+          <dd>${cost.at.triangles.toLocaleString()}</dd>
+
+          <dt>${i18next.t('label.draw-calls-at-100')}</dt>
+          <dd>${cost.at.drawCalls.toLocaleString()}</dd>
+
+          <dt>${i18next.t('label.distinct-shapes')}</dt>
+          <dd>${cost.distinctShapes}</dd>
+
+          <dt>${i18next.t('label.distinct-materials')}</dt>
+          <dd>${cost.distinctMaterials}</dd>
+        </dl>
+      </section>
+    `
+  }
+
+  /**
+   * 재활용 추이 — 「많이 놓으면 어떻게 되나」에 답한다.
+   *
+   * ## 그림을 사이드바에 밀어 넣지 않는다
+   *
+   * `costCurveSvg` 의 자연 크기는 680x380 이고 글자가 11px 다. 300px 칸에서
+   * width:100% 로 줄이면 글자가 4px 이 되어 **아무것도 읽을 수 없다** — 화면을 띄워
+   * 보고서야 드러났다. 읽을 수 없는 그림은 없는 것과 같으므로, 사이드바에는 저작자가
+   * 실제로 궁금한 숫자(1만 개일 때)를 두고 그림은 선택해서 제 크기로 본다.
+   */
+  private renderCurve() {
+    const many = this.many
+    if (!many && !this.curve) return nothing
+
+    return html`
+      <section>
+        <h3>${i18next.t('label.reuse-trend')}</h3>
+        ${many
+          ? html`
+              <dl metrics>
+                <dt>${i18next.t('label.triangles-at-10k')}</dt>
+                <dd>${many.at.triangles.toLocaleString()}</dd>
+
+                <dt>${i18next.t('label.draw-calls-at-10k')}</dt>
+                <dd>${many.at.drawCalls.toLocaleString()}</dd>
+              </dl>
+            `
+          : nothing}
+        ${this.curve
+          ? html`
+              <button expand @click=${() => (this.expanded = true)}>
+                ${i18next.t('button.see-the-trend-chart')}
+              </button>
+            `
+          : nothing}
+      </section>
+    `
+  }
+
+  /** 그림을 제 크기로 보여 준다. 좁으면 줄이지 않고 넘겨 보게 둔다. */
+  private renderSheet() {
+    if (!this.expanded || !this.curve) return nothing
+
+    return html`
+      <div sheet @click=${() => (this.expanded = false)}>
+        <figure @click=${(e: Event) => e.stopPropagation()}>
+          ${unsafeSVG(this.curve)}
+          <figcaption>
+            <button close @click=${() => (this.expanded = false)}>${i18next.t('button.close')}</button>
+          </figcaption>
+        </figure>
+      </div>
+    `
+  }
+
+  /**
+   * 발견.
+   *
+   * 오류(막는 것)와 위반(알리는 것)을 **가려서** 보여 준다. 섞으면 저작자가 무엇을
+   * 반드시 고쳐야 하는지 모른다. 아무것도 없으면 「없다」고 말한다 — 빈 자리로 두면
+   * 검사가 돌았는지 알 수 없다.
+   */
+  private renderFindings() {
+    if (this.errors.length === 0 && this.violations.length === 0) {
+      return html`
+        <section>
+          <h3>${i18next.t('label.findings')}</h3>
+          <p quiet>${i18next.t('text.no-findings')}</p>
+        </section>
+      `
+    }
+
+    return html`
+      <section>
+        <h3>${i18next.t('label.findings')}</h3>
+        <ul findings>
+          ${this.errors.map(
+            e => html`
+              <li>
+                <md-icon>error</md-icon>
+                <span>${e.message} ${e.at ? html`<code at>${e.at}</code>` : ''}</span>
+              </li>
+            `
+          )}
+          ${this.violations.map(
+            v => html`
+              <li violation>
+                <md-icon>info</md-icon>
+                <span>${v.message}</span>
+              </li>
+            `
+          )}
+        </ul>
+      </section>
+    `
+  }
+
+  /** 원본 데이터를 측정해 결과를 상태에 담는다. 셈은 전부 figure-model 이 한다. */
+  private measure() {
+    const source = this.source
+    if (!source) {
+      this.cost = undefined
+      this.score = undefined
+      this.many = undefined
+      this.capacity = undefined
+      this.curve = ''
+      this.errors = []
+      this.violations = []
+      return
+    }
+
+    const result = validate(source)
+    this.errors = result.errors.map(e => ({ code: e.code, message: e.message, at: e.path }))
+    this.violations = result.violations.map(v => ({ code: v.code, message: v.message }))
+
+    if (this.errors.length > 0) {
+      // 형식을 어겼으면 컴파일이 던진다. 셈을 비우고 오류만 보여 준다.
+      this.cost = undefined
+      this.score = undefined
+      this.many = undefined
+      this.capacity = undefined
+      this.curve = ''
+      this.dispatchEvent(
+        new CustomEvent('verdict-changed', { detail: {}, bubbles: true, composed: true })
+      )
+      return
+    }
+
+    const blueprint = compile(source)
+    this.cost = costOf(blueprint, 100)
+    // 1만 개는 figure-model 에 다시 묻는다 — 화면이 곱셈으로 짐작하지 않는다.
+    this.many = costOf(blueprint, 10000)
+    this.score = scoreOf(blueprint)
+    this.capacity = capacityOf(this.cost)
+
+    // 개수를 밖으로 알린다. 탭 이름표가 이 값을 보여 주는데, 거기서 다시 셈하면
+    // 같은 형상이 두 자리에서 다르게 나올 수 있다.
+    this.dispatchEvent(
+      new CustomEvent('verdict-changed', {
+        detail: { instances: this.capacity?.instances, grade: this.score?.grade },
+        bubbles: true,
+        composed: true
+      })
+    )
+    this.curve = costCurveSvg(blueprint)
+  }
+}