@things-factory/figure-ui 10.1.3

package/client/route.ts

@@ -0,0 +1,11 @@
+export default function route(page: string) {
+  switch (page) {
+    case 'figure-list':
+      import('./pages/figure-list-page')
+      return page
+
+    case 'figure-modeller':
+      import('./pages/figure-modeller-page')
+      return page
+  }
+}

package/client/themes/brand.css

@@ -0,0 +1,51 @@
+/*
+ * figure 의 **브랜드 색 — 정본은 이 파일 하나다.**
+ *
+ * ── 왜 이 파일이 생겼나 ────────────────────────────────────────────────────
+ * figure-ui 에는 팔레트가 없었다. 호스트 앱이 주는 `--md-sys-color-*` 를 그대로 받아 썼고,
+ * 하네스(`test/browser/modeller-page.mjs`)는 자기 `:root` 에 값을 직접 적고 있었다. 그래서
+ * 하네스에서 본 색과 앱에서 볼 색이 **아무 오류 없이 달라질 수 있는** 상태였다.
+ *
+ * operato-plant 가 같은 문제를 겪고 같은 방식으로 풀었다(`operato-plant/assets/brand.css`).
+ * 그 구조를 그대로 따른다 — 값은 여기 한 번만 적고, 앱 팔레트와 하네스가 이 파일을 읽는다.
+ *
+ * ── 브랜드 색만 여기 둔다 ──────────────────────────────────────────────────
+ * 중성색은 여기 없다. 그것은 `client/themes/light.css` 가 갖는다. 여기 있는 것은 **제품을
+ * 가리키는 색**뿐이고, 그것만 절대 갈라지면 안 된다.
+ *
+ * ── 밝은 것과 어두운 것을 함께 든다 ────────────────────────────────────────
+ * 어두운 바탕에서 `#154473` 은 가라앉고(대비 1.6), 밝은 바탕에서 `#64a9f3` 은 글자에 못 쓴다
+ * (대비 2.4). 그래서 같은 이름이 밝기마다 다른 값을 갖는다 — 이름이 뜻이고 값은 자리에 따라
+ * 다르다. plant · twin 과 같은 규약이다.
+ *
+ * ── 색은 하나뿐이다 ────────────────────────────────────────────────────────
+ * 한동안 primary(네이비)와 accent(따로 고른 색)를 둘 두려 했다. 그러면 그 둘이 서로 안
+ * 부딪히게 하느라 화면이 계속 시끄러워진다. twin 도 plant 도 브랜드 색을 하나만 두고,
+ * 그것이 곧 primary 다. 여기도 그렇게 한다.
+ *
+ * 나머지는 뜻이 있는 색이다 — 주의(warn) · 오류(error). 그 둘은 브랜드가 아니라 상태이므로
+ * 팔레트 파일에 있다.
+ */
+
+:root {
+  /*
+   * figure — 네이비 252°.
+   *
+   * OKLCH L* 38 · C 0.095 · H 252. 흰 글자 대비 9.97 로 작은 글자 기준(4.5)에 여유가 크다.
+   *
+   * 채도를 낮게 잡은 것이 이 색의 요점이다. 이 도구의 화면에서 색이 말해야 하는 것은 **저작자가
+   * 고른 부품 색**이다. 틀이 진한 색으로 소리를 내면 캔버스 안의 색을 판단할 수 없다. 그래서
+   * 브랜드 색은 깊고 조용하게 두고, 고른 것의 밑줄 · 기본 단추 · 링크에만 좁게 쓴다.
+   */
+  --brand-figure: #154473;
+
+  /*
+   * 어두운 면 위에서 쓰는 같은 색. L* 72 · C 0.130.
+   *
+   * 3D 캔버스의 선택 테두리와 어두운 배경의 강조가 이 값이다. 어두운 면(#12161b) 대비 7.02.
+   */
+  --brand-figure-2: #64a9f3;
+
+  /** 아주 옅게 깔 때 — 고른 줄의 바탕. 위 색과 같은 색상각이다. */
+  --brand-figure-wash: #eaf3fd;
+}

package/client/themes/dark.css

@@ -0,0 +1,64 @@
+@import url('./brand.css');
+
+/*
+ * figure 다크 팔레트.
+ *
+ * 라이트 쪽 머리말이 규칙의 정본이다(`light.css`). 여기서는 **어두운 면에서 달라지는 것만**
+ * 적는다.
+ *
+ * ── 브랜드 색이 밝은 쪽으로 바뀐다 ────────────────────────────────────────
+ * `#154473` 은 어두운 바탕에서 대비 1.6 이라 보이지 않는다. 그래서 어두운 면에서는
+ * `--brand-figure-2`(#64a9f3)가 브랜드 색이다. 이름이 뜻이고 값은 자리에 따라 다르다 —
+ * plant · twin 과 같은 규약이다.
+ *
+ *   [측정] 어두운 면(#12161b) 대비 — #154473 1.60 · #64a9f3 7.02
+ *
+ * ── 캔버스는 여기서도 화면에서 가장 어두운 면이 아니다 ────────────────────
+ * 라이트에서 캔버스를 한 단 내렸던 이유가 어두운 쪽에서는 뒤집힌다. 부품이 묻히지 않으려면
+ * 캔버스가 표면보다 **밝아야** 한다. 어두운 부품(palette.dark)이 바탕과 같아지면 형태가
+ * 사라진다.
+ */
+
+:root[theme='dark'],
+:host([theme='dark']) {
+  /* ── 표면 ────────────────────────────────────────────────────────────── */
+  --md-sys-color-surface: #12161b;
+  --md-sys-color-surface-container-lowest: #0d1116;
+  --md-sys-color-surface-container: #1a1f25;
+  --md-sys-color-surface-container-highest: #252b32;
+
+  /** 캔버스 — 표면보다 한 단 밝다. 어두운 부품이 바탕에 묻히지 않게 한다. */
+  --md-sys-color-surface-variant: #2f353d;
+
+  /* ── 선 ──────────────────────────────────────────────────────────────── */
+  --md-sys-color-outline-variant: #333941;
+  --md-sys-color-outline: #59606a;
+
+  /* ── 글자 셋 ─────────────────────────────────────────────────────────── */
+  --md-sys-color-on-surface: #e3e7ec;
+  --md-sys-color-on-surface-variant: #a8afb8;
+  --md-sys-color-on-surface-dim: #7d848d;
+
+  /* ── 브랜드 ──────────────────────────────────────────────────────────── */
+  --md-sys-color-primary: var(--brand-figure-2);
+  --md-sys-color-on-primary: #0d1116;
+  --md-sys-color-inverse-primary: var(--brand-figure);
+
+  --md-sys-color-primary-container: #1c2b3d;
+  --md-sys-color-on-primary-container: var(--brand-figure-2);
+
+  --md-sys-color-secondary-container: #1a1f25;
+  --md-sys-color-on-secondary-container: #a8afb8;
+
+  /* ── 뜻이 있는 색 ────────────────────────────────────────────────────── */
+  /* 어두운 면에서는 주의·오류도 밝은 쪽 값을 쓴다. 낮은 값은 안 보인다. */
+  --md-sys-color-tertiary: #dfa72a;
+  --md-sys-color-on-tertiary: #0d1116;
+  --md-sys-color-tertiary-container: #1a1f25;
+  --md-sys-color-on-tertiary-container: #dfa72a;
+
+  --md-sys-color-error: #f2837c;
+  --md-sys-color-on-error: #0d1116;
+  --md-sys-color-error-container: #1a1f25;
+  --md-sys-color-on-error-container: #f2837c;
+}

package/client/themes/light.css

@@ -0,0 +1,95 @@
+@import url('./brand.css');
+
+/*
+ * figure 라이트 팔레트 — 이 파일이 이 도구 색의 **정본**이다.
+ *
+ * 브랜드 색은 `client/themes/brand.css` 가 갖는다. 여기서 쓸 수 있는 이름은 `--brand-figure` ·
+ * `--brand-figure-2` · `--brand-figure-wash` 셋이다. 값을 여기 다시 적지 않는다.
+ *
+ * ── 이 도구에서 색이 말해야 하는 것 ────────────────────────────────────────
+ * **저작자가 고른 부품 색**이다. 화면 한가운데 캔버스가 있고, 거기 놓인 부품의 색을 보고
+ * 판단하는 것이 이 도구의 일이다. 틀이 색으로 소리를 내면 그 판단이 흐려진다.
+ *
+ * 그래서 틀은 무채색이다. 브랜드 네이비는 세 자리에만 쓴다 — **고른 것의 밑줄 · 기본 단추 ·
+ * 링크**. 그 밖에는 회색과 글자색이 전부다.
+ *
+ * ── 배지에 파스텔을 깔지 않는다 ────────────────────────────────────────────
+ * 전에는 등급 배지와 칩이 파스텔 면(연파랑 · 연노랑)이었다. 작은 면에 옅은 색을 깔면 화면이
+ * 싸구려로 보이고, 캔버스의 부품 색과도 섞인다. 이제 배지는 **무채색 바탕에 머리카락 선**이고
+ * 뜻은 **글자색**이 든다. 그래서 `*-container` 토큰들이 전부 무채색으로 간다 — 컴포넌트를
+ * 하나씩 고치지 않아도 이 파일 하나로 그 규칙이 선다.
+ *
+ * ── 회색은 셋이다 ──────────────────────────────────────────────────────────
+ * 본문(ink) · 보조(ink-2) · 흐린 것(ink-3). 넷을 넘기면 어느 것을 써야 할지 매번 고민하게 되고,
+ * 결국 아무거나 쓰게 된다. 전에는 단계가 고르지 않아 두 회색이 같은 무게로 읽혔다.
+ *
+ *   [측정] 흰 바탕 대비 — ink 18.16 · ink-2 8.41 · ink-3 5.06. 셋 다 작은 글자 기준(4.5)을 넘는다.
+ */
+
+:root {
+  /* ── 표면 ────────────────────────────────────────────────────────────── */
+  --md-sys-color-surface: #ffffff;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container: #f3f5f8;
+  --md-sys-color-surface-container-highest: #e6e9ec;
+
+  /*
+   * 캔버스 — 화면에서 가장 어두운 무채색 면이다.
+   *
+   * 부품이 그 위에 놓인다. 밝은 회색이면 밝은 부품이 바탕에 묻히고, 부품 색이 실제보다 진해
+   * 보인다. 한 단 내려서 위에 놓인 것이 무슨 색이든 제 밝기로 보이게 한다.
+   */
+  --md-sys-color-surface-variant: #d5d8db;
+
+  /* ── 선 ──────────────────────────────────────────────────────────────── */
+  --md-sys-color-outline-variant: #d8dbdf;
+  --md-sys-color-outline: #babec3;
+
+  /* ── 글자 셋 ─────────────────────────────────────────────────────────── */
+  --md-sys-color-on-surface: #12161b;
+  --md-sys-color-on-surface-variant: #484e55;
+  /** 흐린 것 — 도움말, 단위, 빈 자리 안내. 이것도 4.5 를 넘는다. */
+  --md-sys-color-on-surface-dim: #6a6f76;
+
+  /* ── 브랜드 ──────────────────────────────────────────────────────────── */
+  --md-sys-color-primary: var(--brand-figure);
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-inverse-primary: var(--brand-figure-2);
+
+  /*
+   * 고른 줄의 바탕. 이것만 유일하게 색이 든 면이고, 그것도 거의 흰색이다(L* 96).
+   * 그 위에 오는 글자는 브랜드 색이며 대비 8.90 이다.
+   */
+  --md-sys-color-primary-container: var(--brand-figure-wash);
+  --md-sys-color-on-primary-container: var(--brand-figure);
+
+  /*
+   * 두 번째 면 — 파스텔을 쓰지 않으므로 무채색이다. 칩과 배지가 이것을 깐다.
+   */
+  --md-sys-color-secondary-container: #f3f5f8;
+  --md-sys-color-on-secondary-container: #484e55;
+
+  /* ── 뜻이 있는 색 ────────────────────────────────────────────────────── */
+  /*
+   * 주의 — 권장 범위를 넘었다. 막지는 않는다.
+   *
+   * 브랜드가 아니라 상태다. `tertiary` 슬롯에 든 것은 figure-ui 가 그 이름으로 주의 문구를
+   * 쓰고 있기 때문이고, 뜻은 주의다.
+   *
+   *   [측정] 흰 바탕 5.53 · 배지 바탕(#f3f5f8) 5.06
+   */
+  --md-sys-color-tertiary: #866300;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #f3f5f8;
+  --md-sys-color-on-tertiary-container: #866300;
+
+  /*
+   * 오류 — 스키마를 어겼다. 저장이 막힌다.
+   *
+   *   [측정] 흰 바탕 7.13 · 배지 바탕 6.53
+   */
+  --md-sys-color-error: #a9231e;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #f3f5f8;
+  --md-sys-color-on-error-container: #a9231e;
+}

package/client/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "declaration": true,
+    "baseUrl": "./",
+    "module": "esnext",
+    "outDir": "../dist-client"
+  },
+  "include": [
+    "./**/*"
+  ],
+  "exclude": [
+    "**/*.test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/client/types.ts

@@ -0,0 +1,96 @@
+/**
+ * 화면이 다루는 모양.
+ *
+ * 정본 형식(`FigureSource`)의 타입은 **여기서 다시 정의하지 않는다** —
+ * `@hatiolab/figure-model` 에서 가져온다. 두 벌이면 갈리고, 갈리면 화면이 서버가
+ * 거절할 것을 만들어 낸다.
+ */
+export type { FigureSource, FigureBlueprint, FigurePart, ErrorCode, ViolationCode } from '@hatiolab/figure-model'
+
+/** 서버가 돌려주는 Figure 한 벌. `source` 는 저작면에서만 받는다. */
+export interface Figure {
+  id: string
+  /** 컴포넌트 타입 이름. **만든 뒤에 고칠 수 없다.** */
+  type: string
+  name: string
+  description?: string
+  category?: string
+  state?: 'draft' | 'released'
+  /** 재활용 점수 0~100. 서버가 정본에서 계산한다 — 화면이 보내는 값이 아니다. */
+  score?: number
+  triangles?: number
+  groups?: number
+  thumbnail?: string
+  thumbnailUpdatedAt?: string
+  updatedAt?: string
+  updater?: { id: string; name: string }
+  /** `FigureSource` JSON 문자열. 목록 질의에는 실려 오지 않는다. */
+  source?: string
+  properties?: string
+  version?: number
+}
+
+export interface FigureListResult {
+  items: Figure[]
+  total: number
+}
+
+/**
+ * 새 Figure.
+ *
+ * `score`·`triangles`·`groups` 가 없다 — **서버가 정본에서 계산한다.** 화면이 보내면
+ * 거짓이 들어오고 목록이 실물과 다른 것을 보여 준다.
+ */
+export interface NewFigure {
+  type: string
+  name: string
+  description?: string
+  category?: string
+  source: string
+  properties?: string
+  state?: 'draft' | 'released'
+  thumbnail?: string
+}
+
+/**
+ * 수정.
+ *
+ * `type` 이 없다 — 저장되는 식별자라 고칠 수 없다. 배치된 보드가 그 이름으로 타입을
+ * 찾으므로, 바꾸면 그 보드가 빈 화면이 된다.
+ */
+export interface FigurePatch {
+  name?: string
+  description?: string
+  category?: string
+  source?: string
+  properties?: string
+  state?: 'draft' | 'released'
+  thumbnail?: string
+}
+
+/** 검증 결과 한 줄. 코드는 figure-model 의 것을 그대로 쓴다. */
+export interface FigureFinding {
+  code: string
+  message: string
+  at?: string
+}
+
+/**
+ * 저작 보조가 낸 후보.
+ *
+ * **정본이 아니다.** 저작자가 보고 받아야 정본이 된다 — 서버는 저장하지 않고
+ * 돌려주기만 한다.
+ */
+export interface FigureProposal {
+  /** 후보 정본. JSON 문자열이다 — 화면이 파싱한다. */
+  source: string
+  score: number
+  grade: string
+  triangles: number
+  /** 재질 묶음 = 인스턴스 하나가 무는 draw call. */
+  groups: number
+  /** 형식은 맞으나 정책을 넘은 것. 막지 않는다 — 저작자가 정한다. */
+  violations: FigureFinding[]
+  /** 몇 번 만에 됐나. 진단용이다. */
+  attempts: number
+}

package/client/viewparts/figure-card.ts

@@ -0,0 +1,226 @@
+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/bootstrap.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 클라이언트 부트스트랩.
+ *
+ * 지금은 등록할 것이 없다. 그래도 이 파일을 두는 이유는 `things-factory.config.js` 가
+ * `bootstrap` 을 가리키기 때문이고, 데이터 그리드용 편집기·렌더러나 속성 편집기를
+ * 붙이게 되면 여기가 그 자리다(`board-ui/client/bootstrap.ts` 가 그 예다).
+ *
+ * ## 메뉴는 여기서 걸지 않는다
+ *
+ * things-factory 의 메뉴는 **`menu-base` 의 DB 레코드**다. 코드가 메뉴를 더하는 길은
+ * 없다 — 화면은 `things-factory.config.js` 의 `routes` 로 등록되고, 그 화면을 메뉴에
+ * 올리는 것은 운영자가 메뉴를 만들어 `figure-list` 를 가리키게 하는 일이다.
+ */
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,17 @@
+/**
+ * 클라이언트 부트스트랩.
+ *
+ * 지금은 등록할 것이 없다. 그래도 이 파일을 두는 이유는 `things-factory.config.js` 가
+ * `bootstrap` 을 가리키기 때문이고, 데이터 그리드용 편집기·렌더러나 속성 편집기를
+ * 붙이게 되면 여기가 그 자리다(`board-ui/client/bootstrap.ts` 가 그 예다).
+ *
+ * ## 메뉴는 여기서 걸지 않는다
+ *
+ * things-factory 의 메뉴는 **`menu-base` 의 DB 레코드**다. 코드가 메뉴를 더하는 길은
+ * 없다 — 화면은 `things-factory.config.js` 의 `routes` 로 등록되고, 그 화면을 메뉴에
+ * 올리는 것은 운영자가 메뉴를 만들어 `figure-list` 를 가리키게 하는 일이다.
+ */
+export default function bootstrap() {
+    // 등록할 것이 생기면 여기에 둔다.
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,qBAAqB;AACvB,CAAC","sourcesContent":["/**\n * 클라이언트 부트스트랩.\n *\n * 지금은 등록할 것이 없다. 그래도 이 파일을 두는 이유는 `things-factory.config.js` 가\n * `bootstrap` 을 가리키기 때문이고, 데이터 그리드용 편집기·렌더러나 속성 편집기를\n * 붙이게 되면 여기가 그 자리다(`board-ui/client/bootstrap.ts` 가 그 예다).\n *\n * ## 메뉴는 여기서 걸지 않는다\n *\n * things-factory 의 메뉴는 **`menu-base` 의 DB 레코드**다. 코드가 메뉴를 더하는 길은\n * 없다 — 화면은 `things-factory.config.js` 의 `routes` 로 등록되고, 그 화면을 메뉴에\n * 올리는 것은 운영자가 메뉴를 만들어 `figure-list` 를 가리키게 하는 일이다.\n */\nexport default function bootstrap() {\n  // 등록할 것이 생기면 여기에 둔다.\n}\n"]}

package/dist-client/graphql/index.d.ts

@@ -0,0 +1,41 @@
+import type { Figure, FigureFinding, FigureListResult, FigurePatch, FigureProposal, NewFigure } from '../types.js';
+export declare function fetchFigureList(params: {
+    page?: number;
+    limit?: number;
+    search?: string;
+    category?: string;
+    state?: string;
+}): Promise<FigureListResult>;
+/** 저작면에 필요한 전부 — `source` 를 포함한다. */
+export declare function fetchFigure(id: string): Promise<Figure>;
+/**
+ * 이미 쓰이고 있는 타입 이름.
+ *
+ * `type` 은 만든 뒤에 고칠 수 없으므로 **만들기 전에** 알려 줘야 한다. 저장을 눌러
+ * 거절당하고 나서 아는 것은 늦다.
+ */
+export declare function fetchFigureTypeNames(): Promise<string[]>;
+export interface SaveResult {
+    figure: Figure;
+    /** 막지 않는 발견. 저장은 됐지만 화면이 보여 줘야 한다. */
+    violations: FigureFinding[];
+}
+export declare function createFigure(figure: NewFigure): Promise<SaveResult>;
+export declare function updateFigure(id: string, patch: FigurePatch): Promise<SaveResult>;
+export declare function deleteFigure(id: string): Promise<boolean>;
+/**
+ * 저작 보조에게 후보를 시킨다.
+ *
+ * 팔레트를 **클라이언트가 보낸다.** 서버는 팔레트를 모른다 — things-scene 이 갖고
+ * 있는데 그 패키지의 node 조건은 팔레트가 없는 번들로 간다. 그리는 쪽이 어떤 토큰을
+ * 풀 수 있는지 아는 유일한 자리이므로 그쪽이 보낸다.
+ *
+ * 돌아오는 것은 **후보**다. 저장되지 않았다 — 저작자가 받아야 정본이 된다.
+ */
+export declare function proposeFigure(request: {
+    prompt: string;
+    base?: string;
+    type?: string;
+    palette: string[];
+    image?: File;
+}): Promise<FigureProposal>;