@things-factory/figure-ui 10.1.45 → 10.1.47

package/dist-client/modeller/figure-v3-verdict.js

@@ -1,34 +1,52 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, LitElement, nothing, svg } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { parseV3Asset, v3CostOf } from '@hatiolab/figure-model';
+import { ScrollbarStyles } from '@operato/styles';
+import { LIMITS, parseV3Asset, V3_PER_INSTANCE, v3CostOf } from '@hatiolab/figure-model';
 import { inspectFigureDraft } from '../graphql/index.js';
 import { gateFindingStyles, renderGateFinding } from './gate-findings.js';
-import { capacityFrom, MEASURED } from './scene-budget.js';
+import { MEASURED } from './scene-budget.js';
+import { SidePanelStyles } from './side-panel-styles.js';
+import { budgetOf, CURVE_SIZE, curveLayout, GRADE_SCALE, shortNumber, v3ReportOf } from './v3-maturity.js';
 /** How long an edit settles before the server is asked again. One question per pause, not one per keystroke. */
 export const VERDICT_SETTLE_MS = 400;
 /**
- * 판정 — the V3 modeller's verdict while editing (parity row ①).
+ * 성숙도 — the V3 modeller's verdict while editing (parity row ①), laid out as V2's report (`figure-report.ts`).
  *
- * The V2 modeller shows, as the author edits, how many of the figure fit on one screen and what would stop it
- * being published. The V3 page showed neither: the author learned what blocked a release only after saving, in the
- * release panel. This tab answers both from the source being edited.
+ * V2's report showed, as the author edits: how many fit on one screen with the grade beside it and the budget that
+ * decided the grade, the grade scale, six maturity axes as a radar and a list, the budget bars, the drawing cost,
+ * the reuse trend, and the findings. The first V3 tab kept only the count and the findings (user, 2026-09-24:
+ * 「분석부분도 많이 부족하고, 왜 이렇게 너프되었는지」). This is V2's report again, over V3 numbers.
  *
- * The count is computed here, from `v3CostOf` and the same `capacityFrom` the catalogue cards use, so the tab and
- * the card cannot disagree. The findings are not: they come from the server's release door (`inspectFigureDraft`),
- * the same door and the same sentences as the release panel. A second judgement on the screen would say something
- * different the first time either changed.
+ * ## What is computed where
  *
- * No grade. V2's grade measures V2 reuse; nothing measures it for V3, so the tab shows no letter rather than one
- * nothing computed.
+ * The numbers come from `v3-maturity.ts`, which reads the evaluated asset the way the V3 renderer draws it — the
+ * screen calls and shows, it does not count. The count uses the same `capacityFrom` the catalogue cards use, so the
+ * tab and the card cannot disagree.
+ *
+ * The findings do not come from here: they come from the server's release door (`inspectFigureDraft`), the same
+ * door and the same sentences as the release panel. A second judgement on the screen would say something different
+ * the first time either changed. V2's report drew its findings from `validate`; V3's release judgement is the
+ * server's, so that section is the server's answer.
+ *
+ * ## The grade
+ *
+ * figure-model's `v3ScoreOf`, which the catalogue uses too: headroom against placing `LIMITS.screenInstances` of the
+ * figure on one screen (chief architect, 2026-09-24) -- the screen's measured groups and its triangle target shared
+ * per instance -- and V2's rule limits for independently moved parts and transparent materials, decided by the
+ * tightest, on V2's scale. The two V2 budgets V3 has no field for are left out and the tab says so.
  */
+/** A per-instance share of the screen is not a whole number; what an instance may draw is the whole part of it. */
+const limitOf = (use) => Math.floor(use.limit).toLocaleString();
 let FigureV3Verdict = class FigureV3Verdict extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
         /** Bodies in the asset, drawn or hidden. With none there is nothing to fit the space to, so the button is not offered. */
         this.bodies = 0;
+        /** Whether the trend chart is open at its own size. */
+        this.expanded = false;
         this.failure = '';
         this.asking = false;
         /** Answers can come back out of order; only the newest question's answer is shown. */
@@ -38,34 +56,34 @@ let FigureV3Verdict = class FigureV3Verdict extends localize(i18next)(LitElement
         };
     }
     static { this.styles = [
+        ScrollbarStyles,
+        SidePanelStyles,
         gateFindingStyles,
         css `
       :host {
         display: flex;
         flex-direction: column;
-        gap: 14px;
-        padding: 12px;
-        overflow: auto;
-        font-size: 0.76rem;
-        color: var(--md-sys-color-on-surface);
+        overflow-y: auto;
       }
-      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));
-      }
-      p {
-        margin: 4px 0 0;
+      section p {
+        margin: 0;
       }
+
+      /* ── How many fit ───────────────────────────────────────────────
+         The value of low poly is how many can stand on one screen, so that answer leads. The grade says whether
+         the shape keeps inside its declared limits, so it is the small badge beside it. */
       p[lead],
       p[basis],
       p[quiet] {
+        font-size: 0.74rem;
+        line-height: 1.55;
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
-      div[count] {
+      p[basis] em {
+        font-style: normal;
+        color: var(--md-sys-color-tertiary);
+      }
+      div[verdict] {
         display: flex;
         align-items: baseline;
         gap: 6px;
@@ -82,6 +100,268 @@ let FigureV3Verdict = class FigureV3Verdict extends localize(i18next)(LitElement
         font-weight: 600;
         color: var(--md-sys-color-primary);
       }
+      /* The badge says what it measures (headroom), so its number is not read as a score out of 100. */
+      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 {
+        display: inline;
+        margin: 0;
+        font-size: 0.68rem;
+        font-weight: 500;
+        color: inherit;
+      }
+      /* C keeps within the limit. Red is for over it (D) only; red on a kept limit asks for a fix nothing needs. */
+      span[grade][tight] {
+        color: var(--md-sys-color-on-tertiary-container);
+        background-color: var(--md-sys-color-tertiary-container);
+      }
+      span[grade][over] {
+        color: var(--md-sys-color-on-error-container);
+        background-color: var(--md-sys-color-error-container);
+      }
+      p[because] {
+        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);
+      }
+      /* The grade scale. Not folded away: it is compared against every time, not learned once. */
+      p[scale] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px 10px;
+        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] {
+        color: var(--md-sys-color-on-surface);
+      }
+      p[scale] span[now] b {
+        color: var(--md-sys-color-primary);
+      }
+
+      /* ── Maturity radar ─────────────────────────────────────────────
+         Only the measured axes are drawn; an unmeasured one drawn as a spoke reads as a dent, which is a zero. */
+      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] {
+        font-size: 0.7rem;
+        line-height: 1.5;
+        color: var(--md-sys-color-tertiary);
+      }
+
+      /* ── Axes and budgets ───────────────────────────────────────────
+         Not merged into one number: merged, 「what to fix」 disappears. */
+      ul[axes],
+      ul[budgets] {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+      }
+      ul[axes] li,
+      ul[budgets] 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));
+      }
+      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));
+      }
+      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);
+      }
+
+      /* ── Drawing cost ─────────────────────────────────────────────── */
+      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);
+      }
+
+      /* ── Trend ──────────────────────────────────────────────────────
+         The chart's natural size is 680px; in a 300px side its words are 4px. The side holds a button, the chart
+         opens at its own size. */
+      button[expand] {
+        justify-self: start;
+        padding: 4px 10px;
+        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: 12px;
+        background-color: color-mix(in srgb, var(--md-sys-color-scrim, black) 32%, transparent);
+      }
+      div[sheet] > figure {
+        max-width: 100%;
+        max-height: 100%;
+        margin: 0;
+        padding: 12px;
+        overflow: auto;
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface-container-lowest);
+        border-radius: 6px;
+        box-shadow: 0 8px 32px color-mix(in srgb, var(--md-sys-color-shadow, black) 28%, transparent);
+      }
+      div[sheet] svg {
+        display: block;
+        /* Not shrunk below its natural size — a narrow window scrolls instead. */
+        min-width: 680px;
+        font-family: inherit;
+        font-size: 11px;
+        fill: currentColor;
+      }
+      div[sheet] svg [grid] {
+        stroke: currentColor;
+        stroke-opacity: 0.12;
+      }
+      div[sheet] svg [muted] {
+        opacity: 0.55;
+      }
+      div[sheet] svg path[series] {
+        fill: none;
+        stroke-width: 2;
+        stroke-linejoin: round;
+      }
+      div[sheet] svg [series='triangles'] {
+        stroke: var(--md-sys-color-error);
+        fill: var(--md-sys-color-error);
+      }
+      div[sheet] svg [series='drawCalls'] {
+        stroke: var(--md-sys-color-tertiary);
+        fill: var(--md-sys-color-tertiary);
+      }
+      div[sheet] svg [series='geometries'] {
+        stroke: var(--md-sys-color-primary);
+        fill: var(--md-sys-color-primary);
+      }
+      div[sheet] svg [series='materials'] {
+        stroke: var(--md-sys-color-secondary);
+        fill: var(--md-sys-color-secondary);
+      }
+      div[sheet] svg path[series],
+      div[sheet] svg line[series] {
+        fill: none;
+      }
+      /* A legend value is written in its line's colour, not outlined in it. */
+      div[sheet] svg text[series] {
+        stroke: none;
+      }
+      div[sheet] figcaption {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+      div[sheet] button[close] {
+        padding: 5px 14px;
+        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;
+      }
+
+      /* ── Release verdict ───────────────────────────────────────────── */
       p[clear] {
         color: var(--md-sys-color-primary);
         font-weight: 600;
@@ -113,20 +393,23 @@ let FigureV3Verdict = class FigureV3Verdict extends localize(i18next)(LitElement
             this.schedule();
     }
     measure() {
-        let capacity;
+        let report;
         let bodies = 0;
         try {
-            const cost = this.source ? v3CostOf(parseV3Asset(this.source)) : undefined;
-            capacity = cost ? capacityFrom(cost.groups, cost.triangles) : undefined;
+            const asset = this.source ? parseV3Asset(this.source) : undefined;
+            const cost = asset ? v3CostOf(asset) : undefined;
             bodies = cost ? cost.groups + cost.hidden : 0;
+            report = asset ? v3ReportOf(asset) : undefined;
         }
         catch {
-            /* A source the format refuses has no count; the server's finding below says why. */
-            capacity = undefined;
+            /* A source the format refuses has no report; the server's finding below says why. */
+            report = undefined;
         }
-        this.capacity = capacity;
+        this.report = report;
         this.bodies = bodies;
-        this.dispatchEvent(new CustomEvent('capacity-changed', { detail: { instances: capacity?.instances } }));
+        if (!report)
+            this.expanded = false;
+        this.dispatchEvent(new CustomEvent('capacity-changed', { detail: { instances: report?.capacity.instances, budget: budgetOf(report) } }));
     }
     schedule() {
         clearTimeout(this.timer);
@@ -160,36 +443,269 @@ let FigureV3Verdict = class FigureV3Verdict extends localize(i18next)(LitElement
         }
     }
     render() {
-        return html `${this.renderCount()} ${this.renderGate()}`;
+        /*
+          With nothing drawn the report is guidance, not a verdict: the sections below have meaning only over parts,
+          and a number drawn from nothing reads as zero, which reads as bad. The release verdict stays — a new figure
+          is already refused for its undeclared space, and the way out is offered there.
+        */
+        const report = this.report;
+        if (!report) {
+            return html `
+        <section>
+          <h3>${i18next.t('figure.label.maturity')}</h3>
+          <p quiet>${i18next.t('figure.text.report-appears-when-you-add-a-part')}</p>
+        </section>
+        ${this.renderGate()}
+      `;
+        }
+        return html `
+      ${this.renderVerdict(report)} ${this.renderAxes(report)} ${this.renderBudgets(report)} ${this.renderMetrics(report)}
+      ${this.renderCurve()} ${this.renderGate()} ${this.renderSheet(report)}
+    `;
     }
-    renderCount() {
-        const capacity = this.capacity;
+    /**
+     * The head — how many fit, with the grade beside it, the budget that decided it, the scale, and the basis.
+     *
+     * The count's denominator is measured (2026-09-18, Apple M5) and says so with the machine and the date; the
+     * triangle side is still the design document's target and says that.
+     */
+    renderVerdict(report) {
+        const { capacity, score } = report;
         return html `
       <section>
         <h3>${i18next.t('figure.label.maturity')}</h3>
-        <p lead>${i18next.t('figure.text.how-many-fit')}</p>
-        ${capacity
-            ? html `
-              <div count>
-                <span capacity>${capacity.instances.toLocaleString()}</span>
-                <span unit>${i18next.t('figure.text.instances-unit')}</span>
-              </div>
-              <p basis>
-                ${i18next.t('figure.text.bound-by-' + capacity.bound, {
-                per: capacity.per.toLocaleString(),
-                budget: capacity.budget.toLocaleString()
+        <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('figure.text.instances-unit')}</span>
+          <span
+            grade
+            ?tight=${score.grade === 'C'}
+            ?over=${score.grade === 'D'}
+            title=${i18next.t('figure.text.grade-explained', { target: LIMITS.screenInstances })}
+          >
+            ${score.grade}
+            <small>${i18next.t('figure.text.headroom-percent', { percent: score.score })}</small>
+          </span>
+        </div>
+        <p because>
+          ${i18next.t('figure.text.grade-decided-by')}
+          <strong>${i18next.t('figure.label.budget-' + score.tightest.key)}</strong>
+          — ${score.tightest.used.toLocaleString()} / ${limitOf(score.tightest)} (${Math.round(score.tightest.ratio * 100)}%)
+        </p>
+        <p basis>
+          ${i18next.t('figure.text.grade-target', {
+            target: LIMITS.screenInstances,
+            groups: Math.floor(V3_PER_INSTANCE.groups),
+            triangles: Math.floor(V3_PER_INSTANCE.triangles).toLocaleString()
+        })}
+        </p>
+        ${this.renderGradeScale(score.grade)}
+        <p basis>
+          ${i18next.t('figure.text.bound-by-' + capacity.bound, {
+            per: capacity.per.toLocaleString(),
+            budget: capacity.budget.toLocaleString()
+        })}
+          <em>
+            ${capacity.bound === 'groups'
+            ? i18next.t('figure.text.budget-measured-on', { gpu: MEASURED.gpu, on: MEASURED.on })
+            : i18next.t('figure.text.budget-not-measured-yet')}
+          </em>
+        </p>
+      </section>
+    `;
+    }
+    /** A · B · C · D and where this figure stands, drawn from the bounds the grade is computed with. */
+    renderGradeScale(now) {
+        const bounds = [...GRADE_SCALE.map(([grade, bound]) => [grade, `≤ ${bound * 100}%`]), ['D', '> 100%']];
+        return html `
+      <p scale>
+        <span>${i18next.t('figure.text.grade-scale-lead')}</span>
+        ${bounds.map(([grade, bound]) => html `<span ?now=${grade === now}><b>${grade}</b> ${bound}</span>`)}
+      </p>
+    `;
+    }
+    /**
+     * Maturity by axis — a radar of the measured axes, a line naming the unmeasured ones, and the list.
+     *
+     * Scale is left out of the list: it leads the tab, and the same number twice reads as two different things.
+     */
+    renderAxes(report) {
+        const measured = report.axes.filter(axis => axis.ratio !== undefined);
+        const unmeasured = report.axes.filter(axis => axis.ratio === undefined);
+        return html `
+      <section>
+        <h3>${i18next.t('figure.label.by-axis')}</h3>
+        <div radar>${this.renderRadar(measured)}</div>
+        ${unmeasured.length
+            ? html `<p unmeasured>
+              ${i18next.t('figure.text.axes-not-measurable-yet', {
+                axes: unmeasured.map(axis => i18next.t('figure.label.axis-' + axis.key)).join(' · ')
             })}
-                <em>
-                  ${capacity.bound === 'groups'
-                ? i18next.t('figure.text.budget-measured-on', { gpu: MEASURED.gpu, on: MEASURED.on })
-                : i18next.t('figure.text.budget-not-measured-yet')}
-                </em>
-              </p>
-            `
-            : html `<p quiet>${i18next.t('figure.text.maturity-blocked-no-parts')}</p>`}
+            </p>`
+            : nothing}
+        <ul axes>
+          ${report.axes.filter(axis => axis.key !== 'scale').map(axis => this.renderAxis(axis))}
+        </ul>
       </section>
     `;
     }
+    /** V2's radar: rings at a third, two thirds and full, short names so the left edge is not cut. */
+    renderRadar(axes) {
+        const cx = 60;
+        const cy = 46;
+        const r = 28;
+        const at = (index, ratio) => {
+            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 clamp = (ratio) => Math.max(0.04, Math.min(1, ratio ?? 0));
+        const points = axes.map((axis, index) => at(index, clamp(axis.ratio)).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, clamp(axis.ratio));
+            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('figure.label.axis-' + axis.key + '-short')}</text>`;
+        })}
+      </svg>
+    `;
+    }
+    renderAxis(axis) {
+        const name = i18next.t('figure.label.axis-' + axis.key);
+        if (axis.blocked) {
+            return html `
+        <li blocked>
+          <span>${name}</span>
+          <span reading>${i18next.t('figure.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>` : nothing}
+      </li>
+    `;
+    }
+    /** The budget bars. The one closest to its limit is coloured — it decided the grade. */
+    renderBudgets(report) {
+        const { score } = report;
+        return html `
+      <section>
+        <h3>${i18next.t('figure.label.budgets')}</h3>
+        <ul budgets>
+          ${score.budgets.map(use => html `
+              <li>
+                <span>${i18next.t('figure.label.budget-' + use.key)}</span>
+                <span>${use.used.toLocaleString()} / ${limitOf(use)}</span>
+                <div bar><i ?tight=${use.key === score.tightest.key} style="width:${Math.round(Math.min(1, use.ratio) * 100)}%"></i></div>
+              </li>
+            `)}
+        </ul>
+        <p quiet>${i18next.t('figure.text.budgets-not-in-v3')}</p>
+      </section>
+    `;
+    }
+    renderMetrics(report) {
+        return html `
+      <section>
+        <h3>${i18next.t('figure.label.weight')}</h3>
+        <dl metrics>
+          <dt>${i18next.t('figure.label.triangles')}</dt>
+          <dd>${report.cost.triangles.toLocaleString()}</dd>
+          <dt>${i18next.t('figure.label.distinct-shapes')}</dt>
+          <dd>${report.distinctShapes}</dd>
+          <dt>${i18next.t('figure.label.distinct-materials')}</dt>
+          <dd>${report.distinctMaterials}</dd>
+        </dl>
+      </section>
+    `;
+    }
+    renderCurve() {
+        return html `
+      <section>
+        <h3>${i18next.t('figure.label.reuse-trend')}</h3>
+        <button expand @click=${() => (this.expanded = true)}>${i18next.t('figure.button.see-the-trend-chart')}</button>
+      </section>
+    `;
+    }
+    /**
+     * The trend at its own size — V2's chart: both axes logarithmic, the growing lines against the flat ones, and a
+     * legend with each line's value at the last count.
+     */
+    renderSheet(report) {
+        if (!this.expanded)
+            return nothing;
+        const layout = curveLayout(report.curve);
+        if (!layout)
+            return nothing;
+        const { width, height, pad } = CURVE_SIZE;
+        const plotW = width - pad.left - pad.right;
+        const plotH = height - pad.top - pad.bottom;
+        const last = report.curve[report.curve.length - 1];
+        const label = (key) => i18next.t({
+            triangles: 'figure.label.triangles',
+            drawCalls: 'figure.label.draw-calls',
+            geometries: 'figure.label.vertex-buffers',
+            materials: 'figure.label.distinct-materials'
+        }[key]);
+        return html `
+      <div sheet @click=${() => (this.expanded = false)}>
+        <figure @click=${(e) => e.stopPropagation()}>
+          ${svg `
+            <svg viewBox="0 0 ${width} ${height}" width=${width} height=${height} role="img">
+              <text x=${pad.left} y="22" font-size="13" font-weight="600">${i18next.t('figure.text.trend-chart-title')}</text>
+              <text x=${pad.left} y="38" muted>${i18next.t('figure.text.trend-chart-lead')}</text>
+              ${layout.yTicks.map(tick => svg `
+                  <line grid x1=${pad.left} y1=${tick.y.toFixed(1)} x2=${(pad.left + plotW).toFixed(1)} y2=${tick.y.toFixed(1)}></line>
+                  <text muted x=${pad.left - 8} y=${(tick.y + 3.5).toFixed(1)} text-anchor="end">${tick.label}</text>
+                `)}
+              ${layout.xTicks.map(tick => svg `
+                  <line grid x1=${tick.x.toFixed(1)} y1=${pad.top} x2=${tick.x.toFixed(1)} y2=${(pad.top + plotH).toFixed(1)}></line>
+                  <text muted x=${tick.x.toFixed(1)} y=${(pad.top + plotH + 16).toFixed(1)} text-anchor="middle">${tick.label}</text>
+                `)}
+              <text muted x=${(pad.left + plotW / 2).toFixed(1)} y=${height - 8} text-anchor="middle">${i18next.t('figure.label.instance-count')}</text>
+              ${layout.lines.map(line => svg `<path series=${line.key} d=${line.d} stroke-dasharray=${line.dashed ? '3 7' : 'none'}></path>`)}
+              <g transform="translate(${width - pad.right + 14}, ${pad.top - 6})">
+                <text x="0" y="0" font-weight="600">${i18next.t('figure.text.trend-at-count', { n: shortNumber(last.instances) })}</text>
+                ${layout.lines.map((line, i) => {
+            const y = 24 + i * 34;
+            return svg `
+                    <line series=${line.key} x1="0" y1=${y - 4} x2="18" y2=${y - 4} stroke-width="2" stroke-dasharray=${line.dashed ? '3 7' : 'none'}></line>
+                    <text x="24" y=${y}>${label(line.key)}</text>
+                    <text series=${line.key} x="24" y=${y + 12} font-weight="600">
+                      ${line.last.toLocaleString()}${line.flat ? ` · ${i18next.t('figure.text.trend-stays')}` : ''}
+                    </text>
+                  `;
+        })}
+                ${layout.overlap !== undefined
+            ? svg `<text muted x="0" y=${24 + layout.lines.length * 34 + 6}>${i18next.t('figure.text.trend-flat-lines-overlap', { value: layout.overlap.toLocaleString() })}</text>`
+            : nothing}
+              </g>
+            </svg>
+          `}
+          <figcaption>
+            <button close @click=${() => (this.expanded = false)}>${i18next.t('figure.button.close')}</button>
+          </figcaption>
+        </figure>
+      </div>
+    `;
+    }
     renderGate() {
         const findings = this.inspection?.findings ?? [];
         const blocking = findings.filter(finding => finding.blocking);
@@ -244,11 +760,15 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], FigureV3Verdict.prototype, "capacity", void 0);
+], FigureV3Verdict.prototype, "report", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureV3Verdict.prototype, "bodies", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureV3Verdict.prototype, "expanded", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)