@things-factory/figure-ui 10.1.75 → 10.1.76

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

@@ -0,0 +1,787 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing, svg } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import { LIMITS, parseFigureAsset, FIGURE_PER_INSTANCE, figureCostOf } from '@hatiolab/figure-model';
+import { inspectFigureDraft } from '../graphql/index.js';
+import { gateFindingStyles, renderGateFinding } from './gate-findings.js';
+import { MEASURED } from './scene-budget.js';
+import { SidePanelStyles } from './side-panel-styles.js';
+import { budgetOf, CURVE_SIZE, curveLayout, GRADE_SCALE, shortNumber, figureReportOf } from './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 modeller's verdict while editing.
+ *
+ * It shows, 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. An earlier tab kept only the count and the findings (user, 2026-09-24:
+ * 「분석부분도 많이 부족하고, 왜 이렇게 너프되었는지」).
+ *
+ * ## What is computed where
+ *
+ * The numbers come from `maturity.ts`, which reads the evaluated asset the way the 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. The release judgement is the server's, so that section is the server's answer.
+ *
+ * ## The grade
+ *
+ * figure-model's `figureScoreOf`, 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 the rule limits for independently moved parts and transparent materials, decided by the
+ * tightest. The two budgets 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 FigureVerdict = class FigureVerdict 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. */
+        this.asked = 0;
+        this.fit = () => {
+            this.dispatchEvent(new CustomEvent('fit-base-to-parts', { bubbles: true, composed: true }));
+        };
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        SidePanelStyles,
+        gateFindingStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+      }
+      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));
+      }
+      p[basis] em {
+        font-style: normal;
+        color: var(--md-sys-color-tertiary);
+      }
+      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);
+      }
+      /* 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;
+      }
+      p[failed] {
+        color: var(--md-sys-color-error);
+      }
+      button[fit] {
+        align-self: flex-start;
+        margin-top: 4px;
+        padding: 4px 10px;
+        font: inherit;
+        color: var(--md-sys-color-on-secondary-container);
+        background: var(--md-sys-color-secondary-container);
+        border: none;
+        border-radius: 999em;
+        cursor: pointer;
+      }
+    `
+    ]; }
+    disconnectedCallback() {
+        clearTimeout(this.timer);
+        super.disconnectedCallback();
+    }
+    updated(changes) {
+        if (changes.has('source'))
+            this.measure();
+        if (changes.has('source') || changes.has('figureId') || changes.has('figureType'))
+            this.schedule();
+    }
+    measure() {
+        let report;
+        let bodies = 0;
+        try {
+            const asset = this.source ? parseFigureAsset(this.source) : undefined;
+            const cost = asset ? figureCostOf(asset) : undefined;
+            bodies = cost ? cost.groups + cost.hidden : 0;
+            report = asset ? figureReportOf(asset) : undefined;
+        }
+        catch {
+            /* A source the format refuses has no report; the server's finding below says why. */
+            report = undefined;
+        }
+        this.report = report;
+        this.bodies = bodies;
+        if (!report)
+            this.expanded = false;
+        this.dispatchEvent(new CustomEvent('capacity-changed', { detail: { instances: report?.capacity.instances, budget: budgetOf(report) } }));
+    }
+    schedule() {
+        clearTimeout(this.timer);
+        if (!this.source) {
+            this.inspection = undefined;
+            return;
+        }
+        this.timer = setTimeout(() => this.ask(), VERDICT_SETTLE_MS);
+    }
+    async ask() {
+        const question = ++this.asked;
+        const source = this.source;
+        this.asking = true;
+        try {
+            const inspection = await inspectFigureDraft(source, this.figureId);
+            if (question !== this.asked)
+                return;
+            this.inspection = inspection;
+            this.failure = '';
+        }
+        catch (error) {
+            if (question !== this.asked)
+                return;
+            /* The server's reason as it gave it — the screen does not make one up. The last answer is dropped with it. */
+            this.inspection = undefined;
+            this.failure = error instanceof Error ? error.message : String(error);
+        }
+        finally {
+            if (question === this.asked)
+                this.asking = false;
+        }
+    }
+    render() {
+        /*
+          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)}
+    `;
+    }
+    /**
+     * 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.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(FIGURE_PER_INSTANCE.groups),
+            triangles: Math.floor(FIGURE_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(' · ')
+            })}
+            </p>`
+            : nothing}
+        <ul axes>
+          ${report.axes.filter(axis => axis.key !== 'scale').map(axis => this.renderAxis(axis))}
+        </ul>
+      </section>
+    `;
+    }
+    /** The 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')}</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: 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);
+        const advisory = findings.filter(finding => !finding.blocking);
+        return html `
+      <section>
+        <h3>${i18next.t('figure.label.release-verdict')}</h3>
+        ${this.failure
+            ? html `<p failed role="alert">${i18next.t('figure.text.verdict-not-received', { reason: this.failure })}</p>`
+            : !this.inspection
+                ? html `<p quiet>${i18next.t(this.asking ? 'figure.text.verdict-asking' : 'figure.text.verdict-waiting')}</p>`
+                : blocking.length
+                    ? html `<p>${i18next.t('figure.text.cannot-release-now')}</p>`
+                    : html `<p clear>${i18next.t('figure.text.nothing-blocks-release')}</p>`}
+        ${blocking.length
+            ? html `<ul gate>
+              <li head>${i18next.t('figure.text.must-fix-to-release')}</li>
+              ${blocking.map(finding => renderGateFinding(finding, true, this.actionsFor(finding.code)))}
+            </ul>`
+            : nothing}
+        ${advisory.length
+            ? html `<ul gate>
+              <li head quiet>${i18next.t('figure.text.does-not-block')}</li>
+              ${advisory.map(finding => renderGateFinding(finding, false))}
+            </ul>`
+            : nothing}
+      </section>
+    `;
+    }
+    /** The same way out the release panel offers for the same two findings — declare the space from the parts. */
+    actionsFor(code) {
+        if (code !== 'part-outside-occupancy' && code !== 'occupancy-undeclared')
+            return nothing;
+        /* A new figure with no parts is refused as undeclared too, but fitting needs parts to measure (seen 2026-09-24). */
+        if (!this.bodies)
+            return nothing;
+        return html `<button fit @click=${this.fit}>${i18next.t('figure.button.fit-base-to-parts')}</button>`;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureVerdict.prototype, "source", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureVerdict.prototype, "figureId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureVerdict.prototype, "figureType", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureVerdict.prototype, "report", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureVerdict.prototype, "bodies", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureVerdict.prototype, "expanded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureVerdict.prototype, "inspection", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureVerdict.prototype, "failure", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureVerdict.prototype, "asking", void 0);
+FigureVerdict = __decorate([
+    customElement('figure-verdict')
+], FigureVerdict);
+export { FigureVerdict };
+//# sourceMappingURL=figure-verdict.js.map