@things-factory/figure-ui 10.1.4 → 10.1.6

package/client/viewparts/figure-card.ts

@@ -1,226 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-
-import { capacityFrom } from '../modeller/scene-budget.js'
-import type { Figure } from '../types.js'
-
-/**
- * 이 값 아래면 카드에서 색으로 눈에 띄게 한다.
- *
- * **등급 경계가 아니다.** 등급(A~D)은 `figure-model` 의 `scoreOf` 가 정하고 화면은
- * 그것을 베끼지 않는다. 이것은 「눈에 걸리게 할 선」이고, 화면의 판단이다.
- */
-const ATTENTION_BELOW = 50
-
-/**
- * Figure 한 장.
- *
- * 카드에 무엇을 실을지가 이 화면의 값이다. 이름과 썸네일만 실으면 저작자는 **무게를
- * 모른 채** 고르게 된다. 삼각형 수와 점수를 함께 실어, 「이걸 100개 놓아도 되나」를
- * 목록에서 판단할 수 있게 한다.
- */
-@customElement('figure-card')
-export class FigureCard extends localize(i18next)(LitElement) {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      background-color: var(--md-sys-color-surface-container-lowest);
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    :host(:hover) {
-      border-color: var(--md-sys-color-primary);
-    }
-
-    div[thumbnail] {
-      position: relative;
-      aspect-ratio: 4 / 3;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: var(--md-sys-color-surface-container);
-      overflow: hidden;
-    }
-    div[thumbnail] img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-    /* 썸네일이 아직 없는 것을 빈 사각형으로 두지 않는다 — 왜 없는지 말한다 */
-    div[thumbnail] span[nothumb] {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 4px;
-      font: var(--label-font, inherit);
-      color: var(--md-sys-color-outline-variant);
-    }
-    div[thumbnail] span[nothumb] md-icon {
-      --md-icon-size: 28px;
-    }
-
-    span[state] {
-      position: absolute;
-      top: 6px;
-      left: 6px;
-      padding: 1px 7px;
-      font: var(--label-font, inherit);
-      font-size: 0.7rem;
-      color: var(--md-sys-color-on-secondary-container);
-      background-color: var(--md-sys-color-secondary-container);
-      border-radius: 6px;
-    }
-
-    button[remove] {
-      position: absolute;
-      top: 4px;
-      right: 4px;
-      display: none;
-      padding: 3px;
-      color: var(--md-sys-color-on-surface);
-      background-color: var(--md-sys-color-surface);
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    button[remove] md-icon {
-      --md-icon-size: 16px;
-    }
-    :host(:hover) button[remove] {
-      display: block;
-    }
-
-    div[body] {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      padding: 8px 10px 10px 10px;
-    }
-    span[name] {
-      font: var(--theme-font, inherit);
-      font-size: 0.92rem;
-      color: var(--md-sys-color-on-surface);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    /* 타입 이름은 저장되는 식별자다 — 표시 이름과 다르게 보이게 둔다 */
-    code[type] {
-      font-family: var(--mono-font, monospace);
-      font-size: 0.72rem;
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-    }
-
-    div[metrics] {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      margin-top: 6px;
-      font: var(--label-font, inherit);
-      font-size: 0.72rem;
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-    }
-    /* 「몇 개까지」가 카드의 머리다 — 저작면 머리와 같은 말이라야 한다 */
-    span[fits] {
-      margin-right: auto;
-      font-size: 0.82rem;
-      font-weight: 700;
-      color: var(--md-sys-color-primary);
-    }
-    span[grade] {
-      padding: 0 6px;
-      font-weight: 700;
-      color: var(--md-sys-color-on-primary-container);
-      background-color: var(--md-sys-color-primary-container);
-      border-radius: 6px;
-    }
-    /* 점수가 낮으면 색으로도 말한다 — 숫자만으로는 눈에 안 들어온다 */
-    span[grade][low] {
-      color: var(--md-sys-color-on-error, #fff);
-      background-color: var(--md-sys-color-error);
-    }
-    span[unmeasured] {
-      font-style: italic;
-      color: var(--md-sys-color-outline-variant);
-    }
-  `
-
-  @property({ type: Object }) figure!: Figure
-
-  render() {
-    const figure = this.figure
-    if (!figure) {
-      return html``
-    }
-
-    return html`
-      <div thumbnail @click=${() => this.dispatchEvent(new CustomEvent('open'))}>
-        ${figure.thumbnail
-          ? html`<img src=${figure.thumbnail} alt=${figure.name} />`
-          : html`
-              <span nothumb>
-                <md-icon>deployed_code</md-icon>
-                ${i18next.t('text.thumbnail-not-made-yet')}
-              </span>
-            `}
-        ${figure.state === 'draft' ? html`<span state>${i18next.t('label.draft')}</span>` : ''}
-        <button
-          remove
-          title=${i18next.t('button.delete')}
-          @click=${(e: Event) => {
-            e.stopPropagation()
-            this.dispatchEvent(new CustomEvent('remove'))
-          }}
-        >
-          <md-icon>delete</md-icon>
-        </button>
-      </div>
-
-      <div body @click=${() => this.dispatchEvent(new CustomEvent('open'))}>
-        <span name title=${figure.name}>${figure.name}</span>
-        <code type>${figure.type}</code>
-
-        <div metrics>${this.renderMetrics()}</div>
-      </div>
-    `
-  }
-
-  /**
-   * 무게와 점수.
-   *
-   * 아직 재지 않은 것(정본을 저장한 적이 없는 것)을 **0 으로 보여 주지 않는다.**
-   * 0 은 「가볍다」는 뜻이 되어 버린다. 재지 않았다고 말한다.
-   */
-  private renderMetrics() {
-    const { score, triangles, groups } = this.figure
-
-    if (score == null || triangles == null) {
-      return html`<span unmeasured>${i18next.t('text.not-measured-yet')}</span>`
-    }
-
-    // 목록이 저작면과 **같은 말**을 하게 한다. 저작면 머리가 「몇 개까지」이면 카드도
-    // 그것이어야 한다 — 같은 형상을 두 화면이 다른 잣대로 말하면 무엇을 고칠지 모른다.
-    const capacity = capacityFrom(groups ?? 0, triangles)
-
-    // 등급 문자(A~D)를 여기서 만들지 않는다. 경계는 `figure-model` 의 `scoreOf` 가
-    // 정하고, 그것을 화면이 베끼면 두 벌이 되어 목록과 저작면이 다른 등급을 보여 준다.
-    // 목록에는 점수 숫자만 싣는다. 등급이 필요해지면 `figure-model` 이
-    // `gradeOf(score)` 를 내보내야 한다 — 그때 그것을 쓴다.
-    return html`
-      ${capacity
-        ? html`<span fits title=${i18next.t('text.reuse-score-explained')}>
-            ${i18next.t('text.fits-n-instances', { n: capacity.instances.toLocaleString() })}
-          </span>`
-        : ''}
-      <span grade ?low=${score < ATTENTION_BELOW}>${Math.round(score)}</span>
-      <span>${i18next.t('text.triangle-count', { count: triangles })}</span>
-    `
-  }
-}

package/dist-client/viewparts/figure-card.d.ts

@@ -1,24 +0,0 @@
-import '@material/web/icon/icon.js';
-import { LitElement } from 'lit';
-import type { Figure } from '../types.js';
-declare const FigureCard_base: (new (...args: any[]) => LitElement) & typeof LitElement;
-/**
- * Figure 한 장.
- *
- * 카드에 무엇을 실을지가 이 화면의 값이다. 이름과 썸네일만 실으면 저작자는 **무게를
- * 모른 채** 고르게 된다. 삼각형 수와 점수를 함께 실어, 「이걸 100개 놓아도 되나」를
- * 목록에서 판단할 수 있게 한다.
- */
-export declare class FigureCard extends FigureCard_base {
-    static styles: import("lit").CSSResult;
-    figure: Figure;
-    render(): import("lit-html").TemplateResult<1>;
-    /**
-     * 무게와 점수.
-     *
-     * 아직 재지 않은 것(정본을 저장한 적이 없는 것)을 **0 으로 보여 주지 않는다.**
-     * 0 은 「가볍다」는 뜻이 되어 버린다. 재지 않았다고 말한다.
-     */
-    private renderMetrics;
-}
-export {};

package/dist-client/viewparts/figure-card.js

@@ -1,221 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import '@material/web/icon/icon.js';
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { i18next, localize } from '@operato/i18n';
-import { capacityFrom } from '../modeller/scene-budget.js';
-/**
- * 이 값 아래면 카드에서 색으로 눈에 띄게 한다.
- *
- * **등급 경계가 아니다.** 등급(A~D)은 `figure-model` 의 `scoreOf` 가 정하고 화면은
- * 그것을 베끼지 않는다. 이것은 「눈에 걸리게 할 선」이고, 화면의 판단이다.
- */
-const ATTENTION_BELOW = 50;
-/**
- * Figure 한 장.
- *
- * 카드에 무엇을 실을지가 이 화면의 값이다. 이름과 썸네일만 실으면 저작자는 **무게를
- * 모른 채** 고르게 된다. 삼각형 수와 점수를 함께 실어, 「이걸 100개 놓아도 되나」를
- * 목록에서 판단할 수 있게 한다.
- */
-let FigureCard = class FigureCard extends localize(i18next)(LitElement) {
-    static { this.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      background-color: var(--md-sys-color-surface-container-lowest);
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    :host(:hover) {
-      border-color: var(--md-sys-color-primary);
-    }
-
-    div[thumbnail] {
-      position: relative;
-      aspect-ratio: 4 / 3;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: var(--md-sys-color-surface-container);
-      overflow: hidden;
-    }
-    div[thumbnail] img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-    /* 썸네일이 아직 없는 것을 빈 사각형으로 두지 않는다 — 왜 없는지 말한다 */
-    div[thumbnail] span[nothumb] {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 4px;
-      font: var(--label-font, inherit);
-      color: var(--md-sys-color-outline-variant);
-    }
-    div[thumbnail] span[nothumb] md-icon {
-      --md-icon-size: 28px;
-    }
-
-    span[state] {
-      position: absolute;
-      top: 6px;
-      left: 6px;
-      padding: 1px 7px;
-      font: var(--label-font, inherit);
-      font-size: 0.7rem;
-      color: var(--md-sys-color-on-secondary-container);
-      background-color: var(--md-sys-color-secondary-container);
-      border-radius: 6px;
-    }
-
-    button[remove] {
-      position: absolute;
-      top: 4px;
-      right: 4px;
-      display: none;
-      padding: 3px;
-      color: var(--md-sys-color-on-surface);
-      background-color: var(--md-sys-color-surface);
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    button[remove] md-icon {
-      --md-icon-size: 16px;
-    }
-    :host(:hover) button[remove] {
-      display: block;
-    }
-
-    div[body] {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      padding: 8px 10px 10px 10px;
-    }
-    span[name] {
-      font: var(--theme-font, inherit);
-      font-size: 0.92rem;
-      color: var(--md-sys-color-on-surface);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    /* 타입 이름은 저장되는 식별자다 — 표시 이름과 다르게 보이게 둔다 */
-    code[type] {
-      font-family: var(--mono-font, monospace);
-      font-size: 0.72rem;
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-    }
-
-    div[metrics] {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      margin-top: 6px;
-      font: var(--label-font, inherit);
-      font-size: 0.72rem;
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-    }
-    /* 「몇 개까지」가 카드의 머리다 — 저작면 머리와 같은 말이라야 한다 */
-    span[fits] {
-      margin-right: auto;
-      font-size: 0.82rem;
-      font-weight: 700;
-      color: var(--md-sys-color-primary);
-    }
-    span[grade] {
-      padding: 0 6px;
-      font-weight: 700;
-      color: var(--md-sys-color-on-primary-container);
-      background-color: var(--md-sys-color-primary-container);
-      border-radius: 6px;
-    }
-    /* 점수가 낮으면 색으로도 말한다 — 숫자만으로는 눈에 안 들어온다 */
-    span[grade][low] {
-      color: var(--md-sys-color-on-error, #fff);
-      background-color: var(--md-sys-color-error);
-    }
-    span[unmeasured] {
-      font-style: italic;
-      color: var(--md-sys-color-outline-variant);
-    }
-  `; }
-    render() {
-        const figure = this.figure;
-        if (!figure) {
-            return html ``;
-        }
-        return html `
-      <div thumbnail @click=${() => this.dispatchEvent(new CustomEvent('open'))}>
-        ${figure.thumbnail
-            ? html `<img src=${figure.thumbnail} alt=${figure.name} />`
-            : html `
-              <span nothumb>
-                <md-icon>deployed_code</md-icon>
-                ${i18next.t('text.thumbnail-not-made-yet')}
-              </span>
-            `}
-        ${figure.state === 'draft' ? html `<span state>${i18next.t('label.draft')}</span>` : ''}
-        <button
-          remove
-          title=${i18next.t('button.delete')}
-          @click=${(e) => {
-            e.stopPropagation();
-            this.dispatchEvent(new CustomEvent('remove'));
-        }}
-        >
-          <md-icon>delete</md-icon>
-        </button>
-      </div>
-
-      <div body @click=${() => this.dispatchEvent(new CustomEvent('open'))}>
-        <span name title=${figure.name}>${figure.name}</span>
-        <code type>${figure.type}</code>
-
-        <div metrics>${this.renderMetrics()}</div>
-      </div>
-    `;
-    }
-    /**
-     * 무게와 점수.
-     *
-     * 아직 재지 않은 것(정본을 저장한 적이 없는 것)을 **0 으로 보여 주지 않는다.**
-     * 0 은 「가볍다」는 뜻이 되어 버린다. 재지 않았다고 말한다.
-     */
-    renderMetrics() {
-        const { score, triangles, groups } = this.figure;
-        if (score == null || triangles == null) {
-            return html `<span unmeasured>${i18next.t('text.not-measured-yet')}</span>`;
-        }
-        // 목록이 저작면과 **같은 말**을 하게 한다. 저작면 머리가 「몇 개까지」이면 카드도
-        // 그것이어야 한다 — 같은 형상을 두 화면이 다른 잣대로 말하면 무엇을 고칠지 모른다.
-        const capacity = capacityFrom(groups ?? 0, triangles);
-        // 등급 문자(A~D)를 여기서 만들지 않는다. 경계는 `figure-model` 의 `scoreOf` 가
-        // 정하고, 그것을 화면이 베끼면 두 벌이 되어 목록과 저작면이 다른 등급을 보여 준다.
-        // 목록에는 점수 숫자만 싣는다. 등급이 필요해지면 `figure-model` 이
-        // `gradeOf(score)` 를 내보내야 한다 — 그때 그것을 쓴다.
-        return html `
-      ${capacity
-            ? html `<span fits title=${i18next.t('text.reuse-score-explained')}>
-            ${i18next.t('text.fits-n-instances', { n: capacity.instances.toLocaleString() })}
-          </span>`
-            : ''}
-      <span grade ?low=${score < ATTENTION_BELOW}>${Math.round(score)}</span>
-      <span>${i18next.t('text.triangle-count', { count: triangles })}</span>
-    `;
-    }
-};
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], FigureCard.prototype, "figure", void 0);
-FigureCard = __decorate([
-    customElement('figure-card')
-], FigureCard);
-export { FigureCard };
-//# sourceMappingURL=figure-card.js.map

package/dist-client/viewparts/figure-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"figure-card.js","sourceRoot":"","sources":["../../client/viewparts/figure-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\nimport { capacityFrom } from '../modeller/scene-budget.js'\nimport type { Figure } from '../types.js'\n\n/**\n * 이 값 아래면 카드에서 색으로 눈에 띄게 한다.\n *\n * **등급 경계가 아니다.** 등급(A~D)은 `figure-model` 의 `scoreOf` 가 정하고 화면은\n * 그것을 베끼지 않는다. 이것은 「눈에 걸리게 할 선」이고, 화면의 판단이다.\n */\nconst ATTENTION_BELOW = 50\n\n/**\n * Figure 한 장.\n *\n * 카드에 무엇을 실을지가 이 화면의 값이다. 이름과 썸네일만 실으면 저작자는 **무게를\n * 모른 채** 고르게 된다. 삼각형 수와 점수를 함께 실어, 「이걸 100개 놓아도 되나」를\n * 목록에서 판단할 수 있게 한다.\n */\n@customElement('figure-card')\nexport class FigureCard extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      background-color: var(--md-sys-color-surface-container-lowest);\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n      cursor: pointer;\n    }\n    :host(:hover) {\n      border-color: var(--md-sys-color-primary);\n    }\n\n    div[thumbnail] {\n      position: relative;\n      aspect-ratio: 4 / 3;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background-color: var(--md-sys-color-surface-container);\n      overflow: hidden;\n    }\n    div[thumbnail] img {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n    }\n    /* 썸네일이 아직 없는 것을 빈 사각형으로 두지 않는다 — 왜 없는지 말한다 */\n    div[thumbnail] span[nothumb] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 4px;\n      font: var(--label-font, inherit);\n      color: var(--md-sys-color-outline-variant);\n    }\n    div[thumbnail] span[nothumb] md-icon {\n      --md-icon-size: 28px;\n    }\n\n    span[state] {\n      position: absolute;\n      top: 6px;\n      left: 6px;\n      padding: 1px 7px;\n      font: var(--label-font, inherit);\n      font-size: 0.7rem;\n      color: var(--md-sys-color-on-secondary-container);\n      background-color: var(--md-sys-color-secondary-container);\n      border-radius: 6px;\n    }\n\n    button[remove] {\n      position: absolute;\n      top: 4px;\n      right: 4px;\n      display: none;\n      padding: 3px;\n      color: var(--md-sys-color-on-surface);\n      background-color: var(--md-sys-color-surface);\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n      cursor: pointer;\n    }\n    button[remove] md-icon {\n      --md-icon-size: 16px;\n    }\n    :host(:hover) button[remove] {\n      display: block;\n    }\n\n    div[body] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      padding: 8px 10px 10px 10px;\n    }\n    span[name] {\n      font: var(--theme-font, inherit);\n      font-size: 0.92rem;\n      color: var(--md-sys-color-on-surface);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    /* 타입 이름은 저장되는 식별자다 — 표시 이름과 다르게 보이게 둔다 */\n    code[type] {\n      font-family: var(--mono-font, monospace);\n      font-size: 0.72rem;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n    }\n\n    div[metrics] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      margin-top: 6px;\n      font: var(--label-font, inherit);\n      font-size: 0.72rem;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n    }\n    /* 「몇 개까지」가 카드의 머리다 — 저작면 머리와 같은 말이라야 한다 */\n    span[fits] {\n      margin-right: auto;\n      font-size: 0.82rem;\n      font-weight: 700;\n      color: var(--md-sys-color-primary);\n    }\n    span[grade] {\n      padding: 0 6px;\n      font-weight: 700;\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-radius: 6px;\n    }\n    /* 점수가 낮으면 색으로도 말한다 — 숫자만으로는 눈에 안 들어온다 */\n    span[grade][low] {\n      color: var(--md-sys-color-on-error, #fff);\n      background-color: var(--md-sys-color-error);\n    }\n    span[unmeasured] {\n      font-style: italic;\n      color: var(--md-sys-color-outline-variant);\n    }\n  `\n\n  @property({ type: Object }) figure!: Figure\n\n  render() {\n    const figure = this.figure\n    if (!figure) {\n      return html``\n    }\n\n    return html`\n      <div thumbnail @click=${() => this.dispatchEvent(new CustomEvent('open'))}>\n        ${figure.thumbnail\n          ? html`<img src=${figure.thumbnail} alt=${figure.name} />`\n          : html`\n              <span nothumb>\n                <md-icon>deployed_code</md-icon>\n                ${i18next.t('text.thumbnail-not-made-yet')}\n              </span>\n            `}\n        ${figure.state === 'draft' ? html`<span state>${i18next.t('label.draft')}</span>` : ''}\n        <button\n          remove\n          title=${i18next.t('button.delete')}\n          @click=${(e: Event) => {\n            e.stopPropagation()\n            this.dispatchEvent(new CustomEvent('remove'))\n          }}\n        >\n          <md-icon>delete</md-icon>\n        </button>\n      </div>\n\n      <div body @click=${() => this.dispatchEvent(new CustomEvent('open'))}>\n        <span name title=${figure.name}>${figure.name}</span>\n        <code type>${figure.type}</code>\n\n        <div metrics>${this.renderMetrics()}</div>\n      </div>\n    `\n  }\n\n  /**\n   * 무게와 점수.\n   *\n   * 아직 재지 않은 것(정본을 저장한 적이 없는 것)을 **0 으로 보여 주지 않는다.**\n   * 0 은 「가볍다」는 뜻이 되어 버린다. 재지 않았다고 말한다.\n   */\n  private renderMetrics() {\n    const { score, triangles, groups } = this.figure\n\n    if (score == null || triangles == null) {\n      return html`<span unmeasured>${i18next.t('text.not-measured-yet')}</span>`\n    }\n\n    // 목록이 저작면과 **같은 말**을 하게 한다. 저작면 머리가 「몇 개까지」이면 카드도\n    // 그것이어야 한다 — 같은 형상을 두 화면이 다른 잣대로 말하면 무엇을 고칠지 모른다.\n    const capacity = capacityFrom(groups ?? 0, triangles)\n\n    // 등급 문자(A~D)를 여기서 만들지 않는다. 경계는 `figure-model` 의 `scoreOf` 가\n    // 정하고, 그것을 화면이 베끼면 두 벌이 되어 목록과 저작면이 다른 등급을 보여 준다.\n    // 목록에는 점수 숫자만 싣는다. 등급이 필요해지면 `figure-model` 이\n    // `gradeOf(score)` 를 내보내야 한다 — 그때 그것을 쓴다.\n    return html`\n      ${capacity\n        ? html`<span fits title=${i18next.t('text.reuse-score-explained')}>\n            ${i18next.t('text.fits-n-instances', { n: capacity.instances.toLocaleString() })}\n          </span>`\n        : ''}\n      <span grade ?low=${score < ATTENTION_BELOW}>${Math.round(score)}</span>\n      <span>${i18next.t('text.triangle-count', { count: triangles })}</span>\n    `\n  }\n}\n"]}