@things-factory/figure-ui 10.1.6 → 10.1.7

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';

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  /** 형식은 맞으나 정책을 넘은 것. 막지 않는다 — 저작자가 정한다. */\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"]}

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.7",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -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.7",
     "three": "^0.185.1"
   },
-  "gitHead": "963aeb9ac470be5aea05bb5842a0a92afcab6036"
+  "gitHead": "9a036f83f5751f9e4af9180e9a0018f716a4ba27"
 }

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}개다`)

package/translations/en.json

@@ -1,4 +1,7 @@
 {
+  "figure.button.add-channel": "add channel",
+  "figure.button.add-clip": "add clip",
+  "figure.button.add-key": "add key",
   "figure.button.ask": "ask",
   "figure.button.attach-a-picture": "image",
   "figure.button.center-x": "centre X",
@@ -6,14 +9,16 @@
   "figure.button.close": "close",
   "figure.button.delete-figure": "delete",
   "figure.button.discard": "discard",
-  "figure.button.dock": "chat",
   "figure.button.duplicate-part": "duplicate",
   "figure.button.mirror-x": "mirror X",
   "figure.button.mirror-z": "mirror Z",
   "figure.button.move-part-down": "move down",
   "figure.button.move-part-up": "move up",
   "figure.button.new-figure": "new figure",
+  "figure.button.pivot-clear": "part centre",
+  "figure.button.pivot-set": "set",
   "figure.button.release-figure": "release",
+  "figure.button.remove": "remove",
   "figure.button.remove-part": "delete",
   "figure.button.reset-view": "reset",
   "figure.button.revert": "revert",
@@ -39,6 +44,7 @@
   "figure.label.anchor-min-z": "stays on the back face",
   "figure.label.anchor-scale": "grows with the box",
   "figure.label.anchor-span": "touches both faces, fills between",
+  "figure.label.animation": "animation",
   "figure.label.axis-consistency": "visual consistency",
   "figure.label.axis-consistency-short": "consistency",
   "figure.label.axis-depth": "depth",
@@ -55,7 +61,7 @@
   "figure.label.axis-scale": "scale",
   "figure.label.axis-scale-short": "scale",
   "figure.label.axis-width": "width",
-  "figure.label.budget-animations": "animation points",
+  "figure.label.budget-animations": "moving parts",
   "figure.label.budget-groups": "material groups",
   "figure.label.budget-parts": "part count",
   "figure.label.budget-surface": "surfaces outside the palette",
@@ -63,6 +69,12 @@
   "figure.label.budgets": "budgets",
   "figure.label.by-axis": "maturity by axis",
   "figure.label.cast-shadow": "cast shadow",
+  "figure.label.category": "category",
+  "figure.label.channel-path": "moves",
+  "figure.label.channel-pivot": "pivot",
+  "figure.label.channel-target": "part",
+  "figure.label.channels": "channels",
+  "figure.label.clip-name": "clip name",
   "figure.label.coordinate-ground": "coordinate ground",
   "figure.label.corner-round": "corner round",
   "figure.label.detail-L": "detailed",
@@ -74,6 +86,8 @@
   "figure.label.draft": "draft",
   "figure.label.draw-calls-at-100": "draw calls for 100",
   "figure.label.draw-calls-at-10k": "draw calls at 10k instances",
+  "figure.label.drive-hold": "position",
+  "figure.label.drive-loop": "speed",
   "figure.label.emissive": "emissive",
   "figure.label.emissive-color": "lit color",
   "figure.label.environment": "environment",
@@ -98,7 +112,10 @@
   "figure.label.hollow-floor": "floor thickness",
   "figure.label.hollow-wall": "wall thickness",
   "figure.label.intensity": "intensity",
+  "figure.label.interpolation-linear": "smooth",
+  "figure.label.interpolation-step": "stepped",
   "figure.label.keep-round": "section",
+  "figure.label.key-at": "at (s)",
   "figure.label.key-light": "key light",
   "figure.label.maturity": "maturity",
   "figure.label.mode-edit": "edit",
@@ -114,6 +131,9 @@
   "figure.label.part-position": "position (centre)",
   "figure.label.part-size": "size",
   "figure.label.parts": "parts",
+  "figure.label.path-rotation": "rotation",
+  "figure.label.path-scale": "scale",
+  "figure.label.path-translation": "offset",
   "figure.label.placement": "position and size",
   "figure.label.placement-limit": "placement limit",
   "figure.label.preset": "preset",
@@ -164,6 +184,7 @@
   "figure.label.status-colors": "lit colors (lamps · indicators)",
   "figure.label.tab-capability": "capability",
   "figure.label.tab-environment": "environment",
+  "figure.label.tags": "tags",
   "figure.label.tools": "align",
   "figure.label.transparent": "transparent",
   "figure.label.triangles": "triangles",
@@ -178,6 +199,12 @@
   "figure.text.already-released-edit-to-release-again": "already released. edit and save to go back to draft, then release again.",
   "figure.text.anchor-explained": "where this part stays as the box grows. Two touching parts on different faces drift apart as it grows.",
   "figure.text.anchors-are-not-drawn": "a slot is where things are placed, a port is where things enter and leave. neither is drawn on a board; the editor shows their positions",
+  "figure.text.animated-parts-cost": "A moving part is drawn on its own — one more draw call each, and a matrix update every frame.",
+  "figure.text.animated-parts-over": "Over the limit. Nothing is blocked, but many of these on one board will cost frames.",
+  "figure.text.animation-empty-examples": "A turning roller · a sliding door leaf · a rising lift · a blinking beacon.",
+  "figure.text.animation-empty-what-it-is": "This figure does not move yet. A clip is one set of motion across several parts — a door opening is the two leaves sliding apart, not two separate things.",
+  "figure.text.animation-is-driven-by-a-fact": "One clip moves several parts together. On a board a fact sets its value — “this door is 40% open”.",
+  "figure.text.animation-needs-a-named-part": "Add a part first. A channel names the part it moves.",
   "figure.text.ask-create-example": "e.g. a three-tier conveyor sorter",
   "figure.text.ask-revise-example": "e.g. bring it down to two material groups",
   "figure.text.ask-to-create": "create",
@@ -192,6 +219,8 @@
   "figure.text.canvas-appears-once-a-part-exists": "the editing area where you place and move parts. pick one from shapes on the left to start.",
   "figure.text.capability-hand-written": "these capabilities were set by hand and match no rung. the names below are what gets stored",
   "figure.text.capacity-from-repeat": "capacity comes from the repeat setting and the instance size",
+  "figure.text.category-explained": "how the palette groups figures. one per figure — a figure in two groups meets the author twice.",
+  "figure.text.category-placeholder": "e.g. conveyor",
   "figure.text.center-on-x": "move to the centre of the base box on X.",
   "figure.text.center-on-z": "move to the centre of the base box on Z.",
   "figure.text.change-added": "a new part",
@@ -201,6 +230,11 @@
   "figure.text.change-detail": "the detail level",
   "figure.text.change-removed": "a part being removed",
   "figure.text.change-styleKit": "the style kit",
+  "figure.text.channel-target-is-gone": "No such part. If you renamed the part, pick it again here.",
+  "figure.text.clip-name-is-how-it-is-driven": "An instance drives the clip by this name.",
+  "figure.text.clip-name-taken": "Another clip already has this name. Instances drive by name, so two cannot share one.",
+  "figure.text.clip-needs-a-channel": "With no channel there is nothing to move.",
+  "figure.text.clip-needs-a-name": "Without a name nothing can drive it.",
   "figure.text.collapse-parts-pane": "collapse the part list",
   "figure.text.collapse-properties-pane": "collapse the property pane",
   "figure.text.coordinate-ground-explained": "draws the origin and a grid on the floor",
@@ -208,14 +242,16 @@
   "figure.text.designate-in-properties": "nothing designated yet. select a part and set its role in the properties tab",
   "figure.text.detail-level-explained": "declares how detailed this figure is meant to be. S simple suits signs and posts, M normal suits most equipment, L detailed suits the large equipment a view is built around. the level sets the part limit, and maturity checks whether the figure lives up to it.",
   "figure.text.discard-changes-and-start-new": "there are unsaved changes. discard them and start a new figure?",
-  "figure.text.dock-explained": "talk to the authoring assistant. it reads the figure you have open and offers candidates.",
-  "figure.text.dock-placeholder": "say what to make or change (Shift+Enter for a new line, Enter to send)",
   "figure.text.does-not-block": "does not block",
+  "figure.text.drive-explained": "How the value an instance gives is read.",
+  "figure.text.drive-hold-note": "Time is held. The value an instance gives is a position from 0 to 1 — how far open a door is.",
+  "figure.text.drive-loop-note": "Time runs. The value an instance gives is a speed — a turning roller works this way.",
   "figure.text.emissive-explained": "the surface lights itself. 0 means it is not a lamp. it does not spill onto its surroundings.",
   "figure.text.environment-explained": "sets what metal surfaces reflect. it does not change the shape.",
   "figure.text.expand-parts-pane": "expand the part list",
   "figure.text.expand-properties-pane": "expand the property pane",
   "figure.text.figure-display-name": "display name",
+  "figure.text.find-by-this-tag": "find by this tag",
   "figure.text.fits-n-instances": "up to {n}",
   "figure.text.floor-explained": "overlaps the coordinate ground, so usually off",
   "figure.text.follow-camera-explained": "turn off to fix the shadow direction",
@@ -228,10 +264,12 @@
   "figure.text.hide-this-part": "hide this part while you work. not saved",
   "figure.text.how-many-fit": "how many fit on one board before it slows down",
   "figure.text.instances-unit": "instances",
+  "figure.text.interpolation-explained": "How the gap between keys is filled.",
   "figure.text.keep-round-cost": "1 draw call",
   "figure.text.keep-round-merged": "merged into a group",
   "figure.text.keep-round-off": "off",
   "figure.text.keep-round-on": "keep round",
+  "figure.text.keys-must-rise": "Each key must come after the one before it.",
   "figure.text.limit-comes-from-level": "the detail level sets this limit.",
   "figure.text.maturity-blocked-no-binding": "the format has no way to connect a state value to a part yet, and the renderer does not read it.",
   "figure.text.maturity-blocked-no-parts": "nothing to measure — there are no parts.",
@@ -259,12 +297,15 @@
   "figure.text.other-segment-count": "enter a value",
   "figure.text.part-limit-reached": "the detail level allows no more parts — raise the level or remove a part.",
   "figure.text.part-limit-reached-short": "level {level} allows {limit} parts. Raise the level or remove a part.",
+  "figure.text.path-rotation-unit": "Euler degrees — the same convention as the part's own rotation.",
+  "figure.text.path-scale-unit": "A ratio. 1 is full size; 0 makes the part vanish.",
+  "figure.text.path-translation-unit": "Offset from where the part sits. 0 leaves it in place.",
   "figure.text.pick-a-shape-above-to-start": "pick a shape above to add the first part.",
   "figure.text.picked-changes-do-not-validate": "the selected changes do not make a valid figure",
   "figure.text.picture-is-for-proportions": "used for proportions and form, not for surface detail.",
+  "figure.text.pivot-defaults-to-the-part-centre": "Left unset, the part turns about its own centre. Coordinates are local to the part.",
   "figure.text.preview-blocked-by-errors": "cannot build — the figure breaks the format. the maturity tab has the reason.",
   "figure.text.preview-needs-a-part": "shows how it looks placed on a board. appears once you make a part.",
-  "figure.text.proposal-had-no-source": "the candidate carried no source, so it cannot be taken.",
   "figure.text.put-on-floor": "drop it to the floor (Z=0).",
   "figure.text.release-needs-a-save-first": "there are unsaved changes. a release publishes what was saved, so save first.",
   "figure.text.releasing": "releasing…",
@@ -284,7 +325,7 @@
   "figure.text.rung-none-note": "takes nothing. most figures belong here",
   "figure.text.save-the-figure-before-releasing": "this figure has not been saved yet. save it and you can release it.",
   "figure.text.saving-figure": "saving",
-  "figure.text.search-figure-by-name-or-type": "search by name or type",
+  "figure.text.search-figure": "search by name, type, description, category or tag",
   "figure.text.select-a-part-to-edit": "select a part to edit it here.",
   "figure.text.show-all-parts": "show all",
   "figure.text.show-this-part": "show this part again",
@@ -295,8 +336,11 @@
   "figure.text.sizing-stretch-explained": "only one axis stretches — like a frame, a belt or a rail.",
   "figure.text.slots-need-capability": "select \"holds things\" or above before designating a slot",
   "figure.text.snap-explained": "rounds position and size to the grid — the same spacing you see on the canvas.",
+  "figure.text.tags-explained": "for the finding a single category cannot do. a figure may carry several — a conveyor that is also outbound. separate them with commas.",
+  "figure.text.tags-placeholder": "e.g. outbound, automatic, level 2",
   "figure.text.thumbnail-not-made-yet": "no thumbnail yet",
   "figure.text.triangle-count": "{count} triangles",
+  "figure.text.two-keys-at-least": "A channel needs two keys. With one it is not motion, it is a single pose.",
   "figure.text.type-name-already-taken": "the type name {type} is already in use. pick another one — it cannot be changed later.",
   "figure.text.type-name-cannot-change": "the type name is a stored identifier and cannot be changed after creation.",
   "figure.text.unsaved-changes": "unsaved",

package/translations/ja.json

@@ -194,6 +194,7 @@
   "figure.text.expand-parts-pane": "expand the part list",
   "figure.text.expand-properties-pane": "expand the property pane",
   "figure.text.figure-display-name": "display name",
+  "figure.text.find-by-this-tag": "find by this tag",
   "figure.text.fits-n-instances": "up to {n}",
   "figure.text.floor-explained": "overlaps the coordinate ground, so usually off",
   "figure.text.follow-camera-explained": "turn off to fix the shadow direction",
@@ -253,7 +254,7 @@
   "figure.text.revert-to-version-confirm": "第{version}版に戻します。作業中の内容がその版のものに変わります。続けますか？",
   "figure.text.save-the-figure-before-releasing": "まだ保存されていません。保存すると公開できます。",
   "figure.text.saving-figure": "saving",
-  "figure.text.search-figure-by-name-or-type": "search by name or type",
+  "figure.text.search-figure": "search by name, type, description, category or tag",
   "figure.text.select-a-part-to-edit": "select a part to edit it here.",
   "figure.text.show-all-parts": "show all",
   "figure.text.show-this-part": "show this part again",