@things-factory/figure-ui 10.1.6 → 10.1.8

package/dist-client/types.d.ts

@@ -13,7 +13,10 @@ export interface Figure {
     type: string;
     name: string;
     description?: string;
+    /** 분류 하나 — 팔레트에서 묶어 보이는 기준. */
     category?: string;
+    /** 태그 여럿 — 분류로는 못 하는 찾기. */
+    tags?: string[];
     state?: 'draft' | 'released';
     /** 재활용 점수 0~100. 서버가 정본에서 계산한다 — 화면이 보내는 값이 아니다. */
     score?: number;
@@ -65,6 +68,7 @@ export interface NewFigure {
     name: string;
     description?: string;
     category?: string;
+    tags?: string[];
     source: string;
     properties?: string;
     state?: 'draft' | 'released';
@@ -80,6 +84,8 @@ export interface FigurePatch {
     name?: string;
     description?: string;
     category?: string;
+    /** 빈 배열은 「전부 지운다」, 안 주는 것은 「건드리지 않는다」. */
+    tags?: string[];
     source?: string;
     properties?: string;
     state?: 'draft' | 'released';
@@ -105,11 +111,36 @@ export interface FigureProposal {
     triangles: number;
     /** 재질 묶음 = 인스턴스 하나가 무는 draw call. */
     groups: number;
+    /** Rule-based review of measurable design concerns; it is not an aesthetic verdict. */
+    quality: {
+        status: 'ready' | 'review';
+        summary: string;
+        findings: Array<{
+            dimension: string;
+            code: string;
+            message: string;
+        }>;
+        visualRegions: number;
+        visualCoverage: number;
+        visualReadability: number;
+    };
     /** 형식은 맞으나 정책을 넘은 것. 막지 않는다 — 저작자가 정한다. */
     violations: FigureFinding[];
     /** 몇 번 만에 됐나. 진단용이다. */
     attempts: number;
 }
+/** 사람이 후보를 수락하거나 버릴 때 직접 남긴 현재 저작 세션의 참고 신호. */
+export interface ProposalFeedback {
+    outcome: 'accepted' | 'discarded';
+    selectedChanges: number;
+    totalChanges: number;
+    note?: string;
+    grade?: string;
+    quality?: {
+        status?: 'ready' | 'review';
+        findingCodes?: string[];
+    };
+}
 /**
  * 발행 판정 한 줄.
  *
@@ -117,6 +148,17 @@ export interface FigureProposal {
  * 발행 판정은 막는 것과 알리는 것을 함께 내므로 어느 쪽인지를 값이 스스로 말한다 — 코드를 보고
  * 화면이 다시 분류하면 규칙이 두 벌이 된다.
  */
+/** One reversible anchor edit the sizing gate has measured against this exact source. */
+export interface FigureGateFix {
+    findingWay: string;
+    part: string;
+    axis: 'x' | 'y' | 'z';
+    from?: string;
+    to: 'min' | 'center' | 'max' | 'span';
+    resolved: number;
+    /** All blocking sizing cases clear after this exact edit was remeasured server-side. */
+    safe: boolean;
+}
 export interface FigureGateFinding {
     code: string;
     message: string;
@@ -126,6 +168,8 @@ export interface FigureGateFinding {
     how?: string;
     /** 갈라진 부품 이름들, 또는 정본 안의 경로. */
     at?: string;
+    /** Candidate edits; the UI must preview and explicitly apply these, never auto-save them. */
+    fixes?: FigureGateFix[];
     blocking: boolean;
 }
 /** 발행해도 되나. `blocked` 면 서버가 거절한다. */

package/dist-client/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../client/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * 화면이 다루는 모양.\n *\n * 정본 형식(`FigureSource`)의 타입은 **여기서 다시 정의하지 않는다** —\n * `@hatiolab/figure-model` 에서 가져온다. 두 벌이면 갈리고, 갈리면 화면이 서버가\n * 거절할 것을 만들어 낸다.\n */\nexport type { FigureSource, FigureBlueprint, FigurePart, ErrorCode, ViolationCode } from '@hatiolab/figure-model'\n\n/** 서버가 돌려주는 Figure 한 벌. `source` 는 저작면에서만 받는다. */\nexport interface Figure {\n  id: string\n  /** 컴포넌트 타입 이름. **만든 뒤에 고칠 수 없다.** */\n  type: string\n  name: string\n  description?: string\n  category?: string\n  state?: 'draft' | 'released'\n  /** 재활용 점수 0~100. 서버가 정본에서 계산한다 — 화면이 보내는 값이 아니다. */\n  score?: number\n  triangles?: number\n  groups?: number\n  thumbnail?: string\n  thumbnailUpdatedAt?: string\n  updatedAt?: string\n  updater?: { id: string; name: string }\n  /** `FigureSource` JSON 문자열. 목록 질의에는 실려 오지 않는다. */\n  source?: string\n  properties?: string\n  version?: number\n}\n\n/**\n * 발행된 판 하나.\n *\n * 저작 중 저장은 여기 오지 않는다 — 판본은 발행에서만 생긴다.\n */\nexport interface FigureVersion {\n  version: number\n  /** 발행하며 남긴 말. */\n  comment?: string\n  state?: 'draft' | 'released'\n  updatedAt?: string\n  updater?: { id: string; name: string }\n  score?: number\n  triangles?: number\n  groups?: number\n}\n\nexport interface FigureListResult {\n  items: Figure[]\n  total: number\n}\n\n/**\n * 새 Figure.\n *\n * `score`·`triangles`·`groups` 가 없다 — **서버가 정본에서 계산한다.** 화면이 보내면\n * 거짓이 들어오고 목록이 실물과 다른 것을 보여 준다.\n */\nexport interface NewFigure {\n  type: string\n  name: string\n  description?: string\n  category?: string\n  source: string\n  properties?: string\n  state?: 'draft' | 'released'\n  thumbnail?: string\n}\n\n/**\n * 수정.\n *\n * `type` 이 없다 — 저장되는 식별자라 고칠 수 없다. 배치된 보드가 그 이름으로 타입을\n * 찾으므로, 바꾸면 그 보드가 빈 화면이 된다.\n */\nexport interface FigurePatch {\n  name?: string\n  description?: string\n  category?: string\n  source?: string\n  properties?: string\n  state?: 'draft' | 'released'\n  thumbnail?: string\n}\n\n/** 검증 결과 한 줄. 코드는 figure-model 의 것을 그대로 쓴다. */\nexport interface FigureFinding {\n  code: string\n  message: string\n  at?: string\n}\n\n/**\n * 저작 보조가 낸 후보.\n *\n * **정본이 아니다.** 저작자가 보고 받아야 정본이 된다 — 서버는 저장하지 않고\n * 돌려주기만 한다.\n */\nexport interface FigureProposal {\n  /** 후보 정본. JSON 문자열이다 — 화면이 파싱한다. */\n  source: string\n  score: number\n  grade: string\n  triangles: number\n  /** 재질 묶음 = 인스턴스 하나가 무는 draw call. */\n  groups: number\n  /** 형식은 맞으나 정책을 넘은 것. 막지 않는다 — 저작자가 정한다. */\n  violations: FigureFinding[]\n  /** 몇 번 만에 됐나. 진단용이다. */\n  attempts: number\n}\n\n/**\n * 발행 판정 한 줄.\n *\n * `FigureFinding` 과 달리 **`blocking` 이 있다.** 저장 쪽 발견은 정의상 막지 않는 것들이고,\n * 발행 판정은 막는 것과 알리는 것을 함께 내므로 어느 쪽인지를 값이 스스로 말한다 — 코드를 보고\n * 화면이 다시 분류하면 규칙이 두 벌이 된다.\n */\nexport interface FigureGateFinding {\n  code: string\n  message: string\n  /** 왜 그것이 문제인가 — 사람이 무엇을 보게 되나. */\n  why?: string\n  /** 무엇을 바꾸면 되나 — 부품 이름과 값으로. */\n  how?: string\n  /** 갈라진 부품 이름들, 또는 정본 안의 경로. */\n  at?: string\n  blocking: boolean\n}\n\n/** 발행해도 되나. `blocked` 면 서버가 거절한다. */\nexport interface FigureInspection {\n  blocked: boolean\n  findings: FigureGateFinding[]\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../client/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * 화면이 다루는 모양.\n *\n * 정본 형식(`FigureSource`)의 타입은 **여기서 다시 정의하지 않는다** —\n * `@hatiolab/figure-model` 에서 가져온다. 두 벌이면 갈리고, 갈리면 화면이 서버가\n * 거절할 것을 만들어 낸다.\n */\nexport type { FigureSource, FigureBlueprint, FigurePart, ErrorCode, ViolationCode } from '@hatiolab/figure-model'\n\n/** 서버가 돌려주는 Figure 한 벌. `source` 는 저작면에서만 받는다. */\nexport interface Figure {\n  id: string\n  /** 컴포넌트 타입 이름. **만든 뒤에 고칠 수 없다.** */\n  type: string\n  name: string\n  description?: string\n  /** 분류 하나 — 팔레트에서 묶어 보이는 기준. */\n  category?: string\n  /** 태그 여럿 — 분류로는 못 하는 찾기. */\n  tags?: string[]\n  state?: 'draft' | 'released'\n  /** 재활용 점수 0~100. 서버가 정본에서 계산한다 — 화면이 보내는 값이 아니다. */\n  score?: number\n  triangles?: number\n  groups?: number\n  thumbnail?: string\n  thumbnailUpdatedAt?: string\n  updatedAt?: string\n  updater?: { id: string; name: string }\n  /** `FigureSource` JSON 문자열. 목록 질의에는 실려 오지 않는다. */\n  source?: string\n  properties?: string\n  version?: number\n}\n\n/**\n * 발행된 판 하나.\n *\n * 저작 중 저장은 여기 오지 않는다 — 판본은 발행에서만 생긴다.\n */\nexport interface FigureVersion {\n  version: number\n  /** 발행하며 남긴 말. */\n  comment?: string\n  state?: 'draft' | 'released'\n  updatedAt?: string\n  updater?: { id: string; name: string }\n  score?: number\n  triangles?: number\n  groups?: number\n}\n\nexport interface FigureListResult {\n  items: Figure[]\n  total: number\n}\n\n/**\n * 새 Figure.\n *\n * `score`·`triangles`·`groups` 가 없다 — **서버가 정본에서 계산한다.** 화면이 보내면\n * 거짓이 들어오고 목록이 실물과 다른 것을 보여 준다.\n */\nexport interface NewFigure {\n  type: string\n  name: string\n  description?: string\n  category?: string\n  tags?: string[]\n  source: string\n  properties?: string\n  state?: 'draft' | 'released'\n  thumbnail?: string\n}\n\n/**\n * 수정.\n *\n * `type` 이 없다 — 저장되는 식별자라 고칠 수 없다. 배치된 보드가 그 이름으로 타입을\n * 찾으므로, 바꾸면 그 보드가 빈 화면이 된다.\n */\nexport interface FigurePatch {\n  name?: string\n  description?: string\n  category?: string\n  /** 빈 배열은 「전부 지운다」, 안 주는 것은 「건드리지 않는다」. */\n  tags?: string[]\n  source?: string\n  properties?: string\n  state?: 'draft' | 'released'\n  thumbnail?: string\n}\n\n/** 검증 결과 한 줄. 코드는 figure-model 의 것을 그대로 쓴다. */\nexport interface FigureFinding {\n  code: string\n  message: string\n  at?: string\n}\n\n/**\n * 저작 보조가 낸 후보.\n *\n * **정본이 아니다.** 저작자가 보고 받아야 정본이 된다 — 서버는 저장하지 않고\n * 돌려주기만 한다.\n */\nexport interface FigureProposal {\n  /** 후보 정본. JSON 문자열이다 — 화면이 파싱한다. */\n  source: string\n  score: number\n  grade: string\n  triangles: number\n  /** 재질 묶음 = 인스턴스 하나가 무는 draw call. */\n  groups: number\n  /** Rule-based review of measurable design concerns; it is not an aesthetic verdict. */\n  quality: {\n    status: 'ready' | 'review'\n    summary: string\n    findings: Array<{ dimension: string; code: string; message: string }>\n    visualRegions: number\n    visualCoverage: number\n    visualReadability: number\n  }\n  /** 형식은 맞으나 정책을 넘은 것. 막지 않는다 — 저작자가 정한다. */\n  violations: FigureFinding[]\n  /** 몇 번 만에 됐나. 진단용이다. */\n  attempts: number\n}\n\n/** 사람이 후보를 수락하거나 버릴 때 직접 남긴 현재 저작 세션의 참고 신호. */\nexport interface ProposalFeedback {\n  outcome: 'accepted' | 'discarded'\n  selectedChanges: number\n  totalChanges: number\n  note?: string\n  grade?: string\n  quality?: { status?: 'ready' | 'review'; findingCodes?: string[] }\n}\n\n/**\n * 발행 판정 한 줄.\n *\n * `FigureFinding` 과 달리 **`blocking` 이 있다.** 저장 쪽 발견은 정의상 막지 않는 것들이고,\n * 발행 판정은 막는 것과 알리는 것을 함께 내므로 어느 쪽인지를 값이 스스로 말한다 — 코드를 보고\n * 화면이 다시 분류하면 규칙이 두 벌이 된다.\n */\n/** One reversible anchor edit the sizing gate has measured against this exact source. */\nexport interface FigureGateFix {\n  findingWay: string\n  part: string\n  axis: 'x' | 'y' | 'z'\n  from?: string\n  to: 'min' | 'center' | 'max' | 'span'\n  resolved: number\n  /** All blocking sizing cases clear after this exact edit was remeasured server-side. */\n  safe: boolean\n}\n\nexport interface FigureGateFinding {\n  code: string\n  message: string\n  /** 왜 그것이 문제인가 — 사람이 무엇을 보게 되나. */\n  why?: string\n  /** 무엇을 바꾸면 되나 — 부품 이름과 값으로. */\n  how?: string\n  /** 갈라진 부품 이름들, 또는 정본 안의 경로. */\n  at?: string\n  /** Candidate edits; the UI must preview and explicitly apply these, never auto-save them. */\n  fixes?: FigureGateFix[]\n  blocking: boolean\n}\n\n/** 발행해도 되나. `blocked` 면 서버가 거절한다. */\nexport interface FigureInspection {\n  blocked: boolean\n  findings: FigureGateFinding[]\n}\n"]}

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

@@ -97,6 +97,65 @@ let FigureThumb = class FigureThumb extends localize(i18next)(LitElement) {
       border-radius: 4px;
     }
 
+    /*
+      태그 — **그림 위에 얹는다.**
+
+      카드 본문에 한 줄로 두었더니 태그가 있는 카드만 그만큼 높아져 격자가 들쭉날쭉해졌다.
+      태그는 도형마다 개수가 다르므로 본문에 두는 한 이 문제가 남는다. 그림 위는 이미 자리가
+      잡혀 있고(초안 표시·삭제), 얹어도 카드 높이가 변하지 않는다.
+
+      아래쪽에 둔다 — 위는 초안 표시와 삭제 단추가 쓴다.
+
+      **투명한 알약이다.** 면을 꽉 채우면 그림 위에 흰 띠가 생겨 형상을 가린다 — 카탈로그에서
+      먼저 보아야 하는 것은 형상이다. 그래서 바탕은 거의 비우고, 읽히는 것은 뒤를 흐리는 것과
+      실낱 테두리가 맡는다. 흐림이 안 되는 환경에서도 테두리가 남아 글자가 형상에 묻히지 않는다.
+    */
+    div[tags] {
+      position: absolute;
+      right: 6px;
+      bottom: 6px;
+      left: 6px;
+      display: flex;
+      flex-wrap: wrap-reverse;
+      justify-content: flex-end;
+      gap: 3px;
+      /* 태그가 많아도 그림을 덮지 않는다 — 넘치는 것은 위로 잘린다 */
+      max-height: 44px;
+      overflow: hidden;
+      /* 알약 사이의 빈 자리는 그림이 받는다 — 거기서 누르면 저작면이 열린다 */
+      pointer-events: none;
+    }
+    /*
+      **알약은 누를 수 있다.** 누르면 그 태그로 목록을 거른다.
+
+      태그를 눈에 보이게 한 다음의 물음은 「그래서 이걸로 뭘 하나」다. 같은 태그가 붙은 것을
+      보려고 태그를 눈으로 읽어 검색창에 옮겨 적게 두면, 보여 준 뜻이 절반만 산다.
+
+      카드 자체가 저작면을 여는 자리이므로 알약에서 그 클릭을 멈춘다 — 안 멈추면 태그를 누른
+      사람이 편집기로 끌려간다.
+    */
+    div[tags] button {
+      pointer-events: auto;
+      cursor: pointer;
+      padding: 0 7px;
+      font: var(--label-font, inherit);
+      font-size: 0.66rem;
+      line-height: 1.7;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background-color: color-mix(in srgb, var(--md-sys-color-surface, #fff) 34%, transparent);
+      border: 1px solid color-mix(in srgb, var(--md-sys-color-outline, #888) 42%, transparent);
+      backdrop-filter: blur(4px);
+      border-radius: 999em;
+      white-space: nowrap;
+    }
+    div[tags] button:hover,
+    div[tags] button:focus-visible {
+      color: var(--md-sys-color-on-surface);
+      background-color: color-mix(in srgb, var(--md-sys-color-surface, #fff) 72%, transparent);
+      border-color: var(--md-sys-color-primary);
+      outline: none;
+    }
+
     button[remove] {
       position: absolute;
       top: 5px;
@@ -142,6 +201,21 @@ let FigureThumb = class FigureThumb extends localize(i18next)(LitElement) {
             </div>
           `}
       ${figure.state === 'released' ? '' : html `<span draft>${i18next.t('figure.label.draft')}</span>`}
+      ${figure.tags?.length
+            ? html `<div tags>
+            ${figure.tags.map(tag => html `
+                <button
+                  title=${i18next.t('figure.text.find-by-this-tag')}
+                  @click=${(e) => {
+                e.stopPropagation();
+                this.dispatchEvent(new CustomEvent('search-tag', { detail: { tag }, bubbles: true, composed: true }));
+            }}
+                >
+                  ${tag}
+                </button>
+              `)}
+          </div>`
+            : ''}
 
       <button
         remove

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

@@ -1 +1 @@
-{"version":3,"file":"figure-thumb.js","sourceRoot":"","sources":["../../client/viewparts/figure-thumb.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAI5C;;;;;;;;;GASG;AACH,SAAS,YAAY,CAAC,MAAc;IAClC,IAAI,CAAC,MAAM,CAAC,kBAAkB,EAAE,CAAC;QAC/B,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,MAAM,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;IACtD,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,OAAO,EAAE,CAAA;IAE3D,OAAO,GAAG,WAAW,qBAAqB,MAAM,CAAC,EAAE,MAAM,KAAK,EAAE,CAAA;AAClE,CAAC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACrD,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFlB,AAnFY,CAmFZ;IAID,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QAC1B,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,MAAM,GAAG,GAAG,YAAY,CAAC,MAAM,CAAC,CAAA;QAEhC,OAAO,IAAI,CAAA;QACP,GAAG;YACH,CAAC,CAAC,IAAI,CAAA,YAAY,GAAG,QAAQ,MAAM,CAAC,IAAI,IAAI,EAAE,oBAAoB;YAClE,CAAC,CAAC,IAAI,CAAA;;;gBAGE,OAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC;;WAEpD;QACH,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,SAAS;;;;gBAItF,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC;iBACvC,CAAC,CAAQ,EAAE,EAAE;YACpB,sCAAsC;YACtC,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAA;QAC/C,CAAC;;;;KAIJ,CAAA;IACH,CAAC;;AAjC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAgB;AAtFhC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAwHvB","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'\nimport { getPathInfo } from '@operato/utils'\n\nimport type { Figure } from '../types.js'\n\n/**\n * 그림을 부르는 주소.\n *\n * **base64 를 목록 응답에 실어 오지 않는다.** data URL 은 브라우저가 캐시할 수 없어, 카탈로그를\n * 열 때마다 그림 전부가 다시 온다([확인함] 표본 14개 227KB). 주소로 부르면 캐시가 되고, 판을\n * 가리는 `v` 가 바뀐 것만 다시 받는다. 내주는 자리는 `figure-thumbnail-router` 다.\n *\n * 도메인 조각(`/domain/{subdomain}`)은 셸이 쓰는 것과 같은 함수로 읽는다 — 화면이 주소를\n * 손으로 짜맞추면 도메인이 바뀌는 배치에서 조용히 틀린다.\n */\nfunction thumbnailSrc(figure: Figure): string | undefined {\n  if (!figure.thumbnailUpdatedAt) {\n    return undefined\n  }\n\n  const { contextPath } = getPathInfo(location.pathname)\n  const stamp = new Date(figure.thumbnailUpdatedAt).getTime()\n\n  return `${contextPath}/figure-thumbnail/${figure.id}?v=${stamp}`\n}\n\n/**\n * 카드의 그림 칸.\n *\n * ## 왜 컴포넌트인가\n *\n * 카탈로그는 `ox-grist` 의 CARD 모드로 그린다. 격자에게 그림 칸은 컬럼 하나이고, 그 칸을 그리는\n * 것은 컬럼의 `record.renderer` 다. 그림 위에 얹히는 것들(초안 표시, 삭제)은 **그림 칸 안에**\n * 있어야 하므로 renderer 가 그려야 하는데, renderer 의 결과는 `ox-card-field` 의 shadow root\n * 안으로 들어간다 — 화면의 `static styles` 가 닿지 않고, 인라인 style 로는 `:hover` 를 쓸 수 없다.\n *\n * 그래서 그림 칸만 컴포넌트로 둔다. 자기 스타일을 갖고 있으니 hover 도 테마도 정상으로 돈다.\n * 격자로 옮기기 전 손으로 만들었던 카드의 위쪽 절반이 그대로 이 자리다.\n *\n * ## 삭제가 왜 여기 있나\n *\n * 격자의 gutter 줄에 두면 카드 아래에 단추 줄이 하나 생긴다. 감춰도 자리가 남고, 자리를 없애면\n * 눌릴 곳이 사라진다. 되돌릴 수 없는 조작은 **고르는 눈길에 걸리지 않아야** 하므로 그림 오른쪽\n * 위, 손이 갔을 때만 나오는 자리에 둔다.\n */\n@customElement('figure-thumb')\nexport class FigureThumb extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      position: relative;\n      display: block;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    img {\n      display: block;\n      width: 100%;\n      height: 100%;\n      /* 형상을 자르지 않는다 — 긴 것(컨베이어)과 높은 것(시그널타워)이 한 줄에 선다 */\n      object-fit: contain;\n    }\n\n    /* 아직 그림이 없는 것을 빈 사각형으로 두지 않는다 — 왜 없는지 말한다 */\n    div[empty] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--spacing-tiny, 4px);\n      width: 100%;\n      height: 100%;\n      font: var(--label-font, inherit);\n      font-size: 0.7rem;\n      color: var(--md-sys-color-outline);\n    }\n    div[empty] md-icon {\n      --md-icon-size: 26px;\n      color: var(--md-sys-color-outline-variant);\n    }\n\n    /*\n      초안 표시.\n\n      발행된 것에는 아무 말도 하지 않는다 — 카탈로그에 있는 것은 대개 발행된 것이라, 카드마다\n      「발행됨」이 붙으면 아무것도 가르지 않고 자리만 먹는다. 초안만 말하면 이 표시가 있는 카드가\n      곧 「아직 쓰면 안 되는 것」이 된다.\n    */\n    span[draft] {\n      position: absolute;\n      top: 6px;\n      left: 6px;\n      padding: 1px 7px;\n      font: var(--label-font, inherit);\n      font-size: 0.68rem;\n      line-height: 1.5;\n      color: var(--md-sys-color-on-secondary-container);\n      background-color: var(--md-sys-color-secondary-container);\n      border-radius: 4px;\n    }\n\n    button[remove] {\n      position: absolute;\n      top: 5px;\n      right: 5px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 3px;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      /* 그림이 밝을 수도 어두울 수도 있다 — 옅은 면을 깔아 아이콘이 어디서나 읽히게 한다 */\n      background-color: color-mix(in srgb, var(--md-sys-color-surface, #fff) 82%, transparent);\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n      opacity: 0;\n      transition: opacity 0.12s ease-out;\n    }\n    button[remove] md-icon {\n      --md-icon-size: 18px;\n    }\n    :host(:hover) button[remove],\n    button[remove]:focus-visible {\n      opacity: 1;\n    }\n    button[remove]:hover {\n      color: var(--md-sys-color-on-error, #fff);\n      background-color: var(--md-sys-color-error);\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    const src = thumbnailSrc(figure)\n\n    return html`\n      ${src\n        ? html`<img src=${src} alt=${figure.name || ''} loading=\"lazy\" />`\n        : html`\n            <div empty>\n              <md-icon>deployed_code</md-icon>\n              ${i18next.t('figure.text.thumbnail-not-made-yet')}\n            </div>\n          `}\n      ${figure.state === 'released' ? '' : html`<span draft>${i18next.t('figure.label.draft')}</span>`}\n\n      <button\n        remove\n        title=${i18next.t('figure.button.delete-figure')}\n        @click=${(e: Event) => {\n          /* 카드 클릭(=저작면 열기)까지 올라가지 않게 여기서 멈춘다 */\n          e.stopPropagation()\n          this.dispatchEvent(new CustomEvent('remove'))\n        }}\n      >\n        <md-icon>delete</md-icon>\n      </button>\n    `\n  }\n}\n"]}
+{"version":3,"file":"figure-thumb.js","sourceRoot":"","sources":["../../client/viewparts/figure-thumb.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'\nimport { getPathInfo } from '@operato/utils'\n\nimport type { Figure } from '../types.js'\n\n/**\n * 그림을 부르는 주소.\n *\n * **base64 를 목록 응답에 실어 오지 않는다.** data URL 은 브라우저가 캐시할 수 없어, 카탈로그를\n * 열 때마다 그림 전부가 다시 온다([확인함] 표본 14개 227KB). 주소로 부르면 캐시가 되고, 판을\n * 가리는 `v` 가 바뀐 것만 다시 받는다. 내주는 자리는 `figure-thumbnail-router` 다.\n *\n * 도메인 조각(`/domain/{subdomain}`)은 셸이 쓰는 것과 같은 함수로 읽는다 — 화면이 주소를\n * 손으로 짜맞추면 도메인이 바뀌는 배치에서 조용히 틀린다.\n */\nfunction thumbnailSrc(figure: Figure): string | undefined {\n  if (!figure.thumbnailUpdatedAt) {\n    return undefined\n  }\n\n  const { contextPath } = getPathInfo(location.pathname)\n  const stamp = new Date(figure.thumbnailUpdatedAt).getTime()\n\n  return `${contextPath}/figure-thumbnail/${figure.id}?v=${stamp}`\n}\n\n/**\n * 카드의 그림 칸.\n *\n * ## 왜 컴포넌트인가\n *\n * 카탈로그는 `ox-grist` 의 CARD 모드로 그린다. 격자에게 그림 칸은 컬럼 하나이고, 그 칸을 그리는\n * 것은 컬럼의 `record.renderer` 다. 그림 위에 얹히는 것들(초안 표시, 삭제)은 **그림 칸 안에**\n * 있어야 하므로 renderer 가 그려야 하는데, renderer 의 결과는 `ox-card-field` 의 shadow root\n * 안으로 들어간다 — 화면의 `static styles` 가 닿지 않고, 인라인 style 로는 `:hover` 를 쓸 수 없다.\n *\n * 그래서 그림 칸만 컴포넌트로 둔다. 자기 스타일을 갖고 있으니 hover 도 테마도 정상으로 돈다.\n * 격자로 옮기기 전 손으로 만들었던 카드의 위쪽 절반이 그대로 이 자리다.\n *\n * ## 삭제가 왜 여기 있나\n *\n * 격자의 gutter 줄에 두면 카드 아래에 단추 줄이 하나 생긴다. 감춰도 자리가 남고, 자리를 없애면\n * 눌릴 곳이 사라진다. 되돌릴 수 없는 조작은 **고르는 눈길에 걸리지 않아야** 하므로 그림 오른쪽\n * 위, 손이 갔을 때만 나오는 자리에 둔다.\n */\n@customElement('figure-thumb')\nexport class FigureThumb extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      position: relative;\n      display: block;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    img {\n      display: block;\n      width: 100%;\n      height: 100%;\n      /* 형상을 자르지 않는다 — 긴 것(컨베이어)과 높은 것(시그널타워)이 한 줄에 선다 */\n      object-fit: contain;\n    }\n\n    /* 아직 그림이 없는 것을 빈 사각형으로 두지 않는다 — 왜 없는지 말한다 */\n    div[empty] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--spacing-tiny, 4px);\n      width: 100%;\n      height: 100%;\n      font: var(--label-font, inherit);\n      font-size: 0.7rem;\n      color: var(--md-sys-color-outline);\n    }\n    div[empty] md-icon {\n      --md-icon-size: 26px;\n      color: var(--md-sys-color-outline-variant);\n    }\n\n    /*\n      초안 표시.\n\n      발행된 것에는 아무 말도 하지 않는다 — 카탈로그에 있는 것은 대개 발행된 것이라, 카드마다\n      「발행됨」이 붙으면 아무것도 가르지 않고 자리만 먹는다. 초안만 말하면 이 표시가 있는 카드가\n      곧 「아직 쓰면 안 되는 것」이 된다.\n    */\n    span[draft] {\n      position: absolute;\n      top: 6px;\n      left: 6px;\n      padding: 1px 7px;\n      font: var(--label-font, inherit);\n      font-size: 0.68rem;\n      line-height: 1.5;\n      color: var(--md-sys-color-on-secondary-container);\n      background-color: var(--md-sys-color-secondary-container);\n      border-radius: 4px;\n    }\n\n    /*\n      태그 — **그림 위에 얹는다.**\n\n      카드 본문에 한 줄로 두었더니 태그가 있는 카드만 그만큼 높아져 격자가 들쭉날쭉해졌다.\n      태그는 도형마다 개수가 다르므로 본문에 두는 한 이 문제가 남는다. 그림 위는 이미 자리가\n      잡혀 있고(초안 표시·삭제), 얹어도 카드 높이가 변하지 않는다.\n\n      아래쪽에 둔다 — 위는 초안 표시와 삭제 단추가 쓴다.\n\n      **투명한 알약이다.** 면을 꽉 채우면 그림 위에 흰 띠가 생겨 형상을 가린다 — 카탈로그에서\n      먼저 보아야 하는 것은 형상이다. 그래서 바탕은 거의 비우고, 읽히는 것은 뒤를 흐리는 것과\n      실낱 테두리가 맡는다. 흐림이 안 되는 환경에서도 테두리가 남아 글자가 형상에 묻히지 않는다.\n    */\n    div[tags] {\n      position: absolute;\n      right: 6px;\n      bottom: 6px;\n      left: 6px;\n      display: flex;\n      flex-wrap: wrap-reverse;\n      justify-content: flex-end;\n      gap: 3px;\n      /* 태그가 많아도 그림을 덮지 않는다 — 넘치는 것은 위로 잘린다 */\n      max-height: 44px;\n      overflow: hidden;\n      /* 알약 사이의 빈 자리는 그림이 받는다 — 거기서 누르면 저작면이 열린다 */\n      pointer-events: none;\n    }\n    /*\n      **알약은 누를 수 있다.** 누르면 그 태그로 목록을 거른다.\n\n      태그를 눈에 보이게 한 다음의 물음은 「그래서 이걸로 뭘 하나」다. 같은 태그가 붙은 것을\n      보려고 태그를 눈으로 읽어 검색창에 옮겨 적게 두면, 보여 준 뜻이 절반만 산다.\n\n      카드 자체가 저작면을 여는 자리이므로 알약에서 그 클릭을 멈춘다 — 안 멈추면 태그를 누른\n      사람이 편집기로 끌려간다.\n    */\n    div[tags] button {\n      pointer-events: auto;\n      cursor: pointer;\n      padding: 0 7px;\n      font: var(--label-font, inherit);\n      font-size: 0.66rem;\n      line-height: 1.7;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      background-color: color-mix(in srgb, var(--md-sys-color-surface, #fff) 34%, transparent);\n      border: 1px solid color-mix(in srgb, var(--md-sys-color-outline, #888) 42%, transparent);\n      backdrop-filter: blur(4px);\n      border-radius: 999em;\n      white-space: nowrap;\n    }\n    div[tags] button:hover,\n    div[tags] button:focus-visible {\n      color: var(--md-sys-color-on-surface);\n      background-color: color-mix(in srgb, var(--md-sys-color-surface, #fff) 72%, transparent);\n      border-color: var(--md-sys-color-primary);\n      outline: none;\n    }\n\n    button[remove] {\n      position: absolute;\n      top: 5px;\n      right: 5px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 3px;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      /* 그림이 밝을 수도 어두울 수도 있다 — 옅은 면을 깔아 아이콘이 어디서나 읽히게 한다 */\n      background-color: color-mix(in srgb, var(--md-sys-color-surface, #fff) 82%, transparent);\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n      opacity: 0;\n      transition: opacity 0.12s ease-out;\n    }\n    button[remove] md-icon {\n      --md-icon-size: 18px;\n    }\n    :host(:hover) button[remove],\n    button[remove]:focus-visible {\n      opacity: 1;\n    }\n    button[remove]:hover {\n      color: var(--md-sys-color-on-error, #fff);\n      background-color: var(--md-sys-color-error);\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    const src = thumbnailSrc(figure)\n\n    return html`\n      ${src\n        ? html`<img src=${src} alt=${figure.name || ''} loading=\"lazy\" />`\n        : html`\n            <div empty>\n              <md-icon>deployed_code</md-icon>\n              ${i18next.t('figure.text.thumbnail-not-made-yet')}\n            </div>\n          `}\n      ${figure.state === 'released' ? '' : html`<span draft>${i18next.t('figure.label.draft')}</span>`}\n      ${figure.tags?.length\n        ? html`<div tags>\n            ${figure.tags.map(\n              tag => html`\n                <button\n                  title=${i18next.t('figure.text.find-by-this-tag')}\n                  @click=${(e: Event) => {\n                    e.stopPropagation()\n                    this.dispatchEvent(\n                      new CustomEvent('search-tag', { detail: { tag }, bubbles: true, composed: true })\n                    )\n                  }}\n                >\n                  ${tag}\n                </button>\n              `\n            )}\n          </div>`\n        : ''}\n\n      <button\n        remove\n        title=${i18next.t('figure.button.delete-figure')}\n        @click=${(e: Event) => {\n          /* 카드 클릭(=저작면 열기)까지 올라가지 않게 여기서 멈춘다 */\n          e.stopPropagation()\n          this.dispatchEvent(new CustomEvent('remove'))\n        }}\n      >\n        <md-icon>delete</md-icon>\n      </button>\n    `\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.6",
+  "version": "10.1.8",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -26,7 +26,7 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@hatiolab/figure-model": "^0.1.15",
+    "@hatiolab/figure-model": "^0.1.16",
     "@hatiolab/things-scene": "^10.1.10",
     "@material/web": "^2.0.0",
     "@operato/data-grist": "^10.0.0",
@@ -37,9 +37,8 @@
     "@operato/shell": "^10.0.0",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
-    "@things-factory/ai-assistant": "^10.1.6",
-    "@things-factory/figure-service": "^10.1.6",
+    "@things-factory/figure-service": "^10.1.8",
     "three": "^0.185.1"
   },
-  "gitHead": "963aeb9ac470be5aea05bb5842a0a92afcab6036"
+  "gitHead": "c402982e29aab3b49e56bea4e41948be6a749c7f"
 }

package/test/ai-proposal-contract.test.ts

@@ -0,0 +1,169 @@
+/*
+ * AI 후보가 저작 화면의 정본에 닿는 마지막 경계다.
+ *
+ * 모델의 응답은 신뢰하지 않는다. `proposal.ts`는 사람이 고른 변경만 옮기고, 저장 식별자인
+ * Figure type과 이름으로 연결된 부품의 의미를 보존해야 한다. 이 순수 로직을 Lit 화면 밖에서
+ * 시험해 두면 DOM 배선이 바뀌어도 후보 수락 규칙이 조용히 약해지지 않는다.
+ */
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { test } from 'node:test'
+
+import { applyProposal, diffProposal, takeProposal } from '../client/modeller/proposal.ts'
+import { feedbackFromSession, openAiProposal, openSizingFix, toggleProposalChange } from '../client/modeller/proposal-session.ts'
+
+const current = () => ({
+  type: 'MIXER',
+  base: { x: 100, y: 100, z: 100 },
+  detailLevel: 'M',
+  parts: [
+    {
+      name: 'body',
+      primitive: 'cube',
+      transform: { position: { x: 0, y: 0, z: 0 }, size: { x: 100, y: 100, z: 100 } },
+      material: { token: 'palette.primary' }
+    },
+    {
+      name: 'motor',
+      primitive: 'cube',
+      transform: { position: { x: 0, y: 60, z: 0 }, size: { x: 20, y: 20, z: 20 } },
+      material: { token: 'palette.neutral' }
+    }
+  ]
+})
+
+const proposal = () => ({
+  type: 'FORKLIFT', // 모델이 이 값을 지어내도 이미 저장된 Figure의 type은 바꾸지 않는다.
+  base: { x: 200, y: 100, z: 100 },
+  detailLevel: 'L',
+  parts: [
+    {
+      name: 'body',
+      primitive: 'cube',
+      transform: { position: { x: 0, y: 0, z: 0 }, size: { x: 200, y: 100, z: 100 } },
+      material: { token: 'palette.accent' }
+    },
+    {
+      name: 'guard',
+      primitive: 'cube',
+      transform: { position: { x: 0, y: 50, z: 0 }, size: { x: 100, y: 10, z: 10 } },
+      material: { token: 'palette.primary' }
+    }
+  ]
+})
+
+test('AI 후보는 모든 변경을 이름 단위로 드러낸다 — 사람에게 숨은 변경이 없다', () => {
+  const changes = diffProposal(current() as any, proposal() as any)
+
+  assert.deepEqual(
+    changes.map(change => `${change.kind}:${change.key}`).sort(),
+    ['added:guard', 'base:base', 'changed:body', 'detail:detailLevel', 'removed:motor']
+  )
+})
+
+test('선택하지 않은 후보 변경은 정본에 들어가지 않는다', () => {
+  const result = applyProposal(current() as any, proposal() as any, new Set(['body', 'base']))
+
+  assert.deepEqual(result.base, { x: 200, y: 100, z: 100 })
+  assert.equal(result.detailLevel, 'M')
+  assert.deepEqual(result.parts.map(part => part.name), ['body', 'motor'])
+  assert.equal(result.parts[0].material.token, 'palette.accent')
+})
+
+test('후보가 다른 type을 내도 이미 존재하는 Figure의 저장 식별자는 보존한다', () => {
+  const result = takeProposal(current() as any, proposal() as any)
+
+  assert.equal(result.type, 'MIXER')
+})
+
+test('새 Figure의 후보는 사람의 수락 전까지 입력 source를 바꾸지 않는다', () => {
+  const candidate = proposal()
+  const result = takeProposal(undefined, candidate as any)
+
+  assert.notEqual(result, candidate)
+  assert.equal(candidate.type, 'FORKLIFT')
+  assert.equal(result.type, 'FORKLIFT')
+})
+
+test('AI 후보의 검토 상태는 하나의 세션으로 열리고, 선택은 불변으로 바뀐다', () => {
+  const candidate = openAiProposal(current() as any, {
+    source: JSON.stringify(proposal()),
+    grade: 'L',
+    triangles: 42,
+    groups: 2,
+    attempts: 1,
+    quality: { status: 'ready', summary: 'ready', findings: [], visualRegions: 1, visualCoverage: 1, visualReadability: 1 }
+  } as any)
+
+  const toggled = toggleProposalChange(candidate, 'body')
+  assert.notEqual(toggled, candidate)
+  assert.equal(candidate.picked.has('body'), true)
+  assert.equal(toggled.picked.has('body'), false)
+  assert.equal(toggled.note, '')
+})
+
+test('발행 게이트 수정과 AI 후보는 같은 검토 세션 경계를 쓴다', () => {
+  const session = openSizingFix(current() as any, { part: 'body', axis: 'x', from: 'auto', to: 'max' } as any)
+  assert.equal(session?.metrics, undefined)
+  assert.equal(session?.source.parts[0].anchor?.x, 'max')
+  assert.equal(openSizingFix(current() as any, { part: 'missing', axis: 'x', to: 'max' } as any), undefined)
+})
+
+test('피드백은 후보 세션의 선택과 측정값만 전송한다', () => {
+  const session = openAiProposal(current() as any, {
+    source: JSON.stringify(proposal()),
+    grade: 'L',
+    triangles: 42,
+    groups: 2,
+    attempts: 1,
+    quality: { status: 'review', summary: 'check', findings: [{ dimension: 'shape', code: 'S1', message: 'check' }], visualRegions: 1, visualCoverage: 1, visualReadability: 1 }
+  } as any)
+  const feedback = feedbackFromSession(current() as any, { ...session, note: ' keep body ' }, 'accepted')
+  assert.deepEqual(feedback, {
+    outcome: 'accepted', selectedChanges: session.picked.size, totalChanges: session.picked.size,
+    note: 'keep body', grade: 'L', quality: { status: 'review', findingCodes: ['S1'] }
+  })
+})
+
+test('모델러 AI 입구는 후보만 알리고, 팔레트·그림·현재 정본을 서버에 함께 보낸다', () => {
+  /* Lit 컴포넌트는 DOM 없이 실로드하지 않는다. 이 경계에서는 실제 소스 계약을 읽는다. */
+  const path = fileURLToPath(new URL('../client/modeller/figure-ask.ts', import.meta.url))
+  const source = readFileSync(path, 'utf8')
+
+  assert.match(source, /proposeFigure\(\{[\s\S]*prompt,[\s\S]*base: this\.source \? JSON\.stringify\(this\.source\) : undefined,[\s\S]*type: this\.source \? undefined : this\.type,[\s\S]*palette: Object\.keys\(activePalette\(\)/)
+  assert.match(source, /image: this\.picture/)
+  assert.match(source, /feedback: this\.feedback/)
+  assert.match(source, /new CustomEvent\('proposed', \{ detail: \{ proposal \}/)
+  assert.match(source, /this\.failure = \(err as Error\)\.message/)
+})
+
+test('모델러의 수락·거절 피드백은 다음 인라인 후보 요청에도 같은 Figure 세션에서만 전달한다', () => {
+  const path = fileURLToPath(new URL('../client/pages/figure-modeller-page.ts', import.meta.url))
+  const source = readFileSync(path, 'utf8')
+
+  assert.match(source, /\.feedback=\$\{this\.proposalFeedback\}/)
+  assert.match(source, /this\.proposalFeedback = \[\.\.\.this\.proposalFeedback, feedback\]\.slice\(-5\)/)
+  assert.match(source, /changed\.has\('figure'\).*this\.proposalFeedback = \[\]/s)
+})
+
+test('발행 게이트 수정안은 원본을 바꾸지 않고 후보로만 연다', () => {
+  const historyPath = fileURLToPath(new URL('../client/modeller/figure-history-panel.ts', import.meta.url))
+  const modellerPath = fileURLToPath(new URL('../client/pages/figure-modeller-page.ts', import.meta.url))
+  const sessionPath = fileURLToPath(new URL('../client/modeller/proposal-session.ts', import.meta.url))
+  const history = readFileSync(historyPath, 'utf8')
+  const modeller = readFileSync(modellerPath, 'utf8')
+  const session = readFileSync(sessionPath, 'utf8')
+
+  assert.match(history, /수정안 미리보기/)
+  assert.match(history, /안전하게 수정 적용/)
+  assert.match(history, /new CustomEvent\('apply-sizing-fix'/)
+  assert.match(history, /new CustomEvent\('preview-sizing-fix'/)
+  assert.match(modeller, /@preview-sizing-fix=\$\{\(e: CustomEvent\) => this\.previewSizingFix\(e\.detail\)\}/)
+  assert.match(modeller, /private previewSizingFix\(fix: FigureGateFix\)/)
+  assert.match(modeller, /private applySizingFix\(fix: FigureGateFix\)/)
+  assert.match(modeller, /if \(!fix\.safe \|\| !this\.folded\) return/)
+  assert.match(modeller, /this\.proposalSession = proposalSessions\.openSizingFix\(this\.folded, fix\)/)
+  assert.match(modeller, /private take\(\)[\s\S]*applyProposal\(this\.folded, this\.proposalSession\.source, this\.proposalSession\.picked\)[\s\S]*this\.dirty = true/)
+  assert.match(session, /export function openSizingFix[\s\S]*anchor: \{ \.\.\.\(part\.anchor \?\? \{\}\), \[fix\.axis\]: fix\.to \}/)
+})

package/test/i18n-prefix-guard.test.ts

@@ -28,6 +28,8 @@ import { readFileSync, readdirSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import { join } from 'node:path'
 
+import { CHANNEL_PATHS, CLIP_DRIVES, INTERPOLATIONS } from '@hatiolab/figure-model'
+
 const HERE = fileURLToPath(new URL('.', import.meta.url))
 const TRANSLATIONS = join(HERE, '../translations')
 const CLIENT = join(HERE, '../client')
@@ -120,6 +122,46 @@ test('★ 통이 갈린 짝 — 사다리 이름과 설명', () => {
   assert.ok(source.includes('figure.text.rung-${which}-note'), '사다리 설명을 text 통에서 찾지 않는다')
 })
 
+/*
+  애니메이션 탭도 열거 값을 키에 이어 붙인다. 사다리와 **같은 모양의 함정**이라 같은 못을 박는다.
+
+  갈린 통이 둘이다 — 구동은 이름(`label`)과 설명(`text.…-note`), 경로는 이름(`label`)과
+  단위 설명(`text.…-unit`). 한쪽만 넣으면 화면에 키가 그대로 뜨고, 넓은 앞머리가 위의
+  미사용 검사를 덮어 통과시킨다.
+
+  열거 값을 여기 다시 적지 않고 형식에서 읽는다. 적어 두면 형식에 값을 하나 더할 때
+  검사가 조용히 통과한다.
+*/
+test('★ 열거 값마다 짝이 다 있다 — 구동 · 경로 · 보간', () => {
+  const missing: string[] = []
+  const want = (key: string) => {
+    if (!(key in KO)) missing.push(key)
+  }
+
+  for (const drive of CLIP_DRIVES) {
+    want(`figure.label.drive-${drive}`)
+    want(`figure.text.drive-${drive}-note`)
+  }
+  for (const path of CHANNEL_PATHS) {
+    want(`figure.label.path-${path}`)
+    want(`figure.text.path-${path}-unit`)
+  }
+  for (const one of INTERPOLATIONS) {
+    want(`figure.label.interpolation-${one}`)
+  }
+
+  assert.deepEqual(missing, [], `이어 붙여 부르는 키가 번역에 없다:\n  ${missing.join('\n  ')}`)
+})
+
+test('★ 애니메이션 탭이 그 통에서 찾는다 — 이름은 label, 설명은 text', () => {
+  const source = readFileSync(join(CLIENT, 'modeller/figure-animations.ts'), 'utf-8')
+
+  assert.ok(source.includes("'figure.label.drive-' + drive"), '구동 이름을 label 통에서 찾지 않는다')
+  assert.ok(source.includes("'figure.text.drive-'"), '구동 설명을 text 통에서 찾지 않는다')
+  assert.ok(source.includes("'figure.label.path-' + path"), '경로 이름을 label 통에서 찾지 않는다')
+  assert.ok(source.includes("'figure.text.path-' + channel.path + '-unit'"), '단위 설명을 text 통에서 찾지 않는다')
+})
+
 test('★ 이 가드가 실제로 읽고 있다 — 0이면 검사가 죽은 것이다', () => {
   assert.ok(Object.keys(KO).length > 250, `읽은 키가 ${Object.keys(KO).length}개다`)
   assert.ok(FILES.length > 10, `읽은 화면이 ${FILES.length}개다`)