@things-factory/figure-ui 10.1.3

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

@@ -0,0 +1,221 @@
+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

@@ -0,0 +1 @@
+{"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"]}

package/dist-server/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 서버 몫이 없다 — 저장·검증은 `@things-factory/figure-service` 가 한다.
+ *
+ * 이 파일이 있는 이유는 `main` 이 가리키는 자리가 필요하기 때문이다. `board-ui` 도
+ * 같은 모양이다.
+ */
+export {};

package/dist-server/index.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=index.js.map

package/dist-server/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../server/index.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * 서버 몫이 없다 — 저장·검증은 `@things-factory/figure-service` 가 한다.\n *\n * 이 파일이 있는 이유는 `main` 이 가리키는 자리가 필요하기 때문이다. `board-ui` 도\n * 같은 모양이다.\n */\nexport {}\n"]}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@things-factory/figure-ui",
+  "version": "10.1.3",
+  "publishConfig": {
+    "access": "public",
+    "@things-factory:registry": "https://registry.npmjs.org"
+  },
+  "description": "Figure 저작 화면 — 목록과 3D 저작면. 컴포넌트 저작도구의 클라이언트 몫.",
+  "main": "dist-server/index.js",
+  "things-factory": true,
+  "author": "heartyoh <heartyoh@hatiolab.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hatiolab/things-factory.git",
+    "directory": "packages/board-ui"
+  },
+  "scripts": {
+    "build": "npm run build:server && npm run build:client",
+    "test": "node --import ./test/resolve-ts-siblings.mjs --test --test-force-exit test/*.test.ts",
+    "copy:files": "copyfiles -e \"./client/**/*.{ts,js,json}\" -u 1 \"./client/**/*\" dist-client",
+    "build:client": "npm run copy:files && npx tsc --p ./client/tsconfig.json",
+    "build:server": "npx tsc --p ./server/tsconfig.json",
+    "clean:client": "npx rimraf dist-client",
+    "clean:server": "npx rimraf dist-server",
+    "clean": "npm run clean:server && npm run clean:client"
+  },
+  "dependencies": {
+    "@hatiolab/figure-model": "^0.1.12",
+    "@hatiolab/things-scene": "^10.1.6",
+    "@material/web": "^2.0.0",
+    "@operato/graphql": "^10.0.0",
+    "@operato/i18n": "^10.0.0",
+    "@operato/layout": "^10.0.0",
+    "@operato/shell": "^10.0.0",
+    "@operato/styles": "^10.0.0",
+    "@things-factory/figure-service": "^10.1.3",
+    "three": "^0.185.1"
+  },
+  "gitHead": "8407b1e9d1f47f6676af144d4a33c8ac01cb49c4"
+}

package/server/index.ts

@@ -0,0 +1,7 @@
+/**
+ * 서버 몫이 없다 — 저장·검증은 `@things-factory/figure-service` 가 한다.
+ *
+ * 이 파일이 있는 이유는 `main` 이 가리키는 자리가 필요하기 때문이다. `board-ui` 도
+ * 같은 모양이다.
+ */
+export {}

package/server/tsconfig.json

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

package/test/brand-palette.test.ts

@@ -0,0 +1,188 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import test from 'node:test'
+
+/**
+ * 색이 **한 곳에만 살고, 글자가 읽힌다.**
+ *
+ * ── 무엇을 막나 ────────────────────────────────────────────────────────────
+ * 두 가지가 조용히 무너진다.
+ *
+ * **하나. 같은 색이 두 곳에 산다.** figure-ui 에는 팔레트가 없었고 하네스가 자기 `:root` 에
+ * 값을 직접 적고 있었다. 한쪽만 고치면 아무 오류 없이 두 얼굴이 된다 — 하네스에서 고른
+ * 색과 앱에서 보이는 색이 다른데 어디서도 말해 주지 않는다. plant 가 같은 결함을 겪었다.
+ *
+ * **둘. 색을 예쁘게 고치다가 글자가 안 읽히게 된다.** plant 가 실제로 그랬다. `#0e8a56` 에
+ * 「버튼 · 링크에 쓸 수 있다」고 적어 두었는데 흰 바탕 대비가 4.39 라 **큰 글자 기준만**
+ * 넘었다. 링크 글자와 작은 배지 두 자리가 조용히 미달이었다.
+ *
+ * 그래서 여기서 대비를 직접 잰다. 색을 무엇으로 정할지는 사람이 정한다 — 이 테스트가 보는
+ * 것은 **한 곳에 있는가**와 **읽히는가** 둘뿐이다.
+ */
+
+const HERE = import.meta.dirname
+const BRAND = join(HERE, '..', 'client', 'themes', 'brand.css')
+const THEMES = ['light.css', 'dark.css'].map(f => join(HERE, '..', 'client', 'themes', f))
+/** 저작 하네스. 이 저장소 안의 두 번째 사본 자리다. */
+const HARNESS = join(HERE, '..', '..', '..', 'test', 'browser', 'modeller-page.mjs')
+
+const read = (path: string) => readFileSync(path, 'utf8')
+
+/** `--이름: 값;` 을 모은다. 한 줄에 여러 개 붙어 있어도 잡는다. */
+function definitions(css: string): Map<string, string[]> {
+  const found = new Map<string, string[]>()
+
+  for (const match of css.matchAll(/--([a-z0-9-]+)\s*:\s*([^;}]+)/g)) {
+    const name = `--${match[1]}`
+    found.set(name, [...(found.get(name) ?? []), match[2]!.trim()])
+  }
+
+  return found
+}
+
+/** WCAG 상대 휘도. */
+function luminance(hex: string): number {
+  const parts = [1, 3, 5].map(at => parseInt(hex.slice(at, at + 2), 16) / 255)
+  const linear = parts.map(v => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4))
+
+  return 0.2126 * linear[0]! + 0.7152 * linear[1]! + 0.0722 * linear[2]!
+}
+
+/** 두 색의 대비. 작은 글자 기준은 4.5, 큰 글자와 굵은 선은 3.0 이다. */
+function contrast(a: string, b: string): number {
+  const [high, low] = [luminance(a), luminance(b)].sort((x, y) => y - x)
+
+  return (high! + 0.05) / (low! + 0.05)
+}
+
+/** 그 파일이 정한 색값. `var(...)` 로 넘긴 것은 따라가지 않는다. */
+function colorOf(css: string, name: string): string {
+  const value = definitions(css).get(name)?.[0]
+
+  assert.ok(value, `${name} 이 없다`)
+  assert.match(value, /^#[0-9a-f]{6}$/i, `${name} 이 6자리 hex 가 아니다: ${value}`)
+
+  return value
+}
+
+test('브랜드 색의 정본이 있다 — 없으면 아래 테스트가 다 통과해 버린다', () => {
+  const brand = definitions(read(BRAND))
+
+  for (const name of ['--brand-figure', '--brand-figure-2', '--brand-figure-wash']) {
+    assert.ok(brand.has(name), `${name} 이 brand.css 에 없다`)
+  }
+})
+
+test('앱 팔레트가 브랜드 색을 스스로 정하지 않는다 — 정본을 읽는다', () => {
+  for (const path of THEMES) {
+    const css = read(path)
+
+    assert.match(css, /\.\/brand\.css/, `${path} 가 brand.css 를 안 문다`)
+
+    const own = [...definitions(css).keys()].filter(name => name.startsWith('--brand-'))
+
+    assert.deepEqual(own, [], `${path} 가 브랜드 색을 스스로 정한다: ${own.join(' · ')}`)
+  }
+})
+
+test('하네스가 색을 스스로 정하지 않는다 — 이것이 원래 결함이었다', () => {
+  /*
+   * 하네스가 `--md-sys-color-primary: #4a5bbd` 처럼 열여섯 줄을 직접 들고 있었다. 그래서
+   * 하네스에서 보이는 화면과 앱에서 보일 화면이 다른 색이었고, 어느 쪽이 맞는지 알 방법이
+   * 없었다.
+   */
+  const css = read(HARNESS)
+  const own = [...definitions(css).keys()].filter(
+    name => name.startsWith('--md-sys-color-') || name.startsWith('--brand-')
+  )
+
+  assert.deepEqual(own, [], `하네스가 색을 스스로 정한다: ${own.join(' · ')}`)
+})
+
+test('밝은 면과 어두운 면을 함께 든다 — 한쪽만 있으면 어두운 화면이 안 바뀐다', () => {
+  const brand = read(BRAND)
+
+  assert.ok(definitions(brand).has('--brand-figure'), '밝은 면용이 없다')
+  assert.ok(definitions(brand).has('--brand-figure-2'), '어두운 면용이 없다')
+})
+
+test('브랜드 색 위의 흰 글자가 읽힌다 — 작은 글자 기준 4.5', () => {
+  const figure = colorOf(read(BRAND), '--brand-figure')
+  const measured = contrast(figure, '#ffffff')
+
+  assert.ok(measured >= 4.5, `${figure} 위 흰 글자 대비가 ${measured.toFixed(2)} 다`)
+})
+
+test('어두운 면 위의 브랜드 색이 읽힌다 — 그쪽은 -2 가 맡는다', () => {
+  const bright = colorOf(read(BRAND), '--brand-figure-2')
+  const surface = colorOf(read(THEMES[1]!), '--md-sys-color-surface')
+  const measured = contrast(bright, surface)
+
+  assert.ok(measured >= 4.5, `${bright} 를 ${surface} 위에 쓴 대비가 ${measured.toFixed(2)} 다`)
+})
+
+test('밝은 쪽 값을 어두운 면에 쓰지 않는다 — 이름이 뜻이고 값은 자리에 따라 다르다', () => {
+  /*
+   * `--brand-figure` 를 어두운 면에 그대로 쓰면 대비 1.6 이라 사라진다. 그 실수를 잡는다.
+   */
+  const figure = colorOf(read(BRAND), '--brand-figure')
+  const darkSurface = colorOf(read(THEMES[1]!), '--md-sys-color-surface')
+
+  assert.ok(
+    contrast(figure, darkSurface) < 4.5,
+    '밝은 면용 값이 어두운 면에서도 읽힌다 — 그렇다면 -2 를 둘 이유가 없다. 값을 다시 보라'
+  )
+
+  const dark = read(THEMES[1]!)
+  assert.match(dark, /--md-sys-color-primary:\s*var\(--brand-figure-2\)/, '어두운 테마가 -2 를 안 쓴다')
+})
+
+test('글자 셋이 다 읽힌다 — 흐린 것까지', () => {
+  const light = read(THEMES[0]!)
+  const surface = colorOf(light, '--md-sys-color-surface')
+
+  for (const name of [
+    '--md-sys-color-on-surface',
+    '--md-sys-color-on-surface-variant',
+    '--md-sys-color-on-surface-dim'
+  ]) {
+    const measured = contrast(colorOf(light, name), surface)
+
+    assert.ok(measured >= 4.5, `${name} 대비가 ${measured.toFixed(2)} 다`)
+  }
+})
+
+test('뜻이 있는 색이 배지 바탕 위에서 읽힌다 — 주의와 오류', () => {
+  const light = read(THEMES[0]!)
+
+  for (const [ink, ground] of [
+    ['--md-sys-color-on-tertiary-container', '--md-sys-color-tertiary-container'],
+    ['--md-sys-color-on-error-container', '--md-sys-color-error-container'],
+    ['--md-sys-color-on-secondary-container', '--md-sys-color-secondary-container']
+  ]) {
+    const measured = contrast(colorOf(light, ink!), colorOf(light, ground!))
+
+    assert.ok(measured >= 4.5, `${ink} / ${ground} 대비가 ${measured.toFixed(2)} 다`)
+  }
+})
+
+test('배지 바탕에 파스텔을 깔지 않는다 — 뜻은 글자색이 든다', () => {
+  /*
+   * 작은 면에 옅은 색을 깔면 화면이 싸구려로 보이고, 캔버스의 부품 색과도 섞인다. 배지 바탕은
+   * 무채색이어야 한다 — 세 채널이 서로 가까우면 무채색이다.
+   */
+  const light = read(THEMES[0]!)
+
+  for (const name of [
+    '--md-sys-color-tertiary-container',
+    '--md-sys-color-error-container',
+    '--md-sys-color-secondary-container'
+  ]) {
+    const hex = colorOf(light, name)
+    const [r, g, b] = [1, 3, 5].map(at => parseInt(hex.slice(at, at + 2), 16))
+    const spread = Math.max(r!, g!, b!) - Math.min(r!, g!, b!)
+
+    assert.ok(spread <= 12, `${name} 이 ${hex} 로 색을 띤다 (채널 차 ${spread})`)
+  }
+})

package/test/heading-scale-guard.test.ts

@@ -0,0 +1,144 @@
+/*
+ * **제목 크기는 눈금에서 고른다** — 화면마다 새 값을 만들지 않게 (2026-09-06).
+ *
+ * ── 무엇이 있었나 ───────────────────────────────────────────────────────────
+ * 사용자가 operato-plant 의 한 화면을 보고 「이렇게까지 엉망일 수가 있나」라고 했다. 그 화면
+ * 하나의 문제가 아니었다 — 두 저장소의 화면 110개를 훑어 보니 제목 크기 선언이 **23가지**였다.
+ *
+ *   18px 10회 · 15px 6회 · 17px 4회 · 12px 4회 · 13px 4회 · 14px 4회 · 19px 3회 · 13.5px 3회 ·
+ *   0.72rem 3회 · clamp() 둘 · 1.06em · 1.2rem · 1rem · 0.95rem · 0.8rem · 22px · 11px …
+ *
+ * 눈금은 이미 있다(`--ui-t-hero · title · body · small · micro`). 그런데 그 토큰을 쓴 자리는
+ * 넷뿐이었다. **어휘가 없어서가 아니라 아무도 쓰지 않아서** 화면마다 값이 생겼다.
+ *
+ * ── 이 가드가 막는 것 ───────────────────────────────────────────────────────
+ * 지금 있는 것을 한꺼번에 바꾸는 것은 화면 수십 개를 눈으로 확인하지 않고 움직이는 일이라 하지
+ * 않았다. 대신 **더 늘지 않게** 막는다. 새 화면이 22px 을 적으면 여기서 걸린다.
+ *
+ * ── 이 꾸러미의 화면 크기는 아직 대부분 직접 적혀 있다 ──────────────────────
+ * font-size 선언 72개가 전부 토큰이 아니다. 그 전부를 오늘 옮기는 것은 화면을 눈으로 확인하지
+ * 않고 움직이는 일이라 하지 않았다 — 제목만 정리하고, **더 늘지 않게** 여기서 막는다.
+ *
+ * ── 예외를 두되, 이유를 적게 한다 ───────────────────────────────────────────
+ * 눈금이 안 맞는 자리가 있다 — 읽는 문서(긴 글은 다른 눈금이고 반응형이 필요하다) · 서서 보는
+ * 현장 화면(팔을 뻗은 거리에서 장갑 낀 손으로 쓴다).
+ *
+ * 그래서 값을 막지 않고 **말을 요구한다.** 제목 블록 앞에 「조판 예외:」로 시작하는 주석이 있으면
+ * 통과한다. 목록을 이 파일에 모아 두는 방법도 있었는데, 그러면 이유가 코드에서 멀어지고 목록만
+ * 남는다 — 다음 사람이 그 줄을 보고 왜 예외인지 알 수 없다.
+ */
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { globSync } from 'node:fs'
+
+const CLIENT = fileURLToPath(new URL('../client/', import.meta.url))
+
+/**
+ * 제목 선택자의 스타일 블록.
+ *
+ * **제목으로 끝나는 선택자만** 본다 — `h2 {` · `header h2 {` · `.body h1 {`. 제목 **안의** 조각은
+ * 제목이 아니다(`.axis > h2 > .rate` 는 그 제목 옆에 붙는 수이고, `.body h1 + p` 는 문단이다).
+ * 그것까지 잡으면 가드가 눈금과 상관없는 자리에서 울린다.
+ */
+const HEADING_BLOCK = /(^|\n)([^\n{}]{0,80}\bh[1-6]\b(?:::?[a-z-]+(?:\([^)]*\))?)?\s*)\{([^}]{0,400}?)\}/gs
+
+/** 그 블록이 정한 글자 크기. */
+const FONT_SIZE = /font-size:\s*([^;]+);/
+
+/** 이 자리는 눈금 밖이라고 **적어 둔** 것. 이유가 함께 있어야 한다. */
+const EXCUSED = /조판 예외:/
+
+type Finding = { file: string; selector: string; value: string }
+
+function scan(): { findings: Finding[]; scanned: number; files: number } {
+  const findings: Finding[] = []
+  let scanned = 0
+  let files = 0
+
+  for (const path of globSync('**/*.ts', { cwd: CLIENT })) {
+    const source = readFileSync(CLIENT + path, 'utf-8')
+    if (!source.includes('css`')) continue
+
+    files++
+
+    for (const match of source.matchAll(HEADING_BLOCK)) {
+      const size = FONT_SIZE.exec(match[3])
+      if (!size) continue
+
+      scanned++
+
+      const value = size[1].trim()
+      if (value.startsWith('var(--')) continue
+
+      /*
+       * 블록 앞에 이유가 적혀 있나. 창을 넉넉히 잡는다 — 문서 조판처럼 제목 규칙 서넛이 붙어 있는
+       * 자리에서는 한 번 적은 이유가 그 무리 전체를 덮는 것이 자연스럽다.
+       */
+      const before = source.slice(Math.max(0, (match.index ?? 0) - 1200), match.index ?? 0)
+      if (EXCUSED.test(before)) continue
+
+      findings.push({ file: path, selector: match[2].trim(), value })
+    }
+  }
+
+  return { findings, scanned, files }
+}
+
+test('제목 크기는 눈금 토큰에서 고른다 — 화면마다 새 값을 만들지 않게', () => {
+  const { findings } = scan()
+
+  assert.deepEqual(
+    findings.map(one => `${one.file}  ${one.selector} → ${one.value}`),
+    [],
+    '제목 크기를 직접 적은 자리다. --ui-t-hero · title · body · small · micro 중에서 고르거나,\n' +
+      '눈금이 안 맞는 자리면 그 블록 앞에 「조판 예외: 왜 다른 눈금이어야 하는가」를 적는다.'
+  )
+})
+
+/**
+ * **가드가 빈 검사가 되지 않게.**
+ *
+ * 경로가 어긋나면 읽는 파일이 0이 되고, 0이면 언제나 통과한다 — 검사가 죽었는데 초록으로 보인다.
+ *
+ * 세는 것은 **제목 수가 아니라 읽은 화면 파일 수**다. 제목 요소를 안 쓰는 꾸러미가 있어서
+ * (ops-master 는 절 제목을 클래스로 그린다) 제목 수로 재면 그 꾸러미에서는 이 가드를 놓을 수가
+ * 없다. 규칙이 도는지는 아래 「무엇을 잡고 무엇을 통과시키나」가 따로 증명한다.
+ */
+test('★ 이 가드가 실제로 화면을 읽고 있다 — 0이면 검사가 죽은 것이다', () => {
+  const { files, scanned } = scan()
+
+  assert.ok(files >= 5, `css 를 쓰는 화면 파일을 ${files}개 읽었다. 경로가 어긋났을 수 있다`)
+  assert.ok(scanned >= 0, `제목 블록 ${scanned}개`)
+})
+
+/** 잡아야 하는 모양과 통과해야 하는 모양을 검사 자신이 준다. */
+test('★ 무엇을 잡고 무엇을 통과시키는지 — 규칙을 검사가 보인다', () => {
+  const catches = `
+    h2 { font-size: 19px; }
+  `
+  const passesToken = `
+    h2 { font-size: var(--ui-t-title, 15px); }
+  `
+  const passesExcused = `
+    /* 조판 예외: 읽는 문서의 눈금이다 */
+    .body h1 { font-size: clamp(28px, 4.6vw, 40px); }
+  `
+
+  const judge = (source: string) => {
+    for (const match of source.matchAll(HEADING_BLOCK)) {
+      const size = FONT_SIZE.exec(match[3])
+      if (!size) continue
+      if (size[1].trim().startsWith('var(--')) continue
+      const before = source.slice(Math.max(0, (match.index ?? 0) - 1200), match.index ?? 0)
+      if (EXCUSED.test(before)) continue
+      return 'caught'
+    }
+    return 'passed'
+  }
+
+  assert.equal(judge(catches), 'caught', '직접 적은 크기를 못 잡는다')
+  assert.equal(judge(passesToken), 'passed', '토큰을 잡으면 안 된다')
+  assert.equal(judge(passesExcused), 'passed', '이유를 적은 예외를 잡으면 안 된다')
+})